/* ==========================================================================
   Temoc — landing misterioso ("El umbral")
   Sistema: Temoc Design System v3 "Casa de luz".
   Casi puro texto: cal, tinta, un acento, dos motifs, silencio.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=DM+Sans:ital,opsz,wght@0,9..40,300..700;1,9..40,300..500&display=swap");

/* ---- Tokens (subconjunto del design system) ------------------------------ */
:root {
  --cal-50: #FDFBF7; --cal-100: #F8F3EB; --cal-200: #F1E9DD;
  --arena-300: #DFD2BE;
  --tinta-900: #1E1A16; --tinta-700: #3F382F; --tinta-500: #6E6459; --tinta-300: #9C9184;
  --rosa-600: #C93F59; --rosa-500: #E05A72; --rosa-300: #F2A9B5; --rosa-100: #FBE2E6;
  --sol-500: #E9A63B;
  --anil-600: #23407F; --anil-500: #3A5CA8; --anil-300: #A9BADF; --anil-100: #E7ECF8;

  --surface-page: var(--cal-50);
  --accent-600: var(--rosa-600); --accent-500: var(--rosa-500);
  --accent-300: var(--rosa-300); --accent-100: var(--rosa-100);
  --on-accent: #FFFFFF;

  --text-display: var(--tinta-900);
  --text-body: var(--tinta-700);
  --text-muted: var(--tinta-500);
  --text-faint: var(--tinta-300);
  --border-hairline: #1E1A1614;
  --border-soft: var(--arena-300);
  --focus-ring: var(--accent-500);

  --font-display: "Instrument Serif", Georgia, serif;
  --font-text: "DM Sans", system-ui, sans-serif;

  --radius-s: 10px; --radius-pill: 999px;
  --arch: 999px 999px var(--radius-s) var(--radius-s);

  --shadow-2: 0 6px 20px rgba(30, 26, 22, .07);

  --ease-soft: cubic-bezier(.22, .9, .3, 1);
  --ease-out: cubic-bezier(.16, .84, .44, 1);
  --dur-quick: 140ms; --dur-base: 240ms; --dur-drift: 640ms;
  --rise: 6px;
  --transition-soft: transform var(--dur-base) var(--ease-soft), opacity var(--dur-base) var(--ease-soft), background-color var(--dur-quick) var(--ease-soft), color var(--dur-quick) var(--ease-soft), border-color var(--dur-quick) var(--ease-soft), box-shadow var(--dur-base) var(--ease-soft);
}
[data-tema="anil"], [data-tema="el"] {
  --accent-600: var(--anil-600); --accent-500: var(--anil-500);
  --accent-300: var(--anil-300); --accent-100: var(--anil-100);
}

/* ---- Base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font: 400 16px/1.6 var(--font-text);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}
a { color: inherit; text-decoration: none; }
::selection { background: var(--rosa-100); color: var(--tinta-900); }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }

.t-eyebrow {
  font: 500 11px/1.2 var(--font-text);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-600);
}
.t-italic { font-style: italic; }

/* ---- La columna ---------------------------------------------------------------
   Todo vive en una sola columna centrada y angosta. El vacío es la composición. */
.col {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: 0 20px;
  text-align: center;
}

/* ---- Wordmark ------------------------------------------------------------------
   Pertenece al umbral: se queda en la puerta y se despide al entrar (scrollea
   con el hero — nunca flota encima del texto). */
.mark {
  position: absolute; top: 0; left: 0; right: 0; z-index: 10;
  padding: 26px 20px 18px;
  text-align: center;
  pointer-events: none;
}
.mark a { pointer-events: auto; }
.wordmark {
  font: 400 24px/1 var(--font-display);
  letter-spacing: .06em;
  color: var(--tinta-900);
}

/* ---- El umbral (primer viewport) -------------------------------------------------- */
.umbral {
  min-height: 100svh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 34px;
  padding: 110px 0 72px;
}
.umbral__arco { width: 168px; height: 168px; color: var(--tinta-900); }
.umbral__arco svg { width: 100%; height: 100%; }
.umbral h1 {
  margin: 0;
  font: 400 clamp(38px, 6vw, 60px)/1.08 var(--font-display);
  letter-spacing: -.015em;
  color: var(--text-display);
}
.umbral__nota {
  margin: 0;
  font: 400 17px/1.6 var(--font-text);
  color: var(--text-muted);
  max-width: 36ch;
}
/* Hilo que baja — invitación a seguir */
.umbral__hilo {
  width: 1.4px; height: 56px;
  background: var(--tinta-500);
  margin-top: 6px;
  transform-origin: top;
}

