/* CELTIS LANDING ============================================ */
@import url("../colors_and_type.css");

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

:root {
  --section-gap: 0px;
  --section-side: 0px;
}
body {
  font-family: "Stolzl", "Inter", system-ui, sans-serif;
  font-weight: 300;
  color: var(--celtis-ink);
  background: var(--celtis-cream);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }

.container { width: 100%; padding: 0 clamp(16px, 7.6vw, 100px); }

/* REVEAL ANIMATIONS -------------------------------------- */
.rv {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition: opacity .85s var(--ease-out), transform .85s var(--ease-out);
  will-change: opacity, transform;
}
.rv-in { opacity: 1; transform: translate3d(0, 0, 0); }
.rv-up { /* default direction; modifier kept for future variants */ }
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none; }
  .hero-word { opacity: 1; transform: none; animation: none; }
  .hero-photo, .hero-tag { transition: none; }
  .site-header { transition: none; }
}

/* TYPE PRIMITIVES ----------------------------------------- */
.eyebrow {
  font-family: "Stolzl", sans-serif;
  font-weight: 400;
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--celtis-orange);
  display: inline-block;
}
.eyebrow.on-dark { color: var(--celtis-orange); }

.section-title {
  font-family: "Neue Haas Grotesk Display Pro", "Inter", sans-serif;
  font-weight: 300;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1.0;
  letter-spacing: -0.018em;
  color: var(--celtis-ink);
  margin: 22px 0 0;
  text-wrap: balance;
}
.section-title.on-dark { color: var(--celtis-cream); }
.title-hl {
  background-image: linear-gradient(var(--celtis-orange), var(--celtis-orange));
  background-repeat: no-repeat;
  background-position: left 62%;
  background-size: 0 .82em;
  color: var(--celtis-ink);
  font-style: normal;
  font-weight: inherit;
  transition: background-size 1.1s .35s cubic-bezier(.2,.7,.2,1);
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}
.rv-in .title-hl { background-size: 100% .82em; }
@media (prefers-reduced-motion: reduce) {
  .title-hl, .rv-in .title-hl { transition: none; background-size: 100% .82em; }
}

.lede {
  font-family: "Stolzl", sans-serif;
  font-weight: 300;
  font-size: clamp(18px, 1.4vw, 22px);
  line-height: 1.55;
  color: var(--celtis-ink);
  text-wrap: pretty;
  margin: 0;
}
.lede.on-dark { color: rgba(250,255,251,.8); }

