/*
  site.css
  Estilos compartidos por las paginas de categoria (juguetes-sensoriales,
  mordedores, peluches, sonajeros...). Cambiar el diseno de la web solo
  requiere editar este archivo: las paginas HTML y tools/amazon_import.py
  no necesitan tocarse.
*/

:root{
  --bg:#FAFAF8; --ink:#1C1C1E; --ink-soft:#6B6B70; --line:#E4E2DC; --card:#FFFFFF;
  --accent:#FF8A65;
}
*{margin:0;padding:0;box-sizing:border-box;}
body{background:var(--bg);color:var(--ink);font-family:'Inter',sans-serif;line-height:1.5;-webkit-font-smoothing:antialiased;}
h1,h2,h3{font-family:'Fredoka',sans-serif;font-weight:600;letter-spacing:-0.01em;}
a{color:inherit;text-decoration:none;}
/* Padding horizontal base del contenedor: 32px en pantallas medianas/grandes,
   24px en movil (ver media query mas abajo). Cualquier seccion que combine su
   propia clase con "wrap" (p.ej. "hero wrap", "products wrap") debe fijar su
   padding vertical con padding-top/padding-bottom, NUNCA con el shorthand
   "padding", que pisaria a 0 el padding horizontal heredado de aqui. */
.wrap{max-width:800px;margin:0 auto;padding:0 32px;}

header{position:sticky;top:0;z-index:50;background:rgba(250,250,248,0.9);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);}
nav.wrap{display:flex;align-items:center;justify-content:space-between;height:64px;}
.logo{display:flex;align-items:center;}
.logo img{height:32px;width:auto;display:block;}
.back{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:600;color:var(--ink-soft);transition:color .15s;}
.back:hover{color:var(--ink);}

.hero{padding-top:64px;padding-bottom:40px;border-bottom:1px solid var(--line);}
.eyebrow{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:600;color:var(--accent);letter-spacing:.06em;text-transform:uppercase;margin-bottom:14px;}
.hero h1{font-size:38px;}
.hero p{margin-top:14px;color:var(--ink-soft);font-size:15.5px;max-width:520px;}

/* Introduccion SEO + bloque "Que desarrollan" al inicio de cada pagina de
   categoria, entre el hero y el listado de productos. Contenido editorial
   util para las familias que ademas aporta contexto semantico para SEO.
   Se estiliza aqui (compartido) para que todas las paginas de categoria lo
   hereden; nunca con estilos inline en cada HTML. */
.seo-intro{padding-top:40px;padding-bottom:8px;}
.seo-intro > p{color:var(--ink-soft);font-size:15.5px;line-height:1.7;max-width:660px;}
.seo-intro > p + p{margin-top:14px;}
.seo-skills{margin-top:28px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px 22px;max-width:520px;}
.seo-skills h2{font-size:16.5px;margin-bottom:8px;}
.seo-skills p{color:var(--ink-soft);font-size:14px;line-height:1.6;margin-bottom:14px;}
.seo-skills ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(3,auto);grid-auto-flow:column;gap:8px 24px;}
.seo-skills li{font-size:14px;color:var(--ink);padding-left:20px;position:relative;line-height:1.4;}
.seo-skills li::before{content:'✓';position:absolute;left:0;top:0;color:var(--accent);font-weight:700;}
@media (max-width:560px){
  .seo-skills ul{grid-template-columns:1fr;}
}

/* Plantilla de cabecera de categoria v2 (piloto: vehiculos-1-ano.html).
   Clases nuevas, independientes de .hero/.eyebrow/.seo-intro/.seo-skills
   de arriba, para no alterar ninguna pagina que siga usando el diseno
   anterior. Pensada para reutilizarse en el resto de categorias
   cambiando solo: ilustracion (img), titulo (h1), subtitulo, texto y
   beneficios — la composicion y el espaciado se mantienen fijos. */
.cat-hero-2{padding-top:56px;padding-bottom:0;}
.cat-hero-2-top{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;}
.cat-hero-2-chip{
  display:inline-flex;align-items:center;gap:6px;
  font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--accent);
  background:color-mix(in srgb, var(--accent) 12%, white);
  border-radius:999px;padding:7px 14px;margin-bottom:18px;
}
.cat-hero-2-top h1{font-size:44px;line-height:1.05;}
.cat-hero-2-subtitle{margin-top:10px;color:var(--ink-soft);font-size:16px;}
.cat-hero-2-illu{position:relative;flex-shrink:0;width:170px;height:150px;display:flex;align-items:center;justify-content:center;}
.cat-hero-2-illu::before{
  content:'';position:absolute;left:50%;bottom:10px;transform:translateX(-50%);
  width:130px;height:34px;border-radius:50%;
  background:color-mix(in srgb, var(--accent) 14%, white);filter:blur(2px);
}
.cat-hero-2-illu img{position:relative;width:132px;height:auto;}
.cat-hero-2-body{margin-top:32px;color:var(--ink-soft);font-size:15.5px;line-height:1.85;max-width:640px;}

