/* ═══════════════════════════════════════════════════════════════
   INCOMEROCKET · sistema visual
   Rojo granate del cohete sobre negro. Un solo color por título,
   con subrayado rojo para el acento (nada de títulos bicolor).
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* Escala de radios, una sola en toda la web:
     8px  → todo lo interactivo (botones, campos, etiquetas)
     14px → contenedores (tarjetas, formulario, planes)
     50%  → círculos con un papel propio (numeral de los pasos) */
  --r-ui:  8px;
  --r-box: 14px;

  --red:        #E23B30;
  --red-deep:   #8E1B22;
  --red-glow:   rgba(226, 59, 48, 0.16);
  --bg:         #08080A;
  --surface:    #0F0F12;
  --line:       rgba(226, 59, 48, 0.14);
  --text:       #F2EFEA;
  --muted:      #A6A29B;
  --dim:        #D2CEC7;
  /* Halo oscuro para el texto que flota sobre el cohete sin tarjeta
     detrás. Mantiene el contraste cuando pasa por encima sin tapar
     la ilustración con un panel opaco. */
  --halo: 0 1px 2px rgba(0,0,0,0.7), 0 0 18px rgba(8,8,10,0.9);
  --display: 'Bricolage Grotesque', system-ui, -apple-system, sans-serif;
  --body:    'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --wrap: 1180px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  overflow-x: hidden;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(226, 59, 48, 0.32) transparent;
}
::-webkit-scrollbar       { width: 3px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(226, 59, 48, 0.34); border-radius: 2px; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a   { color: inherit; text-decoration: none; }
ul  { list-style: none; }

/* ── Capas del cohete ─────────────────────────────────────────
   sky (estrellas) → fx (llama y humo) → cohete → contenido      */
#sky, #fx {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
#sky { z-index: 0; }
#fx  { z-index: 1; }

#rocket {
  position: fixed;
  top: 0; left: 0;
  z-index: 2;
  transform-origin: 50% 50%;
  will-change: transform;
  pointer-events: none;
  filter: drop-shadow(0 24px 60px rgba(0, 0, 0, 0.75));
}

/* Viñeta muy leve: da profundidad al negro plano sin ser una mancha
   con forma reconocible. El color de verdad lo pone el cohete, que
   arrastra su propio resplandor (ver drawFx en rocket.js). */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(130% 100% at 50% 0%, transparent 40%, rgba(0,0,0,0.55) 100%);
}

/* ── Cabecera ─────────────────────────────────────────────── */
.site-header {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem;
  height: 4.6rem;
  padding: 0 clamp(1.25rem, 5vw, 3.5rem);
  background: rgba(8, 8, 10, 0.72);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.brand {
  display: flex; align-items: center; gap: 0.6rem;
  font-family: var(--display); font-weight: 800;
  font-size: 1rem; letter-spacing: -0.01em; text-transform: uppercase;
}
/* Marca: el cohete del logotipo, con el nombre en tipografía al lado */
.brand-mark { height: 26px; width: auto; flex: none; }
.foot-brand { display: flex; align-items: center; gap: 0.55rem; }
.foot-brand .brand-mark { height: 22px; }
.nav { display: flex; gap: 2rem; font-size: 0.9rem; color: var(--dim); }
.nav a { position: relative; padding: 0.25rem 0; }
.nav a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: 0;
  height: 1px; background: var(--red); transition: right 0.28s ease;
}
.nav a:hover::after { right: 0; }
.nav a:hover { color: var(--text); }

