/* =====================================================================
   ROBOTIC PATAZ 2026 — Estilos generales (responsive, mobile-first)
   Diseño PLANO estilo tecnológico/PCB con la paleta de UGEL PATAZ:
   naranja #E85A2A · ámbar #F4A81D · turquesa #21AC9C · grafito #26252B
   LEDs animados, circuitos SVG propios y bordes poco redondeados.
   ===================================================================== */
:root {
    /* Paleta UGEL Pataz (estructura dominante) */
    --naranja: #E85A2A;
    --naranja-oscuro: #C24218;
    --ambar: #F4A81D;
    --ambar-oscuro: #C98708;
    --teal: #21AC9C;
    --teal-oscuro: #17857A;
    --teal-claro: #E1F4F1;
    --oscuro: #26252B;
    --profundo: #161519;
    --medio: #3B3A42;
    /* Paleta Asociación Pataz (acentos) */
    --morado: #762B8A;
    --morado-oscuro: #571F66;
    --morado-claro: #F3E9F6;
    --magenta: #E63180;
    --magenta-oscuro: #B81B61;
    --magenta-claro: #FCE7F1;
    --verde: #76B82A;
    --verde-oscuro: #5A9417;
    --gris-fondo: #F7F6F3;
    --gris-borde: #E5E2DB;
    --gris-texto: #5B5A63;
    --texto: #232227;
    --blanco: #ffffff;
    --exito: #3C7D1E;
    --exito-fondo: #EAF5DF;
    --rojo: #C62E24;
    --rojo-fondo: #FDECEA;
    --radio: 8px;          /* tarjetas */
    --radio-chico: 5px;    /* botones, campos, etiquetas */
    --fuente-mono: Consolas, "Courier New", monospace;
}

* { box-sizing: border-box; }

/* Circuitos turquesa tenues sobre fondo claro (patrón SVG propio) */
body {
    margin: 0;
    font-family: "Segoe UI", Roboto, Arial, sans-serif;
    background-color: var(--gris-fondo);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cg fill='none' stroke='%2321AC9C' stroke-opacity='0.08' stroke-width='2'%3E%3Cpath d='M15 22h42v40h30'/%3E%3Ccircle cx='15' cy='22' r='3.5'/%3E%3Ccircle cx='91' cy='62' r='3.5'/%3E%3Cpath d='M132 14v34h24'/%3E%3Ccircle cx='132' cy='14' r='3.5'/%3E%3Cpath d='M22 112v34h36'/%3E%3Ccircle cx='22' cy='112' r='3.5'/%3E%3Ccircle cx='62' cy='146' r='3.5'/%3E%3Cpath d='M112 122h28v26'/%3E%3Ccircle cx='112' cy='122' r='3.5'/%3E%3Crect x='74' y='84' width='20' height='20' rx='2.5'/%3E%3Cpath d='M79 84v-6M89 84v-6M79 110v-6M89 110v-6M74 89h-6M74 99h-6M100 89h-6M100 99h-6'/%3E%3C/g%3E%3C/svg%3E");
    color: var(--texto);
    line-height: 1.55;
    -webkit-text-size-adjust: 100%;
}

img, svg { max-width: 100%; }

svg.icono { vertical-align: -0.22em; flex-shrink: 0; }

/* Barra de desplazamiento estilo consola */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--gris-fondo); }
::-webkit-scrollbar-thumb { background: var(--medio); border: 2px solid var(--gris-fondo); }
::-webkit-scrollbar-thumb:hover { background: var(--teal); }

.contenedor {
    width: 100%;
    margin: 0 auto;
    padding: 0 clamp(16px, 2vw, 40px);
}

.principal { padding-top: 26px; padding-bottom: 52px; min-height: 60vh; }

/* Aparición escalonada del contenido */
@keyframes aparecer {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
}

.principal > * { animation: aparecer .45s ease both; }
.principal > *:nth-child(2) { animation-delay: .07s; }
.principal > *:nth-child(3) { animation-delay: .14s; }
.principal > *:nth-child(4) { animation-delay: .21s; }
.principal > *:nth-child(5) { animation-delay: .28s; }
.principal > *:nth-child(6) { animation-delay: .35s; }

/* ------------------------------ LEDs ------------------------------ */
@keyframes led-pulso { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes led-parpadeo { 0%, 49% { opacity: 1; } 50%, 100% { opacity: .2; } }

.led {
    display: inline-block;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* LEDs estáticos: un punto de color con halo suave, sin parpadeos */
.led-verde {
    background: #5BE12C;
    box-shadow: 0 0 8px 2px rgba(91, 225, 44, .75);
}

.led-rojo {
    background: #FF3B2F;
    box-shadow: 0 0 8px 2px rgba(255, 59, 47, .75);
}

.led-ambar {
    background: var(--ambar);
    box-shadow: 0 0 8px 2px rgba(244, 168, 29, .75);
}

/* ---- Franja institucional: colores de UGEL Pataz + Asociación Pataz ---- */
.franja-marca { display: flex; height: 6px; }
.franja-marca span { flex: 1; }
.franja-marca .f1 { background: var(--naranja); }
.franja-marca .f2 { background: var(--ambar); }
.franja-marca .f3 { background: var(--teal); }
.franja-marca .f4 { background: var(--verde); }
.franja-marca .f5 { background: var(--morado); }
.franja-marca .f6 { background: var(--magenta); }

/* ------------------------------ Cabecera ------------------------------ */
.cabecera {
    background-color: var(--oscuro);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='190' height='190'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.07' stroke-width='2'%3E%3Cpath d='M18 26h48v36h36'/%3E%3Ccircle cx='18' cy='26' r='3.5'/%3E%3Ccircle cx='106' cy='62' r='3.5'/%3E%3Cpath d='M150 16v40h26'/%3E%3Ccircle cx='150' cy='16' r='3.5'/%3E%3Cpath d='M26 124v38h42'/%3E%3Ccircle cx='26' cy='124' r='3.5'/%3E%3Ccircle cx='72' cy='162' r='3.5'/%3E%3Cpath d='M124 134h32v30'/%3E%3Ccircle cx='124' cy='134' r='3.5'/%3E%3Crect x='84' y='92' width='22' height='22' rx='2.5'/%3E%3Cpath d='M90 92v-7M100 92v-7M90 121v-7M100 121v-7'/%3E%3C/g%3E%3C/svg%3E");
    color: var(--blanco);
}

.cabecera-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 12px;
    padding-bottom: 12px;
}

.marca {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--blanco);
    text-decoration: none;
    min-width: 0;
}

.marca-icono {
    display: flex;
    background: var(--blanco);
    border-radius: 50%;
    padding: 5px;
    border: 3px solid var(--ambar);
}

.marca-texto { display: flex; flex-direction: column; min-width: 0; }
.marca-texto strong { font-size: 1.1rem; letter-spacing: .8px; }
.marca-texto small { font-size: .72rem; opacity: .85; }

.nav-toggle {
    display: none;
    background: none;
    border: 2px solid rgba(255,255,255,.55);
    color: var(--blanco);
    font-size: 1.3rem;
    border-radius: var(--radio-chico);
    padding: 2px 10px;
    cursor: pointer;
}

.nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.nav a {
    color: var(--blanco);
    text-decoration: none;
    padding: 9px 15px;
    border-radius: var(--radio-chico);
    font-size: .93rem;
    font-weight: 600;
}

.nav a:hover { background: var(--medio); }
.nav a.activo { background: var(--naranja); }
.nav a.nav-salir { background: var(--profundo); }
.nav a.nav-salir:hover { background: var(--naranja-oscuro); }

@media (max-width: 720px) {
    .nav-toggle { display: block; }
    .nav {
        display: none;
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        padding-bottom: 10px;
    }
    .nav.abierto { display: flex; }
    .nav a { text-align: center; }
}

/* ------------------------------- Pie ------------------------------- */
.pie {
    background-color: var(--profundo);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='190' height='190'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='2'%3E%3Cpath d='M18 26h48v36h36'/%3E%3Ccircle cx='18' cy='26' r='3.5'/%3E%3Ccircle cx='106' cy='62' r='3.5'/%3E%3Cpath d='M150 16v40h26'/%3E%3Ccircle cx='150' cy='16' r='3.5'/%3E%3Cpath d='M26 124v38h42'/%3E%3Ccircle cx='26' cy='124' r='3.5'/%3E%3Ccircle cx='72' cy='162' r='3.5'/%3E%3Cpath d='M124 134h32v30'/%3E%3Ccircle cx='124' cy='134' r='3.5'/%3E%3C/g%3E%3C/svg%3E");
    color: rgba(255,255,255,.88);
    text-align: center;
    padding: 30px 0 26px;
    font-size: .85rem;
}

.pie p { margin: 4px 0; }
.pie-lema { font-style: italic; opacity: .75; }

.pie-logos {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.pie-logo-chip {
    background: var(--blanco);
    border-radius: var(--radio-chico);
    padding: 10px 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pie-logo-chip img { display: block; }
.pie-logo-chip .logo-ugel { height: 34px; width: auto; }
.pie-logo-chip .logo-ap { height: 58px; width: auto; }

/* ---------------- Alertas estilo componente electrónico ---------------- */
.alerta {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 16px;
    border-radius: var(--radio-chico);
    margin-bottom: 18px;
    font-size: .95rem;
    border: 2px solid transparent;
    border-left-width: 6px;
}

.alerta-icono { display: flex; flex-shrink: 0; }
.alerta-texto { flex: 1; }

.alerta-codigo {
    font-family: var(--fuente-mono);
    font-weight: 700;
    font-size: .8rem;
    letter-spacing: 1px;
    margin-right: 6px;
}

.alerta-exito {
    background: var(--exito-fondo);
    color: var(--exito);
    border-color: var(--verde);
}

.alerta-error {
    background: var(--rojo-fondo);
    color: var(--rojo);
    border-color: var(--rojo);
}


/* ------------------------------ Tarjetas ----------------------------- */
.tarjeta {
    background: var(--blanco);
    border: 1px solid var(--gris-borde);
    border-radius: var(--radio);
    padding: 24px;
    margin-bottom: 20px;
    box-shadow: 0 10px 26px rgba(38, 20, 50, .05);
}

.tarjeta h1, .tarjeta h2 { margin-top: 0; color: var(--oscuro); }
.tarjeta h1 .icono, .tarjeta h2 .icono { color: var(--teal); }

.titulo-pagina { color: var(--oscuro); margin: 0 0 6px; }
.subtitulo-pagina { color: var(--gris-texto); margin: 0 0 22px; font-size: .95rem; }
.subtitulo-pagina a { color: var(--teal-oscuro); }

/* Etiqueta técnica monoespaciada (PASO 1/3, ORGANIZA, etc.) */
.etiqueta-tec {
    display: inline-block;
    font-family: var(--fuente-mono);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--teal-oscuro);
    background: var(--teal-claro);
    border: 1px solid var(--teal);
    border-radius: var(--radio-chico);
    padding: 3px 10px;
    margin-bottom: 10px;
}

/* ---------------------------- Formularios ---------------------------- */
.grilla {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 14px;
}

.campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.campo-full { grid-column: 1 / -1; }

.campo label { font-size: .85rem; font-weight: 600; color: var(--gris-texto); }
.campo label .req { color: var(--naranja); }

.campo input, .campo select, .campo textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--gris-borde);
    border-radius: var(--radio-chico);
    font-size: .95rem;
    font-family: inherit;
    background: var(--blanco);
    color: var(--texto);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.campo input:focus, .campo select:focus, .campo textarea:focus {
    outline: none;
    border-color: var(--teal);
    box-shadow: 0 0 0 3px rgba(33, 172, 156, .22);
}

.campo input:disabled, .campo select:disabled {
    background: var(--gris-fondo);
    color: #ABA9A2;
}

.campo textarea { resize: vertical; min-height: 84px; }

.ayuda { font-size: .78rem; color: #8E8D95; }

/* ------------------------------ Botones ------------------------------ */
/* Estilo plano con "base" sólida (sombra dura de un solo color) */
.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none;
    border-radius: var(--radio-chico);
    padding: 12px 24px;
    font-size: .95rem;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    font-family: inherit;
    transition: transform .1s ease, box-shadow .1s ease, background .15s ease;
}

.boton:hover { transform: translateY(-1px); }
.boton:active { transform: translateY(3px); box-shadow: none !important; }

