/* ARKUNAY · sistema de diseño web v2
   Papel blanco, tinta casi negra, verde musgo y oro andino (Constitución ARKO v3).
   Tipografías: Playfair Display (titulares), Inter (texto), JetBrains Mono (etiquetas). */

:root {
  --paper: #FFFFFF; --paper-2: #F7F5EF; --paper-3: #EEEAE0;
  --ink: #1B1D18; --ink-2: #4A4D44; --mute: #6F6C60; /* contraste AA (≥4,5:1) sobre paper y paper-2 */
  --line: rgba(27,29,24,.1); --line-2: rgba(27,29,24,.2);
  --moss: #2D3A26; --moss-2: #3E5233; --gold: #C8A96A; --gold-d: #866630; --cream: #F0EBDB; --night: #0A0B09;
  --c-cuerpo: #3E5233; --c-alma: #9A7638; --c-espiritu: #1B1D18; --c-tension: #A56B55;
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --e-out: cubic-bezier(.16, 1, .3, 1); --e-io: cubic-bezier(.65, 0, .35, 1);
  --gut: max(16px, 4vw); --maxw: 1240px; --nav-h: 56px;
  --sw: 100vw; --sh: 56.25vw; /* tamaño del escenario 16:9 (lo fija el JS) */
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; background: var(--paper); color: var(--ink); }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body { font: 400 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; text-rendering: optimizeLegibility; }
img, video, canvas, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
::selection { background: var(--gold); color: var(--paper); }
:focus-visible { outline: 2px solid var(--gold-d); outline-offset: 3px; border-radius: 4px; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 200; background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: 999px; transition: top .3s var(--e-out); }
.skip:focus { top: 12px; }

/* ── tipografía ───────────────────────────────────────────── */
.eyebrow, .mono { font: 500 11px/1.5 var(--mono); letter-spacing: .22em; text-transform: uppercase; }
.eyebrow { color: var(--gold-d); display: inline-flex; align-items: center; gap: 12px; }
.eyebrow::before { content: ""; width: 26px; height: 1px; background: currentColor; }
.eyebrow.plain::before { display: none; }
.t-hero, .t-h1, .t-h2, .t-h3, .t-quote { font-family: var(--serif); font-weight: 400; margin: 0; text-wrap: balance; }
.t-hero { font-size: clamp(52px, 9vw, 150px); line-height: .95; letter-spacing: -.02em; }
.t-h1 { font-size: clamp(42px, 6.2vw, 100px); line-height: 1.0; letter-spacing: -.015em; }
.t-h2 { font-size: clamp(34px, 4.5vw, 70px); line-height: 1.06; letter-spacing: -.01em; }
.t-h3 { font-size: clamp(24px, 2.3vw, 34px); line-height: 1.18; }
.t-quote { font-size: clamp(28px, 3.4vw, 52px); line-height: 1.18; }
:is(.t-hero, .t-h1, .t-h2, .t-h3, .t-quote) em { font-style: italic; color: var(--gold-d); }
.t-lede { font: 300 clamp(19px, 1.6vw, 25px)/1.5 var(--sans); color: var(--ink-2); margin: 0; text-wrap: pretty; }
.t-body { color: var(--ink-2); margin: 0; text-wrap: pretty; }
.t-small { font-size: 14px; color: var(--mute); }
.center { text-align: center; }
p { margin: 0 0 1em; } p:last-child { margin-bottom: 0; }

/* ── estructura ───────────────────────────────────────────── */
.wrap { width: 100%; max-width: calc(var(--maxw) + var(--gut) * 2); margin-inline: auto; padding-inline: var(--gut); }
.wrap.narrow { max-width: calc(860px + var(--gut) * 2); }
.sec { padding-block: clamp(96px, 13vw, 190px); position: relative; }
.sec.tight { padding-block: clamp(72px, 9vw, 130px); }
.sec.paper2 { background: var(--paper-2); }
.sec.dark { background: var(--night); color: var(--cream); }
.sec.dark .t-lede, .sec.dark .t-body { color: rgba(240,235,219,.72); }
.sec.dark :is(.t-h1, .t-h2, .t-h3, .t-quote) em { color: var(--gold); }
.sec.dark .eyebrow { color: var(--gold); }
.head { display: grid; gap: 22px; max-width: 820px; margin-bottom: clamp(48px, 6vw, 90px); }
.head.center { margin-inline: auto; justify-items: center; }
.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

