.screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  overflow: hidden;
}

.screen--active {
  display: block;
}

/* ============================
   SCREEN: INICIO
   ============================ */

.inicio__bg {
  position: absolute;
  inset: 0;
  background-image: url("../assets/images/background1.webp");
  background-size: cover;
  background-position: center top;
  z-index: 0;
}

.inicio__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 28, 80, 0.28) 0%,
    rgba(0, 28, 80, 0.45) 35%,
    rgba(0, 20, 70, 0.82) 60%,
    rgba(0, 15, 55, 0.97) 100%
  );
  z-index: 1;
}

.inicio__dots {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 42%;
  background-image: radial-gradient(
    circle,
    rgba(30, 180, 255, 0.26) 1.5px,
    transparent 1.5px
  );
  background-size: 30px 30px;
  z-index: 1;
  pointer-events: none;
}

/* --- Encabezado --- */

.inicio__encabezado {
  position: relative;
  z-index: 5;
  padding: 5.5vh 5.5% 0;
}

.inicio__titulo {
  font-family: var(--fuente-titulo);
  font-size: 112px;
  font-weight: 900;
  color: #ffffff;
  line-height: 0.92;
  letter-spacing: 0em;
  text-transform: uppercase;
  text-shadow: 0 4px 32px rgba(0, 0, 0, 0.45);
  text-align: center;
}

.inicio__subtitulo {
  margin: auto;
  margin-top: 2.2vh;
  font-size: 30px;
  color: rgba(255, 255, 255, 0.95);
  line-height: 1.38;
  font-weight: 400;
  text-align: center;
  max-width: 500px;
}

.inicio__subtitulo-em {
  color: var(--color-lima);
  font-style: normal;
  font-weight: 600;
}

.inicio__separador {
  margin: auto;
  margin-top: 1.8vh;
  width: clamp(48px, 6vw, 68px);
  height: 3px;
  background: var(--color-lima);
}

/* --- SVG de conexiones decorativas --- */

.inicio__conexiones {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 4;
  pointer-events: none;
}

.conexion__linea {
  stroke: rgba(200, 240, 0, 0.42);
  stroke-width: 1.5;
  stroke-dasharray: 6 5;
}

.conexion__punto {
  fill: rgba(200, 240, 0, 0.62);
}

/* --- Círculo central --- */

.inicio__circulo {
  position: absolute;
  left: 50%;
  top: 930px;
  transform: translate(-50%, -50%);
  width: clamp(210px, 30vw, 320px);
  height: clamp(210px, 30vw, 320px);
  z-index: 6;
}

.inicio__circulo-interior {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(
      ellipse 62% 44% at 38% 24%,
      rgba(255, 255, 255, 0.2) 0%,
      transparent 68%
    ),
    rgba(0, 38, 115, 0.78);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border: 1.5px solid rgba(200, 240, 0, 0.78);
  box-shadow:
    0 0 0 3px rgba(200, 240, 0, 0.1),
    0 0 28px rgba(200, 240, 0, 0.42),
    0 0 70px rgba(200, 240, 0, 0.14),
    inset 0 0 30px rgba(0, 60, 180, 0.22);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 18px;
  gap: 3px;
  animation: glow-circulo 4s ease-in-out infinite;
}

.circulo__linea {
  font-size: 42px;
  color: rgba(255, 255, 255, 0.88);
  font-weight: 400;
  line-height: 1;
}

.circulo__acento {
  font-size: 48px;
  color: var(--color-lima);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 1px;
}

.circulo__chevron {
  font-size: 45px;
  color: var(--color-lima);
  line-height: 0;
  margin-top: 5px;
  display: block;
  font-weight: 700;
}

/* Anillos del círculo */

.inicio__circulo-anillo {
  position: absolute;
  border-radius: 50%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.inicio__circulo-anillo--1 {
  width: calc(100% + 38px);
  height: calc(100% + 38px);
  border: 1px solid rgba(200, 240, 0, 0.8);
  box-shadow: 0 0 8px rgba(200, 240, 0, 0.18);
}

.inicio__circulo-anillo--2 {
  width: calc(100% + 82px);
  height: calc(100% + 82px);
  border: 1px dashed rgba(200, 240, 0, 0.6);
}

.inicio__circulo-anillo--3 {
  width: calc(100% + 130px);
  height: calc(100% + 130px);
  border: 1px dashed rgba(80, 160, 255, 0.5);
}

.inicio__circulo-anillo--4 {
  width: calc(100% + 186px);
  height: calc(100% + 186px);
  border: 1px dashed rgba(60, 130, 255, 0.4);
}

/* --- Módulos / tarjetas ---
   Toda la superficie es el área táctil.
   La ilusión de botón físico se logra con box-shadow de "espesor"
   y un translateY en :active que simula hundirse esa misma distancia.
   ------------------------------------------------------------------ */

.modulo {
  position: absolute;
  background: rgba(255, 255, 255, 0.94);
  border-radius: 16px;
  box-shadow:
    0 6px 0 rgba(0, 0, 0, 0.3),
    /* borde inferior = grosor del botón  */ 0 10px 28px rgba(0, 0, 0, 0.3); /* sombra ambiental                   */
  display: flex;
  flex-direction: column;
  padding: 26px 24px 26px;
  z-index: 6;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  /* Velocidad de SOLTADO: un poco más lenta para sensación natural */
  transition:
    transform 140ms ease,
    box-shadow 140ms ease;
}

/* Prensa física: rápido para feedback inmediato (<100 ms) */
.modulo:active {
  transition:
    transform 55ms ease,
    box-shadow 55ms ease;
  transform: translateY(5px); /* se hunde 5 px (= grosor de la sombra) */
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.3),
    0 3px 8px rgba(0, 0, 0, 0.2);
}

/* Posiciones */

.modulo--izq {
  left: 3%;
  bottom: 578px;
  width: 300px;
}

.modulo--der {
  right: 3%;
  bottom: 578px;
  width: 300px;
  padding: 40px 0 40px 0;
}

.modulo--bot {
  left: 50%;
  bottom: 280px;
  transform: translateX(-50%);
  width: 300px;
  flex-direction: column;
  align-items: center;
  padding: 22px 22px 22px 24px;
  gap: 18px;
}

