/* ==========================================================================
   Colibrí Skin Care · sistema de diseño
   Mismo lenguaje que joyeria-web: Prata para títulos, Jost para el texto,
   lavanda en el header, lila en los acentos, radio 0 y sombra 0 en todo.

   NADA VA EN MAYÚSCULAS. Se escribe normal, como se habla: además de que
   así lo quiere JA, las mayúsculas seguidas son lo más difícil de leer que hay.

   Si quieres cambiar colores o medidas, todo está en el bloque de abajo.
   ========================================================================== */

:root{
  /* --- colores --- */
  /* UN SOLO LILA en toda la página: el del header. Antes había dos
     (#D7C8E7 arriba y #BEA7D8 en los botones) y se veían como un error.
     Donde hace falta más claro, es el MISMO lila al 45% sobre blanco:
     eso es exactamente #EDE6F4, no otro color.
     Y para MARCAR algo —lo elegido, la miniatura activa, la barra— va
     tinta, nunca un lila más oscuro. */
  --lila:      #D7C8E7;   /* header, bloques, botones, sellos */
  --lav-claro: #EDE6F4;   /* el mismo lila al 45% sobre blanco */
  --crema:     #F5F4F0;   /* fondo de las fotos de producto */
  --tinta:     #1A1A1A;   /* el negro del texto */
  --rojo:      #A4342F;   /* advertencias */
  --verde:     #3C6E47;   /* apto piel sensible, disponible */

  --medio: rgba(26,26,26,0.66);
  --suave: rgba(26,26,26,0.62);   /* 4.8:1 sobre blanco. Con 0.45 daba 2.89 y no se leía */
  --linea: rgba(26,26,26,0.12);
  --fina:  rgba(26,26,26,0.07);

  /* sobre lavanda el texto es negro puro: da mejor contraste que la tinta */
  --h-fg:    #000;
  --h-medio: rgba(0,0,0,0.74);
  --h-suave: rgba(0,0,0,0.62);    /* 5.3:1 sobre lavanda */
  --h-linea: rgba(0,0,0,0.14);

  /* --- tipografía --- */
  --titulo: 'Prata', Georgia, 'Times New Roman', serif;
  --cuerpo: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* --- medidas --- */
  --ancho:  1300px;   /* ancho máximo del contenido */
  --gutter: 34px;     /* aire a los lados */

  /* --- el header plegable --------------------------------------------------
     ALTO = aire + fila de arriba + hueco + fila de secciones + aire.
     PLIEGUE = lo que se va con el scroll (aire + fila de arriba + hueco).
     Si cambias uno, cambia el otro: de ahí sale el top negativo del sticky. */
  --h-arriba:  13px;   /* aire de arriba */
  --h-abajo:    5px;   /* aire de abajo. Poco a propósito: la fila de secciones
                          ya trae su propia altura y si no, sobra lavanda */
  --h-fila1:   44px;   /* alto de la fila de la marca */
  --h-hueco:    4px;   /* entre las dos filas */
  --h-pliegue: 61px;   /* lo que se pliega = 13 + 44 + 4 */

  --rapido: 120ms;
  --abre:   360ms;
  --curva:  cubic-bezier(0.4, 0, 0.2, 1);
}

*{ box-sizing:border-box }
/* OJO: display:grid o display:flex le ganan al atributo hidden. Sin esta regla
   los paneles de los filtros se quedan todos abiertos, uno encima de otro. */
[hidden]{ display:none!important }
html{ -webkit-text-size-adjust:100%; scroll-padding-top:120px }
body{
  margin:0; background:#fff; color:var(--tinta);
  font-family:var(--cuerpo); font-weight:300; font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block }
