/* ==========================================================================
   Azcendia v3 — Home
   Glassmorphism (06) + Bento (12) · Motion APANTALLADOR
   Built exactly to design/reglas-v3.md + design/home-blueprint-v3.md
   ========================================================================== */

/* ---------- 0. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }
img, picture, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0; }
input, select, textarea { font: inherit; color: inherit; }

html, body { overflow-x: clip; }
body { background: var(--ground); color: var(--ink); }

/* ---------- 1. Fonts — AMEND 2026-08-24: Clash Display OUT, General Sans 500/600 in ---------- */
:root {
  --font-display: "General Sans", "Azc Fallback Display", system-ui, sans-serif;
  --font-text:    "Switzer", "Azc Fallback Text", system-ui, sans-serif;
}
@font-face {
  font-family: "Azc Fallback Display";
  src: local("Arial");
  size-adjust: 97%; ascent-override: 93%; descent-override: 24%;
}
@font-face {
  font-family: "Azc Fallback Text";
  src: local("Arial");
  size-adjust: 98%; ascent-override: 95%; descent-override: 24%;
}

/* ---------- 2. Tokens ---------- */
:root {
  /* brand (fixed) */
  --brand-blue: #00408B;
  --brand-cyan: #00E0ED;
  --grad-brand: linear-gradient(112deg, #00408B 0%, #0090C8 52%, #00E0ED 100%);

  /* spacing scale (4px base) */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 20px;
  --s6: 24px; --s7: 32px; --s8: 40px; --s9: 48px; --s10: 64px;
  --s11: 80px; --s12: 96px; --s13: 120px; --s14: 160px; --s15: 200px;

  /* radii */
  --r-xs: 8px; --r-sm: 12px; --r-md: 16px; --r-lg: 24px; --r-xl: 32px; --r-pill: 999px;

  /* eases */
  --ease-out-soft:  cubic-bezier(.22,.61,.36,1);
  --ease-out-expo:  cubic-bezier(.16,1,.3,1);
  --ease-inout-str: cubic-bezier(.76,0,.24,1);
  --ease-back-soft: cubic-bezier(.34,1.40,.50,1);

  /* type scale — AMEND 2026-08-24: REPLACED, smaller/tidier, General Sans 500/600 only.
     Formulas exactly as specced in design/reglas-v3.md §2.1 (390 → 1440 fluid, bumped at 1600). */
  --fs-display: clamp(2.375rem,  1.5858rem + 3.2381vw, 4.5rem);
  --fs-h1:      clamp(2rem,      1.4429rem + 2.2857vw, 3.5rem);
  --fs-h2:      clamp(1.625rem,  1.3000rem + 1.3333vw, 2.5rem);
  --fs-h3:      clamp(1.1875rem, 1.1179rem + 0.2857vw, 1.375rem);
  --fs-h4:      clamp(1.0625rem, 1.0393rem + 0.0952vw, 1.125rem);
  --fs-lead:    clamp(1.0625rem, 1.0161rem + 0.1905vw, 1.1875rem);
  --fs-body:    clamp(1rem,      0.9770rem + 0.0952vw, 1.0625rem);
  --fs-small:   0.875rem;
  --fs-label:   clamp(0.75rem,   0.7390rem + 0.0476vw, 0.78125rem);
  --fs-btn:     clamp(0.9375rem, 0.9143rem + 0.0952vw, 1rem);
  --fs-nav:     0.9375rem;

  /* layout — mobile-first defaults (390) */
  --bento-cols: 4;
  --bento-gap: 12px;
  --bento-row: 140px;
  --gutter: 20px;
  --container-max: none;
  --section-pad: 72px;
  --title-gap: 28px;
  --hdr-inset: 12px;
  --hdr-h: 58px;
  --hdr-r: 16px;
  --tile-r: 14px;
  --tile-pad: 18px;
}

@media (min-width: 768px) {
  :root {
    --bento-cols: 6; --bento-gap: 16px; --bento-row: 156px; --gutter: 24px;
    --section-pad: 96px; --title-gap: 36px;
    --hdr-inset: 14px; --hdr-h: 64px; --hdr-r: 16px;
    --tile-r: 16px; --tile-pad: 20px;
  }
}
@media (min-width: 1024px) {
  :root {
    --bento-cols: 12; --bento-gap: 20px; --bento-row: 168px; --gutter: 32px;
    --container-max: 1360px; --section-pad: 128px; --title-gap: 48px;
    --hdr-inset: 18px; --hdr-h: 68px; --hdr-r: 20px;
    --tile-r: 18px; --tile-pad: 22px;
  }
}
@media (min-width: 1600px) {
  :root {
    --fs-display: 5.25rem; --fs-h1: 4rem; --fs-h2: 2.75rem; --fs-h3: 1.5rem;
    --fs-h4: 1.125rem; --fs-lead: 1.25rem; --fs-body: 1.0625rem;
    --fs-small: .9375rem; --fs-label: .8125rem; --fs-btn: 1rem; --fs-nav: 0.9375rem;
    --bento-gap: 24px; --bento-row: 184px; --gutter: 40px;
    --container-max: 1680px; --section-pad: 160px; --title-gap: 56px;
    --hdr-inset: 18px; --hdr-h: 72px; --tile-r: 18px; --tile-pad: 24px;
  }
}

/* ---------- 2.1 Theme: dark (default) ---------- */
:root, [data-theme="dark"] {
  --ground: #04060D;
  --ground-deep: #01030A;
  --ink: #EBF9FF;
  --ink-2: #A8C0D4;
  --ink-3: #8FA6B9;
  --accent: #00E0ED;
  --accent-2: #0090C8;
  --accent-deep: #00408B;
  --accent-text: #00E0ED;
  --line: rgba(153,214,255,0.14);
  --line-strong: rgba(0,224,237,0.30);
  --glass-film: rgba(9,16,28,0.62);
  --glass-solid: #0C1526;
  --ok: #2BD9A6;
  --err: #FF6B6B;
  --focus-ring: rgba(0,224,237,.20);
  --scrim-top: rgba(2,8,20,.10);
  --scrim-bot: rgba(2,8,20,.74);
  --scrim-bot-hover: rgba(2,8,20,.62);
  --scrim-h-strong: rgba(2,8,20,.82);
  --scrim-h-mid: rgba(2,8,20,.25);
  color-scheme: dark;
}

/* ---------- 2.2 Theme: light — DEFAULT (AMEND 2026-08-24) ---------- */
[data-theme="light"] {
  --ground: #FFFFFF;
  --tint: #F4FAFF;
  --tint-2: #EBF9FF;
  --ground-deep: #00274F;
  --ink: #041B33;
  --ink-2: #3E5A73;
  --ink-3: #5B7488;
  --accent: #00408B;
  --accent-2: #0090C8;
  --accent-deep: #00408B;
  --accent-text: #006E78;
  --line: rgba(0,64,139,0.12);
  --line-strong: rgba(0,64,139,0.28);
  --glass-film: rgba(255,255,255,0.68);
  --glass-solid: rgba(255,255,255,0.94);
  --ok: #0B6B4F;
  --err: #B3261E;
  --focus-ring: rgba(0,64,139,.18);
  --scrim-top: rgba(2,20,40,.06);
  --scrim-bot: rgba(2,20,40,.62);
  --scrim-bot-hover: rgba(2,20,40,.50);
  --scrim-h-strong: rgba(2,20,40,.78);
  --scrim-h-mid: rgba(2,20,40,.20);
  color-scheme: light;
}

/* ---------- 3. Ground + grain + orbs ---------- */
.ground {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
}
[data-theme="dark"] .ground {
  background-color: #04060D;
  background-image:
    radial-gradient(58% 44% at 14%  8%,   rgba(0,64,139,0.55) 0%, rgba(0,64,139,0)  62%),
    radial-gradient(46% 38% at 88%  4%,   rgba(0,224,237,0.20) 0%, rgba(0,224,237,0) 60%),
    radial-gradient(70% 55% at 50% 108%,  rgba(0,64,139,0.38) 0%, rgba(4,6,13,0)     68%),
    linear-gradient(180deg, #060B18 0%, #04060D 46%, #02040A 100%);
}
[data-theme="light"] .ground {
  /* AMEND 2026-08-24: airy kukie-style ground — canvas goes white, washes drop way down. */
  background-color: #FFFFFF;
  background-image:
    radial-gradient(52% 38% at 14%  0%,  rgba(0,64,139,0.085) 0%, rgba(0,64,139,0)  58%),
    radial-gradient(44% 34% at 88%  0%,  rgba(0,224,237,0.13) 0%, rgba(0,224,237,0) 58%),
    radial-gradient(70% 46% at 50% 104%, rgba(0,120,190,0.07) 0%, rgba(255,255,255,0) 68%),
    linear-gradient(180deg, #F7FCFF 0%, #FFFFFF 34%, #FFFFFF 78%, #F7FCFF 100%);
}
/* Section tint bands — the alternating light/tinted rhythm from kukie.io. Never two in a row.
   In dark theme these paint nothing; .ground already does the work. */
.section--tint, .section--tint2 { background: transparent; }
[data-theme="light"] .section--tint  { background: var(--tint); }
[data-theme="light"] .section--tint2 { background: var(--tint-2); }
.ground::after {
  content: ""; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}
[data-theme="dark"] .ground::after  { opacity: .035; mix-blend-mode: overlay; }
[data-theme="light"] .ground::after { opacity: .025; mix-blend-mode: multiply; }

.orb { position: absolute; border-radius: 50%; filter: blur(90px); will-change: transform; }
.orb-a { width: 720px; height: 720px; top: -8%; left: 2%; }
.orb-b { width: 900px; height: 900px; top: -14%; right: -6%; }
[data-theme="dark"] .orb-a  { background: radial-gradient(circle, rgba(0,224,237,.30), transparent 70%); }
[data-theme="dark"] .orb-b  { background: radial-gradient(circle, rgba(0,64,139,.55), transparent 72%); }
[data-theme="light"] .orb-a { background: radial-gradient(circle, rgba(0,224,237,.20), transparent 70%); }
[data-theme="light"] .orb-b { background: radial-gradient(circle, rgba(0,64,139,.16), transparent 72%); }
@media (max-width: 767.98px) { .orb { display: none; } }

/* ---------- 4. Glass recipes ---------- */
.glass {
  background: rgba(9,16,28,0.62);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
          backdrop-filter: blur(22px) saturate(140%);
  border: 1px solid rgba(153,214,255,0.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 24px 60px -28px rgba(0,0,0,0.80);
}
.glass-flat {
  background: linear-gradient(180deg, rgba(24,38,60,0.72) 0%, rgba(9,16,28,0.78) 100%);
  border: 1px solid rgba(153,214,255,0.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 20px 48px -30px rgba(0,0,0,0.8);
}
.glass-deep {
  background: rgba(4,8,16,0.74);
  -webkit-backdrop-filter: blur(28px) saturate(150%);
          backdrop-filter: blur(28px) saturate(150%);
  border: 1px solid rgba(153,214,255,0.12);
}
/* AMEND 2026-08-24 — "airy glass": more white, less blur, low + short shadow. The target is
   kukie's clean card, not a heavy frosted panel. */
[data-theme="light"] .glass {
  background: rgba(255,255,255,0.78);
  -webkit-backdrop-filter: blur(14px) saturate(118%);
          backdrop-filter: blur(14px) saturate(118%);
  border: 1px solid rgba(0,64,139,0.09);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    0 2px 4px -2px rgba(0,64,139,0.06),
    0 10px 24px -18px rgba(0,64,139,0.16);
}
[data-theme="light"] .glass-flat {
  background: #FFFFFF;
  border: 1px solid rgba(0,64,139,0.09);
  box-shadow: 0 2px 4px -2px rgba(0,64,139,0.06), 0 10px 22px -20px rgba(0,64,139,0.14);
}
[data-theme="light"] .glass-deep {
  background: rgba(255,255,255,0.80);
  -webkit-backdrop-filter: blur(26px) saturate(140%);
          backdrop-filter: blur(26px) saturate(140%);
  border: 1px solid rgba(0,64,139,0.10);
}
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .glass, .glass-deep { background: rgba(12,21,38,0.94); }
  [data-theme="light"] .glass,
  [data-theme="light"] .glass-deep { background: rgba(255,255,255,0.96); }
}
/* under 768: .glass degrades to flat (budget rule §5.7), except header + drawer */
@media (max-width: 767.98px) {
  .glass:not(.site-header):not(.drawer) {
    background: linear-gradient(180deg, rgba(24,38,60,0.72) 0%, rgba(9,16,28,0.78) 100%);
    backdrop-filter: none; -webkit-backdrop-filter: none;
    border: 1px solid rgba(153,214,255,0.12);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 20px 48px -30px rgba(0,0,0,0.8);
  }
  [data-theme="light"] .glass:not(.site-header):not(.drawer) {
    background: #FFFFFF;
    backdrop-filter: none; -webkit-backdrop-filter: none;
    border: 1px solid rgba(0,64,139,0.09);
    box-shadow: 0 2px 4px -2px rgba(0,64,139,0.06), 0 10px 22px -20px rgba(0,64,139,0.14);
  }
}

/* ---------- 5. Typography — AMEND 2026-08-24: General Sans 500/600 only, never 700+ ---------- */
.display {
  font: 600 var(--fs-display)/1.02 var(--font-display);
  letter-spacing: -0.022em; text-wrap: balance; color: var(--ink); margin: 0;
}
.h1 { font: 600 var(--fs-h1)/1.06 var(--font-display); letter-spacing: -0.020em; text-wrap: balance; color: var(--ink); margin: 0; }
.h2 { font: 600 var(--fs-h2)/1.12 var(--font-display); letter-spacing: -0.015em; text-wrap: balance; color: var(--ink); margin: 0; }
.h3 { font: 600 var(--fs-h3)/1.25 var(--font-display); letter-spacing: -0.005em; color: var(--ink); margin: 0; }
.h4 { font: 500 var(--fs-h4)/1.35 var(--font-text); color: var(--ink); margin: 0; }
.lead { font: 400 var(--fs-lead)/1.60 var(--font-text); color: var(--ink-2); max-width: 62ch; text-wrap: pretty; margin: 0; }
.body-text { font: 400 var(--fs-body)/1.65 var(--font-text); color: var(--ink-2); max-width: 62ch; text-wrap: pretty; margin: 0; }
.small { font: 400 var(--fs-small)/1.55 var(--font-text); letter-spacing: .005em; color: var(--ink-3); margin: 0; }
.label {
  font: 500 var(--fs-label)/1.20 var(--font-text); letter-spacing: .10em;
  text-transform: uppercase; color: var(--accent-text); margin: 0;
}

em, .em-accent, em .hero-word-inner {
  font-style: normal; font-weight: 600;
}
[data-theme="dark"] em,
[data-theme="dark"] .em-accent,
[data-theme="dark"] em .hero-word-inner {
  background: linear-gradient(96deg, #00E0ED 0%, #7FF0FF 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  /* Cliente 2026-08-25: with background-clip:text, glyphs only paint where the
     background box reaches — tight boxes cut the g/y/p descenders ("la G se corta").
     Vertical padding extends the painted box below the baseline; the negative margin
     cancels the layout growth on inline-blocks (pure inlines don't grow anyway). */
  padding-bottom: 0.25em; margin-bottom: -0.25em;
}
[data-theme="light"] em,
[data-theme="light"] .em-accent,
[data-theme="light"] em .hero-word-inner { color: #00408B; }
@supports not (background-clip: text) {
  [data-theme="dark"] em,
  [data-theme="dark"] .em-accent,
  [data-theme="dark"] em .hero-word-inner { color: var(--accent); background: none; }
}

/* ---------- 6. Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 52px; padding: 0 28px; border-radius: var(--r-pill);
  font: 500 var(--fs-btn)/1 var(--font-text); letter-spacing: .005em;
  min-width: 168px; white-space: nowrap;
  transition: transform 240ms var(--ease-out-soft), box-shadow 240ms, background-color 240ms;
}
.btn svg { width: 18px; height: 18px; stroke-width: 1.75; flex: 0 0 auto; }
.btn-label { font: inherit; text-transform: none; letter-spacing: inherit; color: inherit; }
.btn:active { transform: translateY(0) scale(.985); }
@media (max-width: 389.98px) { .btn { height: 50px; } }

.btn-primary {
  background: linear-gradient(112deg,#00C2D8 0%,#00E0ED 55%,#6FF2FB 100%);
  color: #01222B;
  box-shadow: 0 10px 30px -12px rgba(0,224,237,.45);
}
.btn-primary:hover { filter: brightness(1.06); transform: translateY(-2px); box-shadow: 0 -8px 38px -8px rgba(0,224,237,.5), 0 12px 30px -12px rgba(0,224,237,.45); }
[data-theme="light"] .btn-primary {
  background: #00408B; color: #fff;
  box-shadow: 0 10px 26px -12px rgba(0,64,139,.45);
  position: relative; overflow: hidden;
}
[data-theme="light"] .btn-primary::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(112deg,#00C2D8 0%,#00E0ED 100%); opacity: 0;
  transition: opacity 240ms var(--ease-out-soft); z-index: 0;
}
[data-theme="light"] .btn-primary:hover { background: #003374; }
[data-theme="light"] .btn-primary:hover::after { opacity: .35; }
[data-theme="light"] .btn-primary .label, [data-theme="light"] .btn-primary svg { position: relative; z-index: 1; }

.btn-secondary {
  color: var(--ink); border: 1px solid rgba(0,224,237,.30);
  background: linear-gradient(180deg, rgba(24,38,60,0.72) 0%, rgba(9,16,28,0.78) 100%);
}
.btn-secondary:hover { border-color: rgba(0,224,237,.55); background-color: rgba(255,255,255,.06); transform: translateY(-2px); }
[data-theme="light"] .btn-secondary {
  color: #00408B; background: rgba(255,255,255,.78); border: 1px solid rgba(0,64,139,.22);
}
[data-theme="light"] .btn-secondary:hover { border-color: rgba(0,64,139,.42); background: #FFFFFF; }

.btn-full { width: 100%; }

.btn-tertiary {
  display: inline-flex; align-items: center; gap: 6px;
  font: 500 var(--fs-btn)/1 var(--font-text); color: var(--accent-text);
  padding: 2px 0; position: relative; height: auto; min-width: 0;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 1px;
  transition: background-size 260ms;
}
.btn-tertiary svg { width: 16px; height: 16px; transition: transform 200ms; }
.btn-tertiary:hover { background-size: 100% 1px; }
.btn-tertiary:hover svg { transform: translateX(4px); }

/* ---------- 7. Focus ---------- */
:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: inherit;
  box-shadow: 0 0 0 5px var(--focus-ring);
}
.skip-link {
  position: fixed; top: -100px; left: var(--s5); z-index: 999;
  background: var(--glass-solid); color: var(--ink); padding: 12px 20px;
  border-radius: var(--r-sm); transition: top 200ms var(--ease-out-soft);
  border: 1px solid var(--line-strong);
}
.skip-link:focus { top: var(--s5); }

/* ---------- 8. Layout shells ---------- */
.container {
  width: 100%; max-width: var(--container-max);
  margin-inline: auto; padding-inline: var(--gutter);
}
main { display: block; }
.section { padding-block: var(--section-pad); position: relative; }
.section-head { margin-bottom: var(--title-gap); max-width: 62ch; }
.section-head .label { margin-bottom: var(--s4); display: inline-block; }
.section-head .h2 { margin-bottom: var(--s4); }
/* AMEND 2026-08-24 — kukie-style centered section head: chip-eyebrow -> H2 -> lead, all centered.
   Default in card sections (S2/S4/S5). Hero and photo bands stay left-aligned. */
.section-head--center { text-align: center; max-width: none; }
.section-head--center .lead { margin-inline: auto; max-width: 56ch; }

.bento {
  display: grid;
  grid-template-columns: repeat(var(--bento-cols), 1fr);
  gap: var(--bento-gap);
  grid-auto-rows: minmax(var(--bento-row), auto);
  align-items: start; /* AMEND: a short cell must never stretch to match a tall neighbour */
}

/* canonical cell sizes (§4.3) */
.cell-wide  { grid-column: span 4; grid-row: span 2; }
.cell-half  { grid-column: span 4; grid-row: span 2; }
/* AMEND 2026-08-25 (fix 3, owner review r5) — same class of bug as the .cell-third AMEND-fix
   below: pairing a photo (.cell-half, row:span 2, natural height driven by its own tall content)
   with TWO short text .tile cards that were ALSO .cell-half (row:span 2) left each text card
   sitting at the top of a 2-row-tall grid area sized for the photo, with a dead gap underneath —
   and because both column tracks were already "occupied" for both rows, the 3rd card in DOM
   order (the 2nd text tile) couldn't auto-place into that gap and dropped to a whole new row
   instead ("Websites → The craft is in what you don't see" / "Sitios web → El oficio está en lo
   que no se ve"). Fix: a sibling class, same column widths as .cell-half at every breakpoint but
   row:span 1, for the short text tiles that sit beside a tall .cell-half photo. With the photo at
   row:span 2 (col 1-6) and both text tiles at row:span 1 (col 7-12), default (non-dense) grid
   auto-flow places tile #1 in row 1 and backfills tile #2 directly into row 2 of the SAME column
   track — two stacked short cards beside the tall photo, no dead region, next section unaffected. */
.cell-half-flat { grid-column: span 4; grid-row: span 1; }
.cell-third { grid-column: span 4; grid-row: span 1; } /* AMEND-fix: was span 2 — created ~50% dead
   space in each "why Azcendia" cell and threw off the auto-placement of the stat/accent row below. */
.cell-tall  { grid-column: span 4; grid-row: span 2; }
.cell-stat  { grid-column: span 2; grid-row: span 1; }
.cell-banner{ grid-column: span 4; grid-row: span 2; }
.cell-accent{ grid-column: span 4; grid-row: span 1; }
.cell-full  { grid-column: 1 / -1; grid-row: span 1; } /* QA fix: full-width accent card (Nosotros N3) */
/* Owner 2026-08-25 r3 — same row-span bug family: a .cell-wide as the LAST row reserved a 2nd
   (empty) grid row, leaving a ~122px dead band inside the grid ("pieza por pieza" bento).
   Flat variant: 1 row, sized to pair with a .cell-stat and close the row completely. */
.cell-wide-flat { grid-column: span 4; grid-row: span 1; align-self: stretch; }
.self-stretch { align-self: stretch; }
@media (min-width: 768px) {
  .cell-wide  { grid-column: span 6; grid-row: span 2; }
  .cell-wide-flat { grid-column: span 3; grid-row: span 1; }
  .cell-half  { grid-column: span 3; grid-row: span 2; }
  .cell-half-flat { grid-column: span 3; grid-row: span 1; }
  .cell-third { grid-column: span 3; grid-row: span 1; }
  .cell-tall  { grid-column: span 3; grid-row: span 3; }
  .cell-stat  { grid-column: span 3; grid-row: span 1; }
  .cell-banner{ grid-column: span 6; grid-row: span 2; }
  .cell-accent{ grid-column: span 6; grid-row: span 1; }
}
@media (min-width: 1024px) {
  .cell-wide  { grid-column: span 8; grid-row: span 2; }
  .cell-wide-flat { grid-column: span 9; grid-row: span 1; }
  .cell-half  { grid-column: span 6; grid-row: span 2; }
  .cell-half-flat { grid-column: span 6; grid-row: span 1; }
  .cell-third { grid-column: span 4; grid-row: span 1; }
  .cell-tall  { grid-column: span 4; grid-row: span 3; }
  .cell-stat  { grid-column: span 3; grid-row: span 1; }
  .cell-banner{ grid-column: span 12; grid-row: span 2; }
  .cell-accent{ grid-column: span 6; grid-row: span 1; }
}

/* ---------- 9. Tile ---------- */
.tile {
  position: relative; border-radius: var(--tile-r); padding: var(--tile-pad);
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start;
  isolation: isolate; overflow: hidden;
}
/* AMEND 2026-08-24 — density: icon chip 44/40px, icon 26/24px, fixed pixel gaps, no dead space. */
.tile__chip {
  inline-size: 44px; block-size: 44px; border-radius: var(--r-sm);
  display: grid; place-items: center; flex: 0 0 auto; margin-bottom: 14px;
}
[data-theme="light"] .tile__chip { background: rgba(0,64,139,0.08); }
[data-theme="dark"]  .tile__chip { background: rgba(0,224,237,0.12); }
@media (max-width: 389.98px) { .tile__chip { inline-size: 40px; block-size: 40px; } }
.tile-icon { width: 26px; height: 26px; color: var(--accent); stroke-width: 1.75; flex: 0 0 auto; }
@media (max-width: 389.98px) { .tile-icon { width: 24px; height: 24px; } }
.tile .h3 { margin-bottom: var(--s2); }
.tile .body-text, .tile .small { margin-top: var(--s2); }
.tile .btn-tertiary { margin-top: var(--s4); }
.tile-top { display: flex; flex-direction: column; }

/* hover lift (pointer:fine only) */
@media (hover: hover) and (pointer: fine) {
  .tile { transition: transform 320ms var(--ease-out-soft), border-color 320ms, box-shadow 320ms; }
  .tile:hover { transform: translateY(-6px) scale(1.012); border-color: var(--line-strong); }
  .tile:focus-within { transform: none; }
}

/* cursor glow */
.tile::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0; transition: opacity 240ms;
  background: radial-gradient(340px circle at var(--mx,50%) var(--my,50%), rgba(0,224,237,.14), transparent 70%);
}
[data-theme="light"] .tile::after {
  background: radial-gradient(340px circle at var(--mx,50%) var(--my,50%), rgba(0,64,139,.10), transparent 70%);
}
@media (hover: hover) and (pointer: fine) { .tile:hover::after { opacity: 1; } }
.tile > * { position: relative; z-index: 1; }

/* frost-in + sheen layers (never animate backdrop-filter) */
.tile-frost {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit;
  background: rgba(9,16,28,0.62); opacity: 0;
}
[data-theme="light"] .tile-frost { background: rgba(255,255,255,0.68); }
.tile-sheen {
  position: absolute; top: 0; bottom: 0; left: -30%; width: 60%; z-index: 3; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.16) 50%, transparent 70%);
  transform: translateX(-60%); opacity: 0;
}
[data-theme="light"] .tile-sheen { background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%); }

/* --- variants --- */
.tile--photo { padding: 0; }
.tile--photo .tile-photo-frame { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }
.tile--photo .tile-photo-frame img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease-out-expo); }
.tile-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, var(--scrim-top) 0%, var(--scrim-bot) 100%); transition: background 700ms var(--ease-out-expo); pointer-events: none; }
.tile-tint { position: absolute; inset: 0; background: rgba(0,224,237,.10); mix-blend-mode: soft-light; pointer-events: none; }
.tile--photo .tile-photo-copy { position: relative; z-index: 2; padding: var(--tile-pad); margin-top: auto; color: #fff; }
.tile--photo .tile-photo-copy .h3, .tile--photo .tile-photo-copy .small, .tile--photo .tile-photo-copy .body-text { color: #fff; }
@media (hover: hover) and (pointer: fine) {
  .tile--photo:hover .tile-photo-frame img { transform: scale(1.06); }
  .tile--photo:hover .tile-scrim { background: linear-gradient(180deg, var(--scrim-top) 0%, var(--scrim-bot-hover) 100%); }
}

.tile--stat { justify-content: center; align-items: flex-start; gap: var(--s2); }
.tile--stat .stat-num { font: 600 44px/1 var(--font-display); color: var(--accent); } /* AMEND: 48 -> 44 */
.tile--stat .small { color: var(--ink-2); margin-top: 0; }

.tile--cta {
  background: var(--grad-brand); background-size: 160% 160%; background-position: 0% 50%;
  color: #fff; border-radius: 28px; border: none; box-shadow: none; /* AMEND: 32 -> 28 */
  padding: 0; display: block; height: 100%; align-self: stretch; /* AMEND-fix: see .why-photo */
}
[data-theme="light"] .tile--cta { background: var(--grad-brand); }
.tile--cta .h2, .tile--cta .lead { color: #fff; }
.tile--cta em, .tile--cta .em-accent {
  color: #fff; background: none; -webkit-background-clip: unset; background-clip: unset;
}
.tile--cta .btn-primary { background: #FFFFFF; color: #00306B; box-shadow: 0 10px 30px -12px rgba(0,0,0,.35); }
.tile--cta .btn-secondary { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.4); color: #fff; }
.tile--cta .btn-secondary:hover { background: rgba(255,255,255,.2); border-color: #fff; }

.tile--accent { position: relative; }
.tile--accent::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 4;
  background: var(--grad-brand); background-size: 200% 100%;
  background-position: var(--edge-pos, 0%) 0;
}

.tile--list ul { display: flex; flex-direction: column; gap: var(--s3); }
.tile--list li { display: flex; align-items: flex-start; gap: var(--s3); font: 400 var(--fs-body)/1.5 var(--font-text); color: var(--ink-2); }
.tile--list svg { width: 18px; height: 18px; color: var(--accent); flex: 0 0 auto; margin-top: 2px; }

/* ---------- 10. Header ---------- */
.site-header {
  position: fixed; top: var(--hdr-inset); left: var(--gutter); right: var(--gutter);
  z-index: 100; height: var(--hdr-h); border-radius: var(--hdr-r);
  max-width: calc(var(--container-max, 100%) );
  margin-inline: auto;
}
.header-bar {
  height: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 0 14px; position: relative; z-index: 2;
}
@media (min-width: 768px) { .header-bar { padding: 0 20px; } }
.site-header::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 0;
  background: rgba(4,8,16,0.74);
  -webkit-backdrop-filter: blur(28px) saturate(150%);
          backdrop-filter: blur(28px) saturate(150%);
  border: 1px solid rgba(153,214,255,0.12);
}
[data-theme="light"] .site-header::before {
  background: rgba(255,255,255,0.80);
  border: 1px solid rgba(0,64,139,0.10);
}
.site-header::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 1; pointer-events: none;
  background: rgba(0,224,237,.05); border: 1px solid var(--line-strong);
  opacity: 0; transition: opacity 240ms;
}
[data-theme="light"] .site-header::after { background: rgba(0,64,139,.04); }
.site-header.is-scrolled::after { opacity: 1; }

.brand { display: flex; align-items: center; flex: 0 0 auto; }
.brand img { height: 26px; width: auto; }
@media (min-width: 768px) { .brand img { height: 28px; } }
@media (min-width: 1024px) { .brand img { height: 30px; } }
.brand .logo-dark { display: none; }
[data-theme="light"] .brand .logo-light { display: none; }
[data-theme="light"] .brand .logo-dark { display: block; }

.nav { display: none; }
@media (min-width: 1024px) {
  .nav { display: flex; align-items: center; gap: 26px; position: absolute; left: 50%; transform: translateX(-50%); }
  .nav a { position: relative; font: 500 var(--fs-nav)/1 var(--font-text); color: var(--ink-2); padding-bottom: 6px; }
  .nav a::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%; background: currentColor; background-size: 0% 100%; background-repeat: no-repeat; transition: background-size 220ms; }
  .nav a:hover { color: var(--ink); }
  .nav a:hover::after { background-size: 100% 100%; }
  .nav a[aria-current="page"] { color: var(--accent-text); }
  .nav a[aria-current="page"]::before {
    content: ""; position: absolute; left: 50%; bottom: -8px; width: 4px; height: 4px;
    border-radius: 50%; background: var(--accent); transform: translateX(-50%);
  }
}
@media (min-width: 1600px) { .nav { gap: 30px; } }

.header-actions { display: flex; align-items: center; gap: var(--s4); flex: 0 0 auto; }
.phone-desktop { display: none; font: 400 15px/1 var(--font-text); color: var(--ink-2); }
/* 2026-08-24: the ES/EN toggle tightened the header — at 1440 the phone collided
   with the nav. The number now only shows when there is genuinely room for it. */
@media (min-width: 1640px) { .phone-desktop { display: inline-block; } }
.wa-header { display: none; height: 44px; padding: 0 20px; }
@media (min-width: 1024px) { .wa-header { display: inline-flex; } }

/* theme toggle — exact spec */
.theme-toggle {
  display: flex; align-items: center; justify-content: center; position: relative;
  inline-size: 3.5rem; block-size: 2rem; min-inline-size: 3.5rem; min-block-size: 2rem;
  flex: 0 0 auto; overflow: visible; box-sizing: border-box;
}
@media (max-width: 767.98px) {
  .theme-toggle { inline-size: 2.75rem; block-size: 2.75rem; min-inline-size: 2.75rem; min-block-size: 2.75rem; }
}
.theme-toggle::before { content: ""; position: absolute; inset: -6px; }
.theme-toggle .track {
  position: absolute; inset-inline: 0; top: 50%; transform: translateY(-50%);
  inline-size: 3.5rem; block-size: 2rem; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: rgba(255,255,255,.06);
  transition: background-color 200ms;
}
[data-theme="light"] .theme-toggle .track { background: rgba(0,64,139,.08); }
/* QA fix 2026-08-24: never display:none the track — .knob lives INSIDE it (the v1
   invisible-toggle sin). On mobile the track goes visually bare instead. */
@media (max-width: 767.98px) {
  .theme-toggle .track {
    position: static; inline-size: auto; block-size: auto; transform: none;
    border: none; background: none;
    display: flex; align-items: center; justify-content: center;
  }
}
.theme-toggle .knob {
  position: absolute; top: 4px; left: 4px; width: 24px; height: 24px; border-radius: var(--r-pill);
  background: var(--grad-brand); display: flex; align-items: center; justify-content: center; color: #fff;
  transition: transform 260ms cubic-bezier(.34,1.4,.5,1);
}
@media (max-width: 767.98px) {
  .theme-toggle .knob { position: static; width: 20px; height: 20px; background: none; color: var(--ink); }
}
.theme-toggle .knob svg { width: 13px; height: 13px; }
/* AMEND 2026-08-24: light is default (knob left, unpressed). Dark = pressed, knob right. */
[data-theme="dark"] .theme-toggle .track .knob,
.theme-toggle[aria-pressed="true"] .knob { transform: translateX(24px); }
@media (max-width: 767.98px) { .theme-toggle[aria-pressed="true"] .knob, .theme-toggle .knob { transform: none; } }
.theme-toggle .k-sun, .theme-toggle .k-moon { position: absolute; }
/* Light (default): moon glyph shows — "click to go dark". Dark: sun glyph shows. */
[data-theme="light"] .theme-toggle .k-sun { opacity: 0; }
[data-theme="dark"] .theme-toggle .k-moon { opacity: 0; }
@media (max-width: 767.98px) {
  .theme-toggle .k-sun, .theme-toggle .k-moon { position: static; }
}

.nav-burger { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; position: relative; }
@media (min-width: 1024px) { .nav-burger { display: none; } }
.nav-burger svg { width: 22px; height: 22px; }

/* language toggle — compact ES/EN switch, lives in .header-actions next to the theme toggle */
.lang-toggle {
  display: flex; align-items: center; gap: 2px; padding: 3px; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: rgba(255,255,255,.06); flex: 0 0 auto;
}
[data-theme="light"] .lang-toggle { background: rgba(0,64,139,.06); }
.lang-toggle a, .lang-toggle span {
  position: relative; display: flex; align-items: center; justify-content: center;
  min-inline-size: 26px; block-size: 22px; padding: 0 7px; border-radius: var(--r-pill);
  font: 500 11px/1 var(--font-text); letter-spacing: .02em; color: var(--ink-3);
}
@media (min-width: 768px) {
  .lang-toggle a, .lang-toggle span { block-size: 24px; padding: 0 9px; font-size: 12px; }
}
.lang-toggle a::before { content: ""; position: absolute; inset: -8px; }
.lang-toggle a:hover { color: var(--ink); }
.lang-toggle [aria-current="true"] { background: var(--grad-brand); color: #01222B; }
[data-theme="light"] .lang-toggle [aria-current="true"] { background: #00408B; color: #fff; }

/* language toggle — mobile drawer variant, full-width pair below the nav links */
.drawer-lang { display: flex; gap: var(--s3); margin-top: var(--s7); }
.drawer-lang a, .drawer-lang span {
  flex: 1; text-align: center; padding: 12px 0; border-radius: var(--r-sm);
  border: 1px solid var(--line); font: 500 15px/1 var(--font-text); color: var(--ink-2);
}
.drawer-lang [aria-current="true"] { background: var(--grad-brand); color: #01222B; border-color: transparent; }
[data-theme="light"] .drawer-lang [aria-current="true"] { background: #00408B; color: #fff; }

/* mobile drawer */
.drawer-backdrop {
  position: fixed; inset: 0; z-index: 150; background: rgba(2,4,10,.5); opacity: 0; pointer-events: none;
  transition: opacity 240ms;
}
.drawer-backdrop.is-open { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed; inset: 0; z-index: 151; display: flex; flex-direction: column;
  padding: var(--s6) var(--gutter) var(--s8); transform: translateX(100%);
  transition: transform 320ms var(--ease-inout-str);
}
.drawer.is-open { transform: translateX(0); }
/* Cliente 2026-08-24 ("está más abajo", interpretación): los anchors aterrizaban con el
   título escondido bajo el header pegajoso — margen de scroll para todo destino ancla */
main [id] { scroll-margin-top: 96px; }

.drawer-close { position: absolute; top: var(--s6); right: var(--gutter); width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; }
.drawer-close svg { width: 22px; height: 22px; }
.drawer nav { display: flex; flex-direction: column; gap: 20px; margin-top: var(--s13); }
.drawer nav a { font: 600 24px/1.2 var(--font-display); color: var(--ink); opacity: 0; transform: translateY(16px); }
.drawer.is-open nav a { opacity: 1; transform: translateY(0); transition: opacity 320ms var(--ease-out-soft), transform 320ms var(--ease-out-soft); }
/* Cliente 2026-08-24: el drawer debe iluminar la página actual */
.drawer nav a[aria-current="page"] { color: var(--accent-text); display: flex; align-items: center; gap: 12px; }
.drawer nav a[aria-current="page"]::before { content: ""; width: 22px; height: 3px; border-radius: 2px; background: var(--grad-brand); flex: 0 0 auto; }
.drawer .btn { margin-top: auto; }

.wa-float {
  position: fixed; right: var(--s5); bottom: var(--s5); z-index: 90;
  width: 56px; height: 56px; border-radius: 50%; background: var(--grad-brand);
  display: flex; align-items: center; justify-content: center; color: #01222B;
  box-shadow: 0 10px 30px -10px rgba(0,224,237,.5);
}
@media (min-width: 1024px) { .wa-float { display: none; } }
.wa-float svg { width: 26px; height: 26px; }

/* ---------- 11. Footer ---------- */
.site-footer { background: var(--ground-deep); position: relative; color: #EBF9FF; }
.site-footer::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: var(--grad-brand); opacity: .4;
}
.footer-top { padding-block: var(--s10) var(--s9); border-bottom: 1px solid rgba(235,249,255,.1); }
.footer-top img { height: 32px; width: auto; margin-bottom: var(--s5); }
.footer-top .body-text { color: #A8C0D4; max-width: 46ch; margin-bottom: var(--s6); }
.footer-top .cta-row { display: flex; flex-wrap: wrap; gap: var(--s4); }
.footer-cols { padding-block: var(--s9); display: grid; grid-template-columns: 1fr; gap: var(--s8); }
@media (min-width: 768px) { .footer-cols { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .footer-cols { grid-template-columns: repeat(4, 1fr); } }
.footer-col h4 { font: 500 var(--fs-small)/1.2 var(--font-text); letter-spacing: .1em; text-transform: uppercase; color: #7DA6C4; margin-bottom: var(--s4); }
.footer-col ul { display: flex; flex-direction: column; gap: var(--s3); }
.footer-col a, .footer-col span { font: 400 var(--fs-body)/1.4 var(--font-text); color: #C9DFEF; }
.footer-col a:hover { color: #fff; }
.footer-bottom { padding-block: var(--s6); border-top: 1px solid rgba(235,249,255,.1); display: flex; flex-wrap: wrap; gap: var(--s4); justify-content: space-between; }
.footer-bottom .small { color: #7DA6C4; }

/* photo colour grade — unifies every photograph on the page */
.hero-photo-cell img, .door-photo img, .step-photo img, .why-photo img {
  filter: saturate(.94) contrast(1.05);
}
/* .pain-photo carries its own filter (saturate(.96) contrast(1.02)) per the airy §3.5-bis AMEND */

/* AMEND 2026-08-25 (fix 2, owner review r5) — corner-radius clip bug, one consistent recipe for
   every photo frame. Chromium promotes an <img> to its own compositing layer whenever it carries
   a CSS `filter` (every photo above does, via the colour-grade recipes) or a `transition:
   transform` (the hover-zoom recipe used on doors/tiles). Once promoted, the sharp rectangular
   corners of the image can paint past the parent's `overflow:hidden` + `border-radius` clip by a
   visible sliver — "photos poke past their rounded containers." Fix: the clipped element ITSELF
   also declares `border-radius: inherit`, so the compositor clips the promoted layer to the same
   shape instead of relying on the ancestor's clip alone. Applied uniformly to every frame. */
.hero-photo-cell img,
.pain-photo img,
.step-photo img,
.why-photo img,
.inner-hero-photo img,
.compare-frame img,
.bento-photo img,
.tile--photo .tile-photo-frame img {
  border-radius: inherit;
}
/* .door-photo is a two-level frame — the photo caps only the TOP of a card whose bottom half is
   text (.door-body), so it needs its own TOP-corner radius (inherited from .door) rather than a
   full 4-corner value, or the seam where the photo meets the text panel would show a rounded
   notch instead of sitting flush. */
.door-photo { border-top-left-radius: inherit; border-top-right-radius: inherit; }
.door-photo img { border-radius: inherit; }

/* ---------- 12. Home sections ---------- */

/* S1 hero */
.hero { position: relative; min-height: 88vh; display: flex; align-items: flex-start; padding-top: calc(var(--hdr-h) + var(--hdr-inset) * 3); padding-bottom: var(--s9); }
@media (max-width: 767.98px) { .hero { min-height: auto; padding-block: var(--section-pad); padding-top: calc(var(--hdr-h) + var(--hdr-inset) * 3); } }
/* AMEND 2026-08-25 (fix 1, owner review r5) — .hero never declared position:relative, so
   .scroll-cue's `position:absolute` fell through to the initial containing block (viewport-
   sized, anchored to the document top) instead of anchoring to the hero box. That made the cue's
   Y position track raw viewport height rather than where the hero content actually ended, so it
   collided with .hero-markers at common laptop heights (~900px) and floated stray into the next
   section at taller viewports (~1080px+). Fix: scope .hero to be the positioned ancestor, and
   reserve real padding-bottom room (>= cue offset var(--s6) + cue's own ~47px box) so the cue
   always sits inside empty padding space below .hero-markers, never overlapping it, at any
   height. Scoped to >=1024px since .scroll-cue itself only renders there (see §14 below). */
@media (min-width: 1024px) { .hero { padding-bottom: var(--s12); } }

/* AMEND 2026-08-24b §4.2 — the hero-grid is its OWN container (no .container class stacked on
   top of it): below 1024 the gutter alone insets it from the viewport edge (matches the fluid
   .container behaviour); at >=1024 max-width + margin:auto produce the aire (120px @1920 /
   40px @1440) with ZERO extra inset, so the photo cell can butt flush against the container's
   own right edge instead of losing another --gutter worth of space to double-padding. */
.hero-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--bento-gap);
  width: 100%; margin-inline: auto; padding-inline: var(--gutter);
}
@media (min-width: 768px) { .hero-grid { grid-template-columns: repeat(6, 1fr); } }
@media (min-width: 1024px) {
  .hero-grid { grid-template-columns: repeat(12, 1fr); max-width: var(--container-max); padding-inline: 0; }
}

.hero-copy { grid-column: 1 / -1; display: flex; flex-direction: column; gap: var(--s5); }
@media (min-width: 1024px) { .hero-copy { grid-column: 1 / 7; justify-content: center; padding-right: var(--s7); } }

.hero-eyebrow { margin-bottom: var(--s2); }
.hero h1 { margin-bottom: var(--s2); }
.hero-line { display: block; }
/* AMEND 2026-08-25 (fix 1): the display line-height (1.02) leaves almost no
   room below the baseline, so overflow:hidden on .hero-word clipped descenders
   (g/y/j/p/q — "Luego decides." / EN "you"). Grow the clip box downward with
   padding-bottom and cancel the added height with an equal negative margin so
   line spacing is unaffected; vertical-align:top keeps the top edge pinned. */
.hero-word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.22em; margin-bottom: -0.22em; }
.hero-word-inner { display: inline-block; }

.hero-cta-row { display: flex; flex-wrap: wrap; gap: var(--s4); margin-top: var(--s3); }
@media (max-width: 389.98px) { .hero-cta-row { flex-direction: column; } .hero-cta-row .btn { width: 100%; } }
/* Cliente 2026-08-24: "Sin anticipo" como chip limpio (el check verde suelto se veía raro) */
.hero-micro {
  display: inline-flex; align-items: center; gap: 8px; width: fit-content;
  margin-top: var(--s3); padding: 8px 14px; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: transparent;
  color: var(--ink-2); font: 500 var(--fs-small)/1 var(--font-text);
}
.hero-micro svg { width: 14px; height: 14px; color: var(--accent-text); flex: 0 0 auto; }
.hero-wa-ghost { display: inline-flex; align-items: center; gap: var(--s2); color: var(--ink-2); font: 400 var(--fs-small)/1.4 var(--font-text); margin-top: var(--s1); width: fit-content; }
.hero-wa-ghost:hover { color: var(--accent-text); }

.hero-photo-cell {
  grid-column: 1 / -1; grid-row: 2; border-radius: var(--r-lg); overflow: hidden; position: relative;
  aspect-ratio: 4 / 3;
}
@media (min-width: 768px) { .hero-photo-cell { grid-row: 2; aspect-ratio: auto; height: calc(var(--bento-row) * 2 + var(--bento-gap)); } }
@media (min-width: 1024px) {
  /* AMEND 2026-08-24b — a normal grid cell, no 100vw / negative-margin / absolute bleed. */
  .hero-photo-cell { grid-column: 7 / span 6; grid-row: 1; inline-size: 100%; aspect-ratio: 16 / 10; height: auto; align-self: start; }
}
.hero-photo-cell img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }

.hero-markers { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--bento-gap); }
@media (min-width: 768px) { .hero-markers { grid-template-columns: repeat(6, 1fr); } }
@media (min-width: 1024px) { .hero-markers { grid-template-columns: repeat(12, 1fr); grid-column: 1 / -1; } }
.hero-marker {
  grid-column: span 4; display: flex; flex-direction: row; align-items: center; gap: var(--s3);
  padding: var(--s4); border-radius: var(--r-md); min-height: 48px;
}
@media (min-width: 768px) {
  .hero-marker { grid-column: span 2; flex-direction: column; align-items: flex-start; min-height: 130px; justify-content: center; }
}
@media (min-width: 1024px) { .hero-marker { grid-column: span 4; } }
.hero-marker svg { width: 20px; height: 20px; color: var(--accent); flex: 0 0 auto; }
.hero-marker-copy { display: flex; flex-direction: column; gap: 2px; }
.hero-marker .h4 { font-size: 19px; }
.hero-marker .small { color: var(--ink-2); }

/* S2 doors */
.doors-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--bento-gap); }
@media (min-width: 768px) { .doors-grid { grid-template-columns: repeat(6, 1fr); } }
@media (min-width: 1024px) { .doors-grid { grid-template-columns: repeat(12, 1fr); } }
.door {
  grid-column: 1 / -1; border-radius: var(--tile-r); overflow: hidden; position: relative;
  display: flex; flex-direction: column; height: auto; padding: 0;
}
@media (min-width: 768px) { .door { grid-column: span 6; } }
@media (min-width: 1024px) { .door { grid-column: span 6; } }
.door-photo { position: relative; height: 55vw; max-height: 340px; overflow: hidden; }
@media (min-width: 768px) { .door-photo { height: 260px; } }
@media (min-width: 1024px) { .door-photo { flex: 0 0 60%; height: auto; } }
.door-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease-out-expo); }
.door-photo .tile-scrim { background: linear-gradient(180deg, var(--scrim-top) 0%, var(--scrim-bot) 100%); }
.door-body { padding: var(--tile-pad); display: flex; flex-direction: column; gap: var(--s3); flex: 1; }
@media (hover: hover) and (pointer: fine) {
  .door:hover .door-photo img { transform: scale(1.06); }
}

/* S3 "¿Te suena?" — AMEND 2026-08-24: airy in light (white card + rounded photo, no dark
   scrim, no full-bleed drama); the dramatic full-bleed treatment is kept for dark >=1024 only. */
.pain-wrap { position: relative; padding-block: var(--section-pad); }
.pain-grid { display: flex; flex-direction: column; gap: var(--s7); }
.pain-photo {
  position: relative; border-radius: var(--r-lg); overflow: hidden; isolation: isolate;
  height: 220px; flex: 0 0 auto;
}
@media (min-width: 768px) { .pain-photo { height: 300px; } }
.pain-photo img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.96) contrast(1.02); }
.pain-photo .tile-scrim { display: none; } /* AMEND: no scrim in light — the photo carries no text */
.pain-card {
  border-radius: var(--r-lg); padding: var(--s6); isolation: isolate; overflow: hidden;
}
@media (min-width: 768px) { .pain-card { padding: var(--s7); } }
@media (min-width: 1024px) { .pain-card { padding: var(--s8); } }

