:root {
  /* Color */
  --black:      #000000;
  --white:      #FFFFFF;
  --warm-50:    #707070; /* ~4.95:1 on white — passes WCAG AA (4.5:1) */
  --warm-20:    #D8D9DA;
  --warm-10:    #EDEDEE;
  --border:     rgba(155,156,158,0.22);
  --border-mid: rgba(155,156,158,0.45);
  --brand:      #25D366;

  /* Typography */
  --font-primary: 'Barlow', 'Helvetica Neue', Arial, sans-serif;
  --fw-light:     300;
  --fw-normal:    400;
  --fw-medium:    500;
  --fw-bold:      700;
  --text-2xs:     0.75rem;  /* 12px — floor for labels/tags */
  --text-xs:      0.8125rem;/* 13px */
  --text-sm:      0.875rem; /* 14px — buttons/nav */
  --text-base:    1rem;     /* 16px — WCAG min for body */
  --text-md:      1.0625rem;/* 17px */
  --text-lg:      1.125rem; /* 18px */
  --text-xl:      1.25rem;  /* 20px */
  --text-2xl:     1.5rem;   /* 24px */
  --text-3xl:     1.75rem;  /* 28px */
  --text-hero:    min(clamp(2.6rem, 6.5vw, 5rem), 10.5vh);
  --text-hero-sm: 2.6rem;
  --text-section: clamp(1.8rem, 3.5vw, 2.8rem);

  /* Letter-spacing (uppercase labels/buttons) */
  --ls-tight: 0.1em;
  --ls-caps:  0.16em;
  --ls-wide:  0.22em;

  /* Layout */
  --nav-h:      80px;
  --gutter:     150px;
  --gutter-md:  48px;
  --gutter-sm:  40px;

  /* Hero background — grid + logo reveal
     At REF_WIDTH the spacing equals BASE_SPACING; the JS scales the
     spacing proportionally to the viewport width:
       spacing = BASE_SPACING * (viewportWidth / REF_WIDTH) */
  --grid-ref-width: 1400px;
  --grid-base-spacing: 120px;

  /* Line draw + logo segment reveal timing */
  --line-draw-duration: 7s;
  --symbol-reveal-duration: 1.5s;
  --symbol-delay-2: 0.5s;
  --symbol-delay-3: 1s;
  --symbol-reveal-end: calc(var(--symbol-delay-3) + var(--symbol-reveal-duration) - 1s);
  /* --symbol-pulse-duration: 0.6s;
  --symbol-pulse-scale: 1.2; */

  /* Horizontal bounds of the VISIBLE logo within its image box. The brand
     PNG (assets/hero-symbol.png, 2000x1125) has wide transparent margins:
     the opaque glyphs span only ~37.15%–62.85% of the image width, so the
     reveal strips are measured against the visible content band, not the
     padded image box. Re-measure if the logo asset ever changes. */
  --logo-b0: 37.15%;
  --logo-b1: 45.7167%;
  --logo-b2: 54.2833%;
  --logo-b3: 62.85%;

  /* Breakpoints — custom properties can't be used inside @media queries,
     so these are documented here and hardcoded in the queries below:
     xxs 375px · xs 390px · sm 540px · md 640px · lg 900px · xl 1024px
     NOTE: sm's cap was extended 480→540 so the compact phone styling also
     covers the Surface Duo single screen (540×720) and similar foldables,
     which otherwise fell into the md band and overflowed.
     NOTE: queries use fractional caps to catch sub-pixel viewport widths
     (devicePixelRatio rounding / zoom can report e.g. 375.5px, which an
     integer `max-width: 375px` misses). Convention: `max-width: N.98px`,
     and where a `min-width` seam-partner exists it tightens to `(N).99px`
     (376→375.99, 641→640.99, 1025→1024.99) — a 0.01px gap, no overlap.
     Lone top-end mins (1200/1500) keep integer values (no seam to close). */
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-h);
}

body {
  font-family: var(--font-primary);
  font-weight: var(--fw-normal);
  background: var(--white);
  color: var(--black);
  overflow-x: hidden;
  /* Keep the arrow cursor over text instead of the I-beam. */
  cursor: default;
}

/* CURSOR */
.cursor {
  width: 6px; height: 6px;
  background: var(--black);
  border-radius: 50%;
  position: fixed; top: 0; left: 0;
  pointer-events: none; z-index: 9999;
}
.cursor-ring {
  width: 28px; height: 28px;
  border: 1px solid rgba(0,0,0,0.3);
  border-radius: 50%;
  position: fixed; top: 0; left: 0;
  pointer-events: none; z-index: 9998;
  transition: all 0.3s cubic-bezier(0.25,0.46,0.45,0.94);
}
.cursor-ring.hovered { transform: scale(2.2); border-color: var(--black); }

/* NAV */
#navbar {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 16px var(--gutter);
  display: flex; align-items: center; justify-content: space-between;
  transition: all 0.4s ease;
  /* Transparency effect commented out — navbar is always white */
  /* background: rgba(255,255,255,0); */
  background: var(--white);
  /* Border visible from the start (previously only after scrolling) */
  border-bottom: 3px solid var(--border);
}
#navbar.scrolled {
  background: var(--white);
  /* backdrop-filter: blur(20px); */
  /* Navbar shrink-on-scroll disabled — keep base padding. */
  /* padding: 12px var(--gutter); */
  /* border-bottom: 2px solid var(--border); — moved to base nav so it shows from the start */
}
.nav-logo {
  display: flex; align-items: center; gap: 14px;
  text-decoration: none;
}
.nav-logo img {
  height: 46px; width: auto; display: block;
}
.nav-logo-name {
  font-size: var(--text-sm); font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide); text-transform: uppercase;
  color: var(--warm-50); white-space: nowrap;
  padding-left: 14px; border-left: 1px solid var(--border);
}
@media (max-width: 540.98px) {
  .nav-logo-name {
    font-size: var(--text-2xs); letter-spacing: var(--ls-caps);
    padding-left: 10px; gap: 10px;
  }
  .nav-logo { gap: 10px; }
}
.nav-links {
  display: flex; align-items: center; gap: 24px;
  list-style: none;
  margin-left: auto;
}
.nav-links a {
  font-size: var(--text-sm); font-weight: var(--fw-normal);
  letter-spacing: var(--ls-caps); text-transform: uppercase;
  color: var(--warm-50); text-decoration: none;
  transition: color 0.3s;
}
.nav-links a:hover { color: var(--black); }
.nav-cta {
  background: var(--black) !important;
  border: 1px solid var(--black) !important;
  color: var(--white) !important;
  padding: 8px 22px;
  transition: all 0.3s !important;
}
.nav-cta:hover {
  background: var(--white) !important;
  color: var(--black) !important;
}

/* SELECTOR DE IDIOMA */
.lang-switcher {
  display: flex; align-items: center;
  /* gap: 4px; */
  margin-left: 24px;
}
.lang-btn {
  font-family: inherit; font-size: var(--text-xs); font-weight: var(--fw-medium);
  letter-spacing: var(--ls-tight); color: var(--warm-50);
  background: none; border: none; cursor: pointer;
  padding: 4px 6px; transition: color 0.3s;
}
.lang-btn:hover { color: var(--black); }
.lang-btn.active { color: var(--black); font-weight: var(--fw-bold); }
/* Real-link language switcher (multi-page subpages use <a>, not <button>) */
a.lang-btn { text-decoration: none; display: inline-block; }
@media (max-width: 1024.98px) {
  .lang-switcher { display: none; }
}

/* NAV ACTIONS (idioma expandible + hamburguesa) */
.nav-actions {
  display: flex; align-items: center; gap: 6px;
}
.nav-actions .nav-hamburger { position: relative; z-index: 101; }
.nav-actions .lang-menu { z-index: 210; }

/* SELECTOR DE IDIOMA EXPANDIBLE (móvil / tablet) */
.lang-menu {
  position: relative;
  display: none;
  align-items: center;
}
.nav-lang-toggle {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0;
  background: none; border: 1px solid transparent;
  color: var(--black); /* cursor: none; */
  transition: border-color 0.3s;
}
.nav-lang-toggle svg { width: 24px; height: 24px; }
.nav-lang-toggle:hover { border-color: var(--border-mid); }
.lang-dropdown {
  display: none;
  position: absolute; top: calc(100% + 12px); right: 0;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--border);
  box-shadow: 0 18px 40px rgba(0,0,0,0.08);
  min-width: 110px;
}
.lang-dropdown.open { display: flex; }
.lang-dropdown .lang-btn {
  padding: 11px 18px;
  font-size: var(--text-xs);
  letter-spacing: var(--ls-caps); text-transform: uppercase;
  text-align: left;
}
.lang-dropdown .lang-btn:hover { color: var(--black); background: var(--warm-10); }
.lang-dropdown .lang-btn.active { color: var(--black); font-weight: var(--fw-bold); }
@media (max-width: 1024.98px) {
  .lang-menu { display: flex; }
}

/* HERO */
#hero {
  min-height: 100svh;
  display: flex; align-items: stretch;
  position: relative; overflow: hidden;
  padding: clamp(48px, 8vh, 72px) var(--gutter) clamp(40px, 6vh, 64px);
  border-bottom: 1px solid var(--border);
  background: var(--white);
}
.hero-grid {
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.hero-symbol {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -58%);
  /* Proportional at every width — no px cap, so the backdrop scales with the
     viewport on large screens (was max-width:1200px). Mobile keeps its own
     larger vw override below. */
  width: 85vw;
  opacity: 0.15;
  pointer-events: none;
  user-select: none;
  /* animation: logoPulse var(--symbol-pulse-duration) ease-in-out var(--symbol-reveal-end) 1 forwards; */
}
.hero-symbol img { display: block; width: 100%; }

/* Keep the centring translate in every keyframe so the pulse only scales. */
/* @keyframes logoPulse {
  0%, 100% { transform: translate(-50%, -58%) scale(1); }
  50%      { transform: translate(-50%, -58%) scale(var(--symbol-pulse-scale)); }
} */

/* The logo is duplicated three times, each copy living in one of three
   equally-spaced vertical clipping regions that together cover the full
   logo; each region is revealed in place (no sliding), one after the other,
   with alternating wipe directions. */
.hero-symbol .seg-2,
.hero-symbol .seg-3 {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}
.hero-symbol .seg-2 img,
.hero-symbol .seg-3 img {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}

/* Vertical clipping regions: three equal strips across the VISIBLE logo
   content (see --logo-b* above). */
.hero-symbol .seg-1 { clip-path: inset(0 calc(100% - var(--logo-b1)) 0 var(--logo-b0)); } /* left third   */
.hero-symbol .seg-2 { clip-path: inset(0 calc(100% - var(--logo-b2)) 0 var(--logo-b1)); } /* middle third */
.hero-symbol .seg-3 { clip-path: inset(0 calc(100% - var(--logo-b3)) 0 var(--logo-b2)); } /* right third  */

/* In-place wipe: each copy stays centred and is masked progressively.
   seg-1 and seg-3 wipe top -> bottom, seg-2 wipes bottom -> top. */
