/* El Banco de la Amistad · YANA (+one)
   Sistema gráfico: Navy #0A263E · Coral #E2613C · Bitter / Caveat / Courier Prime */

@font-face { font-family: 'Bitter'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/bitter-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Bitter'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/bitter-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Bitter'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/bitter-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Bitter'; font-style: normal; font-weight: 800; font-display: swap; src: url('fonts/bitter-latin-800-normal.woff2') format('woff2'); }
@font-face { font-family: 'Bitter'; font-style: italic; font-weight: 300; font-display: swap; src: url('fonts/bitter-latin-300-italic.woff2') format('woff2'); }
@font-face { font-family: 'Caveat'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/caveat-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Caveat'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/caveat-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Courier Prime'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/courier-prime-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Courier Prime'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/courier-prime-latin-700-normal.woff2') format('woff2'); }

:root {
  --navy: #0A263E;
  --navy-2: #12334B;
  --coral: #E2613C;
  --coral-hover: #CC5231;
  --coral-soft: #E8927A;
  --ink: #1A2938;
  --steel: #ADC2D1;
  --rule: #DBE0E6;
  --cream: #FAF6F2;
  --card-line: #EBE4DC;
  --muted: #5F6B74;
  --white: #FFFFFF;
  --serif: 'Bitter', Georgia, 'Times New Roman', serif;
  --script: 'Caveat', 'Segoe Script', cursive;
  --mono: 'Courier Prime', 'Courier New', monospace;
  --wrap: 1280px;
  --gutter: clamp(20px, 5.6vw, 80px);
  --radius: 8px;
  --pad: clamp(72px, 9vw, 128px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -0.01em; }

.wrap { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--coral); color: #fff; padding: 10px 16px; border-radius: 4px; font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; }

/* ---------- Tipografía de marca ---------- */
.script { font-family: var(--script); font-weight: 500; color: var(--coral); letter-spacing: 0; font-size: 1.24em; line-height: 0.9; }
.kicker {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 22px;
  font-family: var(--mono); font-weight: 700; font-size: 13px; line-height: 1.2;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink);
}
.kicker b { color: var(--coral); font-weight: 700; letter-spacing: 0.02em; }
.kicker i { display: block; width: 22px; height: 1px; background: currentColor; }
.kicker b + i { background: var(--coral); }
.kicker--center { justify-content: center; }
.kicker--light { color: var(--coral); }
.h2 { font-size: clamp(32px, 3.3vw, 47px); line-height: 1.16; color: var(--ink); }
.h2--light { color: var(--white); }
.lead { font-size: clamp(16px, 1.25vw, 18px); line-height: 1.6; color: var(--muted); }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 0 30px;
  border: 0; border-radius: 4px;
  background: var(--coral); color: var(--white);
  font-family: var(--serif); font-weight: 700; font-size: 15px; letter-spacing: 0.01em; text-transform: uppercase; text-decoration: none;
  cursor: pointer;
  transition: background-color .2s ease, transform .2s ease;
}
.btn:hover { background: var(--coral-hover); }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn[aria-disabled="true"] { background: #6E7D86; cursor: not-allowed; }
.btn--block { width: 100%; }
.textlink { font-weight: 600; font-size: 14px; text-underline-offset: 3px; }

/* ---------- Cabecera ---------- */
.site-head { position: fixed; inset: 0 0 auto 0; z-index: 20; color: var(--white); }
.site-head::before { content: ""; position: absolute; inset: 0; background: rgba(10,38,62,.96); -webkit-backdrop-filter: saturate(140%) blur(10px); backdrop-filter: saturate(140%) blur(10px); box-shadow: 0 1px 0 rgba(255,255,255,.06), 0 12px 32px rgba(5,20,34,.22); opacity: 0; transition: opacity .35s ease; pointer-events: none; }
.site-head.is-scrolled::before { opacity: 1; }
.site-head > .wrap { position: relative; }
.site-head--solid { position: sticky; top: 0; background: var(--navy); }
.site-head__bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 90px; transition: height .35s ease; }
.site-head.is-scrolled .site-head__bar { height: 72px; }
.brand { display: inline-flex; flex-direction: column; text-decoration: none; }
.brand img { width: 232px; height: auto; transition: width .35s ease; }
.site-head.is-scrolled .brand img { width: 200px; }
.nav { display: flex; align-items: center; gap: 30px; }
.nav__links { display: flex; gap: 30px; margin: 0; padding: 0; list-style: none; }
.nav__links a { font-weight: 700; font-size: 14px; letter-spacing: 0.02em; text-transform: uppercase; text-decoration: none; color: var(--white); opacity: .96; }
.nav__links a:hover { color: var(--coral-soft); }
.btn-private {
  display: inline-flex; align-items: center; gap: 9px;
  height: 42px; padding: 0 18px;
  border: 1px solid rgba(255,255,255,.85); border-radius: 4px;
  color: var(--white); text-decoration: none; font-weight: 700; font-size: 13px; letter-spacing: 0.02em; text-transform: uppercase;
  transition: background-color .2s ease, color .2s ease;
}
.btn-private:hover { background: var(--white); color: var(--navy); }
.btn-private svg { width: 17px; height: 17px; }
.nav-toggle { display: none; background: none; border: 0; color: var(--white); padding: 8px; margin-right: -8px; cursor: pointer; }
.nav-toggle svg { width: 28px; height: 28px; }
.nav-toggle svg[hidden] { display: none; }

