/* ==========================================================================
   Descanshop — Detalle de un producto (Butaca London)
   Ground truth: Figma "Detalle de un producto"        285:11585 (1920 × 1681)
                 "Detalle de un producto móvil"        287:12895 (430 × 2216)
   Cabecera (369:10878), pie (412:12533) y la tarjeta de producto (407:10851)
   son el mismo component set que el resto de páginas del sitio.

   Pista de contenido: el pie y la cabecera del frame usan gutter 160, pero la
   sección de producto arranca en x165 y sus tarjetas acaban en x1768 — está
   descentrada 6.5px en el propio mock. El build usa UNA pista centrada de 1600
   (gutter 160), como el resto del sitio: la columna de producto queda 5px a la
   izquierda del mock a cambio de una maqueta simétrica.
   ========================================================================== */

/* ---------- Tipografías --------------------------------------------------- */
/* El título (287:12731) usa Bold, "Color:"/"Tamaño" (287:12737/12743) Medium y
   el precio (287:12733) ExtraBold — pesos que el kit del cliente no incluye.
   Chrome los sintetiza hasta que lleguen los ficheros reales. */

/* ---------- Tokens -------------------------------------------------------- */

/* ---------- Base ---------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font);
  background:var(--page-bg);
  color:var(--azul-oscuro);
  font-weight:400;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font-family:inherit;font-size:inherit;color:inherit;cursor:pointer;border:none;background:none}
input{font-family:inherit;border:none;outline:none}
:focus-visible{outline:2px solid var(--azul);outline-offset:2px}
.gallery__thumb:focus-visible,.swatch:focus-visible{outline-offset:3px}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--azul);color:var(--beige);padding:8px 16px;border-radius:0 0 9px 0}
.skip-link:focus{left:0}

/* banda a sangre con el contenido centrado y limitado a la pista de diseño */
.container,
.header__inner,
.footer__inner{
  width:100%;margin:0 auto;
  padding-inline:max(25px,calc((100% - var(--page)) / 2));
}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:9px;font-size:16px;font-weight:400;line-height:normal;text-align:center;
  box-shadow:none;
}
.btn--primary{background:var(--azul);color:var(--beige)}
.btn--primary:hover{background:#3b6f9c}

/* ==========================================================================
   CABECERA  (369:10878 — barra 1920×76 en y1 sobre una caja de 96)
   ========================================================================== */
.header{position:sticky;top:0;z-index:100;width:100%;height:96px}
.header::before{
  content:"";position:absolute;left:0;right:0;top:1px;height:76px;
  background:rgba(255,255,255,.3);
  -webkit-backdrop-filter:blur(50px);backdrop-filter:blur(50px);
}
.header__inner{position:relative;height:96px;display:flex;align-items:flex-start}
/* 369:10898 — logo 265×67 en (160,1) */
.header__logo{display:block;flex-shrink:0;width:265px;margin-top:1px}
.header__logo img{width:265px;height:67px;object-fit:contain}
.header__nav{display:flex;align-items:flex-start;margin-left:185.4px}
.header__link{
  display:block;width:91px;margin-top:29px;
  font-size:20px;font-weight:400;line-height:20px;
  color:var(--azul-oscuro);text-align:center;white-space:nowrap;
}
/* 369:10885 — en esta página la sección actual es "Catálogo" */
.header__link--active{color:var(--azul)}
.header__link--tiendas{width:78px;margin-left:48.4px}
.header__link--ofertas{width:75px;margin-left:57px}
.header__link--ideas{width:158px;margin-left:57px}
.header__link--sobre{width:152px;margin-left:64px}
.header__caret{width:10px;height:6px;margin-left:4.6px;margin-top:8.5px;flex-shrink:0}
.header__link--catalogo{display:inline-flex;align-items:flex-start;width:auto}
.header__lang{display:flex;align-items:flex-start;margin-left:54.6px;margin-top:28px}
.header__flag{width:25.427px;height:25.427px}
.header__lang-text{margin-left:4px;margin-top:1px;font-size:20px;line-height:24px;color:var(--azul-oscuro)}
.header__cta{width:215px;height:56px;margin-left:27.6px;margin-top:11px;flex-shrink:0}
.header__hamburger{display:none;padding:0}

/* ==========================================================================
   PRODUCTO  (galería 287:12721… + ficha 287:12731…)
   La galería abre en y120: 96 de cabecera + 24.
   ========================================================================== */
.product{display:flex;align-items:flex-start;gap:92px;padding-top:24px}
.product__gallery{display:flex;gap:32px;flex-shrink:0}

/* 287:12722… — cuadros 152.12×148.16, r15, #efeee9, paso 170.08 */
/* Una tira por color, y sólo se ve la del color elegido. El `display:flex` de
   la línea de abajo le gana al `display:none` que el navegador da por defecto a
   `hidden`, así que la regla hay que escribirla. */
.gallery__thumbs{display:flex;flex-direction:column;gap:21.92px;flex-shrink:0;margin-top:1.77px}
.gallery__thumbs[hidden]{display:none}
.gallery__thumb{
  position:relative;display:flex;align-items:center;justify-content:center;
  width:152.12px;height:148.16px;padding:5px;
  border-radius:15px;overflow:hidden;background:var(--beige);
  border:0;box-shadow:none;
}
/* 287:12722 — el trazo de Figma es EXTERIOR al nodo: outline, no border */
.gallery__thumb--active{outline:2px solid var(--azul)}
/* Misma regla que la foto grande: cada miniatura entra entera y centrada.
   El demo encuadraba a mano las cuatro primeras (287:12769/72/71/70), lo que
   solo cuadra con esas cuatro fotos concretas y en ese orden. */
.gallery__thumb img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}

