/* ============================================================
   public/estilos.css

   Salió del index.html, que había llegado a 4.400 líneas con el CSS y el JS
   adentro. Eso ya había causado dos errores reales: una clase repetida tres
   veces con significados distintos, y una regla @media que pisaba a otra 500
   líneas más abajo.

   Los tres archivos se sirven con control de versión: metas.js les agrega
   ?v=<hash> calculado sobre su contenido, así que un cambio se ve enseguida
   y, mientras no cambien, el navegador no los vuelve a pedir.
   ============================================================ */

/* ============================================================
   TRONA — tokens
   Paleta anclada en el producto (madera) + estética Childy
   ============================================================ */
:root{
  /* Paleta del logo de Ojocha: azul galera, rojo, naranja bigote, negro */
  --rosa:         #9FCFE4;   /* celeste claro, el pastel decorativo */
  --rosa-osc:     #6FB4D2;
  /* Azul lo bastante profundo como para llevar texto blanco encima: da
     5.3:1. Se usa en los chips de variante seleccionada. */
  --rosa-fuerte:  #02739D;
  --celeste:      #A9D2E8;
  --amarillo:     #F5C274;
  --verde:        #F2B173;   /* naranja pastel */
  --verde-osc:    #02739D;   /* el azul del logo: botón principal */
  --lila:         #F2B173;

  --azul:         #02739D;
  --naranja:      #EC7901;
  --rojo:         #DB0213;

  --blanco:       #FFFFFF;
  --gris:         #F4F7F9;   /* fondo de bloques alternos */
  --gris-foto:    #F0F2F4;   /* fondo de las fotos de producto */
  --tinta:        #241F1F;   /* el negro del logo: titulares */
  --tinta-suave:  #6E7681;
  --linea:        #E6E9EC;

  --pie-fondo:    #F4F7F9;
  --pie-texto:    #241F1F;
  --pie-suave:    #5B6472;

  --r-sm: 10px; --r-md: 16px; --r-lg: 22px; --r-pill: 999px;
  --sombra: 0 6px 24px rgba(36,31,31,.06);
  --sombra-alta: 0 16px 40px rgba(36,31,31,.11);
  --ancho: 1280px;
  --header-h: 76px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--blanco); color:var(--tinta);
  font-family:'Nunito',system-ui,sans-serif; font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.display{font-family:'Fredoka',system-ui,sans-serif; font-weight:600; line-height:1.12; letter-spacing:-.01em; margin:0}
h1{font-size:clamp(2.2rem,5vw,3.8rem)}
h2{font-size:clamp(1.6rem,3.2vw,2.5rem)}
h3{font-size:1.15rem}
p{margin:0 0 1rem}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
button{font:inherit; cursor:pointer; border:0; background:none; color:inherit}
input,select,textarea{font:inherit; color:inherit}
:focus-visible{outline:3px solid var(--rosa); outline-offset:3px; border-radius:6px}
.wrap{max-width:var(--ancho); margin:0 auto; padding:0 32px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.85rem 1.9rem;border-radius:var(--r-pill);font-family:'Fredoka';font-weight:500;
  background:var(--verde-osc);color:#fff;transition:transform .18s,background .18s,box-shadow .18s}
.btn:hover{background:#6C8A68;transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--ghost{background:transparent;color:var(--tinta);border:1.5px solid var(--verde-osc);box-shadow:none}
.btn--ghost:hover{background:var(--verde-osc);color:#fff}
.btn--tinta{background:var(--rosa);color:var(--tinta);box-shadow:none}
.btn--tinta:hover{background:var(--rosa-osc)}
.btn--mp{background:var(--mp);box-shadow:0 6px 16px rgba(0,158,227,.3)}
.btn--mp:hover{background:#0089c7}
.btn--block{width:100%}
.btn--sm{padding:.55rem 1.15rem;font-size:.9rem}
/* Mismo rosa y mismo texto blanco que la franja del menú */
/* El botón de WhatsApp va en el verde de WhatsApp: es una marca que la
   gente reconoce, y pintarlo del color de Ojocha lo vuelve un botón más. */
.btn--wa{background:#25D366;color:#fff;font-size:.94rem;padding:.8rem 1.2rem;
  white-space:normal;line-height:1.3;text-align:center;justify-content:center}
.btn--wa:hover{background:#1FBA57;color:#fff}
.btn[disabled]{opacity:.45;pointer-events:none}

/* ---------- ondas (firma visual) ---------- */
.onda{display:block;width:100%;height:38px;line-height:0}
.onda svg{display:block;width:100%;height:100%}

/* ---------- garabatos ---------- */
.doodle{position:absolute;pointer-events:none;user-select:none;opacity:.9}
@media (prefers-reduced-motion:no-preference){
  .flota{animation:flota 6s ease-in-out infinite}
  .flota-2{animation:flota 8s ease-in-out infinite reverse}
}
@keyframes flota{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-12px) rotate(6deg)}}

/* ============================ HEADER ============================ */
header.head{position:sticky;top:0;z-index:200;background:#fff;isolation:isolate;
  border-bottom:1px solid var(--linea)}
.head-in{max-width:var(--ancho);margin:0 auto;padding:0 32px;height:var(--header-h);
  display:flex;align-items:center;gap:1.4rem}
/* flex:none es necesario: el buscador tiene flex:1 y sin esto el logo se
   comprime hasta recortarse cuando la ventana es angosta. */
.logo{display:flex;align-items:center;flex:none}
.logo img{height:52px;width:auto;max-width:none;display:block}

/* ---------- buscador ----------
   Antes era una píldora blanca con borde grueso flotando en el medio del
   encabezado, más alta que el logo y con el marcador en mayúsculas: pesaba
   más que la marca. Ahora es un campo relleno, sin borde, del alto de los
   botones que tiene al lado. Se pinta solo cuando lo tocan. */
.buscar-caja{flex:1;max-width:400px;display:flex;align-items:center;gap:.7rem;
  border:1.5px solid transparent;border-radius:var(--r-pill);
  padding:.6rem 1.1rem;background:var(--gris);
  transition:border-color .18s,background .18s}
.buscar-caja:hover{background:#EFF1F3}
.buscar-caja:focus-within{background:#fff;border-color:var(--azul);
  box-shadow:0 0 0 3px rgba(2,115,157,.12)}
.buscar-caja svg{flex-shrink:0;color:var(--tinta-suave)}
.buscar-caja input{flex:1;min-width:0;border:0;background:transparent;font-size:.95rem}
.buscar-caja input:focus{outline:none}
.buscar-caja input::placeholder{color:var(--tinta-suave);font-size:.95rem;
  text-transform:none;letter-spacing:0}

/* El bloque de la derecha se separa del buscador con un margen automático,
   pero sin irse al borde: queda como un grupo, no como tres cosas sueltas. */
.head-acc{display:flex;align-items:center;gap:.4rem;margin-left:auto}
.cuenta{display:flex;align-items:center;gap:.5rem;font-weight:600;font-size:.94rem;
  white-space:nowrap;padding:.5rem .8rem;border-radius:var(--r-pill);
  transition:background .18s,color .18s}
.cuenta:hover{background:var(--gris);color:var(--azul)}
.cuenta svg{flex-shrink:0}
.icon-btn{width:40px;height:40px;display:grid;place-items:center;position:relative;
  border-radius:50%;transition:background .18s,color .18s}
.icon-btn:hover{background:var(--gris);color:var(--azul)}
.pastilla{position:absolute;top:-4px;right:-6px;min-width:19px;height:19px;padding:0 5px;border-radius:var(--r-pill);
  background:#F0813C;color:#fff;font-size:.7rem;font-weight:700;display:grid;place-items:center}

/* franja rosa del menú */
.nav-rosa{background:var(--rosa)}
.nav-rosa .wrap{display:flex;justify-content:center}
.nav{display:flex;gap:3.2rem;align-items:center;justify-content:center}
.nav a{font-family:'Fredoka';font-weight:500;font-size:1.05rem;padding:1.15rem 0;position:relative;color:#fff}
.nav a::after{content:'';position:absolute;left:0;right:100%;bottom:.75rem;height:2px;background:#fff;transition:right .25s}
.nav a:hover::after,.nav a.on::after{right:0}
.burger{display:none}

@media(max-width:1100px){.buscar-caja{max-width:none}.head-acc{gap:1rem}.cuenta span{display:none}}
@media(max-width:960px){
  .nav-rosa{display:none}
  .burger{display:grid}
  .head-in{gap:.8rem;height:76px}
  .logo img{height:46px}
  .buscar-caja{display:none}
}

/* ---------- El encabezado en el celular ----------
   Antes el logo medía 42px de alto compitiendo con tres íconos de 40, todo
   apretado en 390px de ancho, y el buscador desaparecía sin dejar nada en su
   lugar: para buscar algo había que ir a la tienda y encontrar el filtro. */
@media(max-width:560px){
  .head-in{height:64px;gap:.35rem;padding:0 14px}

  /* El logo manda: es la marca. Los íconos se achican y se juntan. */
  .logo img{height:40px}
  .head-acc{gap:.1rem}
  .icon-btn{width:38px;height:38px}
  .icon-btn svg{width:21px;height:21px}
  .burger svg{width:23px;height:23px}

  /* La lupa vuelve, en su lugar: el buscador es la forma más rápida de
     llegar a un producto y no puede desaparecer del todo. */
  .buscar-movil{display:grid}

  /* El contador no puede ser casi tan grande como el ícono */
  .badge-n{font-size:.62rem;min-width:15px;height:15px;top:1px;right:1px;
    display:grid;place-items:center;padding:0}

  /* La cuenta pasa al menú, donde tiene lugar para decir el nombre */
  #btnCuenta{display:none}
}
.buscar-movil{display:none}

/* El pie del menú: la cuenta y el WhatsApp, separados de las páginas */
.menu-mob-pie{margin-top:1.6rem;padding-top:1.4rem;border-top:1px solid var(--linea);
  display:flex;flex-direction:column;gap:.9rem}
.menu-mob-cuenta{display:flex !important;align-items:center;gap:.6rem;
  font-family:'Fredoka';font-size:1.05rem;padding:0 !important;border:0 !important}
.menu-mob-wa{display:inline-flex !important;align-items:center;justify-content:center;
  background:#4CC96A;color:#fff;border-radius:var(--r-pill);padding:.8rem 1.2rem !important;
  font-family:'Fredoka';font-size:1rem;border:0 !important}
/* menú móvil */
.menu-mob{position:fixed;inset:76px 0 0;background:#fff;z-index:55;padding:1.5rem 24px;
  transform:translateX(-100%);transition:transform .3s;overflow-y:auto}
.menu-mob.abierto{transform:none}
.menu-mob a{display:block;font-family:'Fredoka';font-size:1.3rem;padding:.9rem 0;border-bottom:1px solid var(--linea)}

/* ============================ HERO ============================ */
/* El banner principal es una imagen: una para computadora y otra para
   celular. Se reserva la proporción exacta de cada una para que la página
   no salte mientras carga. El texto es opcional y va encima. */
.hero{position:relative;overflow:hidden;background:var(--gris)}
.hero-slide{display:none;position:relative}
.hero-slide.on{display:block;animation:aparece .5s ease both}
@keyframes aparece{from{opacity:0}to{opacity:1}}

.hero-img{position:relative;width:100%;aspect-ratio:1920/700;background:var(--gris)}
.hero-img img{width:100%;height:100%;object-fit:cover;display:block}

/* Texto encima del banner. Solo se dibuja si hay algo escrito. */
.hero-txt{position:absolute;inset:0;z-index:2;display:flex;align-items:center}
.hero-txt .wrap{width:100%}
.hero-txt .caja{max-width:560px}
.hero-txt.tiene-fondo::before{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.75) 42%, rgba(255,255,255,0) 72%)}
.hero-txt .caja{position:relative;z-index:2}
.hero-txt.der{justify-content:flex-end}
.hero-txt.der.tiene-fondo::before{background:linear-gradient(270deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.75) 42%, rgba(255,255,255,0) 72%)}
.hero-txt.centro{justify-content:center;text-align:center}
.hero-txt.centro .caja{margin:0 auto}
.hero-txt.centro.tiene-fondo::before{background:rgba(255,255,255,.72)}

/* Banner sin imagen: no dejamos un hueco gris, mostramos solo el texto */
.hero-solo-texto{padding:5rem 0}
.hero-solo-texto .hero-txt{position:static}

.hero h1{margin-bottom:1rem}
.hero p.lead{font-size:1.08rem;color:var(--tinta-suave);max-width:46ch;margin-bottom:1.8rem}

.hero-dots{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);display:flex;gap:.5rem;z-index:3}
.hero-dots button{width:10px;height:10px;border-radius:50%;background:rgba(31,37,48,.28)}
.hero-dots button.on{background:var(--tinta);width:26px;border-radius:var(--r-pill)}

@media(max-width:760px){
  /* En celular usamos la imagen vertical */
  .hero-img{aspect-ratio:1080/1350}
  .hero-txt{align-items:flex-end;justify-content:center;text-align:center;padding-bottom:2.4rem}
  .hero-txt .caja{max-width:none}
  .hero-txt.tiene-fondo::before,
  .hero-txt.der.tiene-fondo::before,
  .hero-txt.centro.tiene-fondo::before{
    background:linear-gradient(0deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.8) 38%, rgba(255,255,255,0) 68%)}
  .hero p.lead{margin-inline:auto;font-size:1rem}
}

/* ============================ SECCIONES ============================ */
/* 112px entre secciones dejaba pantallas enteras en blanco entre una y la
   siguiente. Con 76 las secciones siguen separadas y la página se recorre. */
.sec{padding:76px 0;position:relative}
.sec--crema{background:var(--blanco)}
.sec-head{text-align:center;margin-bottom:4rem;position:relative}
.sec-head h2{font-family:'Fredoka',sans-serif;font-weight:500;letter-spacing:-.01em;
  font-size:clamp(1.7rem,3vw,2.3rem);display:inline-block;position:relative;padding-bottom:.7rem}
/* Subrayado corto en rosa: el mismo gesto que el menú */
.sec-head h2::after{content:'';position:absolute;left:50%;transform:translateX(-50%);bottom:0;
  width:58px;height:4px;border-radius:2px;background:var(--rosa)}
.sec-head--izq{text-align:left;margin-bottom:3rem}
.sec-head--izq h2::after{left:0;transform:none}
.sec-head--izq p{margin-left:0}
.sec-head p{color:var(--tinta-suave);max-width:52ch;margin:1rem auto 0;font-size:1.05rem}

/* El aire de 112px arriba y abajo está pensado para una pantalla de
   computadora. En un celular son 224px de blanco entre una sección y la
   siguiente: más de un tercio de la pantalla vacío. */
@media(max-width:760px){
  .sec{padding:56px 0}
  /* En el celular 5.4rem arriba y abajo es casi media pantalla de banda
     rosa antes de llegar al contenido. */
  .pagina-head{padding:3rem 0 2.8rem}
  .pagina-head h1{max-width:14ch}
  .miga{margin-top:1rem}
  .regalo-bajada{margin:1.8rem auto 2rem}
  .sec-head{margin-bottom:2.2rem}
  .sec-head--izq{margin-bottom:1.8rem}
  .sec-head p{font-size:.98rem;margin-top:.7rem}
}
@media(max-width:480px){
  .sec{padding:52px 0}
  .sec-head{margin-bottom:1.8rem}
}

/* categorías: círculos en carrusel, como en trona.uy */
.cats-riel{position:relative;padding:0 62px}
.cats{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 3 * 1.6rem) / 4);gap:1.6rem;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding:.4rem 0 1rem;scrollbar-width:none;cursor:grab}
.cats::-webkit-scrollbar{display:none}
.cats.arrastrando{cursor:grabbing;scroll-behavior:auto;scroll-snap-type:none}
.cat{scroll-snap-align:center;text-align:center;transition:transform .25s}
.cat:hover{transform:translateY(-4px)}
.cat-img{width:236px;max-width:100%;aspect-ratio:1;border-radius:50%;overflow:hidden;
  background:var(--gris-foto);margin:0 auto}
