/**
 * Landing sustituto — variante de pantalla completa del hero.
 * Foto: sede Cuicuilco, nocturna.
 */

.lw-hero--landing {
  min-height: 100vh;
  padding: var(--lw-space-lg) var(--lw-space-md);
  background-image: url('/wp-content/uploads/2026/07/cuicuilco-noche.jpeg');
}

/* Ajustado a la foto real (Terraza Cuicuilco, nocturna): el cielo
   superior ya es oscuro por naturaleza — casi no necesita overlay ahí.
   La zona de mesas/luces cálidas en la parte baja sí necesita más
   oscurecimiento para que cualquier contenido debajo del hero (scroll)
   tenga una transición limpia. */
.lw-hero--landing .lw-hero__overlay {
  background: linear-gradient(
    180deg,
    rgba(10, 14, 26, 0.15) 0%,
    rgba(10, 14, 26, 0.1) 30%,
    rgba(10, 14, 26, 0.55) 100%
  );
}

/* El texto vuelve a centrarse vertical y horizontalmente (hereda
   align-items/justify-content: center de .lw-hero) en vez de anclarse
   arriba. La franja del cielo sigue siendo la de mayor contraste
   natural, pero el centro cae sobre la fachada iluminada — la zona más
   "ocupada" de la foto — así que el contraste ya no se resuelve
   recortando el layout, sino con un velo propio detrás del texto (ver
   .lw-hero--landing .lw-hero__content más abajo). */
.lw-hero--landing .lw-hero__content {
  padding: var(--lw-space-lg) calc(var(--lw-space-lg) * 1.25);
  border-radius: 20px;
  background: radial-gradient(
    ellipse at center,
    rgba(10, 14, 26, 0.55) 0%,
    rgba(10, 14, 26, 0.35) 55%,
    rgba(10, 14, 26, 0) 100%
  );
}

.lw-hero--landing .lw-hero__title,
.lw-hero--landing .lw-hero__subtitle {
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

/* Color explícito, no heredado — el tema padre (co-workshop) aplica su
   propio color a los <h1> globalmente con más especificidad de la
   esperada. Se fuerza el blanco aquí en vez de depender de la herencia
   del contenedor. */
.lw-hero--landing .lw-hero__title {
  color: var(--lw-color-text-light) !important;
}

.lw-hero--landing .lw-hero__title {
  font-size: clamp(30px, 5.5vw, 52px);
  max-width: 600px;
}

.lw-hero--landing .lw-hero__subtitle {
  max-width: 480px;
  margin-bottom: 0; /* sin botón CTA después, el margen quedaba como
                        hueco asimétrico que descentraba el bloque */
}

@media (max-width: 600px) {
  .lw-hero--landing {
    min-height: 100svh;
    padding: var(--lw-space-md);
  }
}

/* ===== Sección "Quiénes somos" ===== */
.lw-somos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  min-height: 60vh;
}

.lw-somos__image {
  position: relative;
  overflow: hidden;
}

.lw-somos__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.lw-somos__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--lw-space-lg) calc(var(--lw-space-lg) * 1.5);
}

.lw-somos__title {
  font-size: clamp(28px, 3.5vw, 40px);
  margin-bottom: var(--lw-space-md);
  color: var(--lw-color-dark);
}

.lw-somos__text {
  font-size: 17px;
  line-height: 1.7;
  color: var(--lw-color-dark);
  max-width: 480px;
}

@media (max-width: 768px) {
  .lw-somos {
    grid-template-columns: 1fr;
  }
  .lw-somos__image {
    min-height: 50vh;
  }
  .lw-somos__content {
    padding: var(--lw-space-lg) var(--lw-space-md);
  }
}

/* ===== Sección de cierre / CTA final ===== */
.lw-cierre {
  position: relative;
  min-height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}

.lw-cierre__image {
  position: absolute;
  inset: 0;
}

.lw-cierre__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.lw-cierre__overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 14, 26, 0.6);
}

.lw-cierre__content {
  position: relative;
  z-index: 1;
  color: var(--lw-color-text-light);
}

.lw-cierre__title {
  font-size: clamp(26px, 4vw, 38px);
  margin-bottom: 0; /* sin botón CTA después, el margen quedaba como
                        hueco asimétrico que descentraba el título */
}

/* Mismo fix de especificidad, aplicado a los títulos de las otras dos
   secciones — mismo riesgo de que el tema fuerce su color en los h2. */
.lw-somos__title {
  color: var(--lw-color-dark) !important;
}

.lw-cierre__title {
  color: var(--lw-color-text-light) !important;
}