/* ---------- Hero ---------- */
.hero { position: relative; min-height: max(800px, 100svh); max-height: 980px; display: flex; align-items: center; color: var(--white); background: var(--navy); overflow: hidden; }
.hero__media { position: absolute; top: 0; bottom: 0; right: 0; left: 56%; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.hero__media::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(10,38,62,.30) 0%, rgba(10,38,62,.18) 40%, rgba(10,38,62,.30) 100%); pointer-events: none; }
.hero__inner { position: relative; z-index: 1; padding: 130px 0 90px; }
.hero__title { font-size: clamp(42px, 4.6vw, 66px); line-height: 1.05; color: var(--white); }
.hero__title .script { display: block; margin-top: 10px; font-size: 1.42em; }
.hero__text { max-width: 560px; margin-top: 34px; font-size: clamp(16px, 1.2vw, 17px); line-height: 1.6; color: rgba(255,255,255,.94); }
.hero__text p { margin-bottom: 1.15em; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; margin-top: 30px; }
.hero__story { display: inline-flex; align-items: center; gap: 9px; color: var(--white); font-weight: 600; font-size: 14px; text-decoration: underline; text-underline-offset: 4px; }
.hero__story svg { width: 20px; height: 20px; flex: none; }
.hero__story:hover { color: var(--coral-soft); }
.notice {
  display: flex; align-items: center; gap: 26px;
  max-width: 515px; margin-top: 70px; padding: 24px 26px;
  background: rgba(19, 60, 82, .92); border: 1px solid rgba(255,255,255,.28); border-radius: 6px;
  font-size: 14px; line-height: 1.5; color: rgba(255,255,255,.95);
}
.notice img, .notice__mark { width: 64px; flex: none; overflow: visible; }
.notice p { margin: 0; }

