/* Roomie Kids. Hoja única. Tokens y reglas según DISENO.md (v2). */

:root{
  /* superficies */
  --papel:#FBF9F5;
  --arena:#F3EEE6;
  --arena-2:#EAE3D8;
  --linea:#E4DDD1;
  --borde-control:#7F8D8A;
  /* texto */
  --tinta:#1D3134;
  --tinta-suave:#4E5F5E;
  /* acción: único acento */
  --accion:#0E6E6A;
  --accion-hover:#0A5753;
  --accion-claro:#D7ECEA;
  /* colores exactos del logo: solo la marca, puntos de categoría y muestras de color */
  --turquesa:#78C6C0; --coral:#F08472; --mostaza:#F6C666; --menta:#A2D8C0; --rosado:#F0A2C0; --celeste:#90C0E4;
  --lema:#726666;                 /* 5.2:1 sobre papel */
  --noche:#141F21;                /* fondo del visor de fotos (tinta muy oscura, no negro) */
  /* campos de marca: cada color del logo mezclado con papel (30 %, coral 26 %).
     Texto encima siempre --tinta (10.4 a 11.5:1); --tinta-suave 5.0:1 o más; --accion 4.6:1 o más */
  --turquesa-claro:#D4EAE5;
  --menta-claro:#E0EFE5;
  --coral-claro:#F8DBD3;
  --mostaza-claro:#FAEACA;
  --celeste-claro:#DBE8F0;
  --rosado-claro:#F8DFE5;
  --coral-tinta:#A8442B; --mostaza-tinta:#8A6414; --menta-tinta:#2F6F55;
  /* derivados (documentados): dato pendiente y borde de muestras */
  --pendiente:#735310;
  --borde-muestra:rgb(29 49 52 / .55);
  --linea-color:rgb(29 49 52 / .14);
  --sombra:0 1px 2px rgb(29 49 52 / .06), 0 8px 24px rgb(29 49 52 / .06);
  --sombra-barra:0 -1px 2px rgb(29 49 52 / .05), 0 -8px 24px rgb(29 49 52 / .08);

  /* tipo: títulos en Nunito (terminales redondas, como el logo) y texto en Nunito Sans */
  --f-titulo:"Nunito", "Nunito Sans", "Segoe UI", system-ui, sans-serif;
  --f-texto:"Nunito Sans", "Segoe UI", system-ui, sans-serif;
  --t-0:.875rem;
  --t-1:1rem;
  --t-2:1.25rem;
  --t-3:1.5625rem;
  --t-4:1.953rem;
  --t-5:2.441rem;

  /* espacio (4pt) */
  --e-1:4px; --e-2:8px; --e-3:12px; --e-4:16px; --e-5:24px; --e-6:32px; --e-7:48px; --e-8:64px; --e-9:96px; --e-10:128px;
  --margen:clamp(16px, 4vw, 48px);
  --radio:16px;
  --radio-campo:12px;
  --pastilla:999px;
  --curva:cubic-bezier(0.16, 1, 0.3, 1);
  --rapido:180ms;
}

/* ---------------------------------------------------------------- base */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:var(--e-5)}
html.sin-scroll{overflow:hidden}
@media (min-width:1024px){html{font-size:106.25%}}
@media (max-width:1023px){html{scroll-padding-bottom:calc(104px + env(safe-area-inset-bottom))}}
body{
  margin:0;background:var(--papel);color:var(--tinta);
  font-family:var(--f-texto);font-size:var(--t-1);line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:clip;
}
img{display:block;max-width:100%;height:auto}
svg{flex-shrink:0}
h1,h2,h3{font-family:var(--f-titulo);font-weight:800;letter-spacing:-0.015em;line-height:1.12;margin:0;text-wrap:balance}
h1{font-size:clamp(2rem, 1.35rem + 2.6vw, var(--t-5))}
h2{font-size:clamp(1.5625rem, 1.2rem + 1.4vw, var(--t-4))}
h3{font-size:var(--t-2)}
p{margin:0;text-wrap:pretty}
ul,ol,dl,dd{margin:0;padding:0}
ul,ol{list-style:none}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.2em}
::selection{background:var(--accion-claro);color:var(--tinta)}
:focus-visible{outline:2px solid var(--accion);outline-offset:2px;border-radius:4px}
button{font:inherit;color:inherit}
html{scrollbar-color:var(--borde-control) var(--arena)}

html:not(.js) .solo-js{display:none}
.solo-puntero{display:none}
@media (hover:hover) and (pointer:fine){.solo-tactil{display:none}.solo-puntero{display:inline}}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.i{width:1.25em;height:1.25em}
.contenedor{width:100%;max-width:calc(1280px + 2 * var(--margen));margin-inline:auto;padding-inline:max(var(--margen), env(safe-area-inset-left)) max(var(--margen), env(safe-area-inset-right))}

.saltar{position:absolute;left:var(--e-4);top:var(--e-2);z-index:60;display:inline-flex;align-items:center;min-height:44px;background:var(--tinta);color:var(--papel);padding:0 var(--e-4);border-radius:var(--pastilla);transform:translateY(-200%);transition:transform var(--rapido) var(--curva)}
.saltar:focus{transform:none}

.pc{color:var(--tinta-suave);font-weight:600;white-space:nowrap}
.franja{background:var(--mostaza-claro);color:var(--tinta);font-size:var(--t-0);font-weight:600;text-align:center;line-height:1.4;padding:6px max(var(--margen), env(safe-area-inset-right)) 6px max(var(--margen), env(safe-area-inset-left))}

/* ---------------------------------------------------------------- botones y enlaces */
.boton{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--e-2);
  min-height:48px;padding:0 var(--e-5);border-radius:var(--pastilla);border:2px solid transparent;
  font-family:var(--f-texto);font-weight:700;font-size:var(--t-1);line-height:1.2;text-decoration:none;cursor:pointer;
  transition:background-color var(--rapido) var(--curva), transform var(--rapido) var(--curva), border-color var(--rapido) var(--curva);
  -webkit-tap-highlight-color:transparent;
}
.boton .i{width:1.35em;height:1.35em}
.boton:active{transform:scale(.98)}
.boton:focus-visible{border-radius:var(--pastilla)}
.boton--primario{background:var(--accion);color:var(--papel)}
.boton--primario:hover{background:var(--accion-hover)}
.boton--grande{min-height:56px;padding:0 var(--e-6);font-size:1.0625rem}
.boton--tonal{background:var(--papel);color:var(--accion);border-color:var(--accion)}
.boton--tonal:hover{background:var(--accion-claro);color:var(--accion-hover);border-color:var(--accion-hover)}
.boton--ancho{width:100%}
.enlace{font-weight:700;color:var(--accion);text-decoration:underline;text-decoration-color:currentColor;text-underline-offset:.25em;display:inline-flex;align-items:center;gap:var(--e-2);min-height:44px}
.enlace:hover{color:var(--accion-hover);text-decoration-thickness:2px}
.enlace--boton{background:none;border:0;padding:0 var(--e-1);cursor:pointer;font-size:inherit}
.enlace .i{width:1.2em;height:1.2em}
.acciones{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e-3) var(--e-5)}
.salida-wa{margin-top:var(--e-6);color:var(--tinta-suave);display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--e-2)}

