/* ---------------------------------------------------------------------------
   CETACER — web pública.
   Los tokens siguen la identidad institucional: azul #1e2869 (el mismo del
   logo), azul de acento #2b3fa8 derivado de él y verde de WhatsApp #16a34a.
   El verde #00ff00 de la marca sólo vive dentro del logo: como fondo no llega
   al contraste mínimo con texto blanco. Tipografía Source Sans 3, esquinas de
   4 px y ancho de contenido de 1160 px.
   --------------------------------------------------------------------------- */

:root {
  --azul-profundo: #1e2869;
  --azul: #2b3fa8;
  --azul-oscuro: #1e2869;
  --azul-tinte: #eaedfa;
  --azul-claro: #dde2f6;
  --verde: #16a34a;
  /* El verde del logo. Sólo se usa sobre el azul profundo, nunca como fondo. */
  --verde-marca: #46f08c;
  --verde-oscuro: #12833c;
  --tinta: #101828;
  --texto: #344054;
  --texto-suave: #475467;
  --etiqueta: #667085;
  --volanta: #5b6472;
  --borde: #e7e9ee;
  --borde-fuerte: #cfd4dd;
  --fondo: #ffffff;
  --fondo-seccion: #f4f5f7;
  --pie-texto: #bcc4dd;
  --rojo: #b42318;
  --ancho: 1160px;
  --radio: 4px;
  --radio-card: 6px;
  --fuente: "Source Sans 3", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--fuente);
  background: var(--fondo);
  color: var(--tinta);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 { font-family: var(--fuente); letter-spacing: -0.02em; }
a { color: var(--azul); text-decoration: none; }
a:hover { color: var(--azul-oscuro); text-decoration: underline; }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--azul);
  outline-offset: 2px;
}
input, select, textarea, button { font-family: inherit; }
img, iframe { max-width: 100%; }

.contenedor {
  max-width: var(--ancho);
  margin: 0 auto;
  padding-left: clamp(16px, 4vw, 40px);
  padding-right: clamp(16px, 4vw, 40px);
}

.volanta {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--volanta);
}

.etiqueta {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--etiqueta);
}

/* --- Cintillo y encabezado ------------------------------------------------ */