/* La tarjeta inferior tiene translateX base: hay que preservarlo en :active */
.modulo--bot:active {
  transform: translateX(-50%) translateY(5px);
}

/* Icono circular */

.modulo__icono-wrap {
  flex-shrink: 0;
  width: 90px;
  height: 90px;
  background: var(--color-lima);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  align-self: center;
}

.modulo--bot .modulo__icono-wrap {
  margin-bottom: 0;
}

.modulo__icono-svg {
  width: 54%;
  height: 54%;
  color: var(--color-azul-oscuro);
}

/* Cuerpo de texto */

.modulo__cuerpo {
  flex: 1;
  min-width: 0;
}

.modulo__titulo {
  font-size: 32px;
  font-weight: 800;
  color: var(--color-azul-oscuro);
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
}

.modulo__divider {
  margin: 12px 0 10px;
  border: none;
  border-top: 2px dotted rgba(0, 35, 102, 0.24);
}

.modulo__accion {
  font-size: clamp(13px, 1.7vw, 19px);
  color: rgba(0, 35, 102, 0.52);
  font-weight: 400;
  text-align: center;
  width: 100%;
  display: block;
}

/* Placeholder para el futuro icono de mano */

.modulo__accion-icon {
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: 80px;
  height: 80px; /* reserva área mínima táctil (80×80 px) */
}

.modulo--bot .modulo__accion-icon {
  position: relative;
  bottom: auto;
  right: auto;
  flex-shrink: 0;
}

/* ============================
   SCREEN: GRAN ALIADO
   ============================ */

#screen-aliado.screen--active {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.aliado__bg {
  position: absolute;
  inset: 0;
  background-image: url("../assets/images/bg-aliado-2.jpg"); /* reemplazar con imagen final */
  background-size: cover;
  background-position: center top;
  z-index: 0;
  top: -400px;
}

.aliado__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 28, 80, 0.22) 0%,
    rgba(0, 28, 80, 0.42) 42%,
    rgba(0, 20, 70, 0.8) 68%,
    rgba(0, 15, 55, 0.97) 100%
  );
  z-index: 1;
}

/* -------------------------------------------------------
   SECCIÓN SUPERIOR (≈ 55% de la pantalla)
   Logo + subtítulo sobre el fondo fotográfico
   ------------------------------------------------------- */

.aliado__top {
  flex: 0 0 35%;
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 4vh 6% 2vh;
  gap: 1.2vh;
}

/* Contenedor del logo ilustración (logo-granaliado.png).
   La imagen se escala con object-fit: contain para no recortarse. */
.aliado__icono-placeholder {
  width: 68%; /* reducido para que el logo no se vea demasiado ancho */
  max-width: 460px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.aliado__icono-placeholder img {
  max-width: 100%;
  height: auto; /* SIN width:100% → imagen respeta su aspecto natural */
  object-fit: contain;
  display: block;
}
.aliado__subtitulo2 {
  text-align: center;
}

.aliado__chevron {
  color: var(--color-lima);
  font-size: clamp(14px, 1.8vw, 20px);
  display: block;
  line-height: 1;
  margin: auto;
}

.aliado__subtitulo {
  font-size: clamp(22px, 3.2vw, 38px);
  color: rgba(255, 255, 255, 0.95);
  line-height: 1;
  text-align: center;
}

/* -------------------------------------------------------
   SECCIÓN INFERIOR (≈ 45% de la pantalla)
   Grid de tarjetas + espacio dedicado para botón volver
   ------------------------------------------------------- */

.aliado__bottom {
  flex: 0 0 65%;
  position: relative;
  z-index: 5;
  justify-content: flex-end;
  display: flex;
  flex-direction: column;
  padding: 3vh 28px calc(var(--barra-nav-altura) + 54px);
  gap: 2.5vh;
}

.aliado__texto-medio {
  font-size: 23px;
  color: rgba(255, 255, 255, 0.9);
  text-align: center;
  line-height: 1;
  flex-shrink: 0;
  background-color: rgba(0, 0, 0, 0.2);
  width: 100%;
  max-width: 367px;
  margin: 0 auto;
  padding: 12px 0;
}

.aliado__texto-acento {
  color: var(--color-lima);
  font-style: normal;
}

/* Grid 2×2 */

.aliado__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  flex-shrink: 0;
}

/* Override: .modulo dentro del grid → flujo normal, layout horizontal */
.aliado__grid .modulo {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  bottom: auto;
  width: 100%;
  flex-direction: row;
  align-items: center;
  padding: 18px 84px 18px 18px; /* hueco derecho para el icono */
  gap: 14px;
}

.aliado__grid .modulo:active {
  transform: translateY(5px); /* sin translateX — el grid no lo necesita */
}

.aliado__grid .modulo .modulo__icono-wrap {
  flex-shrink: 0;
  width: 90px;
  height: 90px;
  margin-bottom: 0;
  align-self: auto;
}

.aliado__grid .modulo .modulo__titulo {
  font-size: 25px;
  text-align: left;
  line-height: 1.2;
}

.aliado__grid .modulo .modulo__accion-icon {
  position: absolute;
  right: 14px;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
}

/* Espacio dedicado al botón volver: flex-grow absorbe el espacio restante
   y centra el botón vertical y horizontalmente dentro de él */

/* ============================
   ESTADO ACTIVO (card seleccionada)
   ============================ */

/*
  Solo la card tocada recibe esta clase: se apaga levemente
  para indicar que está "abierta". Las demás quedan sin clase,
  con opacidad completa y pointer-events normales (siguen siendo
  clickeables para cambiar el contenido expandido).
*/
.modulo--activo {
  opacity: 0.46;
  transition: opacity 300ms ease;
  /* pointer-events: auto → clic = cierra el estado expandido */
}

/* ============================
   TARJETA EXPANDIDA (ALIADO)
   ============================ */

/*
  Estructura (flex-column, centrada):

      [● círculo lima]      ← sobresale 56 px por encima del card
   ┌──────────────────────┐
   │  HEADER NAVY         │  ← 72 px de padding-top para el círculo
   │  Título en blanco    │
   ├──────────────────────┤
   │ (fondo foto + tinte) │  ← cuerpo transparente, muestra bg-aliado
   │   ○ icono   ○ icono  │  ← círculos con borde, sin relleno
   │   Label     Label    │
   └──────────────────────┘
*/

