/* ============================================================================
   THEME.CSS — Sistema de diseño de la landing del CAA
   ----------------------------------------------------------------------------
   Aquí viven los COLORES y los efectos visuales base ("liquid glass").
   Si quieres cambiar la paleta del sitio, cambia SOLO las variables del
   bloque :root de más abajo. No necesitas tocar nada más.
   ============================================================================ */

:root {
  /* ---- PALETA DE LA MARCA (cámbiala aquí) ------------------------------
     El sitio usa dos colores sobre fondo negro:
       ROJO   #de0f01 → color principal (acentos, botones, brillos)
       BLANCO #ffffff → color secundario (textos y bordes del vidrio)
     El rojo está aplicado de forma sutil: tiñe el vidrio, los bordes y los
     brillos, y solo aparece "puro" en unos pocos elementos destacados.       */
  --color-marca: #de0f01;              /* ROJO principal                    */
  --color-marca-rgb: 222, 15, 1;       /* el mismo rojo, en formato RGB     */
  --color-fondo: #000000;              /* Fondo general de la página        */
  --color-texto: #ffffff;              /* Color de todos los textos         */
  --color-texto-suave: rgba(255, 255, 255, 0.85);

  /* Color de los botones "sólidos" (ej. "Únete al CAA") y del chip "Nuevo".
     Si lo cambias a un color claro, pon --color-acento-texto en #000000
     para que el texto del botón se siga leyendo. */
  --color-acento: var(--color-marca);
  --color-acento-texto: #ffffff;

  /* ---- FORMA DE LAS TARJETAS ------------------------------------------- */
  --radio-tarjeta: 1.25rem;            /* Redondeo de las tarjetas          */

  /* ---- EFECTO VIDRIO (avanzado) ----------------------------------------
     El vidrio va teñido con el rojo de la marca en una cantidad mínima:
     no se ve "rojo", solo se siente más cálido que un vidrio neutro.        */
  --vidrio-tinte: var(--color-marca-rgb);  /* Tinte del vidrio              */
  --vidrio-opacidad: 0.14;             /* Qué tan teñido está el vidrio     */
  --vidrio-desenfoque: 4px;            /* Desenfoque del vidrio suave       */
  --vidrio-desenfoque-fuerte: 50px;    /* Desenfoque del vidrio del CTA     */

  /* Cuánto rojo llevan los bordes y los brillos del vidrio (0 = nada) */
  --vidrio-borde-marca: 0.9;
  --brillo-marca: 0.9;

  /* ---- VELO SOBRE LOS VIDEOS -------------------------------------------
     Capa oscura entre el video de fondo y el texto. Sin ella, un video claro
     (un cielo, un día soleado) se "come" las letras blancas.
       0    = sin velo, el video se ve tal cual
       0.5  = velo suave
       1    = velo fuerte, el texto se lee siempre
     Si tu video es oscuro puedes bajarlo; si es muy luminoso, súbelo.        */
  --velo-intensidad: 1;

  /* Colores de la línea de tiempo (sección Proyectos).
     • propuesta   = lo que proponemos nosotros → el rojo de la marca
     • reforma     = cambios a algo que ya existe → un rojo más profundo
     • tradicional = lo que el colegio ya hace  → verde
     El verde está elegido para que el texto blanco encima se lea igual de
     bien que sobre el rojo (contraste 5,0 en los dos). Si lo cambias por uno
     más claro, el nombre de la actividad se empieza a perder. */
  --color-propuesta: var(--color-marca);
  --color-propuesta-rgb: var(--color-marca-rgb);
  --color-reforma: #8c1007;
  --color-reforma-rgb: 140, 16, 7;
  --color-tradicional: #15803d;
  --color-tradicional-rgb: 21, 128, 61;
}

/* ============================================================================
   BASE
   ============================================================================ */
html {
  scroll-behavior: smooth;
}