.skills-card{display:flex;flex-direction:column;margin-top:36px;margin-bottom:0;background:color-mix(in srgb, var(--accent) 5%, var(--card));border:1px solid var(--line);border-radius:14px;padding:28px;gap:16px;}
.skills-card-head{padding-bottom:0px;margin-bottom:16px;}
.skills-card-head h2{font-size:18px;margin-bottom:10px;}
.skills-card-head p{color:var(--ink-soft);font-size:14.5px;line-height:1.6;}
.skills-card-list{list-style:none;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(3,auto);grid-auto-flow:column;}
.skills-card-list li{display:flex;align-items:center;gap:12px;font-size:15px;color:var(--ink);padding:14px 0;}
.skills-card-list li:nth-child(-n+3){padding-right:12px;}
.skills-card-list li:nth-child(n+4){padding-left:12px;}
.skills-card-list li:not(:nth-child(3)):not(:nth-child(6)){border-bottom:1px solid var(--line);}
.skills-check{
  flex-shrink:0;width:26px;height:26px;border-radius:50%;
  background:color-mix(in srgb, var(--accent) 14%, white);color:var(--accent);
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;
}
@media (max-width:560px){
  .cat-hero-2-top{flex-direction:column-reverse;align-items:center;text-align:center;}
  .cat-hero-2-illu{width:120px;height:110px;}
  .cat-hero-2-illu img{width:96px;}
  .cat-hero-2-subtitle{max-width:320px;}
  .cat-hero-2-top h1{font-size:34px;}
  .skills-card{padding:20px 24px;}
  .skills-card-list{grid-template-columns:1fr;grid-auto-flow:row;grid-template-rows:none;}
  .skills-card-list li:nth-child(n+4){border-left:none;padding-left:0;margin-left:0;}
  .skills-card-list li:nth-child(-n+3){padding-right:0;}
  .skills-card-list li:not(:last-child){border-bottom:1px solid var(--line);}
}

/* Fila compacta heredada: se mantiene para no romper fichas antiguas
   todavia no migradas a .product-card en otros proyectos/paginas. */
.products{padding-top:48px;padding-bottom:80px;display:flex;flex-direction:column;}
.product{
  display:grid;grid-template-columns:1fr 80px 150px;align-items:center;gap:16px;
  padding:24px 0;border-top:1px solid var(--line);
}
.products .product:last-child{border-bottom:1px solid var(--line);}
.product-info{display:flex;align-items:center;gap:16px;}
.product-thumb{
  width:72px;height:72px;object-fit:cover;border-radius:4px;
  border:1px solid var(--line);flex-shrink:0;
  grid-column:2;justify-self:center;
}
.product-name{font-size:16px;grid-column:1;}
.product .cta{grid-column:3;justify-self:end;}

.empty{padding:24px 0;color:var(--ink-soft);font-size:14.5px;border-top:1px solid var(--line);}

/* Ficha de producto completa (formato actual).
   Espaciado vertical: --card-gap separa los bloques principales
   (imagen, nombre, descripcion, "Por que nos gusta", resenas, boton)
   por un margen fijo de 24px, EXCEPTO nombre -> descripcion, que llevan
   solo 8px porque forman parte del mismo bloque de informacion. Esa
   excepcion se logra con calc(valor_deseado - var(--card-gap)) en vez
   de un margin-top hardcodeado, para que siga dando el valor exacto
   pedido aunque --card-gap cambie en el futuro. */