.aliado__card-expandida {
  position: absolute;
  left: 50%;
  top: 18%; /* área del cielo – encima del punto medio */
  transform: translateX(-50%);
  width: calc(100% - 48px);
  max-width: 920px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Estado inicial: GSAP aplica visibility:hidden, opacity:0 */
  pointer-events: none;
}

.aliado__card-expandida.is-active {
  pointer-events: auto;
}

/* ── Círculo lima: flota encima del header ── */

.aliado__ce-icono-wrap {
  position: relative;
  z-index: 2;
  width: 180px;
  height: 180px;
  background: var(--color-lima);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-bottom: -56px; /* solapa 56 px sobre el header */
  box-shadow:
    0 0 0 6px rgba(196, 214, 0, 0.22),
    0 6px 24px rgba(0, 0, 0, 0.38);
}

.aliado__ce-icono {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ── Card (header + cuerpo) ── */

.aliado__ce-card {
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.3),
    0 0 56px rgba(0, 0, 0, 0.5);
}

/* Header navy con título */

.aliado__ce-header {
  background: rgba(0, 22, 72, 0.96);
  padding: 72px 32px 26px; /* top = 56 px círculo + 16 px aire */
  text-align: center;
}

.aliado__ce-titulo {
  font-size: 30px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.25;
}

/* Cuerpo transparente: muestra la foto de fondo */

.aliado__ce-cuerpo {
  background: rgba(255, 255, 255, 0.28);
  /* backdrop-filter: blur(4px); */
  /* -webkit-backdrop-filter: blur(4px); */
  padding: 28px 24px 32px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 32px;
}

/* Ítem individual */

