/* =====================================================================
   estilos.css · tienda de perfumes
   Parte de base.css (skill disenar-paginas): mismos roles y escalas,
   con los tokens de la marca cambiados. Secciones 1–12 = base,
   13 en adelante = componentes de la tienda.
   Escalas  espaciado 4 8 12 16 24 32 48 64 96 128 px
            texto     12 14 16 18 20 24 30 36 48 60 px
   ===================================================================== */

/* 1 · Tokens (tema claro) ---------------------------------------------- */
:root {
  /* Marca: tinta casi negra para el botón, bronce para el acento de texto */
  --acento: #1f1a17;
  --acento-fuerte: #3b332d;
  --acento-suave: #efe6d8;
  --acento-texto: #7a4f1d;
  --sobre-acento: #fbf8f3;
  --oro: #b48a4a;               /* solo decorativo, nunca para texto */

  /* Neutros cálidos (marfil) */
  --fondo: #fbf8f3;
  --superficie: #ffffff;
  --superficie-2: #f3ede4;
  --texto: #1f1a17;
  --texto-2: #4a423b;
  --texto-3: #6b6158;
  --borde: #e7dfd3;
  --borde-fuerte: #8c8075;
  --anillo: #7a4f1d;
  --anuncio-fondo: #1f1a17;
  --anuncio-texto: #fbf8f3;
  --velo: hsl(25 20% 8% / .5);
  --whatsapp: #128c7e;

  --exito: #1a7140;   --exito-suave: #e3f3e9;
  --aviso: #8a5300;   --aviso-suave: #fcefd5;
  --peligro: #b3261e; --peligro-suave: #fbe6e4;

  --sombra-1: 0 1px 3px hsl(25 25% 10% / .10);
  --sombra-2: 0 4px 6px hsl(25 25% 10% / .08);
  --sombra-3: 0 5px 15px hsl(25 25% 10% / .10);
  --sombra-4: 0 10px 24px hsl(25 25% 10% / .12);
  --sombra-5: 0 15px 35px hsl(25 25% 10% / .16);
  --sombra-barra: 0 -4px 16px hsl(25 25% 10% / .08);

  --fuente: "Jost", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fuente-titulos: "Playfair Display", Georgia, "Times New Roman", serif;
  --fs-xs: .75rem;   --fs-sm: .875rem;  --fs-base: 1rem;    --fs-lg: 1.125rem;
  --fs-xl: 1.25rem;  --fs-2xl: 1.5rem;  --fs-3xl: 1.875rem; --fs-4xl: 2.25rem;
  --fs-5xl: 3rem;    --fs-6xl: 3.75rem;
  --fs-titular: clamp(1.875rem, 1.35rem + 2.2vw, 3rem);
  --fs-seccion: clamp(1.5rem, 1.15rem + 1.5vw, 2.25rem);

  --e-1: .25rem; --e-2: .5rem; --e-3: .75rem; --e-4: 1rem;  --e-5: 1.5rem;
  --e-6: 2rem;   --e-7: 3rem;  --e-8: 4rem;   --e-9: 6rem;  --e-10: 8rem;

  --radio-s: 6px; --radio: 10px; --radio-l: 16px; --radio-total: 999px;

  --z-barra: 10; --z-menu: 20; --z-modal: 30; --z-aviso: 40;
  --rapido: 120ms; --medio: 200ms;
  --salida: cubic-bezier(.2, .8, .2, 1);

  --ancho: 76rem;
  --medida: 65ch;
  --margen: 1rem;

  color-scheme: light;
}