@media (min-width: 1024px) {
  .pain-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--bento-gap); align-items: stretch; }
  .pain-photo { grid-column: 8 / 13; height: auto; order: 2; }
  .pain-card { grid-column: 1 / 8; order: 1; display: flex; flex-direction: column; justify-content: center; }
}
/* Owner/cliente 2026-08-24: the dark full-bleed variant read as broken (bright photo
   blowing out against the dark ground). Dark now uses the SAME contained layout as
   light — card + rounded photo — with dark surfaces via tokens. One structure, two
   temas, ninguna sección que parezca error. The photo just gets a gentle dark grade. */
@media (min-width: 1024px) {
  [data-theme="dark"] .pain-photo img { filter: saturate(.9) contrast(1.02) brightness(.82); }
}
.pain-cols { display: grid; grid-template-columns: 1fr; gap: var(--s6); margin-top: var(--s6); }
@media (min-width: 640px) { .pain-cols { grid-template-columns: 1fr 1fr; } }
.pain-col h4 { font: 500 var(--fs-h4)/1.3 var(--font-text); color: var(--ink); margin-bottom: var(--s3); }
.pain-col ul { display: flex; flex-direction: column; gap: var(--s3); }
.pain-col li { display: flex; align-items: flex-start; gap: var(--s3); font: 400 17px/1.5 var(--font-text); color: var(--ink-2); }
.pain-col svg { width: 18px; height: 18px; color: var(--accent); flex: 0 0 auto; margin-top: 2px; }
.pain-links { display: flex; flex-wrap: wrap; gap: var(--s6); margin-top: var(--s6); }