/* ---------------------------------------------------------------- cabecera */
.cabecera{background:var(--papel);border-bottom:1px solid var(--linea);position:relative;z-index:20}
/* Con el menú abierto, el panel queda encima de la barra fija de la ficha (z-index 30). */
.cabecera:has(.menu[open]),.cabecera--menu{z-index:35}
.cabecera__fila{display:flex;align-items:center;gap:var(--e-3);min-height:72px}
.cabecera__marca{display:flex;align-items:center;margin-right:auto;flex-shrink:0}
.marca{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;color:var(--tinta);border-radius:var(--radio-campo)}
/* El logo nunca se estira ni se aplasta: alto fijo por ancho de pantalla y ancho según su proporción. */
.marca__logo{height:56px;width:auto;max-width:none;object-fit:contain}
.nav{display:none}
.nav > ul{display:flex;align-items:center;gap:var(--e-1)}
.nav__enlace{display:inline-flex;align-items:center;gap:var(--e-1);min-height:44px;padding:0 var(--e-3);font-weight:600;text-decoration:none;white-space:nowrap;border-radius:var(--pastilla);transition:background-color var(--rapido) var(--curva);cursor:pointer;list-style:none}
.nav__enlace::-webkit-details-marker{display:none}
.nav__enlace:hover{background:var(--arena)}
.nav__enlace[aria-current],.nav__enlace--activo{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.4em;text-decoration-color:var(--accion)}
.desplegable{position:relative}
.desplegable__icono{width:16px;height:16px;transition:transform var(--rapido) var(--curva)}
.desplegable[open] .desplegable__icono{transform:rotate(180deg)}
.desplegable__panel{position:absolute;left:0;top:calc(100% + var(--e-2));z-index:40;min-width:280px;background:var(--papel);border:1px solid var(--linea);border-radius:var(--radio);box-shadow:var(--sombra);padding:var(--e-2)}
.desplegable__enlace{display:flex;align-items:center;gap:var(--e-3);min-height:44px;padding:0 var(--e-4);border-radius:var(--pastilla);font-weight:600;text-decoration:none;white-space:nowrap}
.desplegable__enlace:hover{background:var(--arena)}
.desplegable__enlace[aria-current]{background:var(--accion-claro)}
.desplegable__enlace--todo{font-weight:700}
.punto{display:inline-block;width:12px;height:12px;border-radius:50%;flex:0 0 auto}
.campo-menta-pleno{background:var(--menta)}
.campo-coral-pleno{background:var(--coral)}
.campo-mostaza-pleno{background:var(--mostaza)}
.campo-celeste-pleno{background:var(--celeste)}
.campo-rosado-pleno{background:var(--rosado)}

.lista-enlace,.boton--cabecera,.menu{flex-shrink:0}
.lista-enlace{white-space:nowrap;position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--e-2);min-height:44px;min-width:44px;padding:0 var(--e-2);border-radius:var(--pastilla);text-decoration:none;font-weight:700;color:var(--tinta);transition:background-color var(--rapido) var(--curva)}
.lista-enlace:hover{background:var(--arena)}
.lista-enlace .i{width:24px;height:24px;color:var(--accion)}
.lista-enlace[aria-current]{background:var(--accion-claro)}
.lista-enlace__texto{display:none}
/* Contador de Mi lista: hasta 1199 px va como insignia sobre la esquina del corazón, así el enlace
   mide siempre 44 x 44 (48 en escritorio) y la fila cabe con dos cifras desde 320 px. */
.lista-enlace__n{position:absolute;top:-1px;right:-5px;display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border-radius:var(--pastilla);background:var(--accion);color:var(--papel);font-size:.75rem;font-weight:700;line-height:1;box-shadow:0 0 0 2px var(--papel);font-variant-numeric:tabular-nums}
@media (min-width:1200px){.lista-enlace__n{position:static;min-width:22px;height:22px;padding:0 6px;font-size:.8125rem;box-shadow:none}}
.boton--cabecera{min-height:44px;width:44px;padding:0}
.solo-escritorio{display:none}

.menu{position:relative}
.menu__boton{list-style:none;display:grid;place-items:center;width:44px;height:44px;border-radius:var(--pastilla);cursor:pointer;border:1px solid var(--borde-control);transition:background-color var(--rapido) var(--curva)}
.menu__boton::-webkit-details-marker{display:none}
.menu__boton:hover{background:var(--arena)}
.menu__boton .i{width:22px;height:22px}
.menu__cerrar{display:none}
.menu[open] .menu__abrir{display:none}
.menu[open] .menu__cerrar{display:block}
.menu__panel{position:absolute;right:0;top:calc(100% + var(--e-2));z-index:40;width:min(320px, calc(100vw - 2 * var(--margen)));background:var(--papel);border:1px solid var(--linea);border-radius:var(--radio);box-shadow:var(--sombra);padding:var(--e-2)}
.menu__enlace{display:flex;align-items:center;gap:var(--e-3);min-height:48px;padding:0 var(--e-4);border-radius:var(--pastilla);font-weight:600;text-decoration:none}
.menu__enlace--fuerte{font-weight:700}
.menu__enlace:hover{background:var(--arena)}
.menu__enlace[aria-current]{background:var(--accion-claro);font-weight:700;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.4em;text-decoration-color:var(--accion)}
.menu__otros{margin-top:var(--e-2);padding-top:var(--e-2);border-top:1px solid var(--linea)}

@media (max-width:359px){.cabecera__fila{gap:var(--e-2)}.marca__logo{height:40px}}
@media (min-width:480px){.marca__logo{height:50px}}
@media (min-width:1024px){.marca__logo{height:56px}}
/* Entre 1024 y 1199 px la fila no alcanza con el contador en dos cifras: Mi lista queda solo con el
   corazón (su aria-label ya dice "Mi lista" y cuántos productos) y el logo baja a 50 px. */
@media (min-width:1024px) and (max-width:1199.98px){.lista-enlace__texto{display:none!important}.marca__logo{height:50px}}
@media (min-width:1024px){
  .cabecera__fila{min-height:76px;gap:var(--e-4)}
  .nav{display:block}
  .menu{display:none}
  .boton--cabecera{width:auto;padding:0 var(--e-5)}
  .solo-escritorio{display:inline}
  .lista-enlace{padding:0 var(--e-3)}
  .lista-enlace__texto{display:inline}
}

/* ---------------------------------------------------------------- fotos */
.marco{display:block;position:relative;overflow:hidden;border-radius:var(--radio);background:var(--arena);transition:background-color var(--rapido) var(--curva)}
.marco img{width:100%;height:100%;object-fit:cover}
.marco--contener img{object-fit:contain}

/* ---------------------------------------------------------------- secciones */
.seccion{padding-block:var(--e-8) 0}
.titulo-seccion{margin-bottom:var(--e-5)}
.titulo-seccion__intro{margin-top:var(--e-3);color:var(--tinta-suave);max-width:60ch}
.titulo-seccion--fila{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--e-3) var(--e-6)}
.banda{padding-block:var(--e-8)}
.campo-menta{background:var(--menta-claro)}
.campo-coral{background:var(--coral-claro)}
.campo-mostaza{background:var(--mostaza-claro)}
.campo-celeste{background:var(--celeste-claro)}
.campo-rosado{background:var(--rosado-claro)}
.campo-turquesa{background:var(--turquesa-claro)}
.campo-arena{background:var(--arena)}
@media (min-width:1024px){
  .seccion{padding-block:var(--e-9) 0}
  .banda{padding-block:var(--e-9)}
  .titulo-seccion{margin-bottom:var(--e-6)}
}

