/* ==========================================================
   LORENZO – Luxury Brands · Estilos v2 (2026)
   Móvil primero. Paleta: negro, blanco, porcelana y oro viejo.
   El motivo de marca es la "gota": el punto dorado del logotipo.
   ========================================================== */

:root {
  --negro: #000000;
  --tinta: #1A1917;          /* texto principal */
  --gris: #5C5853;           /* texto secundario (7:1 sobre blanco) */
  --linea: #E3DFD9;
  --porcelana: #F3F1EE;      /* fondo de fotos de producto */
  --blanco: #FFFFFF;
  --oro: #B08D57;            /* decorativo: gota, detalles */
  --oro-texto: #7A5E2E;      /* oro legible sobre blanco (5.9:1) */
  --oro-claro: #D9BF8C;      /* oro legible sobre negro */
  --wa: #1FAF57;
  --rojo: #9E2B25;

  --serif: 'Bodoni Moda', 'Didot', 'Bodoni 72', Georgia, serif;
  --sans: 'Urbanist', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --gutter: 16px;
  --ancho: 1240px;
  --radio: 2px;
  --sombra: 0 10px 40px rgb(0 0 0 / .12);
  --t: 220ms cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 72px; }
body {
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--tinta);
  background: var(--blanco);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
:focus-visible { outline: 2px solid var(--oro); outline-offset: 3px; }
#vista:focus, h1:focus { outline: none; }

.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: absolute; left: 8px; top: -60px; z-index: 100; background: var(--negro); color: var(--blanco); padding: 10px 14px; }
.saltar:focus { top: 8px; }

.demo {
  background: var(--porcelana); color: var(--gris); font-size: .8125rem;
  text-align: center; padding: 6px var(--gutter);
}

/* ---------- La gota (punto dorado del logotipo) ---------- */
.gota {
  display: inline-block; width: .22em; height: .22em; border-radius: 50%;
  background: var(--oro); margin-left: .04em; vertical-align: baseline;
}
.gota--mini { width: 8px; height: 8px; margin: 0 8px 0 0; vertical-align: middle; }
.gota--cargando { width: 14px; height: 14px; animation: latido 1.1s ease-in-out infinite; }
@keyframes latido { 50% { transform: scale(.55); opacity: .5; } }

/* ---------- Logotipo tipográfico ---------- */
.logotipo {
  font-family: var(--sans); font-weight: 900; letter-spacing: -.045em;
  font-size: 1.75rem; line-height: 1; color: var(--negro); white-space: nowrap;
}
.logotipo--claro { color: var(--blanco); }

/* ---------- Cabecera ---------- */
.cabecera {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  height: 60px; padding: 0 var(--gutter);
  background: rgb(255 255 255 / .92); backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--linea);
}
.cabecera__logo { text-decoration: none; }
.cabecera__nav { display: flex; align-items: center; gap: 4px; }
.cabecera__nav > a:not(.nav-icono) {
  text-decoration: none; font-weight: 600; font-size: .9375rem; padding: 10px 10px;
  border-bottom: 2px solid transparent;
}
.cabecera__nav > a.activo { border-bottom-color: var(--oro); }
.nav-icono { position: relative; display: grid; place-items: center; width: 44px; height: 44px; }
.nav-icono.activo svg path { fill: var(--oro); stroke: var(--oro); }
.burbuja {
  position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; background: var(--negro); color: var(--blanco);
  font-size: .6875rem; font-weight: 700; display: grid; place-items: center;
}
.burbuja[hidden] { display: none; }

main { min-height: 70vh; }
.cargando { display: grid; place-items: center; min-height: 60vh; }