/* BUTTONS ------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 16px 24px;
  font-family: "Stolzl", sans-serif;
  font-weight: 400;
  font-size: 15px;
  letter-spacing: .01em;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background .14s var(--ease-out), color .14s var(--ease-out), border-color .14s var(--ease-out);
}
.btn.big { padding: 18px 26px; font-size: 16px; }
.btn.primary {
  background: var(--celtis-orange);
  color: var(--celtis-cream);
  border-color: var(--celtis-orange);
}
.btn.primary:hover { background: var(--celtis-orange-deep); border-color: var(--celtis-orange-deep); }
.btn.outline-cream {
  background: rgba(250, 255, 251, 0.08);
  backdrop-filter: saturate(160%) blur(16px);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  color: var(--celtis-cream);
  border-color: rgba(250,255,251,.45);
  box-shadow: 0 1px 0 rgba(255,255,255,.18) inset;
}
.btn.outline-cream:hover { background: var(--celtis-cream); color: var(--celtis-ink); border-color: var(--celtis-cream); backdrop-filter: none; -webkit-backdrop-filter: none; }
.btn-arrow { display: inline-block; transition: transform .14s var(--ease-out); }
.btn:hover .btn-arrow { transform: translateX(4px); }

/* HEADER ------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: 100px 1fr 1fr 1fr 100px;
  gap: 0;
  margin: 0;
  background: rgba(250,255,251,.32);
  backdrop-filter: saturate(180%) blur(34px);
  -webkit-backdrop-filter: saturate(180%) blur(34px);
  border: 1px solid rgba(28,27,27,.55);
  border-left: 0;
  border-right: 0;
  border-radius: 0;
  height: 81px;
  overflow: hidden;
  transition: height .35s var(--ease-out), margin .35s var(--ease-out), grid-template-columns .35s var(--ease-out), box-shadow .35s var(--ease-out), background .35s var(--ease-out), backdrop-filter .35s var(--ease-out);
  will-change: height;
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 -1px 0 rgba(255,255,255,.25) inset, 0 14px 40px rgba(28,27,27,.10);
}
.site-header.is-shrunk {
  height: 54px;
  margin: 0;
  grid-template-columns: 64px 1fr 1fr 1fr 64px;
  background: rgba(250,255,251,.42);
  backdrop-filter: saturate(200%) blur(42px);
  -webkit-backdrop-filter: saturate(200%) blur(42px);
  box-shadow: 0 1px 0 rgba(255,255,255,.85) inset, 0 -1px 0 rgba(255,255,255,.3) inset, 0 18px 50px rgba(28,27,27,.16);
}
.hcell {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  height: 100%;
  font-family: "Stolzl", sans-serif;
  font-weight: 400;
  font-size: 14px;
  letter-spacing: .12em;
  color: var(--celtis-ink);
  background: transparent;
  border: 0;
  border-left: 1px solid rgba(28,27,27,.45);
  cursor: pointer;
  text-transform: uppercase;
  overflow: hidden;
  transition: font-size .35s var(--ease-out), letter-spacing .35s var(--ease-out), padding .35s var(--ease-out);
}
.hcell-label {
  position: relative;
  display: inline-block;
  color: var(--celtis-ink);
  background: linear-gradient(to right, var(--celtis-orange) 50%, var(--celtis-ink) 50%);
  background-size: 200% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: background-position .48s var(--ease-out);
  will-change: background-position;
}
.hcell:hover .hcell-label { background-position: 0 0; }
.site-header.is-shrunk .hcell { font-size: 11.5px; letter-spacing: .14em; }
.hcell:first-child { border-left: 0; }
.hcell-logo { padding: 18px 24px; }
.site-header.is-shrunk .hcell-logo { padding: 12px 16px; }
.hcell-logo,
.hcell-logo:hover { background: transparent; }
.hcell-mark {
  position: relative;
  display: block;
  width: 38px;
  aspect-ratio: 348 / 282;
  background: var(--celtis-orange);
  -webkit-mask: url("../assets/celtis-logo.svg") center/contain no-repeat;
          mask: url("../assets/celtis-logo.svg") center/contain no-repeat;
  overflow: hidden;
  transition: width .35s var(--ease-out);
}
.hcell-mark-fill {
  position: absolute;
  inset: 0;
  background: var(--celtis-ink);
  transform: translateX(-101%);
  transition: transform .48s var(--ease-out);
  will-change: transform;
}
.hcell-logo:hover .hcell-mark-fill { transform: translateX(0); }
.site-header.is-shrunk .hcell-mark { width: 24px; }
.hcell-lang {
  font-family: "Stolzl", sans-serif;
  font-weight: 400;
  letter-spacing: .12em;
}

/* HERO --------------------------------------------------- */
.hero {
  position: relative;
  margin: -65px var(--section-side) 0; /* tucks behind glass header */
  border-radius: 0;
  overflow: hidden;
  height: calc(100vh - 25px);
  height: calc(100dvh - 25px);
  min-height: 640px;
  max-height: 980px;
  z-index: 1;
}
.hero-photo {
  position: absolute; inset: 0;
  will-change: transform;
  transition: transform .05s linear;
}
.hero-photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.hero-photo-img {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .6s var(--ease-out);
}
.hero-photo-img.is-active { opacity: 1; }
.hero-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(28,27,27,.18) 0%, rgba(28,27,27,0) 38%, rgba(28,27,27,.45) 100%);
  pointer-events: none;
}
.hero-tag {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 max(56px, 6vw);
  gap: clamp(8px, 1vw, 18px);
}
.hero-word {
  font-family: "Neue Haas Grotesk Display Pro", "Inter", sans-serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(56px, 9.4vw, 144px);
  line-height: 1.0;
  letter-spacing: -0.012em;
  color: var(--celtis-cream);
  display: block;
  opacity: 0;
  transform: translate3d(-24px, 24px, 0);
  animation: heroWordIn 1100ms var(--ease-out) forwards;
}
.hero-word.w1 { margin-left: 0; animation-delay: 200ms; }
.hero-word.w2 { margin-left: clamp(80px, 14vw, 220px); animation-delay: 420ms; }
.hero-word.w3 { margin-left: clamp(160px, 28vw, 440px); animation-delay: 640ms; }
.hero-tag-solo { align-items: center; justify-content: center; padding: 0; }
.hero-mark {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.6vw, 28px);
  line-height: 1;
}
.hero-mark-cream { color: var(--celtis-cream); }
.hero-mark-logo {
  position: relative;
  display: block;
  flex-shrink: 0;
  width: clamp(160px, 28vw, 420px);
  height: clamp(160px, 28vw, 420px);
  opacity: 1;
  animation: heroLogoIn 600ms var(--ease-out) backwards;
}
.hero-mark-logo-glass {
  position: absolute;
  inset: 0;
  background: rgba(250,255,251,.32);
  backdrop-filter: saturate(180%) blur(34px);
  -webkit-backdrop-filter: saturate(180%) blur(34px);
  -webkit-mask: url("../assets/celtis-logo.svg") 50% 50% / contain no-repeat;
          mask: url("../assets/celtis-logo.svg") 50% 50% / contain no-repeat;
}
.hero-mark-logo-stroke {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  overflow: visible;
}
.hero-mark-text {
  display: block;
  width: clamp(200px, 35vw, 525px);
  background: transparent;
  border: 0;
  box-shadow: none;
  transition: opacity .65s var(--ease-out);
  will-change: opacity;
}
.hero-mark-text-stack {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 600 / 132;
  clip-path: inset(0 0 100% 0);
  -webkit-clip-path: inset(0 0 100% 0);
  transform: translate3d(0, -18px, 0);
  transition: clip-path .7s var(--ease-out), -webkit-clip-path .7s var(--ease-out), transform .7s var(--ease-out);
  will-change: clip-path, transform;
}
.hero-mark-text-glass {
  position: absolute;
  inset: 0;
  background: rgba(250,255,251,.32);
  backdrop-filter: saturate(180%) blur(34px);
  -webkit-backdrop-filter: saturate(180%) blur(34px);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 132'><text x='300' y='106' text-anchor='middle' font-family='sans-serif' font-weight='300' font-size='128' letter-spacing='-1' text-rendering='geometricPrecision' font-kerning='normal' fill='black'>CELTIS</text></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 132'><text x='300' y='106' text-anchor='middle' font-family='sans-serif' font-weight='300' font-size='128' letter-spacing='-1' text-rendering='geometricPrecision' font-kerning='normal' fill='black'>CELTIS</text></svg>") center/contain no-repeat;
}
.hero-mark-text-stroke {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  overflow: visible;
}
@keyframes heroLogoIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-mark-logo { animation: none; opacity: 1; transform: none; filter: none; }
  .hero-mark-text { transition: none; }
  .hero-mark-text-stack { opacity: 1; transform: none; clip-path: none; -webkit-clip-path: none; transition: none; }
}
.hero-word-solo {
  font-style: normal;
  font-weight: 300;
  font-size: clamp(96px, 18vw, 280px);
  letter-spacing: -0.03em;
  margin-left: 0;
  animation-delay: 200ms;
  text-align: center;
}
@keyframes heroWordIn {
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

.hero-foot {
  position: absolute;
  left: 16px; right: 16px; bottom: 16px;
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px max(28px, 3vw);
  background: rgba(28, 27, 27, 0.28);
  backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  border: 1px solid rgba(250, 255, 251, 0.18);
  box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 12px 32px rgba(0,0,0,.18);
  font-family: ui-monospace, "JetBrains Mono", "SFMono-Regular", Menlo, monospace;
  font-size: 11px;
  letter-spacing: .14em;
  color: rgba(250,255,251,.85);
  text-transform: uppercase;
  pointer-events: none;
}
.hero-foot .meta { color: var(--celtis-orange); font-family: "Stolzl", sans-serif; font-weight: 500; letter-spacing: .18em; }

/* CELTIS — qué es (puente Hero → QueHacemos) ------------ */
.ce {
  position: relative;
  z-index: 2;
  padding: 0;
  background: var(--celtis-cream);
  border: 1px solid var(--celtis-ink);
  border-left: 0;
  border-right: 0;
  margin: 0 var(--section-side);
  overflow: visible;
}
.ce-screen {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(80px, 12vh, 140px) 0;
}
.ce-screen + .ce-screen { border-top: 1px solid rgba(28,27,27,.12); }
.ce::before {
  content: "";
  position: absolute;
  left: clamp(16px, 7.4vw, 100px);
  right: clamp(16px, 7.4vw, 100px);
  top: 0;
  height: 1px;
  background: var(--celtis-ink);
  opacity: .12;
}
.ce-row {
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 6vw, 96px);
}
.ce-head { max-width: 1200px; }
.ce-head .section-title { margin-top: 0; }
.ce-body {
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 4vw, 64px);
  width: 100%;
}
.ce-lede {
  font-family: "Neue Haas Grotesk Display Pro", "Inter", sans-serif;
  font-weight: 300;
  font-size: clamp(40px, 4.4vw, 68px);
  line-height: 1.05;
  letter-spacing: -0.018em;
  color: var(--celtis-ink);
  margin: 0;
  text-wrap: balance;
  max-width: none;
}
.ce-lede em {
  font-family: "Neue Haas Grotesk Display Pro", "Inter", sans-serif;
  font-style: italic;
  font-weight: 300;
  color: var(--celtis-orange);
  letter-spacing: -0.005em;
}