/* S4 how it works */
.steps { display: flex; flex-direction: column; gap: 20px; position: relative; }
.steps-rail { position: absolute; left: 27px; top: 0; bottom: 0; width: 2px; background: var(--line); display: none; }
.steps-rail-fill { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--grad-brand); transform: scaleY(0); transform-origin: top; }
@media (min-width: 1024px) { .steps-rail { display: block; } }

.step {
  border-radius: var(--tile-r); padding: var(--tile-pad); position: relative; isolation: isolate;
  display: grid; grid-template-columns: 1fr; gap: var(--s4); min-height: 140px;
}
@media (min-width: 768px) { .step { min-height: 156px; } }
@media (min-width: 1024px) {
  .step { grid-template-columns: 88px 1fr 200px; align-items: center; gap: var(--s6); min-height: 220px; padding: var(--s7); margin-left: 56px; }
}
@media (min-width: 1600px) { .step { min-height: 220px; } }

.step-num { font: 600 48px/1 var(--font-display); color: var(--ink); opacity: .18; }
@media (min-width: 1024px) { .step-num { font-size: 72px; } }
@media (min-width: 1600px) { .step-num { font-size: 88px; } }
.step-node { display: none; }
@media (min-width: 1024px) {
  .step-node { display: block; position: absolute; left: -85px; top: 50%; transform: translate(-50%, -50%); width: 10px; height: 10px; border-radius: 50%; background: var(--accent-deep); opacity: .3; z-index: 2; }
}
.step-body { display: flex; flex-direction: column; gap: var(--s2); order: 3; }
@media (min-width: 1024px) { .step-body { order: 2; } }
/* AMEND 2026-08-25 (fix 2): mobile crops were cropping faces and crowding the
   title right underneath. Taller aspect on 390/768 + explicit breathing room
   below the photo (on top of the grid gap) + a face-friendly default crop. */