/* Más de cuatro fotos no caben en la columna, así que la tira se desliza.
   Scroll nativo con anclaje por miniatura — arrastre, rueda y teclado ya
   incluidos — en vez de un segundo carrusel JS. El alto es el de cuatro
   cuadros más sus tres huecos; el padding deja sitio al outline de la activa. */
.gallery__thumbs--slider{
  max-height:658.4px;overflow-y:auto;overscroll-behavior:contain;
  scroll-snap-type:y mandatory;scrollbar-width:none;
  padding-inline:2px;margin-inline:-2px;
}
.gallery__thumbs--slider::-webkit-scrollbar{display:none}
.gallery__thumbs--slider .gallery__thumb{flex:0 0 auto;scroll-snap-align:start}

/* 287:12730 — caja 670.24×661.06, r15. La foto se centra y entra entera:
   el catálogo mezcla verticales y horizontales, y las medidas absolutas del
   demo (331×588 recortadas) solo cuadraban con una de ellas. */
.gallery__main{
  position:relative;display:flex;align-items:center;justify-content:center;
  width:670.24px;height:661.06px;padding:4%;
  border-radius:15px;overflow:hidden;background:var(--card-bg);
}
.gallery__main img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}

/* --- ficha ---------------------------------------------------------------- */
.product__info{flex:1;min-width:0;padding-top:77px}
/* 287:12745 — alto 32, r6, azul; etiqueta 16 Light beige con tracking −0.2856.
   Ancho al contenido con 10px a cada lado, no fijo: lleva el nombre de la
   categoria y los 149 del demo no dan para todas. */
.product__tag{
  display:inline-flex;align-items:center;justify-content:center;
  height:32px;padding-left:10px;padding-right:10px;border-radius:6px;
  background:var(--azul);color:var(--beige);
  font-size:16px;font-weight:300;line-height:normal;letter-spacing:-.2856px;
}
/* Marca — fuera de la maqueta. Comparte línea con el chip de categoría: misma
   altura de 32 para que las dos cajas asienten igual, y 10px de aire a la
   izquierda, los mismos que el chip lleva por dentro. Si no hay categoría se
   queda sola al principio de la línea y el margen sobra, de ahí el :first-child. */
.product__brand{
  /* `gap`, no el espacio del marcado: en un contenedor flex el texto y el
     <strong> son dos elementos y el espacio entre ellos se descarta. */
  display:inline-flex;align-items:center;gap:5px;height:32px;margin-left:10px;
  font-size:16px;font-weight:300;line-height:normal;letter-spacing:-.2856px;
  color:var(--azul-oscuro);
}
.product__brand:first-child{margin-left:0}
.product__brand strong{font-weight:700}
.product__title{
  margin-top:11px;max-width:534px;
  font-size:25px;font-weight:700;line-height:1.22;letter-spacing:-1px;
  color:var(--azul-oscuro);
}
/* El descuento usa el distintivo de ticket de las tarjetas: mismo SVG, misma
   caja de 27 con la etiqueta encima compartiendo celda de rejilla. El ancho lo
   pone la proporcion del vector, de ahi `width:auto`. */