/* Reveal especial para el lede del Celtis: slide up + fade lento */
.ce-lede.rv {
  opacity: 0;
  transform: translate3d(0, 44px, 0);
  transition:
    opacity 1.1s var(--ease-out),
    transform 1.1s var(--ease-out);
  will-change: opacity, transform;
}
.ce-lede.rv.rv-in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
@media (prefers-reduced-motion: reduce) {
  .ce-lede.rv,
  .ce-lede.rv.rv-in {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* CELTIS PILLARS — desktop editorial / mobile sticky-swap ------------ */
.ce-screen-pillars {
  position: relative;
  border-top: 1px solid var(--celtis-ink);
}
.ce-pillars-sticky {
  padding-top: clamp(96px, 14vh, 160px);
  padding-bottom: clamp(96px, 14vh, 160px);
}
.ce-pillars-deck { position: relative; width: 100%; }
.ce-pillars-text {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 3.6vh, 64px);
}
.ce-pillars-logo { display: none; }
.ce-pillar-step {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(40px, 5vw, 96px);
  align-items: center;
  padding: clamp(20px, 2vh, 36px) 0;
  border-top: 1px solid rgba(28,27,27,.18);
}
.ce-pillar-step:first-child { border-top: 0; }
.ce-pillar-side {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.ce-pillar-title {
  font-family: "Neue Haas Grotesk Display Pro", "Inter", sans-serif;
  font-weight: 300;
  font-size: clamp(56px, 9.5vw, 156px);
  line-height: 1;
  letter-spacing: -0.024em;
  color: var(--celtis-ink);
  margin: 0;
  white-space: nowrap;
}
.ce-pillar-title-text {
  display: inline-block;
  padding: 0 .04em;
  background: linear-gradient(var(--celtis-orange), var(--celtis-orange)) no-repeat left center / 0% 100%;
  transition: background-size .9s var(--ease-out) .1s;
  /* Pixel-perfect: bg fits glyph bounds */
  text-box: trim-both cap text;
}
.ce-pillar-step.is-seen .ce-pillar-title-text {
  background-size: 100% 100%;
}
@supports not (text-box: trim-both cap text) {
  .ce-pillar-title-text { padding: .04em .04em; }
}
.ce-pillar-card {
  border: 1px solid var(--celtis-orange);
  padding: clamp(22px, 2.4vw, 36px) clamp(24px, 2.6vw, 40px);
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  transition: opacity .65s var(--ease-out) .25s, transform .65s var(--ease-out) .25s;
}
.ce-pillar-step.is-seen .ce-pillar-card {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.ce-pillar-desc {
  font-family: "Stolzl", sans-serif;
  font-weight: 300;
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.6;
  color: rgba(28,27,27,.78);
  margin: 0;
  max-width: 50ch;
  text-wrap: pretty;
}
/* Rule legacy (mobile lo oculta, desktop ya no lo usa) */
.ce-pillar-rule { display: none; }

.ce-segue {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 clamp(16px, 7.4vw, 100px);
  font-family: "Stolzl", sans-serif;
  font-weight: 400;
  font-size: 14px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg2);
}
.ce-segue-mark {
  color: var(--celtis-orange);
  font-size: 18px;
  display: inline-block;
  animation: ceSegueBob 2.4s var(--ease-out) infinite;
}
@keyframes ceSegueBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}

/* QUÉ HACEMOS — sticky stage --------------------------- */
.qh {
  position: relative;
  z-index: 2;
  height: calc(100vh + 180vh); /* runway: 1 stage + ~45vh per card transition */
  height: calc(100dvh + 180dvh);
  background: var(--celtis-cream);
  border: 1px solid var(--celtis-ink);
  border-top: 0;
  border-left: 0;
  border-right: 0;
  border-radius: 0;
  margin: 0 var(--section-side);
}
.qh-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  padding-top: clamp(140px, 18vh, 200px);
  padding-bottom: clamp(48px, 8vh, 100px);
}
.qh-stage-inner {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-rows: auto auto;
  gap: clamp(40px, 5vw, 72px);
  height: auto;
}
.qh-head {
  max-width: 1100px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.qh-head .section-title {
  margin: 0;
  font-size: clamp(48px, 6.4vw, 100px);
  letter-spacing: -0.024em;
  line-height: .98;
  font-weight: 300;
}
.qh-head .eyebrow { margin-top: 2px; }

/* Capability cards — animadas según --data-step en .qh */
.cap-grid {
  position: relative;
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;
  gap: 0;
}
.cap-card {
  position: relative;
  display: block;
  width: 100%;
  background: var(--celtis-cream);
  border: 1.5px solid var(--celtis-orange);
  border-radius: 0;
  padding: 0 0 clamp(20px, 2vw, 28px);
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition: opacity .55s var(--ease-out), transform .55s var(--ease-out);
  overflow: hidden;
}
.cap-card + .cap-card { border-left-width: 0; }
.cap-card:nth-child(2n+1) { border-left-width: 1.5px; }
.cap-card:nth-child(n+3) { border-top-width: 0; }
.cap-card.is-on { opacity: 1; transform: translate3d(0, 0, 0); }

.qh-progress, .qh-progress-tick { display: none; }
.qh-progress-tick {
  height: 2px;
  width: 56px;
  background: rgba(28,27,27,.14);
  transition: background .35s var(--ease-out), width .35s var(--ease-out);
}
.qh-progress-tick.is-on { background: var(--celtis-orange); }

.cap-tab {
  display: inline-block;
  background: var(--celtis-orange);
  color: var(--celtis-ink);
  padding: 0;
  margin: 0 0 18px;
  line-height: 0;
  overflow: hidden;
}
.cap-n {
  font-family: ui-monospace, "JetBrains Mono", "SFMono-Regular", Menlo, monospace;
  font-size: 11px;
  letter-spacing: .14em;
  color: rgba(28,27,27,.7);
}
.cap-tab-label {
  display: inline-block;
  font-family: "Neue Haas Grotesk Display Pro", "Inter", sans-serif;
  font-weight: 400;
  font-size: clamp(22px, 2vw, 32px);
  line-height: 1;
  letter-spacing: -0.012em;
  color: var(--celtis-ink);
  text-transform: none;
  white-space: nowrap;
  margin: 0;
  /* Pixel-perfect: recorta leading arriba a cap-height, abajo a descender (incluye p, g, j) */
  text-box: trim-both cap text;
}
/* Fallback para navegadores sin text-box: recorta con margins negativos */
@supports not (text-box: trim-both cap text) {
  .cap-tab-label::before,
  .cap-tab-label::after {
    content: "";
    display: block;
    height: 0;
  }
  .cap-tab-label::before { margin-top: -0.18em; }
  .cap-tab-label::after { margin-bottom: -0.04em; }
}
.cap-body {
  position: relative;
  padding: 0 clamp(24px, 2.6vw, 40px);
  max-width: 56ch;
}
.cap-t {
  font-family: "Neue Haas Grotesk Display Pro", "Inter", sans-serif;
  font-weight: 400;
  font-size: clamp(20px, 1.6vw, 24px);
  line-height: 1.15;
  letter-spacing: -0.005em;
  color: var(--celtis-ink);
  margin: 0 0 10px;
}
.cap-d {
  font-family: "Stolzl", sans-serif;
  font-weight: 300;
  font-size: clamp(14px, 1vw, 16px);
  line-height: 1.5;
  color: var(--fg2);
  margin: 0;
  text-wrap: pretty;
}

.qh-foot {
  margin: clamp(48px, 6vw, 80px) clamp(24px, 4vw, 64px) 0;
  padding: 28px 0 0;
  border-top: 1px solid var(--line);
  font-family: "Stolzl", sans-serif;
  font-weight: 300;
  font-size: 17px;
  color: var(--fg2);
  display: flex; align-items: baseline; gap: 16px;
}
.qh-foot-mark {
  color: var(--celtis-orange);
  font-family: "Neue Haas Grotesk Display Pro", sans-serif;
  font-size: 22px;
}
.qh-foot a { color: var(--celtis-ink); border-bottom: 1px solid var(--celtis-orange); padding-bottom: 1px; }
.qh-foot a:hover { color: var(--celtis-orange); }

/* NOSOTROS ----------------------------------------------- */
.nos {
  position: relative;
  z-index: 3;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(96px, 12vh, 140px) 0;
  margin: 0 var(--section-side);
  background: var(--celtis-cream);
  border: 1px solid var(--celtis-ink);
  border-top: 0;
  border-left: 0;
  border-right: 0;
  border-radius: 0;
}
.nos-grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.4fr);
  gap: clamp(48px, 7vw, 120px);
  align-items: stretch;
}
.nos-photo { align-self: stretch; display: flex; }
.nos-photo-frame {
  position: relative;
  flex: 1;
  width: 100%;
  background: var(--celtis-grey-100);
  border: 1px solid var(--celtis-ink);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0;
  overflow: hidden;
}
.nos-photo-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  display: block;
  filter: grayscale(100%) contrast(1.05);
}
.nos-photo-label {
  position: relative;
  z-index: 1;
  margin: 22px;
  align-self: flex-start;
  padding: 8px 14px;
  background: rgba(250, 255, 251, 0.55);
  backdrop-filter: saturate(160%) blur(20px);
  -webkit-backdrop-filter: saturate(160%) blur(20px);
  border: 1px solid rgba(250, 255, 251, 0.6);
  font-family: "Stolzl", sans-serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .18em;
  color: var(--celtis-orange);
  text-transform: uppercase;
  border-radius: 3px;
  box-shadow: 0 1px 0 rgba(255,255,255,.45) inset, 0 6px 18px rgba(28,27,27,.18);
}
.nos-copy { padding-top: 18px; }
.nos-copy .section-title { margin: 22px 0 36px; }
.nos-body p {
  font-family: "Stolzl", sans-serif;
  font-weight: 300;
  font-size: clamp(17px, 1.25vw, 19px);
  line-height: 1.6;
  color: var(--celtis-ink);
  margin: 0 0 22px;
  max-width: 60ch;
  text-wrap: pretty;
}
.nos-body p:last-child { margin-bottom: 0; }
.nos-celtis {
  font-family: "Neue Haas Grotesk Display Pro", "Inter", serif;
  font-style: italic;
  font-weight: 400;
  color: var(--celtis-orange);
}
.nos-etymology { color: var(--fg2); border-top: 1px solid var(--line); padding-top: 22px; margin-top: 32px !important; }
.nos-etymology em { font-family: "Neue Haas Grotesk Display Pro", serif; font-style: italic; font-weight: 400; color: var(--celtis-orange); font-size: 1.05em; }