a{ color:var(--tinta); text-decoration:none }
a:hover{ color:#000 }
button{ font-family:inherit; font-weight:inherit; color:inherit; background:transparent; border:0; padding:0; cursor:pointer }
input{ font-family:inherit; font-weight:inherit }
:focus-visible{ outline:2px solid currentColor; outline-offset:3px }

.pw{ max-width:var(--ancho); margin:0 auto; padding-left:var(--gutter); padding-right:var(--gutter) }
.vo{ 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; left:-9999px; top:0; z-index:60; background:var(--lila); color:#000; padding:14px 20px }
.saltar:focus{ left:0 }

/* ==========================================================================
   HEADER · pegajoso y plegable
   La fila de arriba (lupa · marca · WhatsApp) se va sola con el scroll y la
   fila de secciones se clava arriba. Lo hace el compositor del navegador con
   position:sticky y un top negativo: cero JavaScript, cero trabón.
   ========================================================================== */
.header{ position:sticky; top:0; z-index:30 }
@media (min-width:900px){
  .header{ top:calc(var(--h-pliegue) * -1) }
  /* Mientras se busca no se pliega: si no, al hacer scroll se cortaría el
     cajón por arriba, que es justo lo que se está leyendo. */
  .header.abierto{ top:0 }
}

.header__caja{
  background:var(--lila); color:var(--h-fg);
  border-bottom:1px solid rgba(0,0,0,.07);
}

.header__fila{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  grid-template-areas:
    'buscar marca accesos'
    'nav    nav   nav';
  align-items:center;
  column-gap:20px;
  row-gap:var(--h-hueco);
  padding:var(--h-arriba) var(--gutter) var(--h-abajo);
  max-width:none;
}

/* --- la marca --- */
.marca{ grid-area:marca; justify-self:center; display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1; min-height:44px }
.marca__nom{ font-family:var(--titulo); font-size:22px; letter-spacing:.05em; color:var(--h-fg); white-space:nowrap }
.marca__linea{ font-weight:400; font-size:12px; letter-spacing:.14em; color:var(--h-suave); margin-top:5px }
.marca:hover .marca__nom{ opacity:.78 }

/* --- el buscador del header --- */
.buscar{ grid-area:buscar; justify-self:start; display:flex; align-items:flex-end; gap:11px; width:210px; max-width:100%; transition:width var(--abre) var(--curva) }
.header.abierto .buscar{ width:360px }
.buscar__lupa{ width:17px; height:17px; flex:none; color:var(--h-medio); cursor:pointer; margin-bottom:5px }
.buscar__campo{ position:relative; flex-grow:1; min-width:0 }
/* La palabra va PEGADA a la línea, como en joyeria-web. El blanco de toque
   de 44 px se consigue con el relleno de ARRIBA (22+18+3+1 de raya = 44), no con
   min-height: con min-height el texto se centraba y quedaba flotando 15 px
   encima de la raya, que es justo lo que se veía mal. */
.buscar input{
  width:100%; display:block; font-size:15px; letter-spacing:.06em; line-height:18px;
  padding:22px 24px 3px 0; border:0; border-bottom:1px solid var(--h-fg); border-radius:0;
  background:transparent; color:var(--h-fg); appearance:none; -webkit-appearance:none;
}
.buscar input:focus{ outline:none }
.buscar input::placeholder{ color:rgba(0,0,0,.45) }
.buscar input::-webkit-search-cancel-button{ display:none }
.buscar__x{ position:absolute; right:0; bottom:4px; width:26px; height:26px; display:flex; align-items:center; justify-content:flex-end; color:var(--h-fg); opacity:.5 }
.buscar__x svg{ width:11px; height:11px }
.buscar__x:hover{ opacity:1 }

/* --- WhatsApp --- */
.accesos{ grid-area:accesos; justify-self:end; display:flex; align-items:center; gap:20px }
.acceso{ position:relative; display:inline-flex; align-items:center; gap:8px; color:var(--h-medio); font-size:15px; min-height:44px; padding:0 2px }
/* el globo con cuántos apartados llevas */
.globo{
  min-width:20px; height:20px; padding:0 6px; background:var(--tinta); color:#fff;
  font-size:12px; line-height:20px; text-align:center; font-variant-numeric:tabular-nums;
}
.acceso--apartados.sin-nada .globo{ display:none }
.acceso:hover{ color:var(--h-fg) }
.acceso svg{ width:19px; height:19px; flex:none }

/* --- la fila de secciones: esta es la que se queda clavada --- */
.nav{
  grid-area:nav; grid-column:1 / -1; justify-self:center; width:100%;
  display:flex; justify-content:center; flex-wrap:wrap;
  background:var(--lila);   /* fondo propio: durante el pliegue el del padre falla */
  overflow:hidden; max-height:46px;
  transition:max-height var(--abre) var(--curva), opacity .2s var(--curva);
}
/* Con el buscador abierto la fila de secciones se pliega y el cajón se queda
   con todo el header, como en joyeria-web. */
.header.abierto .nav{ max-height:0; opacity:0; pointer-events:none }
.nav a{
  padding:9px 16px; font-weight:400; font-size:15px; letter-spacing:.02em;
  color:var(--h-medio); line-height:1.3; min-height:40px; display:flex; align-items:center;
}
.nav a:hover{ color:var(--h-fg) }
.nav a:hover span, .nav a.act span{ text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px }
.nav a.act{ color:var(--h-fg) }

/* --- hamburguesa, solo en celular --- */
.menu-btn{ display:none; grid-area:buscar; justify-self:start; color:var(--h-medio); padding:8px; margin-left:-8px }
.menu-btn svg{ width:22px; height:22px }
.menu-movil{ background:var(--lila); border-top:1px solid rgba(0,0,0,.08); padding:8px var(--gutter) 18px }
.menu-movil a{ display:flex; align-items:center; min-height:48px; font-size:16px; letter-spacing:.02em; color:var(--tinta) }

/* ==========================================================================
   CAJÓN DEL BUSCADOR · vive dentro del header y empuja la página hacia abajo.
   Nada flota encima de nada, así que ningún overflow lo puede recortar.
   ========================================================================== */
.cajon{
  display:grid; grid-template-rows:0fr;
  background:var(--lila);
  transition:grid-template-rows var(--abre) var(--curva);
}
.header.abierto .cajon{ grid-template-rows:1fr }
.cajon__ventana{ overflow:hidden; min-height:0 }
.cajon__int{
  opacity:0; transform:translateY(-10px);
  transition:opacity .26s var(--curva) .08s, transform var(--abre) var(--curva);
}
.header.abierto .cajon__int{ opacity:1; transform:none }
.cajon__caja{ padding-top:20px; padding-bottom:32px }

.cajon__rejilla{ display:grid; gap:30px }
@media (min-width:900px){ .cajon__rejilla{ grid-template-columns:250px minmax(0,1fr); gap:64px; align-items:start } }

.cajon__rotulo{ font-size:13px; letter-spacing:.02em; color:var(--h-suave); margin:0 0 14px }
.cajon__lado{ display:flex; flex-direction:column; gap:28px }
.cajon__grupo{ display:flex; flex-direction:column; gap:12px }
.cajon__col, .cajon__sug{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  font-size:15.5px; letter-spacing:.01em; color:var(--h-fg); text-align:left; min-height:40px;
}
.cajon__sug{ justify-content:flex-start; color:var(--h-medio) }
.cajon__col:hover span:first-child, .cajon__sug:hover{ text-decoration:underline; text-underline-offset:4px }
.cajon__n{ font-size:13px; color:var(--h-suave); font-variant-numeric:tabular-nums }

.cajon__piezas{ display:flex; flex-direction:column }
.cajon__pieza{
  display:flex; align-items:center; gap:16px; padding:9px 12px 9px 0;
  border-bottom:1px solid rgba(0,0,0,.13); color:var(--h-fg); transition:background .15s var(--curva);
}
.cajon__pieza:hover{ background:rgba(0,0,0,.06) }
.cajon__mini{ width:50px; height:50px; flex:none; background:#fff; object-fit:contain; padding:2px }
.cajon__cuerpo{ flex-grow:1; min-width:0 }
.cajon__nombre{ display:block; font-family:var(--titulo); font-size:16.5px; line-height:1.3; color:rgba(0,0,0,.45) }
.cajon__nombre b{ font-weight:inherit; color:var(--h-fg) }
.cajon__meta{ display:block; font-size:13px; letter-spacing:.01em; color:var(--h-medio); margin-top:5px }
.cajon__precio{ font-size:14px; font-variant-numeric:tabular-nums; color:var(--h-medio); white-space:nowrap }
.cajon__agotado{ color:var(--rojo) }
.cajon__cierre{ margin-top:20px }
.cajon__piezas--todas{ max-height:440px; overflow-y:auto }
.cajon__titulo-vacio{ font-family:var(--titulo); font-size:20px; line-height:1.4; margin:0 0 12px }
.cajon__texto-vacio{ font-size:15.5px; line-height:1.75; color:var(--h-medio); max-width:54ch; margin:0 }

/* ==========================================================================
   PIEZAS SUELTAS
   ========================================================================== */
.rotulo{ font-weight:400; font-size:13px; letter-spacing:.08em; color:var(--suave) }
.rotulo--lila{ color:var(--lila) }   /* solo sobre fondo oscuro */
/* Sobre la banda el fondo YA es lila: ahí el rótulo va en negro. */
.banda .rotulo--lila{ color:rgba(0,0,0,.62) }
.raya{ display:block; width:36px; height:3px; background:var(--lila); margin:28px auto 0 }
.btn{
  background:var(--lila); color:#000; padding:16px 36px; display:inline-flex; align-items:center; justify-content:center; gap:11px;
  font-weight:400; font-size:15px; letter-spacing:.02em; min-height:54px;
}
.btn:hover{ filter:brightness(.94) }   /* oscurece el mismo lila, no lo cambia */
.btn--linea{ background:transparent; border:1px solid var(--tinta) }
.enlace{
  display:inline-flex; align-items:center; font-weight:400; font-size:15px; letter-spacing:.01em; border-bottom:1px solid var(--tinta); padding-bottom:6px; min-height:44px;
}
.enlace:hover{ opacity:.65 }
/* sobre fondo oscuro: sin esto el enlace del héroe es negro sobre negro */
.enlace--claro{ color:rgba(255,255,255,.88); border-bottom-color:rgba(215,200,231,.85) }
.enlace--claro:hover{ color:#fff }

.seccion{ padding-top:90px }
.cab{ text-align:center; margin-bottom:28px }
.cab h2{ font-family:var(--titulo); font-weight:400; font-size:40px; line-height:1.2; letter-spacing:.01em; margin:14px auto 0; max-width:22ch }
.cab p:not(.rotulo){ font-size:15.5px; line-height:1.9; color:var(--medio); max-width:58ch; margin:18px auto 0 }
/* variante alineada a la izquierda, para las colecciones */
.cab--izq{ text-align:left }
.cab--izq h2{ margin-left:0; margin-right:0 }
.cab--izq p:not(.rotulo){ margin-left:0 }

.miga{ padding-top:22px; padding-bottom:20px; font-size:14px; letter-spacing:.02em; color:var(--medio); display:flex; align-items:center; min-height:44px }
.miga a{ color:var(--medio); padding:10px 12px; margin-left:-12px; display:inline-flex; align-items:center; min-height:44px }
.miga a:hover{ color:var(--tinta) }
.miga i{ font-style:normal; margin:0 8px; color:var(--linea) }

/* ==========================================================================
   HÉROE
   La foto va CONTENIDA, no recortada: son frascos altos sobre fondo claro y
   con object-fit:cover se les cortaba la tapa y la etiqueta.
   ========================================================================== */
.hero{ display:grid; grid-template-columns:minmax(0,1fr) 46%; background:#000; min-height:560px; align-items:stretch }
.hero__txt{ align-self:center; padding:60px 46px 60px 56px }
.hero h1{ font-family:var(--titulo); font-weight:400; font-size:clamp(32px,3.6vw,50px); line-height:1.1; margin:18px 0 18px; color:#fff; text-wrap:balance }
.hero p{ font-size:15.5px; line-height:1.85; color:rgba(255,255,255,.72); max-width:44ch; margin:0 0 30px }
.acciones{ display:flex; align-items:center; gap:28px; flex-wrap:wrap }
.hero__media{ position:relative; align-self:stretch; background:#fff; display:block; overflow:hidden }
/* La foto va absoluta: si va en el flujo, su alto natural (1100 px) empuja el
   héroe a 700 px y se come toda la primera pantalla. */
.hero__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:34px 34px 74px }
.hero__pie{ position:absolute; right:26px; bottom:24px; text-align:right; display:grid; gap:5px }
.hero__pie .n{ font-family:var(--titulo); font-size:17px; color:var(--tinta) }
.hero__pie .p{ font-size:12.5px; letter-spacing:.06em; color:var(--medio); font-variant-numeric:tabular-nums }

/* ==========================================================================
   TARJETA DE PRODUCTO
   ========================================================================== */
.rejilla{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:26px 24px; list-style:none; margin:30px 0 0; padding:0 }
.rejilla--3{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:30px }
.col-item[hidden]{ display:none }

.foto{ position:relative; display:grid; place-items:center; background:#fff; border:1px solid var(--fina); width:100%; aspect-ratio:1/1; overflow:hidden }
.foto img{ grid-area:1/1; width:100%; height:100%; object-fit:contain; padding:6px; transition:opacity .3s var(--curva) }
.foto__dos{ opacity:0 }
.card:hover .foto__dos{ opacity:1 }
.card:hover .foto__uno{ opacity:0 }
.badge{ position:absolute; top:0; left:0; z-index:2; background:var(--lila); color:#000; font-weight:400; font-size:12.5px; letter-spacing:.01em; padding:7px 12px }
.badge--gris{ background:rgba(26,26,26,.72); color:#fff }
.badge--borde{ background:#fff; border:1px solid rgba(26,26,26,.5) }
.card{ display:block }
.card--agotado .foto img{ opacity:.5 }
.card--agotado:hover .foto__dos{ opacity:.5 }
.card--agotado:hover .foto__uno{ opacity:0 }
.card__marca{ font-weight:400; font-size:12.5px; letter-spacing:.1em; color:var(--suave); margin-top:16px }
.card__nom{ font-family:var(--titulo); font-size:17px; line-height:1.35; margin-top:7px }
.card:hover .card__nom{ text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px }
.card__resumen{ font-size:13.5px; line-height:1.6; color:var(--medio); margin-top:7px }
.card__precio{ font-size:15px; color:var(--medio); margin-top:8px; font-variant-numeric:tabular-nums }

/* ==========================================================================
   LAS ETIQUETAS · lo que hace distinta a esta tienda
   ========================================================================== */
.etqs{ display:flex; flex-wrap:wrap; gap:6px; margin-top:13px; list-style:none; padding:0 }
.etq{
  font-weight:400; font-size:12.5px; letter-spacing:.01em;
  padding:6px 10px; border:1px solid var(--linea); color:var(--medio); white-space:nowrap;
}
.etq--piel{ background:var(--lav-claro); border-color:var(--lav-claro); color:var(--tinta) }
.etq--ok{  border-color:rgba(60,110,71,.45); color:var(--verde) }
.etq--ojo{ border-color:rgba(164,52,47,.45); color:var(--rojo) }
.etq-nota{ font-size:13.5px; line-height:1.75; color:var(--medio); max-width:78ch }

/* ==========================================================================
   BARRA DE FILTROS · en línea, sin recuadros
   ========================================================================== */
.intro-col{ font-size:16px; line-height:1.9; color:var(--medio); max-width:62ch; margin:10px 0 0 }
.barra{ border-block:1px solid var(--linea); margin-top:30px }
.barra__int{ display:flex; align-items:center; justify-content:space-between; gap:24px; padding-block:14px; flex-wrap:wrap }
.barra__grupo{ display:flex; align-items:center; gap:24px; flex-wrap:wrap }
.barra__et{ font-family:var(--titulo); font-size:14px; letter-spacing:.02em; color:var(--suave) }

.filtro{ position:relative }
.filtro__btn, .filtro__sw{
  display:inline-flex; align-items:center; gap:9px; min-height:44px;
  border-bottom:1px solid rgba(26,26,26,.35); padding:0 0 4px;
  font-size:15px; letter-spacing:.02em; color:var(--tinta);
  transition:border-color var(--rapido) ease;
}
.filtro__btn:hover, .filtro__sw:hover{ border-bottom-color:var(--tinta) }
.filtro__sw.is-elegida, .filtro__btn[aria-expanded="true"]{ border-bottom-color:var(--tinta); border-bottom-width:2px }
.filtro__flecha{ width:11px; height:11px; transition:transform .18s var(--curva) }
.filtro__btn[aria-expanded="true"] .filtro__flecha{ transform:rotate(180deg) }
.filtro__n{ font-size:12.5px; color:var(--suave); font-variant-numeric:tabular-nums }

.filtro__panel{
  position:absolute; z-index:20; top:calc(100% + 10px); left:0; min-width:236px;
  background:#fff; border:1px solid rgba(26,26,26,.14); padding:6px 0; display:grid;
}
.barra__grupo--fin .filtro__panel{ left:auto; right:0 }
.filtro__op{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  text-align:left; padding:12px 16px; font-size:15px; letter-spacing:.02em;
  color:var(--tinta); min-height:46px; transition:background var(--rapido) ease;
}
.filtro__op:hover{ background:var(--lav-claro) }
.filtro__op.is-elegida{ color:var(--tinta) }
.filtro__op.is-elegida::after{ content:''; width:14px; height:1px; background:var(--tinta); flex:none }
.filtro__op--limpiar{ border-top:1px solid var(--fina); margin-top:4px; color:var(--suave) }

.barra__activos{ display:flex; align-items:center; gap:14px; padding-bottom:14px; flex-wrap:wrap }
.chip{
  display:inline-flex; align-items:center; gap:9px; min-height:32px;
  border-bottom:1px solid rgba(26,26,26,.35); padding:0 0 3px;
  font-size:14px; letter-spacing:.02em; color:var(--medio);
}
.chip svg{ width:10px; height:10px }
.chip--limpiar{ border-bottom-color:transparent; color:var(--suave) }
.chip--limpiar:hover{ border-bottom-color:rgba(26,26,26,.3) }

/* pie de la rejilla: cuántas llevas y ver más */
.rejilla__pie{ text-align:center; padding-top:54px }
.rejilla__cuenta{ font-size:14px; letter-spacing:.04em; color:var(--medio); margin:0; font-variant-numeric:tabular-nums }
.rejilla__barra{ display:block; width:190px; height:1px; background:var(--linea); margin:12px auto 0 }
.rejilla__barra span{ display:block; height:1px; background:var(--tinta); transition:width .3s var(--curva) }
.rejilla__pie .enlace{ margin-top:26px }
.vacio{ text-align:center; padding:60px 20px; color:var(--medio); font-size:16px; line-height:1.9 }

/* ==========================================================================
   FICHA DE PRODUCTO
   ========================================================================== */
.producto{ display:grid; grid-template-columns:minmax(0,1fr) 468px; gap:54px; align-items:start; padding-bottom:20px }
.galeria{ position:sticky; top:140px; display:grid; grid-template-columns:96px minmax(0,1fr); gap:16px; align-items:start }
.galeria__minis{ display:flex; flex-direction:column; gap:12px; order:1 }
.galeria__grande{ order:2; background:#fff; border:1px solid var(--fina); aspect-ratio:1/1; display:grid; place-items:center; overflow:hidden }
.galeria__grande img{ width:100%; height:100%; object-fit:contain; padding:18px }
.mini{ width:96px; height:96px; padding:0; background:#fff; border:1px solid var(--fina); opacity:.72; outline:1px solid transparent; outline-offset:3px; transition:opacity var(--rapido) ease, outline-color var(--rapido) ease }
.mini img{ width:100%; height:100%; object-fit:contain; padding:6px }
.mini:hover{ opacity:1 }
.mini.act{ opacity:1; outline-color:var(--tinta) }

.producto h1{ font-family:var(--titulo); font-weight:400; font-size:36px; line-height:1.2; margin:12px 0 0 }
.producto__precio{ font-size:22px; margin:18px 0 0; font-variant-numeric:tabular-nums }
.producto__precio .ml{ font-size:13px; color:var(--suave); margin-left:10px }
.producto__estado{ display:inline-flex; align-items:center; gap:9px; font-size:15px; color:var(--verde); margin-top:12px }
.producto__estado.agotado{ color:var(--rojo) }
.punto{ width:6px; height:6px; background:currentColor; display:inline-block }
.producto__resumen{ font-size:16px; line-height:1.85; color:var(--medio); margin:20px 0 0 }
.producto__info .etqs{ margin-top:18px }
.producto__desc{ margin:24px 0 0; padding-top:24px; border-top:1px solid var(--fina) }
.producto__desc p{ font-size:15px; line-height:1.95; color:var(--medio); margin:0 0 14px }
.compra{ margin-top:28px; display:flex; flex-direction:column; gap:14px }
.nota-pago{ font-size:14px; line-height:1.8; color:var(--medio) }
.datos{ margin:26px 0 0; padding:0 }
.dato{ display:flex; gap:14px; padding:15px 0; border-bottom:1px solid var(--fina); font-size:15.5px }
.dato dt{ width:160px; flex:none; color:var(--suave); font-size:14px; letter-spacing:.01em; padding-top:2px }
.dato dd{ margin:0; color:var(--medio); line-height:1.8 }

/* ==========================================================================
   CAJAS Y AVISOS
   ========================================================================== */
.legal{ border:1px solid var(--linea); padding:22px 24px; margin-top:26px }
.legal h4{ font-family:var(--titulo); font-weight:400; font-size:15px; margin:0 0 8px }
.legal p{ font-size:14.5px; line-height:1.85; color:var(--medio); margin:0; max-width:78ch }
.legal--ojo{ border-color:rgba(164,52,47,.4) }
.legal--ojo h4{ color:var(--rojo) }

.banda{ background:var(--lila); padding:70px 0; margin-top:90px }
.banda h2{ font-family:var(--titulo); font-weight:400; font-size:34px; line-height:1.24; margin:14px 0 0 }
.banda p{ font-size:15px; line-height:1.95; color:rgba(26,26,26,.7); margin:16px 0 0 }
.caja{ border:1px solid var(--linea); padding:26px 28px }
.caja h3{ font-family:var(--titulo); font-weight:400; font-size:22px; margin:0 }
.caja p{ font-size:15.5px; line-height:1.9; color:var(--medio); margin:10px 0 0; max-width:78ch }
.caja--liga{ display:block; transition:background var(--rapido) ease }
.caja--liga:hover{ background:var(--lav-claro) }
.caja--ancha{ margin-top:30px; padding:30px 32px }
.pasos-num{ margin:14px 0 0; padding-left:22px; font-size:15.5px; line-height:2; color:var(--medio) }
.pasos-num b{ font-weight:400; color:var(--tinta) }
.dos{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:30px }
.tres{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:30px }
.cuatro{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px }

/* ==========================================================================
   RUTINAS GENERADAS
   ========================================================================== */
.rutinas{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:30px; margin-top:36px }
.rutina{ border:1px solid var(--linea); padding:26px 24px; display:flex; flex-direction:column }
.rutina__cab h3{ font-family:var(--titulo); font-weight:400; font-size:22px; line-height:1.3; margin:0 }
.rutina__cab p{ font-size:15px; line-height:1.85; color:var(--medio); margin:12px 0 0 }
.pasos{ list-style:none; margin:22px 0 0; padding:0; flex:1 }
.paso{ padding:16px 0; border-top:1px solid var(--fina) }
.paso__num{ font-weight:400; font-size:13px; letter-spacing:.02em; color:var(--medio); margin:0 0 10px }
.paso__link{ display:flex; gap:14px; align-items:center; min-height:44px }
.paso__link img{ width:58px; height:58px; flex:none; object-fit:contain; background:#fff; border:1px solid var(--fina); padding:2px }
.paso__link:hover .paso__nom{ text-decoration:underline; text-underline-offset:3px }
.paso__nom{ display:block; font-family:var(--titulo); font-size:16px; line-height:1.35 }
.paso__precio{ display:block; font-size:14px; color:var(--medio); margin-top:5px; font-variant-numeric:tabular-nums }
.paso__nota{ font-size:13.5px; line-height:1.75; color:var(--medio); margin:10px 0 0 }
.paso--hueco{ background:var(--lav-claro); padding:16px; margin-top:8px }
.paso--hueco .paso__nom{ font-family:var(--cuerpo); font-size:14px; color:var(--tinta) }
.rutina__total{ font-size:14.5px; line-height:1.8; color:var(--medio); margin:20px 0 0; padding-top:16px; border-top:1px solid var(--tinta) }
.rutina__total b{ font-weight:400; color:var(--tinta); font-variant-numeric:tabular-nums }

/* ==========================================================================
   PIE
   ========================================================================== */
.pie{ background:#000; color:rgba(255,255,255,.7); padding:62px 0 40px; margin-top:90px }
.pie__cols{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:48px }
.pie__marca{ font-family:var(--titulo); font-size:30px; line-height:1; letter-spacing:.05em; color:#fff; margin:0 }
/* El ancho angosto es SOLO para el párrafo de presentación. Si se le pone a
   todos los <p> del pie, el aviso legal se apretuja en una columna. */
.pie p{ font-size:15px; line-height:1.9; color:rgba(255,255,255,.72); margin:18px 0 0 }
.pie__intro{ max-width:34ch }
.pie__rot{ font-weight:400; font-size:14px; letter-spacing:.02em; color:var(--lila) }
.pie__lista{ display:flex; flex-direction:column; gap:2px; margin-top:12px; font-size:15px; color:rgba(255,255,255,.72) }
.pie__lista a, .pie__lista span{ color:rgba(255,255,255,.72); min-height:44px; display:flex; align-items:center }
.pie__lista a:hover{ color:#fff }
.pie__legal p{ margin:0; max-width:720px; font-size:inherit; line-height:inherit; color:inherit }
.pie__legal{ margin-top:44px; padding-top:26px; border-top:1px solid rgba(255,255,255,.14); font-size:14.5px; line-height:1.9; color:rgba(255,255,255,.72); max-width:none }
.pie__legal b{ font-weight:400; color:rgba(255,255,255,.75) }
.pie__fin{ margin-top:26px; display:flex; gap:20px; justify-content:space-between; flex-wrap:wrap; font-size:13.5px; color:rgba(255,255,255,.62) }

/* ==========================================================================
   CELULAR · todo lo que cambia abajo de 900 px
   ========================================================================== */
@media (max-width:900px){
  :root{ --gutter:20px }

  /* Todo lo que se toca con el dedo: 44 px de alto como mínimo. */
  .marca, .acceso, .enlace, .pie__lista a, .pie__lista span, .menu-movil a, .cajon__sug, .cajon__col{
    min-height:44px; display:flex; align-items:center;
  }
  .marca{ flex-direction:column; justify-content:center }
  .enlace{ display:inline-flex }
  .cajon__col{ justify-content:space-between }
  /* "Para piel grasa, mixta y normal" no cabe en media columna: que envuelva. */
  .etq{ white-space:normal }

  /* en celular el header no se pliega: se queda entero y pegado */
  .header{ top:0 }
  .header__fila{
    grid-template-columns:44px 44px 1fr auto;
    grid-template-areas:'menu buscar libre accesos';
    column-gap:6px; row-gap:0; padding:10px var(--gutter);
  }
  /* La marca se centra contra TODO el renglón, no contra la columna que le
     toque: con columnas fijas se recorría 25 px a la derecha porque los
     iconos de la derecha son más anchos que los de la izquierda. */
  .marca{ grid-row:1; grid-column:1/-1; justify-self:center; z-index:1 }
  .menu-btn{ display:inline-flex; grid-area:menu; align-items:center; justify-content:center; min-height:44px; min-width:44px; margin:0 }
  .marca__nom{ font-size:19px }
  /* La lupa se queda SIEMPRE a la vista: lo que se esconde es el campo.
     Antes se escondía el buscador entero y en teléfono no había forma de buscar. */
  .buscar{ grid-area:buscar; justify-self:start; width:44px; min-height:44px; gap:0;
           align-items:center; justify-content:center }
  .buscar__campo{ display:none }
  .buscar__lupa{ width:20px; height:20px; color:var(--h-fg) }
  .header.abierto .buscar{
    grid-area:auto; grid-column:1/-1; width:100%; gap:11px;
    align-items:flex-end; justify-content:flex-start; margin-top:10px;
  }
  .header.abierto .buscar__campo{ display:block }
  .acceso span:not(.globo){ display:none }
  .acceso{ min-width:44px; justify-content:center }
  /* el globo se queda, pegado al icono, para que sí se vea cuántos llevas */
  .acceso--apartados .globo{
    position:absolute; top:2px; right:-6px; min-width:19px; height:19px;
    font-size:11.5px; line-height:19px; padding:0 5px;
  }
  .nav{ display:none }
  .nav--movil{ display:block }

  .cajon__caja{ padding-bottom:24px }
  /* En teléfono el cajón medía 1050 px: no cabía en la pantalla.
     Fuera la columna de atajos; quedan los productos, que es lo que se busca. */
  .cajon__lado--filtros{ display:none }
  .cajon__mini{ width:44px; height:44px }
  .cajon__piezas--todas{ max-height:330px }

  .hero{ grid-template-columns:1fr; min-height:0 }
  .hero__txt{ padding:38px 20px 34px }
  .hero h1{ font-size:34px }
  .hero__media{ height:330px }
  .hero__media img{ padding:24px 24px 64px }
  .hero__pie{ right:auto; left:20px; text-align:left }

  .seccion{ padding-top:56px }
  .cab h2{ font-size:28px }
  .rejilla, .rejilla--3{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px 16px }
  .card__nom{ font-size:15px }

  .barra__int{ gap:14px; padding-block:12px }
  .barra__grupo{ gap:18px; width:100%; }
  .filtro__panel{ min-width:200px }

  .producto{ grid-template-columns:1fr; gap:28px }
  .galeria{ position:static; grid-template-columns:1fr; gap:10px }
  .galeria__minis{ order:2; flex-direction:row }
  .galeria__grande{ order:1 }
  .mini{ width:auto; flex:1; height:auto; aspect-ratio:1/1; min-height:44px }

  .dos, .tres, .cuatro, .rutinas{ grid-template-columns:1fr; gap:20px }
  .pie__cols{ grid-template-columns:1fr; gap:32px }
  .dato{ flex-direction:column; gap:6px }
  .dato dt{ width:auto }
  .banda{ padding:56px 0; margin-top:56px }
  .banda h2{ font-size:26px }
  .miga{ padding-top:18px; padding-bottom:16px }
}

@media (prefers-reduced-motion:reduce){
  *{ transition-duration:.01ms!important; animation-duration:.01ms!important }
}


/* ==========================================================================
   MIS APARTADOS
   No es un carrito de pago: es la lista de lo que el cliente va juntando,
   y termina en UN mensaje de WhatsApp con todo adentro. Vive en el navegador
   de quien compra (localStorage), no en el servidor.
   ========================================================================== */
.apartados{ display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:60px; align-items:start; padding-bottom:20px }
.apartados__lista{ list-style:none; margin:0; padding:0; border-top:1px solid var(--linea) }

/* UN renglón por producto, todo sobre la misma línea: foto · nombre · c/u ·
   cantidad · subtotal · quitar. Es como está armado el carrito de joyeria-web
   y es lo que hace que se vea de tienda y no de formulario. */
.ap{
  display:grid; grid-template-columns:88px minmax(0,1fr) 104px 112px 124px 40px;
  align-items:center; gap:24px; padding:26px 0; border-bottom:1px solid var(--fina);
}
.ap__ctrl{ display:contents }   /* en escritorio no estorba; en teléfono agrupa */
.ap__foto{ width:88px; height:88px; background:#fff; border:1px solid var(--fina); object-fit:contain; padding:6px }
.ap__marca{ font-size:12.5px; letter-spacing:.1em; color:var(--suave); margin:0 }
.ap__nom{ display:block; font-family:var(--titulo); font-size:17px; line-height:1.35; margin:6px 0 0 }
.ap__nom:hover{ text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px }
.ap__precio{ font-size:13.5px; color:var(--suave); margin:0; text-align:right; font-variant-numeric:tabular-nums }
.ap__agotado{ font-size:13.5px; color:var(--rojo); margin:6px 0 0 }
.ap__total{ font-family:var(--titulo); font-size:18px; text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap }

/* Sin recuadro: dos signos y el número con su rayita. El blanco de toque de
   44 px lo dan los botones, no una caja dibujada alrededor. */
.cantidad{ display:flex; align-items:center; justify-content:center; gap:2px }
.cantidad button{ width:34px; height:44px; display:flex; align-items:center; justify-content:center; font-size:17px; line-height:1; color:var(--suave) }
.cantidad button:hover{ color:var(--tinta) }
.cantidad span{
  min-width:34px; text-align:center; font-size:15px; font-variant-numeric:tabular-nums;
  border-bottom:1px solid var(--linea); padding-bottom:3px;
}
.ap__quitar{ width:40px; height:44px; display:flex; align-items:center; justify-content:center; color:rgba(26,26,26,.35) }
.ap__quitar svg{ width:13px; height:13px }
.ap__quitar:hover{ color:var(--rojo) }

/* El resumen es un bloque de color, no una caja con borde. Un rectángulo
   delineado sobre blanco es lo que hacía que se viera de plantilla. */
.resumen{ background:var(--lila); color:var(--h-fg); padding:34px 32px; position:sticky; top:120px }
.resumen h2{ font-weight:400; font-size:13px; letter-spacing:.08em; color:var(--h-suave); margin:0 0 22px }
.resumen__linea{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding:11px 0; font-size:14.5px; color:var(--h-medio); border-bottom:1px solid rgba(0,0,0,.09);
}
.resumen__linea span:last-child{ font-variant-numeric:tabular-nums; color:var(--h-fg) }
.resumen__linea--total{
  border-bottom:0; border-top:1px solid var(--h-linea); margin-top:12px; padding-top:20px;
  font-family:var(--titulo); font-size:22px; color:var(--h-fg);
}
/* sobre el lila el botón va en tinta: si fuera lila otra vez, desaparecería */
.resumen .btn{ width:100%; margin-top:24px; background:var(--tinta); color:#fff }
.resumen .btn:hover{ filter:none; background:#000 }
.resumen__dia{ font-size:13.5px; color:var(--h-medio); margin:10px 0 0; font-variant-numeric:tabular-nums }
.resumen__nota{ font-size:13px; line-height:1.8; color:var(--h-suave); margin:16px 0 0 }

.ap-vacio{ text-align:center; padding:90px 20px }
.ap-vacio h2{ font-family:var(--titulo); font-weight:400; font-size:26px; line-height:1.3; margin:0 0 14px }
.ap-vacio p{ font-size:16px; line-height:1.85; color:var(--medio); max-width:44ch; margin:0 auto 30px }

/* el aviso de abajo: una nota con su rayita, no otro recuadro vacío */
.aviso-lista{ border-top:1px solid var(--linea); padding-top:24px; margin-top:54px; max-width:74ch }
.aviso-lista h4{ font-family:var(--titulo); font-weight:400; font-size:17px; margin:0 0 10px }
.aviso-lista p{ font-size:14.5px; line-height:1.9; color:var(--medio); margin:0 }

/* el avisito de "ya quedó agregado" */
.agregado{
  display:none; align-items:center; gap:10px; margin-top:12px;
  font-size:14.5px; color:var(--verde);
}
.agregado.se-ve{ display:flex }
.agregado svg{ width:18px; height:18px; flex:none }

@media (max-width:900px){
  .apartados{ grid-template-columns:1fr; gap:34px }
  .resumen{ position:static; padding:28px 22px }
  /* en teléfono el renglón se parte en dos: arriba foto y nombre, abajo los
     controles. Las seis columnas no caben en 390 px. */
  .ap{
    grid-template-columns:72px minmax(0,1fr) 34px;
    grid-template-areas:'foto datos quitar' 'ctrl ctrl ctrl';
    gap:12px 14px; padding:20px 0; align-items:center;
  }
  .ap__foto{ grid-area:foto; width:72px; height:72px }
  .ap__datos{ grid-area:datos }
  .ap__precio{ display:none }
  .ap__ctrl{ grid-area:ctrl; display:flex; align-items:center; justify-content:space-between; gap:14px }
  .cantidad{ justify-content:flex-start }
  .ap__quitar{ grid-area:quitar; width:34px; align-self:start }
  .ap__nom{ font-size:16px }
}

/* ==========================================================================
   DIARIO · las notas
   Mismo patrón que joyeria-web: tarjeta con foto, fecha, título y resumen.
   Aquí la fecha va en minúsculas, no en versalitas.
   ========================================================================== */
.notas{ list-style:none; margin:30px 0 0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:44px 30px }
.nota{ display:block }
.nota__media{ display:block; aspect-ratio:3/2; overflow:hidden; background:#fff; border:1px solid var(--fina) }
.nota__media img{ width:100%; height:100%; object-fit:contain; padding:10px; transition:opacity .3s var(--curva) }
.nota:hover .nota__media img{ opacity:.82 }
.nota__meta{ font-size:13px; letter-spacing:.02em; color:var(--suave); margin:16px 0 0; font-variant-numeric:tabular-nums }
.nota__titulo{ font-family:var(--titulo); font-size:20px; line-height:1.32; margin:8px 0 0 }
.nota:hover .nota__titulo{ text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px }
.nota__resumen{ font-size:14.5px; line-height:1.75; color:var(--medio); margin:8px 0 14px }

/* la nota abierta */
.nota-larga{ max-width:648px; margin:0 auto }   /* ~80 caracteres por renglón */
.nota-larga h1{ font-family:var(--titulo); font-weight:400; font-size:36px; line-height:1.2; margin:14px 0 0; text-wrap:balance }
.nota-larga__entrada{ font-size:17px; line-height:1.85; color:var(--medio); margin:18px 0 0 }
.nota-larga__foto{ width:100%; aspect-ratio:3/2; object-fit:contain; background:#fff; border:1px solid var(--fina); padding:14px; margin:30px 0 0 }
.nota-larga__cuerpo{ margin-top:30px }
.nota-larga__cuerpo h2{ font-family:var(--titulo); font-weight:400; font-size:23px; line-height:1.3; margin:36px 0 0 }
.nota-larga__cuerpo p{ font-size:16px; line-height:1.95; color:var(--medio); margin:14px 0 0 }
.nota-larga__cuerpo ul{ margin:14px 0 0; padding-left:20px }
.nota-larga__cuerpo li{ font-size:16px; line-height:1.95; color:var(--medio); margin:0 0 8px }
.nota-larga__cuerpo a{ color:var(--tinta); text-decoration:underline; text-underline-offset:3px }
.nota-larga__pie{ margin-top:42px; padding-top:26px; border-top:1px solid var(--fina) }

@media (max-width:900px){
  .notas{ grid-template-columns:1fr; gap:34px }
  .nota-larga h1{ font-size:28px }
  .nota-larga__cuerpo h2{ font-size:20px }
}

/* ==========================================================================
   ARMA TU RUTINA · la guía paso a paso
   No es una página de lectura: es un proceso. Una pregunta a la vez, se
   escoge y avanza sola. El riel de arriba dice dónde va y deja volver.
   Sin recuadros: las opciones se separan con rayitas (el gap de 1 px sobre
   un fondo de línea) y lo elegido se llena de lila.
   ========================================================================== */
.guia{ padding-top:40px; padding-bottom:20px }

.guia__riel{ position:relative; display:flex; border-bottom:1px solid var(--linea); overflow-x:auto; scrollbar-width:none }
.guia__riel::-webkit-scrollbar{ display:none }
.guia__paso{
  flex:1 0 auto; padding:0 16px 14px; font-size:13.5px; letter-spacing:.02em; color:var(--suave);
  white-space:nowrap; min-height:44px; display:flex; align-items:flex-end; justify-content:center; gap:8px;
  transition:color var(--rapido) ease;
}
.guia__paso[aria-current="step"]{ color:var(--tinta) }
.guia__paso.hecho{ color:var(--medio); cursor:pointer }
.guia__paso.hecho:hover{ color:var(--tinta) }
.guia__paso svg{ width:12px; height:12px; flex:none; color:var(--verde) }
.guia__barra{
  position:absolute; left:0; bottom:-1px; height:3px; width:0; background:var(--lila);
  transition:left var(--abre) var(--curva), width var(--abre) var(--curva);
}

.guia__lienzo{ padding-top:54px; min-height:560px }
.guia__lienzo.cambiando .guia__cab, .guia__lienzo.cambiando .guia__ops,
.guia__lienzo.cambiando .guia__pie, .guia__lienzo.cambiando .resumen-rutina{ opacity:0; transform:translateY(8px) }
.guia__cab, .guia__ops, .guia__pie, .resumen-rutina{
  opacity:1; transform:none; transition:opacity .28s var(--curva), transform .28s var(--curva);
}

.guia__cab{ text-align:center; max-width:52ch; margin:0 auto 38px }
.guia__cab h2{ font-family:var(--titulo); font-weight:400; font-size:38px; line-height:1.18; margin:12px 0 0; text-wrap:balance }
.guia__cab p{ font-size:16px; line-height:1.85; color:var(--medio); margin:16px 0 0 }

/* las opciones: sin caja, separadas por rayitas */
.guia__ops{ display:grid; gap:1px; background:var(--linea) }
.guia__ops--4{ grid-template-columns:repeat(4,minmax(0,1fr)) }
.guia__ops--3{ grid-template-columns:repeat(3,minmax(0,1fr)) }
/* Las columnas son las que haya: con tres columnas y dos productos, la celda
   vacía dejaba ver el fondo de la rejilla como un cuadro gris. */
.guia__ops--2{ grid-template-columns:repeat(2,minmax(0,1fr)); max-width:660px; margin:0 auto }
.guia__ops--1{ grid-template-columns:minmax(0,1fr); max-width:340px; margin:0 auto }
.op{
  background:#fff; padding:28px 26px; text-align:left; display:flex; flex-direction:column; gap:10px;
  min-height:168px; transition:background var(--rapido) ease;
}
.op:hover{ background:var(--lav-claro) }
.op.elegida{ background:var(--lila) }
.op__nom{ font-family:var(--titulo); font-size:21px; line-height:1.25 }
.op__txt{ font-size:14.5px; line-height:1.75; color:var(--medio) }
.op.elegida .op__txt{ color:var(--h-medio) }

/* la opción de producto: foto arriba, datos abajo */
.op--prod{ padding:0; min-height:0; display:flex; flex-direction:column; text-align:left }
.op--prod .op__foto{ position:relative; width:100%; aspect-ratio:4/3; background:#fff; display:grid; place-items:center; overflow:hidden }
.op--prod .op__foto img{ width:100%; height:100%; object-fit:contain; padding:14px }
.op--prod .op__cuerpo{ padding:20px 22px 24px; display:flex; flex-direction:column; gap:7px; flex-grow:1 }
.op__marca{ font-size:12.5px; letter-spacing:.1em; color:var(--suave); margin:0 }
.op--prod .op__nom{ margin:5px 0 0 }
.op--prod .op__resumen{ margin:10px 0 0 }
.op--prod .op__aviso{ margin-top:16px }
.op.elegida .op__marca{ color:var(--h-suave) }
/* Sin esta línea el cliente no tiene con qué elegir: ve cuatro frascos
   con nombres en coreano y se va. Dos renglones de para-qué-sirve. */
.op__resumen{ font-size:14px; line-height:1.5; color:var(--medio) }
.op.elegida .op__resumen{ color:var(--h-medio) }
/* Cuántas opciones hay: dicho en voz alta para que no parezca que
   escondemos catálogo, y para anunciar que las tarjetas se comparan. */
.guia__cuenta{
  font-size:13.5px; line-height:1.7; color:var(--medio); text-align:center;
  max-width:70ch; margin:0 auto 26px;
}
/* El sello sobre la foto es el MISMO .badge lila del catálogo: un solo
   vocabulario y un solo lila en toda la página. Uno por tarjeta, y siempre
   sale de un dato real: el que más se lleva, el más barato del paso, nuevo. */
.op--prod .badge{ white-space:nowrap }
/* Los renglones de comparación. Mismas etiquetas, mismo orden, en todas
   las tarjetas del paso: la clienta compara de lado a lado sin leer. */
.op__ficha{
  margin:17px 0 0; padding-top:13px; border-top:1px solid var(--fina);
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:0 14px;
  font-size:13.5px; line-height:1.5;
}
.op__ficha dt{ color:var(--suave); padding:8px 0 0 }
.op__ficha dd{ margin:0; padding:8px 0 0 }
.op__ficha dt:first-child, .op__ficha dt:first-child + dd{ padding-top:0 }
.op__ficha dd.si{ color:var(--verde) }
.op__ficha dd.no{ color:var(--medio) }
.op.elegida .op__ficha{ border-top-color:rgba(0,0,0,.14) }
.op.elegida .op__ficha dt{ color:var(--h-suave) }
.op.elegida .op__ficha dd, .op.elegida .op__ficha dd.si, .op.elegida .op__ficha dd.no{ color:var(--h-fg) }
/* La descripción completa, abierta dentro del mismo paso: no la mandamos
   a otra página y por eso no pierde dónde iba. */
.op__largo{
  margin-top:16px; padding:18px 20px; background:var(--crema);
  font-size:13.5px; line-height:1.75; color:var(--medio);
}
.op__largo p{ margin:0 }
.op__largo p + p{ margin-top:12px }
.op.elegida .op__largo{ background:rgba(255,255,255,.55); color:var(--h-medio) }
/* Dos botones explícitos: elegir no se adivina picándole a la tarjeta. */
.op__elegir{
  margin-top:16px; width:100%; min-height:48px; display:flex; align-items:center;
  justify-content:center; gap:9px; border:1px solid var(--tinta); background:#fff;
  color:var(--tinta); font-family:var(--cuerpo); font-size:15px;
  transition:background var(--rapido) ease, color var(--rapido) ease;
}
.op__elegir:hover{ background:var(--tinta); color:#fff }
.op__elegir svg{ width:15px; height:15px; flex:none }
.op__elegir--reco{ background:var(--tinta); color:#fff }
.op__elegir--reco:hover{ background:#000 }
.op.elegida .op__elegir{ border-color:var(--h-fg); background:var(--h-fg); color:#fff }
.op__mas{
  margin-top:9px; width:100%; min-height:44px; border:0; background:none;
  color:var(--medio); font-family:var(--cuerpo); font-size:13.5px;
  text-decoration:underline; text-underline-offset:4px;
}
.op__mas:hover{ color:var(--tinta) }
.op.elegida .op__mas{ color:var(--h-medio) }
.op.elegida .op__mas:hover{ color:var(--h-fg) }
/* Que los renglones queden a la MISMA altura de tarjeta a tarjeta, no solo
   en el mismo orden: con subrejilla, "Tipo" de las tres cae en la misma
   línea aunque un nombre ocupe dos renglones y el de junto tres. Eso es lo
   que convierte tres tarjetas en una tabla comparable de un vistazo.
   Donde no haya subrejilla la tarjeta se ve igual, solo sin cuadrar. */
@supports (grid-template-rows: subgrid){
  @media (min-width:641px){
    .guia__ops--prod{ grid-template-rows:auto auto auto auto auto auto auto 1fr auto auto auto }
    .op--prod{ grid-row:span 11; display:grid; grid-template-rows:subgrid }
    .op--prod .op__foto{ grid-row:1 }
    .op--prod .op__cuerpo{ grid-row:2 / -1; display:grid; grid-template-rows:subgrid }
    .op--prod .op__marca  { grid-row:1 }
    .op--prod .op__nom    { grid-row:2 }
    .op--prod .op__resumen{ grid-row:3 }
    .op--prod .op__ficha  { grid-row:4 }
    .op--prod .op__aviso  { grid-row:5 }
    .op--prod .op__largo  { grid-row:6 }
    .op--prod .op__pie    { grid-row:8; margin:0 }
    .op--prod .op__elegir { grid-row:9 }
    .op--prod .op__mas    { grid-row:10 }
  }
}
/* El precio y las existencias comparten renglón, pegados al fondo de la
   tarjeta: así todos los precios del paso quedan a la misma altura aunque
   una tarjeta traiga aviso y la de al lado no. */
.op__pie{ margin:auto 0 0; padding-top:14px; display:flex; align-items:baseline; justify-content:space-between; gap:12px }
.op__precio{ font-size:15px; color:var(--medio); font-variant-numeric:tabular-nums }
.op.elegida .op__precio{ color:var(--h-medio) }
.op__quedan{ font-size:12.5px; letter-spacing:.04em; color:var(--medio); white-space:nowrap }
.op.elegida .op__quedan{ color:var(--h-medio) }
/* Lo que hay que saber antes de untárselo. Va abajo y en voz baja: informa,
   no asusta, y es lo que nos ahorra el reclamo por WhatsApp. */
.op__aviso{
  margin-top:6px; padding-top:13px; border-top:1px solid var(--fina);
  font-size:12.5px; line-height:1.65; color:var(--suave);
}
.op__aviso b{ font-weight:400; color:var(--tinta) }
.op.elegida .op__aviso{ border-top-color:rgba(0,0,0,.14); color:var(--h-suave) }
.op.elegida .op__aviso b{ color:var(--h-fg) }
/* El atajo para la que no quiere decidir. */
.guia__recomienda{
  width:100%; margin-top:1px; min-height:56px; display:flex; align-items:center; justify-content:center;
  font-size:15px; color:var(--tinta); background:var(--lav-claro);
  transition:background .2s var(--curva);
}
.guia__recomienda:hover{ background:var(--lila) }
.op__sello{ display:inline-flex; align-items:center; gap:8px; font-size:13.5px; color:var(--verde) }
.op.elegida .op__sello{ color:#000 }
.op__sello svg{ width:14px; height:14px; flex:none }

.rr__aviso{
  margin:8px 0 0; font-size:12.5px; line-height:1.65; color:var(--suave); max-width:52ch;
}
.rr__aviso b{ font-weight:400; color:var(--tinta) }
.guia__pie{ display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:32px; flex-wrap:wrap }
.guia__atras{ display:inline-flex; align-items:center; gap:9px; font-size:15px; color:var(--medio); min-height:44px }
.guia__atras:hover{ color:var(--tinta) }
.guia__atras svg{ width:15px; height:9px }
.guia__saltar{ font-size:15px; color:var(--suave); border-bottom:1px solid var(--linea); padding-bottom:4px; min-height:44px; display:inline-flex; align-items:center }
.guia__saltar:hover{ color:var(--tinta); border-bottom-color:var(--tinta) }
.guia__nada{ text-align:center; padding:50px 20px; font-size:16px; line-height:1.85; color:var(--medio) }

/* el final: la rutina armada */
.resumen-rutina{ display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:60px; align-items:start }
.rr__lista{ list-style:none; margin:0; padding:0; border-top:1px solid var(--linea) }
.rr{ display:grid; grid-template-columns:72px minmax(0,1fr) auto; gap:22px; align-items:center; padding:20px 0; border-bottom:1px solid var(--fina) }
.rr__foto{ width:72px; height:72px; background:#fff; border:1px solid var(--fina); object-fit:contain; padding:6px }
.rr__paso{ font-size:12.5px; letter-spacing:.1em; color:var(--suave); margin:0 }
.rr__nom{ display:block; font-family:var(--titulo); font-size:17px; line-height:1.35; margin:6px 0 0 }
.rr__precio{ font-family:var(--titulo); font-size:17px; font-variant-numeric:tabular-nums; white-space:nowrap }
.rr__saltado{ color:var(--suave); font-size:14.5px }
.rr__cambiar{ font-size:13.5px; color:var(--suave); border-bottom:1px solid var(--linea); padding-bottom:3px; min-height:44px; display:inline-flex; align-items:center }
.rr__cambiar:hover{ color:var(--tinta); border-bottom-color:var(--tinta) }

@media (max-width:900px){
  .guia__lienzo{ padding-top:36px; min-height:0 }
  .guia__cab h2{ font-size:27px }
  .guia__ops--4, .guia__ops--3, .guia__ops--2{ grid-template-columns:repeat(2,minmax(0,1fr)); max-width:none; margin:0 }
  .guia__ops--1{ max-width:none; margin:0 }
  .op{ padding:20px 18px; min-height:140px }
  .op__nom{ font-size:18px }
  .op--prod .op__cuerpo{ padding:14px 16px 18px }
  .resumen-rutina{ grid-template-columns:1fr; gap:34px }
  .rr{ grid-template-columns:60px minmax(0,1fr); gap:14px }
  .rr__foto{ width:60px; height:60px }
  .rr__precio{ grid-column:2; text-align:left }
}
/* En teléfono las tarjetas de producto van de una en una: con foto, nombre,
   resumen, aviso y precio, a media pantalla el nombre se parte en cinco
   renglones y el precio en tres. Las cuatro pieles sí caben de dos en dos. */
@media (max-width:640px){
  .guia__ops--prod{ grid-template-columns:minmax(0,1fr) }
  .op--prod .op__foto{ aspect-ratio:4/3 }
}