/* ---------- Botones ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 26px; border-radius: var(--radio);
  font-weight: 600; font-size: 1rem; text-decoration: none; letter-spacing: .01em;
  border: 1px solid transparent; transition: background var(--t), color var(--t), border-color var(--t), transform var(--t);
}
.boton:active { transform: scale(.98); }
.boton[disabled] { opacity: .45; pointer-events: none; }
.boton--oscuro { background: var(--negro); color: var(--blanco); }
.boton--oscuro:hover { background: #2b2925; }
.boton--claro { background: var(--blanco); color: var(--negro); }
.boton--claro:hover { background: var(--porcelana); }
.boton--borde { border-color: var(--tinta); color: var(--tinta); }
.boton--borde:hover { background: var(--tinta); color: var(--blanco); }
.boton--borde.activo { border-color: var(--oro); color: var(--oro-texto); }
.boton--borde-claro { border-color: rgb(255 255 255 / .55); color: var(--blanco); }
.boton--borde-claro:hover { border-color: var(--blanco); background: rgb(255 255 255 / .08); }
.boton--oro { background: var(--oro-claro); color: var(--negro); }
.boton--oro:hover { background: #e6d1a6; }
.boton--wa { background: var(--wa); color: var(--blanco); width: 100%; }
.boton--wa:hover { background: #179748; }
.boton-linea {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 4px;
  font-weight: 600; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--oro);
}
.icono-btn {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  color: var(--tinta); transition: color var(--t), background var(--t);
}
.icono-btn:hover { background: var(--porcelana); }
.icono-btn[disabled] { opacity: .35; pointer-events: none; }
.icono-btn.activo { color: var(--oro-texto); }
.js-fav.activo svg path { fill: var(--oro); stroke: var(--oro); }
.icono-btn--grande { width: 52px; height: 52px; border: 1px solid var(--linea); border-radius: var(--radio); }

/* ---------- Cabecera de portada: carrusel marca + promociones ---------- */
.portada { position: relative; background: var(--negro); color: var(--blanco); overflow: hidden; }
.portada::before { /* halo cálido detrás de la gota */
  content: ''; position: absolute; width: 90vmin; height: 90vmin; right: -30vmin; top: -25vmin;
  background: radial-gradient(circle, rgb(176 141 87 / .28), transparent 62%);
  pointer-events: none;
}
.portada__pista { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; position: relative; }
.portada__pista::-webkit-scrollbar { display: none; }
.diapo {
  flex: 0 0 100%; scroll-snap-align: start; position: relative;
  min-height: min(58vh, 520px); min-height: min(58svh, 520px); padding: 40px var(--gutter) 28px;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 0;
  background-size: cover; background-position: center;
}
.diapo--promo { display: grid; align-content: end; gap: 20px; }
.diapo--imagen { background-image: linear-gradient(90deg, rgb(0 0 0 / .8), rgb(0 0 0 / .25)), var(--banner); }
.portada__controles { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 var(--gutter) 16px; position: relative; }
.portada__puntos { display: flex; gap: 2px; }
.heroe__marca {
  font-family: var(--sans); font-weight: 900; letter-spacing: -.06em; line-height: .8;
  font-size: clamp(4.5rem, 23vw, 13rem);
  margin-left: -.04em; margin-bottom: 28px; position: relative;
}
.gota--heroe {
  width: .2em; height: .2em; margin-left: .03em;
  animation: caida 1.3s cubic-bezier(.55, 0, .45, 1) .25s both;
}
@keyframes caida {
  0% { transform: translateY(-1.6em) scale(.6, 1.25); opacity: 0; }
  55% { transform: translateY(0) scale(1.18, .78); opacity: 1; }
  72% { transform: translateY(-.06em) scale(.94, 1.06); }
  100% { transform: none; }
}
.heroe__titulo {
  font-family: var(--serif); font-weight: 400; font-size: clamp(1.375rem, 5.2vw, 2.25rem);
  line-height: 1.22; max-width: 26ch; margin-bottom: 28px; position: relative;
}
.heroe__acciones { display: flex; flex-wrap: wrap; gap: 12px; position: relative; }
.heroe__acciones .boton { flex: 1 1 200px; }

