/* ==========================================================================
   Descanshop — Ofertas
   Ground truth: Figma "Ofertas"        366:12970 (1920 × 3057)
                 "Ofertas" (móvil)      413:13245 (430 × 3281)
                 filters panel          343:4707  (values reused verbatim)
   Every shell component — header, footer, toolbar, product card (407:10851),
   pagination, filters panel — is the SAME Figma component set as the Categoría
   build in prepared/331-4325, so its CSS and exported assets are reused.
   ========================================================================== */

/* ---------- Fonts -------------------------------------------------------- */
/* Florentia is the design's typeface (commercial). Drop the licensed webfont
   files into assets/fonts/ with these exact names. */
/* The filter panel headings use Florentia Medium (500) and Bold (700) — weights the
   client kit does NOT ship. Chrome synthesises them from Regular. Add the real files
   under these names when the licensed release arrives and the rules below pick them up. */

/* ---------- 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;
  /* No overflow-x:hidden — it hides an overflow instead of fixing it. */
}
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}

/* full-bleed band, content capped and centred on the design track */
.section__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)}
.btn--beige{background:var(--beige);color:#2b4b69}

/* ==========================================================================
   HEADER  (369:11070)
   ========================================================================== */
.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}
.site-header__logo{flex:0 0 auto;margin-top:1px}
.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}
/* 369:11078 — on this page the "Ofertas" entry is the current section and is drawn in 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}

/* ==========================================================================
   HERO  (366:13027 — 1920×523 band at y 77)
   ========================================================================== */
.hero{position:relative;height:523px;overflow:hidden}
.hero__bg{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;
}
/* 366:13031 — 1379.086 of 1920 = 71.83% */
.hero__wash{position:absolute;left:0;top:0;bottom:0;width:71.83%;background:var(--hero-wash)}
.hero__inner{
  position:relative;height:100%;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
  gap:15px;
  margin:0 auto;padding-block:40px;padding-inline:max(25px,calc((100% - var(--page)) / 2));
}
.hero__title{
  max-width:679px;
  font-size:50.907px;font-weight:400;line-height:1.15;
  text-transform:uppercase;color:var(--beige);
}
.hero__lede{
  width:534px;
  font-size:22px;font-weight:400;line-height:26px;color:var(--beige);
}

/* ==========================================================================
   CAROUSEL DOTS  (366:13042 — 74×10 track, 30.5 active)
   ========================================================================== */
.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--hero{margin-top:26px}

/* ==========================================================================
   TOOLBAR  (366:13034 / 13035 / 13058 — row at y 663)
   The search field sits at 663; the filters button and the product count are drawn
   9px / 19px lower in the frame, so the row is top-aligned and each part carries its
   own offset rather than being centred.
   ========================================================================== */
.section--catalog{margin-top:27px}

.toolbar{display:flex;align-items:flex-start;height:50px}
.toolbar__filters{
  position:relative;display:inline-flex;align-items:center;
  width:246px;height:41px;flex:0 0 auto;margin-top:9px;
  background:var(--azul);border-radius:9px;
}
.toolbar__icon{position:absolute;left:53px;top:13px;font-size:16px;}
.toolbar__icon--off{display:none}
.toolbar__filters span{
  position:absolute;left:81px;top:10px;
  font-size:16px;font-weight:400;line-height:normal;color:var(--beige);
}
.toolbar__filters .toolbar__off{display:none}
.toolbar__count{
  margin-left:26px;margin-top:19px;
  font-size:16px;font-weight:400;line-height:normal;color:var(--azul-oscuro);
}
.search{position:relative;margin-left:auto;width:517px;height:41px;flex:0 0 auto}
.search__input{
  width:517px;height:41px;border:0;border-radius:9px;
  background:var(--search-bg);
  padding:0 73px 0 25px;
  font-family:inherit;font-size:16px;font-weight:300;line-height:normal;color:var(--azul-oscuro);
}
.search__input::placeholder{color:var(--placeholder);opacity:1}
.search__btn{
  position:absolute;right:0;top:0;width:44px;height:41px;
  display:flex;align-items:center;justify-content:center;
  background:var(--azul);border-radius:9px;
}
.search__btn .ds-icon{font-size:15.833px;}

/* ==========================================================================
   CATALOG LAYOUT  (panel + grid)
   ========================================================================== */
/* toolbar box is 663→713 (the button's 9px offset makes it 50 tall); grid starts at 754 */
.catalog{margin-top:41px}
.catalog__grid{
  display:grid;grid-template-columns:repeat(4,382px);
  justify-content:space-between;row-gap:24px;
}
/* Filters open — the panel is the one from 343:4707 (there is no "Ofertas con filtros"
   frame, so it is verified by spec.json rather than against a reference render). */