/* CONTACTO ----------------------------------------------- */
.ct-ft-wrap {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
.ct-ft-wrap > .ct { flex: 1 1 auto; }
.ct-ft-wrap > .ft { flex-shrink: 0; }
.ct {
  position: relative;
  z-index: 4;
  margin: 0 var(--section-side);
  background: var(--celtis-ink);
  color: var(--celtis-cream);
  border-radius: 0;
  padding: clamp(80px, 10vh, 120px) 0;
  overflow: hidden;
  border: 1px solid var(--celtis-ink);
  border-top: 0;
  border-left: 0;
  border-right: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.ct::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 85% 12%, rgba(255,90,50,.08), transparent 55%);
  pointer-events: none;
}
.ct-grid {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(0, 1.15fr);
  gap: clamp(48px, 7vw, 120px);
  align-items: start;
  position: relative;
}
.ct-head .section-title { margin-top: 22px; font-size: clamp(48px, 6.4vw, 96px); }
.ct-head .lede { margin-top: 28px; max-width: 38ch; color: rgba(250,255,251,.7); }
.ct-body { padding-bottom: 6px; }

/* Aside under the head — secondary action (WhatsApp) */
.ct-aside {
  display: flex; flex-direction: column; gap: 6px;
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: 22px;
  border-top: 1px solid rgba(250,255,251,.18);
  max-width: 38ch;
}
.ct-aside-line {
  font-family: ui-monospace, "JetBrains Mono", Menlo, monospace;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(250,255,251,.45);
}
.ct-aside-link {
  font-family: "Stolzl", sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: var(--celtis-cream);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: max-content;
  border-bottom: 1px solid var(--celtis-orange);
  padding-bottom: 4px;
  transition: color .14s var(--ease-out), gap .14s var(--ease-out);
}
.ct-aside-link:hover { color: var(--celtis-orange); gap: 14px; }