/* ---------- Diapositivas de promoción ---------- */
.promo__etiqueta { color: var(--oro-claro); font-weight: 600; font-size: .9375rem; margin-bottom: 4px; }
.promo__titulo { font-family: var(--serif); font-weight: 500; font-size: clamp(1.75rem, 7vw, 3rem); line-height: 1.05; margin-bottom: 8px; }
.promo__desc { color: #cfcac2; max-width: 46ch; margin-bottom: 16px; }
.cuenta { font-variant-numeric: tabular-nums; color: var(--oro-claro); margin-bottom: 20px; font-size: 1.0625rem; }
.cuenta b { font-weight: 800; font-size: 1.5rem; color: var(--blanco); margin-left: 2px; }
.promo__frascos { display: flex; gap: 10px; }
.promo__frascos img { width: 31%; aspect-ratio: 1; object-fit: contain; background: var(--porcelana); border-radius: var(--radio); }
.punto { width: 28px; height: 24px; position: relative; }
.punto::after { content: ''; position: absolute; inset: 11px 4px; background: #5f5b55; transition: background var(--t); }
.punto.activo::after { background: var(--oro-claro); }

/* ---------- Índice de categorías (tipográfico) ---------- */
.indice { border-bottom: 1px solid var(--linea); }
.indice__lista {
  list-style: none; padding: 18px var(--gutter); display: flex; gap: 6px 26px;
  overflow-x: auto; scrollbar-width: none;
}
.indice__lista::-webkit-scrollbar { display: none; }
.indice__item {
  font-family: var(--serif); font-size: 1.625rem; white-space: nowrap; text-decoration: none;
  display: inline-block; padding: 4px 0; border-bottom: 1px solid transparent;
}
.indice__item:hover { border-bottom-color: var(--oro); }

/* ---------- Secciones ---------- */
.seccion { padding: 44px 0 8px; max-width: var(--ancho); margin: 0 auto; }
.seccion__cabecera { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 0 var(--gutter); margin-bottom: 18px; }
.titulo-seccion { font-family: var(--serif); font-weight: 500; font-size: clamp(1.625rem, 5vw, 2.25rem); line-height: 1.1; }
.titulo-pagina { font-family: var(--serif); font-weight: 500; font-size: clamp(2rem, 8vw, 3.25rem); line-height: 1.05; }
.seccion__sub { color: var(--gris); font-size: .875rem; margin-top: 2px; }
.seccion__controles { display: flex; align-items: center; gap: 6px; flex: none; }
.seccion__controles .enlace-ver { margin-right: 6px; }
.seccion--sin-flechas .flecha { display: none; }

/* Flechas de carrusel: ‹ › */
.flecha {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--linea); color: var(--tinta); background: var(--blanco);
  transition: border-color var(--t), opacity var(--t), background var(--t);
}
.flecha:hover:not(:disabled) { border-color: var(--tinta); }
.flecha:disabled { opacity: .3; cursor: default; }
.flecha--sig svg { transform: scaleX(-1); }
.flecha--clara { background: transparent; color: var(--blanco); border-color: rgb(255 255 255 / .35); }
.flecha--clara:hover:not(:disabled) { border-color: var(--blanco); }
.enlace-ver { font-weight: 600; font-size: .9375rem; text-underline-offset: 4px; text-decoration-color: var(--oro); white-space: nowrap; }

.carril {
  display: grid; grid-auto-flow: column; grid-auto-columns: 44%; gap: 14px;
  overflow-x: auto; scroll-snap-type: x proximity; padding: 0 var(--gutter) 12px;
  scroll-padding-left: var(--gutter); scrollbar-width: thin;
}
.carril > * { scroll-snap-align: start; }

/* ---------- Tarjeta de producto ---------- */
.tarjeta { position: relative; min-width: 0; }
.tarjeta__enlace { display: block; text-decoration: none; }
.tarjeta__foto { position: relative; aspect-ratio: 1; background: var(--porcelana); border-radius: var(--radio); overflow: hidden; margin-bottom: 12px; }
.tarjeta__foto img { width: 100%; height: 100%; object-fit: contain; padding: 8%; transition: transform 500ms cubic-bezier(.2, .7, .2, 1); mix-blend-mode: multiply; }
.tarjeta__enlace:hover .tarjeta__foto img { transform: scale(1.04); }
.tarjeta--agotado .tarjeta__foto img { opacity: .45; filter: grayscale(1); }
.tarjeta__insignias { position: absolute; left: 8px; top: 8px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.tarjeta__marca { font-size: .8125rem; font-weight: 600; color: var(--gris); }
.tarjeta__nombre { font-family: var(--serif); font-weight: 500; font-size: 1.1875rem; line-height: 1.15; margin: 2px 0 4px; overflow-wrap: anywhere; }
.tarjeta__meta { font-size: .8125rem; color: var(--gris); margin-bottom: 6px; }
.tarjeta__acciones { position: absolute; top: 4px; right: 4px; display: flex; flex-direction: column; }
.tarjeta__acciones .icono-btn { width: 44px; height: 44px; background: rgb(255 255 255 / .85); margin-bottom: 4px; }

.insignia {
  font-size: .6875rem; font-weight: 700; letter-spacing: .02em; line-height: 1;
  padding: 6px 8px; border-radius: var(--radio); background: var(--blanco); color: var(--tinta);
}
.insignia--oferta { background: var(--negro); color: var(--oro-claro); }
.insignia--nuevo { background: var(--oro-claro); color: var(--negro); }
.insignia--ultimas { background: var(--blanco); color: var(--rojo); box-shadow: inset 0 0 0 1px currentColor; }
.insignia--agotado { background: var(--gris); color: var(--blanco); }
.insignia--exclusivo { background: var(--blanco); color: var(--oro-texto); box-shadow: inset 0 0 0 1px var(--oro); }

.precio { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-variant-numeric: tabular-nums; }
.precio__actual { font-weight: 700; font-size: 1.0625rem; }
.precio__antes { color: var(--gris); font-size: .875rem; }
.precio__consultar { font-size: .875rem; font-weight: 600; color: var(--oro-texto); }
.precio--grande .precio__actual { font-size: 1.75rem; }
.precio--grande .precio__antes { font-size: 1.0625rem; }
.precio--grande .precio__consultar { font-size: 1.125rem; }

/* ---------- Marcas ---------- */
.marcas .titulo-seccion { padding: 0 var(--gutter); margin-bottom: 14px; }
.marcas__lista { list-style: none; padding: 0 var(--gutter); display: flex; flex-wrap: wrap; gap: 4px 22px; }
.marcas__lista a { font-family: var(--serif); font-size: 1.375rem; text-decoration: none; display: inline-block; padding: 4px 0; }
.marcas__lista a:hover { color: var(--oro-texto); }
.marcas__lista sup { font-family: var(--sans); font-size: .6875rem; color: var(--gris); margin-left: 3px; }

/* ---------- Quiz teaser ---------- */
.quiz-teaser {
  margin: 48px var(--gutter) 0; padding: 40px 24px; text-align: center;
  background: var(--porcelana); border-radius: var(--radio);
}
.quiz-teaser .gota { width: 14px; height: 14px; margin-bottom: 14px; }
.quiz-teaser__titulo { font-family: var(--serif); font-weight: 500; font-size: clamp(1.75rem, 6vw, 2.5rem); line-height: 1.1; margin-bottom: 8px; }
.quiz-teaser p { color: var(--gris); margin: 0 auto 22px; max-width: 34ch; }

/* ---------- Familia Lorenzo (fotos de Instagram) ---------- */
.familia__foto {
  position: relative; display: block; width: 100%; height: 100%; aspect-ratio: 4 / 5;
  background: var(--porcelana); overflow: hidden; border-radius: var(--radio);
}
.familia__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms cubic-bezier(.2, .7, .2, 1); }
.familia__foto:hover img { transform: scale(1.04); }
.familia__foto[disabled] { cursor: default; }
.familia__tipo {
  position: absolute; left: 8px; bottom: 8px; padding: 5px 8px; border-radius: var(--radio);
  background: rgb(0 0 0 / .62); color: var(--blanco); font-size: .75rem; font-weight: 600;
}
.foto-ejemplo { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 6px; color: var(--gris); font-size: .8125rem; border: 1px dashed #c9c3ba; }
.foto-ejemplo svg { width: 28px; height: 28px; color: var(--oro); }

/* Franja intercalada entre carruseles */
.franja-familia { max-width: var(--ancho); margin: 44px auto 0; padding: 32px var(--gutter); background: var(--negro); color: var(--blanco); display: grid; gap: 20px; }
.franja-familia .titulo-seccion { margin-bottom: 6px; }
.franja-familia p { color: #cfcac2; max-width: 40ch; margin-bottom: 12px; }
.franja-familia .enlace-ver { color: var(--oro-claro); }
.franja-familia__fotos { list-style: none; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 38%; gap: 10px; overflow-x: auto; scrollbar-width: none; }
.franja-familia__fotos::-webkit-scrollbar { display: none; }
.franja-familia .familia__tipo { display: none; }
.franja-familia .foto-ejemplo { border-color: #4a463f; color: #a9a39a; }
.franja-familia .familia__foto { background: #1c1b19; }

/* Sección completa: mosaico */
.familia { max-width: var(--ancho); margin: 0 auto; padding: 56px var(--gutter) 8px; }
.familia__cabecera p { color: var(--gris); max-width: 52ch; margin: 6px 0 20px; }
.familia__mosaico { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.familia__item--grande { grid-column: span 2; }
.familia__item--grande .familia__foto { aspect-ratio: 16 / 11; }
.familia__ig { margin-top: 22px; }

/* Visor de foto ampliada */
.visor { border: 0; padding: 0; background: transparent; max-width: min(92vw, 720px); max-height: 92vh; color: var(--blanco); }
.visor::backdrop { background: rgb(0 0 0 / .86); }
.visor img { display: block; max-width: 100%; max-height: 76vh; margin: 0 auto; object-fit: contain; }
.visor__cerrar { position: absolute; top: 8px; right: 8px; background: rgb(0 0 0 / .55); color: var(--blanco); }
.visor__pie { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 2px 0; }
.visor__texto { font-family: var(--serif); font-size: 1.125rem; }
.visor__ig { color: var(--oro-claro); font-weight: 700; white-space: nowrap; }
.visor__ig[hidden] { display: none; }

@media (min-width: 720px) {
  .franja-familia { grid-template-columns: 1fr 2fr; align-items: center; padding: 40px; border-radius: var(--radio); }
  .franja-familia__fotos { grid-auto-columns: 30%; }
  .familia__mosaico { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .familia__item--grande { grid-row: span 2; }
  .familia__item--grande .familia__foto { aspect-ratio: auto; }
}
/* ---------- Confianza ---------- */
.confianza { max-width: var(--ancho); margin: 0 auto; padding: 56px var(--gutter) 24px; }
.confianza .titulo-seccion { margin-bottom: 22px; }
.garantias { display: grid; gap: 0; border-top: 1px solid var(--linea); }
.garantias > div { padding: 18px 0; border-bottom: 1px solid var(--linea); display: grid; gap: 4px; }
.garantias dt { font-weight: 700; }
.garantias dd { color: var(--gris); }
.garantias a { color: var(--tinta); text-decoration-color: var(--oro); text-underline-offset: 3px; font-weight: 600; }
.testimonios { display: grid; gap: 14px; margin-top: 32px; }
.testimonio { border-left: 2px solid var(--oro); padding: 4px 0 4px 18px; }
.testimonio p { font-family: var(--serif); font-size: 1.1875rem; line-height: 1.45; margin-bottom: 8px; }
.testimonio footer { font-size: .875rem; color: var(--gris); }

/* ---------- Catálogo ---------- */
.catalogo, .favoritos, .quiz { max-width: var(--ancho); margin: 0 auto; padding: 24px var(--gutter) 40px; }
.catalogo__cabecera { margin-bottom: 18px; }
.catalogo__cabecera .titulo-pagina { margin-bottom: 16px; }
.buscador { position: relative; margin-bottom: 14px; }
.buscador svg { position: absolute; left: 14px; top: 50%; translate: 0 -50%; color: var(--gris); }
.buscador input {
  width: 100%; height: 52px; padding: 0 16px 0 46px; font-size: 1rem;
  border: 1px solid var(--linea); border-radius: var(--radio); background: var(--blanco);
  transition: border-color var(--t);
}
.buscador input:focus { border-color: var(--tinta); outline: none; box-shadow: 0 0 0 3px rgb(176 141 87 / .25); }
.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)); padding: 2px var(--gutter) 6px; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px;
  border: 1px solid var(--linea); border-radius: 20px; font-weight: 600; font-size: .9375rem; text-decoration: none; white-space: nowrap;
}
.chip:hover { border-color: var(--tinta); }
.chip.activo { background: var(--negro); color: var(--blanco); border-color: var(--negro); }
.catalogo__barra { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 10px; }
.orden select {
  height: 44px; padding: 0 34px 0 12px; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--blanco);
  appearance: none; -webkit-appearance: none; font-weight: 600; font-size: 1rem; /* 16px: evita el zoom automático de iPhone */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='16' height='16'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%231A1917' stroke-width='1.8'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
}
.catalogo__resultado { color: var(--gris); font-size: .875rem; margin-top: 10px; }
.rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 14px; }
.catalogo__mas { display: flex; justify-content: center; padding: 32px 0 0; }
.centinela { height: 1px; }
.vacio { grid-column: 1 / -1; text-align: center; padding: 48px 16px; color: var(--gris); display: grid; justify-items: center; gap: 16px; }
.vacio--pagina { min-height: 60vh; align-content: center; }

/* ---------- Hojas (filtros y pedido) ---------- */
.hoja {
  border: 0; padding: 0; max-width: 100%; max-height: 100%;
  width: 100%; margin: auto 0 0; border-radius: 14px 14px 0 0; background: var(--blanco); color: var(--tinta);
}
.hoja::backdrop { background: rgb(0 0 0 / .45); }
.hoja[open] { animation: subir 260ms cubic-bezier(.2, .7, .2, 1); }
@keyframes subir { from { transform: translateY(30px); opacity: 0; } }
.hoja__cuerpo { display: flex; flex-direction: column; max-height: 88vh; max-height: 88svh; }
.hoja__cabecera { display: flex; justify-content: space-between; align-items: center; padding: 10px 8px 10px var(--gutter); border-bottom: 1px solid var(--linea); }
.hoja__cabecera h2 { font-family: var(--serif); font-weight: 500; font-size: 1.5rem; }
.hoja__pie { display: flex; gap: 10px; padding: 14px var(--gutter) calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--linea); }
.hoja__pie .boton { flex: 1; }
.hoja__pie--columna { flex-direction: column; align-items: stretch; }
.hoja__pie[hidden] { display: none; }
.filtro { border: 0; padding: 18px var(--gutter) 6px; border-bottom: 1px solid var(--linea); overflow-y: auto; }
.hoja__cuerpo > .filtro:last-of-type { border-bottom: 0; }
form.hoja__cuerpo { overflow-y: auto; }
.filtro legend { font-weight: 700; margin-bottom: 10px; padding: 0; float: left; width: 100%; }
.filtro__ops { clear: both; display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 10px; }
.filtro__ops--largo { max-height: 220px; overflow-y: auto; }
.opcion { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border: 1px solid var(--linea); border-radius: 20px; cursor: pointer; font-size: .9375rem; }
.opcion input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.opcion small { color: var(--gris); }
.opcion:has(input:checked) { background: var(--negro); color: var(--blanco); border-color: var(--negro); }
.opcion:has(input:checked) small { color: var(--oro-claro); }
.opcion:has(input:focus-visible) { outline: 2px solid var(--oro); outline-offset: 2px; }
.filtro__precio { clear: both; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding-bottom: 14px; }
.filtro__precio label { display: grid; gap: 4px; font-size: .875rem; color: var(--gris); }
.filtro__precio input { height: 46px; padding: 0 12px; border: 1px solid var(--linea); border-radius: var(--radio); color: var(--tinta); }

.pedido__lista { list-style: none; padding: 0 var(--gutter); overflow-y: auto; flex: 1; }
.linea { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--linea); }
.linea img { width: 64px; height: 64px; object-fit: contain; background: var(--porcelana); mix-blend-mode: multiply; }
.linea__nombre { font-family: var(--serif); font-size: 1.0625rem; line-height: 1.15; }
.linea__meta { font-size: .8125rem; color: var(--gris); }
.linea__precio { font-weight: 700; font-size: .9375rem; margin-top: 2px; }
.cantidad { display: flex; align-items: center; gap: 2px; font-weight: 700; }
.cantidad .icono-btn { width: 36px; height: 36px; border: 1px solid var(--linea); }
.cantidad span { min-width: 22px; text-align: center; }
.pedido__total { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; font-size: 1.0625rem; margin-bottom: 4px; }
.pedido__total strong { font-size: 1.5rem; }
.pedido__total small { width: 100%; text-align: right; color: var(--gris); }