.catalog__panel{display:none}
[data-filters="open"] .catalog{display:grid;grid-template-columns:381px 1fr;column-gap:25px;align-items:start}
[data-filters="open"] .catalog__panel{display:grid}  /* grid, no block: la rejilla del panel vive en .panel y esta regla la ganaba por especificidad */
[data-filters="open"] .catalog__grid{grid-template-columns:repeat(3,382px)}
[data-filters="open"] .toolbar__filters .toolbar__on{display:none}
[data-filters="open"] .toolbar__filters .toolbar__off{display:block}
[data-filters="open"] .toolbar__icon--on{display:none}
[data-filters="open"] .toolbar__icon--off{display:block;left:52px;top:11.7px;font-size:17.4px;}

/* ---------- Filters panel (343:4707 — 347:14837 …) ---------------------- */
/* Rejilla en flujo, no coordenadas.
   El diseño fijaba cada grupo a su `top` (categorías en 79, tiendas en 240,
   precio en 516) contando con las cuatro categorías y las cinco tiendas de la
   maqueta. Con seis y siete, las listas se montaban unas sobre otras y sobre
   los separadores. Ahora cada bloque ocupa su fila y el panel crece con ellas;
   los huecos del diseño viven en los margin-top. */
.panel{
  position:relative;width:381px;margin-top:6px;padding:37px 24px 23px;
  /* Sin display aquí: .panel viene DESPUÉS de .catalog__panel{display:none} y
     con la misma especificidad, así que un display:grid en este bloque dejaba
     el panel siempre visible. Lo pone la regla [data-filters="open"]. */
  grid-template-columns:1fr auto;
  grid-template-areas:
    "title  reset"
    "cats   cats"
    "rule1  rule1"
    "shops  shops"
    "rule2  rule2"
    "price  price"
    "fields fields";
  background:var(--card-bg);border-radius:15px;
}
.panel__title{grid-area:title;font-size:18px;font-weight:700;line-height:16px;color:var(--azul-oscuro)}
.panel__reset{grid-area:reset;display:flex;align-items:center;gap:8px;align-self:start;margin-top:-4px}
.panel__reset .ds-icon{font-size:17.8px;}
.panel__reset span{font-size:16px;font-weight:400;line-height:normal;color:var(--rojo)}
/* fieldset/legend carry a UA border + inset legend notch — zero them or the panel grows boxes
   the design does not have and the option rows indent by the fieldset's default padding. */
.panel__group{margin:0;padding:0;border:0;min-width:0}
/* los dos grupos de casillas sangran 3px más que el resto del panel (27 vs 24) */
.panel__group--cats{grid-area:cats;margin:26px 0 0 3px}
.panel__group--shops{grid-area:shops;margin:17px 0 0 3px}
.panel__group--price{grid-area:price;margin-top:21px}
.panel__legend{display:block;padding:0;font-size:16px;font-weight:500;line-height:16px;color:var(--azul-oscuro)}
.panel__opts{margin-top:6px}
.panel__opt{display:flex;align-items:center;height:36px}
.panel__opt input{
  appearance:none;-webkit-appearance:none;flex:0 0 auto;
  width:14px;height:14px;margin:0;
  border:1px solid var(--azul-oscuro);border-radius:3px;opacity:.3;
  background:transparent;cursor:pointer;
}
.panel__opt input:checked{opacity:1;background:var(--azul);border-color:var(--azul)}
.panel__opt span{margin-left:9px;font-size:16px;font-weight:300;line-height:36px;color:var(--azul-oscuro)}
.panel__rule{height:1px;background:var(--secundario-claro);border:0;margin:0}
.panel__rule--1{grid-area:rule1;margin-top:14px}
.panel__rule--2{grid-area:rule2;margin-top:17px}
/* 347:14861 — la fila de campos abre 16.9 bajo el rótulo "Precio" (el bbox del
   grupo arranca más arriba porque la etiqueta flotante "Mínimo" sobresale). */
.panel__fields{grid-area:fields;display:flex;flex-wrap:wrap;gap:16px 30px;margin-top:16.9px}
.panel__apply{flex:1 0 100%;height:40px}
.field{position:relative;width:151px;height:40px}
.field input{
  width:151px;height:40px;padding:0 10px;
  border:1px solid var(--field-border);border-radius:10px;background:transparent;
  font-family:inherit;font-size:16px;font-weight:300;line-height:38px;color:var(--azul-oscuro);
}
.field__label{
  position:absolute;left:7px;top:-5.7px;padding:0 3px;
  background:var(--field-label-bg);
  font-size:13px;font-weight:300;line-height:12.8px;color:var(--azul-oscuro);
}