body {
  background: var(--color-fondo);
  color: var(--color-texto);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Deja espacio bajo la barra de navegación al saltar a una sección */
section[id] {
  scroll-margin-top: 6rem;
}

/* Bloquea el scroll del fondo cuando el menú móvil está abierto */
body.menu-abierto {
  overflow: hidden;
}

/* ============================================================================
   LIQUID GLASS — el "vidrio líquido" que usan tarjetas, píldoras y la barra
   ============================================================================ */
.liquid-glass {
  background: rgba(var(--vidrio-tinte), var(--vidrio-opacidad));
  background-blend-mode: luminosity;
  backdrop-filter: blur(var(--vidrio-desenfoque));
  -webkit-backdrop-filter: blur(var(--vidrio-desenfoque));
  border: none;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.18);
  position: relative;
  overflow: hidden;
}

.liquid-glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.4px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.7) 0%,
    rgba(var(--color-marca-rgb), var(--vidrio-borde-marca)) 12%,
    rgba(255, 255, 255, 0.24) 22%,
    rgba(255, 255, 255, 0) 40%,
    rgba(255, 255, 255, 0) 60%,
    rgba(255, 255, 255, 0.24) 78%,
    rgba(var(--color-marca-rgb), var(--vidrio-borde-marca)) 88%,
    rgba(255, 255, 255, 0.7) 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

.liquid-glass-strong {
  background: rgba(var(--vidrio-tinte), var(--vidrio-opacidad));
  background-blend-mode: luminosity;
  backdrop-filter: blur(var(--vidrio-desenfoque-fuerte));
  -webkit-backdrop-filter: blur(var(--vidrio-desenfoque-fuerte));
  border: none;
  box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.05), inset 0 1px 1px rgba(255, 255, 255, 0.24);
  position: relative;
  overflow: hidden;
}

.liquid-glass-strong::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.4px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.78) 0%,
    rgba(var(--color-marca-rgb), 0.95) 12%,
    rgba(255, 255, 255, 0.3) 22%,
    rgba(255, 255, 255, 0) 40%,
    rgba(255, 255, 255, 0) 60%,
    rgba(255, 255, 255, 0.3) 78%,
    rgba(var(--color-marca-rgb), 0.95) 88%,
    rgba(255, 255, 255, 0.78) 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

/* Micro-interacción compartida por tarjetas y botones */
.hover-elevar {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.hover-elevar:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 44px -20px rgba(var(--color-marca-rgb), var(--brillo-marca)),
              inset 0 1px 1px rgba(255, 255, 255, 0.22);
}

/* Tarjeta de integrante: la flechita se enciende al pasar por encima */
.tarjeta-integrante { display: block; border: 0; }
.flecha-integrante { transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), color 0.25s ease; }
.tarjeta-integrante:hover .flecha-integrante {
  transform: translate(2px, -2px);
  color: #ffffff;
}
/* Lista del currículum de cada integrante: cada punto lleva una bolita roja */
.lista-logros li {
  position: relative;
  padding-left: 1.15rem;
}
.lista-logros li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--color-marca);
}

.tarjeta-integrante:focus-visible {
  outline: 2px solid rgba(var(--color-marca-rgb), 0.9);
  outline-offset: 3px;
}