.hero-symbol .seg-1 img,
.hero-symbol .seg-3 img {
  clip-path: inset(0 0 100% 0);
  animation: wipeTopDown var(--symbol-reveal-duration) cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.hero-symbol .seg-2 img {
  clip-path: inset(100% 0 0 0);
  animation: wipeBottomUp var(--symbol-reveal-duration) cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Sequential: each region starts only after the previous one finished */
.hero-symbol .seg-1 img { animation-delay: 0s; }
.hero-symbol .seg-2 img { animation-delay: var(--symbol-delay-2); }
.hero-symbol .seg-3 img { animation-delay: var(--symbol-delay-3); }

@keyframes wipeTopDown {
  from { clip-path: inset(0 0 100% 0); }
  to   { clip-path: inset(0 0 0 0); }
}
@keyframes wipeBottomUp {
  from { clip-path: inset(100% 0 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

/* Grid lines — injected into .hero-grid by JS */
.line {
  position: absolute;
  background: var(--border);
  will-change: transform;
}
.line.h { left: 0; width: 100%; height: 1px; }
.line.v { top: 0; width: 1px; height: 100%; }
.line.dyn.h { transform: scaleX(0); }
.line.dyn.v { transform: scaleY(0); }
.line.dyn.h.lr { transform-origin: left center; }
.line.dyn.h.rl { transform-origin: right center; }
.line.dyn.v.tb { transform-origin: center top; }
.line.dyn.v.bt { transform-origin: center bottom; }
.line.dyn.h.play { animation: drawX var(--line-draw-duration) cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.line.dyn.v.play { animation: drawY var(--line-draw-duration) cubic-bezier(0.22, 1, 0.36, 1) forwards; }
@keyframes drawX { to { transform: scaleX(1); } }
@keyframes drawY { to { transform: scaleY(1); } }

/* Respect reduced-motion: show every line immediately, no animation */
@media (prefers-reduced-motion: reduce) {
  .line.dyn.h { transform: scaleX(1); }
  .line.dyn.v { transform: scaleY(1); }
  .line.dyn.h.play,
  .line.dyn.v.play { animation: none; }
  .hero-symbol .seg-1 img,
  .hero-symbol .seg-2 img,
  .hero-symbol .seg-3 img { clip-path: inset(0); animation: none; }
  .hero-symbol { animation: none; }
}

.hero-wrap {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex; flex-direction: column;
  /* padding-left: clamp(76px, 11vh, 120px)
  padding-right: clamp(76px, 11vh, 120px) */
}

.hero-content {
  position: relative; z-index: 2;
  width: 100%;
  flex: 1;
  display: flex; align-items: center; justify-content: space-between;
  gap: 40px;
  /* padding: clamp(96px, 13vh, 150px) 0; */
  padding-top: clamp(96px, 13vh, 150px);
  padding-bottom: clamp(48px, 6.5vh, 75px);
}
.hero-left { max-width: 720px; }
@media (min-width: 1024.99px) {
  .hero-left { margin-top: -36px; margin-bottom: 48px; }
}

.hero-eyebrow {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 36px;
  opacity: 0; animation: fadeUp 0.8s 0.2s ease forwards;
}
.hero-eyebrow-line { width: 32px; height: 1px; background: var(--warm-50); }
.hero-eyebrow span {
  font-size: var(--text-xs); font-weight: var(--fw-normal);
  letter-spacing: var(--ls-wide); text-transform: uppercase;
  color: var(--warm-50);
}

.hero-title {
  font-size: var(--text-hero);
  font-weight: var(--fw-light); line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--black);
  margin-bottom: clamp(18px, 3.5vh, 32px);
  opacity: 0; animation: fadeUp 0.8s 0.35s ease forwards;
}
.hero-title .outline {
  -webkit-text-stroke: 1px var(--black);
  color: transparent;
}

.hero-kicker {
  font-size: var(--text-xs); font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide); text-transform: uppercase;
  color: var(--black); margin-bottom: 12px;
}
.hero-desc {
  font-size: var(--text-lg); font-weight: var(--fw-light); line-height: 1.2;
  color: var(--warm-50);
  max-width: 560px;
  opacity: 0; animation: fadeUp 0.8s 0.5s ease forwards;
}

.hero-right {
  display: flex; flex-direction: column; align-items: flex-end; gap: 40px;
  opacity: 0; animation: fadeIn 1s 0.9s ease forwards;
  flex-shrink: 0;
}
.hero-actions {
  display: flex; flex-direction: column; align-items: flex-end; gap: 14px;
}

/* STATS */
.hero-stats {
  position: absolute; bottom: 0; left: 0; right: 0;
  display: flex; gap: 60px;
    padding-top: clamp(16px, 3vh, 28px);
    /* padding-bottom: clamp(16px, 3vh, 28px); */
  /* padding: clamp(16px, 3vh, 28px) 0; */
  /* border-top: 1px solid var(--border); */
  opacity: 0; animation: fadeIn 1s 1s ease forwards;
  z-index: 2;
}
.stat-num {
  font-size: var(--text-2xl); font-weight: var(--fw-light);
  letter-spacing: -0.02em; color: var(--black); line-height: 1;
}
.stat-trust-title {
  font-size: var(--text-lg); font-weight: var(--fw-medium);
  letter-spacing: 0.01em; color: var(--black); line-height: 1.2;
  margin-bottom: 4px;
}
.stat-label {
  font-size: var(--text-2xs); font-weight: var(--fw-normal);
  letter-spacing: var(--ls-caps); text-transform: uppercase;
  color: var(--warm-50); margin-top: 6px;
}

/* BUTTONS */
.btn-primary {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--black); color: var(--white);
  font-family: inherit; font-size: var(--text-sm); font-weight: var(--fw-medium);
  letter-spacing: var(--ls-caps); text-transform: uppercase;
  text-decoration: none; padding: 14px 32px;
  border: 1px solid var(--black);
  transition: all 0.3s ease; /* cursor: none; */
}
.btn-primary:hover {
  background: transparent; color: var(--black);
}
.btn-primary svg { transition: transform 0.3s; }
.btn-primary:hover svg { transform: translateX(4px); }

.btn-secondary {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--warm-50); font-size: var(--text-sm); font-weight: var(--fw-normal);
  letter-spacing: var(--ls-caps); text-transform: uppercase;
  text-decoration: none; transition: color 0.3s; /* cursor: none; */
}
.btn-secondary:hover { color: var(--black); }

/* SECTIONS — single page, each fills the screen */
section {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 72px var(--gutter);
  border-bottom: 1px solid var(--border);
}

/* Homepage full-screen panels — the SINGLE source of truth for panel height.
   The navbar is position:fixed (height --nav-h) and html { scroll-padding-top:
   var(--nav-h) } snaps each anchored panel's top to just BELOW it. So a panel
   must be one viewport MINUS the navbar for "panel below the navbar" to equal
   exactly one screen; a full 100svh runs --nav-h too tall (its bottom edge and
   the scroll-down cue fall past the fold, and the next panel peeks in). This
   was previously only applied on the xxs and short-desktop breakpoints, so on
   standard phones/tablets/tall desktops these panels were navbar-height too
   tall — the cross-device "taller on some, fits on others" bug. Applies to
   #servicios/#proyectos/#estudio/#contacto on every homepage (ES/EN/IT/FR) at
   every breakpoint. Token-driven, so the xxs --nav-h override (77px) flows
   through automatically. #hero is exempt: it sits at scroll-top with the navbar
   floating over it, so it fills the whole viewport. Standalone pages nest their
   sections in <main> (see the `main section` reset), so this never touches
   them. */
body > section:not(#hero) { min-height: calc(100svh - var(--nav-h)); }

/* Scroll-down arrow (pattern from sample single-page site) */
.scroll-down {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  color: var(--warm-50);
  animation: scrollBounce 2.4s infinite ease-in-out;
  transition: color 200ms ease;
}
.scroll-down:hover { color: var(--black); }
@keyframes scrollBounce {
  0%,100% { transform: translateX(-50%) translateY(0); }
  50%     { transform: translateX(-50%) translateY(10px); }
}
/* Sections taller than the viewport: pin the cue to the bottom of the screen
   while the section is in view. */
section:not(#hero) .scroll-down {
  position: sticky;
  bottom: 24px;
  left: auto;
  transform: none;
  margin-top: auto;
  align-self: center;
  animation-name: scrollBounceY;
}
@keyframes scrollBounceY {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(10px); }
}

.section-label {
  display: flex; align-items: center; gap: 14px; margin-bottom: 20px;
}
.section-label-line { width: 28px; height: 1px; background: var(--warm-50); }
.section-label span {
  font-size: var(--text-2xs); font-weight: var(--fw-normal);
  letter-spacing: var(--ls-wide); text-transform: uppercase;
  color: var(--warm-50);
}
.section-title {
  font-size: var(--text-section);
  font-weight: var(--fw-light); line-height: 1.05;
  letter-spacing: -0.02em; margin-bottom: 20px;
  color: var(--black);
}

/* ABOUT */
#estudio { background: var(--white); }
.about-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 100px; align-items: start;
}
.about-body {
  font-size: var(--text-md); font-weight: var(--fw-light); line-height: 1.8;
  color: var(--warm-50); margin-bottom: 18px;
}
.about-features { margin-top: 48px; }
.about-feat {
  display: flex; align-items: flex-start; gap: 20px;
  padding: 20px 0; border-top: 1px solid var(--border);
}
.about-feat:last-child { border-bottom: 1px solid var(--border); }
.feat-num {
  font-size: var(--text-2xs); font-weight: var(--fw-medium); letter-spacing: var(--ls-caps);
  color: var(--warm-50); width: 28px; flex-shrink: 0; padding-top: 2px;
}
.feat-text strong {
  font-size: var(--text-md); font-weight: var(--fw-medium); letter-spacing: 0.04em;
  display: block; margin-bottom: 6px; color: var(--black);
}
.feat-text p {
  font-size: var(--text-base); font-weight: var(--fw-light);
  color: var(--warm-50); line-height: 1.6;
}
.about-right { display: flex; flex-direction: column; gap: 1px; background: var(--border); }
.about-card {
  background: var(--white); padding: 36px 32px;
  transition: background 0.3s;
}
.about-card:hover { background: var(--warm-10); }
.about-card-num {
  font-size: var(--text-2xs); font-weight: var(--fw-medium); letter-spacing: var(--ls-caps);
  color: var(--warm-50); margin-bottom: 14px; display: block;
}
.about-card h4 {
  font-size: var(--text-lg); font-weight: var(--fw-medium); letter-spacing: 0.03em;
  margin-bottom: 12px; color: var(--black);
}
.about-card p {
  font-size: var(--text-base); font-weight: var(--fw-light);
  color: var(--warm-50); line-height: 1.65;
}

/* SERVICIOS */
#servicios { background: var(--white); }
.services-header {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: 60px; gap: 40px;
}
.services-note {
  max-width: 280px; font-size: var(--text-base); font-weight: var(--fw-light);
  color: var(--warm-50); line-height: 1.7; text-align: right;
}
.services-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--border);
  border: 1px solid var(--border);
}
.service-card {
  background: var(--white); padding: 36px 28px;
  position: relative; transition: background 0.35s; /* cursor: none; */
}
.service-card:hover { background: var(--warm-10); }
.service-card::after {
  content: ''; position: absolute;
  bottom: 0; left: 0; width: 0; height: 1px;
  background: var(--black); transition: width 0.4s ease;
}
.service-card:hover::after { width: 100%; }
.service-number {
  font-size: var(--text-2xs); font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide); color: var(--warm-50);
  margin-bottom: 20px; display: block;
}
.service-title {
  font-size: var(--text-lg); font-weight: var(--fw-medium);
  letter-spacing: 0.02em; margin-bottom: 14px; line-height: 1.3;
  color: var(--black);
}
.service-desc {
  font-size: var(--text-base); font-weight: var(--fw-light);
  line-height: 1.7; color: var(--warm-50);
}
.service-tags {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 20px;
}
.service-tag {
  font-size: var(--text-2xs); letter-spacing: var(--ls-tight); text-transform: uppercase;
  color: var(--warm-50); border: 1px solid var(--border);
  padding: 4px 10px;
}
/* (The xxs service-title fit rule moved into the consolidated
   @media (max-width: 375.98px) block further down — see "SERVICIOS".) */

/* ══════════════════════════════════════════════════════════════
   ESTUDIO hub — 3-column grid (study-grid) + edge-lines effect
   Used by the homepage #estudio section and /estudio/. Three cards
   in a row; a hairline grid identical in look to .services-grid but
   with 3 columns instead of 4, and constrained/centred so the side
   lines have room to travel in from the viewport edges.
  ══════════════════════════════════════════════════════════════ */
.study-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1px; background: var(--border);
  border: 1px solid var(--border);
  max-width: 1120px; margin-inline: auto;
}
@media (max-width: 900.98px) { .study-grid { grid-template-columns: 1fr; max-width: none; } }

/* Header row: H1 on the left, lead pinned to the right edge + right-aligned. */
.study-head-row {
  display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,1fr);
  gap: 48px; align-items: end;
}
.study-head-row h1 {
  font-size: clamp(1.7rem, 2.6vw, 2.3rem); line-height: 1.12;
  margin-bottom: 0; max-width: 22ch;
}
.study-head-row .hub-lead {
  font-size: var(--text-base); line-height: 1.5; max-width: 52ch;
  margin-bottom: 4px; justify-self: end; text-align: right;
}
@media (max-width: 900.98px) {
  .study-head-row { grid-template-columns: 1fr; gap: 16px; align-items: start; }
  .study-head-row .hub-lead { justify-self: start; text-align: left; }
}

.study-head-row .hub-lead p { margin: 0 0 10px; }
.study-head-row .hub-lead p:last-child { margin-bottom: 0; }

/* Edge-lines overlay: one line grows in from the left toward the left
   card and one in from the right toward the right card, synced to scroll;
   the moment a line reaches its card the card flashes its hover effect for
   0.5s (handled in JS via .drop-hit). Lines stop exactly on the card edge,
   so they never overlap the card body. The middle card has no line. */
.study-overlay { position: fixed; inset: 0; pointer-events: none; z-index: 1; }
.study-line { position: absolute; background: var(--border-mid); will-change: top, left, width, height; }
.study-grid .service-card { position: relative; z-index: 2; }
.study-grid .service-card.drop-hit { background: var(--warm-10); }
.study-grid .service-card.drop-hit::after { width: 100%; }

/* PROCESO */
#proceso { background: var(--white); }
.proceso-steps {
  display: grid; grid-template-columns: repeat(5, 1fr);
  margin-top: 64px; position: relative;
}
.proceso-steps::before {
  content: ''; position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: var(--border);
}
.proceso-step { padding: 36px 20px 0; }
.step-num {
  font-size: var(--text-2xs); font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide); color: var(--warm-50);
  margin-bottom: 20px; display: block;
}
.step-title {
  font-size: var(--text-md); font-weight: var(--fw-medium);
  letter-spacing: 0.03em; margin-bottom: 12px; color: var(--black);
}
.step-desc {
  font-size: var(--text-base); font-weight: var(--fw-light);
  color: var(--warm-50); line-height: 1.65;
}

/* NORMAS */
#normas { background: var(--white); }
.normas-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1px; background: var(--border);
  border: 1px solid var(--border); margin-top: 56px;
}
.norma-card {
  background: var(--white); padding: 40px 36px;
  transition: background 0.3s;
}
.norma-card:hover { background: var(--warm-10); }
.norma-badge {
  font-size: var(--text-2xs); font-weight: var(--fw-medium);
  letter-spacing: var(--ls-caps); text-transform: uppercase;
  color: var(--warm-50); display: block; margin-bottom: 20px;
}
.norma-card h4 {
  font-size: var(--text-lg); font-weight: var(--fw-medium);
  margin-bottom: 12px; color: var(--black);
}
.norma-card p {
  font-size: var(--text-base); font-weight: var(--fw-light);
  color: var(--warm-50); line-height: 1.65;
}