.product__badge{
  display:inline-grid;align-items:center;
  margin-top:5px;height:27px;
}
.product__badge>*{grid-area:1/1}
.product__badge img{width:auto;height:27px}
.product__badge em{
  padding-left:15px;font-style:normal;
  font-size:16px;font-weight:300;line-height:27px;color:var(--azul-oscuro);
}
.product__price{display:flex;align-items:baseline;margin-top:11px}
.product__price-new{font-size:40px;font-weight:800;line-height:normal;color:var(--azul-oscuro)}
/* 287:12732 — 21px Regular tachado al 50% */
.product__price-old{
  margin-left:5px;font-size:21px;font-weight:400;line-height:normal;
  color:var(--azul-oscuro);opacity:.5;text-decoration:line-through;
}
/* La descripción sale del editor del post, así que es un <div> con los <p> que
   wpautop monta dentro: la tipografía se hereda y sólo hay que dar el aire
   entre párrafos, sin margen suelto arriba ni abajo. */
.product__desc{
  margin-top:15px;width:534px;
  font-size:16px;font-weight:400;line-height:26px;color:var(--azul-oscuro);opacity:.7;
}
.product__desc>*{margin:0}
.product__desc>*+*{margin-top:15px}

/* Tiendas donde está el producto — debajo de la descripción, un icono de
   localización por fila y el nombre enlazando a la página de la tienda. */
.product__stores{margin-top:15px}
.product__store-list{display:flex;flex-direction:column;gap:7px;margin:9px 0 0;padding:0;list-style:none}
.product__store{display:flex;align-items:center;gap:8px}
.product__store-icon{flex-shrink:0;font-size:16px;line-height:1}
.product__store-link{
  font-size:15px;font-weight:400;line-height:26px;
  color:var(--azul-oscuro);text-decoration:none;
}
.product__store-link:hover,
.product__store-link:focus-visible{color:var(--azul);text-decoration:underline}

.product__field{margin-top:7px}
.product__field + .product__field{margin-top:11px}
/* 287:12737 / 287:12743 — 15px Medium, interlineado 26 */
.product__label{font-size:15px;font-weight:500;line-height:26px;color:var(--azul-oscuro)}
.product__value{margin-left:4px;font-weight:300;opacity:.5}
/* 287:12773… — cinco muestras con imagen de tapicería, r10, anchos 45/43/42/42/43 */
.product__swatches{display:flex;align-items:center;gap:9px;margin-top:9px}
.swatch{
  width:45px;height:28px;border-radius:10px;overflow:hidden;
  border:0;box-shadow:none;padding:0;
}
.swatch img{width:100%;height:100%;object-fit:cover}
.swatch:nth-child(2){width:43px}
.swatch:nth-child(3),.swatch:nth-child(4){width:42px}
.swatch:nth-child(5){width:43px}
.swatch--active{outline:1.5px solid var(--azul)}
/* 287:12734… — 100×31, r10, fondo de tarjeta. Se elige como las muestras: la
   talla activa lleva el mismo contorno, y su precio sustituye al de la ficha. */
.product__sizes{display:flex;flex-wrap:wrap;gap:12px;margin-top:11px}
.size{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:100px;height:31px;padding-inline:12px;border-radius:10px;
  background:var(--card-bg);
  font-size:15px;font-weight:300;line-height:26px;color:var(--azul-oscuro);
}
.size--active{outline:1.5px solid var(--azul);outline-offset:-1.5px}

/* ==========================================================================
   PRODUCTOS SIMILARES  (287:12753 en y810; tarjetas 407:10851 en y872)
   ========================================================================== */
.similar{position:relative;padding-top:29px}
.similar__head{position:relative}
.similar__title{font-size:30px;font-weight:400;line-height:normal;color:var(--azul-oscuro)}
.similar__all{
  position:absolute;right:0;top:13px;
  font-size:16px;font-weight:300;line-height:normal;color:var(--azul-oscuro);text-align:right;
}
.rail{position:relative}
/* Columnas en px, no en fracciones: slick mide cada diapositiva con
   variableWidth, y una fraccion dentro de su pista de 30000px no resuelve a
   nada. 4x382 + 3x24 = 1600, la pista de diseno exacta. */