.step-photo { border-radius: var(--r-md); overflow: hidden; height: 168px; order: 2; margin-bottom: var(--s3); }
@media (min-width: 768px) { .step-photo { height: 208px; margin-bottom: var(--s4); } }
@media (min-width: 1024px) { .step-photo { height: 100%; order: 3; margin-bottom: 0; } }
.step-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 26%; }
.step-top-row { display: flex; align-items: center; justify-content: space-between; order: 1; }
@media (min-width: 1024px) { .step-top-row { display: contents; } }
.steps-footer { display: flex; justify-content: center; margin-top: var(--s7); }

/* S5 why azcendia bento */
.why-photo {
  position: relative; grid-column: 1 / -1; border-radius: var(--tile-r); overflow: hidden;
  isolation: isolate; height: calc(var(--bento-row) * 2 + var(--bento-gap));
  align-self: stretch; /* AMEND-fix: .bento now defaults align-items:start; this cell still
    needs to fill its full 2-row span (its img is height:100%) so it must opt back into stretch. */
}
@media (min-width: 768px) { .why-photo { grid-column: span 6; grid-row: span 2; } }
@media (min-width: 1024px) { .why-photo { grid-column: 1 / 5; grid-row: span 2; height: auto; } }
.why-photo img { width: 100%; height: 100%; object-fit: cover; }
.why-photo .tile-scrim { background: linear-gradient(180deg, var(--scrim-top) 0%, var(--scrim-bot) 100%); }
.why-photo .caption { position: absolute; z-index: 2; left: var(--tile-pad); bottom: var(--tile-pad); right: var(--tile-pad); color: #fff; font: 500 var(--fs-h4)/1.3 var(--font-text); }

/* S6 closing slab */
.slab {
  display: flex; flex-direction: column; gap: var(--s7); padding: var(--s7);
  height: 100%; box-sizing: border-box; justify-content: center;
}
@media (min-width: 768px) { .slab { padding: var(--s9); } }
@media (min-width: 1024px) {
  .slab { flex-direction: row; align-items: center; justify-content: space-between; padding: 72px; gap: var(--s9); }
}
.slab-copy { max-width: 640px; }
.slab-copy .h2 { margin-bottom: var(--s4); }
.slab-copy .lead { color: rgba(255,255,255,.86); margin-bottom: var(--s4); }
.slab-micro { font: 500 var(--fs-small)/1.4 var(--font-text); color: #fff; opacity: .9; }
.slab-cta { display: flex; flex-direction: column; gap: var(--s4); align-items: flex-start; flex: 0 0 auto; }
@media (min-width: 1024px) { .slab-cta { align-items: flex-end; } }
@media (max-width: 389.98px) { .slab-cta { width: 100%; } .slab-cta .btn { width: 100%; } }

/* ---------- 13. Reveal system (motion) ----------
   Hard rule: hidden states apply ONLY under html.has-motion, added by script.js
   after GSAP + friends actually boot. No-JS / failed CDN / reduced-motion => fully visible. */
[data-reveal] { opacity: 1; transform: none; clip-path: none; filter: none; }

html.has-motion [data-reveal="tile"] { opacity: 0; transform: translateY(34px) scale(.972); }
html.has-motion [data-reveal="text"] { opacity: 0; transform: translateY(22px); }
html.has-motion [data-reveal="photo"] { clip-path: inset(0 0 100% 0); }
html.has-motion .hero-word-inner { transform: translateY(0); }
@media (min-width: 1024px) {
  html.has-motion .hero-word-inner { opacity: 0; transform: translateY(34px); filter: blur(7px); }
}
html.has-motion .hero-eyebrow,
html.has-motion .hero-lead { opacity: 0; transform: translateY(18px); }
html.has-motion .hero-cta-row .btn,
html.has-motion .hero-micro,
html.has-motion .hero-wa-ghost { opacity: 0; transform: translateY(14px) scale(.96); }
html.has-motion .hero-photo-cell { clip-path: inset(0 0 100% 0); }
html.has-motion .hero-photo-cell img { transform: scale(1.14); }
html.has-motion .site-header { opacity: 0; transform: translateY(-110%); }
html.has-motion .scroll-cue { opacity: 0; }
html.has-motion .tile--accent::before { background-position: 0% 0; }
html.has-motion .tile--cta { background-position: 0% 50%; }

/* main fade for prefers-reduced-motion (harmless if it never triggers) */
@keyframes azcFade { from { opacity: 0; } to { opacity: 1; } }
html.motion-reduced #main { animation: azcFade .2s ease-out both; }

/* ---------- 14. Scroll cue ---------- */
.scroll-cue {
  position: absolute; left: 50%; bottom: var(--s6); transform: translateX(-50%);
  display: none; flex-direction: column; align-items: center; gap: var(--s2); color: var(--ink-3);
}
@media (min-width: 1024px) { .scroll-cue { display: flex; } }
.scroll-cue svg { width: 16px; height: 16px; }

/* ---------- 15. Reduced motion global fallback ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

/* ---------- 16. Misc ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px;
  border-radius: var(--r-pill); font: 500 12px/1 var(--font-text); letter-spacing: .12em; text-transform: uppercase;
  background: rgba(0,224,237,.10); border: 1px solid rgba(0,224,237,.28); color: #7DF0F8; width: fit-content;
}
[data-theme="light"] .chip { background: rgba(0,64,139,.07); border-color: rgba(0,64,139,.16); color: #006E78; }

/* ==========================================================================
   17. Interior pages — shared components (sitios-web / plataformas / nosotros /
   preguntas / contacto / privacidad / terminos). Reuses every Home primitive
   (.section, .bento, .tile, .pain-*, .steps, .chip, .btn-*) and adds only the
   pieces that don't exist yet: editorial hero, 2-up hero stat-chips, single-
   column dolores list, antes/despues compare, accordion, form, legal shell.
   ========================================================================== */

/* 17.1 — Interior hero (split, no bento cluster). Two flavours:
   .hero--split (copy 6 / photo 6, like Home) and .hero--editorial (7/5, used
   by Nosotros). Both keep the load sequence via [data-reveal]. */
.hero--inner { min-height: auto; align-items: stretch; padding-bottom: var(--s10); }
.inner-hero-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--bento-gap);
  width: 100%; margin-inline: auto; padding-inline: var(--gutter); align-items: center;
}
@media (min-width: 768px) { .inner-hero-grid { grid-template-columns: repeat(6, 1fr); } }
@media (min-width: 1024px) { .inner-hero-grid { grid-template-columns: repeat(12, 1fr); max-width: var(--container-max); padding-inline: 0; } }
.inner-hero-copy { grid-column: 1 / -1; display: flex; flex-direction: column; gap: var(--s5); }
@media (min-width: 1024px) { .inner-hero-copy { grid-column: 1 / 7; padding-right: var(--s7); } }
.inner-hero-copy--wide { }
@media (min-width: 1024px) { .inner-hero-copy--wide { grid-column: 1 / 8; } }
.inner-hero-photo {
  grid-column: 1 / -1; border-radius: var(--r-lg); overflow: hidden; position: relative;
  aspect-ratio: 4 / 3; margin-top: var(--s7);
}
@media (min-width: 768px) { .inner-hero-photo { aspect-ratio: 16 / 10; margin-top: var(--s8); } }
@media (min-width: 1024px) {
  .inner-hero-photo { grid-column: 7 / span 6; inline-size: 100%; aspect-ratio: 16 / 10; margin-top: 0; align-self: start; }
}
.inner-hero-photo--wide { }
@media (min-width: 1024px) { .inner-hero-photo--wide { grid-column: 8 / span 5; } }
.inner-hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; filter: saturate(.94) contrast(1.05); }