.aliado__ce-item {
  flex: 1;
  max-width: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

/* Círculo solo con borde, sin relleno */

.aliado__ce-item-icono-wrap {
  width: 150px;
  height: 150px;
  /* border: 2px solid rgba(0, 35, 102, 0.55); */
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.aliado__ce-item-icono {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.aliado__ce-item-label {
  font-size: 38px;
  color: var(--color-azul-oscuro);
  font-weight: 600;
  text-align: center;
  line-height: 1;
}

/* ============================
   Z-INDEX DE NAVEGACIÓN
   ============================ */

/* Home siempre por debajo: las secundarias pasan por encima durante la transición */
#screen-inicio {
  z-index: var(--nav-z-home);
}

.screen--desde-derecha,
.screen--desde-izquierda,
.screen--desde-abajo {
  z-index: var(--nav-z-secundaria);
}

/* ============================
   PANTALLAS PLACEHOLDER
   ============================ */

.placeholder__bg {
  position: absolute;
  inset: 0;
  background: var(--color-fondo);
  z-index: 0;
}

.placeholder__contenido {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}

.placeholder__titulo {
  font-family: var(--fuente-cuerpo);
  font-size: clamp(36px, 5.5vw, 64px);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
  text-align: center;
  line-height: 1.2;
}

/* ============================
   PANTALLA: PROPUESTA DE VALOR
   ============================ */

/* Fondo fotográfico
   Agregar background-image cuando esté disponible:
   background-image: url('../assets/images/bg-propuesta.webp'); */
.propuesta__bg {
  background-image: url(../assets/images/bg-propuesta.jpg);
  position: absolute;
  inset: 0;
  background-color: var(--color-fondo); /* color base mientras no haya imagen */
  background-size: 100%;
  background-position: center top;
  background-repeat: no-repeat;
  z-index: 0;
}

/* Logo / título de pantalla
   Placeholder 720×300 px centrado en la parte superior.
   Cuando llegue la imagen: agregar img dentro de este div.  */
.propuesta__logo {
  position: absolute;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  width: 720px;
  height: 300px;
  z-index: 5;

  background-image: url("../assets/images/logo-propuesta.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;

  /* Guía visual temporal — eliminar cuando llegue la imagen */
  /* outline:         2px dashed rgba(255, 255, 255, 0.12); */
  /* border-radius:   4px; */
}

/* ── Lista de tarjetas ─────────────────────────────
   Alineada al lado derecho.
   La mitad izquierda queda libre para ampliación futura.
   ─────────────────────────────────────────────────── */
.propuesta__lista {
  position: absolute;
  top: 520px;
  right: 0;
  width: 500px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding-right: 104px; /* margen derecho + espacio para el ícono que sobresale */
  z-index: 5;
  list-style: none;
}

/* ── Tarjeta individual ────────────────────────────
   Forma blanca, radio grande solo en lado izquierdo,
   ícono circular lima sobresaliendo por la derecha.
   ─────────────────────────────────────────────────── */
.propuesta__tarjeta {
  position: relative;
  width: 100%;
  height: 80px;
  background: #ffffff;
  border-radius: 59px 10px 10px 59px; /* izquierda muy redondeada, derecha casi recta */
  box-shadow:
    0 6px 0 rgba(0, 0, 0, 0.3),
    0 10px 28px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  overflow: visible; /* permite que el ícono sobresalga */
  cursor: pointer;
  touch-action: manipulation;
  /* Soltar (release): 140ms — idéntico al .modulo */
  transition:
    transform 140ms ease,
    box-shadow 140ms ease;
  margin-bottom: 20px;
  padding: 0 20px 0 0;
}

/* Feedback táctil CSS — press (55ms, idéntico al .modulo) */
.propuesta__tarjeta:active {
  transform: translateY(5px);
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.3),
    0 3px 8px rgba(0, 0, 0, 0.2);
  transition-duration: 55ms;
}

/* Chevron izquierdo — dentro del área redondeada */
.propuesta__tarjeta-flecha {
  flex-shrink: 0;
  width: 60px; /* ancho del área redondeada izquierda */
  text-align: center;
  font-size: 48px;
  color: var(--color-azul-oscuro);
  line-height: 1;
  font-family: var(--fuente-cuerpo);
  user-select: none;
  opacity: 0.55;
  margin-left: -4px; /* compensar el radius para centrar óptico */
}

/* Título de la tarjeta */
.propuesta__tarjeta-titulo {
  flex: 1;
  font-family: var(--fuente-cuerpo);
  font-size: 30px;
  font-weight: 400;
  color: var(--color-azul-oscuro);
  line-height: 1;
  padding-right: 24px;
}

/* Círculo ícono lima — position:absolute, sobresale por derecha y arriba/abajo */
.propuesta__tarjeta-icono {
  position: absolute;
  right: -68px; /* mitad del círculo fuera de la tarjeta */
  top: 50%;
  transform: translateY(-50%);
  width: 104px;
  height: 104px;
  background: var(--color-lima);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  flex-shrink: 0;
  pointer-events: none; /* el toque debe ir al li, no al ícono */
}

.propuesta__tarjeta-icono img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* ── Panel de ampliación ───────────────────────────
   Zona izquierda. Siempre en el DOM.
   DOM: icono-wrap (hermano) + ampliacion-card (wrapper con header + items).
   El icono flota sobre el header con margin-bottom negativo,
   igual que aliado__card-expandida.
   Visibilidad: .propuesta__ampliacion--visible + transitions en animations.css
   ─────────────────────────────────────────────────── */
.propuesta__ampliacion {
  position: absolute;
  top: 420px;
  left: 54px;
  width: 420px;
  z-index: 6;

  /* Flex columna: icono-wrap arriba, card debajo, centrados */
  display: flex;
  flex-direction: column;
  align-items: center;

  /* Estado base: invisible, no interactuable */
  opacity: 0;
  transform: translateY(18px);
  pointer-events: none;
}

.propuesta__ampliacion--visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* ── Círculo lima flotante ─────────────────────────
   margin-bottom negativo: se mete debajo del header,
   creando el efecto de ícono que sobresale por encima.
   ─────────────────────────────────────────────────── */
.propuesta__ampliacion-icono-wrap {
  width: 170px;
  height: 170px;
  background: var(--color-lima);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-bottom: -56px; /* flota 56px dentro del header */
  position: relative;
  z-index: 2; /* encima del header */
  box-shadow:
    0 0 0 6px rgba(196, 214, 0, 0.18),
    0 8px 28px rgba(0, 0, 0, 0.35);
}

.propuesta__ampliacion-icono {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* ── Card: wrapper con border-radius y sombra general ─
   Contiene header (azul) + items (blanco translúcido).
   overflow:hidden recorta los hijos al radio del wrapper.
   ─────────────────────────────────────────────────── */
.propuesta__ampliacion-card {
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.3),
    0 0 56px rgba(0, 0, 0, 0.5);
}

/* ── Header: fondo azul oscuro + espacio para el ícono ─
   padding-top: 56px (offset del icono) + 26px visual = 82px
   ─────────────────────────────────────────────────── */
.propuesta__ampliacion-header {
  background: rgba(0, 22, 72, 0.96);
  padding: 82px 28px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

/* Título dentro del header */
.propuesta__ampliacion-titulo {
  font-family: var(--fuente-cuerpo);
  font-size: 36px;
  font-weight: 400;
  color: #ffffff;
  text-align: center;
  line-height: 1.25;
  padding: 0 8px;
}

/* ── Zona de sub-ítems: fondo blanco translúcido ───
   flex-direction: column — a diferencia del aliado que usa row.
   ─────────────────────────────────────────────────── */
.propuesta__ampliacion-items {
  background: rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 28px 24px 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Sub-ítem individual — mismo patrón que .aliado__ce-item */
.propuesta__ampliacion-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  opacity: 0; /* stagger de entrada, controlado por animations.css */
}

/* Círculo sin borde, fondo blanco translúcido — idéntico a .aliado__ce-item-icono-wrap */
.propuesta__ampliacion-item-icono-wrap {
  width: 150px;
  height: 150px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Ícono llena el círculo al 100% — idéntico a .aliado__ce-item-icono */
.propuesta__ampliacion-item-icono {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Etiqueta — idéntica a .aliado__ce-item-label */
.propuesta__ampliacion-item-texto {
  font-family: var(--fuente-cuerpo);
  font-size: 32px;
  font-weight: 600;
  color: var(--color-azul-oscuro);
  text-align: center;
  line-height: 1;
}

/* ── Estado HUNDIDA de las tarjetas ────────────────
   Tarjeta activa: hundida y opacada (idéntico al .modulo--activo).
   Transition ya definida en .propuesta__tarjeta base.
   ─────────────────────────────────────────────────── */
.propuesta__tarjeta--hundida {
  opacity: 0.46;
  transform: translateY(5px);
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.3),
    0 3px 8px rgba(0, 0, 0, 0.2);
}

/* ====================================================
   COMPONENTE: BARRA-NAV
   Footer de navegación inferior — aparece en screen-propuesta,
   screen-aliado y screen-inteligencia.
   Tres elementos independientes: home (botón) · tooltip · barra (decorativa).
   Orden visual controlado por flex-direction según modificador.
   ==================================================== */

/* ── Contenedor ─────────────────────────────────────── */
.barra-nav {
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  height: var(--barra-nav-altura);
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 0 var(--barra-nav-padding-lateral);
  z-index: 10;
}

/* Dirección y agrupación de los elementos en un extremo.
   flex-direction siempre row. El orden visual de los hijos se controla con `order`.
   --izquierda: orden visual barra(1), tooltip(2), home(3) — grupo pegado al borde IZQUIERDO.
   --derecha:   orden visual home(1), tooltip(2), barra(3) — grupo pegado al borde DERECHO. */
.barra-nav--izquierda {
  flex-direction: row;
  justify-content: flex-start;
}

.barra-nav--derecha {
  flex-direction: row;
  justify-content: flex-end;
}

/* Orden visual en --izquierda: [barra][tooltip][home] — barra pegada al borde izquierdo */
.barra-nav--izquierda .barra-nav__barra {
  order: 1;
}
.barra-nav--izquierda .barra-nav__tooltip {
  order: 2;
}
.barra-nav--izquierda .barra-nav__home {
  order: 3;
}

/* Orden visual en --derecha: [home][tooltip][barra] — barra pegada al borde derecho */
.barra-nav--derecha .barra-nav__home {
  order: 1;
}
.barra-nav--derecha .barra-nav__tooltip {
  order: 2;
}
.barra-nav--derecha .barra-nav__barra {
  order: 3;
}

/* Márgenes del grupo: cada elemento lleva 16px en su lado interior (hacia el tooltip).
   Con tooltip oculto → 16px(barra) + 0px(tooltip) + 16px(home) = 32px de gap entre barra y home.
   Con tooltip visible → 16px(barra) + ancho(tooltip) + 16px(home). */
.barra-nav--izquierda .barra-nav__barra {
  margin-right: 16px;
}
.barra-nav--izquierda .barra-nav__home {
  margin-left: 16px;
}

.barra-nav--derecha .barra-nav__home {
  margin-right: 16px;
}
.barra-nav--derecha .barra-nav__barra {
  margin-left: 16px;
}

/* ── Botón home ─────────────────────────────────────── */
.barra-nav__home {
  width: var(--barra-nav-altura);
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--barra-nav-fondo-home);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  touch-action: manipulation;
  box-shadow: var(--barra-nav-sombra-boton);
  transition:
    transform 150ms ease,
    box-shadow 150ms ease;
  /* color hereda al SVG cuando se carga inline; con <img> el valor sirve de referencia */
  color: var(--color-azul-oscuro);
}

/* Feedback de hundimiento: se aplica al wrapper INTERNO para no
   interferir con el scaleX(0→1) de la cascada (que vive en el botón).
   El outer button mantiene su transform de cascada; el inner se escala. */
.barra-nav__home-inner {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition:
    transform 150ms ease,
    box-shadow 150ms ease;
}

.barra-nav__home:active .barra-nav__home-inner,
.barra-nav__home--presionado .barra-nav__home-inner {
  transform: scale(0.92) translateY(2px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  transition-duration: 55ms;
}

.barra-nav__home-icono {
  width: 40px;
  height: 40px;
  object-fit: contain;
  pointer-events: none;
  display: block;
}

/* ── Tooltip ────────────────────────────────────────── */
/* Estado base: colapsado (0 ancho real en el layout).
   max-width: 0 + overflow: hidden → ocupa 0px con border-box.
   scaleX(0) → efecto visual "crece desde el centro" al aparecer.
   transform-origin: center (igual en --izquierda y --derecha).
   La clase --visible la controla el futuro timer de inactividad. */
.barra-nav__tooltip {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0; /* colapsado: sin padding para que el ancho intrínseco sea 0 */
  border-radius: var(--barra-nav-radio);
  background: var(--barra-nav-fondo-tooltip);
  box-shadow: var(--barra-nav-sombra-boton);
  cursor: pointer;
  touch-action: manipulation;
  white-space: nowrap;
  /* Oculto por defecto */
  max-width: 0;
  overflow: hidden;
  transform: scaleX(0);
  transform-origin: center center;
  transition:
    max-width 350ms ease-out,
    transform 350ms ease-out,
    padding 350ms ease-out;
}

/* Al mostrar: crece hacia ambos lados desde el centro,
   empujando al botón home hacia el exterior */
.barra-nav__tooltip--visible {
  max-width: 500px; /* tope holgado: el ancho real lo da el contenido + padding */
  transform: scaleX(1);
  padding: 0 36px; /* se anima desde 0 junto con max-width */
}

/* Wrapper interno del tooltip — aísla el feedback del scaleX de show/hide */
.barra-nav__tooltip-inner {
  display: flex;
  align-items: center;
  transition: transform 150ms ease;
}

.barra-nav__tooltip:active .barra-nav__tooltip-inner,
.barra-nav__tooltip--presionado .barra-nav__tooltip-inner {
  transform: scale(0.92) translateY(2px);
  transition-duration: 55ms;
}

.barra-nav__tooltip-texto {
  font-family: var(--fuente-cuerpo);
  font-size: 26px;
  font-weight: 400;
  color: var(--color-azul-oscuro);
  line-height: 1;
  pointer-events: none;
}

/* ── Barra decorativa ───────────────────────────────── */
.barra-nav__barra {
  flex: 0 0 auto;
  width: 600px; /* ancho fijo — ajustar a ojo en pantalla real */
  display: flex;
  align-items: center;
  background: var(--barra-nav-fondo-barra);
  pointer-events: none; /* no interactiva */
}

/* Border-radius: solo el lado interior (que mira al tooltip) se redondea.
   El lado exterior (pegado al borde de pantalla) queda recto. */
.barra-nav--izquierda .barra-nav__barra {
  /* Barra a la IZQUIERDA del grupo → lado derecho (hacia tooltip) redondeado */
  border-radius: 0 var(--barra-nav-radio) var(--barra-nav-radio) 0;
}

.barra-nav--derecha .barra-nav__barra {
  /* Barra a la DERECHA del grupo → lado izquierdo (hacia tooltip) redondeado */
  border-radius: var(--barra-nav-radio) 0 0 var(--barra-nav-radio);
}

/* Texto: ocupa todo el ancho de la barra para que text-align funcione.
   Se alinea al lado CONTRARIO al botón home: el texto se "apoya" en el extremo opuesto. */
.barra-nav__barra-texto {
  flex: 1;
  font-family: var(--fuente-cuerpo);
  font-size: 22px;
  font-weight: 400;
  color: var(--color-azul-oscuro);
  line-height: 1.2;
}

/* Barra a la IZQUIERDA del grupo → texto alineado a la derecha (hacia el tooltip) */
.barra-nav--izquierda .barra-nav__barra-texto {
  text-align: right;
  padding-right: 32px;
}

/* Barra a la DERECHA del grupo → texto alineado a la izquierda (hacia el tooltip) */
.barra-nav--derecha .barra-nav__barra-texto {
  text-align: left;
  padding-left: 32px;
}

/* ── Botón volver ───────────────────────────────────
   position:absolute dentro de la barra-nav — no
   participa en el layout flex, no desplaza el grupo. */
.barra-nav__volver {
  position: absolute;
  top: 0;
  height: var(--barra-nav-altura);
  background: var(--barra-nav-fondo-home);
  color: var(--color-azul-oscuro);
  border: none !important;
  outline: none !important;
  border-radius: var(--barra-nav-radio);
  padding: 0 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  box-shadow: var(--barra-nav-sombra-boton);
  transition:
    transform 150ms ease,
    box-shadow 150ms ease;
  white-space: nowrap;
}

/* Posición según dirección: lado opuesto al grupo */
.barra-nav--izquierda .barra-nav__volver {
  right: 20px;
}
.barra-nav--derecha .barra-nav__volver {
  left: 20px;
}

/* Wrapper interno — aísla el feedback del scaleX de la cascada */
.barra-nav__volver-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  transition: transform 150ms ease;
}

.barra-nav__volver:active .barra-nav__volver-inner,
.barra-nav__volver--presionado .barra-nav__volver-inner {
  transform: scale(0.92) translateY(2px);
  transition-duration: 55ms;
}

.barra-nav__volver-texto {
  font-family: var(--fuente-cuerpo);
  font-size: 26px;
  font-weight: 600;
  line-height: 1;
}

/* ============================
   SCREEN: INTELIGENCIA EN SOLUCIONES
   ============================ */

.inteligencia__bg {
  position: absolute;
  inset: 0;
  background-image: url("../assets/images/background-inteligencia.jpg");
  background-color: var(--color-fondo);
  background-size: cover;
  background-position: center top;
  z-index: 0;
}

.inteligencia__logo {
  position: absolute;
  top: 6vh;
  left: 50%;
  transform: translateX(-50%);
  width: 700px;
  height: 280px;
  z-index: 5;
  /* Aquí va la imagen del título: <img src="assets/images/inteligencia-titulo.png"> */
}
.inteligencia__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Tarjetas del menú de inteligencia — reusan .modulo sin icono.
   Se sobreescribe el padding-bottom que normalmente reserva espacio para .modulo__accion-icon. */
#screen-inteligencia .modulo__titulo {
  text-transform: uppercase;
}

.modulo--int-izq {
  left: 3%;
  bottom: 400px;
  width: clamp(196px, 23vw, 250px);
  padding: 32px 28px;
}

.modulo--int-der {
  right: 3%;
  bottom: 400px;
  width: clamp(196px, 23vw, 250px);
  padding: 32px 28px;
}

.modulo--int-bot {
  left: 50%;
  bottom: 200px;
  transform: translateX(-50%);
  width: clamp(370px, 44vw, 476px);
  padding: 28px 32px;
}

.modulo--int-bot:active {
  transform: translateX(-50%) translateY(5px);
}

/* ====================================================
   SCREEN: CEMENTO GRANEL
   ==================================================== */

/* ── Variables de la pantalla ──────────────────────── */
:root {
  /* Posición y tamaño del bloque 1 (imagen superior) */
  --cemento-texto1-top: 60px;
  --cemento-texto1-max-width: 900px;

  /* Posición y tamaño del bloque 3 (imagen inferior, sobre el botón) */
  --cemento-texto3-max-width: 820px;

  /* Botón disparador */
  --cemento-boton-altura: 90px;
  --cemento-boton-bottom: 444px;
  --cemento-boton-min-width: 600px;
  --cemento-boton-max-width: 880px;
  --cemento-boton-font-cerrado: 26px;

  /* Animaciones de entrada de los 3 bloques */
  --cemento-dur-entrada: 600ms;
  --cemento-stagger: 600ms;

  /* Modal */
  --cemento-modal-altura: 1100px;
  --cemento-modal-dur: 420ms;
  --cemento-modal-fondo: #d2d2d2;
  --cemento-modal-padding: 30px 40px;
  --cemento-modal-radio: 24px;
  --cemento-icono-tam: 80px;
  --cemento-item-gap: 10px;
  --cemento-item-font: 26px;
  --cemento-item-color: var(--color-azul-oscuro);
  --cemento-item-dur: 300ms;
  --cemento-item-stagger: 130ms;
}

/* ── Fondo ─────────────────────────────────────────── */
.cemento__fondo {
  position: absolute;
  inset: 0;
  /* Imagen de fondo: assets/images/bg-cemento.jpg */
  background-image: url("../assets/images/bg-cemento.jpg");
  background-color: var(--color-fondo);
  background-size: cover;
  background-position: center center;
  z-index: 0;
}

/* ── Bloque 1: imagen de texto superior ────────────── */
/* Centering via left:0/right:0 + flex para no usar transform:translateX(-50%),
   que conflictuaría con el translateY de la animación de entrada. */
.cemento__texto-1 {
  position: absolute;
  top: var(--cemento-texto1-top);
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  z-index: 3;
  opacity: 0; /* estado base para animación de entrada */
}
.cemento__texto-1 img {
  max-width: var(--cemento-texto1-max-width);
  width: 80%;
  height: auto;
  display: block;
  margin-top: 80px;
}

/* ── Bloque 3: imagen de texto inferior ────────────── */
/* Posición: encima del botón, calculada desde el borde inferior
   = cemento-boton-bottom + cemento-boton-altura + 32px de gap */
.cemento__texto-3 {
  position: absolute;
  bottom: 10vh;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  z-index: 3;
  opacity: 0; /* estado base para animación de entrada */
}
.cemento__texto-3 img {
  max-width: var(--cemento-texto3-max-width);
  width: 45%;
  height: auto;
  display: block;
}

/* ── Wrapper del botón ──────────────────────────────── */
.cemento__modal-wrapper {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--cemento-boton-bottom);
  z-index: 8;
  opacity: 0;
  width: 50%;
  margin: auto;
}

/* ── Botón-wrap: target de animación de entrada ─────── */
/* Hijo directo del wrapper; el slide-up de entrada se aplica aquí
   para no interferir con el translateY del open/close del wrapper. */
.cemento__boton-wrap {
  height: var(--cemento-boton-altura);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 40px;
}

/* ── Botón disparador ───────────────────────────────── */
.cemento__boton {
  min-width: var(--cemento-boton-min-width);
  max-width: var(--cemento-boton-max-width);
  width: 50%;
  height: var(--cemento-boton-altura);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 48px;
  background: var(--barra-nav-fondo-home);
  color: var(--color-azul-oscuro);
  border: none;
  border-radius: 50px;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  transition:
    transform 120ms ease,
    box-shadow 120ms ease;
}

.cemento__boton:active,
.cemento__boton--animando {
  transform: scale(0.97);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.cemento__boton-texto {
  font-family: var(--fuente-titulo) !important;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: 0.02em;
  transition: font-size 150ms ease;
}

.cemento__boton--cerrado .cemento__boton-texto {
  font-size: var(--cemento-boton-font-cerrado);
}

/* ── Panel modal ────────────────────────────────────── */
.cemento__modal-panel {
  max-height: 0;
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: var(--cemento-modal-radio);
  transition: max-height var(--cemento-modal-dur) cubic-bezier(0, 0, 0.2, 1);
  margin-bottom: -20px;
}

.cemento__modal-wrapper--abierto .cemento__modal-panel {
  max-height: var(--cemento-modal-altura);
}

.cemento__modal-lista {
  list-style: none;
  margin: 0;
  padding: var(--cemento-modal-padding);
  display: flex;
  flex-direction: column;
  gap: var(--cemento-item-gap);
}

.cemento__item {
  display: flex;
  align-items: center;
  gap: 40px;
  opacity: 0;
  transform: translateY(15px);
  transition:
    opacity var(--cemento-item-dur) ease-out,
    transform var(--cemento-item-dur) ease-out;
}

.cemento__modal-wrapper--abierto .cemento__item {
  opacity: 1;
  transform: translateY(0);
}

.cemento__modal-wrapper--abierto .cemento__item--1 {
  transition-delay: calc(var(--cemento-item-stagger) * 1);
}
.cemento__modal-wrapper--abierto .cemento__item--2 {
  transition-delay: calc(var(--cemento-item-stagger) * 2);
}
.cemento__modal-wrapper--abierto .cemento__item--3 {
  transition-delay: calc(var(--cemento-item-stagger) * 3);
}
.cemento__modal-wrapper--abierto .cemento__item--4 {
  transition-delay: calc(var(--cemento-item-stagger) * 4);
}

.cemento__item-icono {
  flex: 0 0 var(--cemento-icono-tam);
  width: var(--cemento-icono-tam);
  height: var(--cemento-icono-tam);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.4);
}

.cemento__item-texto {
  font-size: var(--cemento-item-font);
  color: var(--cemento-item-color);
  font-weight: 600;
  line-height: 1.2;
}

/* ====================================================
   SCREEN: CONCRETOS PREMEZCLADOS / VACIADOS MASIVOS
   ==================================================== */

/* ── Variables de la pantalla ──────────────────────── */
:root {
  --concretos-fila-altura: 340px;
  --concretos-texto-padding-left: 80px;
  --concretos-texto-max-width: 360px;
  --concretos-dur-slide: 700ms;
  --concretos-dur-degradado: 600ms;
  --concretos-slide-offset: 300px;

  /* Sección inferior */
  --concretos-accion-altura: 100px;
  --concretos-accion-icono-tam: 70px;
  --concretos-accion-font: 20px;
  --concretos-accion-gap: 28px;
  --concretos-acciones-gap: 30px;
}

/* ── Contenedor de pantalla ─────────────────────────── */
#screen-concretos {
  display: none;
  flex-direction: column;
  background-color: var(--color-fondo);
  background-image: url("../assets/images/bg-concreto.jpg");
  background-size: cover;
  background-position: center center;
}

