/*
 * 5° Coloquio de Innovación e Investigación Educativas — tema "Press start · Reset Education"
 * Paleta oficial (sistemaColoquio-01): 201330 3E1841 232147 3B235A E71C84 231330 E32285 1799D6 AFDEF7 9AD7F5
 * Se aplica solo a páginas cuyo <body> tiene la clase .c5 (inicio y registro).
 */
:root {
  --c5-noche: #201330;
  --c5-uva: #3e1841;
  --c5-indigo: #232147;
  --c5-violeta: #3b235a;
  --c5-magenta: #e71c84;
  --c5-rosa: #e32285;
  --c5-azul: #1799d6;
  --c5-hielo: #afdef7;
  --c5-cielo: #9ad7f5;
  --c5-naranja: #f7931e;
  --c5-pixel: "Pixelify Sans", "Courier New", monospace;
  --c5-texto: "Noto Sans", "Montserrat", system-ui, sans-serif;
}

body.c5 {
  background: var(--c5-noche);
  color: #fff;
  font-family: var(--c5-texto);
  overflow-x: hidden;
}

.c5 img { max-width: 100%; height: auto; }

/* style.css pinta todos los <p> y <h5> de gris con !important (.footer-gob a, h5, p);
   dentro del contenido del coloquio se restablece el color claro. */
.c5 main p, .c5 #registro p, .c5 .c5-registro-hero p { color: #f3eefa !important; }
.c5 .c5-hero__lema { color: var(--c5-cielo) !important; }
.c5 .c5-cta p, .c5 .c5-registro-hero p, .c5 .c5-cuenta { color: var(--c5-hielo) !important; }
.c5 .c5-hero__institucion p { color: #fff !important; }

.c5-pixel { font-family: var(--c5-pixel); letter-spacing: .02em; }

/* ---------------------------------------------------------------- botones */
.c5-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: 1rem 1.6rem;
  border-radius: 999px;
  font-family: var(--c5-pixel);
  font-size: 1.05rem; font-weight: 700;
  line-height: 1.4;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  background: linear-gradient(90deg, var(--c5-magenta), #b0217e 55%, var(--c5-azul));
  border: 0;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .15), 0 0 24px rgba(231, 28, 132, .65);
  transition: transform .15s ease, box-shadow .15s ease;
}
.c5-btn:hover, .c5-btn:focus-visible {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .35), 0 0 36px rgba(23, 153, 214, .8);
}
.c5-btn--linea {
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--c5-cielo), 0 0 18px rgba(154, 215, 245, .35);
  color: var(--c5-cielo);
}
.c5-btn--linea:hover, .c5-btn--linea:focus-visible { color: #fff; background: rgba(154, 215, 245, .12); }

.c5-parpadeo { animation: c5-parpadeo 1.2s steps(2, start) infinite; }
@keyframes c5-parpadeo { to { visibility: hidden; } }

/* ------------------------------------------------------- decoraciones */
.c5-deco { position: absolute; pointer-events: none; user-select: none; z-index: 1; }
.c5-flota { animation: c5-flota 6s ease-in-out infinite; }
.c5-flota--lenta { animation-duration: 9s; animation-delay: -3s; }
@keyframes c5-flota {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-14px) rotate(4deg); }
}

