/* ============================================================================
   landing.css — Página principal pública (#/inicio).
   La puerta de calle: héroe con foto real, cómo funciona, fotos polaroid y el
   wizard de "Trabaja con nosotros". Todo sobre el cartón de la casa.
   ============================================================================ */

.landing { min-height: 100vh; }

/* --- Cabecera ------------------------------------------------------------- */
.landing-cab {
  position: sticky;
  top: 0;
  z-index: var(--z-cabecera, 20);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-4);
  flex-wrap: wrap;
  padding: var(--esp-3) var(--esp-4);
}
.landing-cab__logo { height: 46px; width: auto; }
/* Pegada arriba, gana fondo kraft y sombra: el contenido no pasa "a través"
   del logo mientras se hace scroll. */
.landing-cab.es-pegada {
  background-color: #cbb391;
  background-image: var(--textura-carton);
  background-size: cover;
  background-position: center;
  background-blend-mode: multiply;
  box-shadow: var(--sombra-2);
}
/* El botón de consulta de la cabecera duerme mientras el del héroe está en
   pantalla (dos botones iguales a la vista = ruido) y despierta al bajar. */
.landing-cab__cta {
  opacity: 0;
  transform: translateY(-0.4rem);
  pointer-events: none;
  transition: opacity var(--dur-media) linear, transform var(--dur-media) var(--curva-salida);
}
.landing-cab__cta.es-visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
  .landing-cab__cta { transition: none; }
}
.landing-cab__volver {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--color-texto-2);
  text-decoration: none;
  font-weight: var(--peso-semibold);
  font-size: var(--texto-sm);
}
.landing-cab__volver:hover { color: var(--dorado-texto); }

/* --- Héroe ---------------------------------------------------------------- */
.landing-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--esp-6);
  padding-top: var(--esp-6);
  padding-bottom: var(--esp-6);
}
.landing-hero__texto {
  position: relative;
  /* Hoja de papel bajo el texto: sobre el cartón moteado, el párrafo largo
     perdía contraste; sobre papel crema lee de corrido. */
  background-color: #f8f2e3;
  background-image: var(--textura-papel);
  background-size: 360px;
  background-blend-mode: multiply;
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-2);
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
}
.landing-hero__texto .cinta-mini { left: 2rem; transform: rotate(-3deg); }
.landing-hero h1 {
  font-size: clamp(2rem, 4.2vw, 3.1rem);
  line-height: 1.14;
  max-width: 16ch;
}
.landing-hero__sub {
  margin-top: var(--esp-4);
  max-width: 48ch;
  color: var(--color-texto); /* tinta plena: es EL párrafo que hay que leer */
  line-height: 1.7;
}
.landing-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-3);
  margin-top: var(--esp-5);
}
.landing-hero__foto img {
  width: 100%;
  max-width: 26rem;
  margin: 0 auto;
  display: block;
  filter: drop-shadow(0 14px 18px rgba(46, 30, 12, 0.3));
  transform: rotate(1.4deg);
}

/* --- Secciones ------------------------------------------------------------ */
.landing-como, .landing-trabaja {
  padding-top: var(--esp-6);
  padding-bottom: var(--esp-2);
}
.landing h2 {
  font-size: var(--texto-2xl);
  text-align: center;
  margin-bottom: var(--esp-4); /* el reset global deja los h2 sin margen */
}
.landing-seccion__sub {
  text-align: center;
  color: var(--color-texto-2);
  margin: var(--esp-2) auto var(--esp-5);
  max-width: 56ch;
}

/* Pasos del cómo funciona: tres papeles gemelos */
.landing-pasos {
  margin-top: var(--esp-4); /* + el margen del h2: los números no rozan el título */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: var(--esp-4);
}
.landing-paso {
  position: relative;
  padding: var(--esp-5) var(--esp-4) var(--esp-4);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--esp-2);
}
.landing-paso__n {
  position: absolute;
  top: -0.8rem;
  left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  background: var(--amarillo-marca);
  border: 1.5px solid var(--dorado-bronce);
  border-radius: 50%;
  font-weight: var(--peso-semibold);
  box-shadow: var(--sombra-1);
}
.landing-paso__icono { color: var(--dorado-texto); }
.landing-paso h3 {
  font-size: var(--texto-lg);
  /* Mismo alto tenga 1 o 2 renglones: los tres cuerpos arrancan alineados */
  min-height: 2.6em;
  display: flex;
  align-items: center;
  justify-content: center;
}
.landing-paso p { color: var(--color-texto-2); max-width: 34ch; }

/* --- Wizard de postulación ------------------------------------------------ */
.landing-trabaja__caja {
  max-width: 46rem;
  margin: 0 auto;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border-radius: var(--radio-lg);
  position: relative;
}
.landing-trabaja__caja h2 { text-align: center; }

.landing-wizard__pasos {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: var(--esp-2);
  margin-bottom: var(--esp-5);
  flex-wrap: wrap;
}
.landing-wizard__pasos li {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.8rem;
  border-radius: var(--radio-pastilla);
  border: 1.5px solid var(--color-borde);
  background-color: #f6efdd;
  background-image: var(--textura-papel);
  background-size: 360px;
  background-blend-mode: multiply;
  font-size: var(--texto-xs);
  font-weight: var(--peso-semibold);
  color: var(--color-texto-suave);
  counter-increment: paso;
}
.landing-wizard__pasos li.es-actual {
  background-color: var(--amarillo-marca);
  border-color: var(--dorado-bronce);
  color: var(--negro);
}
.landing-wizard__pasos li.es-hecho { color: var(--dorado-texto); border-color: var(--dorado-bronce); }

