/* ==========================================================================
   Descanshop — Detalle de un artículo
   Ground truth: Figma "Detalle de un artículo"        544:12870 (1920 × 2695)
                 "Detalle de un artículo móvil"        364:3390  (430 × 3297)
   Artículo CON tira de miniaturas. El mismo artículo SIN galería es otro
   deliverable: prepared/369-11094 (frame 369:11094, 1920 × 2488).
   Cabecera (377:2030), pie (413:12809) y tarjeta de artículo relacionado
   (409:11149) son el MISMO component set que el build de prepared/369-11245,
   así que su CSS y sus assets se reutilizan sin tocar. Lo propio de esta página
   es la cabecera del artículo, la foto principal, la galería, la
   prosa, el aside (Explorar por tema + Elige tu favorito) y el carrusel final.
   ========================================================================== */

/* ---------- Tipografías --------------------------------------------------- */
/* Florentia es la tipografía del diseño (comercial). Los ficheros licenciados
   van en assets/fonts/ con estos nombres exactos. */
/* El H1 (377:1844) y los subtítulos de la prosa usan Florentia Bold, y el título
   "Elige tu favorito" (377:2025) Florentia Medium — pesos que el kit del cliente
   no incluye. Chrome los sintetiza hasta que lleguen los ficheros reales; al
   añadirlos bajo estos nombres, las reglas de abajo los recogen. */

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

/* ---------- Base ---------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--page-bg);
  color:var(--azul-oscuro);
  font-family:var(--font);
  font-weight:400;
  /* Sin overflow-x:hidden — eso tapa un desbordamiento en vez de arreglarlo. */
}
img{display:block;max-width:100%;height:auto}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,p{margin:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--azul);outline-offset:2px}

.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:100;background:var(--azul);color:var(--beige);padding:8px 16px;border-radius:0 0 9px 0}
.skip-link:focus{left:0}

/* banda a sangre, contenido centrado y limitado a la pista de diseño */
.article__inner,
.related__inner,
.site-header__inner,
.site-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)}

/* ==========================================================================
   CABECERA DEL SITIO  (377:2030 — barra 1920×76 en y1, cristal difuminado)
   ========================================================================== */
.site-header{position:sticky;top:0;height:77px;z-index:20}
.site-header__bar{
  position:absolute;left:0;right:0;top:1px;height:76px;
  background:rgba(255,255,255,0.3);
  -webkit-backdrop-filter:blur(50px);backdrop-filter:blur(50px);
}
.site-header__inner{position:relative;display:flex;align-items:flex-start;height:77px}
/* 377:2050 — en esta página el logo va en y5, no en y1 como en el resto */
.site-header__logo{flex:0 0 auto;margin-top:5px}
.site-header__logo img{width:265px;height:67px;object-fit:contain}

.nav{margin-left:185.4px}
.nav__list{display:flex;align-items:flex-start}
.nav__item{display:flex;align-items:center;margin-top:29px}
.nav__link{
  display:block;width:91px;font-size:20px;font-weight:400;line-height:20px;
  color:var(--azul-oscuro);text-align:center;
}
.nav__chevron{width:10px;height:6px;margin-left:4.6px;margin-top:8.5px;align-self:flex-start;flex:0 0 auto}
.nav__link--tiendas{width:78px;margin-left:48.4px}
.nav__link--ofertas{width:75px;margin-left:57px}
.nav__link--ideas{width:158px;margin-left:57px}
.nav__link--sobre{width:152px;margin-left:64px}
/* 377:2039 — el artículo vive bajo "Ideas y consejos", que va en azul */
.nav__link[aria-current="page"]{color:var(--azul)}

.lang{display:flex;align-items:flex-start;margin-left:54.6px;margin-top:28px}
.lang__flag{width:25.427px;height:25.427px}
.lang__code{margin-left:4px;margin-top:1px;font-size:20px;line-height:24px;color:var(--azul-oscuro)}

.site-header__cta{width:215px;height:56px;margin-left:27.6px;margin-top:11px}

.burger{display:none;width:26px;height:17px}
.mobile-menu{display:none}

/* ==========================================================================
   CABECERA DEL ARTÍCULO  (377:1843 — píldora en y103, H1 en y141)
   ========================================================================== */
.article{padding-top:26px}
/* 377:1846 — píldora lisa de 27 de alto (r13.5) azul al 20%; el grupo arranca en
   x160 pero la píldora se dibuja en x163. El ancho del nodo era 121, siete más
   de lo que pide su texto: aquí lo manda el contenido más los rellenos, para que
   una categoría larga no se salga ni una corta deje aire muerto. */