/* FORM — underline-style fields on dark */
.ct-form {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 2.6vw, 36px);
}
.ct-row.two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 2.4vw, 32px);
}
.ct-field { display: flex; flex-direction: column; gap: 10px; }
.ct-field label {
  font-family: "Stolzl", sans-serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--celtis-orange);
}
.ct-field .ct-opt {
  font-weight: 400;
  letter-spacing: .14em;
  color: rgba(250,255,251,.4);
  text-transform: none;
  font-size: 11px;
  margin-left: 4px;
}
.ct-field input,
.ct-field textarea {
  font-family: "Stolzl", sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.5;
  color: var(--celtis-cream);
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(250,255,251,.28);
  padding: 8px 0 12px;
  outline: none;
  transition: border-color .2s var(--ease-out), background .2s var(--ease-out);
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  resize: none;
}
.ct-field textarea {
  min-height: 96px;
  line-height: 1.55;
}
.ct-field input::placeholder,
.ct-field textarea::placeholder {
  color: rgba(250,255,251,.32);
  font-weight: 300;
}
.ct-field input:hover,
.ct-field textarea:hover {
  border-bottom-color: rgba(250,255,251,.5);
}
.ct-field input:focus,
.ct-field textarea:focus {
  border-bottom-color: var(--celtis-orange);
}
.ct-field input:-webkit-autofill,
.ct-field textarea:-webkit-autofill {
  -webkit-text-fill-color: var(--celtis-cream);
  -webkit-box-shadow: 0 0 0 1000px var(--celtis-ink) inset;
  caret-color: var(--celtis-cream);
  transition: background-color 9999s ease-in-out 0s;
}