/* 2 · Tema oscuro ------------------------------------------------------ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --acento: #f3ede4;  --acento-fuerte: #ffffff; --acento-suave: #2e261f;
    --acento-texto: #e0b77a; --sobre-acento: #1f1a17; --oro: #c9a466;
    --fondo: #14110f;   --superficie: #1c1815;    --superficie-2: #26201c;
    --texto: #f3ede4;   --texto-2: #cfc5b8;       --texto-3: #a89d90;
    --borde: #332b25;   --borde-fuerte: #7d7166;  --anillo: #e0b77a;
    --anuncio-fondo: #26201c; --anuncio-texto: #f3ede4;
    --velo: hsl(0 0% 0% / .65); --whatsapp: #128c7e;
    --exito: #5fd391;   --exito-suave: #11301f;
    --aviso: #f2c661;   --aviso-suave: #33270b;
    --peligro: #ff8f86; --peligro-suave: #3b1714;
    --sombra-1: 0 1px 3px hsl(0 0% 0% / .5);
    --sombra-2: 0 4px 6px hsl(0 0% 0% / .45);
    --sombra-3: 0 5px 15px hsl(0 0% 0% / .5);
    --sombra-4: 0 10px 24px hsl(0 0% 0% / .55);
    --sombra-5: 0 15px 35px hsl(0 0% 0% / .6);
    --sombra-barra: 0 -4px 16px hsl(0 0% 0% / .5);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --acento: #f3ede4;  --acento-fuerte: #ffffff; --acento-suave: #2e261f;
  --acento-texto: #e0b77a; --sobre-acento: #1f1a17; --oro: #c9a466;
  --fondo: #14110f;   --superficie: #1c1815;    --superficie-2: #26201c;
  --texto: #f3ede4;   --texto-2: #cfc5b8;       --texto-3: #a89d90;
  --borde: #332b25;   --borde-fuerte: #7d7166;  --anillo: #e0b77a;
  --anuncio-fondo: #26201c; --anuncio-texto: #f3ede4;
  --velo: hsl(0 0% 0% / .65); --whatsapp: #128c7e;
  --exito: #5fd391;   --exito-suave: #11301f;
  --aviso: #f2c661;   --aviso-suave: #33270b;
  --peligro: #ff8f86; --peligro-suave: #3b1714;
  --sombra-1: 0 1px 3px hsl(0 0% 0% / .5);
  --sombra-2: 0 4px 6px hsl(0 0% 0% / .45);
  --sombra-3: 0 5px 15px hsl(0 0% 0% / .5);
  --sombra-4: 0 10px 24px hsl(0 0% 0% / .55);
  --sombra-5: 0 15px 35px hsl(0 0% 0% / .6);
  --sombra-barra: 0 -4px 16px hsl(0 0% 0% / .5);
  color-scheme: dark;
}

/* 3 · Base ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-padding-top: 5rem;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
html:has(dialog[open]) { overflow: hidden; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--fuente);
  font-size: var(--fs-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
:where(h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd) { margin: 0; }
:where(h1, h2, h3, h4) { font-family: var(--fuente-titulos); font-weight: 700; line-height: 1.2; text-wrap: balance; }
:where(p, li, dd, figcaption) { text-wrap: pretty; }
:where(img, picture, video, canvas, svg) { display: block; max-width: 100%; }
:where(img) { height: auto; }
:where(input, button, select, textarea) { font: inherit; color: inherit; }
:where(a) { color: var(--acento-texto); text-decoration-thickness: from-font; text-underline-offset: .15em; }
:focus-visible { outline: 3px solid var(--anillo); outline-offset: 2px; }
::selection { background: var(--acento-suave); color: var(--texto); }
[hidden] { display: none !important; }

/* 4 · Maquetación ------------------------------------------------------ */
.contenedor { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: var(--margen); }
.seccion { padding-block: var(--e-8); }
.seccion--corta { padding-block: var(--e-7); }
.seccion--alterna { background: var(--superficie); }
.pila { display: flex; flex-direction: column; gap: var(--pila, var(--e-4)); }
.fila { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fila, var(--e-3)); }
.dividido { display: grid; gap: var(--e-6); align-items: center; }
:where(.pila, .fila, .dividido, .tarjeta, .opciones, .campo) > * { min-width: 0; }
.medida { max-width: var(--medida); }
@media (min-width: 48rem) { :root { --margen: 1.5rem; } }
@media (min-width: 56rem) {
  .seccion { padding-block: var(--e-9); }
  .seccion--corta { padding-block: var(--e-8); }
  .dividido { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-8); }
}

/* 5 · Texto ------------------------------------------------------------ */
.titular { font-size: var(--fs-titular); line-height: 1.1; letter-spacing: -0.01em; }
.titulo-seccion { font-size: var(--fs-seccion); letter-spacing: -0.005em; }
.titulo-tarjeta { font-family: var(--fuente); font-size: var(--fs-lg); font-weight: 600; line-height: 1.3; }
.entrada { max-width: 36rem; font-size: var(--fs-lg); color: var(--texto-2); }
.sobretitulo { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--acento-texto); }
.secundario { color: var(--texto-2); }
.nota { font-size: var(--fs-sm); color: var(--texto-3); }
.cifra { font-variant-numeric: tabular-nums; }
.sin-corte { white-space: nowrap; }

/* 6 · Botones ---------------------------------------------------------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
  min-height: 48px; padding: var(--e-3) var(--e-5);
  border: 1px solid transparent; border-radius: var(--radio);
  font-size: var(--fs-base); font-weight: 500; line-height: 1.2; letter-spacing: .01em;
  text-align: center; text-decoration: none; cursor: pointer;
  touch-action: manipulation; -webkit-user-select: none; user-select: none;
  transition: transform var(--rapido) var(--salida), background-color var(--rapido) var(--salida), border-color var(--rapido) var(--salida);
}
.boton:active { transform: scale(.98); }
.boton--principal { background: var(--acento); color: var(--sobre-acento); box-shadow: var(--sombra-1); }
.boton--principal:active { background: var(--acento-fuerte); }
.boton--secundario { background: var(--superficie); color: var(--texto); border-color: var(--borde-fuerte); }
.boton--secundario:active { background: var(--superficie-2); }
.boton--texto {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--e-2);
  border: 0; background: transparent; color: var(--acento-texto); font-weight: 500;
  text-decoration: underline; text-underline-offset: .2em; cursor: pointer; touch-action: manipulation;
}
.boton--grande { min-height: 56px; padding-inline: var(--e-6); font-size: var(--fs-lg); }
.boton--chico { min-height: 44px; padding: var(--e-2) var(--e-4); font-size: var(--fs-sm); }
.boton--bloque { width: 100%; }
.boton:disabled { opacity: .55; cursor: not-allowed; transform: none; }
@media (hover: hover) and (pointer: fine) {
  .boton--principal:hover { background: var(--acento-fuerte); }
  .boton--secundario:hover { background: var(--superficie-2); }
  .boton--texto:hover { text-decoration-thickness: 2px; }
}

.boton-icono {
  position: relative; display: inline-grid; place-items: center; flex: none;
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--radio-total);
  background: transparent; color: var(--texto); cursor: pointer; touch-action: manipulation;
}
.boton-icono svg { width: 24px; height: 24px; }
.boton-icono:active { background: var(--superficie-2); }
@media (hover: hover) and (pointer: fine) { .boton-icono:hover { background: var(--superficie-2); } }

/* 7 · Insignias e iconos ----------------------------------------------- */
.icono {
  display: inline-grid; place-items: center; flex: none;
  width: 2.75rem; height: 2.75rem; border-radius: var(--radio-total);
  background: var(--acento-suave); color: var(--acento-texto);
}
.icono svg { width: 1.375rem; height: 1.375rem; }
.insignia {
  display: inline-flex; align-items: center; gap: var(--e-1); width: fit-content;
  padding: 2px var(--e-3); border-radius: var(--radio-total);
  background: var(--acento-suave); color: var(--acento-texto);
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .02em; line-height: 1.6; white-space: nowrap;
}
.insignia--exito { background: var(--exito-suave); color: var(--exito); }
.insignia--aviso { background: var(--aviso-suave); color: var(--aviso); }
.insignia--peligro { background: var(--peligro-suave); color: var(--peligro); }
.insignia--mini { min-width: 20px; justify-content: center; padding: 0 6px; font-variant-numeric: tabular-nums; }