.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--body); font-weight: 600; font-size: 0.92rem;
  padding: 0.78rem 1.5rem; border-radius: 8px;
  border: 1px solid transparent;
  transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
  cursor: pointer;
}
.btn:hover { transform: translateY(-2px); }
.btn--solid  { background: var(--red); color: #fff; }
.btn--solid:hover { background: #F0473B; }
.btn--ghost  { border-color: rgba(255, 255, 255, 0.16); color: var(--text); }
.btn--ghost:hover { border-color: var(--red); }
.btn--sm { padding: 0.55rem 1.1rem; font-size: 0.86rem; }

/* ── Contenido ────────────────────────────────────────────── */
main { position: relative; z-index: 3; }

.section {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 7rem clamp(1.25rem, 5vw, 3.5rem);
  width: 100%;
}

.hero {
  /* dvh, no vh: en iOS Safari la barra de direcciones cambia el vh
     y el héroe pega un salto al hacer el primer scroll. */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex; align-items: center;
  padding-top: 8rem;
}
.hero-inner { max-width: 33rem; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-size: 0.7rem; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--red);
  margin-bottom: 1.5rem;
}
.eyebrow::before {
  content: ''; width: 26px; height: 1px; background: var(--red);
}
/* Numeración de secciones: da ritmo sin recurrir a centrar nada */
.eyebrow-n {
  font-family: var(--display); font-weight: 800;
  color: var(--muted); letter-spacing: 0.06em;
}
.eyebrow-n::after { content: ' /'; color: var(--red); }

h1 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.3rem, 6.2vw, 4.1rem);
  line-height: 1.04;
  letter-spacing: -0.035em;
  margin-bottom: 1.5rem;
}

/* Acento: un solo color de texto, subrayado rojo grueso */
.u {
  text-decoration: underline;
  text-decoration-color: var(--red);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.14em;
  text-decoration-skip-ink: none;
}

.lead {
  font-size: clamp(1.02rem, 1.7vw, 1.18rem);
  color: var(--dim);
  margin-bottom: 2.2rem;
  max-width: 30rem;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 0.85rem; }

.trust {
  display: flex; flex-wrap: wrap; gap: 1.6rem 2.4rem;
}
.trust li { display: flex; align-items: center; gap: 0.6rem; }
.trust svg { width: 17px; height: 17px; color: var(--red); flex: none; }
.trust strong { display: block; font-size: 0.88rem; font-weight: 600; color: var(--text); }
.trust span   { display: block; font-size: 0.76rem; color: var(--muted); line-height: 1.4; }


/* ── Aparición al entrar en pantalla ──────────────────────── */
.appear { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.7s ease; }
.appear.in { opacity: 1; transform: none; }
.appear.d1 { transition-delay: 0.08s; }
.appear.d2 { transition-delay: 0.16s; }
.appear.d3 { transition-delay: 0.24s; }
.appear.d4 { transition-delay: 0.32s; }

/* Tira de confianza: sección propia justo bajo el héroe, no dentro.
   El héroe es un solo momento y no admite una cuarta capa de texto. */
.trust-strip {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 5vw, 3.5rem) 2rem;
  position: relative; z-index: 3;
}
.trust-strip .trust {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 1.6rem;
}

/* ── Cabecera de sección ──────────────────────────────────── */
.sec-head { max-width: 44rem; margin-bottom: 3.4rem; }
h2 {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(1.75rem, 4.2vw, 2.85rem);
  line-height: 1.1; letter-spacing: -0.028em;
  margin-bottom: 1rem;
}
h3 {
  font-family: var(--display); font-weight: 700;
  font-size: 1.06rem; letter-spacing: -0.01em; line-height: 1.3;
  margin-bottom: 0.55rem;
}
.sec-sub { color: var(--dim); font-size: clamp(0.98rem, 1.5vw, 1.08rem); }

/* Texto que va suelto sobre el fondo, sin tarjeta que lo respalde:
   cuando el cohete pasa por detrás perdía contraste. El halo lo
   resuelve sin meter un panel opaco que taparía la ilustración. */
.section > * { position: relative; }
h1, h2, .eyebrow, .lead, .sec-sub, .checks li, .plans-note,
.alt-contact, .trust strong, .trust span,
.steps h3, .steps p, .step-when {
  text-shadow: var(--halo);
}

/* ── Escalera ─────────────────────────────────────────────────
   Sin tarjetas: ese recurso ya se usa en Ejemplos y repetirlo dos
   secciones seguidas aplana la página.

   Cada punto es un escalón de verdad: huella (borde superior) y
   contrahuella (borde izquierdo) forman una L, y el desplazamiento
   es grande a propósito. Con desplazamientos pequeños la escalera
   se lee como una tarjeta descuadrada, o sea como un fallo. */
