/* ==========================================================================
   arline — base.css
   Tokens, tipografía, chrome global (header, footer 3 piezas, drawer, burger)
   Híbrido: coreografía Pallette · piel editorial Interiorglobe · marca Arline
   ========================================================================== */

/* ---------- Fuentes autoalojadas ---------- */
@font-face {
  font-family: 'EB Garamond';
  src: url('../assets/fonts/eb-garamond-v33-latin-regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'EB Garamond';
  src: url('../assets/fonts/eb-garamond-v33-latin-italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'EB Garamond';
  src: url('../assets/fonts/eb-garamond-v33-latin-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'EB Garamond';
  src: url('../assets/fonts/eb-garamond-v33-latin-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'TeX Gyre Heros';
  src: url('../assets/fonts/texgyreheros-regular.woff2') format('woff2');
  font-weight: 400 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'TeX Gyre Heros';
  src: url('../assets/fonts/texgyreheros-italic.woff2') format('woff2');
  font-weight: 400 500; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'TeX Gyre Heros';
  src: url('../assets/fonts/texgyreheros-bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'TeX Gyre Heros';
  src: url('../assets/fonts/texgyreheros-bolditalic.woff2') format('woff2');
  font-weight: 700; font-style: italic; font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* Color (RGB para poder usar rgba(var(--x), a)) */
  --bg: 250, 249, 249;          /* crema Interiorglobe */
  --ink: 38, 45, 29;            /* tinta verdosa Interiorglobe */
  --accent: 34, 58, 143;        /* azul arline #223A8F */
  --paper: 244, 243, 241;       /* banda gris cálida secundaria */

  --serif: 'EB Garamond', 'Times New Roman', serif;
  --grotesk: 'TeX Gyre Heros', 'Helvetica Neue', Arial, sans-serif;

  /* Espaciado (Pallette) */
  --container-padding: 2rem;
  --spaced-section: 5rem;
  --header-height: 64px;

  --duration: .3s;              /* hovers */
  --duration-reveal: .7s;       /* reveals */
  --hairline: 1px solid rgba(var(--ink), .18);
}
@media (min-width: 750px) {
  :root { --container-padding: 3.2rem; --spaced-section: 11rem; }
}
@media (min-width: 990px) {
  :root { --spaced-section: 16rem; }
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Lenis (scroll suave) — recomendaciones oficiales */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  font: 400 17px/1.55 var(--serif);
  background: rgb(var(--bg));
  color: rgb(var(--ink));
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; text-transform: inherit; letter-spacing: inherit; }
ul, ol { list-style: none; }

/* ---------- Tipografía ---------- */
h1, h2, h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -.015em; }
.heading-xl { font-size: clamp(30px, 4vw, 44px); line-height: 1.15; }   /* titular ficha */
.heading-l  { font-size: clamp(26px, 3vw, 34px); line-height: 1.2;  }   /* titular sección */
.heading-m  { font-size: 22px; line-height: 1.25; }

.editorial {                       /* párrafo editorial Interiorglobe */
  font-size: clamp(19px, 2vw, 24px);
  line-height: 1.3;
  letter-spacing: -.015em;
}
.editorial--indent { text-indent: 3.5em; }

.label {                           /* voz funcional: etiquetas, nav, meta */
  font: 400 13px/1.4 var(--grotesk);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.label--num { letter-spacing: .12em; }  /* "I. ESTUDIO" */
.meta { font: 400 13px/1.5 var(--grotesk); letter-spacing: .02em; }
.muted { color: rgba(var(--ink), .55); }
.credit-link { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(var(--ink), .3); transition: color var(--duration) ease; }
.credit-link:hover { color: rgb(var(--accent)); }
.caption { font: italic 400 15px/1.35 var(--serif); color: rgba(var(--ink), .7); }
.paren-link { font-family: var(--grotesk); font-size: 13px; letter-spacing: .02em; color: rgba(var(--ink), .55); transition: color var(--duration) ease; }
.paren-link:hover { color: rgb(var(--accent)); }

/* Botón píldora (coreografía Pallette, voz grotesk) */
.button {
  display: inline-block;
  font: 500 12px/1.2 var(--grotesk);
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 14px 28px;
  border-radius: 5px;
  background: rgb(var(--ink));
  color: rgb(var(--bg));
  border: 1px solid rgb(var(--ink));
  transition: all var(--duration) ease;
}
.button:hover { background: transparent; color: rgb(var(--ink)); }
.button--light { background: rgb(var(--bg)); color: rgb(var(--ink)); border-color: rgb(var(--bg)); }
.button--light:hover { background: transparent; color: rgb(var(--bg)); }

/* Enlace-flecha */
.link-arrow { font: 500 12px/1.2 var(--grotesk); letter-spacing: .12em; text-transform: uppercase; }
.link-arrow::after { content: '\25B8'; margin-left: .6em; display: inline-block; transition: transform var(--duration) ease; }
.link-arrow:hover::after { transform: translateX(4px); }
.link-arrow--diagonal::after { content: '\2197\FE0E'; }
.link-arrow--diagonal:hover::after { transform: translate(3px, -3px); }

/* ---------- Utilidades ---------- */
.container { padding-left: var(--container-padding); padding-right: var(--container-padding); }
.section { margin-top: var(--spaced-section); }
.hairline-top { border-top: var(--hairline); }

/* Etiqueta de sección con contenido desplazado (patrón Interiorglobe) */
.section-head { display: flex; flex-direction: column; gap: 1.6rem; }
@media (min-width: 990px) {
  .section-head { flex-direction: row; }
  .section-head > .label--num { flex: 0 0 25%; }
  .section-head > .section-body { flex: 1; }
}

/* Reveal sobrio (Pallette §7.1) */
.observe-me { opacity: .0001; transition: opacity var(--duration-reveal) ease; }
.observe-me.is-inview { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .observe-me { opacity: 1; transition: none; }
}

/* Wordmark recoloreable vía mask (SVG vectorizado del logo original) */
.wordmark {
  display: block;
  aspect-ratio: 259 / 70;
  background: currentColor;
  -webkit-mask: url('../assets/logo/arline-wordmark.svg') no-repeat center / contain;
  mask: url('../assets/logo/arline-wordmark.svg') no-repeat center / contain;
}

/* ==========================================================================
   Preloader (cortina de carga: wordmark + línea de progreso)
   ========================================================================== */
.preloader {
  position: fixed; inset: 0; z-index: 100;
  background: rgb(var(--bg));
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 1.5rem;
  transition: transform .9s cubic-bezier(.76, 0, .24, 1), visibility 0s .9s;
}
.preloader .wordmark {
  width: min(48vw, 200px);
  color: rgb(var(--accent));
  opacity: 0;
  transform: translateY(14px);
  animation: preloader-word .9s cubic-bezier(.33, 1, .68, 1) .15s forwards;
}
.preloader .preloader-line {
  width: min(48vw, 200px);
  height: 1px;
  background: rgba(var(--ink), .14);
  position: relative;
  overflow: hidden;
}
.preloader .preloader-line::after {
  content: '';
  position: absolute; inset: 0;
  background: rgb(var(--accent));
  transform: scaleX(0); transform-origin: left;
  animation: preloader-bar 1.1s cubic-bezier(.65, 0, .35, 1) .25s forwards;
}
/* La cortina sube y revela la página */
.preloader.is-done { transform: translateY(-100%); visibility: hidden; }
@keyframes preloader-word { to { opacity: 1; transform: translateY(0); } }
@keyframes preloader-bar { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .preloader { display: none; } }

/* ==========================================================================
   Cortina de transición entre páginas: mismo lenguaje que el preloader pero
   sin barra de carga; wipe de clip-path que barre desde abajo (motor en global.js)
   ========================================================================== */
.page-curtain {
  position: fixed; inset: 0; z-index: 90;
  background: rgb(var(--bg));
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  visibility: hidden;
  clip-path: inset(100% 0 0 0);
}
.page-curtain .wordmark {
  width: min(48vw, 200px);
  color: rgb(var(--accent));
}
/* Llegada por navegación interna: cubre desde el primer paint y sin preloader */
html.nav-arrive .page-curtain { visibility: visible; clip-path: inset(0 0 0 0); }
html.nav-arrive .preloader { display: none; }
@media (prefers-reduced-motion: reduce) { .page-curtain { display: none; } }

/* ==========================================================================
   Header (Pallette §5.2: 3 zonas, logo centrado, transparente → sólido)
   ========================================================================== */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: var(--header-height);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 var(--container-padding);
  color: rgb(var(--ink));
  background: rgb(var(--bg));
  border-bottom: var(--hairline);
  transition: background var(--duration) ease, color var(--duration) ease, border-color var(--duration) ease;
}
.site-header .header-logo { grid-column: 2; color: rgb(var(--accent)); transition: color var(--duration) ease; }
.site-header .header-logo .wordmark { width: 118px; }

/* Estado transparente sobre el hero */
.site-header.is-over-hero {
  background: transparent;
  border-bottom-color: transparent;
  color: #fff;
}
.site-header.is-over-hero .header-logo { color: #fff; }

.header-nav { display: none; }
.header-utils { display: flex; align-items: center; justify-content: flex-end; gap: 1.6rem; }
@media (min-width: 990px) {
  .header-nav { grid-column: 1; display: flex; gap: 2rem; }
  .header-nav a, .header-utils a, .header-utils button { position: relative; }
}
.header-nav a::after, .header-utils .header-cta::after {
  content: ''; position: absolute; left: 0; bottom: -4px; width: 100%; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform var(--duration) ease;
}
.header-nav a:hover::after, .header-nav a.is-active::after, .header-utils .header-cta:hover::after { transform: scaleX(1); }

/* CTA "Hablemos": en móvil (menú hamburguesa) solo la flecha diagonal;
   en desktop solo el texto, sin flecha. Mismo breakpoint que el burger. */
.header-cta { display: inline-flex; align-items: center; }
.header-cta-label { display: none; }
.header-cta-arrow { display: block; }
@media (min-width: 990px) {
  .header-cta-label { display: inline; }
  .header-cta-arrow { display: none; }
}

/* Burger (móvil) */
.burger { grid-column: 1; justify-self: start; display: inline-flex; flex-direction: column; gap: 5px; padding: 6px 0; }
.burger span { width: 22px; height: 1.5px; background: currentColor; transition: transform var(--duration) ease, opacity var(--duration) ease; }
@media (min-width: 990px) { .burger { display: none; } }

/* Overlay menú móvil */
.mobile-menu {
  position: fixed; inset: 0; z-index: 60;
  background: rgb(var(--bg));
  display: flex; flex-direction: column;
  padding: calc(var(--header-height) + 2rem) var(--container-padding) 2.4rem;
  opacity: 0; visibility: hidden; transition: opacity var(--duration) ease, visibility var(--duration) ease;
}
.mobile-menu.is-open { opacity: 1; visibility: visible; }
.mobile-menu nav a {
  display: block;
  font: 400 30px/1.2 var(--serif);
  letter-spacing: -.015em;
  padding: 1.4rem 0;
  border-bottom: var(--hairline);
}
.mobile-menu nav a:first-child { border-top: var(--hairline); }
.mobile-menu .mobile-menu-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; }
.mobile-menu-close { position: absolute; top: 20px; right: var(--container-padding); }

/* ==========================================================================
   Drawer de contacto (carrito Pallette §5.6 reconvertido)
   ========================================================================== */
.drawer-overlay {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(var(--ink), .35);
  opacity: 0; visibility: hidden;
  transition: opacity var(--duration) ease, visibility var(--duration) ease;
}
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 71;
  width: min(430px, 100%);
  background: rgb(var(--bg));
  border-left: var(--hairline);
  display: flex; flex-direction: column;
  padding: 1.6rem 2rem 2rem;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform .45s cubic-bezier(.33, 1, .68, 1);
}
body.drawer-open .drawer { transform: translateX(0); }
body.drawer-open .drawer-overlay { opacity: 1; visibility: visible; }
@media (prefers-reduced-motion: reduce) { .drawer { transition-duration: .01s; } }

.drawer-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 1.2rem; border-bottom: var(--hairline); }
.drawer h2 { font-size: 26px; margin: 1.8rem 0 .4rem; }
.drawer .drawer-intro { margin-bottom: 1.8rem; }
/* Canales directos: email y teléfono en voz serif */
.drawer-channels { display: grid; border-top: var(--hairline); }
.drawer-channel { display: grid; gap: .45rem; padding: 1.5rem 0; border-bottom: var(--hairline); }
.drawer-channel-value {
  font: 400 24px/1.15 var(--serif);
  letter-spacing: -.015em;
  transition: color var(--duration) ease;
}
.drawer-channel:hover .drawer-channel-value { color: rgb(var(--accent)); }
.drawer-channel:focus { outline: none; }
.drawer-channel:focus-visible { outline: 1px solid rgb(var(--accent)); outline-offset: 4px; }

.drawer-data { display: grid; gap: 1.1rem; padding: 1.6rem 0; }
.drawer-data a { transition: color var(--duration) ease; }
.drawer-data a:hover { color: rgb(var(--accent)); }

/* ==========================================================================
   Footer 3 piezas (Pallette §5.7)
   ========================================================================== */

/* El footer debe pintar por encima del hero sticky (cortina), igual que main */
body > footer { position: relative; z-index: 3; background: rgb(var(--bg)); }

/* El hueco antes del footer lo pone el padding del main, que sí pinta
   fondo y no deja ver el hero sticky a través */
main { display: block; padding-bottom: var(--spaced-section); }

/* 1 · Footer clásico. El padding inferior extra deja sitio a la banda azul
   cuando se apila encima (stacking) sin tapar contenido */
.footer-main {
  padding: 4rem var(--container-padding) 8rem;
  display: grid; gap: 3rem;
  border-top: var(--hairline);
}
/* Stacking (misma coreografía que la cortina del hero): el footer clásico
   queda sticky en el último tramo de scroll y la banda azul se apila encima */
.footer-main.stack-active {
  position: sticky;
  top: var(--footer-sticky-top, auto);
  z-index: 1;
}
.footer-brand .wordmark { width: 132px; color: rgb(var(--accent)); }
.footer-brand .footer-claim { font: italic 400 19px/1.4 var(--serif); margin: 1.2rem 0 .6rem; max-width: 30ch; }
.footer-cols { display: grid; gap: 2.4rem; }
.footer-col h3 { font: 400 13px/1.4 var(--grotesk); letter-spacing: .08em; text-transform: uppercase; color: rgba(var(--ink), .5); margin-bottom: 1rem; }
.footer-col li { margin-bottom: .55rem; }
.footer-col a { transition: color var(--duration) ease; }
.footer-col a:hover { color: rgb(var(--accent)); }
@media (min-width: 750px) {
  .footer-main { grid-template-columns: 1.2fr 2fr; }
  .footer-cols { grid-template-columns: repeat(3, 1fr); }
}

/* 2 · Banner final: wordmark gigante con reveal (Pallette §7.6).
   z-index por encima del footer clásico para el stacking */
.footer-banner-wrap { position: relative; z-index: 2; overflow: hidden; }
.footer-banner {
  background: rgb(var(--accent));
  padding: clamp(4rem, 12vw, 9rem) var(--container-padding);
  display: flex; align-items: center; justify-content: center;
  will-change: transform;
}
/* El reveal parte de scale 1.1: con 90vw de base, el wordmark arranca
   ocupando ~99vw (márgenes laterales mínimos) y asienta en 90vw */
.footer-banner .wordmark { flex: none; width: 90vw; color: #fff; }