/* ============================================================
   XX Encuentro Nacional de Secretarias y Asistentes CRUCh 2026
   Universidad Arturo Prat — Iquique
   Hoja de estilos principal
   ============================================================ */

:root{
  --azul:#2F6C9C;
  --azul-oscuro:#183C6C;
  --azul-hover:#1C4F77;
  --azul-claro:#EDF3F9;
  --azul-claro2:#EAF2FA;
  --borde-azul:#C6D8E8;
  --calipso:#3CB4A8;
  --calipso-claro:#6FCEC3;
  --calipso-fuerte:#1F9AA8;
  --verde:#1B7C74;
  --gris:#797976;
  --gris-claro:#C9C8C3;
  --texto:#2B3540;
  --texto-suave:#55606B;
  --arena:#F0EFEA;
  --crema:#FDFDFB;
  --borde:#E6E4DD;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--crema);
  font-family:'Archivo',Helvetica,Arial,sans-serif;
  color:var(--texto);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%}
a{color:var(--azul)}
a:hover{color:var(--azul-hover)}

/* ---------- Estructura ---------- */
.contenedor{max-width:1140px;margin:0 auto;padding:clamp(40px,7vw,64px) 20px;display:flex;flex-direction:column;gap:24px}
.contenedor-md{max-width:1000px}
.contenedor-sm{max-width:860px}
.contenedor.texto{gap:18px}
.bg-crema{background:var(--crema)}
.bg-arena{background:var(--arena)}
.bg-blanco{background:#fff}
.borde-t{border-top:1px solid var(--borde)}
.borde-b{border-bottom:1px solid var(--borde)}

/* ---------- Cabecera y navegación ---------- */
.cabecera{position:sticky;top:0;z-index:50;background:rgba(253,253,251,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--borde)}
.cabecera-fila{max-width:1140px;margin:0 auto;padding:4px clamp(14px,3vw,24px);display:flex;align-items:center;justify-content:space-between;gap:12px}
.marca{display:flex;align-items:center;gap:12px;text-decoration:none;flex:none}
.marca img{height:clamp(52px,12vw,80px);width:auto;flex:none}
.marca-texto{font-weight:700;font-size:clamp(12px,2.6vw,14px);color:var(--azul);line-height:1.25;letter-spacing:.02em;white-space:nowrap}
.marca-texto small{display:block;font-weight:500;color:var(--gris);font-size:clamp(10.5px,2.2vw,12px)}
.nav{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end;flex:1 1 auto;min-width:0}
.nav a{font-size:14px;font-weight:600;padding:8px 12px;border-radius:6px;text-decoration:none;color:var(--texto)}
.nav a:hover{background:var(--azul-claro);color:var(--azul)}
.nav a.activo{background:var(--azul);color:#fff}
.hamburguesa{display:none;border:1px solid var(--borde-azul);background:#fff;border-radius:8px;padding:10px 12px;cursor:pointer;flex-direction:column;gap:4px;min-width:44px;min-height:44px;justify-content:center;align-items:center;flex:none}
.hamburguesa span{display:block;width:20px;height:2px;background:var(--azul);border-radius:2px}
.menu-movil{display:none;flex-direction:column;gap:2px;padding:8px 16px 14px;border-top:1px solid var(--borde);background:var(--crema)}
.menu-movil.abierto{display:flex}
.menu-movil a{font-size:16px;font-weight:600;padding:13px 14px;border-radius:8px;text-decoration:none;color:var(--texto);min-height:44px;display:flex;align-items:center}
.menu-movil a.activo{background:var(--azul);color:#fff}
@media (max-width:1009px){
  .nav{display:none}
  .hamburguesa{display:flex}
}
.aviso{background:var(--azul);color:var(--azul-claro2);text-align:center;font-size:13px;padding:8px 16px;letter-spacing:.02em}

/* ---------- Tipografía ---------- */
.eyebrow{font-size:13px;font-weight:700;letter-spacing:.12em;color:var(--gris)}
.eyebrow-sm{font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--gris)}
h1.titulo{margin:0;font-size:clamp(26px,5vw,42px);line-height:1.12;font-weight:800;color:#fff;text-wrap:balance;max-width:22ch;text-shadow:0 2px 12px rgba(10,25,38,.45)}
h2.titulo{margin:0;font-size:clamp(24px,5vw,30px);font-weight:700;color:var(--azul-oscuro)}
.subtitulo{font-size:20px;font-weight:700;color:var(--azul-oscuro)}
p.parrafo{margin:0;font-size:16px;line-height:1.75;color:var(--texto-suave)}
p.parrafo-sm{margin:0;font-size:15px;line-height:1.7;color:var(--texto-suave)}
.nota{font-size:13.5px;color:var(--texto-suave)}
.nota-sm{font-size:12.5px;color:var(--gris)}
.destacado{margin:0;font-size:16px;font-weight:600;color:var(--azul)}
.intro{display:flex;flex-direction:column;gap:12px;max-width:720px}

/* ---------- Botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;text-decoration:none;font-weight:600;font-size:15px;padding:13px 26px;border-radius:8px;cursor:pointer;border:none;font-family:inherit}
.btn-azul{background:var(--azul);color:#fff}
.btn-azul:hover{background:var(--azul-hover);color:#fff}
.btn-claro{background:rgba(255,255,255,.92);color:var(--azul)}
.btn-claro:hover{background:#fff}
.btn-form{background:var(--azul);color:#fff;font-weight:700;padding:13px 22px;box-shadow:0 2px 0 rgba(10,25,38,.18);transition:background .2s ease,transform .18s ease,box-shadow .18s ease}
.btn-form:hover{background:var(--calipso-fuerte);color:#fff;transform:translateY(-2px);box-shadow:0 8px 22px rgba(31,154,168,.35)}
.btn-form:active{background:#5B6B78;transform:translateY(0);box-shadow:0 2px 0 rgba(10,25,38,.18)}
.acceso{display:flex;align-items:center;gap:14px;padding:18px 20px;border-radius:12px;text-decoration:none;color:#fff;transition:background .18s ease,border-color .18s ease,transform .18s ease}
.acceso svg{width:22px;height:22px;flex:none}
.acceso span.lineas{display:flex;flex-direction:column;gap:2px}
.acceso .t{font-size:15.5px;font-weight:700}
.acceso .s{font-size:12.5px;opacity:.88}
.acceso-azul{border:1px solid var(--borde-azul);background:var(--azul)}
.acceso-azul:hover{background:var(--verde);border-color:var(--verde);transform:translateY(-2px);color:#fff}
.acceso-azul:active{background:var(--gris);border-color:var(--gris);transform:translateY(0)}
.acceso-calipso{border:1px solid var(--calipso);background:var(--calipso)}
.acceso-calipso:hover{background:var(--calipso-claro);border-color:var(--calipso-claro);transform:translateY(-2px);color:#fff}
.acceso-calipso:active{background:var(--gris-claro);border-color:var(--gris-claro);transform:translateY(0)}

/* ---------- Portada ---------- */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--borde)}
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 35%}
.hero-velo{position:absolute;inset:0;background:linear-gradient(90deg,rgba(24,60,108,.86) 0%,rgba(24,60,108,.55) 55%,rgba(24,60,108,.25) 100%)}
.hero-cont{position:relative;max-width:1140px;margin:0 auto;padding:clamp(44px,7vw,80px) 20px;display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.pastillas{display:flex;gap:8px;flex-wrap:wrap}
.pastilla{background:#fff;color:var(--azul);font-size:13px;font-weight:700;padding:6px 14px;border-radius:999px;letter-spacing:.04em}
.pastilla-borde{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.4);font-weight:600}
.lema{margin:0;font-size:clamp(16px,3vw,19px);color:#D9E7F5;font-weight:600;font-style:italic;text-shadow:0 1px 8px rgba(10,25,38,.5)}
.botonera{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}
.banda{max-width:1140px;margin:0 auto;padding:18px 20px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.banda img{height:54px;width:auto}
.banda p{margin:0;font-size:15px;line-height:1.6;color:var(--texto-suave);flex:1;min-width:260px}

/* ---------- Rejillas ---------- */
.grid{display:grid;gap:14px}
.g150{grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr))}
.g190{grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:16px}
.g200{grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:16px}
.g240{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:16px}
.g250{grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.g260{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:12px}
.g300{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.g320{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:20px;align-items:start}

/* ---------- Tarjetas ---------- */
.panel{background:#fff;border:1px solid var(--borde);border-radius:14px;padding:clamp(22px,4vw,28px);display:flex;flex-direction:column;gap:18px}
.panel-cab{display:flex;flex-direction:column;gap:4px}
.tarjeta{background:#fff;border:1px solid var(--borde);border-radius:12px;padding:18px;display:flex;flex-direction:column;gap:4px}
.tarjeta-arena{background:var(--arena);border-radius:12px;padding:22px 16px;display:flex;flex-direction:column;gap:4px}
.tarjeta-azul{background:var(--azul-claro);border:1px solid var(--borde-azul);border-radius:12px;padding:22px 16px;display:flex;flex-direction:column;gap:4px}
.cifra{font-size:26px;font-weight:800;color:var(--azul)}
.cifra-sm{font-size:24px;font-weight:800;color:var(--azul)}
.cifra-cod{font-size:20px;font-weight:800;color:var(--azul);white-space:nowrap}
.cifra-pie{font-size:13px;color:var(--gris)}
.sence{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--texto-suave)}
.sence svg{width:16px;height:16px;flex:none}

/* Historia */
.par-versiones{display:flex;gap:16px;align-items:stretch;margin-top:8px;flex-wrap:wrap}
.version{flex:1;min-width:220px;background:#fff;border:1px solid var(--borde);border-radius:12px;padding:20px;display:flex;flex-direction:column;gap:4px}
.version.actual{background:var(--azul);border-color:var(--azul)}
.version .etq{font-size:13px;font-weight:700;color:var(--gris)}
.version .nom{font-size:16px;font-weight:600;color:var(--azul-oscuro)}
.version .sede{font-size:14px;color:var(--gris)}
.version.actual .etq,.version.actual .sede{color:#A6C3DF}
.version.actual .nom{color:#fff}
.separador{height:1px;background:var(--borde);margin:20px 0 6px}

/* Comisión */
.persona{background:#fff;border:1px solid var(--borde);border-radius:14px;overflow:hidden;display:flex;flex-direction:column}
.persona img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:center top;display:block}
.persona-datos{padding:16px 18px 20px;display:flex;flex-direction:column;gap:3px}
.persona-nombre{font-size:15.5px;font-weight:700;color:var(--azul-oscuro)}
.persona-rol{font-size:12.5px;color:var(--texto-suave)}
.persona-tel{font-size:14px;font-weight:600;color:var(--azul);text-decoration:none;margin-top:3px}
.persona-tel:hover{text-decoration:underline}
.institucional{display:flex;align-items:center;gap:20px;background:var(--arena);border-radius:12px;padding:24px;margin-top:10px;flex-wrap:wrap}
.institucional img{height:56px;width:auto;mix-blend-mode:multiply}
.institucional div{display:flex;flex-direction:column;gap:2px}
.institucional .nom{font-size:15px;font-weight:600;color:var(--azul-oscuro)}
.institucional .dir{font-size:14px;color:var(--gris)}
.correo{font-size:14px;color:var(--azul);text-decoration:none;word-break:break-all}

/* Programa */
.tabs{display:flex;gap:8px;flex-wrap:wrap}
.tab{border:1px solid var(--borde-azul);background:#fff;color:var(--azul);font-family:inherit;font-size:14px;font-weight:600;padding:10px 18px;border-radius:999px;cursor:pointer}
.tab:hover{background:var(--azul-claro)}
.tab.activo{background:var(--azul);border-color:var(--azul);color:#fff}
.dia{background:#fff;border:1px solid var(--borde);border-radius:14px;padding:28px;display:flex;flex-direction:column;gap:4px}
.dia[hidden]{display:none}
.dia-titulo{font-size:14px;font-weight:700;color:var(--azul);letter-spacing:.06em}
.dia-subtitulo{font-size:20px;font-weight:700;color:var(--azul-oscuro);margin-bottom:14px}
.bloque{display:grid;grid-template-columns:minmax(92px,130px) 1fr;gap:clamp(10px,2.5vw,16px);padding:12px 0;border-top:1px solid var(--arena)}
.bloque .hora{font-size:14px;font-weight:700;color:var(--azul);white-space:nowrap}
.bloque .cuerpo{display:flex;flex-direction:column;gap:2px}
.bloque .act{font-size:15px;font-weight:600;color:var(--texto)}
.bloque .det{font-size:13.5px;color:var(--gris);line-height:1.55}
.pie-programa{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.pie-programa p{margin:0;font-size:13px;color:var(--gris);font-style:italic}

/* Alojamiento */
.hotel{border:1px solid var(--borde);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;background:#fff}
.hotel>img{width:100%;height:130px;object-fit:cover;display:block}
.hotel-datos{padding:18px;display:flex;flex-direction:column;gap:10px}
.hotel-datos.lista{gap:6px}
.hotel-nombre{font-size:15px;font-weight:700;color:var(--azul-oscuro)}
.hotel-meta{font-size:12.5px;color:var(--gris)}
.hotel-tipo{font-size:13.5px;color:var(--texto-suave);margin-top:2px}
.hotel-precio{font-size:19px;font-weight:800;color:var(--azul);margin-top:4px}
.hotel-precio-pie{font-size:12px;color:var(--gris)}
.desayuno{font-size:12.5px;font-weight:600;color:var(--verde)}
.fila{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-top:1px solid var(--arena)}
.fila span:first-child{font-size:13.5px;color:var(--texto-suave)}
.fila .valor{font-size:14px;font-weight:700;color:var(--azul)}
.mail{font-size:13px;color:var(--azul);font-weight:600;word-break:break-all}
.panel-media{background:#fff;border:1px solid var(--borde);border-radius:14px;overflow:hidden;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.panel-media>img{width:100%;min-height:260px;height:100%;display:block;object-fit:cover;object-position:center 78%}
.panel-media-cuerpo{padding:clamp(22px,4vw,28px);display:flex;flex-direction:column;gap:16px}
.panel-foto{background:#fff;border:1px solid var(--borde);border-radius:14px;overflow:hidden;display:flex;flex-direction:column}
.panel-foto>img{width:100%;height:clamp(200px,32vw,300px);display:block;object-fit:cover;object-position:center 55%}
.tarifa{border:1px solid var(--borde);border-radius:12px;padding:18px;display:flex;flex-direction:column;gap:4px}
.tarifa.destacada{border-color:var(--borde-azul);background:var(--azul-claro)}
.tarifa .cat{font-size:13px;font-weight:700;color:var(--azul)}
.tarifa .pax{font-size:12.5px;color:var(--gris)}
.tarifa .val{font-size:22px;font-weight:800;color:var(--azul-oscuro);margin-top:4px}
.tarifa .det{font-size:12px;color:var(--gris)}
.tabla{border:1px solid var(--borde);border-radius:12px;overflow:hidden}
.tabla .tr{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:8px;padding:12px 16px;border-top:1px solid var(--arena)}
.tabla .tr.cab{background:var(--azul-claro);border-top:none}
.tabla .tr.cab span{font-size:12px;font-weight:700;color:var(--texto-suave)}
.tabla .tr.cab span:first-child{color:var(--azul-oscuro)}
.tabla .tr.cab span:last-child{color:var(--azul)}
.tabla .cat{font-size:14px;color:var(--texto)}
.tabla .neta{font-size:14px;color:var(--gris);text-align:right;text-decoration:line-through}
.tabla .pref{font-size:14px;font-weight:700;color:var(--azul-oscuro);text-align:right}
.tabla .txt{font-size:13.5px;color:var(--texto-suave)}
.tabla .txt small{color:var(--gris);font-size:13.5px}
.hospedaje{border:1px solid var(--borde);border-radius:12px;overflow:hidden;display:grid;grid-template-columns:130px 1fr;align-items:stretch;background:#fff}
.hospedaje>img{width:100%;height:100%;min-height:220px;object-fit:cover;display:block}
.hospedaje-datos{padding:18px;display:flex;flex-direction:column;gap:6px}
.hospedaje-datos .desc{font-size:13.5px;color:var(--texto-suave)}
.hospedaje-datos .horario{font-size:13px;color:var(--texto-suave)}
.enlace-fuerte{font-size:13.5px;font-weight:700;color:var(--azul);text-decoration:none;margin-top:4px}
.enlace-sm{font-size:12.5px;font-weight:700;color:var(--azul);text-decoration:none}
@media (max-width:520px){
  .hospedaje{grid-template-columns:1fr}
  .hospedaje>img{min-height:200px}
}
.traslados-foto{width:100%;height:clamp(170px,27vw,260px);object-fit:cover;object-position:center 80%;border-radius:12px;display:block}
.taxi{border:1px solid var(--borde);border-radius:12px;padding:16px 18px;display:flex;flex-direction:column;gap:6px;background:#fff}
.taxi .nom{font-size:15px;font-weight:700;color:var(--azul-oscuro)}
.taxi a{font-size:15px;font-weight:700;color:var(--azul);text-decoration:none}
.taxi .tels{display:flex;flex-direction:column;gap:2px}

/* Inscripciones */
.caja{background:#fff;border:1px solid var(--borde);border-radius:14px;padding:26px;display:flex;flex-direction:column;gap:14px}
.caja-azul{background:var(--azul-claro2);border:1px solid var(--borde-azul);border-radius:14px;padding:26px;display:flex;flex-direction:column;gap:12px}
.caja h3,.caja-azul h3{margin:0;font-size:17px;font-weight:700;color:var(--azul-oscuro)}
.caja p,.caja-azul p{margin:0;font-size:14px;line-height:1.6;color:var(--texto-suave)}
.dato{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--arena)}
.dato span:first-child{font-size:14.5px;color:var(--texto-suave)}
.dato .valor{font-size:14.5px;font-weight:700;color:var(--azul);text-align:right}
.pago{border:1px solid var(--borde);border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:5px}
.pago .tit{font-size:13.5px;font-weight:700;color:var(--azul)}
.pago .lineas{display:flex;flex-direction:column;gap:4px;font-size:14px;color:var(--texto-suave);line-height:1.5}
.pago .lineas strong{color:var(--azul-oscuro)}
.pago .lineas a{color:var(--azul);text-decoration:none}
.pago .aviso-sm{font-size:13px;color:var(--gris)}
.columna{display:flex;flex-direction:column;gap:20px}

/* Contacto */
.contenedor.centrado{text-align:center;align-items:center;padding-bottom:clamp(48px,8vw,72px)}
.contenedor.centrado p.parrafo-sm{max-width:52ch}
.contacto-grid{width:100%;max-width:720px;margin-top:6px}
.contacto-card{background:#fff;border:1px solid var(--borde);border-radius:14px;padding:22px;display:flex;flex-direction:column;gap:4px;text-align:left;text-decoration:none}
.contacto-card:hover{border-color:var(--borde-azul);background:#F7FAFC}
.contacto-card .nom{font-size:16px;font-weight:700;color:var(--azul-oscuro)}
.contacto-card .tel{font-size:15px;font-weight:600;color:var(--azul)}
.contacto-card .rol{font-size:12.5px;color:var(--gris)}
.horario{display:flex;align-items:center;gap:8px;background:var(--arena);border-radius:999px;padding:10px 20px;flex-wrap:wrap;justify-content:center}
.horario .etq{font-size:14px;font-weight:700;color:var(--azul)}
.horario .val{font-size:14px;color:var(--texto-suave)}
.direccion{font-size:14px;color:var(--gris)}

/* Pie */
.pie{background:var(--azul-oscuro);color:#A6C3DF}
.pie-fila{max-width:1140px;margin:0 auto;padding:36px 24px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.pie-marca{display:flex;align-items:center;gap:14px}
.pie-marca img{height:46px;width:auto;background:#fff;border-radius:8px;padding:4px}
.pie-marca div{display:flex;flex-direction:column;gap:2px}
.pie-marca .t{font-size:14px;font-weight:700;color:#fff}
.pie-marca .s{font-size:13px}
.pie-legal{font-size:12.5px}