.boton-primario {
    background: var(--teal);
    color: var(--blanco);
    box-shadow: 0 6px 16px rgba(33, 172, 156, .35);
}
.boton-primario:hover { background: #29BFAE; }

.boton-acento {
    background: var(--magenta);
    color: var(--blanco);
    box-shadow: 0 6px 16px rgba(230, 49, 128, .35);
}
.boton-acento:hover { background: #C91E6D; }

.boton-secundario {
    background: var(--blanco);
    color: var(--teal-oscuro);
    border: 2px solid var(--teal);
}
.boton-secundario:hover { background: var(--teal-claro); }

.boton-peligro {
    background: var(--rojo);
    color: var(--blanco);
    box-shadow: 0 5px 14px rgba(124, 23, 18, .30);
}
.boton-peligro:hover { background: #A82B21; }

.boton-chico { padding: 8px 14px; font-size: .85rem; box-shadow: none; }

.acciones {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 20px;
}

@media (max-width: 540px) {
    .acciones { flex-direction: column; }
    .acciones .boton { width: 100%; }
}

/* ============================== LANDING ============================== */

/* ------ Hero: morado profundo (Asociación Pataz) + acentos UGEL ------ */
.hero {
    background-color: #341041;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='210' height='210'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.08' stroke-width='2'%3E%3Cpath d='M20 30h54v40h40'/%3E%3Ccircle cx='20' cy='30' r='4'/%3E%3Ccircle cx='118' cy='70' r='4'/%3E%3Cpath d='M166 18v44h30'/%3E%3Ccircle cx='166' cy='18' r='4'/%3E%3Cpath d='M30 138v42h46'/%3E%3Ccircle cx='30' cy='138' r='4'/%3E%3Ccircle cx='80' cy='180' r='4'/%3E%3Cpath d='M138 148h36v34'/%3E%3Ccircle cx='138' cy='148' r='4'/%3E%3Crect x='94' y='102' width='24' height='24' rx='3'/%3E%3Cpath d='M100 102v-8M112 102v-8M100 134v-8M112 134v-8M94 108h-8M94 120h-8M126 108h-8M126 120h-8'/%3E%3C/g%3E%3C/svg%3E");
    border: 3px solid #220A2C;
    border-bottom-width: 8px;
    border-radius: 12px;
    color: var(--blanco);
    padding: 48px 40px;
    margin-bottom: 26px;
    overflow: hidden;
    position: relative;
}

/* Piezas decorativas flotantes del hero */
.hero .deco {
    position: absolute;
    color: rgba(255,255,255,.22);
    pointer-events: none;
    animation: flotar 5s ease-in-out infinite;
}
.hero .deco-1 { top: 26px; right: 40px; animation-delay: .8s; }
.hero .deco-2 { bottom: 30px; left: 46%; animation-delay: 1.6s; }
.hero .deco-3 { top: 46%; right: 44%; animation-delay: 2.4s; color: rgba(244,168,29,.35); }

.hero-inner {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 30px;
    align-items: center;
}

@media (min-width: 1400px) {
    .hero { padding: 60px 70px; }
    .hero-robot svg { width: 360px; height: 360px; }
    .hero-robot::before { width: 390px; height: 390px; }
}

.hero-etiqueta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #220A2C;
    border: 2px solid var(--teal);
    padding: 7px 15px;
    border-radius: var(--radio-chico);
    font-family: var(--fuente-mono);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.hero-etiqueta .icono { color: var(--ambar); }

/* Indicador "en vivo" con LED */
.estado-vivo {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: var(--profundo);
    border: 2px solid var(--verde);
    color: #B8EFA1;
    padding: 7px 15px;
    border-radius: var(--radio-chico);
    font-family: var(--fuente-mono);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.hero h1 {
    font-size: clamp(2.5rem, 6vw, 3.7rem);
    line-height: 1.05;
    margin: 16px 0 12px;
    letter-spacing: 1px;
}

.hero h1 .anio {
    display: inline-block;
    background: var(--ambar);
    color: var(--profundo);
    padding: 0 14px;
    border-radius: var(--radio-chico);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .30);
    transform: rotate(-2deg);
}

.hero-lema {
    color: var(--ambar);
    font-weight: 700;
    font-size: 1.05rem;
    margin: 0 0 12px;
}

.hero-descripcion {
    color: rgba(255,255,255,.9);
    font-size: .97rem;
    max-width: 56ch;
    margin: 0 0 18px;
}

.hero-datos { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }

.hero-dato {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .87rem;
    color: var(--blanco);
    background: #4A1A57;
    border: 2px solid #6B3080;
    padding: 7px 14px;
    border-radius: var(--radio-chico);
}
.hero-dato strong { color: var(--ambar); }
.hero-dato .icono { color: var(--teal); }

.hero-botones { display: flex; gap: 16px; flex-wrap: wrap; }
.hero-botones.centrado { justify-content: center; }

.boton-grande {
    padding: 17px 32px;
    font-size: 1.1rem;
    border-radius: var(--radio-chico);
    font-weight: 800;
}

.boton-magenta {
    background: var(--magenta);
    color: var(--blanco);
    box-shadow: 0 8px 22px rgba(230, 49, 128, .40);
}
.boton-magenta:hover { background: #C91E6D; }

.boton-contorno {
    background: rgba(255, 255, 255, .06);
    color: var(--blanco);
    border: 1.5px solid rgba(255, 255, 255, .55);
    box-shadow: none;
}
.boton-contorno:hover { background: rgba(255, 255, 255, .14); border-color: var(--blanco); }

.boton-morado-claro {
    background: var(--blanco);
    color: var(--morado);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .25);
}
.boton-morado-claro:hover { background: #F3EBF7; }

/* Fotografía real de estudiantes en el hero */
.hero-robot {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.hero-robot .hero-foto {
    width: 100%;
    max-width: 500px;
    height: auto;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, .18);
    box-shadow: 0 24px 56px rgba(0, 0, 0, .45);
}

@keyframes girar {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@keyframes flotar {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}

@media (max-width: 860px) {
    .hero { padding: 34px 22px; }
    .hero-inner { grid-template-columns: 1fr; }
    .hero-robot { order: -1; }
    .hero-robot svg { width: 190px; height: 190px; }
    .hero-robot::before { width: 220px; height: 220px; }
    .hero-botones .boton-grande { flex: 1 1 100%; }
    .hero .deco { display: none; }
}

/* ----------------------- Vida extra del sitio ----------------------- */

/* El robot parpadea y saluda (aplica en cabecera, hero y avatares) */
.ojo-anim {
    transform-box: fill-box;
    transform-origin: center;
    animation: parpadear 4.6s ease-in-out infinite;
}

@keyframes parpadear {
    0%, 91%, 100% { transform: scaleY(1); }
    94%           { transform: scaleY(.1); }
}

.brazo-saluda {
    transform-box: fill-box;
    transform-origin: 100% 100%;
}

/* Cinta de avisos en movimiento continuo */
.cinta-avisos {
    background: var(--magenta);
    border-top: 3px solid var(--magenta-oscuro);
    border-bottom: 3px solid var(--magenta-oscuro);
    overflow: hidden;
    margin-bottom: 26px;
    padding: 9px 0;
}

.cinta-pista {
    display: flex;
    width: max-content;
    animation: correr-cinta 28s linear infinite;
}

.cinta-pista span {
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    padding-right: 10px;
    color: var(--blanco);
    font-family: var(--fuente-mono);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

@keyframes correr-cinta {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* Aparición de secciones al hacer scroll */
.pre-revelado {
    animation: none !important;   /* anula la aparición de carga inicial */
    opacity: 0;
    transform: translateY(34px);
}

.revelado {
    opacity: 1;
    transform: none;
    transition: opacity .65s ease, transform .65s ease;
}

/* Tic del cronómetro al cambiar el segundo */
.contador-cifra.tic { animation: tic-reloj .45s ease; }

@keyframes tic-reloj {
    0%   { transform: scale(1.14); color: var(--ambar); }
    100% { transform: scale(1); }
}

/* Iconos con flotación suave alternada */
@keyframes flotar-suave {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}

.hero { animation: aparecer .45s ease both; }

/* ------------------- Desfile de robots caminando ------------------- */
.desfile-robots {
    position: relative;
    height: 126px;
    overflow: hidden;
    margin-bottom: 26px;
    background: #F1E9D6;   /* mismo tono que el fondo de los GIF */
    border-bottom: 3px dashed var(--gris-borde);
}

.robot-andante img { display: block; width: auto; }

.robot-andante {
    position: absolute;
    bottom: 4px;
    left: 0;
    animation: desfilar linear infinite;
    will-change: transform;
}

.robot-andante.r1 { animation-duration: 34s; }
.robot-andante.r2 { animation-duration: 46s; animation-delay: -18s; }
.robot-andante.r3 { animation-duration: 40s; animation-delay: -31s; }
.robot-andante.r4 { animation-duration: 54s; animation-delay: -44s; }
.robot-andante.r5 { animation-duration: 28s; animation-delay: -9s; bottom: 44px; }

/* El dron vuela con un vaivén más amplio */
.robot-andante.r5 svg { animation: flotar 2.4s ease-in-out infinite; }

@keyframes desfilar {
    from { transform: translateX(-140px); }
    to   { transform: translateX(105vw); }
}

/* Trote: el robot rebota suavemente mientras avanza */
.robot-andante svg { animation: trote .55s ease-in-out infinite alternate; }

@keyframes trote {
    from { transform: translateY(0); }
    to   { transform: translateY(-5px); }
}

.robot-caminante .pata,
.robot-caminante .brazo-robot,
.robot-caminante .brazo-lejos {
    transform-box: fill-box;
    transform-origin: 50% 10%;
}

.robot-caminante .pata-a,
.robot-caminante .brazo-lejos { animation: paso .55s ease-in-out infinite alternate; }
.robot-caminante .pata-b,
.robot-caminante .brazo-robot { animation: paso .55s ease-in-out infinite alternate-reverse; }

@keyframes paso {
    from { transform: rotate(22deg); }
    to   { transform: rotate(-22deg); }
}

/* Banda de orugas en movimiento */
.oruga-banda { animation: banda-oruga .9s linear infinite; }

@keyframes banda-oruga {
    to { stroke-dashoffset: -28; }
}

/* Hélices del dron */
.helice {
    transform-box: fill-box;
    transform-origin: center;
    animation: girar-helice .16s ease-in-out infinite alternate;
}

.helice.h2 { animation-delay: .08s; }

@keyframes girar-helice {
    from { transform: scaleX(1); opacity: .9; }
    to   { transform: scaleX(.25); opacity: .45; }
}

/* ------------------ Escenas ilustradas (SVG propio) ------------------ */
.escena-svg { max-width: 100%; height: auto; }

/* Escenas con imagen generada */
.escena-img {
    display: block;
    max-width: 100%;
    width: auto;
    max-height: 360px;
    margin: 0 auto;
    border-radius: var(--radio-chico);
}

.escena-svg .chispa { animation: led-pulso 1.3s ease-in-out infinite; }
.escena-svg .chispa.c2 { animation-delay: .4s; }
.escena-svg .chispa.c3 { animation-delay: .8s; }

.escena-svg .chispa-ojo { animation: led-pulso 2.2s ease-in-out infinite; }

.rueda {
    transform-box: fill-box;
    transform-origin: center;
    animation: girar 1.1s linear infinite;
}

.escena-svg .linea-vel { animation: velocidad .8s linear infinite; }
.escena-svg .linea-vel.v2 { animation-delay: .25s; }
.escena-svg .linea-vel.v3 { animation-delay: .5s; }

@keyframes velocidad {
    0%   { opacity: 0; transform: translateX(14px); }
    45%  { opacity: 1; }
    100% { opacity: 0; transform: translateX(-14px); }
}

.luz-carro { animation: led-pulso 1s steps(1) infinite; }
.escena-svg .luz-semaforo { animation: led-pulso 1.6s ease-in-out infinite; }

/* Gotas de agua del sistema de riego */
.escena-svg .gota { animation: gotear 1.4s ease-in infinite; }
.escena-svg .gota.g2 { animation-delay: .45s; }
.escena-svg .gota.g3 { animation-delay: .9s; }

@keyframes gotear {
    0%   { opacity: 0; transform: translateY(0); }
    25%  { opacity: 1; }
    100% { opacity: 0; transform: translateY(24px); }
}

.escena-svg .nino-salta { animation: flotar 1.8s ease-in-out infinite; }

/* ---------------- Sección "¿Qué busca el concurso?" ---------------- */
.fila-doble {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 26px;
    align-items: center;
    margin-bottom: 30px;
}

@media (max-width: 860px) {
    .fila-doble { grid-template-columns: 1fr; }
    .fila-doble.invertida .escena-panel { order: -1; }
}

.escena-panel {
    background: var(--blanco);
    border: 1px solid var(--gris-borde);
    border-radius: var(--radio);
    padding: 18px 18px 14px;
    text-align: center;
}

.escena-titulo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    font-family: var(--fuente-mono);
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--gris-texto);
}

.objetivos-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.objetivos-lista li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: var(--blanco);
    border: 1px solid var(--gris-borde);
    border-radius: var(--radio-chico);
    padding: 12px 14px;
    font-size: .92rem;
    color: var(--gris-texto);
    transition: transform .15s ease, border-color .15s ease;
}

.objetivos-lista li:hover { transform: translateX(4px); }

.objetivos-lista li strong { color: var(--oscuro); }

.objetivo-icono {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--radio-chico);
    color: var(--blanco);
}

.objetivos-lista li:nth-child(1) { border-left: 4px solid var(--teal); }
.objetivos-lista li:nth-child(1) .objetivo-icono { background: var(--teal); }
.objetivos-lista li:nth-child(2) { border-left: 4px solid var(--naranja); }
.objetivos-lista li:nth-child(2) .objetivo-icono { background: var(--naranja); }
.objetivos-lista li:nth-child(3) { border-left: 4px solid var(--morado); }
.objetivos-lista li:nth-child(3) .objetivo-icono { background: var(--morado); }
.objetivos-lista li:nth-child(4) { border-left: 4px solid var(--magenta); }
.objetivos-lista li:nth-child(4) .objetivo-icono { background: var(--magenta); }
.objetivos-lista li:nth-child(5) { border-left: 4px solid var(--verde); }
.objetivos-lista li:nth-child(5) .objetivo-icono { background: var(--verde); }

.texto-busca h3 { color: var(--oscuro); margin: 0 0 10px; font-size: 1.25rem; }
.texto-busca p { color: var(--gris-texto); font-size: .95rem; margin: 0 0 14px; }

/* ---------------- Banda de logos institucionales ---------------- */
.logos-banda {
    background: var(--blanco);
    border: 1px solid var(--gris-borde);
    border-radius: var(--radio);
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 10px;
    flex-wrap: wrap;
    padding: 20px 24px;
    margin-bottom: 40px;
}

.logo-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 6px 28px;
    min-width: 220px;
}

.logo-item img { display: block; }
.logo-item .logo-ugel { height: 44px; width: auto; }
.logo-item .logo-ap { height: 92px; width: auto; }

.logo-etiqueta {
    font-family: var(--fuente-mono);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--gris-texto);
    background: var(--gris-fondo);
    border: 1px solid var(--gris-borde);
    border-radius: var(--radio-chico);
    padding: 4px 14px;
}

.logo-sep {
    width: 2px;
    background: var(--gris-borde);
    align-self: stretch;
    margin: 6px 0;
}

@media (max-width: 640px) {
    .logo-sep { display: none; }
    .logo-item { min-width: 100%; border-top: 2px solid var(--gris-borde); padding-top: 16px; }
    .logo-item:first-child { border-top: none; padding-top: 6px; }
}

/* --------------------------- Cronómetro --------------------------- */
.contador-seccion {
    text-align: center;
    margin: 0 0 42px;
}

.contador-titulo {
    color: var(--oscuro);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 1.4rem;
    margin: 0 0 20px;
}
.contador-titulo .icono { color: var(--naranja); }

.contador {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 12px;
    flex-wrap: wrap;
}

.contador-item {
    background: var(--oscuro);
    border-radius: var(--radio);
    padding: 20px 12px 14px;
    min-width: 128px;
    box-shadow: 0 14px 30px rgba(34, 10, 44, .35);
    border-bottom: 4px solid var(--magenta);
}

.contador-cifra {
    display: block;
    font-family: var(--fuente-mono);
    font-size: clamp(2.6rem, 7vw, 3.6rem);
    font-weight: 700;
    line-height: 1;
    color: var(--blanco);
    font-variant-numeric: tabular-nums;
}

.contador-etiqueta {
    display: block;
    margin-top: 8px;
    font-family: var(--fuente-mono);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255,255,255,.75);
}