.article__tag{
  display:inline-flex;align-items:center;margin-left:3px;
  height:27px;padding-inline:23px 20px;border-radius:13.5px;
  background:var(--tag-bg);
  font-size:16px;font-weight:300;line-height:normal;color:var(--azul-oscuro);
}
/* el −3 del margen (y el +3 de la foto) pone los GLIFOS en la línea base de
   Figma sin mover el resto de la columna */
.article__title{
  margin-top:8px;
  font-size:40px;font-weight:700;line-height:1.22;letter-spacing:-1.6px;
  color:var(--azul-oscuro);
}

/* ==========================================================================
   MAQUETA DEL ARTÍCULO  (columna 1011.04 + 72 + aside 517 = pista de 1600)
   ========================================================================== */
.article__layout{
  display:grid;
  grid-template-columns:minmax(0,1011.04fr) 517fr;
  column-gap:72px;
  /* Sin align-items:start: la columna del aside se estira hasta el alto de la
     fila, que es lo que le da recorrido al favorito pegajoso de abajo. Sus dos
     tarjetas siguen midiendo su contenido; lo que se estira es la columna. */
}
.article__main{display:flex;flex-direction:column}
/* la cabecera vive DENTRO de la columna de texto, así que el aside se alinea con
   la foto: 212 menos los 103 en los que abre la cabecera */
.article__aside{margin-top:109px}


/* 377:1920 — foto 1011.04×608.06, radio 15, recorte cover */
.article__hero{
  margin-top:25px;
  width:100%;aspect-ratio:1011.04 / 608.06;
  object-fit:cover;object-position:center;border-radius:15px;
  background:var(--card-bg);
}

/* --- galería del artículo (5 miniaturas 182.35×177.61) -------------------- */
.gallery{
  display:grid;grid-template-columns:repeat(5,1fr);gap:24.56px;
  margin-top:25.12px;margin-left:1px;
}
/* 544:13324 dibuja el favorito en y1052, que era el hueco que dejaba un
   .topics de 608 fijo. Ahora que la tarjeta de temas mide lo que ocupa, el
   favorito la sigue con su propia separación de 28. */
.gallery + .prose{margin-top:23.2px}
/* El <li> envuelve un <button> que envuelve la <img>. El botón no dibuja nada:
   se deja del tamaño de su hueco para que las medidas del diseño sigan
   aplicando sobre la imagen, que es donde el demo las pone. */
.gallery__item button{
  display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;
}
.gallery__item img{
  width:100%;aspect-ratio:182.35 / 177.61;
  object-fit:cover;border-radius:15px;
}
/* 544:13384 — la miniatura activa lleva `border: 2px solid #009FE3` en el propio
   nodo, así que va como borde CSS (el export se recortó para no hornearlo) */
.gallery__item--current img{border:2px solid var(--azul)}
.gallery__item button:focus-visible{outline-offset:3px}

/* Más de cinco miniaturas no caben en la rejilla del diseño, así que la tira se
   desliza — mismo recurso que ya usan la columna de la ficha de producto y esta
   misma tira en móvil: scroll nativo con anclaje por miniatura, con arrastre,
   rueda y teclado incluidos, en vez de un carrusel en JS.

   El ancho de pista es el de la rejilla de cinco, para que una sexta foto no
   encoja las cinco primeras sino que asome por el borde. */
.gallery--slider{
  display:grid;grid-auto-flow:column;grid-template-columns:none;
  grid-auto-columns:calc((100% - 4 * 24.56px) / 5);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scrollbar-width:none;
  padding-block:3px;margin-block:-3px;
}
.gallery--slider::-webkit-scrollbar{display:none}
.gallery--slider .gallery__item{scroll-snap-align:start}

/* ==========================================================================
   PROSA  (377:1833 — Florentia 16/26 al 70% de opacidad; subtítulos en Bold.
   Los "párrafos vacíos" del nodo de Figma son la separación de 26px.)
   ========================================================================== */
.prose{
  margin-top:22px;
  font-size:16px;font-weight:400;line-height:26px;
  color:var(--azul-oscuro);opacity:.7;
}
.prose p{margin:0 0 26px}
.prose h2,.prose h3{font-family:var(--font);font-weight:400;color:var(--azul-oscuro)}
/* H2 y H3 se distinguen del texto y entre sí (R8, aprobado por el cliente): antes el
   H2 era el cuerpo en negrita y el H3 no tenía estilo. El margen superior separa la
   sección anterior; el inferior lo da el párrafo siguiente. */
