/* INGECAP — página de expectativa.
   Sin peticiones externas: tipografía y logo se sirven desde este mismo host. */

@font-face{font-family:Poppins;src:url(fonts/poppins-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Poppins;src:url(fonts/poppins-500.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Poppins;src:url(fonts/poppins-600.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Poppins;src:url(fonts/poppins-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  --azul:#2C3C78;
  --azul-profundo:#0E1230;
  --azul-noche:#070A20;
  --acento:#D98330;
  --acento-claro:#F0B27A;
  --blanco:#FFFFFF;

  /* Translúcido: una sola capa de vidrio, nunca apilada sobre otra clara. */
  --vidrio:rgba(255,255,255,.055);
  --vidrio-borde:rgba(255,255,255,.1);
  --texto:rgba(255,255,255,.94);
  --texto-tenue:rgba(255,255,255,.66);

  --respiro:clamp(1.25rem,4vw,3rem);
}

*,*::before,*::after{box-sizing:border-box}

html{
  /* El tamaño base hereda la preferencia del usuario; el espaciado va en rem
     para que el layout crezca con el texto en vez de romperse. */
  font:100%/1.6 Poppins,system-ui,-apple-system,Segoe UI,sans-serif;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  min-height:100svh;
  color:var(--texto);
  background:
    radial-gradient(120% 90% at 50% 0%, #141A44 0%, var(--azul-profundo) 45%, var(--azul-noche) 100%);
  background-attachment:fixed;
  display:flex;
  flex-direction:column;
  overflow-x:hidden;
}

/* ───────────────── Barra superior ─────────────────
   Capa translúcida con el contenido corriendo por debajo, no una franja opaca. */
.barra{
  position:sticky;
  top:0;
  z-index:10;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:.9rem var(--respiro);
  background:rgba(7,10,32,.55);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  /* Borde superior claro = la luz pegando en el material */
  border-bottom:1px solid var(--vidrio-borde);
}

.barra__logo{
  /* 463×115: el lockup compacto, sin la bajada. Se declaran width/height en el
     HTML para reservar la proporción y no provocar reflow al cargar. */
  height:clamp(1.6rem,3.4vw,2.1rem);
  width:auto;
  display:block;
}

.chip{
  flex:none;
  font-size:.6875rem;
  font-weight:600;
  /* Tracking positivo: el texto chico y en mayúsculas necesita aire. */
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--acento-claro);
  padding:.35rem .7rem;
  border-radius:999px;
  background:rgba(217,131,48,.13);
  border:1px solid rgba(217,131,48,.34);
}

/* ───────────────── Contenido ───────────────── */
.lienzo{
  flex:1;
  display:flex;
  flex-direction:column;
  width:100%;
  max-width:64rem;
  margin-inline:auto;
  padding:clamp(1.5rem,4vw,2.5rem) var(--respiro) 0;
}

.intro{max-width:38rem}

.intro__kicker{
  margin:0 0 .75rem;
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--acento);
}

.intro__titulo{
  margin:0 0 1.1rem;
  font-size:clamp(1.9rem,5.2vw,3.25rem);
  font-weight:700;
  /* Leading apretado y tracking negativo: el texto grande se lee demasiado
     separado si se deja el valor de cuerpo. */
  line-height:1.04;
  letter-spacing:-.03em;
  color:var(--blanco);
  text-wrap:balance;
}

.intro__bajada{
  margin:0;
  font-size:clamp(1rem,1.9vw,1.1rem);
  line-height:1.65;
  letter-spacing:0;
  color:var(--texto-tenue);
  max-width:33rem;
}

.intro__bajada strong{color:var(--texto);font-weight:600}

/* ───────────────── Escena ───────────────── */
.bahia{
  margin-top:clamp(.5rem,2vw,1.25rem);
}

.escena{
  display:block;
  width:100%;
  height:auto;
  /* Tope para que la bahía no empuje el mensaje fuera de la pantalla en
     portátiles de poca altura. */
  max-height:60svh;
  touch-action:none; /* el arrastre de paneles no debe hacer scroll de la página */
}

.panel{cursor:grab}
.panel[data-arrastrando="1"]{cursor:grabbing}

.pie{
  margin-top:auto;
  padding:1.5rem 0 2rem;
}

.pie__nota{
  margin:0;
  font-size:.8125rem;
  letter-spacing:.02em;
  color:rgba(255,255,255,.42);
}

/* ───────────────── Preferencias del usuario ─────────────────
   Movimiento reducido no es "sin respuesta": es una respuesta más suave.
   El JS además no arranca el bucle de ensamblaje y deja la página ya armada. */
@media (prefers-reduced-motion:reduce){
  .panel{cursor:default}
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important}
}

@media (prefers-reduced-transparency:reduce){
  .barra{
    background:var(--azul-noche);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
}

@media (prefers-contrast:more){
  :root{
    --texto:#FFFFFF;
    --texto-tenue:rgba(255,255,255,.88);
    --vidrio-borde:rgba(255,255,255,.55);
  }
  .barra{background:var(--azul-noche);backdrop-filter:none;-webkit-backdrop-filter:none}
  .chip{background:#000;border-color:var(--acento-claro);color:var(--acento-claro)}
}

/* Pantallas angostas: la escena se recorta de los lados en vez de miniaturizarse. */
@media (max-width:30rem){
  .escena{min-height:16rem}
}