/* Los dos puntos parpadean como un reloj digital */
.contador-sep {
    align-self: center;
    font-family: var(--fuente-mono);
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--oscuro);
    opacity: .4;
    animation: led-pulso 1s steps(1) infinite;
}

@media (max-width: 560px) {
    .contador { gap: 8px; }
    .contador-item { min-width: 76px; padding: 14px 6px 10px; box-shadow: 0 10px 22px rgba(34, 10, 44, .30); }
    .contador-sep { display: none; }
}

.contador-nota {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
    justify-content: center;
    color: var(--gris-texto);
    font-size: 1.05rem;
    margin-top: 18px;
}
.contador-nota strong { color: var(--naranja); }

/* ----------------------- Secciones del landing ----------------------- */
.landing-seccion { margin-bottom: 44px; }

.seccion-titulo {
    text-align: center;
    color: var(--oscuro);
    font-size: 1.75rem;
    margin: 0 0 26px;
}

.seccion-subrayado {
    display: flex;
    width: 120px;
    height: 6px;
    border-radius: 3px;
    overflow: hidden;
    margin: 12px auto 0;
}
.seccion-subrayado span { flex: 1; }
.seccion-subrayado .s1 { background: var(--naranja); }
.seccion-subrayado .s2 { background: var(--ambar); }
.seccion-subrayado .s3 { background: var(--teal); }
.seccion-subrayado .s4 { background: var(--verde); }
.seccion-subrayado .s5 { background: var(--morado); }
.seccion-subrayado .s6 { background: var(--magenta); }

.cards-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 16px;
}

.card-info {
    background: var(--blanco);
    border: 1px solid var(--gris-borde);
    border-radius: var(--radio);
    padding: 24px;
    box-shadow: 0 10px 26px rgba(38, 20, 50, .05);
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.card-info:hover {
    transform: translateY(-4px);
    border-color: var(--teal);
    box-shadow: 0 16px 34px rgba(38, 20, 50, .10);
}

.card-info h3 { margin: 14px 0 8px; color: var(--oscuro); }
.card-info p { margin: 0; font-size: .92rem; color: var(--gris-texto); }

/* Lista de premios con viñetas tipo pad de circuito */
.lista-premios {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
    font-size: .92rem;
    color: var(--gris-texto);
    text-align: left;
}

.lista-premios li { position: relative; padding-left: 22px; }

.lista-premios li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .38em;
    width: 9px;
    height: 9px;
    border-radius: 2px;
    background: var(--ambar);
}

.lista-premios li:nth-child(odd)::before { background: var(--naranja); }

.card-info-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: var(--radio-chico);
    color: var(--blanco);
}

.icono-morado  { background: var(--morado); }
.icono-magenta { background: var(--magenta); }
.icono-verde   { background: var(--verde); }
.icono-naranja { background: var(--naranja); }

/* --------------------------- Categorías --------------------------- */
.categorias-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
}

.categoria-card {
    background: var(--blanco);
    border: 1px solid var(--gris-borde);
    border-top: 4px solid;
    border-radius: var(--radio);
    padding: 26px 24px;
    box-shadow: 0 10px 26px rgba(38, 20, 50, .05);
    transition: transform .15s ease, box-shadow .15s ease;
}

.categoria-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 34px rgba(38, 20, 50, .10);
}

.categoria-card h3 { margin: 14px 0 4px; color: var(--oscuro); }
.categoria-card p { font-size: .92rem; color: var(--gris-texto); margin: 8px 0 0; }

.categoria-grados {
    font-family: var(--fuente-mono);
    font-weight: 700;
    font-size: .82rem !important;
}

/* Foto de cabecera de cada categoría (a sangre, sobre el relleno de la tarjeta) */
.categoria-foto {
    display: block;
    width: calc(100% + 48px);
    height: 175px;
    object-fit: cover;
    margin: -26px -24px 18px;
    border-radius: calc(var(--radio) - 3px) calc(var(--radio) - 3px) 0 0;
}

.categoria-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    color: var(--blanco);
}

.categoria-verde   { border-top-color: var(--verde); }
.categoria-verde .categoria-icono { background: var(--verde); }
.categoria-verde .categoria-grados { color: var(--verde-oscuro); }

.categoria-morada  { border-top-color: var(--morado); }
.categoria-morada .categoria-icono { background: var(--morado); }
.categoria-morada .categoria-grados { color: var(--morado); }

.categoria-magenta { border-top-color: var(--magenta); }
.categoria-magenta .categoria-icono { background: var(--magenta); }
.categoria-magenta .categoria-grados { color: var(--magenta-oscuro); }

/* --------------------------- Cronograma --------------------------- */
.cronograma {
    max-width: 780px;
    margin: 0 auto;
    background: var(--blanco);
    border: 1px solid var(--gris-borde);
    border-radius: var(--radio);
    padding: 28px 26px 6px;
}

.crono-item {
    display: flex;
    gap: 16px;
    position: relative;
    padding: 0 0 28px 10px;
}

.crono-item::before {
    content: "";
    position: absolute;
    left: 20px;
    top: 26px;
    bottom: 0;
    width: 4px;
    border-radius: 2px;
    background: var(--gris-borde);
}

.crono-item:last-child::before { display: none; }

.crono-punto {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 6px solid;
    background: var(--blanco);
    position: relative;
    z-index: 1;
}

.punto-magenta { border-color: var(--magenta); }
.punto-morado  { border-color: var(--morado); }
.punto-naranja { border-color: var(--naranja); }
.punto-verde   { border-color: var(--verde); }

.crono-item h4 { margin: 0 0 4px; color: var(--oscuro); font-size: 1.04rem; }
.crono-item p { margin: 0; font-size: .92rem; color: var(--gris-texto); }

/* ---------------------------- CTA final ---------------------------- */
.cta-final {
    background-color: var(--morado);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='190' height='190'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.10' stroke-width='2'%3E%3Cpath d='M18 26h48v36h36'/%3E%3Ccircle cx='18' cy='26' r='3.5'/%3E%3Ccircle cx='106' cy='62' r='3.5'/%3E%3Cpath d='M150 16v40h26'/%3E%3Ccircle cx='150' cy='16' r='3.5'/%3E%3Cpath d='M26 124v38h42'/%3E%3Ccircle cx='26' cy='124' r='3.5'/%3E%3Ccircle cx='72' cy='162' r='3.5'/%3E%3Cpath d='M124 134h32v30'/%3E%3Ccircle cx='124' cy='134' r='3.5'/%3E%3C/g%3E%3C/svg%3E");
    border: 1px solid var(--morado-oscuro);
    border-radius: 12px;
    text-align: center;
    color: var(--blanco);
    padding: 44px 24px;
    box-shadow: 0 18px 40px rgba(52, 16, 65, .25);
}

.cta-final h2 { margin: 0 0 8px; font-size: 1.7rem; }
.cta-final p { margin: 0 0 24px; opacity: .95; }

.cta-final .boton-magenta {
    background: var(--magenta);
    color: var(--blanco);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .30);
}
.cta-final .boton-magenta:hover { background: #C91E6D; }

.cta-final .boton-morado-claro {
    background: rgba(255, 255, 255, .08);
    color: var(--blanco);
    border: 1.5px solid rgba(255, 255, 255, .55);
    box-shadow: none;
}
.cta-final .boton-morado-claro:hover { background: rgba(255, 255, 255, .16); }

/* --------------------------- Pasos del formulario --------------------------- */
.pasos {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.paso-indicador {
    flex: 1 1 140px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    background: var(--blanco);
    border: 1px solid var(--gris-borde);
    border-radius: var(--radio-chico);
    font-size: .82rem;
    font-weight: 600;
    color: var(--gris-texto);
    position: relative;
}

.paso-indicador .num {
    width: 27px;
    height: 27px;
    flex-shrink: 0;
    border-radius: var(--radio-chico);
    background: var(--gris-borde);
    color: var(--gris-texto);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--fuente-mono);
    font-weight: 700;
    font-size: .82rem;
}

.paso-indicador.actual {
    border-color: var(--teal);
    color: var(--oscuro);
    box-shadow: 0 6px 14px rgba(33, 172, 156, .25);
}
.paso-indicador.actual .num { background: var(--teal); color: var(--blanco); }
.paso-indicador.hecho .num { background: var(--verde); color: var(--blanco); }
.paso-indicador.hecho { border-color: var(--verde); }

.paso { display: none; }
.paso.visible { display: block; animation: aparecer .35s ease both; }

/* --------------------------- Bloques de equipo --------------------------- */
.bloque-equipo {
    border: 1px solid var(--gris-borde);
    border-left: 6px solid var(--naranja);
    border-radius: var(--radio);
    padding: 18px;
    margin-bottom: 18px;
    background: #FDFCFA;
}

.bloque-equipo-cabecera {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.bloque-equipo-cabecera h3 { margin: 0; color: var(--oscuro); font-size: 1.02rem; }

.subseccion {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 2px dashed var(--gris-borde);
}

.subseccion h4 {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 10px;
    font-size: .92rem;
    color: var(--teal-oscuro);
}

.fila-estudiante, .fila-componente {
    display: grid;
    gap: 10px;
    margin-bottom: 10px;
    align-items: end;
}

.fila-estudiante { grid-template-columns: 30px 1.2fr 1.2fr .8fr .6fr .5fr; }
/* Con talla de camiseta (solo I.E. del distrito de Pataz) */
.fila-estudiante.con-talla { grid-template-columns: 30px 1.1fr 1.1fr .75fr .5fr .45fr .85fr; }
.fila-componente { grid-template-columns: 1.4fr .5fr 1.4fr auto; }

.fila-num {
    font-family: var(--fuente-mono);
    font-weight: 700;
    color: var(--naranja);
    padding-bottom: 10px;
    text-align: center;
}

@media (max-width: 860px) {
    .fila-estudiante, .fila-estudiante.con-talla,
    .fila-componente { grid-template-columns: 1fr 1fr; }
    .fila-num { display: none; }
}

@media (max-width: 540px) {
    .fila-estudiante, .fila-estudiante.con-talla,
    .fila-componente { grid-template-columns: 1fr; }
}

.fila-deshabilitada { opacity: .45; }

/* ------------------------------- Tablas ------------------------------ */
.tabla-envoltura {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--gris-borde);
    border-radius: var(--radio-chico);
}

.tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
    min-width: 480px;
}