#screen-concretos.screen--active {
  display: flex;
}

/* ── Base compartida de todas las filas ─────────────── */
.concretos__fila {
  position: relative;
  width: 100%;
  height: var(--concretos-fila-altura);
  overflow: hidden;
  transform: translateY(var(--concretos-slide-offset));
  opacity: 0;
  transition:
    transform var(--concretos-dur-slide) ease-out,
    opacity var(--concretos-dur-slide) ease-out;
}

.concretos--animando .concretos__fila {
  transform: translateY(0);
  opacity: 1;
}

/* Stagger por fila: cada una arranca 120ms después */
.concretos--animando .concretos__fila--1 {
  transition-delay: 0ms;
}
.concretos--animando .concretos__fila--2 {
  transition-delay: 120ms;
}
.concretos--animando .concretos__fila--3 {
  transition-delay: 240ms;
}

/* ── Fondo fotográfico de la fila ───────────────────── */
.concretos__fila-fondo {
  position: absolute;
  inset: 0;
  background-size: auto 100%;
  background-repeat: no-repeat;
  background-color: #fff;
  /* Variante izquierda (default): foto a la derecha */
  background-position: 140% center;
}

.concretos--animando .concretos__fila--1 .concretos__fila-fondo {
  background-image: url(../assets/images/concreto-img1.jpg);
  background-position: 105% center;
}
.concretos--animando .concretos__fila--2 .concretos__fila-fondo {
  background-image: url(../assets/images/concreto-img2.jpg);
  background-position: -5% center;
}
.concretos--animando .concretos__fila--3 .concretos__fila-fondo {
  background-image: url(../assets/images/concreto-img3.jpg);
  background-position: 118% center;
}

