/* ==========================================================================
   Descanshop — Detalle de una tienda
   Ground truth: Figma "Detalle de una tienda"        310:3873  (1920 × 1678)
                 "Detalle de una tienda móvil"        313:10406 (430 × 2432)
   Header (369:10998), footer (412:12717) and the product card (407:10851) are
   the same Figma component set as the earlier pages, so their CSS and exported
   assets are carried over from prepared/366-12970 unchanged.
   ========================================================================== */

/* ---------- Fonts -------------------------------------------------------- */
/* Florentia is the design's typeface (commercial). The licensed webfont files
   live in assets/fonts/ under these exact names. */
/* The shop title is Florentia Bold (313:10235) — a weight the client kit does not
   ship. Chrome synthesises it from Regular until the real file lands here. */

/* ---------- 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;
}
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)}

/* ==========================================================================
   HEADER  (369:10998 — 1920×77, the bar is 76 from y1)
   ========================================================================== */
.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:9.5px;height:5.9px;margin-left:5.1px;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:11005 — on this page "Catálogo" 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{width:29px;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}

/* ==========================================================================
   TIENDA — gallery + info  (row starts at y120, 43 below the header)

   The two halves are ONE unit inside the 1600 track: 854.24 (gallery) + 93.76
   (gap) + 652 (info) = 1600. Both columns are `fr`, so the composition keeps its
   proportions through the tablet band instead of only matching at 1920.
   ========================================================================== */
.shop-section{margin-top:43px}
.shop{
  display:grid;
  grid-template-columns:854.24fr 652fr;
  column-gap:5.86%;            /* 93.76 / 1600 */
  align-items:start;
}

/* ---------- gallery (313:10229 + 313:10223-10234) ------------------------ */
.gallery{
  display:grid;
  grid-template-columns:152.12fr 670.24fr;
  column-gap:3.73%;            /* 31.88 / 854.24 */
}
/* La tira es un DESLIZADOR: la maqueta dibuja cuatro miniaturas y la galería
   puede traer las que quiera, así que las demás se alcanzan desplazándola. Sin
   JS: un scroll con scroll-snap es exactamente eso, y el diseño no dibuja
   flechas que conmutar.

   El alto sale de su propia proporción y no de estirarse contra la foto grande.
   Las dos columnas nacen del mismo reparto `fr` —152.12 y 670.24 del mismo
   ancho menos el mismo hueco—, así que 152.12/661.06 da exactamente el alto de
   la foto a cualquier anchura; con los hijos ya en flujo, un `stretch` habría
   ido en la otra dirección y sería la tira la que tirase del alto de la fila.

   La barra se esconde: son cuatro miniaturas en una columna de 152px y la barra
   del sistema se comería el borde redondeado. El arrastre y el teclado siguen. */
.gallery__thumbs{
  display:flex;flex-direction:column;
  aspect-ratio:152.12 / 661.06;
  overflow-y:auto;overscroll-behavior:contain;
  scroll-snap-type:y mandatory;
  scrollbar-width:none;-ms-overflow-style:none;
}
.gallery__thumbs::-webkit-scrollbar{display:none}
/* El aire entre miniaturas va de `padding` y no de `gap`: un gap porcentual en
   una columna flex se resuelve contra el ALTO, que aquí sale de la proporción,
   mientras que un padding porcentual se resuelve siempre contra el ancho.
   15% de 152.12 son 22.82px, que es la separación de la maqueta (171.85 − 148.16). */
.gallery__thumb{flex:0 0 auto;width:100%;margin:0;padding-bottom:15%;scroll-snap-align:start}
.gallery__thumb:last-child{padding-bottom:0}
.gallery__thumb-btn{position:relative;display:block;width:100%}
.gallery__thumb img{display:block;width:100%;aspect-ratio:152.12 / 148.16;height:auto;border-radius:15px;object-fit:cover;object-position:center;background:var(--card-bg);box-shadow:none}
/* 313:10233 — the selected thumbnail carries a 2px azul border inside its 152×148 box.
   Va sobre la <img> y no sobre el <li>: con `border-box` el borde se dibuja por
   dentro y la miniatura no cambia de tamaño al seleccionarla, que en una tira
   en flujo movería a todas las de debajo. */