.products{gap:0;}
.product-card{
  --card-gap:24px;
  display:flex;flex-direction:column;gap:var(--card-gap);
  padding:32px 0;border-top:1px solid var(--line);
}
.products .product-card:last-child{border-bottom:1px solid var(--line);}
.product-card-img{
  width:180px;height:180px;object-fit:contain;border-radius:8px;
  border:1px solid var(--line);background:#fff;align-self:flex-start;
}
.product-card-name{font-size:19px;}
.product-card-desc{
  color:var(--ink-soft);font-size:15px;max-width:560px;
  margin-top:calc(8px - var(--card-gap));
}
.product-card-why h4,
.product-card-reviews h4{font-size:14px;margin-bottom:8px;}
.product-card-why ul{list-style:none;display:flex;flex-direction:column;gap:4px;}
.product-card-why li{font-size:14.5px;}
.product-card-reviews p{color:var(--ink-soft);font-size:14.5px;max-width:560px;}
.product-card-age{font-size:13.5px;color:var(--ink-soft);}
.product-card-age strong{color:var(--ink);font-weight:600;}
.product-card .cta{align-self:flex-start;}

.cta{
  font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:600;
  white-space:nowrap;padding:9px 16px;border-radius:100px;
  background:var(--accent);color:#fff;display:inline-block;
  transition:opacity .15s;
}
.cta:hover{opacity:.85;}

/* Ficha de producto v2 (piloto: juegos-de-mesa-3-anos.html).
   Clases nuevas e independientes de .product-card de arriba, para no
   alterar ninguna otra pagina/categoria todavia con el diseno anterior.
   Objetivo: zona superior de conversion compacta y escaneable (imagen |
   edad+nombre+tarjeta unica con descripcion+ficha tecnica), seguida de
   "por que nos gusta" y "lo que destacan las familias", con el boton
   "Ver en Amazon" inmediatamente despues. La seccion .pc2-seo (SEO,
   piloto solo en el primer producto por ahora) va SIEMPRE despues del
   boton, separada con un corte visual claro, para no interferir con la
   zona de conversion. Reutiliza siempre var(--accent)/var(--ink)/
   var(--line) y las mismas tipografias del resto del sitio (Fredoka en
   titulos, Inter en cuerpo, JetBrains Mono en el boton .cta, que no se
   toca). La tarjeta "familias" usa un lila fijo (#EFE7FB/#7A6CD6, ya
   usado en otros iconos de beneficio del sitio) en vez de var(--accent),
   a proposito, para diferenciarla. */
.products-v2{padding-top:40px;padding-bottom:64px;display:flex;flex-direction:column;gap:0;}
.product-card-v2{
  display:flex;flex-direction:column;gap:26px;
  padding:36px 0;border-top:1px solid var(--line);
}
.products-v2 .product-card-v2:first-child{border-top:none;padding-top:0;}
.products-v2 .product-card-v2:last-child{padding-bottom:0;}

.pc2-top{
  display:flex;align-items:stretch;gap:20px;
  background:#fff;border:1px solid var(--line);border-radius:18px;
  box-shadow:0 2px 12px rgba(0,0,0,.04);padding:18px;
}
.pc2-media{
  flex:0 0 40%;display:flex;align-items:center;justify-content:center;
}
.pc2-media img{width:100%;max-width:180px;height:auto;object-fit:contain;}
.pc2-info{flex:1 1 60%;display:flex;flex-direction:column;gap:8px;justify-content:flex-start;}
.pc2-age{
  display:none;
}
.pc2-name{font-size:25px;line-height:1.15;color:var(--ink);}
.pc2-desc-card{
  background:transparent;border:none;padding:0;
}
.pc2-desc-card p{color:var(--ink-soft);font-size:14.5px;line-height:1.6;margin:0;}

