/* ==========================================================================
   Portada v3. Un solo motivo: el haz del faro (la luz dorada del logo).
   Solo se carga en la portada. Todo se ve terminado sin JavaScript; los estados
   ocultos de la animación existen solo bajo html.js y sin «reducir movimiento».
   ========================================================================== */

:root {
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --t-press: 140ms;
  --t-hover: 180ms;
  --t-ui: 240ms;
  --seccion: var(--e-7);
}

.v3-titulo {
  font-family: var(--f-titular); font-weight: 600;
  font-size: var(--t-5); line-height: 1.04; letter-spacing: -0.01em;
  color: var(--texto); max-width: 22ch; margin-bottom: 24px;
}

/* ---------- Botones: el principal lleva el corte del haz ---------- */
.v3-boton-haz { clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%); padding-right: 34px; border-radius: 0; }
.af-boton { transition: background-color var(--t-hover) ease, border-color var(--t-hover) ease, color var(--t-hover) ease, transform var(--t-press) var(--ease-out); }
.af-boton:active { transform: scale(.97); }
.af-boton--oscuro { background: var(--noche); color: var(--luz); }
.af-boton--oscuro:hover { background: #000; color: var(--luz-2); }
.af-boton--blanco { background: #fff; color: #0b1f4d; }
.af-boton--blanco:hover { background: #e8eeff; color: #0b1f4d; }

/* ---------- Héroe ---------- */
.v3-hero {
  position: relative; overflow: clip; isolation: isolate;
  min-height: clamp(640px, calc(100dvh - var(--cabecera)), 940px);
  display: flex; align-items: center;
  background: var(--noche);
}
.v3-hero__luz { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
/* La figura del logo abajo a la izquierda; su haz, una forma plana de luz, cruza hacia arriba a la derecha. */
.v3-hero__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.v3-hero__cielo { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 900ms ease; }
/* Con la escena viva, el haz plano del SVG se apaga y queda solo la figura. */
.v3-hero--viva .v3-hero__cielo { opacity: 1; }
.v3-hero--viva .v3-haz { display: none; }
@media (max-width: 1099px) { .v3-hero__svg { top: auto; bottom: 0; height: 52%; } }
.v3-haz__ancho { fill: var(--luz); opacity: .14; }
.v3-haz__nucleo { fill: var(--luz); opacity: .3; }
.v3-hero__dentro { position: relative; width: 100%; max-width: var(--ancho); margin-inline: auto; padding: clamp(56px, 10vh, 112px) var(--margen); }
@media (min-width: 1100px) { .v3-hero__dentro { padding-left: max(var(--margen), 27%); } }
.v3-hero__titulo {
  font-family: var(--f-titular); font-weight: 700; text-transform: uppercase;
  font-size: var(--t-6); line-height: .94; letter-spacing: -0.015em;
  color: var(--texto); margin-bottom: 28px;
}
.v3-linea { display: block; white-space: nowrap; }
.v3-linea + .v3-linea { color: var(--luz); }
.v3-hero__gancho { font-size: var(--t-3); line-height: 1.4; color: var(--texto); max-width: 44ch; margin-bottom: 14px; }
.v3-hero__gancho strong { color: var(--luz); font-weight: 650; }
.v3-hero__texto { font-size: var(--t-2); color: var(--texto-2); max-width: 52ch; margin-bottom: 32px; }
.v3-hero__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; }
@media (max-width: 1099px) {
  .v3-hero { align-items: flex-start; min-height: clamp(560px, calc(100dvh - var(--cabecera)), 820px); }
  .v3-hero__dentro { padding-bottom: 30vh; }
}
@media (max-width: 560px) {
  .v3-hero__dentro { padding-top: 40px; padding-bottom: 26vh; }
  .v3-hero__acciones .af-boton { width: 100%; }
}

/* ---------- Peldaños ---------- */
.v3-ruta { padding-block: var(--seccion); background: var(--noche); }
.v3-frase {
  font-family: var(--f-titular); font-weight: 400;
  font-size: var(--t-4); line-height: 1.32; color: var(--texto);
  max-width: 44ch; margin-bottom: clamp(56px, 8vw, 112px);
}
/* Peldaños editoriales: bloques a toda anchura, texto a un lado y el dato al otro. */
.v3-pasos { list-style: none; margin: 0; padding: 0; }
.v3-paso { padding-block: 0 var(--e-6); border-top: 1px solid var(--linea); }
/* Escena propia de cada peldaño: a toda anchura, con parallax suave y fundido al fondo. */
.v3-paso__escena { margin: 0 0 var(--e-6); height: clamp(220px, 42vw, 520px); overflow: clip; position: relative; }
.v3-paso__escena img { width: 100%; height: 120%; object-fit: cover; display: block; will-change: transform; }
.v3-paso__escena::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(10, 16, 28, .25), rgba(10, 16, 28, 0) 35%, rgba(10, 16, 28, 0) 70%, var(--noche)); pointer-events: none; }
.v3-paso__rejilla { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 112px); align-items: center; }
.v3-paso__rejilla:has(> .v3-paso__visual:first-child) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.v3-paso__texto { display: grid; gap: 20px; align-content: center; }
.v3-paso__titulo { font-family: var(--f-titular); font-size: var(--t-5); font-weight: 700; line-height: 1.02; letter-spacing: -0.01em; }
.v3-paso__intro { font-size: var(--t-3); line-height: 1.5; color: var(--texto-2); max-width: 44ch; }
.v3-paso__enlaces { list-style: none; display: grid; gap: 2px; margin: 4px 0 0; padding: 0; }
.v3-paso__enlaces a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--linea); color: var(--texto); font-size: var(--t-2); font-weight: 550; text-decoration: none; transition: color var(--t-hover) ease; }
.v3-paso__enlaces li:last-child a { border-bottom: 1px solid var(--linea); }
.v3-paso__enlaces a .af-icono { color: var(--luz); transition: transform var(--t-ui) var(--ease-out); }
.v3-paso__enlaces a:hover { color: var(--luz); }
.v3-paso__enlaces a:hover .af-icono { transform: translateX(4px); }
/* El dato: cifra grande, gráfico y fuente. */
.v3-dato { margin: 0; display: grid; gap: 18px; }
.v3-dato__cifra { display: grid; gap: 6px; margin: 0; }
.v3-dato__cifra strong { font-family: var(--f-titular); font-size: var(--t-6); font-weight: 700; line-height: .95; letter-spacing: -0.015em; color: var(--luz); font-variant-numeric: tabular-nums; }
.v3-dato__cifra span { font-size: var(--t-2); line-height: 1.45; color: var(--texto-2); max-width: 40ch; }
.v3-grafico { display: block; width: 100%; height: auto; }
.v3-grafico text { font-family: var(--f-texto); }
.v3-dato__fuente { font-size: var(--t-1); line-height: 1.45; color: var(--texto-3); }
.v3-dato--tesis .v3-dato__portada { display: block; aspect-ratio: 16 / 9; overflow: clip; }
.v3-dato--tesis .v3-dato__portada img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); }
@media (max-width: 900px) {
  .v3-paso__rejilla, .v3-paso__rejilla:has(> .v3-paso__visual:first-child) { grid-template-columns: 1fr; gap: 36px; }
  .v3-paso__visual { order: -1; }
  .v3-paso--calc .v3-paso__visual { order: 0; }
  .v3-grafico text[font-size="13"] { font-size: 20px; }
}