/* CONTACTO */
/* Height comes from the global `body > section:not(#hero)` rule. */
#contacto { background: var(--white); border-bottom: none; position: relative; align-items: center; }

/* Static brand-logo backdrop — the hero symbol at rest (no wipe/pulse),
   sitting faintly behind the contact content. Reused on /contacto/. */
.contacto-bg {
  position: absolute; inset: 0;
  overflow: hidden; pointer-events: none;
  z-index: 0;
}
.section-symbol {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -52%);
  /* Proportional at every width — no px cap (was max-width:1040px). */
  width: 72vw;
  opacity: 0.06;
  user-select: none; -webkit-user-drag: none;
}
.contacto-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 100px; align-items: start;
}
.contacto-left > p {
  font-size: var(--text-md); font-weight: var(--fw-light);
  color: var(--warm-50); line-height: 1.75; margin-bottom: 20px;
}
.contact-microcopy {
  font-size: var(--text-sm) !important; font-weight: var(--fw-medium) !important;
  letter-spacing: 0.04em; color: var(--black) !important;
  margin-bottom: 40px !important;
}
.whatsapp-btn {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 32px;
  background: var(--brand); color: var(--white);
  font-family: inherit; font-size: var(--text-sm); font-weight: var(--fw-medium);
  letter-spacing: var(--ls-tight); text-transform: uppercase;
  text-decoration: none; padding: 14px 28px;
  border: 1px solid var(--brand);
  transition: all 0.3s ease; /* cursor: none; */
}
.whatsapp-btn:hover { background: transparent; color: var(--brand); }
.whatsapp-btn svg { flex-shrink: 0; }

/* Mobile contact CTA — "or" divider + secondary button that opens the contact
   form full-screen. All three are desktop-hidden (the form shows inline there);
   the ≤md rules below reveal them. Same shape as .whatsapp-btn, inverted colours. */
.contact-or { display: none; }
.contact-form-btn {
  display: none; align-items: center; justify-content: center; gap: 10px;
  background: var(--black); color: var(--white);
  font-family: inherit; font-size: var(--text-sm); font-weight: var(--fw-medium);
  letter-spacing: var(--ls-tight); text-transform: uppercase;
  text-decoration: none; padding: 14px 28px; border: 1px solid var(--black);
  cursor: pointer; transition: all 0.3s ease;
}
.contact-form-btn:hover { background: transparent; color: var(--black); }
.contact-form-btn svg { flex-shrink: 0; }
.contact-form-close { display: none; }

@media (max-width: 768.98px) {
  /* contact_desc: tighter line-height + spacing */
  #contacto .contacto-left > p:first-of-type { line-height: 1.4; margin-bottom: 10px; }
  /* microcopy: margin-bottom −50% (was 40px) */
  #contacto .contact-microcopy { margin-bottom: 20px !important; }
  /* contact-item: vertical padding −50% (was 20px) */
  #contacto .contact-item { padding: 10px 0; }
  /* WhatsApp button centred */
  #contacto .whatsapp-btn { display: flex; width: fit-content; margin-left: auto; margin-right: auto; }
  /* "or" divider + secondary button, centred (mobile only) */
  #contacto .contact-or {
    display: block; text-align: center; margin: 14px 0;
    color: var(--warm-50); font-size: var(--text-sm); font-weight: var(--fw-medium);
    letter-spacing: 0.04em; text-transform: uppercase;
  }
  #contacto .contact-form-btn { display: flex; width: fit-content; margin-left: auto; margin-right: auto; }
  /* Form hidden by default; opens full-screen */
  #contacto .contact-form-panel { display: none; }
  #contacto .contact-form-panel.is-open {
    display: block; position: fixed; inset: 0; z-index: 500;
    background: var(--white); overflow-y: auto;
    padding: 60px var(--gutter-sm) 32px;
    opacity: 1; transform: none;   /* neutralise any .reveal transform */
  }
  #contacto .contact-form-panel.is-open .contact-form-close {
    display: flex; position: fixed; top: 12px; right: 12px; z-index: 501;
    width: 36px; height: 36px; align-items: center; justify-content: center;
    background: var(--white); border: 1px solid var(--border); border-radius: 50%;
    font-size: 22px; line-height: 1; color: var(--black); cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  }
  body.contact-open { overflow: hidden; }

  /* ≤768px = mobile layout (task 2): single-column contact, and the "Mensaje"
     textarea grows proportionally with viewport height. */
  #contacto .contacto-grid,
  .page-wrap .contacto-grid { grid-template-columns: 1fr; gap: 60px; }
  #contacto .form-row,
  .page-wrap .form-row { grid-template-columns: 1fr; }
  #contacto .contact-form-panel .form-group textarea,
  .page-wrap .contact-form-panel .form-group textarea { min-height: clamp(180px, 36vh, 400px); }
}

/* >lg (>900px) = desktop 2-column contact. The 2-column layout is now used ONLY
   above lg; through this narrow-desktop band the left column is tightened and the
   grid gap reduced so the section still fits one screen at widths just above the
   divide. (≤900px collapses to one column — see the min-width:768.99 block below
   and the ≤768.98 mobile block above.) */
@media (min-width: 900.99px) and (max-width: 1024.98px) {
  #contacto .contacto-grid,
  .page-wrap .contacto-grid { gap: 48px; }
  #contacto .contacto-left > p,
  .page-wrap .contacto-left > p { line-height: 1.5; margin-bottom: 12px; }
  #contacto .contact-microcopy,
  .page-wrap .contact-microcopy { margin-bottom: 20px !important; }
  #contacto .contact-item,
  .page-wrap .contact-item { padding: 12px 0; }
  #contacto .whatsapp-btn,
  .page-wrap .whatsapp-btn { margin-top: 20px; }
}

/* Contacto: single column from lg down (769–900px). Together with the ≤768.98px
   mobile block this makes the whole ≤900px range one column, so the 2-column
   contact layout is used ONLY above lg (>900px). Applies to the homepage
   #contacto section and the standalone /contacto/ page. (Was 2-column here.) */
@media (min-width: 768.99px) and (max-width: 900.98px) {
  #contacto .contacto-grid,
  .page-wrap .contacto-grid { grid-template-columns: 1fr; gap: 60px; }
}

/* Botón flotante WhatsApp (toda la web) */
.whatsapp-float {
  position: fixed; bottom: 28px; right: 28px;
  width: 56px; height: 56px;
  background: var(--brand); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
  z-index: 200; /* cursor: none; */
  transition: transform 0.3s ease;
}
.whatsapp-float:hover { transform: scale(1.08); }
.whatsapp-float svg { width: 30px; height: 30px; fill: var(--white); }

.contact-details { display: flex; flex-direction: column; gap: 0; }
.contact-item {
  display: flex; align-items: flex-start; gap: 20px;
  padding: 20px 0; border-top: 1px solid var(--border);
}
.contact-item:last-child { border-bottom: 1px solid var(--border); }
.contact-label {
  font-size: var(--text-2xs); letter-spacing: var(--ls-caps); text-transform: uppercase;
  color: var(--warm-50); margin-bottom: 5px; width: 70px; flex-shrink: 0; padding-top: 2px;
}
.contact-value {
  font-size: var(--text-md); font-weight: var(--fw-normal);
  color: var(--black); text-decoration: none; transition: color 0.3s;
}
.contact-value:hover { color: var(--warm-50); }

/* FORM */
.contact-form { display: flex; flex-direction: column; gap: 0; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; }
.form-group { display: flex; flex-direction: column; }
.form-group label {
  font-size: var(--text-2xs); font-weight: var(--fw-medium);
  letter-spacing: var(--ls-caps); text-transform: uppercase;
  color: var(--warm-50); padding: 14px 20px 0;
}
.form-group input,
.form-group select,
.form-group textarea {
  background: transparent;
  border: none;
  color: var(--black);
  font-family: inherit; font-size: var(--text-md); font-weight: var(--fw-light);
  padding: 10px 20px 14px;
  outline: none; transition: border-color 0.3s;
  -webkit-appearance: none; appearance: none;
}
/* A focused field draws a hairline accent along its own bottom edge without
   nudging siblings (inset shadow, not a border, so layout never shifts). */
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { box-shadow: inset 0 -1px 0 0 var(--black); }
.form-group textarea { resize: vertical; min-height: 150px; }
.form-group select {
  cursor: pointer; padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M3 5l4 4 4-4' stroke='%23707070' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 20px center;
}
.form-group select option { background: var(--white); color: var(--black); }
.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--warm-20); font-weight: var(--fw-light); }

/* Contact-form frame: a single hairline box that divides its fields with
   internal rules (top border on every stacked field; a vertical rule between
   the paired name/company row). The bottom edge is closed by .form-submit. */