/* 8 · Comercio --------------------------------------------------------- */
.confianza { display: grid; gap: var(--e-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); padding: 0; list-style: none; }
.confianza > li { display: flex; align-items: center; gap: var(--e-3); color: var(--texto-2); font-size: var(--fs-sm); line-height: 1.35; }
.confianza strong { display: block; color: var(--texto); font-size: var(--fs-base); font-weight: 600; }

.pasos {
  display: grid; gap: var(--e-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  padding: 0; list-style: none; counter-reset: paso;
}
.pasos > li {
  display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); align-content: start;
  gap: var(--e-1) var(--e-4); counter-increment: paso;
}
.pasos > li::before {
  content: counter(paso); grid-row: span 2; display: grid; place-items: center;
  width: 2.5rem; height: 2.5rem; border-radius: var(--radio-total);
  border: 1px solid var(--oro); color: var(--acento-texto);
  font-family: var(--fuente-titulos); font-weight: 700; font-variant-numeric: tabular-nums;
}
.pasos > li > * { grid-column: 2; }
.pasos > li > :first-child { padding-top: calc((2.5rem - 1.3em) / 2); }

/* 9 · Formularios ------------------------------------------------------ */
.campo { display: grid; gap: var(--e-1); }
.campo > label, .campo > .etiqueta { font-size: var(--fs-sm); font-weight: 600; }
.control {
  width: 100%; min-height: 48px; padding: var(--e-3) var(--e-4);
  border: 1px solid var(--borde-fuerte); border-radius: var(--radio);
  background: var(--superficie); color: var(--texto);
  font-size: max(1rem, 16px); line-height: 1.3;
}
.control--chico { width: auto; min-height: 44px; padding-block: var(--e-2); }
select.control { padding-right: var(--e-6); }
.control[aria-invalid="true"] { border-color: var(--peligro); box-shadow: 0 0 0 1px var(--peligro); }
.ayuda { color: var(--texto-3); font-size: var(--fs-sm); }
.error { color: var(--peligro); font-size: var(--fs-sm); font-weight: 600; }
.opciones { display: grid; gap: var(--e-2); margin: 0; padding: 0; border: 0; min-width: 0; }
.opciones > legend { margin-bottom: var(--e-2); padding: 0; font-size: var(--fs-sm); font-weight: 600; }
.opcion {
  display: flex; align-items: center; gap: var(--e-3); min-height: 56px; padding: var(--e-3) var(--e-4);
  border: 1px solid var(--borde-fuerte); border-radius: var(--radio); background: var(--superficie); cursor: pointer;
}
.opcion > input { flex: none; width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--acento-texto); }
.opcion-texto { display: grid; flex: 1; gap: 2px; min-width: 0; }
.opcion-texto strong { font-weight: 600; }
.opcion-texto .insignia { white-space: normal; }
.opcion-precio { flex: none; font-weight: 600; font-variant-numeric: tabular-nums; }
.opcion:has(> input:checked) { border-color: var(--acento-texto); background: var(--acento-suave); box-shadow: 0 0 0 1px var(--acento-texto); }
@supports selector(:has(*)) {
  .opcion > input:focus-visible { outline: none; }
  .opcion:has(> input:focus-visible) { outline: 3px solid var(--anillo); outline-offset: 2px; }
}
.casilla { display: flex; align-items: center; gap: var(--e-3); min-height: 44px; cursor: pointer; }
.casilla input { width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--acento-texto); }
.casilla .nota { margin-left: auto; }