/* ── Degradado animado — variante izquierda (default) ─
   Texto a la izquierda, foto a la derecha.
   El ::after cubre la zona de transición foto→blanco. */
.concretos__fila-degradado {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: var(--concretos-texto-padding-left);
}

.concretos__fila-degradado::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 49%;
  width: 20%;
  background: linear-gradient(
    to right,
    #ffffff 0%,
    rgba(255, 255, 255, 0) 100%
  );
  pointer-events: none;
}

.concretos--animando .concretos__fila--2 .concretos__fila-degradado::after {
  left: 32%;
}
.concretos--animando .concretos__fila--3 .concretos__fila-degradado::after {
  left: 47%;
}

/* ── Variante derecha: texto a la derecha, foto a la izquierda ─ */
.concretos__fila--derecha .concretos__fila-fondo {
  background-position: left center;
}

.concretos__fila--derecha .concretos__fila-degradado {
  justify-content: flex-end;
  padding-left: 0;
  padding-right: var(--concretos-texto-padding-left);
}

.concretos__fila--derecha .concretos__fila-degradado::after {
  background: linear-gradient(to left, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
  left: auto;
  right: 44%;
}

/* ── Imagen de texto de la fila ─────────────────────── */
.concretos__fila-texto {
  position: relative;
  z-index: 1;
  max-width: var(--concretos-texto-max-width);
  height: auto;
  display: block;
}

/* ── Sección inferior: fondo + título + botones ──────── */
.concretos__inferior {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 120px;
  padding: 60px 60px 140px;
  opacity: 0;
  transform: translateY(var(--concretos-slide-offset));
  transition:
    transform var(--concretos-dur-slide) ease-out 360ms,
    opacity var(--concretos-dur-slide) ease-out 360ms;
}

.concretos--animando .concretos__inferior {
  opacity: 1;
  transform: translateY(0);
}

.concretos__inferior-titulo {
  max-width: 410px;
  width: 85%;
  height: auto;
  display: block;
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 400ms ease-out 1100ms,
    transform 400ms ease-out 1100ms;
}

.concretos--animando .concretos__inferior-titulo {
  opacity: 1;
  transform: translateY(0);
}

/* ── Botones de acción ──────────────────────────────── */
.concretos__acciones {
  display: flex;
  gap: var(--concretos-acciones-gap);
  width: 100%;
  justify-content: center;
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 400ms ease-out 1300ms,
    transform 400ms ease-out 1300ms;
}

.concretos--animando .concretos__acciones {
  opacity: 1;
  transform: translateY(0);
}

.concretos__accion {
  position: relative;
  flex: 1;
  max-width: 400px;
  height: var(--concretos-accion-altura);
  display: flex;
  align-items: center;
  gap: var(--concretos-accion-gap);
  padding: 0 32px;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
  transition:
    transform 120ms ease,
    box-shadow 120ms ease;
}

.concretos__accion:active {
  transform: scale(0.97);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.concretos__accion--azul {
  background: var(--color-azul-oscuro);
  color: #ffffff;
}

.concretos__accion--lima {
  background: var(--barra-nav-fondo-home);
  color: var(--color-azul-oscuro);
}

.concretos__accion-icono {
  flex-shrink: 0;
  width: var(--concretos-accion-icono-tam);
  height: var(--concretos-accion-icono-tam);
  display: flex;
  align-items: center;
  justify-content: center;
}

.concretos__accion-icono img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.concretos__accion-texto {
  font-family: var(--fuente-titulo);
  font-size: var(--concretos-accion-font);
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  text-align: center;
  flex: 1;
}

/* ====================================================
   PANTALLAS INTERNAS DE CONCRETOS
   screen-concretos-ventajas / screen-concretos-portafolio
   ==================================================== */

#screen-concretos-ventajas,
#screen-concretos-portafolio {
  display: none;
  flex-direction: column;
  align-items: center;
  background-color: var(--color-fondo);
  background-image: url("../assets/images/bg-concreto.jpg");
  background-size: cover;
  background-position: center center;
}

#screen-concretos-ventajas.screen--active,
#screen-concretos-portafolio.screen--active {
  display: flex;
}