/* ---------------------------------------------------------------- inicio: hero */
.hero{display:grid;gap:var(--e-6);padding-block:var(--e-6) var(--e-7)}
.hero h1{font-size:clamp(2.125rem, 1.2rem + 4.4vw, 4.25rem);letter-spacing:-0.02em;line-height:1.05;max-width:16ch}
.hero__intro{margin-top:var(--e-4);font-size:1.125rem;color:var(--tinta-suave);max-width:34ch}
.hero .acciones{margin-top:var(--e-5)}
.hero__fotos{display:grid;grid-template-columns:1.55fr 1fr;grid-template-rows:1.18fr 1fr;gap:var(--e-3);aspect-ratio:3 / 2.05}
.hero__foto{display:block;overflow:hidden;border-radius:var(--radio);background:var(--arena);min-height:0}
.hero__foto img{width:100%;height:100%;object-fit:cover;animation:entrada 700ms var(--curva) both}
.hero__foto--grande{grid-row:1 / 3}
.hero__foto--1 img{animation-delay:80ms}
.hero__foto--2 img{animation-delay:160ms}
@keyframes entrada{from{opacity:0;transform:scale(1.03)}to{opacity:1;transform:none}}
@media (min-width:1024px){
  .hero{grid-template-columns:6fr 6fr;align-items:center;gap:var(--e-7);padding-block:var(--e-8) var(--e-8)}
  .hero__intro{font-size:1.1875rem}
  .hero .acciones{margin-top:var(--e-6)}
  .hero__fotos{aspect-ratio:auto;height:clamp(400px, 36vw, 520px)}
}

/* franja de confianza */
.confianza{border-block:1px solid var(--linea)}
.confianza__lista{display:grid;grid-template-columns:1fr 1fr;gap:var(--e-4) var(--e-4);padding-block:var(--e-5);font-weight:600;font-size:.9375rem;line-height:1.35}
.confianza__lista li{display:flex;align-items:center;gap:var(--e-3)}
.confianza__lista .i{width:24px;height:24px;color:var(--accion)}
@media (min-width:900px){
  .confianza__lista{display:flex;justify-content:space-between;gap:var(--e-6);font-size:var(--t-1)}
}

/* mosaico de categorías: una grande y cuatro chicas */
.mosaico{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:var(--e-3)}
.mosaico__celda{display:flex;flex-direction:column;gap:var(--e-3);padding:var(--e-3);border-radius:var(--radio);text-decoration:none;color:var(--tinta);transition:transform var(--rapido) var(--curva)}
.mosaico__celda:active{transform:scale(.98)}
.mosaico__celda:hover .mosaico__nombre{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.18em}
.mosaico__celda:focus-visible{outline-offset:3px;border-radius:var(--radio)}
.mosaico__texto{display:flex;flex-direction:column;gap:var(--e-1);padding:var(--e-1) var(--e-1) 0}
.mosaico__nombre{font-size:1.125rem;line-height:1.2;hyphens:auto}
.mosaico__intro{max-width:36ch}
.mosaico__conteo{font-weight:700;font-size:var(--t-0)}
.mosaico__foto{aspect-ratio:1;order:-1}
.mosaico__celda--grande{grid-column:1 / -1;display:grid;grid-template-columns:minmax(0, 1fr) minmax(0, 1.1fr);align-items:center;gap:var(--e-4);padding:var(--e-4)}
.mosaico__celda--grande .mosaico__foto{order:0;aspect-ratio:1}
.mosaico__celda--grande .mosaico__nombre{font-size:var(--t-2)}
.mosaico__celda--grande .mosaico__texto{gap:var(--e-2);padding:0}
@media (max-width:359px){.mosaico{gap:8px}.mosaico__celda{padding:8px}.mosaico__nombre{font-size:1rem}}
@media (max-width:420px){
  .mosaico__celda--grande{grid-template-columns:1fr}
  .mosaico__celda--grande .mosaico__foto{order:-1;aspect-ratio:4 / 3}
  .mosaico__celda--grande .mosaico__intro{display:none}
}
@media (min-width:768px){
  .mosaico{grid-template-columns:1.5fr 1fr 1fr;grid-template-rows:auto auto;gap:var(--e-4)}
  .mosaico__celda--grande{grid-column:1;grid-row:1 / 3;display:flex;flex-direction:column;gap:var(--e-4);padding:var(--e-4)}
  .mosaico__celda--grande .mosaico__foto{order:-1;flex:1 1 auto;aspect-ratio:auto;min-height:260px}
  .mosaico__celda--grande .mosaico__texto{padding:0 var(--e-2) var(--e-2)}
  .mosaico__celda{padding:var(--e-4)}
  .mosaico__nombre{font-size:var(--t-2)}
  .mosaico__celda--grande .mosaico__nombre{font-size:var(--t-3)}
}
@media (min-width:1024px){
  .mosaico__celda--grande .mosaico__texto{flex-direction:row;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--e-2) var(--e-5)}
  .mosaico__celda--grande .mosaico__intro{order:3;flex-basis:100%}
}

/* carril y grillas de tarjetas */
.carril{display:grid;grid-auto-flow:column;grid-auto-columns:72%;column-gap:var(--e-4);overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
  margin-inline:calc(-1 * var(--margen));padding-inline:var(--margen);scroll-padding-inline:var(--margen);padding-top:8px;margin-top:-8px;padding-bottom:var(--e-3);scrollbar-width:thin}
.carril > li{scroll-snap-align:start}
@media (min-width:768px){
  .carril{grid-auto-flow:row;grid-template-columns:repeat(3, 1fr);grid-auto-columns:auto;overflow:visible;margin-inline:0;padding-inline:0;padding-top:0;margin-top:0;column-gap:var(--e-5)}
}
@media (min-width:768px) and (max-width:1023px){.carril:not(.carril--tres){grid-template-columns:repeat(2, 1fr)}}
@media (min-width:1024px){.carril:not(.carril--tres){grid-template-columns:repeat(4, 1fr)}}
@media (min-width:1200px){.carril--tres{grid-template-columns:repeat(3, 1fr)}}
.grilla{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));column-gap:var(--e-4)}
@media (min-width:768px){.grilla{grid-template-columns:repeat(3, minmax(0, 1fr));column-gap:var(--e-5)}}
@media (min-width:1200px){.grilla{grid-template-columns:repeat(4, minmax(0, 1fr))}}
@media (min-width:1200px){.grilla--cuatro{grid-template-columns:repeat(4, minmax(0, 1fr))}}
@media (min-width:1200px){.grilla--tres{grid-template-columns:repeat(3, minmax(0, 1fr))}}
.grilla > li,.carril > li{position:relative;display:grid;grid-row:span 5;grid-template-rows:subgrid;row-gap:0;padding-bottom:var(--e-6)}
.carril > li{padding-bottom:0}
@media (min-width:768px){.grilla > li{padding-bottom:var(--e-7)}.carril > li{padding-bottom:var(--e-6)}}

