/* Buttons: flat, square, one fill each */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  min-height: var(--btn-h); padding: 0.85rem 1.5rem;
  border: 0; border-radius: 0;
  font-family: var(--font-text); font-size: 1rem; font-weight: 600; line-height: 1.2;
  text-decoration: none; cursor: pointer;
  transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease, color var(--t-hover) ease;
}
.btn:active { transform: scale(0.97); }
.btn--primary { background: var(--yellow); color: var(--on-accent); }
.btn--wa { background: var(--whatsapp); color: var(--white); }
.btn--ghost { background: var(--field); color: var(--ink); }
.btn--dark { background: var(--bg); color: var(--ink); }
/* Press states, also on phones where hover never fires */
.btn--primary:active { background: var(--yellow-hover); }
.btn--wa:active { background: var(--whatsapp-hover); }
.btn--ghost:active { background: var(--field-press); }
.btn--dark:active { background: var(--field); }
/* Links that answer a press in gold. Each is named: a catch-all on unclassed links would tie in specificity with
   .social a:active and the buttons inside .article, and the winner would depend on the order of the file. */
.arrow-link:active, .nav__list a:not(.btn):active, .footer-contact a:active, .contact-facts a:active,
.faq-item a:active, .form-note a:active, .form-status a:active, .back:active,
.site-footer__grid p a:active, .article a:not([class]):active { color: var(--gold); text-decoration-color: currentColor; }
.logo:active { opacity: 0.75; }
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { background: var(--yellow-hover); }
  .btn--wa:hover { background: var(--whatsapp-hover); }
  .btn--ghost:hover { background: var(--surface); }
  .btn--dark:hover { background: var(--field); }
}

/* Text link with an arrow that moves under the pointer */
.arrow-link {
  display: inline-flex; align-items: center; gap: 0.5rem;
  min-height: var(--hit);
  font-weight: 600; text-decoration: underline; text-decoration-color: transparent;
  transition: text-decoration-color var(--t-hover) ease;
}
.arrow-link::after { content: "→" / ""; transition: transform var(--t-hover) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .arrow-link:hover { text-decoration-color: currentColor; }
  .arrow-link:hover::after { transform: translateX(0.3em); }
}

/* Back link of the project pages, the article and the privacy notice */
.back { display: inline-flex; align-items: center; min-height: var(--hit); margin-bottom: 1.5rem; color: var(--muted); text-decoration: underline; text-decoration-color: transparent; transition: color var(--t-hover) ease, text-decoration-color var(--t-hover) ease; }
@media (hover: hover) and (pointer: fine) { .back:hover { color: var(--ink); text-decoration-color: var(--gold); } }

/* The standalone text links are 44 px boxes around one line of text. The text keeps its place: the extra height is
   taken back from the margins, so the hit area grows into the space around the link and nothing moves. 1lh is the
   link's own line height; min() stops a large text size from turning the trim into extra space. Browsers without lh
   (before iOS 16.4) keep the plain margins, because a margin that holds var() never falls back to an earlier rule. */
@supports (height: 1lh) {
  .arrow-link, .site-footer__grid p a { margin-block: min(0px, calc((1lh - var(--hit)) / 2)); }
  .back { margin-block: min(0px, calc((1lh - var(--hit)) / 2)) calc(1.5rem + min(0px, calc((1lh - var(--hit)) / 2))); }
}

/* Header: a plain bar on the page ground */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--bg); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: var(--header-h); }
.logo { display: inline-flex; align-items: center; gap: 0.75rem; min-height: var(--hit); text-decoration: none; color: var(--gold); }
.logo img { width: auto; height: 2.25rem; }
.logo__word { font-family: var(--font-display); font-size: var(--step-lead); font-weight: 600; letter-spacing: 0.14em; line-height: 1; }
.nav { display: flex; align-items: center; gap: 2rem; }
.nav__list { display: flex; gap: 1.75rem; margin: 0; padding: 0; list-style: none; }
.nav__list a:not(.btn) {
  font-size: 1rem; text-decoration: underline; text-decoration-color: transparent;
  transition: text-decoration-color var(--t-hover) ease, color var(--t-hover) ease;
}
@media (hover: hover) and (pointer: fine) {
  .nav__list a:not(.btn):hover { text-decoration-color: var(--gold); color: var(--white); }
}
@media (min-width: 768px) { .nav__list a:not(.btn) { display: flex; align-items: center; min-height: var(--hit); } }
.nav .btn { min-height: var(--hit); padding: 0.6rem 1.1rem; }
.nav__wa { position: relative; white-space: nowrap; }
.nav__toggle, .nav__call-item { display: none; }
/* Tablets: the WhatsApp icon and label need a little room, so the gaps tighten until 900 px */
@media (min-width: 768px) and (max-width: 899px) {
  .nav { gap: 1.5rem; }
  .nav__list { gap: 1.25rem; }
}