.landing-wizard__panel { border: 0; padding: 0; margin: 0; min-width: 0; }
.landing-wizard__rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
  gap: var(--esp-3);
}
.landing-wizard__acciones {
  display: flex;
  justify-content: space-between;
  gap: var(--esp-3);
  margin-top: var(--esp-5);
}
.landing-wizard__acciones [data-siguiente],
.landing-wizard__acciones [data-enviar] { margin-left: auto; }

.landing-wizard__confirma-titulo { font-weight: var(--peso-semibold); margin-bottom: var(--esp-3); }
.landing-wizard__resumen {
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
}
.landing-wizard__resumen > div {
  display: grid;
  grid-template-columns: 11rem 1fr;
  gap: var(--esp-3);
  padding: var(--esp-2) var(--esp-3);
  background-color: #f6efdd;
  background-image: var(--textura-papel);
  background-size: 360px;
  background-blend-mode: multiply;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-xs);
  font-size: var(--texto-sm);
}
.landing-wizard__resumen dt { color: var(--color-texto-suave); font-weight: var(--peso-semibold); }
.landing-wizard__resumen dd { overflow-wrap: anywhere; }

.landing-wizard__gracias {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--esp-3);
  padding: var(--esp-4) 0;
}
.landing-wizard__gracias img {
  width: 9rem;
  border-radius: var(--radio-md);
  box-shadow: var(--sombra-2);
  transform: rotate(-2deg);
}
.landing-wizard__gracias p { color: var(--color-texto-2); max-width: 40ch; }


/* Convocatoria cerrada (#/trabaja apagado desde el panel) */
.landing-cerrada { padding-top: var(--esp-6); }
.landing-cerrada h3 { margin-top: var(--esp-2); }
.landing-cerrada .boton { margin-top: var(--esp-4); }

/* --- Pie: banda de cartón oscuro con el logo inverso ----------------------- */
.landing-pie {
  margin-top: var(--esp-7);
  background-color: var(--color-superficie-oscura, #241d15);
  background-image: linear-gradient(rgba(24, 24, 24, 0.93), rgba(24, 24, 24, 0.93)),
    var(--textura-carton);
  background-size: auto, cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--color-texto-inverso, #f4ecdd);
  padding: var(--esp-6) var(--esp-4) var(--esp-4);
}
.landing-pie__interior {
  max-width: 75rem;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-5);
  flex-wrap: wrap;
}
.landing-pie__marca { display: flex; flex-direction: column; gap: var(--esp-2); }
.landing-pie__marca img { height: 44px; width: auto; align-self: flex-start; }
.landing-pie__marca p { font-size: var(--texto-sm); color: rgba(244, 236, 221, 0.75); }
.landing-pie__redes { display: flex; flex-wrap: wrap; gap: var(--esp-3); }
.landing-pie__redes a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.95rem;
  border-radius: var(--radio-pastilla);
  border: 1px solid rgba(244, 236, 221, 0.25);
  background: rgba(244, 236, 221, 0.07);
  color: var(--color-texto-inverso, #f4ecdd);
  text-decoration: none;
  font-size: var(--texto-sm);
  font-weight: var(--peso-semibold);
  transition: transform 0.12s ease, border-color var(--dur-rapida) linear;
}
.landing-pie__redes a:hover { transform: translateY(-1px); border-color: var(--amarillo-marca); }
.landing-pie__redes a:focus-visible { outline: 3px solid var(--color-foco); outline-offset: 2px; }
/* Cada red con su acento encendido sobre lo oscuro */
.landing-pie__redes a:nth-child(1) .icono { color: #35e372; }
.landing-pie__redes a:nth-child(2) .icono { color: #ff5fa2; }
.landing-pie__redes a:nth-child(3) .icono { color: #ffffff; }
.landing-pie__abajo {
  max-width: 75rem;
  margin: var(--esp-5) auto 0;
  padding-top: var(--esp-4);
  border-top: 1px dashed rgba(244, 236, 221, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-5);
  flex-wrap: wrap;
  font-size: var(--texto-xs);
  color: rgba(244, 236, 221, 0.65);
}
.landing-pie__abajo a { color: rgba(244, 236, 221, 0.85); text-decoration: none; font-weight: var(--peso-semibold); }
.landing-pie__abajo a:hover { color: var(--amarillo-marca); }

/* --- Angosto -------------------------------------------------------------- */
@media (max-width: 760px) {
  .landing-hero { grid-template-columns: 1fr; text-align: center; }
  .landing-hero h1 { margin: 0 auto; }
  .landing-hero__sub { margin-inline: auto; }
  .landing-hero__ctas { justify-content: center; }
  .landing-hero__foto { order: -1; }
  .landing-hero__foto img { max-width: 17rem; }
  .landing-hero__texto .cinta-mini { left: 50%; transform: translateX(-50%) rotate(-3deg); }
  .landing-wizard__resumen > div { grid-template-columns: 1fr; gap: 0.2rem; }
}


/* Pantallas gigantes: la landing respira sin estirar los textos de lectura */
@media (min-width: 1920px) {
  .landing-hero, .landing-pie__interior { max-width: 92rem; }
  .landing-hero__foto img { max-width: 22rem; }
}