.contact-frame {
  position: relative;
  border: 1px solid var(--border); border-bottom: none;
  overflow: hidden;
  transition: border-color 0.4s ease;
}
.contact-frame > .form-group { border-top: 1px solid var(--border); }
.form-row .form-group:first-child { border-right: 1px solid var(--border); }
.form-group.full { border-right: none !important; }
.form-submit {
  display: flex; align-items: center; justify-content: space-between;
  padding: 24px 20px; border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* Hover / scroll-in reveal: the frame's border deepens and a brand-green
   hairline draws across the top edge — the same architectural line-draw as
   the hero grid. `.frame-lit` is toggled by contact-frame.js when the frame
   scrolls into view; hovering the form produces the identical state. */
/* .contact-frame::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--brand);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 3;
} */
.contact-frame.frame-lit,
.contact-form:hover .contact-frame { border-color: var(--border-mid); }
.contact-frame.frame-lit::before,
.contact-form:hover .contact-frame::before { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .contact-frame::before { transition: none; }
}
.form-note {
  font-size: var(--text-sm); font-weight: var(--fw-light); color: var(--warm-50);
  max-width: 200px; line-height: 1.5;
}

/* CREDIT LINE — below #contacto on all pages */
.credit-line {
  position: relative; z-index: 1;
  margin-top: 48px; text-align: center;
  font-size: var(--text-2xs); color: var(--warm-50);
}
.credit-line a {
  color: var(--warm-50); text-decoration: none;
  vertical-align: middle; margin-left: 6px;
  transition: color 0.2s ease;
}
.credit-line a:hover { color: var(--black); }
.credit-line svg {
  width: 14px; height: 14px; vertical-align: -2px;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ANIMATIONS */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; } to { opacity: 1; }
}
.reveal {
  opacity: 0; transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.visible { opacity: 1; transform: translateY(0); }

/* RESPONSIVE */
@media (max-width: 1024.98px) {
  #navbar { padding: 12px var(--gutter-md); }
  /* Navbar shrink-on-scroll disabled */
  /* nav.scrolled { padding: 10px var(--gutter-md); } */
  #hero { padding: clamp(48px, 8vh, 72px) var(--gutter-md) clamp(40px, 6vh, 64px); }
  section { padding: 48px var(--gutter-md); }
  .about-grid { grid-template-columns: 1fr; gap: 60px; }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .proceso-steps { grid-template-columns: repeat(3, 1fr); }
  .normas-grid { grid-template-columns: repeat(2, 1fr); }
  .services-header { flex-direction: column; align-items: flex-start; }
  .services-note { text-align: left !important; }
}
/* HAMBURGER BUTTON */
.nav-hamburger {
  display: none;
  flex-direction: column; justify-content: center;
  gap: 5px; background: none; border: none;
  cursor: pointer; padding: 4px; z-index: 101;
}
.nav-hamburger span {
  display: block; width: 24px; height: 1.5px;
  background: var(--black);
  transition: all 0.3s ease;
  transform-origin: center;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* MOBILE MENU OVERLAY */
.nav-mobile-menu {
  display: none;
  position: fixed; inset: 0;
  background: var(--white);
  z-index: 99;
  flex-direction: column;
  justify-content: center; align-items: center;
}
.nav-mobile-menu.open { display: flex; }
.nav-mobile-menu a {
  font-size: var(--text-3xl); font-weight: var(--fw-light);
  letter-spacing: -0.01em;
  color: var(--black); text-decoration: none;
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
  width: 80%; text-align: center;
  transition: color 0.2s;
}
.nav-mobile-menu a:first-child { border-top: 1px solid var(--border); }
.nav-mobile-menu a:hover,
.nav-mobile-menu a.nav-active { color: var(--warm-50); }
.nav-mobile-menu a.nav-cta {
  margin-top: 28px; border: 1px solid var(--black) !important;
  padding: 16px 40px; width: auto;
  font-size: var(--text-base); font-weight: var(--fw-medium);
  letter-spacing: var(--ls-caps); text-transform: uppercase;
}

@media (max-width: 1024.98px) {
  .nav-links { display: none; }
  .nav-hamburger { display: flex; }
}

@media (max-width: 640.98px) {
  #navbar { padding: 10px var(--gutter-sm); }
  /* Navbar shrink-on-scroll disabled */
  /* nav.scrolled { padding: 6px var(--gutter-sm); } */
  .nav-logo img { height: 40px; }
  section { padding-left: var(--gutter-sm); padding-right: var(--gutter-sm); }
  #hero { min-height: 100svh; align-items: flex-start; padding: 56px var(--gutter-sm) 32px; }
  /* Background logo: larger + centred on the hero content (same as xxs, ≤375px) */
  .hero-symbol { width: 183vw; top: calc(54.5vh - 28px); transform: translate(-50%, -50%); }
  .hero-content { flex-direction: column; align-items: flex-start; gap: 20px; margin-bottom: 28px !important; padding: 0; }
  .hero-left { max-width: 100%; }
  .hero-right { width: 100%; align-items: flex-start; gap: 16px; }
  .hero-actions { width: 100%; align-items: stretch; gap: 12px; }
  .btn-primary { width: 100%; justify-content: center; box-sizing: border-box; padding: 12px 20px; }
  .hero-title { font-size: min(var(--text-hero-sm), 9.5vw); line-height: 1; margin-bottom: 20px; }
  .hero-kicker { margin-bottom: 8px; }
  .hero-desc { font-size: var(--text-base); line-height: 1.5; }
  .hero-stats { flex-wrap: wrap; gap: 12px; margin-top: 20px; padding: 10px 0; position: static; }
  .stat-trust-title { font-size: var(--text-base); }
  .stat-label { font-size: var(--text-2xs); }
  .scroll-down { bottom: 12px; }
  .services-grid { grid-template-columns: 1fr; }
  .proceso-steps { grid-template-columns: repeat(2, 1fr); }
  .normas-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .proy-card { grid-template-columns: 1fr; }
  .proy-carousel { min-height: 260px; }
}

/* Short viewports (compact laptops / landscape phones): keep hero within the fold */
/* Short viewport heights: pull the hero content up so it clears the
   bottom-anchored .hero-stats row (prevents desc/stats overlap ~620–860px tall). */
@media (min-width: 1024.99px) and (max-height: 860px) {
  .hero-left { margin-top: -72px; }
}

@media (max-height: 620px) {
  #hero { padding-top: 56px; padding-bottom: 36px; }
  .hero-title { font-size: min(2.6rem, 8vh, 9.5vw); margin-bottom: 16px; }
  .hero-content { margin-bottom: 24px; gap: 24px; padding: 0; }
  .hero-kicker { margin-bottom: 8px; }
  .hero-desc { max-width: 420px; font-size: var(--text-base); line-height: 1.5; }
  .hero-right { gap: 16px; }
  .hero-stats { margin-top: 20px; padding: 12px 0; gap: 20px; position: static; }
  .scroll-down { bottom: 12px; }
}

/* ═══════════════════════════════════════════════════════════════
   COMPACT LAPTOPS — wide viewport, short height (e.g. 14" screens,
   ~640–800px tall). The hero got a short-viewport pass above, but
   every OTHER homepage section and the standalone pages used fixed
   (non-vh) vertical padding tuned for tall desktops — so on a short
   screen their content (lower cards + the scroll-down cue) overran
   the fold. This is why the hero fit but nothing else did.

   Fix: scale the vertical rhythm to the viewport height. The
   `min-width` guard keeps phones/tablets (own width-based blocks)
   untouched; every clamp ceiling equals the property's existing base
   value, so these rules only ever REMOVE space on short screens.
   Selectors are wrapper-scoped (`body > section`, `main.<wrap>`,
   `.<wrap> .<child>`) so they outspecify the per-page inline <style>
   padding that loads after this file — no !important needed.
  ══════════════════════════════════════════════════════════════ */
@media (min-width: 1024.99px) and (max-height: 860px) {
  /* --- Homepage panels (direct <body> children; hero excluded) --- */
  /* Panel HEIGHT (100svh − navbar) is now handled globally by the base
     `body > section:not(#hero)` rule; here we only tighten the vertical padding
     so the (now shorter) content still clears the fold on short screens. */
  body > section:not(#hero) {
    padding-top: clamp(28px, 5vh, 72px);
    padding-bottom: clamp(28px, 5vh, 72px);
  }
  /* Pin the scroll cue to the section's bottom-centre (the sticky/margin-auto
     default drifts once the section fits the fold). */
  body > #servicios > .scroll-down,
  body > #proyectos > .scroll-down,
  body > #estudio > .scroll-down {
    position: absolute;
    bottom: 14px;
    left: 50%; right: auto;
    transform: translateX(-50%);
    margin-top: 0;
  }
  body > section:not(#hero) .hub-head h1,
  body > section:not(#hero) .page-hero h1 { margin-bottom: clamp(10px, 1.8vh, 20px); }
  body > section:not(#hero) .hub-grid-section { padding-top: clamp(14px, 2.6vh, 24px); }
  body > #proyectos .page-hero { padding-bottom: clamp(4px, 1vh, 8px); }

  /* --- Standalone pages (content lives inside <main>) --- */
  main.hub-wrap, main.page-wrap { padding-top: var(--nav-h); }
  main.svc-wrap {
    padding-top: calc(var(--nav-h) + clamp(16px, 3vh, 48px));
    padding-bottom: clamp(40px, 7vh, 96px);
  }
  .hub-wrap .hub-head { padding-top: clamp(16px, 3.5vh, 64px); }
  .page-wrap .page-hero { padding-top: clamp(24px, 4vh, 64px); }
  .hub-wrap .hub-grid-section { padding-top: clamp(16px, 3vh, 40px); }
  .page-wrap .page-section { padding-top: clamp(20px, 3.5vh, 40px); }
  .hub-wrap .hub-cta,
  .page-wrap .page-cta {
    margin-top: clamp(20px, 4vh, 48px);
    margin-bottom: clamp(28px, 5vh, 96px);
  }
  .svc-wrap .svc-cta { margin-top: clamp(28px, 4.5vh, 56px); }

  /* ── Trimming the vertical rhythm above was not enough on the shortest
        screens: the section CONTENT itself (card copy, the proyectos tile
        block, the contact column) still ran past the fold. Below we shrink
        that content per section. These override per-page inline <style>
        font/spacing (which loads after this file), so they need !important. */

  /* SERVICIOS — shrink the headers and tags at BOTH tiers so the section fits.
     Tier-1 = the section H1 + the four category cards (title/tags/padding).
     Tier-2 = the hover-fork leaf boxes (title/tags/padding). */
  /* Tier-1 section header (homepage #servicios + servicios hub). */
  body > #servicios .hub-head-row h1,
  .hub-wrap .hub-head-row h1 { font-size: clamp(1.3rem, 2vw, 1.75rem) !important; }
  /* Tier-1 category cards. */
  .services-grid .service-title,
  .svc-cards .service-title { font-size: var(--text-xs) !important; line-height: 1.2 !important; }
  .services-grid .service-desc,
  .svc-cards .service-desc { font-size: var(--text-2xs) !important; line-height: 1.4 !important; margin-top: 6px !important; }
  .services-grid .service-tags,
  .svc-cards .service-tags { margin-top: 7px !important; }
  .services-grid .service-tag,
  .svc-cards .service-tag { font-size: 0.625rem !important; padding: 2px 6px !important; }
  .services-grid .service-card { padding: 10px 14px !important; }
  .svc-cards .service-card { padding: 12px 14px !important; }
  /* Tier-2 hover-fork leaf boxes — ~20% tighter for this short format:
     padding (10→8px), title font (×0.8), and the gap above "Ver servicio"
     (svc-more margin-top 10→8px). */
  a.svc-fork-box { padding: 5px 10px !important; }
  a.svc-fork-box .service-title { font-size: calc(var(--text-sm) * 0.8) !important; line-height: 1.2 !important; }
  a.svc-fork-box .service-tags { margin-top: 4px !important; }
  a.svc-fork-box .service-tag { font-size: 0.5625rem !important; padding: 1px 3px !important; }
  a.svc-fork-box .svc-more { margin-top: 4px !important; }

  /* PROYECTOS — shrink the desktop showcase container + its margins so the
     tile block fits under the header. `.proy-bg-grid .proy-showcase`
     out-specifies the base `.proy-showcase` desktop rule below. */
  .proy-bg-grid .proy-showcase {
    height: clamp(240px, 39vh, 493px);
    margin-top: clamp(14px, 2.4vh, 48px);
    margin-bottom: clamp(14px, 2.4vh, 48px);
  }

  /* ESTUDIO — tighten the study cards: padding, inner margins and line
     heights (their desktop state uses the generous base .service-card sizes). */
  .study-grid .service-card { padding: 16px 20px !important; }
  .study-grid .service-number { margin-bottom: 8px !important; }
  .study-grid .service-title { font-size: var(--text-base) !important; margin-bottom: 8px !important; line-height: 1.2 !important; }
  .study-grid .service-desc { font-size: var(--text-sm) !important; line-height: 1.45 !important; }
  .study-grid .service-tags { margin-top: 10px !important; }
  .study-grid .svc-more { margin-top: 8px !important; }
  .study-head-row .hub-lead { line-height: 1.4 !important; }
  .study-head-row .hub-lead p { margin-bottom: 6px !important; }

  /* CONTACTO — tighten the left column (intro copy, microcopy, contact rows,
     CTA) so it stays within the fold alongside the form column. */
  #contacto .contacto-left > p,
  .page-wrap .contacto-left > p { line-height: 1.4 !important; margin-bottom: 10px !important; }
  #contacto .contact-microcopy,
  .page-wrap .contact-microcopy { margin-bottom: 16px !important; }
  #contacto .contact-item,
  .page-wrap .contact-item { padding: 8px 0 !important; }
  #contacto .whatsapp-btn,
  .page-wrap .whatsapp-btn { margin-top: 16px !important; }
  /* "Mensaje" textarea ~40% shorter (base min-height 150px → 90px). */
  #contacto .form-group textarea,
  .page-wrap .form-group textarea { min-height: 90px !important; }
}

/* ═══════════════════════════════════════════════════════════════
   TALL PORTRAIT TABLETS — nudge homepage panels toward centre
   The mirror image of the short-laptop block above: on tall portrait
   tablets (e.g. iPad Air 820×1180, iPad mini 768×1024) the full-height
   homepage panels (#servicios/#proyectos/#estudio) have far MORE height
   than their content. Each panel centres via `justify-content:center`,
   but `.scroll-down`'s `margin-top:auto` (see the base rule) absorbs all
   the free space and pins the content to the TOP — leaving a big empty
   band below. Add a height-scaled top padding so the content sits nearer
   the middle. Not a true centre (per request — "just add some padding-
   top"); the scroll-down cue stays pinned at the bottom. #hero fills the
   viewport on its own and #contacto centres its own grid, so both are
   excluded. Width band = portrait tablets (phones have their own blocks
   and desktops are >1024); the min-height guard means only genuinely
   tall screens — where the gap actually shows — are affected.
  ══════════════════════════════════════════════════════════════ */
@media (min-width: 640.99px) and (max-width: 1024.98px) and (min-height: 900px) {
  body > section:not(#hero):not(#contacto) { padding-top: clamp(88px, 16vh, 240px); }
}

/* ═══════════════════════════════════════════════════════════════
   LEVEL-2 CONTENT PAGES (≤768.98px) — servicios + estudio leaves /
   categories. Their long-form .svc-* prose keeps desktop font-sizes +
   loose leading down to phone widths; here we reduce both so the reading
   density matches the homepage and the level-1 hub pages. Scoped to
   .svc-wrap (the content-column pages only) and !important because each
   page's base .svc-* rules live in a per-page inline <style> that loads
   after this file. (task 3)
  ══════════════════════════════════════════════════════════════ */
@media (max-width: 768.98px) {
  .svc-wrap h1 { font-size: clamp(1.6rem, 5.2vw, 2rem) !important; line-height: 1.1 !important; margin-bottom: 16px !important; }
  .svc-lead { font-size: var(--text-base) !important; line-height: 1.5 !important; margin-bottom: 28px !important; }
  .svc-wrap h2 { font-size: var(--text-xl) !important; line-height: 1.2 !important; margin: 32px 0 12px !important; }
  .svc-wrap h3 { font-size: var(--text-md) !important; margin: 22px 0 6px !important; }
  .svc-wrap p,
  .svc-wrap li { font-size: var(--text-base) !important; line-height: 1.55 !important; }
  .svc-wrap p { margin-bottom: 14px !important; }
  .svc-wrap li { margin-bottom: 6px !important; }
  .svc-steps li { padding-left: 44px !important; margin-bottom: 16px !important; }
}

/* ═══════════════════════════════════════════════════════════════
   BREAKPOINT 1 — xxs / small phones (≤375.98px)
   Single consolidated xxs block (merged from the three separate
   max-width:375.98px blocks that used to live here). Site-wide: every
   page links this file across all four language trees. Ordered by page
   section — SHARED, then HERO · SERVICIOS · PROYECTOS · ESTUDIO ·
   CONTACTO — mirroring the homepage's own section order.
   Homepage sections are scoped by #id; standalone pages by their wrapper
   class (.hub-wrap / .page-wrap / .svc-wrap) so these rules never leak
   onto the homepage (which reuses the same inner classes). !important is
   used throughout because each page's own values live in a per-page
   inline <style> that loads AFTER this file (and the ≤540px block below).
  ══════════════════════════════════════════════════════════════ */
@media (max-width: 375.98px) {

  /* ══ SHARED ═══════════════════════════════════════════════════ */
  /* Correct --nav-h to the REAL xxs navbar height. Here #navbar is
     padding 10+10 (≤640.98px block) + a 54px logo + a 3px bottom border
     = 77px, but the token still said 80px. That 3px gap made
     scroll-padding-top (80px) overshoot the navbar (77px), so every
     anchored non-hero section landed 3px too low and exposed a sliver of
     the preceding section under the navbar. Overriding the token fixes
     scroll-padding-top, the section min-height calcs (100svh − nav-h) and
     #contacto in one place — all of which had over-reserved by 3px. */
  :root { --nav-h: 77px; }
  .nav-logo img { height: 54px; }
  .credit-line { font-size: 0.6875rem; }
  /* Drop every eyebrow / overline. */
  .hub-eyebrow, .page-eyebrow { display: none !important; }
  /* .page-lead only ever appears in proyectos contexts — drop it. */
  .page-lead { display: none !important; }

  /* Standalone pages — non-hero section padding −50% (homepage sections
     are handled per-#id in their section blocks below). */
  .hub-wrap .hub-head { padding-top: 32px !important; padding-bottom: 0 !important; }
  .hub-wrap .hub-cta { padding: 22px !important; margin-bottom: 48px !important; }
  /* estudio-family hub grid (estudio hub + oficinas): halved again for the
     estudio density pass — was 20/44, now 10/22. */
  .hub-wrap .hub-grid-section { padding-top: 10px !important; padding-bottom: 22px !important; }
  /* Servicios hub is already compact — halve on its own smaller scale. */
  .hub-wrap:has(.services-grid) .hub-head { padding-top: 8px !important; padding-bottom: 0 !important; }
  .hub-wrap:has(.services-grid) .hub-grid-section { padding-top: 8px !important; padding-bottom: 7px !important; }
  .hub-wrap:has(.services-grid) .hub-cta { padding: 9px 28px !important; margin-bottom: 10px !important; }
  /* Content-column pages (service leaves/categories + estudio leaves). */
  .svc-wrap { padding-top: calc(var(--nav-h) + 24px) !important; padding-bottom: 48px !important; }
  .svc-cta { margin-top: 28px !important; padding: 20px !important; }
  /* .page-* pages (proyectos, contacto). */
  .page-wrap .page-hero { padding-top: 32px !important; padding-bottom: 4px !important; }
  .page-wrap .page-section { padding-top: 20px !important; padding-bottom: 12px !important; }
  .page-wrap .page-cta { margin-top: 24px !important; margin-bottom: 48px !important; padding: 22px !important; }

  /* ══ HERO ═════════════════════════════════════════════════════ */
  /* Fit-to-fold: margin above, subtract it from the 100svh box, stats
     hidden, bigger H1, centred bigger background logo. */
  #hero { margin-top: 28px; min-height: calc(100svh - 28px); padding-top: 24px; padding-bottom: 8px; }
  .hero-content { justify-content: center; gap: 12px; margin-bottom: 12px !important; }
  .hero-title { font-size: min(3rem, 12vw); line-height: 1; margin-bottom: 16px; }
  .hero-kicker { margin-bottom: 8px; }
  .hero-actions { gap: 12px; }
  .btn-primary { padding: 12px 20px; }
  .hero-desc { font-size: var(--text-sm); line-height: 1.3; }
  .hero-stats { display: none; }
  .hero-symbol { width: 183vw; top: calc(54.5vh - 28px); transform: translate(-50%, -50%); }

  /* Panel HEIGHT (100svh − navbar, so section + navbar == one screen) is now
     handled globally by the base `body > section:not(#hero)` rule — which picks
     up the xxs --nav-h override (77px) automatically. Here we only pin the
     scroll-down arrow: the sticky arrow is unreliable in a flex column (its
     rendered spot jumps with scroll), so pin it absolutely to each section's
     bottom-centre, where it lands just above the fold. */
  #servicios > .scroll-down,
  #proyectos > .scroll-down,
  #estudio  > .scroll-down {
    position: absolute !important;
    bottom: 16px !important;
    left: 50% !important; right: auto !important;
    transform: translateX(-50%) !important;
    margin-top: 0 !important;
  }

  /* ══ SERVICIOS ════════════════════════════════════════════════ */
  #servicios { padding-top: 28px !important; padding-bottom: 28px !important; }
  #servicios .hub-head { padding-bottom: 0 !important; }
  /* NOTE: service-card + proy-card compact styling (density, borders, tap
     hint, expanded sizing, tag-hide) moved to the "CARDS xxs→sm" block
     below (@media max-width:540.98px) so small AND standard phones share
     the same dense cards. Only the xxs-specific section padding stays here. */

  /* ══ PROYECTOS ════════════════════════════════════════════════ */
  #proyectos { padding-top: 24px !important; padding-bottom: 36px !important; }
  /* Scoped via .proy-bg-grid (homepage #proyectos + /proyectos/ <main>). */
  /* Background-grid spacing is now viewport-scaled at all widths — see the
     shared .proy-bg-grid::before rule. */
  .proy-bg-grid .page-hero { padding-bottom: 0 !important; }
  .proy-bg-grid .proy-showcase { padding-top: 16px !important; }

  /* ══ ESTUDIO ══════════════════════════════════════════════════ */
  #estudio { padding-top: 24px !important; padding-bottom: 36px !important; }
  #estudio .hub-head { padding-bottom: 0 !important; }
  /* hub-grid-section vertical padding −50% (homepage side; standalone estudio
     hub handled by .hub-wrap .hub-grid-section above). */
  #estudio .hub-grid-section { padding-top: 10px !important; }
  /* study-head-row: keep ONLY the row gap — no extra margin below the row. */
  #estudio .study-head-row,
  .hub-wrap .study-head-row { gap: 8px !important; margin-bottom: 0 !important; }
  /* hub-lead: smaller, tighter, no bottom margin (only the row gap spaces it). */
  #estudio .study-head-row .hub-lead,
  .hub-wrap .study-head-row .hub-lead,
  .hub-wrap:has(.office-grid) .hub-head .hub-lead {
    font-size: var(--text-sm) !important;
    line-height: 1.25 !important;
    margin-bottom: 0 !important;
  }
  #estudio .study-head-row .hub-lead p,
  .hub-wrap .study-head-row .hub-lead p,
  .hub-wrap:has(.office-grid) .hub-head .hub-lead p {
    line-height: 1.25 !important;
    margin-bottom: 0 !important;
  }
  /* NOTE: study-grid card density (padding/leading/svc-more) moved to the
     "CARDS xxs→sm" block below so it spans xxs→sm like the other cards. */

  /* ══ CONTACTO ═════════════════════════════════════════════════ */
  /* Homepage (#contacto) + standalone page (.page-wrap) share the classes.
     Inputs stay ≥16px to avoid the iOS focus-zoom. */
  #contacto { padding-top: 24px !important; padding-bottom: 24px !important; }
  #contacto .contacto-grid,
  .page-wrap .contacto-grid { gap: 24px !important; }
  #contacto .contacto-left > p,
  .page-wrap .contacto-left > p { font-size: var(--text-sm) !important; line-height: 1.4 !important; margin-bottom: 10px !important; }
  #contacto .contact-microcopy,
  .page-wrap .contact-microcopy { margin-bottom: 12px !important; }
  #contacto .contact-details,
  .page-wrap .contact-details { gap: 0 !important; }
  #contacto .contact-item,
  .page-wrap .contact-item { gap: 12px !important; padding: 8px 0 !important; }
  #contacto .contact-value,
  .page-wrap .contact-value { font-size: var(--text-base) !important; }
  #contacto .whatsapp-btn,
  .page-wrap .whatsapp-btn { margin-top: 16px !important; padding: 11px 22px !important; }
  #contacto .contact-form-btn,
  .page-wrap .contact-form-btn { padding: 11px 22px !important; }
  /* Contact-form panel (opened on mobile — both #contacto pages carry
     id="contacto"): shrink the panel chrome + fields so the whole form fits
     without overflowing. Previously only the standalone form (.page-wrap) was
     reduced, so the homepage panel used base sizes (150px textarea, big field
     padding) and pushed the submit — and the fixed close button — off short
     screens. Inputs stay ≥16px to avoid the iOS focus-zoom. */
  #contacto .contact-form-panel.is-open { padding: 44px var(--gutter-sm) 14px !important; }
  .contact-form-panel .form-group label { padding: 6px 20px 0 !important; }
  .contact-form-panel .form-group input,
  .contact-form-panel .form-group select,
  .contact-form-panel .form-group textarea { font-size: var(--text-base) !important; padding: 6px 20px 8px !important; }
  .contact-form-panel .form-group textarea { min-height: clamp(160px, 32vh, 300px) !important; }
  .contact-form-panel .form-submit { padding: 12px 20px !important; }
}

/* ═══════════════════════════════════════════════════════════════
   BREAKPOINT xs→sm — Standard small phones up through sm (376–540px)
   Extended from the old xs-only band (376–390px) so standard/large
   phones up to sm share the same hero + estudio hub-lead tightening.
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 375.99px) and (max-width: 540.98px) {
  /* Push the hero content down from the top instead of reserving space
     below it (overrides the ≤640px margin-bottom). */
  .hero-content { margin-top: 28px; margin-bottom: 0 !important; }

  /* ESTUDIO hub-lead: at this band the ≤375px tightening no longer applies,
     so the lead falls back to the loose base line-height:1.5. Cut it ~20%
     (1.5 → 1.2) on the homepage #estudio section and the estudio hub pages
     to match the density used just below. */
  #estudio .study-head-row .hub-lead,
  .hub-wrap .study-head-row .hub-lead,
  .hub-wrap:has(.office-grid) .hub-head .hub-lead { line-height: 1.2 !important; }
  #estudio .study-head-row .hub-lead p,
  .hub-wrap .study-head-row .hub-lead p,
  .hub-wrap:has(.office-grid) .hub-head .hub-lead p { line-height: 1.2 !important; }
}

/* ═══════════════════════════════════════════════════════════════
   BREAKPOINT 2 — Standard / large phones (390×844, 430×932) up to sm
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 540.98px) {
  /* Logo */
  .nav-logo img { height: 52px; }

  /* Estudio — compact cards */
  .study-grid .service-card { padding: 18px 14px; }
  .study-grid .service-number { margin-bottom: 6px; font-size: 0.6875rem; }
  .study-grid .service-title { font-size: var(--text-base); margin-bottom: 8px; line-height: 1.2; }
  .study-grid .service-desc { font-size: var(--text-xs); line-height: 1.45; margin-top: 6px; }
  .study-grid .service-number,
  .study-grid .service-title { display: inline; margin-right: 8px; }
  .study-grid .service-tags { margin-top: 10px; }
  /* Proyectos mobile cards: moved to the central `≤768.98px` block below
     (one layout for the whole ≤768 phone/tablet-portrait band, tasks 1 & 3). */
}

/* ═══════════════════════════════════════════════════════════════
   CARDS xxs→sm — service-card (servicios + estudio)
   ---------------------------------------------------------------
   The compact card styling below originally lived ONLY in the
   ≤375.98px (xxs) block; it now spans xxs→sm (≤540.98px) so small
   AND standard phones share the same dense cards. !important + the
   high-specificity selectors keep these winning over the per-page
   inline styles that load after this file. (Proyectos cards used to
   live here too; they now have one layout across the whole ≤768.98px
   band — see the central proyectos block further down.)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 540.98px) {

  /* ══ SERVICIOS ════════════════════════════════════════════════ */
  /* Long category titles stay on one line. */
  #servicios .service-card .service-title,
  .services-grid .service-card .service-title,
  .svc-cards .service-card .service-title { font-size: var(--text-xs); }
  /* Card density −50% (service-card family: homepage + hub + categories). */
  #servicios .service-card,
  .services-grid .service-card { padding: 5px 6px 3px !important; }
  .svc-cards a.service-card { padding: 9px 10px !important; }
  #servicios .service-desc,
  .services-grid .service-desc,
  .svc-cards .service-desc { margin-top: 5px !important; }
  #servicios a.service-card .svc-more,
  .services-grid a.service-card .svc-more { margin-top: 3px !important; }
  .svc-cards a.service-card .svc-more { margin-top: 6px !important; }

  /* PROYECTOS mobile cards moved to the central `≤768.98px` block below
     (the collapsed/dense/tap-to-expand layout now spans the whole ≤768
     band, not just ≤480 — tasks 1 & 3). */

  /* ══ ESTUDIO ══════════════════════════════════════════════════ */
  /* Study cards: padding −50% (18/14 → 9/7), tighter desc leading, and the
     svc-more top margin halved (#estudio 11→5, estudio hub 18→9). */
  .study-grid .service-card { padding: 9px 7px !important; }
  .study-grid .service-desc { line-height: 1.3 !important; }
  #estudio .study-grid .svc-more { margin-top: 5px !important; }
  .hub-wrap .study-grid .svc-more { margin-top: 9px !important; }
}

/* Expandable project cards on phones + small tablets (≤md).
   Tapping a card opens a full-screen overlay with the full info + gallery;
   a floating close (×) button and Escape collapse it (site.js). */
@media (max-width: 768.98px) {
  .proy-showcase > .proy-card,
  .proyectos-grid .proyecto-card {
    cursor: pointer;
  }
  /* Expanded state: full-screen overlay */
  .proy-showcase > .proy-card.is-expanded,
  .proyectos-grid .proyecto-card.is-expanded {
    position: fixed;
    inset: 0;
    z-index: 500;
    display: flex;
    flex-direction: column;
    background: var(--white);
    overflow-y: auto;
    margin: 0 !important;
    border: none;
    min-height: 100vh;
    min-height: 100dvh;
  }
  .proy-showcase > .proy-card.is-expanded .proy-info,
  .proyectos-grid .proyecto-card.is-expanded .proyecto-info {
    border-bottom: 1px solid var(--border);
    flex: none;
  }
  .proy-showcase > .proy-card.is-expanded .proy-gallery,
  .proyectos-grid .proyecto-card.is-expanded .proyecto-gallery {
    flex: 1;
    min-height: 0;
  }
  /* Close button */
  .proy-close {
    display: none;
    position: fixed;
    top: 12px; right: 12px;
    z-index: 501;
    width: 36px; height: 36px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 50%;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
    color: var(--black);
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  }
  .proy-showcase > .proy-card.is-expanded > .proy-close,
  .proyectos-grid .proyecto-card.is-expanded > .proy-close {
    display: flex;
  }
  body.proy-expanded {
    overflow: hidden;
  }
  /* Expanded-card fix: the homepage #proyectos container is a `.reveal`
     element, and `.reveal.visible` keeps `transform: translateY(0)`. A
     non-`none` transform makes that container the containing block for the
     card's `position: fixed`, so the "full-screen" overlay was trapped inside
     the section, not the viewport — it sat below the fixed navbar, wasn't
     centred, showed the next card at its foot, and pushed its own fixed close
     button out of view. `translateY(0)` is visually identical to `none`, so
     clearing the transform on the proyectos reveal wrappers while a card is
     expanded restores true viewport-fixed behaviour with zero reflow.
     (Applies whenever a card is expanded — the tap-to-expand feature is
     ≤640px only, so no media query is needed.) */
  body.proy-expanded .proy-bg-grid.reveal,
  body.proy-expanded .proy-bg-grid .reveal {
    transform: none !important;
  }
  /* Expanded-card fix, part 2 (the v-0.69 transform fix alone wasn't enough):
     (a) The homepage's inline "force collapsed state" rules use
     `.proy-card:focus-within { position: relative !important }` — and the open
     card IS focus-within (it holds the close button's focus), so that beat the
     non-important `.is-expanded { position: fixed }` and left the overlay stuck
     in flow. Re-assert the full-screen overlay with higher specificity +
     !important so it wins.
     (b) `.proy-bg-grid > *` gives the container `position: relative; z-index: 1`,
     a stacking context capped at 1 — so the card (z-index 500 *inside* it) could
     never rise above the fixed navbar (z-index 100). Lift the container above the
     navbar while a card is open so the overlay actually covers it. */
  body.proy-expanded .proy-bg-grid > .proy-showcase { z-index: 501 !important; }
  .proy-bg-grid .proy-showcase > .proy-card.is-expanded {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important;
    z-index: 500 !important;
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 100dvh !important;
    margin: 0 !important;
    background: var(--white) !important;
    overflow-y: auto !important;
  }
  /* proy-tags removed on mobile (v-0.73) — hide them in the expanded card too
     (this selector outranks the xxs hide, so it must agree). */
  .proy-bg-grid .proy-showcase > .proy-card.is-expanded .proy-tags { display: none !important; }

  /* Contact-form panel close (×) fix: the panel is position:fixed but lives
     inside `.contacto-grid { z-index: 1 }` (a stacking context), so the panel —
     and its fixed close button — rendered BELOW the fixed navbar (z-index 100),
     which covered the ×. Lift the grid above the navbar while the panel is open
     (body.contact-open, mobile-only) so the overlay covers the navbar and the ×
     is clickable. Covers both #contacto pages (homepage + /contacto/). */
  body.contact-open #contacto .contacto-grid { z-index: 501 !important; }
}

/* ═══════════════════════════════════════════════════════════════
   BREAKPOINT 3 — Tablets (768×1024, 1024×768)
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 640.99px) and (max-width: 1024.98px) {
  /* Hero — logo + padding + stats below content */
  .nav-logo img { height: 52px; }
  .hero-content { padding-top: clamp(48px, 8vh, 80px); }
  .hero-stats {
    position: static;
    margin-top: 24px;
    padding-top: clamp(12px, 2vh, 20px);
  }

  /* Estudio — compact cards */
  .study-grid .service-card { padding: 22px 18px; }
  .study-grid .service-number { margin-bottom: 6px; font-size: 0.75rem; }
  .study-grid .service-title { font-size: var(--text-md); margin-bottom: 8px; line-height: 1.2; }
  .study-grid .service-desc { font-size: var(--text-sm); line-height: 1.5; margin-top: 8px; }
  .study-grid .service-number,
  .study-grid .service-title { display: inline; margin-right: 8px; }
  .study-grid .service-tags { margin-top: 12px; }
  /* Proyectos layout for this band lives elsewhere (task 1): 641–768px is
     mobile (stacked + tap-to-expand, ≤768.98px blocks), 769–1024px is the
     desktop showcase. Here we only fix the VERTICAL alignment (task 2): the
     homepage #proyectos panel top-aligns its content (inline
     `justify-content: flex-start`), leaving a gap below on tablet heights —
     center it instead. `min-height` (not height) means taller content still
     grows and scrolls normally, so centering never clips. `body > #proyectos`
     (id + child) outspecifies the inline `#proyectos` rule. */
  body > #proyectos { justify-content: center; }
}