.cat-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.cat:hover .cat-img img{transform:scale(1.06)}
.cat h3{font-family:'Fredoka',sans-serif;font-size:1.12rem;font-weight:500;color:var(--tinta);margin-top:1.5rem}
.cat span{display:block;font-size:.9rem;color:var(--tinta-suave);margin-top:.2rem}
.flecha{position:absolute;top:calc(118px - 24px);width:48px;height:48px;border-radius:50%;background:#fff;
  color:var(--tinta);display:grid;place-items:center;border:1px solid var(--linea);z-index:3;
  transition:background .2s,color .2s}
.flecha:hover{background:var(--tinta);color:#fff;border-color:var(--tinta)}
.flecha--izq{left:0}
.flecha--der{right:0}
@media(max-width:1100px){.cats{grid-auto-columns:calc((100% - 2 * 1.6rem) / 3)}}
@media(max-width:820px){.cats{grid-auto-columns:calc((100% - 1.6rem) / 2)}}
@media(max-width:640px){
  .cats-riel{padding:0}
  /* Se ve una tarjeta y el borde de la siguiente, para que se note que
     el carrusel corre. Antes entraban casi dos y quedaban las dos cortadas. */
  .cats{grid-auto-columns:78%;gap:1rem;padding-bottom:.4rem}
  .cat-img{width:100%;max-width:230px}
  .cat h3{margin-top:.9rem;font-size:1.05rem}
  .cat span{font-size:.85rem}
  .flecha{display:none}
}

/* grilla productos */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:2.6rem 2rem}

/* La vitrina del inicio usa un número FIJO de columnas, no auto-fill: con
   auto-fill el navegador mete tres o cinco según el ancho, y la última fila
   queda coja. Con cuatro fijas y ocho productos, siempre cierra.

   Las tarjetas son más grandes que en la tienda: acá son la vidriera, no un
   listado para recorrer. */
.grid--vitrina{grid-template-columns:repeat(4,1fr);gap:2.2rem 1.8rem}
.grid--vitrina .card-fig{aspect-ratio:1/1.12}
.grid--vitrina .card h3{font-size:1.08rem}
.grid--vitrina .precio{font-size:1.15rem}
@media(max-width:1100px){ .grid--vitrina{grid-template-columns:repeat(2,1fr)} }
.card{background:transparent;position:relative;display:flex;flex-direction:column}
.card-fig{position:relative;aspect-ratio:1;background:#fff;overflow:hidden}
.card-fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .45s,transform .6s}
/* La segunda foto va DEBAJO de la primera, no encima.
   Al ir después en el HTML quedaba arriba y, aunque invisible, se comía el
   mouse: el navegador nunca detectaba que el puntero estaba sobre la tarjeta
   y el efecto no arrancaba nunca. Con la primera arriba y la segunda atrás,
   basta con desvanecer la de adelante. */
.card-fig img.a{z-index:1}
.card-fig img.b{z-index:0}
.card:hover .card-fig img.a{opacity:0}
.card:hover .card-fig img.a:only-child{opacity:1;transform:scale(1.05)}

/* En el celular no existe "pasar el mouse": la segunda foto se muestra al
   tocar la tarjeta, antes de que el toque abra el producto. */
.card-fig.mostrar-b img.a{opacity:0}

/* Los puntitos: solo en pantallas sin mouse */
.fotos-puntos{display:none;position:absolute;bottom:10px;left:50%;transform:translateX(-50%);
  gap:.4rem;z-index:3}
.fotos-puntos button{width:7px;height:7px;padding:0;border:0;border-radius:50%;
  background:rgba(31,37,48,.25);transition:background .2s,width .2s}
.fotos-puntos button.on{background:var(--tinta);width:18px;border-radius:99px}
@media(hover:none){ .fotos-puntos{display:flex} }

/* Acciones flotando sobre la foto, como en trona.uy */
.acciones{position:absolute;top:14px;right:14px;display:flex;flex-direction:column;gap:.55rem;z-index:2;
  opacity:0;transform:translateX(10px);transition:opacity .25s,transform .25s}
.card:hover .acciones{opacity:1;transform:none}
.acciones button, .acciones a{width:42px;height:42px;border-radius:50%;background:#fff;color:var(--tinta);
  display:grid;place-items:center;box-shadow:0 3px 10px rgba(31,37,48,.12);transition:background .2s,color .2s}