.prose h2{margin:32px 0 0;font-size:22px;line-height:30px}
.prose h3{margin:24px 0 0;font-size:18px;line-height:26px}
@media (max-width:900px){
  .prose h2{font-size:20px;line-height:28px}
}
.prose > :last-child{margin-bottom:0}

/* ==========================================================================
   ASIDE — Explorar por tema  (377:1921 — 517×608, r20)
   ========================================================================== */
/* Alto por contenido, no los 608 del diseño: ese número contaba las píldoras
   exactas del mock, así que un artículo con menos categorías dejaba media
   tarjeta vacía y uno con más las perdía bajo el overflow. El diseño fija el
   ancho de la pista; las filas de píldoras que quepan dentro son contenido. */
.topics{
  padding:30px 27px;
  background:var(--card-bg);border-radius:20px;
  box-shadow:none;
}
.topics__title{font-size:30px;font-weight:400;line-height:normal;color:var(--azul-oscuro)}
.topics__list{display:flex;flex-wrap:wrap;gap:15px;margin-top:24px}
/* 377:1924… — misma píldora que la del artículo: azul al 20%, r13.5, sin sombra.
   Los saltos de línea del mock salen solos del ajuste natural en los 463 de pista
   interior; por eso el relleno derecho es 19 y no 20. */
.tag{
  display:inline-flex;align-items:center;
  height:27px;padding-inline:23px 19px;border-radius:13.5px;
  background:var(--tag-bg);
  font-size:16px;font-weight:300;line-height:normal;color:var(--azul-oscuro);
  white-space:nowrap;
}

/* ==========================================================================
   ASIDE — Elige tu favorito  (377:2015 — 517×509, r20)
   ========================================================================== */
.favorite{
  position:relative;margin-top:28px;height:509px;
  background:var(--card-bg);border-radius:20px;overflow:hidden;
  box-shadow:none;
}
/* Acompaña a la lectura: se queda pegado bajo la cabecera y se suelta al llegar
   al final de su columna, que termina donde termina el artículo — justo encima
   de los relacionados. Sticky y no un scroll en JS: el tope lo pone el propio
   contenedor, sin medir nada. Va DESPUÉS de la regla de arriba, que fija
   position:relative para sus hijos absolutos y si no ganaría por orden.

   Los 97 son los 77 de la cabecera pegada más 20 de aire. Sólo con las dos
   columnas: por debajo de 1181 el aside va apilado y no hay junto a qué
   quedarse. */
@media (min-width:1181px){
  .favorite{position:sticky;top:97px}
}
.favorite__photo{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;
}
/* 377:2024 — banda superior 517×214 con degradado real, no un color plano */
.favorite__veil{
  position:absolute;left:0;right:0;top:0;height:214px;
  border-radius:20px 20px 0 0;
  background-image:linear-gradient(180.86989675937258deg,rgb(239,238,233) 75.392%,rgba(239,238,233,0) 101.3%);
}
/* Título y botón van en flujo, apilados y centrados: clavados en absoluto
   (top 34 / top 99) un título de dos líneas se metía debajo del botón. Los
   17 px de gap son lo que separaba los dos en la maqueta con una línea. Van
   `relative` para pintarse encima de la foto y el velo, que son absolutos. */
.favorite{display:flex;flex-direction:column;align-items:center;gap:17px;padding:34px 25px 0}
.favorite__title{
  position:relative;width:100%;max-width:412px;margin:0;
  font-size:40px;font-weight:500;line-height:normal;
  text-align:center;text-transform:uppercase;color:var(--azul-oscuro);
}
.favorite__cta{position:relative;flex:none;width:215px;height:56px}

/* ==========================================================================
   ARTÍCULOS RELACIONADOS  (377:1834 en y1614; tarjetas 409:11149 en y1674)
   ========================================================================== */
.related{margin-top:44px}
.related__inner{position:relative}
.related__title{font-size:30px;font-weight:400;line-height:normal;color:var(--azul-oscuro)}
.related__all{
  position:absolute;right:max(25px,calc((100% - var(--page)) / 2));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. 2x788 + 24 = 1600, la pista de diseno exacta. */
.cards{
  display:grid;grid-template-columns:repeat(2,788px);
  column-gap:24px;row-gap:21px;margin-top:29px;padding:0;
}
/* 377:1836 — la misma flecha que los carriles del home: circulo azul al 20% de
   49 y el galon dentro. `.rail__prev` lo pone pages/rails.css. */
.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}
.dots__track{display:block;width:74px;height:10px;border-radius:9.5px;background:var(--beige)}
.dots__on{display:block;width:30.5px;height:10px;border-radius:9.5px;background:var(--azul)}
.dots--related{margin-top:29px}

