/* thewhitepulse · estilos
   Sistema áureo: φ = 1,618. Tamaños ×√φ, espacios y radios en Fibonacci, columnas 61,8 / 38,2,
   movimiento en 144 · 233 · 377 ms. Marca: Gabarito, pizarra, ámbar, niebla y blanco. */

@font-face {
  font-family: "Gabarito";
  src: url("/fuentes/gabarito-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* Marca */
  --pizarra: #12212C;
  --ambar: #F2A12E;
  --ambar-hondo: #E3901A;
  --niebla: #F3F5F6;
  --blanco: #FFFFFF;
  --gris: #66727B;
  --linea: #E7EAEC;
  --gris-claro: #A9B3BA;
  /* Semáforo (solo para el estado de los contactos) */
  --verde: #2E9E6A;
  --rojo: #E0563F;

  /* φ = 1,618 · base = el cuerpo de texto (17 px) */
  --phi: 1.618;
  --base: 1.0625rem;
  --fs--2: calc(var(--base) / 1.618);
  --fs--1: calc(var(--base) / 1.272);
  --fs-0: var(--base);
  --fs-1: calc(var(--base) * 1.272);
  --fs-2: calc(var(--base) * 1.618);
  --fs-3: calc(var(--base) * 2.058);
  --fs-4: calc(var(--base) * 2.618);
  --fs-5: calc(var(--base) * 3.330);
  --fs-6: calc(var(--base) * 4.236);
  --fs-7: calc(var(--base) * 5.388);

  --lh-body: 1.618;
  --lh-title: 1.272;
  --lh-display: 1.128;

  /* Pesos áureos con la fuente variable: 400 · 509 · 647 */
  --fw-0: 400;
  --fw-1: 509;
  --fw-2: 647;

  /* Fibonacci */
  --s-1: 5px; --s-2: 8px; --s-3: 13px; --s-4: 21px;
  --s-5: 34px; --s-6: 55px; --s-7: 89px; --s-8: 144px;
  --r-1: 5px; --r-2: 8px; --r-3: 13px; --r-4: 21px; --r-5: 34px;

  --measure: 34em;
  --ancho: 1220px; /* 754 × φ */

  --t-1: 144ms; --t-2: 233ms; --t-3: 377ms;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-back: cubic-bezier(.34, 1.56, .64, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--s-7); }
body {
  margin: 0;
  background: var(--blanco);
  color: var(--pizarra);
  font-family: "Gabarito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: var(--fs-0);
  font-weight: var(--fw-0);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, p, ul, ol, figure { margin: 0; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
::selection { background: var(--ambar); color: var(--pizarra); }
:focus-visible { outline: 2px solid var(--pizarra); outline-offset: 3px; border-radius: var(--r-1); }

.envoltura { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: var(--s-4); }
@media (min-width: 760px) { .envoltura { padding-inline: var(--s-5); } }

.solo-lectores {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Tipografía ---------- */
.antetitulo {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: var(--fs--1); font-weight: var(--fw-1);
  letter-spacing: .08em; text-transform: uppercase; color: var(--gris);
}
.antetitulo::before {
  content: ""; width: var(--s-2); height: var(--s-2); border-radius: 50%; background: var(--ambar);
}
h1 {
  font-size: clamp(var(--fs-5), 5.6vw, var(--fs-6));
  line-height: var(--lh-display);
  font-weight: var(--fw-2);
  letter-spacing: -0.024em;
  text-wrap: balance;
}
h2 {
  font-size: clamp(var(--fs-3), 3.8vw, var(--fs-4));
  line-height: var(--lh-title);
  font-weight: var(--fw-2);
  letter-spacing: -0.018em;
  text-wrap: balance;
}
h3 { font-size: var(--fs-2); line-height: var(--lh-title); font-weight: var(--fw-2); letter-spacing: -0.01em; }
.entradilla { font-size: var(--fs-1); line-height: var(--lh-body); max-width: var(--measure); text-wrap: pretty; }
.secundario { color: var(--gris); }

/* El punto ámbar que late, como el de la marca */
.punto {
  display: inline-block; color: var(--ambar);
  transform-origin: 50% 80%;
  animation: latido 3.236s var(--ease) infinite;
}
@keyframes latido {
  0%, 62% { transform: scale(1); }
  66% { transform: scale(1.38); }
  71% { transform: scale(1); }
  75% { transform: scale(1.21); }
  82%, 100% { transform: scale(1); }
}

/* ---------- Botones y enlaces ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: var(--s-6);
  padding: var(--s-3) var(--s-5);
  border: 0; border-radius: var(--r-2);
  background: var(--ambar); color: var(--pizarra);
  font: inherit; font-size: var(--fs-1); font-weight: var(--fw-2); line-height: var(--lh-title);
  text-decoration: none; cursor: pointer;
  box-shadow: 0 0 0 0 rgba(242, 161, 46, 0);
  transition: background var(--t-2) var(--ease), box-shadow var(--t-2) var(--ease), transform var(--t-1) var(--ease);
}
.boton:hover { background: var(--ambar-hondo); box-shadow: 0 0 0 var(--s-1) rgba(242, 161, 46, .21); }
.boton:active { transform: scale(.982); }
.boton[disabled] { opacity: .618; cursor: progress; }
.boton-peq { min-height: calc(var(--base) * 2.618); padding: var(--s-2) var(--s-4); font-size: var(--fs-0); }

.enlace {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-weight: var(--fw-1); text-decoration: none; color: var(--pizarra);
  border-bottom: 2px solid var(--linea);
  transition: border-color var(--t-2) var(--ease);
}
.enlace:hover { border-color: var(--ambar); }
.enlace span { transition: transform var(--t-2) var(--ease); }
.enlace:hover span { transform: translateY(3px); }

/* ---------- Cabecera ---------- */
.cabecera {
  position: sticky; top: 0; z-index: 20;
  background: rgba(255, 255, 255, .96);
  -webkit-backdrop-filter: saturate(1.618) blur(13px);
  backdrop-filter: saturate(1.618) blur(13px);
  transition: box-shadow var(--t-2) var(--ease);
}
.cabecera.con-borde { box-shadow: 0 1px 0 var(--linea); }
.cabecera .envoltura { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); height: var(--s-7); }
.marca { display: block; flex: none; }
.marca img { height: calc(var(--base) * 1.618); width: auto; }
.nav { display: none; }
.nav ul { display: flex; gap: var(--s-5); list-style: none; padding: 0; }
.nav a { text-decoration: none; font-weight: var(--fw-1); color: var(--gris); transition: color var(--t-2) var(--ease); }
.nav a:hover { color: var(--pizarra); }
.cabecera-dcha { display: flex; align-items: center; gap: var(--s-5); }
@media (min-width: 900px) {
  .nav { display: block; }
  .marca img { height: var(--s-5); }
}

/* ---------- Héroe ---------- */
.heroe .envoltura {
  display: grid; gap: var(--s-6); align-items: center;
  padding-top: var(--s-6); padding-bottom: var(--s-7);
}
.heroe-texto { display: grid; gap: var(--s-4); justify-items: start; }
.heroe-texto h1 { margin-bottom: var(--s-1); }
.acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); margin-top: var(--s-3); }
.nota { font-size: var(--fs--1); color: var(--gris); max-width: 34em; }
/* Sello «Te lo montamos todo»: lo primero que se lee */
.sello {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: var(--s-1) var(--s-3) var(--s-1) var(--s-1);
  border-radius: var(--s-5); background: var(--niebla);
  font-size: var(--fs--1); font-weight: var(--fw-1); line-height: var(--lh-title);
}
.sello i {
  flex: none; width: var(--s-4); height: var(--s-4); border-radius: 50%;
  background: var(--ambar) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 21'%3E%3Cpath d='M6 10.8l3 3 6-6.3' fill='none' stroke='%2312212C' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
}
.hechos { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); margin-top: var(--s-2); font-size: var(--fs--1); color: var(--gris); }
.hechos li { display: inline-flex; align-items: center; gap: var(--s-2); }
.hechos li::before {
  content: ""; flex: none; width: var(--s-3); height: var(--s-3);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13'%3E%3Cpath d='M2.5 6.8l2.6 2.6 5.4-5.8' fill='none' stroke='%23F2A12E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
}
.escena { position: relative; width: 100%; }
.escena svg { width: 100%; height: auto; overflow: visible; font-family: "Gabarito", system-ui, sans-serif; }
.heroe-escena { max-width: 610px; justify-self: center; }
@media (min-width: 600px) { .heroe-escena { max-width: none; } }
@media (min-width: 1060px) {
  .heroe .envoltura {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.618fr);
    gap: var(--s-6);
    padding-top: var(--s-6); padding-bottom: var(--s-8);
  }
}