.pc2-why,.pc2-reviews{
  background:#fff;border:1px solid var(--line);border-radius:18px;
  box-shadow:0 2px 12px rgba(0,0,0,.04);padding:14px 18px;
}
.pc2-why-head,.pc2-reviews-head{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.pc2-why-head h4,.pc2-reviews-head h4{
  font-family:'Fredoka',sans-serif;font-weight:600;font-size:17px;color:var(--ink);
}
.pc2-badge{
  flex-shrink:0;width:34px;height:34px;border-radius:50%;
  background:color-mix(in srgb, var(--accent) 14%, white);
  display:flex;align-items:center;justify-content:center;font-size:15px;
}
/* Ventajas en lista de filas, icono a la izquierda alineado con el texto. */
.pc2-why-list{list-style:none;display:flex;flex-direction:column;gap:10px;}
.pc2-why-list li{
  display:flex;flex-direction:row;align-items:center;gap:10px;
  padding:0;
  font-size:13.5px;color:var(--ink);line-height:1.4;
}
.pc2-why-check{
  flex-shrink:0;width:24px;height:24px;border-radius:50%;
  background:color-mix(in srgb, var(--accent) 12%, white);color:var(--accent);
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;
}
.pc2-reviews{background:color-mix(in srgb, #7A6CD6 7%, var(--card));display:flex;align-items:center;gap:22px;}
.pc2-reviews .pc2-badge{background:color-mix(in srgb, #7A6CD6 16%, white);}
.pc2-reviews-left{flex:1;}
.pc2-reviews-head{margin-bottom:8px;}
.pc2-reviews-left p{color:var(--ink-soft);font-size:14px;line-height:1.55;}
.pc2-reviews-illu{flex-shrink:0;width:80px;height:80px;color:#7A6CD6;opacity:.9;}
.pc2-reviews-illu svg{width:100%;height:100%;}

.pc2-cta{text-align:center;}

/* Zona SEO (piloto en un solo producto): siempre despues de .pc2-cta,
   nunca antes. Corte visual claro (borde superior + eyebrow) para que
   se perciba como una seccion aparte de la zona de conversion, con
   tipografia de lectura editorial (sin tarjetas con sombra). */
.pc2-seo{margin-top:12px;padding-top:36px;border-top:1px solid var(--line);}
.pc2-seo-eyebrow{
  font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:10px;
}
.pc2-seo-title{font-size:23px;margin-bottom:28px;color:var(--ink);}
.pc2-seo-block{margin-bottom:28px;}
.pc2-seo-block h4{font-family:'Fredoka',sans-serif;font-weight:600;font-size:17px;margin-bottom:8px;color:var(--ink);}
.pc2-seo-block p{color:var(--ink-soft);font-size:15px;line-height:1.75;max-width:680px;}
.pc2-faq{display:flex;flex-direction:column;}
.pc2-faq-item{padding:14px 0;border-top:1px solid var(--line);}
.pc2-faq-item:first-child{border-top:none;padding-top:0;}
.pc2-faq-item h5{font-size:14.5px;font-weight:600;color:var(--ink);margin-bottom:5px;}
.pc2-faq-item p{font-size:14px;color:var(--ink-soft);line-height:1.6;max-width:680px;}
.pc2-related{display:flex;gap:14px;overflow-x:auto;padding-bottom:6px;}
.pc2-related-item{flex:0 0 128px;text-decoration:none;color:inherit;}
.pc2-related-item img{
  width:100%;height:104px;object-fit:contain;background:#fff;
  border:1px solid var(--line);border-radius:12px;padding:8px;
}
.pc2-related-item span{display:block;margin-top:8px;font-size:12.5px;font-weight:600;color:var(--ink);line-height:1.3;}
.pc2-related-item:hover span{color:var(--accent);}

@media (max-width:560px){
  .pc2-top{flex-direction:column;gap:12px;padding:14px;}
  .pc2-media{flex:0 0 auto;}
  .pc2-media img{max-width:140px;height:auto;}
  .pc2-name{font-size:22px;}
  .pc2-why,.pc2-reviews{padding:14px 14px;}
  .pc2-info{gap:6px;}
  .pc2-specs{grid-template-columns:1fr;}
  .pc2-reviews{flex-direction:column;align-items:flex-start;gap:14px;}
  .pc2-reviews-illu{width:76px;height:76px;align-self:center;}
  .product-card-v2{gap:20px;padding:28px 0;}
}

/* Componente reutilizable "⭐ Favoritos de los papas" (ver tools/favorite_item_template.html).
   Ligero a proposito: sin descripcion, beneficios, precio ni boton "Ver en
   Amazon", sin subtitulo bajo el titulo y sin ningun texto/consejo despues
   de la ultima tarjeta — solo miniatura + nombre + valoracion, para una
   lectura de un vistazo. Cada fila enlaza a la ficha real dentro de la
   propia web ("<categoria>.html#ASIN"), nunca a Amazon directamente.
   Maximo 5 filas.
   --favorites-gap fija la separacion vertical entre tarjetas: 16px (cada
   fila es su propia tarjeta con marco, ver mas abajo). La separacion
   titulo -> primera tarjeta es independiente del --favorites-gap: 28px
   fijos (16px base + 12px extra), para que el titulo respire mas que el
   ritmo entre tarjetas. La separacion por encima del bloque completo
   (.favorites, entre la ultima categoria y el titulo "Favoritos de los
   papas") es de 24px, para que el bloque se perciba como una seccion
   independiente.
   Cada fila (.favorite-item) es una tarjeta con marco: fondo blanco,
   borde 1px #EAEAEA, radio 8px, sombra muy suave y padding 16px vertical
   y horizontal; termina con una flecha ">" naranja (--accent) pegada a
   la derecha via margin-left:auto.
   Cambiar solo aqui (y su copia identica en el <style> propio de
   guia-regalos-juguetes.html, que no enlaza este archivo) se propaga a
   todas las tarjetas, presentes y futuras. */
.favorites{margin-top:24px;}
.favorites-title{font-size:15px;font-weight:600;}
.favorites-list{
  --favorites-gap:16px;
  margin-top:28px;
  display:flex;flex-direction:column;gap:var(--favorites-gap);
}
.favorite-item{
  display:flex;align-items:center;gap:12px;
  color:inherit;text-decoration:none;
  background:#fff;border:1px solid #EAEAEA;border-radius:8px;
  box-shadow:0 1px 2px rgba(0,0,0,0.06);
  padding:16px;
}
.favorite-thumb{
  width:56px;height:56px;object-fit:contain;border-radius:6px;
  border:1px solid var(--line);background:#fff;flex-shrink:0;
}
.favorite-info{display:flex;flex-direction:column;gap:2px;min-width:0;}
.favorite-name{
  font-size:13.5px;font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.favorite-rating{font-size:12px;color:var(--ink-soft);}
.favorite-arrow{
  margin-left:auto;flex-shrink:0;color:var(--accent);
  font-size:20px;font-weight:700;line-height:1;
}
.favorite-item:hover .favorite-name{color:var(--accent);}

footer{padding:32px 0 56px;}
footer p{font-size:12.5px;color:var(--ink-soft);}

/* Navegacion entre categorias hermanas (misma franja de edad), al pie del
   listado de productos. Solo se enlaza si existe categoria anterior/siguiente
   en el orden de chips de esa franja: la primera categoria de la franja solo
   muestra "siguiente", la ultima solo "anterior". */
.cat-pager{display:flex;align-items:center;gap:12px;margin-top:40px;padding-top:24px;border-top:1px solid var(--line);}
.cat-pager-link{
  display:inline-flex;align-items:center;gap:6px;
  font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:600;
  color:var(--ink-soft);border:1px solid var(--line);border-radius:100px;
  padding:9px 16px;transition:border-color .15s,color .15s;
}
.cat-pager-link:hover{border-color:var(--accent);color:var(--accent);}
.cat-pager-link.next{margin-left:auto;}

/* Navegacion entre la MISMA categoria en otra franja de edad, siempre debajo
   del cat-pager. Mismo estilo de pildora (.cat-pager-link), solo cambia el
   contenedor para el espaciado. */
.age-pager{display:flex;align-items:center;gap:12px;margin-top:16px;}

/* Chip discreto de acceso a la guia Montessori, al final de cada pagina de
   categoria (tenga o no navegacion de edad). */
.mont-chip{margin-top:16px;}
.mont-chip a{
  display:inline-flex;align-items:center;gap:6px;
  font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:600;
  color:#4E8A5C;background:#EAF3EC;border:1px solid #DCEBDF;
  border-radius:100px;padding:9px 16px;transition:background .15s,border-color .15s;
}
.mont-chip a:hover{background:#DCEBDF;}

/* Bloque de navegacion inferior: navegar entre categorias y explorar mas
   franjas de edad. Aparece al final de cada pagina de categoria. */
.bottom-nav{margin-top:48px;padding-top:40px;padding-bottom:40px;border-top:1px solid var(--line);}
.bottom-nav-section{margin-bottom:40px;}
.bottom-nav-section:last-child{margin-bottom:0;}
.bottom-nav-title{font-size:13px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:24px;}

/* Grid de navegacion entre categorias: tres tarjetas con estilo discreto */
.bottom-nav-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.bottom-nav-card{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  padding:20px;background:var(--card);border:1px solid var(--line);border-radius:12px;
  text-align:center;color:inherit;transition:border-color .15s,background .15s;
}
.bottom-nav-card:hover{border-color:var(--accent);background:rgba(255,138,101,0.03);}
.bottom-nav-icon{font-size:20px;line-height:1;}
.bottom-nav-label{display:block;font-size:13px;line-height:1.5;color:var(--ink-soft);}
.bottom-nav-title-main{display:block;font-size:15px;font-weight:600;line-height:1.4;color:var(--ink);}
/* Colores por posicion en grid de navegacion */
.bottom-nav-grid .bottom-nav-card:nth-child(1){background:#F3F0FF;}.bottom-nav-grid .bottom-nav-card:nth-child(1) .bottom-nav-icon,.bottom-nav-grid .bottom-nav-card:nth-child(1) .bottom-nav-label{color:#6E40FF;}
.bottom-nav-grid .bottom-nav-card:nth-child(2){background:#FFF3ED;}.bottom-nav-grid .bottom-nav-card:nth-child(2) .bottom-nav-icon,.bottom-nav-grid .bottom-nav-card:nth-child(2) .bottom-nav-title-main{color:#FF6A00;}
.bottom-nav-grid .bottom-nav-card:nth-child(3){background:#F1F8F3;}.bottom-nav-grid .bottom-nav-card:nth-child(3) .bottom-nav-icon,.bottom-nav-grid .bottom-nav-card:nth-child(3) .bottom-nav-label{color:#2E7D32;}

/* Tarjetas de "explorar mas": tres tarjetas con icono, nombre y descripcion */
.bottom-nav-explore{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:16px;}
.bottom-nav-explore-card{
  display:flex;flex-direction:column;align-items:center;gap:12px;
  padding:20px;background:var(--card);border:1px solid var(--line);border-radius:12px;
  text-align:center;color:inherit;transition:border-color .15s,background .15s;
  text-decoration:none;
}
.bottom-nav-explore-card:hover{border-color:var(--accent);background:rgba(255,138,101,0.03);}
.bottom-nav-explore-icon{font-size:24px;line-height:1;}
.bottom-nav-explore-name{font-size:13.5px;line-height:1.4;display:block;color:var(--ink);}
.bottom-nav-explore-desc{font-size:12px;line-height:1.4;color:#6B7280;}
/* Colores por ROL (no por posicion): permite que la tarjeta de edad
   anterior no exista en algunas paginas (p.ej. no hay edad posterior a
   10 anos) sin que el color de Guia Montessori cambie por desplazarse de
   posicion en el grid. */
.bottom-nav-explore-card.bne-prev-age{background:#F3F0FF;}.bottom-nav-explore-card.bne-prev-age .bottom-nav-explore-name{color:#6E40FF;}
.bottom-nav-explore-card.bne-next-age{background:#FFF3ED;}.bottom-nav-explore-card.bne-next-age .bottom-nav-explore-name{color:#FF6A00;}
.bottom-nav-explore-card.bne-montessori{background:#F1F8F3;}.bottom-nav-explore-card.bne-montessori .bottom-nav-explore-name{color:#2E7D32;}
.bottom-nav-note{font-size:12px;color:var(--ink-soft);text-align:center;padding:0 16px;}

/* "Descubre mas juguetes para <edad>": tarjetas hacia el resto de
   categorias de la misma edad (excluyendo la actual), para reforzar el
   enlazado interno. Mismo radio, borde y tipografia que
   .bottom-nav-explore-card. En escritorio/tablet es una cuadricula que se
   adapta sola por ancho disponible (auto-fill); en movil pasa a carrusel
   horizontal con scroll-snap - los enlaces siguen existiendo en el HTML
   tal cual, solo cambia el CSS, asi que Google los sigue rastreando igual. */
.discover-more-sub{font-size:13.5px;color:var(--ink-soft);margin:-16px 0 20px;}
.discover-more-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px;}
.discover-more-card{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:18px 14px;background:var(--card);border:1px solid var(--line);border-radius:12px;
  text-align:center;color:inherit;text-decoration:none;
  transition:border-color .15s,background .15s;
}
.discover-more-card:hover{border-color:var(--accent);background:rgba(255,138,101,0.03);}
.discover-more-img{width:100%;max-width:96px;aspect-ratio:1;object-fit:contain;}
.discover-more-name{font-size:13.5px;line-height:1.35;color:#2E7D32;}
.discover-more-arrow{color:#2E7D32;font-size:15px;line-height:1;}

@media (max-width:560px){
  .wrap{padding:0 24px;}
  .hero h1{font-size:28px;}
  .product{flex-direction:column;align-items:flex-start;gap:12px;}
  .product-card-img{width:140px;height:140px;}

  /* Carrusel horizontal: la cuadricula pasa a fila con scroll-snap,
     mostrando cada tarjeta parcialmente cortada para insinuar que hay mas. */
  .discover-more-grid{
    display:flex;flex-wrap:nowrap;overflow-x:auto;gap:12px;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    margin:0 -24px;padding:2px 24px 6px;
    scrollbar-width:none;
  }
  .discover-more-grid::-webkit-scrollbar{display:none;}
  .discover-more-card{
    flex:0 0 30%;min-width:112px;scroll-snap-align:start;padding:14px 10px;
  }
}