.tabla th {
    background: var(--teal-claro);
    color: var(--teal-oscuro);
    text-align: left;
    padding: 10px 12px;
    border-bottom: 3px solid var(--teal);
    white-space: nowrap;
    font-family: var(--fuente-mono);
    font-size: .78rem;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.tabla td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--gris-borde);
    vertical-align: top;
}

.tabla tbody tr { transition: background .12s ease; }
.tabla tbody tr:hover { background: var(--teal-claro); }

.tabla tr:last-child td { border-bottom: none; }

/* ------------------------------ Insignias ----------------------------- */
.insignia {
    display: inline-block;
    padding: 4px 12px;
    border-radius: var(--radio-chico);
    font-family: var(--fuente-mono);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .5px;
    white-space: nowrap;
}

.insignia-robostart { background: var(--verde); color: var(--blanco); }
.insignia-tech { background: var(--morado); color: var(--blanco); }
.insignia-desafio { background: var(--magenta); color: var(--blanco); }
.insignia-neutra { background: var(--gris-fondo); color: var(--gris-texto); }

/* --------------------------- Tarjetas resumen -------------------------- */
.resumen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
    margin-bottom: 22px;
}

.resumen-item {
    background: var(--blanco);
    border: 1px solid var(--gris-borde);
    border-bottom: 5px solid var(--teal);
    border-radius: var(--radio);
    padding: 16px;
    text-align: center;
    transition: transform .15s ease;
}

.resumen-item:hover { transform: translateY(-3px); }

.resumen-item:nth-child(2) { border-bottom-color: var(--naranja); }
.resumen-item:nth-child(3) { border-bottom-color: var(--ambar); }
.resumen-item:nth-child(4) { border-bottom-color: var(--morado); }
.resumen-item:nth-child(5) { border-bottom-color: var(--magenta); }

.resumen-icono { color: var(--teal); display: block; margin-bottom: 4px; }
.resumen-item:nth-child(2) .resumen-icono { color: var(--naranja); }
.resumen-item:nth-child(3) .resumen-icono { color: var(--ambar-oscuro); }
.resumen-item:nth-child(4) .resumen-icono { color: var(--morado); }
.resumen-item:nth-child(5) .resumen-icono { color: var(--magenta); }

.resumen-item .cifra {
    font-family: var(--fuente-mono);
    font-size: 2rem;
    font-weight: 700;
    color: var(--oscuro);
    display: block;
    line-height: 1.2;
}

.resumen-item .etiqueta { font-size: .8rem; color: var(--gris-texto); }

/* --------------------------- Equipo en portal -------------------------- */
.equipo-cabecera {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
}

.equipo-cabecera h2 {
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.equipo-acciones { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.proyecto-nombre { font-weight: 700; color: var(--oscuro); }
.proyecto-descripcion { color: var(--gris-texto); font-size: .92rem; margin: 6px 0 0; white-space: pre-line; }

/* Estado vacío con robot */
.vacio-robot {
    text-align: center;
    padding: 14px 0 6px;
}

.vacio-robot svg { animation: flotar 4s ease-in-out infinite; }

.vacio-robot p { color: var(--gris-texto); margin: 10px 0 0; }

/* Contador compacto: cuenta regresiva en la página de Resultados */
.vacio-robot .contador-titulo {
    display: flex;
    justify-content: center;
    margin: 14px 0 16px;
    font-size: 1.25rem;
}

.contador-compacto { margin: 0 auto 6px; }

.contador-compacto .contador-item {
    min-width: 96px;
    padding: 14px 10px 10px;
    box-shadow: 0 10px 22px rgba(34, 10, 44, .30);
    border-bottom-width: 4px;
}

.contador-compacto .contador-cifra { font-size: clamp(1.9rem, 5vw, 2.6rem); }

.contador-compacto .contador-sep { font-size: 1.9rem; }

.vacio-robot .contador + p { max-width: 760px; margin: 14px auto 0; }

/* Formulario de fecha de la gran final (panel del administrador) */
.form-fecha-final {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    flex-wrap: wrap;
}

.form-fecha-final .campo { margin: 0; }

.form-fecha-final input[type="datetime-local"] { min-width: 230px; }

/* ------------------------------ Login ------------------------------ */
.caja-login {
    max-width: 470px;
    margin: 34px auto;
    padding: 0;
    overflow: hidden;
    border-top: 6px solid var(--teal);
    border-bottom: 4px solid var(--ambar);
}

.caja-login .campo { margin-bottom: 16px; }

/* Cabecera oscura estilo consola con circuitos tenues */
.login-cabecera {
    text-align: center;
    background-color: var(--oscuro);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cg fill='none' stroke='%2321AC9C' stroke-opacity='0.22' stroke-width='2'%3E%3Cpath d='M15 22h42v40h30'/%3E%3Ccircle cx='15' cy='22' r='3.5'/%3E%3Ccircle cx='91' cy='62' r='3.5'/%3E%3Cpath d='M132 14v34h24'/%3E%3Ccircle cx='132' cy='14' r='3.5'/%3E%3Cpath d='M22 112v34h36'/%3E%3Ccircle cx='22' cy='112' r='3.5'/%3E%3Ccircle cx='62' cy='146' r='3.5'/%3E%3Cpath d='M112 122h28v26'/%3E%3Ccircle cx='112' cy='122' r='3.5'/%3E%3C/g%3E%3C/svg%3E");
    color: var(--blanco);
    padding: 26px 22px 20px;
    border-bottom: 4px solid var(--teal);
}

.login-cabecera h1 { margin: 2px 0 6px; font-size: 1.65rem; color: var(--blanco); }

.login-kicker {
    display: block;
    font-family: var(--fuente-mono);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--teal);
    margin-bottom: 4px;
}

.login-descripcion {
    color: rgba(255, 255, 255, .78);
    font-size: .96rem;
    margin: 0;
}

.login-robot { text-align: center; margin-bottom: 8px; user-select: none; }
.login-robot svg { animation: flotar 4s ease-in-out infinite; }

.login-cuerpo { padding: 26px clamp(20px, 5vw, 36px) 24px; }

/* Campos con icono al interior */
.campo-icono { position: relative; display: flex; align-items: center; }

.campo-icono > .icono {
    position: absolute;
    left: 13px;
    color: var(--teal-oscuro);
    pointer-events: none;
}

.campo-icono input {
    width: 100%;
    padding: 12px 44px 12px 42px;
    font-size: 1rem;
}

.campo-icono input:focus + .icono { color: var(--teal); }

/* Botón para mostrar u ocultar la contraseña */
.ver-clave {
    position: absolute;
    right: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    color: var(--gris-texto);
    border-radius: var(--radio-chico);
}

.ver-clave:hover, .ver-clave.activa { color: var(--teal-oscuro); }

.boton-login {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-top: 4px;
    padding: 13px 18px;
    font-size: 1.04rem;
}

.login-pie {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
    font-family: var(--fuente-mono);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--gris-texto);
}

.login-enlaces {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 2px dashed var(--gris-borde);
    font-size: .92rem;
    text-align: center;
}
.login-enlaces p { margin: 0; }
.login-enlaces a { color: var(--teal-oscuro); font-weight: 700; }

/* --------------------------- Encabezado sección ------------------------ */
.seccion-cabecera {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 26px 0 14px;
}

.seccion-cabecera h2 { margin: 0; color: var(--oscuro); }

/* --------------------------- Lista de proyectos ------------------------ */
.ie-bloque { margin-bottom: 8px; }

.ie-cabecera {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.ie-cabecera h3 {
    margin: 0;
    color: var(--oscuro);
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.ie-cabecera h3 .icono { color: var(--teal-oscuro); }

.contador-proyectos {
    background: var(--teal);
    color: var(--blanco);
    border-radius: var(--radio-chico);
    padding: 4px 13px;
    font-family: var(--fuente-mono);
    font-size: .76rem;
    font-weight: 700;
    white-space: nowrap;
}

.detalle-meta { font-size: .82rem; color: #8E8D95; font-weight: 400; }

/* ==================== Mejoras de paneles (admin y docente) ==================== */

/* Barra de herramientas con buscador y filtros (panel admin) */
.barra-herramientas {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
    padding: 14px 16px;
}

.campo-busqueda {
    flex: 1 1 260px;
    display: flex;
    align-items: center;
    gap: 9px;
    border: 1px solid var(--gris-borde);
    border-radius: var(--radio-chico);
    padding: 9px 12px;
    background: var(--blanco);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.campo-busqueda:focus-within {
    border-color: var(--teal);
    box-shadow: 0 0 0 3px rgba(33, 172, 156, .22);
}

.campo-busqueda .icono { color: var(--gris-texto); }

.campo-busqueda input {
    border: none;
    outline: none;
    flex: 1;
    font-size: .93rem;
    font-family: inherit;
    background: transparent;
    color: var(--texto);
    min-width: 0;
}

.barra-herramientas select {
    padding: 10px 12px;
    border: 1px solid var(--gris-borde);
    border-radius: var(--radio-chico);
    font-family: inherit;
    font-size: .9rem;
    background: var(--blanco);
    color: var(--texto);
}

.barra-herramientas select:focus {
    outline: none;
    border-color: var(--teal);
    box-shadow: 0 0 0 3px rgba(33, 172, 156, .22);
}

.sin-resultados {
    background: var(--blanco);
    border: 2px dashed var(--gris-borde);
    border-radius: var(--radio);
    text-align: center;
    color: var(--gris-texto);
    padding: 26px 16px;
}

/* Chips de conteo por categoría */
.chips-categorias {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0 0 22px;
}

.chip-contador {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--blanco);
    border: 1px solid var(--gris-borde);
    border-radius: var(--radio-chico);
    padding: 6px 12px;
    font-size: .82rem;
    font-weight: 600;
    color: var(--gris-texto);
}

.chip-contador .cifra-chip {
    font-family: var(--fuente-mono);
    font-weight: 700;
    font-size: .95rem;
    color: var(--oscuro);
}

.chip-contador.chip-verde { border-color: var(--verde); }
.chip-contador.chip-verde .icono { color: var(--verde-oscuro); }
.chip-contador.chip-morado { border-color: var(--morado); }
.chip-contador.chip-morado .icono { color: var(--morado); }
.chip-contador.chip-magenta { border-color: var(--magenta); }
.chip-contador.chip-magenta .icono { color: var(--magenta-oscuro); }

/* Chips de datos pequeños (contactos, conteos) */
.chip-dato {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--gris-fondo);
    border: 1px solid var(--gris-borde);
    border-radius: var(--radio-chico);
    padding: 4px 10px;
    font-size: .8rem;
    color: var(--gris-texto);
    white-space: nowrap;
}

.chip-dato .icono { color: var(--teal-oscuro); }

.fila-chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 8px 0 4px;
}

/* Detalles de equipo desplegables (panel admin) */
details.equipo-detalle { margin-top: 12px; }

details.equipo-detalle > summary {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    cursor: pointer;
    padding: 11px 14px;
    background: var(--gris-fondo);
    border: 1px solid var(--gris-borde);
    border-radius: var(--radio-chico);
    transition: border-color .15s ease, background .15s ease;
}

details.equipo-detalle > summary:hover { border-color: var(--teal); }

details.equipo-detalle[open] > summary {
    border-color: var(--teal);
    background: var(--teal-claro);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

details.equipo-detalle > summary::-webkit-details-marker { display: none; }

.flecha-detalle {
    font-size: .8rem;
    color: var(--teal-oscuro);
    transition: transform .15s ease;
}

details.equipo-detalle[open] .flecha-detalle { transform: rotate(90deg); }

.cuerpo-detalle {
    border: 2px solid var(--teal);
    border-top: none;
    border-bottom-left-radius: var(--radio-chico);
    border-bottom-right-radius: var(--radio-chico);
    padding: 14px 16px 16px;
}

/* Tablas lado a lado en pantallas anchas */
.grid-tablas {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 10px;
}

@media (min-width: 1000px) {
    .grid-tablas { grid-template-columns: 1fr 1fr; }
}

.grid-tablas h4 {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 8px;
    font-size: .92rem;
    color: var(--teal-oscuro);
}

/* Ficha de datos del docente (portal) */
.datos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.dato-item {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 12px;
    border: 1px solid var(--gris-borde);
    border-left: 4px solid var(--teal);
    border-radius: var(--radio-chico);
    background: var(--gris-fondo);
}

.dato-item:nth-child(4n+2) { border-left-color: var(--naranja); }
.dato-item:nth-child(4n+3) { border-left-color: var(--morado); }
.dato-item:nth-child(4n+4) { border-left-color: var(--magenta); }

.dato-item .icono { color: var(--teal-oscuro); margin-top: 2px; }

.dato-item small {
    display: block;
    font-family: var(--fuente-mono);
    font-size: .66rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--gris-texto);
}

.dato-item .valor {
    font-weight: 600;
    font-size: .92rem;
    color: var(--texto);
    word-break: break-word;
}

/* ----------------------- Avatares y perfil ----------------------- */
.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden;
    background: var(--teal-claro);
    border: 3px solid var(--teal);
    flex-shrink: 0;
}