/* ── botones ──────────────────────────────────────────────── */
.btn { --bg: var(--ink); --fg: var(--paper); position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 26px; border-radius: 999px; background: var(--bg); color: var(--fg); border: 1px solid var(--bg); font: 500 15px/1 var(--sans); letter-spacing: .01em; cursor: pointer; white-space: nowrap; transition: background .35s var(--e-out), color .35s var(--e-out), border-color .35s var(--e-out); will-change: transform; }
.btn:hover { --bg: var(--moss); }
.btn .arr { transition: transform .45s var(--e-out); }
.btn:hover .arr { transform: translateX(4px); }
.btn.ghost { --bg: transparent; --fg: var(--ink); border-color: var(--line-2); }
.btn.ghost:hover { --bg: var(--ink); --fg: var(--paper); border-color: var(--ink); }
.btn.gold { --bg: var(--gold); --fg: var(--ink); }
.btn.gold:hover { --bg: var(--ink); --fg: var(--paper); }
.btn.light { --bg: var(--cream); --fg: var(--ink); }
.btn.light:hover { --bg: var(--gold); }
.btn.ghost-light { --bg: transparent; --fg: var(--cream); border-color: rgba(240,235,219,.35); }
.btn.ghost-light:hover { --bg: var(--cream); --fg: var(--ink); }
.btn.sm { min-height: 38px; padding: 0 18px; font-size: 14px; }
.btns { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.link { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; color: var(--ink); background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .5s var(--e-out); padding-bottom: 2px; }
.link:hover { background-size: 100% 1px; }
.link.gold { color: var(--gold-d); }

/* ── navegación ───────────────────────────────────────────── */
.nav { position: fixed; inset: 0 0 auto; z-index: 90; height: var(--nav-h); display: flex; align-items: center; transition: background .5s var(--e-out), color .5s var(--e-out), transform .6s var(--e-out), border-color .5s; background: rgba(255,255,255,.72); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--line); }
.nav.is-top { background: rgba(255,255,255,0); border-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.nav.is-dark { background: rgba(10,11,9,.62); color: var(--cream); border-color: rgba(240,235,219,.08); }
.nav.is-hidden { transform: translateY(-100%); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font: 500 15px/1 var(--serif); letter-spacing: .36em; }
.brand svg { width: 26px; height: 26px; flex: none; }
.nav-links { display: flex; align-items: center; gap: clamp(14px, 2.2vw, 32px); font-size: 13.5px; }
.nav-links a { opacity: .72; transition: opacity .3s; position: relative; }
.nav-links a:hover, .nav-links a[aria-current="page"] { opacity: 1; }
.nav-links a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: var(--gold-d); }
.nav-right { display: flex; align-items: center; gap: 10px; }
.nav .btn.sm { min-height: 34px; padding: 0 16px; font-size: 13px; }
.nav.is-dark .btn.sm { --bg: var(--cream); --fg: var(--ink); border-color: var(--cream); }
.snd { display: inline-flex; align-items: center; gap: 9px; height: 34px; padding: 0 14px 0 12px; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; cursor: pointer; font: 500 10.5px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; transition: border-color .3s, background .3s; }
.nav.is-dark .snd { border-color: rgba(240,235,219,.25); }
.snd:hover { border-color: currentColor; }
.snd .bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.snd .bars i { width: 2px; height: 3px; background: currentColor; border-radius: 1px; transition: height .3s var(--e-out); }
.snd[aria-pressed="true"] .bars i { animation: eq 1s var(--e-io) infinite alternate; }
.snd[aria-pressed="true"] .bars i:nth-child(2) { animation-delay: -.4s; animation-duration: .8s; }
.snd[aria-pressed="true"] .bars i:nth-child(3) { animation-delay: -.2s; animation-duration: 1.2s; }
.snd[aria-pressed="true"] .bars i:nth-child(4) { animation-delay: -.7s; animation-duration: .9s; }
@keyframes eq { from { height: 3px; } to { height: 12px; } }
.burger { display: none; width: 40px; height: 40px; border: 0; background: none; cursor: pointer; position: relative; }
.burger i { position: absolute; left: 11px; right: 11px; height: 1.5px; background: currentColor; transition: transform .5s var(--e-out), top .5s var(--e-out); }
.burger i:nth-child(1) { top: 16px; } .burger i:nth-child(2) { top: 23px; }
.menu-open .burger i:nth-child(1) { top: 19.5px; transform: rotate(45deg); }
.menu-open .burger i:nth-child(2) { top: 19.5px; transform: rotate(-45deg); }
.menu { position: fixed; inset: 0; z-index: 85; background: var(--paper); display: flex; flex-direction: column; justify-content: center; padding: 90px var(--gut) 40px; visibility: hidden; clip-path: inset(0 0 100% 0); transition: clip-path .7s var(--e-out), visibility 0s .7s; }
.menu-open .menu { visibility: visible; clip-path: inset(0 0 0 0); transition: clip-path .7s var(--e-out); }
.menu a { font: 400 clamp(38px, 10vw, 64px)/1.15 var(--serif); display: block; padding: 4px 0; }
.menu a em { font-style: italic; color: var(--gold-d); }
.menu .mono { margin-top: 36px; color: var(--mute); }
@media (max-width: 900px) { .nav-links { display: none; } .burger { display: block; } .nav .btn.sm { display: none; } }