.similar__track{display:grid;grid-template-columns:repeat(4,382px);gap:24px;margin-top:31px;padding:0}
/* Rejilla, no coordenadas: el distintivo, la foto, las muestras, el título y el
   precio ocupan una fila cada uno, y los huecos del diseño viven en el padding
   y en los margin-top. */
.card{
  position:relative;
  display:grid;
  grid-template-areas:"badge" "img" "sw" "name" "price";
  grid-template-rows:27px minmax(0,1fr) auto auto auto;
  width:382px;height:341px;padding:19px 29px 36px;border-radius:20px;background:var(--card-bg);
  box-shadow:none;overflow:hidden;
}
/* 407:10841 — la píldora NO es un rectángulo redondeado: es un booleano `Subtract`
   con forma de ticket, y se exporta como vector. Se usa el SVG (mismo fichero, byte
   a byte, que el de las tarjetas de "Ofertas especiales" de 402:1757: son el MISMO
   nodo de Figma). La etiqueta va encima, en 407:10845 → x15, con line-height 31 en
   lugar de centrado, que es donde Figma pone su línea base. */
/* La etiqueta va ENCIMA del vector, compartiendo celda de rejilla en lugar de
   superponerse con position:absolute. */
.card__badge{grid-area:badge;display:grid;align-items:center;justify-self:start;height:27px}
.card__badge>*{grid-area:1/1}
.card__badge img{width:auto;height:27px}
.card__badge em{
  padding-left:15px;font-style:normal;
  font-size:16px;font-weight:300;line-height:27px;color:var(--azul-oscuro);
}
.card__image{grid-area:img;margin-top:11px;overflow:hidden}
.card__image img{width:100%;height:100%;object-fit:contain;max-width:none}
.card__dots{grid-area:sw;display:flex;align-items:center;gap:5px;margin-top:16px}
.card__dot{width:29px;height:18px;border-radius:37px;overflow:hidden}
.card__dot img{width:100%;height:100%;object-fit:cover}
.card__title{
  grid-area:name;margin-top:11px;padding-right:24px;
  min-height:1.2em;
  font-size:16px;font-weight:300;line-height:1.2;color:var(--azul-oscuro);
}
.card__price{
  grid-area:price;margin-top:10.8px;
  font-size:30px;font-weight:400;line-height:normal;color:var(--azul-oscuro);
}

/* --- hover de la tarjeta (407:10852 → variante 407:10867) -------------------
   La tarjeta de "Productos similares" es el MISMO conjunto de componentes que la
   de "Ofertas especiales" de la home (402:1757): los nodos coinciden uno a uno
   —407:10833 tarjeta, 407:10841 píldora, 407:10839 foto, 407:10837 título,
   407:10838 precio—, así que su hover es el mismo. Al pasar el ratón aparece la
   flecha de esquina 407:10867: 39.003px, con la caja de 53.3 anclada abajo a la
   derecha (inset 79.47% 4.38% 4.9% 81.68% de 382×341). La foto NO hace zoom: eso
   es de las tarjetas pcard/scard/bcard, no de esta. `prefers-reduced-motion` ya
   lo cubre el reset del final del fichero. */
.card__go{
  position:absolute;right:16.7px;bottom:16.7px;
  display:block;width:53.3px;height:53.3px;
  opacity:0;transition:opacity .3s ease-out;pointer-events:none;
}
.card__go .ds-icon{
  font-size:39px;margin:7.15px;display:block;transform-origin:0 0;
}
/* la flecha crece al aparecer: 23.695 → 39.003px con su esquina superior izquierda
   desplazándose (−34.687,−25.737) — keyframes kf_61_3198/kf_61_3199, 0.3s ease-out.
   scale .6075 = 23.695/39.003. */
.card:hover .card__go{opacity:1}
.card:hover .card__go .ds-icon{animation:card-go-grow .3s ease-out both}
@keyframes card-go-grow{
  from{transform:translate(34.687px,25.737px) scale(.6075)}
  to{transform:none}
}
.card:hover{cursor:pointer}
/* 287:12761 — 49×49; se sale 21px de la pista por la derecha, medido DESDE la
   pista y nunca desde el borde del viewport. Es la misma flecha que los carriles
   de la home: el disco es el fondo del boton y el glifo aporta solo el chevron.
   `.rail__prev` lo pone pages/rails.css, que solo se encola con slick. */
