/* ==========================================================================
   Descanshop — Tiendas (archivo de tienda)
   Ground truth: Figma "Tiendas" 661:13560 (1920 × 3057)
   Transcribed from demo/descanshop/css/tiendas.css. Only the page's own
   selectors live here — the header, footer, nav, submenu and language control
   ship dm- namespaced in the shared bundle, so the demo file's copies of them
   are deliberately not carried across.
   ========================================================================== */

/* ==========================================================================
   HERO  (661:13566 — 1920×523 band at y 77)
   The photograph renders across x 630→1920 — 1290/1920 = 67.19% — flush right,
   with the wash (661:13570) over the left 1379.086/1920 = 71.83%. Held as
   PROPORTIONS so the band stays composed at any viewport width.
   ========================================================================== */
.hero{position:relative;height:523px;overflow:hidden}
.hero__bg{
  position:absolute;right:0;top:0;width:67.19%;height:100%;
  object-fit:cover;object-position:center;
}
.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:650px;
  font-size:55.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 DOT  (661:13579 — 74×10 track, 30.5 active)
   Decorative in the design: there is nothing under the hero to page.
   ========================================================================== */
.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  (661:13593 / 13573 — row at y 663)
   No "Mostrar filtros" button on this page: just the count and the search
   field. The count is drawn 19px below the field's top, so the row is
   top-aligned and each part carries its own offset.
   ========================================================================== */
.section--stores{margin-top:27px}
.section__inner{width:100%;margin:0 auto;padding-inline:max(25px,calc((100% - var(--page)) / 2))}

.toolbar{display:flex;align-items:flex-start;height:41px}
.toolbar__count{
  margin-left:8px;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:0;border-radius:9px;cursor:pointer;
}
/* 661:13576 — 15.833 glyph with a -6.32% stroke overhang → 17.833 box */
.search__btn .ds-icon{font-size:17.833px;}

/* ==========================================================================
   STORE GRID  (15 × 407:11020 — 517×321, three columns at 160 / 703 / 1246)
   Pitch 543 → 26 column gap; rows 736…2120, pitch 346 → 25 row gap.
   ========================================================================== */
.cards{
  display:grid;grid-template-columns:repeat(3,1fr);
  column-gap:26px;row-gap:25px;margin-top:32px;
  padding:0;list-style:none;
}

.scard{
  position:relative;
  display:grid;grid-template-columns:233px 1fr;column-gap:24px;
  height:321px;min-height:321px;
  padding:6px 8px 7px 8px;
  background:var(--card-bg);border-radius:20px;
  /* 407:10999 carries no effect — the card is FLAT. Never add depth here. */
  box-shadow:none;
}
/* 407:11000 — 233×308 at (8,6) */
/* The link is the photo's frame: it clips the hover zoom, so it carries the
   grid placement and the radius, and the image just fills it. */
.scard__photo-link{
  grid-row:1;align-self:stretch;min-height:0;
  display:block;overflow:hidden;border-radius:14px;
}
.scard__photo{
  display:block;width:100%;height:100%;
  object-fit:cover;object-position:center;
  transition:transform .3s ease-out;
}
.scard__body{display:flex;flex-direction:column;align-items:flex-start;padding-top:25px;min-width:0}
/* 407:11001 — store name at y31 */
.scard__name{margin:0;font-size:20px;font-weight:400;line-height:normal;color:var(--azul-oscuro)}
.scard__name a{color:inherit;text-decoration:none}
/* the icon column sits at x265, the copy at x287 → a 22px column per row.
   Es una rejilla de dos columnas: el icono ocupa la primera y el texto la
   segunda, en vez de ir superpuesto con position:absolute sobre una sangría. */
.scard__row{
  display:grid;grid-template-columns:22px 1fr;
  width:100%;margin:0;
  font-size:16px;font-weight:300;line-height:20px;color:var(--azul-oscuro);
  /* the e-mail is one unbreakable token — let it break rather than paint over
     the card edge when the copy column narrows */
  overflow-wrap:anywhere;
}
.scard__row a{color:inherit;text-decoration:none}
.scard__icon{align-self:start;flex:0 0 auto}
/* 407:11004 — 12×16 pin, stroke overhang -3.75% -5% -1.8% -5% → 13.2×16.888 */
.scard__icon--loc{font-size:16.888px;margin:2.16px 0 0 -0.6px}
/* 407:11009 — 13×13 clock, overhang -4.62% → 14.2×14.2 */
.scard__icon--hours{font-size:14.2px;margin:3.9px 0 0 -0.6px}
.scard__icon--phone{font-size:15px;margin-top:2px}
.scard__icon--mail{font-size:12px;margin-top:6px}
.scard__addr{margin-top:11px}    /* 407:11003 — y62 */
.scard__hours{margin-top:9px}    /* 407:11008 — y111 */
.scard__phone{margin-top:12px}   /* 407:11012 — y203 */
.scard__mail{margin-top:6px}     /* 407:11013 — y229 */
/* 407:11016 — 32.152 square at (466.43, 283.53) in the card. Este cuadro ES el
   del nodo. (Decía que card-arrow.svg traía cocido un giro de −30°: no era
   cierto, el fichero dibujaba la flecha horizontal sobre un lienzo con aire.
   Ahora es el glifo --go, girado 45° desde su ::before.) Drawn at opacity 0
   in the Default variant; the component's other variant reveals it, which is
   what :hover does below. visibility is what keeps it out of the PAINT — a
   transparent element is still in the render tree and a banded full-page
   capture re-composites it. The element keeps its box, so no layout moves. */