.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

.avatar-grande { width: 86px; height: 86px; }
.avatar-chico { width: 52px; height: 52px; border-width: 2px; }

.perfil-cabecera {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.form-foto {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 16px;
    padding: 12px 14px;
    border: 2px dashed var(--gris-borde);
    border-radius: var(--radio-chico);
    background: var(--gris-fondo);
}

.form-foto .avatar { align-self: center; }

.form-foto input[type="file"] {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--gris-borde);
    border-radius: var(--radio-chico);
    font-size: .85rem;
    font-family: inherit;
    background: var(--blanco);
}

/* ------------------- Participantes en la portada ------------------- */
.participantes-nota {
    text-align: center;
    color: var(--gris-texto);
    font-size: 1rem;
    margin: -8px 0 20px;
}

.participantes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    max-width: 1400px;
    margin: 0 auto;
}

.participante-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--blanco);
    border: 1px solid var(--gris-borde);
    border-top: 4px solid var(--teal);
    border-radius: var(--radio);
    padding: 22px 18px 18px;
    text-align: center;
    box-shadow: 0 10px 26px rgba(38, 20, 50, .05);
    transition: transform .15s ease, box-shadow .15s ease;
}

.participante-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 34px rgba(38, 20, 50, .10);
}

.participante-card:nth-child(4n+2) { border-top-color: var(--naranja); }
.participante-card:nth-child(4n+3) { border-top-color: var(--morado); }
.participante-card:nth-child(4n+4) { border-top-color: var(--magenta); }

.avatar-participante {
    width: 92px;
    height: 92px;
    margin-bottom: 12px;
}

.participante-card:nth-child(4n+2) .avatar-participante { border-color: var(--naranja); background: #FCEAE2; }
.participante-card:nth-child(4n+3) .avatar-participante { border-color: var(--morado); background: var(--morado-claro); }
.participante-card:nth-child(4n+4) .avatar-participante { border-color: var(--magenta); background: var(--magenta-claro); }

.participante-nombre {
    margin: 0 0 2px;
    font-size: 1.02rem;
    color: var(--oscuro);
}

.participante-rol {
    margin: 0 0 8px;
    font-family: var(--fuente-mono);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--gris-texto);
}

.participante-ie {
    margin: 0 0 12px;
    font-size: .88rem;
    font-weight: 600;
    color: var(--texto);
}

.participante-ie .icono { color: var(--teal-oscuro); }

.participante-estado {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;   /* alinea el bloque final aunque el nombre de la I.E. varíe */
    background: var(--exito-fondo);
    border: 1.5px solid var(--verde);
    color: var(--exito);
    border-radius: var(--radio-chico);
    padding: 5px 12px;
    font-size: .78rem;
    font-weight: 700;
}

/* Proyectos por categoría con los que participa la I.E. */
.participante-equipos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-top: 10px;
}

.chip-equipo {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--morado-claro);
    border: 1.5px solid var(--morado);
    color: var(--morado);
    border-radius: var(--radio-chico);
    padding: 3px 10px;
    font-size: .74rem;
    font-weight: 700;
}

/* -------------------- Formatos descargables (portal) -------------------- */
.formatos-grupo { margin-top: 20px; }
.formatos-grupo:first-of-type { margin-top: 4px; }

.formatos-grupo-titulo {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 10px;
    padding: 9px 13px;
    font-size: .92rem;
    font-weight: 800;
    color: var(--oscuro);
    border-radius: var(--radio-chico);
    border-left: 5px solid;
}

.grupo-contador {
    margin-left: auto;
    font-family: var(--fuente-mono);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: 1px;
    background: var(--blanco);
    border: 1px solid var(--gris-borde);
    border-radius: var(--radio-chico);
    padding: 2px 9px;
    color: var(--gris-texto);
}

.grupo-teal { background: var(--teal-claro); border-left-color: var(--teal); }
.grupo-teal .icono { color: var(--teal-oscuro); }

.grupo-naranja { background: #FCEAE2; border-left-color: var(--naranja); }
.grupo-naranja .icono { color: var(--naranja-oscuro); }

.grupo-ambar { background: #FDF3DF; border-left-color: var(--ambar); }
.grupo-ambar .icono { color: var(--ambar-oscuro); }

.formatos-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

@media (min-width: 860px) {
    .formatos-grid { grid-template-columns: 1fr 1fr; }
}

.formato-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--gris-borde);
    border-left: 4px solid var(--teal);
    border-radius: var(--radio-chico);
    background: var(--gris-fondo);
}

.formato-tipo {
    flex-shrink: 0;
    font-family: var(--fuente-mono);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--blanco);
    border-radius: var(--radio-chico);
    padding: 5px 8px;
}

.tipo-word { background: #1D5CA8; }
.tipo-pdf  { background: #C0362C; }

.formato-texto { flex: 1; min-width: 0; }
.formato-texto strong { display: block; font-size: .9rem; color: var(--oscuro); }
.formato-texto small { display: block; font-size: .78rem; color: var(--gris-texto); margin-top: 2px; }

.formato-item .boton { flex-shrink: 0; }

/* Documento entregado por Asociación Pataz (no editable) */
.formato-item.formato-ap { border-left-color: var(--morado); background: var(--morado-claro); }

.sello-ap {
    display: inline-block;
    font-family: var(--fuente-mono);
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--blanco);
    background: var(--morado);
    border-radius: var(--radio-chico);
    padding: 2px 8px;
    margin-bottom: 4px;
}

@media (max-width: 540px) {
    .formato-item { flex-wrap: wrap; }
    .formato-item .boton { width: 100%; }
}

/* Aviso ámbar (cupos disponibles, recordatorios) */
.nota-ambar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    background: #FDF3DF;
    border: 2px solid var(--ambar);
    border-radius: var(--radio-chico);
    color: #7A5A0B;
    font-size: .85rem;
    padding: 8px 12px;
    margin-top: 12px;
}

.nota-ambar .nota-texto { flex: 1; min-width: 180px; }
.nota-ambar .boton { margin-left: auto; }

/* ==================== Rediseño pro: nuevos componentes ==================== */

/* Etiquetas kicker de sección */
.kicker {
    display: block;
    font-family: var(--fuente-mono);
    font-size: .84rem;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--morado);
    margin-bottom: 6px;
}

.kicker.centrado { text-align: center; }
.kicker-claro { color: var(--ambar); }

/* Contador en modo urgente (cierre de inscripciones) */
.contador-urgente .contador-titulo { color: var(--naranja-oscuro); }
.contador-urgente .contador-item { background: #341041; box-shadow: 0 14px 30px rgba(34, 10, 44, .35); }

/* Panel del cronograma: fondo crema con circuitos ámbar tenues */
.panel-cronograma {
    background-color: #FBF4E6;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cg fill='none' stroke='%23F4A81D' stroke-opacity='0.13' stroke-width='2'%3E%3Cpath d='M15 22h42v40h30'/%3E%3Ccircle cx='15' cy='22' r='3.5'/%3E%3Ccircle cx='91' cy='62' r='3.5'/%3E%3Cpath d='M132 14v34h24'/%3E%3Ccircle cx='132' cy='14' r='3.5'/%3E%3Cpath d='M22 112v34h36'/%3E%3Ccircle cx='22' cy='112' r='3.5'/%3E%3Ccircle cx='62' cy='146' r='3.5'/%3E%3Cpath d='M112 122h28v26'/%3E%3Ccircle cx='112' cy='122' r='3.5'/%3E%3Crect x='74' y='84' width='20' height='20' rx='2.5'/%3E%3Cpath d='M79 84v-6M89 84v-6M79 110v-6M89 110v-6M74 89h-6M74 99h-6M100 89h-6M100 99h-6'/%3E%3C/g%3E%3C/svg%3E");
    border: 2px solid #F0E2C4;
    border-top: 5px solid var(--ambar);
    border-radius: var(--radio);
    padding: clamp(16px, 3vw, 34px);
}

/* Cronograma en línea de tiempo (hitos alternados arriba/abajo) */
.linea-tiempo {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    padding: 8px 0;
}

/* La línea central del tiempo */
.linea-tiempo::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 2%;
    right: 2%;
    height: 5px;
    border-radius: 3px;
    transform: translateY(-50%);
    background: var(--gris-borde);
}

/* Flecha al final de la línea */
.linea-tiempo::after {
    content: "";
    position: absolute;
    top: 50%;
    right: .4%;
    transform: translateY(-50%);
    border-left: 14px solid var(--gris-borde);
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
}

.lt-hito {
    position: relative;
    display: grid;
    grid-template-rows: 1fr 58px 1fr;
    min-height: 330px;
    justify-items: center;
}

/* Nodo sobre la línea */
.lt-punto {
    position: relative;
    grid-row: 2;
    align-self: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--blanco);
    border: 5px solid;
    z-index: 1;
    transition: transform .15s ease;
}

.lt-hito:hover .lt-punto { transform: scale(1.12); }

.lt-num {
    font-family: var(--fuente-mono);
    font-size: 1.4rem;
    font-weight: 700;
}

/* Tarjeta del hito con tallo conector hacia el nodo */
.lt-tarjeta {
    position: relative;
    background: var(--blanco);
    border: 1px solid var(--gris-borde);
    border-radius: var(--radio);
    padding: 18px 18px 16px;
    text-align: center;
    max-width: 300px;
    transition: transform .15s ease, border-color .15s ease;
}

.lt-hito:hover .lt-tarjeta { transform: translateY(-3px); }

.lt-arriba .lt-tarjeta { grid-row: 1; align-self: end; margin-bottom: 14px; border-bottom: 4px solid; }
.lt-abajo .lt-tarjeta { grid-row: 3; align-self: start; margin-top: 14px; border-top: 4px solid; }

.lt-tarjeta::before {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 16px;
}

.lt-arriba .lt-tarjeta::before { bottom: -18px; }
.lt-abajo .lt-tarjeta::before { top: -18px; }

.lt-tarjeta h4 { margin: 0 0 5px; color: var(--oscuro); font-size: 1.22rem; }
.lt-tarjeta small { color: var(--gris-texto); font-size: .95rem; }

/* Fecha en el lado opuesto a la tarjeta */
.lt-fecha {
    font-family: var(--fuente-mono);
    font-size: .92rem;
    font-weight: 700;
    letter-spacing: .5px;
    background: var(--blanco);
    border: 1px solid var(--gris-borde);
    border-radius: var(--radio-chico);
    padding: 5px 13px;
    white-space: nowrap;
}

/* En anchos intermedios el chip largo se ajusta para no desbordar la columna */
@media (min-width: 901px) and (max-width: 1150px) {
    .lt-fecha { font-size: .78rem; letter-spacing: 0; padding: 4px 9px; }
}

.lt-arriba .lt-fecha { grid-row: 3; align-self: start; margin-top: 16px; }
.lt-abajo .lt-fecha { grid-row: 1; align-self: end; margin-bottom: 16px; }

/* Colores por hito */
.hito-magenta .lt-punto { border-color: var(--magenta); color: var(--magenta); }
.hito-magenta .lt-tarjeta { border-bottom-color: var(--magenta); border-top-color: var(--magenta); }
.hito-magenta .lt-tarjeta::before { background: var(--magenta); }
.hito-magenta .lt-fecha { color: var(--magenta-oscuro); border-color: var(--magenta); }

.hito-morado .lt-punto { border-color: var(--morado); color: var(--morado); }
.hito-morado .lt-tarjeta { border-bottom-color: var(--morado); border-top-color: var(--morado); }
.hito-morado .lt-tarjeta::before { background: var(--morado); }
.hito-morado .lt-fecha { color: var(--morado); border-color: var(--morado); }

.hito-naranja .lt-punto { border-color: var(--naranja); color: var(--naranja); }
.hito-naranja .lt-tarjeta { border-bottom-color: var(--naranja); border-top-color: var(--naranja); }
.hito-naranja .lt-tarjeta::before { background: var(--naranja); }
.hito-naranja .lt-fecha { color: var(--naranja-oscuro); border-color: var(--naranja); }

.hito-verde .lt-punto { border-color: var(--verde); color: var(--verde-oscuro); }
.hito-verde .lt-tarjeta { border-bottom-color: var(--verde); border-top-color: var(--verde); }
.hito-verde .lt-tarjeta::before { background: var(--verde); }
.hito-verde .lt-fecha { color: var(--verde-oscuro); border-color: var(--verde); }

/* ----------------- Calendario del concurso (al pie) ----------------- */
.cal-concurso {
    margin-top: 30px;
    border-top: 2px dashed #E8D5A8;
    padding-top: 22px;
}

.cal-cabecera {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.cal-cabecera h3 {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--oscuro);
    font-size: 1.25rem;
}
.cal-cabecera h3 .icono { color: var(--ambar-oscuro); }