.ct-submit {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
  margin-top: clamp(8px, 1vw, 16px);
}
.ct-submit .btn[disabled] { opacity: .55; cursor: progress; }
.ct-msg {
  font-family: "Stolzl", sans-serif;
  font-weight: 400;
  font-size: 13px;
  letter-spacing: .04em;
  margin: 0;
  padding: 8px 12px;
  border-left: 2px solid;
}
.ct-msg.ok { color: rgba(250,255,251,.85); border-color: var(--celtis-orange); }
.ct-msg.err { color: rgba(250,255,251,.7); border-color: rgba(250,255,251,.45); }

/* FOOTER ------------------------------------------------- */
.ft {
  position: relative;
  z-index: 5;
  margin: 0 var(--section-side) var(--section-side);
  background: var(--celtis-cream);
  color: var(--celtis-ink);
  border: 1px solid var(--celtis-ink);
  border-top: 0;
  border-left: 0;
  border-right: 0;
  border-radius: 0;
  padding: clamp(64px, 7vw, 96px) 0 28px;
}
.ft-inner {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(0, 1fr);
  grid-template-areas:
    "brand social"
    "copy  copy";
  column-gap: 48px;
  row-gap: 32px;
  padding-bottom: 0;
}
.ft-brand-block { grid-area: brand; }
.ft-social { grid-area: social; }
.ft-copy {
  grid-area: copy;
  padding-top: 28px;
  border-top: 1px solid var(--celtis-ink);
  font-family: "Stolzl", sans-serif;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg2);
}
.ft-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.ft-mark { width: 28px; height: auto; }
.ft-word {
  font-family: "Neue Haas Grotesk Display Pro", sans-serif;
  font-weight: 400; font-size: 16px; letter-spacing: .04em;
  color: var(--celtis-orange);
}
.ft-tag {
  font-family: "Stolzl", sans-serif;
  font-weight: 300;
  font-size: 15px;
  color: var(--fg2);
  margin: 0 0 6px;
}
.ft-tag-strong {
  font-family: "Neue Haas Grotesk Display Pro", sans-serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(20px, 1.6vw, 26px);
  color: var(--celtis-ink);
  margin: 6px 0 0;
  letter-spacing: -0.005em;
}
.ft-social {
  list-style: none; padding: 0; margin: 0;
  display: flex;
  gap: 22px;
  align-self: end;
  justify-self: end;
}
.ft-social a,
.ft-social a:hover,
.ft-social a:focus,
.ft-social a:active,
.ft-social a:visited {
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  border-bottom: 0;
}
.ft-social a {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--celtis-ink);
  opacity: .9;
  transition: color .14s var(--ease-out), opacity .14s var(--ease-out);
}
.ft-social a:hover {
  color: var(--celtis-orange);
  opacity: 1;
}
.ft-social a:focus-visible {
  outline: 2px solid var(--celtis-orange);
  outline-offset: 4px;
  border-radius: 2px;
}
.ft-social svg { display: block; }
.ft-base {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 28px;
  font-family: "Stolzl", sans-serif;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg2);
}
.ft-coords { font-family: ui-monospace, "JetBrains Mono", Menlo, monospace; color: var(--celtis-orange); letter-spacing: .08em; }

/* RESPONSIVE --------------------------------------------- */

/* Tablet & small laptop ---------------------------------- */
@media (max-width: 960px) {
  :root { --section-side: 0px; }

  .site-header,
  .site-header.is-shrunk {
    grid-template-columns: 56px 1fr 1fr 1fr 56px;
    height: 56px;
    margin: 0;
    background: rgba(250,255,251,.32);
    backdrop-filter: saturate(180%) blur(34px);
    -webkit-backdrop-filter: saturate(180%) blur(34px);
    box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 -1px 0 rgba(255,255,255,.25) inset, 0 14px 40px rgba(28,27,27,.10);
  }
  .hcell,
  .site-header.is-shrunk .hcell { font-size: 11px; letter-spacing: .08em; }
  .hcell-mark,
  .site-header.is-shrunk .hcell-mark { width: 22px; }
  .hcell-logo,
  .site-header.is-shrunk .hcell-logo { padding: 10px 14px; }

  .hero {
    margin-top: -72px;
    min-height: 600px;
    max-height: 820px;
  }

  .ce-row, .nos-grid, .ct-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .ce-screen { min-height: auto; padding: clamp(72px, 14vw, 120px) 0; }
  .nos { min-height: auto; padding: clamp(72px, 14vw, 120px) 0; }
  .ct-ft-wrap { min-height: auto; }
  .ct { padding: clamp(72px, 14vw, 120px) 0; }
  .ce-body { margin-bottom: 0; }
  .qh-head { position: static; }
  .nos-grid { grid-template-areas: "photo" "copy"; align-items: start; }
  .nos-photo { grid-area: photo; max-width: 360px; margin: 0 auto; aspect-ratio: 4/5; }
  .nos-copy  { grid-area: copy; }
  .ft-inner { grid-template-columns: 1fr auto; column-gap: 24px; }
}

