/* ==========================================================================
   Descanshop — Contacto
   Ground truth: Figma "Contacto"        294:10348 (1920 × 1287)
                 "Contacto" (móvil)      304:3507  (430 × 1862)
   Header and footer are the same Figma component set as the Home / Categoría /
   Ofertas builds, so their geometry matches those stylesheets.
   ========================================================================== */

/* ---------- Fonts -------------------------------------------------------- */
/* Florentia is the design's typeface (commercial). The kit already ships in
   assets/fonts/; without these @font-face rules the page silently fell back to
   system-ui while `font-family` still read "Florentia" in the computed style. */

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

/* ---------- Reset -------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  /* var(--font), not the demo's own --font-family: the theme consolidated that
     token and this sheet was the one left pointing at the old name, so the whole
     contact page rendered in the browser's default sans-serif. */
  font-family:var(--font);
  background-color:var(--page-bg);
  color:var(--azul-oscuro);
  line-height:1.15;
  /* No overflow-x:hidden — it hides an overflow instead of fixing it. */
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
input,textarea{font-family:inherit;border:none;outline:none}
:focus-visible{outline:2px solid var(--azul);outline-offset:2px}

/* full-bleed band, content capped and centred on the design track */
.header__inner,
.contact,
.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-color:var(--azul);color:var(--beige)}

/* ==========================================================================
   HEADER  (369:10950 — band 96; glass bar 369:10951 is 76 tall at y 1)
   ========================================================================== */
.header{
  position:sticky;top:0;z-index:100;
  width:100%;height:96px;
  background-color:rgba(255,255,255,0.3);
  -webkit-backdrop-filter:blur(50px);backdrop-filter:blur(50px);
}
/* flex-start + per-child offsets, so every element lands on its Figma y instead of
   being vertically centred in the band (which put the logo 14px low). */
.header__inner{position:relative;display:flex;align-items:flex-start;height:100%}
.header__logo{flex:0 0 auto;margin-top:1px}
.header__logo img{width:265px;height:67px;object-fit:contain}

.header__nav{display:flex;align-items:flex-start;margin-left:185.4px}
.header__link{
  display:block;margin-top:29px;
  font-size:20px;font-weight:400;line-height:20px;
  color:var(--azul-oscuro);text-align:center;
}
/* 369:10962 — the chevron sits at x 707, right after "Catálogo" (which ends at 701.4) */
.header__dropdown{display:flex;align-items:flex-start;flex:0 0 auto}
.header__dropdown > .header__link{width:91px}                    /* Catálogo         610.4 */
/* icon-dropdown.svg is a 9.5×5.9 canvas around an 8×5 glyph (369:10962 at x 707), so the
   element is the CANVAS size and starts 0.75 earlier than the glyph does. */
.header__dropdown-icon{width:9.5px;height:5.9px;margin-left:4.82px;margin-top:37.5px;flex:0 0 auto}
/* CHILD combinator: `.header__nav a:nth-of-type(1)` also matched "Catálogo", because it is
   the first <a> among ITS siblings inside .header__dropdown — which handed it Tiendas' 78px. */
.header__nav > a:nth-of-type(1){width:78px;margin-left:48.4px}   /* Tiendas          763.4 */
.header__nav > a:nth-of-type(2){width:75px;margin-left:57px}     /* Ofertas          898.4 */
.header__nav > a:nth-of-type(3){width:158px;margin-left:57px}    /* Ideas y consejos 1030.4 */
.header__nav > a:nth-of-type(4){width:152px;margin-left:64px}    /* Sobre nosotros   1252.4 */

.header__lang{display:flex;align-items:flex-start;flex:0 0 auto;margin-left:54.6px;margin-top:28px}
.header__flag{width:25.427px;height:25.427px;box-shadow:none}
.header__lang-text{margin-left:4px;margin-top:1px;font-size:20px;line-height:24px;color:var(--azul-oscuro)}

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

.header__hamburger{display:none;width:26px;height:17px}
.header__hamburger img{width:100%;height:100%;box-shadow:none}

/* The burger's panel. Absolute against .header (sticky establishes the containing block),
   so it overlays the page instead of pushing the card down. */