/* Trazo del arco: cada path se dibuja una vez, como quien lo dibuja a mano. */
html.js .umbral__arco path { stroke-dasharray: 340; stroke-dashoffset: 340; }
html.js.is-ready .umbral__arco path {
  animation: trazo var(--dur-drift) var(--ease-out) forwards;
}
html.js.is-ready .umbral__arco path:nth-child(2) { animation-delay: 420ms; }
html.js.is-ready .umbral__arco path:nth-child(3) { animation-delay: 840ms; }
@keyframes trazo { to { stroke-dashoffset: 0; } }

html.js .umbral__hilo { transform: scaleY(0); }
html.js.is-ready .umbral__hilo {
  transition: transform var(--dur-drift) var(--ease-out) 1400ms;
  transform: scaleY(1);
}

/* ---- El pasillo: el hilo rodea cada bloque de texto, trazado por el scroll ----------
   JS dibuja la ruta midiendo dónde termina el hilo del héroe, por dónde esquivar
   cada frase y dónde está el sol. */
.pasillo {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 0;
}
.pasillo__linea {
  fill: none;
  stroke: var(--tinta-500);
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
}
.pasillo__punto {
  fill: var(--tinta-500);
  opacity: 0;
  transform: scale(.3);
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-drift) var(--ease-out);
}
.pasillo__punto.is-visto { opacity: 1; transform: none; }
.pasillo__giro {
  fill: none;
  stroke: var(--accent-500);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  opacity: 0;
  transition: opacity var(--dur-drift) var(--ease-out);
}
.pasillo__giro.is-visto { opacity: .5; }
main { position: relative; }
main > section { position: relative; z-index: 1; }

/* Los rayos del sol se trazan uno a uno, una sola vez, al llegar el hilo. */
html.js .cierre__sol .rayo { stroke-dasharray: 20; stroke-dashoffset: 20; }
html.js .cierre__sol.is-trazado .rayo {
  animation: trazo var(--dur-drift) var(--ease-out) forwards;
}
html.js .cierre__sol.is-trazado .rayo:nth-of-type(1) { animation-delay: 0ms; }
html.js .cierre__sol.is-trazado .rayo:nth-of-type(2) { animation-delay: 70ms; }
html.js .cierre__sol.is-trazado .rayo:nth-of-type(3) { animation-delay: 140ms; }
html.js .cierre__sol.is-trazado .rayo:nth-of-type(4) { animation-delay: 210ms; }
html.js .cierre__sol.is-trazado .rayo:nth-of-type(5) { animation-delay: 280ms; }
html.js .cierre__sol.is-trazado .rayo:nth-of-type(6) { animation-delay: 350ms; }
html.js .cierre__sol.is-trazado .rayo:nth-of-type(7) { animation-delay: 420ms; }
html.js .cierre__sol.is-trazado .rayo:nth-of-type(8) { animation-delay: 490ms; }

/* ---- La sombra: el momento obsidiana ------------------------------------------------
   Un solo bloque de tinta en toda la página; una sola frase en hueso. */
.sombra {
  background: var(--tinta-900);
  padding: 26vh 20px;
  text-align: center;
}
.sombra p {
  margin: 0 auto;
  font: 400 clamp(32px, 4.8vw, 50px)/1.14 var(--font-display);
  letter-spacing: -.015em;
  color: var(--cal-50);
  max-width: 20ch;
}

/* ---- Las líneas (el credo) ---------------------------------------------------------
   Una frase por pantalla de aire. Se leen caminando, no corriendo. */
.credo { padding: 12vh 0 6vh; }
.credo__linea {
  min-height: 46vh;
  display: flex; align-items: center; justify-content: center;
}
.credo__linea p {
  margin: 0;
  font: 400 clamp(28px, 4.2vw, 42px)/1.18 var(--font-display);
  letter-spacing: -.01em;
  color: var(--text-display);
  max-width: 22ch;
}
.credo__linea--quieta p { color: var(--text-muted); max-width: 28ch; }
/* La promesa es el producto entero: se lee como titular. */
.credo__linea--promesa p {
  font-size: clamp(32px, 5vw, 50px);
  max-width: 20ch;
}