.cal-leyenda { display: flex; gap: 14px; flex-wrap: wrap; }

.leyenda-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--fuente-mono);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--gris-texto);
}

.leyenda-punto { width: 14px; height: 14px; border-radius: 3px; flex-shrink: 0; }
.punto-magenta { background: var(--magenta); }
.punto-morado  { background: var(--morado); }
.punto-naranja { background: var(--naranja); }
.punto-verde   { background: var(--verde); }
.punto-hoy     { background: var(--blanco); box-shadow: inset 0 0 0 3px var(--oscuro); }

.cal-meses {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(245px, 1fr));
    gap: 16px;
}

.cal-mes {
    background: var(--blanco);
    border: 1px solid var(--gris-borde);
    border-top: 4px solid var(--teal);
    border-radius: var(--radio);
    padding: 12px 12px 14px;
}

.cal-mes h4 {
    margin: 0 0 10px;
    text-align: center;
    font-family: var(--fuente-mono);
    font-size: .98rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--oscuro);
}

.cal-grilla {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    justify-items: center;
}

.cal-dsem {
    font-family: var(--fuente-mono);
    font-size: .76rem;
    font-weight: 700;
    color: var(--gris-texto);
    padding-bottom: 2px;
}

.cal-dia {
    width: 100%;
    max-width: 36px;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .92rem;
    border-radius: var(--radio-chico);
    color: var(--texto);
}

.cal-dia.cal-magenta { background: var(--magenta); color: var(--blanco); font-weight: 700; }
.cal-dia.cal-morado  { background: var(--morado);  color: var(--blanco); font-weight: 700; }
.cal-dia.cal-naranja { background: var(--naranja); color: var(--blanco); font-weight: 700; }
.cal-dia.cal-verde   { background: var(--verde);   color: var(--blanco); font-weight: 700; }

/* Los días que ya pasaron se van apagando: el calendario avanza solo */
.cal-dia.cal-pasado { opacity: .32; }

/* El día de hoy: anillo grafito */
.cal-dia.cal-hoy {
    font-weight: 700;
    box-shadow: 0 0 0 3px var(--oscuro);
}

/* Hito activo: nodo relleno con anillo pulsante */
.lt-activo .lt-punto { color: var(--blanco); }
.hito-magenta.lt-activo .lt-punto { background: var(--magenta); }
.hito-verde.lt-activo .lt-punto { background: var(--verde); }


/* Línea de tiempo vertical en pantallas angostas */
@media (max-width: 900px) {
    .linea-tiempo { grid-template-columns: 1fr; gap: 22px; padding-left: 30px; }

    .linea-tiempo::before {
        top: 10px;
        bottom: 10px;
        left: 26px;
        right: auto;
        width: 5px;
        height: auto;
        transform: none;
    }

    .linea-tiempo::after {
        top: auto;
        bottom: -6px;
        left: 21px;
        right: auto;
        transform: none;
        border-top: 14px solid var(--gris-borde);
        border-left: 9px solid transparent;
        border-right: 9px solid transparent;
        border-bottom: none;
    }

    .lt-hito {
        grid-template-rows: none;
        grid-template-columns: 54px 1fr;
        align-items: center;
        gap: 12px;
        min-height: 0;
    }

    .lt-punto { grid-row: auto; grid-column: 1; margin-left: -30px; }

    .lt-tarjeta, .lt-arriba .lt-tarjeta, .lt-abajo .lt-tarjeta {
        grid-row: auto;
        grid-column: 2;
        margin: 0;
        max-width: none;
        justify-self: stretch;
        text-align: left;
        border-top-width: 2px;
        border-left: 4px solid;
    }

    .hito-magenta .lt-tarjeta { border-left-color: var(--magenta); }
    .hito-morado .lt-tarjeta { border-left-color: var(--morado); }
    .hito-naranja .lt-tarjeta { border-left-color: var(--naranja); }
    .hito-verde .lt-tarjeta { border-left-color: var(--verde); }

    .lt-tarjeta::before { display: none; }

    .lt-fecha, .lt-arriba .lt-fecha, .lt-abajo .lt-fecha {
        grid-row: auto;
        grid-column: 2;
        justify-self: start;
        margin: 6px 0 0;
    }
}

/* Teaser de resultados en vivo */
.resultados-teaser {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 26px;
    flex-wrap: wrap;
    background-color: var(--morado);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='190' height='190'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.10' stroke-width='2'%3E%3Cpath d='M18 26h48v36h36'/%3E%3Ccircle cx='18' cy='26' r='3.5'/%3E%3Ccircle cx='106' cy='62' r='3.5'/%3E%3Cpath d='M150 16v40h26'/%3E%3Ccircle cx='150' cy='16' r='3.5'/%3E%3Cpath d='M26 124v38h42'/%3E%3Ccircle cx='26' cy='124' r='3.5'/%3E%3C/g%3E%3C/svg%3E");
    border: 1px solid var(--morado-oscuro);
    border-radius: 12px;
    color: var(--blanco);
    padding: 32px 36px;
    margin-bottom: 44px;
    box-shadow: 0 18px 40px rgba(52, 16, 65, .25);
}

.resultados-teaser h2 { margin: 0 0 8px; font-size: 1.5rem; }
.resultados-teaser p { margin: 0; opacity: .95; max-width: 60ch; }
.teaser-texto { flex: 1 1 320px; }

/* ------------------- Página pública de resultados ------------------- */
.resultados-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.resultados-cabecera .titulo-pagina .icono { color: var(--ambar-oscuro); }

.estado-concurso {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--oscuro);
    color: var(--blanco);
    border-radius: var(--radio-chico);
    padding: 9px 16px;
    font-family: var(--fuente-mono);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.titulo-categoria-res {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 0;
}

.tabla-ranking .celda-puesto {
    font-family: var(--fuente-mono);
    font-weight: 700;
    font-size: 1rem;
    color: var(--morado);
    white-space: nowrap;
}

.tabla-ranking .celda-puntaje { white-space: nowrap; }
.tabla-ranking .celda-puntaje strong { font-family: var(--fuente-mono); font-size: 1.05rem; color: var(--teal-oscuro); }

.tabla-ranking .fila-podio { background: #FDF3DF; }
.tabla-ranking .fila-podio .celda-puesto { color: var(--ambar-oscuro); }

.pendiente-eval {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--gris-texto);
    font-size: .84rem;
}