.rail__next{
  position:absolute;top:50%;right:-70px;transform:translateY(-50%);
  width:49px;height:49px;padding:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--tag-bg);border-radius:50%;
}
.rail__next .ds-icon{font-size:16px}
.dots{display:flex;justify-content:center;margin-top:29px}
.dots__track{display:block;width:74px;height:10px;border-radius:9.5px;background:var(--beige)}
.dots__on{display:block;width:30.7px;height:10px;border-radius:9.5px;background:var(--azul)}

/* ==========================================================================
   PIE  (412:12533 — 1920×387 en y1294)
   ========================================================================== */
.footer{width:100%;background:var(--footer-bg);margin-top:41px}
.footer__inner{position:relative;display:grid;grid-template-columns:714px 322px 271px auto;height:387px}
.footer__newsletter{grid-column:1}
.footer__logo{width:309px;height:78px;margin-top:14px;object-fit:contain}
.footer__heading{margin-top:9px;font-size:20px;font-weight:400;line-height:20px;color:var(--azul-oscuro)}
.footer__subscribe{position:relative;margin-top:22px;width:542px;height:70px}
.footer__subscribe-input{
  width:542px;height:70px;border-radius:9px;background:rgba(140,170,201,.09);
  padding:0 31px;font-size:16px;font-weight:300;color:var(--azul-oscuro);
}
.footer__subscribe-input::placeholder{color:var(--azul-oscuro);opacity:1}
.footer__subscribe-btn{position:absolute;right:14px;top:7px;width:122px;height:56px}
.footer__social{display:flex;gap:20.5px;margin-top:26px}
.footer__social-icon{display:block;width:47.528px;height:47.528px;position:relative}
.footer__social-icon img{width:47.528px;height:47.528px}
.footer__social-icon--instagram .footer__social-logo{position:absolute;inset:27.35% 36.88% 28.46% 37.87%;width:auto;height:auto}
.footer__columns{display:contents}
.footer__col-heading{font-size:20px;font-weight:400;line-height:20px;text-transform:uppercase;color:var(--azul-oscuro);margin-top:101px}
.footer__col ul{margin-top:15px}
.footer__col li{margin-bottom:13px}
.footer__col li a{font-size:16px;font-weight:300;line-height:20px;color:var(--azul-oscuro)}
.footer__copyright{
  position:absolute;left:0;right:0;top:346px;
  font-size:16px;font-weight:300;line-height:20px;color:var(--azul-oscuro);text-align:center;
}

/* ==========================================================================
   RESPONSIVE — cada bloque reflowa justo antes de desbordar
   ========================================================================== */
@media (max-width:1700px){
  .header__inner{min-width:0}
  .header__nav{margin-left:clamp(8px,3.5vw,185.4px);min-width:0;gap:clamp(6px,1.6vw,57px)}
  .header__link,
  .header__link--tiendas,.header__link--ofertas,.header__link--ideas,.header__link--sobre{
    width:auto;margin-left:0;
  }
  .header__lang{margin-left:clamp(12px,2.84vw,54.6px);flex-shrink:0}
  .header__cta{margin-left:clamp(10px,1.44vw,27.6px)}

  /* La galería conserva su tamaño de diseño y es la ficha la que cede
     (.product__info ya es flex:1 con min-width:0); el hueco entre las dos
     también se estrecha, hasta que la ficha cae debajo a 1280. */
  .product{gap:clamp(40px,4.8vw,92px)}
  .product__desc{width:100%}
}

@media (max-width:1500px){
  .footer__inner{grid-template-columns:1fr 1fr;height:auto;padding-bottom:40px}
  .footer__copyright{position:static;grid-column:1 / -1;margin-top:25px}
  .footer__col-heading{margin-top:48px}
  .footer__subscribe,.footer__subscribe-input{width:100%;max-width:542px}
}

@media (max-width:1340px){
  .header__nav,.header__lang,.header__cta{display:none}
  .header__hamburger{display:block;margin-left:auto;align-self:center}
  .header__hamburger img{width:26px;height:17px}
}

