/* ==========================================================================
   PARTE 1: IDENTIDAD INSTITUCIONAL Y CABECERA (ESCUELA ALEMANA)
   ========================================================================== */

:root {
  --black: #111111;
  --gray: #555b63;
  --purple: #a000ff;
  --germany-black: #000000;
  --germany-red: #dd0000;
  --germany-yellow: #ffce00;
}

body {
  font-family: 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
  color: var(--black);
  overflow-x: hidden; /* Previene scroll horizontal indeseado */
}

/* --- BARRA DE NAVEGACIÓN Y LOGO --- */
.site-header {
  border-top: 5px solid #353535;
  border-bottom: 5px solid #e7e7e7;
  z-index: 1020;
}

/* Forzar el tamaño institucional equilibrado para el Logo */
.navbar-brand img {
  width: 140px !important; /* Ajustado para ganar espacio de rejilla en PC pequeñas */
  height: auto !important;
  max-height: 85px !important;
  display: block;
  object-fit: contain;
}

/* Configuración base de los Enlaces del Menú (Quiebre en dos líneas automáticas) */
.navbar-nav .nav-link-custom {
  min-height: 52px;
  max-width: 110px; /* Limita el ancho horizontal para forzar saltos de línea simétricos */
  display: flex !important;
  flex-direction: column !important; /* Texto arriba, línea abajo */
  align-items: center !important;    /* Centrado horizontal perfecto */
  justify-content: center !important;
  color: var(--gray) !important;
  font-size: 11px !important; /* Tamaño compacto optimizado para evitar desbordes */
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none !important;
  text-align: center;
  white-space: normal !important; /* CORREGIDO: Permite romper el texto en dos renglones */
  line-height: 1.3 !important;   /* Interlineado cómodo para doble renglón */
  transition: color .2s ease;
  padding: 0.25rem 0.4rem !important;
}

/* Envoltorio específico del texto interno del menú */
.nav-link-custom .nav-link-text {
  display: block;
  width: 100%;
}

/* Estado Activo y Hover: Solo cambia a morado el texto */
.navbar-nav .nav-link-custom:hover,
.navbar-nav .nav-link-custom:focus,
.navbar-nav .nav-link-custom.active,
.navbar-nav .dropdown:hover > .nav-link-custom,
.navbar-nav .show > .nav-link-custom {
  color: var(--purple) !important; /* El texto pasa a morado */
}

/* Formato inicial de la línea: Centrada y mide 15px de ancho */
.linea-alemana-menu {
  width: 15px;
  height: 3px;
  margin-top: 4px; /* Separación prudente de las letras */
  display: block ;
  
  /* Bandera de Alemania pura */
  background: linear-gradient(
    to right, 
    var(--germany-black) 33.33%, 
    var(--germany-red) 0 66.66%, 
    var(--germany-yellow) 0
  ) !important;
  
  transition: width 0.25s ease-in-out ; /* Suavizado de la expansión */
}

/* ANIMACIÓN: Al pasar el cursor, la línea alemana se estira al 100% de la celda */
.navbar-nav .nav-link-custom:hover .linea-alemana-menu,
.navbar-nav .nav-link-custom.active .linea-alemana-menu,
.navbar-nav .dropdown:hover > .nav-link-custom .linea-alemana-menu {
  width: 100% !important;
}

/* Ocultar la flecha gris residual de Bootstrap */
.navbar-nav .dropdown-toggle::after {
  display: none !important;
}

/* Contenedor extremo derecho del selector de idioma */
.header-lang-wrapper {
  min-width: 100px;
}

/* Anular anchos fijos y comportamientos restrictivos en resoluciones móviles */
@media (max-width: 1199.98px) {
  .navbar-nav .nav-link-custom {
    max-width: 100% !important;
    font-size: 13px !important;
    min-height: auto;
    padding: 0.75rem 1rem !important;
  }
  .linea-alemana-menu {
    margin: 4px auto 0 auto !important;
  }
}
/* ==========================================================================
   PARTE 2: DROPDOWNS, CARRUSELES ANIMADOS Y COMPONENTES FLOTANTES
   ========================================================================== */

/* --- MENÚS DESPLEGABLES INTERNOS (DROPDOWNS) --- */
.custom-dropdown .dropdown-menu {
  border-top: 3px solid var(--germany-red) !important;
  margin-top: 5px !important;
}