/* Mobile — desactivar scroll-jacking de QueHacemos, layout apilado */
@media (max-width: 720px) {
  :root { --section-side: 0px; }
  .container { padding: 0 20px; }

  /* Reveal con menos viaje vertical en mobile */
  .rv { transform: translate3d(0, 18px, 0); transition-duration: .65s; }

  /* Header: sin ES, fija sin shrink — TODO bloqueado para que no cambie con scroll */
  .site-header,
  .site-header.is-shrunk {
    grid-template-columns: 48px 1fr 1fr 1fr;
    height: 48px;
    margin: 0;
    background: rgba(250,255,251,.32);
    backdrop-filter: saturate(180%) blur(22px);
    -webkit-backdrop-filter: saturate(180%) blur(22px);
    box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 -1px 0 rgba(255,255,255,.25) inset, 0 14px 40px rgba(28,27,27,.10);
    transition: none;
  }
  .site-header .hcell-lang { display: none; }
  .hcell,
  .site-header.is-shrunk .hcell {
    font-size: 10px;
    letter-spacing: .04em;
    font-weight: 500;
    transition: none;
  }
  .hcell-logo,
  .site-header.is-shrunk .hcell-logo { padding: 10px 12px; }
  .hcell-mark,
  .site-header.is-shrunk .hcell-mark { width: 20px; transition: none; }

  /* Hero — alto a la mitad en mobile */
  .hero {
    margin-top: -56px;
    height: 52vh;
    height: 52dvh;
    min-height: 360px;
    max-height: 520px;
  }
  .hero-photo img { object-position: center 60%; }
  .hero-tag {
    /* tag area arranca debajo del header (48px) + compensa el margin-top:-56px del hero */
    inset: 104px 0 0 0;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .hero-mark {
    align-items: center;
    justify-content: center;
    gap: 14px;
  }
  .hero-mark-logo {
    width: clamp(110px, 32vw, 170px);
    height: clamp(110px, 32vw, 170px);
    padding: clamp(14px, 4vw, 24px);
    margin: 0 auto;
  }
  .hero-mark-text { width: clamp(150px, 44vw, 220px); margin: 0 auto; }
  .hero-scrim {
    background: linear-gradient(180deg, rgba(28,27,27,.22) 0%, rgba(28,27,27,0) 35%, rgba(28,27,27,.55) 100%);
  }

  /* Celtis section */
  .ce { padding: clamp(72px, 14vw, 120px) 0 clamp(72px, 14vw, 120px); }
  .ce-body {
    margin-bottom: clamp(48px, 9vh, 96px);
    gap: 24px;
  }
  .ce-lede {
    font-size: clamp(28px, 7.5vw, 40px);
    line-height: 1.08;
    letter-spacing: -0.01em;
    max-width: none;
  }
  .ce-row { grid-template-columns: 1fr; gap: 36px; }
  .ce-head .section-title { font-size: clamp(40px, 11vw, 64px); }
  /* Celtis pillars en mobile — sticky swap + logo SVG (diseño original) */
  .ce-screen-pillars { min-height: 280vh; min-height: 280dvh; }
  .ce-pillars-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    display: flex;
    align-items: flex-start;
    overflow: hidden;
    padding-top: 80px;
    padding-bottom: 32px;
  }
  .ce-pillars-deck {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: clamp(24px, 5vw, 40px);
    width: 100%;
    min-height: 80vh;
    min-height: 80dvh;
    height: auto;
  }
  .ce-pillars-text {
    position: relative;
    display: block;
    min-height: 220px;
    height: auto;
  }
  .ce-pillars-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
  }
  .ce-pillars-logo svg {
    width: 100%;
    max-height: 38vh;
    max-height: 38dvh;
    display: block;
  }
  .ce-pillar-step {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0;
    border-top: 0;
    opacity: 0;
    transform: translate3d(0, -56px, 0);
    transition: opacity .5s var(--ease-out), transform .55s var(--ease-out);
    pointer-events: none;
    will-change: opacity, transform;
  }
  .ce-pillar-step.is-on {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    pointer-events: auto;
  }
  .ce-pillar-step.is-past {
    opacity: 0;
    transform: translate3d(0, 56px, 0);
  }
  .ce-pillar-side { display: block; }
  .ce-pillar-title { font-size: clamp(48px, 14vw, 96px); letter-spacing: -0.018em; font-style: italic; white-space: normal; }
  .ce-pillar-title-text {
    background: none;
    padding: 0;
    text-box: initial;
  }
  .ce-pillar-card {
    border: 0;
    padding: 0;
    margin-top: clamp(14px, 2vw, 22px);
    opacity: 1;
    transform: none;
    transition: none;
  }
  .ce-pillar-desc { font-size: 16px; line-height: 1.55; max-width: none; }

  /* QUÉ HACEMOS — sticky stage en mobile, cards se reemplazan al scrollear */
  .qh {
    height: calc(100vh + 240vh);
    height: calc(100dvh + 240dvh);
    padding: 0;
  }
  .qh-stage {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 80px 0 32px;
  }
  .qh-stage-inner {
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 4vw, 32px);
    height: 100%;
    width: 100%;
  }
  .qh-head { gap: 8px; }
  .qh-head .section-title { font-size: clamp(40px, 10vw, 64px); margin: 0; }

  .cap-grid {
    position: relative;
    flex: 1 1 auto;       /* ocupa el espacio libre debajo del título */
    width: 100%;
    display: grid;        /* stack todas las cards en la misma celda */
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    place-items: center stretch;   /* centra verticalmente, full ancho */
    align-content: center;
  }
  /* Reset de los staircase del desktop — todas full-borde y stacked */
  .cap-card,
  .cap-card:nth-child(1),
  .cap-card:nth-child(2),
  .cap-card:nth-child(3),
  .cap-card:nth-child(4) {
    grid-area: 1 / 1;     /* todas en la misma celda */
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    border-width: 1.5px;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    opacity: 0;
    transform: translate3d(0, 12px, 0);
    transition: opacity .45s var(--ease-out), transform .45s var(--ease-out);
    box-shadow: 0 8px 22px rgba(28,27,27,.08);
    padding: 0 0 18px;
    align-self: center;   /* centra la card en el espacio vertical */
  }
  /* Solo la card activa se ve */
  .cap-card.is-active,
  .cap-card:nth-child(1).is-on.is-active,
  .cap-card:nth-child(2).is-on.is-active,
  .cap-card:nth-child(3).is-on.is-active,
  .cap-card:nth-child(4).is-on.is-active {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    z-index: 2;
  }
  /* Las "ya vistas" pero no activas: salen suave */
  .cap-card.is-on:not(.is-active) {
    opacity: 0;
    transform: translate3d(0, -12px, 0);
    z-index: 1;
  }
  /* Tab — highlight pixel-perfect, flush left en mobile */
  .cap-tab {
    padding: 0;
    margin: 0 0 12px;
  }
  .cap-tab-label {
    font-size: 22px;
    letter-spacing: -0.012em;
    margin: 0;
  }
  .cap-body { padding: 0 20px 4px; max-width: none; }
  .cap-d { font-size: 15px; line-height: 1.5; }

  /* Nosotros — fila 1: foto + títulos / fila 2: párrafos full ancho */
  .nos { padding: clamp(72px, 14vw, 120px) 0; }
  .nos-grid {
    grid-template-columns: minmax(110px, 38%) minmax(0, 1fr);
    grid-template-rows: auto auto;
    grid-template-areas:
      "photo titles"
      "body  body";
    gap: 20px 18px;
    align-items: stretch;
  }
  .nos-photo {
    grid-area: photo;
    max-width: none;
    margin: 0;
    aspect-ratio: auto;
    align-self: stretch;        /* se estira al alto de los títulos */
    min-height: 0;
  }
  .nos-photo-frame { height: 100%; }
  .nos-copy { display: contents; }      /* deja que .nos-titles y .nos-body sean grid items */
  .nos-titles { grid-area: titles; align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
  .nos-titles .eyebrow { margin: 0; }
  .nos-titles .section-title { margin: 8px 0 0; font-size: clamp(28px, 8vw, 44px); line-height: 1.0; }
  .nos-body { grid-area: body; padding-top: 4px; }
  .nos-copy .section-title { margin: 8px 0 0; font-size: clamp(28px, 8vw, 44px); line-height: 1.0; }
  .nos-body p { font-size: 14.5px; line-height: 1.5; max-width: none; margin-bottom: 14px; }
  .nos-photo-label { margin: 14px; padding: 6px 10px; font-size: 9.5px; letter-spacing: .14em; }

  /* Contacto */
  .ct { padding: clamp(80px, 14vw, 120px) 0; }
  .ct-grid { gap: 36px; align-items: start; }
  .ct-head .section-title { font-size: clamp(44px, 12vw, 76px); }
  .ct-head .lede { font-size: 16px; max-width: none; margin-top: 22px; }
  .ct-aside { margin-top: 32px; padding-top: 18px; max-width: none; }
  .ct-row.two { grid-template-columns: 1fr; gap: 28px; }
  .ct-form { gap: 26px; }
  .ct-submit .btn { justify-content: center; width: 100%; }

  /* Footer mobile — flex row, baseline alineado: brand izq + copy der */
  .ft { padding: clamp(40px, 8vw, 60px) 0 28px; }
  .ft-inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    grid-template-columns: none;
    grid-template-areas: none;
  }
  .ft-brand-block {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
  }
  .ft-brand { margin: 0; gap: 10px; align-items: center; }
  .ft-mark { width: 22px; display: block; }
  .ft-word { font-size: 14px; line-height: 1; }
  .ft-copy {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 10.5px;
    line-height: 1;
    letter-spacing: .08em;
    text-align: right;
    color: var(--fg2);
  }

  .btn.big { padding: 16px 22px; font-size: 15px; }
}