@media (max-width: 767px) {
  .logo img { height: 1.9rem; }
  .logo__word { font-size: 1.3rem; }
  .nav { gap: 0.5rem; }
  /* One WhatsApp link at every width: on phones it shrinks to its icon and the label stays its name */
  .nav .nav__wa { width: var(--hit-phone); min-height: var(--hit-phone); padding: 0; }
  .nav__wa .icon { width: 1.5rem; height: 1.5rem; }
  .nav__wa-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

  .nav--js .nav__toggle {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: var(--nav-toggle-w); height: var(--hit-phone); padding: 0 0.75rem; border: 0; border-radius: 0;
    background: var(--field); color: var(--ink); font: inherit; font-weight: 600; cursor: pointer;
    transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease;
  }
  .nav--js .nav__toggle:active { background: var(--field-press); transform: scale(0.97); }
  .nav--js .nav__wa { order: -1; }

  /* The menu is a panel one tone above the page. It grows from the Menú button (top right) and leaves
     the same way (menu.js toggles .is-open); the page behind dims under a flat scrim and stays put. */
  .nav--js .nav__list {
    position: absolute; inset: var(--header-h) 0 auto 0; z-index: 2; flex-direction: column; gap: 0;
    max-height: calc(100vh - var(--header-h)); overflow-y: auto; overscroll-behavior: contain;
    background: var(--surface);
    visibility: hidden; opacity: 0; transform: scale(0.94); transform-origin: calc(100% - var(--margin) - var(--nav-toggle-w) / 2) 0;
  }
  /* The transitions exist only once menu.js has put the closed panel in place and added .menu-ready to <html>,
     so the panel never fades out from the page's own state at load */
  .menu-ready .nav__list { transition: opacity var(--t-ui) var(--ease-out), transform var(--t-ui) var(--ease-out), visibility 0s linear var(--t-ui); }
  .nav--js .nav__list.is-open { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
  .nav--js .nav__list a:not(.btn) { display: block; padding: 0.9rem var(--margin); font-family: var(--font-display); font-size: 1.75rem; font-weight: 600; text-transform: uppercase; }
  .nav--js .nav__call-item { display: block; padding: 0.75rem var(--margin) var(--margin); }
  .nav--js .nav__call { display: flex; width: 100%; min-height: var(--btn-h); }
  /* dvh follows the browser bars on phones; var() in the line above would not fall back, so it waits for support */
  @supports (height: 1dvh) { .nav--js .nav__list { max-height: calc(100dvh - var(--header-h)); } }

  .site-header::after {
    content: ""; position: fixed; inset: var(--header-h) 0 0 0; z-index: 1; pointer-events: none;
    background: var(--scrim);
    visibility: hidden; opacity: 0;
  }
  .menu-ready .site-header::after { transition: opacity var(--t-ui) var(--ease-out), visibility 0s linear var(--t-ui); }
  .menu-open .site-header::after { visibility: visible; opacity: 1; pointer-events: auto; transition-delay: 0s; }
  /* menu.js sets this on <html> while the menu is open; the page keeps its place and its scrollbar gutter */
  html.menu-open { overflow: hidden; scrollbar-gutter: stable; }
}
/* 320 px: logo, WhatsApp and Menú still share one row, with a smaller wordmark */
@media (max-width: 359px) {
  .site-header__inner { gap: 0.5rem; }
  .logo { gap: 0.6rem; }
  .logo__word { font-size: 1.1rem; letter-spacing: 0.12em; }
}

/* Hero: the render fills the first screen and the headline sits on it, over a neutral scrim */
.hero { display: grid; overflow: hidden; }
.hero > .hero__top, .hero > .hero__media { grid-area: 1 / 1; }
.hero__top.wrap {
  display: grid; align-self: end; justify-self: start; z-index: 2;
  width: calc(100% - 2 * var(--margin)); max-width: none; margin: 0 0 0 var(--margin); gap: 1.25rem;
  padding: 1.5rem 0 calc(1.5rem + 20px);
}
.hero__trazo { order: -1; width: 7rem; }
.hero .lead { margin: 0; color: var(--ink); }
/* The wrapped row gap keeps the WhatsApp button and the 44 px Ver proyectos box about 11 px apart */
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 1.75rem; margin-top: 1.5rem; }
.trazo { width: 100%; fill: none; stroke: var(--gold); stroke-width: 5; stroke-linejoin: miter; }
/* The render always covers the hero, even when the headline is taller than the screen */
.hero__media { position: relative; overflow: hidden; min-height: calc(100vh - var(--header-h)); }
@supports (height: 1svh) { .hero__media { min-height: calc(100svh - var(--header-h)); } } /* svh: the screen with the browser bars shown */
.hero__media picture, .hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0) 85%); } /* taste-skill-ignore: neutral scrim under the headline on a photo */
@media (min-width: 768px) {
  .hero__top.wrap { gap: 1.75rem; padding: clamp(1.75rem, 1rem + 2vw, 3rem) 0 calc(clamp(1.75rem, 1rem + 2vw, 3rem) + 20px); }
  .hero__top .display { line-height: 1.02; } /* open leading, so the Ñ clears the line above */
  .hero__trazo { width: 11rem; }
  .hero__media::after { background: linear-gradient(to top, rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0) 78%), linear-gradient(to right, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0) 70%); } /* taste-skill-ignore: neutral scrim under the headline on a photo */
}
/* The headline is as large as the screen allows: "NUESTRO DISEÑO." stays on one line (width cap) and the WhatsApp
   button stays in the first screen (height cap), with a floor so a short window never draws it tiny. Tablets: 52 px
   up to 224 px. PC (Jose, 2026-10-27): the same caps, 20 px smaller, so the render shows more around the headline,
   kept between 84 px (short laptop windows would otherwise shrink it below the section headings) and 204 px.
   Without svh (before iOS 15.4) var() could not fall back, so the headline keeps the .display size from base.css. */