/* tarjeta: foto cuadrada (las fotos oficiales son casi todas cuadradas) */
.tarjeta{display:grid;grid-row:span 5;grid-template-rows:subgrid;row-gap:0;align-content:start;text-decoration:none;color:var(--tinta)}
.tarjeta:active .marco{transform:scale(.98)}
.tarjeta .marco{transition:background-color var(--rapido) var(--curva), transform var(--rapido) var(--curva);aspect-ratio:1;margin-bottom:var(--e-3)}
.tarjeta:hover .marco{background:var(--arena-2)}
.tarjeta:hover .tarjeta__nombre{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.18em}
.tarjeta:focus-visible{outline-offset:4px;border-radius:var(--radio)}
.tarjeta__nombre{font-size:1.0625rem;font-weight:800;letter-spacing:-0.005em;line-height:1.25;align-self:start}
.tarjeta__desc{margin-top:var(--e-1);font-size:.9375rem;color:var(--tinta-suave);line-height:1.4}
.tarjeta__precio{margin-top:var(--e-2);font-family:var(--f-titulo);font-weight:800;font-size:1.0625rem;font-variant-numeric:tabular-nums}
.tarjeta__precio--pendiente{font-family:var(--f-texto);font-weight:600;font-size:.9375rem;color:var(--tinta-suave)}
.tarjeta__pie{align-self:start;padding-top:var(--e-2);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--e-2);font-size:var(--t-0);color:var(--tinta-suave);font-weight:600}
.tarjeta__estado{display:inline-flex;flex-wrap:wrap;gap:var(--e-1) var(--e-3)}
.tarjeta__nuevo{color:var(--accion);font-weight:700}
.tarjeta--agotada .marco img{opacity:.55}
.tarjeta--agotada .tarjeta__disp{color:var(--tinta)}
@media (min-width:1024px){.tarjeta__nombre{font-size:1.125rem}}

/* corazón de Mi lista, en la esquina de la foto (es un control, no una etiqueta) */
.guardar{position:absolute;top:var(--e-2);right:var(--e-2);z-index:2;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:rgb(251 249 245 / .92);color:var(--accion);cursor:pointer;box-shadow:0 1px 2px rgb(29 49 52 / .12);transition:transform var(--rapido) var(--curva), background-color var(--rapido) var(--curva)}
.guardar:hover{background:var(--papel)}
.guardar:active{transform:scale(.92)}
.guardar .i{width:22px;height:22px}
.guardar__lleno{display:none}
.guardar[aria-pressed="true"] .guardar__vacio{display:none}
.guardar[aria-pressed="true"] .guardar__lleno{display:block}
.guardar:focus-visible{border-radius:50%}

.muestras{display:inline-flex;align-items:center;gap:6px}
.muestras__mas{font-size:.75rem;font-weight:700;color:var(--tinta-suave)}
.muestra{display:inline-block;width:16px;height:16px;border-radius:50%;background:linear-gradient(135deg, var(--c1) 50%, var(--c2) 50%);box-shadow:inset 0 0 0 1px var(--borde-muestra);flex:0 0 auto}
.muestra--grande{width:22px;height:22px}

/* recién llegados y consentidos comparten carril */

/* combos */
.combos__lista{display:grid;gap:var(--e-5)}
.combo{display:grid;gap:var(--e-4);padding:var(--e-4);border-radius:var(--radio);background:var(--papel)}
.combo__fotos{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:var(--e-2)}
.combo__fotos--2{grid-template-columns:repeat(2, minmax(0, 1fr))}
.combo__foto{aspect-ratio:1;border-radius:var(--radio-campo)}
.combo__fotos--2 .combo__foto{aspect-ratio:3 / 2}
.combo__nombre{font-size:var(--t-3)}
.combo__desc{margin-top:var(--e-2);max-width:52ch}
.combo__productos{margin-top:var(--e-3);display:flex;flex-wrap:wrap;gap:var(--e-2)}
.combo__productos a{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--e-3);border-radius:var(--pastilla);background:var(--arena);font-weight:600;font-size:.9375rem;text-decoration:underline;text-decoration-color:var(--borde-control);text-underline-offset:.2em}
.combo__productos a:hover{background:var(--arena-2);text-decoration-thickness:2px;text-decoration-color:currentColor}
.combo__suma{margin-top:var(--e-3);font-family:var(--f-titulo);font-weight:800;font-variant-numeric:tabular-nums}
.combo__acciones{margin-top:var(--e-4)}
.combo__listo{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e-2);font-weight:700}
.combo__listo > .i{width:22px;height:22px;color:var(--accion)}
/* En móvil y tableta los combos van en carril, como los consentidos, y no apilados. */
@media (max-width:899px){
  .combos__lista{grid-auto-flow:column;grid-auto-columns:86%;gap:var(--e-4);overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
    margin-inline:calc(-1 * var(--margen));padding-inline:var(--margen);scroll-padding-inline:var(--margen);padding-bottom:var(--e-3);scrollbar-width:thin}
  .combo{scroll-snap-align:start;align-content:start}
}
@media (min-width:600px) and (max-width:899px){.combos__lista{grid-auto-columns:60%}}
@media (min-width:900px){
  .combos__lista{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .combo{padding:var(--e-5);align-content:start}
}

/* editorial */
.editorial{display:grid;gap:var(--e-5);padding-block:var(--e-8) var(--e-8);align-items:center}
.editorial__foto{margin:0;aspect-ratio:1 / 1;width:100%;max-width:480px}
.editorial__texto p{margin-top:var(--e-4);font-size:1.125rem;max-width:38ch}
.editorial__texto .enlace{margin-top:var(--e-3)}
@media (min-width:1024px){
  .editorial{grid-template-columns:minmax(0, 480px) minmax(0, 1fr);gap:var(--e-8);padding-block:var(--e-9);align-items:center}
  .editorial__texto h2{font-size:var(--t-5);max-width:18ch}
}

/* cómo comprar (inicio y página) */
.como{display:grid;gap:var(--e-6)}
.como__cabeza{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--e-2) var(--e-5)}
.pasos .paso{display:grid;gap:var(--e-1);padding-block:var(--e-4);border-top:1px solid var(--linea-color)}
.pasos .paso:first-child{border-top:0;padding-top:0}
.pasos dt{font-family:var(--f-titulo);font-weight:800;font-size:var(--t-2);line-height:1.15}
.pasos dd{max-width:52ch}
@media (min-width:1024px){
  .como{grid-template-columns:4fr 8fr;gap:var(--e-8);align-items:start}
  .como__cabeza{flex-direction:column;align-items:flex-start}
  .como .pasos .paso{grid-template-columns:1fr;gap:var(--e-2);border-top:0;padding-block:var(--e-5)}
  .como .pasos .paso:first-child{padding-top:0}
  .pasos dt{font-size:var(--t-3)}
}

/* preguntas frecuentes */
.faq__lista{max-width:820px}
.seccion--final{padding-bottom:var(--e-9)}
.faq h2{margin-bottom:var(--e-4)}
.pregunta{border-bottom:1px solid var(--linea)}
.pregunta summary{display:flex;align-items:center;justify-content:space-between;gap:var(--e-4);min-height:56px;padding-block:var(--e-3);cursor:pointer;list-style:none;font-weight:700;font-size:1.0625rem;line-height:1.4}
.pregunta summary::-webkit-details-marker{display:none}
.pregunta summary:hover{color:var(--accion)}
.pregunta__icono{width:20px;height:20px;transition:transform var(--rapido) var(--curva)}
.pregunta[open] .pregunta__icono{transform:rotate(180deg)}
.pregunta__respuesta{padding-bottom:var(--e-5);max-width:65ch;color:var(--tinta)}