/* ---------- Calculadora: el control en grande, sobre un campo de luz ---------- */
.v3-calc__nota { margin: 0; font-size: var(--t-1); color: var(--texto-3); }
.v3-calc__form { display: grid; gap: 28px; }
.v3-calc__datos-entrada { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.v3-calc__pago { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 6px 16px; }
.v3-calc__pago-texto { font-size: var(--t-2); font-weight: 600; align-self: center; }
.v3-calc__pago-valor { font-family: var(--f-titular); font-size: var(--t-5); font-weight: 600; line-height: 1; color: var(--luz); font-variant-numeric: tabular-nums; }
.v3-rango { grid-column: 1 / -1; width: 100%; height: 16px; appearance: none; background: var(--linea); cursor: pointer; }
.v3-rango::-webkit-slider-thumb { appearance: none; width: 28px; height: 40px; background: var(--luz); border: 0; cursor: grab; }
.v3-rango::-moz-range-thumb { width: 28px; height: 40px; background: var(--luz); border: 0; border-radius: 0; cursor: grab; }
.v3-rango:focus-visible { outline: 3px solid var(--luz); outline-offset: 4px; }
.v3-calc__boton { justify-self: start; }
.js .v3-calc__boton { display: none; }
.v3-calc__resultado { display: grid; gap: 18px; padding-top: 8px; border-top: 1px solid var(--linea); }
.v3-calc__libre { font-family: var(--f-titular); line-height: .95; }
.v3-calc__libre span { display: block; font-size: var(--t-4); font-weight: 500; margin-bottom: 6px; color: var(--texto-2); }
.v3-calc__libre strong { display: block; font-size: var(--t-6); font-weight: 700; text-transform: uppercase; letter-spacing: -0.015em; color: var(--luz); font-variant-numeric: tabular-nums; transition: color .4s ease; }
.v3-calc.es-rojo .v3-calc__libre strong { color: var(--negativo); }
.v3-calc__frase { font-size: var(--t-2); line-height: 1.45; color: var(--texto-2); }
.v3-calc__frase strong { font-weight: 700; color: var(--texto); }
.v3-calc__barra { --interes: 20%; display: flex; height: 12px; background: var(--linea); }
.v3-calc__barra-capital { flex: 1; background: var(--luz); }
.v3-calc__barra-interes { width: var(--interes); background: var(--negativo); transition: width .6s var(--ease-out); }
.v3-calc__cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; }
.v3-calc__cifras div { display: flex; flex-direction: column-reverse; }
.v3-calc__cifras dt { font-size: var(--t-1); color: var(--texto-3); }
.v3-calc__cifras dd { margin: 2px 0 0; font-family: var(--f-titular); font-size: var(--t-4); font-weight: 600; font-variant-numeric: tabular-nums; }
.v3-calc__cifras div:nth-child(2) dd { color: var(--negativo); }
.v3-calc__extra { font-size: var(--t-2); color: var(--texto-2); }
@media (max-width: 480px) {
  .v3-calc__datos-entrada { grid-template-columns: 1fr; }
  .v3-calc__cifras { grid-template-columns: 1fr 1fr; }
  .v3-calc__cifras div:last-child { grid-column: 1 / -1; }
}