@supports (height: 1svh) {
  @media (min-width: 768px) {
    .hero__top .display {
      --hero-size: min(14rem, calc((100vw - 2 * var(--margin)) / 7.4), calc((100svh - var(--header-h) - 26rem) / 2.04));
      font-size: clamp(3.25rem, var(--hero-size), 14rem);
    }
  }
  @media (min-width: 1024px) {
    .hero__top .display { font-size: clamp(5.25rem, calc(var(--hero-size) - 1.25rem), 12.75rem); }
  }
}
/* Short screens (a laptop window with its bars, a phone held sideways): the headline sits at its floor, so the fixed
   parts of the copy block give way, not the headline, the lead or the button. The hero WhatsApp button stays in the
   first screen down to about 510 px of height; on phones held sideways (about 390-430 px) it is still cut off, and the
   header's WhatsApp button is the one in view. Taller windows keep the full drawing and spacing. */
@media (min-width: 768px) and (max-height: 599px) {
  .hero__trazo { width: 7rem; }
  .hero__top.wrap { gap: 1.25rem; padding-block: 1.25rem calc(1.25rem + 20px); }
  .hero__actions { margin-top: 0.75rem; }
}

/* Footer: the name closes the page */
.site-footer { margin-top: var(--section-gap); padding-block: clamp(3.5rem, 2rem + 4vw, 6rem) 2rem; background: var(--surface); overflow: hidden; }
.site-footer__grid { display: grid; gap: 2.5rem; }
@media (min-width: 900px) { .site-footer__grid { grid-template-columns: 5fr 4fr 3fr; } }
.site-footer__lead { font-size: var(--step-lead); line-height: 1.35; max-width: 26ch; }
.footer-contact { display: grid; margin: 0; padding: 0; list-style: none; } /* rows are 44 px targets, so they need no gap between them */
.footer-contact a { display: flex; width: fit-content; align-items: center; gap: 0.6rem; min-height: var(--hit); text-decoration: underline; text-decoration-color: transparent; transition: text-decoration-color var(--t-hover) ease; overflow-wrap: anywhere; }
.footer-contact .icon { color: var(--gold); }
@media (hover: hover) and (pointer: fine) { .footer-contact a:hover { text-decoration-color: var(--gold); } }
/* The privacy-notice line is its own 44 px target; the text stays where it was */
.site-footer__grid p a { display: inline-flex; align-items: center; min-height: var(--hit); }
.social { display: flex; gap: 0.5rem; margin: 0 0 1.5rem; padding: 0; list-style: none; }
.social a {
  display: grid; place-items: center; width: var(--btn-h); height: var(--btn-h);
  background: var(--field); color: var(--ink);
  transition: background-color var(--t-hover) ease, color var(--t-hover) ease, transform var(--t-press) var(--ease-out);
}
/* The press answers in colour (the hover colours), so it still answers when reduced motion removes the scale */
.social a:active { background: var(--gold); color: var(--on-accent); transform: scale(0.94); }
.social a.social__wa:active { background: var(--whatsapp); color: var(--white); }
.social .icon { width: 1.4rem; height: 1.4rem; }
@media (hover: hover) and (pointer: fine) {
  .social a:hover { background: var(--gold); color: var(--on-accent); }
  .social a.social__wa:hover { background: var(--whatsapp); color: var(--white); }
}
.site-footer__name {
  margin: clamp(3rem, 2rem + 4vw, 6rem) 0 0; max-width: none;
  font-family: var(--font-display); font-weight: 600; font-size: 24.5vw; line-height: 0.78;
  letter-spacing: 0.02em; color: var(--gold); text-align: center; user-select: none;
}
/* The legal line stands apart from the name */
.site-footer small { display: block; margin-top: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); color: var(--muted); font-size: var(--step-small); }