/* ==========================================================================
   PRODUCT CARD  (407:10851 — 382×341, identical to the Categoría build)
   ========================================================================== */
/* Rejilla, no coordenadas: una fila por pieza, los huecos del diseño en el
   padding y en los margin-top, y la foto se queda con el espacio libre. */
.pcard{
  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;
  background:var(--card-bg);border-radius:20px;box-shadow:none;
}
/* El texto va SOBRE la píldora SVG: comparten celda. */
.pcard__badge{grid-area:badge;display:grid;align-items:center;justify-self:start;height:27px}
.pcard__badge>*{grid-area:1/1}
.pcard__badge img{width:auto;height:27px}
.pcard__badge em{
  padding-left:15px;font-style:normal;
  font-size:16px;font-weight:300;line-height:27px;color:var(--azul-oscuro);
}
.pcard__img{grid-area:img;display:block;margin-top:11px;overflow:hidden}
.pcard__img img{width:100%;height:100%;object-fit:contain;max-width:none}
.pcard__swatches{grid-area:sw;display:flex;align-items:center;gap:5px;margin-top:16px}
.pcard__swatches img{width:29px;height:18px;border-radius:37px;object-fit:cover}
/* El nombre entero, sin recortar; el alto mínimo alinea los de una línea. */
.pcard__name{
  grid-area:name;margin-top:11px;padding-right:65px;
  min-height:1.2em;
  font-size:16px;font-weight:300;line-height:1.2;color:var(--azul-oscuro);
}
.pcard__price{
  grid-area:price;display:block;margin-top:10.8px;
  font-size:30px;font-weight:400;line-height:normal;color:var(--azul-oscuro);
}
.pcard__go{display:none}

/* ==========================================================================
   PAGINATION  (366:13049 — 223×43 group, centred)
   ========================================================================== */
.pagination{
  display:flex;align-items:center;justify-content:center;
  margin-top:36px;height:43px;
}
.pagination__arrow{display:flex;align-items:center;justify-content:center;width:16px;height:43px}
.pagination__arrow .ds-icon{font-size:16px;}
.pagination__arrow--prev .ds-icon{transform:rotate(180deg)}
.pagination__list{display:flex;align-items:center}
.pagination__link{
  display:flex;align-items:center;justify-content:center;
  width:43px;height:43px;border-radius:14px;
  font-size:16px;font-weight:400;line-height:normal;color:var(--azul-oscuro);
}
.pagination__link[aria-current="page"]{background:rgba(0,159,227,0.2)}
.pagination__arrow--prev{margin-right:17px}
.pagination__arrow--next{margin-left:17px}
.pagination__item+.pagination__item{margin-left:14px}

/* ==========================================================================
   FOOTER  (413:12855 — 1920×387)
   ========================================================================== */
.site-footer{margin-top:36px;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)}

/* 413:12884 sits at y 3016 — 346px below the footer band's 2670 top. Flowing it after
   the grid rows puts it low, so pin it. */
.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 — reflow just BEFORE each block would overflow.
   The desktop composition needs 1650px of viewport (1600 track + the 25px gutter
   floor each side); below that every fixed-px child still assumes the full 1600.
   ========================================================================== */
@media (max-width:1700px){
  .catalog__grid{grid-template-columns:repeat(4,1fr);column-gap:24px}
  .pcard{width:100%;height:auto;aspect-ratio:382 / 341}
  [data-filters="open"] .catalog__grid{grid-template-columns:repeat(3,1fr)}
  [data-filters="open"] .catalog{grid-template-columns:minmax(240px,381px) 1fr}
  [data-filters="open"] .panel{width:100%}

  /* header — the bar is 1581px of fixed px. Trade the pinned per-link widths for
     intrinsic width + proportional gaps so it compresses instead of pushing the CTA off. */
  .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}

  /* the hero title is a 994px fixed box — let it share the band instead of running
     under the photo as the viewport narrows */
}

@media (max-width:1500px){
  /* footer — 714+322+271 is 1307px of fixed track plus a min-content 4th column */
  .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){
  /* header — logo + 5 links + lang + the 215px CTA need ~1300px of bar; hand over
     to the burger here. The mobile-menu markup is already in the DOM. */
  .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){
  /* four 382px cards no longer read at this width — go 3-up, and the filters panel
     stacks above the grid rather than eating a third of it. */
  .catalog__grid{grid-template-columns:repeat(3,1fr)}
  [data-filters="open"] .catalog{grid-template-columns:1fr}
  [data-filters="open"] .catalog__grid{grid-template-columns:repeat(3,1fr)}
  [data-filters="open"] .panel{width:100%;max-width:381px;margin-bottom:24px}
  .search{width:min(517px,45vw)}
  .search__input{width:100%}
}

