/* =============================================
   inicio.css — Estilos exclusivos de inicio.html
   Depende de: ../../styles.css (base compartida)
   ============================================= */



/* ── Fondo principal ─────────────────────────── */
main {
  border: 8px solid yellow;
  background: linear-gradient(90deg, #16181c 0%, #17191d 45%, #15171a 100%);
}

/* ── Portada ─────────────────────────────────── */
.portada {
  min-height: calc(90vh - 76px);
}

.portada-contenido {
  max-width: 1320px;
  margin: 0 auto;
  padding: 16px 24px 30px;
  display: grid;
  grid-template-columns: var(--portada-columnas);
  gap: 34px;
  align-items: start;
}

.portada-logo-contenedor {
  display: flex;
  justify-content: flex-start;
  padding-top: var(--portada-logo-superior);
  padding-left: 22px;
}

.portada-logo {
  width: min(540px, 100%);
  height: auto;
  object-fit: contain;
}

.portada-texto {
  max-width: 575px;
  padding-top: 86px;
}

.portada-texto p {
  margin: 0 0 26px;
  color: #ffffff;
  font-size: 19px;
  line-height: 1.52;
  font-weight: 500;
}

.portada-texto-destacado {
  color: #c20000 !important;
  font-size: 20px !important;
  line-height: 1.5;
  margin-top: 0 !important;
  padding-top: 22px;
}

.portada-logo-uaa-contenedor {
  display: flex;
  justify-content: center;
  padding: 4px 24px 38px;
}

.portada-logo-uaa {
  width: min(245px, 64vw);
  height: auto;
  display: block;
}

/* ── Objetivo ────────────────────────────────── */
/* Nuevo estilo global para fondos convertidos a img */
.fondo-seccion {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}

.objetivo {
  position: relative;
  min-height: 960px;
  display: flex;
  align-items: center;
  background-color: #0b0b0f;
  overflow: hidden;
  transform: translateZ(0);
  will-change: transform;
}

.objetivo-panel {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  background: rgba(10, 12, 18, 0.65);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 1;
}

.objetivo-contenido {
  position: relative;
  z-index: 2;
  width: 50%;
  margin-left: auto;
  padding: 56px 56px;
}

.objetivo h2 {
  margin: 0 0 32px;
  color: #e7d818;
  font-size: clamp(46px, 3.1vw, 56px);
  line-height: 1;
  letter-spacing: 0.4px;
  font-weight: 700;
}

.objetivo p {
  margin: 0;
  max-width: 640px;
  color: #ffffff;
  font-size: 16px;
  line-height: 1.45;
  font-weight: 500;
}

.objetivo strong {
  font-weight: 700;
}

/* ── Futuro ──────────────────────────────────── */
.futuro {
  min-height: 920px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
}

.futuro-contenido {
  background: #0b0b0b;
  padding: 72px 64px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.futuro-imagen-contenedor {
  position: relative;
  background-color: #0b0b0b;
  transform: translateZ(0);
  will-change: transform;
}

.futuro p {
  margin: 0 0 36px;
  max-width: 440px;
  color: #ffffff;
  font-size: 17px;
  line-height: 1.47;
  font-weight: 500;
  text-align: left;
}

.futuro p:last-child {
  margin-bottom: 0;
}

.futuro strong {
  color: #c20000;
  font-size: 1.5em;
  font-weight: 700;
  letter-spacing: 0.2px;
}

/* ── Vision ──────────────────────────────────── */
.vision {
  position: relative;
  min-height: 680px;
  background-color: #080a0c;
  overflow: hidden;
  transform: translateZ(0);
  will-change: transform;
}

.vision-capa {
  position: absolute;
  inset: 0;
  background: rgba(8, 10, 12, 0.73);
}

.vision-contenido {
  position: relative;
  z-index: 1;
  max-width: 1320px;
  min-height: 680px;
  margin: 0 auto;
  padding: 138px 24px 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.vision-texto {
  width: min(500px, 100%);
}

.vision-texto p {
  margin: 0 0 58px;
  color: #ffffff;
  font-size: 15px;
  line-height: 1.4;
  font-weight: 500;
  text-align: center;
}

.vision-texto p:last-child {
  margin-bottom: 0;
}

.vision-logo {
  width: min(370px, 38vw);
  margin-top: 84px;
  height: auto;
}

/* ── Media queries ─────────────────────────── */
@media (max-width: 1200px) {
  .portada-contenido {
    gap: 24px;
    grid-template-columns: minmax(320px, 50%) minmax(320px, 50%);
  }

  .portada-logo-contenedor {
    justify-content: center;
    padding-top: 30px;
    padding-left: 0;
  }

  .portada-logo {
    width: min(480px, 100%);
  }

  .portada-texto p {
    font-size: 18px;
  }

  .portada-texto-destacado {
    font-size: 19px !important;
  }

  .objetivo {
    min-height: 650px;
  }

  .objetivo-contenido {
    padding: 0 24px 0 4.8%;
  }

  .objetivo p {
    font-size: 15px;
    max-width: 600px;
  }

  .futuro {
    min-height: 700px;
  }

  .futuro-contenido {
    padding: 48px 38px;
  }

  .futuro p {
    margin-bottom: 24px;
    max-width: 520px;
    font-size: 15px;
  }

  .vision {
    min-height: 600px;
  }

  .vision-contenido {
    min-height: 600px;
    padding-top: 92px;
  }

  .vision-texto {
    width: min(460px, 100%);
  }

  .vision-texto p {
    margin-bottom: 42px;
    font-size: 14px;
  }

  .vision-logo {
    margin-top: 64px;
    width: min(330px, 38vw);
  }
}

@media (max-width: 900px) {
  .portada {
    min-height: auto;
  }

  .portada-contenido {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 20px 16px 34px;
  }

  .portada-logo {
    width: min(420px, 88vw);
  }

  .portada-texto {
    max-width: none;
    padding-top: 40px;
    text-align: center;
  }

  .portada-texto p {
    font-size: 19px;
    line-height: 1.45;
    margin-bottom: 18px;
  }

  .portada-texto-destacado {
    font-size: 19px !important;
  }

  .portada-logo-uaa-contenedor {
    padding: 4px 16px 32px;
  }

  .portada-logo-uaa {
    width: min(220px, 66vw);
  }

  .objetivo {
    min-height: 700px;
    height: auto;
  }

  .objetivo-panel {
    width: 100%;
  }

  .objetivo-contenido {
    width: 100%;
    padding: 30px 20px;
  }

  .objetivo h2 {
    margin-bottom: 22px;
    font-size: 32px;
    text-align: center;
  }

  .objetivo p {
    font-size: 16px;
    line-height: 1.45;
    max-width: 100%;
    text-align: center;
  }

  .futuro {
    min-height: auto;
    height: auto;
    grid-template-columns: 1fr;
  }

  .futuro-contenido {
    padding: 30px 20px;
  }

  .futuro p {
    margin-bottom: 18px;
    max-width: 100%;
    font-size: 17px;
    line-height: 1.45;
    text-align: center;
  }

  .futuro-imagen-contenedor {
    min-height: 360px;
  }

  .vision {
    min-height: 680px;
    height: 680px;
  }

  .vision-contenido {
    min-height: 680px;
    height: 680px;
    padding: 62px 20px 36px;
  }

  .vision-texto {
    width: min(390px, 100%);
  }

  .vision-texto p {
    margin-bottom: 30px;
    font-size: 16px;
    line-height: 1.4;
    text-align: center;
  }

  .vision-logo {
    margin-top: 48px;
    width: min(270px, 58vw);
  }
}