.gallery__thumb--active img{border:2px solid var(--azul)}

.gallery__main{position:relative}
.gallery__photo{
  width:100%;aspect-ratio:670.24 / 661.06;height:auto;
  border-radius:15px;object-fit:cover;object-position:center;
  background:var(--card-bg);box-shadow:none;
}

/* El reproductor ocupa el mismo hueco que la foto, con su misma proporción: es
   lo que se enseña en su lugar, no algo que se sume debajo. `[hidden]` va
   escrito porque el `display:block` de la regla le gana al del navegador —el
   mismo caso que `.gallery__thumbs` en el producto—, y el iframe que devuelve
   oEmbed trae su propio width/height en atributos, así que se le imponen los
   del hueco. */
.gallery__video{
  width:100%;aspect-ratio:670.24 / 661.06;
  border-radius:15px;overflow:hidden;background:var(--azul-oscuro);
}
/* Los tres elementos del hueco se turnan con `hidden`, y a los tres hay que
   escribirles el `display:none`: el del navegador va en la hoja de usuario y
   pierde contra cualquier regla del tema —el `display:block` que la base le da
   a `img` y el `display:flex` del botón—, así que sin esto el vídeo se apilaba
   DEBAJO de la foto y el botón seguía encima de él. */
.gallery__video[hidden],.gallery__photo[hidden],.gallery__play[hidden]{display:none}
.gallery__video>iframe,.gallery__media{
  display:block;width:100%;height:100%;border:0;
}
/* `contain`, no `cover` como la foto: recortar un vídeo a una caja casi
   cuadrada se come los lados de una grabación apaisada, y aquí no hay un
   encuadre alternativo que subir. Las bandas van del color del fondo. */
.gallery__media{object-fit:contain;background:var(--azul-oscuro)}

/* 313:10249 / 313:10252 — Figma draws the frost as a foreignObject backdrop-filter,
   which cannot sample the page behind an <img>; the circle is reproduced in CSS at
   its exact values and only the triangle path is taken from the export. */
.gallery__play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;background:var(--play-bg);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:none;
}
.gallery__play svg{width:100%;height:100%;fill:var(--beige)}
.gallery__play--lg{width:18.053%;aspect-ratio:1}          /* 121 of 670.24 */
.gallery__play--sm{
  width:26.063%;aspect-ratio:1;pointer-events:none;       /* 39.647 of 152.12 */
  -webkit-backdrop-filter:blur(3.28px);backdrop-filter:blur(3.28px);
}

/* ---------- shop info ---------------------------------------------------- */
.shop__title{
  font-size:40px;font-weight:700;line-height:1.22;letter-spacing:-1.6px;
  color:var(--azul-oscuro);
}
/* El editor del post, así que lo que llega son los párrafos de wpautop: la caja
   pone el tipo y el ancho y aquí sólo se aplana el margen que traen. */
.shop__desc{
  margin-top:7px;width:534px;max-width:100%;
  font-size:16px;font-weight:400;line-height:26px;color:var(--azul-oscuro);opacity:.7;
}
.shop__desc p{margin:0}
.shop__desc p+p{margin-top:16px}

/* contact rows — the frame draws them at y352 / 388 / 424 / 451, each icon carrying
   its own small offset against the text (2.25 / 0.25 / 2 / 11). */
/* 313:10236 overflows its own 104px Figma box — the six rendered 26px lines end at 332,
   and the hours row starts 20px below that (y352). */
.meta{margin-top:20px}
.meta__row{display:flex;align-items:flex-start}
.meta__icon{flex:0 0 auto}
.meta__text{font-size:16px;font-weight:400;line-height:normal;color:var(--azul-oscuro);opacity:.7}
.meta__row--hours .meta__icon{font-size:18.5px;margin-top:2.25px;margin-right:15.25px}
.meta__row--address{margin-top:15.25px}
.meta__row--address .meta__text{white-space:pre-wrap}
.meta__row--address .meta__icon{font-size:21.197px;margin-top:.25px;margin-right:13.01px}
.meta__row--phone{margin-top:14.55px}
.meta__row--phone .meta__icon{font-size:17px;margin-top:2px;margin-right:13px}
.meta__row--mail{margin-top:8px}
.meta__row--mail .meta__icon{font-size:14px;margin-top:11px;margin-right:13px}
.meta__row--mail .meta__text{line-height:26px}