/* Imagen única, centrada, sin posicionamiento absoluto */
.concretos-sub__imagen {
  display: block;
  width: 70%;
  height: auto;
  margin: auto;
}

/* ====================================================
   PANTALLA: SOLUCIONES MODULARES
   Todos los tamaños están hardcodeados aquí para
   edición rápida con DevTools.
   ==================================================== */

/* Fondo fotográfico: cubre toda la pantalla */
.soluciones__fondo {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
  background-image: url("../assets/images/soluciones-fondo.jpg");
}

/* Header azul superior */
.soluciones__header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 640px;
  background-color: var(--color-azul-oscuro);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Imagen de título dentro del header */
.soluciones__titulo {
  max-width: 900px;
  width: 75%;
  height: auto;
  display: block;
}

/* Bloque izquierdo translúcido */
.soluciones__bloque-izq {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 62%;
  background-color: rgba(255, 255, 255, 0.8);
  z-index: 2;
  overflow: hidden;
}

/* PNG de propuesta de valor dentro del bloque */
.soluciones__bloque-izq-contenido {
  position: absolute;
  top: 720px;
  left: 41px;
  width: 87%;
  height: auto;
  display: block;
  z-index: 2;
}

/* Degradado oscuro inferior del bloque */
.soluciones__bloque-izq-degradado {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 400px;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.5) 0%,
    rgba(0, 0, 0, 0) 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* Columna de botones a la derecha */