/* ═══════════════════════════════════════
   TARJETA PROYECTO — carousel lateral
═══════════════════════════════════════ */
.proy-card {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  border: 1px solid var(--border);
  margin-top: 56px;
  min-height: 420px;
}

/* Panel izquierdo: info fija */
.proy-info {
  padding: 48px 40px;
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column; justify-content: space-between;
}
.proy-num {
  font-size: var(--text-2xs); font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide); text-transform: uppercase;
  color: var(--warm-50); margin-bottom: 20px; display: block;
}
.proy-title {
  font-size: var(--text-xl); font-weight: var(--fw-medium);
  letter-spacing: 0.02em; line-height: 1.35;
  color: var(--black); margin-bottom: 20px;
}
.proy-desc {
  font-size: var(--text-base); font-weight: var(--fw-light);
  color: var(--warm-50); line-height: 1.2; flex: 1;
}
.proy-tags {
  display: flex; flex-wrap: wrap; gap: 4px; margin-top: 14px;
}
.proy-tag {
  font-size: var(--text-2xs); letter-spacing: var(--ls-tight); text-transform: uppercase;
  color: var(--warm-50); border: 1px solid var(--border);
  padding: 4px 10px;
}

/* Panel derecho: carrusel (auto, 3s, dots debajo) */
.proy-gallery {
  display: flex; flex-direction: column;
  min-width: 0;
}
.proy-carousel {
  position: relative; overflow: hidden;
  background: var(--warm-10);
  flex: 1; min-height: 0;
}
.proy-track {
  display: flex;
  transition: transform 0.45s cubic-bezier(0.4,0,0.2,1);
  height: 100%;
}
.proy-slide {
  flex: 0 0 100%; height: 100%;
  position: relative;
}
.proy-slide img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
/* Contador + navegación */
.proy-nav {
  position: absolute; bottom: 0; right: 0; left: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px;
  background: rgba(255,255,255,0.92);
  border-top: 1px solid var(--border);
}
.proy-counter {
  font-size: var(--text-2xs); font-weight: var(--fw-medium);
  letter-spacing: var(--ls-caps); color: var(--warm-50);
}
.proy-caption {
  font-size: var(--text-2xs); font-weight: var(--fw-normal);
  letter-spacing: var(--ls-tight); text-transform: uppercase;
  color: var(--black); flex: 1; text-align: center;
}
.proy-arrows { display: flex; gap: 12px; }
.proy-arrow {
  width: 32px; height: 32px;
  background: none; border: 1px solid var(--border);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all 0.25s; flex-shrink: 0;
}
.proy-arrow:hover { background: var(--black); border-color: var(--black); }
.proy-arrow:hover svg path { stroke: var(--white); }
.proy-arrow svg { width: 14px; height: 14px; }
.proy-arrow svg path { stroke: var(--black); transition: stroke 0.25s; }