.stair { display: grid; }
.stair-item {
  position: relative;
  max-width: 34rem;
  margin-bottom: 2.2rem;
  padding: 1.5rem 0 2.2rem 1.6rem;
  border-top:  3px solid var(--red);
  border-left: 3px solid var(--red);
}
.stair-item:last-child { margin-bottom: 0; }

/* Desplazamiento por escalón. Grande, para que sea inequívoco. */
.stair-item:nth-child(2) { margin-left: 22%; }
.stair-item:nth-child(3) { margin-left: 44%; }

/* La contrahuella se desvanece hacia abajo: sugiere la caída al
   siguiente escalón sin tener que dibujar un conector exacto. */
.stair-item::after {
  content: ''; position: absolute;
  left: -3px; bottom: 0; width: 3px; height: 3.2rem;
  background: linear-gradient(var(--red), transparent);
}
.stair-item:last-child::after { display: none; }

/* Número en una placa maciza montada sobre la esquina de la L.
   Es lo que remata la lectura de "esto está puesto a propósito". */
.stair-n {
  position: absolute; top: -3px; left: -3px;
  display: grid; place-items: center;
  width: 2.6rem; height: 2.6rem;
  background: var(--red); color: #fff;
  font-family: var(--display); font-weight: 800;
  font-size: 0.86rem; letter-spacing: 0.02em;
  text-shadow: none;
}
.stair-item h3 {
  font-size: 1.22rem; margin-bottom: 0.5rem;
  padding-left: 1.9rem;              /* deja sitio a la placa */
  min-height: 1.6rem;
}
.stair-item p { color: var(--dim); font-size: 0.95rem; }
.stair-item h3, .stair-item p { text-shadow: var(--halo); }

/* ── Bloque a dos columnas ────────────────────────────────── */
.split { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 3.5rem; align-items: start; }
.split-text .sec-sub { margin-bottom: 1.8rem; }

.checks { display: grid; gap: 0.7rem; margin-bottom: 2rem; }
.checks li {
  position: relative; padding-left: 1.75rem;
  color: var(--dim); font-size: 0.95rem; line-height: 1.55;
}
.checks li::before {
  content: ''; position: absolute; left: 0; top: 0.5em;
  width: 9px; height: 9px; border-radius: 2px;
  background: var(--red);
}

.promise {
  background: linear-gradient(160deg, rgba(142,27,34,0.30), rgba(15,15,18,0.94));
  border: 1px solid var(--line); border-radius: 14px;
  padding: 2.2rem 1.9rem; backdrop-filter: blur(10px);
}
.promise-label {
  font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--red); margin-bottom: 1rem;
}
.promise-big {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(1.3rem, 2.4vw, 1.65rem); line-height: 1.2;
  letter-spacing: -0.02em; margin-bottom: 0.9rem;
}
.promise-small { color: var(--muted); font-size: 0.9rem; }

/* ── Trabajo ──────────────────────────────────────────────── */
.works { display: grid; gap: 1.1rem; grid-template-columns: repeat(3, 1fr); align-items: stretch; }
.work {
  display: flex; flex-direction: column;
  background: rgba(15,15,18,0.92); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.06); border-radius: 14px;
  padding: 1.7rem 1.5rem;
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.work:hover { border-color: var(--red); transform: translateY(-3px); }
.work-tag {
  font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 1rem;
}
.work p { color: var(--muted); font-size: 0.9rem; flex: 1; margin-bottom: 1.2rem; }
.work-go { font-size: 0.85rem; font-weight: 600; color: var(--red); }
.work-go::after { content: ' →'; }

/* ── Proceso ──────────────────────────────────────────────── */
.steps { display: grid; gap: 0; max-width: 46rem; }
.step {
  display: grid; grid-template-columns: auto 1fr; gap: 1.6rem;
  padding: 1.9rem 0; border-top: 1px solid rgba(255,255,255,0.07);
}
.step:last-child { border-bottom: 1px solid rgba(255,255,255,0.07); }
.step-n {
  font-family: var(--display); font-weight: 800; font-size: 1.05rem;
  width: 2.6rem; height: 2.6rem; flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 50%;
  color: var(--red); background: rgba(142,27,34,0.14);
}
.step p { color: var(--muted); font-size: 0.93rem; }
.step-when {
  display: inline-block; margin-top: 0.75rem;
  font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--red);
}