/* Contenedor de imágenes con recorte suave */
.media-marco {
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
}
.media-marco img {
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.media-marco:hover img {
  transform: scale(1.04);
}

/* ============================================================================
   DESPLEGABLES (los "Pilares": se pinchan y se abre un texto debajo)
   ----------------------------------------------------------------------------
   Truco: la fila de la grilla pasa de 0fr a 1fr, y así la altura se anima sola
   sin que haya que saber cuánto mide el texto de adentro.
   ============================================================================ */
.desplegable {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.desplegable[data-abierto="true"] {
  grid-template-rows: 1fr;
}
.desplegable > .desplegable-interior {
  overflow: hidden;
  opacity: 0;
  /* visibility oculta el texto de verdad mientras está cerrado: así no lo
     leen los lectores de pantalla ni lo encuentra el buscador del navegador
     (Ctrl+F). Se apaga recién cuando termina de cerrarse. */
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0s linear 0.45s;
}
.desplegable[data-abierto="true"] > .desplegable-interior {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.25s ease 0.15s, visibility 0s linear 0s;
}

/* La flechita de la derecha gira cuando el pilar está abierto */
.giro-flecha {
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
[data-abierto="true"] .giro-flecha {
  transform: rotate(180deg);
}

/* Barra grande de cada pilar */
.barra-pilar {
  transition: background-color 0.35s ease, box-shadow 0.35s ease;
}
.barra-pilar:hover,
.barra-pilar[data-abierto="true"] {
  box-shadow: 0 16px 44px -22px rgba(var(--color-marca-rgb), var(--brillo-marca)),
              inset 0 1px 1px rgba(255, 255, 255, 0.22);
}
.barra-pilar:focus-visible,
.enlace-leer-mas:focus-visible {
  outline: 2px solid rgba(var(--color-marca-rgb), 0.9);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ----------------------------------------------------------------------------
   PALABRA DESTACADA dentro de una frase
   ----------------------------------------------------------------------------
   Se activa escribiendo la palabra entre *asteriscos* en los archivos de
   src/contenido/. Se ve como si estuviera pasada con destacador rojo.
   👉 Para cambiar el grosor de la marca, mueve el 66% de las dos líneas
      (mientras más chico el número, más alta y gruesa queda la marca).
   ---------------------------------------------------------------------------- */
.palabra-destacada {
  font-weight: 600;
  color: #ffffff;
  letter-spacing: 0.03em;
  background-image: linear-gradient(
    to bottom,
    transparent 66%,
    rgba(var(--color-marca-rgb), 0.95) 66%
  );
  background-repeat: no-repeat;
  padding: 0 0.12em 0.06em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Si el sistema pide menos animación, se abre y cierra sin transición */
@media (prefers-reduced-motion: reduce) {
  .desplegable,
  .desplegable > .desplegable-interior,
  .giro-flecha,
  .barra-pilar {
    transition: none;
  }
}

/* Pantalla de carga inicial (se oculta cuando React monta la app) */
#cargando {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-fondo);
  color: var(--color-texto);
  font-family: "Instrument Serif", serif;
  font-style: italic;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  z-index: 100;
  transition: opacity 0.4s ease;
}
#cargando.oculto {
  opacity: 0;
  pointer-events: none;
}

/* Accesibilidad: si el sistema pide menos movimiento, calmamos las animaciones */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hover-elevar, .media-marco img { transition: none; }
}

/* ============================================================================
   VELO DE LOS VIDEOS — para que el texto blanco se lea sobre cualquier video
   ----------------------------------------------------------------------------
   Va entre el video (z-0) y el contenido (z-10). Oscurece más arriba y abajo
   —donde están el menú y los pies de sección— y menos al centro, para que el
   video se siga viendo.  La intensidad se regula con --velo-intensidad.
   ============================================================================ */
.velo-fondo {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, calc(0.74 * var(--velo-intensidad))) 0%,
      rgba(0, 0, 0, calc(0.46 * var(--velo-intensidad))) 26%,
      rgba(0, 0, 0, calc(0.44 * var(--velo-intensidad))) 60%,
      rgba(0, 0, 0, calc(0.80 * var(--velo-intensidad))) 100%
    ),
    radial-gradient(
      68% 52% at 50% 42%,
      rgba(0, 0, 0, calc(0.34 * var(--velo-intensidad))) 0%,
      rgba(0, 0, 0, 0) 100%
    ),
    linear-gradient(
      180deg,
      rgba(var(--color-marca-rgb), calc(0.30 * var(--velo-intensidad))) 0%,
      rgba(var(--color-marca-rgb), calc(0.08 * var(--velo-intensidad))) 38%,
      rgba(var(--color-marca-rgb), 0) 72%
    );
}

/* ============================================================================
   PLACA DE LOS LOGOS — el recuadro blanco donde va cada auspicio
   ----------------------------------------------------------------------------
   Los logos de las marcas vienen de todo tipo: unos claros, otros oscuros,
   algunos con su propio fondo blanco. Sobre el negro del sitio, la mitad no se
   veía. La placa blanca los deja legibles a todos y en sus colores oficiales.

   Si algún día quieres volver al fondo oscuro, cambia el color de abajo por
   rgba(255, 255, 255, 0.05).
   ============================================================================ */