/* Dots (debajo de la imagen) */
.proy-dots {
  display: flex; gap: 8px; align-items: center; justify-content: center;
  padding: 10px 12px;
  background: #fff;
}
.proy-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--warm-20); border: none; cursor: pointer;
  transition: background 0.25s; padding: 0;
}
.proy-dot:hover { background: var(--warm-50); }
.proy-dot.active { background: var(--black); }

@media (max-width: 768.98px) {
  .proy-card { grid-template-columns: 1fr; }
  .proy-info { border-right: none; border-bottom: 1px solid var(--border); }
  .proy-carousel { min-height: 280px; }
}

/* ═══════════════════════════════════════
   PROYECTOS — diagonal (45°) background grid
   Reuses the hero grid look (--border hairlines at --grid-base-spacing),
   rotated 45°. Applied to the homepage #proyectos section and the
   /proyectos/ page <main>. Oversized + clipped so the rotation leaves
   no bare corners.
═══════════════════════════════════════ */
.proy-bg-grid { position: relative; overflow: hidden; }
.proy-bg-grid::before {
  content: "";
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  pointer-events: none;
  z-index: 0;
  /* Viewport-scaled spacing — match the hero grid (120px * innerWidth/1400)
     instead of a coarse fixed 120px. Applies at all widths. */
  background-image:
    repeating-linear-gradient(0deg,  var(--border) 0 1px, transparent 1px calc(100vw * 120 / 1400)),
    repeating-linear-gradient(90deg, var(--border) 0 1px, transparent 1px calc(100vw * 120 / 1400));
  transform: rotate(45deg);
}
.proy-bg-grid > * { position: relative; z-index: 1; }

/* ═══════════════════════════════════════
   PROYECTOS SHOWCASE — desktop one-screen layout
   Compact tiles (3 on top row, 2 on bottom) filling the container;
   hover expands a tile to cover the whole container with the full
   info + gallery view. Below 1025px the cards fall back to the normal
   stacked .proy-card layout (rules above), untouched.
═══════════════════════════════════════ */
/* Desktop showcase now begins just above the 768px mobile/desktop divide
   (task 1: >768px = desktop layout). Was min-width:1024.99px. */
@media (min-width: 768.99px) {
  .proy-showcase {
    position: relative;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 1px;
    height: clamp(357px, 49.3vh, 493px);
    /* Zero the vertical padding inherited from .page-section so the padding
       box and content box coincide vertically — an expanded card placed with
       position:absolute; inset:0 then fills the container exactly (its grid
       area is the abs-pos containing block). Horizontal gutter is kept so the
       showcase still lines up with the page header. */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 48px;
    margin-bottom: 48px;
    background: var(--border);
    /* background: #FFFFFF; */
    border: 1px solid var(--border);
    overflow: hidden;
  }
  /* While a card is expanded it grows past the fixed box height to fit its
     copy + image (see the :hover/:focus-within rule below); lift the clip so
     the grown overlay isn't cut off. The compact grid never overflows. */
  .proy-showcase:has(> .proy-card:hover),
  .proy-showcase:has(> .proy-card:focus-within) {
    overflow: visible;
  }

  /* Compact tile — override the base two-column .proy-card */
  .proy-showcase > .proy-card {
    position: relative;
    display: block;
    grid-template-columns: none;
    min-height: 0;
    margin: 0 !important;
    border: none;
    overflow: hidden;
    background: var(--warm-10);
    cursor: pointer;
    transition: box-shadow 0.3s ease;
  }
  /* Row 1: first three tiles (span 2 of 6) · Row 2: last two (span 3 of 6) */
  .proy-showcase > .proy-card:nth-child(1),
  .proy-showcase > .proy-card:nth-child(2),
  .proy-showcase > .proy-card:nth-child(3) { grid-row: 1; grid-column: span 2; }
  .proy-showcase > .proy-card:nth-child(4),
  .proy-showcase > .proy-card:nth-child(5) { grid-row: 2; grid-column: span 3; }
  /* Hide the legacy admin-injected slot in this layout */
  .proy-showcase > #proyectos-admin-container { display: none; }

  /* Gallery = the site.js carousel; it fills the tile as the cover.
     Dots are hidden in the compact state (shown again when expanded). */
  .proy-showcase > .proy-card > .proy-gallery {
    position: absolute; inset: 0;
    z-index: 0;
    min-width: 0;
  }
  /* Homepage fallback: galleries there stay as raw <img> (no carousel JS),
     so show only the first as the cover. On /proyectos/ the images live
     inside .proy-slide, so these `> img` selectors don't match. */
  .proy-showcase > .proy-card > .proy-gallery > img {
    width: 100%; height: 100%; object-fit: cover;
  }
  .proy-showcase > .proy-card > .proy-gallery > img:not(:first-child) { display: none; }
  .proy-showcase > .proy-card > .proy-gallery .proy-dots { display: none; }

  /* Info overlaid on the cover — compact shows only number + title */
  .proy-showcase > .proy-card > .proy-info {
    position: absolute; inset: 0;
    z-index: 1;
    padding: 22px 24px;
    border: none;
    justify-content: flex-end;
    background: linear-gradient(to top,
      rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.72) 28%,
      rgba(0,0,0,0.40) 55%, rgba(0,0,0,0.12) 80%, rgba(0,0,0,0) 100%);
  }
  .proy-showcase > .proy-card > .proy-info .proy-desc,
  .proy-showcase > .proy-card > .proy-info .proy-tags { display: none; }
  .proy-showcase > .proy-card .proy-num {
    color: rgba(255,255,255,0.82); margin-bottom: 8px;
  }
  .proy-showcase > .proy-card .proy-title {
    color: #fff; font-size: var(--text-md); line-height: 1.3; margin-bottom: 0;
  }

  /* ── Expanded (hover / keyboard focus): fill the whole container ── */
  .proy-showcase > .proy-card:hover,
  .proy-showcase > .proy-card:focus-within {
    position: absolute;
    top: 0; left: 0; right: 0;
    /* Grow to fit the content instead of being locked to the box: the copy
       (title + 6-line teaser + tags) is often taller than the fixed showcase
       height, and clamping to it clipped the bottom rows. min-height keeps
       short cards filling the box; height:auto lets tall ones extend down over
       the gap below (high z-index + shadow read it as a popover). */
    bottom: auto;
    height: auto;
    min-height: 100%;
    /* Span the whole grid: an abs-pos grid item is otherwise contained by its
       own grid area (its compact row), so the placement must be paired with a
       full-grid placement to anchor at the container's top-left. */
    grid-row: 1 / -1;
    grid-column: 1 / -1;
    z-index: 10;
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.45fr);
    background: var(--white);
    cursor: default;
    box-shadow: 0 24px 70px rgba(0,0,0,0.20);
  }

  /* Expanded info panel — full text, left column */
  .proy-showcase > .proy-card:hover > .proy-info,
  .proy-showcase > .proy-card:focus-within > .proy-info {
    position: relative; inset: auto;
    z-index: 1;
    padding: 32px 36px;
    background: none;
    justify-content: space-between;
    border-right: 1px solid var(--border);
    overflow: hidden;
  }
  .proy-showcase > .proy-card:hover .proy-num,
  .proy-showcase > .proy-card:focus-within .proy-num { color: var(--warm-50); }
  .proy-showcase > .proy-card:hover .proy-title,
  .proy-showcase > .proy-card:focus-within .proy-title {
    color: var(--black); font-size: var(--text-xl); margin-bottom: 18px;
  }
  .proy-showcase > .proy-card:hover .proy-desc,
  .proy-showcase > .proy-card:focus-within .proy-desc {
    /* Slightly smaller body + a generous clamp so the full teaser fits
       (the longest project copies ran past the old 6-line clamp). */
    display: -webkit-box; -webkit-line-clamp: 14; -webkit-box-orient: vertical;
    overflow: hidden; margin-top: 4px; font-size: var(--text-sm);
  }
  .proy-showcase > .proy-card:hover .proy-tags,
  .proy-showcase > .proy-card:focus-within .proy-tags { display: flex; margin-top: 6px; }

  /* Expanded gallery — the carousel fills the right column, dots restored */
  .proy-showcase > .proy-card:hover > .proy-gallery,
  .proy-showcase > .proy-card:focus-within > .proy-gallery {
    position: relative; inset: auto;
  }
  .proy-showcase > .proy-card:hover > .proy-gallery .proy-dots,
  .proy-showcase > .proy-card:focus-within > .proy-gallery .proy-dots { display: flex; }

  /* Expanded gallery image fit: the project photos have variable aspect ratios,
     so a plain object-fit:cover crops them inconsistently (wide ones lose their
     sides, tall ones lose their top/bottom). Here we instead scale each image to
     the full frame width and show only its vertical-middle band clipped to the
     frame height — a consistent top/bottom crop across ratios. A short/wide image
     may then not reach the full height, letting the --warm-10 frame show as a thin
     band above/below (accepted trade-off for the consistent crop). */
  .proy-showcase > .proy-card:hover .proy-slide,
  .proy-showcase > .proy-card:focus-within .proy-slide { overflow: hidden; }
  .proy-showcase > .proy-card:hover .proy-slide img,
  .proy-showcase > .proy-card:focus-within .proy-slide img {
    position: absolute;
    left: 0; top: 50%;
    width: 100%; height: auto;
    transform: translateY(-50%);
  }
}