/* Phones chicos ------------------------------------------ */
@media (max-width: 420px) {
  .container { padding: 0 16px; }

  .site-header,
  .site-header.is-shrunk {
    grid-template-columns: 44px 1fr 1fr 1fr;
    height: 48px;
  }
  .hcell,
  .site-header.is-shrunk .hcell { font-size: 9px; letter-spacing: .02em; }
  .hcell-logo,
  .site-header.is-shrunk .hcell-logo { padding: 10px 12px; }
  .hcell-mark,
  .site-header.is-shrunk .hcell-mark { width: 20px; }

  .hero {
    margin-top: -52px;
    height: 50vh;
    height: 50dvh;
    min-height: 320px;
    max-height: 460px;
  }
  .hero-tag {
    /* tag area arranca debajo del header (48px) + compensa el margin-top:-52px del hero */
    inset: 100px 0 0 0;
  }
  .hero-mark-logo {
    width: clamp(96px, 36vw, 150px);
    height: clamp(96px, 36vw, 150px);
    padding: clamp(12px, 4vw, 20px);
    margin: 0 auto;
  }
  .hero-mark-text { width: clamp(130px, 48vw, 195px); margin: 0 auto; }

  .section-title { font-size: clamp(36px, 11vw, 48px); }
  .ce-lede { font-size: clamp(26px, 8vw, 34px); }
  .ce-head .section-title { font-size: clamp(36px, 12vw, 56px); }
  .ct-head .section-title { font-size: clamp(44px, 14vw, 72px); }

  .cap-body { padding: 16px 16px 20px; }
}