/* 2-up hero stat-chips row (interior pages use 2, Home uses 3 via .hero-markers) */
.hero-markers--2 { grid-template-columns: repeat(2, 1fr) !important; }
@media (max-width: 767.98px) { .hero-markers--2 { grid-template-columns: 1fr !important; } }
.hero-markers--2 .hero-marker { grid-column: span 1 !important; }

/* 17.2 — single-column dolores list (5 items, chip 32px + icon 20px, no columns) */
.pain-list { display: flex; flex-direction: column; gap: var(--s5); margin-top: var(--s6); }
.pain-list-item { display: flex; align-items: flex-start; gap: var(--s4); }
.pain-list-item .chip-ico {
  inline-size: 32px; block-size: 32px; border-radius: var(--r-xs); flex: 0 0 auto;
  display: grid; place-items: center; margin-top: 2px;
}
[data-theme="light"] .pain-list-item .chip-ico { background: rgba(0,64,139,.07); }
[data-theme="dark"] .pain-list-item .chip-ico { background: rgba(0,224,237,.12); }
.pain-list-item .chip-ico svg { width: 18px; height: 18px; color: var(--accent); stroke-width: 1.75; }
.pain-list-item h4 { font: 500 var(--fs-h4)/1.35 var(--font-text); color: var(--ink); margin-bottom: 4px; }
.pain-list-item p { font: 400 var(--fs-body)/1.55 var(--font-text); color: var(--ink-2); max-width: 52ch; }