/* ---------- FARO: dos planes como dos campos de color con un corte limpio ---------- */
.v3-faro { padding-block: var(--seccion); background: var(--noche-2); }
.v3-faro__intro { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: center; margin-bottom: clamp(56px, 8vw, 104px); }
.v3-faro__texto { font-size: var(--t-2); line-height: 1.6; max-width: 46ch; }
.v3-faro__captura { margin: 0; overflow: clip; }
.v3-faro__captura img { width: 100%; }
.v3-planes { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2px; }
.v3-plan { display: flex; flex-direction: column; gap: 18px; padding: clamp(28px, 4vw, 56px); }
.v3-plan--scout { background: var(--superficie); }
.v3-plan--pro { background: var(--faro); color: #fff; }
.v3-plan__nombre { font-family: var(--f-titular); font-size: var(--t-5); font-weight: 600; line-height: 1; }
.v3-plan--pro .v3-plan__nombre { color: #fff; }
.v3-plan__precio { font-size: var(--t-2); color: var(--texto-3); }
.v3-plan--pro .v3-plan__precio { color: #fff; }
.v3-plan__precio span { font-family: var(--f-titular); font-size: var(--t-5); font-weight: 600; line-height: 1; color: var(--texto); margin-right: 8px; font-variant-numeric: tabular-nums; }
.v3-plan--pro .v3-plan__precio span { color: #fff; }
.v3-plan__anual { margin-top: -10px; font-weight: 600; color: #fff; }
.v3-plan ul { list-style: none; display: grid; gap: 10px; flex: 1; align-content: start; }
.v3-plan li { display: flex; gap: 10px; font-size: var(--t-2); }
.v3-plan li .af-icono { color: var(--luz); margin-top: 3px; }
.v3-plan--pro li .af-icono { color: #fff; }
.v3-plan .af-boton { align-self: flex-start; }
.v3-plan__botones { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.v3-plan__mensual { color: #fff; font-weight: 600; }
.v3-plan__mensual:hover { color: #dbe6ff; }
.v3-planes__nota { margin-top: 16px; font-size: var(--t-1); color: var(--texto-3); }
@media (max-width: 900px) {
  .v3-faro__intro, .v3-planes { grid-template-columns: 1fr; }
}

/* ---------- Lo último: índice con vista previa al pasar el ratón ---------- */
.v3-ultimo { padding-block: var(--seccion); background: var(--noche); }
.v3-ultimo__rejilla { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.v3-ultimo__cabeza { position: sticky; top: calc(var(--cabecera) + 32px); }
.v3-indice { list-style: none; display: grid; gap: 4px; }
.v3-indice__fila a { display: grid; grid-template-columns: 140px minmax(0, 1fr) auto; gap: 8px 24px; align-items: baseline; padding: 22px 0; color: var(--texto); text-decoration: none; }
.v3-indice__cat { font-size: var(--t-1); font-weight: 600; color: var(--luz); }
.v3-indice__titulo { font-family: var(--f-titular); font-size: var(--t-4); font-weight: 500; line-height: 1.2; transition: color var(--t-hover) ease, transform var(--t-ui) var(--ease-out); }
.v3-indice__fecha { font-size: var(--t-1); color: var(--texto-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.v3-indice__fila a:hover .v3-indice__titulo { color: var(--luz); transform: translateX(6px); }
@media (hover: hover) and (min-width: 900px) {
  .v3-indice__fila a:hover }
@media (max-width: 900px) {
  .v3-ultimo__rejilla { grid-template-columns: 1fr; }
  .v3-ultimo__cabeza { position: static; }
  .v3-indice__fila a { grid-template-columns: 1fr auto; }
  .v3-indice__titulo { grid-column: 1 / -1; grid-row: 2; }
  }

/* ---------- Quién: panel con el retrato recortado por el haz ---------- */
.v3-quien { padding-block: var(--seccion); background: var(--noche-2); }
.v3-quien__panel { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); align-items: center; padding: clamp(28px, 5vw, 72px); background: var(--superficie); }
.v3-quien__retrato { overflow: clip; position: relative; aspect-ratio: 4 / 3; }
.v3-quien__retrato img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v3-quien__sello { position: absolute; left: 16px; bottom: 16px; width: 64px !important; height: 64px !important; border-radius: 50%; background: var(--noche); padding: 6px; box-sizing: border-box; }
.v3-quien__texto { font-size: var(--t-2); line-height: 1.6; max-width: 56ch; }
.v3-quien__enlaces { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; margin-top: 28px; }
@media (max-width: 760px) {
  .v3-quien__panel { grid-template-columns: 1fr; }
  .v3-quien__retrato { max-width: none; aspect-ratio: 16 / 9; }
}

/* ---------- Hablemos: formulario con forma de cupón recortado ---------- */
.v3-hablemos { padding-block: var(--seccion); background: var(--noche); }
.v3-hablemos__rejilla { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.v3-hablemos__texto { font-size: var(--t-2); line-height: 1.6; max-width: 44ch; }
.v3-hablemos__correo { margin-top: 24px; display: flex; gap: 10px; align-items: center; color: var(--texto); }
.v3-hablemos__correo .af-icono { color: var(--luz); }
.v3-cupon {
  --muesca: 18px;
  padding: clamp(24px, 3vw, 40px); background: var(--superficie);
  -webkit-mask: radial-gradient(circle var(--muesca) at 0 50%, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle var(--muesca) at 100% 50%, #0000 98%, #000) right / 51% 100% no-repeat;
          mask: radial-gradient(circle var(--muesca) at 0 50%, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle var(--muesca) at 100% 50%, #0000 98%, #000) right / 51% 100% no-repeat;
}
.af-form__estado:empty { display: none; }
.af-form__estado { font-weight: 600; color: var(--texto); }
@media (max-width: 860px) { .v3-hablemos__rejilla { grid-template-columns: 1fr; } }

/* ---------- Estados de partida de la animación (solo con JS y movimiento) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .v3-hero__titulo .v3-linea { clip-path: inset(-20% -60% 100% -10%); transform: translateY(40%); }
  .js [data-v3="sube"], .js [data-v3="lista"] > * { opacity: 0; transform: translateY(24px); }
  .js .v3-haz { opacity: 0; }
  .js .v3-obturador { clip-path: inset(0 0 100% 0); }
  .js .v3-obturador img { transform: scale(1.12); }
}