/* Tipografía similar a la original */
body {
  font-family: "Roboto", sans-serif;
}

/* Colores extraídos de la web original */
:root {
  --color-primario: #1c705b;
  /* color principal */
  --color-secundario: #1c705b;
  /* titulos/secundarios */
  --color-acento: #ffffff;
  /* botones o remarcos */
  --color-fondo: #f4f7fa;
  --color-texto: #333;
}

/* Fuentes para titulos */
/* Tipografía institucional */
@font-face {
  font-family: "TheMix";
  src: url("../fonts/TheMixSemiBold-Caps.otf") format("opentype");
  font-weight: 700;
  font-style: bold;
}

@font-face {
  font-family: "TheMix";
  src: url("../fonts/TheMixSemiLight-Plain.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
}

.fuente-institucional {
  font-family: "TheMix", sans-serif;
}

/* Aplicación de colores */
.bg-primario {
  background-color: var(--color-primario);
}

.bg-secundario {
  background-color: var(--color-secundario);
}

.bg-acento {
  background-color: var(--color-acento);
}

.bg-fondo {
  background-color: var(--color-fondo);
}

.text-primario {
  color: var(--color-primario);
}

.text-secundario {
  color: var(--color-secundario);
}

.text-acento {
  color: var(--color-acento);
}

.nav-link {
  transition: all 0.3s ease;
  cursor: pointer;
}

.nav-link:hover {
  background-color: var(--color-secundario);
  color: rgb(33, 241, 189);
}

.dropdown:hover .dropdown-menu {
  display: block;
}

.highlight {
  background-color: #f9f9f9;
  padding: 15px;
  border-left: 4px solid #3498db;
  margin: 20px 0;
}

.personajes {
  background-color: #e8f4fc;
  padding: 15px;
  border-radius: 5px;
  margin: 20px 0;
}

.logros {
  background-color: #e8f6ef;
  padding: 15px;
  border-radius: 5px;
  margin: 20px 0;
}
#clinicalink {
    color: #287db3;
    text-decoration:underline;
}

/* Acordeon */

/* Estilos personalizados para la animación de despliegue */
.accordion-content {
    /* Estado inicial: Altura cero y oculto */
    max-height: 0;
    overflow: hidden;
    /* Transición suave para la animación */
    transition: max-height 0.4s ease-out, padding 0.4s ease-out;
}

.accordion-content.active {
    /* Estado activo: Muestra el contenido */
    /* Un valor grande para asegurar que el contenido se vea, incluso si es largo */
    max-height: 150px; 
    padding-top: 1rem; /* Añade espacio arriba del contenido */
}

/* Rotación del ícono de flecha */
.arrow-icon {
    transition: transform 0.3s ease;
}

.arrow-icon.rotated {
    /* Rota 180 grados cuando el contenido está activo */
    transform: rotate(180deg);
}

/* Estilos para tecnicaturas */
/* --- Contenedor de la página --- */
        .page-wrapper {
            display: flex;
        }
        /* --- Barra Lateral (Aside) --- */
        /* Contenedor de las tarjetas (ahora dentro de 'main') */
        .card-container {
            display: flex; /* CAMBIO: Pone los hijos (tarjetas) en fila */
            justify-content: space-between; /* CAMBIO: Separa las dos tarjetas */
            /* NOTA: 'space-between' funciona porque 548px + 548px = 1096px.
               Si las tarjetas fueran más pequeñas, usarías 'gap' y 'justify-content: center'. */
        }

        /* Estilo de cada tarjeta */
        .card {
            width: 495px; /* Ancho fijo como pediste */
            height: 280px; /* Alto aumentado (como pediste) */
            
            background-color: #ffffff;
            border-radius: 10px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            overflow: hidden; 
            transition: transform 0.3s ease;
            margin-right: 2%;
            display: flex;
            flex-direction: column;
        }

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

        /* Estilo de la imagen */
        .card img {
            width: 100%;
            display: block;
            height: 0; 
            flex-grow: 1; 
            min-height: 0; 
        }

        /* La barra de botones */
        .button-bar {
            padding: 15px;
            background-color: #fafafa;
            border-top: 1px solid #eeeeee;
            display: flex;
            justify-content: space-around; 
            gap: 10px;
            flex-shrink: 0; 
        }

        /* Estilo de los botones */
        .button-bar button {
            flex-grow: 1; 
            padding: 10px 12px;
            border: none;
            border-radius: 5px;
            background-color: #007bff;
            color: white;
            font-weight: bold;
            cursor: pointer;
            transition: background-color 0.2s ease;
        }

        .button-bar button:hover {
            background-color: #0056b3;
        }

        .button-bar .btn-plan { background-color: #28a781; }
        .button-bar .btn-plan:hover { background-color: #16644d; }
        .button-bar .btn-corre { background-color: #138496; }
        .button-bar .btn-corre:hover { background-color: #07424b; }

        /* ============================================== */
/* FIX: SOLUCIÓN PARA SUBMENÚ MÓVIL (ACORDEÓN)   */
/* ============================================== */

/* Estilos de MÓVIL (menos de 768px) */
@media (max-width: 767px) {
  
  /* Seleccionamos el submenú */
  .submenu {
    /* * ¡CRÍTICO! Sobrescribe el 'position: absolute' que Tailwind
     * usa para el escritorio. 'relative' hace que fluya
     * en la página (efecto acordeón).
    */
    position: relative !important;
    
    /* * Forzamos el 'display' a 'flex' en columna para apilar los ítems.
     * Esto sobrescribe el 'display: block' por defecto.
    */
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;

    /* Estilos opcionales para que se vea bien anidado */
    background-color: #f3f4f6; /* Esto es 'bg-gray-100' de Tailwind */
    padding-left: 1rem;       /* 'pl-4' */
    padding-top: 0.5rem;      /* 'py-2' */
    padding-bottom: 0.5rem;
    
    /* Quitamos sombras de escritorio */
    box-shadow: none !important; 
  }

  /* * Cuando el script de JS añada la clase 'hidden',
   * esta regla de Tailwind (que tiene !important) ganará
   * y ocultará el menú correctamente.
  */
  .submenu.hidden {
    display: none !important;
  }
}

./* ▼▼▼ ESTA ES LA REGLA CLAVE QUE TE FALTA ▼▼▼ */
.video-container {
  /* Le dice al contenedor de videos que se expanda
     desde la primera línea (1) hasta la última (-1) */
  grid-column: 1 / -1; 
  background-color: red;
  
  /* Y aquí mantenemos el CSS que ya funcionaba para adentro */
  display: flex;
  gap: 20px; 
}

/* Este CSS ya lo tienes y funciona, déjalo como está */
.video-item {
  flex: 1; /* Esto hace que cada video ocupe 50% */
  min-width: 0;
}

.video-item iframe {
  width: 100%;
  height: 250px; /* Ajusta la altura a tu gusto */
  display: block;
  border: none;
}