/* Rz Juguetería — experiencia de compra responsive, sin framework. */

:root {
  --fucsia: #ff2e98;
  --fucsia-hondo: #d91472;
  --turquesa: #06b9bb;
  --turquesa-hondo: #008f92;
  --amarillo: #ffb800;
  --verde: #18bb63;
  --tinta: #20242c;
  --tinta-media: #646a73;
  --tinta-tenue: #9298a1;
  --papel: #ffffff;
  --nube: #f7fbfb;
  --rosa: #fff3f8;
  --borde: #e5e8eb;
  --radio: 18px;
  --radio-chico: 12px;
  --sombra: 0 12px 34px rgba(22, 50, 62, 0.09);
  --sombra-alta: 0 20px 42px rgba(22, 50, 62, 0.14);
  --ancho: 1360px;
  --transicion: 0.2s ease;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Nunito', 'Segoe UI', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--tinta);
  background: var(--papel);
  -webkit-font-smoothing: antialiased;
}

body::selection { background: rgba(255, 46, 152, 0.2); }
h1, h2, h3 { font-family: 'Baloo 2', 'Nunito', sans-serif; line-height: 1.05; letter-spacing: -0.025em; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { color: inherit; }
svg { width: 1.35em; height: 1.35em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.contenedor { width: min(100% - 48px, var(--ancho)); margin-inline: auto; }

/* ---------- Franja superior ---------- */

.franja { background: linear-gradient(100deg, #08bcbc, #00a8ac); color: #fff; font-size: 0.82rem; font-weight: 800; }
.franja__interior { width: min(100% - 48px, var(--ancho)); margin: auto; min-height: 36px; display: flex; align-items: center; gap: 10px; }
.franja__contacto { margin-left: auto; font-size: 0.76rem; }
.franja__contacto b { margin-inline: 10px; }

/* ---------- Cabecera ---------- */

.cabecera { background: rgba(255, 255, 255, 0.96); position: sticky; top: 0; z-index: 50; box-shadow: 0 1px 0 var(--borde); backdrop-filter: blur(14px); }
.cabecera__principal { min-height: 100px; display: grid; grid-template-columns: 260px minmax(280px, 1fr) auto; align-items: center; gap: 32px; }
.logo { display: inline-flex; align-items: center; flex: none; }
.logo img { width: 250px; height: auto; }
.menu-movil { display: none; }

.buscador { height: 48px; display: flex; border: 1px solid #d9dde1; border-radius: 9px; background: #fff; overflow: hidden; transition: var(--transicion); }
.buscador:focus-within { border-color: var(--turquesa); box-shadow: 0 0 0 3px rgba(6, 185, 187, 0.12); }
.buscador input { min-width: 0; flex: 1; border: 0; outline: 0; padding: 0 20px; color: var(--tinta); background: transparent; }
.buscador input::placeholder { color: #8d9299; }
.buscador__boton { width: 58px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--fucsia), #ff55b0); cursor: pointer; }
.buscador__boton svg { width: 1.55em; height: 1.55em; }

.cabecera__acciones { display: flex; align-items: center; gap: 26px; }
.cabecera__cercania { display: grid; gap: 5px; }
.cabecera__historia { color: var(--tinta-media); font-size: .76rem; font-weight: 800; text-underline-offset: 4px; }
.cabecera__historia:hover, .cabecera__historia:focus-visible { color: var(--turquesa-hondo); text-decoration: underline; }
.menu__empresa { display: none; }
@media (max-width: 900px) {
  .cabecera__cercania { display: none; }
  .menu__empresa { display: grid; gap: 7px; margin-top: 14px; padding: 16px 8px 0; border-top: 1px solid var(--borde); }
  .menu__empresa > span { color: var(--tinta-media); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; }
  .menu__empresa > a { padding-block: 8px; color: var(--turquesa-hondo); font-size: .9rem; font-weight: 800; }
}
.accion { position: relative; display: flex; align-items: center; gap: 10px; border: 0; background: none; padding: 6px 0; cursor: pointer; text-align: left; }
.accion > svg { width: 28px; height: 28px; color: #101217; }
.accion span { display: grid; line-height: 1.15; }
.accion strong { font-size: 0.82rem; font-weight: 900; }
.accion small { margin-top: 3px; font-size: 0.72rem; color: var(--tinta-media); }
.burbuja { position: absolute; top: -1px; left: 18px; min-width: 19px; height: 19px; padding: 0 5px; border: 2px solid #fff; border-radius: 999px; background: var(--fucsia); color: #fff; display: grid; place-items: center; font-size: 0.66rem; font-weight: 900; }

.cabecera__navegacion { border-top: 1px solid #f0f1f2; }
.menu { height: 54px; display: flex; align-items: center; gap: 8px; }
.menu__item { position: relative; display: flex; align-items: center; }
.menu__icono { width: 27px; height: 27px; margin-left: 8px; display: grid; place-items: center; border-radius: 9px; font-size: .92rem; filter: none; opacity: 1; transition: transform var(--transicion), background var(--transicion); }
.menu__item:hover .menu__icono, .menu__item:focus-within .menu__icono { transform: translateY(-1px) scale(1.05); }
.menu__item[data-seccion='juguetes'] .menu__icono { background: #fff0f7; color: #df247d; }
.menu__item[data-seccion='sensoriales'] .menu__icono { background: #eefafa; color: #008f94; }
.menu__item[data-seccion='educativos'] .menu__icono { background: #eef6ff; color: #347fc4; }
.menu__item[data-seccion='bebes'] .menu__icono { background: #f5efff; color: #8055c6; }
.menu__item[data-seccion='juegos-y-creatividad'] .menu__icono { background: #fff7e6; color: #dd8a00; }
.menu__enlace { display: inline-flex; align-items: center; gap: 7px; padding: 9px 12px; border-radius: 999px; font-size: 0.88rem; font-weight: 800; color: #373b42; white-space: nowrap; transition: var(--transicion); }
.menu__enlace:hover { color: var(--fucsia); }
.menu__enlace[aria-current='page'] { color: var(--fucsia); }
.menu__inicio[aria-current='page'] { padding-inline: 18px; background: var(--fucsia); color: #fff; }
.menu__inicio[aria-current='page']:hover { color: #fff; background: var(--fucsia-hondo); }
.menu__flecha { display: grid; place-items: center; margin-left: -12px; padding: 8px 8px 8px 3px; border: 0; background: none; color: #5e646b; cursor: pointer; }
.menu__flecha svg { width: 15px; height: 15px; transition: transform var(--transicion); }
.menu__item[data-abierto='true'] .menu__flecha svg { transform: rotate(180deg); }
.menu__ayuda { margin-left: auto; padding: 7px 14px; color: var(--turquesa-hondo); font-size: 0.84rem; font-weight: 900; }

.submenu__lista { display: grid; gap: 2px; }
.submenu { position: absolute; top: calc(100% + 10px); left: 8px; min-width: 235px; padding: 8px; display: grid; gap: 2px; background: #fff; border: 1px solid var(--borde); border-radius: var(--radio-chico); box-shadow: var(--sombra-alta); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: 0.16s ease; z-index: 60; }
.submenu::before { content: ''; position: absolute; inset: -12px 0 auto; height: 14px; }
.menu__item:hover .submenu, .menu__item:focus-within .submenu, .menu__item[data-abierto='true'] .submenu { opacity: 1; visibility: visible; transform: none; }
.submenu a { padding: 9px 12px; border-radius: 8px; color: var(--tinta-media); font-size: 0.85rem; font-weight: 800; white-space: nowrap; }
.submenu a:hover { background: var(--rosa); color: var(--fucsia-hondo); }

/* ---------- Portada ---------- */

.portada { position: relative; min-height: 500px; margin-top: 0; display: flex; align-items: center; overflow: hidden; border-radius: 0 0 28px 28px; background-color: #f7f3ee; background-image: url('/assets/hero-jugar-aprender-panoramico.webp'); background-position: right center; background-size: cover; background-repeat: no-repeat; }
@supports (background-image: image-set(url('/assets/hero-jugar-aprender-panoramico.avif') type('image/avif'))) {
  .portada { background-image: image-set(url('/assets/hero-jugar-aprender-panoramico.avif') type('image/avif'), url('/assets/hero-jugar-aprender-panoramico.webp') type('image/webp')); }
}
.portada::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255,255,255,0.99) 0%, rgba(255,255,255,0.94) 27%, rgba(255,255,255,0.46) 49%, rgba(255,255,255,0) 66%); }
.portada__contenido { position: relative; z-index: 1; width: 47%; padding: 58px 0 60px 40px; }
.portada__eyebrow, .sobrelinea { margin: 0 0 6px; color: var(--turquesa-hondo); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.72rem; font-weight: 900; }
.portada h1 { margin: 0; max-width: 700px; font-size: clamp(3.5rem, 5.25vw, 5.45rem); font-weight: 800; color: #24282d; line-height: 0.9; }
.portada h1 em { position: relative; display: inline-block; margin-top: 10px; color: var(--fucsia); font-style: normal; }
.portada h1 em::after { content: ''; position: absolute; left: 2%; right: 5%; bottom: -11px; height: 11px; border-top: 4px solid var(--turquesa); border-radius: 50%; transform: rotate(-1deg); }
.portada__contenido > p:not(.portada__eyebrow) { max-width: 42ch; margin: 24px 0 26px; font-size: 1.08rem; color: #383d43; }
.portada__estrella { position: absolute; left: 510px; top: 52px; color: var(--amarillo); font-size: 4.4rem; line-height: 1; transform: rotate(15deg); }
.portada__contenido::after { content: ''; position: absolute; left: 420px; top: 270px; width: 115px; height: 55px; border-top: 3px dashed var(--fucsia); border-radius: 50%; transform: rotate(12deg); opacity: 0.9; }

/* ---------- Botones y enlaces ---------- */

.boton { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 11px 23px; border: 0; border-radius: 9px; background: var(--fucsia); color: #fff; font-weight: 900; cursor: pointer; box-shadow: 0 8px 20px rgba(255, 46, 152, 0.18); transition: var(--transicion); }
.boton:hover { background: var(--fucsia-hondo); transform: translateY(-2px); }
.boton--turquesa { background: linear-gradient(135deg, #04bfc0, #00a8aa); box-shadow: 0 8px 20px rgba(6, 185, 187, 0.2); }
.boton--turquesa:hover { background: var(--turquesa-hondo); }
.boton--wsp { background: #1fbd63; box-shadow: none; }
.boton--wsp:hover { background: #159b4e; }
.boton--grande { width: 100%; min-height: 56px; border-radius: 12px; font-size: 1rem; }
.boton--grande svg { width: 22px; height: 22px; }
.enlace-flecha { color: var(--fucsia); font-size: 0.82rem; font-weight: 900; }
.enlace-flecha:hover { color: var(--fucsia-hondo); }

/* ---------- Bloques ---------- */

.bloque { padding: 64px 0; }
.bloque--categorias { padding-bottom: 28px; }
.bloque--productos { padding-top: 46px; background: linear-gradient(#fff, #fbfefe); }
.bloque--nube { background: #f7fbfb; }
.bloque__titulo { margin-bottom: 30px; text-align: center; }
.bloque__titulo--fila { display: flex; justify-content: space-between; align-items: end; gap: 24px; text-align: left; }
.bloque__titulo h1, .bloque__titulo h2 { margin: 0; font-size: clamp(2rem, 3vw, 2.65rem); }
.bloque__titulo > p, .bloque__titulo > div > p:not(.sobrelinea) { margin: 8px auto 0; max-width: 62ch; color: var(--tinta-media); }

/* ---------- Categorías ---------- */

.rejilla-secciones { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.tarjeta-seccion { --acento: var(--fucsia); --suave: #fff1f7; position: relative; min-width: 0; min-height: 238px; padding: 0 16px 16px; display: flex; flex-direction: column; align-items: flex-start; overflow: hidden; border: 1px solid color-mix(in srgb, var(--acento) 22%, #e8eaed); border-radius: 17px; background: var(--suave); transition: var(--transicion); }
.tarjeta-seccion--2 { --acento: #ef3b8f; --suave: #fff1f7; }
.tarjeta-seccion--3 { --acento: #04afb4; --suave: #eefbfb; }
.tarjeta-seccion--4 { --acento: #8156ca; --suave: #f6f1ff; }
.tarjeta-seccion--5 { --acento: #ef9b00; --suave: #fff8e9; }
.tarjeta-seccion:hover { transform: translateY(-5px); box-shadow: var(--sombra); }
.tarjeta-seccion__foto { align-self: stretch; height: 128px; margin: 0 -16px 12px; overflow: hidden; background: #fff; }
.tarjeta-seccion__foto picture { width: 100%; height: 100%; display: block; }
.tarjeta-seccion__foto img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.tarjeta-seccion__icono { position: absolute; top: 104px; left: 15px; width: 42px; height: 42px; display: grid; place-items: center; border: 3px solid #fff; border-radius: 50%; background: var(--acento); color: #fff; font-size: 1.1rem; }
.tarjeta-seccion strong { margin-top: 5px; color: var(--acento); font-family: 'Baloo 2', sans-serif; font-size: 1.25rem; line-height: 1.1; }
.tarjeta-seccion small { margin-top: 2px; color: var(--tinta-media); font-size: 0.72rem; font-weight: 700; }
.tarjeta-seccion__enlace { margin-top: auto; padding-top: 8px; color: var(--acento); font-size: 0.72rem; font-weight: 900; }

/* ---------- Beneficios ---------- */

.beneficios { min-height: 74px; margin-top: 0; display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; border-radius: 16px; background: #effafa; box-shadow: inset 0 0 0 1px rgba(6,185,187,0.06); }
.beneficios article { min-width: 0; padding: 12px 22px; display: flex; align-items: center; justify-content: center; gap: 13px; border-right: 1px solid #bce5e5; }
.beneficios article:last-child { border-right: 0; }
.beneficios__icono { flex: none; font-size: 1.65rem; }
.beneficios__icono--wsp { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--verde); color: #fff; font-size: 0; }
.beneficios__icono--wsp::after { content: '☎'; font-size: 1rem; }
.beneficios article div { display: grid; line-height: 1.2; }
.beneficios strong { font-size: 0.82rem; }
.beneficios small { margin-top: 3px; color: var(--tinta-media); font-size: 0.68rem; }

/* ---------- Productos ---------- */

.rejilla { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; animation: aparecer 0.25s ease both; }
@keyframes aparecer { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
.producto { position: relative; min-width: 0; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--borde); border-radius: 16px; background: #fff; transition: var(--transicion); }
.producto:hover { transform: translateY(-5px); border-color: transparent; box-shadow: var(--sombra-alta); }
.producto__enlace { display: block; }
.producto__marco { position: relative; overflow: hidden; background: linear-gradient(145deg, #fafafa, #fff); }
.producto__marco picture { display: block; aspect-ratio: 1.1; }
.producto__foto { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform 0.35s ease; }
.producto:hover .producto__foto { transform: scale(1.035); }
.etiqueta { position: absolute; top: 12px; left: 12px; max-width: calc(100% - 58px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 5px 9px; border-radius: 999px; background: rgba(255,255,255,0.94); color: var(--fucsia-hondo); font-size: 0.61rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; box-shadow: 0 3px 10px rgba(0,0,0,0.05); }
.producto__favorito { position: absolute; top: 9px; right: 11px; color: #656b70; font: 30px/1 Arial, sans-serif; text-shadow: 0 1px #fff; }
.producto__cuerpo { min-height: 155px; padding: 15px 17px 17px; display: flex; flex-direction: column; }
.producto__meta { margin: 0 0 4px; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 7px; color: var(--turquesa-hondo); text-transform: uppercase; letter-spacing: 0.07em; font-size: 0.62rem; font-weight: 900; }
/* La edad, en la tarjeta, resuelve de un vistazo la pregunta de siempre sin
   tener que abrir el producto. Va en minúscula y en el rosa de la marca para
   que se lea como un dato, no como otra categoría. */
.producto__edad { color: var(--fucsia-hondo); text-transform: none; letter-spacing: 0; font-weight: 800; white-space: nowrap; }
.producto__nombre { margin: 0; font-family: 'Nunito', sans-serif; font-size: 0.91rem; line-height: 1.25; letter-spacing: 0; }
.producto__nombre a:hover { color: var(--fucsia-hondo); }
.producto__pie { margin-top: auto; padding-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.producto__precio { font-family: 'Baloo 2', sans-serif; font-size: 1.28rem; font-weight: 800; white-space: nowrap; }
.producto__sin-precio { color: var(--tinta-tenue); font-size: 0.78rem; font-weight: 800; }
.boton--agregar { min-height: 38px; padding: 8px 13px; border-radius: 999px; background: linear-gradient(135deg, #05bfc0, #00a9ab); box-shadow: none; font-size: 0.76rem; }
.boton--agregar:hover { background: var(--turquesa-hondo); }
.boton--consultar { background: var(--tinta-media); text-decoration: none; }
.boton--consultar:hover { background: #101217; }
.producto--agotado .producto__foto { filter: grayscale(0.7); opacity: 0.72; }
.etiqueta--agotado { background: rgba(16,18,23,0.82); color: #fff; }
.boton--agregar svg { width: 17px; height: 17px; }

/* ---------- Cómo comprar ---------- */

.como-comprar { margin-top: 30px; padding: 72px 0; background: linear-gradient(135deg, #fff3f8, #effbfb); }
.como-comprar__interior { display: grid; grid-template-columns: 0.9fr 1.1fr; align-items: center; gap: 80px; }
.como-comprar h2 { margin: 0; font-size: clamp(2rem, 3vw, 2.7rem); }
.como-comprar p:not(.sobrelinea) { max-width: 56ch; margin: 12px 0 0; color: var(--tinta-media); }
.pasos { margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; list-style: none; }
.pasos li { min-width: 0; padding: 22px 14px; display: grid; justify-items: center; text-align: center; border: 1px solid rgba(255,255,255,0.8); border-radius: 15px; background: rgba(255,255,255,0.78); }
.pasos li > span { width: 36px; height: 36px; margin-bottom: 10px; display: grid; place-items: center; border-radius: 50%; background: var(--fucsia); color: #fff; font-weight: 900; }
.pasos strong { font-size: 0.9rem; }
.pasos small { color: var(--tinta-media); font-size: 0.72rem; }

/* ---------- Páginas de categoría y filtros ---------- */

.bloque--catalogo { padding-top: 0; }
.banner-categoria { --banner: url('/assets/banner-juguetes.webp'); --banner-acento: var(--fucsia); position: relative; min-height: 365px; margin-bottom: 34px; display: flex; align-items: center; overflow: hidden; border: 1px solid rgba(24, 40, 50, 0.06); border-radius: 26px; background: #fff8fb; box-shadow: var(--sombra); isolation: isolate; }
.banner-categoria::before { content: ''; position: absolute; inset: 0; z-index: -2; background-image: var(--banner); background-size: cover; background-position: center; background-repeat: no-repeat; }
.banner-categoria::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(255,255,255,0.99) 0%, rgba(255,255,255,0.95) 31%, rgba(255,255,255,0.48) 51%, rgba(255,255,255,0) 67%); }
.banner-categoria--juguetes { --banner: url('/assets/banner-juguetes-compacto.webp'); --banner-acento: var(--fucsia); }
.banner-categoria--sensoriales { --banner: url('/assets/banner-sensoriales-compacto.webp'); --banner-acento: #e8328b; }
.banner-categoria--educativos { --banner: url('/assets/banner-educativos-compacto.webp'); --banner-acento: var(--turquesa); }
.banner-categoria--bebes { --banner: url('/assets/banner-bebes-compacto.webp'); --banner-acento: #8257c7; }
.banner-categoria--juegos-y-creatividad { --banner: url('/assets/banner-creatividad-compacto.webp'); --banner-acento: #ee9b00; }
@supports (background-image: image-set(url('/assets/banner-juguetes-hd.avif') type('image/avif'))) {
  .banner-categoria--juguetes { --banner: image-set(url('/assets/banner-juguetes-compacto.avif') type('image/avif'), url('/assets/banner-juguetes-compacto.webp') type('image/webp')); }
  .banner-categoria--sensoriales { --banner: image-set(url('/assets/banner-sensoriales-compacto.avif') type('image/avif'), url('/assets/banner-sensoriales-compacto.webp') type('image/webp')); }
  .banner-categoria--educativos { --banner: image-set(url('/assets/banner-educativos-compacto.avif') type('image/avif'), url('/assets/banner-educativos-compacto.webp') type('image/webp')); }
  .banner-categoria--bebes { --banner: image-set(url('/assets/banner-bebes-compacto.avif') type('image/avif'), url('/assets/banner-bebes-compacto.webp') type('image/webp')); }
  .banner-categoria--juegos-y-creatividad { --banner: image-set(url('/assets/banner-creatividad-compacto.avif') type('image/avif'), url('/assets/banner-creatividad-compacto.webp') type('image/webp')); }
}
.banner-categoria__contenido { position: relative; z-index: 2; width: 51%; padding: 42px 0 42px 44px; }
.banner-categoria__contenido .sobrelinea { color: var(--banner-acento); }
.banner-categoria h1 { margin: 0; max-width: 10ch; font-size: clamp(3rem, 5vw, 4.9rem); line-height: 0.92; }
.banner-categoria h1 span { color: var(--banner-acento); }
.banner-categoria__contenido > p:not(.sobrelinea) { max-width: 42ch; margin: 17px 0 22px; color: #454a51; font-size: 0.96rem; }
.banner-categoria__estrella { position: absolute; z-index: 1; left: 43%; top: 35px; color: var(--amarillo); font: 66px/1 'Nunito', sans-serif; transform: rotate(14deg); }
.banner-categoria__trazo { position: absolute; z-index: 1; left: 35%; top: 195px; width: 150px; height: 70px; color: var(--banner-acento); fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 5 8; opacity: 0.85; }
.catalogo-cabecera { margin-bottom: 4px; display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.catalogo-cabecera h2 { margin: 0; font-size: clamp(1.65rem, 2.5vw, 2.15rem); }
.conteo-productos { margin: 0; color: var(--tinta-media); font-size: 0.88rem; }
.conteo-productos b { color: var(--fucsia); }
.miga { padding: 24px 0 18px; display: flex; align-items: center; gap: 8px; color: var(--tinta-tenue); font-size: 0.78rem; }
.miga a:hover { color: var(--fucsia); }
.miga b { max-width: 55ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tinta-media); font-weight: 700; }
/* ---------- Sugerencias del buscador ---------- */

/* El desplegable se sale de la caja: aquí manda overflow visible. */
.buscador { position: relative; overflow: visible; }
.buscador__boton { padding: 0; border: 0; border-radius: 0 8px 8px 0; }
.sugerencias { position: absolute; z-index: 60; top: calc(100% + 8px); left: 0; right: 0; max-height: min(70vh, 460px); padding: 8px; overflow-y: auto; border: 1px solid var(--borde); border-radius: 14px; background: #fff; box-shadow: var(--sombra-alta); }
.sugerencias__titulo { margin: 6px 10px 4px; color: var(--tinta-tenue); font-size: 0.68rem; font-weight: 900; letter-spacing: 0.07em; text-transform: uppercase; }
.sugerencia { display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: 10px; transition: var(--transicion); }
.sugerencia:hover, .sugerencia[aria-selected='true'] { background: var(--rosa); }
.sugerencia__foto { width: 46px; height: 46px; flex: none; object-fit: cover; border: 1px solid var(--borde); border-radius: 9px; background: #fff; }
.sugerencia__icono { width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 9px; background: #eefbfb; color: var(--turquesa-hondo); font-size: 1.1rem; }
.sugerencia__texto { min-width: 0; flex: 1; display: grid; }
.sugerencia__texto b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.88rem; }
.sugerencia__texto small { color: var(--tinta-tenue); font-size: 0.72rem; font-weight: 700; }
.sugerencia__precio { flex: none; color: var(--fucsia); font-weight: 900; font-size: 0.88rem; }
.sugerencias__todos { display: block; margin-top: 4px; padding: 11px 10px; border-top: 1px solid var(--borde); color: var(--turquesa-hondo); font-size: 0.82rem; font-weight: 900; text-align: center; border-radius: 0 0 10px 10px; }
.sugerencias__todos:hover, .sugerencias__todos[aria-selected='true'] { background: #eefbfb; }
.sugerencias__vacio { margin: 0; padding: 16px 12px; color: var(--tinta-media); font-size: 0.85rem; text-align: center; }
.sugerencias__vacio a { color: var(--fucsia); font-weight: 800; }

.atajos { margin-bottom: 22px; }
.atajos__titulo { margin: 0 0 9px; color: var(--tinta-tenue); font-size: 0.72rem; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; }
.atajos__lista { display: flex; flex-wrap: wrap; gap: 9px; }
.atajo { display: inline-flex; align-items: baseline; gap: 7px; padding: 9px 16px; border: 1px solid var(--borde); border-radius: 999px; background: #fff; font-size: 0.84rem; font-weight: 800; transition: var(--transicion); }
.atajo:hover { border-color: var(--turquesa); color: var(--turquesa-hondo); }
.atajo small { color: var(--tinta-tenue); font-weight: 700; font-size: 0.72rem; }

/* ---------- Catálogo con panel de filtros ---------- */

.catalogo { margin: 18px 0 40px; display: grid; grid-template-columns: 272px minmax(0, 1fr); gap: 30px; align-items: start; }
.catalogo__resultados { min-width: 0; }
.catalogo .rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.panel-filtros { position: sticky; top: 182px; padding: 22px 20px; border: 1px solid var(--borde); border-radius: 18px; background: #fff; box-shadow: var(--sombra); }
.panel-filtros__abrir { display: none; }
.panel-filtros__cuerpo { display: grid; gap: 22px; }

.campo-busca { position: relative; display: block; }
.campo-busca input { width: 100%; min-height: 44px; padding: 10px 42px 10px 15px; border: 1px solid var(--borde); border-radius: 999px; background: var(--nube); font-size: 0.88rem; }
.campo-busca input:focus { outline: 2px solid var(--turquesa); outline-offset: 1px; background: #fff; }
.campo-busca span { position: absolute; top: 50%; right: 14px; translate: 0 -50%; color: var(--turquesa-hondo); pointer-events: none; }
.campo-busca svg { width: 1.05em; height: 1.05em; }

.grupo-filtro { display: grid; gap: 11px; }
.grupo-filtro__titulo { margin: 0; padding-bottom: 8px; border-bottom: 2px solid var(--rosa); color: var(--fucsia); font-size: 0.82rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.grupo-filtro__todas { margin: 0; display: flex; justify-content: space-between; gap: 10px; font-weight: 800; font-size: 0.88rem; }
.grupo-filtro__todas span { color: var(--tinta-tenue); font-weight: 700; }

.campo-select { width: 100%; min-height: 44px; padding: 10px 14px; border: 1px solid var(--borde); border-radius: 11px; background: #fff; font-size: 0.88rem; font-weight: 700; cursor: pointer; }
.campo-select:focus { outline: 2px solid var(--turquesa); outline-offset: 1px; }

.rango { width: 100%; height: 6px; margin: 4px 0 0; -webkit-appearance: none; appearance: none; border-radius: 999px; background: linear-gradient(90deg, var(--turquesa), var(--fucsia)); cursor: pointer; }
.rango::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border: 3px solid #fff; border-radius: 50%; background: var(--fucsia); box-shadow: 0 3px 9px rgba(255, 46, 152, 0.4); cursor: grab; }
.rango::-moz-range-thumb { width: 22px; height: 22px; border: 3px solid #fff; border-radius: 50%; background: var(--fucsia); box-shadow: 0 3px 9px rgba(255, 46, 152, 0.4); cursor: grab; }
.rango:focus-visible { outline: 2px solid var(--turquesa); outline-offset: 4px; }
.rango__valores { margin: 0; display: flex; justify-content: space-between; color: var(--tinta-tenue); font-size: 0.82rem; font-weight: 800; }
.rango__valores b { color: var(--fucsia); }

.lista-subs { margin: 0; padding: 0; list-style: none; display: grid; gap: 3px; }
.casilla { display: flex; align-items: center; gap: 10px; padding: 8px 9px; border-radius: 10px; cursor: pointer; transition: var(--transicion); }
.casilla:hover { background: var(--nube); }
.casilla input { position: absolute; opacity: 0; width: 0; height: 0; }
.casilla__marca { flex: none; width: 19px; height: 19px; display: grid; place-items: center; border: 2px solid #cfd5da; border-radius: 6px; background: #fff; transition: var(--transicion); }
.casilla__marca::after { content: '✓'; color: #fff; font-size: 0.72rem; font-weight: 900; opacity: 0; }
.casilla input:checked + .casilla__marca { border-color: var(--fucsia); background: var(--fucsia); }
.casilla input:checked + .casilla__marca::after { opacity: 1; }
.casilla input:focus-visible + .casilla__marca { outline: 2px solid var(--turquesa); outline-offset: 2px; }
.casilla__texto { flex: 1; color: var(--tinta-media); font-size: 0.85rem; font-weight: 700; }
.casilla input:checked ~ .casilla__texto { color: var(--tinta); }
.casilla__cuenta { color: var(--tinta-tenue); font-size: 0.78rem; font-weight: 800; }
.casilla[data-vacia='true'] { opacity: 0.42; }

.boton--limpiar { width: 100%; background: linear-gradient(135deg, #ff45a3, var(--fucsia-hondo)); font-size: 0.84rem; }
.panel-filtros [hidden] { display: none; }

/* ---------- Ficha de producto ---------- */

.ficha { padding: 4px 0 60px; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr); gap: 58px; align-items: start; }
.ficha__galeria { min-width: 0; }
.ficha__foto { width: 100%; aspect-ratio: 1.08; object-fit: contain; border: 1px solid var(--borde); border-radius: 18px; background: #fff; }
.ficha__picture { display: block; }
.ficha__miniaturas { margin-top: 12px; display: flex; gap: 10px; overflow-x: auto; }
.ficha__miniaturas picture { flex: none; display: block; }
.ficha__miniaturas img { flex: none; width: 80px; height: 80px; object-fit: cover; border: 2px solid var(--borde); border-radius: 11px; cursor: pointer; }
.ficha__miniaturas img[aria-current='true'] { border-color: var(--turquesa); }
.ficha__datos { position: sticky; top: 182px; padding: 30px; border: 1px solid var(--borde); border-radius: 18px; background: #fff; box-shadow: var(--sombra); }
.ficha h1 { margin: 3px 0 14px; font-size: clamp(2rem, 3.4vw, 3rem); }
.ficha__precio { margin: 0; color: var(--fucsia); font-family: 'Baloo 2', sans-serif; font-size: 2.35rem; font-weight: 800; }
.ficha__stock, .linea__stock { color: var(--verde); font-size: 0.82rem; font-weight: 900; }
.ficha__stock--agotado, .linea__stock--agotado { color: var(--tinta-media); }
.ficha__stock { margin: 0 0 16px; }
.etiquetas { margin-bottom: 16px; display: flex; flex-wrap: wrap; gap: 7px; }
.etiqueta--plana { position: static; max-width: none; background: var(--rosa); box-shadow: none; }
.ficha__texto { margin: 0 0 22px; color: var(--tinta-media); }
.ficha__confianza { margin-top: 17px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.ficha__confianza span { padding: 9px 5px; border-radius: 9px; background: #f3fbfb; text-align: center; color: var(--tinta-media); font-size: 0.67rem; font-weight: 800; }
.ficha__nota { margin: 12px 0 0; color: var(--tinta-tenue); text-align: center; font-size: 0.74rem; }

/* ---------- Carrito ---------- */

.panel { position: fixed; inset: 0 0 0 auto; z-index: 100; width: min(500px, 100%); display: flex; flex-direction: column; background: #fff; box-shadow: -18px 0 55px rgba(25,35,44,0.18); transform: translateX(105%); transition: transform 0.3s ease; }
.panel[data-abierto='true'] { transform: none; }
.panel__cabecera { min-height: 92px; padding: 18px 24px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--borde); background: linear-gradient(135deg, #f0fafa, #fff); }
.panel__cabecera small { color: var(--turquesa-hondo); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.62rem; font-weight: 900; }
.panel__cabecera h2 { margin: 1px 0 0; font-size: 1.75rem; }
.panel__cabecera button { width: 40px; height: 40px; border: 1px solid var(--borde); border-radius: 50%; background: #fff; font-size: 1.55rem; line-height: 1; cursor: pointer; }
.panel__lista { flex: 1; overflow-y: auto; padding: 10px 24px; }
.panel__pie { padding: 20px 24px; display: grid; gap: 10px; border-top: 1px solid var(--borde); background: #fff; }
.linea { position: relative; padding: 16px 24px 16px 0; display: grid; grid-template-columns: 90px 1fr; gap: 14px; border-bottom: 1px solid var(--borde); }
.linea picture { grid-row: span 2; display: block; }
.linea img { width: 90px; height: 90px; object-fit: contain; border-radius: 12px; background: #fafafa; }
.linea__datos { min-width: 0; padding-right: 4px; }
.linea__nombre { font-size: 0.9rem; font-weight: 900; line-height: 1.25; }
.linea__precio { margin: 3px 0; font-family: 'Baloo 2', sans-serif; font-size: 1.15rem; font-weight: 800; }
.contador { grid-column: 2; display: flex; align-items: center; gap: 11px; }
.contador button { width: 31px; height: 31px; padding: 0; border: 1px solid #dfe2e5; border-radius: 9px; background: #fff; cursor: pointer; }
.contador button:hover { border-color: var(--turquesa); color: var(--turquesa-hondo); }
.linea__eliminar { position: absolute; top: 14px; right: 0; border: 0; background: none; color: var(--tinta-tenue); font-size: 1.25rem; cursor: pointer; }
.total { display: flex; align-items: baseline; justify-content: space-between; font-family: 'Baloo 2', sans-serif; font-size: 1.35rem; font-weight: 800; }
.total span:last-child { color: var(--fucsia); font-size: 1.8rem; }
.panel__seguridad { margin: 0; text-align: center; color: var(--tinta-tenue); font-size: 0.72rem; }
.enlace-sutil { border: 0; background: none; color: var(--tinta-tenue); text-decoration: underline; font-size: 0.76rem; cursor: pointer; }
.ayuda__entrada { max-width: 62ch; color: var(--tinta-media); }
.pasos--ayuda { margin-bottom: 34px; }
.pasos--ayuda li { border-color: #eceff1; background: #f7fbfb; }
.ayuda__rejilla { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.ayuda__caja { padding: 26px 28px; border: 1px solid #eceff1; border-radius: 18px; background: #fff; }
.ayuda__caja h2 { margin: 0 0 12px; font-size: 1.15rem; }
.ayuda__caja p { margin: 0 0 12px; color: var(--tinta-media); font-size: 0.92rem; }
.ayuda__caja p:last-of-type { margin-bottom: 0; }
.ayuda__caja .boton { margin-top: 16px; }
.ayuda__aviso { padding: 12px 14px; border-radius: 12px; background: #f7fbfb; color: var(--tinta) !important; font-size: 0.85rem !important; }

.error-404 { padding: 30px 0 10px; text-align: center; }
.error-404 h1 { margin: 6px 0 10px; }
.error-404__texto { max-width: 52ch; margin: 0 auto 22px; color: var(--tinta-media); }
.error-404__acciones { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-bottom: 38px; }

.vacio { padding: 54px 0; color: var(--tinta-tenue); text-align: center; }
.vacio--carrito { min-height: 70vh; display: grid; place-content: center; justify-items: center; }
.vacio--carrito > span { width: 74px; height: 74px; margin-bottom: 15px; display: grid; place-items: center; border-radius: 50%; background: #eefafa; color: var(--turquesa); }
.vacio--carrito > span svg { width: 34px; height: 34px; }
.vacio--carrito strong { color: var(--tinta); }
.vacio--carrito p { max-width: 30ch; margin: 6px 0 18px; font-size: 0.85rem; }
.velo { position: fixed; inset: 0; z-index: 90; background: rgba(20,28,34,0.42); opacity: 0; pointer-events: none; transition: opacity 0.28s; }
.velo[data-abierto='true'] { opacity: 1; pointer-events: auto; }

/* ---------- WhatsApp y pie ---------- */
.panel > [hidden], .checkout [hidden] { display: none !important; }
.checkout { min-height: 0; overflow-y: auto; padding: 22px 24px 32px; }
.checkout h3 { margin: 4px 0 14px; font-size: 1.7rem; }
.checkout .sobrelinea { margin-top: 18px; }
.checkout fieldset { padding: 0; margin: 22px 0; border: 0; display: grid; gap: 12px; min-width: 0; }
.checkout legend { font-weight: 900; margin-bottom: 12px; }
.checkout label { display: grid; gap: 5px; font-size: .85rem; font-weight: 800; }
.checkout label > small { color: #68767c; font-size: .72rem; font-weight: 600; line-height: 1.35; }
.checkout input:not([type='checkbox']), .checkout select { width: 100%; min-height: 44px; border: 1px solid #cdd9df; border-radius: 9px; background: #fff; color: var(--tinta); padding: 10px 12px; font: inherit; font-size: 16px; }
.checkout input:focus, .checkout select:focus { outline: 2px solid var(--turquesa-hondo); outline-offset: 2px; }
.checkout-aviso { padding: 12px; border-radius: 10px; background: #fff6df; color: #664b12; font-size: .83rem; }
#checkout-direccion { display: grid; gap: 12px; }
#checkout-entrega, .checkout-privacidad { color: #53636c; font-size: .78rem; line-height: 1.5; }
.checkout-resumen { background: #effafa; border: 1px solid #d1eaea; border-radius: 14px; padding: 16px; }
.checkout-resumen h4 { margin: 0 0 12px; }
.checkout-resumen > p { display: flex; justify-content: space-between; gap: 12px; font-size: .87rem; }
#checkout-productos { font-size: .8rem; border-bottom: 1px solid #cfe0e0; }
.checkout-total { border-top: 1px solid #cfe0e0; padding-top: 12px; font-weight: 900; }
.checkout .checkout-consentimiento { display: flex; align-items: flex-start; gap: 10px; margin-top: 20px; font-weight: 600; }
.checkout-consentimiento input { width: 20px; height: 20px; flex: none; }
#checkout-error { color: #aa1745; font-size: .85rem; }
.checkout-reintentar { margin: 0 0 12px; color: #08777d; font-weight: 900; }
#checkout-pagar { width: 100%; }
#checkout-pagar:disabled { background: #e3e8eb; color: #4d5b65; box-shadow: none; cursor: not-allowed; }
.pago-resultado { max-width: 650px; margin: 8vh auto; padding: 30px; border: 1px solid var(--borde); border-radius: 22px; background: #effafa; }
.checkout-pagina { max-width: 1120px; padding-block: 32px 64px; }
.checkout-pagina > h1 { margin: 12px 0 6px; font-size: clamp(2rem, 4vw, 3rem); }
.checkout-pagina > p { color: var(--tinta-media); margin: 0 0 24px; }
.checkout-pasos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 0; margin: 22px 0; list-style: none; color: #64747b; font-size: .78rem; font-weight: 800; }
.checkout-pasos li { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 12px; background: #f1f5f6; }
.checkout-pasos span { width: 25px; height: 25px; display: grid; place-items: center; flex: none; border-radius: 50%; background: #dfe7e9; }
.checkout-pasos .activo { color: #086f75; background: #e2f8f8; }
.checkout-pasos .activo span { background: #08b9bb; color: #fff; }
.checkout--pagina { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 32px; overflow: visible; padding: 0; align-items: start; }
.checkout-pagina [hidden] { display: none !important; }
.checkout-datos { padding: 24px 30px; border: 1px solid var(--borde); border-radius: 20px; background: #fff; }
.checkout-datos .checkout-aviso { margin-top: 0; }
.checkout--pagina fieldset { margin-block: 24px; }
.checkout--pagina fieldset:last-child { margin-bottom: 0; }
.checkout-pago { padding: 24px; border: 1px solid #d1eaea; border-radius: 20px; background: #f5fcfc; }
.checkout-pago .checkout-resumen { padding: 0; border: 0; background: transparent; }
.checkout-resumen h2 { margin: 0 0 8px; font-size: 1.5rem; }
body[data-pagina='checkout'] { background: radial-gradient(ellipse at 0 22%, #e2f8fa 0, transparent 42%), radial-gradient(ellipse at 100% 65%, #fff0f7 0, transparent 40%), #fcfefe; }
.checkout-pagina > h1 { color: #153a45; }
.checkout-datos { border-top: 5px solid var(--turquesa); box-shadow: 0 12px 32px rgba(17,99,108,.06); }
.checkout--pagina legend { color: #08777d; background: #e8f8f8; padding: 6px 12px; border-radius: 9px; }
.checkout--pagina fieldset:nth-of-type(2) legend { color: #ad2369; background: #fff0f7; }
.checkout-pago { border-top: 5px solid var(--fucsia); background: linear-gradient(145deg, #eafafa, #f5fcfc 60%, #fff1f8); box-shadow: 0 12px 32px rgba(17,99,108,.06); }
#checkout-productos { display: grid; gap: 10px; padding-block: 16px; }
.checkout-producto { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px; background: #fff; border: 1px solid #d5e9e9; border-radius: 13px; color: var(--tinta); transition: border-color .2s, box-shadow .2s; }
.checkout-producto:hover, .checkout-producto:focus-visible { border-color: var(--turquesa); box-shadow: 0 4px 12px rgba(6,185,187,.12); outline: 2px solid var(--turquesa); outline-offset: 2px; }
.checkout-producto img { display: block; width: 72px; height: 72px; object-fit: contain; border-radius: 8px; background: #fff; }
.checkout-producto > span { min-width: 0; display: grid; gap: 4px; }
.checkout-producto strong { font-size: .85rem; line-height: 1.35; }
.checkout-producto small { color: #53636c; font-size: .73rem; }
.checkout-producto b { color: #af246b; font-size: .92rem; }
.checkout-total { padding: 14px 12px; border-radius: 10px; background: #d8f2f2; color: #164d55; }
.checkout-envio-estado { display: block !important; margin: -5px 0 12px; padding: 10px 12px; border-radius: 10px; background: #fff; color: #53636c; line-height: 1.4; }
.checkout-confianza { display: grid; gap: 7px; margin-top: 16px; color: #53636c; font-size: .75rem; font-weight: 700; }
.checkout-pago { position: sticky; top: 18px; }
.checkout select:disabled { background: #f2f6f7; color: #68767c; }
@media (max-width: 760px) {
  .checkout--pagina { grid-template-columns: 1fr; gap: 20px; }
  .checkout-datos, .checkout-pago { padding: 20px; }
  .checkout-pagina { padding-block: 24px 40px; }
  .checkout-pago { position: static; }
  .checkout-pasos { gap: 5px; font-size: .68rem; }
  .checkout-pasos li { padding: 7px; gap: 5px; }
  .checkout-pasos span { width: 22px; height: 22px; }
}

.wsp-flotante { position: fixed; right: 24px; bottom: 24px; z-index: 80; width: 58px; height: 58px; display: grid; place-items: center; border: 4px solid #fff; border-radius: 50%; background: #22c864; color: #fff; box-shadow: 0 8px 25px rgba(19,132,64,0.28); font-size: 1.55rem; font-weight: 900; transform: rotate(-20deg); }
.wsp-flotante:hover { transform: rotate(-20deg) scale(1.06); }
.pie { margin-top: 0; padding: 26px 0 12px; background: linear-gradient(110deg, #e2f8fa, #cef1f3); color: var(--tinta); }
.pie__rejilla { display: grid; grid-template-columns: 1.3fr 0.75fr 1fr 1.15fr; gap: 32px; }
.pie h3 { margin: 0 0 7px; font-size: .92rem; }
.pie ul { margin: 0; padding: 0; display: grid; gap: 4px; list-style: none; color: #555b64; font-size: 0.82rem; }
.pie a:hover { color: var(--fucsia); }
.pie__lema { max-width: 38ch; margin: 0; color: #555b64; font-size: 0.82rem; line-height: 1.5; }
.logo--pie { display: inline-flex; width: fit-content; margin-bottom: 12px; padding: 8px 12px; border-radius: 14px; background: #fff; }
.logo--pie img { width: 180px; max-width: 100%; height: auto; }
.pie .boton { margin-top: 10px; padding-inline: 18px; font-size: 0.8rem; color: #fff; }
.pie__legal { margin-top: 16px; padding-top: 10px; border-top: 1px solid rgba(32,36,44,.1); color: #555b64; text-align: center; font-size: 0.75rem; }
.pie__legal nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin-bottom: 7px; }
.pie__legal nav a { color: #245d63; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.legal { max-width: 900px; margin-inline: auto; }
.legal__aviso { margin: 0 0 28px; padding: 18px 20px; border-left: 5px solid var(--turquesa); border-radius: 12px; background: #eafafa; color: #315d62; }
.legal article { margin-bottom: 18px; padding: 24px 28px; border: 1px solid var(--borde); border-radius: 18px; background: #fff; box-shadow: 0 8px 24px rgba(17,99,108,.05); }
.legal article h2 { margin: 0 0 10px; color: #174b53; font-size: 1.3rem; }
.legal article h3 { margin: 18px 0 8px; font-size: 1rem; }
.legal article p, .legal article li { color: var(--tinta-media); line-height: 1.7; }
.legal article p { margin: 0 0 10px; }
.legal article p:last-child { margin-bottom: 0; }
.legal article ul { margin: 8px 0 0; padding-left: 22px; }
.legal a { color: var(--turquesa-hondo); font-weight: 800; }
.legal__actualizacion { color: #65777b; font-size: .82rem; }

/* ---------- Responsive ---------- */

/* ---------- Descripción y ficha técnica ---------- */

.ficha__masdetalles { display: inline-block; margin: -12px 0 20px; color: var(--turquesa-hondo); font-size: 0.82rem; font-weight: 800; }
.ficha__masdetalles:hover { color: var(--fucsia); }

.detalle { margin: 0 0 64px; border: 1px solid var(--borde); border-radius: 18px; background: #fff; box-shadow: var(--sombra); overflow: hidden; }
.detalle__pestanas { display: flex; gap: 4px; padding: 0 10px; border-bottom: 1px solid var(--borde); background: var(--nube); overflow-x: auto; }
.detalle__pestana { padding: 16px 20px; border: 0; border-bottom: 3px solid transparent; background: none; color: var(--tinta-media); font-family: 'Baloo 2', sans-serif; font-size: 1rem; font-weight: 700; white-space: nowrap; cursor: pointer; transition: var(--transicion); }
.detalle__pestana:hover { color: var(--tinta); }
.detalle__pestana[aria-selected='true'] { color: var(--fucsia); border-bottom-color: var(--fucsia); }
.detalle__panel { padding: 32px 34px 36px; }

.desc__titulo { margin: 26px 0 12px; display: flex; align-items: center; gap: 9px; font-size: 1.16rem; }
.desc__panel > .desc__titulo:first-child, .detalle__panel > .desc__titulo:first-child { margin-top: 0; }
.desc__icono { font-size: 1.1em; line-height: 1; }
.desc__parrafo { margin: 0 0 14px; max-width: 74ch; color: var(--tinta-media); }
.desc__lista { margin: 0 0 22px; padding: 0; list-style: none; display: grid; gap: 5px; }
.desc__lista li { display: flex; gap: 10px; align-items: flex-start; max-width: 74ch; padding: 8px 10px; border-radius: 10px; background: #fafcfc; color: var(--tinta-media); line-height: 1.5; }
.desc__lista li::before { content: '✓'; flex: none; width: 22px; height: 22px; margin-top: 1px; display: grid; place-items: center; border-radius: 50%; background: var(--rosa); color: var(--fucsia); font-size: 0.72rem; font-weight: 900; }
.desc__lista li:has(.desc__marca)::before { display: none; }
.desc__marca { flex: none; width: 22px; margin-top: 1px; text-align: center; line-height: 1.35; }

.tabla-datos { width: 100%; max-width: 720px; border-collapse: collapse; }
.tabla-datos th, .tabla-datos td { padding: 13px 16px; border: 1px solid var(--borde); text-align: left; vertical-align: top; }
.tabla-datos th { width: 34%; background: var(--nube); color: var(--tinta); font-weight: 800; }
.tabla-datos td { color: var(--tinta-media); }
.tabla-datos tr:first-child th { border-top-left-radius: 10px; }
.tabla-datos tr:first-child td { border-top-right-radius: 10px; }

@media (max-width: 1180px) {
  .cabecera__principal { grid-template-columns: 180px minmax(240px, 1fr) auto; gap: 24px; }
  .logo img { width: 200px; }
  .cabecera__acciones { gap: 14px; }
  .menu { gap: 2px; }
  .menu__icono { display: none; }
  .menu__enlace { padding-inline: 9px; font-size: 0.82rem; }
  .portada__contenido { width: 53%; }
  .portada__estrella { display: none; }
  .rejilla-secciones { grid-template-columns: repeat(5, minmax(170px, 1fr)); overflow-x: auto; padding-bottom: 8px; }
  .tarjeta-seccion { min-width: 190px; }
  .catalogo { grid-template-columns: 236px minmax(0, 1fr); gap: 22px; }
  .panel-filtros { padding: 18px 16px; }
}

@media (max-width: 900px) {
  /* El panel pasa a ser un desplegable sobre la rejilla. */
  .catalogo { grid-template-columns: 1fr; gap: 16px; }
  .catalogo .rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .panel-filtros { position: static; padding: 0; border: 0; background: none; box-shadow: none; }
  .panel-filtros__abrir { width: 100%; min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 10px; border: 1px solid var(--borde); border-radius: 12px; background: #fff; font-family: 'Baloo 2', sans-serif; font-size: 1rem; font-weight: 700; cursor: pointer; }
  .panel-filtros__abrir::before { content: '⚙'; color: var(--fucsia); }
  .panel-filtros__cuenta { min-width: 22px; padding: 2px 7px; border-radius: 999px; background: var(--fucsia); color: #fff; font-size: 0.74rem; }
  .panel-filtros__cuerpo { display: none; margin-top: 12px; padding: 18px 16px; border: 1px solid var(--borde); border-radius: 16px; background: #fff; box-shadow: var(--sombra); }
  .panel-filtros[data-abierto='true'] .panel-filtros__cuerpo { display: grid; }
  .panel-filtros[data-abierto='true'] .panel-filtros__abrir { border-color: var(--fucsia); color: var(--fucsia); }
  .contenedor { width: min(100% - 32px, var(--ancho)); }
  .franja__interior { width: min(100% - 32px, var(--ancho)); justify-content: center; }
  .franja__contacto { display: none; }
  .cabecera__principal { min-height: auto; padding-block: 12px; grid-template-columns: 44px 1fr auto; gap: 10px; }
  .menu-movil { width: 40px; height: 40px; padding: 9px 5px; display: flex; flex-direction: column; justify-content: space-around; border: 0; background: none; cursor: pointer; }
  .menu-movil span { width: 28px; height: 2px; border-radius: 2px; background: var(--tinta); }
  .logo { justify-self: center; }
  .logo img { width: 170px; }
  .buscador { grid-column: 1 / -1; grid-row: 2; width: 100%; height: 46px; border-radius: 999px; }
  .buscador__boton { width: 52px; background: transparent; color: var(--tinta); }
  .cabecera__acciones { gap: 3px; }
  .accion { width: 42px; height: 42px; padding: 7px; display: grid; place-items: center; }
  .accion > svg { width: 27px; height: 27px; }
  .accion > span { display: none; }
  .accion--cuenta { display: none; }
  .burbuja { left: auto; right: -1px; top: -2px; }
  .cabecera__navegacion { border: 0; }
  .menu { position: absolute; top: 100%; left: 0; right: 0; height: auto; max-height: calc(100vh - 150px); padding: 14px 18px 20px; display: none; align-items: stretch; flex-direction: column; overflow-y: auto; border-top: 1px solid var(--borde); background: #fff; box-shadow: var(--sombra-alta); }
  .menu[data-abierto='true'] { display: flex; }
  .menu > * { flex: 0 0 auto; }
  .menu__item { display: grid; grid-template-columns: 1fr auto; border-bottom: 1px solid #f0f1f2; }
  .menu__icono { display: none; }
  .menu__enlace, .menu__inicio[aria-current='page'] { justify-content: flex-start; padding: 11px 8px; background: transparent; color: var(--tinta); }
  .menu__enlace[aria-current='page'], .menu__inicio[aria-current='page'] { color: var(--fucsia); }
  .menu__flecha { margin: 0; }
  .submenu { position: static; grid-column: 1 / -1; display: grid; grid-template-rows: 0fr; box-shadow: none; border: 0; padding: 0 0 0 12px; opacity: 0; visibility: visible; transform: none; transition: grid-template-rows 0.28s ease, opacity 0.22s ease, padding-bottom 0.28s ease; }
  .submenu__lista { overflow: hidden; }
  .menu__item:hover .submenu, .menu__item:focus-within .submenu { grid-template-rows: 0fr; opacity: 0; }
  .menu__item[data-abierto='true'] .submenu { grid-template-rows: 1fr; padding-bottom: 8px; opacity: 1; }
  .submenu a { padding: 10px 12px; white-space: normal; }
  .menu { scroll-behavior: smooth; -webkit-overflow-scrolling: touch; }
  .menu__ayuda { margin: 6px 0 0; text-align: center; }
  /* El panel entra deslizando y se puede arrastrar hacia la izquierda para
     cerrarlo; el arrastre solo mueve transform y opacidad, que el teléfono
     resuelve sin repintar el menú entero. */
  .cabecera { backdrop-filter: none; }
  .menu[data-abierto='true'] { animation: menu-entra 0.2s ease-out; will-change: transform; }
  .menu[data-arrastrando='true'] { animation: none; transition: none; }
  .menu[data-arrastrando='false'] { transition: transform 0.22s ease, opacity 0.22s ease; }
  @keyframes menu-entra { from { opacity: 0; transform: translateY(-10px); } }
  .submenu a { padding: 8px 12px; }
  .menu-movil span { transition: transform 0.22s ease, opacity 0.16s ease; }
  .menu-movil[aria-expanded='true'] span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
  .menu-movil[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
  .menu-movil[aria-expanded='true'] span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }
  .portada { width: 100%; min-height: 610px; border-radius: 0 0 24px 24px; align-items: flex-start; background-position: right center; background-size: cover; }
  .portada::before { background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.94) 27%, rgba(255,255,255,0.18) 57%, rgba(255,255,255,0) 74%); }
  .portada__contenido { width: 100%; padding: 38px 28px; }
  .portada h1 { font-size: clamp(3rem, 11vw, 4.3rem); }
  .portada__contenido > p:not(.portada__eyebrow) { max-width: 34ch; margin-block: 17px 20px; font-size: 0.98rem; }
  .portada__contenido::after { display: none; }
  .banner-categoria__contenido { width: 58%; padding-left: 34px; }
  .banner-categoria__estrella { left: 48%; }
  .banner-categoria__trazo { display: none; }
  .rejilla-secciones { grid-template-columns: repeat(5, 190px); }
  .beneficios { grid-template-columns: 1fr 1fr; }
  .beneficios article:nth-child(2) { border-right: 0; }
  .beneficios article { justify-content: flex-start; border-bottom: 1px solid #bce5e5; }
  .beneficios article:nth-child(n+3) { border-bottom: 0; }
  .rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .como-comprar__interior { grid-template-columns: 1fr; gap: 30px; }
  .ayuda__rejilla { grid-template-columns: 1fr; }
  .ficha { grid-template-columns: 1fr 1fr; gap: 28px; }
  .ficha__datos { top: 165px; padding: 22px; }
  .pie__rejilla { grid-template-columns: 1.2fr 0.8fr 1fr; gap: 36px; }
  .pie__rejilla > div:last-child { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  body { font-size: 15px; }
  .contenedor { width: min(100% - 28px, var(--ancho)); }
  .franja { font-size: 0.78rem; }
  .franja__interior { width: 100%; min-height: 38px; }
  .franja__separador { opacity: 0.7; }
  .cabecera__principal { padding-inline: 10px; }
  .logo img { width: 158px; }
  .portada { min-height: 650px; background-position: right bottom; background-size: auto 60%; }
  /* El velo llega hasta donde llega el texto: en una columna sola, el párrafo y
     los botones caen sobre la foto y sin esto no se leen. */
  .portada::before { background: linear-gradient(180deg, rgba(255,255,255,0.99) 0%, rgba(255,255,255,0.96) 46%, rgba(255,255,255,0.88) 68%, rgba(255,255,255,0.5) 84%, rgba(255,255,255,0) 97%); }
  .portada__contenido { padding: 32px 24px; }
  .portada__eyebrow { display: none; }
  .portada h1 { max-width: 7ch; font-size: clamp(3rem, 14vw, 4rem); line-height: 0.88; }
  .portada__contenido > p:not(.portada__eyebrow) { max-width: 28ch; }
  .bloque { padding: 48px 0; }
  .bloque--categorias { padding-bottom: 22px; }
  .bloque--productos { padding-top: 42px; }
  .bloque__titulo--fila { align-items: center; }
  .bloque__titulo h1, .bloque__titulo h2 { font-size: 2rem; }
  .bloque__titulo .sobrelinea { display: none; }
  .bloque__titulo--fila .enlace-flecha { font-size: 0; }
  .bloque__titulo--fila .enlace-flecha::after { content: 'Ver todos →'; font-size: 0.75rem; }
  .rejilla-secciones { grid-template-columns: repeat(5, 168px); gap: 10px; }
  .tarjeta-seccion { min-width: 168px; min-height: 222px; }
  .tarjeta-seccion__foto { height: 120px; }
  .tarjeta-seccion__icono { top: 97px; }
  .beneficios { width: 100%; border-radius: 0; }
  .beneficios article { padding: 13px 16px; }
  .beneficios__icono { font-size: 1.35rem; }
  .beneficios strong { font-size: 0.74rem; }
  .beneficios small { font-size: 0.61rem; }
  .rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
  .producto { border-radius: 13px; }
  .producto__marco picture { aspect-ratio: 1; }
  .producto__cuerpo { min-height: 142px; padding: 11px 11px 13px; }
  .producto__meta { font-size: 0.55rem; }
  .producto__nombre { font-size: 0.78rem; }
  .producto__precio { font-size: 1.08rem; }
  .boton--agregar { width: 38px; height: 38px; padding: 0; }
  .boton--agregar span { display: none; }
  .boton--consultar { width: auto; padding: 0 12px; }
  .boton--consultar span { display: inline; }
  .etiqueta { top: 8px; left: 8px; font-size: 0.52rem; }
  .producto__favorito { top: 7px; right: 8px; font-size: 25px; }
  .como-comprar { padding: 54px 0; }
  .pasos { gap: 7px; }
  .pasos li { padding: 16px 6px; }
  .pasos small { display: none; }
  .bloque--catalogo { padding-top: 0; }
  .bloque--catalogo > .contenedor { width: 100%; }
  .bloque--catalogo .miga, .bloque--catalogo .catalogo { width: calc(100% - 28px); margin-inline: auto; }
  .banner-categoria { min-height: 585px; margin-bottom: 34px; align-items: flex-start; border-inline: 0; border-radius: 0 0 24px 24px; box-shadow: none; background: linear-gradient(160deg, #fff 0%, #fff7fb 100%); }
  .banner-categoria::before { inset: 43% 0 0; background-size: cover; background-position: 68% center; }
  .banner-categoria::after { background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,0.98) 37%, rgba(255,255,255,0.66) 49%, rgba(255,255,255,0) 67%); }
  .banner-categoria__contenido { width: 100%; padding: 29px 24px 0; }
  .banner-categoria h1 { max-width: 9ch; font-size: clamp(2.8rem, 13vw, 3.75rem); }
  .banner-categoria__contenido > p:not(.sobrelinea) { max-width: 31ch; margin-block: 12px 17px; font-size: 0.9rem; }
  .banner-categoria__estrella { left: auto; right: 22px; top: 26px; font-size: 52px; }
  .catalogo-cabecera { align-items: center; }
  .catalogo-cabecera h2 { font-size: 1.65rem; }
  .catalogo .rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ficha { grid-template-columns: 1fr; gap: 22px; padding-bottom: 42px; }
  .ficha__datos { position: static; padding: 20px; }
  .ficha__confianza { grid-template-columns: 1fr; }
  .ficha__confianza span { text-align: left; }
  .detalle { margin-bottom: 40px; }
  .detalle__panel { padding: 22px 18px 26px; }
  .detalle__pestana { padding: 14px 12px; font-size: 0.92rem; }
  .tabla-datos th, .tabla-datos td { padding: 10px 12px; font-size: 0.9rem; }
  .panel { width: 100%; }
  .panel__cabecera { min-height: 80px; padding: 14px 18px; }
  .panel__lista, .panel__pie { padding-inline: 18px; }
  .linea { grid-template-columns: 78px 1fr; }
  .linea img { width: 78px; height: 78px; }
  .pie { padding-top: 24px; }
  .pie__rejilla { grid-template-columns: 1fr 1fr; gap: 34px 24px; }
  .pie__marca { grid-column: 1 / -1; }
  .pie__rejilla > div:last-child { grid-column: 1 / -1; }
  .wsp-flotante { right: 15px; bottom: 15px; width: 54px; height: 54px; }
}

/* ---------- Pulido de catálogo y ficha ---------- */
body[data-pagina='seccion'], body[data-pagina='producto'], body[data-pagina='buscar'] { background: linear-gradient(180deg, #fff 0%, #fbfdfd 52%, #fff 100%); }
body[data-pagina='seccion'] .panel-filtros { border: 0; border-radius: 22px; box-shadow: 0 14px 36px rgba(29,48,60,.09); }
body[data-pagina='seccion'] .grupo-filtro__titulo { padding-bottom: 10px; border-color: #f9dbe9; letter-spacing: .07em; }
body[data-pagina='seccion'] .campo-busca input { min-height: 48px; border: 0; background: #f2f7f7; box-shadow: inset 0 0 0 1px #e6eded; }
body[data-pagina='seccion'] .casilla { padding: 9px 10px; }
body[data-pagina='seccion'] .catalogo .producto, body[data-pagina='buscar'] .producto, body[data-pagina='producto'] .producto { border: 0; border-radius: 20px; box-shadow: 0 8px 26px rgba(30,50,63,.075); }
body[data-pagina='seccion'] .catalogo .producto:hover, body[data-pagina='buscar'] .producto:hover, body[data-pagina='producto'] .producto:hover { transform: translateY(-7px); box-shadow: 0 20px 42px rgba(30,50,63,.14); }
body[data-pagina='seccion'] .catalogo .producto__cuerpo, body[data-pagina='buscar'] .producto__cuerpo, body[data-pagina='producto'] .producto__cuerpo { min-height: 166px; padding: 17px 18px 18px; }
body[data-pagina='seccion'] .catalogo-cabecera { margin-bottom: 15px; padding-bottom: 13px; border-bottom: 1px solid #e8edef; }

body[data-pagina='producto'] .miga { padding-top: 28px; }
body[data-pagina='producto'] .ficha { gap: 48px; padding-bottom: 72px; }
body[data-pagina='producto'] .ficha__galeria { padding: 16px; border: 1px solid #e7ecee; border-radius: 26px; background: radial-gradient(circle at 50% 42%, #fff 0%, #f4f8f8 72%); box-shadow: 0 14px 38px rgba(30,50,63,.065); }
body[data-pagina='producto'] .ficha__foto { border: 0; border-radius: 18px; background: transparent; }
body[data-pagina='producto'] .ficha__miniaturas { padding: 3px; }
body[data-pagina='producto'] .ficha__miniaturas img { border: 2px solid #e3e8ea; border-radius: 12px; background: #fff; }
body[data-pagina='producto'] .ficha__miniaturas img[aria-current='true'] { border-color: var(--fucsia); box-shadow: 0 0 0 3px rgba(255,46,152,.1); }
body[data-pagina='producto'] .ficha__datos { padding: 34px; border: 0; border-radius: 24px; box-shadow: 0 18px 45px rgba(30,50,63,.11); }
body[data-pagina='producto'] .ficha h1 { font-size: clamp(2.2rem,3.5vw,3.25rem); }
body[data-pagina='producto'] .ficha__precio { font-size: 2.6rem; line-height: 1; }
body[data-pagina='producto'] .ficha__stock { width: fit-content; margin-top: 9px; padding: 5px 10px; border-radius: 999px; background: #eaf9f0; }
body[data-pagina='producto'] .ficha__texto { padding-top: 17px; border-top: 1px solid #edf0f1; line-height: 1.65; }
body[data-pagina='producto'] .ficha__datos > .boton { border-radius: 14px; box-shadow: 0 12px 24px rgba(255,46,152,.22); }
body[data-pagina='producto'] .ficha__confianza span { padding: 11px 7px; border-radius: 11px; background: #f2fafa; }
body[data-pagina='producto'] .detalle { overflow: hidden; border: 0; border-radius: 24px; box-shadow: 0 14px 38px rgba(30,50,63,.07); }
body[data-pagina='producto'] .detalle__pestanas { background: #f5f9f9; }
body[data-pagina='producto'] .detalle__panel { max-width: 900px; padding: 38px 42px 44px; }
body[data-pagina='producto'] .desc__lista { columns: 1; }
body[data-pagina='producto'] .desc__lista li { break-inside: avoid; }

@media (max-width: 900px) {
  body[data-pagina='producto'] .ficha__galeria { padding: 10px; border-radius: 20px; }
  body[data-pagina='producto'] .ficha__datos { padding: 24px; border-radius: 20px; }
  body[data-pagina='producto'] .desc__lista { columns: 1; }
}
@media (max-width: 640px) {
  body[data-pagina='seccion'] .panel-filtros { border-radius: 16px; }
  body[data-pagina='producto'] .ficha { gap: 17px; padding-bottom: 46px; }
  body[data-pagina='producto'] .ficha__galeria { margin-inline: -5px; }
  body[data-pagina='producto'] .ficha__datos { margin-inline: -5px; padding: 21px 18px; }
  body[data-pagina='producto'] .ficha h1 { font-size: 2.05rem; }
  body[data-pagina='producto'] .ficha__precio { font-size: 2.25rem; }
  body[data-pagina='producto'] .detalle__panel { padding: 25px 19px 30px; }
}

@media (max-width: 370px) {
  .logo img { width: 130px; }
  .cabecera__principal { grid-template-columns: 38px 1fr 38px; }
  .accion { width: 38px; }
  .franja { font-size: 0.7rem; }
  .portada h1 { font-size: 2.8rem; }
  .producto__pie { align-items: end; }
  .producto__precio { font-size: 0.98rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ---------- Experiencia móvil compacta ----------
   En pantallas angostas la prioridad es mostrar catálogo, precio y acción sin
   convertir cada bloque en una pantalla completa. Estas reglas quedan al final
   para corregir las capas de pulido anteriores sin afectar escritorio. */
@media (max-width: 640px) {
  html { scroll-padding-top: 116px; }
  body { overflow-x: hidden; }
  .contenedor { width: min(100% - 24px, var(--ancho)); }

  /* Cabecera más baja, con controles siempre legibles y táctiles. */
  .franja__interior { min-height: 32px; gap: 7px; font-size: .7rem; }
  .cabecera__principal { min-height: 0; padding: 8px 6px 9px; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 5px; }
  .menu-movil { width: 42px; height: 42px; }
  .menu-movil span { width: 25px; }
  .logo img { width: clamp(122px, 38vw, 152px); }
  .cabecera__acciones { gap: 0; }
  .accion { width: 39px; height: 42px; padding: 7px 5px; }
  .accion > svg { width: 25px; height: 25px; }
  .burbuja { right: -2px; top: -3px; }
  .buscador { height: 43px; margin-top: 4px; }
  .buscador input { padding-inline: 17px 5px; font-size: .88rem; }
  .buscador__boton { width: 47px; }

  /* Portada: conserva la foto, pero lleva el primer catálogo mucho más arriba. */
  body[data-pagina='inicio'] .portada { min-height: 460px; background-size: auto 57%; background-position: 68% bottom; }
  body[data-pagina='inicio'] .portada::before { background: linear-gradient(180deg,#fff 0%,rgba(255,255,255,.98) 48%,rgba(255,255,255,.72) 65%,rgba(255,255,255,.08) 88%); }
  body[data-pagina='inicio'] .portada__contenido { padding: 22px 18px; }
  body[data-pagina='inicio'] .portada h1 { max-width: 8ch; font-size: clamp(2.45rem, 11.5vw, 3.25rem); line-height: .91; }
  body[data-pagina='inicio'] .portada__contenido > p:not(.portada__eyebrow):not(.portada__confianza) { max-width: 31ch; margin-block: 10px 13px; font-size: .8rem; line-height: 1.42; }
  .portada__acciones .boton { min-height: 42px; padding: 9px 16px; font-size: .8rem; }
  .portada__conocenos { min-height: 40px; }
  .portada__confianza { display: none; }
  .portada__sello { right: 12px; bottom: 10px; width: calc(100% - 24px); }

  /* Categorías del inicio: carrusel bajo, fácil de recorrer con el pulgar. */
  body[data-pagina='inicio'] .bloque--categorias { padding: 38px 0 16px; }
  .bloque__titulo { margin-bottom: 20px; }
  .bloque__titulo h1, .bloque__titulo h2 { font-size: 1.8rem; }
  .rejilla-secciones { margin-right: -12px; padding: 2px 12px 14px 0; grid-template-columns: repeat(5, 142px); gap: 9px; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .rejilla-secciones::-webkit-scrollbar { display: none; }
  body[data-pagina='inicio'] .tarjeta-seccion { min-width: 142px; min-height: 188px; padding: 0 12px 12px; border-radius: 16px; scroll-snap-align: start; }
  body[data-pagina='inicio'] .tarjeta-seccion__foto { height: 96px; margin: 0 -12px 10px; }
  body[data-pagina='inicio'] .tarjeta-seccion__icono { top: 76px; left: 11px; width: 37px; height: 37px; font-size: .95rem; }
  .tarjeta-seccion strong { margin-top: 3px; font-size: 1.05rem; }
  .tarjeta-seccion__enlace { padding-top: 4px; }

  /* Banner de sección horizontal: texto e imagen comparten la misma franja. */
  .bloque--catalogo > .contenedor { width: 100%; }
  .bloque--catalogo .miga, .bloque--catalogo .catalogo { width: calc(100% - 24px); }
  body[data-pagina='seccion'] .miga { padding-block: 11px 8px; font-size: .76rem; }
  body[data-pagina='seccion'] .banner-categoria { min-height: 228px; margin-bottom: 12px; align-items: center; border-radius: 0 0 18px 18px; }
  body[data-pagina='seccion'] .banner-categoria::before { inset: 0 0 0 43%; background-size: auto 100%; background-position: 58% center; -webkit-mask-image: linear-gradient(90deg,transparent 0%,rgba(0,0,0,.38) 20%,#000 52%); mask-image: linear-gradient(90deg,transparent 0%,rgba(0,0,0,.38) 20%,#000 52%); }
  body[data-pagina='seccion'] .banner-categoria::after,
  body[data-pagina='seccion'] .banner-categoria--sensoriales::after { background: linear-gradient(90deg,#fff 0%,#fff 42%,rgba(255,255,255,.95) 51%,rgba(255,255,255,.56) 67%,rgba(255,255,255,.06) 88%); }
  body[data-pagina='seccion'] .banner-categoria__contenido { width: 62%; padding: 16px 0 16px 17px; }
  body[data-pagina='seccion'] .banner-categoria h1 { max-width: 8ch; display: block; font-size: clamp(2rem, 9.5vw, 2.55rem); line-height: .92; }
  body[data-pagina='seccion'] .banner-categoria h1 span { margin-left: 4px; font-size: .62em; }
  body[data-pagina='seccion'] .banner-categoria__contenido > p:not(.sobrelinea) { max-width: 25ch; margin-block: 8px 11px; display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; font-size: .72rem; line-height: 1.35; }
  body[data-pagina='seccion'] .banner-categoria__contenido .boton { min-height: 37px; padding: 8px 13px; }
  body[data-pagina='seccion'] .banner-categoria__estrella { display: none; }
  body[data-pagina='seccion'] .catalogo { margin-top: 5px; }
  .panel-filtros__abrir { position: sticky; top: 112px; z-index: 8; min-height: 44px; box-shadow: 0 8px 22px rgba(30,50,63,.08); }

  /* Tarjetas parejas y más densas. El carrito ya no compite con un segundo +. */
  .rejilla, .catalogo .rejilla { gap: 9px; }
  body[data-pagina='inicio'] .bloque--productos { margin-top: 12px; padding-block: 45px 54px; }
  body[data-pagina='inicio'] .bloque--productos .bloque__titulo { margin-bottom: 20px; }
  body[data-pagina='seccion'] .catalogo .producto,
  body[data-pagina='buscar'] .producto,
  body[data-pagina='producto'] .producto,
  body[data-pagina='inicio'] .producto { border-radius: 14px; }
  .producto__marco picture { aspect-ratio: 1.08; }
  body[data-pagina='seccion'] .catalogo .producto__cuerpo,
  body[data-pagina='buscar'] .producto__cuerpo,
  body[data-pagina='producto'] .producto__cuerpo,
  body[data-pagina='inicio'] .producto__cuerpo { min-height: 132px; padding: 10px; }
  .producto__meta { min-height: 18px; margin-bottom: 3px; gap: 3px 5px; font-size: .5rem; line-height: 1.2; }
  .producto__nombre { min-height: 2.5em; display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: .75rem; line-height: 1.25; }
  .producto__pie { padding-top: 9px; gap: 5px; }
  .producto__precio { font-size: 1rem; }
  .boton--agregar { width: 39px; min-width: 39px; height: 39px; flex: none; }
  .boton--agregar svg { width: 20px; height: 20px; flex: none; }
  body[data-pagina='inicio'] .boton--agregar::after { display: none; }
  .producto__favorito { width: 39px; height: 39px; top: 7px; right: 7px; font-size: 24px; }
  .etiqueta { max-width: calc(100% - 52px); }

  /* Los bloques secundarios dejan de ocupar pantallas enteras. */
  .objetivos { padding-block: 28px; }
  body[data-pagina='inicio'] .beneficios { grid-template-columns: 1fr 1fr; }
  body[data-pagina='inicio'] .beneficios article { min-height: 70px; padding: 10px 11px; gap: 8px; }
  body[data-pagina='inicio'] .beneficios__icono { width: 34px; height: 34px; font-size: 1.05rem; }
  .impacto__imagen { height: 210px; }
  .impacto__contenido { padding: 21px 18px 24px; }
  .impacto__puntos article > span { width: 36px; height: 36px; }
  body[data-pagina='inicio'] .como-comprar { padding-block: 48px; }
  .wsp-flotante { bottom: calc(12px + env(safe-area-inset-bottom)); }
}

/* ---------- Ficha de producto más contenida ----------
   La fotografía debe explicar el producto, no ocupar toda la ventana. El
   conjunto se centra y conserva una escala cómoda incluso en monitores anchos. */
@media (min-width: 901px) {
  body[data-pagina='producto'] #ficha { max-width: 1120px; }
  body[data-pagina='producto'] .miga { padding: 20px 0 14px; }
  body[data-pagina='producto'] .ficha { grid-template-columns: minmax(0, 470px) minmax(360px, 440px); justify-content: center; gap: 30px; padding-bottom: 54px; }
  body[data-pagina='producto'] .ficha__galeria { width: 100%; padding: 12px; border-radius: 21px; }
  body[data-pagina='producto'] .ficha__foto { max-height: 500px; aspect-ratio: 1.08; }
  body[data-pagina='producto'] .ficha__datos { top: 168px; padding: 25px 26px; border-radius: 20px; }
  body[data-pagina='producto'] .ficha h1 { margin-bottom: 10px; font-size: clamp(1.9rem,2.6vw,2.45rem); line-height: 1.03; }
  body[data-pagina='producto'] .ficha__precio { font-size: 2.15rem; }
  body[data-pagina='producto'] .ficha__estado { margin-block: 7px 12px; }
  body[data-pagina='producto'] .ficha__stock,
  body[data-pagina='producto'] .ficha__edad { padding: 4px 9px; font-size: .72rem; }
  body[data-pagina='producto'] .etiquetas { margin-bottom: 12px; }
  body[data-pagina='producto'] .ficha__texto { margin-bottom: 17px; padding-top: 13px; font-size: .86rem; line-height: 1.55; }
  body[data-pagina='producto'] .ficha__masdetalles { margin: -8px 0 15px; font-size: .76rem; }
  body[data-pagina='producto'] .boton--grande { min-height: 50px; font-size: .9rem; }
  body[data-pagina='producto'] .ficha__consulta { margin-top: 9px; font-size: .75rem; }
  body[data-pagina='producto'] .ficha__favorito { min-height: 40px; margin-top: 9px; padding-block: 9px; }
  body[data-pagina='producto'] .ficha__confianza { margin-top: 12px; }
  body[data-pagina='producto'] .ficha__confianza span { padding: 8px 5px; font-size: .6rem; }
  body[data-pagina='producto'] .ficha__nota { margin-top: 8px; font-size: .66rem; }
  body[data-pagina='producto'] .detalle { max-width: 1040px; margin-inline: auto; }
}

@media (max-width: 640px) {
  body[data-pagina='producto'] .miga { padding-block: 14px 10px; }
  body[data-pagina='producto'] .ficha { gap: 13px; padding-bottom: 36px; }
  body[data-pagina='producto'] .ficha__galeria { width: 90%; margin-inline: auto; padding: 8px; border-radius: 17px; }
  body[data-pagina='producto'] .ficha__datos { margin-inline: 0; padding: 18px 16px; border-radius: 17px; }
  body[data-pagina='producto'] .ficha h1 { margin-bottom: 9px; font-size: 1.75rem; }
  body[data-pagina='producto'] .ficha__precio { font-size: 1.9rem; }
  body[data-pagina='producto'] .ficha__texto { margin-bottom: 18px; font-size: .86rem; line-height: 1.55; }
  body[data-pagina='producto'] .ficha__confianza { grid-template-columns: repeat(3,minmax(0,1fr)); }
  body[data-pagina='producto'] .ficha__confianza span { padding: 8px 4px; text-align: center; font-size: .58rem; }
}

@media (max-width: 370px) {
  .logo img { width: 118px; }
  body[data-pagina='seccion'] .banner-categoria__contenido { width: 66%; padding-left: 14px; }
  body[data-pagina='seccion'] .banner-categoria h1 { font-size: 1.9rem; }
  .producto__precio { font-size: .92rem; }
}

/* ---------- Renovación visual de la tienda ---------- */
body[data-pagina='inicio'] .portada { box-shadow: 0 22px 55px rgba(27, 58, 72, .1); }
body[data-pagina='inicio'] .bloque--categorias { position: relative; padding-top: 78px; background: radial-gradient(circle at 10% 20%, rgba(255,46,152,.05), transparent 25%), radial-gradient(circle at 88% 10%, rgba(6,185,187,.07), transparent 27%); }
body[data-pagina='inicio'] .bloque__titulo h2 { font-size: clamp(2.2rem, 3.5vw, 3rem); }
body[data-pagina='inicio'] .tarjeta-seccion { min-height: 265px; border: 0; border-radius: 22px; box-shadow: 0 10px 30px rgba(28,44,57,.07); }
body[data-pagina='inicio'] .tarjeta-seccion__foto { height: 145px; margin-bottom: 15px; }
body[data-pagina='inicio'] .tarjeta-seccion__foto img { transition: transform .45s ease; }
body[data-pagina='inicio'] .tarjeta-seccion:hover { transform: translateY(-8px) rotate(-.35deg); box-shadow: 0 18px 38px rgba(28,44,57,.13); }
body[data-pagina='inicio'] .tarjeta-seccion:hover .tarjeta-seccion__foto img { transform: scale(1.07); }
body[data-pagina='inicio'] .tarjeta-seccion__icono { top: 121px; box-shadow: 0 5px 12px rgba(23,35,45,.12); }
body[data-pagina='inicio'] .beneficios { min-height: 90px; margin-top: 18px; border: 1px solid #d9f0f0; border-radius: 20px; background: rgba(239,250,250,.78); box-shadow: 0 12px 30px rgba(20,94,96,.06); }
body[data-pagina='inicio'] .beneficios article { padding-block: 18px; }
body[data-pagina='inicio'] .beneficios__icono { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: #fff; box-shadow: 0 5px 14px rgba(34,70,82,.08); font-size: 1.35rem; }
body[data-pagina='inicio'] .beneficios__icono--wsp { background: var(--verde); border-radius: 12px; }
body[data-pagina='inicio'] .bloque--productos { position: relative; margin-top: 30px; padding: 82px 0 92px; background: linear-gradient(180deg, #f7fbfc 0%, #fff 100%); }
body[data-pagina='inicio'] .bloque--productos::before { content: ''; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, transparent, #d9ebed, transparent); }
body[data-pagina='inicio'] .producto { border: 0; border-radius: 22px; box-shadow: 0 8px 28px rgba(30,50,63,.08); }
body[data-pagina='inicio'] .producto:hover { transform: translateY(-9px); box-shadow: 0 22px 46px rgba(30,50,63,.16); }
body[data-pagina='inicio'] .producto__cuerpo { min-height: 170px; padding: 18px 19px 19px; }
body[data-pagina='inicio'] .producto__nombre { font-size: .96rem; line-height: 1.32; }
body[data-pagina='inicio'] .producto__precio { font-size: 1.38rem; }
body[data-pagina='inicio'] .boton--agregar { min-height: 42px; padding-inline: 16px; box-shadow: 0 7px 16px rgba(6,185,187,.18); }

.impacto { margin-block: 44px 52px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 1fr); overflow: hidden; border: 1px solid var(--borde); border-radius: 30px; background: linear-gradient(150deg, #fff 0%, var(--rosa) 100%); color: var(--tinta); box-shadow: var(--sombra); }
.impacto__imagen { position: relative; min-height: 360px; overflow: hidden; }
.impacto__imagen picture { position: absolute; inset: 0; }
.impacto__imagen picture, .impacto__imagen img { width: 100%; height: 100%; display: block; }
.impacto__imagen img { object-fit: cover; object-position: right center; }
.impacto__imagen::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 88%, var(--rosa) 100%); pointer-events: none; }
.impacto__imagen > span { position: absolute; z-index: 2; left: 24px; bottom: 22px; padding: 8px 13px; border-radius: 999px; background: rgba(255,255,255,.94); color: var(--tinta); box-shadow: 0 4px 14px rgba(22,50,62,.1); font-size: .69rem; font-weight: 900; text-transform: uppercase; letter-spacing: .07em; }
.impacto__contenido { padding: 30px 36px 30px 30px; align-self: center; }
.impacto__contenido .sobrelinea { color: #00666a; }
.impacto__contenido h2 { margin: 6px 0 14px; font-size: clamp(2rem, 2.7vw, 2.75rem); line-height: 1.04; }
.impacto__contenido h2 em { color: var(--fucsia); font-style: normal; }
.impacto__contenido > p:not(.sobrelinea) { margin: 0; color: var(--tinta-media); font-size: .95rem; }
.impacto__puntos { margin-top: 16px; display: grid; gap: 6px; }
.impacto__puntos article { display: flex; align-items: center; gap: 13px; }
.impacto__puntos article > span { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 12px; background: rgba(6,185,187,.12); color: var(--turquesa-hondo); font-size: 1.15rem; }
.impacto__puntos div { display: grid; }.impacto__puntos strong { font-size: .84rem; }.impacto__puntos small { color: var(--tinta-media); font-size: .72rem; }
.impacto__enlace { display: inline-flex; margin-top: 16px; color: var(--turquesa-hondo); }.impacto__enlace:hover { color: var(--fucsia); }
body[data-pagina='inicio'] .como-comprar { margin-top: 0; padding-block: 88px; background: radial-gradient(circle at 15% 20%, rgba(255,46,152,.08), transparent 28%), radial-gradient(circle at 85% 80%, rgba(6,185,187,.1), transparent 30%), #fbf8fb; }
body[data-pagina='inicio'] .pasos { gap: 16px; }
body[data-pagina='inicio'] .pasos li { padding: 28px 16px; border: 1px solid #fff; border-radius: 20px; background: rgba(255,255,255,.88); box-shadow: 0 10px 28px rgba(40,50,63,.06); }

@media (max-width: 900px) {
  body[data-pagina='inicio'] .bloque--categorias { padding-top: 58px; }
  body[data-pagina='inicio'] .bloque--productos { padding-block: 62px 70px; }
  .impacto { grid-template-columns: 1fr; margin-block: 40px 48px; }
  .impacto__imagen { min-height: 0; height: clamp(260px, 42vw, 360px); }.impacto__imagen::after { background: linear-gradient(180deg, transparent 90%, var(--rosa) 100%); }
  .impacto__contenido { padding: 26px 30px 30px; }
}
@media (max-width: 640px) {
  body[data-pagina='inicio'] .portada { box-shadow: none; }
  body[data-pagina='inicio'] .tarjeta-seccion { min-height: 230px; border-radius: 18px; }
  body[data-pagina='inicio'] .tarjeta-seccion__foto { height: 116px; }
  body[data-pagina='inicio'] .tarjeta-seccion__icono { top: 94px; }
  body[data-pagina='inicio'] .beneficios { margin-top: 10px; border-radius: 0; }
  body[data-pagina='inicio'] .producto { border-radius: 16px; box-shadow: 0 5px 18px rgba(30,50,63,.08); }
  body[data-pagina='inicio'] .producto__cuerpo { min-height: 150px; padding: 13px; }
  .impacto { width: 100%; margin-block: 40px 50px; border-radius: 0; }
  .impacto__imagen { height: clamp(230px, 60vw, 320px); }.impacto__imagen > span { left: 16px; bottom: 15px; }
  .impacto__contenido { padding: 24px 22px 28px; }.impacto__contenido h2 { font-size: clamp(1.9rem, 7vw, 2.3rem); }
  body[data-pagina='inicio'] .como-comprar { padding-block: 60px; }
}

/* ---------- Descubrimiento y detalles de conversión ---------- */
.portada__confianza { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 17px !important; color: #5e6971 !important; font-size: .72rem !important; font-weight: 800; }
.portada__confianza span { display: inline-flex; align-items: center; gap: 4px; }
.portada__confianza span::first-letter { color: var(--turquesa-hondo); }

.objetivos { margin-block: 18px 28px; padding: 34px 38px; display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 34px; align-items: center; border: 1px solid #edf0f2; border-radius: 24px; background: #fff; box-shadow: 0 14px 40px rgba(28,49,60,.065); }
.objetivos__intro h2 { margin: 0; font-size: 2rem; }.objetivos__intro > p:not(.sobrelinea) { margin: 9px 0 0; color: var(--tinta-media); font-size: .78rem; }
.objetivos__lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.objetivo { --obj:#8156ca; --obj-bg:#f6f1ff; min-width: 0; display: grid; grid-template-columns: 44px minmax(0,1fr) auto; align-items: center; gap: 11px; padding: 13px 14px; border: 1px solid color-mix(in srgb, var(--obj) 15%, #e9edf0); border-radius: 15px; background: var(--obj-bg); transition: transform .2s ease, box-shadow .2s ease; }
.objetivo--aprende { --obj:#069da0; --obj-bg:#effafa; }.objetivo--mueve { --obj:#e5721b; --obj-bg:#fff5ea; }.objetivo--crea { --obj:#d91b75; --obj-bg:#fff1f7; }
.objetivo:hover { transform: translateY(-3px); box-shadow: 0 10px 24px color-mix(in srgb, var(--obj) 13%, transparent); }
.objetivo__icono { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: #fff; color: var(--obj); font: 900 1.2rem 'Nunito', sans-serif; box-shadow: 0 5px 12px rgba(30,45,58,.07); }
.objetivo div { min-width: 0; display: grid; }.objetivo strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .78rem; }.objetivo small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tinta-media); font-size: .65rem; }
.objetivo > b { color: var(--obj); font-size: 1rem; transition: transform .2s ease; }.objetivo:hover > b { transform: translateX(3px); }

.producto__ver { position: absolute; left: 50%; bottom: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 999px; background: rgba(255,255,255,.94); color: #26323b; box-shadow: 0 7px 20px rgba(20,35,44,.16); font-size: .68rem; font-weight: 900; opacity: 0; transform: translate(-50%, 12px); transition: opacity .22s ease, transform .22s ease; white-space: nowrap; }
.producto:hover .producto__ver { opacity: 1; transform: translate(-50%, 0); }.producto__ver b { color: var(--fucsia); }
.producto__marco::after { content: ''; position: absolute; inset: auto 0 0; height: 25%; background: linear-gradient(transparent, rgba(17,31,39,.13)); opacity: 0; transition: opacity .25s ease; pointer-events: none; }.producto:hover .producto__marco::after { opacity: 1; }

@media (max-width: 900px) {
  .objetivos { grid-template-columns: 1fr; gap: 20px; }.objetivos__intro { max-width: 520px; }
}
@media (max-width: 640px) {
  .portada__confianza { width: fit-content; display: grid; gap: 3px; margin-top: 12px !important; padding: 7px 10px; border: 1px solid rgba(255,255,255,.72); border-radius: 9px; background: rgba(255,255,255,.82); color: #344149 !important; font-size: .62rem !important; line-height: 1.35; box-shadow: 0 5px 14px rgba(30,48,58,.06); backdrop-filter: blur(7px); }
  .objetivos { width: 100%; margin-block: 0 24px; padding: 38px 15px; border-width: 1px 0; border-radius: 0; box-shadow: none; }
  .objetivos__intro { padding-inline: 1px; }.objetivos__intro h2 { font-size: 1.8rem; }
  .objetivos__lista { display: flex; margin-inline: -15px; padding: 2px 15px 12px; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }.objetivos__lista::-webkit-scrollbar { display: none; }
  .objetivo { min-width: 275px; scroll-snap-align: start; }
  .producto__ver { display: none; }.producto__marco::after { display: none; }
}

/* ---------- Quiénes somos y ubicación ---------- */
.conocenos { margin-block: 44px 56px; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.12fr); gap: 24px; align-items: stretch; }
.conocenos__historia { padding: 30px 32px; border: 1px solid #eceff1; border-radius: 24px; background: #fff; box-shadow: 0 10px 30px rgba(31,48,60,.05); }
.conocenos__historia h2, .ubicacion__datos h2 { margin: 3px 0 14px; font-size: clamp(2rem,2.7vw,2.6rem); line-height: 1.1; }
.conocenos__bajada { margin: 0 0 15px; color: #263944; font-size: 1.05rem; font-weight: 800; line-height: 1.55; }
.conocenos__historia > p:last-of-type { margin: 0; color: var(--tinta-media); font-size: .9rem; line-height: 1.6; }
.conocenos__valores { margin-top: 20px; display: grid; gap: 12px; }
.conocenos__valores article { min-width: 0; display: grid; grid-template-columns: 30px 1fr; gap: 1px 9px; align-items: center; }
.conocenos__valores article > span { grid-row: 1 / 3; color: var(--fucsia); font-size: 1.2rem; font-weight: 900; }
.conocenos__valores strong { font-size: .85rem; }.conocenos__valores small { color: var(--tinta-media); font-size: .78rem; line-height: 1.4; }
.ubicacion { min-width: 0; overflow: hidden; display: grid; grid-template-rows: 220px auto; border: 1px solid var(--borde); border-radius: 24px; background: #fff; color: var(--tinta); box-shadow: 0 10px 30px rgba(31,48,60,.05); }
.ubicacion__mapa { min-height: 220px; overflow: hidden; background: #e9eeee; }.ubicacion__mapa iframe { width: 100%; height: 100%; min-height: 220px; display: block; border: 0; filter: saturate(.9) contrast(1.03); }
.ubicacion__datos { padding: 22px 28px 26px; }.ubicacion__datos .sobrelinea { color: #00666a; }.ubicacion__datos h2 { margin-bottom: 14px; font-size: 2rem; }
.ubicacion__datos address { display: flex; align-items: center; gap: 13px; font-style: normal; }.ubicacion__datos address > span { width: 43px; height: 43px; flex: none; display: grid; place-items: center; border-radius: 13px; background: rgba(6,185,187,.14); }
.ubicacion__datos address div { display: grid; }.ubicacion__datos address strong { font-size: .92rem; }.ubicacion__datos address small { color: var(--tinta-media); font-size: .7rem; }
.ubicacion__datos > p { margin: 12px 0 16px; color: var(--tinta-media); font-size: .82rem; line-height: 1.5; }.ubicacion__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.ubicacion__acciones .boton { min-height: 46px; }.ubicacion__wsp { color: var(--turquesa-hondo); font-size: .73rem; font-weight: 900; text-decoration: underline; text-underline-offset: 4px; }
.pie a[href*='google.com/maps'] { color: var(--tinta); font-weight: 800; }.pie a[href='/#ubicacion'] { color: var(--turquesa-hondo); font-weight: 800; }

@media (max-width: 900px) {
  .conocenos { grid-template-columns: 1fr; margin-block: 40px 48px; }.ubicacion { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }.ubicacion__mapa, .ubicacion__mapa iframe { min-height: 280px; }
}
@media (max-width: 640px) {
  .conocenos { width: 100%; margin-block: 32px 40px; gap: 16px; }.conocenos__historia { padding: 26px 23px; border-radius: 0; }.conocenos__historia h2 { font-size: 2.1rem; }.conocenos__bajada { font-size: .95rem; }
  .conocenos__valores { grid-template-columns: 1fr; }.conocenos__valores article { grid-template-columns: 32px 1fr; align-items: center; }.conocenos__valores article > span { grid-row: 1 / 3; margin: 0; }
  .ubicacion { grid-template-columns: 1fr; grid-template-rows: 220px auto; border-radius: 0; }.ubicacion__mapa, .ubicacion__mapa iframe { min-height: 220px; }.ubicacion__datos { padding: 22px 23px 26px; }.ubicacion__datos h2 { font-size: 2rem; }.ubicacion__acciones { align-items: flex-start; flex-direction: column; }
}

/* ---------- Banner con identidad de marca ---------- */
.menu__nosotros { margin-left: 5px; color: #344149; }.menu__nosotros span { color: var(--fucsia); font-size: 1rem; }.menu__nosotros:hover { background: #fff1f7; }
.portada__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 13px; }
.portada__conocenos { min-height: 48px; padding: 0 5px; display: inline-flex; align-items: center; gap: 8px; color: #344149; border-bottom: 2px solid rgba(255,46,152,.24); font-size: .78rem; font-weight: 900; transition: color .2s ease,border-color .2s ease,transform .2s ease; }
.portada__conocenos span { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%; background: #fff0f7; color: var(--fucsia); font-size: .95rem; }
.portada__conocenos:hover { color: var(--fucsia-hondo); border-color: var(--fucsia); transform: translateY(-2px); }
.portada__sello { position: absolute; z-index: 2; right: 27px; bottom: 25px; min-width: 235px; padding: 11px 13px; display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 10px; border: 1px solid rgba(255,255,255,.82); border-radius: 16px; background: rgba(255,255,255,.9); color: #293944; box-shadow: 0 12px 32px rgba(25,48,60,.16); backdrop-filter: blur(13px); transition: transform .22s ease,box-shadow .22s ease; }
.portada__sello:hover { transform: translateY(-4px); box-shadow: 0 18px 38px rgba(25,48,60,.22); }.portada__sello > span:first-child { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: #eafafa; }
.portada__sello > span:nth-child(2) { display: grid; }.portada__sello small { color: var(--turquesa-hondo); font-size: .59rem; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }.portada__sello strong { font-size: .76rem; }.portada__sello b { color: var(--fucsia); font-size: 1rem; }
body[data-pagina='inicio'] .portada::after { content: ''; position: absolute; z-index: 0; right: -55px; top: -55px; width: 180px; height: 180px; border: 35px solid rgba(255,46,152,.07); border-radius: 50%; pointer-events: none; }

@media (max-width: 1080px) {
  .menu__nosotros { display: none; }.portada__sello { min-width: 210px; right: 18px; bottom: 18px; }
}
@media (max-width: 640px) {
  .menu__nosotros { display: inline-flex; margin: 2px 0; }.portada__acciones { gap: 9px; }.portada__conocenos { min-height: 44px; font-size: .69rem; }
  .portada__sello { right: 16px; bottom: 17px; min-width: 0; width: calc(100% - 32px); padding: 9px 11px; border-radius: 14px; }.portada__sello strong { font-size: .7rem; }
}

/* ---------- Banners compactos rediseñados ---------- */
body[data-pagina='seccion'] .miga { padding-block: 19px 13px; }
body[data-pagina='seccion'] .banner-categoria { min-height: 210px; margin-bottom: 16px; border-radius: 20px; }
body[data-pagina='seccion'] .banner-categoria { background: linear-gradient(110deg,#fff 0%,#fff 36%,#fcf7f3 57%,#f6eee7 100%); }
body[data-pagina='seccion'] .banner-categoria::before { background-color: #f7f0e9; background-size: auto 100%; background-position: right center; -webkit-mask-image: linear-gradient(90deg,transparent 0%,transparent 36%,rgba(0,0,0,.08) 43%,rgba(0,0,0,.42) 54%,#000 68%); mask-image: linear-gradient(90deg,transparent 0%,transparent 36%,rgba(0,0,0,.08) 43%,rgba(0,0,0,.42) 54%,#000 68%); }
body[data-pagina='seccion'] .banner-categoria::after { background: linear-gradient(90deg,#fff 0%,#fff 54%,rgba(255,255,255,.97) 60%,rgba(255,255,255,.82) 67%,rgba(255,255,255,.48) 74%,rgba(255,255,255,.16) 82%,transparent 91%); }
body[data-pagina='seccion'] .banner-categoria--sensoriales::after { background: linear-gradient(90deg,#fff 0%,#fff 69%,rgba(255,255,255,.88) 72%,rgba(255,255,255,.5) 76%,rgba(255,255,255,.16) 80%,transparent 84%); }
body[data-pagina='seccion'] .banner-categoria__contenido { width: 48%; padding: 17px 0 17px 32px; }
body[data-pagina='seccion'] .banner-categoria h1 { max-width: none; display: flex; align-items: center; gap: 9px; font-size: clamp(2.45rem,3.5vw,3.35rem); }
body[data-pagina='seccion'] .banner-categoria h1 span { font-size: .7em; }
body[data-pagina='seccion'] .banner-categoria__contenido > p:not(.sobrelinea) { max-width: 38ch; margin-block: 8px 12px; font-size: .78rem; line-height: 1.42; }
body[data-pagina='seccion'] .banner-categoria__contenido .boton { min-height: 39px; padding-inline: 16px; font-size: .75rem; }
body[data-pagina='seccion'] .banner-categoria__estrella { left: 46%; top: 15px; font-size: 43px; }
body[data-pagina='seccion'] .banner-categoria__trazo { display: none; }
body[data-pagina='seccion'] .catalogo { margin-top: 9px; }

@media (max-width: 640px) {
  body[data-pagina='seccion'] .miga { padding-block: 15px 10px; }
  body[data-pagina='seccion'] .banner-categoria { min-height: 385px; margin-bottom: 16px; }
  body[data-pagina='seccion'] .banner-categoria::before { inset: 52% 0 0; background-size: auto 100%; background-position: 70% center; -webkit-mask-image: linear-gradient(180deg,transparent 0%,rgba(0,0,0,.28) 14%,#000 34%); mask-image: linear-gradient(180deg,transparent 0%,rgba(0,0,0,.28) 14%,#000 34%); }
  body[data-pagina='seccion'] .banner-categoria::after { background: linear-gradient(180deg,#fff 0%,rgba(255,255,255,.98) 44%,rgba(255,255,255,.42) 60%,rgba(255,255,255,0) 76%); }
  body[data-pagina='seccion'] .banner-categoria--sensoriales::after { background: linear-gradient(180deg,#fff 0%,rgba(255,255,255,.98) 44%,rgba(255,255,255,.42) 60%,rgba(255,255,255,0) 76%); }
  body[data-pagina='seccion'] .banner-categoria__contenido { width: 100%; padding: 20px 20px 0; }
  body[data-pagina='seccion'] .banner-categoria h1 { font-size: clamp(2.35rem,10.5vw,3rem); }
}

/* ---------- Portada más compacta y detalles de terminación ---------- */
body[data-pagina='inicio'] .portada { min-height: 420px; border-radius: 0 0 24px 24px; background-position: right center; }
body[data-pagina='inicio'] .portada__contenido { width: 46%; padding: 39px 0 42px 38px; }
body[data-pagina='inicio'] .portada h1 { font-size: clamp(3.2rem,4.7vw,4.75rem); }
body[data-pagina='inicio'] .portada__contenido > p:not(.portada__eyebrow):not(.portada__confianza) { margin-block: 17px 20px; font-size: .98rem; }
body[data-pagina='inicio'] .portada__estrella { left: 455px; top: 32px; font-size: 3.8rem; }
body[data-pagina='inicio'] .portada__contenido::after { left: 385px; top: 224px; width: 95px; }
body[data-pagina='inicio'] .portada__sello { bottom: 18px; }
body[data-pagina='inicio'] .portada__acciones .boton { position: relative; overflow: hidden; box-shadow: 0 11px 24px rgba(6,185,187,.2); }
body[data-pagina='inicio'] .portada__acciones .boton::after { content: ''; position: absolute; inset: -50% auto -50% -35%; width: 24%; background: rgba(255,255,255,.34); transform: rotate(18deg); transition: left .45s ease; }
body[data-pagina='inicio'] .portada__acciones .boton:hover::after { left: 115%; }
body[data-pagina='inicio'] .portada__confianza { margin-top: 12px !important; }

body[data-pagina='inicio'] .objetivos { position: relative; overflow: hidden; }
body[data-pagina='inicio'] .objetivos::before { content: '✦'; position: absolute; right: 18px; top: -17px; color: rgba(255,46,152,.08); font: 900 5.5rem/1 'Nunito',sans-serif; transform: rotate(14deg); pointer-events: none; }
body[data-pagina='inicio'] .bloque--categorias::after { content: ''; position: absolute; right: 4%; bottom: 10%; width: 78px; height: 78px; border: 2px dashed rgba(6,185,187,.16); border-radius: 50%; pointer-events: none; }
body[data-pagina='inicio'] .bloque__titulo--fila { position: relative; }
body[data-pagina='inicio'] .bloque__titulo--fila::after { content: ''; width: 44px; height: 5px; margin-left: 15px; align-self: end; margin-bottom: 9px; border-radius: 999px; background: linear-gradient(90deg,var(--fucsia),var(--amarillo)); }
body[data-pagina='inicio'] .beneficios article { transition: transform .2s ease,background .2s ease; }
body[data-pagina='inicio'] .beneficios article:hover { transform: translateY(-3px); background: rgba(255,255,255,.58); }
body[data-pagina='inicio'] .pasos li { position: relative; overflow: hidden; }
body[data-pagina='inicio'] .pasos li::after { content: ''; position: absolute; right: -24px; bottom: -28px; width: 68px; height: 68px; border-radius: 50%; background: rgba(6,185,187,.055); }
body[data-pagina='inicio'] .pasos li:nth-child(2)::after { background: rgba(255,46,152,.055); }
body[data-pagina='inicio'] .pasos li:nth-child(3)::after { background: rgba(244,174,0,.075); }

@media (max-width: 900px) {
  body[data-pagina='inicio'] .portada { min-height: 530px; background-position: right center; }
  body[data-pagina='inicio'] .portada__contenido { width: 58%; padding: 34px 28px; }
  body[data-pagina='inicio'] .portada h1 { font-size: clamp(3rem,8.5vw,4.15rem); }
}
@media (max-width: 640px) {
  body[data-pagina='inicio'] .portada { min-height: 540px; background-position: right bottom; }
  body[data-pagina='inicio'] .portada__contenido { width: 100%; padding: 27px 22px; }
  body[data-pagina='inicio'] .portada h1 { font-size: clamp(2.75rem,12.5vw,3.65rem); }
  body[data-pagina='inicio'] .portada__contenido > p:not(.portada__eyebrow):not(.portada__confianza) { max-width: 28ch; margin-block: 13px 16px; font-size: .88rem; }
  body[data-pagina='inicio'] .portada__sello { bottom: 13px; }
  body[data-pagina='inicio'] .bloque__titulo--fila::after, body[data-pagina='inicio'] .bloque--categorias::after { display: none; }
}

/* ---------- Escritorio medio más liviano ----------
   En pantallas de notebook el contenido no necesita ocupar cada píxel. Un
   lienzo más contenido crea márgenes reales y evita tarjetas desproporcionadas. */
@media (min-width: 1101px) and (max-width: 1440px) {
  .contenedor,
  .franja__interior { width: min(100% - 64px, 1180px); }
  .cabecera__principal { min-height: 88px; grid-template-columns: 220px minmax(320px, 1fr) auto; gap: 34px; }
  .logo img { width: 210px; }
  .cabecera__acciones { gap: 20px; }
  .menu { height: 50px; gap: 5px; }
  .menu__enlace { padding-inline: 10px; font-size: .84rem; }

  body[data-pagina='seccion'] .miga { padding-block: 22px 15px; }
  body[data-pagina='seccion'] .banner-categoria { margin-bottom: 28px; }
  body[data-pagina='seccion'] .catalogo { grid-template-columns: 220px minmax(0,1fr); gap: 38px; margin-top: 16px; }
  body[data-pagina='seccion'] .panel-filtros { top: 158px; padding: 20px 18px; }
  body[data-pagina='seccion'] .panel-filtros__cuerpo { gap: 24px; }
  body[data-pagina='seccion'] .catalogo-cabecera { margin-bottom: 20px; padding-bottom: 16px; }
  body[data-pagina='seccion'] .catalogo-cabecera h2 { font-size: 1.9rem; }
  body[data-pagina='seccion'] .catalogo .rejilla { gap: 26px; }
  body[data-pagina='seccion'] .catalogo .producto { border-radius: 18px; }
  body[data-pagina='seccion'] .catalogo .producto__marco picture { aspect-ratio: 1.18; }
  body[data-pagina='seccion'] .catalogo .producto__cuerpo { min-height: 154px; padding: 16px 17px 18px; }
  body[data-pagina='seccion'] .producto__nombre { font-size: .86rem; line-height: 1.3; }
  body[data-pagina='seccion'] .producto__pie { padding-top: 16px; }
  body[data-pagina='seccion'] .producto__precio { font-size: 1.18rem; }
}

/* ---------- Acabado premium en contenido y cierre ---------- */
body[data-pagina='inicio'] .bloque--productos .bloque__titulo { margin-bottom: 27px; }
body[data-pagina='inicio'] .bloque--productos .enlace-flecha { padding: 9px 14px; border: 1px solid #e4ecee; border-radius: 999px; background: #fff; box-shadow: 0 6px 18px rgba(30,50,63,.05); transition: transform .2s ease,box-shadow .2s ease; }
body[data-pagina='inicio'] .bloque--productos .enlace-flecha:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(30,50,63,.1); }
body[data-pagina='inicio'] .producto { position: relative; overflow: hidden; }
body[data-pagina='inicio'] .producto::before { content: ''; position: absolute; z-index: 3; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg,var(--turquesa),var(--fucsia),var(--amarillo)); opacity: .86; }
body[data-pagina='inicio'] .producto__marco { background: radial-gradient(circle at 50% 45%,#fff 0%,#f7fafb 75%); }
body[data-pagina='inicio'] .producto__meta { letter-spacing: .06em; }
body[data-pagina='inicio'] .producto__meta > span:first-child { width: fit-content; padding: 4px 8px; border-radius: 999px; background: #eefafa; color: var(--turquesa-hondo); }
body[data-pagina='inicio'] .boton--agregar { position: relative; overflow: hidden; }
body[data-pagina='inicio'] .boton--agregar::after { content: '+'; width: 19px; height: 19px; margin-left: 2px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.18); font-size: .75rem; }

.impacto::before { content: ''; position: absolute; z-index: 3; right: 26px; top: 24px; width: 55px; height: 55px; border: 1px dashed rgba(85,217,211,.28); border-radius: 50%; pointer-events: none; }
.impacto { position: relative; }
.impacto__contenido { position: relative; z-index: 4; }
.impacto__puntos article { padding: 8px 10px 8px 8px; border-radius: 14px; transition: background .2s ease,transform .2s ease; }
.impacto__puntos article:hover { background: rgba(255,255,255,.045); transform: translateX(4px); }

.conocenos__historia { position: relative; display: flex; flex-direction: column; }
.conocenos__manifiesto { margin-top: auto; padding-top: 28px; display: grid; grid-template-columns: 42px 1fr; align-items: start; gap: 11px; }
.conocenos__manifiesto > span { color: rgba(255,46,152,.22); font: 800 4.5rem/.75 'Baloo 2',sans-serif; }
.conocenos__manifiesto p { margin: 0; padding-top: 3px; color: #58666e; font-size: .76rem; line-height: 1.55; }
.conocenos__manifiesto strong { display: block; margin-bottom: 3px; color: #293a44; font-size: .69rem; letter-spacing: .07em; text-transform: uppercase; }
.ubicacion__mapa { position: relative; }
.ubicacion__mapa::after { content: 'RZ · TALCA'; position: absolute; right: 14px; bottom: 13px; padding: 6px 9px; border-radius: 999px; background: rgba(25,48,61,.88); color: #fff; font-size: .55rem; font-weight: 900; letter-spacing: .1em; pointer-events: none; }
.ubicacion__datos { position: relative; }

.pie { position: relative; overflow: hidden; }
.pie::before { content: ''; position: absolute; inset: 0 0 auto; height: 4px; background: linear-gradient(100deg, #08bcbc, #00a8ac); }
.pie__rejilla > div:not(.pie__marca) { padding-top: 0; }
.pie li a { transition: color .2s ease,transform .2s ease; }.pie li a:hover { color: var(--fucsia); transform: translateX(3px); }
.pie .boton--wsp { box-shadow: 0 10px 24px rgba(37,211,102,.15); }

@media (max-width: 640px) {
  body[data-pagina='inicio'] .bloque--productos .enlace-flecha { padding: 7px 10px; }
  body[data-pagina='inicio'] .producto::before { height: 3px; }
  .conocenos__manifiesto { padding-top: 23px; }.conocenos__manifiesto > span { font-size: 3.8rem; }
  .impacto::before { display: none; }
}

/* ---------- Páginas de información ---------- */

/* Texto largo: se limita el ancho para que la línea sea legible. */
.info__cabecera, .info, .info__ayuda { max-width: 940px; margin-inline: auto; }
.info__cabecera { margin-bottom: 30px; }
.info__cabecera h1 { margin: 6px 0 10px; font-size: clamp(2.1rem, 4vw, 3rem); }
.info__bajada { margin: 0; color: var(--tinta-media); font-size: 1.02rem; }
.info { display: grid; gap: 18px; }
.tarjeta-info { padding: 26px 28px; border: 1px solid var(--borde); border-radius: var(--radio); background: #fff; box-shadow: var(--sombra); }
.tarjeta-info h2 { margin: 10px 0 12px; font-size: 1.35rem; }
.tarjeta-info p { margin: 0 0 11px; max-width: 74ch; color: var(--tinta-media); font-size: 0.94rem; }
.tarjeta-info p:last-child { margin-bottom: 0; }
.tarjeta-info a { color: var(--fucsia-hondo); font-weight: 700; text-decoration: underline; }

/* Acordeón de preguntas: <details> nativo, sin JavaScript. */
.faq { padding: 4px 24px; border: 1px solid var(--borde); border-radius: var(--radio-chico); background: #fff; }
.faq summary { padding: 16px 34px 16px 0; position: relative; font-family: 'Baloo 2', sans-serif; font-size: 1.02rem; font-weight: 700; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; top: 50%; right: 2px; translate: 0 -50%; color: var(--fucsia); font-size: 1.5rem; font-weight: 700; }
.faq[open] summary::after { content: '−'; }
.faq summary:hover { color: var(--fucsia-hondo); }
.faq__respuesta { padding: 0 0 18px; max-width: 74ch; color: var(--tinta-media); font-size: 0.94rem; }
.faq__respuesta p { margin: 0; }

.info__ayuda { margin: 30px auto 46px; padding: 26px 30px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; border-radius: var(--radio); background: var(--rosa); }
.info__ayuda h2 { margin: 0 0 4px; font-size: 1.3rem; }
.info__ayuda p { margin: 0; color: var(--tinta-media); font-size: 0.92rem; }

@media (max-width: 640px) {
  .tarjeta-info { padding: 22px 20px; }
  .faq { padding: 2px 18px; }
  .info__ayuda { padding: 22px 20px; }
  .info__ayuda .boton { width: 100%; }
}

/* ---------- Cantidad, consulta y foto ampliada en la ficha ---------- */

.ficha__compra { display: flex; gap: 10px; align-items: stretch; }
.ficha__compra .boton { flex: 1; }

.cantidad { flex: none; display: flex; align-items: center; border: 1px solid var(--borde); border-radius: 12px; background: #fff; overflow: hidden; }
.cantidad__paso { width: 38px; align-self: stretch; border: 0; background: none; color: var(--tinta-media); font-size: 1.15rem; font-weight: 800; cursor: pointer; transition: var(--transicion); }
.cantidad__paso:hover { background: var(--nube); color: var(--fucsia); }
.cantidad__valor { width: 40px; padding: 0; border: 0; text-align: center; font-family: 'Baloo 2', sans-serif; font-size: 1.02rem; font-weight: 700; color: var(--tinta); background: none; -moz-appearance: textfield; }
.cantidad__valor::-webkit-outer-spin-button, .cantidad__valor::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cantidad__valor:focus { outline: none; }

.ficha__consulta { display: block; margin-top: 12px; text-align: center; color: var(--turquesa-hondo); font-size: 0.84rem; font-weight: 800; }
.ficha__consulta:hover { color: var(--fucsia); }

/* La foto grande abre a pantalla completa: el detalle del producto (medidas,
   piezas) suele estar en la propia imagen. */
.ficha__foto { cursor: zoom-in; }
.ampliar { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: 18px; background: rgba(8, 16, 21, 0.78); backdrop-filter: blur(10px); animation: ampliar-entra .2s ease; overscroll-behavior: contain; }
@keyframes ampliar-entra { from { opacity: 0; } }
.ampliar[hidden] { display: none; }
.ampliar__contenido { position: relative; width: min(1400px, 100%); height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; gap: 12px; padding: 14px 18px 12px; border: 1px solid rgba(255,255,255,.1); border-radius: 22px; background: linear-gradient(160deg, #1b303b, #0f1b22); box-shadow: 0 28px 80px rgba(0,0,0,.45); animation: ampliar-sube .24s cubic-bezier(.2,.7,.3,1); }
@keyframes ampliar-sube { from { transform: translateY(14px) scale(.985); opacity: 0; } }
.ampliar:fullscreen { padding: 0; background: #0b151b; }
.ampliar:fullscreen .ampliar__contenido { width: 100%; border: 0; border-radius: 0; }
.ampliar__cabecera { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 0 4px; color: #fff; }
.ampliar__cabecera p { margin: 0 0 2px; color: #8ee7e3; font-size: .68rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.ampliar__cabecera h2 { max-width: 60ch; margin: 0; color: #fff; font-size: clamp(1rem, 2vw, 1.35rem); line-height: 1.1; }
.ampliar__cabecera strong { display: inline-block; margin-top: 4px; color: #fff; font-family: 'Baloo 2', sans-serif; font-size: 1.2rem; }
.ampliar__acciones { display: flex; flex: none; gap: 8px; }
.ampliar__lienzo { position: relative; min-height: 0; display: grid; place-items: center; overflow: hidden; border-radius: 16px; background: radial-gradient(circle at 50% 40%, rgba(255,255,255,.07), rgba(0,0,0,.22)); }
.ampliar__imagen { position: absolute; inset: 0; margin: auto; max-width: 100%; max-height: 100%; border-radius: 12px; background: #fff; object-fit: contain; box-shadow: 0 18px 48px rgba(0,0,0,.3); cursor: zoom-in; user-select: none; -webkit-user-drag: none; will-change: transform; image-rendering: high-quality; }
.ampliar--zoom .ampliar__imagen { cursor: grab; border-radius: 0; box-shadow: none; }
.ampliar--arrastrando .ampliar__imagen { cursor: grabbing; }
.ampliar__cargando { position: absolute; top: 12px; left: 50%; translate: -50% 0; padding: 6px 12px 6px 30px; border-radius: 999px; background: rgba(0,0,0,.55); color: #fff; font-size: .74rem; font-weight: 800; pointer-events: none; }
.ampliar__cargando::before { content: ''; position: absolute; left: 11px; top: 50%; width: 11px; height: 11px; margin-top: -6.5px; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; border-radius: 50%; animation: ampliar-gira .7s linear infinite; }
@keyframes ampliar-gira { to { transform: rotate(360deg); } }
.ampliar__boton, .ampliar__navegar { width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255,255,255,.95); color: var(--tinta); box-shadow: 0 4px 16px rgba(0,0,0,.2); font-size: 1.35rem; line-height: 1; cursor: pointer; transition: background .15s, transform .15s; }
.ampliar__cerrar { font-size: 1.6rem; }
.ampliar__navegar { position: absolute; top: 50%; z-index: 2; translate: 0 -50%; font-size: 2rem; }
.ampliar__anterior { left: 12px; }
.ampliar__siguiente { right: 12px; }
.ampliar--zoom .ampliar__navegar { opacity: .35; }
.ampliar--zoom .ampliar__navegar:hover { opacity: 1; }
.ampliar__herramientas { position: absolute; right: 12px; bottom: 12px; z-index: 2; display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 999px; background: rgba(255,255,255,.95); box-shadow: 0 6px 20px rgba(0,0,0,.25); }
.ampliar__herramientas button { min-width: 36px; height: 36px; padding: 0 10px; border: 0; border-radius: 999px; background: transparent; color: var(--tinta); font-size: 1.25rem; font-weight: 800; line-height: 1; cursor: pointer; }
.ampliar__herramientas button[data-zoom='ajustar'] { font-size: .78rem; }
.ampliar__herramientas button:disabled { opacity: .3; cursor: default; }
.ampliar__herramientas button:not(:disabled):hover { background: var(--rosa); color: var(--fucsia-hondo); }
.ampliar__nivel { min-width: 46px; color: var(--tinta); text-align: center; font-size: .75rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.ampliar__pie { min-width: 0; display: flex; align-items: center; justify-content: center; gap: 12px; }
.ampliar__miniaturas { min-width: 0; max-width: 100%; display: flex; gap: 8px; padding: 3px; overflow-x: auto; scrollbar-width: none; }
.ampliar__miniaturas button { flex: none; width: 62px; height: 62px; padding: 0; overflow: hidden; border: 2px solid transparent; border-radius: 10px; background: #fff; cursor: pointer; opacity: .6; transition: opacity .15s; }
.ampliar__miniaturas button:hover { opacity: .9; }
.ampliar__miniaturas button[aria-current='true'] { border-color: var(--fucsia); opacity: 1; box-shadow: 0 0 0 2px rgba(255,46,152,.28); }
.ampliar__miniaturas img { width: 100%; height: 100%; object-fit: cover; }
.ampliar__contador { flex: none; padding: 5px 10px; border-radius: 999px; background: rgba(255,255,255,.14); color: #fff; font-size: .75rem; font-weight: 900; }
.ampliar__ayuda { margin: 0; color: rgba(255,255,255,.7); text-align: center; font-size: .76rem; font-weight: 700; }
.ampliar__boton:hover, .ampliar__navegar:hover { background: var(--rosa); color: var(--fucsia-hondo); }
.ampliar button:focus-visible { outline: 3px solid var(--turquesa); outline-offset: 3px; }
body.sin-scroll { overflow: hidden; }

@media (max-width: 640px) {
  .ampliar { padding: 0; }
  .ampliar__contenido { width: 100%; padding: 10px 8px calc(8px + env(safe-area-inset-bottom)); gap: 8px; border: 0; border-radius: 0; }
  .ampliar__cabecera h2 { font-size: 1rem; }
  .ampliar__cabecera strong { font-size: 1.05rem; }
  .ampliar__completa { display: none; }
  .ampliar__lienzo { border-radius: 12px; }
  .ampliar__imagen { border-radius: 8px; }
  .ampliar__navegar { width: 38px; height: 38px; font-size: 1.6rem; }
  .ampliar__anterior { left: 4px; }
  .ampliar__siguiente { right: 4px; }
  .ampliar__herramientas { right: 8px; bottom: 8px; }
  .ampliar__herramientas button[data-zoom='ajustar'] { display: none; }
  .ampliar__miniaturas button { width: 50px; height: 50px; }
}

/* ---------- Secciones con pocos productos ---------- */

.seccion-corta { margin-top: 34px; display: grid; gap: 30px; }
.seccion-corta__aviso { padding: 24px 28px; display: flex; align-items: center; justify-content: space-between; gap: 22px; flex-wrap: wrap; border: 1px dashed color-mix(in srgb, var(--turquesa) 45%, #dfe4e7); border-radius: var(--radio); background: var(--nube); }
.seccion-corta__aviso h2 { margin: 0 0 5px; font-size: 1.25rem; }
.seccion-corta__aviso p { margin: 0; max-width: 62ch; color: var(--tinta-media); font-size: 0.9rem; }
.seccion-corta__mas .bloque__titulo { margin-bottom: 16px; }
/* Controles accesibles y ajustes de compra móvil. */
.producto__favorito { z-index: 3; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 1px solid #e8dfe4; border-radius: 50%; background: rgba(255,255,255,.96); cursor: pointer; text-shadow: none; }
.producto__favorito[aria-pressed='true'], .ficha__favorito[aria-pressed='true'] { color: #ca176e; background: #fff0f7; }
.ficha__favorito { display: block; padding: 12px 16px; margin-top: 12px; min-height: 44px; border: 1px solid #edcddd; border-radius: 10px; background: #fff; color: #ad2369; cursor: pointer; }
.acceso-favoritos svg { fill: none; stroke: currentColor; stroke-width: 1.7; }
.favoritos-aviso { position: fixed; z-index: 110; bottom: 20px; left: 20px; max-width: min(400px, calc(100vw - 100px)); padding: 12px 16px; border-radius: 12px; background: #174d55; color: #fff; box-shadow: 0 5px 20px #16323e22; font-size: .85rem; pointer-events: none; }
.favoritos-aviso:empty { display: none; }
.checkout-item { background: #fff; border: 1px solid #d5e9e9; border-radius: 13px; overflow: hidden; }
.checkout-item .checkout-producto { border: 0; border-radius: 0; }
.checkout-controles { display: flex; align-items: center; gap: 8px; padding: 0 10px 10px; flex-wrap: wrap; }
.checkout-controles button { min-width: 44px; min-height: 44px; border: 1px solid #c8dfe0; border-radius: 9px; background: #f3fbfb; color: #164d55; cursor: pointer; font-weight: 800; }
.checkout-controles button[data-accion='eliminar'] { margin-left: auto; color: #ad2369; padding-inline: 12px; background: #fff2f8; }
.checkout-controles button:disabled { opacity: .5; cursor: not-allowed; }
.checkout-controles span { min-width: 20px; text-align: center; font-weight: 800; }
button:focus-visible, a:focus-visible { outline: 2px solid #08777d; outline-offset: 3px; }
@media (max-width: 1180px) and (min-width: 901px) { .cabecera__acciones { gap: 12px; } .acceso-favoritos > span { display: none; } }
@media (max-width: 900px) {
  .cabecera__principal { grid-template-columns: 38px minmax(0, 1fr) auto; }
  .cabecera__acciones .accion { width: 44px; height: 44px; }
  .contador button, .linea__eliminar, .menu__flecha { min-width: 44px; min-height: 44px; }
  .checkout-datos, .checkout-pago { min-width: 0; }
  .checkout-producto strong { overflow-wrap: anywhere; }
  body[data-pagina='checkout'] .wsp-flotante { display: none; }
}
@media (max-width: 370px) { .cabecera__principal .logo img { width: 120px; } .checkout-datos, .checkout-pago { padding: 16px; } }
@media (prefers-reduced-motion: reduce) { .panel, .producto, .boton { transition: none; } }

@media (max-width: 640px) {
  .seccion-corta__aviso { padding: 20px; }
  .seccion-corta__aviso .boton { width: 100%; }
}

.grupo-filtro__nota { margin: 7px 0 0; color: var(--tinta-tenue); font-size: 0.78rem; line-height: 1.35; }

/* ---------- Edad recomendada ----------

   Va pegada al estado, arriba del todo: quien busca un regalo pregunta "¿para
   qué edad es?" antes que ninguna otra cosa, y esa duda se resuelve o se
   pierde la venta. */
.ficha__estado { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin: 9px 0 16px; }
.ficha__estado .ficha__stock { margin: 0; }
.ficha__edad {
  width: fit-content;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--rosa);
  color: var(--fucsia-hondo);
  font-size: 0.82rem;
  font-weight: 900;
  white-space: nowrap;
}

/* ---------- El salto al cambiar de sección ----------

   La cabecera llega vacía en el HTML y la rellena tienda.js. Entre una cosa y
   otra la página se pinta sin menú y, al aparecer, todo lo de abajo baja de
   golpe: eso es el tirón que se nota al ir de una sección a otra.

   Se le reserva el hueco de antemano. Con :empty la reserva desaparece sola en
   cuanto hay contenido, así que si mañana la cabecera cambia de alto no queda
   un espacio muerto que nadie recuerde por qué está.                         */
.cabecera:empty { min-height: 178px; }

@media (max-width: 900px) {
  .cabecera:empty { min-height: 158px; }
}

/* El paso de una página a otra, en fundido, donde el navegador lo permita.
   Quien no lo soporte navega como siempre, sin nada roto. */
@view-transition { navigation: auto; }

@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 0.22s;
    animation-timing-function: ease;
  }
}

/* ---------- Movimiento: un fundido y poco más ----------

   Todo se hace con transiciones, nunca con @keyframes. Una animación termina y
   devuelve el elemento a su regla de origen; si esa regla dice opacity 0, el
   producto se desvanece justo después de aparecer. Una transición, en cambio,
   se queda donde llega. Aquí no se anima nada que pueda dejar un producto
   invisible.

   El listón: solo opacidad y un desplazamiento de 8px. Sin rebotes, sin giros,
   sin escalas. Lo que se compra son los juguetes, y tienen que verse.

   Todo cuelga de .js-animar, que pone el JavaScript solo cuando comprueba que
   puede volver a mostrarlo. Sin esa clase la página se ve entera y quieta. */

/* Las fotos entran con un fundido en vez de aparecer de golpe. */
.js-animar .producto__foto,
.js-animar .tarjeta-seccion__foto img,
.js-animar .impacto__imagen img {
  opacity: 0;
  transition: opacity 0.4s ease;
}
.js-animar .producto__foto.cargada,
.js-animar .tarjeta-seccion__foto img.cargada,
.js-animar .impacto__imagen img.cargada { opacity: 1; }

@media (min-width: 901px) {
  .js-animar .rejilla { animation: none; }

  /* Solo se esconde lo que aún no ha llegado a la pantalla: el JavaScript pone
     .esperando a lo que está por debajo y se la quita al llegar. Lo que ya se
     ve al abrir la página no se toca, y por eso no parpadea al cambiar de
     sección: el catálogo aparece pintado, no se enciende.

     El retraso escalona la entrada; el tope de 6 evita que la última tarjeta de
     una rejilla larga se haga esperar. */
  .js-animar .rejilla .producto,
  .js-animar .rejilla-secciones .tarjeta-seccion,
  .js-animar .revelar {
    transition: opacity 0.4s ease, transform 0.4s ease;
  }
  .js-animar .rejilla .producto,
  .js-animar .rejilla-secciones .tarjeta-seccion {
    transition-delay: calc(min(var(--i, 0), 6) * 0.05s);
  }

  .js-animar .esperando .producto,
  .js-animar .esperando .tarjeta-seccion,
  .js-animar .revelar.esperando {
    opacity: 0;
    transform: translateY(8px);
  }
}

/* Quien pidió menos movimiento lo recibe todo quieto y visible. */
@media (prefers-reduced-motion: reduce) {
  .js-animar .producto__foto,
  .js-animar .tarjeta-seccion__foto img,
  .js-animar .impacto__imagen img,
  .js-animar .revelar,
  .js-animar .esperando .producto,
  .js-animar .esperando .tarjeta-seccion,
  .js-animar .revelar.esperando {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* La cascada de acabado está debajo de la base responsive. Este cierre mantiene
   las decisiones móviles compactas por encima de cualquier regla decorativa. */
@media (max-width: 640px) {
  .franja__interior { min-height: 29px; }
  .cabecera__principal { padding-block: 6px 8px; }
  .buscador { height: 40px; margin-top: 2px; }

  body[data-pagina='inicio'] .portada { min-height: 520px; border-radius: 0 0 18px 18px; background-image: url('/assets/hero-movil-v2-720.webp'); background-size: cover; background-position: center bottom; }
  body[data-pagina='inicio'] .portada::before { background: linear-gradient(180deg,#fff 0%,rgba(255,255,255,.99) 43%,rgba(255,255,255,.88) 56%,rgba(255,255,255,.2) 74%,rgba(255,255,255,0) 88%); }
  body[data-pagina='inicio'] .portada::after { opacity: .42; transform: scale(.82); transform-origin: top right; }
  body[data-pagina='inicio'] .portada__contenido { width: 100%; padding: 18px 17px; }
  body[data-pagina='inicio'] .portada h1 { max-width: 7.5ch; font-size: clamp(2.18rem,10vw,2.8rem); line-height: .9; }
  body[data-pagina='inicio'] .portada h1 em { margin-top: 5px; }
  body[data-pagina='inicio'] .portada h1 em::after { bottom: -7px; height: 7px; border-top-width: 3px; }
  body[data-pagina='inicio'] .portada__contenido > p:not(.portada__eyebrow):not(.portada__confianza) { max-width: 28ch; margin-block: 9px 11px; font-size: .72rem; line-height: 1.35; }
  body[data-pagina='inicio'] .portada__acciones { display: block; }
  body[data-pagina='inicio'] .portada__acciones .boton { min-height: 38px; padding: 7px 14px; font-size: .73rem; border-radius: 10px; }
  body[data-pagina='inicio'] .portada__conocenos,
  body[data-pagina='inicio'] .portada__confianza { display: none; }
  body[data-pagina='inicio'] .portada__sello { right: 9px; bottom: 8px; width: auto; min-width: 176px; padding: 6px 8px; grid-template-columns: 29px 1fr auto; gap: 7px; border-radius: 12px; background: rgba(255,255,255,.92); }
  body[data-pagina='inicio'] .portada__sello > span:first-child { width: 29px; height: 29px; border-radius: 9px; }
  body[data-pagina='inicio'] .portada__sello small { font-size: .5rem; }
  body[data-pagina='inicio'] .portada__sello strong { font-size: .59rem; }
  body[data-pagina='inicio'] .bloque--categorias { padding: 31px 0 14px; }
  body[data-pagina='inicio'] .bloque--categorias .bloque__titulo { margin-bottom: 16px; }
  body[data-pagina='inicio'] .bloque--categorias .bloque__titulo h2 { max-width: 100%; font-size: clamp(1.55rem,8vw,1.78rem); line-height: 1; overflow-wrap: anywhere; }
  body[data-pagina='inicio'] .tarjeta-seccion { min-width: 142px; min-height: 188px; padding: 0 12px 12px; border-radius: 16px; }
  body[data-pagina='inicio'] .tarjeta-seccion__foto { height: 96px; margin: 0 -12px 10px; }
  body[data-pagina='inicio'] .tarjeta-seccion__icono { top: 76px; left: 11px; width: 37px; height: 37px; }

  body[data-pagina='seccion'] .miga { padding-block: 11px 8px; }
  body[data-pagina='seccion'] .banner-categoria { min-height: 228px; margin-bottom: 12px; align-items: center; border-radius: 0 0 18px 18px; }
  body[data-pagina='seccion'] .banner-categoria::before { inset: 0 0 0 43%; background-size: auto 100%; background-position: 58% center; -webkit-mask-image: linear-gradient(90deg,transparent 0%,rgba(0,0,0,.38) 20%,#000 52%); mask-image: linear-gradient(90deg,transparent 0%,rgba(0,0,0,.38) 20%,#000 52%); }
  body[data-pagina='seccion'] .banner-categoria::after,
  body[data-pagina='seccion'] .banner-categoria--sensoriales::after { background: linear-gradient(90deg,#fff 0%,#fff 42%,rgba(255,255,255,.95) 51%,rgba(255,255,255,.56) 67%,rgba(255,255,255,.06) 88%); }
  body[data-pagina='seccion'] .banner-categoria__contenido { width: 62%; padding: 16px 0 16px 17px; }
  body[data-pagina='seccion'] .banner-categoria h1 { max-width: 8ch; display: block; font-size: clamp(2rem,9.5vw,2.55rem); line-height: .92; }
  body[data-pagina='seccion'] .banner-categoria__contenido > p:not(.sobrelinea) { max-width: 25ch; margin-block: 8px 11px; font-size: .72rem; line-height: 1.35; }

  body[data-pagina='inicio'] .producto__cuerpo,
  body[data-pagina='seccion'] .catalogo .producto__cuerpo,
  body[data-pagina='buscar'] .producto__cuerpo,
  body[data-pagina='producto'] .producto__cuerpo { min-height: 132px; padding: 10px; }
  body[data-pagina='inicio'] .producto__nombre,
  body[data-pagina='seccion'] .producto__nombre,
  body[data-pagina='buscar'] .producto__nombre { font-size: .75rem; line-height: 1.25; }
  body[data-pagina='inicio'] .producto__precio { font-size: 1rem; }
  body[data-pagina='inicio'] .boton--agregar { min-height: 39px; padding: 0; box-shadow: none; }
  body[data-pagina='inicio'] .boton--agregar::after { display: none; }

  /* Continuidad vertical: cada bloque enlaza con el siguiente sin grandes
     franjas vacías, pero conserva separación suficiente entre temas. */
  body[data-pagina='inicio'] .objetivos { margin-bottom: 16px; padding-block: 26px; }
  body[data-pagina='inicio'] .objetivos__intro h2 { font-size: 1.65rem; }
  body[data-pagina='inicio'] .objetivo { min-width: 255px; padding: 11px 12px; }
  body[data-pagina='inicio'] .beneficios { min-height: 0; margin-top: 0; }
  body[data-pagina='inicio'] .beneficios article { min-height: 64px; padding-block: 9px; }
  body[data-pagina='inicio'] .bloque--productos { padding: 40px 0 38px; }
  body[data-pagina='inicio'] .impacto { margin-block: 24px 30px; }
  body[data-pagina='inicio'] .impacto__imagen { height: 190px; }
  body[data-pagina='inicio'] .impacto__contenido { padding: 20px 18px 22px; }
  body[data-pagina='inicio'] .impacto__contenido h2 { margin-bottom: 10px; font-size: 1.85rem; }
  body[data-pagina='inicio'] .impacto__puntos { margin-top: 12px; }
  body[data-pagina='inicio'] .conocenos { margin-block: 20px 28px; gap: 12px; }
  body[data-pagina='inicio'] .conocenos__historia { padding: 23px 20px; }
  body[data-pagina='inicio'] .conocenos__historia h2 { font-size: 1.9rem; }
  body[data-pagina='inicio'] .conocenos__valores { margin-top: 16px; gap: 9px; }
  body[data-pagina='inicio'] .ubicacion { grid-template-rows: 180px auto; }
  body[data-pagina='inicio'] .ubicacion__mapa,
  body[data-pagina='inicio'] .ubicacion__mapa iframe { min-height: 180px; }
  body[data-pagina='inicio'] .ubicacion__datos { padding: 19px 20px 22px; }
  body[data-pagina='inicio'] .ubicacion__datos h2 { font-size: 1.75rem; }
  body[data-pagina='inicio'] .como-comprar { padding-block: 40px; }
  body[data-pagina='inicio'] .como-comprar h2 { font-size: 1.85rem; }
  body[data-pagina='inicio'] .como-comprar__interior { gap: 23px; }
  body[data-pagina='inicio'] .pasos li { padding-block: 13px; }
  .wsp-flotante { right: 10px; width: 49px; height: 49px; border-width: 3px; font-size: 1.3rem; }
}

@media (max-width: 640px) {
  @supports (background-image: image-set(url('/assets/hero-movil-v2-720.avif') type('image/avif'))) {
    body[data-pagina='inicio'] .portada { background-image: image-set(url('/assets/hero-movil-v2-720.avif') type('image/avif'), url('/assets/hero-movil-v2-720.webp') type('image/webp')); }
  }
}

/* ---------- Carrito lateral más ligero ---------- */
@media (min-width: 641px) {
  .panel { width: min(430px,100%); box-shadow: -14px 0 42px rgba(25,35,44,.16); }
  .panel__cabecera { min-height: 78px; padding: 14px 20px; }
  .panel__cabecera h2 { font-size: 1.5rem; }
  .panel__cabecera button { width: 36px; height: 36px; font-size: 1.3rem; }
  .panel__lista { padding: 6px 18px; }
  .linea { padding: 12px 25px 12px 0; grid-template-columns: 74px 1fr; gap: 12px; }
  .linea img { width: 74px; height: 74px; border-radius: 10px; }
  .linea__nombre { font-size: .82rem; line-height: 1.28; }
  .linea__precio { margin-block: 2px; font-size: 1.02rem; }
  .linea__stock { font-size: .72rem; }
  .contador { gap: 8px; }
  .contador button { width: 30px; height: 30px; border-radius: 8px; }
  .contador strong { min-width: 16px; text-align: center; font-size: .82rem; }
  .linea__eliminar { top: 10px; font-size: 1.1rem; }
  .panel__pie { padding: 15px 18px; gap: 8px; }
  .total { font-size: 1.15rem; }
  .total span:last-child { font-size: 1.55rem; }
  .panel__pie .boton { min-height: 44px; padding-block: 10px; }
  .panel__seguridad { font-size: .66rem; }
}

/* ---------- Hero móvil v61 ----------
   En escritorio la foto panorámica sigue como fondo lateral. En móvil se
   separan mensaje y fotografía: no se lava la cara de los niños con un gran
   degradado y el encuadre puede cuidarse de forma independiente. */
.portada__imagen-movil { display: none; }

@media (max-width: 640px) {
  body[data-pagina='inicio'] .portada {
    display: grid;
    grid-template-rows: auto auto;
    min-height: 0;
    overflow: hidden;
    background-color: #fffaf7;
    background-image: none !important;
  }
  body[data-pagina='inicio'] .portada::before,
  body[data-pagina='inicio'] .portada::after { display: none; }
  body[data-pagina='inicio'] .portada__contenido {
    width: 100%;
    padding: 25px 22px 23px;
    background:
      radial-gradient(circle at 100% 0, rgba(255,46,152,.07), transparent 42%),
      linear-gradient(145deg, #fff 0%, #fffaf7 100%);
  }
  body[data-pagina='inicio'] .portada h1 {
    max-width: 9ch;
    font-size: clamp(2.35rem, 11.5vw, 3rem);
    line-height: .91;
  }
  body[data-pagina='inicio'] .portada__contenido > p:not(.portada__eyebrow):not(.portada__confianza) {
    max-width: 31ch;
    margin-block: 15px 17px;
    font-size: .88rem;
    line-height: 1.45;
  }
  body[data-pagina='inicio'] .portada__acciones .boton {
    min-height: 44px;
    padding: 9px 18px;
    border-radius: 12px;
    font-size: .82rem;
  }
  body[data-pagina='inicio'] .portada__imagen-movil {
    display: block;
    width: 100%;
    height: clamp(245px, 74vw, 300px);
    min-height: 245px;
    background-color: #eee8df;
    background-image: url('/assets/hero-movil-v2-720.webp');
    background-repeat: no-repeat;
    background-position: center 70%;
    background-size: cover;
  }
  body[data-pagina='inicio'] .portada__sello {
    right: 10px;
    bottom: 10px;
    width: auto;
    min-width: 190px;
    box-shadow: 0 9px 24px rgba(32,55,50,.18);
  }
}

@media (max-width: 640px) {
  @supports (background-image: image-set(url('/assets/hero-movil-v2-720.avif') type('image/avif'))) {
    body[data-pagina='inicio'] .portada__imagen-movil {
      background-image: image-set(url('/assets/hero-movil-v2-720.avif') type('image/avif'), url('/assets/hero-movil-v2-720.webp') type('image/webp'));
    }
  }
}

@media (max-width: 640px) {
  .panel__cabecera { min-height: 72px; padding: 12px 15px; }
  .panel__cabecera h2 { font-size: 1.45rem; }
  .panel__lista { padding: 5px 14px; }
  .linea { padding-block: 11px; grid-template-columns: 66px 1fr; gap: 11px; }
  .linea img { width: 66px; height: 66px; border-radius: 10px; }
  .linea__nombre { font-size: .8rem; }
  .linea__precio { font-size: 1rem; }
  .linea__stock { font-size: .7rem; }
  .panel__pie { padding: 14px 15px calc(14px + env(safe-area-inset-bottom)); gap: 8px; }
  .total { font-size: 1.12rem; }
  .total span:last-child { font-size: 1.5rem; }
}

/* ---------- Hero móvil v63: foto primero, mensaje después ----------
   Solo cambia la portada de inicio hasta 640 px. La composición panorámica de
   escritorio conserva sus dos columnas y su imagen original. */
@media (max-width: 640px) {
  body[data-pagina='inicio'] .portada {
    grid-template-areas: 'foto' 'mensaje';
    grid-template-rows: auto auto;
    gap: 8px;
    padding: 18px 14px 24px;
    border-radius: 0 0 24px 24px;
    background:
      radial-gradient(circle at 12% 19%, rgba(9,185,187,.13) 0 25px, transparent 26px),
      radial-gradient(circle at 90% 33%, rgba(255,46,152,.11) 0 31px, transparent 32px),
      linear-gradient(155deg, #edfffa 0%, #fffaf0 56%, #fff6fb 100%);
  }
  body[data-pagina='inicio'] .portada__imagen-movil {
    grid-area: foto;
    width: min(78vw, 292px);
    height: auto;
    min-height: 0;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    border: 7px solid rgba(255,255,255,.86);
    border-radius: 46% 54% 49% 51% / 42% 45% 55% 58%;
    background-position: 61% 66%;
    background-size: auto 148%;
    box-shadow: 0 15px 35px rgba(35,91,82,.15), 0 0 0 1px rgba(48,142,130,.09);
    transform: rotate(-1deg);
  }
  body[data-pagina='inicio'] .portada__contenido {
    grid-area: mensaje;
    padding: 5px 8px 0;
    background: none;
    text-align: center;
  }
  body[data-pagina='inicio'] .portada h1 {
    max-width: none;
    margin-inline: auto;
    font-size: clamp(1.78rem, 8.5vw, 2.05rem);
    line-height: .98;
  }
  body[data-pagina='inicio'] .portada h1 br { display: none; }
  body[data-pagina='inicio'] .portada h1 em {
    display: block;
    width: fit-content;
    margin: 5px auto 0;
  }
  body[data-pagina='inicio'] .portada h1 em::after { bottom: -6px; }
  body[data-pagina='inicio'] .portada__contenido > p:not(.portada__eyebrow):not(.portada__confianza) {
    max-width: 320px;
    margin: 14px auto 15px;
    color: #46524f;
    font-size: .82rem;
    line-height: 1.42;
  }
  body[data-pagina='inicio'] .portada__acciones {
    display: flex;
    justify-content: center;
  }
  body[data-pagina='inicio'] .portada__acciones .boton {
    min-height: 44px;
    padding: 10px 24px;
    border-radius: 999px;
    font-size: .84rem;
    box-shadow: 0 9px 22px rgba(6,185,187,.22);
  }
  body[data-pagina='inicio'] .portada__sello { display: none; }
}

@media (max-width: 390px) {
  body[data-pagina='inicio'] .portada { padding-top: 13px; padding-bottom: 20px; }
  body[data-pagina='inicio'] .portada__imagen-movil { width: min(72vw, 266px); }
  body[data-pagina='inicio'] .portada h1 { font-size: 1.72rem; }
  body[data-pagina='inicio'] .portada__contenido > p:not(.portada__eyebrow):not(.portada__confianza) { margin-block: 12px 13px; font-size: .78rem; }
}

/* ---------- Detalles infantiles v64 ---------- */
.portada__adornos-movil { display: none; }

@media (max-width: 640px) {
  /* Cuatro stickers pequeños viven en el borde exterior de la fotografía. No
     invaden el recorte central ni continúan hacia el bloque de lectura. */
  body[data-pagina='inicio'] .portada__imagen-movil { position: relative; z-index: 1; }
  body[data-pagina='inicio'] .portada__adornos-movil {
    position: relative;
    z-index: 2;
    grid-area: foto;
    align-self: center;
    justify-self: center;
    width: min(82vw, 310px);
    aspect-ratio: 1;
    display: block;
    pointer-events: none;
    transform: rotate(-1deg);
  }
  body[data-pagina='inicio'] .portada__adornos-movil span {
    position: absolute;
    width: 39px;
    height: 39px;
    display: grid;
    place-items: center;
    border: 4px solid #fff;
    border-radius: 13px;
    background: #fff;
    font: 900 1.05rem/1 'Baloo 2', sans-serif;
    box-shadow: 0 5px 13px rgba(37,68,63,.17);
  }
  body[data-pagina='inicio'] .portada__adornos-movil span:nth-child(1) { left: -3px; top: 35px; color: #dc9434; background: #fff2d7; transform: rotate(-14deg); }
  body[data-pagina='inicio'] .portada__adornos-movil span:nth-child(2) { right: -1px; top: 43px; color: #704fc2; background: #eee8ff; transform: rotate(12deg); }
  body[data-pagina='inicio'] .portada__adornos-movil span:nth-child(3) { left: 3px; bottom: 38px; background: #e9f8f4; font-size: 1rem; transform: rotate(10deg); }
  body[data-pagina='inicio'] .portada__adornos-movil span:nth-child(4) { right: 7px; bottom: 32px; color: #ec4d98; background: #ffe4f0; transform: rotate(-10deg); }

  /* El menú conserva la jerarquía de enlaces y acordeones, pero cada familia
     se reconoce ahora por icono y color antes de tener que leer su nombre. */
  .menu[data-abierto='true'] { gap: 6px; padding: 10px 12px 16px; background: #fffdfb; }
  .menu[data-abierto='true'] .menu__inicio {
    min-height: 42px;
    padding: 5px 11px;
    border: 1px solid #d6e7e2;
    border-radius: 14px;
    background: #edf8f5;
    color: #215c53;
    font-size: .93rem;
  }
  .menu[data-abierto='true'] .menu__inicio > span {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: #fff;
    color: #258275;
  }
  .menu[data-abierto='true'] .menu__item {
    --menu-color: #d83f87;
    --menu-fondo: #fff0f7;
    grid-template-columns: 36px minmax(0, 1fr) 38px;
    min-height: 46px;
    padding: 3px 6px;
    border: 1px solid color-mix(in srgb, var(--menu-color) 30%, #dfe7e5);
    border-left: 5px solid var(--menu-color);
    border-radius: 15px;
    background: var(--menu-fondo);
  }
  .menu[data-abierto='true'] .menu__item[data-seccion='juguetes'] { --menu-color: #e1458c; --menu-fondo: #fff0f7; }
  .menu[data-abierto='true'] .menu__item[data-seccion='sensoriales'] { --menu-color: #16a79d; --menu-fondo: #eaf9f6; }
  .menu[data-abierto='true'] .menu__item[data-seccion='educativos'] { --menu-color: #6d55cc; --menu-fondo: #f1eeff; }
  .menu[data-abierto='true'] .menu__item[data-seccion='bebes'] { --menu-color: #ee6c78; --menu-fondo: #fff0f1; }
  .menu[data-abierto='true'] .menu__item[data-seccion='juegos-y-creatividad'] { --menu-color: #d99224; --menu-fondo: #fff7e7; }
  .menu[data-abierto='true'] .menu__icono {
    grid-column: 1;
    width: 29px;
    height: 29px;
    margin: 0;
    display: grid;
    border: 1px solid color-mix(in srgb, var(--menu-color) 25%, #fff);
    border-radius: 11px;
    background: rgba(255,255,255,.82);
    color: var(--menu-color);
    font-size: .95rem;
  }
  .menu[data-abierto='true'] .menu__enlace:not(.menu__inicio) {
    grid-column: 2;
    width: 100%;
    min-height: 40px;
    padding: 6px 7px;
    background: transparent;
    color: #253c38;
    font-size: .91rem;
  }
  .menu[data-abierto='true'] .menu__item .menu__flecha {
    grid-column: 3;
    width: 36px;
    height: 36px;
    padding: 8px;
    border-radius: 11px;
    background: rgba(255,255,255,.75);
    color: var(--menu-color);
  }
  .menu[data-abierto='true'] .menu__item .submenu {
    grid-column: 1 / -1;
    margin-top: 0;
    padding: 0 7px;
    border-top: 1px solid transparent;
    background: rgba(255,255,255,.55);
    transition: grid-template-rows 0.28s ease, opacity 0.22s ease, margin-top 0.28s ease, padding 0.28s ease;
  }
  .menu[data-abierto='true'] .menu__item[data-abierto='true'] .submenu {
    margin-top: 5px;
    padding: 7px;
    border-top-color: color-mix(in srgb, var(--menu-color) 22%, transparent);
  }
  .menu[data-abierto='true'] .submenu a { color: #405650; }
  .menu[data-abierto='true'] .menu__ayuda { margin-top: 2px; padding: 9px; border-radius: 12px; background: #e9f8f7; color: #087e7f; }
}

@media (max-width: 390px) {
  body[data-pagina='inicio'] .portada__adornos-movil { width: min(77vw, 282px); }
  body[data-pagina='inicio'] .portada__adornos-movil span { width: 34px; height: 34px; border-width: 3px; font-size: .92rem; }
}