.scard__go{
  position:absolute;right:10.42px;bottom:-1.68px;
  width:32.152px;height:32.152px;
  opacity:0;visibility:hidden;
  font-size:23.535px;
  transform-origin:100% 100%;
  /* mouse-out: fade, then drop out of the paint once it is transparent */
  transition:opacity .3s ease-out,visibility 0s linear .3s;
}

/* ==========================================================================
   PAGINATION  (661:14323 — 223×43 group, centred)
   Built uniform (43px chips, 14px gaps) and centred on the page; the mock's own
   cluster reads 14 then 19 and sits ~4px right of centre, which is the mock's
   rounding rather than the build's.
   ========================================================================== */
.pagination{
  display:flex;align-items:center;justify-content:center;
  margin-top:35px;height:43px;
}
.pagination__arrow{display:flex;align-items:center;justify-content:center;width:16px;height:43px}
.pagination__arrow .ds-icon{font-size:17.5px;}
.pagination__arrow--prev .ds-icon{transform:rotate(180deg)}
.pagination__list{display:flex;align-items:center;margin:0;padding:0;list-style:none}
.pagination__link{
  /* 661:14325-14327 sit 10px below the 43px chip's top, not centred in it */
  display:flex;align-items:flex-start;justify-content:center;
  width:43px;height:43px;padding-top:10px;border-radius:14px;
  font-size:16px;font-weight:400;line-height:normal;
  color:var(--azul-oscuro);text-decoration:none;
}
.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 .pagination__link{margin-left:14px}

.section__empty{margin-top:32px;font-size:16px;font-weight:300;color:var(--azul-oscuro)}

.visually-hidden{
  position:absolute;width:1px;height:1px;
  margin:-1px;padding:0;border:0;
  clip-path:inset(50%);overflow:hidden;white-space:nowrap;
}

/* ==========================================================================
   RESPONSIVE — reflow just BEFORE each block would overflow.
   ========================================================================== */
@media (max-width:1700px){
}

@media (max-width:1500px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .scard{height:auto}
}

@media (max-width:1180px){
  .search{width:min(517px,45vw)}
  .search__input{width:100%}
}

@media (max-width:900px){
  /* Alto por CONTENIDO a partir de aquí: la banda se dibujó para «Encuentra tu
     tienda», dos palabras, y un titular largo —el que hay hoy ocupa cinco
     líneas a 320— se salía de los 285px y quedaba cortado por el overflow.
     Mismo criterio que el hero del home en móvil. */
  .hero{height:auto;min-height:285px}
  .hero__bg{right:auto;left:0;width:100%;object-position:65% 50%}
  /* Y el lavado llega hasta el borde, con el azul macizo hasta el 70%: al 71.83%
     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%)}
  .hero__title{width:70%;font-size:30px}
  .hero__lede{width:min(534px,62%);font-size:16px;line-height:20px}
  .dots--hero{margin-top:17px}
  .section--stores{margin-top:17px}
  .toolbar{flex-wrap:wrap;height:auto;row-gap:12px}
  .toolbar__count{margin:0;order:1;width:100%}
  .search{order:2;margin-left:0;width:100%;flex:1 1 auto}
  .search__input{width:100%;padding:0 60px 0 25px}
  .cards{grid-template-columns:1fr;row-gap:18px;margin-top:23px}
  .scard{grid-template-columns:40% 1fr;column-gap:18px;min-height:0}
  /* Touch has no hover, so the arrow is simply on. */
  .scard__go{right:0;bottom:0;font-size:32px;opacity:1;visibility:visible}
}

@media (max-width:560px){
  .scard{grid-template-columns:1fr;row-gap:14px;padding:8px}
  .scard__photo{height:200px}
  /* The card's 8px padding frames the photo; the text gets 12px more, so it
     sits 20px from the card's edge instead of 8px. */
  .scard__body{padding:0 12px 12px}
  /* The arrow sits 8px off the corner. The last line stops 28px short of the
     body's edge, so it ends 8px clear of the 32px arrow instead of under it. */
  .scard__go{right:8px;bottom:8px}
  .scard__body>.scard__row:last-child{padding-right:28px}
}

@media (min-width:901px){
  .search__btn{transition:background-color .2s ease}
  .search__btn:hover{background:#3b6f9c}
  .scard:hover{cursor:pointer}
  /* Same hover as the home's store card (home.css): the photo zooms by the
     same factor and the arrow fades in while it grows from 60.75%. */
  .scard:hover .scard__photo{transform:scale(1.1673)}
  .scard:hover .scard__go{
    opacity:1;visibility:visible;
    transition:opacity .3s ease-out;
    animation:scard-go-grow .3s ease-out both;
  }
}
@keyframes scard-go-grow{from{transform:scale(.6075)}to{transform:none}}

/* ==========================================================================
   SECTION HEADING
   La página no tenía ningún encabezado visible —el suyo va oculto— hasta que
   llegaron la FAQ y el bloque SEO. Mismo tamaño que en el home y la categoría.
   Las reglas de `.seo*` viven en layouts/chrome.css: la sección sale también en
   Ofertas, igual que `.faq` y `.promo`.
   ========================================================================== */
.section__title{font-size:30px;font-weight:400;line-height:normal;color:var(--azul-oscuro)}

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