/* ---------- Secciones ---------- */
.seccion { padding-block: var(--s-7); }
@media (min-width: 760px) { .seccion { padding-block: var(--s-8); } }
.seccion-niebla { background: var(--niebla); }
.cabeza { display: grid; gap: var(--s-3); max-width: 34em; margin-bottom: var(--s-6); }
.cabeza .entradilla { color: var(--gris); margin-top: var(--s-1); }

/* ---------- Tres pilares ---------- */
.pilares { display: grid; gap: var(--s-5); }
.pilar {
  position: relative; display: grid;
  background: var(--blanco); border-radius: var(--r-4); overflow: hidden;
}
.pilar::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  border-radius: inherit; box-shadow: inset 0 0 0 1px var(--linea);
}
.pilar-escena { aspect-ratio: 1 / 1; background: var(--niebla); }
.pilar-texto { display: grid; gap: var(--s-2); align-content: start; padding: var(--s-5); }
.pilar-num { font-size: var(--fs--1); font-weight: var(--fw-1); color: var(--gris); letter-spacing: .08em; text-transform: uppercase; }
.pilar-texto p:last-child { color: var(--gris); }
.progreso { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: transparent; z-index: 2; }
.progreso i { display: block; height: 100%; width: 100%; background: var(--ambar); transform-origin: 0 50%; transform: scaleX(0); }
@media (min-width: 640px) and (max-width: 1059px) {
  .pilar { grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr); align-items: center; }
}
@media (min-width: 1060px) {
  .pilares { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- Tu panel: sección oscura con la garza gigante ----------
   La garza y el titular repiten la composición del logo: el texto va bajo el pico, donde en el logo va
   el nombre, y el cuello baja hasta la línea base del texto. --g = píxeles por unidad de la garza. */
.seccion-panel { position: relative; overflow: hidden; background: var(--pizarra); color: var(--niebla); }
.seccion-panel .antetitulo { color: var(--gris-claro); }
.seccion-panel .entradilla { color: var(--gris-claro); }
.seccion-panel h2 { color: var(--blanco); }
.panel-arriba { display: grid; gap: var(--s-6); align-items: end; }
@media (min-width: 1060px) {
  .panel-arriba { grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr); gap: var(--s-7); }
}
.garza-lockup {
  --g: .26;
  position: relative;
  padding: calc(196px * var(--g)) 0 0 calc(239px * var(--g));
}
.garza-gigante {
  position: absolute; left: 0; top: 0; bottom: calc(var(--fs-1) * .42); /* el cuello acaba en la línea base, como en el logo */
  width: calc(735px * var(--g));
  overflow: hidden; pointer-events: none;
}
.garza-gigante svg { width: 100%; height: auto; }
.garza-texto { display: grid; gap: var(--s-3); justify-items: start; }
.garza-texto .entradilla { margin-top: var(--s-1); }
@media (min-width: 760px) { .garza-lockup { --g: .36; } }
@media (min-width: 1060px) { .garza-lockup { --g: .55; } }

.funciones { list-style: none; padding: 0; display: grid; gap: var(--s-4); }
.funciones li { display: grid; gap: var(--s-1); padding-top: var(--s-4); border-top: 1px solid rgba(243, 245, 246, .13); }
.funciones b { font-weight: var(--fw-2); color: var(--blanco); }
.funciones span { color: var(--gris-claro); }
.panel-escena { margin-top: var(--s-7); }
.panel-escena[data-forma="movil"] { max-width: 466px; margin-inline: auto; }
.panel-escena svg { filter: drop-shadow(0 var(--s-4) var(--s-6) rgba(0, 0, 0, .34)); }

/* El punto que salta del pico de la garza al panel */
.salto {
  position: absolute; left: 0; top: 0; z-index: 4;
  width: var(--s-4); height: var(--s-4); border-radius: 50%;
  background: var(--ambar); opacity: 0; pointer-events: none;
  box-shadow: 0 0 0 var(--s-2) rgba(242, 161, 46, .21);
}

/* ---------- Pasos ---------- */
.pasos { list-style: none; padding: 0; position: relative; display: grid; gap: var(--s-6); counter-reset: paso; }
.paso { position: relative; display: grid; gap: var(--s-2); align-content: start; padding-left: calc(var(--s-6) + var(--s-4)); }
.paso p { color: var(--gris); max-width: 24em; }
.paso-num {
  position: absolute; left: 0; top: 0;
  width: var(--s-6); height: var(--s-6); border-radius: 50%;
  display: grid; place-items: center;
  background: var(--blanco); box-shadow: inset 0 0 0 2px var(--linea);
  font-size: var(--fs-1); font-weight: var(--fw-2);
  transition: box-shadow var(--t-3) var(--ease), background var(--t-3) var(--ease);
}
.paso-num::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--ambar); opacity: 0;
}
.paso.llegado .paso-num { background: var(--niebla); box-shadow: inset 0 0 0 2px var(--ambar); }
.paso.llegado .paso-num::after { animation: onda 987ms var(--ease) both; }
@keyframes onda { 0% { opacity: .89; transform: scale(1); } 100% { opacity: 0; transform: scale(1.618); } }
/* La línea y el punto que la recorre se colocan desde app.js, midiendo los círculos */
.pasos-linea { position: absolute; z-index: -1; background: var(--linea); border-radius: 2px; }
.pasos-linea i { position: absolute; inset: 0; background: var(--ambar); border-radius: inherit; transform-origin: 0 0; }
.pasos-bola {
  position: absolute; z-index: -1; width: var(--s-3); height: var(--s-3);
  margin: calc(var(--s-3) / -2) 0 0 calc(var(--s-3) / -2);
  border-radius: 50%; background: var(--ambar); opacity: 0;
  box-shadow: 0 0 0 var(--s-1) rgba(242, 161, 46, .21);
}
.pasos { isolation: isolate; }
@media (min-width: 900px) {
  .pasos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
  .paso { padding-left: 0; padding-top: calc(var(--s-6) + var(--s-4)); }
}