.custom-dropdown .dropdown-item {
  font-size: 13px;
  font-weight: 500;
  padding: 10px 20px;
  transition: all .2s ease;
  color: #333333 !important;
}

/* Efecto tricolor flotante al pasar el mouse por las opciones del submenú */
.custom-dropdown .dropdown-item:hover {
  padding-left: 25px;
  background: linear-gradient(to right, #000000 4px, #dd0000 0 8px, #ffce00 0 12px, #f5f5f5 0) !important;
  color: var(--black) !important;
}

/* Habilitar despliegue automático por Hover en Computadoras */
@media (min-width: 1200px) {
  .nav-item.dropdown:hover .dropdown-menu,
  .dropdown.custom-dropdown:hover .dropdown-menu {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
  }
  .custom-dropdown .dropdown-menu {
    margin-top: 0 !important;
  }
}
.dropdown-item .flag {
  margin-right: 10px !important;
  display: inline-block !important;
}

/* --- SELECTOR DE IDIOMAS Y BANDERAS --- */
.language-button {
  color: #777777 !important;
  font-size: 14px;
}
.language-button:hover { color: var(--germany-red) !important; }

.flag {
  display: inline-block !important;
  width: 18px !important;
  height: 12px !important;
  vertical-align: middle;
}
.flag-es { background: linear-gradient(to bottom, #aa151b 25%, #f1bf00 0 75%, #aa151b 0) !important; }
.flag-de { background: linear-gradient(to bottom, #000000 33.33%, #dd0000 0 66.66%, #ffce00 0) !important; }

/* --- CARRUSEL ANIMADO --- */
.carousel-container { background-color: #000; }

.carousel-slide {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s ease-in-out, visibility 0.8s ease-in-out;
}
.carousel-slide.active {
  opacity: 1;
  visibility: visible;
}

.carousel-overlay { background: rgba(0, 0, 0, 0.15); }

.carousel-btn {
  padding: 14px 36px;
  font-size: 18px;
  background-color: #e61c24;
  border-radius: 12px;
  transition: transform 0.2s ease, background-color 0.2s ease;
}
.carousel-btn:hover {
  background-color: #cc141b;
  transform: scale(1.05);
}

.carousel-arrow {
  font-weight: bold;
  z-index: 10;
  opacity: 0.75;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.carousel-arrow:hover {
  opacity: 1;
  transform: translateY(-50%) scale(1.1) !important;
}

/* --- TARJETAS INFORMATIVAS Y CONVENIOS --- */
.info-card {
  border-radius: 12px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.info-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
}

.partner-circle-link {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.partner-circle-link:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.1) !important;
}

.yellow-pills-btn {
  background-color: #ffde00;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.yellow-pills-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* --- BANNER DE ESTADÍSTICAS ONDEANTE DE ALEMANIA --- */
.stats-section {
   position: relative;
  background-color: #000000; /* Fondo de respaldo */
  margin: 40px 0;
  padding: 8rem 0 !important; /* Controla la altura interna de la sección */
  width: 100%;

 
  clip-path: ellipse(100% 100% at 50% 50%);

}

.flag-bg-wave {
  width: 200%;
  background: linear-gradient(to bottom, #000000 33.33%, #dd0000 0 66.66%, #ffce00 0);
  background-size: 50% 100%;
  z-index: 1;
  animation: waveMotion 8s linear infinite;
  opacity: 0.95;
}

@keyframes waveMotion {
  0% { transform: translateX(0) skewX(0deg); }
  50% { transform: translateX(-10%) skewX(2deg); }
  100% { transform: translateX(0) skewX(0deg); }
}

.text-shadow {
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.8);
}


/*
/* ==========================================================================
   PARTE 3: ADMISIONES, PROCESOS POR PASOS Y GALERÍA DE INSTALACIONES
   ========================================================================== */

/* --- PÁGINA ADMISIONES: ETIQUETA ROJA CON CORTE INCLINADO --- */
.carousel-overlay-static h2.banner-tag-text,
h2.banner-tag-text {
  display: inline-block !important;
  background-color: #e30613 !important; /* Rojo institucional */
  color: #ffffff !important;
  font-family: Arial, sans-serif !important;
  font-size: 1.5rem !important;
  font-weight: bold !important;
  padding: 12px 140px 15px 30px !important;
  margin: 0 !important;
  
  /* El clip-path crea el corte inclinado exacto en el borde derecho */
  clip-path: polygon(0 0, 92% 0, 100% 100%, 0% 100%) !important;
  -webkit-clip-path: polygon(0 0, 92% 0, 100% 100%, 0% 100%) !important;
}

/* Botones con formato reforzado para anular enlaces de Bootstrap */
.container a.btn-yellow, a.btn-yellow {
  display: inline-block !important;
  background-color: #ffcc00 !important;
  color: #000000 !important;
  font-size: 1rem !important;
  font-weight: bold !important;
  text-decoration: none !important;
  padding: 12px 30px !important;
  border-radius: 25px !important;
  transition: opacity 0.3s ease !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05) !important;
}

.container a.btn-black, a.btn-black {
  display: inline-block !important;
  background-color: #000000 !important;
  color: #ffffff !important;
  font-size: 1rem !important;
  font-weight: bold !important;
  text-decoration: none !important;
  padding: 12px 30px !important;
  border-radius: 25px !important;
  transition: opacity 0.3s ease !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05) !important;
}

a.btn-yellow:hover, a.btn-black:hover {
  opacity: 0.85 !important;
  color: inherit;
}

/* ESTILOS: CUADRÍCULA DE CARACTERÍSTICAS PARVULARIA */
.feature-card {
  transition: transform 0.2s ease;
}

.feature-icon i {
  font-size: 3.5rem !important; /* Iconos grandes y limpios */
  color: #000000 !important;    /* Color negro monocromático */
  display: inline-block;
}

.feature-card:hover {
  transform: translateY(-3px);
}

/* --- PROCESO DE INSCRIPCIÓN / PASOS REFORZADOS --- */
.step-circle {
  width: 64px !important;
  height: 64px !important;
  border-radius: 50% !important; /* Esfera perfecta */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.step-circle.bg-warning { background-color: #ffd200 !important; } /* Amarillo alemán */
.step-circle.bg-danger  { background-color: #e30613 !important; } /* Rojo alemán */
.step-circle.bg-dark    { background-color: #111111 !important; } /* Negro alemán */

.step-circle i { font-size: 1.6rem !important; }

.step-item { transition: transform 0.2s ease; }
.step-item:hover { transform: translateY(-4px); }

.timeline-wrapper { position: relative; width: 100%; }
.timeline-line { z-index: 1; background-color: #dee2e6 !important; }
.step-item { position: relative; z-index: 2; }

/* --- BOTÓN DE DESCARGA DE FORMULARIO PDF --- */
.btn-descarga-pdf {
  background-color: #ffd200 !important; /* Amarillo oficial de la Escuela Alemana */
  border: none !important;
  font-family: 'Segoe UI', system-ui, Arial, sans-serif;
  font-size: 1rem;
  transition: background-color 0.25s ease, transform 0.2s ease !important;
}
.btn-descarga-pdf:hover {
  background-color: #e5bd00 !important;
  transform: translateY(-2px);
  color: #000000 !important;
}
.btn-descarga-pdf:active { transform: translateY(0); }

/* --- SECCIÓN INTEGRADA: GALERÍA DE INSTALACIONES INTERACTIVA --- */
.carousel-container.gallery-height {
  height: 380px !important;
}

.checkbox-panel {
  cursor: pointer;
  transition: all 0.2s ease;
}
.checkbox-panel .text-label {
  color: var(--black);
  font-size: 0.95rem;
}

.custom-german-check {
  width: 24px;
  height: 24px;
  min-width: 24px;
  border: 1px solid #ced4da;
  border-radius: 0.375rem;
  transition: all 0.25s ease;
}
.custom-german-check i {
  font-size: 0.85rem;
  display: none;
}

/* Detonación del efecto bandera alemana tricolor al seleccionarse el panel */
.checkbox-panel.active {
  border-color: var(--germany-red) !important;
  background-color: #fdfdfd !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.checkbox-panel.active .custom-german-check {
  border-color: transparent !important;
  background: linear-gradient(
    to bottom, 
    var(--germany-black) 33.33%, 
    var(--germany-red) 0 66.66%, 
    var(--germany-yellow) 0
  ) !important;
}
.checkbox-panel.active .custom-german-check i {
  display: block !important;
  text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.8);
}
.checkbox-panel:hover:not(.active) {
  background-color: #f8f9fa !important;
  border-color: #adb5bd !important;
}

/* Control estático indispensable de visibilidad para grupos de imágenes */
.gallery-group {
  display: none !important;
}
.gallery-group.active {
  display: block !important;
}