/* ---- Qué es (dos párrafos, nada más) ------------------------------------------------- */
.esencia { padding: 10vh 0; }
/* Caja del ancho del texto: el hilo mide contra letras, no contra un span vacío. */
.esencia .t-eyebrow { display: block; width: fit-content; margin: 0 auto 22px; }
.esencia p {
  margin: 0 auto;
  font: 400 18px/1.7 var(--font-text);
  color: var(--text-body);
  max-width: 46ch;
}
.esencia p + p { margin-top: 14px; color: var(--text-muted); }

/* ---- El cierre -------------------------------------------------------------------------- */
.cierre {
  padding: 14vh 0 12vh;
  display: flex; flex-direction: column; align-items: center; gap: 30px;
}
.cierre__sol { width: 58px; height: 58px; color: var(--sol-500); }
.cierre__sol svg { width: 100%; height: 100%; }
.cierre h2 {
  /* el margen inferior le da a la curva del hilo espacio para volver al
     centro antes de tocar la puerta — no lo reduzcas sin ajustar script.js */
  margin: 0 0 48px;
  font: 400 clamp(34px, 5vw, 52px)/1.08 var(--font-display);
  letter-spacing: -.015em;
  color: var(--text-display);
}
.cierre__acciones {
  display: flex; gap: 14px; align-items: center; justify-content: center;
  flex-wrap: wrap; margin-top: 4px;
}
.cierre__nota { margin: 0; font: 400 14px/1.55 var(--font-text); color: var(--text-faint); }
/* Empresas y aliados: presentes, sin competir con la puerta principal. */
.cierre__links {
  display: flex; gap: 14px; align-items: center; justify-content: center; flex-wrap: wrap;
  font: 400 14px/1.55 var(--font-text); font-weight: 500;
  color: var(--text-muted);
}
.cierre__links a { transition: var(--transition-soft); border-bottom: 1px solid transparent; }
.cierre__links a:hover { color: var(--tinta-900); border-bottom-color: var(--tinta-900); }
/* El hilo llega a la puerta: la cerradura responde, sin resplandor. */
.btn--primary.is-destino { box-shadow: 0 0 0 4px var(--cal-200); }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-text); font-weight: 500; font-size: 16px;
  height: 56px; padding: 0 30px;
  border-radius: var(--radius-pill); border: 1px solid transparent;
  cursor: pointer; white-space: nowrap;
  transition: var(--transition-soft);
}
/* La puerta es de tinta: obsidiana con texto en hueso, hover sobrio. */
.btn--primary { background: var(--tinta-900); color: var(--cal-50); }
.btn--primary:hover { background: var(--tinta-700); }
.btn--secondary { background: transparent; color: var(--tinta-900); border-color: var(--border-soft); }
.btn--secondary:hover { border-color: var(--tinta-900); }

/* ---- Pie ----------------------------------------------------------------------------------- */
.pie {
  border-top: 1px solid var(--border-hairline);
  padding: 22px 20px 26px;
}
.pie .col {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font: 500 11px/1.3 var(--font-text);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-faint);
}
.pie a { color: inherit; transition: var(--transition-soft); }
.pie a:hover { color: var(--tinta-900); }

/* ---- Entradas (mejora progresiva; sin JS todo es visible) ----------------------------------- */
html.js .reveal { opacity: 0; transform: translateY(var(--rise)); }
html.js .reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity var(--dur-drift) var(--ease-out), transform var(--dur-drift) var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .reveal { opacity: 1; transform: none; transition: none; }
  html.js .umbral__arco path { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
  html.js .umbral__hilo { transform: none; transition: none; }
  html.js .pasillo__linea { stroke-dashoffset: 0 !important; }
  html.js .pasillo__punto, html.js .pasillo__giro { opacity: 1; transform: none; transition: none; }
  html.js .pasillo__giro { opacity: .5; }
  html.js .cierre__sol .rayo { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
  .btn { transition: none; }
}

@media (max-width: 560px) {
  .umbral { gap: 26px; }
  .umbral__arco { width: 128px; height: 128px; }
  .credo__linea { min-height: 38vh; }
  .cierre__acciones { flex-direction: column; width: 100%; }
  .cierre__acciones .btn { width: 100%; max-width: 320px; }
  /* El texto cede un poco de ancho para que el hilo lo rodee con 24px de aire. */
  .credo__linea p, .esencia p, .cierre h2 { max-width: calc(100vw - 80px); }
}