/* ---------- 01 La realidad invisible ---------- */
.reality { background: var(--cream); padding: var(--pad) 0; }
.reality__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
.reality__head .h2 { max-width: 760px; }
.source { margin: 0; text-align: right; font-family: var(--mono); font-size: 13px; line-height: 1.5; color: var(--ink); white-space: nowrap; }
.source small { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #6C737A; }
.source b { font-weight: 700; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin: 66px 0 0; padding: 0; list-style: none; }
.stat { background: var(--white); border: 1px solid var(--card-line); border-radius: var(--radius); padding: 42px 38px 40px; }
.stat__n { display: block; font-weight: 800; font-size: clamp(44px, 4.1vw, 59px); line-height: 1; letter-spacing: -0.02em; color: var(--coral); }
.stat__l { display: block; margin-top: 30px; font-size: 16px; color: var(--muted); }
.stat__b { display: block; margin-top: 4px; font-weight: 600; font-size: 19px; color: var(--ink); }

/* ---------- 02 La inspiración ---------- */
.inspiration { background: var(--navy); color: var(--white); padding: var(--pad) 0; }
.inspiration__grid { display: grid; grid-template-columns: minmax(0, 515px) minmax(0, 1fr); gap: clamp(40px, 4.4vw, 64px); align-items: center; }
.inspiration__img { border-radius: var(--radius); overflow: hidden; aspect-ratio: 515 / 540; }
.inspiration__img img { width: 100%; height: 100%; object-fit: cover; }
.inspiration .h2 { margin-bottom: 34px; }
.inspiration p { max-width: 720px; font-size: 16px; line-height: 1.7; color: rgba(255,255,255,.92); }
.inspiration strong { color: var(--coral); font-weight: 700; }
.inspiration .btn { margin-top: 26px; }

/* ---------- 03 Metodología ---------- */
.method { background: var(--white); padding: var(--pad) 0; text-align: center; }
.method .h2 { margin-bottom: 64px; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin: 0; padding: 0; list-style: none; text-align: left; }
.step { background: var(--cream); border-radius: var(--radius); padding: 38px 38px 42px; }
.step__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 34px; }
.step__n { font-weight: 800; font-size: 30px; line-height: 1; color: var(--coral); }
.step__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--white); color: var(--ink); }
.step__icon svg { width: 22px; height: 22px; }
.step h3 { font-weight: 700; font-size: clamp(22px, 1.9vw, 27px); line-height: 1.25; color: var(--ink); }
.step p { margin: 14px 0 0; font-size: 15px; line-height: 1.6; color: var(--muted); }

/* ---------- 04 Ecosistema ---------- */
.eco { background: var(--cream); padding: var(--pad) 0; }
.eco .h2 { margin-bottom: 66px; }
.eco .h2 .script { display: block; margin-top: 8px; }
.eco__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 0; padding: 0; list-style: none; }
.eco__card { background: var(--white); border: 1px solid var(--card-line); border-radius: var(--radius); padding: 30px 32px 32px; }
.eco__card h3 { font-weight: 700; font-size: 22px; letter-spacing: 0.01em; text-transform: uppercase; color: var(--coral); }
.eco__card p { margin: 14px 0 0; font-size: 15px; line-height: 1.55; color: var(--muted); }

/* ---------- 05 Voluntariado ---------- */
.volunteer { background: var(--white); padding: var(--pad) 0; }
.volunteer__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.volunteer .h2 { margin-bottom: 30px; }
.volunteer .h2 .script { display: inline-block; }
.volunteer .lead { max-width: 560px; margin-bottom: 34px; }
.roles { margin: 6px 0 0; padding: 0; list-style: none; counter-reset: role; }
.roles li { position: relative; padding: 0 0 20px 44px; margin-bottom: 20px; border-bottom: 1px solid var(--rule); }
.roles li:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.roles li::before {
  counter-increment: role; content: counter(role);
  position: absolute; left: 0; top: 1px;
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: #FCE7E0; color: var(--coral); font-weight: 700; font-size: 13px;
}
.roles b { display: block; font-weight: 700; font-size: 18px; color: var(--ink); }
.roles span { display: block; margin-top: 2px; font-size: 15px; line-height: 1.5; color: var(--muted); }
.volunteer__img { margin: clamp(48px, 6vw, 80px) 0 0; border-radius: 10px; overflow: hidden; aspect-ratio: 2560 / 1434; background: var(--navy); }
.volunteer__img img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Cita ---------- */
.quote { background: var(--navy); color: var(--white); padding: clamp(80px, 9vw, 130px) 0; text-align: center; }
.quote blockquote { margin: 0 auto; max-width: 940px; }
.quote p { margin: 0; font-style: italic; font-weight: 300; font-size: clamp(26px, 2.8vw, 40px); line-height: 1.32; }
.quote footer { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 44px; font-family: var(--mono); font-weight: 700; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--coral); }
.quote footer i { display: block; width: 22px; height: 1px; background: currentColor; }