/* 10 · Preguntas frecuentes -------------------------------------------- */
.faq { border-top: 1px solid var(--borde); }
.faq > details { border-bottom: 1px solid var(--borde); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-4);
  min-height: 56px; padding-block: var(--e-3); font-weight: 600; cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; flex: none; color: var(--texto-3); font-size: var(--fs-2xl); font-weight: 400; line-height: 1;
  transition: transform var(--medio) var(--salida);
}
.faq details[open] > summary::after { transform: rotate(45deg); }
.faq details > :not(summary) { padding-bottom: var(--e-4); color: var(--texto-2); }
.lista-faq { display: grid; gap: var(--e-2); margin: 0; padding-inline-start: 1.25em; }
.lista-faq strong { color: var(--texto); font-weight: 600; }

/* 11 · Encabezado, aviso y pie ----------------------------------------- */
.prototipo {
  padding: 6px var(--margen); background: var(--aviso-suave); color: var(--aviso);
  font-size: var(--fs-xs); font-weight: 600; text-align: center;
}
.anuncio {
  padding: var(--e-2) var(--margen); background: var(--anuncio-fondo); color: var(--anuncio-texto);
  font-size: var(--fs-sm); font-weight: 500; letter-spacing: .02em; text-align: center;
}
.cabecera {
  background: color-mix(in srgb, var(--fondo) 92%, transparent);
  border-bottom: 1px solid var(--borde);
  -webkit-backdrop-filter: saturate(1.4) blur(8px);
  backdrop-filter: saturate(1.4) blur(8px);
}
.cabecera--fija { position: sticky; top: 0; z-index: var(--z-menu); }
.cab { display: flex; align-items: center; justify-content: space-between; gap: var(--e-4); min-height: 64px; }
.marca { display: inline-grid; color: var(--texto); line-height: 1; text-decoration: none; }
.marca-nombre { font-family: var(--fuente-titulos); font-size: var(--fs-2xl); font-weight: 700; letter-spacing: .01em; }
.marca small {
  margin-top: 2px; color: var(--texto-3); font-size: .6875rem; font-weight: 500;
  letter-spacing: .32em; text-transform: uppercase;
}
.nav-principal { display: none; }
.nav-principal a {
  display: inline-flex; align-items: center; min-height: 44px; color: var(--texto-2);
  font-weight: 500; text-decoration: none;
}
.nav-principal a:active { color: var(--texto); }
@media (hover: hover) and (pointer: fine) { .nav-principal a:hover { color: var(--texto); text-decoration: underline; text-decoration-color: var(--oro); } }
@media (min-width: 56rem) { .nav-principal { display: flex; gap: var(--e-6); } }
.cab-acciones { display: flex; align-items: center; gap: var(--e-1); }
.contador {
  position: absolute; top: 2px; right: 0; display: grid; place-items: center;
  min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--radio-total);
  background: var(--acento-texto); color: var(--fondo);
  font-size: var(--fs-xs); font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums;
}