/* ═══════════════════════════════════════════════════════════════
   PROYECTOS — the ONE mobile card layout, ≤768px (tasks 1 & 3)
   ---------------------------------------------------------------
   Single source of truth for the phone/tablet-portrait proyectos
   cards. Everything below 769px (the desktop showcase begins at
   768.99px) renders the SAME dense, collapsed "number + title" card
   with a tap-to-expand fullscreen overlay — the look small phones
   (xxs/xs) always had, now applied uniformly up through sm (480) and
   md (640) to the 768 divide. Previously these rules were split
   across three narrower caps (collapse ≤390.98 per-page, minimalist
   stack + dense card ≤540.98 in styles.css, homepage force-collapse
   ≤430.98) so 481–768px fell back to the two-column .proy-card with
   its 420px min-height and full gallery — which overflowed badly.
   Scoped via `.proy-bg-grid` (homepage #proyectos + every /proyectos/
   <main> in all four languages) and !important so one central block
   beats the base .proy-card rules AND the per-page inline <style>
   that loads after this file. The narrower per-page ≤390.98 collapse
   blocks are now redundant subsets of this rule; they are left in
   place (harmless) rather than editing 8 files.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768.98px) {
  /* Breathing room above the first card in the collapsed card layout
     (was 0 — the tile block sat flush against the header). Only applies
     in this ≤768.98px card layout; the >768.98px carousel layout keeps
     its own showcase spacing. */
  .proy-bg-grid .proy-showcase { padding-top: 24px !important; }
  /* Stack + strip the two-column desktop card geometry (kills the 420px
     min-height that caused the md overflow). */
  .proy-bg-grid .proy-showcase > .proy-card {
    grid-template-columns: 1fr !important;
    margin-top: 0 !important;
    min-height: 0 !important;
  }

  /* Collapsed card (default state): show only number + title. Hide the
     gallery, description and tags until the card is tapped open. */
  .proy-bg-grid .proy-showcase > .proy-card:not(.is-expanded) > .proy-gallery,
  .proy-bg-grid .proy-showcase > .proy-card:not(.is-expanded) .proy-desc,
  .proy-bg-grid .proy-showcase > .proy-card:not(.is-expanded) .proy-tags { display: none !important; }

  /* Collapsed card chrome: service-card border over a 60%-white fill
     (40% transparency — lets more of the diagonal bg-grid show through
     than the previous 20%), −50% padding. */
  .proy-bg-grid .proy-showcase > .proy-card:not(.is-expanded) {
    border: 1px solid #d0d0d0 !important;
    border-radius: 4px !important;
    background: rgba(255, 255, 255, 0.6) !important;
    overflow: clip;
  }
  .proy-bg-grid .proy-showcase > .proy-card:not(.is-expanded) + .proy-card:not(.is-expanded) { margin-top: 1px !important; }
  .proy-bg-grid .proy-showcase > .proy-card:not(.is-expanded) > .proy-info { padding: 8px 7px !important; border-right: none !important; border-bottom: none !important; }
  .proy-bg-grid .proy-showcase > .proy-card:not(.is-expanded) .proy-title { font-size: var(--text-xs) !important; line-height: 1.15 !important; margin-bottom: 4px !important; }
  .proy-bg-grid .proy-showcase > .proy-card:not(.is-expanded) .proy-num { margin-bottom: 3px !important; font-size: 0.6875rem !important; }

  /* Collapsed-card tap hint (localized via <html lang>), right-aligned. */
  .proy-showcase .proy-card:not(.is-expanded) > .proy-info::after {
    content: "Ver proyecto →";
    display: block;
    margin-top: 2px;
    font-size: 0.6875rem;
    letter-spacing: var(--ls-tight);
    text-transform: uppercase;
    text-align: right;
    color: var(--black);
  }
  html[lang="en"] .proy-showcase .proy-card:not(.is-expanded) > .proy-info::after { content: "View project →"; }
  html[lang="it"] .proy-showcase .proy-card:not(.is-expanded) > .proy-info::after { content: "Vedi progetto →"; }
  html[lang="fr"] .proy-showcase .proy-card:not(.is-expanded) > .proy-info::after { content: "Voir le projet →"; }

  /* Expanded (tap-to-fullscreen) card — type + gallery. The overlay
     positioning itself lives in the ≤768.98px block far above. */
  .proy-bg-grid .proy-showcase > .proy-card.is-expanded .proy-title { font-size: calc(var(--text-base) * 0.8) !important; }
  .proy-bg-grid .proy-showcase > .proy-card.is-expanded .proy-desc { font-size: calc(var(--text-base) * 0.85) !important; }
  .proy-bg-grid .proy-showcase > .proy-card.is-expanded .proy-gallery,
  .proy-bg-grid .proy-showcase > .proy-card.is-expanded .proy-carousel { background: transparent !important; }

  /* Project tags dropped on the whole mobile band (collapsed cards already
     hide them; keep the expanded card free of them too). */
  .proy-bg-grid .proy-showcase .proy-card .proy-tags { display: none !important; }
}

/* Nav link activo */
.nav-links a.nav-active:not(.nav-cta) {
  color: var(--black) !important;
  border-bottom: 1px solid var(--black);
  padding-bottom: 2px;
}
.nav-links a.nav-cta.nav-active {
  color: var(--white) !important;
  border-bottom: 1px solid var(--white) !important;
}
/* Active CTA on hover: match the normal CTA hover (white bg → black text),
   otherwise the active white text stays white on the white hover bg and vanishes. */
.nav-links a.nav-cta.nav-active:hover {
  color: var(--black) !important;
  border-bottom-color: var(--black) !important;
}

/* ═══════════════════════════════════════
   SECCIÓN PROYECTOS
═══════════════════════════════════════ */
#proyectos { background: var(--white); }

/* Grid de proyectos */
.proyectos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  margin-top: 56px;
  box-shadow: 0 24px 70px rgba(0,0,0,0.20);
}
.proyecto-card {
  background: var(--white);
  transition: background 0.3s;
  cursor: default;
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(0,0,0,0.20);
}
.proyecto-card:hover { background: var(--warm-10); }
.proyecto-img {
  width: 100%; aspect-ratio: 16/9;
  object-fit: cover; display: block;
  background: var(--warm-10);
}
.proyecto-img-placeholder {
  width: 100%; aspect-ratio: 16/9;
  background: var(--warm-10);
  display: flex; align-items: center; justify-content: center;
}
.proyecto-img-placeholder span {
  font-size: var(--text-2xs); letter-spacing: var(--ls-caps); text-transform: uppercase;
  color: var(--warm-50);
}
.proyecto-info { padding: 28px; }
.proyecto-tag {
  font-size: var(--text-2xs); letter-spacing: var(--ls-caps); text-transform: uppercase;
  color: var(--warm-50); margin-bottom: 10px; display: block;
}
.proyecto-nombre {
  font-size: var(--text-lg); font-weight: var(--fw-medium);
  letter-spacing: 0.02em; color: var(--black);
  margin-bottom: 10px;
}
.proyecto-desc {
  font-size: var(--text-base); font-weight: var(--fw-light);
  color: var(--warm-50); line-height: 1.65;
}

/* Estado vacío */
.proyectos-empty {
  border: 1px solid var(--border);
  padding: 100px 60px;
  text-align: center;
  margin-top: 56px;
}
.proyectos-empty h3 {
  font-size: var(--text-xl); font-weight: var(--fw-light);
  margin-bottom: 14px; color: var(--black);
}
.proyectos-empty p {
  font-size: var(--text-md); font-weight: var(--fw-light);
  color: var(--warm-50); max-width: 380px;
  margin: 0 auto; line-height: 1.7;
}

/* ═══════════════════════════════════════
   PANEL ADMIN (oculto por defecto)
═══════════════════════════════════════ */
#admin-toggle-btn {
  position: fixed; bottom: 32px; right: 32px;
  background: var(--black); color: var(--white);
  font-family: inherit; font-size: var(--text-2xs); font-weight: var(--fw-medium);
  letter-spacing: var(--ls-caps); text-transform: uppercase;
  padding: 12px 20px; border: none; cursor: pointer;
  z-index: 200; transition: opacity 0.3s;
  opacity: 0.18;
}
#admin-toggle-btn:hover { opacity: 1; }

#admin-panel {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 300;
  align-items: center; justify-content: center;
}
#admin-panel.open { display: flex; }

.admin-box {
  background: var(--white);
  width: 560px; max-height: 90vh;
  overflow-y: auto;
  border: 1px solid var(--border);
  padding: 48px;
}
.admin-box h3 {
  font-size: var(--text-xl); font-weight: var(--fw-medium);
  letter-spacing: 0.04em; color: var(--black);
  margin-bottom: 32px;
}
.admin-field { margin-bottom: 20px; }
.admin-field label {
  font-size: var(--text-2xs); font-weight: var(--fw-medium);
  letter-spacing: var(--ls-caps); text-transform: uppercase;
  color: var(--warm-50); display: block; margin-bottom: 8px;
}
.admin-field input,
.admin-field select,
.admin-field textarea {
  width: 100%; background: transparent;
  border: none; border-bottom: 1px solid var(--border);
  color: var(--black); font-family: inherit;
  font-size: var(--text-md); font-weight: var(--fw-light);
  padding: 8px 0 12px; outline: none;
  transition: border-color 0.3s;
}
.admin-field input:focus,
.admin-field select:focus,
.admin-field textarea:focus { border-bottom-color: var(--black); }
.admin-field textarea { resize: vertical; min-height: 80px; }
.admin-field select option { background: var(--white); }

.admin-actions {
  display: flex; gap: 16px;
  margin-top: 32px; justify-content: flex-end;
}
.admin-btn-cancel {
  font-family: inherit; font-size: var(--text-sm); font-weight: var(--fw-normal);
  letter-spacing: var(--ls-caps); text-transform: uppercase;
  color: var(--warm-50); background: none; border: none;
  cursor: pointer; transition: color 0.3s;
}
.admin-btn-cancel:hover { color: var(--black); }
.admin-btn-save {
  font-family: inherit; font-size: var(--text-sm); font-weight: var(--fw-medium);
  letter-spacing: var(--ls-caps); text-transform: uppercase;
  background: var(--black); color: var(--white);
  border: 1px solid var(--black); padding: 12px 28px;
  cursor: pointer; transition: all 0.3s;
}
.admin-btn-save:hover {
  background: transparent; color: var(--black);
}