/* ==========================================================================
   TARJETA DE ARTÍCULO  (409:11149 — 788×350, idéntica al build de Ideas)
   ========================================================================== */
.acard{
  position:relative;
  display:grid;grid-template-columns:373fr 351fr;column-gap:25px;
  width:788px;min-height:350px;height:350px;
  padding:7px 31px 8px 8px;
  background:var(--card-bg);border-radius:20px;box-shadow:none;
}
.acard__media{position:relative;display:block;overflow:hidden;border-radius:14px}
.acard__thumb{width:100%;height:100%;object-fit:cover;object-position:center;border-radius:14px}
.acard__body{display:flex;flex-direction:column;align-items:flex-start;padding-top:21px;min-width:0}
/* 407:11134 — la píldora "Subtract" es un rectángulo redondeado liso, azul al
   20%: se reproduce en CSS en vez de enviarla como SVG de un solo color. Sin
   ancho fijo — la caja mide lo que el texto más sus rellenos, igual que
   .article__tag y .bcard__tag. */
.acard__tag{
  display:inline-flex;align-items:center;flex:0 0 auto;
  height:27px;padding-inline:23px 20px;margin-bottom:9px;
  border-radius:13.5px;background:var(--tag-bg);
  font-size:16px;font-weight:300;line-height:normal;color:var(--azul-oscuro);
}
.acard__title{
  display:block;margin-bottom:9px;max-width:100%;
  font-size:20px;font-weight:400;line-height:normal;color:var(--azul-oscuro);
}
.acard__meta{display:flex;align-items:center;gap:10px;height:18px;margin-bottom:8px}
.acard__clock{width:12px;height:12px;flex:0 0 auto}
.acard__meta span{font-size:16px;font-weight:300;line-height:normal;color:var(--azul-oscuro)}
.acard__text{width:100%;font-size:16px;font-weight:300;line-height:1.35;color:var(--azul-oscuro)}
/* La misma flecha que las tarjetas del home, con una diferencia de marcado: alli
   `.bcard__go` es la caja de 53.3 y el glifo va dentro con margen 7.15; aqui el
   glifo ES el elemento, asi que los 7.15 se suman a los desplazamientos
   (15.8+7.15 y 13.7+7.15). El `1em` de `.ds-icon` da la caja de 39. */
.acard__go{
  display:block;position:absolute;right:22.95px;bottom:20.85px;
  font-size:39px;transform-origin:0 0;
  opacity:0;transition:opacity .3s ease-out;pointer-events:none;
}

/* ==========================================================================
   PIE  (413:12809 — 1920×387 en y2101)
   ========================================================================== */
.site-footer{margin-top:38px;background:var(--footer-bg)}
.site-footer__inner{
  position:relative;
  display:grid;
  grid-template-columns:714px 322px 271px auto;
  height:387px;
}
.site-footer__brand{grid-column:1}
.site-footer__logo{width:309px;height:78px;margin-top:14px;object-fit:contain}
.site-footer__heading{margin-top:9px;font-size:20px;font-weight:400;line-height:20px;color:var(--azul-oscuro)}

.subscribe{position:relative;margin-top:22px;width:542px;height:70px}
.subscribe__input{
  width:542px;height:70px;border:0;border-radius:9px;
  background:rgba(140,170,201,0.09);
  padding:0 31px;
  font-family:inherit;font-size:16px;font-weight:300;color:var(--azul-oscuro);
}
.subscribe__input::placeholder{color:var(--azul-oscuro);opacity:1}
.subscribe__btn{position:absolute;right:14px;top:7px;width:122px;height:56px}

.social{display:flex;gap:20.5px;margin-top:26px}
.social a{display:block}
.social .ds-icon{font-size:47.528px;}

.fcol__title{font-size:20px;font-weight:400;line-height:20px;text-transform:uppercase;color:var(--azul-oscuro);margin-top:101px}
.fcol ul{margin-top:15px}
.fcol li{margin-bottom:13px}
.fcol a{font-size:16px;font-weight:300;line-height:20px;color:var(--azul-oscuro)}

.site-footer__copy{
  position:absolute;left:0;right:0;top:346px;margin:0;text-align:center;
  font-size:16px;font-weight:300;line-height:20px;color:var(--azul-oscuro);
}