/* ---------------------------------------------------------------- HERO */
.c5-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: min(100vh, 980px);
  padding: 2rem 16px 0;
  background: url("../img/coloquio5/degradado.png") center / cover no-repeat, var(--c5-noche);
  text-align: center;
}
.c5-hero::after { /* oscurece la base para que el lema se lea */
  content: "";
  position: absolute;
  inset: 45% 0 0;
  background: linear-gradient(180deg, transparent, rgba(32, 19, 48, .85) 55%, var(--c5-noche));
  z-index: 0;
}
.c5-hero__institucion {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  max-width: 1140px;
  margin: 0 auto;
  text-align: left;
}
.c5-hero__institucion p {
  margin: 0;
  padding-left: .8rem;
  border-left: 2px solid rgba(255, 255, 255, .8);
  font-size: .85rem;
  line-height: 1.3;
  text-transform: uppercase;
}
.c5-hero__institucion small { display: block; font-size: .72rem; opacity: .9; }
.c5-hero__chip {
  font-family: var(--c5-pixel);
  font-size: .85rem;
  color: var(--c5-cielo);
  border: 1px solid rgba(154, 215, 245, .5);
  border-radius: 6px;
  padding: .5rem .7rem;
  white-space: nowrap;
}
.c5-hero__sol {
  position: absolute;
  z-index: 0;
  width: min(900px, 120vw);
  left: 50%;
  top: 4%;
  transform: translateX(-50%);
  opacity: .7;
}
.c5-hero__grid {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  opacity: .55;
}
.c5-hero__destellos {
  position: absolute;
  z-index: 1;
  inset: 10% -10% auto;
  width: 120%;
  opacity: .9;
}
.c5-hero__contenido { position: relative; z-index: 2; max-width: 980px; margin: 0 auto; }
.c5-hero__logo {
  width: min(460px, 86vw);
  margin: .5rem auto 0;
  filter: drop-shadow(0 0 28px rgba(231, 28, 132, .45));
}
.c5-hero__lema {
  margin: 1.2rem auto .4rem;
  max-width: 760px;
  font-size: clamp(1.4rem, 3.6vw, 2.4rem);
  font-weight: 600;
  line-height: 1.25;
  color: var(--c5-cielo);
  text-shadow: 0 0 18px rgba(23, 153, 214, .55);
}
.c5-hero__fechas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .6rem;
  list-style: none;
  padding: 0;
  margin: 1.2rem 0 1.6rem;
}
.c5-hero__fechas li {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem .9rem;
  border-radius: 999px;
  background: rgba(32, 19, 48, .65);
  border: 1px solid rgba(175, 222, 247, .35);
  font-size: .95rem;
}
.c5-hero__fechas i { color: var(--c5-rosa); }
.c5-hero__acciones { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }
.c5-hero__panel {
  position: relative;
  z-index: 2;
  display: block;
  width: min(520px, 80vw);
  margin: 2.4rem auto -1px;
}
.c5-cuenta {
  margin-top: 1.1rem;
  font-family: var(--c5-pixel);
  font-size: 1rem;
  color: var(--c5-hielo);
}
.c5-cuenta b { color: #ffd23f; }

/* ------------------------------------------------------------- secciones */
.c5-seccion {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 5rem 16px;
}
.c5-contenedor { position: relative; z-index: 2; max-width: 1140px; margin: 0 auto; }
.c5-titulo {
  margin: 0 0 2.4rem;
  font-family: var(--c5-pixel);
  font-size: clamp(1.6rem, 4.2vw, 2.5rem); font-weight: 700;
  line-height: 1.5;
  text-align: center;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 0 6px var(--c5-magenta), 0 0 22px var(--c5-magenta);
}
.c5-titulo span { color: var(--c5-cielo); text-shadow: 0 0 6px var(--c5-azul), 0 0 22px var(--c5-azul); }

/* Datos del evento */
.c5-datos { background: url("../img/coloquio5/fondo-estrellas.png") center / cover, var(--c5-indigo); }
.c5-tarjetas {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.2rem;
}
.c5-tarjeta {
  position: relative;
  padding: 1.8rem 1.2rem 1.6rem;
  border-radius: 18px;
  text-align: center;
  background: linear-gradient(160deg, rgba(62, 24, 65, .92), rgba(35, 33, 71, .92));
  border: 2px solid transparent;
  background-clip: padding-box;
  box-shadow: 0 0 0 2px rgba(231, 28, 132, .55), 0 0 26px rgba(23, 153, 214, .25);
  transition: transform .2s ease, box-shadow .2s ease;
}
.c5-tarjeta:hover { transform: translateY(-4px); box-shadow: 0 0 0 2px var(--c5-azul), 0 0 30px rgba(23, 153, 214, .55); }
.c5-tarjeta__icono {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  font-size: 1.6rem;
  color: #fff;
  background: radial-gradient(circle at 30% 30%, var(--c5-rosa), var(--c5-uva));
  box-shadow: 0 0 18px rgba(231, 28, 132, .7);
}
.c5-tarjeta__etiqueta {
  display: block;
  margin-bottom: .6rem;
  font-family: var(--c5-pixel);
  font-size: .95rem;
  color: var(--c5-cielo);
  text-transform: uppercase;
}
.c5-tarjeta__valor { margin: 0; font-size: 1.35rem; font-weight: 700; line-height: 1.3; }
.c5-tarjeta__nota { display: block; margin-top: .3rem; font-size: .9rem; color: var(--c5-hielo); }

/* Propósito */
.c5-proposito { background: linear-gradient(180deg, var(--c5-indigo), var(--c5-noche)); }
.c5-proposito__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 3rem;
  align-items: center;
}
.c5-proposito__arte { position: relative; text-align: center; }
.c5-proposito__arte .c5-triangulo { width: 100%; max-width: 440px; }
.c5-proposito__arte .c5-arcade {
  position: absolute;
  left: 50%;
  top: 44%;
  width: 52%;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 0 22px rgba(231, 28, 132, .55));
}
.c5-proposito__texto .c5-titulo { text-align: left; }
.c5-proposito__texto p {
  font-size: clamp(1.1rem, 2.2vw, 1.4rem);
  line-height: 1.65;
  color: #f3eefa;
}
.c5-proposito__texto strong { color: var(--c5-cielo); }
.c5-press { width: min(260px, 62%); margin-top: 1rem; }