/* ---------------------------------------------------------------- pie */
.pie{background:var(--arena);margin-top:0;padding-top:var(--e-8)}
.pie__grilla{display:grid;gap:var(--e-6)}
.marca--pie{min-height:0}
.pie__logo{width:auto;height:112px}
.pie__leyenda{margin-top:var(--e-4);font-weight:600;font-size:var(--t-0)}
.pie__confianza{margin-top:var(--e-3);display:flex;gap:var(--e-2);align-items:flex-start;font-size:var(--t-0);color:var(--tinta-suave);max-width:34ch;line-height:1.45}
.pie__confianza .i{width:20px;height:20px;color:var(--accion);margin-top:1px}
.pie__titulo{font-family:var(--f-texto);font-size:var(--t-1);font-weight:700;letter-spacing:0;color:var(--tinta-suave);margin-bottom:var(--e-2)}
.pie__titulo--segundo{margin-top:var(--e-5)}
.pie__lista a,.pie__dato{display:inline-flex;align-items:center;gap:var(--e-2);min-height:44px;text-decoration:none;font-weight:600}
.pie__lista a:hover{text-decoration:underline}
.pie__lista li{line-height:1.4}
.pie__lista .i{width:20px;height:20px;color:var(--accion)}
.pie__lista--datos li{padding-block:var(--e-1)}
.pie__base{margin-top:var(--e-7);font-size:var(--t-0);color:var(--tinta-suave)}
.pie__base p{padding-block:var(--e-5);border-top:1px solid var(--linea)}
@media (min-width:640px){.pie__grilla{grid-template-columns:repeat(2, 1fr)}}
@media (min-width:1024px){.pie__grilla{grid-template-columns:4fr 3fr 3fr 3fr;gap:var(--e-7)}}

/* aviso breve de Mi lista */
.aviso-lista{position:fixed;left:0;right:0;margin-inline:auto;width:max-content;max-width:calc(100vw - 32px);bottom:calc(var(--e-5) + env(safe-area-inset-bottom));z-index:45;display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--e-3);padding:var(--e-2) var(--e-5);border-radius:var(--radio);background:var(--tinta);color:var(--papel);font-weight:600;box-shadow:var(--sombra);transition:opacity 200ms var(--curva), transform 200ms var(--curva), visibility 0s}
.aviso-lista a,.aviso-lista__boton{color:var(--papel);font-weight:700;text-decoration:underline;text-underline-offset:.2em;min-height:44px;display:inline-flex;align-items:center}
.aviso-lista__boton{background:none;border:0;padding:0 var(--e-1);cursor:pointer;font:inherit;font-weight:700}
.aviso-lista--fuera{opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity 200ms var(--curva), transform 200ms var(--curva), visibility 0s linear 200ms}
@media (max-width:1023px){.con-barra .aviso-lista{bottom:calc(88px + env(safe-area-inset-bottom))}}

/* ---------------------------------------------------------------- listados */
.encabezado{padding-block:var(--e-7) var(--e-6)}
.encabezado__intro{margin-top:var(--e-3);font-size:1.125rem;max-width:52ch}
.encabezado__conteo{margin-top:var(--e-3);font-weight:700;font-size:var(--t-0)}
.listado{padding-block:var(--e-5) var(--e-9)}
.chips{margin-bottom:var(--e-5)}
.chips ul{display:flex;flex-wrap:wrap;gap:var(--e-2)}
@media (max-width:767px){.chips ul{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;margin-inline:calc(-1 * var(--margen));padding:4px var(--margen);scrollbar-width:none}.chips ul::-webkit-scrollbar{display:none}.chips li{flex:0 0 auto}}
.chip{display:inline-flex;align-items:center;gap:var(--e-1);min-height:44px;padding:0 var(--e-4);border-radius:var(--pastilla);border:1px solid var(--borde-control);background:var(--papel);font-weight:600;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color var(--rapido) var(--curva), transform var(--rapido) var(--curva)}
.chip:hover{background:var(--arena)}
.chip:active{transform:scale(.98)}
.chip[aria-current="page"],.chip[aria-pressed="true"]{background:var(--accion-claro);border-color:var(--accion);box-shadow:inset 0 0 0 1px var(--accion);color:var(--tinta)}
.chip__n{color:var(--tinta-suave);font-weight:600}
.vacio{padding:var(--e-7) 0;max-width:52ch}
.vacio__texto a{color:var(--accion);font-weight:700;text-underline-offset:.2em;white-space:nowrap}
.vacio .acciones{margin-top:var(--e-5)}
@media (min-width:1024px){.encabezado{padding-block:var(--e-8) var(--e-7)}}

/* buscador y filtros */
.filtros{display:grid;grid-template-columns:minmax(0, 1fr);gap:var(--e-4);margin-bottom:var(--e-6)}
.filtros > *,.filtros__fila > *{min-width:0}
.buscador{position:relative;max-width:560px}
.buscador__icono{position:absolute;left:var(--e-4);top:50%;transform:translateY(-50%);width:22px;height:22px;color:var(--tinta-suave);pointer-events:none}
.buscador__campo{width:100%;min-height:52px;padding:0 52px 0 48px;border:1px solid var(--borde-control);border-radius:var(--pastilla);background:var(--papel);color:var(--tinta);font:inherit;font-size:1.0625rem;-webkit-appearance:none;appearance:none}
.buscador__campo::placeholder{color:var(--tinta-suave);opacity:1}
.buscador__campo:focus-visible{outline:2px solid var(--accion);outline-offset:2px}
.buscador__campo::-webkit-search-cancel-button{display:none}
.buscador__borrar{position:absolute;right:4px;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:none;cursor:pointer;color:var(--tinta-suave)}
.buscador__borrar:hover{background:var(--arena);color:var(--tinta)}
.filtros__fila{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--e-3) var(--e-5)}
.filtros__espacios{display:flex;flex-wrap:wrap;gap:var(--e-2)}
.filtros__otros{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e-3) var(--e-5)}
.casilla{display:inline-flex;align-items:center;gap:var(--e-2);min-height:44px;font-weight:600;cursor:pointer}
.casilla input{width:22px;height:22px;margin:0;accent-color:var(--accion)}
.filtros__orden{display:inline-flex;align-items:center;gap:var(--e-2);font-weight:600}
.filtros__orden select{min-height:44px;padding:0 36px 0 var(--e-4);border:1px solid var(--borde-control);border-radius:var(--radio-campo);background:var(--papel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%231D3134'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E") no-repeat right 12px center / 16px;color:var(--tinta);font:inherit;-webkit-appearance:none;appearance:none;cursor:pointer}
.filtros__resultado{font-weight:700;font-size:var(--t-0);min-height:1.4em}
@media (max-width:767px){.filtros__espacios{flex-wrap:nowrap;overflow-x:auto;margin-inline:calc(-1 * var(--margen));padding:4px var(--margen);scrollbar-width:none;width:calc(100% + 2 * var(--margen))}.filtros__espacios::-webkit-scrollbar{display:none}.filtros__espacios .chip{flex:0 0 auto}}

/* ---------------------------------------------------------------- ficha */
.migas{padding-block:var(--e-2)}
.migas ol{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e-1) var(--e-2);font-size:var(--t-0);color:var(--tinta-suave)}
.migas li{display:inline-flex;align-items:center;gap:var(--e-2)}
.migas a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding-inline:4px;font-weight:600;color:var(--tinta-suave)}
.migas a:hover{color:var(--tinta)}
.migas__sep{width:14px;height:14px}
.migas [aria-current]{color:var(--tinta);font-weight:600}