/* 17.3 — Antes / Después comparativa (P3). Static side-by-side reveal
   (no scrub pin — kept simple per engineering-safety budget), each cell tags
   its own ANTES / DESPUÉS label. Both cells are real photographs (same
   person/desk, before vs. after), never a UI screenshot. AMEND 2026-08-25
   (fix 4, owner review r5): the "Ejemplo ilustrativo. No es el sistema de
   ningún cliente." disclaimer underneath was removed on the owner's
   instruction — it read as "we have no customers." The photos already carry
   neutral, non-claiming alt text, so no caption is needed. */
.compare-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--bento-gap); align-items: start; }
@media (min-width: 768px) { .compare-grid { grid-template-columns: repeat(6, 1fr); } }
@media (min-width: 1024px) { .compare-grid { grid-template-columns: repeat(12, 1fr); } }
.compare-cell { grid-column: 1 / -1; }
@media (min-width: 768px) { .compare-cell { grid-column: span 6; } }
@media (min-width: 1024px) { .compare-cell { grid-column: span 6; } }
.compare-frame {
  position: relative; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4 / 3; isolation: isolate;
}
.compare-frame img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.9) contrast(1.02) grayscale(.15); }
.compare-tag {
  position: absolute; top: var(--s4); left: var(--s4); z-index: 2; height: 28px; padding: 0 12px;
  border-radius: var(--r-pill); display: inline-flex; align-items: center;
  font: 500 12px/1 var(--font-text); letter-spacing: .1em; text-transform: uppercase;
  background: rgba(4,8,16,.62); color: #fff; backdrop-filter: blur(8px);
}
.compare-tag--after { background: var(--grad-brand); color: #01222B; }
/* mock UI: plain CSS bars standing in for an interface, never legible copy */
.compare-mock {
  aspect-ratio: 4 / 3; border-radius: var(--r-lg); padding: var(--s6); position: relative;
  display: flex; flex-direction: column; gap: var(--s3);
}
.compare-mock .m-topbar { height: 34px; border-radius: var(--r-xs); display: flex; gap: 8px; align-items: center; padding: 0 12px; }
.compare-mock .m-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); opacity: .4; }
.compare-mock .m-row { height: 16px; border-radius: 6px; background: var(--line); }
.compare-mock .m-row.w60 { width: 60%; } .compare-mock .m-row.w80 { width: 80%; } .compare-mock .m-row.w40 { width: 40%; }
.compare-mock .m-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: auto; }
.compare-mock .m-card { height: 54px; border-radius: var(--r-xs); background: var(--line); }
[data-theme="light"] .compare-mock { background: #FFFFFF; border: 1px solid var(--line); }
[data-theme="dark"] .compare-mock { background: rgba(9,16,28,.62); border: 1px solid var(--line); }
[data-theme="light"] .compare-mock .m-topbar { background: rgba(0,64,139,.06); }
[data-theme="dark"] .compare-mock .m-topbar { background: rgba(255,255,255,.05); }
.compare-caption { margin-top: var(--s3); }

/* 17.4 — Accordion (FAQ / mini-FAQ). §3.11 */
.accordion { display: flex; flex-direction: column; gap: 12px; }
.accordion-item { border-radius: var(--r-md); overflow: hidden; position: relative; isolation: isolate; }
.accordion-item .tile-frost, .accordion-item .tile-sheen { z-index: 2; }
.accordion-item .accordion-trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  padding: 20px 24px; text-align: left; cursor: pointer;
}
.accordion-item .accordion-trigger h4 { font: 500 18px/1.4 var(--font-text); color: var(--ink); }
.accordion-item .accordion-plus {
  flex: 0 0 auto; width: 20px; height: 20px; position: relative; transition: transform 240ms var(--ease-out-soft);
}
.accordion-item .accordion-plus::before, .accordion-item .accordion-plus::after {
  content: ""; position: absolute; background: var(--accent); border-radius: 2px;
}
.accordion-item .accordion-plus::before { inset: 9px 0; height: 2px; }
.accordion-item .accordion-plus::after { inset: 0 9px; width: 2px; }
.accordion-item[data-open="true"] .accordion-plus { transform: rotate(45deg); }
.accordion-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 280ms var(--ease-out-soft); }
.accordion-item[data-open="true"] .accordion-panel { grid-template-rows: 1fr; }
.accordion-panel-inner { overflow: hidden; }
.accordion-panel-inner p { padding: 0 24px 20px; font: 400 var(--fs-body)/1.6 var(--font-text); color: var(--ink-2); max-width: 68ch; }