/* ── Precios ──────────────────────────────────────────────── */
.plans { display: grid; gap: 1.2rem; grid-template-columns: repeat(3, 1fr); align-items: start; }
.plan {
  position: relative;
  background: rgba(15,15,18,0.94); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.07); border-radius: 14px;
  padding: 2rem 1.7rem; display: flex; flex-direction: column;
}
.plan--featured {
  border-color: var(--red);
  background: linear-gradient(180deg, rgba(142,27,34,0.20), rgba(15,15,18,0.96));
}
.plan-badge {
  position: absolute; top: -0.72rem; left: 1.7rem;
  background: var(--red); color: #fff;
  font-size: 0.66rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.3rem 0.7rem; border-radius: 8px;
}
.plan-name { font-size: 1.25rem; margin-bottom: 0.35rem; }
.plan-for { color: var(--muted); font-size: 0.86rem; margin-bottom: 1.5rem; min-height: 2.4em; }
.plan-price { font-size: 0.82rem; color: var(--muted); margin-bottom: 1.6rem; }
.plan-price span {
  display: block; font-family: var(--display); font-weight: 800;
  font-size: 2.5rem; letter-spacing: -0.03em; color: var(--text); line-height: 1.05;
}
.plan-list { display: grid; gap: 0.6rem; margin-bottom: 2rem; flex: 1; }
.plan-list li {
  position: relative; padding-left: 1.5rem;
  font-size: 0.9rem; color: var(--dim);
}
.plan-list li::before {
  content: ''; position: absolute; left: 0; top: 0.42em;
  width: 10px; height: 6px; border-left: 2px solid var(--red);
  border-bottom: 2px solid var(--red); transform: rotate(-45deg);
}
.plan-cta { width: 100%; justify-content: center; }
.plans-note { margin-top: 1.6rem; font-size: 0.8rem; color: var(--muted); }