.header__mobile-menu{display:none}
.header__mobile-menu li{margin-bottom:14px}
.header__mobile-menu a{font-size:18px;font-weight:400;line-height:20px;color:var(--azul-oscuro)}
.header__mobile-menu .btn{display:flex;width:100%;height:48px;margin-top:6px;color:var(--beige)}

/* ==========================================================================
   CONTACT CARD  (304:3426 — 1329×735 at y 114, centred on the 1920 frame)
   ========================================================================== */
.contact{padding-top:18px;padding-bottom:0}
.contact__card{
  max-width:1329px;margin:0 auto;
  display:flex;
  /* Not var(--card-bg): the demo gives that name a different value on this page
     (0.73) than on the store and product pages (0.36), and the theme's shared
     token carries the latter. Same collision the .pcard note warns about, so the
     value is pinned here rather than fought over globally. */
  background-color:rgba(239,238,233,0.73);
  border-radius:35px;
  overflow:hidden;
  box-shadow:none;
}
.contact__image{flex:0 0 auto;width:735px;height:735px}
/* 304:3427 rounds only the two corners it shares with the card's left edge */
.contact__image img{width:100%;height:100%;object-fit:cover;border-radius:35px 0 0 35px}

/* The form column starts at x 1108 and its fields end at 1575 — 77 / 50 inside the
   card's 296…1625. Every row below is the Figma offset, measured from the card top. */
.contact__form{flex:1;padding:57px 50px 0 77px;min-width:0}
.contact__form form{display:flex;flex-direction:column}

.contact__heading{
  font-size:40px;font-weight:400;line-height:46px;
  text-transform:uppercase;color:var(--azul-oscuro);
}
.contact__label{
  font-size:16px;font-weight:300;line-height:20px;color:#060d1f;
}
.contact__label[for="name"]{margin-top:21px}
.contact__label[for="email"]{margin-top:15px}
.contact__label[for="message"]{margin-top:15px}
.contact__input{
  height:54px;margin-top:12px;padding:0 20px;
  background-color:var(--input-bg);border-radius:14.95px;
  font-size:16px;font-weight:300;color:var(--azul-oscuro);
  box-shadow:none;
}
.contact__label[for="email"]+.contact__input{margin-top:16px}
.contact__textarea{
  height:240px;margin-top:16px;padding:16px 20px;resize:vertical;
  background-color:var(--input-bg);border-radius:14.95px;
  font-size:16px;font-weight:300;color:var(--azul-oscuro);
  box-shadow:none;
}
/* 304:3476 sits at x 1358 — its right edge is flush with the field column (1575). */
.contact__submit{width:215px;height:56px;margin-top:28px;align-self:flex-end}

/* ==========================================================================
   FOOTER  (412:12671 — 1920×387 at y 900)
   ========================================================================== */
.footer{margin-top:51px;background-color:var(--footer-bg)}
.footer__inner{position:relative;height:387px}
.footer__top{display:grid;grid-template-columns:714px 1fr}

.footer__newsletter{grid-column:1}
.footer__logo{width:309px;height:78px;margin-top:14px;object-fit:contain}
.footer__heading{
  margin-top:9px;font-size:20px;font-weight:400;line-height:20px;
  text-transform:uppercase;color:var(--azul-oscuro);
}
.footer__subscribe{position:relative;margin-top:22px;width:542px;height:70px}
.footer__subscribe-input{
  width:542px;height:70px;border-radius:9px;padding:0 31px;
  background-color:rgba(140,170,201,0.09);
  font-size:16px;font-weight:300;color:var(--azul-oscuro);
}
.footer__subscribe-input::placeholder{color:var(--azul-oscuro);opacity:1}
.footer__subscribe-btn{position:absolute;right:14px;top:7px;width:122px;height:56px}

.footer__social{display:flex;gap:20.5px;margin-top:26px}
.footer__social-icon{position:relative;display:block;width:47.528px;height:47.528px}
.footer__social-icon img{width:47.528px;height:47.528px;box-shadow:none}
.footer__social-logo{position:absolute;inset:0}