/* Lista de proyectos en panel admin */
.admin-list { margin-bottom: 32px; }
.admin-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 0; border-bottom: 1px solid var(--border);
  gap: 16px;
}
.admin-item-info { flex: 1; }
.admin-item-nombre {
  font-size: var(--text-md); font-weight: var(--fw-normal); color: var(--black);
}
.admin-item-tag {
  font-size: var(--text-2xs); letter-spacing: var(--ls-tight); text-transform: uppercase;
  color: var(--warm-50); margin-top: 4px;
}
.admin-item-del {
  font-family: inherit; font-size: var(--text-2xs); font-weight: var(--fw-normal);
  letter-spacing: var(--ls-tight); text-transform: uppercase;
  color: var(--warm-50); background: none; border: none;
  cursor: pointer; transition: color 0.3s; flex-shrink: 0;
}
.admin-item-del:hover { color: var(--black); }

.admin-divider {
  border: none; border-top: 1px solid var(--border);
  margin: 28px 0;
}

@media (max-width: 1024.98px) {
  .proyectos-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640.98px) {
  .proyectos-grid { grid-template-columns: 1fr; }
  .admin-box { width: 100%; max-height: 100vh; padding: 32px 24px; }
}

/* ══════════════════════════════════════════════════════════════
   MULTI-PAGE SHELL — grouped nav dropdowns, mobile accordion, footer
   Added for the multi-page conversion (v-0.04). Additive: does not
   alter the legacy single-page nav rules above.
══════════════════════════════════════════════════════════════ */

/* Neutralise the full-viewport <section> behaviour (single-page design) for
   multi-page content, which lives inside <main>. Homepage sections are direct
   children of <body> and are unaffected. */
main section { min-height: 0; display: block; }

/* --- Desktop dropdown parents (Servicios ▾ / Estudio ▾) --- */
.nav-group { position: relative; }
.nav-group-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer;
}
.nav-caret {
  width: 9px; height: 9px; flex: 0 0 auto;
  transition: transform 0.25s ease;
}
.nav-group:hover .nav-caret,
.nav-group:focus-within .nav-caret { transform: rotate(180deg); }

.nav-dropdown {
  position: absolute; top: 100%; left: 0;
  margin: 0; padding: 10px 0;
  min-width: 250px;
  list-style: none;
  background: var(--white);
  border: 1px solid var(--border);
  box-shadow: 0 12px 30px rgba(0,0,0,0.08);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  z-index: 200;
}
/* Bridge the gap so the menu doesn't close between link and panel */
.nav-dropdown::before {
  content: ""; position: absolute; top: -10px; left: 0; right: 0; height: 10px;
}
.nav-group:hover .nav-dropdown,
.nav-group:focus-within .nav-dropdown {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.nav-dropdown li { margin: 0; }
.nav-dropdown a {
  display: block; padding: 9px 22px;
  font-size: var(--text-xs); font-weight: var(--fw-normal);
  letter-spacing: var(--ls-tight); text-transform: none;
  color: var(--warm-50); white-space: nowrap;
  transition: color 0.2s, background 0.2s;
}
.nav-dropdown a:hover,
.nav-dropdown a:focus-visible { color: var(--black); background: var(--warm-10); }

/* --- Mobile accordion (inside the existing .nav-mobile-menu overlay) --- */
.nav-mobile-menu .m-group { width: 80%; }
.nav-mobile-menu .m-group-head {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  border-bottom: 1px solid var(--border);
}
.nav-mobile-menu .m-group-head > a {
  border: none; width: auto; padding: 18px 0; text-align: center; flex: 0 1 auto;
}
.nav-mobile-menu .m-group-toggle {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer;
  padding: 12px; color: var(--black);
  display: flex; align-items: center;
}
.nav-mobile-menu .m-group-toggle .nav-caret { width: 14px; height: 14px; }
.nav-mobile-menu .m-group.open .m-group-toggle .nav-caret { transform: rotate(180deg); }
.nav-mobile-menu .m-sub {
  list-style: none; margin: 0; padding: 0;
  max-height: 0; overflow: hidden;
  transition: max-height 0.3s ease;
}
.nav-mobile-menu .m-group.open .m-sub { max-height: 520px; }
.nav-mobile-menu .m-sub a {
  font-size: var(--text-lg); font-weight: var(--fw-light);
  padding: 12px 0; width: 100%;
  border-bottom: 1px solid var(--border);
  color: var(--warm-50);
}
.nav-mobile-menu .m-sub a:first-child { border-top: none; }

/* --- Footer (grouped taxonomy → real URLs) --- */
.site-footer {
  border-top: 1px solid var(--border);
  padding: 28px var(--gutter) 40px;
  background: var(--white);
}
@media (max-width: 900.98px){ .site-footer { padding-left: var(--gutter-sm); padding-right: var(--gutter-sm); } }
.site-footer-top {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  margin-bottom: 16px;
}
.footer-tagline {
  font-size: var(--text-2xs); letter-spacing: var(--ls-caps);
  text-transform: uppercase; color: var(--warm-50);
}
.footer-grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr;
  column-gap: 40px; row-gap: 13px;
}
@media (max-width: 900.98px){ .footer-grid { grid-template-columns: 1fr 1fr; row-gap: 13px; } }
@media (max-width: 540.98px){ .footer-grid { grid-template-columns: 1fr; } }
.footer-desc {
  font-size: var(--text-sm); font-weight: var(--fw-light);
  line-height: 1.15; color: var(--warm-50); max-width: 34ch;
}
.footer-col h2 {
  font-size: var(--text-2xs); letter-spacing: var(--ls-caps);
  text-transform: uppercase; color: var(--black);
  font-weight: var(--fw-medium); margin-bottom: 16px;
}
.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links li { margin-bottom: 0; }
.footer-links a {
  font-size: var(--text-sm); font-weight: var(--fw-light);
  color: var(--warm-50); text-decoration: none; transition: color 0.2s;
}
.footer-links a:hover { color: var(--black); }
.site-footer-bottom {
  margin-top: 0; padding-top: 24px;
  border-top: 1px solid var(--border);
}
.footer-copy { font-size: var(--text-2xs); color: var(--warm-50); }

/* Homepage teaser cards: make the whole .service-card clickable via a stretched link.
   (.service-card is position:relative, so the ::after overlay fills the card.) */
.service-card .svc-more {
  display: block; text-align: right; margin-top: 20px;
  font-size: var(--text-2xs); letter-spacing: var(--ls-caps); text-transform: uppercase;
  color: var(--black); text-decoration: none;
}
.service-card .svc-more::after { content: ""; position: absolute; inset: 0; }

/* ═══════════════════════════════════════════════════════════════
   URL-tree refactor (Phase 3) — mega-menu, mobile nested accordion,
   hub category sections. Additive; extends the existing .nav-* system.
═══════════════════════════════════════════════════════════════ */

/* --- Desktop mega-menu (Servicios): reuses .nav-dropdown reveal, 4 columns.
   Servicios sits on the right half of the navbar (.nav-links is margin-left:auto).
   The panel is pinned (fixed) to the navbar's right gutter and grows LEFTWARD, and
   its columns are sized to content so every category title fits on a single line
   while the whole panel stays on screen — even at the ~1050px min desktop width. --- */
.nav-dropdown.nav-mega {
  position: fixed;
  top: var(--nav-h); left: auto; right: var(--gutter);
  display: grid;
  grid-template-columns: repeat(4, max-content);
  gap: 4px 30px;
  padding: 22px 26px;
  min-width: 0;
  width: max-content;
  max-width: calc(100vw - var(--gutter) - 16px);
}
/* Hover-bridge: the fixed panel drops to the navbar's bottom edge, so the bridge
   must span the full navbar height (and the panel's full width) to keep the pointer
   over a .nav-group descendant while travelling from the toggle down to the panel. */
.nav-dropdown.nav-mega::before {
  left: 0; right: 0; width: auto;
  top: -32px; height: 32px;
}
.nav-mega-col { min-width: 0; }
.nav-mega .nav-mega-head {
  display: block; padding: 6px 0 8px;
  font-size: var(--text-xs); font-weight: var(--fw-medium);
  letter-spacing: var(--ls-tight); color: var(--black);
  border-bottom: 1px solid var(--border); margin-bottom: 6px;
  white-space: nowrap; line-height: 1.25;
}
.nav-mega .nav-mega-head:hover,
.nav-mega .nav-mega-head:focus-visible { color: var(--warm-50); background: none; }
.nav-mega-col ul { list-style: none; margin: 0; padding: 0; }
.nav-mega-col ul a {
  display: block; padding: 7px 0;
  font-size: var(--text-xs); font-weight: var(--fw-normal);
  letter-spacing: var(--ls-tight); color: var(--warm-50);
  white-space: normal; line-height: 1.3;
}
.nav-mega-col ul a:hover,
.nav-mega-col ul a:focus-visible { color: var(--black); background: none; }
/* 2-column mega variant (Estudio: Sobre nosotros + Oficinas).
   Unlike the wide 4-column Servicios mega (pinned to the navbar's right gutter),
   this narrow panel is anchored to its OWN nav-group so it drops directly under the
   "Estudio" title — same title-relative position in every navbar regardless of how
   many language chips are present (4 on the homepage, fewer on inner pages).
   `right: 0` right-aligns it under the title and grows it LEFTWARD, so it can never
   overflow the viewport. `top: calc(100% + 32px)` drops it to the navbar's bottom
   edge, matching where the Servicios mega sits (the 32px == the label-bottom→navbar-
   bottom gap the inherited ::before hover-bridge already spans). */
.nav-dropdown.nav-mega.nav-mega-2 {
  grid-template-columns: repeat(2, max-content);
  position: absolute;
  top: calc(100% + 32px);
  right: 0;
  left: auto;
}
/* Non-link mega heading (a category label with no landing page, e.g. Oficinas) */
.nav-mega .nav-mega-head.is-label { cursor: default; }
.nav-mega .nav-mega-head.is-label:hover,
.nav-mega .nav-mega-head.is-label:focus-visible { color: var(--black); }

/* --- Mobile: 2nd-level nested accordion (category → its leaves) --- */
.nav-mobile-menu .m-subgroup { list-style: none; }
.nav-mobile-menu .m-subgroup-head {
  position: relative;
  display: flex; align-items: center; justify-content: center;
}
.nav-mobile-menu .m-subgroup-head > a {
  border: none; width: auto; padding: 12px 0; text-align: center; flex: 0 1 auto;
  font-size: var(--text-lg); font-weight: var(--fw-normal); color: var(--black);
}
.nav-mobile-menu .m-subgroup-toggle {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer;
  padding: 10px; color: var(--warm-50); display: flex; align-items: center;
}
.nav-mobile-menu .m-subgroup-toggle .nav-caret { width: 12px; height: 12px; }
.nav-mobile-menu .m-subgroup.open .m-subgroup-toggle .nav-caret { transform: rotate(180deg); }
.nav-mobile-menu .m-subsub {
  list-style: none; margin: 0 0 6px; padding: 0;
  max-height: 0; overflow: hidden; transition: max-height 0.3s ease;
}
.nav-mobile-menu .m-subgroup.open .m-subsub { max-height: 360px; }
.nav-mobile-menu .m-subsub a {
  display: block; text-align: center;
  font-size: var(--text-base); font-weight: var(--fw-light);
  padding: 10px 0; width: 100%; border-bottom: none; color: var(--warm-50);
}
/* Parent must accommodate expanded nested subgroups */
.nav-mobile-menu .m-group.open .m-sub#m-servicios { max-height: 1600px; }
.nav-mobile-menu .m-sub .m-subgroup { border-bottom: 1px solid var(--border); }

/* ≤sm (≤540px): tighten mobile-menu spacing so a fully-expanded accordion
   (all categories + their leaves) doesn't overflow the viewport. Extended
   from the old ≤xs (≤390px) bound so standard/large phones up to sm match. */
@media (max-width: 540.98px) {
  .nav-mobile-menu a { padding: 11px 0; }
  .nav-mobile-menu .m-group-head > a { padding: 11px 0; }
  .nav-mobile-menu .m-subgroup-head > a { padding: 8px 0; }
  .nav-mobile-menu .m-subsub a { padding: 6px 0; }
  .nav-mobile-menu .m-subsub { margin-bottom: 2px; }
  .nav-mobile-menu a.nav-cta { margin-top: 16px; padding: 12px 32px; }
}

/* --- Hub: category sections --- */
.hub-cat { padding: 8px var(--gutter) 4px; }
@media (max-width: 900.98px){ .hub-cat { padding-left: var(--gutter-sm); padding-right: var(--gutter-sm); } }
.hub-cat-head {
  display: flex; align-items: baseline; gap: 12px;
  margin: 26px 0 12px; padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.hub-cat-head a {
  font-size: var(--text-lg); font-weight: var(--fw-medium);
  color: var(--black); text-decoration: none; letter-spacing: -0.01em;
}
.hub-cat-head a:hover { color: var(--warm-50); }
.hub-cat-head .hub-cat-more {
  font-size: var(--text-2xs); letter-spacing: var(--ls-caps); text-transform: uppercase;
  color: var(--warm-50); text-decoration: none;
}
.service-card.service-card--secondary { opacity: 0.92; }
.service-card.service-card--secondary .service-title::after {
  content: " · relacionado"; font-size: 0.6875rem; color: var(--warm-50);
  letter-spacing: var(--ls-tight); text-transform: none;
}

/* ═══════════════════════════════════════════════════════════════
   BREAKPOINT xxl — Very large / full-HD+ screens (≥1920px)
   The homepage full-screen sections pin their scroll-down arrow to the
   bottom with margin-top:auto, which absorbs ALL the free space and
   shoves the header + cards to the TOP of the section. On tall ≥1920
   screens that strands the cards high with a big empty band below. Give
   the header its own margin-top:auto so the free space splits evenly
   above and below the content — centering the header+cards block while
   the arrow stays at the bottom.
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 1920px) {
  #servicios .hub-head { margin-top: auto; }
}