/* --------------------------------------------------------------------------
   MOBILE — the 430 frame (413:13245)
   -------------------------------------------------------------------------- */
@media (max-width:900px){

  /* header — 413:13879 logo 168×42 at (25,13); 413:13880 burger 23×14 at (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}

  /* hero — band 279px; wash 309/430 = 71.86% (the same proportion as desktop).
     The 430 frame's own photo node (413:13884) is a DIFFERENT photograph — the terrace
     shot from the Categoría page, not this page's living room. One hero is one image
     field in the CMS, so the desktop photo is reframed here instead of shipping a
     second file that would need a second field. */
  /* Alto por CONTENIDO con esos 279 de mínimo. La banda se midió para un
     titular de dos líneas; el de hoy ocupa cinco más la entradilla, y el
     overflow del hero se comía la primera línea y la última. Mismo criterio que
     el hero del home y el de tiendas. */
  .hero{height:auto;min-height:279px}
  .hero__bg{object-position:65% 50%}
  /* El lavado llega al borde con el azul macizo hasta el 70%: al 71.86% de
     ancho su degradado empieza a desteñir en el 40% de la pantalla, y el
     titular —que mide el 70%— acababa en blanco sobre la foto. */
  .hero__wash{width:100%;background:linear-gradient(90deg,var(--azul) 70%,rgba(0,159,227,0) 100%)}
  /* 413:13888 / 413:13889 — 301 and 214 wide in the 430 frame, held as the frame's
     PROPORTION of the band, not as phone pixels: identical at 430 (430×70% = 301,
     430×49.767% = 214) and a real text measure through the tablet band. */
  .hero__title{width:70%;font-size:30px}
  .hero__lede{width:49.767%;font-size:16px;line-height:20px}
  .dots--hero{margin-top:23px}

  /* toolbar — icon-only button, no product count (413:13890 / 413:14115 / 413:14117).
     At 430 the button and the search field share one baseline (both at y 392). */
  .section--catalog{margin-top:17px}
  .toolbar{height:41px}
  .toolbar__filters{width:46px;margin-top:0}
  .toolbar__icon{left:14px;top:13px}
  .toolbar__filters span{display:none}
  [data-filters="open"] .toolbar__icon--off{left:11.5px;top:11.7px}
  .toolbar__count{display:none}
  .search{margin-left:20px;width:auto;flex:1 1 auto}
  .search__input{width:100%;padding:0 60px 0 25px}

  /* catalog — 2-up, cards 180×269 (413:13892) */
  .catalog{margin-top:18px}
  .catalog__grid,
  [data-filters="open"] .catalog__grid{column-gap:20px;row-gap:19px}
  [data-filters="open"] .catalog{grid-template-columns:1fr}
  [data-filters="open"] .panel{width:100%;max-width:none;height:auto;margin:0 0 19px}

  /* Los huecos van en los márgenes de cada pieza, NO en el padding: `--c` se
     calcula con `cqw`, que mide la caja de contenido, así que un padding en esa
     unidad se realimenta. Y `--c` tampoco vale en las filas de la propia
     tarjeta: un contenedor no se consulta a sí mismo. */
  .pcard{
    width:100%;height:auto;aspect-ratio:180 / 269;border-radius:20px;
    container-type:inline-size;--c:calc(100cqw / 180);
    padding:0;
    grid-template-rows:auto minmax(0,1fr) auto auto auto;
  }
  .pcard__badge{height:calc(22*var(--c));margin:calc(11*var(--c)) 0 0 calc(11*var(--c))}
  .pcard__badge img{width:auto;height:100%}
  .pcard__badge em{padding-left:calc(16*var(--c));line-height:calc(22*var(--c));font-size:calc(12*var(--c))}
  .pcard__img{margin:calc(7*var(--c)) calc(17.5*var(--c)) 0}
  .pcard__img img{width:100%;height:100%;object-fit:contain}
  .pcard__swatches{margin:calc(12*var(--c)) 0 0 calc(17.5*var(--c));gap:calc(3.6*var(--c))}
  .pcard__swatches img{width:calc(21*var(--c));height:calc(13.2*var(--c))}
  .pcard__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;
  }
  /* Sin precio el nombre es la última línea y la flecha, que aquí sale en
     reposo pegada a la esquina, le cae encima: 29.3 de caja contra los 12 de
     margen del nombre. Le deja 18. Igual que en home.css. */
  .pcard:not(:has(.pcard__price)) .pcard__name{padding-right:calc(18*var(--c))}
  .pcard__price{
    margin:calc(10.2*var(--c)) 0 calc(24*var(--c)) calc(17.5*var(--c));
    font-size:calc(24*var(--c));
  }
  /* El precio anterior baja a su propia línea. En dos tarjetas por fila los dos
     precios sólo caben juntos cuando las cifras son cortas, y entonces el
     tachado terminaba justo debajo de la flecha, que va absoluta en esa esquina. */
  .pcard__price del{display:block}
  .pcard__go{
    display:block;position:absolute;right:0;bottom:0;
    width:calc(29.3*var(--c));height:calc(29.4*var(--c));opacity:1;pointer-events:auto;
  }
  /* El dibujo mide lo que su caja: con 32 fijos dentro de una caja que escala
     con --c, la flecha asomaba por la esquina redondeada de la tarjeta. */
  .pcard__go .ds-icon{font-size:calc(29.3*var(--c));margin:0}

  /* pagination (413:14060 — same 223×43 group, still centred) */
  .pagination{margin-top:18px}

  /* footer (413:14069) */
  .site-footer{margin-top:22px}
  .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}
  /* 380 is the whole 430 content track, so cap at the desktop node's 542 instead of a
     phone pixel — renders 380 at 430, and fills the tablet band. */
  .subscribe{width:100%;max-width:542px;height:70px}
  /* right padding clears the 122px Enviar button so the placeholder truncates instead
     of running underneath it */
  .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}
}