/* ---------- map card (313:10267 + 313:10268 + 313:10274) ------------------ */
/* El iframe de Google, no una captura: la chincheta y el icono de zoom del demo
   iban encima como SVG clavados en porcentajes de la caja, es decir siempre en
   el mismo punto del recuadro, y con la captura de cualquier tienda que no
   fuese la de la maqueta señalaban a otro sitio. El alto es proporción y no
   píxeles — un iframe sin `height` se dibuja a los 150px por defecto del
   navegador. */
.map{position:relative;margin-top:40px;width:100%;border-radius:14px;overflow:hidden;box-shadow:none}
.map__frame{
  display:block;width:100%;aspect-ratio:651 / 258;
  border:0;border-radius:14px;
}

/* ==========================================================================
   PRODUCTOS DISPONIBLES  (heading y805, cards y870, dots y1244)
   ========================================================================== */
/* 805 − 781.06 = 23.94; the fractional photo box rounds ~0.05 high, so the page ends on
   the frame's 1678 instead of spilling a row */
.section--products{margin-top:23.89px}
.products__head{display:flex;align-items:flex-start;justify-content:space-between}
.products__title{font-size:30px;font-weight:400;line-height:normal;color:var(--azul-oscuro)}
.products__all{margin-top:13px;font-size:16px;font-weight:300;line-height:normal;text-align:right;color:var(--azul-oscuro)}

.carousel{position:relative;margin-top:35px}
.carousel__track{
  display:flex;gap:25px;
  overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;
}
.carousel__track::-webkit-scrollbar{display:none}
.carousel__track>li{flex:0 0 calc((100% - 75px) / 4);scroll-snap-align:start}
/* 313:10246 sits 21px to the RIGHT of the track (1781 vs the track's 1760 edge),
   so it is anchored to the track, never to the viewport. */
/* Mismo disco que las flechas de los carriles: el glifo --next solo aporta el
   galon, el circulo es el fondo del boton. La regla que habia apuntaba a un
   <img> que ya no existe —el icono es una fuente— asi que la flecha salia sin
   disco y a 49px de galon. */
.carousel__next{
  position:absolute;left:100%;margin-left:21px;top:148px;
  width:49px;height:49px;
  display:flex;align-items:center;justify-content:center;
  background:var(--tag-bg);border-radius:50%;
}
.carousel__next .ds-icon{font-size:16px}

/* 313:10281 — 74×10 beige track with a 30.7 azul fill, both r9.5 */
.dots{display:flex;justify-content:center;margin-top:33px}
.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)}

/* ==========================================================================
   PRODUCT CARD  (407:10851 — 382×341, identical to the earlier pages)
   ========================================================================== */
/* 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:100%;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}

/* ==========================================================================
   FOOTER  (412:12717 — 1920×387 band at y1291)
   ========================================================================== */
/* the band's Figma top is 1291 (37 below the dots); the fractional grid columns above
   land the flow ~1px lower, so the gap is 36 for a band that starts on 1291 exactly */
.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:var(--field-bg);
  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)}

/* 412:12746 sits 346px below the band's top */
.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 carousel button needs 70px of clearance outside the track; below this the
   gutter no longer provides it, so it moves inside the track's right edge. */
@media (max-width:1739px){
  .carousel__next{left:auto;right:8px;margin-left:0}
}

@media (max-width:1700px){
  /* 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 the end. */
  .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}

  .shop__desc{width:100%}
}

/* Below 1650 the track stops being 1600 and the tile stops being 381.25 — from here the
   card scales as a whole (container query units on the 382 component) instead of keeping
   pixel-sized children inside a shrinking box, which is what makes the name collide with
   the price at 3-up. At 1920 the fixed values above still apply, so the frame is exact. */