.pie { padding-block: var(--e-7) var(--e-6); border-top: 1px solid var(--borde); color: var(--texto-2); font-size: var(--fs-sm); }
.pie-rejilla { display: grid; gap: var(--e-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.pie strong { color: var(--texto); }
.pie a { color: var(--texto-2); }
.pie nav a, .pie .pila > a { display: inline-flex; align-items: center; min-height: 32px; }
.marca--pie { display: inline-grid; }
.boton-tema { padding: 0; min-height: 32px; color: var(--texto-2); font-size: var(--fs-sm); width: fit-content; }
.pie-legal { margin-top: var(--e-6); padding-top: var(--e-4); border-top: 1px solid var(--borde); }

/* 12 · Accesibilidad --------------------------------------------------- */
.visualmente-oculto {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.saltar {
  position: absolute; top: var(--e-3); left: var(--e-3); z-index: var(--z-aviso);
  padding: var(--e-2) var(--e-4); border-radius: var(--radio); background: var(--superficie);
  color: var(--texto); box-shadow: var(--sombra-3); transform: translateY(-300%);
}
.saltar:focus { transform: none; }

/* 13 · Héroe ----------------------------------------------------------- */
.heroe { padding-block: var(--e-6) var(--e-7); }
.heroe-texto { --pila: var(--e-4); }
.heroe-botones { margin-top: var(--e-2); }
.heroe-botones .boton { flex: 1 1 14rem; }
.heroe-visual {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: var(--radio-l); background: #d9cbb8; /* tono de la pared del video mientras carga */
}
/* el video es vertical: se recorta al centro-abajo, donde están las cajas */
.heroe-visual video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
/* va siempre sobre el video, por eso no usa los tokens del tema */
.pausa-heroe {
  position: absolute; right: var(--e-3); bottom: var(--e-3);
  background: hsl(36 40% 98% / .9); color: #1f1a17; box-shadow: var(--sombra-2);
}
.pausa-heroe svg { width: 20px; height: 20px; }
.pausa-heroe:active { background: #fff; }
@media (hover: hover) and (pointer: fine) { .pausa-heroe:hover { background: #fff; } }
@media (min-width: 56rem) {
  .heroe { padding-block: var(--e-8) var(--e-9); }
  .heroe-botones .boton { flex: 0 0 auto; }
}

.franja-confianza { padding-block: var(--e-6); border-block: 1px solid var(--borde); background: var(--superficie); }
.confianza--grande { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }

/* 14 · Categorías ------------------------------------------------------ */
.categorias { display: grid; gap: var(--e-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.categoria {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--e-3);
  min-height: 96px; padding: var(--e-4) var(--e-5); overflow: hidden;
  border: 1px solid var(--borde); border-radius: var(--radio-l);
  background: color-mix(in oklab, var(--tono, var(--oro)) 12%, var(--superficie));
  color: var(--texto); text-align: start; cursor: pointer; touch-action: manipulation;
  transition: transform var(--rapido) var(--salida), box-shadow var(--medio) var(--salida);
}
.categoria:active { transform: scale(.99); }
.categoria-texto { display: grid; gap: 2px; }
.categoria-texto strong { font-family: var(--fuente-titulos); font-size: var(--fs-xl); font-weight: 700; }
.categoria-texto span { color: var(--texto-2); font-size: var(--fs-sm); }
.categoria svg { width: 72px; height: 90px; margin-block: -8px; }
.categoria img { width: 60px; height: 80px; object-fit: cover; border-radius: var(--radio-s); box-shadow: var(--sombra-2); }
@media (hover: hover) and (pointer: fine) { .categoria:hover { box-shadow: var(--sombra-3); } }

/* 15 · Catálogo -------------------------------------------------------- */
.catalogo-cabeza { display: grid; gap: var(--e-4); align-items: end; }
@media (min-width: 48rem) { .catalogo-cabeza { grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); } }
.buscador { position: relative; }
.buscador svg { position: absolute; top: 50%; left: var(--e-4); width: 20px; height: 20px; color: var(--texto-3); transform: translateY(-50%); pointer-events: none; }
.buscador .control { padding-left: calc(var(--e-4) + 28px); border-radius: var(--radio-total); }

.barra-filtros { display: grid; gap: var(--e-3); }
@media (min-width: 56rem) { .barra-filtros { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } }
.barra-filtros-acciones { justify-content: space-between; }
.chips {
  display: flex; gap: var(--e-2); overflow-x: auto; scrollbar-width: none;
  margin-inline: calc(var(--margen) * -1); padding: 2px var(--margen);
  scroll-padding-inline: var(--margen);
}
.chips::-webkit-scrollbar { display: none; }
@media (min-width: 56rem) { .chips { margin-inline: 0; padding-inline: 2px; flex-wrap: wrap; } }
.chip {
  flex: none; display: inline-flex; align-items: center; gap: var(--e-2);
  min-height: 44px; padding: 0 var(--e-4); border: 1px solid var(--borde-fuerte); border-radius: var(--radio-total);
  background: var(--superficie); color: var(--texto); font-size: var(--fs-sm); font-weight: 500;
  cursor: pointer; touch-action: manipulation;
}
.chip .cifra { color: var(--texto-3); }
.chip[aria-pressed="true"] { border-color: var(--acento-texto); background: var(--acento-suave); box-shadow: inset 0 0 0 1px var(--acento-texto); }
.chip:active { background: var(--superficie-2); }

.rejilla-productos { display: grid; gap: var(--e-6) var(--e-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 40rem) { .rejilla-productos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-6) var(--e-4); } }
@media (min-width: 64rem) { .rejilla-productos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e-7) var(--e-5); } }

.producto { position: relative; display: grid; align-content: start; gap: var(--e-2); }
.foto-frasco {
  position: relative; display: grid; place-items: center; overflow: hidden;
  aspect-ratio: 3 / 4; border-radius: var(--radio-l);   /* las fotos son 3:4 */
  background: color-mix(in oklab, var(--tono, var(--oro)) 13%, var(--superficie-2));
}
.foto-frasco > svg { width: 74%; height: auto; transition: transform 300ms var(--salida); }
.foto-frasco > img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms var(--salida); }
.foto-frasco .insignia { position: absolute; top: var(--e-3); left: var(--e-3); background: var(--superficie); color: var(--texto); box-shadow: var(--sombra-1); }
@media (hover: hover) and (pointer: fine) {
  .producto:hover .foto-frasco > svg { transform: translateY(-4px) scale(1.02); }
  .producto:hover .foto-frasco > img { transform: scale(1.03); }
}
@media (prefers-reduced-motion: reduce) { .foto-frasco > svg, .foto-frasco > img { transition: none; } }
.precio-consulta { color: var(--acento-texto); font-size: var(--fs-base); font-weight: 600; }
.producto-info { display: grid; gap: 2px; }
.producto-titulo { font-family: var(--fuente); font-size: inherit; font-weight: inherit; line-height: inherit; }
.producto-marca { color: var(--texto-3); font-size: var(--fs-xs); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.producto-nombre {
  padding: 0; border: 0; background: none; color: var(--texto); text-align: start; cursor: pointer;
  font-size: var(--fs-base); font-weight: 600; line-height: 1.3;
}
.producto-nombre::after { content: ""; position: absolute; inset: 0 0 52px 0; border-radius: var(--radio-l); }
.producto-nombre:focus-visible { outline: none; }
.producto-nombre:focus-visible::after { outline: 3px solid var(--anillo); outline-offset: 2px; }
.producto-meta { color: var(--texto-2); font-size: var(--fs-sm); line-height: 1.4; }
.precio-linea { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--e-2); margin-top: 2px; }
.precio-linea strong { font-size: var(--fs-lg); font-weight: 600; font-variant-numeric: tabular-nums; }
.precio-linea s { color: var(--texto-3); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.precio-linea .etiqueta-ref { color: var(--texto-3); font-size: var(--fs-xs); }
.producto .boton { position: relative; z-index: 1; margin-top: var(--e-1); }
.estado-stock { font-size: var(--fs-xs); font-weight: 600; }
.estado-stock--poco { color: var(--aviso); }
.estado-stock--agotado { color: var(--peligro); }

.vacio { display: grid; gap: var(--e-3); justify-items: center; padding: var(--e-7) var(--e-4); border: 1px dashed var(--borde-fuerte); border-radius: var(--radio-l); text-align: center; }

/* Carrusel de combos (scroll-snap, sin movimiento automático) */
.carrusel {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(15rem, 78%); gap: var(--e-4);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: thin;
  margin-inline: calc(var(--margen) * -1); padding: 0 var(--margen) var(--e-3); scroll-padding-inline: var(--margen);
}
.carrusel > * { scroll-snap-align: start; }
@media (min-width: 40rem) { .carrusel { grid-auto-columns: minmax(16rem, 44%); } }
@media (min-width: 64rem) { .carrusel { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-inline: 0; padding-inline: 0; overflow: visible; } }
.combo-incluye { display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-3); padding: 0; list-style: none; color: var(--texto-2); font-size: var(--fs-sm); }
.combo-incluye li::before { content: "+ "; color: var(--acento-texto); font-weight: 600; }
.combo-incluye li:first-child::before { content: ""; }

.medios-pago { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-3); color: var(--texto-2); font-size: var(--fs-sm); }
.medios-pago span {
  padding: var(--e-1) var(--e-3); border: 1px solid var(--borde); border-radius: var(--radio-s);
  background: var(--fondo); color: var(--texto-2); font-size: var(--fs-sm); font-weight: 500;
}
@media (min-width: 56rem) { .dividido--faq { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: start; } }

/* 16 · Diálogos (hoja inferior, cajón lateral) ------------------------- */
dialog {
  max-width: none; max-height: none; padding: 0; border: 0;
  background: var(--superficie); color: var(--texto); box-shadow: var(--sombra-5);
}
dialog::backdrop { background: var(--velo); }
dialog[open] { display: flex; flex-direction: column; }
.hoja { width: 100%; max-height: 94dvh; margin: auto 0 0; border-radius: var(--radio-l) var(--radio-l) 0 0; }
@media (min-width: 56rem) { .hoja { width: min(100% - 3rem, 60rem); max-height: min(92dvh, 46rem); margin: auto; border-radius: var(--radio-l); } }
.hoja--pedido { max-width: none; }
@media (min-width: 56rem) { .hoja--pedido { width: min(100% - 3rem, 44rem); max-height: 92dvh; } }
.cajon { width: min(100%, 27rem); height: 100dvh; max-height: 100dvh; margin: 0 0 0 auto; }
.dialogo-cabecera {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-3);
  min-height: 60px; padding: var(--e-2) var(--e-2) var(--e-2) var(--e-4); border-bottom: 1px solid var(--borde);
}
.dialogo-cabecera--flotante { position: absolute; top: var(--e-2); right: var(--e-2); z-index: 2; min-height: 0; padding: 0; border: 0; }
.dialogo-cabecera--flotante .boton-icono { background: var(--superficie); box-shadow: var(--sombra-2); }
.dialogo-cuerpo { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: var(--e-4); }
.dialogo-pie { padding: var(--e-4) var(--e-4) calc(var(--e-4) + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--borde); background: var(--superficie); }
@media (prefers-reduced-motion: no-preference) {
  .hoja[open] { animation: subir var(--medio) var(--salida); }
  .cajon[open] { animation: deslizar var(--medio) var(--salida); }
  dialog[open]::backdrop { animation: aparecer var(--medio) ease-out; }
  @media (min-width: 56rem) { .hoja[open] { animation: aparecer-escala var(--medio) var(--salida); } }
}
@keyframes subir { from { transform: translateY(40px); opacity: 0; } }
@keyframes deslizar { from { transform: translateX(40px); opacity: 0; } }
@keyframes aparecer { from { opacity: 0; } }
@keyframes aparecer-escala { from { transform: scale(.97); opacity: 0; } }