.ficha{display:grid;gap:var(--e-6);padding-bottom:var(--e-7)}
@media (min-width:768px){
  .ficha{grid-template-columns:minmax(0, 1.1fr) minmax(0, 1fr);gap:var(--e-6);align-items:start}
  .galeria{position:sticky;top:var(--e-5)}
}
@media (min-width:1024px){.ficha{gap:var(--e-8);padding-bottom:var(--e-9)}}
.galeria{min-width:0}
.galeria__marco{position:relative}
.galeria__pista{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;width:100%}
.galeria__pista::-webkit-scrollbar{display:none}
.galeria__foto{position:relative;flex:0 0 100%;scroll-snap-align:start;height:100%}
.galeria__foto img{width:100%;height:100%;object-fit:contain;background:var(--arena)}
.galeria__ampliar{position:absolute;z-index:2;right:var(--e-3);bottom:var(--e-3);display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:rgb(251 249 245 / .92);color:var(--tinta);cursor:zoom-in;box-shadow:0 1px 2px rgb(29 49 52 / .12)}
.galeria__ampliar .i{width:20px;height:20px}
.galeria__flecha{position:absolute;top:50%;transform:translateY(-50%);display:none;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:rgb(251 249 245 / .92);color:var(--tinta);cursor:pointer;box-shadow:0 1px 2px rgb(29 49 52 / .12)}
.galeria__flecha:disabled{opacity:0;pointer-events:none}
.galeria__flecha--ant{left:var(--e-3)}
.galeria__flecha--sig{right:var(--e-3)}
@media (hover:hover) and (pointer:fine){.galeria__flecha{display:grid}}
.galeria--referencia .galeria__foto{background:var(--arena)}
.galeria--referencia .galeria__foto img{max-width:418px;margin-inline:auto;object-fit:contain}
.galeria__vacia{aspect-ratio:1;display:grid;place-items:center;color:var(--tinta-suave)}
.galeria__pie{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--e-1) var(--e-4);margin-top:var(--e-3)}
.galeria__contador,.galeria__ayuda{font-size:var(--t-0);color:var(--tinta-suave);font-weight:600}
.galeria__miniaturas{display:flex;gap:var(--e-2);margin-top:var(--e-3);overflow-x:auto;padding:4px;scrollbar-width:thin}
.galeria__mini{display:block;flex:0 0 auto;width:72px;height:72px;padding:0;border:2px solid transparent;border-radius:var(--radio-campo);overflow:hidden;background:var(--arena);cursor:pointer;transition:border-color var(--rapido) var(--curva)}
.galeria__mini img{width:100%;height:100%;object-fit:cover}
@media (min-width:768px){.galeria__miniaturas{flex-wrap:wrap;overflow:visible}}
.galeria__mini[aria-current="true"]{border-color:var(--accion)}
.galeria__mini:hover{border-color:var(--borde-control)}
.galeria__nota{margin-top:var(--e-3);font-size:var(--t-0);color:var(--tinta-suave)}

/* visor a pantalla completa */
.visor{position:fixed;inset:0;width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;padding:0;border:0;background:var(--noche);color:var(--papel);overflow:hidden}
.visor::backdrop{background:var(--noche)}
.visor__escena{position:absolute;inset:0;touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab}
.visor--zoom .visor__escena{cursor:move}
.visor__foto{position:absolute;inset:0;margin:0;display:flex;align-items:center;justify-content:center;padding:72px 0 56px}
.visor__foto img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;transform-origin:center center;-webkit-user-drag:none}
.visor__arriba{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:var(--e-4);padding:max(var(--e-3), env(safe-area-inset-top)) var(--e-4) var(--e-3);pointer-events:none}
.visor__arriba > *{pointer-events:auto}
.visor__contador{font-weight:700;font-size:var(--t-0);padding:6px 12px;border-radius:var(--pastilla);background:rgb(20 31 33 / .72)}
.visor__boton{display:grid;place-items:center;width:48px;height:48px;padding:0;border:0;border-radius:50%;background:rgb(20 31 33 / .72);color:var(--papel);cursor:pointer;box-shadow:0 0 0 1px rgb(251 249 245 / .18)}
.visor__boton:hover{background:rgb(20 31 33 / .88)}
.visor__boton .i{width:24px;height:24px}
.visor__boton:focus-visible{outline:2px solid var(--papel);outline-offset:2px;border-radius:50%}
.visor__flecha{position:absolute;top:50%;transform:translateY(-50%)}
.visor__flecha--ant{left:var(--e-3)}
.visor__flecha--sig{right:var(--e-3)}
.visor__ayuda{position:absolute;left:50%;transform:translateX(-50%);bottom:max(var(--e-3), env(safe-area-inset-bottom));width:max-content;max-width:calc(100% - 32px);text-align:center;font-size:var(--t-0);color:var(--papel);pointer-events:none;padding:6px 12px;border-radius:var(--pastilla);background:rgb(20 31 33 / .72)}
.visor--zoom .visor__ayuda{opacity:0}
@media (max-width:767px){.visor__flecha{top:auto;bottom:max(var(--e-7), calc(env(safe-area-inset-bottom) + 40px));transform:none}.visor__ayuda{max-width:calc(100% - 144px)}}

.ficha__info{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.ficha__nombre{font-size:clamp(2rem, 1.5rem + 2vw, 2.75rem);letter-spacing:-0.02em}
.ficha__descriptor{margin-top:var(--e-2);font-size:1.125rem;color:var(--tinta-suave)}
.ficha__edad{margin-top:var(--e-2);display:inline-flex;align-items:center;gap:var(--e-2);padding:var(--e-1) var(--e-3);border-radius:var(--pastilla);background:var(--arena);font-weight:700;font-size:.9375rem}
.ficha__edad .i{width:20px;height:20px;color:var(--accion)}
.ficha__precio{margin-top:var(--e-5);font-family:var(--f-titulo);font-weight:800;font-size:var(--t-4);font-variant-numeric:tabular-nums;line-height:1.1;display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--e-2) var(--e-3)}
.ficha__iva{font-family:var(--f-texto);font-size:var(--t-0);font-weight:600;color:var(--tinta-suave)}
.ficha__precio--pendiente{font-size:var(--t-3)}
.ficha__puntos{margin-top:var(--e-4);display:grid;gap:var(--e-2)}
.ficha__puntos li{display:flex;gap:var(--e-3);align-items:flex-start;line-height:1.45}
.ficha__puntos .i{width:20px;height:20px;color:var(--accion);margin-top:2px}
.ficha__disp{margin-top:var(--e-4);font-weight:700}
.ficha__disp--agotado{color:var(--tinta)}
.ficha__disp--suave{font-weight:600;color:var(--tinta-suave)}
.colores{border:0;padding:0;margin:var(--e-5) 0 0;min-width:0;width:100%}
.colores legend{font-weight:700;padding:0;margin-bottom:var(--e-2)}
.colores__opciones{display:flex;flex-wrap:wrap;gap:var(--e-2)}
.color{position:relative;cursor:pointer}
.color__cara{display:inline-flex;align-items:center;gap:var(--e-2);min-height:44px;padding:0 var(--e-4) 0 var(--e-2);border-radius:var(--pastilla);border:1px solid var(--borde-control);font-weight:600;background:var(--papel);transition:border-color var(--rapido) var(--curva), background-color var(--rapido) var(--curva)}
.color__cara .muestra{margin-left:var(--e-1)}
.color__mini{width:36px;height:36px;border-radius:50%;object-fit:cover;background:var(--arena)}
.color:hover .color__cara{background:var(--arena)}
.color input:checked + .color__cara{border-color:var(--accion);box-shadow:inset 0 0 0 1px var(--accion);background:var(--accion-claro)}
.color input:focus-visible + .color__cara{outline:2px solid var(--accion);outline-offset:2px}
.color-unico{margin-top:var(--e-4);display:inline-flex;align-items:center;gap:var(--e-2);font-weight:600}
.colores__nota{margin-top:var(--e-2);font-size:var(--t-0);color:var(--tinta-suave)}
.ficha__info .boton--ancho{margin-top:var(--e-5)}
.ficha__lista{width:100%}
.ficha__info .ficha__lista .boton--ancho{margin-top:var(--e-3)}
.ficha__en-lista{margin-top:var(--e-3);display:flex;align-items:center;flex-wrap:wrap;gap:var(--e-2) var(--e-3);min-height:48px;font-weight:700}
.ficha__en-lista > .i{width:22px;height:22px;color:var(--accion)}
.ficha__en-lista a{color:var(--accion);text-underline-offset:.2em;min-height:44px;display:inline-flex;align-items:center}
.ficha__nota{margin-top:var(--e-3);font-size:.9375rem;color:var(--tinta)}
.ficha__entrega{margin-top:var(--e-4);display:flex;gap:var(--e-3);align-items:flex-start;font-size:.9375rem;color:var(--tinta-suave);line-height:1.5}
.ficha__entrega .i{width:22px;height:22px;color:var(--accion);margin-top:1px}
.garantias{margin-top:var(--e-5);padding-top:var(--e-5);border-top:1px solid var(--linea);display:grid;gap:0;width:100%;font-weight:600;font-size:.9375rem}
.garantias li{display:flex;align-items:center;gap:var(--e-3);min-height:44px}
.garantias a{color:inherit;text-decoration:underline;text-decoration-color:var(--accion);text-underline-offset:.2em;min-height:44px;display:inline-flex;align-items:center}
.garantias .i{width:22px;height:22px;color:var(--accion)}
@media (min-width:640px) and (max-width:767px){.garantias{grid-template-columns:repeat(2, auto);justify-content:start;gap:var(--e-6)}}

