/* =========================================================
   1. DESIGN TOKENS
   Todo lo que se repite en el diseño vive acá, una sola vez.
   ========================================================= */
:root {
  /* Colores principales */
  --color-orange: #F27533;
  --color-blue: #182859;

  /* Colores secundarios */
  --color-orange-light: #F6A321;
  --color-sky: #CAE8E8;
  --color-blue-light: #28469E;

  /* Neutros */
  --color-white: #FFFFFF;
  --color-text: #182859;
  --color-card: #F3F7FA;

  /* Sombra con tinte azul (más armónica que un gris puro) */
  --shadow-card: 0 10px 28px rgba(24, 40, 89, .12);
  --radius-card: 24px;

  /* Tipografías */
  --font-text: "Roboto", system-ui, sans-serif;
  --font-display: "Bebas Neue", "Roboto", sans-serif;

  /* Bordes y espacios */
  --radius-btn: 6px;
  --section-space: clamp(4rem, 8vw, 7rem); /* padding vertical de secciones */
}

/* Conectamos nuestros tokens con las variables internas de Bootstrap,
   así Bootstrap "habla" nuestro idioma sin pelearnos con él. */
:root {
  --bs-body-font-family: var(--font-text);
  --bs-body-color: var(--color-text);
  --bs-body-font-size: 1rem; /* 16px */
}

/* =========================================================
   2. BASE
   ========================================================= */
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-text);
  color: var(--color-text);
}

/* Foco visible para quien navega con teclado (accesibilidad) */
:focus-visible {
  outline: 3px solid var(--color-orange-light);
  outline-offset: 3px;
}

/* =========================================================
   3. COMPONENTES REUTILIZABLES
   ========================================================= */

/* Botón principal: texto azul sobre naranja = mejor contraste que blanco */
.btn-sparkey {
  --bs-btn-color: var(--color-blue);
  --bs-btn-bg: var(--color-orange);
  --bs-btn-border-color: var(--color-orange);
  --bs-btn-hover-color: var(--color-blue);
  --bs-btn-hover-bg: var(--color-orange-light);
  --bs-btn-hover-border-color: var(--color-orange-light);
  --bs-btn-active-color: var(--color-blue);
  --bs-btn-active-bg: var(--color-orange-light);
  --bs-btn-border-radius: var(--radius-btn);
  --bs-btn-padding-x: 1.75rem;
  --bs-btn-padding-y: .75rem;
  font-weight: 700;
}

/* =========================================================
   4. HERO + NAVBAR
   ========================================================= */
.hero {
  /* Igual que en Figma: imagen ARRIBA de un color sólido.
     Si la imagen no carga, igual se ve el azul. */
  background:
    url("../img/hero-bg.png") no-repeat right center / cover,
    var(--color-blue);
  color: var(--color-white);
  min-height: 100vh;          /* ocupa toda la pantalla */
  display: flex;
  flex-direction: column;
}

.logo { height: 48px; width: auto; }

.nav-link-sparkey {
  color: var(--color-white);
  text-decoration: none;
  font-weight: 500;
}
.nav-link-sparkey:hover { color: var(--color-orange-light); }

/* El contenido toma el espacio sobrante y se centra verticalmente */
.hero__content {
  flex: 1;
  display: flex;
  align-items: center;
  padding-block: 3rem var(--section-space);
}

/* clamp(mínimo, ideal, máximo): el título crece con la pantalla
   pero nunca se hace ilegible ni gigante. */
.hero__title {
  font-family: var(--font-display);   /* Bebas Neue */
  font-weight: 400;                   /* Bebas tiene un solo peso */
  color: var(--color-orange);
  font-size: clamp(2.75rem, 7vw, 5rem);  /* más grande: Bebas se ve más chica que Roboto */
  line-height: 1;
  letter-spacing: .02em;
  margin-bottom: 1rem;
}

/* Desde 992px (escritorio): una sola línea, como en Figma */
@media (min-width: 992px) {
  .hero__title {
    font-size: clamp(3rem, 5.5vw, 4.5rem);
    white-space: nowrap;   /* prohíbe el salto de línea */
  }
}

/* Evita que la fila se encoja al ancho de su contenido */
.hero__content > .row { width: 100%; }

.hero__subtitle {
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  font-weight: 500;
  margin-bottom: 1.25rem;
}

.hero__text {
  max-width: 55ch;            /* línea corta = lectura cómoda */
  font-size: 1.125rem;
  margin-bottom: 2.5rem;
}

.hero__question {
  font-weight: 500;
  margin-bottom: .75rem;
}