/* Por debajo de 1280 la ficha junto a la galería de 854 se quedaría en menos
   de ~300px: cae debajo, y entonces la galería ocupa todo el ancho. La foto
   grande se ensancha pero conserva el alto del diseño: con su proporción
   crecía hasta ~1000px de alto y ocupaba la pantalla entera. */
@media (max-width:1280px){
  .product{flex-direction:column;align-items:stretch;gap:28px}
  .gallery__main{flex:1;min-width:0;width:auto}
  .product__info{flex:none;width:100%;padding-top:0}
}

@media (max-width:1180px){
  .similar__track{grid-template-columns:repeat(2,382px)}
}

/* --------------------------------------------------------------------------
   MÓVIL — el frame de 430 (287:12895)
   -------------------------------------------------------------------------- */
@media (max-width:900px){

  /* 288:13697 logo 168×42 en (25,13); 288:13653 burger 23×14 en (380,31) */
  .header{height:63px}
  .header::before{top:0;height:63px;background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none}
  .header__inner{height:63px}
  .header__logo{width:168px;margin-top:13px}
  .header__logo img{width:168px;height:42px}
  .header__nav,.header__lang,.header__cta{display:none}
  .header__hamburger{display:block;margin-left:auto;margin-top:31px}
  .header__hamburger img{width:23px;height:14px}

  /* 288:13700 — foto 380.43×375.22 en y91; la imagen va a 196×348 */
  .product{flex-direction:column;gap:0;padding-top:28px}
  .product__gallery{flex-direction:column;gap:16.6px;width:100%}
  /* Casi cuadrada como en el diseño, pero con techo: en una tableta de 820 la
     proporción la llevaba a 745px de alto. Pasado el techo se ensancha sin
     crecer, y la foto sigue entrando entera por el contain. */
  .gallery__main{order:-1;width:100%;height:auto;aspect-ratio:380.43/375.22;max-height:460px;border-radius:15px}
  /* 288:13701… — cuatro cuadros de 83.67×81.49, hueco 14.8 */
  .gallery__thumbs{flex-direction:row;width:100%;gap:14.8px}
  .gallery__thumb{flex:1;width:auto;height:81.49px;border-radius:14px}
  /* Aquí la tira ya es una fila, así que el deslizamiento es horizontal y las
     miniaturas dejan de repartirse el ancho para conservar el cuadro del diseño. */
  .gallery__thumbs--slider{
    max-height:none;overflow-y:visible;overflow-x:auto;
    scroll-snap-type:x mandatory;padding-block:2px;margin-block:-2px;
  }
  .gallery__thumbs--slider .gallery__thumb{flex:0 0 83.67px}

  /* la ficha arranca en y592 (badge), 126 por debajo de la galería */
  .product__info{width:100%;max-width:none;padding-top:28px}
  .product__desc{width:100%}
  .product__sizes{gap:14px}

  /* 288:13749 — "Productos similares" a 20px; dos tarjetas de 180×269 */
  .similar{padding-top:31px}
  .similar__title{font-size:20px}
  .similar__all{top:3px}
  .similar__track{grid-template-columns:repeat(2,1fr);gap:20px;margin-top:15px}
  /* Los huecos van en los márgenes de las piezas y NO en el padding: `--c` sale
     de `cqw`, que mide la caja de contenido, y un padding en esa misma unidad se
     realimentaría encogiendo la tarjeta. */
  /* Dentro de slick la rejilla de la pista se apaga, asi que el ancho lo pone
     la tarjeta: dos por pantalla con los 25 de margen y los 20 de hueco. */
  .card{
    width:calc(50vw - 35px);max-width:180px;
    height:auto;aspect-ratio:180/269;container-type:inline-size;--c:calc(100cqw / 180);
    padding:0;grid-template-rows:auto minmax(0,1fr) auto auto auto;
  }
  /* El frame de 430 dibuja OTRA píldora: 66×22 y con el texto "-10%", no el ticket
     de 117 de "Envío gratis". Estirar el SVG de escritorio a 66 le aplastaría la
     muesca, así que en móvil se mantiene la píldora CSS que ya estaba verificada
     contra esta referencia y se oculta el vector. Divergencia anotada en
     design-specs.md: el móvil pide su propio nodo de píldora. */
  .card__badge{
    display:inline-flex;align-items:center;
    margin:calc(14*var(--c)) 0 0 calc(15*var(--c));
    width:calc(66*var(--c));height:calc(22*var(--c));padding-left:calc(16*var(--c));
    border-radius:calc(11*var(--c));background:rgba(0,159,227,.2);
    color:var(--azul-oscuro);font-size:calc(12*var(--c));font-weight:300;line-height:normal;
  }
  .card__badge img{display:none}
  .card__badge em{position:static;font-style:normal;font-size:inherit;line-height:normal;height:auto}
  /* sin hover en táctil; el frame de 430 sí dibuja la flecha en reposo — pendiente
     de su propio nodo, ver design-specs.md */
  .card__go{display:none}
  .card__image{margin:calc(7*var(--c)) calc(17.5*var(--c)) 0}
  .card__image img{width:100%;height:100%;object-fit:contain}
  .card__dots{margin:calc(12*var(--c)) 0 0 calc(17.5*var(--c));gap:calc(3.6*var(--c))}
  .card__dot{width:calc(21*var(--c));height:calc(13.2*var(--c))}
  .card__title{
    margin:calc(8.8*var(--c)) calc(12*var(--c)) 0 calc(17.5*var(--c));padding-right:0;
    min-height:2.7em;
    font-size:calc(14*var(--c));line-height:1.35;
  }
  .card__price{
    margin:calc(10.2*var(--c)) 0 calc(24*var(--c)) calc(17.5*var(--c));
    font-size:calc(24*var(--c));
  }
  .rail__next{display:none}
  .dots{margin-top:18px}

  /* pie (288:13657 — banda en y1465) */
  .footer{margin-top:34px}
  .footer__inner{grid-template-columns:1fr 1fr;height:auto;padding-bottom:32px;column-gap:10px}
  .footer__newsletter{grid-column:1 / -1}
  .footer__logo{width:197px;height:49px;margin-top:19px}
  .footer__heading{margin-top:18px}
  .footer__subscribe{width:100%;max-width:542px}
  .footer__subscribe-input{width:100%;padding:0 145px 0 26px}
  .footer__subscribe-btn{right:11px;top:7px;width:122px;height:48px}
  .footer__social{margin-top:19px}
  .footer__col{grid-column:1 / -1}
  .footer__col-heading{margin-top:40px}
  .footer__col ul{display:grid;grid-template-columns:1fr 1fr;column-gap:10px}
  .footer__copyright{margin-top:30px;text-align:left}
}

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