.cintillo { background: var(--azul-profundo); color: #ffffff; }
.cintillo__interior {
  display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center;
  padding-top: 11px; padding-bottom: 11px;
  font-size: 12.5px; letter-spacing: 0.14em; font-weight: 600;
}
.cintillo a { margin-left: auto; color: #ffffff; letter-spacing: 0.06em; }

.encabezado { border-bottom: 1px solid var(--borde); background: var(--fondo); }
.encabezado__interior {
  display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center;
  padding-top: 18px; padding-bottom: 18px;
}
.marca { margin-right: auto; }
.marca__enlace { display: inline-block; }
.marca__logo { display: block; width: auto; height: 72px; }
@media (max-width: 560px) { .marca__logo { height: 58px; } }
.navegacion {
  display: flex; flex-wrap: wrap; gap: 8px 26px; align-items: center; font-size: 15.5px;
}
.navegacion a { color: var(--texto); }

/* --- Botones -------------------------------------------------------------- */

.boton-wa {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--verde); color: #ffffff; font-weight: 700; font-size: 15.5px;
  padding: 12px 22px; border-radius: var(--radio);
}
.boton-wa:hover { background: var(--verde-oscuro); color: #ffffff; text-decoration: none; }
.boton-wa--chico { font-size: 15px; padding: 11px 18px; }

.boton-azul {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--azul); color: #ffffff; font-weight: 700; font-size: 15.5px;
  padding: 12px 22px; border-radius: var(--radio); border: 0; cursor: pointer;
}
.boton-azul:hover { background: var(--azul-oscuro); color: #ffffff; text-decoration: none; }

.boton-borde {
  display: inline-flex; align-items: center; gap: 8px;
  background: #ffffff; border: 1px solid var(--borde-fuerte); border-radius: var(--radio);
  padding: 11px 18px; font-size: 15px; font-weight: 600; color: var(--texto); cursor: pointer;
}
.boton-borde:hover { background: var(--fondo-seccion); color: var(--texto); text-decoration: none; }

/* --- Portada -------------------------------------------------------------- */

/* La foto ocupa el ancho completo y el texto va encima. El velo azul es lo que
   hace legible al texto: la foto tiene cielo claro y un camión blanco, así que
   sin él el blanco sobre blanco desaparece. */
.portada {
  position: relative;
  display: flex; align-items: center;
  /* Sin un alto mínimo la sección queda muy panorámica y el "cover" agranda
     tanto la foto que del camión sólo se ve un pedazo. */
  min-height: clamp(440px, 52vw, 620px);
  background: var(--azul-profundo);
  overflow: hidden;
}
.portada__fondo { position: absolute; inset: 0; }
.portada__fondo picture { display: contents; }
/* Las fotos se apilan y se cruzan por opacidad: la activa es la que se ve.
   Sin JavaScript sólo hay una con la clase, así que la portada queda fija. */
.portada__foto {
  position: absolute; inset: 0;
  display: block; width: 100%; height: 100%;
  /* El recorte es vertical: 40% deja entrar el techo del camión sin perder
     la ruta de abajo, que es lo que le da sentido al título. */
  object-fit: cover; object-position: center 40%;
  opacity: 0; transition: opacity 1.1s ease-in-out;
}
.portada__foto--activa { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .portada__foto { transition: none; }
}
.portada::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(
    95deg,
    rgba(30, 40, 105, 0.95) 0%,
    rgba(30, 40, 105, 0.88) 38%,
    rgba(30, 40, 105, 0.52) 68%,
    rgba(30, 40, 105, 0.34) 100%
  );
}
/* El ancho y el centrado los pone .contenedor, que va en el mismo elemento. */
.portada__contenido {
  position: relative; z-index: 1; width: 100%;
  padding-top: clamp(52px, 8vw, 104px);
  padding-bottom: clamp(52px, 8vw, 104px);
}
.portada .volanta { color: rgba(255, 255, 255, 0.72); }
.portada h1 {
  font-size: clamp(42px, 7vw, 76px); font-weight: 800; line-height: 1.02;
  margin: 18px 0 0; color: #ffffff; text-wrap: balance; max-width: 20ch;
}
.portada h1 .destacado { color: var(--verde-marca); }
.portada__bajada {
  font-size: 18.5px; line-height: 1.55; color: rgba(255, 255, 255, 0.88);
  max-width: 40ch; margin: 22px 0 0;
}
.portada__lugar {
  display: flex; align-items: center; gap: 9px;
  margin-top: 34px; font-size: 15.5px; font-weight: 600;
  color: rgba(255, 255, 255, 0.78);
}

/* En pantallas angostas el texto ocupa todo el ancho, así que el velo tiene que
   ser parejo y no un degradado lateral. */
@media (max-width: 720px) {
  .portada::after {
    background: linear-gradient(
      180deg,
      rgba(30, 40, 105, 0.93) 0%,
      rgba(30, 40, 105, 0.88) 100%
    );
  }
}

/* --- Secciones ------------------------------------------------------------ */

.seccion-gris { background: var(--fondo-seccion); border-top: 1px solid var(--borde); }
.seccion-interior { padding-top: clamp(36px, 5vw, 64px); padding-bottom: clamp(36px, 5vw, 64px); }
.seccion-blanca { padding-top: clamp(40px, 6vw, 76px); padding-bottom: clamp(40px, 6vw, 76px); }

.seccion-titulo {
  font-size: clamp(28px, 3.8vw, 38px); font-weight: 700; color: var(--azul-profundo); margin: 12px 0 0;
}
.seccion-titulo--chico { font-size: clamp(26px, 3.4vw, 34px); margin: 12px 0 28px; }

/* --- Encabezado de cursos ------------------------------------------------ */

.cursos__bajada {
  font-size: 17.5px; line-height: 1.55; color: var(--texto-suave); max-width: 66ch; margin: 12px 0 0;
}
.cursos__video {
  margin-top: 24px; max-width: 880px; aspect-ratio: 16 / 9;
  border-radius: var(--radio-card); overflow: hidden; background: var(--azul-profundo);
}
.cursos__video iframe { display: block; width: 100%; height: 100%; border: 0; }

/* --- Filtros -------------------------------------------------------------- */

.filtros { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 0; }
/* Al recargar sin JavaScript, #filtros no queda pegado al borde de la ventana. */
#filtros { scroll-margin-top: 20px; }
.categoria[hidden] { display: none; }
.filtro {
  font-size: 15px; font-weight: 600; cursor: pointer;
  padding: 10px 16px; border-radius: 999px; border: 1px solid var(--borde-fuerte);
  background: #ffffff; color: var(--texto);
}
.filtro:hover { text-decoration: none; color: var(--texto); background: #fafbfc; }
.filtro--activo {
  background: var(--azul-profundo); border-color: var(--azul-profundo); color: #ffffff;
}
.filtro--activo:hover { color: #ffffff; background: var(--azul-profundo); }

/* --- Catálogo ------------------------------------------------------------- */

.categoria { padding: clamp(28px, 4vw, 44px) 0 0; }
.categoria__titulo { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
/* El icono lo sube CETACER por categoría; se alinea con el texto del título. */
.categoria__icono {
  /* Los que mandó CETACER son vehículos de perfil, más anchos que altos:
     manda el alto y el ancho sale solo, con un tope para los muy apaisados. */
  height: 36px; width: auto; max-width: 96px; object-fit: contain;
  align-self: center; flex-shrink: 0;
}
.categoria__titulo h3 {
  font-size: clamp(21px, 2.6vw, 25px); font-weight: 700; color: var(--azul-profundo); margin: 0;
}
.chip-conteo {
  font-size: 13.5px; font-weight: 600; letter-spacing: 0.04em; color: var(--azul);
  background: var(--azul-tinte); padding: 3px 10px; border-radius: 999px;
}
.categoria__resumen {
  font-size: 16px; color: var(--texto-suave); max-width: 62ch; margin: 8px 0 20px;
}

.grilla-cursos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
  gap: 18px;
}
.tarjeta-curso {
  display: flex; flex-direction: column; gap: 16px;
  background: #ffffff; border: 1px solid var(--borde); border-radius: var(--radio-card);
  padding: 24px;
}
.tarjeta-curso__nombre {
  font-size: 20px; font-weight: 700; line-height: 1.25; color: var(--azul-profundo);
}
.tarjeta-curso__nombre a { color: inherit; }
.datos-curso {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 14px;
}
.dato-precio { font-size: 19px; font-weight: 700; color: var(--tinta); margin-top: 3px; }
.dato-valor { font-size: 15.5px; color: var(--texto); margin-top: 3px; }
.fechas { display: flex; flex-wrap: wrap; gap: 7px; }
.fecha-chip {
  font-size: 14.5px; font-weight: 600; color: var(--azul-oscuro);
  background: var(--azul-tinte); padding: 5px 12px; border-radius: var(--radio);
}
.fecha-chip--gris { color: var(--texto-suave); background: #eef0f4; }
.fecha-chip--completa { color: #854708; background: #fef4e6; }
.ficha__texto strong { color: var(--tinta); }
.tarjeta-curso__acciones {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  margin-top: auto; padding-top: 4px;
}
.tarjeta-curso__acciones a.enlace { font-weight: 600; font-size: 15px; }

.nota-pie { font-size: 15.5px; color: var(--texto-suave); margin: clamp(28px, 4vw, 44px) 0 0; }

/* --- Institución y contacto ---------------------------------------------- */

.grilla-institucion {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 28px;
}
.grilla-institucion h3 {
  font-size: 19px; font-weight: 700; color: var(--azul-profundo); margin: 0 0 8px;
}
.grilla-institucion p { font-size: 16px; color: var(--texto-suave); margin: 0 0 8px; }
.grilla-institucion a { font-weight: 600; font-size: 15.5px; }

.grilla-contacto {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(24px, 4vw, 48px); align-items: start;
}
.datos-contacto { display: flex; flex-direction: column; gap: 20px; }
.dato-contacto-grande { font-size: 26px; font-weight: 700; color: var(--azul-profundo); margin-top: 4px; }
.dato-contacto { font-size: 17px; color: var(--tinta); margin-top: 3px; }

/* --- Pie ------------------------------------------------------------------ */

.pie { background: var(--azul-profundo); color: var(--pie-texto); }
.pie__interior {
  display: flex; flex-wrap: wrap; gap: 10px 28px; align-items: center;
  padding-top: 22px; padding-bottom: 22px; font-size: 14px;
}
.pie a { color: var(--pie-texto); }
.pie__logo { display: block; width: auto; height: 38px; margin-right: 4px; }
.pie__derecha { margin-left: auto; }

/* --- Ficha de curso ------------------------------------------------------- */

.ficha { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
@media (max-width: 860px) { .ficha { grid-template-columns: 1fr; } }
.ficha h1 {
  font-size: clamp(30px, 4.4vw, 44px); font-weight: 800; line-height: 1.08;
  color: var(--azul-profundo); margin: 14px 0 0;
}
.ficha__bloque { margin-top: 30px; }
.ficha__bloque h2 {
  font-size: 20px; font-weight: 700; color: var(--azul-profundo); margin: 0 0 10px;
}
.ficha__bloque p { font-size: 16.5px; line-height: 1.6; color: var(--texto-suave); }
.ficha__lateral {
  background: var(--fondo-seccion); border: 1px solid var(--borde);
  border-radius: var(--radio-card); padding: 26px; position: sticky; top: 20px;
}
.tabla-fechas { width: 100%; border-collapse: collapse; margin-top: 8px; }
.tabla-fechas th, .tabla-fechas td {
  text-align: left; padding: 11px 10px; border-bottom: 1px solid var(--borde); font-size: 15.5px;
}
.tabla-fechas th {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; color: var(--etiqueta);
  text-transform: uppercase;
}
.ficha__texto a { overflow-wrap: anywhere; }

/* Las fechas van en una caja del azul del pie para que se encuentren rápido. */
.caja-fechas {
  background: var(--azul-profundo); color: #ffffff;
  border-radius: var(--radio-card); padding: clamp(18px, 3vw, 26px);
  overflow-x: auto;
}
.ficha__bloque.caja-fechas h2 { color: var(--verde-marca); }
.ficha__bloque.caja-fechas p { color: #ffffff; }
.caja-fechas .tabla-fechas th { color: var(--pie-texto); }
.caja-fechas .tabla-fechas th,
.caja-fechas .tabla-fechas td { border-bottom-color: rgba(255, 255, 255, 0.16); }
.caja-fechas .tabla-fechas tr:last-child td { border-bottom: 0; }
.caja-fechas .cupo-barra { background: rgba(255, 255, 255, 0.22); }
.caja-fechas .cupo-barra span { background: var(--verde-marca); }
.caja-fechas .cupo-barra--lleno span { background: #fbbf24; }
.caja-fechas__cupo { font-size: 13.5px; color: var(--pie-texto); margin-top: 4px; }

.cupo-barra { height: 6px; background: var(--borde); border-radius: 999px; overflow: hidden; width: 90px; }
.cupo-barra span { display: block; height: 100%; background: var(--azul); }
.cupo-barra--lleno span { background: #d97706; }

.migas { font-size: 14.5px; color: var(--etiqueta); }
.migas a { color: var(--etiqueta); }

/* --- Formulario público --------------------------------------------------- */

.formulario-web {
  background: #ffffff; border: 1px solid var(--borde); border-radius: var(--radio-card);
  padding: clamp(24px, 3vw, 34px); max-width: 640px;
}
.campo-grupo { margin-bottom: 18px; }
.campo-grupo > label {
  display: block; font-size: 14px; font-weight: 700; color: var(--texto); margin-bottom: 6px;
}
.campo-web {
  width: 100%; font-size: 16px; color: var(--tinta); padding: 11px 13px;
  background: #ffffff; border: 1px solid var(--borde-fuerte); border-radius: var(--radio);
}
.campo-grupo .ayuda { font-size: 13.5px; color: var(--etiqueta); margin-top: 5px; }
.campo-grupo .error { font-size: 14px; color: var(--rojo); margin-top: 5px; font-weight: 600; }
.aviso-form {
  background: #fef3f2; border: 1px solid #fda29b; color: #912018;
  border-radius: var(--radio); padding: 14px 16px; font-size: 15px; margin-bottom: 20px;
}
.dos-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 560px) { .dos-columnas { grid-template-columns: 1fr; } }

.panel-exito {
  background: #ecfdf3; border: 1px solid #abefc6; border-radius: var(--radio-card);
  padding: clamp(26px, 4vw, 40px); max-width: 640px;
}
.panel-exito h1 { font-size: 30px; color: #05603a; margin-bottom: 12px; }
.panel-exito p { font-size: 17px; color: #085d3a; line-height: 1.6; margin-bottom: 10px; }

.mensajes { margin: 18px 0 0; }
.mensaje {
  padding: 12px 16px; border-radius: var(--radio); font-size: 15.5px; margin-bottom: 10px;
}
.mensaje--success { background: #ecfdf3; color: #05603a; border: 1px solid #abefc6; }
.mensaje--info { background: var(--azul-tinte); color: var(--azul-oscuro); border: 1px solid #c3cbec; }
.mensaje--error { background: #fef3f2; color: #912018; border: 1px solid #fda29b; }
.mensaje--warning { background: #fffaeb; color: #93370d; border: 1px solid #fedf89; }

.saltar-al-contenido {
  position: absolute; left: -9999px; top: 0; background: #ffffff; color: var(--azul);
  padding: 12px 18px; z-index: 100; font-weight: 700;
}
.saltar-al-contenido:focus { left: 8px; top: 8px; }