/* ============================================================================
   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);
}
/* El logo es lo PRIMERO que se ve: se le dio tamaño de verdad (antes 46 px,
   se perdía contra la caja del hero). Escala con el ancho pero con tope, para
   que la cabecera pegajosa no se coma la pantalla al hacer scroll. */
.landing-cab__logo { height: clamp(4.25rem, 8vw, 6.25rem); 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; }
}