/* ---------- Cierre y formulario ---------- */
.cierre {
  display: grid; gap: var(--s-6); align-items: center;
  background: var(--niebla); border-radius: var(--r-5);
  padding: var(--s-6) var(--s-4);
}
@media (min-width: 760px) { .cierre { padding: var(--s-7) var(--s-6); } }
@media (min-width: 1060px) { .cierre { grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr); gap: var(--s-7); } }
.cierre-texto { display: grid; gap: var(--s-3); justify-items: start; }
.cierre-texto .entradilla { color: var(--gris); margin-top: var(--s-1); }
.claves { list-style: none; padding: 0; display: grid; gap: var(--s-2); margin-top: var(--s-4); }
.claves li { display: flex; align-items: center; gap: var(--s-3); font-weight: var(--fw-1); }
.claves li::before {
  content: ""; flex: none; width: var(--s-4); height: var(--s-4); border-radius: 50%;
  background: var(--blanco) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 21'%3E%3Cpath d='M6 10.8l3 3 6-6.3' fill='none' stroke='%2312212C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
}

.formulario {
  position: relative; display: grid; gap: var(--s-4);
  background: var(--blanco); border-radius: var(--r-4);
  padding: var(--s-5) var(--s-4);
  box-shadow: 0 1px 0 var(--linea), 0 var(--s-4) var(--s-6) calc(var(--s-5) * -1) rgba(18, 33, 44, .21);
}
@media (min-width: 760px) { .formulario { padding: var(--s-5); } }
.campo { display: grid; gap: var(--s-1); }
.campo label { font-size: var(--fs--1); font-weight: var(--fw-1); }
.campo input {
  width: 100%; min-height: var(--s-6);
  padding: 0 var(--s-4);
  font: inherit; font-size: var(--fs-0); color: var(--pizarra);
  background: var(--blanco);
  border: 1px solid var(--linea); border-radius: var(--r-2);
  transition: border-color var(--t-1) var(--ease), box-shadow var(--t-2) var(--ease);
}
.campo input::placeholder { color: var(--gris-claro); }
.campo input:hover { border-color: var(--gris-claro); }
.campo input:focus { outline: none; border-color: var(--pizarra); box-shadow: 0 0 0 var(--s-1) rgba(242, 161, 46, .34); }
.campo input[aria-invalid="true"] { border-color: var(--rojo); }
.consentimiento { display: grid; grid-template-columns: var(--s-4) minmax(0, 1fr); gap: var(--s-2); align-items: start; font-size: var(--fs--1); color: var(--gris); }
.consentimiento input { width: var(--s-4); height: var(--s-4); margin: 2px 0 0; accent-color: var(--pizarra); }
.consentimiento a { color: var(--pizarra); }
.formulario .boton { width: 100%; }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.error { min-height: 0; font-size: var(--fs--1); color: var(--rojo); font-weight: var(--fw-1); }
.error:empty { display: none; }