.detalle{display:grid;gap:var(--e-7);padding-bottom:var(--e-8)}
.detalle h2{margin-bottom:var(--e-4)}
.detalle__texto{font-size:1.0625rem;max-width:62ch}
/* formas de uso: lista numerada en el campo de color de la categoría */
.formas{display:grid;gap:var(--e-3);padding:var(--e-5);border-radius:var(--radio);max-width:62ch;counter-reset:forma}
.formas li{counter-increment:forma;display:grid;grid-template-columns:32px 1fr;gap:var(--e-3);align-items:start;font-weight:600;line-height:1.45}
.formas li::before{content:counter(forma);display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--papel);font-family:var(--f-titulo);font-weight:800;font-size:.9375rem;line-height:1}
.formas li{padding-top:0}
@media (min-width:1024px){
  .detalle{grid-template-columns:minmax(0, 1.1fr) minmax(0, 1fr);gap:var(--e-8);padding-bottom:var(--e-9)}
  .detalle__bloque:only-child{grid-column:1 / -1}
}

.saber h2{margin-bottom:var(--e-6)}
.saber__grupos{display:grid;gap:var(--e-6)}
.saber__grupo h3{display:flex;align-items:center;gap:var(--e-2);font-size:var(--t-2);margin-bottom:var(--e-3)}
.saber__grupo h3 .i{width:24px;height:24px;color:var(--accion)}
.saber__grupo ul{display:grid;gap:var(--e-2)}
.saber__grupo li{line-height:1.5}
.nota{display:block;font-size:var(--t-0);color:var(--tinta-suave)}
.avisos{margin-top:var(--e-7);padding:var(--e-5);border-radius:var(--radio);background:var(--papel);max-width:880px}
.avisos h3{display:flex;align-items:center;gap:var(--e-2);font-size:var(--t-2);margin-bottom:var(--e-3)}
.avisos h3 .i{width:24px;height:24px;color:var(--coral-tinta)}
.avisos ul{display:grid;gap:var(--e-2);max-width:75ch}
.avisos li{padding-left:var(--e-4);position:relative}
.avisos li::before{content:"";position:absolute;left:0;top:.7em;width:6px;height:6px;border-radius:50%;background:var(--tinta-suave)}
.saber__nota{margin-top:var(--e-5);color:var(--tinta-suave);max-width:65ch}
.saber__nota a{color:var(--accion);font-weight:700}
@media (min-width:900px){.saber__grupos{grid-template-columns:repeat(3, 1fr);gap:var(--e-7)}}
@media (min-width:1024px){.avisos{padding:var(--e-6)}}
.combinar__acciones{margin-top:var(--e-2)}

/* barra fija inferior (móvil) */
.barra{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;align-items:center;gap:var(--e-3);
  padding:var(--e-3) max(var(--margen), env(safe-area-inset-right)) max(var(--e-3), env(safe-area-inset-bottom)) max(var(--margen), env(safe-area-inset-left));
  background:var(--papel);box-shadow:var(--sombra-barra);border-top:1px solid var(--linea);
  transform:translateY(110%);visibility:hidden;transition:transform 220ms var(--curva), visibility 0s linear 220ms}
.barra--visible{transform:none;visibility:visible;transition:transform 220ms var(--curva), visibility 0s}
.barra__texto{display:flex;flex-direction:column;min-width:0;flex:1;line-height:1.3}
.barra__nombre{font-weight:700;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-clamp:2;font-size:.9375rem;line-height:1.25}
.barra__precio{font-family:var(--f-titulo);font-weight:800;font-variant-numeric:tabular-nums;font-size:.9375rem;color:var(--tinta-suave)}
.barra .boton{padding:0 var(--e-4);white-space:nowrap}
.barra__largo{display:none}
@media (min-width:480px){.barra__largo{display:inline}}
@media (min-width:1024px){.barra{display:none}}

/* ---------------------------------------------------------------- páginas intermedias */
.intermedia{padding:var(--e-7) max(var(--margen), env(safe-area-inset-right)) var(--e-9) max(var(--margen), env(safe-area-inset-left))}
.intermedia__caja{max-width:560px;margin-inline:auto;display:flex;flex-direction:column;align-items:flex-start}
.intermedia h1{font-size:clamp(1.75rem, 1.4rem + 1.6vw, 2.25rem)}
.intermedia__texto{margin-top:var(--e-3);color:var(--tinta-suave)}
.intermedia__envio{width:100%}
.mensaje{margin:var(--e-5) 0;width:100%;padding:var(--e-4) var(--e-5);border-radius:var(--radio);background:var(--arena);font-family:var(--f-texto);font-size:.9375rem;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere}
.intermedia__nota{margin-top:var(--e-3);font-size:.9375rem;color:var(--tinta-suave)}
.intermedia__pendiente{margin-top:var(--e-4);font-size:.9375rem}
.intermedia__volver{margin-top:var(--e-4)}
.intermedia__app{width:100%}
.intermedia__app .boton{margin-top:var(--e-3)}
.intermedia__copiado{margin-top:var(--e-3);display:flex;gap:var(--e-2);align-items:center;font-weight:700}
.intermedia__copiado .i{color:var(--accion);width:22px;height:22px}
.intermedia__ayuda{margin-top:var(--e-4);padding:var(--e-4);border-radius:var(--radio-campo);background:var(--mostaza-claro);font-size:.9375rem}
.intermedia__confianza,.lista-pagina__confianza,.nosotros__confianza,.doc__confianza{margin-top:var(--e-5);display:flex;gap:var(--e-2);align-items:flex-start;font-size:.9375rem;color:var(--tinta-suave);line-height:1.5}
.intermedia__confianza .i,.lista-pagina__confianza .i,.nosotros__confianza .i,.doc__confianza .i{width:22px;height:22px;color:var(--accion);margin-top:1px}
.intermedia__vacia{margin-top:var(--e-5);display:grid;gap:var(--e-4);justify-items:start}
[data-solo-app],[data-solo-vacia]{display:none}
.en-app [data-sin-app],.lista-vacia [data-sin-vacia]{display:none}
.en-app [data-solo-app]{display:block}
.lista-vacia [data-solo-vacia]{display:grid}
.lista-vacia [data-sin-app],.lista-vacia [data-solo-app]{display:none}
.lista-vacia h1[data-solo-vacia]{display:block}
.en-app .intermedia__envio .boton--grande{min-height:64px;font-size:1.1875rem}

