/* =====================================================================
   Aurora Baby Store · V2 — tienda.css (parte CLIENTES)
   Va DESPUÉS de base.css. Usa sus tokens y componentes; aquí solo lo propio de la tienda.

   ÍNDICE
   1. Ajustes globales de la tienda       7. Catálogo y filtros
   2. Barra de anuncio                    8. Ficha de producto + visor
   3. Encabezado, buscador y menú         9. Selector rápido de talla
   4. Pie de página y WhatsApp flotante  10. Carrito (panel y página)
   5. Piezas comunes (migas, secciones)  11. Checkout
   6. Inicio (hero, categorías, tarjetas,12. Confirmación, favoritos, 404
      promo, pasos, visítanos, extras)
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Ajustes globales
   --------------------------------------------------------------------- */
:root{ --toast-inferior:16px; --top-pegajoso:96px; }
@media (min-width:1024px){ :root{ --top-pegajoso:112px; } }
@media (max-width:767.98px){
  :root{ --toast-inferior:88px; }
  body[data-ruta="checkout"]{ --toast-inferior:16px; }
  body.con-barra-compra{ --toast-inferior:152px; }
}
/* Lo que se enfoca o se desplaza a la vista no queda tapado por el encabezado pegajoso */
html{ scroll-padding-top:84px; }
@media (min-width:1024px){ html{ scroll-padding-top:108px; } }
#app{ display:block; min-height:60vh; }
#app:focus,#app:focus-visible{ outline:none; }
/* Mientras llegan los datos, el aviso de carga va FIJO en el centro de la pantalla y la fila de categorías
   (computadora) espera vacía y oculta: cuando aparecen el anuncio, el encabezado y la página, nada de lo que ya
   se veía se mueve (sin saltos: CLS 0). */
#app:has(> .pantalla-carga){ visibility:hidden; }
#app > .pantalla-carga{ position:fixed; inset:0; z-index:1; min-height:0; visibility:visible; }
.cab-nav:has(> .cab-nav-lista:empty){ display:none; }
/* Fotos con versiones livianas (<picture> con WebP): el <picture> no crea caja propia, el <img> se maqueta igual que antes */
picture.foto{ display:contents; }
/* Foto que espera su turno (ver soltarFotosEnEspera): solo se ve el fondo de su marco, sin texto alternativo suelto */
img[data-src]{ visibility:hidden; }
.vista{ animation:vista-entra .32s ease both; }
@keyframes vista-entra{ from{ opacity:0; } to{ opacity:1; } }
.btn .icono{ flex:none; }