/* ---------- Pie ---------- */
.pie { background: var(--pizarra); color: var(--niebla); padding: var(--s-7) 0 var(--s-6); }
.pie .envoltura { display: grid; gap: var(--s-6); }
.pie-logo { width: min(466px, 100%); }
.pie-logo svg, .pie-logo img { width: 100%; height: auto; }
.pie-fila {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3) var(--s-5);
  padding-top: var(--s-5); border-top: 1px solid rgba(243, 245, 246, .13);
  font-size: var(--fs--1); color: var(--gris-claro);
}
.pie-fila nav { display: flex; gap: var(--s-5); }
.pie-fila a { color: var(--niebla); text-decoration: none; }
.pie-fila a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Páginas de texto (privacidad, gracias) ---------- */
.texto-legal { max-width: var(--measure); display: grid; gap: var(--s-4); padding-block: var(--s-7); }
.texto-legal h1 { font-size: clamp(var(--fs-3), 4vw, var(--fs-4)); line-height: var(--lh-title); }
.texto-legal h2 { font-size: var(--fs-2); margin-top: var(--s-4); }
.texto-legal p, .texto-legal li { color: #3A4852; }
.texto-legal ul { padding-left: var(--s-4); display: grid; gap: var(--s-2); }
.gracias { min-height: calc(100vh - var(--s-7)); display: grid; place-items: center; text-align: center; padding-block: var(--s-7); }
.gracias .envoltura { display: grid; gap: var(--s-4); justify-items: center; max-width: 610px; }
.gracias .escena { width: min(377px, 100%); margin-bottom: var(--s-5); }
.gracias .entradilla { color: var(--gris); }

/* ---------- Aparición al hacer scroll ---------- */
.js .revelar { opacity: 0; transform: translateY(var(--s-4)); }
.js .revelar.visto {
  opacity: 1; transform: none;
  transition: opacity 610ms var(--ease), transform 610ms var(--ease);
  transition-delay: calc(var(--i, 0) * 89ms);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .punto { animation: none; }
  .js .revelar { opacity: 1; transform: none; }
  .paso.llegado .paso-num::after { animation: none; }
  *, *::before, *::after { transition-duration: 1ms !important; }
}