/* ============================================================
   INCATEC — Estilos complementarios
   Aquí va SOLO lo que Tailwind no resuelve con utilidades:
   animaciones, capas de fondo, ajustes de accesibilidad.
   El resto del diseño vive en las clases del HTML.
   ============================================================ */

:root{
  /* ---- Guía de Color INCATEC v1.0 (nombres oficiales) ---- */
  --color-primary:                #293B8B;
  --color-primary-hover:          #223DA5;
  --color-blue-soft:              #438CCB;
  --color-cyan:                   #00CAFD;
  --color-error:                  #E73B42;

  --color-escuela-cosmetologia:   #9383F6;
  --color-escuela-salud:          #0FA50F;
  --color-escuela-administrativa: #0064DA;

  /* ---- Derivados propios del sitio (no están en la guía) ---- */
  --azul:       var(--color-primary);
  --azul-hover: var(--color-primary-hover);
  --azul-osc:   #1E2C68;   /* barra superior y pie */
  --azul-tinte: #EEF1FA;   /* fondos muy claros */
  --rojo:       var(--color-error);
  --gris:       #5C6B87;
}

/* ---------- Base ---------- */
html{ scroll-behavior: smooth; }
body{ -webkit-font-smoothing: antialiased; }

/* Raleway tiene altura-x baja: el texto corrido necesita
   más interlineado del habitual para no cansar. */
.texto-largo{ line-height: 1.75; }

/* ---------- Foco visible (accesibilidad) ---------- */
:focus-visible{
  outline: 3px solid var(--azul);
  outline-offset: 3px;
  border-radius: 4px;
}
.enlace-saltar:focus{
  transform: translateY(0);
}

/* ---------- Cabecera ---------- */
.cabecera{
  transition: box-shadow .25s ease, background-color .25s ease;
}
.cabecera.esta-fija{
  box-shadow: 0 2px 18px -6px rgba(21,32,64,.18);
}

/* Subrayado rojo del ítem activo / hover del menú */
.item-menu{ position: relative; }
.item-menu::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 3px;
  background: var(--color-error);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s cubic-bezier(.2,.7,.3,1);
}
.item-menu:hover::after,
.item-menu[aria-expanded="true"]::after,
.item-menu.esta-activo::after{
  transform: scaleX(1);
}

/* ---------- Paneles desplegables ---------- */
/* Se usa `translate` (propiedad independiente) en lugar de `transform`
   para no interferir con las utilidades de centrado de Tailwind. */
.panel{
  opacity: 0;
  visibility: hidden;
  translate: 0 -8px;
  transition: opacity .2s ease, translate .2s ease, visibility .2s;
}
.panel.esta-abierto{
  opacity: 1;
  visibility: visible;
  translate: 0 0;
}

/* Submenú de segundo nivel (Escuela Administrativa / Escuela de Salud) */
.subpanel{
  opacity: 0;
  visibility: hidden;
  translate: -8px 0;
  transition: opacity .18s ease, translate .18s ease, visibility .18s;
}
.subpanel.esta-abierto{
  opacity: 1;
  visibility: visible;
  translate: 0 0;
}
.chevron-lado{ transition: transform .2s ease; }
[aria-expanded="true"] > .chevron-lado{ transform: translateX(3px); }

/* ---------- Menú móvil ---------- */
.cajon{
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.2,.7,.3,1);
}
.cajon.esta-abierto{ transform: translateX(0); }

.velo{
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s;
}
.velo.esta-abierto{ opacity: 1; visibility: visible; }

/* Acordeón del menú móvil */
.acordeon-cuerpo{
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .28s cubic-bezier(.2,.7,.3,1);
}
.acordeon-cuerpo > div{ overflow: hidden; }
.acordeon-cuerpo.esta-abierto{ grid-template-rows: 1fr; }

.chevron{ transition: transform .25s ease; }
[aria-expanded="true"] > .chevron{ transform: rotate(180deg); }

/* ---------- Banner de páginas internas ---------- */
.hero{
  background-color: var(--azul-osc);
  background-image: linear-gradient(105deg,
      #1E2C68 0%,
      #293B8B 55%,
      #223DA5 100%);
}

/* ---------- Deslizador del banner principal ----------
   Las piezas son de 1920 × 680 px. El aspect-ratio en la imagen
   reserva el alto exacto ANTES de que descargue, así la página no
   pega un salto cuando terminan de cargar. */
.deslizador-pista{
  display: flex;
  transition: transform .6s cubic-bezier(.4, 0, .2, 1);
  will-change: transform;
}
.deslizador-lamina{
  flex: 0 0 100%;
  min-width: 100%;
}
.deslizador-lamina img{
  display: block;
  width: 100%;
  aspect-ratio: 1920 / 680;
  object-fit: cover;
  background: var(--azul-osc);
}

.desl-punto{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.55);
  transition: width .25s ease, background-color .25s ease;
}
.desl-punto[aria-selected="true"]{
  width: 30px;
  background: #fff;
}

