html,
body {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  position: fixed;
  touch-action: none;
  background-color: #000000;
  color: #ffffff;
  user-select: none;
  -webkit-user-select: none;
}

/* Bruma ambiental etérea */
.mist-particle {
  position: absolute;
  pointer-events: none;
  border-radius: 9999px;
  filter: blur(100px);
  background: radial-gradient(circle, rgba(255, 255, 255, 0.06) 0%, rgba(0, 240, 255, 0.04) 45%, transparent 75%);
  animation: floatMist 28s ease-in-out infinite alternate;
}

@keyframes floatMist {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 0.25;
  }

  50% {
    transform: translate(60px, -40px) scale(1.2);
    opacity: 0.45;
  }

  100% {
    transform: translate(-50px, 45px) scale(0.9);
    opacity: 0.2;
  }
}

/* Card glassmorphism detrás del retrato: vidrio esmerilado con contorno claro
   y halo cian tenue, que entra con la siguiente sección */
.portrait-bg-edge {
  border-radius: 1.75rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 100%);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  box-shadow:
    0 24px 60px -24px rgba(0, 0, 0, 0.85),
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    0 0 34px rgba(0, 240, 255, 0.12);
  will-change: transform, opacity;
}

/* Logo Cuarto de Paz: contorno claro definido (sigue la silueta) + halo cian tenue */
.cuarto-logo {
  filter: brightness(1.12) contrast(1.04)
    drop-shadow(1px 1px 0 rgba(255, 255, 255, 0.4))
    drop-shadow(-1px -1px 0 rgba(255, 255, 255, 0.4))
    drop-shadow(0 0 18px rgba(0, 240, 255, 0.12));
}

.interactive-card {
  position: relative;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 100%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  box-shadow:
    0 30px 70px -26px rgba(0, 0, 0, 0.9),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
  transition: border-color 0.35s ease, box-shadow 0.35s ease, background-color 0.35s ease;
  will-change: transform, opacity, filter;
  transform-style: preserve-3d;
}

/* Contorno luminoso que acompaña al puntero: el brillo crece justo donde
   apunta el cursor para reforzar la sensación de relieve 3D. */
.interactive-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: radial-gradient(
    170px circle at var(--mx, 50%) var(--my, 50%),
    rgba(0, 240, 255, 0.95),
    rgba(0, 240, 255, 0) 68%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.interactive-card:hover {
  border-color: rgba(0, 240, 255, 0.55);
  box-shadow:
    var(--sx, 0px) var(--sy, 0px) 55px -14px rgba(0, 240, 255, 0.4),
    0 34px 80px -28px rgba(0, 0, 0, 0.92),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.interactive-card:hover::after {
  opacity: 1;
}

.morph-item {
  will-change: transform, opacity, filter;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============================================================
   SEMBLANZA: sin scroll. El texto se dibuja sobre el retrato y
   debe caber siempre, así que en pantallas bajas se reduce la letra.
   ============================================================ */
@media (max-width: 1023px) and (max-height: 720px) {
  .section-semblanza__body p {
    font-size: 0.72rem;
    line-height: 1.5;
  }

  .section-semblanza__body p > span {
    font-size: 1.05rem;
  }
}

@media (max-width: 1023px) and (max-height: 560px) {
  .section-semblanza__body p {
    font-size: 0.62rem;
    line-height: 1.45;
  }

  .section-semblanza__body p > span {
    font-size: 0.9rem;
  }
}

/* Grid pattern ultra sutil */
.bg-grid-cyber {
  background-size: 40px 40px;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
}


/* ============================================================
   Utilidades que el CDN de Tailwind generaba bajo demanda y que
   el build estático no incluye (fuera del preset por defecto).
   ============================================================ */
.z-35 {
  z-index: 35;
}

.contrast-110 {
  --tw-contrast: contrast(1.1);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale)
    var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia)
    var(--tw-drop-shadow);
}

/* ============================================================
   SECTION: IMPACTO (Registro de Medios)
   2-row layout: header top / card stage bottom
   ============================================================ */
.section-impacto {
  grid-template-rows: auto 1fr;
  min-height: 100%;
}

.section-impacto__header {
  padding: 0 0 1rem;
}

.section-impacto__stage {
  min-height: 0;
  flex: 1;
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
}

/* Escenario: carrusel de una tarjeta centrada. Las 6 tarjetas se apilan en la
   misma celda y solo una queda visible a la vez (ver `carouselPos` en JS). */
.section-impacto__grid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  place-items: center;
  gap: 0;
  overflow: hidden;
  touch-action: pan-y;
}

.section-impacto__grid > .interactive-card {
  grid-area: 1 / 1;
  width: min(100%, 680px);
  max-width: 680px;
  height: auto;
  max-height: 100%;
  min-height: 0;
  overflow: auto;
  margin: 0 auto;
}

/* ============================================================
   SECTION: TRES PILARES
   Carrusel de una card a la vez (la anterior sale del espacio).
   ============================================================ */
.section-pilares__stage {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  place-items: center;
  overflow: hidden;
}

.section-pilares__stage > .interactive-card {
  grid-area: 1 / 1;
  width: min(100%, 640px);
  max-width: 640px;
  height: auto;
  max-height: 100%;
  min-height: 0;
  overflow: auto;
  margin: 0 auto;
}

/* ============================================================
   SECTION: CUARTO DE PAZ (móvil)
   El logo/descripción y el carrusel comparten el mismo espacio:
   primero aparece la info y luego se desvanece para dejar ver las
   cards, en lugar de apilarse y desbordar la pantalla.
   ============================================================ */
@media (max-width: 1023px) {
  .section-cuarto__layout {
    display: block;
    position: relative;
    height: 100%;
  }

  .section-cuarto__header {
    position: absolute;
    inset: 0;
    z-index: 2;
    padding: 0;
  }

  .section-cuarto__carousel {
    position: absolute;
    inset: 0;
    height: 100%;
    min-height: 0;
    z-index: 1;
  }
}