/* Entrega: envío o recojo */
.entrega { border: 0; padding: 0; margin: 4px 0 2px; display: grid; gap: 10px; }
.entrega legend { font-weight: 700; padding: 0; margin-bottom: 8px; }
.entrega__ops { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.entrega__op { position: relative; display: flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 10px; text-align: center;
  border: 1px solid var(--linea); border-radius: var(--radio); font-weight: 600; font-size: .9375rem; cursor: pointer; }
.entrega__op input { position: absolute; opacity: 0; inset: 0; cursor: pointer; margin: 0; }
.entrega__op:has(input:checked) { background: var(--negro); color: var(--blanco); border-color: var(--negro); }
.entrega__op:has(input:focus-visible) { outline: 2px solid var(--oro); outline-offset: 2px; }
.entrega__envio { display: grid; gap: 4px; }
.entrega__envio[hidden], .entrega__tienda[hidden], .entrega__error[hidden] { display: none; }
.entrega__envio label { font-size: .875rem; color: var(--gris); }
.entrega__envio input { height: 46px; padding: 0 12px; border: 1px solid var(--linea); border-radius: var(--radio); font-size: 1rem; }
.entrega__envio input:focus { outline: none; border-color: var(--tinta); box-shadow: 0 0 0 3px rgb(176 141 87 / .25); }
.entrega__error { color: var(--rojo); font-size: .875rem; font-weight: 600; }
.entrega__tienda { font-size: .875rem; color: var(--gris); background: var(--porcelana); padding: 10px 12px; }
@supports not selector(:has(*)) { .entrega__op input { position: static; opacity: 1; margin-right: 8px; } }

/* ---------- Ficha de producto ---------- */
.ficha { max-width: var(--ancho); margin: 0 auto; padding: 8px 0 24px; }
.volver { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 var(--gutter) 0 10px; font-weight: 600; text-decoration: none; color: var(--gris); }
.quiz .volver { padding-left: 0; margin-left: -6px; }
.ficha__galeria { position: relative; }
.galeria { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; background: var(--porcelana); scrollbar-width: none; }
.galeria::-webkit-scrollbar { display: none; }
.galeria img { flex: 0 0 100%; aspect-ratio: 1; object-fit: contain; padding: 10%; scroll-snap-align: center; mix-blend-mode: multiply; }
.galeria__miniaturas { display: flex; gap: 8px; padding: 10px var(--gutter) 0; }
.galeria__miniaturas button { width: 56px; height: 56px; background: var(--porcelana); border: 1px solid var(--linea); }
.galeria__miniaturas img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.ficha__insignias { position: absolute; left: var(--gutter); top: 14px; display: flex; flex-wrap: wrap; gap: 6px; }
.ficha__info { padding: 22px var(--gutter) 0; }
.ficha__marca a { font-weight: 700; font-size: .9375rem; color: var(--oro-texto); text-decoration: none; }
.ficha__nombre { font-family: var(--serif); font-weight: 500; font-size: clamp(2.25rem, 10vw, 3.75rem); line-height: 1; margin: 4px 0 8px; overflow-wrap: anywhere; }
.ficha__meta { color: var(--gris); margin-bottom: 16px; }
.stock { display: flex; align-items: center; font-weight: 600; font-size: .9375rem; margin-top: 8px; }
.stock--ultimas { color: var(--rojo); }
.stock--ultimas .gota { background: var(--rojo); }
.stock--agotado { color: var(--gris); }
.stock--agotado .gota { background: var(--gris); }
.ficha__acciones { display: grid; gap: 10px; margin: 22px 0 26px; }
.ficha__secundarias { display: flex; gap: 10px; }
.ficha__secundarias .boton { flex: 1; }
.ficha__desc { font-family: var(--serif); font-size: 1.1875rem; line-height: 1.6; max-width: 60ch; margin-bottom: 28px; }
.ficha__ocasion { margin-top: 20px; color: var(--gris); }

/* Pirámide olfativa: capas que se ensanchan hacia el fondo */
.piramide { display: grid; gap: 6px; }
.piramide__capa { display: grid; grid-template-columns: 74px 1fr; gap: 14px; align-items: center; }
.piramide__forma { height: 54px; background: var(--negro); justify-self: center; }
.piramide__capa--0 .piramide__forma { clip-path: polygon(50% 0, 100% 100%, 0 100%); width: 40px; background: var(--oro); }
.piramide__capa--1 .piramide__forma { width: 58px; clip-path: polygon(16% 0, 84% 0, 100% 100%, 0 100%); background: #8C7148; }
.piramide__capa--2 .piramide__forma { width: 74px; clip-path: polygon(11% 0, 89% 0, 100% 100%, 0 100%); background: var(--tinta); }
.piramide__titulo { font-weight: 700; }
.piramide__ayuda { font-weight: 400; color: var(--gris); font-size: .8125rem; display: block; }
.piramide__notas { font-family: var(--serif); font-size: 1.0625rem; }

/* ---------- Quiz ---------- */
.quiz .titulo-pagina { margin: 4px 0 18px; }
.quiz__progreso { height: 2px; background: var(--linea); margin-bottom: 28px; }
.quiz__progreso span { display: block; height: 100%; width: 0; background: var(--oro); transition: width 400ms cubic-bezier(.2, .7, .2, 1); }
.quiz__pregunta { border: 0; padding: 0; }
.quiz__pregunta legend { font-family: var(--serif); font-size: clamp(1.75rem, 7vw, 2.5rem); line-height: 1.1; margin-bottom: 20px; padding: 0; }
.quiz__paso { display: block; font-family: var(--sans); font-size: .875rem; color: var(--gris); margin-bottom: 6px; }
.quiz__ops { display: grid; gap: 10px; margin-bottom: 18px; }
.quiz__op {
  min-height: 58px; padding: 0 20px; text-align: left; font-weight: 600; font-size: 1.0625rem;
  border: 1px solid var(--linea); border-radius: var(--radio); transition: border-color var(--t), background var(--t);
}
.quiz__op:hover, .quiz__op:focus-visible { border-color: var(--tinta); background: var(--porcelana); }
.quiz .rejilla { margin: 18px 0 28px; }
.quiz__fin { display: grid; gap: 10px; justify-items: center; max-width: 420px; margin: 0 auto; }

/* ---------- Pie ---------- */
.pie { background: var(--negro); color: #cfcac2; padding: 48px var(--gutter) calc(110px + env(safe-area-inset-bottom)); margin-top: 56px; }
.pie__marca .logotipo { font-size: 3rem; }
.pie__lema { letter-spacing: .5em; font-size: .8125rem; color: var(--oro-claro); margin: 6px 0 22px; }
.pie__texto { max-width: 52ch; margin-bottom: 22px; }
.pie__redes { list-style: none; padding: 0; display: flex; gap: 6px; margin-bottom: 22px; }
.pie__redes a { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid #3a3733; border-radius: 50%; color: var(--blanco); }
.pie__redes a:hover { border-color: var(--oro-claro); color: var(--oro-claro); }
.pie__legal { font-size: .8125rem; color: #8f8a83; }

/* ---------- Flotantes y aviso ---------- */
.wa-flotante {
  position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 40;
  width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
  background: var(--wa); color: var(--blanco); box-shadow: var(--sombra);
  transition: transform var(--t);
}
.wa-flotante:hover { transform: scale(1.06); }
body[data-vista="p"] .wa-flotante { display: none; } /* la ficha ya tiene su botón de WhatsApp */
.pedido-flotante {
  position: fixed; right: 16px; bottom: calc(86px + env(safe-area-inset-bottom)); z-index: 40;
  display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 8px 0 18px; border-radius: 23px;
  background: var(--negro); color: var(--blanco); font-weight: 700; box-shadow: var(--sombra);
}
.pedido-flotante .js-n-pedido { min-width: 30px; height: 30px; border-radius: 15px; background: var(--oro-claro); color: var(--negro); display: grid; place-items: center; }
.pedido-flotante[hidden] { display: none; }
.aviso {
  position: fixed; left: 50%; bottom: calc(88px + env(safe-area-inset-bottom)); z-index: 50;
  translate: -50% 20px; opacity: 0; pointer-events: none;
  display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: var(--radio);
  background: var(--tinta); color: var(--blanco); font-weight: 600; font-size: .9375rem; white-space: nowrap;
  transition: opacity var(--t), translate var(--t);
}
.aviso.visible { opacity: 1; translate: -50% 0; pointer-events: auto; }
.aviso button { color: var(--oro-claro); text-decoration: underline; text-underline-offset: 3px; font-weight: 700; }

/* ---------- Tablet y escritorio ---------- */
@media (min-width: 720px) {
  :root { --gutter: 32px; }
  .carril { grid-auto-columns: 27%; }
  .rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 22px; }
  .garantias { grid-template-columns: repeat(2, 1fr); column-gap: 40px; }
  .testimonios { grid-template-columns: repeat(3, 1fr); gap: 28px; }
  .diapo--promo { grid-template-columns: 1.1fr 1fr; align-items: center; align-content: center; padding: 48px var(--gutter); }
  .hoja { width: min(560px, 100%); margin: auto; border-radius: 6px; }
  .hoja--lateral { margin: 0 0 0 auto; height: 100%; max-height: 100%; width: min(440px, 100%); border-radius: 0; }
  .hoja--lateral .hoja__cuerpo { max-height: 100vh; max-height: 100svh; height: 100%; }
  .hoja--lateral[open] { animation: lateral 260ms cubic-bezier(.2, .7, .2, 1); }
  .ficha { display: grid; grid-template-columns: 1.1fr 1fr; gap: 0 48px; padding: 8px var(--gutter) 24px; }
  .ficha .volver { grid-column: 1 / -1; padding-left: 0; }
  .ficha__info { padding: 0; }
  .ficha__acciones { max-width: 440px; }
  .quiz__ops { grid-template-columns: repeat(2, 1fr); }
  .diapo { padding-top: 64px; padding-bottom: 40px; }
  .heroe__acciones .boton { flex: 0 0 auto; min-width: 220px; }
  /* En pantallas grandes el contenido de la portada se alinea con el resto de la web */
  .diapo, .portada__controles { padding-left: max(var(--gutter), calc((100% - var(--ancho)) / 2 + var(--gutter))); padding-right: max(var(--gutter), calc((100% - var(--ancho)) / 2 + var(--gutter))); }
}
@keyframes lateral { from { transform: translateX(40px); opacity: 0; } }
@media (min-width: 1080px) {
  .carril { grid-auto-columns: calc((100% - 3 * 22px - 2 * var(--gutter)) / 4.3); gap: 22px; }
  .rejilla { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cabecera { height: 68px; }
  .logotipo { font-size: 2rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
}

/* ---------- Compatibilidad ---------- */
/* Navegadores sin :has() (iPhone con iOS < 15.4): se ve la casilla marcada */
@supports not selector(:has(*)) {
  .opcion input { position: static; opacity: 1; width: 18px; height: 18px; accent-color: #000; }
}
/* Diálogos en navegadores sin <dialog> nativo (ver abrirDialogo en components.js) */
dialog.sin-soporte { position: fixed; inset: auto 0 0 0; z-index: 60; display: none; }
dialog.sin-soporte[open] { display: block; box-shadow: 0 -10px 60px rgb(0 0 0 / .35); }
/* Pantallas táctiles: sin efectos hover que se quedan "pegados" */
@media (hover: none) {
  .tarjeta__enlace:hover .tarjeta__foto img { transform: none; }
  .wa-flotante:hover { transform: none; }
}
/* Escritorio con ratón: barra de desplazamiento fina visible en carruseles */
@media (hover: hover) and (pointer: fine) {
  .carril { scrollbar-color: var(--linea) transparent; }
}.ficha__oferta { color: var(--oro-texto); font-weight: 600; font-size: .9375rem; margin-top: 4px; }

/* Packs de promoción: "3 perfumes por S/ 499" */
.pack { font-size: 1.125rem; margin: 2px 0 14px; color: #cfcac2; }
.pack strong { font-size: 2rem; font-weight: 800; color: var(--blanco); margin-left: 4px; }
.pack s { color: #8f8a83; margin-left: 6px; }
.pack__n { color: var(--oro-claro); font-weight: 700; }
.promo__botones { display: flex; flex-wrap: wrap; gap: 10px; }
.promo__botones .boton--wa { width: auto; }

/* Modo Sviluppatore (solo en localhost:8081) */
.dev-boton {
  position: fixed; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 45;
  display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 18px; border-radius: 24px;
  background: var(--oro-claro); color: var(--negro); font-weight: 800; text-decoration: none;
  box-shadow: 0 0 0 3px var(--negro), var(--sombra);
}
.dev-boton:hover { background: #e6d1a6; }
.dev-editar {
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 14px; padding: 8px 14px;
  background: var(--oro-claro); color: var(--negro); font-weight: 700; text-decoration: none; border-radius: var(--radio);
}

/* Carruseles de fotos de la familia: flechas ligeras ‹ › */
.fotos-carrusel { position: relative; min-width: 0; }
.fotos-pista { list-style: none; padding: 0; margin: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 42%; gap: 10px;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.fotos-pista::-webkit-scrollbar { display: none; }
.fotos-pista > li { scroll-snap-align: start; }
.fotos-carrusel--grande .fotos-pista { grid-auto-columns: 72%; }
.fotos-flecha {
  position: absolute; top: 50%; translate: 0 -50%; z-index: 2; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; background: rgb(255 255 255 / .82); color: var(--tinta);
  box-shadow: 0 2px 10px rgb(0 0 0 / .15); backdrop-filter: blur(6px); opacity: .9; transition: opacity var(--t), background var(--t);
}
.fotos-flecha:hover { opacity: 1; background: var(--blanco); }
.fotos-flecha--ant { left: 8px; } .fotos-flecha--sig { right: 8px; }
.fotos-flecha--sig svg { transform: scaleX(-1); }
.fotos-carrusel--quieto .fotos-flecha { display: none; }
.franja-familia .fotos-carrusel { min-width: 0; }
@media (min-width: 720px) {
  .fotos-pista { grid-auto-columns: 30%; }
  .fotos-carrusel--grande .fotos-pista { grid-auto-columns: calc((100% - 20px) / 3); }
  .franja-familia .fotos-pista { grid-auto-columns: calc((100% - 20px) / 2.4); }
  .fotos-flecha { width: 42px; height: 42px; }
}

/* En memoria: sobrio, centrado, sin animaciones */
.memoria {
  max-width: 720px; margin: 56px auto 0; padding: 48px 24px; text-align: center;
  border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea);
}
.memoria__flor { display: block; font-size: 1.25rem; color: var(--oro); margin-bottom: 14px; }
.memoria__foto { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; margin: 0 auto 18px; filter: grayscale(1); }
.memoria__antes { color: var(--gris); font-size: .9375rem; margin-bottom: 4px; }
.memoria__nombre { font-family: var(--serif); font-weight: 400; font-size: clamp(2rem, 7vw, 2.75rem); line-height: 1.1; }
.memoria__fechas { color: var(--gris); margin-top: 6px; font-variant-numeric: tabular-nums; }
.memoria__texto { font-family: var(--serif); font-size: 1.125rem; line-height: 1.65; color: var(--tinta); max-width: 52ch; margin: 18px auto 0; }
.insignia--oferta { font-size: .8125rem; font-weight: 800; padding: 6px 9px; }

/* Contenido para Google en las páginas de perfume/categoría (se ve un instante, hasta que carga la ficha) */
.seo-ficha { max-width: 720px; margin: 0 auto; padding: 24px var(--gutter); }
.seo-ficha img { max-width: 280px; margin: 0 auto 16px; background: var(--porcelana); }
.seo-ficha h1 { font-family: var(--serif); font-weight: 500; font-size: 2rem; margin: 4px 0 10px; }
.seo-ficha ul { padding-left: 18px; color: var(--gris); }

/* Portada con el vídeo del lobby difuminado hacia el negro */
.diapo--video { position: relative; overflow: hidden; isolation: isolate; }
.portada__video {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2;
  object-fit: cover; object-position: center 72%;
  filter: saturate(.85) brightness(.8);
}
.diapo--video::after { /* velo: más oscuro abajo, donde va el texto */
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to top, #000 0%, rgb(0 0 0 / .82) 32%, rgb(0 0 0 / .45) 65%, rgb(0 0 0 / .7) 100%);
}
@media (min-width: 720px) {
  /* En ordenador: el vídeo a la derecha, fundiéndose con el negro hacia el texto */
  .portada__video {
    left: auto; width: 58%; object-position: center 70%;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 42%), linear-gradient(to top, transparent 0%, #000 30%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent 0%, #000 42%), linear-gradient(to top, transparent 0%, #000 30%);
    mask-composite: intersect;
  }
  .diapo--video::after { background: linear-gradient(90deg, #000 0%, rgb(0 0 0 / .7) 40%, rgb(0 0 0 / .25) 75%, rgb(0 0 0 / .45) 100%); }
}