.placa-logo {
  background: #ffffff !important;
}

/* ============================================================================
   RECUADRO DEL LOGO — para logos con fondo propio (como el de la campaña)
   ----------------------------------------------------------------------------
   El logo llena todo el recuadro y el borde de vidrio queda ENCIMA, para que
   la imagen siga perteneciendo al mismo lenguaje visual del resto del sitio.
   ============================================================================ */
.rounded-logo {
  border-radius: 1rem;               /* esquinas del recuadro del logo */
}

.logo-marco {
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.18),
              0 8px 24px -10px rgba(var(--color-marca-rgb), 0.7);
}

/* El borde de vidrio se pinta por encima de la imagen */
.logo-marco::before { z-index: 2; }
.logo-marco img     { position: relative; z-index: 1; }

/* ============================================================================
   ACENTOS DE MARCA — el rojo, aplicado en dosis pequeñas
   ============================================================================ */

/* Resplandor rojo muy tenue detrás de las secciones sin video.
   Sube el 0.14 si quieres que se note más; bájalo a 0 para quitarlo. */
.resplandor-marca {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(65% 50% at 10% 18%, rgba(var(--color-marca-rgb), 0.46) 0%, rgba(0, 0, 0, 0) 70%),
    radial-gradient(55% 50% at 94% 88%, rgba(var(--color-marca-rgb), 0.34) 0%, rgba(0, 0, 0, 0) 70%);
  /* El degradado se desvanece arriba y abajo para que no se note el corte
     entre una sección y la siguiente. */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
}

/* Cuadrado del icono: el icono sigue siendo blanco, pero el vidrio que lo
   contiene lleva un rescoldo rojo por dentro. */
.caja-icono {
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.2),
              inset 0 0 26px rgba(var(--color-marca-rgb), 0.62);
}

/* Puntito rojo (se usa en la etiqueta de estado de los proyectos) */
.punto-marca {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 9999px;
  background: var(--color-marca);
  box-shadow: 0 0 8px rgba(var(--color-marca-rgb), 0.9);
}

/* Línea divisoria con un degradado rojo apenas perceptible */
.linea-marca {
  height: 1px;
  border: 0;
  background: linear-gradient(
    90deg,
    rgba(var(--color-marca-rgb), 0.95) 0%,
    rgba(var(--color-marca-rgb), 0.35) 35%,
    rgba(255, 255, 255, 0.08) 100%
  );
}

/* Borde divisorio teñido de rojo (se usa en el pie de página) */
.borde-marca {
  border-color: rgba(var(--color-marca-rgb), 0.7) !important;
}

/* Texto seleccionado con el mouse */
::selection {
  background: rgba(var(--color-marca-rgb), 0.85);
  color: #ffffff;
}

/* Barra de scroll (solo en navegadores que la permiten personalizar) */
* {
  scrollbar-color: rgba(var(--color-marca-rgb), 0.55) transparent;
  scrollbar-width: thin;
}
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: var(--color-fondo);
}
::-webkit-scrollbar-thumb {
  background: rgba(var(--color-marca-rgb), 0.7);
  border-radius: 9999px;
  border: 3px solid var(--color-fondo);
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--color-marca-rgb), 0.8);
}


/* ============================================================================
   LÍNEA DE TIEMPO (sección Proyectos)
   ----------------------------------------------------------------------------
   En pantalla ancha se dibuja horizontal; en celular, vertical. Las medidas
   de las filas están en src/componentes/secciones/Proyectos.jsx
   ============================================================================ */