/* Escudo institucional como marca de agua del hero */
.escudo-agua{
  background-image: url('../img/maria.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: .07;
}

/* ---------- Logos de convenios ----------
   32 logos de marcas distintas juntos se ven caóticos. En gris
   la pared queda uniforme, y el logo recupera su color al pasar
   el mouse, que es cuando el usuario se fija en uno concreto. */
.logo-convenio{
  filter: grayscale(1);
  opacity: .78;
  transition: filter .25s ease, opacity .25s ease;
}
li:hover > .logo-convenio,
.logo-convenio:hover{
  filter: grayscale(0);
  opacity: 1;
}

/* ---------- Tarjetas de redes sociales ----------
   El color de cada red llega por la variable --red. */
.red-social{
  color: var(--red);
  background: color-mix(in srgb, var(--red) 9%, #fff);
  border: 1px solid color-mix(in srgb, var(--red) 22%, #fff);
  transition: background-color .25s ease, color .25s ease, transform .2s ease;
}
.red-social:hover{
  background: var(--red);
  color: #fff;
}

/* ---------- Canales de atención virtual ----------
   El color de cada área llega por la variable --canal,
   declarada en el atributo style de cada tarjeta.
   OJO: estos 5 colores NO están en la Guía de Color v1.0. */
.canal{ border-top: 4px solid var(--canal); }

.canal-btn{
  background: var(--canal);
  color: #fff;
  border: 2px solid var(--canal);
  transition: background-color .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.canal-btn:hover{
  background: #fff;
  color: var(--canal);
  transform: translateY(-2px);
  box-shadow: 0 8px 18px -6px rgba(21,32,64,.25);
}
.canal-vineta{ color: var(--canal); }

/* ---------- Filtros del catálogo ---------- */
.filtro{
  color: var(--gris, #5C6B87);
  background: transparent;
}
.filtro:hover{ color: var(--color-primary); }
.filtro[aria-selected="true"]{
  background: #fff;
  color: var(--color-primary);
  box-shadow: 0 2px 10px -4px rgba(21,32,64,.25);
}

/* ---------- Botones de Educación Continua ----------
   Barra lateral de programas.php: Cursos Cortos / Diplomados.
   Arrancan cerrados; el abierto se rellena de azul. Van sobre
   fondo blanco, al revés que .filtro, que vive sobre azul-tinte.
   La flecha la gira la regla general de [aria-expanded] .chevron. */
.tab-ec{
  color: var(--color-primary);
  border: 1px solid var(--azul-tinte);
}
.tab-ec:hover{
  border-color: var(--color-primary);
}
.tab-ec[aria-expanded="true"]{
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

/* ---------- Páginas de programa: Plan de estudio ----------
   El recuadro venía en blanco sobre fondo blanco, así que no se
   leía como bloque. Se le pone el tinte azul claro y un borde más
   marcado para que despegue del fondo.
   Se engancha por el aria-labelledby del <section>, que es igual
   en las 12 páginas de programa: así no hay que tocar cada archivo. */
section[aria-labelledby="t-plan"] .rounded-2xl{
  background: var(--azul-tinte);
  border-color: #C6D0E8;
}

/* ---------- Páginas de programa: sellos de certificación ----------
   Se veían pequeños y pegados a la izquierda. Ahora el grupo va
   centrado bajo el texto y las piezas suben de 96px (el h-24 de
   Tailwind) a 144px.
   El selector repite todas las clases del <ul> para ganarle en
   especificidad a la utilidad .h-24 de cada imagen.
   Para ajustar el tamaño, cambia solo el `height`. */
ul.mt-9.flex.flex-wrap.items-center.gap-10{
  justify-content: center;
  gap: 3.5rem;
}
ul.mt-9.flex.flex-wrap.items-center.gap-10 img{
  height: 9rem;
}

/* ---------- Carrusel de programas ---------- */
.carrusel{
  scroll-snap-type: x mandatory;
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* Edge antiguo */
}
.carrusel::-webkit-scrollbar{ display: none; }
.carrusel-item{ scroll-snap-align: start; }

/* La pieza gráfica se muestra completa, con su proporción real.
   Nada de min-height ni object-fit: cualquiera de los dos
   recortaría o estiraría el póster. */
.poster{
  display: block;
  width: 100%;
  height: auto;
  background: var(--azul-tinte);   /* solo mientras carga */
}

/* ---------- Tarjetas del catálogo de programas ----------
   La foto se veía con esquinas cuadradas hasta pasar el mouse: el
   navegador no aplicaba el overflow:hidden del <article> hasta que el
   hover creaba una capa de composición propia (por el translate).
   Se fuerza la capa desde el inicio y, además, la imagen redondea sus
   propias esquinas para no depender del recorte del contenedor. */
.programa article{
  will-change: transform;
}
.programa .poster{
  border-top-left-radius: 1rem;    /* mismo radio que rounded-2xl */
  border-top-right-radius: 1rem;
}

/* ---------- Título que se escribe letra por letra ---------- */
.escribe::after{
  content: "";
  display: inline-block;
  width: 3px;
  height: 0.95em;
  margin-left: 4px;
  vertical-align: text-bottom;
  background: var(--color-error);
  animation: parpadeo 1s steps(2, start) infinite;
}
.escribe.termino::after{ animation: none; opacity: 0; }
@keyframes parpadeo{ 50%{ opacity: 0 } }

/* ---------- Animación de entrada ---------- */
.sube{
  opacity: 0;
  transform: translateY(16px);
  animation: sube .7s cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes sube{ to{ opacity:1; transform:none } }

/* ---------- Respeto por reducción de movimiento ----------
   OJO con la receta habitual de poner `animation-duration:.01ms`
   sobre `*`: no detiene nada, solo acelera el ciclo al infinito.
   Una animación en bucle se vuelve un parpadeo a máxima velocidad
   y una que iba y volvía queda congelada a medio camino.
   Aquí se apagan de verdad las que sobran, y las transiciones de
   interfaz (hover, menús) se mantienen: son respuestas a una
   acción del usuario, no movimiento autónomo. */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }

  /* Animaciones decorativas en bucle: se apagan */
  .escribe::after{ animation: none; opacity: 0; }
  .capa-rayas{ animation: none; }

  /* Animaciones de entrada: se saltan al estado final */
  .sube{ animation: none; opacity: 1; transform: none; }

  /* El deslizador del index deja de avanzar solo */
  .deslizador-pista{ transition: none; }
}