/* ==========================================================================
   RESPONSIVE — cada bloque reflowa justo ANTES de desbordar.
   La composición de escritorio necesita 1650px (pista 1600 + 25 de suelo).
   ========================================================================== */
@media (max-width:1700px){
  .site-header__inner{min-width:0}
  .nav{margin-left:clamp(8px,3.5vw,185.4px);min-width:0}
  .nav__list{gap:clamp(6px,1.6vw,57px)}
  .nav__link,
  .nav__link--tiendas,.nav__link--ofertas,.nav__link--ideas,.nav__link--sobre{
    width:auto;margin-left:0;white-space:nowrap;
  }
  .lang{margin-left:clamp(12px,2.84vw,54.6px);flex:0 0 auto}
  .site-header__cta{margin-left:clamp(10px,1.44vw,27.6px);flex:0 0 auto}
  /* la columna de texto de la tarjeta se estrecha: deja crecer la fila */
  .acard{height:auto}
}

@media (max-width:1500px){
  .site-footer__inner{grid-template-columns:1fr 1fr;height:auto;padding-bottom:40px}
  .site-footer__copy{position:static;grid-column:1 / -1;margin-top:25px}
  .fcol__title{margin-top:48px}
  .subscribe{width:100%;max-width:542px}
  .subscribe__input{width:100%}
  .site-footer__logo{max-width:100%}
}