/* 17.5 — Formulario (Contacto). §3.6 — todo dentro de UNA celda .glass grande */
.form-shell { padding: var(--s7); }
@media (min-width: 768px) { .form-shell { padding: var(--s8); } }
.form-grid { display: grid; grid-template-columns: 1fr; gap: var(--s5); }
@media (min-width: 768px) { .form-grid { grid-template-columns: 1fr 1fr; column-gap: var(--s6); } }
.field { display: flex; flex-direction: column; gap: 8px; }
.field--full { grid-column: 1 / -1; }
.field label {
  font: 500 13px/1.2 var(--font-text); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2);
}
.field input, .field select, .field textarea {
  height: 52px; border-radius: 14px; padding: 0 16px; font: 400 16px/1 var(--font-text);
  border: 1px solid; transition: border-color 160ms, box-shadow 160ms;
}
.field textarea { height: auto; min-height: 148px; padding: 14px 16px; resize: vertical; font: 400 16px/1.5 var(--font-text); }
@media (max-width: 389.98px) { .field input, .field select, .field textarea { height: 48px; } }
[data-theme="dark"] .field input, [data-theme="dark"] .field select, [data-theme="dark"] .field textarea {
  background: rgba(255,255,255,.05); border-color: rgba(153,214,255,.16); color: #EBF9FF;
}
[data-theme="dark"] .field input::placeholder, [data-theme="dark"] .field textarea::placeholder { color: #8FA6B9; }
[data-theme="light"] .field input, [data-theme="light"] .field select, [data-theme="light"] .field textarea {
  background: rgba(255,255,255,.86); border-color: rgba(4,27,51,.14); color: #041B33;
}
[data-theme="light"] .field input::placeholder, [data-theme="light"] .field textarea::placeholder { color: #5B7488; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--line-strong); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--focus-ring);
}
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border-color: var(--err); }
.field-error { font: 400 14px/1.4 var(--font-text); color: var(--err); display: none; }
.field.is-invalid .field-error { display: block; }
.hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; left: -9999px; }
.form-submit-row { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--s5); flex-wrap: wrap; margin-top: var(--s2); }
.form-submit-row .btn[aria-busy="true"] { opacity: .7; pointer-events: none; }
.form-status {
  display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: var(--r-sm);
  font: 400 15px/1.4 var(--font-text);
}
.form-status svg { width: 18px; height: 18px; flex: 0 0 auto; }
.form-status[hidden] { display: none; }
#form-success { color: var(--ok); }
#form-error { color: var(--err); }
[data-theme="dark"] .form-status { background: linear-gradient(180deg, rgba(24,38,60,0.72) 0%, rgba(9,16,28,0.78) 100%); }
[data-theme="light"] .form-status { background: #FFFFFF; border: 1px solid var(--line); }
.form-error-link { text-decoration: underline; color: inherit; }

/* 17.6 — Channel chips (Contacto C1) */
.channel-row { display: flex; flex-wrap: wrap; gap: var(--s4); margin-top: var(--s6); }
.channel-chip {
  display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 18px;
  border-radius: var(--r-pill); font: 500 15px/1 var(--font-text);
  transition: transform 200ms var(--ease-out-soft), border-color 200ms;
}
.channel-chip svg { width: 18px; height: 18px; color: var(--accent); }
[data-theme="dark"] .channel-chip { background: rgba(255,255,255,.05); border: 1px solid var(--line); color: var(--ink); }
[data-theme="light"] .channel-chip { background: #FFFFFF; border: 1px solid var(--line); color: var(--ink); }
.channel-chip:hover { transform: translateY(-2px); border-color: var(--line-strong); }
.missing-note { display: none; } /* MISSING comments render nothing — kept as HTML comments only */

/* 17.7 — Legal pages (Privacidad / Términos): flat, no bento, minimal motion */
.legal-banner {
  position: relative; overflow: hidden; isolation: isolate;
  margin-top: calc(-1 * (var(--hdr-h) + var(--hdr-inset) * 3));
  padding-top: calc(var(--hdr-h) + var(--hdr-inset) * 3 + var(--s8));
  padding-bottom: var(--s8); min-height: 260px;
  display: flex; align-items: flex-end;
}
@media (min-width: 768px) { .legal-banner { min-height: 320px; } }
.legal-banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.85) contrast(1.02); }
.legal-banner::after {
  content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(2,8,20,.15) 0%, var(--scrim-bot) 100%);
}
.legal-banner-copy { position: relative; z-index: 1; padding-block: var(--s7); width: 100%; }
.legal-banner-copy .h1, .legal-banner-copy .small { color: #fff; }
.legal-banner-copy .small { opacity: .82; margin-top: var(--s2); }
.legal-body { max-width: 68ch; }
.legal-layout { display: flex; flex-direction: column; gap: var(--s9); }
@media (min-width: 1024px) { .legal-layout { flex-direction: row; align-items: flex-start; gap: var(--s10); } }
.legal-layout .legal-toc { flex: 0 0 auto; width: 100%; }
@media (min-width: 1024px) { .legal-layout .legal-toc { width: 240px; position: sticky; top: calc(var(--hdr-h) + var(--hdr-inset) * 3 + 16px); } }
.legal-layout .legal-body { flex: 1 1 auto; min-width: 0; }
.legal-toc { display: flex; flex-direction: column; gap: 10px; padding: var(--s6); border-radius: var(--r-md); }
[data-theme="dark"] .legal-toc { background: linear-gradient(180deg, rgba(24,38,60,0.72) 0%, rgba(9,16,28,0.78) 100%); border: 1px solid var(--line); }
[data-theme="light"] .legal-toc { background: #FFFFFF; border: 1px solid var(--line); }
.legal-toc a { font: 400 15px/1.5 var(--font-text); color: var(--ink-2); }
.legal-toc a:hover { color: var(--accent-text); }
.legal-section { margin-top: var(--s10); scroll-margin-top: calc(var(--hdr-h) + var(--hdr-inset) * 3 + 16px); }
.legal-section:first-child { margin-top: 0; }
.legal-section h2 { margin-bottom: var(--s4); }
.legal-section p, .legal-section li { font: 400 17px/1.7 var(--font-text); color: var(--ink-2); margin-bottom: var(--s4); }
.legal-section ul { padding-left: 1.2em; list-style: disc; }
.legal-placeholder { color: var(--accent-text); font-style: normal; }
/* No motion on legal pages except a single fade on the banner. */
.legal-fade { opacity: 0; }
html.has-motion .legal-fade { opacity: 0; }

/* 17.8 — N5 founder block intentionally absent (see HTML comment). Principles
   bento / N4 "qué no hacemos" list reuse .bento/.tile and .steps respectively. */
.steps--no-photo .step { grid-template-columns: 1fr; }
@media (min-width: 1024px) { .steps--no-photo .step { grid-template-columns: 88px 1fr; margin-left: 56px; } }
.steps--no-photo .step-photo { display: none; }

/* 17.10 — generic photo-as-bento-cell (any interior section that drops a plain
   photo into the bento grid without its own bespoke wrapper class) */
.bento-photo { position: relative; border-radius: var(--tile-r); overflow: hidden; isolation: isolate; }
.bento-photo img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.94) contrast(1.05); }