.soluciones__botones {
  position: absolute;
  top: 880px;
  right: 45px;
  width: 27%;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* Botón individual — apariencia igual a .modulo, tamaño propio */
.soluciones__boton {
  background: rgba(255, 255, 255, 0.94);
  color: var(--color-azul-oscuro);
  border: none;
  border-radius: 16px;
  padding: 40px 32px;
  font-size: 32px;
  font-weight: 700;
  text-align: left;
  line-height: 1.2;
  cursor: pointer;
  min-height: 130px;
  box-shadow:
    0 6px 0 rgba(0, 0, 0, 0.3),
    0 10px 28px rgba(0, 0, 0, 0.3);
  -webkit-tap-highlight-color: transparent;
}

.soluciones__boton-texto {
  display: block;
}

/* ====================================================
   PANTALLAS INTERNAS DE SOLUCIONES
   screen-soluciones-eficiencia / -ambiente / -portafolio
   ==================================================== */

/* Sub-screens activas: flex-column para que la barra-nav quede al fondo */
#screen-soluciones-eficiencia.screen--active,
#screen-soluciones-ambiente.screen--active,
#screen-soluciones-portafolio.screen--active {
  display: flex;
  flex-direction: column;
}

/* Panel de contenido: ocupa todo el espacio por encima de la barra-nav */
.soluciones-interna {
  flex: 1;
  min-height: 0;
  background-color: var(--color-azul-oscuro);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px;
  overflow: hidden;
}

/* Imagen responsive: márgenes por el padding del contenedor */
.soluciones-interna img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}

.soluciones-interna--eficiencia {
  background-color: transparent;
  background-image: url(../assets/images/bg-efi.jpg);
}
.soluciones-interna--eficiencia img {
  max-width: 72%;
  margin: auto;
}

.soluciones-interna--ambiente {
  background-color: transparent;
  background-image: url(../assets/images/bg-medio.jpg);
}
.soluciones-interna--ambiente img {
  max-width: 72%;
  margin: auto;
}

.soluciones-interna--portafolio {
  background-color: var(--color-azul-oscuro);
}