/* ---------- 06 Únete ---------- */
.join { background: var(--cream); padding: var(--pad) 0; }
.join__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 625px); gap: clamp(40px, 5vw, 76px); align-items: center; }
.join .h2 { margin-bottom: 36px; }
.join .h2 .script { display: inline-block; }
.join .lead { max-width: 610px; font-size: 16px; }
.by { margin-top: 36px; font-family: var(--mono); }
.by small { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #6C737A; }
.by a { font-weight: 700; font-size: 15px; letter-spacing: 0.02em; text-underline-offset: 3px; }
.form-card { background: var(--white); border: 1px solid var(--card-line); border-radius: 10px; padding: clamp(28px, 3.3vw, 48px); }
.form-card h3 { font-weight: 800; font-size: clamp(26px, 2.2vw, 31px); margin-bottom: 26px; color: var(--ink); }
.field { margin-bottom: 20px; }
.field label { display: block; margin-bottom: 8px; font-weight: 700; font-size: 12px; letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink); }
.field input {
  width: 100%; height: 48px; padding: 0 16px;
  background: #F8F4EF; border: 1px solid #E7E0D8; border-radius: 4px;
  font-family: var(--serif); font-size: 16px; color: var(--ink);
  transition: border-color .2s ease, background-color .2s ease;
}
.field input::placeholder { color: #8A9096; }
.field input:focus { outline: none; border-color: var(--coral); background: var(--white); }
.consent { display: flex; align-items: flex-start; gap: 10px; margin: 4px 0 24px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.consent input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--coral); flex: none; }
.consent a { color: var(--ink); text-underline-offset: 2px; }
.form-msg { margin: 16px 0 0; font-size: 14px; line-height: 1.5; }
.form-msg[data-state="ok"] { color: #1F7A4D; }
.form-msg[data-state="error"] { color: #B23A1B; }

/* ---------- Pie ---------- */
.site-foot { background: var(--navy); color: rgba(255,255,255,.88); padding: 56px 0 40px; }
.site-foot__top { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-bottom: 36px; border-bottom: 1px solid rgba(173,194,209,.22); }
.site-foot__top img { width: 216px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 12px 30px; margin: 0; padding: 0; list-style: none; font-size: 14px; }
.foot-links a { text-decoration: none; }
.foot-links a:hover { color: var(--coral-soft); }
.foot-links .u { text-decoration: underline; text-underline-offset: 3px; }
.foot-note { margin: 34px 0 0; text-align: center; font-size: 13px; color: rgba(255,255,255,.82); }
.foot-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; margin-top: 36px; font-family: var(--mono); font-size: 12px; color: var(--steel); }

/* ---------- Antes de comenzar ---------- */
.gate { background: var(--cream); padding: clamp(48px, 7vw, 80px) 0 clamp(64px, 8vw, 90px); min-height: calc(100svh - 90px - 330px); }
.gate__card { max-width: 680px; margin: 0 auto; background: var(--white); border: 1px solid var(--card-line); border-radius: 12px; padding: clamp(32px, 4.5vw, 54px) clamp(22px, 4.5vw, 46px) clamp(32px, 4vw, 48px); text-align: center; box-shadow: 0 10px 30px -22px rgba(10,38,62,.35); }
.gate__card h1 { font-size: clamp(30px, 3vw, 39px); line-height: 1.15; color: var(--ink); }
.gate__card h1 .script { display: block; margin-top: 6px; font-size: 0.95em; font-weight: 500; }
.gate__intro { margin: 22px auto 30px; max-width: 520px; font-size: 16px; color: var(--muted); }
.alert {
  display: flex; align-items: center; gap: 18px;
  margin: 0 0 30px; padding: 20px 24px;
  background: #FFF4EF; border: 1px solid #F6DDD3; border-left: 3px solid var(--coral); border-radius: 6px;
  text-align: left; font-weight: 700; font-size: 15px; line-height: 1.5; color: var(--ink);
}
.alert svg { width: 20px; height: 20px; flex: none; color: var(--coral); }
.alert p { margin: 0; }
.check { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 28px; font-size: 15px; color: var(--ink); cursor: pointer; text-align: left; }
.check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.check__box { display: grid; place-items: center; width: 22px; height: 22px; flex: none; border-radius: 5px; background: var(--coral); color: var(--white); }
.check__box svg { width: 15px; height: 15px; opacity: 0; transition: opacity .15s ease; }
.check input:checked + .check__box svg { opacity: 1; }
.check input:focus-visible + .check__box { outline: 2px solid var(--coral); outline-offset: 3px; }
.check a { color: var(--coral); text-underline-offset: 3px; }
.gate .btn { width: min(280px, 100%); }
.gate__back { display: inline-block; margin-top: 26px; font-weight: 700; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); text-underline-offset: 3px; }
.gate__msg { margin: 18px 0 0; font-size: 14px; color: var(--muted); }