@media (max-width:1649px){
  /* Todo en márgenes y no en el padding de la tarjeta: `--c` sale de `cqw`, que
     mide la caja de contenido, y un padding en esa unidad se realimentaría. */
  .pcard{container-type:inline-size;--c:calc(100cqw / 382);padding:0;grid-template-rows:auto minmax(0,1fr) auto auto auto}
  .pcard__badge{height:calc(27*var(--c));margin:calc(19*var(--c)) 0 0 calc(29*var(--c))}
  .pcard__badge img{width:auto;height:100%}
  .pcard__badge em{padding-left:calc(15*var(--c));line-height:calc(27*var(--c));font-size:calc(16*var(--c))}
  .pcard__img{margin:calc(11*var(--c)) calc(29*var(--c)) 0}
  .pcard__swatches{margin:calc(16*var(--c)) 0 0 calc(29*var(--c));gap:calc(5*var(--c))}
  .pcard__swatches img{width:calc(29*var(--c));height:calc(18*var(--c))}
  .pcard__name{
    margin:calc(11*var(--c)) calc(94*var(--c)) 0 calc(29*var(--c));padding-right:0;
    font-size:calc(16*var(--c));
  }
  .pcard__price{
    margin:calc(10.8*var(--c)) 0 calc(36*var(--c)) calc(29*var(--c));
    font-size:calc(30*var(--c));
  }
  .pcard{height:auto;aspect-ratio:382 / 341}
}

/* four 382px tiles stop reading below ~340px of card — hand over to three, then two.
   The card internals are fixed px until the 430 variant takes over at 900. */
@media (max-width:1484px){
  .carousel__track>li{flex-basis:calc((100% - 50px) / 3)}
}
@media (max-width:1119px){
  .carousel__track>li{flex-basis:calc((100% - 25px) / 2)}
}

@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}
  .mobile-menu li{margin-bottom:14px}
  .mobile-menu a{font-size:18px}
  .mobile-menu .btn{width:100%;height:48px;margin-top:6px}
}