/* The 430 frame's grid is 2-up on 180px columns. A 3-up row still yields columns wider
   than 180 down to ~630px, so the handover belongs here, not at 900 — otherwise the
   tablet band renders 430-frame tiles stretched to 430px wide. */
@media (max-width:640px){
  .catalog__grid,
  [data-filters="open"] .catalog__grid{grid-template-columns:repeat(2,1fr)}
  /* 413:13245 mocks 14 tiles where the 1920 frame mocks 20 — a difference in the mock,
     not in the page. How many items a page holds is a query setting, not a breakpoint:
     hiding real products with CSS would carry into the WordPress build as content the
     template renders and then hides. All 20 stay visible at every width. */
}

@media (max-width:460px){
  /* Below the 430 frame there is no authored design, but there must still be no
     horizontal scroll. Everything above is already proportional (container queries
     + fr tracks), so only the filter panel's fixed field row needs to give. */
  .panel__fields{gap:16px}
  .field,.field input{width:100%}
}

@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 STATES — from the Figma component variants (Property 1=Default → Variant2),
   same component set as the Categoría build: pcard 407:10852, buttons 225:2035.

   Scoped by WIDTH only, never by `hover:hover`: headless Chrome reports `hover:none`,
   so a pointer-gated block is invisible to every render and can never be verified. The
   min-width keeps it off the mobile breakpoint, where the 430 frame draws the corner
   arrow at REST and an unscoped `opacity:0` would win on cascade order.
   ========================================================================== */
@media (min-width:901px){
.btn--primary,.toolbar__filters,.search__btn{transition:background-color .2s ease}
.btn--primary:hover,.toolbar__filters:hover,.search__btn:hover{background:#3b6f9c}

/* corner arrow appears at 53.3px, bottom-right anchored per set */
.pcard__go{
  display:block;position:absolute;width:53.3px;height:53.3px;
  opacity:0;transition:opacity .3s ease-out;pointer-events:none;
  right:16.7px;bottom:16.7px;   /* 407:10847: inset 88.86% 3.16% 3.54% 90.05% of 382×341 */
}
.pcard__go .ds-icon{
  font-size:39px;margin:7.15px;display:block;transform-origin:0 0;
}
.pcard:hover .pcard__go .ds-icon{animation:go-grow .3s ease-out both}
@keyframes go-grow{
  from{transform:translate(34.687px,25.737px) scale(.6075)}
  to{transform:none}
}
.pcard:hover .pcard__go{opacity:1}
.pcard:hover{cursor:pointer}
}

/* 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. */
.pcard__go{pointer-events:auto}

/* ==========================================================================
   SECTION HEADING
   Lo piden la FAQ y el bloque SEO del pie, que esta página no tenía. Mismo
   tamaño que en el home y la categoría; las reglas de `.faq*` y `.seo*` vienen
   del bundle, porque son secciones de varias páginas.
   ========================================================================== */
.section__title{font-size:30px;font-weight:400;line-height:normal;color:var(--azul-oscuro)}

@media (max-width:900px){
  .section__title{font-size:18px}
}