/* ── progreso de lectura ──────────────────────────────────── */
.progress { position: fixed; left: 0; right: 0; top: 0; height: 2px; z-index: 95; background: var(--gold-d); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none; }

/* ── revelados (Motion) ───────────────────────────────────── */
.js .rv { opacity: 0; }
/* cabecera de página: entra con CSS desde el primer pintado (no espera al JS → mejor LCP) */
.js .phero .rv { opacity: 1; animation: rv-in 1s cubic-bezier(.2,.7,.2,1) both; }
.js .phero .rv:nth-child(2) { animation-delay: .08s; } .js .phero .rv:nth-child(3) { animation-delay: .16s; } .js .phero .rv:nth-child(n+4) { animation-delay: .24s; }
@keyframes rv-in { from { opacity: 0; transform: translateY(30px); filter: blur(6px); } }
.reduce .phero .rv { animation: none; }
.js .split .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.js .split .w > span { display: inline-block; transform: translateY(105%); }
.reduce .rv { opacity: 1 !important; }
.reduce .split .w > span { transform: none !important; }

/* ── imágenes ─────────────────────────────────────────────── */
.media { position: relative; overflow: hidden; border-radius: 18px; background: var(--paper-3); isolation: isolate; }
.media img { width: 100%; height: 100%; object-fit: cover; }
.media.par img { height: 118%; margin-top: -9%; will-change: transform; }
.cap-img { display: flex; justify-content: space-between; gap: 16px; margin-top: 14px; font-size: 14px; color: var(--mute); }
.cap-img b { color: var(--ink); font-weight: 500; }

/* ── tarjetas ─────────────────────────────────────────────── */
.card { position: relative; border-radius: 22px; background: var(--paper-2); padding: clamp(26px, 3vw, 40px); overflow: hidden; transition: background .5s var(--e-out); }
.card:hover { background: var(--paper-3); }
.grid { display: grid; gap: clamp(14px, 1.6vw, 22px); }
.g2 { grid-template-columns: repeat(2, 1fr); } .g3 { grid-template-columns: repeat(3, 1fr); } .g4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .g3, .g4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .g2, .g3, .g4 { grid-template-columns: 1fr; } }