/* Detalle de producto */
.detalle { display: grid; gap: var(--e-5); }
.detalle .foto-frasco { aspect-ratio: 4 / 5; margin: calc(var(--e-4) * -1) calc(var(--e-4) * -1) 0; border-radius: var(--radio-l) var(--radio-l) 0 0; }
.detalle .foto-frasco > svg { width: 58%; }
@media (min-width: 56rem) {
  .detalle { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--e-7); align-items: start; }
  .detalle .foto-frasco { position: sticky; top: 0; margin: 0; aspect-ratio: 3 / 4; border-radius: var(--radio-l); }
  #producto-cuerpo { padding: var(--e-6); }
}
.detalle-info { --pila: var(--e-4); }
.detalle-titulo { font-size: var(--fs-3xl); }
.detalle .precio-linea strong { font-size: var(--fs-3xl); font-weight: 600; }
.detalle .precio-linea s { font-size: var(--fs-base); }
.notas { display: grid; gap: var(--e-2); padding: var(--e-4); border-radius: var(--radio); background: var(--superficie-2); }
.notas ul { display: flex; flex-wrap: wrap; gap: var(--e-2); padding: 0; list-style: none; }
.notas li { padding: var(--e-1) var(--e-3); border-radius: var(--radio-total); background: var(--superficie); font-size: var(--fs-sm); }
.ficha { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-3) var(--e-4); margin: 0; }
.ficha div { display: grid; gap: 2px; }
.ficha dt { color: var(--texto-3); font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; }
.ficha dd { font-weight: 500; }
.ficha .ficha-ancha { grid-column: 1 / -1; }
.comprar { display: flex; gap: var(--e-3); align-items: stretch; }
.comprar .boton--principal { flex: 1; }
.lista-mini { display: grid; gap: var(--e-2); padding: 0; list-style: none; color: var(--texto-2); font-size: var(--fs-sm); }
.lista-mini li { display: flex; gap: var(--e-2); align-items: center; }
.lista-mini svg { flex: none; width: 18px; height: 18px; color: var(--acento-texto); }
.relacionados { display: grid; gap: var(--e-3); padding-top: var(--e-4); border-top: 1px solid var(--borde); }
.relacionado {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: var(--e-3);
  padding: var(--e-2); border: 1px solid var(--borde); border-radius: var(--radio);
  background: var(--superficie); color: var(--texto); text-align: start; cursor: pointer;
}
.relacionado > *, .linea > * { min-width: 0; }
.relacionado .foto-frasco { width: 56px; aspect-ratio: 1; border-radius: var(--radio-s); }
.linea .foto-frasco { width: 72px; }
.relacionado .insignia, .linea .insignia { display: none; }
.relacionado .foto-frasco > svg { width: 80%; }
.relacionado strong { display: block; font-weight: 600; font-size: var(--fs-sm); }
.relacionado span { color: var(--texto-2); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }

/* Cantidad */
.cantidad { display: inline-flex; align-items: center; border: 1px solid var(--borde-fuerte); border-radius: var(--radio); background: var(--superficie); }
.cantidad button {
  display: grid; place-items: center; width: 44px; height: 46px; padding: 0; border: 0;
  background: transparent; color: var(--texto); font-size: var(--fs-xl); line-height: 1; cursor: pointer; touch-action: manipulation;
}
.cantidad button:disabled { color: var(--texto-3); cursor: not-allowed; }
.cantidad output { min-width: 2ch; font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; }
.cantidad--chica button { width: 40px; height: 40px; font-size: var(--fs-lg); }

/* Carrito */
.lineas { display: grid; padding: 0; list-style: none; }
.linea { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: var(--e-3); padding-block: var(--e-4); border-bottom: 1px solid var(--borde); }
.linea:first-child { padding-top: 0; }
.linea .foto-frasco { border-radius: var(--radio); }
.linea .foto-frasco > svg { width: 80%; }
.linea-info { display: grid; gap: var(--e-1); }
.linea-cabeza { display: flex; justify-content: space-between; gap: var(--e-3); }
.linea-cabeza strong { font-weight: 600; line-height: 1.3; }
.linea-cabeza .cifra { font-weight: 600; white-space: nowrap; }
.linea-pie { display: flex; align-items: center; justify-content: space-between; gap: var(--e-2); margin-top: var(--e-1); }
.envio-gratis { display: grid; gap: var(--e-2); margin-bottom: var(--e-4); padding: var(--e-3) var(--e-4); border-radius: var(--radio); background: var(--superficie-2); font-size: var(--fs-sm); }
.barra-progreso { height: 6px; overflow: hidden; border-radius: var(--radio-total); background: var(--borde); }
.barra-progreso span { display: block; height: 100%; border-radius: inherit; background: var(--exito); transform-origin: left; transform: scaleX(var(--p, 0)); transition: transform var(--medio) var(--salida); }
.totales { display: grid; gap: var(--e-2); margin: 0; font-variant-numeric: tabular-nums; }
.totales div { display: flex; justify-content: space-between; gap: var(--e-3); }
.totales dt { color: var(--texto-2); }
.totales .total { padding-top: var(--e-2); border-top: 1px solid var(--borde); font-size: var(--fs-lg); font-weight: 600; }
.totales .total dt { color: var(--texto); }
.totales .descuento dd { color: var(--exito); }
.carrito-vacio { display: grid; gap: var(--e-4); justify-items: center; padding-block: var(--e-8); text-align: center; }