/* ---------- Páginas de texto ---------- */
.doc { background: var(--cream); padding: clamp(56px, 7vw, 96px) 0; }
.doc__card { max-width: 820px; margin: 0 auto; background: var(--white); border: 1px solid var(--card-line); border-radius: 12px; padding: clamp(28px, 5vw, 64px); }
.doc__card h1 { font-size: clamp(30px, 3vw, 40px); margin-bottom: 24px; }
.doc__card h2 { font-size: 21px; font-weight: 700; margin: 34px 0 10px; }
.doc__card p, .doc__card li { color: var(--muted); }
.pending { padding: 18px 22px; border-left: 3px solid var(--coral); background: #FFF4EF; border-radius: 6px; color: var(--ink) !important; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .nav__links { gap: 22px; }
  .stats, .steps { gap: 20px; }
  .stat, .step { padding: 32px 28px; }
}
@media (max-width: 960px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    position: fixed; inset: 0; z-index: 30;
    flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 34px;
    padding: 110px var(--gutter) 40px;
    background: var(--navy);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity .25s ease, transform .25s ease; }
  .nav__links { flex-direction: column; gap: 22px; }
  .nav__links a { font-size: 20px; }
  .nav-toggle, .brand { position: relative; z-index: 40; }
  .reality__head { flex-direction: column; align-items: flex-start; }
  .source { text-align: left; }
  .stats, .steps, .eco__grid { grid-template-columns: 1fr; }
  .stats { margin-top: 44px; }
  .inspiration__grid, .volunteer__grid, .join__grid { grid-template-columns: 1fr; }
  .volunteer .btn { margin-bottom: 8px; }
  .inspiration__img { aspect-ratio: 4 / 3.4; }
  .method { text-align: left; }
  .method .kicker--center { justify-content: flex-start; }
  .method .h2 { margin-bottom: 44px; }
  .eco .h2 { margin-bottom: 44px; }
  .hero { min-height: 100svh; max-height: none; }
  .hero__media { left: 0; }
  .hero__media img { object-position: 60% 55%; }
  .hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,38,62,.72) 0%, rgba(10,38,62,.70) 45%, rgba(10,38,62,.9) 100%); }
}
@media (max-width: 600px) {
  .site-head__bar { height: 76px; }
  .brand img { width: 184px; }
  .site-head.is-scrolled .site-head__bar { height: 64px; }
  .site-head.is-scrolled .brand img { width: 164px; }
  .hero__inner { padding: 112px 0 56px; }
  .hero__title { font-size: 40px; }
  .hero__actions { flex-direction: column; align-items: flex-start; }
  .hero__actions .btn { width: 100%; }
  .notice { gap: 18px; margin-top: 44px; padding: 18px; font-size: 13px; }
  .notice img, .notice__mark { width: 52px; }
  .stat__n { font-size: 46px; }
  .stat__l { margin-top: 20px; }
  .step__top { margin-bottom: 22px; }
  .quote footer { font-size: 11px; }
  .site-foot__top { flex-direction: column; align-items: flex-start; }
  .foot-legal { flex-direction: column; }
  .alert { padding: 16px 18px; font-size: 14px; }
}