@media (max-width:1340px){
  .nav,.lang,.site-header__cta{display:none}
  .burger{display:block;margin-left:auto;align-self:center}
  .mobile-menu{display:block;position:absolute;left:0;right:0;top:77px;background:#fff;padding:16px 25px 24px}
  .mobile-menu[hidden]{display:none}
}

@media (max-width:1180px){
  /* el aside de 517px ya no cabe junto a la columna de texto */
  .article__layout{grid-template-columns:1fr;row-gap:28px}
  .article__aside{margin-top:0}
  .favorite,.topics{max-width:517px}
  .article__title{font-size:clamp(28px,3.4vw,40px);letter-spacing:-0.04em}
}

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

  /* cabecera — 365:3798 logo 168×42 en (25,13); 365:3794 burger 23×14 en (380,31) */
  .site-header{height:63px}
  .site-header__bar{top:0;height:63px;background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none}
  .site-header__inner{align-items:flex-start;height:63px}
  .site-header__logo{margin-top:13px}
  .site-header__logo img{width:168px;height:42px}
  .nav,.lang,.site-header__cta{display:none}
  .burger{display:block;margin-left:auto;align-self:flex-start;margin-top:31px;width:23px;height:14px}
  .burger .ds-icon{font-size:14px;}
  .mobile-menu{display:block;position:absolute;left:0;right:0;top:63px;background:#fff;padding:16px 25px 24px}
  .mobile-menu[hidden]{display:none}
  .mobile-menu li{margin-bottom:14px}
  .mobile-menu a{font-size:18px}
  .mobile-menu .btn{width:100%;height:48px;margin-top:6px}

  /* el frame de 430 abre con la foto (365:3841 en y91) y pone la píldora (y584) y
     el H1 (y631) DESPUÉS de la galería: un solo `order` recoloca los mismos nodos.
     min-width:0 o el carrusel de miniaturas estiraría la columna entera. */
  .article{padding-top:28px}
  .article__layout{display:flex;flex-direction:column;min-width:0}
  .article__main{width:100%;max-width:100%;min-width:0}
  .article__hero{order:1;margin-top:0;aspect-ratio:380.43 / 375.22;border-radius:15px}
  /* 4 miniaturas de 83.67 caben en la pista de 380; la quinta se desplaza en vez
     de esconderse — cuántas imágenes trae el artículo es contenido, no breakpoint.
     El 83.67 es una medida DEL FRAME DE 430: fijarlo tal cual dejaría cinco
     miniaturas de móvil perdidas en una tableta de 883. Es un suelo, y por encima
     de ~528px las cinco reparten la pista y el carril deja de desplazarse. */
  .gallery{
    order:2;display:grid;grid-auto-flow:column;
    grid-auto-columns:max(83.67px,calc((100% - 4 * 14.8px) / 5));
    grid-template-columns:none;gap:14.8px;margin-top:16.6px;margin-left:0;
    width:100%;min-width:0;overflow-x:auto;scrollbar-width:none;
  }
  .gallery::-webkit-scrollbar{display:none}
  .gallery__item img{aspect-ratio:83.67 / 81.49}
  .article__head{order:3;display:flex;flex-direction:column;align-items:flex-start;margin-top:19.7px}
  .article__tag{margin-left:0}
  /* 365:3855 — 25px con tracking −1px, dos líneas */
  .article__title{margin-top:20px;font-size:25px;letter-spacing:-1px}
  .prose{order:4;margin-top:17px}
  .gallery + .prose{margin-top:17px}

  /* el frame de 430 no dibuja el aside; en WordPress son dos widgets que el
     breakpoint apaga, no contenido que se pierda */
  .article__aside{display:none}

  /* relacionados — 365:3864 en y2188, una tarjeta por fila */
  .related__title{font-size:20px}
  .related__all{top:3px}
  .cards{grid-template-columns:1fr;row-gap:18px;margin-top:22px}
  .rail__next{display:none}
  .dots--related{margin-top:19px}

  /* Una por fila, como dibuja el frame de 430. Dentro de slick la rejilla de la
     pista se apaga, asi que el ancho lo pone la tarjeta: el viewport menos los
     25px de margen a cada lado. */
  .acard{
    width:calc(100vw - 50px);
    grid-template-columns:171.3fr 162fr;column-gap:22.8px;
    min-height:269px;height:auto;padding:5.4px 18px 6px 5.9px;
  }
  .acard__body{padding-top:9.8px}
  .acard__tag{height:24px;border-radius:12px;padding-inline:17px 14px;margin-bottom:4.6px;font-size:12px}
  .acard__title{font-size:15px;margin-bottom:8.1px;max-width:86.2%}
  .acard__meta{margin-bottom:6px}
  .acard__text{display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
  /* 365:3870 — el frame de 430 SÍ dibuja la flecha en reposo. Medidas intactas;
     solo cambia como se muestra, porque en escritorio ya no es `display`. */
  .acard__go{
    width:38.979px;height:38.979px;right:0;bottom:0;opacity:1;
    font-size:32px;
  }

  /* pie (365:3799 — banda en y2546) */
  .site-footer{margin-top:29px}
  .site-footer__inner{grid-template-columns:1fr 1fr;height:auto;padding-bottom:32px;column-gap:10px}
  .site-footer__brand{grid-column:1 / -1}
  .site-footer__logo{width:197px;height:49px;margin-top:19px}
  .site-footer__heading{margin-top:18px}
  .subscribe{width:100%;max-width:542px;height:70px}
  .subscribe__input{width:100%;height:70px;padding:0 145px 0 26px}
  .subscribe__btn{right:11px;top:7px;width:122px;height:48px}
  .social{margin-top:19px;gap:20.5px}
  .fcol__title{margin-top:40px}
  .fcol--catalogo,.fcol--secciones,.fcol--legales{grid-column:1 / -1}
  .fcol--catalogo ul,.fcol--secciones ul,.fcol--legales ul{display:grid;grid-template-columns:1fr 1fr;column-gap:10px}
  .site-footer__copy{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}
}

/* ==========================================================================
   HOVER — el mismo que las tarjetas del carril del home (`.bcard`): la foto se
   desplaza y escala, y la flecha aparece creciendo. Antes la miniatura escalaba
   sobre su propio centro y la flecha crecia de caja; ahora las dos secciones se
   comportan igual.

   Acotado por ANCHURA, nunca por `hover:hover`: Chrome sin cabeza declara
   `hover:none` y un bloque cerrado por puntero no aparece en ninguna captura.
   ========================================================================== */
@media (min-width:901px){
  /* el diseño no da color de hover para el botón: se usa el token más cercano
     (Azul oscuro), nunca un valor inventado */
  .btn--primary{transition:background-color .2s ease}
  .btn--primary:hover{background:var(--azul-oscuro)}

  .acard:hover{cursor:pointer}
  /* 372.96x334.98 -> x1.243 con su centro moviendose (-13.35,-15.04) */
  .acard__thumb{transition:transform .3s ease-out}
  .acard:hover .acard__thumb{transform:translate(-13.35px,-15.04px) scale(1.243)}
  /* la flecha crece al aparecer: 23.695 -> 39.003px con su esquina superior
     izquierda moviendose (-34.687,-25.737). scale .6075 = 23.695/39.003 */
  .acard:hover .acard__go{opacity:1;animation:go-grow .3s ease-out both}
  @keyframes go-grow{
    from{transform:translate(34.687px,25.737px) scale(.6075)}
    to{transform:none}
  }
}