/* --- Cada caja de actividad --- */
.caja-actividad {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  height: 34px;
  padding: 0 0.75rem;
  border-radius: 0.5rem;
  border: 0;
  font-family: 'Barlow', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1;
  color: #ffffff;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.25s cubic-bezier(0.22, 1, 0.36, 1),
              filter 0.25s ease;
}
.caja-actividad-texto {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.caja-flecha {
  flex-shrink: 0;
  font-size: 0.95rem;
  line-height: 1;
  opacity: 0.85;
}
.caja-propuesta   { background: var(--color-propuesta); }
.caja-reforma     { background: var(--color-reforma); }
.caja-tradicional { background: var(--color-tradicional); }

.caja-actividad:hover {
  transform: translateY(-2px);
  filter: brightness(1.12);
  z-index: 5;
}
.caja-propuesta:hover {
  box-shadow: 0 10px 26px -10px rgba(var(--color-propuesta-rgb), 0.95);
}
.caja-reforma:hover {
  box-shadow: 0 10px 26px -10px rgba(var(--color-reforma-rgb), 0.95);
}
.caja-tradicional:hover {
  box-shadow: 0 10px 26px -10px rgba(var(--color-tradicional-rgb), 0.95);
}
.caja-actividad:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
  z-index: 6;
}

/* --- Versión horizontal --- */
.lt-guia {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(255, 255, 255, 0.07);
  pointer-events: none;
}
.lt-eje {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(var(--color-marca-rgb), 0.85) 0%,
    rgba(255, 255, 255, 0.45) 60%,
    rgba(255, 255, 255, 0.18) 100%
  );
  pointer-events: none;
}
.lt-mes {
  position: absolute;
  top: 14px;
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: 'Barlow', sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.75);
}

/* --- Versión vertical (celular y tablet) --- */
.lt-vertical {
  position: relative;
  padding-left: 1.75rem;
}
.lt-vertical::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: linear-gradient(
    180deg,
    rgba(var(--color-marca-rgb), 0.85) 0%,
    rgba(255, 255, 255, 0.25) 100%
  );
}
.lt-vertical-mes { position: relative; padding-bottom: 2rem; }
.lt-vertical-mes:last-child { padding-bottom: 0; }
.lt-vertical-marca {
  position: absolute;
  left: -1.75rem;
  top: 6px;
  width: 11px;
  height: 11px;
  border-radius: 9999px;
  background: var(--color-marca);
  box-shadow: 0 0 10px rgba(var(--color-marca-rgb), 0.9);
}
.caja-actividad-vertical {
  height: auto;
  min-height: 34px;
  max-width: 100%;
  padding: 0.5rem 0.85rem;
  justify-content: flex-start;
  text-align: left;
}
.caja-actividad-vertical .caja-actividad-texto { white-space: normal; }
.caja-hasta {
  flex-shrink: 0;
  margin-left: 0.15rem;
  font-size: 0.68rem;
  font-weight: 500;
  opacity: 0.8;
  white-space: nowrap;
}

/* --- Puntitos de la leyenda --- */
.lt-punto {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 3px;
  flex-shrink: 0;
}
.lt-punto-propuesta   { background: var(--color-propuesta); }
.lt-punto-reforma     { background: var(--color-reforma); }
.lt-punto-tradicional { background: var(--color-tradicional); }

/* ============================================================================
   CUADRO DE DETALLE (modal)
   ============================================================================ */
.modal-fondo {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: modal-entra 0.2s ease-out;
}
.modal-caja {
  width: 100%;
  max-width: 640px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  animation: modal-sube 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
/* OJO: el scroll va aquí adentro, NO en .modal-caja.
   El borde de vidrio se dibuja con un ::before pegado a los cuatro lados de
   la caja. Si la caja fuera además la que se desplaza, ese borde quedaría
   dentro de la zona que se mueve y al bajar el texto se iría con él, dejando
   la línea del marco cruzada por encima del contenido (se veía en el celular).
   Separando las dos cosas, el marco se queda quieto y solo se mueve el texto. */
.modal-cuerpo {
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
/* Cuadro más ancho: se usa en los integrantes, donde la foto va a la
   izquierda y el currículum a la derecha. */
.modal-caja-amplio { max-width: 900px; }
.modal-cerrar:hover { border-color: #ffffff !important; }
.modal-cerrar:focus-visible {
  outline: 2px solid rgba(var(--color-marca-rgb), 0.9);
  outline-offset: 3px;
}

@keyframes modal-entra { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-sube {
  from { opacity: 0; transform: translateY(14px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .caja-actividad { transition: none; }
  .modal-fondo, .modal-caja { animation: none; }
}