/* ---------------------------------------------------------------------------
 * Deltas — not from the demo.
 *
 * The "productos similares" rail is rendered by the SHARED product-card partial
 * (template-parts/producto/card.php), which the home, category, offers and store
 * pages also use. This page's demo markup named three of its parts differently
 * (__image / __dots+__dot / __title) from the partial (__img / __swatches / __name),
 * and its swatches are bare <img> children rather than wrapped elements.
 * Rather than fork the partial for one page, the emitted names are mapped onto
 * the transcribed rules here. Delete this block if the partial is ever renamed.
 * ------------------------------------------------------------------------- */
.card__img{grid-area:img;display:block;margin-top:11px;overflow:hidden}
.card__img img{width:100%;height:100%;object-fit:contain;max-width:none}
.card__swatches{grid-area:sw;display:flex;align-items:center;gap:5px;margin-top:16px}
.card__swatches img{width:29px;height:18px;border-radius:37px;object-fit:cover}
.card__name{
  grid-area:name;margin-top:11px;padding-right:24px;
  min-height:1.2em;
  font-size:16px;font-weight:300;line-height:1.2;color:var(--azul-oscuro);
}

@media (max-width:900px){
  .card__img{margin:calc(7*var(--c)) calc(17.5*var(--c)) 0}
  .card__img img{width:100%;height:100%;object-fit:contain}
  .card__swatches{margin:calc(12*var(--c)) 0 0 calc(17.5*var(--c));gap:calc(3.6*var(--c))}
  .card__swatches img{width:calc(21*var(--c));height:calc(13.2*var(--c))}
  .card__name{
    margin:calc(8.8*var(--c)) calc(12*var(--c)) 0 calc(17.5*var(--c));padding-right:0;
    min-height:2.7em;
    font-size:calc(14*var(--c));line-height:1.35;
  }
}