/* ── cita a sangre ────────────────────────────────────────── */
.bleed { position: relative; min-height: 100svh; display: grid; align-items: end; color: var(--cream); overflow: hidden; }
.bleed > .bg { position: absolute; inset: 0; z-index: -1; }
.bleed > .bg img { width: 100%; height: 115%; object-fit: cover; will-change: transform; }
.bleed > .bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,11,9,0) 30%, rgba(10,11,9,.72) 100%); }
.bleed .wrap { padding-bottom: clamp(56px, 8vw, 120px); }
.bleed .t-quote em { color: var(--gold); }
.bleed .eyebrow { color: var(--gold); }

/* ── cabecera de páginas interiores ───────────────────────── */
.phero { padding: calc(var(--nav-h) + clamp(80px, 12vw, 170px)) 0 clamp(60px, 8vw, 110px); }
.phero .t-h1 { max-width: 14ch; margin: 22px 0 28px; }
.phero .t-lede { max-width: 640px; }
.meta { display: flex; flex-wrap: wrap; gap: 10px 34px; margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 14px; color: var(--mute); }
.meta b { color: var(--ink); font-weight: 500; }

/* ── pie ──────────────────────────────────────────────────── */
.foot { background: var(--night); color: var(--cream); padding: clamp(80px, 10vw, 140px) 0 36px; position: relative; overflow: hidden; }
.foot .big { font: 400 clamp(44px, 7vw, 116px)/1 var(--serif); letter-spacing: -.015em; margin: 18px 0 40px; max-width: 12ch; }
.foot .big em { font-style: italic; color: var(--gold); }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; margin-top: clamp(60px, 8vw, 110px); padding-top: 34px; border-top: 1px solid rgba(240,235,219,.12); }
.foot :is(h2, h4) { font: 500 11px/1.5 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin: 0 0 16px; }
.foot-grid a, .foot-grid span { display: block; color: rgba(240,235,219,.72); padding: 3px 0; transition: color .3s; }
.foot-grid a:hover { color: var(--cream); }
.foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 60px; font-size: 13px; color: rgba(240,235,219,.62); }
.foot .eyebrow { color: var(--gold); }
.foot .mark-bg { position: absolute; right: -8vw; top: -6vw; width: 46vw; max-width: 720px; color: rgba(200,169,106,.07); pointer-events: none; }
@media (max-width: 820px) { .foot-grid { grid-template-columns: 1fr 1fr; } }

/* ── transición entre páginas ─────────────────────────────── */
.pt { position: fixed; inset: 0; z-index: 300; background: var(--paper); display: grid; place-items: center; pointer-events: none; }
.pt svg { width: 64px; height: 64px; color: var(--ink); }
/* apertura al cargar en CSS (no espera al JS → mejor FCP/LCP); la salida al navegar la anima core.js */
.js .pt { animation: pt-out .9s cubic-bezier(.76,0,.24,1) .05s both; }
@keyframes pt-out { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 100% 0); visibility: hidden; } }
.reduce .pt { animation: none; display: none; }
.pt .pt-line { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--gold-d); transform-origin: 0 50%; transform: scaleX(0); }