.footer__columns{display:grid;grid-template-columns:322px 271px auto}
.footer__col-heading{
  margin-top:101px;font-size:20px;font-weight:400;line-height:20px;
  text-transform:uppercase;color:var(--azul-oscuro);
}
.footer__col ul{margin-top:15px}
.footer__col li{margin-bottom:13px}
.footer__col li:last-child{margin-bottom:0}
.footer__col li a{font-size:16px;font-weight:300;line-height:20px;color:var(--azul-oscuro)}

/* 412:12700 sits at y 1246 — 346 below the band's 900 top. */
.footer__copyright{
  position:absolute;left:0;right:0;top:346px;
  font-size:16px;font-weight:300;line-height:20px;
  text-align:center;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){
  /* header — the bar is 1581px of fixed px (logo 265 + 185.4 gap + nav + lang + CTA).
     Trade the pinned per-link widths for intrinsic width + proportional gaps. */
  .header__inner{min-width:0}
  .header__nav{margin-left:clamp(8px,3.5vw,185.4px);min-width:0;gap:clamp(6px,1.6vw,57px)}
  .header__nav a,
  .header__nav a:nth-of-type(1),.header__nav a:nth-of-type(2),
  .header__nav a:nth-of-type(3),.header__nav a:nth-of-type(4),
  .header__dropdown .header__link{width:auto;margin-left:0;white-space:nowrap}
  .header__lang{margin-left:clamp(12px,2.84vw,54.6px);flex:0 0 auto}
  .header__cta{margin-left:clamp(10px,1.44vw,27.6px)}

  /* the card is a fixed 1329 + a fixed 735 photo — let it share the track instead
     of running past the gutter */
  .contact__card{max-width:100%}
  .contact__image{width:55.3%;height:auto;aspect-ratio:1}
  .contact__form{padding-left:clamp(24px,5.8vw,77px);padding-right:clamp(24px,3.76vw,50px)}
}

@media (max-width:1500px){
  /* footer — 714 + 322 + 271 is 1307px of fixed track plus a min-content 4th column */
  .footer__inner{height:auto;padding-bottom:40px}
  .footer__top{grid-template-columns:1fr}
  .footer__columns{grid-template-columns:repeat(3,1fr);margin-top:24px}
  .footer__col-heading{margin-top:48px}
  .footer__subscribe{width:100%;max-width:542px}
  .footer__subscribe-input{width:100%}
  .footer__copyright{position:static;margin-top:25px}
}

@media (max-width:1340px){
  /* header — logo + 5 links + lang + the 215px CTA need ~1300px of bar; below that the
     nav prints over the CTA. Hand over to the burger here. */
  .header__nav,.header__lang,.header__cta{display:none}
  .header__hamburger{display:block;margin-left:auto;align-self:center}
  .header__mobile-menu{
    display:block;position:absolute;left:0;right:0;top:96px;z-index:99;
    background:#fff;padding:16px 25px 24px;
  }
  .header__mobile-menu[hidden]{display:none}
}