.hero__secondary { margin-top: 2rem; }

.hero__link {
  color: var(--color-white);
  font-weight: 700;
  text-decoration: none;
}
.hero__link:hover { color: var(--color-orange-light); text-decoration: underline; }

/* =========================================================
   5. TÍTULOS DE SECCIÓN (reutilizables en todo el sitio)
   ========================================================= */
.section-title {
  font-family: var(--font-text);      /* Roboto: más amable para frases largas */
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 3.25rem);
  line-height: 1.15;
  color: var(--color-blue);
  margin-bottom: 1rem;
}

.section-lead {
  font-size: 1.125rem;
  font-weight: 500;
  margin-bottom: 0;
}

/* Subrayado pincelado: un pseudo-elemento posicionado debajo del texto */
.highlight {
  position: relative;
  display: inline-block;
}
.highlight::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -.08em;
  width: 100%;
  height: .28em;
  background: url("../img/underline.svg") no-repeat center / 100% 100%;
  pointer-events: none;
}

/* =========================================================
   6. SECCIÓN PROBLEMAS
   ========================================================= */
.problems {
  padding-block: var(--section-space);
  background: url("../img/problems-bg.png") no-repeat center / cover, var(--color-white);
}

.problem-card {
  height: 100%;                  /* todas las cards de una fila igual de altas */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2rem 1.5rem;
  background: var(--color-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.problem-card__icon {
  width: 64px;
  height: 64px;
  object-fit: contain;
  margin-bottom: 1.25rem;
}

.problem-card__title {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 1.25rem;
}

.problem-card p {
  font-size: 1rem;
  margin-bottom: 1rem;
}

/* margin-top:auto empuja el botón al fondo, así quedan alineados
   aunque una card tenga más texto que otra */
.problem-card .btn { margin-top: auto; }

/* Botón secundario (celeste) */
.btn-soft {
  --bs-btn-color: var(--color-blue);
  --bs-btn-bg: var(--color-sky);
  --bs-btn-border-color: var(--color-sky);
  --bs-btn-hover-color: var(--color-white);
  --bs-btn-hover-bg: var(--color-blue);
  --bs-btn-hover-border-color: var(--color-blue);
  --bs-btn-active-color: var(--color-white);
  --bs-btn-active-bg: var(--color-blue);
  --bs-btn-border-radius: var(--radius-btn);
  --bs-btn-padding-x: 1.25rem;
  --bs-btn-padding-y: .6rem;
  font-weight: 700;
}

/* =========================================================
   7. BANNER DEL TEST
   ========================================================= */
.section-title--light { color: var(--color-white); }

.test-banner {
  padding-block: var(--section-space);
  background: url("../img/banner-deco.png") no-repeat right center / contain, var(--color-blue);
  color: var(--color-white);
}
.test-banner__text {
  max-width: 60ch;
  font-size: 1.125rem;
  margin-bottom: 2rem;
}

/* =========================================================
   8. QUÉ HACEMOS (escalera)
   ========================================================= */
.what {
  position: relative;
  overflow: hidden;            /* recorta la línea que sube hasta arriba */
  padding-block: var(--section-space);
  background: url("../img/what-bg.png") no-repeat center / cover, var(--color-white);
}

.steps {
  --num-w: 90px;               /* medidas del cuadro con el número */
  --num-h: 90px;
  --step-offset: 0px;          /* cuánto se corre cada escalón a la derecha */
  --line: 6px;                 /* grosor de las líneas */
  --gap: 2rem;                 /* espacio vertical entre escalones */
  list-style: none;
  padding: 0;
  margin: 0;
}

.step {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-top: var(--gap);
  margin-left: calc(var(--i) * var(--step-offset));  /* 0, 1 y 2 veces el desplazamiento */
}

.step__num {
  position: relative;
  flex: none;
  width: var(--num-w);
  height: var(--num-h);
  display: grid;
  place-items: center;
  background: var(--color-blue);
  color: var(--num-color, var(--color-orange));  /* si el escalón no define color, usa naranja */
  font-family: var(--font-display);
  font-size: calc(var(--num-h) * .6);
  line-height: 1;
}

/* Un color por escalón, tomado de la paleta */
.step:nth-child(1) { --num-color: var(--color-orange-light); }
.step:nth-child(2) { --num-color: var(--color-orange); }
.step:nth-child(3) { --num-color: var(--color-sky); }

.step__body h3 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  margin-bottom: .5rem;
}
.step__body p {
  max-width: var(--text-w, 32ch);  /* ancho propio de cada escalón */
  margin: 0;
  text-wrap: balance;              /* reparte las palabras parejo entre líneas */
}

/* Desde tablet: cada texto tiene el ancho justo para quedar en 3 líneas.
   Más chico = más angosto = más líneas. Ajustá a ojo. */
@media (min-width: 768px) {
  .step:nth-child(1) { --text-w: 34ch; }  /* texto largo */
  .step:nth-child(2) { --text-w: 24ch; }  /* textos cortos: caja más angosta */
  .step:nth-child(3) { --text-w: 25ch; }
}

/* Desde escritorio: escalera completa con líneas conectoras */
@media (min-width: 992px) {
  .steps { --num-w: 150px; --num-h: 130px; --step-offset: 200px; }

  /* Codo: sale del centro del cuadro anterior, baja y entra por la izquierda */
  .step:not(:first-child) .step__num::before {
    content: "";
    position: absolute;
    right: 100%;
    bottom: 50%;
    width: calc(var(--step-offset) - var(--num-w) / 2 + var(--line) / 2);
    height: calc(var(--gap) + var(--num-h) / 2);
    border-left: var(--line) solid var(--color-blue);
    border-bottom: var(--line) solid var(--color-blue);
  }

  /* Línea que baja desde arriba hasta el primer cuadro */
  .step:first-child .step__num::after {
    content: "";
    position: absolute;
    left: calc(50% - var(--line) / 2);
    bottom: 100%;
    width: var(--line);
    height: 40rem;             /* larguísima a propósito: .what recorta lo que sobra */
    background: var(--color-blue);
  }
}
@media (min-width: 1200px) {
  .steps { --num-w: 180px; --num-h: 150px; --step-offset: 240px; }
}

/* =========================================================
   9. PARA QUIÉN
   ========================================================= */
.audience {
  padding-block: var(--section-space);
  background: var(--color-sky);
}

.info-card {
  height: 100%;
  padding: 2rem;
  text-align: center;
  background: var(--color-white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
.info-card__title {
  color: var(--color-orange);
  font-size: clamp(1.375rem, 2.5vw, 1.75rem);
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 1rem;
}
.info-card p { margin: 0; font-size: 1.0625rem; }

/* =========================================================
   10. CIERRE
   ========================================================= */
.closing {
  padding-block: var(--section-space);
  background: url("../img/closing-bg.png") no-repeat center / cover, var(--color-white);
}
.closing__text {
  max-width: 55ch;
  margin: 0 auto 2rem;
  font-size: 1.125rem;
}

/* =========================================================
   11. FORMULARIO
   ========================================================= */
.contact { padding-bottom: var(--section-space); }

.contact__card {
  padding: clamp(1.5rem, 5vw, 3.5rem);
  background: var(--color-card);
  border-radius: calc(var(--radius-card) + 8px);
  box-shadow: var(--shadow-card);
}

.contact .form-label { font-weight: 500; margin-bottom: .35rem; }

.contact .form-control,
.contact .form-select {
  padding: .75rem 1rem;
  border: 1px solid #C3CCE0;
  border-radius: 8px;
}
.contact .form-control:focus,
.contact .form-select:focus {
  border-color: var(--color-blue-light);
  box-shadow: 0 0 0 .25rem rgba(40, 70, 158, .2);   /* anillo de foco con el azul claro */
}

.contact .form-check-input:checked {
  background-color: var(--color-blue);
  border-color: var(--color-blue);
}
.contact .form-check-label { font-size: .9375rem; }

/* =========================================================
   12. FOOTER
   ========================================================= */
.site-footer {
  padding-block: 2.5rem;
  background: var(--color-blue);
  color: var(--color-white);
}
.site-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;   /* logo a la izquierda, LinkedIn a la derecha */
}
.site-footer__social {
  color: var(--color-white);
  display: inline-flex;
}
.site-footer__social:hover { color: var(--color-orange-light); }

/* =========================================================
   13. CORTES DE LÍNEA ("viudas")
   ========================================================= */
/* balance: reparte las palabras parejo entre las líneas (ideal para títulos
   y textos cortos centrados). pretty: evita que la última línea quede con
   una sola palabra (ideal para párrafos). */
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
.problem-card p,
.info-card p { text-wrap: balance; }

/* Hero en escritorio: subtítulo y párrafo comparten el mismo ancho de caja,
   así el párrafo entra en 2 líneas. Debajo de 1200px vuelve a 3 líneas. */
.hero { --hero-copy-w: 54rem; }
@media (min-width: 1200px) {
  .hero__intro { max-width: var(--hero-copy-w); }
  .hero__text { max-width: none; }
}