/* Podio de ganadores */
.podio {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.podio-item {
    border: 1px solid var(--gris-borde);
    border-top: 6px solid var(--gris-borde);
    border-radius: var(--radio);
    padding: 18px;
    text-align: center;
    background: var(--gris-fondo);
}

.podio-item.puesto-1 { border-top-color: var(--dorado); background: #FDF6E3; }
.podio-item.puesto-2 { border-top-color: #9BA3AF; }
.podio-item.puesto-3 { border-top-color: #C77E3D; }

.podio-medalla {
    display: inline-block;
    font-family: var(--fuente-mono);
    font-weight: 700;
    font-size: .85rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--oscuro);
    margin-bottom: 10px;
}

.podio-fotos {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.podio-fotos img {
    width: 100%;
    max-width: 260px;
    border-radius: var(--radio-chico);
    border: 1px solid var(--gris-borde);
}

.podio-item h3 { margin: 4px 0 2px; color: var(--oscuro); }
.podio-ie { margin: 0 0 4px; font-size: .88rem; color: var(--gris-texto); }
.podio-proyecto { margin: 0 0 8px; font-size: .85rem; color: var(--gris-texto); font-style: italic; }

.podio-puntaje {
    display: inline-block;
    font-family: var(--fuente-mono);
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--blanco);
    background: var(--teal);
    border-radius: var(--radio-chico);
    padding: 4px 14px;
}

.podio-premio {
    margin: 10px 0 0;
    font-size: .86rem;
    font-weight: 700;
    color: var(--ambar-oscuro);
}

/* ------------------- Panel admin: evaluación en vivo ------------------- */
.estados-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}

.estado-opcion {
    display: flex;
    flex-direction: column;
    gap: 8px;
    border: 1px solid var(--gris-borde);
    border-radius: var(--radio-chico);
    padding: 14px 16px;
}

.estado-opcion strong { display: flex; align-items: center; gap: 8px; color: var(--oscuro); }
.estado-opcion small { color: var(--gris-texto); }
.estado-opcion .boton { align-self: flex-start; }
.estado-opcion.estado-activo { border-color: var(--verde); background: var(--exito-fondo); }

.eval-fila {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1.4fr;
    gap: 14px;
    align-items: start;
    border: 1px solid var(--gris-borde);
    border-left: 6px solid var(--gris-borde);
    border-radius: var(--radio-chico);
    padding: 14px 16px;
    margin-top: 12px;
}

.eval-fila.eval-hecha { border-left-color: var(--verde); background: #FBFDF8; }

.eval-info { display: flex; align-items: center; gap: 12px; }
.eval-info small { display: block; }

.eval-puesto {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radio-chico);
    background: var(--morado-claro);
    color: var(--morado);
    font-family: var(--fuente-mono);
    font-weight: 700;
}

.eval-form { display: flex; flex-direction: column; gap: 5px; }
.eval-form label { font-size: .74rem; font-weight: 700; color: var(--gris-texto); text-transform: uppercase; letter-spacing: .5px; }
.eval-form input[type="number"], .eval-form input[type="text"] {
    padding: 8px 10px;
    border: 1px solid var(--gris-borde);
    border-radius: var(--radio-chico);
    font-family: inherit;
    font-size: .9rem;
}
.eval-form input[type="file"] { font-size: .82rem; }
.eval-form input:focus { outline: none; border-color: var(--teal); }
.eval-form .boton { align-self: flex-start; }

.eval-fotos {
    grid-column: 1 / -1;
    display: flex;
    gap: 14px;
    align-items: flex-end;
    flex-wrap: wrap;
    border-top: 2px dashed var(--gris-borde);
    padding-top: 12px;
}

.eval-miniatura { position: relative; }
.eval-miniatura img {
    height: 74px;
    width: auto;
    border-radius: var(--radio-chico);
    border: 1px solid var(--gris-borde);
    display: block;
}
.eval-miniatura form { position: absolute; top: -8px; right: -8px; }
.eval-miniatura .boton { padding: 2px 7px; font-size: .7rem; }

@media (max-width: 900px) {
    .eval-fila { grid-template-columns: 1fr; }
}

/* ================= Pulido pro: animaciones y detalles ================= */

/* LED de la antena del robot (estático) */

/* Partículas flotantes del hero */
.particulas { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }

.particulas span {
    position: absolute;
    bottom: -12px;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    opacity: 0;
    animation: subir-particula linear infinite;
}

.particulas .p1 { left: 8%;  background: #21AC9C; animation-duration: 9s; }
.particulas .p2 { left: 22%; background: #F4A81D; animation-duration: 12s; animation-delay: 2s; width: 6px; height: 6px; }
.particulas .p3 { left: 34%; background: #E63180; animation-duration: 10s; animation-delay: 5s; }
.particulas .p4 { left: 47%; background: #E85A2A; animation-duration: 13s; animation-delay: 1s; width: 5px; height: 5px; }
.particulas .p5 { left: 60%; background: #76B82A; animation-duration: 11s; animation-delay: 4s; }
.particulas .p6 { left: 72%; background: #F4A81D; animation-duration: 9.5s; animation-delay: 6s; width: 6px; height: 6px; }
.particulas .p7 { left: 84%; background: #2BD9C8; animation-duration: 12.5s; animation-delay: 3s; }
.particulas .p8 { left: 93%; background: #E63180; animation-duration: 10.5s; animation-delay: 7s; width: 5px; height: 5px; }

@keyframes subir-particula {
    0%   { transform: translateY(0) rotate(0deg); opacity: 0; }
    8%   { opacity: .7; }
    85%  { opacity: .5; }
    100% { transform: translateY(-560px) rotate(300deg); opacity: 0; }
}

/* Cursor de máquina de escribir */
.cursor-escritura {
    display: inline-block;
    width: 3px;
    height: 1em;
    margin-left: 3px;
    vertical-align: -0.15em;
    background: var(--ambar);
    animation: cursor-parpadeo 1s steps(1) infinite;
}

.cursor-escritura.cursor-apagado { display: none; }

@keyframes cursor-parpadeo { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* Barra de progreso de lectura */
.progreso-scroll {
    position: sticky;
    top: 0;
    height: 4px;
    background: transparent;
    z-index: 95;
    margin-bottom: -4px;
}

.progreso-scroll span {
    display: block;
    height: 100%;
    width: 0;
    background: var(--magenta);
    border-radius: 0 2px 2px 0;
    box-shadow: 0 0 6px rgba(230, 49, 128, .55);
}

/* Botón volver arriba (robotizado) */
.volver-arriba {
    position: fixed;
    right: 22px;
    bottom: 22px;
    width: 52px;
    height: 52px;
    border: 3px solid var(--blanco);
    border-radius: 50%;
    background: var(--morado);
    color: var(--blanco);
    cursor: pointer;
    z-index: 96;
    box-shadow: 0 10px 24px rgba(52, 16, 65, .35);
    transition: transform .12s ease, background .15s ease;
    animation: aparecer .3s ease both;
}

.volver-arriba .icono { transform: rotate(-90deg); }
.volver-arriba:hover { background: var(--magenta); transform: translateY(-3px); }
.volver-arriba:active { transform: translateY(2px); box-shadow: none; }

/* Divisor de sección con circuito animado */
.divisor-circuito {
    display: flex;
    justify-content: center;
    margin: 6px 0 32px;
    overflow: hidden;
}

.divisor-circuito svg { max-width: 100%; height: auto; }

/* Cordillera andina sobre el pie de página */
.banda-montanas {
    margin-top: 34px;
    line-height: 0;
    background: transparent;
}

.banda-montanas svg {
    display: block;
    width: 100%;
    height: 170px;
}

.pie { padding-top: 22px; }

/* Brillo que recorre los botones principales al pasar el mouse */
.boton-grande, .boton-primario, .boton-acento, .boton-magenta {
    position: relative;
    overflow: hidden;
}

.boton-grande::after, .boton-primario::after,
.boton-acento::after, .boton-magenta::after {
    content: "";
    position: absolute;
    top: -20%;
    left: -30%;
    width: 22px;
    height: 140%;
    background: rgba(255, 255, 255, .35);
    transform: skewX(-24deg) translateX(-60px);
    pointer-events: none;
}

.boton-grande:hover::after, .boton-primario:hover::after,
.boton-acento:hover::after, .boton-magenta:hover::after {
    animation: brillo-boton .65s ease;
}

@keyframes brillo-boton {
    from { transform: skewX(-24deg) translateX(-70px); }
    to   { transform: skewX(-24deg) translateX(420px); }
}

/* El subrayado de sección crece al revelarse */
.pre-revelado .seccion-subrayado { width: 0; transition: width .8s ease .3s; }
.revelado .seccion-subrayado { width: 120px; }

/* Destello en filas del ranking cuando cambia un puntaje */
.fila-flash { animation: destello-fila 1.6s ease; }

@keyframes destello-fila {
    0%   { background: #C9F2EC; }
    100% { background: transparent; }
}

.fila-podio.fila-flash { animation: destello-fila-podio 1.6s ease; }

@keyframes destello-fila-podio {
    0%   { background: #C9F2EC; }
    100% { background: #FDF3DF; }
}

/* Confeti sobre el primer puesto del podio */
.podio-item { position: relative; overflow: hidden; }

.confeti { position: absolute; inset: 0; pointer-events: none; }

.confeti span {
    position: absolute;
    top: -12px;
    width: 8px;
    height: 12px;
    border-radius: 2px;
    animation: caer-confeti linear infinite;
}

.confeti .c1  { left: 6%;  background: var(--naranja); animation-duration: 3.4s; }
.confeti .c2  { left: 16%; background: var(--teal);    animation-duration: 4.2s; animation-delay: .6s; }
.confeti .c3  { left: 26%; background: var(--ambar);   animation-duration: 3.8s; animation-delay: 1.4s; }
.confeti .c4  { left: 37%; background: var(--magenta); animation-duration: 4.5s; animation-delay: .2s; }
.confeti .c5  { left: 48%; background: var(--verde);   animation-duration: 3.6s; animation-delay: 1.8s; }
.confeti .c6  { left: 58%; background: var(--morado);  animation-duration: 4.1s; animation-delay: .9s; }
.confeti .c7  { left: 68%; background: var(--ambar);   animation-duration: 3.5s; animation-delay: 2.2s; }
.confeti .c8  { left: 78%; background: var(--naranja); animation-duration: 4.4s; animation-delay: 1.1s; }
.confeti .c9  { left: 87%; background: var(--teal);    animation-duration: 3.9s; animation-delay: 2.6s; }
.confeti .c10 { left: 94%; background: var(--magenta); animation-duration: 4.3s; animation-delay: .4s; }

@keyframes caer-confeti {
    0%   { transform: translateY(0) rotate(0deg); opacity: 1; }
    100% { transform: translateY(420px) rotate(540deg); opacity: .4; }
}

/* ================ Ronda extra: micro-interacciones pro ================ */

/* Desplazamiento suave en toda la página */
html { scroll-behavior: smooth; }

/* Subrayado deslizante en los enlaces del menú */
.nav a { position: relative; }

.nav a::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 4px;
    height: 2.5px;
    border-radius: 2px;
    background: var(--ambar);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s ease;
}

.nav a:hover::after { transform: scaleX(1); }
.nav a.activo::after, .nav a.nav-salir::after { display: none; }


/* Fichas del cronómetro: entrada en cascada */
.contador-item { animation: pop-ficha .5s ease both; }
.contador > .contador-item:nth-child(3) { animation-delay: .12s; }
.contador > .contador-item:nth-child(5) { animation-delay: .24s; }
.contador > .contador-item:nth-child(7) { animation-delay: .36s; }

@keyframes pop-ficha {
    0%   { opacity: 0; transform: scale(.7) translateY(14px); }
    70%  { transform: scale(1.05); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* Satélites orbitando el disco del robot */
.hero-robot .orbita {
    position: absolute;
    width: 380px;
    height: 380px;
    max-width: 110%;
    border-radius: 50%;
    pointer-events: none;
    animation: orbitar linear infinite;
}

.hero-robot .orbita::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 50%;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    transform: translateX(-50%);
}

.orbita-1 { animation-duration: 9s; }
.orbita-1::before { background: var(--ambar); box-shadow: 0 0 8px rgba(244, 168, 29, .8); }
.orbita-2 { animation-duration: 14s; animation-direction: reverse; width: 420px; height: 420px; }
.orbita-2::before { background: var(--magenta); width: 9px; height: 9px; box-shadow: 0 0 8px rgba(230, 49, 128, .8); }

@keyframes orbitar {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@media (max-width: 860px) {
    .hero-robot .orbita { width: 250px; height: 250px; }
    .orbita-2 { width: 280px; height: 280px; }
}

/* Sol andino pulsante */
.sol-halo {
    transform-box: fill-box;
    transform-origin: center;
    animation: pulso-sol 5s ease-in-out infinite;
}

@keyframes pulso-sol {
    0%, 100% { transform: scale(1); opacity: .28; }
    50%      { transform: scale(1.25); opacity: .12; }
}

/* Entrada en cascada de tarjetas al revelarse la sección */
.revelado .cards-info .card-info,
.revelado .categorias-grid .categoria-card,
.revelado .linea-tiempo .lt-hito,
.revelado .objetivos-lista li,
.revelado .participantes-grid .participante-card {
    animation: aparecer .55s ease both;
}

.revelado .cards-info .card-info:nth-child(2),
.revelado .categorias-grid .categoria-card:nth-child(2),
.revelado .linea-tiempo .lt-hito:nth-child(2),
.revelado .objetivos-lista li:nth-child(2),
.revelado .participantes-grid .participante-card:nth-child(2) { animation-delay: .12s; }

.revelado .cards-info .card-info:nth-child(3),
.revelado .categorias-grid .categoria-card:nth-child(3),
.revelado .linea-tiempo .lt-hito:nth-child(3),
.revelado .objetivos-lista li:nth-child(3),
.revelado .participantes-grid .participante-card:nth-child(3) { animation-delay: .24s; }

.revelado .cards-info .card-info:nth-child(4),
.revelado .linea-tiempo .lt-hito:nth-child(4),
.revelado .objetivos-lista li:nth-child(4),
.revelado .participantes-grid .participante-card:nth-child(4) { animation-delay: .36s; }

.revelado .objetivos-lista li:nth-child(5) { animation-delay: .48s; }

/* Inclinación 3D sutil al pasar el mouse por las tarjetas */
.card-info:hover { transform: translateY(-4px) rotate3d(1, -1, 0, 2.5deg); }
.categoria-card:hover { transform: translateY(-4px) rotate3d(-1, 1, 0, 2.5deg); }
.crono-paso:hover { transform: translateY(-4px) rotate3d(1, 1, 0, 2deg); }

/* Logos del pie con elevación al pasar el mouse */
.pie-logo-chip { transition: transform .18s ease; }
.pie-logo-chip:hover { transform: translateY(-4px) scale(1.03); }

/* --------------------- Accesibilidad: menos movimiento --------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

@media print {
    .cabecera, .pie, .nav, .boton, .acciones, .franja-marca,
    .barra-herramientas, .no-imprimir, .alerta { display: none !important; }
    .tarjeta { border: 1px solid #ccc; break-inside: avoid; }
    .grid-tablas { grid-template-columns: 1fr; }
    details.equipo-detalle { display: block; }
    details.equipo-detalle > summary { background: none; }
    body { background-image: none; }
}

/* =====================================================================
   LANDING TECH — tipografías Orbitron/Rajdhani auto-alojadas,
   red de partículas (tsParticles), animaciones GSAP + ScrollTrigger,
   tarjetas con tilt 3D (VanillaTilt) y brillo que sigue al cursor.
   Todo degrada con elegancia si falta JS o hay "menos movimiento".
   ===================================================================== */

/* ------------------ Tipografías tecnológicas locales ------------------ */
@font-face {
    font-family: "Orbitron";
    src: url("../fonts/orbitron-var.woff2") format("woff2");
    font-weight: 400 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Rajdhani";
    src: url("../fonts/rajdhani-500.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Rajdhani";
    src: url("../fonts/rajdhani-600.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Rajdhani";
    src: url("../fonts/rajdhani-700.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --fuente-display: "Orbitron", Consolas, "Courier New", monospace;
    --fuente-tech: "Rajdhani", "Segoe UI", Roboto, Arial, sans-serif;
}

/* La marca de la cabecera y los títulos adoptan el look tecnológico */
.marca-texto strong {
    font-family: var(--fuente-display);
    font-size: .98rem;
    font-weight: 700;
    letter-spacing: 1.6px;
}

.seccion-titulo {
    font-family: var(--fuente-tech);
    font-weight: 700;
    font-size: 2rem;
    text-transform: uppercase;
    letter-spacing: 2.5px;
}

.contador-titulo,
.cta-final h2,
.teaser-texto h2,
.card-info h3,
.categoria-card h3,
.lt-tarjeta h4 {
    font-family: var(--fuente-tech);
    letter-spacing: .6px;
}

/* Rajdhani en caja mixta: con uppercase los signos "¡ !" parecen letras I */
.boton-grande {
    font-family: var(--fuente-tech);
    font-weight: 700;
    font-size: 1.18rem;
    letter-spacing: .8px;
}

/* --------------------- Hero: profundidad y neón --------------------- */
.hero {
    background-color: #2A0D36;
    background-image:
        radial-gradient(58% 74% at 84% 14%, rgba(230, 49, 128, .30), transparent 64%),
        radial-gradient(56% 70% at 10% 92%, rgba(33, 172, 156, .26), transparent 62%),
        radial-gradient(42% 54% at 52% 116%, rgba(118, 43, 138, .60), transparent 72%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='210' height='210'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.08' stroke-width='2'%3E%3Cpath d='M20 30h54v40h40'/%3E%3Ccircle cx='20' cy='30' r='4'/%3E%3Ccircle cx='118' cy='70' r='4'/%3E%3Cpath d='M166 18v44h30'/%3E%3Ccircle cx='166' cy='18' r='4'/%3E%3Cpath d='M30 138v42h46'/%3E%3Ccircle cx='30' cy='138' r='4'/%3E%3Ccircle cx='80' cy='180' r='4'/%3E%3Cpath d='M138 148h36v34'/%3E%3Ccircle cx='138' cy='148' r='4'/%3E%3Crect x='94' y='102' width='24' height='24' rx='3'/%3E%3Cpath d='M100 102v-8M112 102v-8M100 134v-8M112 134v-8M94 108h-8M94 120h-8M126 108h-8M126 120h-8'/%3E%3C/g%3E%3C/svg%3E");
}

/* Piso de rejilla en perspectiva (suelo holográfico) */
.hero::after {
    content: "";
    position: absolute;
    left: -12%;
    right: -12%;
    bottom: -2px;
    height: 46%;
    background:
        repeating-linear-gradient(90deg, rgba(43, 217, 200, .16) 0 1px, transparent 1px 48px),
        repeating-linear-gradient(0deg, rgba(43, 217, 200, .13) 0 1px, transparent 1px 34px);
    transform: perspective(430px) rotateX(58deg);
    transform-origin: bottom center;
    -webkit-mask-image: linear-gradient(transparent, #000 55%);
            mask-image: linear-gradient(transparent, #000 55%);
    opacity: .75;
    pointer-events: none;
}

/* Contenedor de la red de partículas (tsParticles inyecta su canvas) */
.particulas-red {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.particulas-red canvas { display: block; }

/* Cuando la red de partículas está activa se apagan los cuadritos CSS
   ascendentes: una sola capa de partículas, no dos */
.hero-red-activa .particulas { display: none; }

/* El sello "2026" salta con la mitad de frecuencia (menos ajetreo) */
.hero h1 .anio { animation: tada-anio 14s ease-in-out infinite; }

.hero-inner { position: relative; z-index: 2; }
.hero .deco { z-index: 2; }

/* Titular con Orbitron + resplandor tecnológico */
.hero h1 {
    font-family: var(--fuente-display);
    font-weight: 800;
    font-size: clamp(2.05rem, 5.2vw, 3.35rem);
    letter-spacing: 2px;
    perspective: 640px;
    text-shadow: 0 0 26px rgba(43, 217, 200, .35);
}

.hero h1 .letra {
    display: inline-block;
    transform-style: preserve-3d;
}

.hero h1 .anio { text-shadow: none; }

/* Chips de datos con efecto vidrio (glassmorphism) */
.hero-dato {
    background: rgba(74, 26, 87, .48);
    border: 1px solid rgba(255, 255, 255, .2);
    -webkit-backdrop-filter: blur(7px);
            backdrop-filter: blur(7px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.hero-dato:hover {
    transform: translateY(-2px);
    border-color: rgba(43, 217, 200, .8);
    box-shadow: 0 0 16px rgba(43, 217, 200, .35), inset 0 1px 0 rgba(255, 255, 255, .12);
}


/* ------------- Banda de cifras del concurso (stats HUD) ------------- */
.stats-tech {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
    gap: 10px;
    background-color: #1C0E27;
    background-image:
        radial-gradient(70% 120% at 50% -30%, rgba(118, 43, 138, .5), transparent 70%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='190' height='190'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.06' stroke-width='2'%3E%3Cpath d='M18 26h48v36h36'/%3E%3Ccircle cx='18' cy='26' r='3.5'/%3E%3Ccircle cx='106' cy='62' r='3.5'/%3E%3Cpath d='M150 16v40h26'/%3E%3Ccircle cx='150' cy='16' r='3.5'/%3E%3Cpath d='M26 124v38h42'/%3E%3Ccircle cx='26' cy='124' r='3.5'/%3E%3Ccircle cx='72' cy='162' r='3.5'/%3E%3Cpath d='M124 134h32v30'/%3E%3Ccircle cx='124' cy='134' r='3.5'/%3E%3C/g%3E%3C/svg%3E");
    border: 2px solid #3A2150;
    border-radius: 12px;
    padding: 26px clamp(16px, 3vw, 38px);
    margin-bottom: 42px;
    overflow: hidden;
}

/* Esquinas HUD */
.stats-tech::before,
.stats-tech::after {
    content: "";
    position: absolute;
    width: 26px;
    height: 26px;
    pointer-events: none;
}

.stats-tech::before {
    top: 9px;
    left: 9px;
    border-top: 3px solid var(--teal);
    border-left: 3px solid var(--teal);
}

.stats-tech::after {
    bottom: 9px;
    right: 9px;
    border-bottom: 3px solid var(--ambar);
    border-right: 3px solid var(--ambar);
}

.stat-tech {
    position: relative;
    text-align: center;
    padding: 8px 6px;
}

.stat-cifra {
    display: block;
    font-family: var(--fuente-display);
    font-weight: 800;
    font-size: clamp(2rem, 4.6vw, 2.85rem);
    line-height: 1.1;
    color: var(--blanco);
    font-variant-numeric: tabular-nums;
}


.stat-etiqueta {
    display: block;
    margin-top: 6px;
    font-family: var(--fuente-tech);
    font-weight: 600;
    font-size: .82rem;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .72);
}

@media (min-width: 861px) {
    .stat-tech + .stat-tech::before {
        content: "";
        position: absolute;
        left: -6px;
        top: 18%;
        bottom: 18%;
        width: 1px;
        background: linear-gradient(transparent, rgba(255, 255, 255, .28), transparent);
    }
}

/* --------- Brillo que sigue al cursor en tarjetas (JS marca --mx/--my) --------- */
.con-brillo { position: relative; overflow: hidden; }

.con-brillo::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity .25s ease;
    background: radial-gradient(230px circle at var(--mx, 50%) var(--my, 50%),
        rgba(33, 172, 156, .14), transparent 65%);
}

.con-brillo:hover::after { opacity: 1; }

/* Las tarjetas con tilt necesitan contener su destello (glare) */
.card-info, .categoria-card, .participante-card { overflow: hidden; }

/* Cifras del cronómetro con fuente display y neón */
.contador-cifra {
    font-family: var(--fuente-display);
    font-weight: 700;
    text-shadow: 0 0 18px rgba(43, 217, 200, .5);
}

.contador-urgente .contador-cifra { text-shadow: 0 0 18px rgba(232, 90, 42, .6); }

/* ---------------- Cinta ticker de palabras clave ---------------- */
.ticker-tech {
    position: relative;
    background: var(--profundo);
    border: 2px solid var(--medio);
    border-left: none;
    border-right: none;
    padding: 13px 0;
    margin-bottom: 44px;
    overflow: hidden;
}

.ticker-pista {
    display: flex;
    width: max-content;
    animation: ticker-desplazar 48s linear infinite;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.ticker-tech:hover .ticker-pista { animation-play-state: paused; }

.ticker-grupo {
    display: flex;
    align-items: center;
    gap: 34px;
    padding-right: 34px;
}

.ticker-item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--fuente-tech);
    font-weight: 600;
    font-size: .92rem;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    white-space: nowrap;
    color: rgba(255, 255, 255, .85);
}

.ticker-item .icono { color: var(--teal); }
.ticker-grupo .ticker-item:nth-child(4n+2) .icono { color: var(--ambar); }
.ticker-grupo .ticker-item:nth-child(4n+3) .icono { color: var(--magenta); }
.ticker-grupo .ticker-item:nth-child(4n)   .icono { color: var(--verde); }

@keyframes ticker-desplazar {
    to { transform: translateX(-50%); }
}

/* ------- Línea de progreso del cronograma (la dibuja GSAP al hacer scroll) ------- */
.lt-progreso {
    position: absolute;
    top: 50%;
    left: 2%;
    right: 2%;
    height: 5px;
    border-radius: 3px;
    transform: translateY(-50%) scaleX(0);
    transform-origin: left center;
    background: linear-gradient(90deg, var(--magenta), var(--morado), var(--naranja), var(--verde));
    box-shadow: 0 0 12px rgba(230, 49, 128, .45);
    pointer-events: none;
}

/* ---------------- Chips "NIVEL" de las categorías ---------------- */
.categoria-card { position: relative; }

.categoria-card::before {
    position: absolute;
    top: 14px;
    right: 14px;
    font-family: var(--fuente-mono);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    padding: 3px 9px;
    border-radius: 4px;
    border: 1.5px solid currentColor;
    background: rgba(255, 255, 255, .92);
    opacity: .85;
}

.categoria-verde::before   { content: "NIVEL 01"; color: var(--verde-oscuro); }
.categoria-morada::before  { content: "NIVEL 02"; color: var(--morado); }
.categoria-magenta::before { content: "NIVEL 03"; color: var(--magenta-oscuro); }

/* ------- CTA final: halo de luz giratorio + partículas propias ------- */
@property --ang-cta {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

.cta-final { position: relative; }

.cta-final::before {
    content: "";
    position: absolute;
    inset: -9px;
    border-radius: 20px;
    z-index: -1;
    background: conic-gradient(from var(--ang-cta),
        rgba(244, 168, 29, 0) 0% 60%,
        rgba(244, 168, 29, .6) 74%,
        rgba(230, 49, 128, .6) 83%,
        rgba(244, 168, 29, 0) 94%);
    filter: blur(6px);
    animation: girar-halo 12s linear infinite;
    pointer-events: none;
}

@keyframes girar-halo {
    to { --ang-cta: 360deg; }
}

.particulas-cta {
    position: absolute;
    inset: 0;
    border-radius: 9px;
    overflow: hidden;
    pointer-events: none;
}

.particulas-cta canvas { display: block; }

.cta-final > :not(.particulas-cta) { position: relative; z-index: 1; }

/* ------------- Ecualizador "EN VIVO" del teaser de resultados ------------- */
.ecualizador {
    display: inline-flex;
    align-items: flex-end;
    gap: 3px;
    height: 17px;
    margin-left: 8px;
}

.ecualizador span {
    width: 4px;
    height: 100%;
    border-radius: 2px 2px 0 0;
    background: var(--ambar);
    transform-origin: bottom center;
    animation: eq-barra 1s ease-in-out infinite;
}

.ecualizador span:nth-child(1) { animation-delay: 0s; }
.ecualizador span:nth-child(2) { animation-delay: .18s; background: var(--magenta); }
.ecualizador span:nth-child(3) { animation-delay: .36s; }
.ecualizador span:nth-child(4) { animation-delay: .54s; background: var(--verde); }

@keyframes eq-barra {
    0%, 100% { transform: scaleY(.3); }
    50%      { transform: scaleY(1); }
}

/* ------------- Subrayado animado del menú de navegación ------------- */
.nav a { position: relative; }

.nav a:not(.activo)::after {
    content: "";
    position: absolute;
    left: 15px;
    right: 15px;
    bottom: 5px;
    height: 2px;
    border-radius: 1px;
    background: var(--teal);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .22s ease;
}

.nav a:not(.activo):hover::after { transform: scaleX(1); }

/* ------- Luz que acompaña al cursor sobre el hero (linterna) ------- */
.hero-luz {
    position: absolute;
    top: -170px;
    left: -170px;
    width: 340px;
    height: 340px;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(43, 217, 200, .17),
        rgba(230, 49, 128, .09) 45%,
        transparent 70%);
    mix-blend-mode: screen;
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    transition: opacity .35s ease;
}

.hero:hover .hero-luz { opacity: 1; }

/* ------- Anillo de progreso de lectura en el botón volver arriba ------- */
.anillo-scroll {
    position: absolute;
    inset: -8px;
    pointer-events: none;
}

.anillo-scroll circle {
    fill: none;
    stroke: var(--ambar);
    stroke-width: 3;
    stroke-linecap: round;
    transform: rotate(-90deg);
    transform-origin: center;
    filter: drop-shadow(0 0 4px rgba(244, 168, 29, .6));
}

/* Con "menos movimiento": sin escáner, pulso de CTA, halo ni ecualizador */
@media (prefers-reduced-motion: reduce) {
    .hero::before { display: none; }
    .hero .boton-magenta, .cta-final .boton-magenta { animation: none; }
    .cta-final::before { display: none; }
    .ecualizador { display: none; }
    .hero-luz { display: none; }
}

/* ---------------- Gráfica de visitas en tiempo real (panel admin) ---------------- */
.visitas-cabecera {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.visitas-cabecera h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 1.15rem;
}

.visitas-envivo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--fuente-mono);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--exito);
    background: var(--exito-fondo);
    border-radius: var(--radio-chico);
    padding: 3px 9px;
    margin-left: 6px;
}

.visitas-tiles { display: flex; gap: 10px; flex-wrap: wrap; }

.visita-tile {
    min-width: 128px;
    text-align: center;
    background: var(--gris-fondo);
    border: 1px solid var(--gris-borde);
    border-radius: var(--radio-chico);
    padding: 8px 14px;
}

.visita-tile .cifra {
    display: block;
    font-family: var(--fuente-mono);
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--oscuro);
}

.visita-tile .etiqueta { font-size: .74rem; color: var(--gris-texto); }
.visita-tile .etiqueta small { font-size: .68rem; }

.grafica-visitas { position: relative; }

.grafica-cargando {
    color: var(--gris-texto);
    font-size: .9rem;
    text-align: center;
    padding: 40px 0;
    margin: 0;
}

.grafica-tooltip {
    position: absolute;
    pointer-events: none;
    background: var(--oscuro);
    color: var(--blanco);
    font-size: .8rem;
    line-height: 1.3;
    border-radius: var(--radio-chico);
    padding: 5px 10px;
    white-space: nowrap;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .25);
    z-index: 5;
}

.grafica-nota {
    color: var(--gris-texto);
    font-size: .78rem;
    margin: 8px 0 0;
}

/* Lugares de visita (geolocalización) junto a la gráfica */
.visitas-cuerpo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 24px;
    align-items: start;
}

@media (max-width: 900px) {
    .visitas-cuerpo { grid-template-columns: minmax(0, 1fr); }
}

.lugares-panel h3 {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 12px;
    font-size: .95rem;
    color: var(--oscuro);
}

.lugares-panel h3 .icono { color: var(--teal); }

.lugares-lista { display: flex; flex-direction: column; gap: 9px; }

.lugar-fila {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .82rem;
}

.lugar-nombre {
    flex: 0 0 44%;
    color: var(--texto);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lugar-barra {
    flex: 1;
    height: 9px;
    background: var(--gris-fondo);
    border: 1px solid var(--gris-borde);
    border-radius: 4px;
    overflow: hidden;
}

.lugar-barra span {
    display: block;
    height: 100%;
    background: #12998A;
    border-radius: 3px;
    transition: width .4s ease;
}

.lugar-cifra {
    flex: 0 0 24px;
    text-align: right;
    font-family: var(--fuente-mono);
    font-weight: 700;
    color: var(--oscuro);
}

.lugares-vacio {
    color: var(--gris-texto);
    font-size: .85rem;
    margin: 0;
}