/* ── vídeo modal ──────────────────────────────────────────── */
.vmodal { position: fixed; inset: 0; z-index: 250; background: rgba(10,11,9,.94); display: grid; place-items: center; padding: 5vh 4vw; visibility: hidden; opacity: 0; transition: opacity .5s var(--e-out), visibility 0s .5s; }
.vmodal.open { visibility: visible; opacity: 1; transition: opacity .5s var(--e-out); }
.vmodal video { width: min(100%, calc(90vh * 16 / 9)); aspect-ratio: 16/9; border-radius: 14px; background: #000; }
.vmodal .x { position: absolute; top: 18px; right: 18px; }

/* ── utilidades de movimiento reducido ────────────────────── */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* ── v11 · navegación: idioma, CTA móvil ── */
.nav .lang { font: 500 11px/1 var(--mono); letter-spacing: .16em; opacity: .7; padding: 8px 6px; }
.nav .lang:hover { opacity: 1; }
@media (max-width: 1180px) and (min-width: 901px) { .snd .lbl { display: none; } }
.menu a.menu-en { font: 500 13px/1.5 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-d); margin-top: 18px; }
.fab { position: fixed; z-index: 70; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); display: none; align-items: center; justify-content: center; width: 52px; height: 52px; padding: 0; border-radius: 50%; background: var(--ink); color: var(--paper); box-shadow: 0 10px 30px rgba(27,29,24,.22); transition: transform .5s var(--e-out), opacity .4s; } /* v12: solo el icono de WhatsApp, para no tapar los textos */
.fab span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.fab svg { width: 26px; height: 26px; color: #7ddc8f; }
@media (max-width: 900px) { .fab { display: inline-flex; } }
.fab.off, .menu-open .fab, body[data-nofab] .fab { opacity: 0; transform: translateY(24px); pointer-events: none; }

/* ── v11 · contacto en el pie: vías directas + formulario ── */
.cgrid { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(36px, 6vw, 100px); align-items: start; }
.cside .t-lede { color: rgba(240,235,219,.74); max-width: 30em; }
.cways { list-style: none; padding: 0; margin: 34px 0 0; border-top: 1px solid rgba(240,235,219,.14); }
.cways a { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 16px 0; border-bottom: 1px solid rgba(240,235,219,.14); font: 400 clamp(19px, 1.7vw, 24px)/1.3 var(--serif); color: var(--cream); transition: color .3s, padding .5s var(--e-out); word-break: break-word; }
.cways a:hover { color: var(--gold); padding-left: 8px; }
.cways span { font: 500 10.5px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); flex: none; }
.cnote { margin: 18px 0 0; font: 400 12.5px/1.6 var(--mono); letter-spacing: .04em; color: rgba(240,235,219,.5); }
.cform { display: grid; gap: 16px; padding: clamp(22px, 3vw, 36px); border-radius: 26px; background: rgba(240,235,219,.05); border: 1px solid rgba(240,235,219,.12); }
.cform label { display: grid; gap: 8px; font: 500 10.5px/1.3 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: rgba(240,235,219,.62); }
.cform small { font-size: inherit; letter-spacing: .08em; text-transform: none; opacity: .7; }
.cform input:not([type="checkbox"]), .cform select, .cform textarea { width: 100%; min-height: 48px; padding: 12px 16px; border-radius: 14px; border: 1px solid rgba(240,235,219,.2); background: rgba(10,11,9,.35); color: var(--cream); font: 400 16px/1.4 var(--sans); letter-spacing: 0; text-transform: none; transition: border-color .3s, background .3s; }
.cform select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%), linear-gradient(135deg, var(--gold) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.cform select option { color: var(--ink); }
.cform textarea { resize: vertical; min-height: 96px; }
.cform ::placeholder { color: rgba(240,235,219,.32); }
.cform :is(input, select, textarea):focus { outline: none; border-color: var(--gold); background: rgba(10,11,9,.55); }
.cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cf-row.c3 { grid-template-columns: 1.3fr 1.2fr .7fr; }
.cform .cf-ok { display: flex; gap: 12px; align-items: flex-start; font: 400 13.5px/1.5 var(--sans); letter-spacing: 0; text-transform: none; color: rgba(240,235,219,.7); cursor: pointer; }
.cf-ok input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--gold); flex: none; }
.cf-ok a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.cf-msg { margin: 0; min-height: 1.5em; font-size: 14px; color: var(--gold); }
.cf-msg.bad { color: #f0a58c; }
@media (max-width: 900px) { .cgrid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .cf-row, .cf-row.c3 { grid-template-columns: 1fr; } .cform .btns .btn { width: 100%; } }
.pt-intro { visibility: hidden; } /* v12: en la portada no hay cortina inicial: el logo empieza a dibujarse en el primer pintado */