/* The product and store arrows are real links now, so they take the pointer back
   from the shared rule above, which switches it off for every card's arrow. The
   blog card is NOT in this list: its arrow stays decoration over a whole-card
   link, and catching the pointer there would punch a dead spot in it. */
.card__go{pointer-events:auto}

/* ---------------------------------------------------------------------------
 * Ventajas del producto — no sale del demo.
 *
 * Misma franja en todas las fichas (los campos están en los ajustes). Cada
 * ventaja es un `<details>`: en escritorio `initProductPerks()` los abre todos
 * y quedan uno bajo otro —icono y título en una fila, el texto debajo—, sin
 * chevron ni cursor; por debajo de 900 es un acordeón separado por líneas. El
 * título sigue a `.similar` (30/20px). El chevron es el glifo del menú,
 * dibujado hacia ARRIBA: cerrado va girado 180°, abierto a 0.
 * ------------------------------------------------------------------------- */
.pperks{padding-top:60px}
/* Escritorio: una tarjeta con borde, filas separadas por una línea, icono
   pequeño a la izquierda del título y el texto alineado bajo el título. */
.pperks__box{padding:28px 30px 24px;border:1px solid var(--tag-bg);border-radius:12px;background:var(--card-bg)}
.pperks__title{padding-bottom:22px;font-size:26px;font-weight:500;line-height:normal;color:var(--azul-oscuro)}
.pperks__list{border-top:1px solid var(--tag-bg)}
.pperk{padding:24px 0;border-bottom:1px solid var(--tag-bg)}
.pperk__head{display:flex;align-items:center;gap:12px;list-style:none;cursor:default}
.pperk__head::-webkit-details-marker{display:none}
.pperk__head:focus-visible{outline:2px solid var(--azul);outline-offset:2px;border-radius:4px}
.pperk__icon{flex:0 0 20px;width:20px;height:20px;object-fit:contain}
.pperk__title{flex:1 1 auto;font-size:17px;font-weight:500;line-height:1.3;color:var(--azul-oscuro)}
.pperk__chevron{display:none;flex:none;font-size:8px;transform:rotate(180deg);transition:transform .2s ease}
.pperk[open] .pperk__chevron{transform:rotate(0deg)}
/* El texto arranca bajo el título, no bajo el icono: 20 de icono + 12 de gap. */
.pperk__text{margin-top:8px;padding-left:32px;font-size:15px;font-weight:300;line-height:1.6;color:var(--azul-oscuro)}
.pperk:not(:has(.pperk__icon)) .pperk__text{padding-left:0}
.pperk__text>*{margin:0}
.pperk__text>*+*{margin-top:10px}
.pperk__text a{color:var(--azul);text-decoration:underline}
.pperk__text ul,.pperk__text ol{padding-left:20px}
.pperk__text ul{list-style:disc}
.pperk__text ol{list-style:decimal}
/* El enlace cierra la sección: uno para toda la lista, como enlace de texto.
   La flecha va en CSS para no tener que traducirla. */
.pperks__link{
  display:inline-block;margin-top:22px;
  font-size:15px;font-weight:500;line-height:normal;
  color:var(--azul);text-decoration:underline;text-underline-offset:3px;
}
.pperks__link::after{content:" \2192"}
.pperks__link:hover{color:var(--azul-hover)}

@media (max-width:900px){
  .pperks{padding-top:34px}
  .pperks__box{padding:0;border:0;border-radius:0;background:none}
  .pperks__title{padding-bottom:12px;font-size:20px}
  .pperk{padding:0}
  .pperk__head{gap:12px;padding:14px 0;cursor:pointer}
  .pperk__icon{flex-basis:28px;width:28px;height:28px}
  .pperk__title{font-size:15px;line-height:1.3}
  .pperk__chevron{display:block}
  /* El texto arranca bajo el título, no bajo el icono: 28 de icono + 12 de gap. */
  .pperk__text{margin-top:0;padding:0 0 16px 40px;font-size:14px}
  .pperk:not(:has(.pperk__icon)) .pperk__text{padding-left:0}
  .pperks__link{margin-top:18px;font-size:14px}
  @supports (interpolate-size:allow-keywords){
    .pperk{interpolate-size:allow-keywords}
    .pperk::details-content{
      height:0;overflow:hidden;
      transition:height .25s ease,content-visibility .25s allow-discrete;
    }
    .pperk[open]::details-content{height:auto}
  }
}