/* ---------- Volver arriba ---------- */
.to-top { position: fixed; right: 24px; bottom: 24px; z-index: 25; display: grid; place-items: center; width: 54px; height: 54px; padding: 0; border: 0; border-radius: 50%; background: var(--navy); color: var(--white); cursor: pointer; box-shadow: 0 10px 28px rgba(5,20,34,.28); opacity: 0; visibility: hidden; transform: translateY(14px) scale(.9); transition: opacity .3s ease, transform .3s ease, visibility 0s linear .3s, background .2s ease; }
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; transition: opacity .3s ease, transform .3s ease, background .2s ease; }
.to-top:hover { background: #0F3352; }
.to-top:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; }
.to-top__ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.to-top__ring circle { fill: none; stroke-width: 2.5; }
.to-top__track { stroke: rgba(255,255,255,.14); }
.to-top__bar { stroke: var(--coral); stroke-linecap: round; stroke-dasharray: 150.8; stroke-dashoffset: 150.8; }
.to-top__arrow { position: relative; width: 22px; height: 22px; }
.to-top.is-flying .to-top__arrow { animation: to-top-fly .55s cubic-bezier(.3,.7,.2,1); }
@keyframes to-top-fly { 0% { transform: none; } 45% { transform: translateY(-14px); opacity: 0; } 46% { transform: translateY(12px); opacity: 0; } 100% { transform: none; opacity: 1; } }
@media (max-width: 600px) { .to-top { right: 16px; bottom: 16px; width: 50px; height: 50px; } }

/* ---------- Cifras: barra de proporción ---------- */
.stat { position: relative; overflow: hidden; }
.stat__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: #F6E3DB; }
.stat__bar i { position: absolute; inset: 0; background: var(--coral); transform-origin: left center; transform: scaleX(var(--p, 0)); }

/* ---------- Detalles con vida ---------- */
.step, .eco__card { transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease, border-color .3s ease; }
.step:hover { transform: translateY(-6px); box-shadow: 0 20px 44px rgba(10,38,62,.10); }
.step__icon { transition: background .3s ease, color .3s ease; }
.step:hover .step__icon { background: var(--coral); color: var(--white); }
.step:hover .step__icon .scan { stroke: var(--white); }
.eco__card:hover { transform: translateY(-6px); border-color: var(--coral); box-shadow: 0 18px 40px rgba(10,38,62,.08); }
.hero__title .script { cursor: default; }
.notice__mark .mk-arm { transform-box: fill-box; transform-origin: 50% 100%; }

/* ---------- Movimiento (solo con JS y sin "reducir movimiento") ---------- */
.motion .hero__title, .motion .hero__text, .motion .hero__actions, .motion .notice, .motion .hero__media { visibility: hidden; }
@media (prefers-reduced-motion: reduce) {
  .site-head::before, .site-head__bar, .brand img, .to-top, .step, .eco__card { transition: none; }
  .to-top.is-flying .to-top__arrow { animation: none; }
}

/* ---------- El símbolo (vídeo del logo) ---------- */
.symbol { background: #0B273F; padding: clamp(24px, 4vw, 56px) 0; overflow: hidden; }
.symbol__frame { position: relative; margin: 0 auto; max-width: 1440px; aspect-ratio: 16 / 9; }
.symbol__video { display: block; width: 100%; height: 100%; object-fit: contain; background: #0B273F; }
.symbol__sound { position: absolute; left: clamp(16px, 3vw, 40px); bottom: clamp(16px, 3vw, 36px); display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px 10px 12px; border: 1px solid rgba(255,255,255,.32); border-radius: 999px; background: rgba(10,38,62,.55); color: var(--white); font-family: var(--sans); font-weight: 600; font-size: 13px; letter-spacing: .02em; cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background .2s ease, border-color .2s ease; }
.symbol__sound:hover { background: var(--coral); border-color: var(--coral); }
.symbol__sound:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; }
.symbol__sound svg { width: 18px; height: 18px; }
.symbol__sound svg[hidden] { display: none; }
@media (max-width: 700px) {
  .symbol__frame { aspect-ratio: 9 / 16; width: min(100%, calc(84svh * 9 / 16)); }
}

/* Ninguna animación puede provocar scroll lateral */
main { overflow-x: clip; }