.acciones button:hover, .acciones a:hover{background:var(--tinta);color:#fff}
.acciones .on{color:var(--rosa-osc)}
/* En pantallas tactiles no hay hover: se muestran siempre */
@media (hover:none){.acciones{opacity:1;transform:none}}

.card-body{padding:1.3rem .1rem 0;display:flex;flex-direction:column;gap:.35rem;flex:1}
.card-cat{font-size:.92rem;color:var(--verde-osc);letter-spacing:0;text-transform:none;font-weight:400}
.card h3{font-family:'Nunito',sans-serif;font-size:1.02rem;font-weight:400;line-height:1.35;color:var(--tinta)}
.card .precio{font-family:'Nunito',sans-serif;font-weight:700;font-size:1.12rem;margin-top:.4rem;color:var(--tinta)}
.card .agotado{font-size:.86rem;color:#B0B6BE;margin-top:.3rem}
/* ---------- Para regalar, por edad ---------- */
.edades{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem}
.edad{display:flex;flex-direction:column;gap:.15rem;background:var(--tono);border-radius:22px;
  padding:1.6rem 1.4rem 1.4rem;color:var(--tinta);transition:transform .2s,box-shadow .2s}
.edad:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(31,37,48,.1)}
.edad-num{font-family:'Fredoka';font-weight:600;font-size:2.4rem;line-height:1}
.edad-txt{font-family:'Fredoka';font-weight:500;font-size:1.02rem;margin-top:.3rem}
.edad-sub{font-size:.88rem;color:var(--tinta-suave)}
.edad-cuenta{margin-top:.9rem;font-size:.82rem;font-weight:700;color:var(--tinta-suave)}

/* ---------- Fila deslizable de una categoría ---------- */
.sec--rail{padding-bottom:1.5rem}

.rail-cab{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;
  flex-wrap:wrap;margin-bottom:1.8rem}
.rail-eyebrow{display:inline-block;background:var(--rosa);color:#fff;font-size:.76rem;
  font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:.28rem .8rem;border-radius:999px;margin-bottom:.7rem}
.rail-titulo h2{font-family:'Fredoka';font-weight:500;font-size:2rem;margin:0;line-height:1.1}

/* El marco reparte el ancho: tres tarjetas y el panel de la derecha.
   Nada se sale del contenedor ni queda cortado contra el borde. */
.rail-marco{display:flex;gap:1.5rem;align-items:stretch}
.rail{flex:1;min-width:0;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;scroll-behavior:smooth;cursor:grab}
.rail::-webkit-scrollbar{display:none}
.rail.arrastrando{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}

.rail-pista{display:flex;gap:1.5rem}
/* Exactamente tres a la vista: el ancho del riel menos los dos huecos, en
   tres partes. Sin decimales sueltos, así la tercera cierra justo. */
.rail-item{flex:0 0 calc((100% - 3rem) / 3);scroll-snap-align:start}
.rail-item .card{height:100%}
.rail-item .card-fig{aspect-ratio:1/1.12}

/* El panel del costado */
.rail-mas{flex:0 0 190px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:1.1rem;text-align:center;
  background:linear-gradient(160deg,#EAF4F9 0%,#F3E9FA 100%);
  border-radius:20px;padding:1.6rem 1.2rem}
.rail-mas-txt{font-family:'Fredoka';font-weight:500;font-size:1.05rem;line-height:1.3;
  color:var(--tinta)}
.rail-mas-link{font-size:.9rem;font-weight:700;color:var(--verde-osc);text-decoration:underline}

.rail-flechas{display:flex;gap:.5rem}
.rail-flecha{width:44px;height:44px;border-radius:50%;border:0;
  background:var(--blanco);color:var(--tinta);display:grid;place-items:center;cursor:pointer;
  box-shadow:0 3px 10px rgba(31,37,48,.1);
  transition:background .18s,transform .12s}
.rail-flecha:hover{background:var(--verde-osc);color:#fff}
.rail-flecha:active{transform:scale(.94)}

/* ---------- Reseñas ---------- */
.sec--resenas{background:linear-gradient(180deg,#FFF 0%,#F5F9FC 100%)}

/* Columnas tipo mural: las tarjetas se acomodan solas y quedan de alturas
   distintas, que es lo que le saca el aire de "bloque de texto ordenado". */
.resenas{columns:3;column-gap:1.3rem}
.resena{break-inside:avoid;margin:0 0 1.3rem;background:var(--fondo);border-radius:20px;
  padding:1.7rem 1.5rem 1.4rem;position:relative;
  /* Cada una apenas torcida, alternando el lado. Una sola inclinación se ve
     como un error; alternadas se leen como papelitos pegados. */
  transform:rotate(var(--giro,0deg));
  transition:transform .25s ease,box-shadow .25s ease}
.resena:nth-child(3n+1){--giro:-.7deg}
.resena:nth-child(3n+2){--giro:.5deg}
.resena:nth-child(3n){--giro:-.35deg}
.resena:hover{transform:rotate(0deg) translateY(-5px);box-shadow:0 14px 32px rgba(31,37,48,.1);z-index:2}

.resena::before{content:'\201C';position:absolute;top:.2rem;left:1.1rem;font-family:Georgia,serif;
  font-size:4rem;line-height:1;color:var(--firma);opacity:.22}
.resena blockquote{margin:0 0 1.3rem;font-size:1rem;line-height:1.6;position:relative;z-index:1}

.resena figcaption{display:flex;align-items:center;gap:.7rem}
/* La inicial en un círculo: le pone cara a la frase sin pedirle una foto a
   nadie, que además no tendríamos derecho a publicar. */
.resena-cara{width:38px;height:38px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;
  background:var(--firma);color:#fff;font-family:'Fredoka';font-weight:600;font-size:1.05rem}
.resena-datos{display:flex;flex-direction:column;min-width:0}
.resena-quien{font-family:'Fredoka';font-weight:500;font-size:.98rem;color:var(--firma)}
.resena-que{font-size:.84rem;color:var(--tinta-suave)}

/* Entran escalonadas al aparecer en pantalla */
@media(prefers-reduced-motion:no-preference){
  .resena{opacity:0;animation:subir .55s ease forwards;
    animation-delay:calc(var(--i,0) * .08s)}
  @keyframes subir{ from{opacity:0;transform:rotate(var(--giro,0deg)) translateY(18px)}
                    to{opacity:1;transform:rotate(var(--giro,0deg)) translateY(0)} }
}

@media(max-width:980px){ .resenas{columns:2} }

/* ---------- Tarjeta de regalo ---------- */
.regalo{max-width:840px;padding-bottom:4rem}
.regalo-bajada{text-align:center;color:var(--tinta-suave);max-width:520px;
  margin:2.6rem auto 2.6rem;line-height:1.65;font-size:1.02rem}

.regalo-paso{background:var(--blanco);border:1.5px solid var(--linea);border-radius:22px;
  padding:1.8rem 1.7rem;margin-bottom:1.1rem;transition:border-color .2s}
.regalo-paso:focus-within{border-color:var(--rosa)}
.regalo-paso h2{font-family:'Fredoka';font-weight:500;font-size:1.2rem;margin:0 0 1.2rem;
  display:flex;align-items:center;gap:.7rem}
.regalo-n{width:28px;height:28px;flex:0 0 auto;border-radius:50%;background:var(--rosa);color:#fff;
  display:grid;place-items:center;font-size:.9rem;font-weight:600}
.regalo-ayuda{font-size:.86rem;color:var(--tinta-suave);margin:.6rem 0 0}
.opc{font-weight:400;color:var(--tinta-suave);text-transform:none;letter-spacing:0}

/* Los montos: botones grandes, uno elegido a la vez */
.montos{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:.7rem}
.monto{padding:1.1rem .8rem;border-radius:16px;border:2px solid var(--linea);background:var(--blanco);
  font-family:'Fredoka';font-weight:500;font-size:1.15rem;color:var(--tinta);cursor:pointer;
  transition:border-color .18s,background .18s,transform .12s}
.monto:hover{border-color:var(--rosa);transform:translateY(-2px)}
.monto.on{border-color:var(--verde-osc);background:#E6F1E8}
.monto--libre{font-size:.95rem;color:var(--tinta-suave)}
.monto--libre.on{color:var(--tinta)}

.monto-libre{margin-top:1.1rem}
.monto-libre label{display:block;font-size:.86rem;color:var(--tinta-suave);margin-bottom:.4rem}
.monto-libre-caja{display:flex;align-items:center;gap:.4rem;border:2px solid var(--verde-osc);
  border-radius:14px;padding:.6rem 1rem;max-width:220px;background:var(--blanco)}
.monto-libre-caja span{font-family:'Fredoka';font-size:1.3rem;color:var(--tinta-suave)}
.monto-libre-caja input{border:0;outline:none;font-family:'Fredoka';font-size:1.4rem;width:100%;
  background:transparent;color:var(--tinta)}

/* La tarjeta que se va armando */
.regalo-previa{display:flex;justify-content:center;margin-top:2rem}
.tarjeta-regalo{width:min(380px,100%);aspect-ratio:1.58;border-radius:24px;padding:1.5rem 1.6rem;
  display:flex;flex-direction:column;justify-content:space-between;position:relative;
  overflow:hidden;isolation:isolate;color:#fff;
  background:linear-gradient(135deg,#02739D 0%,#EC7901 52%,#F5C274 100%);
  box-shadow:0 18px 40px rgba(140,90,140,.32);
  /* Apenas inclinada y levantada: se lee como un objeto, no como un recuadro */
  transform:rotate(-1.5deg);transition:transform .3s ease,box-shadow .3s ease}
.tarjeta-regalo:hover{transform:rotate(0deg) translateY(-4px);box-shadow:0 24px 50px rgba(140,90,140,.36)}

/* Formas de la marca, sueltas de fondo */
.tr-forma{position:absolute;z-index:-1;opacity:.28}
.tr-f1{width:130px;height:130px;border-radius:50%;border:14px solid #fff;
  right:-45px;top:-40px}
.tr-f2{width:52px;height:52px;border-radius:12px;background:#fff;
  right:22%;bottom:-18px;transform:rotate(18deg);opacity:.18}
.tr-f3{width:0;height:0;border-left:26px solid transparent;border-right:26px solid transparent;
  border-bottom:44px solid #fff;left:-14px;bottom:12px;opacity:.16}
/* Un brillo diagonal, como el de una tarjeta plástica */
.tr-brillo{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.28) 50%,transparent 62%)}

.tr-top{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}
.tr-logo{background:#fff;border-radius:12px;padding:.45rem .7rem;display:inline-flex;
  align-items:center;box-shadow:0 3px 10px rgba(0,0,0,.12);
  font-family:'Fredoka';font-weight:600;letter-spacing:.14em;font-size:.85rem;color:var(--tinta)}
.tr-logo img{height:26px;width:auto;display:block}
.tr-chip{background:rgba(255,255,255,.28);border:1px solid rgba(255,255,255,.45);
  border-radius:999px;padding:.22rem .7rem;font-size:.72rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase}

.tr-medio{margin-top:auto}
.tr-label{display:block;font-size:.78rem;opacity:.85;letter-spacing:.04em}
.tr-monto{font-family:'Fredoka';font-weight:600;font-size:2.9rem;line-height:1.05;
  text-shadow:0 2px 12px rgba(120,60,100,.25)}

.tr-bajo{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding-top:.9rem;border-top:1px solid rgba(255,255,255,.3)}
.tr-para{font-family:'Fredoka';font-weight:500;font-size:.98rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tr-pie{font-size:.76rem;opacity:.85;white-space:nowrap}

/* Las dos opciones de entrega */
.regalo-modo{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.modo{display:flex;align-items:center;gap:.8rem;text-align:left;padding:1rem 1.1rem;
  border:2px solid var(--linea);border-radius:16px;background:var(--blanco);cursor:pointer;
  transition:border-color .18s,background .18s}
.modo:hover{border-color:var(--rosa)}
.modo.on{border-color:var(--verde-osc);background:#E6F1E8}
.modo-ico{font-size:1.5rem;line-height:1}
.modo-txt{display:flex;flex-direction:column;min-width:0}
.modo-txt b{font-family:'Fredoka';font-weight:500;font-size:1rem;color:var(--tinta)}
.modo-txt small{font-size:.84rem;color:var(--tinta-suave)}

.regalo-cuando{margin-top:1.4rem;padding-top:1.3rem;border-top:1px solid var(--linea)}
.regalo-cuando-tit{display:block;font-size:.86rem;color:var(--tinta-suave);margin-bottom:.6rem}
.cuando-ops{display:flex;gap:.5rem;flex-wrap:wrap}
.cuando{padding:.5rem 1.1rem;border-radius:var(--r-pill);border:1.5px solid var(--linea);
  background:var(--blanco);font:inherit;font-size:.92rem;color:var(--tinta-suave);cursor:pointer;
  transition:border-color .18s,background .18s,color .18s}
.cuando:hover{border-color:var(--rosa)}
.cuando.on{border-color:var(--verde-osc);background:#E6F1E8;color:var(--tinta);font-weight:700}

.regalo-pagos{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.regalo-cierre{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  margin-top:1.6rem;padding-top:1.3rem;border-top:1px solid var(--linea)}
.regalo-total-txt{display:block;font-size:.84rem;color:var(--tinta-suave)}
.regalo-total{font-family:'Fredoka';font-weight:600;font-size:1.7rem}
.regalo-error{margin:.9rem 0 0;color:#B5665F;font-size:.92rem;display:none}
.regalo-error.on{display:block}

.regalo-saldo{background:var(--gris);border-radius:22px;padding:1.6rem 1.7rem;margin-top:1.8rem}
.regalo-saldo h3{font-family:'Fredoka';font-weight:500;font-size:1.05rem;margin:0 0 .3rem}
.regalo-saldo p{color:var(--tinta-suave);margin:0 0 1rem;font-size:.92rem}
.saldo-caja{display:flex;gap:.6rem;flex-wrap:wrap}
.saldo-caja input{flex:1;min-width:180px;border:1.5px solid var(--linea);border-radius:var(--r-pill);
  padding:.7rem 1.1rem;font:inherit;background:var(--blanco);letter-spacing:.05em}

.badge--nuevo{background:var(--verde)}

.badge{position:absolute;top:14px;left:14px;z-index:2;background:var(--rosa);color:#fff;font-family:'Nunito';
  font-size:.74rem;font-weight:700;padding:.32rem .85rem;border-radius:var(--r-pill);letter-spacing:.02em}
.badge--off{background:var(--tinta)}
.agotado-capa{position:absolute;inset:0;background:rgba(245,245,245,.78);display:grid;place-items:center;z-index:1}
.cinta-oferta{position:absolute;left:12px;top:12px;z-index:3;background:#E06C5C;color:#fff;
  font-family:'Fredoka',sans-serif;font-weight:600;font-size:.86rem;
  padding:.3rem .7rem;border-radius:var(--r-pill)}
.agotado-capa span{background:var(--tinta);color:#fff;padding:.4rem 1.1rem;border-radius:var(--r-pill);font-size:.84rem;font-weight:700}

/* beneficios: fila desalineada, cada tarjeta con su inclinación y su
   esquina distinta, para que no parezca una grilla de casillas */
.benes{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.4rem;padding:2.5rem 0 3.5rem}
.bene{position:relative;padding:2.4rem 1.6rem 2rem;text-align:center;overflow:hidden;
  transition:transform .3s cubic-bezier(.34,1.4,.64,1)}
.bene:nth-child(1){background:#EDF5FA;border-radius:38px 38px 38px 10px;transform:rotate(-2deg) translateY(14px)}
.bene:nth-child(2){background:#E8F3F9;border-radius:38px 10px 38px 38px;transform:rotate(1.5deg) translateY(-10px)}
.bene:nth-child(3){background:#FDF1E2;border-radius:10px 38px 38px 38px;transform:rotate(-1deg) translateY(18px)}
.bene:nth-child(4){background:#E9F3EA;border-radius:38px 38px 10px 38px;transform:rotate(2deg) translateY(-6px)}
.bene:hover{transform:rotate(0) translateY(-6px)}

/* Una figura translúcida asomando, distinta en cada tarjeta */
.bene::after{content:'';position:absolute;width:130px;height:130px;right:-44px;bottom:-48px;
  border-radius:50%;background:rgba(255,255,255,.5)}
.bene:nth-child(2)::after{border-radius:26px;transform:rotate(22deg)}
.bene:nth-child(3)::after{clip-path:polygon(50% 0,100% 100%,0 100%);border-radius:0}
.bene:nth-child(4)::after{left:-46px;right:auto;top:-46px;bottom:auto}

.bene .ico{position:relative;z-index:2;width:70px;height:70px;border-radius:50%;display:grid;place-items:center;
  margin:0 auto 1.2rem;background:#fff;box-shadow:0 8px 18px rgba(31,37,48,.09)}
.bene h3{position:relative;z-index:2;font-family:'Fredoka',sans-serif;font-weight:500;font-size:1.1rem;margin-bottom:.5rem}
.bene p{position:relative;z-index:2;font-size:.94rem;color:var(--tinta-suave);margin:0;line-height:1.55}

@media (prefers-reduced-motion:no-preference){
  .bene .ico{animation:saludo 5s ease-in-out infinite}
  .bene:nth-child(2) .ico{animation-delay:-1.2s}
  .bene:nth-child(3) .ico{animation-delay:-2.4s}
  .bene:nth-child(4) .ico{animation-delay:-3.6s}
}
@keyframes saludo{0%,88%,100%{transform:translateY(0) rotate(0)}92%{transform:translateY(-6px) rotate(-8deg)}96%{transform:translateY(-6px) rotate(8deg)}}
@media(max-width:560px){.bene,.bene:hover{transform:none}}

/* ============================ SOBRE NOSOTROS ============================ */
.nos{display:grid;grid-template-columns:1.05fr .95fr;gap:4.5rem;align-items:center;padding:5rem 0 2rem}
.nos h2{font-size:clamp(1.8rem,3.4vw,2.6rem);margin-bottom:1.4rem;font-family:'Fredoka';font-weight:500}
.nos p{font-size:1.05rem;line-height:1.75;color:var(--tinta-suave)}

/* Collage de fotos: tres piezas superpuestas, cada una con su ángulo */
.collage{position:relative;aspect-ratio:1/1;max-width:520px;margin-left:auto}
.collage figure{position:absolute;margin:0;border-radius:26px;overflow:hidden;background:var(--gris-foto);
  box-shadow:0 18px 40px rgba(31,37,48,.12);transition:transform .35s}
.collage img{width:100%;height:100%;object-fit:cover}
.collage figure:nth-child(1){width:58%;aspect-ratio:1;top:0;left:0;transform:rotate(-5deg);z-index:2}
.collage figure:nth-child(2){width:46%;aspect-ratio:1;top:16%;right:0;transform:rotate(6deg);z-index:3}
.collage figure:nth-child(3){width:52%;aspect-ratio:1;bottom:0;left:16%;transform:rotate(3deg);z-index:4}
.collage figure:hover{transform:rotate(0) scale(1.04);z-index:5}
.collage .globo{position:absolute;z-index:1;border-radius:50%}
.collage .globo:nth-of-type(1){width:120px;height:120px;background:#EDF5FA;top:-18px;right:12%}
.collage .globo:nth-of-type(2){width:86px;height:86px;background:#E9F3EA;bottom:8%;right:4%}

@media(max-width:900px){
  .nos{grid-template-columns:1fr;gap:3rem;padding-top:3rem}
  .collage{margin:0 auto;max-width:400px}
}

/* ============================ CAMBIOS Y GARANTÍA ============================ */
.faq{display:grid;grid-template-columns:.85fr 1.15fr;gap:3.5rem;padding:4rem 0 5rem;align-items:start}
.faq-intro{position:sticky;top:calc(var(--header-h) + 24px)}
.faq-intro h2{font-family:'Fredoka';font-weight:500;font-size:clamp(1.7rem,3vw,2.4rem);margin-bottom:1rem}
.faq-intro p{color:var(--tinta-suave);line-height:1.7}
.faq-grupo{margin-bottom:2.6rem}
.faq-grupo > h3{font-family:'Fredoka';font-weight:500;font-size:1.35rem;margin-bottom:1.1rem;
  display:flex;align-items:center;gap:.7rem}
.faq-grupo > h3 .punto{width:14px;height:14px;border-radius:50%;flex-shrink:0}

.acordeon{border-radius:22px;margin-bottom:.9rem;overflow:hidden;box-shadow:none;transition:transform .25s}
.acordeon:hover{transform:translateX(4px)}
.acordeon summary{padding:1.25rem 1.5rem;font-family:'Fredoka';font-weight:500;font-size:1.02rem;
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.acordeon summary::-webkit-details-marker{display:none}
.acordeon summary::after{content:'+';font-size:1.5rem;line-height:1;opacity:.55;transition:transform .25s}
.acordeon[open] summary::after{content:'–';transform:rotate(180deg)}
.acordeon .cuerpo{padding:0 1.5rem 1.5rem;color:var(--tinta-suave);line-height:1.7}
.acordeon .cuerpo ul{padding-left:1.1rem}
.acordeon .cuerpo li{margin-bottom:.6rem}
.acordeon.rosa{background:#EDF5FA}
.acordeon.celeste{background:#E8F3F9}
.acordeon.amarillo{background:#FDF1E2}
.acordeon.verde{background:#E9F3EA}

.faq-cierre{background:var(--gris);border-radius:26px;padding:2rem;text-align:center;margin-top:1rem}
@media(max-width:900px){
  .faq{grid-template-columns:1fr;gap:2.4rem;padding-top:2.6rem}
  .faq-intro{position:static}
}

/* ============================ TIENDA ============================ */
.pagina-head{position:relative;z-index:0;overflow:hidden}
/* Encabezado de página: degradado pastel del logo y formas flotando.
   La gracia es que se reconozcan las figuras del logo (círculo, triángulo,
   estrella) sin llenar la pantalla de adornos. */
.pagina-head{padding:5.4rem 0 5rem;text-align:center;
  background:linear-gradient(135deg,#F1F7FB 0%,#FBF6F0 46%,#EEF6FB 100%)}
/* El título no pasa de 2.9rem y respira: a 3.4 ocupaba media pantalla y la
   ruta le quedaba pegada abajo. El tope de ancho evita que un título largo
   cruce el monitor entero de punta a punta. */
.pagina-head h1{position:relative;z-index:2;font-size:clamp(2rem,4vw,2.9rem);
  line-height:1.15;max-width:16ch;margin:0 auto}
.miga{position:relative;z-index:2;font-size:.88rem;color:var(--tinta-suave);
  margin-top:1.5rem;letter-spacing:.02em}
.figuras{position:absolute;inset:0;pointer-events:none;z-index:1}
.figuras span{position:absolute;display:block;opacity:.85}
@media (prefers-reduced-motion:no-preference){
  .figuras span{animation:flotar 7s ease-in-out infinite}
  .figuras span:nth-child(2){animation-duration:9s;animation-delay:-2s}
  .figuras span:nth-child(3){animation-duration:8s;animation-delay:-4s}
  .figuras span:nth-child(4){animation-duration:10s;animation-delay:-1s}
  .figuras span:nth-child(5){animation-duration:8.5s;animation-delay:-3s}
  .figuras span:nth-child(6){animation-duration:11s;animation-delay:-5s}
}
@keyframes flotar{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-14px) rotate(8deg)}}

/* Pantallas grandes: en vez de agrandar todo, mostramos más productos.
   Con 1280px de ancho fijo, un monitor de 1920 desperdiciaba los costados. */
@media(min-width:1500px){
  :root{--ancho:1560px}
  /* Ojo: esta regla va DESPUÉS de .grid--vitrina y con la misma
     especificidad, así que la pisaba. En un monitor ancho la vitrina volvía
     a cinco columnas y la última fila quedaba coja.
     El :not() la deja afuera. */
  .grid:not(.grid--vitrina){grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:3rem 2.2rem}
  .grid--vitrina{gap:2.6rem 2rem}
  .tienda{grid-template-columns:300px 1fr;gap:4rem}
  .card h3{font-size:1.05rem}
  .card .precio{font-size:1.12rem}
}
@media(min-width:1900px){
  :root{--ancho:1760px}
}
.miga a:hover{color:var(--rosa)}
.tienda{display:grid;grid-template-columns:280px 1fr;gap:3.6rem;padding:3.4rem 0 6rem}
.filtros{position:sticky;top:calc(var(--header-h) + 16px);align-self:start}
.filtro-bloque{background:var(--gris);border-radius:var(--r-md);padding:1.5rem 1.5rem;margin-bottom:1.2rem}
.filtro-bloque h3{font-family:'Nunito',sans-serif;font-size:.78rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.12em;margin-bottom:1rem;color:var(--tinta)}
.filtro-bloque p{font-size:.92rem;line-height:1.5;color:var(--tinta-suave)}
.filtro-bloque a:not(.btn){display:flex;justify-content:space-between;padding:.42rem 0;font-size:.95rem;color:var(--tinta)}
.filtro-bloque a:not(.btn):hover{color:var(--rosa-osc)}
.filtro-bloque a.on{color:var(--rosa-osc);font-weight:700}
.filtro-bloque a:not(.btn) span{color:var(--tinta-suave);font-size:.82rem}
.rango{width:100%;accent-color:var(--rosa)}
.tienda-barra{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;margin-bottom:2.4rem}
.tienda-barra select{padding:.6rem 1rem;border-radius:var(--r-pill);border:1.5px solid var(--linea);background:var(--blanco)}
.conteo{font-size:.9rem;color:var(--tinta-suave)}
.pagina-nums{display:flex;gap:.6rem;justify-content:center;margin-top:4rem}
.pagina-nums button{width:42px;height:42px;border-radius:50%;background:var(--blanco);font-family:'Fredoka';box-shadow:var(--sombra)}
.pagina-nums button.on{background:var(--rosa);color:#fff}
.filtros-mob{display:none}
@media(max-width:900px){
  .tienda{grid-template-columns:1fr}
  .filtros{position:static;display:none}
  .filtros.abierto{display:block}
  .filtros-mob{display:inline-flex}
}

/* ============================ PRODUCTO ============================ */
.prod{display:grid;grid-template-columns:1.05fr .95fr;gap:4.5rem;padding:3.4rem 0 4rem}
.galeria-main{border-radius:var(--r-lg);overflow:hidden;background:#fff;aspect-ratio:1}
.galeria-main img{width:100%;height:100%;object-fit:cover}
.galeria-thumbs{display:flex;gap:.7rem;margin-top:.8rem}
.galeria-thumbs button{width:84px;aspect-ratio:1;border-radius:var(--r-sm);overflow:hidden;border:2px solid transparent;background:var(--gris)}
.galeria-thumbs button.on{border-color:var(--rosa)}
.galeria-thumbs img{width:100%;height:100%;object-fit:cover}
.prod .precio-grande{font-family:'Fredoka';font-size:2.1rem;font-weight:600;margin:.4rem 0 1.2rem}
.prod-opts{margin:1.2rem 0}
.prod-opts label{font-size:.82rem;text-transform:uppercase;letter-spacing:.12em;color:var(--tinta-suave);display:block;margin-bottom:.5rem}
.chips{display:flex;gap:.6rem;flex-wrap:wrap}
.chip{padding:.5rem 1.15rem;border-radius:var(--r-pill);border:1.5px solid var(--linea);background:var(--blanco);font-size:.92rem}
/* Seleccionado en rosa profundo, no en el rosa del logo.

   El #9FCFE4 de la marca con texto blanco da 1,9 de contraste y a pleno sol
   en un celular no se lee. Este tono es el mismo rosa bajado hasta que el
   blanco encima llega a 3,3, que es el piso utilizable para texto de este
   tamaño. Sigue leyéndose como rosa de Trona. */
.chip.on{border-color:var(--rosa-fuerte);background:var(--rosa-fuerte);color:#fff}
/* La opción sin stock se muestra igual, tachada: saberla existir es parte de
   entender el producto, y esconderla hace que el que la busca crea que no la
   venden. */
.chip--sin{opacity:.5;cursor:not-allowed;text-decoration:line-through}
.chip--sin small{display:block;font-size:.7rem;text-decoration:none;opacity:.85}
.chip--sin:hover{border-color:var(--linea)}
.cantidad{display:inline-flex;align-items:center;border:1.5px solid var(--linea);border-radius:var(--r-pill);background:var(--blanco);overflow:hidden}
.cantidad button{width:44px;height:48px;font-size:1.2rem}
.cantidad span{width:44px;text-align:center;font-family:'Fredoka';font-weight:600}
/* El título y el corazón en la misma línea. El corazón queda pegado al borde
   derecho de la columna, alineado con la primera línea del título aunque el
   nombre ocupe dos renglones. */
.prod-titulo{display:flex;align-items:flex-start;gap:1rem;margin-top:.3rem}
.prod-titulo h1{font-size:clamp(1.8rem,3.4vw,2.6rem);flex:1;min-width:0}

/* Favoritos en la ficha: solo el ícono, del tamaño de un objetivo táctil. */
.fav-detalle{flex:none;width:46px;height:46px;display:inline-flex;align-items:center;
  justify-content:center;border-radius:50%;color:var(--tinta-suave);
  transition:color .18s,background .18s}
.fav-detalle:hover{background:var(--gris);color:var(--tinta)}
.fav-detalle.on{color:var(--rosa-osc)}
.fav-detalle svg{width:24px;height:24px}

/* Opción agotada: se ve, se entiende que existe, y no se puede elegir. */
.chip.agotada{opacity:.45;cursor:not-allowed;text-decoration:line-through;
  text-decoration-thickness:1.5px}
.chip.agotada:hover{background:transparent;border-color:var(--linea)}

.compra-fila{display:flex;gap:.8rem;flex-wrap:wrap;align-items:center;margin:1.4rem 0}
.envio-caja{background:var(--gris);border:0;border-radius:var(--r-md);padding:1.4rem 1.6rem;margin-top:1.8rem}
.envio-caja div{display:flex;gap:.85rem;align-items:center;font-size:.94rem;padding:.42rem 0;color:var(--tinta)}
.tabs{display:flex;gap:1.8rem;border-bottom:1.5px solid var(--linea);margin:3rem 0 1.5rem;flex-wrap:wrap}
.tabs button{padding:.7rem 0;font-family:'Fredoka';font-weight:500;color:var(--tinta-suave);border-bottom:3px solid transparent;margin-bottom:-1.5px}
.tabs button.on{color:var(--tinta);border-color:var(--verde-osc)}
.tab-cuerpo ul{padding-left:1.1rem}
.tab-cuerpo li{margin-bottom:.4rem}
@media(max-width:880px){.prod{grid-template-columns:1fr;gap:1.8rem;padding-top:1.6rem}}

/* ============================ CUENTA ============================ */
.modal{position:fixed;inset:0;z-index:230;display:none;align-items:center;justify-content:center;padding:1.2rem}
.modal.on{display:flex}
.modal-caja{background:var(--blanco);border-radius:22px;width:min(420px,100%);max-height:92vh;overflow-y:auto;
  padding:2rem 1.8rem;box-shadow:0 24px 60px rgba(31,37,48,.22)}
.modal-caja h2{font-family:'Fredoka';font-weight:500;font-size:1.5rem;margin-bottom:.3rem}
.modal-caja .sub{color:var(--tinta-suave);font-size:.92rem;margin-bottom:1.4rem}
.modal-caja label{display:block;font-size:.85rem;font-weight:700;margin:.9rem 0 .35rem}
.modal-caja input{width:100%;padding:.75rem .9rem;border:1px solid var(--linea);border-radius:12px;font:inherit}
.modal-caja input:focus{outline:2px solid var(--verde);outline-offset:1px}
.modal-pie{margin-top:1.4rem;display:flex;flex-direction:column;gap:.7rem}
.modal-alt{text-align:center;font-size:.9rem;color:var(--tinta-suave)}
.modal-alt button{background:none;border:none;color:var(--verde-osc);font:inherit;font-weight:700;cursor:pointer;text-decoration:underline}
.modal-error{background:#EEF6FA;color:#B03A2E;border-radius:12px;padding:.7rem .9rem;font-size:.88rem;margin-top:1rem}
/* ---------- Mi cuenta ----------
   La clase se llama .mi-cuenta y no .cuenta porque esa última ya existía
   para el enlace "Entrar/Registrarte" del header: al reusarla, la página
   heredaba display:flex y white-space:nowrap y se desarmaba entera. */
.mi-cuenta{max-width:820px;padding:2.2rem 0 4rem}

.cuenta-cab{display:flex;align-items:center;gap:1rem;margin-bottom:2rem;flex-wrap:wrap}
.cuenta-inicial{width:54px;height:54px;flex:0 0 auto;border-radius:50%;background:var(--rosa);
  color:#fff;display:grid;place-items:center;font-family:'Fredoka';font-weight:600;font-size:1.5rem}
.cuenta-cab h1{font-family:'Fredoka';font-weight:500;font-size:1.6rem;margin:0;line-height:1.15}
/* Un correo largo no tiene espacios donde cortar: sin esto empuja el ancho
   de toda la página en un teléfono. */
.cuenta-cab p{margin:.1rem 0 0;color:var(--tinta-suave);font-size:.92rem;overflow-wrap:anywhere}
.cuenta-cab > div{min-width:0}
.cuenta-salir{margin-left:auto;font-size:.88rem;color:var(--tinta-suave);text-decoration:underline}
.cuenta-salir:hover{color:var(--tinta)}

.cuenta-caja{background:var(--blanco);border:1px solid var(--linea);border-radius:20px;
  padding:1.5rem 1.6rem;margin-bottom:1.1rem}
.cuenta-caja h2{font-family:'Fredoka';font-weight:500;font-size:1.2rem;margin:0 0 1.1rem;
  display:flex;align-items:center;gap:.5rem}
.cuenta-cuenta{font-family:'Nunito';font-size:.8rem;font-weight:700;color:var(--tinta-suave);
  background:var(--gris);border-radius:999px;padding:.1rem .55rem}
.cuenta-ayuda{margin:-.6rem 0 1.2rem;color:var(--tinta-suave);font-size:.9rem}

/* Estados vacíos: en vez de una línea de texto perdida, un bloque centrado
   con la acción que corresponde */
.cuenta-vacio{text-align:center;padding:1.4rem 0 .6rem;color:var(--tinta-suave)}
.cuenta-vacio p{margin:0 0 1rem;font-size:.94rem}

/* ---------- Pedidos ---------- */
.peds{display:flex;flex-direction:column;gap:1rem}
.ped{border:1.5px solid var(--linea);border-radius:18px;overflow:hidden;
  transition:border-color .18s,box-shadow .18s}
.ped:hover{border-color:var(--rosa);box-shadow:0 4px 16px rgba(31,37,48,.06)}

/* Cabecera sobre fondo tenue: separa "de qué pedido hablamos" del detalle */
.ped-cab{display:flex;justify-content:space-between;align-items:center;gap:.8rem;flex-wrap:wrap;
  padding:.95rem 1.2rem;background:var(--gris)}
.ped-id{min-width:0}
.ped-num{font-family:'Fredoka';font-weight:500;font-size:1.05rem;display:block;line-height:1.2}
.ped-fecha{font-size:.85rem;color:var(--tinta-suave)}
.ped-estado{font-size:.78rem;font-weight:700;padding:.3rem .8rem;border-radius:999px;
  color:var(--tinta);white-space:nowrap}

/* Artículos: la cantidad en una pastilla, el nombre al medio, el precio a la
   derecha. En tres columnas se lee de un golpe qué se compró y cuánto. */
.ped-items{list-style:none;margin:0;padding:1rem 1.2rem}
.ped-items li{display:grid;grid-template-columns:auto 1fr auto;gap:.75rem;align-items:baseline;
  padding:.3rem 0;font-size:.94rem}
.ped-cant{background:var(--gris);border-radius:6px;padding:.05rem .45rem;font-size:.82rem;
  font-weight:700;color:var(--tinta-suave)}
.ped-nombre{min-width:0;overflow-wrap:anywhere}
.ped-nombre em{display:block;font-style:normal;font-size:.85rem;color:var(--tinta-suave)}
.ped-precio{white-space:nowrap;color:var(--tinta-suave)}

/* Las cuentas del pedido, separadas de los artículos por una línea */
.ped-cuentas{padding:.9rem 1.2rem 1.1rem;border-top:1px solid var(--linea)}
.ped-linea{display:flex;justify-content:space-between;gap:1rem;padding:.22rem 0;
  font-size:.92rem;color:var(--tinta-suave)}
.ped-linea > span:first-child{min-width:0;overflow-wrap:anywhere}
.ped-linea > span:last-child{white-space:nowrap}
.ped-ahorro{color:var(--verde-osc);font-weight:700}
.ped-total{margin-top:.45rem;padding-top:.55rem;border-top:1px solid var(--linea);
  color:var(--tinta);font-family:'Fredoka';font-weight:500;font-size:1.15rem}

.ped-guia{display:flex;justify-content:space-between;gap:.8rem;flex-wrap:wrap;
  margin:0 1.2rem 1.1rem;background:#DCEBF5;border-radius:12px;padding:.7rem 1rem;
  font-size:.9rem;overflow-wrap:anywhere}
.ped-guia span{color:var(--tinta-suave)}
.ped-guia b{font-family:'Fredoka';letter-spacing:.02em}

/* ---------- Datos ---------- */
.cuenta-form{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1.3rem}
@media(max-width:640px){
  .cuenta-form{grid-template-columns:1fr}
  .cuenta-caja{padding:1.2rem 1.1rem}
  .cuenta-cab h1{font-size:1.35rem}
  .cuenta-salir{margin-left:0;width:100%;text-align:left}
  /* En pantalla angosta el precio baja de renglón antes que aplastar el nombre */
  .ped-items li{grid-template-columns:auto 1fr;row-gap:.15rem}
  .ped-precio{grid-column:2;text-align:right}
  .ped-cab,.ped-items,.ped-cuentas{padding-left:1rem;padding-right:1rem}
  .ped-guia{margin-left:1rem;margin-right:1rem}
}

/* ============================ CARRITO ============================ */
.velo{position:fixed;inset:0;background:rgba(31,37,48,.45);opacity:0;pointer-events:none;transition:opacity .3s;z-index:210}
.velo.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(430px,100%);background:var(--blanco);z-index:220;
  transform:translateX(100%);transition:transform .34s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column}
.drawer.on{transform:none}
.drawer-head{padding:1.3rem 1.5rem;border-bottom:1px solid var(--linea);display:flex;align-items:center;justify-content:space-between}
.drawer-body{flex:1;overflow-y:auto;padding:1.2rem 1.5rem}
.drawer-pie{border-top:1px solid var(--linea);padding:1.3rem 1.5rem;background:var(--blanco)}
.linea-item{display:grid;grid-template-columns:76px 1fr auto;gap:.9rem;padding:.9rem 0;border-bottom:1px solid var(--linea)}
.linea-item img{width:76px;height:76px;object-fit:cover;border-radius:var(--r-sm);background:var(--gris)}
.linea-item h4{font-family:'Fredoka';font-size:.96rem;font-weight:500;margin:0 0 .15rem}
.linea-item .var{font-size:.8rem;color:var(--tinta-suave)}
.quitar{font-size:.8rem;color:var(--tinta-suave);text-decoration:underline}
.quitar:hover{color:#E06C5C}
.mini-cant{display:inline-flex;align-items:center;gap:.5rem;margin-top:.4rem;font-size:.9rem}
.mini-cant button{width:26px;height:26px;border-radius:50%;background:var(--gris);line-height:1}
/* barra de envío gratis — el trencito */
.track{margin:.3rem 0 1.2rem}
.track-txt{font-size:.86rem;margin-bottom:.5rem}
.track-txt b{color:var(--verde-osc)}
.rieles{position:relative;height:26px}
.rieles::before{content:'';position:absolute;left:0;right:0;top:18px;height:4px;border-radius:2px;
  background:repeating-linear-gradient(90deg,var(--verde-osc) 0 10px,transparent 10px 18px);opacity:.45}
.rieles::after{content:'';position:absolute;left:0;top:18px;height:4px;border-radius:2px;background:var(--verde-osc);width:var(--pc,0%);transition:width .5s}
.tren{position:absolute;top:0;left:var(--pc,0%);transform:translateX(-50%);transition:left .5s}
.vacio{text-align:center;padding:3rem 1rem;color:var(--tinta-suave)}
.tot-fila{display:flex;justify-content:space-between;padding:.3rem 0}
.tot-fila.grande{font-family:'Fredoka';font-size:1.3rem;font-weight:600;color:var(--tinta);padding-top:.7rem;margin-top:.4rem;border-top:1px solid var(--linea)}

/* ============================ CHECKOUT ============================ */
.checkout{display:grid;grid-template-columns:1.25fr .75fr;gap:2.6rem;padding:2.4rem 0 4.5rem;align-items:start}
.pasos{display:flex;gap:.5rem;margin-bottom:2rem;flex-wrap:wrap}
.paso{display:flex;align-items:center;gap:.55rem;padding:.5rem 1.1rem;border-radius:var(--r-pill);background:var(--blanco);font-size:.9rem;color:var(--tinta-suave)}
.paso b{font-weight:700}
.paso.on{background:var(--verde-osc);color:#fff}
.paso.hecho{background:#C5DCC8;color:var(--tinta)}
.paso i{font-style:normal;font-family:'Fredoka';font-weight:600}

/* En escritorio los pasos van más grandes.

   Son la única señal de en qué punto de la compra está la persona, y en una
   pantalla ancha quedaban como tres pastillitas perdidas arriba a la
   izquierda. Va desde 900px para arriba: por debajo manda la regla del
   bloque móvil, donde los tres se reparten el ancho y ya se leen bien. */
@media (min-width: 900px){
  .pasos{gap:.7rem;margin-bottom:2.4rem}
  .paso{padding:.8rem 1.7rem;font-size:1.02rem;gap:.7rem}
  .paso i{font-size:1.1rem}
}
.campo{margin-bottom:1.1rem}
.campo label{display:block;font-size:.82rem;text-transform:uppercase;letter-spacing:.1em;color:var(--tinta-suave);margin-bottom:.4rem}
.campo input,.campo select,.campo textarea{width:100%;padding:.85rem 1.1rem;border:1.5px solid var(--linea);border-radius:var(--r-md);background:var(--blanco)}
.campo input:focus,.campo select:focus,.campo textarea:focus{border-color:var(--rosa);outline:none}
.campo.mal input,.campo.mal select{border-color:#E06C5C}
.campo .err{color:#E06C5C;font-size:.8rem;margin-top:.3rem;display:none}
.campo.mal .err{display:block}
.fila-2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:640px){.fila-2{grid-template-columns:1fr}}
.opt-envio{display:flex;gap:1rem;align-items:flex-start;padding:1.1rem 1.3rem;border:1.5px solid var(--linea);border-radius:var(--r-md);
  background:var(--blanco);margin-bottom:.8rem;cursor:pointer;transition:border-color .2s,background .2s}
.opt-envio:hover{border-color:var(--verde-osc)}
.opt-envio.on{border-color:var(--tinta);background:var(--gris)}
.opt-envio input{accent-color:var(--tinta);margin-top:.3rem}
.opt-envio h4{font-family:'Fredoka';font-weight:500;margin:0}
.opt-envio p{font-size:.86rem;color:var(--tinta-suave);margin:.15rem 0 0}
.opt-envio .costo{margin-left:auto;font-family:'Fredoka';font-weight:600;white-space:nowrap}
.resumen{background:var(--blanco);border-radius:var(--r-lg);padding:2rem 1.9rem;box-shadow:var(--sombra);position:sticky;top:calc(var(--header-h) + 16px)}
/* cupón */
/* Cupón y tarjeta comparten campo: la perilla va arriba y el borde superior
   pasa al contenedor, así los dos quedan como un solo bloque. */
.codigos{margin:1.6rem 0 1.8rem;padding-top:1.6rem;border-top:1px solid var(--linea)}
.codigos .cupon{margin:0;padding-top:0;border-top:0}
.cod-tipo{display:flex;gap:.4rem;margin-bottom:.8rem}
.cod-tipo button{flex:1;padding:.5rem .8rem;border-radius:var(--r-pill);font-size:.86rem;
  border:1.5px solid var(--linea);background:transparent;color:var(--tinta-suave);
  transition:background .18s,border-color .18s,color .18s}
.cod-tipo button.on{background:var(--verde-osc);border-color:var(--verde-osc);color:#fff;font-weight:600}

.cupon{display:flex;gap:.7rem;margin:1.6rem 0 1.8rem;padding-top:1.6rem;border-top:1px solid var(--linea)}
.cupon input{flex:1;min-width:0;padding:.8rem 1.3rem;border:1.5px solid var(--linea);
  border-radius:var(--r-pill);background:#fff;text-transform:uppercase;font-size:.94rem}
.cupon input::placeholder{text-transform:none}
.cupon input:focus{outline:none;border-color:var(--tinta)}
.cupon button{padding:.8rem 1.5rem;border-radius:var(--r-pill);background:var(--verde-osc);color:#fff;
  font-family:'Fredoka';font-weight:500;font-size:.92rem;white-space:nowrap;transition:background .2s}
.cupon button:hover{background:#6C8A68}
.cupon-ok{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:1.6rem 0 1.8rem;
  background:#E9F3EA;border-radius:var(--r-md);padding:.9rem 1.2rem}
.cupon-ok b{font-family:'Fredoka';font-weight:600}
.cupon-ok span{display:block;font-size:.86rem;color:var(--verde-osc)}
.cupon-ok button{font-size:.84rem;text-decoration:underline;color:var(--tinta-suave)}
.cupon-ok button:hover{color:#E06C5C}

.resumen .linea-item{grid-template-columns:56px 1fr auto}
.resumen .linea-item img{width:56px;height:56px}
.mp-caja{background:#fff;border:1.5px solid var(--linea);border-radius:var(--r-md);padding:1.3rem;margin-top:1rem}
.mp-logo{display:inline-flex;align-items:center;gap:.5rem;font-family:'Fredoka';font-weight:600;color:var(--mp)}
.cuotas{display:flex;gap:.5rem;flex-wrap:wrap;margin:.9rem 0 0}
.cuotas span{font-size:.78rem;background:var(--gris);padding:.28rem .7rem;border-radius:var(--r-pill)}
pre.json{background:var(--tinta);color:#D8E1F0;padding:1.1rem;border-radius:var(--r-md);overflow:auto;font-size:.78rem;line-height:1.6}
/* ---------- Pantalla de gracias ---------- */
.ok-caja{text-align:center;max-width:540px;margin:3rem auto 5rem;background:var(--blanco);
  border-radius:var(--r-lg);padding:2.6rem 2rem 2.8rem;box-shadow:var(--sombra)}
.ok-logo{width:130px;max-width:55%;height:auto;display:block;margin:0 auto 1.4rem}
.ok-caja h1{font-family:'Fredoka';font-weight:500;font-size:1.9rem;margin:0 0 .5rem;line-height:1.2}
.ok-sub{color:var(--tinta-suave);margin:0}

/* El resumen del pedido, apoyado sobre gris */
.ok-resumen{background:var(--gris);border-radius:var(--r-md);padding:1.1rem 1.3rem;
  margin:1.8rem 0 2.2rem;text-align:left}

/* Cada paso de "qué hacer ahora", separado por una línea para que se lea
   como una secuencia y no como un bloque de texto corrido */
.ok-paso{text-align:left;padding-top:1.6rem;margin-top:1.6rem;border-top:1px solid var(--linea)}
.ok-paso:first-of-type{border-top:0;padding-top:0;margin-top:0}
.ok-paso h2{font-family:'Fredoka';font-weight:500;font-size:1.15rem;margin:0 0 .4rem}
.ok-paso p{margin:0 0 1rem;color:var(--tinta-suave);font-size:.96rem;line-height:1.55}
.ok-paso .btn{display:inline-flex}
.ok-plazo{font-size:.86rem;color:var(--tinta-suave);margin:.9rem 0 0 !important}

/* Las cuentas: el número es lo único que cambia entre una y otra, así que
   es lo único que va grande */
.cuentas{text-align:left;margin:1.2rem 0 0}

/* Cada cuenta es una ficha con borde, no un bloque gris: el gris se confundía
   con el fondo de las secciones y no se leía como "esto es un dato para
   copiar". Nombres propios para no chocar con .cuenta del header. */
.banco-caja{background:var(--blanco);border:1.5px solid var(--linea);border-radius:var(--r-md);
  padding:1.1rem 1.2rem;margin-bottom:.8rem}
.banco-donde{display:block;font-size:.82rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--tinta-suave);margin-bottom:.6rem}

/* El número es lo único que se transcribe al home banking, así que es lo
   único grande y lo único que se puede tocar. */
.banco-num{display:block;width:100%;text-align:left;background:var(--gris);
  border-radius:var(--r-sm);padding:.7rem .9rem;cursor:pointer;
  transition:background .18s,box-shadow .18s}
.banco-num:hover{background:var(--blanco);box-shadow:inset 0 0 0 1.5px var(--verde-osc)}
.banco-num b{display:block;font-family:'Fredoka';font-weight:600;font-size:1.6rem;
  letter-spacing:.06em;color:var(--tinta);line-height:1.2;word-break:break-all}
.banco-num small{display:block;margin-top:.15rem;font-size:.78rem;color:var(--tinta-suave)}
.banco-num.copiado{background:var(--blanco);box-shadow:inset 0 0 0 1.5px var(--verde-osc)}

/* Titular, tipo y sucursal: etiqueta a la izquierda, dato a la derecha. En
   filas se leen de un vistazo; corridos en una línea, no. */
.banco-datos{margin:.85rem 0 0;font-size:.92rem}
.banco-fila{display:flex;justify-content:space-between;gap:1rem;padding:.3rem 0}
.banco-fila dt{color:var(--tinta-suave);flex:none}
.banco-fila dd{margin:0;text-align:right;font-weight:600;color:var(--tinta)}

.cuentas-nota{font-size:.88rem;color:var(--tinta-suave);margin:.9rem 0 0;line-height:1.55}

/* Variante centrada de los pasos.

   .ok-paso alinea a la izquierda porque en la pantalla de un pedido son
   varios bloques de texto seguidos y así se leen como una secuencia. Pero
   .ok-caja centra todo lo demás —logo, título, subtítulo, botón de volver—
   y un botón inline dentro de un bloque alineado a la izquierda queda
   corrido respecto de todo el resto. En la pantalla de la tarjeta de regalo
   cada paso es una sola cosa, así que va centrado y el botón cae en el eje. */
.ok-centro{text-align:center}
.ok-centro .btn{margin-left:auto;margin-right:auto}

/* El monto a transferir: es el dato que la persona copia al home banking,
   así que va del tamaño del título y no perdido dentro de un párrafo. */
.ok-monto{font-family:'Fredoka';font-weight:600;font-size:2.1rem;color:var(--tinta);
  margin:0 0 .3rem !important;line-height:1.1}

/* La referencia tiene que ir tal cual en el concepto de la transferencia:
   si la escriben mal, el pago no se puede cruzar con la tarjeta. Por eso es
   un botón que la copia, y no un texto suelto para transcribir a mano. */
.ok-ref{display:block;width:100%;background:var(--gris);border:1.5px dashed var(--linea);
  border-radius:var(--r-md);padding:.9rem 1rem;cursor:pointer;text-align:center;
  transition:background .18s,border-color .18s}
.ok-ref:hover{background:var(--blanco);border-color:var(--verde-osc)}
.ok-ref b{display:block;font-family:'Fredoka';font-weight:600;font-size:1.2rem;
  letter-spacing:.04em;color:var(--tinta);line-height:1.3;word-break:break-all}
.ok-ref small{display:block;margin-top:.3rem;font-size:.82rem;color:var(--tinta-suave)}
.ok-ref.copiado{background:var(--blanco);border-style:solid;border-color:var(--verde-osc)}

.ok-volver{margin-top:2.2rem}

@media(max-width:640px){
  .ok-caja{padding:2rem 1.3rem 2.2rem;margin:1.5rem auto 3rem}
  .ok-caja h1{font-size:1.6rem}
  .banco-num b{font-size:1.35rem}
}
@media(max-width:940px){.checkout{grid-template-columns:1fr}.resumen{position:static}}

/* El checkout en celular.

   El desborde venía de .opt-envio: es un flex y sus hijos tienen min-width
   automático, así que el bloque de texto nunca se achicaba por debajo de su
   contenido y empujaba el costo fuera de la pantalla. De ahí que se leyera
   "Grat…", "$20…" y "A cargo tuy…" cortados, y que la página entera se
   pudiera correr para el costado. */
.opt-envio > div{min-width:0}

@media(max-width:640px){
  .wrap{padding:0 18px}
  .regalo-paso{padding:1.3rem 1.1rem}
  .montos{grid-template-columns:1fr 1fr}
  .regalo-pagos,.regalo-modo{grid-template-columns:1fr}
  /* Sin inclinación: una tarjeta rotada al 100% del ancho empuja la página
     para el costado en una pantalla angosta. */
  .tarjeta-regalo{width:100%;max-width:340px;transform:none;padding:1.2rem 1.3rem}
  .tr-monto{font-size:2.3rem}
  .tr-logo img{height:22px}
  .regalo-cierre{flex-direction:column;align-items:stretch}
  .regalo-cierre .btn{justify-content:center}
  /* En el celular la pastilla, el título y un botón a todo el ancho eran
     tres bloques apilados antes de ver un solo producto. El conteo pasa
     debajo del título como texto y "Ver todos" se va al final de la fila,
     donde igual se llega deslizando. */
  .rail-cab{align-items:baseline;gap:.4rem 1rem;margin-bottom:1rem}
  .rail-eyebrow{background:none;color:var(--tinta-suave);padding:0;font-size:.82rem;
    text-transform:none;letter-spacing:0;font-weight:400;margin:0}
  .rail-titulo{display:flex;flex-direction:column-reverse;gap:.2rem}
  .rail-titulo h2{font-size:1.45rem;line-height:1.2}
  .rail-cab .btn{padding:.45rem 1.1rem;font-size:.86rem}
  /* En el celular el panel del costado no entra: se desliza con el dedo y
     el "ver todos" ya está en el encabezado. */
  .rail-mas{display:none}
  .rail-marco{margin-right:-18px}
  .rail-pista{gap:1rem;padding-right:18px}
  .rail-item{flex:0 0 78%}
  .grid--vitrina{grid-template-columns:1fr 1fr;gap:1.6rem 1rem}
  /* Dos por fila: cuatro en 390px dejan cajas de 85px */
  .edades{grid-template-columns:1fr 1fr;gap:.8rem}
  .edad{padding:1.2rem 1rem}
  .edad-num{font-size:1.9rem}
  /* Se deslizan de a una, como las categorías. La inclinación se saca:
     en una tira horizontal las tarjetas torcidas se pisan entre sí. */
  .resenas{columns:auto;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:.9rem;
    margin:0 -18px;padding:.4rem 18px 1rem;scrollbar-width:none}
  .resenas::-webkit-scrollbar{display:none}
  .resena{flex:0 0 80%;scroll-snap-align:center;margin:0;--giro:0deg}
  .checkout{padding:1.4rem 0 3rem;gap:1.6rem}

  /* El costo baja a su propio renglón, alineado con el texto y no con el
     radio: en 360px de ancho no entra al lado del nombre del método. */
  .opt-envio{flex-wrap:wrap;padding:1rem;gap:.75rem}
  .opt-envio > div{flex:1 1 100%;order:2}
  .opt-envio input{order:1}
  .opt-envio .costo{order:3;margin-left:0;padding-left:calc(13px + .75rem);font-size:.95rem}
  .opt-envio h4{font-size:1.02rem}
  .opt-envio p{font-size:.85rem}

  /* Los tres pasos entran en una línea sin saltar */
  .pasos{gap:.35rem;margin-bottom:1.4rem}
  /* Los tres pasos ocupan el ancho completo y se reparten en partes iguales.
     Achicarlos para que entraran los dejaba como tres pastillas chiquitas
     perdidas arriba a la izquierda, y son la única señal de en qué punto de
     la compra está la persona. */
  .pasos{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem;margin-bottom:1.6rem}
  .paso{justify-content:center;padding:.7rem .4rem;font-size:.84rem;gap:.35rem;
    border:1.5px solid var(--linea);text-align:center}
  .paso.on{border-color:var(--verde-osc)}
  .paso.hecho{border-color:#C5DCC8}

  .resumen{padding:1.4rem 1.2rem}
  .cupon{gap:.5rem;margin:1.2rem 0 1.4rem;padding-top:1.2rem}
  .cupon input{padding:.7rem 1rem}
  .cupon button{padding:.7rem 1.1rem}
}

/* Red de seguridad: si algún día un elemento se pasa de ancho, la página no
   se corre para el costado. Es preferible que se recorte a que todo baile. */
@media(max-width:640px){
  html,body{overflow-x:hidden}
}

/* ============================ CONTENIDO ============================ */
.prosa{max-width:760px;margin:0 auto;padding:3rem 0 4.5rem}
.prosa h2{margin:2.2rem 0 .8rem}
.prosa ul{padding-left:1.2rem}
.prosa li{margin-bottom:.5rem}
.acordeon{background:var(--blanco);border-radius:var(--r-md);margin-bottom:.9rem;overflow:hidden;box-shadow:var(--sombra)}
.acordeon summary{padding:1.15rem 1.4rem;font-family:'Fredoka';font-weight:500;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center}
.acordeon summary::-webkit-details-marker{display:none}
.acordeon summary::after{content:'+';font-size:1.4rem;color:var(--rosa)}
.acordeon[open] summary::after{content:'–'}
.acordeon .cuerpo{padding:0 1.4rem 1.3rem}
.tarjeta-info{background:var(--blanco);border-radius:var(--r-md);padding:1.6rem;box-shadow:var(--sombra);text-align:center}
.tarjeta-info .ico{width:54px;height:54px;border-radius:50%;background:var(--gris);display:grid;place-items:center;margin:0 auto 1rem}

/* ============================ FOOTER ============================ */
footer{background:var(--pie-fondo);color:var(--pie-texto);padding:0 0 2rem;position:relative}
.foot-top{padding:5.5rem 0 3.4rem;display:grid;grid-template-columns:1.5fr 1fr 1.2fr 1fr;gap:3.4rem}
footer h3{color:var(--pie-texto);font-family:'Nunito',sans-serif;font-size:.95rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;margin-bottom:1.4rem}
footer li{list-style:none;margin-bottom:.9rem;font-size:1rem;color:var(--pie-texto)}
footer ul{padding:0;margin:0}
footer a:hover{color:var(--verde)}

/* newsletter */
.news{display:flex;align-items:center;background:#fff;border-radius:var(--r-pill);
  padding:.35rem .35rem .35rem 1.4rem;max-width:430px;box-shadow:0 2px 10px rgba(0,0,0,.05)}
.news input{flex:1;border:0;background:transparent;padding:.85rem 0;font-size:1rem;color:var(--pie-texto)}
.news input:focus{outline:none}
.news input::placeholder{color:#9AA3AF}
.news button{width:52px;height:52px;border-radius:50%;background:var(--verde);color:#fff;
  display:grid;place-items:center;flex-shrink:0;transition:transform .2s,background .2s}
.news button:hover{background:#6C8A68;transform:translateX(2px)}

.redes{display:flex;gap:1.6rem;margin-top:2rem}
.redes a{color:var(--pie-suave);transition:color .2s}
.redes a:hover{color:var(--verde)}

.foot-fin{border-top:1px solid #E1E1E1;padding-top:1.8rem;display:grid;
  grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;font-size:.95rem;color:var(--pie-texto)}
.foot-fin img{height:38px;width:auto}
.foot-logo{justify-self:center}

@media(max-width:900px){.foot-top{grid-template-columns:1fr 1fr}}
/* ---------- El pie en el celular ----------
   Apilado en una sola columna con los espacios de escritorio, el pie medía
   más que la pantalla y había que scrollear un rato para llegar al final.
   Ahora los enlaces van en dos columnas y los datos de contacto pegados,
   que es como se leen: no son una lista, son un bloque. */
@media(max-width:560px){
  /* El orden importa más que las columnas: primero lo accionable (el
     newsletter), después los enlaces y el contacto lado a lado, y al final
     la dirección del showroom, que es una frase larga. */
  .foot-top{grid-template-columns:1fr 1fr;gap:1.5rem 1.2rem;padding:2.4rem 0 1.6rem}
  footer h3{font-size:.78rem;margin-bottom:.6rem;letter-spacing:.06em;opacity:.6}
  footer li{margin-bottom:.45rem;font-size:.94rem}

  .foot-news{grid-column:1 / -1;order:1}
  .foot-links{order:2}
  .foot-contacto{order:3}
  .foot-ancho{grid-column:1 / -1;order:4}   /* showroom, al final */

  .foot-fin{grid-template-columns:1fr;text-align:center;gap:.8rem;padding-top:1.2rem}
  .foot-logo{order:-1}
  .foot-logo img{width:88px;height:auto}

  /* El botón de WhatsApp tapaba el logo y el copyright: el pie termina más
     arriba de donde empieza. Ahora reserva menos, porque quedó uno solo. */
  footer{padding-bottom:76px}
  .wa{width:56px;height:56px;right:16px;bottom:16px}
}

/* ============================ BUSCADOR / TOAST ============================ */
.buscador{position:fixed;inset:0;background:var(--blanco);z-index:230;display:none;padding:3rem 24px;overflow-y:auto}
.buscador.on{display:block}
.buscador input{width:100%;max-width:760px;margin:0 auto;display:block;font-family:'Fredoka';font-size:1.6rem;
  padding:1rem 0;border:0;border-bottom:2px solid var(--linea);background:transparent}
.buscador input:focus{outline:none;border-color:var(--rosa)}
/* El aviso de "agregado al carrito".
   Va en una sola línea y corta el nombre con puntos suspensivos si no entra:
   con nombres largos se partía en tres renglones y quedaba una pelota negra
   tapando los botones de finalizar compra. */
.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,140%);
  background:var(--tinta);color:#fff;padding:.85rem 1.5rem;border-radius:var(--r-pill);
  z-index:300;transition:transform .35s;font-size:.94rem;box-shadow:var(--sombra-alta);
  max-width:min(420px, calc(100vw - 32px));
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.toast.on{transform:translate(-50%,0)}
.wa{position:fixed;right:24px;bottom:24px;width:70px;height:70px;border-radius:50%;background:#4CC96A;color:#fff;
  display:grid;place-items:center;z-index:50;box-shadow:0 10px 26px rgba(76,201,106,.42);transition:transform .2s}
.wa:hover{transform:scale(1.07)}


/* ---------- Los tres rubros en la home ----------
   Ojocha vende juguetería, tecnología y bazar: lo primero que necesita el
   visitante es elegir a qué mundo entra.

   Sin foto: cualquier producto que se ponga de portada representa mal a un
   rubro entero (una olla no habla por todo Bazar). Va tipografía grande sobre
   un bloque de color de la marca, que además hace de código: cada rubro
   siempre el mismo color, en la home y en el resto del sitio. */
.rubros{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}

.rubro{position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:210px;padding:1.7rem 1.8rem;border-radius:var(--r-lg);overflow:hidden;
  color:#fff;transition:transform .2s,box-shadow .2s}
.rubro:hover{transform:translateY(-4px);box-shadow:var(--sombra-alta)}

.rubro--0{background:var(--azul)}
.rubro--1{background:var(--naranja)}
.rubro--2{background:var(--rojo)}

/* Una trama de círculos apenas visible: le da textura al bloque sin
   competir con el nombre. */
.rubro::before{content:'';position:absolute;inset:0;opacity:.14;
  background-image:radial-gradient(circle at 1px 1px,#fff 2px,transparent 2px);
  background-size:22px 22px}

.rubro-txt{position:relative;z-index:2}
.rubro-txt h3{font-size:1.75rem;color:#fff;margin:0 0 .15rem;line-height:1.15}
.rubro-txt span{font-size:.9rem;color:rgba(255,255,255,.85)}

.rubro-flecha{position:absolute;top:1.5rem;right:1.6rem;z-index:2;
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.2);color:#fff;transition:background .2s}
.rubro:hover .rubro-flecha{background:rgba(255,255,255,.34)}

/* Si algún día se le carga una foto propia al rubro, va de fondo. */
.rubro-img{position:absolute;inset:0;z-index:0}
.rubro-img img{width:100%;height:100%;object-fit:cover;opacity:.32}

@media(max-width:860px){
  .rubros{grid-template-columns:1fr;gap:1rem}
  .rubro{min-height:130px;padding:1.3rem 1.4rem}
  .rubro-txt h3{font-size:1.4rem}
  .rubro-flecha{top:1.1rem;right:1.2rem;width:32px;height:32px}
}


/* ---------- Checkout ---------- */
.pasos-pago{background:var(--blanco);border-radius:var(--r-lg);padding:1.8rem;
  box-shadow:var(--sombra);margin:2rem 0 1rem;text-align:left}
.pasos-pago h2{font-size:1.15rem;margin:0 0 .9rem}
.pasos-pago p{margin:.5rem 0}
/* Ojo: .cuenta ya existe arriba, es el enlace del header. Esta va con otro
   nombre para no pisarla. */
.cuenta-banco{background:var(--gris);border-radius:var(--r-md);padding:.9rem 1.1rem;margin:.7rem 0}
.cuenta-banco b{display:block;font-family:'Fredoka';font-weight:600;font-size:1rem}
.cuenta-banco span{display:block;font-size:.9rem;color:var(--tinta-suave);margin-top:.15rem}

.cod-error{background:#FDEBEC;color:#B03A2E;border-radius:12px;padding:.6rem .9rem;
  font-size:.85rem;margin-top:.7rem}

.tarjeta-blanca{background:var(--blanco);border-radius:var(--r-lg);padding:1.8rem 1.9rem;
  box-shadow:var(--sombra);margin-bottom:1.4rem}
.ch-tit{font-size:1.15rem;margin:0 0 1.2rem}
.ch-legal{font-size:.8rem;color:var(--tinta-suave);text-align:center;margin:.9rem 0 0}
.ayuda-ch{font-size:.82rem;color:var(--tinta-suave);margin-top:.4rem}

.aviso-ch{background:#FDF1E2;border-radius:12px;padding:.8rem 1rem;font-size:.88rem;
  margin-bottom:1rem}
.aviso-ch--mal{background:#FDEBEC;color:#B03A2E}

/* Cada opción de envío es un bloque tocable entero, no un radio diminuto:
   en el celular apuntarle a un círculo de 14px es una fuente de errores. */
.envios{display:flex;flex-direction:column;gap:.7rem}
.envio{display:flex;align-items:center;gap:.9rem;padding:1rem 1.2rem;cursor:pointer;
  border:1.5px solid var(--linea);border-radius:var(--r-md);transition:border-color .18s,background .18s}
.envio:hover{border-color:var(--rosa-osc)}
.envio.on{border-color:var(--azul);background:#F1F7FB}
.envio input{margin:0;accent-color:var(--azul);width:18px;height:18px;flex:0 0 auto}
.envio div{flex:1;min-width:0;display:flex;flex-direction:column;gap:.2rem}
.envio b{font-family:'Fredoka';font-weight:500}
.envio span{font-size:.84rem;color:var(--tinta-suave)}
.envio-precio{flex:0 0 auto;font-weight:700;white-space:nowrap}

.res-linea{display:flex;justify-content:space-between;gap:1rem;padding:.45rem 0;
  font-size:.9rem;border-bottom:1px solid var(--linea)}
.res-linea:last-of-type{margin-bottom:.8rem}
.resumen .tot-fila{font-size:.94rem}

@media(max-width:860px){
  .checkout{grid-template-columns:1fr;gap:1.4rem}
  .resumen{position:static}
  .tarjeta-blanca{padding:1.4rem}
}


/* ---------- Contacto y tarjeta de regalo ---------- */
/* Cada forma de pago es un bloque tocable entero, no un radio diminuto:
   apuntarle a un círculo de 14px en el celular es una fuente de errores. */
.opt-pago{display:flex;gap:.9rem;align-items:center;padding:1rem 1.2rem;cursor:pointer;
  border:1.5px solid var(--linea);border-radius:var(--r-md);background:var(--blanco);
  transition:border-color .18s,background .18s}
.opt-pago:hover{border-color:var(--rosa-osc)}
.opt-pago.on{border-color:var(--azul);background:#F1F7FB}
.opt-pago input{accent-color:var(--azul);width:18px;height:18px;flex:0 0 auto;margin:0}
.opt-pago span{display:flex;flex-direction:column;gap:.15rem}
.opt-pago b{font-family:'Fredoka';font-weight:500}
.opt-pago small{font-size:.84rem;color:var(--tinta-suave)}

.cont-tit{font-size:.8rem;text-transform:uppercase;letter-spacing:.09em;color:var(--tinta-suave);
  font-weight:700;margin:0 0 .6rem}

.aviso-ok{background:#E9F3EA;color:#4E7256;border-radius:12px;padding:1rem 1.2rem;
  font-size:.94rem;line-height:1.6}

/* Los montos: botones grandes, no un desplegable. Son cuatro opciones y
   elegir monto es la decisión principal de esta pantalla. */





/* Vista previa de la tarjeta: lo que va a recibir quien la reciba. */
.gift-vista{display:flex;flex-direction:column;align-items:center;gap:.3rem;
  background:linear-gradient(135deg,var(--azul) 0%,var(--naranja) 100%);
  color:#fff;border-radius:22px;padding:2rem 1.6rem;box-shadow:var(--sombra-alta);
  position:sticky;top:calc(var(--header-h) + 16px)}
.gift-rotulo{font-size:.76rem;text-transform:uppercase;letter-spacing:.12em;opacity:.9}
.gift-monto{font-family:'Fredoka';font-weight:600;font-size:2.6rem;line-height:1.1}
.gift-codigo{background:rgba(255,255,255,.95);color:var(--tinta);border-radius:10px;
  padding:.6rem 1rem;margin-top:.6rem;font-weight:700;letter-spacing:.12em;font-size:.98rem}
.gift-marca{font-family:'Fredoka';font-weight:600;margin-top:.8rem;opacity:.92}

@media(max-width:860px){
  .gift-vista{position:static;order:-1}
}


/* Las tres formas de contacto: dos son enlaces y se tienen que sentir
   tocables, la del local es informativa y no. */
.tarjeta-info h3{margin:0 0 .5rem;font-size:1.1rem}
.tarjeta-info p{color:var(--tinta-suave);font-size:.94rem;margin:0;line-height:1.6}
.tarjeta-info--link{display:block;color:inherit;text-decoration:none;
  transition:transform .2s,box-shadow .2s}
.tarjeta-info--link:hover{transform:translateY(-4px);box-shadow:var(--sombra-alta)}
.tarjeta-info .ico--wa{background:#E7F8ED;color:#25D366}
.info-accion{display:inline-block;margin-top:1rem;font-weight:700;color:var(--azul);
  font-size:.92rem}
.tarjeta-info--link:hover .info-accion{text-decoration:underline}
.info-horario{display:block;margin-top:1rem;font-size:.84rem;color:var(--tinta-suave);
  line-height:1.6}


/* ---------- Cuenta del cliente ---------- */
.modal-caja{position:relative}
.modal-x{position:absolute;top:.9rem;right:1rem;font-size:1.6rem;line-height:1;
  color:var(--tinta-suave);background:none;border:0;cursor:pointer;padding:.2rem .4rem}
.modal-x:hover{color:var(--tinta)}
.modal-pie-txt{text-align:center;font-size:.9rem;color:var(--tinta-suave);
  margin:1.2rem 0 0;line-height:2}
.modal-pie-txt button{background:none;border:0;padding:0;cursor:pointer;
  color:var(--azul);font:inherit;font-weight:700;text-decoration:underline}

.cuenta-cols{display:grid;grid-template-columns:1.4fr .6fr;gap:2.4rem;align-items:start}

/* Cada pedido es una tarjeta cerrada: la lista tiene que poder recorrerse
   de arriba abajo sabiendo dónde empieza y termina cada compra. */
.ped-caja{background:var(--blanco);border-radius:var(--r-lg);box-shadow:var(--sombra);
  padding:1.4rem 1.5rem;margin-bottom:1.1rem}
.ped-caja-top{display:flex;justify-content:space-between;align-items:flex-start;
  gap:1rem;flex-wrap:wrap;margin-bottom:1rem}
.ped-caja-top b{font-family:'Fredoka';font-weight:500;font-size:1.05rem;display:block}
.ped-fecha{color:var(--tinta-suave);font-size:.86rem}

.pill-est{padding:.28rem .8rem;border-radius:var(--r-pill);font-size:.8rem;
  font-weight:700;white-space:nowrap;background:var(--gris);color:var(--tinta)}
.pill-est--pendiente_pago{background:#FBE3C4}
.pill-est--pagado{background:#CFE6D6}
.pill-est--preparando{background:#DCEBF5}
.pill-est--enviado{background:#D8E1F0}
.pill-est--entregado{background:#C5DCC8}
.pill-est--cancelado{background:#EBEDEF;color:var(--tinta-suave)}

.ped-caja-items{display:flex;flex-direction:column;gap:.7rem;
  padding:.9rem 0;border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)}
.ped-caja-item{display:flex;gap:.9rem;align-items:center}
.ped-caja-item img{width:52px;height:52px;border-radius:10px;object-fit:cover;
  background:var(--gris-foto);flex:0 0 auto}
.ped-caja-item span{display:block;font-size:.94rem}
.ped-caja-item small{display:block;color:var(--tinta-suave);font-size:.82rem}

.ped-caja-pie{display:flex;justify-content:space-between;gap:1rem;
  padding-top:.9rem;font-size:.92rem;color:var(--tinta-suave);flex-wrap:wrap}
.ped-caja-pie b{font-family:'Fredoka';font-size:1.15rem;color:var(--tinta)}
.ped-caja-guia{margin-top:.7rem;padding:.6rem .9rem;background:var(--gris);
  border-radius:10px;font-size:.88rem}
.ped-caja-guia b{letter-spacing:.04em}

@media(max-width:860px){
  .cuenta-cols{grid-template-columns:1fr;gap:1.4rem}
}


/* El logo en el pie, no solo el nombre en mayúsculas: es lo último que se ve
   al terminar de recorrer la página y conviene que sea la marca. */
.foot-marca{display:inline-block}
.foot-marca img{width:112px;height:auto;display:block}
.foot-social a{color:var(--pie-suave);font-size:.9rem}
.foot-social a:hover{color:var(--azul)}