@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%}
}

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

  /* header — 313:10822 logo 168×42 at (25,13); 313:10778 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}
  .burger{align-self:flex-start;margin-top:31px;width:23px;height:14px}
  .burger .ds-icon{font-size:14px;}
  .mobile-menu{top:63px}

  /* gallery — main photo first (y91, 380.43×375.22), the four thumbs below it in
     one row at y482.83 (313:10826-10837) */
  .shop-section{margin-top:28px}
  .shop{grid-template-columns:1fr;column-gap:0}
  .gallery{grid-template-columns:1fr;column-gap:0}
  .gallery__main{order:1}
  .gallery__photo{aspect-ratio:380.43 / 375.22}
  .gallery__play--lg{width:22.343%}                 /* 85 of 380.43 */
  /* La tira pasa a horizontal y se desliza de lado: la maqueta dibuja cuatro
     miniaturas debajo de la foto y siguen midiendo eso, `gap` incluido; lo que
     cambia es que la quinta y las siguientes se alcanzan arrastrando. Aquí el
     `gap` sí puede ir en píxeles porque el eje es el ancho. */
  .gallery__thumbs{
    order:2;flex-direction:row;aspect-ratio:auto;gap:14.8px;margin-top:16.61px;
    overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  }
  .gallery__thumb{flex:0 0 calc((100% - 44.4px) / 4);padding-bottom:0}
  .gallery__thumb img{aspect-ratio:83.669 / 81.494}
  /* El distintivo de reproducir SÍ sale en móvil. El marco de 430 no lo dibuja
     porque allí la fila del vídeo era la primera y el botón grande ya estaba
     sobre la foto de entrada; con la tira convertida en deslizador el vídeo
     puede ir en cualquier posición, y sin marca no hay forma de saber cuál de
     las catorce miniaturas lo abre. El tamaño es un % de la miniatura, así que
     se ajusta solo. */

  .shop__info{margin-top:16.68px}
  .shop__desc{margin-top:12.2px}
  .meta{margin-top:13px}
  /* the address wraps to two lines at 430, which pushes the phone row down */
  /* 313:10880 is a 314-wide box in the frame — the address breaks after "Bugadelles," */
  .meta__row--address .meta__text{max-width:314px}
  .meta__row--phone{margin-top:25px}
  .meta__row--mail{margin-top:11px}
  .map{margin-top:16px}
  .map__frame{aspect-ratio:380 / 258}

  /* productos — 20px heading (313:10844), two 180×269 tiles (313:10846/10847) */
  .section--products{margin-top:25px}
  .products__title{font-size:20px}
  .products__all{margin-top:3px}
  .carousel{margin-top:19px}
  .carousel__track{gap:20px}
  .carousel__track>li{flex-basis:calc((100% - 20px) / 2)}
  .carousel__next{display:none}                     /* the 430 frame has no next button */
  .dots{margin-top:18px}

  /* product tile — the 180×269 variant, driven by container query units so it
     stays proportional across the whole band instead of only at 430 */
  .pcard{height:auto;aspect-ratio:180 / 269;border-radius:20px;container-type:inline-size;--c:calc(100cqw / 180);padding:0}
  .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));
    min-height:2.7em;
    font-size:calc(14*var(--c));line-height:1.35;
  }
  .pcard__price{
    margin:calc(10.2*var(--c)) 0 calc(24*var(--c)) calc(17.5*var(--c));
    font-size:calc(24*var(--c));
  }
  .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;
  }
  .pcard__go .ds-icon{font-size:32px;margin:0}

  /* footer (313:10782 — band from y1681) */
  .site-footer{margin-top:34px}
  .site-footer__inner{grid-template-columns:1fr 1fr;height:auto;padding-bottom:28px;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}
  .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}
  /* 313:10790 / 10798 / 10816 — the three link blocks at y1975 / 2115 / 2253, each a
     two-column list on a 33px row pitch (20px line + 13px gap, no trailing gap). */
  .fcol--catalogo .fcol__title{margin-top:29.5px}
  .fcol__title{margin-top:19px}
  .fcol--legales .fcol__title{margin-top:17px}
  .fcol li{margin-bottom:0}
  .fcol--catalogo,.fcol--secciones,.fcol--legales{grid-column:1 / -1}
  /* the 430 frame puts the second column at x215 — 190px tracks with no gap, which is
     what keeps "Colchones y descanso" on one line */
  .fcol--catalogo ul,.fcol--secciones ul,.fcol--legales ul{display:grid;grid-template-columns:1fr 1fr;grid-auto-flow:column;column-gap:0;row-gap:13px}
  /* the 430 frame fills each block COLUMN-first: Colchones/Sofás/Muebles on the left,
     Sillones/Mesas/Terraza on the right (313:10790, 10798, 10816) */
  .fcol--catalogo ul,.fcol--secciones ul{grid-template-rows:repeat(3,auto)}
  .fcol--legales ul{grid-template-rows:repeat(2,auto)}
  /* 313:10820 is 195 wide in a 190 track and the frame lets it run — one line, as drawn */
  .fcol--legales li{white-space:nowrap}
  .site-footer__copy{position:static;grid-column:1 / -1;margin-top:23px;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 STATES — from the Figma component variants (Property 1=Default → Variant2),
   the same component set as the earlier pages: 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.
   ========================================================================== */
@media (min-width:901px){
  .btn--primary{transition:background-color .2s ease}
  .btn--primary:hover{background:#3b6f9c}

  /* the arrow is a HOVER affordance at 1920 (407:10847 is opacity 0 in the default
     variant) — kept out of the render entirely at rest, not merely transparent */
  .pcard__go{
    display:none;position:absolute;width:53.3px;height:53.3px;
    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{display:block;animation:go-fade .3s ease-out both}
  @keyframes go-fade{from{opacity:0}to{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}

/* Los bloques SEO y FAQ del pie viven en chrome.css, pero su encabezado no:
   cada hoja de página trae el suyo, y esta ficha no dibujaba ninguno hasta
   ahora. Mismos 30/18 px que en tiendas y ofertas. */
.section__title{font-size:30px;font-weight:400;line-height:normal;color:var(--azul-oscuro)}

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

/* El horario es texto enriquecido: wpautop lo envuelve en <p>, cuyo margen por
   defecto rompería la separación medida entre las filas de `.meta`. */
.meta__row--hours .meta__text p{margin:0}
.meta__row--hours .meta__text p + p{margin-top:.5em}