/* ============================================================
   DIDAL, Academia de Estudios — Estilos propios
   Todo lo que no cubre Tailwind vive aquí.
   Un único archivo compartido por todas las páginas.
   ============================================================ */

html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body { -webkit-font-smoothing: antialiased; }

/* ------------------------------------------------------------
   FOTOGRAFÍA EN BLANCO Y NEGRO
   Todas las fotos reales llevan la clase .foto-bn dentro de un
   contenedor .foto-marco. Recuperan el color al pasar el ratón
   (solo en dispositivos con puntero, no en móvil).
   ------------------------------------------------------------ */
.foto-bn {
  filter: grayscale(100%) contrast(1.06);
  transition: filter .6s ease, transform .6s ease;
}
@media (hover: hover) {
  .foto-marco:hover .foto-bn { filter: grayscale(0%) contrast(1); transform: scale(1.03); }
}

/* Marco con fondo de reserva: si la foto aún no está subida,
   se ve un bloque gris con degradado en vez de una imagen rota. */
.foto-marco {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #E5E8EB 0%, #F1F3F5 50%, #CBD1D7 100%);
}
.foto-marco img { display: block; width: 100%; height: 100%; object-fit: cover; }
.foto-marco img.sin-imagen { opacity: 0; }

/* ------------------------------------------------------------
   NAVEGACIÓN
   ------------------------------------------------------------ */
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .5rem .75rem;
  border-radius: .5rem;
  font-size: .875rem;
  font-weight: 500;
  color: #4D555C;
  transition: background-color .2s ease, color .2s ease;
}
.nav-link:hover { background-color: #F1F3F5; color: #135E9B; }
.nav-link[aria-current="page"] { color: #135E9B; background-color: #EFF7FD; }

.nav-link-movil {
  display: block;
  padding: .75rem;
  border-radius: .75rem;
  font-size: 1rem;
  font-weight: 500;
  color: #373E44;
}
.nav-link-movil:hover { background-color: #F8F9FA; }
.nav-link-movil[aria-current="page"] { color: #135E9B; background-color: #EFF7FD; }

/* Desplegable "Programas" en escritorio */
.desplegable-panel {
  visibility: hidden;
  opacity: 0;
  transform: translateY(.35rem);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.desplegable:hover .desplegable-panel,
.desplegable:focus-within .desplegable-panel {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

/* ------------------------------------------------------------
   DETALLES VISUALES
   ------------------------------------------------------------ */

/* Trama de puntos decorativa (acento plano, sin relieve 3D) */
.trama-puntos {
  background-image: radial-gradient(rgba(27, 117, 187, .2) 1.5px, transparent 1.5px);
  background-size: 16px 16px;
}

/* Aparición suave de secciones al hacer scroll */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal.visible { opacity: 1; transform: none; }

/* Carrusel horizontal sin barra de scroll visible */
.scroll-x { scrollbar-width: none; -ms-overflow-style: none; }
.scroll-x::-webkit-scrollbar { display: none; }

/* Preguntas frecuentes (<details>) */
.faq summary { cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .faq-icono { transition: transform .25s ease; }
.faq[open] summary .faq-icono { transform: rotate(180deg); }

/* ------------------------------------------------------------
   ACCESIBILIDAD
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .foto-bn, .reveal, .desplegable-panel, .faq summary .faq-icono { transition: none; }
  .reveal { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------
   PÁGINAS LEGALES
   Estilos del cuerpo de texto de aviso legal, privacidad y cookies.
   ------------------------------------------------------------ */
.texto-legal h2 {
  margin-top: 2.5rem;
  font-family: Outfit, system-ui, sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: #14181B;
}
.texto-legal h2:first-child { margin-top: 0; }
.texto-legal p { margin-top: .9rem; font-size: 1rem; line-height: 1.7; color: #4D555C; }
.texto-legal ul { margin-top: .9rem; padding-left: 1.1rem; list-style: disc; }
.texto-legal li { margin-top: .45rem; line-height: 1.7; color: #4D555C; }
.texto-legal strong { font-weight: 600; color: #373E44; }
.texto-legal a { font-weight: 500; color: #135E9B; text-decoration: underline; text-underline-offset: 2px; }
.texto-legal a:hover { color: #0F4A7B; }
.texto-legal .nota {
  margin-top: 3rem;
  border-top: 1px solid #E5E8EB;
  padding-top: 1.25rem;
  font-size: .875rem;
  color: #9AA3AC;
}