/* Pedido */
.pasos-pedido { display: flex; gap: var(--e-2); margin-bottom: var(--e-5); padding: 0; list-style: none; font-size: var(--fs-sm); counter-reset: pp; }
.pasos-pedido li { display: flex; flex: 1; align-items: center; gap: var(--e-2); padding-bottom: var(--e-2); border-bottom: 2px solid var(--borde); color: var(--texto-3); counter-increment: pp; }
.pasos-pedido li::before {
  content: counter(pp); display: grid; place-items: center; flex: none; width: 24px; height: 24px;
  border: 1px solid currentColor; border-radius: var(--radio-total); font-size: var(--fs-xs); font-weight: 600;
}
.pasos-pedido li[aria-current="step"] { border-color: var(--acento-texto); color: var(--texto); font-weight: 600; }
.pasos-pedido li.hecho { border-color: var(--exito); color: var(--texto-2); }
.form-rejilla { display: grid; gap: var(--e-4); }
@media (min-width: 40rem) { .form-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } .campo--ancho { grid-column: 1 / -1; } }
.resumen-pedido { display: grid; gap: var(--e-3); padding: var(--e-4); border-radius: var(--radio); background: var(--superficie-2); }
.resumen-pedido .lineas-mini { display: grid; gap: var(--e-1); padding: 0; list-style: none; font-size: var(--fs-sm); }
.resumen-pedido .lineas-mini li { display: flex; justify-content: space-between; gap: var(--e-3); }
.resumen-pedido .lineas-mini .cifra { white-space: nowrap; }
.acciones-pedido { display: flex; flex-wrap: wrap-reverse; gap: var(--e-3); margin-top: var(--e-5); }
.acciones-pedido > .boton { flex: 1 1 100%; }
@media (min-width: 40rem) { .acciones-pedido > .boton { flex: 0 1 auto; } .acciones-pedido > .boton--principal { flex: 1 1 14rem; } }
.llave {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-3);
  padding: var(--e-3) var(--e-3) var(--e-3) var(--e-4); border: 1px dashed var(--borde-fuerte); border-radius: var(--radio);
  background: var(--superficie);
}
.llave code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: var(--fs-lg); font-weight: 600; overflow-wrap: anywhere; }
.confirmacion { display: grid; gap: var(--e-4); }
.confirmacion-cabeza { display: grid; gap: var(--e-2); justify-items: start; }
.confirmacion-cabeza .icono { width: 3.5rem; height: 3.5rem; background: var(--exito-suave); color: var(--exito); }
.confirmacion-cabeza .icono svg { width: 1.75rem; height: 1.75rem; }
.caja-aviso { display: flex; gap: var(--e-3); padding: var(--e-3) var(--e-4); border-radius: var(--radio); background: var(--aviso-suave); color: var(--texto); font-size: var(--fs-sm); }
.caja-aviso svg { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--aviso); }
.otros-medios { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--e-2); }
.otros-medios .boton--texto { padding-inline: var(--e-1); }
.qr { display: none; justify-items: center; gap: var(--e-2); margin: 0; text-align: center; }
.qr img { width: 200px; height: 200px; padding: var(--e-2); border-radius: var(--radio); background: #fff; }
@media (min-width: 56rem) { .qr { display: grid; } } /* en el celular no sirve escanear la propia pantalla */

/* Filtros */
.grupo-filtro { display: grid; gap: var(--e-1); margin: 0; padding: 0; border: 0; min-width: 0; }
.grupo-filtro legend { margin-bottom: var(--e-2); padding: 0; font-weight: 600; }

/* Página de políticas */
.politicas { padding-block: var(--e-7) var(--e-8); }
.prosa { max-width: var(--medida); }
.prosa > * + * { margin-top: var(--e-4); }
.prosa h2 { margin-top: var(--e-8); padding-top: var(--e-5); border-top: 1px solid var(--borde); font-size: var(--fs-2xl); scroll-margin-top: 5rem; }
.prosa h3 { margin-top: var(--e-6); font-family: var(--fuente); font-size: var(--fs-lg); font-weight: 600; }
.prosa :where(ul, ol) { display: grid; gap: var(--e-2); padding-inline-start: 1.25em; }
.prosa li::marker { color: var(--acento-texto); }
.prosa .ficha { margin-top: var(--e-4); }
.indice { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-5); padding: 0; list-style: none; }
.indice a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--e-4); border: 1px solid var(--borde-fuerte); border-radius: var(--radio-total); color: var(--texto); font-size: var(--fs-sm); font-weight: 500; text-decoration: none; }
.indice a:active { background: var(--superficie-2); }

/* 17 · Flotantes ------------------------------------------------------- */
.flotante-whatsapp {
  position: fixed; right: var(--margen); bottom: calc(var(--margen) + env(safe-area-inset-bottom, 0px)); z-index: var(--z-barra);
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: var(--radio-total);
  background: var(--whatsapp); color: #fff; box-shadow: var(--sombra-4); touch-action: manipulation;
}
.flotante-whatsapp svg { width: 28px; height: 28px; }
.flotante-whatsapp:active { transform: scale(.96); }
.aviso {
  position: fixed; left: 50%; bottom: calc(var(--margen) + env(safe-area-inset-bottom, 0px)); z-index: var(--z-aviso);
  display: flex; align-items: center; gap: var(--e-3); width: max-content; max-width: calc(100% - 2 * var(--margen) - 64px);
  padding: var(--e-2) var(--e-2) var(--e-2) var(--e-4); border-radius: var(--radio);
  background: var(--texto); color: var(--fondo); box-shadow: var(--sombra-4); font-size: var(--fs-sm);
  transform: translateX(calc(-50% - 32px));
}
.aviso .boton--texto { color: var(--fondo); flex: none; }
@media (min-width: 40rem) { .aviso { transform: translateX(-50%); max-width: 28rem; } }
@media (prefers-reduced-motion: no-preference) { .aviso:not([hidden]) { animation: aparecer var(--medio) ease-out; } }

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