/* ---------------------------------------------------------------- mi lista */
.lista-pagina{padding-block:var(--e-6) var(--e-9)}
.lista-pagina > *{max-width:820px}
.lista-pagina > .lista-pagina__llena{max-width:none}
.lista-pagina__col{max-width:820px}
.lista-pagina__vacia{display:grid;gap:var(--e-5);justify-items:start;padding-block:var(--e-5);max-width:52ch;font-size:1.0625rem}
.lista-pagina__conteo{font-weight:700;margin-bottom:var(--e-4)}
.lista-pagina__items{display:grid;border-top:1px solid var(--linea)}
.item-lista{display:grid;grid-template-columns:96px minmax(0, 1fr);gap:var(--e-4);padding-block:var(--e-4);border-bottom:1px solid var(--linea);align-items:start}
.item-lista__foto{aspect-ratio:1;border-radius:var(--radio-campo)}
.item-lista__texto{display:grid;grid-template-columns:minmax(0, 1fr);gap:var(--e-1);justify-items:start;min-width:0}
.item-lista__nombre{font-size:1.125rem}
.item-lista__nombre a{text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.item-lista__avisar{min-height:44px}
.item-lista__opcion,.item-lista__opcion select{width:100%;min-width:0}
.item-lista__nombre a:hover{text-decoration:underline}
.item-lista__precio{color:var(--tinta-suave);font-weight:600;font-size:.9375rem}
.item-lista__opcion{display:grid;gap:var(--e-1);margin-top:var(--e-2);font-weight:700;font-size:var(--t-0)}
.item-lista__opcion select{min-height:44px;max-width:100%;padding:0 36px 0 var(--e-3);border:1px solid var(--borde-control);border-radius:var(--radio-campo);background:var(--papel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%231D3134'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E") no-repeat right 12px center / 16px;color:var(--tinta);font:inherit;font-weight:600;font-size:1rem;-webkit-appearance:none;appearance:none}
.item-lista__quitar{color:var(--tinta-suave);font-weight:700}
.lista-pagina__pedir{margin-top:var(--e-6);display:grid;gap:var(--e-3);max-width:820px}
.lista-pagina__resumen{display:none;font-family:var(--f-titulo);font-weight:800;font-size:var(--t-2)}
@media (min-width:1024px){
  .lista-pagina__llena{display:grid;grid-template-columns:minmax(0, 1fr) 360px;gap:var(--e-7);align-items:start}
  .lista-pagina__pedir{margin-top:0;position:sticky;top:var(--e-5);padding:var(--e-5);border-radius:var(--radio);background:var(--arena)}
  .lista-pagina__resumen{display:block}
  .lista-pagina__pedir .boton--grande{padding-inline:var(--e-4)}
}
.lista-pagina__nota{color:var(--tinta-suave);font-size:.9375rem;max-width:56ch}
.lista-pagina__vaciar{margin-top:var(--e-3)}
.lista-pagina__confirmar{display:grid;gap:var(--e-3);padding:var(--e-4);border-radius:var(--radio-campo);background:var(--arena)}
.lista-pagina__aviso{margin-top:var(--e-7);font-size:.9375rem;color:var(--tinta-suave);max-width:60ch}
@media (min-width:640px){.item-lista{grid-template-columns:128px minmax(0, 1fr)}}

/* ---------------------------------------------------------------- quiénes somos */
.nosotros{display:grid;gap:var(--e-6);padding-block:var(--e-7) var(--e-9)}
.nosotros__foto{margin:0;aspect-ratio:4 / 3;max-width:560px;width:100%}
.nosotros__foto--vacia{display:grid;place-items:center;text-align:center;padding:var(--e-5);color:var(--tinta-suave)}
.nosotros__texto{max-width:62ch}
.nosotros__texto > p{font-size:1.0625rem}
.nosotros__texto > p:first-child{font-size:1.1875rem}
.nosotros__texto h2{margin:var(--e-6) 0 var(--e-3);font-size:var(--t-3)}
.nosotros__contacto{display:grid;gap:0}
.nosotros__contacto a,.nosotros__contacto span{display:inline-flex;align-items:center;gap:var(--e-2);min-height:44px;font-weight:600}
.nosotros__contacto .i{color:var(--accion);width:22px;height:22px}
.nosotros__mas{margin-top:var(--e-4)}
@media (min-width:1024px){.nosotros{grid-template-columns:minmax(0, 520px) minmax(0, 1fr);gap:var(--e-8);align-items:start}}

/* ---------------------------------------------------------------- cómo comprar */
.doc{display:grid;gap:var(--e-6);padding-block:var(--e-6) var(--e-9)}
.doc__indice ul{display:flex;flex-wrap:wrap;gap:var(--e-2)}
.doc__indice a{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--e-4);border-radius:var(--pastilla);border:1px solid var(--borde-control);font-weight:600;text-decoration:none}
.doc__indice a:hover{background:var(--arena)}
.doc__indice a[aria-current]{background:var(--accion-claro);border-color:var(--accion)}
.doc__cuerpo{max-width:760px}
.doc__seccion{padding-block:var(--e-6);border-top:1px solid var(--linea)}
.doc__seccion:first-child{border-top:0;padding-top:0}
.doc__seccion h2{margin-bottom:var(--e-4)}
.doc__seccion h2 + .pasos{margin-top:var(--e-5)}
.doc__seccion h3{font-size:var(--t-2);margin:var(--e-5) 0 var(--e-2)}
.doc__seccion p + p{margin-top:var(--e-3)}
.doc__seccion > p{max-width:65ch}
.doc__mas{margin-top:var(--e-4)}
.doc__mas a{color:var(--accion);font-weight:700}
.doc__confianza{padding:var(--e-4);border-radius:var(--radio-campo);background:var(--turquesa-claro);color:var(--tinta)}
.pasos--doc .paso{grid-template-columns:1fr}
.pasos--doc dt{font-size:var(--t-2)}
.datos > div{display:grid;gap:var(--e-1);padding-block:var(--e-3)}
.datos dt{font-weight:700;font-size:var(--t-0);color:var(--tinta-suave)}
.datos a{color:var(--accion);font-weight:700}
@media (min-width:640px){.datos > div{grid-template-columns:14rem 1fr;gap:var(--e-4);align-items:baseline}}
@media (min-width:1024px){
  .doc{grid-template-columns:15rem minmax(0, 1fr);gap:var(--e-8);padding-block:var(--e-8) var(--e-9)}
  .doc__indice{position:sticky;top:var(--e-5);align-self:start}
  .doc__indice ul{flex-direction:column;gap:var(--e-1)}
  .doc__indice a{border:0;padding:0 var(--e-3);border-radius:var(--pastilla)}
  .pasos--doc .paso{grid-template-columns:12rem 1fr}
  .pasos--doc dt{font-size:var(--t-2)}
}

/* ---------------------------------------------------------------- 404 */
.error{padding-block:var(--e-9)}
.error__caja{max-width:720px}
.error p{margin-top:var(--e-4);font-size:1.125rem;max-width:48ch}
.error .acciones{margin-top:var(--e-6)}

/* ---------------------------------------------------------------- movimiento reducido */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:1ms!important;animation-delay:0s!important;transition-duration:1ms!important;scroll-behavior:auto!important}
}

@media (max-width:1023px){.con-barra{padding-bottom:calc(96px + env(safe-area-inset-bottom))}}