/* ── FAQ ──────────────────────────────────────────────────── */
.faq { max-width: 46rem; }
.faq details {
  border-top: 1px solid rgba(255,255,255,0.07);
  background: rgba(9,9,11,0.82);
  backdrop-filter: blur(6px);
}
.faq details:last-child { border-bottom: 1px solid rgba(255,255,255,0.07); }
.faq summary {
  cursor: pointer; list-style: none;
  padding: 1.25rem 2.5rem 1.25rem 0; position: relative;
  font-weight: 500; font-size: 1rem; color: var(--text);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; position: absolute; right: 0.6rem; top: 1.6rem;
  width: 9px; height: 9px;
  border-right: 2px solid var(--red); border-bottom: 2px solid var(--red);
  transform: rotate(45deg); transition: transform 0.22s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq summary:hover { color: var(--red); }
.faq p { padding: 0 2.5rem 1.4rem 0; color: var(--muted); font-size: 0.93rem; }

/* ── Formulario ───────────────────────────────────────────── */
.split--form { align-items: start; }
.form {
  background: rgba(15,15,18,0.95); backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.08); border-radius: 14px;
  padding: 2rem 1.8rem;
}
.field { margin-bottom: 1.1rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field label {
  display: block; font-size: 0.82rem; font-weight: 500;
  color: var(--dim); margin-bottom: 0.45rem;
}
.field .opt { color: var(--muted); font-weight: 400; }
.field input, .field textarea {
  width: 100%; font-family: var(--body); font-size: 0.95rem; color: var(--text);
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.10); border-radius: 8px;
  padding: 0.72rem 0.85rem; transition: border-color 0.2s ease;
}
.field input::placeholder { color: #5c5a57; }
.field input:focus, .field textarea:focus {
  outline: none; border-color: var(--red);
}
.field textarea { resize: vertical; min-height: 6rem; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-send { width: 100%; justify-content: center; margin-top: 0.5rem; }
.form-legal { margin-top: 0.9rem; font-size: 0.76rem; color: var(--muted); }
.form-legal a { color: var(--red); text-decoration: underline; }
.form-msg { margin-top: 0.9rem; font-size: 0.86rem; min-height: 1.2em; }
.form-msg.is-ok  { color: #6BD08A; }
.form-msg.is-err { color: #FF8177; }

.alt-contact { font-size: 0.9rem; color: var(--muted); }
.alt-contact a { color: var(--red); text-decoration: underline; }

/* ── Pie ──────────────────────────────────────────────────── */
.site-footer {
  position: relative; z-index: 3;
  border-top: 1px solid rgba(255,255,255,0.07);
  background: rgba(6,6,8,0.94); backdrop-filter: blur(10px);
  padding: 3rem clamp(1.25rem, 5vw, 3.5rem) 2rem;
}
.foot-inner {
  max-width: var(--wrap); margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: 2rem; justify-content: space-between;
}
.foot-brand { font-family: var(--display); font-weight: 800; font-size: 1.05rem; text-transform: uppercase; }
.brand-i { color: var(--red); }
.foot-note { color: var(--muted); font-size: 0.85rem; max-width: 24rem; margin-top: 0.4rem; }
.foot-links { display: flex; flex-wrap: wrap; gap: 1.4rem; font-size: 0.88rem; color: var(--dim); }
.foot-links a:hover { color: var(--red); }
.foot-copy {
  max-width: var(--wrap); margin: 2.5rem auto 0;
  font-size: 0.76rem; color: #5f5d5a;
}

/* ── Saltar al contenido ──────────────────────────────────── */
.skip {
  position: absolute; left: -9999px; z-index: 100;
  background: var(--red); color: #fff; padding: 0.7rem 1.2rem; border-radius: 0 0 6px 0;
}
.skip:focus { left: 0; top: 0; }

:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

/* ── Móvil ────────────────────────────────────────────────── */
@media (max-width: 1040px) {
  .works, .plans { grid-template-columns: 1fr 1fr; }
  .stair-item:nth-child(2) { margin-left: 14%; }
  .stair-item:nth-child(3) { margin-left: 28%; }
  .plan--featured { grid-column: 1 / -1; }
  .split { grid-template-columns: 1fr; gap: 2.5rem; }
}

@media (max-width: 900px) {
  .nav { display: none; }
  .section { padding: 4.5rem clamp(1.25rem, 5vw, 3.5rem); }
  /* En móvil el héroe deja de forzar pantalla completa. El texto es
     corto y, anclado arriba dentro de un bloque de 100dvh, dejaba
     un vacío de casi 400px antes de la tira de confianza. */
  .hero {
    min-height: auto;
    align-items: flex-start;
    padding-top: 6.5rem;
    padding-bottom: 3rem;
  }
  .hero-inner { max-width: none; }
  .trust-strip { padding-bottom: 1.5rem; }
  /* El cohete pasa a fondo para que el texto siempre se lea */
  #rocket { opacity: 0.3; z-index: 1; }
  #fx { z-index: 1; opacity: 0.6; }
  .trust { gap: 1rem 1.6rem; }
}

@media (max-width: 680px) {
  .works, .plans { grid-template-columns: 1fr; }
  /* En móvil no hay ancho para la diagonal: la escalera se vuelve
     una pila de escalones, manteniendo huella, contrahuella y placa. */
  .stair-item:nth-child(2) { margin-left: 7%; }
  .stair-item:nth-child(3) { margin-left: 14%; }
  .stair-item { padding-left: 1.2rem; }
  .plan--featured { grid-column: auto; }
  .field-row { grid-template-columns: 1fr; }
  .step { grid-template-columns: 1fr; gap: 0.9rem; }
  .plan-for { min-height: 0; }
  h1 { font-size: clamp(2rem, 9vw, 2.8rem); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .appear { opacity: 1; transform: none; transition: none; }
  .scroll-hint::after { animation: none; }
  #fx { display: none; }
}