@media (max-width:1180px){
  /* the 735px photo beside a readable form stops working — stack them.
     The ratio goes on the IMG, not the wrapper: contact-image.png is 1854×2180, and an
     `img{height:100%}` inside an auto-height wrapper falls back to its intrinsic height and
     stretches the wrapper past its own aspect-ratio (the photo rendered 447 tall, not 372). */
  .contact__card{flex-direction:column}
  .contact__image{width:100%;height:auto;aspect-ratio:auto;overflow:hidden}
  .contact__image img{height:auto;aspect-ratio:380 / 372;border-radius:20px 20px 0 0}
  .contact__form{padding:22px 22px 30px}
  .contact__submit{align-self:stretch;width:100%;max-width:338px}
}

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

  /* header — 309:3242 logo 168×42 at (25,13); 309:3243 burger 23×14 at (380,31) */
  .header{height:63px}
  .header__logo{margin-top:13px}
  .header__logo img{width:168px;height:42px}
  .header__hamburger{display:block;margin-left:auto;margin-top:31px;align-self:flex-start;width:23px;height:14px}
  .header__mobile-menu{top:63px}

  /* card 309:3289 — 380×1013 at y 75 */
  .contact{padding-top:12px}
  .contact__card{max-width:100%;border-radius:20px}
  .contact__image{width:100%;aspect-ratio:380 / 372}
  .contact__form{padding:22px 20px 20px 22px}
  .contact__heading{font-size:25px;line-height:28.75px}
  .contact__label[for="name"]{margin-top:12px}
  .contact__submit{align-self:stretch;width:100%;max-width:none;margin-top:20px}

  /* footer 309:3247 — 429×751 at y 1111; each list runs two columns */
  .footer{margin-top:23px}
  .footer__inner{height:auto;padding:19px 25px 29px}
  .footer__top{grid-template-columns:1fr}
  .footer__logo{width:197px;height:49px;margin-top:0}
  .footer__heading{margin-top:18.5px}
  .footer__subscribe{margin-top:22px;width:100%;max-width:380px;height:70px}
  /* right padding clears the 122px Enviar button so the placeholder truncates
     instead of running underneath it */
  .footer__subscribe-input{width:100%;height:70px;padding:0 145px 0 26px}
  .footer__subscribe-btn{right:11px;top:7px;width:122px;height:48px}
  .footer__social{margin-top:18.5px}
  /* 309:3256 / 3264 / 3282 — each section keeps its heading and runs its links in two
     columns; the sections stack with a 19px gap (29.5 above the first, under the socials). */
  .footer__columns{grid-template-columns:1fr;margin-top:0}
  .footer__col-heading{margin-top:19px}
  .footer__col:first-child .footer__col-heading{margin-top:29.5px}
  /* row-gap, not li margins: in a 2-column grid the last DOM item is not the last ROW, so a
     `li:last-child{margin-bottom:0}` still left a trailing 13px under every list. */
  .footer__col ul{display:grid;grid-template-columns:1fr 1fr;column-gap:10px;row-gap:13px}
  .footer__col li{margin-bottom:0}
  .footer__copyright{margin-top:23px;text-align:left;font-size:14px;line-height:1.4}
}

@media (max-width:400px){
  /* Below the 430 frame there is no authored design, but there must still be no horizontal
     scroll. The two-column link lists are the frame's own layout AT 430 — collapsing them at
     460 (as an earlier pass did) turned every list into six rows and pushed the footer 233px
     past its band. Only go single-column once 430 itself is undercut. */
  .footer__col ul{grid-template-columns:1fr}
  .footer__subscribe-input{padding-right:135px}
}

@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 -------------------------------------------------------- */
@media (hover:hover) and (min-width:901px){
  .btn--primary{transition:background-color .2s ease}
  .btn--primary:hover{background-color:#3b6f9c}
}

/* ==========================================================================
   CONTACT FORM 7
   The form is CF7's now, but the design is still the demo's. CF7 adds two
   wrappers the transcribed rules above never expected: <div class="wpcf7">
   around the form, and a <span class="wpcf7-form-control-wrap"> around every
   control. Both are taken out of the box tree with display:contents, so the
   labels, inputs and submit stay direct flex items of .contact__form form and
   every margin above lands on the element it was measured against.
   The one rule that cannot survive that is the adjacent-sibling selector — the
   span sits between the label and the input in the DOM whatever its display —
   so it is restated through the wrapper.
   ========================================================================== */
.contact__form .wpcf7,
.contact__form .wpcf7-form-control-wrap{display:contents}

/* CF7 opens the form with a fieldset of hidden inputs; as a flex item it would
   still contribute the browser default border and padding. */
.contact__form .hidden-fields-container{display:none}

.contact__label[for="email"]+.wpcf7-form-control-wrap>.contact__input{margin-top:16px}

.contact__form .wpcf7-spinner{align-self:flex-end;margin:8px 0 0}

.contact__form .wpcf7-not-valid-tip{
  margin-top:6px;
  font-size:14px;font-weight:300;line-height:18px;color:#b91c1c;
}

/* Stands in for the old ?sent= / ?error= notice, matching the field styling. */
.contact__form .wpcf7-response-output{
  margin:20px 0 0;padding:12px 20px;border:0;border-radius:14.95px;
  background-color:var(--input-bg);
  font-size:15px;font-weight:300;line-height:20px;color:var(--azul-oscuro);
}