/* Programa */
.c5-programa { background: url("../img/coloquio5/fondo-estrellas-2.png") center / cover, var(--c5-indigo); }
.c5-programa__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 2.5rem;
  align-items: start;
}
.c5-agenda { list-style: none; margin: 0; padding: 0; position: relative; }
.c5-agenda::before { /* riel de neón que une los niveles */
  content: "";
  position: absolute;
  left: 1.05rem;
  top: .5rem;
  bottom: .5rem;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(var(--c5-magenta), var(--c5-azul));
  box-shadow: 0 0 10px rgba(231, 28, 132, .6);
}
.c5-agenda__nivel {
  position: relative;
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: 1rem;
  padding: 0 0 1rem 2.8rem;
}
.c5-agenda__nivel::before { /* "moneda" de cada nivel */
  content: "";
  position: absolute;
  left: .55rem;
  top: .9rem;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: var(--c5-noche);
  border: 3px solid var(--c5-rosa);
  box-shadow: 0 0 10px var(--c5-rosa);
}
.c5-agenda__hora {
  padding-top: .65rem;
  font-family: var(--c5-pixel);
  font-weight: 700;
  font-size: 1.05rem;
  color: #ffd23f;
  white-space: nowrap;
}
.c5-agenda__lvl {
  display: block;
  font-size: .75rem;
  color: var(--c5-cielo);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.c5-agenda__detalle {
  padding: .8rem 1.1rem;
  border-radius: 14px;
  background: rgba(32, 19, 48, .82);
  box-shadow: inset 0 0 0 1px rgba(154, 215, 245, .3);
  transition: box-shadow .2s ease;
}
.c5-agenda__nivel:hover .c5-agenda__detalle { box-shadow: inset 0 0 0 2px var(--c5-rosa), 0 0 18px rgba(231, 28, 132, .35); }
.c5-agenda__detalle h3 { margin: 0 0 .25rem; font-size: 1.15rem; font-weight: 700; color: #fff; }
.c5-agenda__detalle h3 i { color: var(--c5-rosa); margin-right: .25rem; }
.c5 .c5-agenda__desc { margin: 0 0 .25rem; font-size: 1rem; color: #f3eefa !important; }
.c5 .c5-agenda__desc--extra { padding-left: .8rem; border-left: 2px solid var(--c5-azul); font-size: .95rem; }
.c5 .c5-agenda__lugar { margin: .35rem 0 0; font-size: .92rem; color: var(--c5-cielo) !important; }
.c5-cartel { position: sticky; top: 1.5rem; text-align: center; }
.c5-cartel img {
  width: 100%;
  border-radius: 16px;
  box-shadow: 0 0 0 2px rgba(231, 28, 132, .7), 0 0 34px rgba(23, 153, 214, .35);
  transition: transform .2s ease;
}
.c5-cartel a:hover img { transform: scale(1.01); }
.c5-cartel__acciones { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; margin-top: 1.2rem; }

/* Sede */
.c5-sede { background: var(--c5-noche); }
.c5-sede__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 2rem;
  align-items: stretch;
}
.c5-sede__info {
  padding: 2rem;
  border-radius: 18px;
  background: rgba(59, 35, 90, .55);
  box-shadow: inset 0 0 0 2px rgba(154, 215, 245, .3);
}
.c5-sede__info h3 { font-size: 1.5rem; font-weight: 700; color: var(--c5-cielo); }
.c5-sede__info p { line-height: 1.6; color: #f3eefa; }
.c5-mapa {
  width: 100%;
  min-height: 320px;
  height: 100%;
  border: 0;
  border-radius: 18px;
  box-shadow: 0 0 0 2px rgba(231, 28, 132, .6), 0 0 28px rgba(231, 28, 132, .3);
}

/* Llamado a registro */
.c5-cta {
  padding-bottom: 0;
  text-align: center;
  background: url("../img/coloquio5/degradado.png") center / cover no-repeat;
}
.c5-cta__grid { position: absolute; z-index: 0; top: 0; left: 0; width: 100%; opacity: .5; }
.c5-cta h2 {
  font-family: var(--c5-pixel);
  font-size: clamp(1.7rem, 5vw, 2.8rem); font-weight: 700;
  line-height: 1.5;
  text-shadow: 0 0 10px var(--c5-magenta);
}
.c5-cta p { font-size: 1.2rem; color: var(--c5-hielo); margin: 1rem auto 2rem; max-width: 640px; }
.c5-cta__manos { display: block; width: min(560px, 90vw); margin: 2rem auto 0; }

/* ------------------------------------------------------------- registro */
.c5-registro-hero {
  height: auto; /* style.css fija header { height: 94vh } */
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 2rem 16px 2.5rem;
  text-align: center;
  background: url("../img/coloquio5/degradado.png") center / cover no-repeat, var(--c5-noche);
}
.c5-registro-hero .c5-hero__grid { opacity: .4; }
.c5-registro-hero__logo { position: relative; z-index: 2; width: min(520px, 90vw); }
.c5-registro-hero p { position: relative; z-index: 2; margin: .8rem 0 0; font-size: 1.05rem; color: var(--c5-hielo); }

.c5 #registro {
  padding: 0 16px 4rem;
  background: url("../img/coloquio5/fondo-estrellas.png") center top / cover, var(--c5-noche);
}
.c5 .contenido-coloquio { max-width: 1140px; margin: 0 auto; padding: 0; }
.c5 .caja-registro {
  width: 100%;
  margin: -1.5rem auto 2rem;
  padding: 1rem 0 1.5rem;
  border-radius: 20px;
  background: linear-gradient(170deg, rgba(62, 24, 65, .95), rgba(35, 33, 71, .95));
  box-shadow: 0 0 0 2px rgba(231, 28, 132, .7), 0 0 40px rgba(23, 153, 214, .35);
  -webkit-box-shadow: 0 0 0 2px rgba(231, 28, 132, .7), 0 0 40px rgba(23, 153, 214, .35);
  backdrop-filter: none;
}
.c5 #steps-container { min-height: 380px; padding: 0 1.25rem; }
.c5 .step h4, .c5 #success h4, .c5 .titulo {
  font-family: var(--c5-pixel);
  font-size: clamp(1.35rem, 3.4vw, 1.8rem);
  line-height: 1.5;
  color: #fff;
  text-shadow: 0 0 10px var(--c5-magenta);
}
.c5 .step p, .c5 #success p, .c5 .closing-text p { color: #f3eefa; font-size: 1.05rem; }
.c5 .form-control, .c5 .form-select {
  background-color: rgba(32, 19, 48, .85) !important;
  border: 1px solid rgba(154, 215, 245, .45);
  color: #fff;
}
.c5 .form-control:focus, .c5 .form-select:focus {
  background-color: rgba(32, 19, 48, .95) !important;
  border-color: var(--c5-azul);
  box-shadow: 0 0 0 3px rgba(23, 153, 214, .35) !important;
}
.c5 .form-control[readonly] { border-style: dashed; color: var(--c5-hielo); }
.c5 .form-control.is-invalid, .c5 .form-select.is-invalid {
  border-color: #ff5c8a !important;
  box-shadow: 0 0 0 3px rgba(255, 92, 138, .3) !important;
}
.c5 .form-floating > label { color: var(--c5-hielo); font-size: 1rem; }
.c5 .form-select option { background: var(--c5-noche); color: #fff; }
.c5 .question__label {
  border: 1px solid rgba(154, 215, 245, .45);
  background: rgba(32, 19, 48, .6);
  font-size: 1.05rem;
  color: #fff;
}
.c5 .question__label:hover { border-color: var(--c5-rosa); }
.c5 .question__input:checked + .question__label {
  border-color: var(--c5-rosa);
  box-shadow: 0 0 0 2px rgba(231, 28, 132, .5), 0 0 18px rgba(231, 28, 132, .35);
}
.c5 .question__input:checked + .question__label:before { background-color: var(--c5-magenta); }
.c5 .q-box__question { margin-bottom: .7rem; padding: 0; background: transparent; }
.c5 #numeroemple .btn {
  border-color: rgba(154, 215, 245, .45);
  color: var(--c5-cielo);
  font-weight: 600;
}
.c5 #numeroemple .btn:hover { background: var(--c5-azul); color: #fff; }
.c5 #numeroemple small { color: var(--c5-hielo); }
.c5 button#prev-btn, .c5 button#next-btn, .c5 button#submit-btn {
  margin: 1.5rem .3rem 0;
  padding: .9rem 1.4rem;
  border: 0;
  border-radius: 999px;
  font-family: var(--c5-pixel);
  font-size: 1rem; font-weight: 700;
  color: #fff;
  background: linear-gradient(90deg, var(--c5-magenta), var(--c5-azul));
  box-shadow: 0 0 18px rgba(231, 28, 132, .5);
}
.c5 button#prev-btn { background: transparent; box-shadow: inset 0 0 0 2px var(--c5-cielo); color: var(--c5-cielo); }
.c5 button#prev-btn::after, .c5 button#next-btn::after, .c5 button#submit-btn::after { display: none; }
.c5 button:disabled { opacity: .6; cursor: progress; }
.c5 .back-link, .c5 #success a { color: var(--c5-cielo); }
.c5 #registro-alerta { border-radius: 12px; font-size: 1rem; line-height: 1.45; padding: .8rem 1rem; }
.c5 #numeroemple .input-group { flex-wrap: nowrap; }
.c5 #numeroemple .form-floating { flex: 1 1 auto; min-width: 0; }
.c5 #numeroemple .btn { flex: 0 0 auto; font-size: .9rem; padding: .4rem .75rem; margin: 0; }