/* Botones propios de la tienda */
.btn-wa-suave{ background:#E3F6EA; color:#11603A; }
.btn-wa-suave:hover:not(:disabled){ background:#D2F0DD; }
.btn-wa-suave .icono{ color:#16924F; }
.btn-linea{ background:transparent; border-color:var(--borde-fuerte); color:var(--tinta); }
.btn-linea:hover:not(:disabled){ border-color:var(--tinta-2); background:#fff; }
.btn-linea .icono{ color:#16924F; }

/* Corazón de favorito: contorno ↔ relleno */
.btn-fav .icono-corazon-lleno{ display:none; }
.btn-fav[aria-pressed="true"] .icono-corazon{ display:none; }
.btn-fav[aria-pressed="true"] .icono-corazon-lleno{ display:inline-block; color:var(--fucsia); }
.btn-fav{ color:var(--tinta); }

.sin-foto{ display:grid; place-items:center; width:100%; height:100%; background:var(--crema-2); }
.sin-foto .ilustracion{ width:60%; height:auto; opacity:.9; }

.guia-talla{ display:inline-flex; align-items:center; gap:6px; margin:0; font-size:13px; color:var(--tinta-2); }
.guia-talla .icono{ color:var(--turquesa-oscuro); }

/* ---------------------------------------------------------------------
   2. Barra de anuncio
   --------------------------------------------------------------------- */
.anuncio{ background:var(--fucsia-profundo); color:#fff; }
.anuncio-fila{ position:relative; display:flex; align-items:center; justify-content:center; min-height:40px; padding-inline:calc(var(--gutter) + 40px); }
.anuncio-texto{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:2px 8px; padding:8px 0; color:#fff; text-decoration:none; font-size:13.5px; line-height:1.35; text-align:center; }
.anuncio-texto:hover strong{ text-decoration:underline; text-underline-offset:3px; }
.anuncio-texto strong{ font-weight:800; }
.anuncio-icono{ color:#FFD9E7; }
.anuncio-punto{ opacity:.7; }
.anuncio-cerrar{ position:absolute; right:calc(var(--gutter) - 8px); top:50%; transform:translateY(-50%); display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%; color:#fff; }
.anuncio-cerrar:hover{ background:rgba(255,255,255,.14); }
.anuncio-cerrar:focus-visible{ outline-color:#fff; }
@media (max-width:599px){
  .anuncio-fila{ padding-left:var(--gutter); justify-content:flex-start; }
  .anuncio-texto{ justify-content:flex-start; text-align:left; font-size:13px; }
  .anuncio-icono{ display:none; }
  .anuncio-punto{ display:none; }
  .anuncio-texto > span:last-child{ flex-basis:100%; }
}

/* ---------------------------------------------------------------------
   3. Encabezado
   --------------------------------------------------------------------- */
.cabecera{ position:sticky; top:0; z-index:var(--z-header); background:rgba(255,255,255,.97); transition:box-shadow var(--t-media) ease; }
@supports (backdrop-filter:blur(8px)){ .cabecera{ background:rgba(255,255,255,.9); -webkit-backdrop-filter:saturate(1.5) blur(12px); backdrop-filter:saturate(1.5) blur(12px); } }
.cabecera.con-sombra{ box-shadow:0 10px 24px -18px rgba(43,34,51,.45); }
.cab-barra{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; height:64px; }
.cab-izq{ display:flex; align-items:center; margin-left:-10px; }
.cab-der{ display:flex; align-items:center; justify-content:flex-end; margin-right:-10px; }
.cab-logo{ display:block; line-height:0; border-radius:12px; }
.cab-logo img{ height:44px; width:auto; }
.cab-buscador,.cab-nav{ display:none; }
.cab-arcoiris{ height:3px; }
.cab-der .btn-icono:hover,.cab-izq .btn-icono:hover{ background:var(--rosa-nube); color:var(--fucsia-oscuro); }
.cab-der .contador{ top:4px; right:2px; }

@media (min-width:1024px){
  .cab-barra{ grid-template-columns:auto minmax(0,1fr) auto; gap:40px; height:84px; }
  .cab-izq{ display:none; }
  .cab-logo img{ height:60px; }
  .cab-buscador{ display:block; position:relative; justify-self:center; width:100%; max-width:540px; }
  .cab-der{ gap:4px; }
  .cabecera{ border-bottom:1px solid var(--borde); }
  .cab-arcoiris{ position:absolute; left:0; right:0; bottom:-3px; opacity:0; transition:opacity var(--t-media) ease; }
  .cabecera.con-sombra .cab-arcoiris{ opacity:1; }
  .cab-nav{ position:relative; display:block; padding-bottom:3px; background:#fff; }
  .cab-nav::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--arcoiris); }
  .cab-nav-lista{ display:flex; align-items:center; justify-content:center; gap:2px; height:52px; list-style:none; overflow-x:auto; scrollbar-width:none; }
  .cab-nav-enlace{ position:relative; display:inline-flex; align-items:center; height:40px; padding:0 14px; border-radius:var(--radio-pill); color:var(--tinta-2); font:700 15px/1 var(--fuente-texto); text-decoration:none; white-space:nowrap; transition:color var(--t-rapida) ease,background-color var(--t-rapida) ease; }
  .cab-nav-enlace:hover{ color:var(--tinta); background:var(--crema); }
  .cab-nav-enlace[aria-current="page"]{ color:var(--fucsia-oscuro); }
  .cab-nav-enlace[aria-current="page"]::after{ content:""; position:absolute; left:14px; right:14px; bottom:3px; height:3px; border-radius:var(--radio-pill); background:var(--arcoiris); }
}

/* Buscador (computadora) */
.buscador-campo{ position:relative; display:flex; align-items:center; }
.buscador-lupa{ position:absolute; left:17px; color:var(--tinta-2); pointer-events:none; }
.buscador-input{
  width:100%; height:50px; padding:0 20px 0 48px; border:1.5px solid transparent; border-radius:var(--radio-pill);
  background:var(--crema-2); color:var(--tinta); font:600 15px/1 var(--fuente-texto); -webkit-appearance:none; appearance:none;
  transition:background-color var(--t-rapida) ease,border-color var(--t-rapida) ease,box-shadow var(--t-rapida) ease;
}
.buscador-input::placeholder{ color:var(--tinta-2); font-weight:500; opacity:1; }
.buscador-input:hover{ background:#F2EBE0; }
.buscador-input:focus{ outline:none; background:#fff; border-color:var(--turquesa); box-shadow:0 0 0 4px rgba(4,168,198,.16); }
.sugerencias{
  position:absolute; top:calc(100% + 10px); left:0; right:0; z-index:5; min-width:400px; max-height:min(72vh,560px); overflow:auto;
  padding:10px; border:1px solid var(--borde); border-radius:var(--radio-l); background:#fff; box-shadow:0 24px 60px -18px rgba(43,34,51,.35);
  animation:vista-entra .16s ease both;
}
.sug-titulo{ padding:8px 10px 6px; font:800 11.5px/1.2 var(--fuente-texto); letter-spacing:.13em; text-transform:uppercase; color:var(--tinta-2); }
.sug-lista{ list-style:none; margin:0; padding:0; }
.sug-item{ display:flex; align-items:center; gap:12px; padding:8px 10px; border-radius:14px; cursor:pointer; }
.sug-item:hover,.sug-item[aria-selected="true"]{ background:var(--crema); }
.sug-item[aria-selected="true"]{ box-shadow:inset 3px 0 0 var(--fucsia-profundo); }
.sug-foto{ flex:none; width:54px; height:54px; overflow:hidden; border-radius:12px; background:var(--crema-2); }
.sug-foto img,.sug-foto .sin-foto{ width:100%; height:100%; object-fit:cover; }
.sug-datos{ display:grid; gap:2px; min-width:0; }
.sug-nombre{ overflow:hidden; font-weight:700; font-size:15px; line-height:1.3; text-overflow:ellipsis; white-space:nowrap; }
.sug-meta{ font-size:13px; color:var(--tinta-2); }
.sug-meta .precio{ font-size:14px; }
.sug-meta .precio-consultar{ font-size:13px; }
.sug-todos{ display:flex; align-items:center; justify-content:center; gap:6px; margin-top:8px; padding:12px; border-radius:14px; background:var(--rosa-nube); color:var(--fucsia-oscuro); font-weight:800; font-size:14.5px; text-decoration:none; }
.sug-todos:hover{ background:#FBE1EB; }
.sug-vacio{ padding:8px 10px 12px; }
.sug-vacio .chips{ margin-top:6px; }
.sug-vacio .sug-titulo{ padding:0 0 4px; }
.sug-nada{ font-weight:800; margin-bottom:4px; }

/* Buscador (móvil, pantalla completa) */
.modal-buscar .panel-cabecera{ align-items:center; }
.modal-buscar .panel-titulos{ padding-top:0; }
.modal-buscar .panel-cuerpo{ padding-top:4px; }
.buscador-campo-movil .input{ min-height:54px; padding-left:48px; border-radius:var(--radio-pill); font-size:16px; }
.sugerencias-movil{ margin-top:14px; margin-inline:-10px; }
.sugerencias-movil .sug-vacio{ padding-inline:10px; }
.sugerencias-movil .sug-titulo{ padding-inline:10px; }

/* Menú (panel izquierdo) */
.drawer-menu .panel-cabecera{ align-items:center; padding-top:14px; padding-bottom:14px; }
.drawer-menu .panel-titulos{ padding-top:0; }
.menu-principal,.menu-categorias{ list-style:none; margin:0; padding:0; display:grid; gap:2px; }
.menu-enlace{ display:flex; align-items:center; gap:14px; min-height:52px; padding:0 12px; border-radius:14px; color:var(--tinta); font:700 16px/1.2 var(--fuente-texto); text-decoration:none; }
.menu-enlace > .icono{ color:var(--tinta-2); }
.menu-enlace:hover{ background:var(--crema); }
.menu-enlace[aria-current="page"]{ background:var(--rosa-nube); color:var(--fucsia-oscuro); }
.menu-enlace[aria-current="page"] > .icono{ color:var(--fucsia-oscuro); }
.menu-subtitulo{ margin:18px 12px 8px; font:800 12px/1.2 var(--fuente-texto); letter-spacing:.13em; text-transform:uppercase; color:var(--tinta-2); }
.menu-cat{ min-height:64px; padding:6px 12px; }
.menu-cat-foto{ display:grid; place-items:center; flex:none; width:48px; height:48px; overflow:hidden; border-radius:14px; background:var(--crema-2); color:var(--tinta-2); }
.menu-cat-foto img{ width:100%; height:100%; object-fit:cover; }
.menu-cat-texto{ display:grid; flex:1; min-width:0; line-height:1.25; }
.menu-cat-texto small{ font-weight:600; font-size:13px; color:var(--tinta-2); }
.menu-cat-flecha{ color:var(--tinta-3); }
.menu-contacto{ display:grid; gap:10px; margin-top:20px; padding-top:20px; border-top:1px solid var(--borde); }
.menu-direccion{ display:flex; gap:10px; margin-top:6px; font-size:14px; line-height:1.45; color:var(--tinta-2); }
.menu-direccion .icono{ margin-top:1px; color:var(--fucsia-profundo); }

/* ---------------------------------------------------------------------
   4. Pie de página y WhatsApp flotante
   --------------------------------------------------------------------- */
.pie{ display:block; margin-top:clamp(32px,4vw,56px); color:var(--tinta); }
.pie-ola{ color:#fff; margin-bottom:-1px; }
.pie-cuerpo{ background:#fff; padding:8px 0 calc(96px + env(safe-area-inset-bottom)); }
.pie-rejilla{ display:grid; grid-template-columns:1fr 1fr; gap:36px 24px; padding-top:16px; padding-bottom:40px; }
.pie-marca,.pie-col:last-child{ grid-column:1 / -1; }
@media (min-width:900px){
  .pie-rejilla{ grid-template-columns:1.35fr 1fr 1fr 1.3fr; gap:40px; }
  .pie-marca,.pie-col:last-child{ grid-column:auto; }
}
.pie-wordmark{ display:inline-block; text-decoration:none; border-radius:10px; }
.pie-slogan{ max-width:30ch; margin-top:14px; color:var(--tinta-2); }
.pie-redes{ display:flex; gap:8px; margin-top:16px; }
.pie-red{ background:var(--crema); }
.pie-red:hover{ background:var(--rosa-nube) !important; color:var(--fucsia-oscuro); }
.pie-titulo{ margin-bottom:14px; font:800 12.5px/1.2 var(--fuente-texto); letter-spacing:.13em; text-transform:uppercase; color:var(--tinta-2); }
.pie-col ul{ display:grid; gap:4px; list-style:none; margin:0; padding:0; }
.pie-col a{ display:inline-flex; align-items:center; min-height:44px; color:var(--tinta); font-weight:600; font-size:15px; text-decoration:none; }
.pie-col ul:not(.pie-datos){ gap:0; }
.pie-demo a{ display:inline-flex; align-items:center; min-height:44px; }
.pie-col a:hover{ color:var(--fucsia-oscuro); text-decoration:underline; text-underline-offset:3px; }
.pie-datos{ gap:12px !important; }
.pie-datos li{ display:flex; gap:10px; font-size:14.5px; line-height:1.5; color:var(--tinta-2); }
.pie-datos .icono{ margin-top:2px; color:var(--fucsia-profundo); }
.pie-datos a.enlace{ position:relative; min-height:0; display:inline; color:var(--fucsia-oscuro); font-weight:700; }
/* «Cómo llegar» va en su propia línea: zona táctil de 44 px sin mover el texto */
.pie-datos a.enlace::after{ content:""; position:absolute; inset:-12px -8px; }
.pie-legal{ position:relative; display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px 24px; padding-top:20px; font-size:13px; color:var(--tinta-2); }
.pie-legal::before{ content:""; position:absolute; top:0; left:var(--gutter); right:var(--gutter); height:1px; background:var(--borde); }
.pie-demo a{ color:inherit; font-weight:700; }

.wa-flotante{
  position:fixed; right:16px; bottom:calc(16px + env(safe-area-inset-bottom)); z-index:var(--z-flotante);
  display:inline-flex; align-items:center; justify-content:center; gap:10px; min-width:58px; height:58px; padding:0 15px;
  border-radius:var(--radio-pill); background:var(--whatsapp); color:#fff; text-decoration:none;
  box-shadow:0 12px 26px -10px rgba(18,140,74,.7),0 2px 6px rgba(0,0,0,.08);
  transition:transform var(--t-rapida) var(--curva),bottom var(--t-media) var(--curva),background-color var(--t-rapida) ease;
}
.wa-flotante:hover{ background:var(--whatsapp-hover); transform:translateY(-2px); }
.wa-flotante-texto{ display:none; font:800 15px/1 var(--fuente-texto); text-shadow:0 1px 1px rgba(0,60,25,.3); }
@media (min-width:1024px){
  .wa-flotante{ right:24px; bottom:24px; padding:0 22px 0 18px; background:var(--whatsapp-texto); box-shadow:0 12px 26px -10px rgba(17,112,58,.7),0 2px 6px rgba(0,0,0,.08); }
  .wa-flotante:hover{ background:var(--whatsapp-texto-hover); }
  .wa-flotante-texto{ display:inline; text-shadow:none; }
}
/* Teléfono: flotante más compacto y pegado al borde (tapaba parte del nombre de la tarjeta de la derecha al bajar),
   y la última fila de tarjetas siempre puede quedar por encima de él. */
@media (max-width:599.98px){
  .wa-flotante{ right:8px; bottom:calc(10px + env(safe-area-inset-bottom)); min-width:50px; height:50px; padding:0 12px; }
  .wa-flotante .icono{ width:26px; height:26px; }
  .vista .cuadricula-productos{ padding-bottom:28px; }
}
@media (max-width:899.98px){ body.con-barra-compra .wa-flotante{ bottom:calc(86px + env(safe-area-inset-bottom)); } }
/* Inicio en el teléfono: mientras se ve el botón de WhatsApp del hero, el flotante (que hace lo mismo) se aparta */
@media (max-width:1023.98px){
  .wa-flotante{ transition:transform var(--t-rapida) var(--curva),bottom var(--t-media) var(--curva),background-color var(--t-rapida) ease,opacity var(--t-media) ease; }
  body.hero-wa-visible .wa-flotante{ opacity:0; transform:translateY(16px) scale(.85); pointer-events:none; visibility:hidden; }
}

/* ---------------------------------------------------------------------
   5. Piezas comunes
   --------------------------------------------------------------------- */
.migas{ padding-top:18px; font-size:13.5px; color:var(--tinta-2); }
.migas ol{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 6px; margin:0; padding:0; list-style:none; }
.migas li{ display:flex; align-items:center; gap:6px; min-width:0; max-width:100%; }
.migas li + li::before{ content:""; width:6px; height:6px; border-top:1.5px solid var(--tinta-3); border-right:1.5px solid var(--tinta-3); transform:rotate(45deg); margin-right:4px; flex:none; }
.migas a{ display:inline-flex; align-items:center; min-height:44px; margin-block:-7px; color:var(--tinta-2); text-decoration:none; }
.migas a:hover{ color:var(--fucsia-oscuro); text-decoration:underline; }
.migas [aria-current="page"]{ min-width:0; color:var(--tinta); font-weight:700; }
.pagina-titulo{ margin:10px 0 24px; }
.pagina-sub{ margin:-12px 0 24px; color:var(--tinta-2); }

.sec-cabecera{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px 24px; margin-bottom:clamp(20px,2.6vw,36px); flex-wrap:wrap; }
.sec-titulos{ display:grid; gap:8px; }
.sec-texto{ max-width:52ch; color:var(--tinta-2); }
.sec-enlace{ display:inline-flex; align-items:center; gap:6px; min-height:44px; color:var(--fucsia-oscuro); font-weight:800; font-size:15px; text-decoration:none; white-space:nowrap; transition:gap var(--t-rapida) var(--curva); }
.sec-enlace:hover{ gap:10px; text-decoration:underline; text-underline-offset:4px; }
.sec-cabecera-centro{ justify-content:center; text-align:center; }
.sec-cabecera-centro .sec-titulos{ justify-items:center; }
@media (max-width:599px){ .sec-enlace{ font-size:14px; } }

/* ---------------------------------------------------------------------
   6. Inicio
   --------------------------------------------------------------------- */
/* Hero */
.hero{
  position:relative; overflow:hidden; padding:28px 0 44px;
  background:
    radial-gradient(55% 60% at 100% 0%,rgba(253,239,244,1) 0%,rgba(253,239,244,0) 70%),
    radial-gradient(45% 55% at 0% 100%,rgba(234,246,250,1) 0%,rgba(234,246,250,0) 70%);
}
.hero-rejilla{ display:grid; gap:28px; align-items:center; }
@media (min-width:900px){
  .hero{ padding:56px 0 76px; }
  .hero-rejilla{ grid-template-columns:minmax(0,1.04fr) minmax(0,1fr); gap:48px; }
}
@media (min-width:900px) and (max-width:1179px){
  .hero-rejilla{ grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:32px; }
  .hero-acciones .btn-l{ padding-inline:20px; }
}
.hero-sobre{ display:inline-flex; align-items:center; gap:8px; padding:7px 14px 7px 11px; border-radius:var(--radio-pill); background:#fff; box-shadow:var(--sombra-1); color:var(--fucsia-oscuro); font:800 13px/1.2 var(--fuente-texto); }
.hero-titulo{ margin-top:18px; font:600 clamp(36px,3.4vw + 20px,62px)/1.04 var(--fuente-titulo); letter-spacing:-.028em; }
.hero-titulo .acento{ display:inline-block; font-size:1.2em; line-height:.9; color:var(--fucsia-profundo); transform:rotate(-2deg); padding:0 .06em; }
.hero-sub{ max-width:44ch; margin-top:18px; font-size:17px; line-height:1.6; color:var(--tinta-2); }
@media (min-width:900px){ .hero-sub{ font-size:18.5px; } }
.hero-acciones{ display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
@media (max-width:479px){ .hero-acciones .btn{ flex:1 1 100%; } }
ul.hero-confianza{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; max-width:560px; margin:30px 0 0; padding:0; list-style:none; }
.hero-confianza li{ display:flex; align-items:center; gap:10px; min-width:0; font-size:13.5px; line-height:1.3; color:var(--tinta-2); }
.hc-texto{ display:grid; min-width:0; }
.hc-texto b{ color:var(--tinta); font-weight:800; }
.hc-icono{ display:grid; place-items:center; flex:none; width:38px; height:38px; border-radius:50%; }
@media (max-width:599px){
  ul.hero-confianza{ padding:14px 10px; border-radius:var(--radio); background:rgba(255,255,255,.75); box-shadow:var(--sombra-1); }
  .hero-confianza li{ flex-direction:column; text-align:center; gap:6px; font-size:12.5px; }
}
.hc-rosa{ background:#FBE1EB; color:var(--fucsia-oscuro); }
.hc-celeste{ background:#D9F0F7; color:var(--turquesa-oscuro); }
.hc-lima{ background:#E6F1D2; color:var(--lima-oscuro); }

.hero-collage{ position:relative; width:100%; max-width:560px; margin-inline:auto; aspect-ratio:1 / .94; }
.collage-formas{ position:absolute; inset:0; width:100%; height:100%; }
.collage-foto{
  position:absolute; display:block; overflow:hidden; border:6px solid #fff; border-radius:28px; background:var(--crema-2);
  box-shadow:0 22px 44px -20px rgba(43,34,51,.45); transition:transform .5s var(--curva);
}
.collage-foto img{ width:100%; height:100%; object-fit:cover; }
.collage-1{ left:4%; top:9%; width:52%; aspect-ratio:4 / 5; transform:rotate(-3deg); z-index:2; }
.collage-2{ right:3%; top:2%; width:39%; aspect-ratio:1; transform:rotate(4deg); z-index:1; }
.collage-3{ right:9%; bottom:2%; width:37%; aspect-ratio:4 / 5; transform:rotate(-1.5deg); z-index:3; }
.collage-foto:hover{ transform:rotate(0) scale(1.03); z-index:4; }
.collage-ficha{
  position:absolute; left:0; bottom:5%; z-index:5; display:grid; gap:2px; max-width:56%; padding:12px 16px 12px 14px;
  border-radius:18px; background:#fff; box-shadow:var(--sombra-2); color:var(--tinta); text-decoration:none;
  border-left:4px solid var(--fucsia);
}
.collage-ficha-nombre{ display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-weight:800; font-size:13.5px; line-height:1.3; }
.collage-ficha-precio .precio{ font-size:17px; color:var(--fucsia-oscuro); }
.collage-ficha:hover{ box-shadow:var(--sombra-3); }
@media (max-width:599px){
  .hero{ padding-top:14px; }
  .hero-rejilla{ gap:16px; }
  .hero-collage{ order:-1; max-width:340px; aspect-ratio:1 / .74; }
  .hero-sobre{ display:none; }
  .hero-titulo{ margin-top:0; }
  .collage-1{ top:6%; }
  .collage-foto{ border-width:4px; border-radius:20px; }
  .collage-ficha{ padding:9px 12px; border-radius:14px; }
  .collage-ficha-nombre{ font-size:12.5px; }
  .collage-ficha-precio .precio{ font-size:15px; }
}

/* Categorías */
ul.cats-riel{
  display:grid; grid-auto-flow:column; grid-auto-columns:128px; gap:14px; margin:0 calc(var(--gutter) * -1); padding:4px var(--gutter) 6px;
  list-style:none; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:var(--gutter); scrollbar-width:none; overscroll-behavior-x:contain;
}
.cats-riel::-webkit-scrollbar{ display:none; }
.cats-riel > li{ scroll-snap-align:start; min-width:0; }
@media (min-width:768px){ ul.cats-riel{ grid-auto-columns:156px; gap:20px; } }
@media (min-width:1100px){
  ul.cats-riel{ grid-auto-flow:row; grid-template-columns:repeat(7,minmax(0,1fr)); grid-auto-columns:auto; margin:0; padding:4px 0 0; overflow:visible; gap:22px; }
}
.cat-tarjeta{ display:flex; flex-direction:column; align-items:center; gap:4px; color:var(--tinta); text-align:center; text-decoration:none; border-radius:var(--radio); }
.cat-foto{
  display:grid; place-items:center; width:100%; aspect-ratio:1; padding:6px; border-radius:50%; overflow:hidden;
  background:var(--tono,var(--rosa-nube)); color:var(--tinta-2); transition:background var(--t-media) ease,transform var(--t-media) var(--curva);
}
.cat-foto img{ width:100%; height:100%; border-radius:50%; object-fit:cover; background:var(--crema-2); border:3px solid #fff; }
.cat-tono-0{ --tono:#F9D3E1; } .cat-tono-1{ --tono:#CDEBF4; } .cat-tono-2{ --tono:#DDEDC3; } .cat-tono-3{ --tono:#FBE0BD; }
.cat-tarjeta:hover .cat-foto{ background:var(--arcoiris); transform:translateY(-3px); }
.cat-nombre{ margin-top:10px; font:600 16px/1.2 var(--fuente-titulo); }
.cat-cantidad{ font-size:13px; font-weight:600; color:var(--tinta-2); }

/* Riel de productos (destacados): desliza en móvil, cuadrícula en computadora */
.riel-productos{
  display:grid; grid-auto-flow:column; grid-auto-columns:44%; gap:14px; margin:0 calc(var(--gutter) * -1); padding:0 var(--gutter) 6px;
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:var(--gutter); scrollbar-width:none; overscroll-behavior-x:contain;
}
.riel-productos::-webkit-scrollbar{ display:none; }
.riel-productos > *{ scroll-snap-align:start; }
@media (min-width:768px){ .riel-productos{ grid-auto-columns:30%; gap:22px; } }
@media (min-width:1100px){
  .riel-productos{ grid-auto-flow:row; grid-template-columns:repeat(4,minmax(0,1fr)); grid-auto-columns:auto; margin:0; padding:0; overflow:visible; gap:40px 24px; }
}
@media (min-width:768px) and (max-width:1099.98px){ .grid-nuevos > :nth-child(n+7){ display:none; } }
@media (max-width:767.98px){ .grid-nuevos > :nth-child(n+7){ display:none; } }

/* Tarjeta de producto */
.tp{ position:relative; display:flex; flex-direction:column; min-width:0; }
.tp-media{ position:relative; }
.tp-foto{ position:relative; display:block; overflow:hidden; aspect-ratio:4 / 5; border-radius:var(--radio); background:var(--crema-2); }
.tp-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .7s var(--curva),opacity .35s ease; }
.tp-img-2{ opacity:0; }
@media (hover:hover){
  .tp:hover .tp-img{ transform:scale(1.045); }
  .tp:hover .tp-con-segunda .tp-img-2{ opacity:1; }
}
.tp-agotado .tp-foto img{ filter:grayscale(.45); opacity:.7; }
.tp-etiquetas{ position:absolute; top:10px; left:10px; display:flex; flex-direction:column; align-items:flex-start; gap:5px; pointer-events:none; }
.tp-etiquetas .etiqueta{ box-shadow:0 1px 2px rgba(43,34,51,.08); }
.tp-fav{ position:absolute; top:8px; right:8px; width:40px; height:40px; }
.tp-info{ display:flex; flex:1; flex-direction:column; gap:3px; padding-top:12px; }
.tp-marca{ font:800 11px/1.3 var(--fuente-texto); letter-spacing:.12em; text-transform:uppercase; color:var(--tinta-2); }
.tp-nombre{ display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font:700 15px/1.35 var(--fuente-texto); letter-spacing:0; text-wrap:pretty; }
.tp-nombre a{ color:inherit; text-decoration:none; }
.tp-nombre a:hover{ text-decoration:underline; text-underline-offset:3px; }
.tp-precio{ display:flex; flex-wrap:wrap; align-items:baseline; gap:0 8px; margin-top:3px; }
.tp-precio .precio{ font-size:17px; }
.tp-precio .precio-consultar{ font-size:14px; }
.tp-tallas{ min-height:1.45em; margin-bottom:10px; overflow:hidden; font-size:13px; color:var(--tinta-2); text-overflow:ellipsis; white-space:nowrap; }
.tp-accion{ --alto-btn:44px; position:relative; z-index:1; margin-top:auto; font-size:14px; }
.tp-fav,.tp-etiquetas{ z-index:2; }
@media (max-width:399px){ .tp-accion{ padding:0 10px; gap:6px; } }

/* Banda promocional */
.banda-promo{
  position:relative; display:grid; gap:20px; align-items:center; overflow:hidden; padding:32px 24px; border-radius:28px;
  background:linear-gradient(115deg,#FBDCE8 0%,#FDEFF4 50%,#E3F3F8 100%);
}
@media (min-width:768px){ .banda-promo{ grid-template-columns:1fr auto; gap:32px; padding:48px 56px; } }
.banda-promo-formas{ position:absolute; top:0; right:0; height:100%; width:auto; pointer-events:none; }
.banda-promo-texto{ position:relative; display:grid; gap:10px; justify-items:start; }
.banda-promo-sello{ display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:var(--radio-pill); background:#fff; color:var(--fucsia-oscuro); font:800 12px/1.2 var(--fuente-texto); letter-spacing:.1em; text-transform:uppercase; }
.banda-promo-titulo{ font:600 clamp(28px,2.4vw + 18px,46px)/1.06 var(--fuente-titulo); letter-spacing:-.02em; }
.banda-promo-sub{ max-width:42ch; font-size:17px; color:var(--tinta-2); }
.banda-promo-btn{ position:relative; justify-self:start; }

/* Cómo comprar */
.seccion-como{ margin-top:clamp(28px,4vw,56px); }
.ola-celeste{ color:var(--celeste-nube); margin-block:-1px; }
.como-cuerpo{ padding:clamp(28px,4vw,56px) 0 clamp(36px,4vw,64px); background:var(--celeste-nube); }
.pasos{ display:grid; gap:14px; margin:0; padding:0; list-style:none; }
@media (min-width:768px){ .pasos{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; } }
.paso{ display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; column-gap:16px; row-gap:4px; padding:20px; border-radius:var(--radio-l); background:#fff; box-shadow:var(--sombra-1); }
.paso-icono{ grid-row:1 / 3; }
@media (min-width:768px){
  .paso{ grid-template-columns:1fr; row-gap:10px; padding:30px 26px; }
  .paso-icono{ grid-row:auto; margin-bottom:8px; }
}
.paso-icono{ position:relative; display:grid; place-items:center; width:60px; height:60px; border-radius:20px; }
.paso-rosa{ background:var(--rosa-nube); color:var(--fucsia-profundo); }
.paso-verde{ background:#E3F6EA; color:#16924F; }
.paso-naranja{ background:var(--alerta-fondo); color:var(--naranja-oscuro); }
.paso-numero{ position:absolute; top:-7px; right:-7px; width:26px; height:26px; border-radius:50%; background:var(--tinta); color:#fff; font:700 13px/26px var(--fuente-titulo); text-align:center; box-shadow:0 0 0 3px #fff; }
.paso-titulo{ font:600 19px/1.25 var(--fuente-titulo); }
.paso-texto{ font-size:15px; color:var(--tinta-2); }

/* Visítanos */
.visitanos-rejilla{ display:grid; gap:36px; align-items:center; }
@media (min-width:900px){ .visitanos-rejilla{ grid-template-columns:minmax(0,.82fr) minmax(0,1fr); gap:72px; } }
.visitanos-foto{ position:relative; width:100%; max-width:440px; margin-inline:auto; }
.visitanos-foto img{ width:100%; aspect-ratio:5 / 4; object-fit:cover; object-position:50% 62%; border-radius:28px; box-shadow:var(--sombra-2); }
@media (min-width:900px){ .visitanos-foto img{ aspect-ratio:4 / 5; object-position:50% 50%; } }
.visitanos-foto::before{
  content:""; position:absolute; right:-14px; top:36px; width:10px; height:42%; border-radius:var(--radio-pill);
  background:linear-gradient(180deg,#84CCE0,#04A8C6,#A8C852,#F29A24,#F2703A,#E8357F);
}
.visitanos-sello{ position:absolute; left:16px; bottom:16px; display:inline-flex; align-items:center; gap:8px; padding:8px 18px 10px; border-radius:var(--radio-pill); background:#fff; box-shadow:var(--sombra-2); color:var(--fucsia-profundo); font:700 22px/1 var(--fuente-acento); }
.visitanos-sello .icono{ color:var(--fucsia); }
.visitanos-texto{ display:grid; gap:14px; justify-items:start; }
ul.visitanos-datos{ display:grid; gap:14px; margin:6px 0; padding:0; list-style:none; }
.visitanos-datos li{ display:flex; align-items:center; gap:14px; line-height:1.45; }
.vd-icono{ display:grid; place-items:center; flex:none; width:46px; height:46px; border-radius:15px; background:#fff; box-shadow:var(--sombra-1); color:var(--fucsia-profundo); }
.visitanos-acciones{ display:flex; flex-wrap:wrap; gap:12px; margin-top:8px; }
@media (max-width:479px){ .visitanos-acciones .btn{ flex:1 1 100%; } }

/* Lista de regalos + Instagram */
.extras-rejilla{ display:grid; gap:20px; }
@media (min-width:900px){ .extras-rejilla{ grid-template-columns:minmax(0,1fr) minmax(0,1.35fr); gap:24px; } }
.extra-tarjeta{ position:relative; display:grid; gap:12px; align-content:start; justify-items:start; overflow:hidden; padding:30px 26px; border-radius:28px; }
@media (min-width:768px){ .extra-tarjeta{ padding:40px; } }
.extra-regalos{ background:var(--rosa-nube); }
.extra-instagram{ background:var(--menta-nube); }
@media (min-width:600px){ .extra-instagram{ grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:28px; } }
.extra-ig-texto{ display:grid; gap:12px; justify-items:start; }
.extra-icono{ display:grid; place-items:center; width:54px; height:54px; border-radius:17px; background:#fff; color:var(--fucsia-profundo); box-shadow:var(--sombra-1); }
.extra-instagram .extra-icono{ color:var(--lima-oscuro); }
.extra-tarjeta .btn{ margin-top:6px; }
.extra-mosaico{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; width:100%; }
@media (min-width:600px){ .extra-mosaico{ grid-template-columns:repeat(3,88px); width:auto; } }
.extra-mosaico span{ display:block; aspect-ratio:1; overflow:hidden; border:3px solid #fff; border-radius:16px; box-shadow:var(--sombra-1); }
.extra-mosaico span:nth-child(2){ transform:translateY(-10px) rotate(2deg); }
.extra-mosaico span:nth-child(odd){ transform:rotate(-2deg); }
.extra-mosaico img{ width:100%; height:100%; object-fit:cover; }

/* ---------------------------------------------------------------------
   7. Catálogo y filtros
   --------------------------------------------------------------------- */
.catalogo-cabecera{ padding-bottom:clamp(22px,3vw,40px); background:linear-gradient(180deg,#fff 0%,rgba(255,255,255,0) 100%); }
.catalogo-cabecera-cat.tono-0{ background:linear-gradient(180deg,var(--rosa-nube),rgba(253,239,244,0)); }
.catalogo-cabecera-cat.tono-1{ background:linear-gradient(180deg,var(--celeste-nube),rgba(234,246,250,0)); }
.catalogo-cabecera-cat.tono-2{ background:linear-gradient(180deg,var(--menta-nube),rgba(234,245,236,0)); }
.catalogo-cabecera-cat.tono-3{ background:linear-gradient(180deg,#FDF1E0,rgba(253,241,224,0)); }
.catalogo-titulo{ margin-top:12px; overflow-wrap:anywhere; }
.catalogo-desc{ max-width:60ch; margin-top:10px; font-size:17px; color:var(--tinta-2); }
.catalogo-rejilla{ display:grid; gap:28px; }
@media (min-width:1024px){ .catalogo-rejilla{ grid-template-columns:250px minmax(0,1fr); gap:44px; } }
.filtros-lateral{ display:none; }
@media (min-width:1024px){
  .filtros-lateral{ position:sticky; top:var(--top-pegajoso); align-self:start; display:block; max-height:calc(100vh - var(--top-pegajoso) - 16px); overflow-y:auto; padding:2px 10px 24px 2px; scrollbar-width:thin; }
}
.catalogo-principal{ min-width:0; }
.catalogo-chips-cat{ margin-bottom:16px; }
.catalogo-chips-cat .chip{ min-height:44px; text-decoration:none; }
.catalogo-chips-cat .chip[aria-current="page"]{ background:var(--tinta); border-color:var(--tinta); color:#fff; }
@media (min-width:1024px){ .catalogo-chips-cat{ display:none; } }
.barra-herramientas{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin-bottom:20px; padding-bottom:16px; border-bottom:1px solid var(--borde); }
.catalogo-contador{ font-size:15px; color:var(--tinta-2); }
.catalogo-contador b{ color:var(--tinta); font-weight:800; }
.barra-acciones{ display:flex; align-items:center; gap:8px; }
.boton-filtros{ --alto-btn:44px; }
@media (min-width:1024px){ .boton-filtros{ display:none; } }
.filtros-num{ display:inline-grid; place-items:center; min-width:22px; height:22px; padding:0 6px; border-radius:var(--radio-pill); background:var(--fucsia-profundo); color:#fff; font-size:12px; }
.ordenar{ display:flex; align-items:center; gap:10px; }
.ordenar-etiqueta{ font-size:14px; font-weight:700; color:var(--tinta-2); white-space:nowrap; }
.ordenar-select{ width:auto; max-width:220px; min-height:44px; padding:8px 40px 8px 16px; border-radius:var(--radio-pill); font-weight:700; font-size:14px; background-color:#fff; }
@media (max-width:767.98px){
  .ordenar-etiqueta{ display:none; }
  .ordenar-select{ max-width:190px; }
}
.filtros-activos{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:-4px 0 22px; }
.filtros-activos .chip-filtro{ min-height:36px; }
.filtros-limpiar{ --alto-btn:36px; padding:0 10px; color:var(--fucsia-oscuro); text-decoration:underline; text-underline-offset:3px; }
.catalogo-grid{ min-height:200px; }

.filtros{ display:grid; }
.filtro-grupo{ min-width:0; margin:0; padding:20px 0; border:0; border-bottom:1px solid var(--borde); }
.filtro-grupo:first-child{ padding-top:2px; }
.filtro-grupo-ultimo{ border-bottom:0; padding-bottom:4px; }
.filtro-titulo{ float:left; width:100%; margin-bottom:12px; padding:0; font:600 17px/1.2 var(--fuente-titulo); }
.filtro-titulo + *{ clear:both; }
.filtro-cats{ display:grid; gap:2px; margin:0; padding:0; list-style:none; }
.filtro-cat{ display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; min-height:42px; padding:0 12px; border-radius:12px; color:var(--tinta-2); font:600 15px/1.2 var(--fuente-texto); text-align:left; transition:background-color var(--t-rapida) ease,color var(--t-rapida) ease; }
.filtro-cat:hover{ background:#fff; color:var(--tinta); }
.filtro-cat[aria-pressed="true"]{ background:#fff; color:var(--tinta); font-weight:800; box-shadow:var(--sombra-1),inset 3px 0 0 var(--fucsia-profundo); }
.filtro-cuenta{ font-size:13px; font-weight:700; color:var(--tinta-2); font-variant-numeric:tabular-nums; }
.filtro-tallas{ gap:8px; }
.filtro-tallas .chip-talla{ min-width:52px; min-height:42px; padding:0 10px; font-size:14px; }
.filtro-tallas + .guia-talla{ margin-top:12px; }
.filtro-precios{ display:grid; }
.filtro-precios .check{ min-height:42px; font-size:15px; }
.filtro-disp{ font-size:15px; }
.hoja-filtros .filtro-grupo{ padding:16px 0; }
.hoja-filtros .filtro-grupo:first-child{ padding-top:4px; }
.capa-filtros .panel-pie .btn-fantasma{ flex:0 0 auto; }

.ver-mas{ display:grid; justify-items:center; gap:12px; margin-top:44px; text-align:center; }
.ver-mas:empty{ display:none; }
.ver-mas-texto{ font-size:14px; font-weight:700; color:var(--tinta-2); }
.ver-mas-barra{ width:200px; height:4px; overflow:hidden; border-radius:var(--radio-pill); background:var(--borde); }
.ver-mas-barra span{ display:block; height:100%; border-radius:inherit; background:var(--arcoiris); }

/* ---------------------------------------------------------------------
   8. Ficha de producto
   --------------------------------------------------------------------- */
.vista-producto .migas{ padding-bottom:16px; }
.producto-migas li[aria-current="page"]{ max-width:min(60vw,420px); }
.producto-rejilla{ display:grid; grid-template-columns:minmax(0,1fr); gap:24px; }
.producto-rejilla > *{ min-width:0; }
@media (min-width:900px){
  .producto-rejilla{ grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); gap:56px; align-items:start; }
  .producto-galeria{ position:sticky; top:var(--top-pegajoso); }
}
@media (min-width:1200px){ .producto-rejilla{ gap:72px; } }
@media (max-width:599px){
  .producto-galeria{ margin-inline:calc(var(--gutter) * -1); }
  .producto-galeria .galeria-principal{ border-radius:0; }
  .galeria-miniaturas{ padding-inline:var(--gutter); }
}
.galeria{ display:grid; gap:12px; min-width:0; }
.galeria-principal{ position:relative; overflow:hidden; border-radius:var(--radio-l); background:var(--crema-2); }
.galeria-pista{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; overscroll-behavior-x:contain; }
.galeria-pista::-webkit-scrollbar{ display:none; }
.galeria-pista:focus-visible{ outline-offset:-4px; }
.galeria-slide{ position:relative; display:block; flex:0 0 100%; aspect-ratio:var(--proporcion,1); max-height:78vh; overflow:hidden; padding:0; scroll-snap-align:start; cursor:zoom-in; }
@media (min-width:600px) and (max-width:899.98px){ .galeria-slide{ max-height:58vh; } }
@media (min-width:900px){ .galeria-slide{ max-height:none; } }
.galeria-fondo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:blur(28px) saturate(1.05); opacity:.4; transform:scale(1.25); }
.galeria-img{ position:relative; width:100%; height:100%; object-fit:contain; }
.galeria-sin-foto{ aspect-ratio:1; }
.galeria-etiquetas{ position:absolute; top:14px; left:14px; display:flex; flex-direction:column; align-items:flex-start; gap:6px; pointer-events:none; }
.galeria-fav{ position:absolute; top:12px; right:12px; }
.galeria-ampliar{ position:absolute; right:14px; bottom:14px; display:grid; place-items:center; width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.92); color:var(--tinta-2); pointer-events:none; box-shadow:var(--sombra-1); }
.galeria-flecha{ position:absolute; top:50%; transform:translateY(-50%); }
.galeria-ant{ left:12px; } .galeria-sig{ right:12px; }
@media (hover:none){ .galeria-flecha{ display:none; } }
.galeria-puntos{ position:absolute; bottom:18px; left:50%; display:flex; gap:6px; transform:translateX(-50%); }
.galeria-puntos span{ width:7px; height:7px; border-radius:var(--radio-pill); background:rgba(43,34,51,.28); transition:width var(--t-media) var(--curva),background-color var(--t-media) ease; }
.galeria-puntos span.activo{ width:20px; background:var(--tinta); }
.galeria-miniaturas{ display:flex; gap:10px; overflow-x:auto; scrollbar-width:none; }
.galeria-mini{ flex:none; width:76px; height:76px; overflow:hidden; border:2px solid transparent; border-radius:14px; background:var(--crema-2); opacity:.75; transition:opacity var(--t-rapida) ease,border-color var(--t-rapida) ease; }
.galeria-mini[aria-current="true"]{ border-color:var(--tinta); opacity:1; }
.galeria-mini img{ width:100%; height:100%; object-fit:cover; }

.producto-info{ display:grid; grid-template-columns:minmax(0,1fr); gap:20px; align-content:start; min-width:0; }
.pi-acciones .btn,.hero-acciones .btn,.visitanos-acciones .btn,.confirmacion-acciones .btn{ white-space:normal; line-height:1.2; padding-block:8px; }
.pi-marca{ font:800 12px/1.3 var(--fuente-texto); letter-spacing:.14em; text-transform:uppercase; color:var(--fucsia-oscuro); }
.pi-nombre{ margin-top:6px; font:600 clamp(28px,1.5vw + 21px,40px)/1.1 var(--fuente-titulo); letter-spacing:-.02em; overflow-wrap:anywhere; }
.pi-precio{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; }
.pi-precio .precio-l{ font-size:32px; }
.pi-precio .precio-consultar{ font-size:18px; }
.pi-precio-nota{ font-size:14px; font-weight:600; color:var(--tinta-2); }
.pi-bloque{ display:grid; gap:12px; padding-top:20px; border-top:1px solid var(--borde); }
.pi-tallas-cab{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:6px 12px; }
.pi-etiqueta{ font-weight:800; font-size:15px; }
.pi-etiqueta span{ font-weight:600; color:var(--tinta-2); }
.pi-chips{ gap:10px; }
.chip-talla-precio{ flex-direction:column; gap:1px; min-height:58px; padding:6px 14px; line-height:1.1; }
.chip-talla-sub{ font-size:12px; font-weight:700; opacity:.78; text-decoration:none; }
.pi-stock{ display:flex; flex-wrap:nowrap; align-items:flex-start; gap:8px; min-height:24px; font-size:14px; font-weight:700; line-height:1.45; color:var(--tinta-2); }
.pi-stock > .icono{ flex:none; margin-top:1px; }
.pi-stock > .etiqueta{ flex:none; }
.pi-stock:empty{ display:none; }
.pi-stock .icono-check-circulo{ color:var(--ok); }
.pi-stock .icono-bolsa{ color:var(--fucsia-profundo); }
.pi-cantidad{ display:flex; align-items:center; gap:16px; }
.pi-cantidad[hidden]{ display:none !important; }
.pi-acciones{ display:grid; gap:12px; }
.pi-botones{ display:grid; gap:10px; }
@media (min-width:480px){ .pi-botones{ grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); } }
.pi-nota{ font-size:14px; color:var(--tinta-2); }
.pi-extra{ display:flex; flex-wrap:wrap; gap:0 24px; }
.pi-enlace{ display:inline-flex; align-items:center; gap:8px; min-height:44px; color:var(--tinta); font:800 15px/1.2 var(--fuente-texto); text-decoration:underline; text-decoration-color:var(--borde-fuerte); text-decoration-thickness:1.5px; text-underline-offset:5px; }
.pi-enlace:hover{ text-decoration-color:var(--tinta); }
.pi-enlace .icono-whatsapp{ color:#16924F; }
.pi-ver-carrito{ justify-self:start; }
ul.pi-beneficios{ display:grid; gap:12px; margin:0; padding:16px 18px; border:1px solid var(--borde); border-radius:var(--radio); background:#fff; list-style:none; }
.pi-beneficios li{ display:flex; align-items:flex-start; gap:12px; font-size:14.5px; line-height:1.45; color:var(--tinta-2); }
.pi-beneficios .icono{ margin-top:1px; color:var(--fucsia-profundo); }
.pi-beneficios b{ color:var(--tinta); }
.pi-acordeones{ border-top:1px solid var(--borde); }
.pi-dato{ font-size:14.5px; }
.relacionados{ margin-top:clamp(40px,6vw,88px); background:#fff; }

/* Barra fija de compra (móvil) */
.barra-compra{
  position:fixed; left:0; right:0; bottom:0; z-index:var(--z-flotante); display:flex; align-items:center; gap:12px;
  padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); border-top:1px solid var(--borde);
  background:rgba(255,255,255,.97); box-shadow:0 -10px 28px -16px rgba(43,34,51,.35); animation:barra-sube .25s var(--curva) both;
}
@keyframes barra-sube{ from{ transform:translateY(100%); } to{ transform:none; } }
.barra-compra-datos{ flex:1; min-width:0; }
.barra-compra-nombre{ font-weight:700; font-size:14px; }
.barra-compra-precio .precio{ font-size:17px; }
.barra-compra-precio .precio-antes{ font-size:13px; }
.barra-compra .btn{ --alto-btn:48px; }
@media (min-width:900px){ .barra-compra{ display:none !important; } }

/* Visor a pantalla completa */
.capa-modal:has(.visor) .capa-fondo{ background:rgba(22,17,26,.97); }
.modal.visor{ background:#16111A; color:#fff; }
.visor .panel-cabecera{ z-index:3; }
.visor .btn-cerrar{ width:48px; height:48px; color:#fff; background:rgba(255,255,255,.14); }
.visor .btn-cerrar:hover{ background:rgba(255,255,255,.24) !important; color:#fff; }
.visor .panel-cuerpo{ position:relative; display:flex; padding:0; overflow:hidden; }
.visor-pista{ display:flex; width:100%; height:100%; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }
.visor-pista::-webkit-scrollbar{ display:none; }
.visor-slide{ display:grid; place-items:center; flex:0 0 100%; height:100%; margin:0; padding:64px 12px; scroll-snap-align:start; }
.visor-slide img{ width:auto; height:auto; max-width:100%; max-height:calc(100vh - 140px); max-height:calc(100dvh - 140px); border-radius:10px; object-fit:contain; }
.visor-flecha{ position:absolute; top:50%; width:52px; height:52px; transform:translateY(-50%); color:#fff; background:rgba(255,255,255,.14); }
.visor-flecha:hover{ background:rgba(255,255,255,.26) !important; }
.visor-ant{ left:16px; } .visor-sig{ right:16px; }
.visor-contador{ position:absolute; left:50%; bottom:calc(18px + env(safe-area-inset-bottom)); padding:6px 14px; border-radius:var(--radio-pill); background:rgba(255,255,255,.14); color:#fff; font-weight:700; font-size:14px; transform:translateX(-50%); }
.visor-contador:empty{ display:none; }

/* ---------------------------------------------------------------------
   9. Selector rápido de talla
   --------------------------------------------------------------------- */
.selector-rapido{ display:grid; gap:14px; }
.selector-producto{ display:flex; align-items:center; gap:14px; padding:12px; border-radius:var(--radio); background:var(--crema); }
.selector-foto{ flex:none; width:64px; aspect-ratio:4 / 5; overflow:hidden; border-radius:12px; background:var(--crema-2); }
.selector-foto img,.selector-foto .sin-foto{ width:100%; height:100%; object-fit:cover; }
.selector-datos{ display:grid; gap:2px; min-width:0; }
.selector-nombre{ font-weight:800; font-size:15px; line-height:1.3; }
.selector-precio .precio{ font-size:18px; }
.selector-etiqueta{ margin-top:4px; font-weight:800; font-size:15px; }
.selector-chips{ gap:10px; }
.selector-stock{ font-size:14px; font-weight:700; color:var(--tinta-2); }
.selector-stock:empty{ display:none; }
.selector-stock.es-ultima{ color:var(--naranja-oscuro); }
.capa-selector .panel-pie{ display:block; }
.selector-pie{ display:grid; gap:4px; }
.selector-detalle{ --alto-btn:44px; font-size:14px; }

/* ---------------------------------------------------------------------
   10. Carrito
   --------------------------------------------------------------------- */
.drawer-carrito .panel-cuerpo{ padding-top:4px; }
.drawer-carrito .panel-pie{ display:block; }
.titulo-cuenta{ color:var(--tinta-2); font-weight:500; }
.lineas{ margin:0; padding:0; list-style:none; }
.linea{ display:grid; grid-template-columns:76px minmax(0,1fr) auto; gap:14px; align-items:start; padding:16px 0; border-bottom:1px solid var(--borde); }
.linea:last-child{ border-bottom:0; }
.linea-foto{ display:grid; place-items:center; width:76px; aspect-ratio:4 / 5; overflow:hidden; border-radius:12px; background:var(--crema-2); color:var(--tinta-3); }
.linea-foto img{ width:100%; height:100%; object-fit:cover; }
.linea-datos{ display:grid; gap:3px; min-width:0; }
.linea-nombre{ display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; color:var(--tinta); font-weight:700; font-size:15px; line-height:1.3; text-decoration:none; }
.linea-nombre:hover{ text-decoration:underline; }
.linea-detalle{ font-size:13.5px; color:var(--tinta-2); }
.linea-detalle b{ color:var(--tinta); }
.linea-controles{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; margin-top:6px; }
.linea .stepper-btn{ width:38px; height:38px; }
.linea .stepper-valor{ display:inline-block; width:28px; }
.linea-quitar{ display:inline-flex; align-items:center; gap:6px; min-height:40px; padding:0 8px; border-radius:10px; color:var(--tinta-2); font-weight:700; font-size:13.5px; }
.linea-quitar:hover{ background:var(--error-fondo); color:var(--error-oscuro); }
.linea-total{ font:600 16px/1.3 var(--fuente-titulo); white-space:nowrap; font-variant-numeric:tabular-nums; }
.linea-aviso{ font-size:12.5px; font-weight:700; color:var(--naranja-oscuro); }
.carrito-pie{ display:grid; gap:12px; }
.carrito-seguir{ --alto-btn:44px; }
.resumen-fila{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; font-size:15px; }
.resumen-subtotal{ font-weight:800; font-size:16px; }
.resumen-subtotal .precio{ font-size:22px; }
.resumen-nota{ display:flex; gap:8px; font-size:13.5px; line-height:1.45; color:var(--tinta-2); }
.resumen-nota .icono{ flex:none; margin-top:1px; color:var(--fucsia-profundo); }
.envio-gratis p{ display:flex; align-items:center; gap:6px; font-size:14px; }
.envio-gratis .icono{ color:var(--ok); }
.envio-gratis-barra{ height:6px; margin-top:8px; overflow:hidden; border-radius:var(--radio-pill); background:var(--crema-2); }
.envio-gratis-barra span{ display:block; height:100%; border-radius:inherit; background:var(--arcoiris); }

.carrito-pagina{ display:grid; gap:24px; align-items:start; }
@media (min-width:900px){ .carrito-pagina{ grid-template-columns:minmax(0,1fr) 380px; gap:32px; } }
.carrito-pagina-vacia{ display:block; }
.carrito-lista{ padding:4px 20px; }
@media (min-width:768px){ .carrito-lista{ padding:8px 28px; } }
.carrito-lista-cab{ padding:16px 0 4px; font-weight:800; font-size:14px; color:var(--tinta-2); }
.resumen{ display:grid; gap:14px; }
@media (min-width:900px){ .carrito-pagina .resumen{ position:sticky; top:var(--top-pegajoso); } }

/* ---------------------------------------------------------------------
   11. Checkout
   --------------------------------------------------------------------- */
.checkout-intro{ display:flex; align-items:flex-start; gap:10px; max-width:760px; margin:-8px 0 24px; padding:12px 16px; border-radius:var(--radio); background:var(--ok-fondo); color:var(--ok-oscuro); font-weight:700; font-size:14.5px; line-height:1.45; }
.checkout-intro .icono{ flex:none; margin-top:1px; }
.checkout-aviso{ margin-bottom:20px; max-width:760px; }
.checkout-aviso ul{ margin-top:4px; }
.checkout-rejilla{ display:grid; gap:20px; align-items:start; }
@media (min-width:960px){ .checkout-rejilla{ grid-template-columns:minmax(0,1fr) 400px; gap:32px; } }
.checkout-form{ display:grid; gap:16px; min-width:0; }
.checkout-paso{ display:grid; gap:16px; }
.checkout-paso-titulo{ display:flex; align-items:center; gap:12px; font:600 20px/1.2 var(--fuente-titulo); }
.paso-num{ flex:none; width:30px; height:30px; border-radius:50%; background:var(--rosa-nube); color:var(--fucsia-oscuro); font:700 15px/30px var(--fuente-titulo); text-align:center; }
.opciones{ display:grid; gap:10px; min-width:0; margin:0; padding:0; border:0; }
@media (min-width:600px){ .opciones{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.opcion-titulo .icono{ color:var(--fucsia-profundo); }
.opciones + .campo-error{ margin-top:-8px; }
.checkout-direccion{ margin-top:2px; }
.checkout-direccion .textarea,.checkout-paso .textarea{ min-height:88px; }
@media (min-width:960px){ .checkout-resumen{ position:sticky; top:var(--top-pegajoso); } }
.resumen-cab{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.resumen-editar{ min-height:40px; padding:0 4px; font-size:14px; }
ul.resumen-lineas{ display:grid; gap:16px; max-height:340px; margin:0; padding:10px 10px 4px 2px; overflow:auto; list-style:none; }
.resumen-linea{ display:grid; grid-template-columns:56px minmax(0,1fr) auto; gap:12px; align-items:center; }
.resumen-foto{ position:relative; width:56px; aspect-ratio:4 / 5; border-radius:10px; background:var(--crema-2); }
.resumen-foto img{ width:100%; height:100%; border-radius:10px; object-fit:cover; }
.resumen-cant{ position:absolute; top:-7px; right:-7px; min-width:21px; height:21px; padding:0 5px; border-radius:var(--radio-pill); background:var(--tinta); color:#fff; font:800 11px/21px var(--fuente-texto); text-align:center; box-shadow:0 0 0 2px #fff; }
.resumen-nombre{ display:grid; gap:2px; min-width:0; font-weight:700; font-size:14px; line-height:1.3; }
.resumen-nombre small{ font-weight:600; font-size:12.5px; color:var(--tinta-2); }
.resumen-precio{ font:600 15px/1.2 var(--fuente-titulo); white-space:nowrap; font-variant-numeric:tabular-nums; }
.resumen-totales{ display:grid; gap:10px; margin:0; padding-top:14px; border-top:1px solid var(--borde); }
.resumen-totales dt{ color:var(--tinta-2); }
.resumen-totales dd{ margin:0; font-weight:700; text-align:right; }
.resumen-total{ align-items:center; padding-top:12px; border-top:1px dashed var(--borde-fuerte); }
.resumen-total dt{ color:var(--tinta); font:600 18px/1.2 var(--fuente-titulo); }
.resumen-total dt small{ font:600 12.5px/1 var(--fuente-texto); color:var(--tinta-2); }
.resumen-total dd{ font:600 26px/1.1 var(--fuente-titulo); font-variant-numeric:tabular-nums; }
.checkout-enviar{ --alto-btn:60px; margin-top:4px; font-size:17px; white-space:normal; }
/* Aviso del servidor que pide escribir por WhatsApp (freno anti-abuso): el botón va dentro del aviso */
.aviso-cuerpo{ display:grid; gap:12px; justify-items:start; min-width:0; }
.resumen-pie{ font-size:13px; line-height:1.5; color:var(--tinta-2); text-align:center; }

/* ---------------------------------------------------------------------
   12. Confirmación, favoritos, 404
   --------------------------------------------------------------------- */
.confirmacion{ position:relative; display:grid; justify-items:center; gap:16px; margin-top:28px; padding:56px 20px 32px; overflow:hidden; text-align:center; }
@media (min-width:768px){ .confirmacion{ padding:64px 56px 44px; } }
.confirmacion-confeti{ position:absolute; top:10px; left:50%; transform:translateX(-50%); pointer-events:none; }
.confirmacion-icono{ display:grid; place-items:center; width:84px; height:84px; border-radius:50%; background:var(--ok); color:#fff; box-shadow:0 0 0 10px var(--ok-fondo); animation:rebote .6s var(--curva) .1s both; }
.confirmacion-icono-info{ background:var(--rosa-nube); color:var(--fucsia-profundo); box-shadow:none; }
.confirmacion-titulo{ max-width:22ch; }
.confirmacion-sub{ max-width:44ch; }
.confirmacion-aviso,.confirmacion-demo{ max-width:520px; text-align:left; }
.confirmacion-demo{ font-size:14px; }
.resumen-promo{ padding:10px 12px; border-radius:12px; background:var(--rosa-nube); color:var(--tinta); }
.resumen-promo b{ color:var(--fucsia-oscuro); }
.confirmacion-wa{ --alto-btn:62px; width:100%; max-width:440px; font-size:18px; line-height:1.2; white-space:normal; text-wrap:balance; }
/* «Abrir WhatsApp con mi pedido» en UNA línea en teléfonos (texto ≈13.8 em + ícono): menos relleno y,
   solo si hace falta, 17 o 16 px (nunca menos). Más angosto que 359 px pasa a 2 líneas parejas y centradas. */
@media (max-width:459.98px){ .confirmacion-wa{ padding-inline:14px; } }
@media (max-width:387.98px){ .confirmacion-wa{ font-size:17px; } }
@media (max-width:373.98px){ .confirmacion-wa{ font-size:16px; } }
@media (max-width:358.98px){ .confirmacion-wa{ font-size:18px; padding-inline:22px; } }
ol.confirmacion-pasos{ display:grid; gap:10px; width:100%; max-width:520px; margin:8px 0 0; padding:0; text-align:left; list-style:none; }
.confirmacion-pasos li{ display:flex; align-items:flex-start; gap:14px; padding:14px 16px; border-radius:var(--radio); background:var(--crema); font-size:15px; line-height:1.5; }
.cp-num{ flex:none; width:28px; height:28px; border-radius:50%; background:#fff; color:var(--fucsia-oscuro); font:700 14px/28px var(--fuente-titulo); text-align:center; box-shadow:var(--sombra-1); }
.confirmacion-deposito{ display:grid; gap:8px; width:100%; max-width:520px; padding:18px 20px; border:1.5px dashed var(--borde-fuerte); border-radius:var(--radio); text-align:left; }
.confirmacion-deposito h2{ display:flex; align-items:center; gap:8px; }
.confirmacion-deposito h2 .icono{ color:var(--fucsia-profundo); }
.deposito-texto{ font-weight:700; white-space:pre-line; overflow-wrap:anywhere; }
.confirmacion-resumen{ display:grid; gap:12px; width:100%; max-width:520px; margin-top:8px; text-align:left; }
.confirmacion-acciones{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:8px; }
.vista-404,.vista-favoritos,.vista-carrito,.vista-checkout,.vista-pedido{ min-height:50vh; }
.vista-404 .vacio{ padding-top:72px; }