/* --------------------------------------------------------------- responsive */
@media (max-width: 991.98px) {
  .c5-tarjetas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .c5-proposito__grid, .c5-sede__grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .c5-proposito__arte { max-width: 380px; margin: 0 auto; }
  .c5-proposito__texto .c5-titulo { text-align: center; }
  .c5-proposito__texto { text-align: center; }
}
@media (max-width: 575.98px) {
  .c5-hero { padding-top: 1.2rem; }
  .c5-hero__institucion p { font-size: .7rem; }
  .c5-hero__institucion small { font-size: .62rem; }
  .c5-hero__chip { display: none; }
  .c5-tarjetas { grid-template-columns: minmax(0, 1fr); }
  .c5-seccion { padding: 3.5rem 16px; }
  .c5-btn { width: 100%; }
  .c5-deco--opcional { display: none; }
  .c5 #steps-container { padding: 0 .75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .c5-flota, .c5-parpadeo { animation: none; }
  .c5-btn, .c5-tarjeta { transition: none; }
}

/* La pleca del pie (template/footer.php) usa .row sin .container y se sale 12px en móvil */
.c5 .plecafin-gob > .row { margin-left: 0; margin-right: 0; }
.c5 .c5-cta h2 { text-transform: uppercase; }
/* El pie DFIE queda sobre fondo oscuro: su texto gris (style.css) no se leía */
.c5 .footer { background: var(--c5-noche); }
.c5 .footer p, .c5 .footer h6 { color: #e6dff0 !important; }

/* Programa: tableta y móvil */
@media (max-width: 991.98px) {
  .c5-programa__grid { grid-template-columns: minmax(0, 1fr); }
  .c5-cartel { position: static; max-width: 460px; margin: 0 auto; }
}
@media (max-width: 575.98px) {
  .c5-agenda__nivel { grid-template-columns: minmax(0, 1fr); gap: .35rem; padding-left: 2.4rem; }
  .c5-agenda::before { left: .8rem; }
  .c5-agenda__nivel::before { left: .3rem; top: .35rem; }
  .c5-agenda__hora { padding-top: 0; }
  .c5-agenda__lvl { display: inline; margin-right: .5rem; }
}

/* En Pixelify Sans el "2" se confunde con "8" a tamaños pequeños: los números van en la fuente de texto */
.c5-agenda__hora, .c5-agenda__lvl, .c5-cuenta b {
  font-family: var(--c5-texto);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
.c5-agenda__lvl { font-weight: 600; }