:root{
  --mar:#0F3557;        /* mar profundo */
  --azul:#336699;       /* azul Chiapas del logo */
  --turquesa:#4CC4DC;   /* paloma */
  --olivo:#8DC63F;      /* rama de olivo */
  --grafito:#3E3F42;    /* timón */
  --espuma:#F2F6F9;     /* fondo claro frío */
  --blanco:#FFFFFF;
  --display:"Archivo", "Arial Narrow", Arial, sans-serif;
  --texto:"Figtree", "Segoe UI", Roboto, Arial, sans-serif;
  --ancho:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--texto);color:var(--grafito);background:var(--blanco);font-size:1.0625rem;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--turquesa);outline-offset:3px;border-radius:4px}
.contenedor{width:min(var(--ancho),100% - 2.5rem);margin-inline:auto}
h1,h2,h3{font-family:var(--display);font-stretch:112%;line-height:1.05;color:var(--mar)}
h2{font-size:clamp(2rem,4.2vw,3.1rem);font-weight:800;letter-spacing:-.01em;max-width:18ch}
.intro{max-width:58ch;margin-top:1rem;font-size:1.125rem}

/* ---------- Encabezado ---------- */
.barra{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-bottom:1px solid #E1E8EE}
.barra .contenedor{display:flex;align-items:center;gap:1.5rem;min-height:72px}
.marca{display:flex;align-items:center;gap:.75rem;text-decoration:none}
.marca img{width:48px;height:48px;object-fit:contain}
.marca span{font-family:var(--display);font-weight:800;font-stretch:118%;font-size:1.3rem;color:var(--mar);letter-spacing:.02em}
.menu{display:flex;gap:1.6rem;margin-left:auto;list-style:none}
.menu a{text-decoration:none;font-weight:500;font-size:.98rem}
.menu a:hover{color:var(--azul)}
.boton{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-weight:600;text-decoration:none;border-radius:999px;padding:.8rem 1.4rem;border:2px solid transparent;transition:background .2s,color .2s}
.boton-olivo{background:var(--olivo);color:var(--mar)}
.boton-olivo:hover{background:#9FD650}
.boton-linea{border-color:rgba(255,255,255,.55);color:var(--blanco)}
.boton-linea:hover{background:rgba(255,255,255,.1)}
.boton-mar{background:var(--mar);color:var(--blanco)}
.boton-mar:hover{background:var(--azul)}
.abrir-menu{display:none;margin-left:auto;background:none;border:0;font:inherit;font-weight:600;color:var(--mar);cursor:pointer;padding:.5rem}

/* ---------- Portada ---------- */
.portada{position:relative;overflow:hidden;background:var(--mar) url(../fotos/portada.webp) center/cover no-repeat;color:var(--blanco);padding:clamp(4rem,10vw,8rem) 0 clamp(5rem,11vw,9rem)}
.portada::before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(100deg,rgba(15,53,87,.97) 0%,rgba(15,53,87,.88) 45%,rgba(15,53,87,.55) 100%)}
.portada .contenedor{position:relative;z-index:2}
.portada h1{color:var(--blanco);font-size:clamp(2.9rem,8vw,6.4rem);font-weight:900;font-stretch:122%;letter-spacing:-.02em;max-width:11ch}
.portada p.lema{margin-top:1.6rem;max-width:44ch;font-size:clamp(1.1rem,1.7vw,1.3rem);color:#D6E6F2}
.portada .acciones{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2.2rem}
.timon{position:absolute;z-index:1;right:-14vw;top:50%;width:min(78vw,760px);translate:0 -50%;color:var(--turquesa);opacity:.16;will-change:transform}
.ola{position:absolute;left:0;right:0;bottom:-1px;z-index:2;width:100%;height:auto;color:var(--blanco)}
.tema-anio{display:inline-flex;align-items:baseline;gap:.6rem;margin-bottom:1.4rem;padding:.35rem .9rem;border:1px solid rgba(76,196,220,.5);border-radius:999px;font-size:.95rem;color:var(--turquesa)}
.tema-anio strong{font-family:var(--display);font-stretch:115%;color:var(--blanco);font-size:1.05rem}

/* ---------- Próximas actividades ---------- */
.seccion{padding:clamp(4rem,8vw,6.5rem) 0}
.proxima{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:start;margin-top:2.5rem}
.destacado{background:var(--espuma);border-left:6px solid var(--olivo);padding:clamp(1.6rem,3vw,2.4rem);border-radius:0 18px 18px 0}
.destacado .cuenta{font-family:var(--display);font-stretch:120%;font-weight:900;font-size:clamp(3.6rem,8vw,5.5rem);color:var(--azul);line-height:1}
.destacado .cuenta small{display:block;font-family:var(--texto);font-size:1rem;font-weight:500;color:var(--grafito);margin-top:.4rem}
.destacado h3{font-size:clamp(1.6rem,3vw,2.2rem);margin-top:1.6rem}
.dato{display:flex;gap:.6rem;margin-top:.6rem}
.dato b{font-weight:600;color:var(--mar);min-width:6.5rem}
.destacado p.desc{margin-top:1rem}
.lista-eventos{list-style:none;border-top:2px solid var(--mar)}
.lista-eventos li{display:grid;grid-template-columns:5.2rem 1fr;gap:1rem;padding:1.15rem 0;border-bottom:1px solid #D9E2EA}
.fecha-bloque{font-family:var(--display);font-stretch:115%;color:var(--azul);line-height:1}
.fecha-bloque .dia{display:block;font-size:2rem;font-weight:800}
.fecha-bloque .mes{font-size:.95rem;font-weight:600}
.lista-eventos h4{font-family:var(--display);font-stretch:108%;font-size:1.2rem;color:var(--mar);line-height:1.2}
.lista-eventos p{font-size:.97rem;margin-top:.2rem}
.etiqueta{display:inline-block;margin-top:.45rem;font-size:.82rem;font-weight:600;padding:.15rem .6rem;border-radius:6px;background:#E3F5F9;color:#1F6E80}
.etiqueta.pendiente{background:#FFF3D6;color:#7A5A00}

/* ---------- Bitácora ---------- */
.bitacora{background:var(--espuma)}
.linea{list-style:none;margin-top:3rem;position:relative;display:grid;gap:0}
.linea::before{content:"";position:absolute;left:7.5rem;top:.5rem;bottom:.5rem;width:2px;background:linear-gradient(var(--turquesa),var(--azul))}
.linea li{display:grid;grid-template-columns:6.3rem 1fr;gap:2.6rem;padding:1.1rem 0;position:relative}
.linea li::after{content:"";position:absolute;left:calc(7.5rem - 6px);top:1.55rem;width:14px;height:14px;border-radius:50%;background:var(--blanco);border:3px solid var(--azul)}
.linea .cuando{font-weight:600;color:var(--azul);text-align:right;padding-top:.15rem}
.linea h4{font-family:var(--display);font-stretch:110%;font-size:1.3rem;color:var(--mar)}
.linea p{max-width:60ch}
.linea .cifra{font-family:var(--display);font-stretch:118%;font-weight:800;color:var(--azul)}

.linea .foto{margin-top:.8rem;width:min(100%,420px);aspect-ratio:3/2;object-fit:cover;border-radius:14px}

/* ---------- Galería ---------- */
.galeria{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:210px;gap:.75rem;margin-top:2.6rem}
.galeria figure{position:relative;overflow:hidden;border-radius:16px;background:var(--espuma)}
.galeria img{width:100%;height:100%;object-fit:cover}
.galeria figcaption{position:absolute;left:0;right:0;bottom:0;padding:1.6rem .9rem .7rem;font-size:.9rem;font-weight:500;color:#fff;background:linear-gradient(transparent,rgba(11,39,64,.85))}
.galeria .ancha{grid-column:span 2}
.galeria .alta{grid-row:span 2}
@media (max-width:960px){.galeria{grid-template-columns:repeat(2,1fr);grid-auto-rows:190px}}
@media (max-width:520px){.galeria{grid-auto-rows:150px;gap:.5rem}.galeria figcaption{font-size:.8rem;padding:1.2rem .6rem .5rem}}

/* ---------- Confraternidades ---------- */
.confras{background:var(--mar);color:#D6E6F2}
.confras h2{color:var(--blanco)}
.rejilla-confras{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem;margin-top:3rem}
.confra{background:var(--azul);border-radius:20px;padding:1.6rem 1.4rem 1.5rem;display:flex;flex-direction:column}
.confra .logo{height:150px;display:flex;align-items:center;justify-content:center}
.confra .logo img{max-height:150px;width:auto}
.confra h3{color:var(--blanco);font-size:1.25rem;margin-top:1.4rem}
.confra p{font-size:.97rem;margin-top:.35rem}

/* ---------- Rumbo por año ---------- */
.rumbo{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:3rem;border-top:2px solid var(--mar)}
.rumbo div{padding:1.8rem 1.5rem 0 0}
.rumbo div + div{padding-left:1.5rem;border-left:1px solid #D9E2EA}
.rumbo .anio{font-weight:600;color:var(--azul)}
.rumbo .palabra{font-family:var(--display);font-stretch:125%;font-weight:900;font-size:clamp(2rem,4vw,3rem);color:var(--mar);line-height:1.1;margin-top:.3rem}
.rumbo .actual .palabra{color:var(--azul)}
.rumbo p{margin-top:.6rem;max-width:32ch}

/* ---------- JOB ---------- */
.job{background:linear-gradient(135deg,#B8323A,#6E2229);color:var(--blanco);border-radius:28px;padding:clamp(2rem,5vw,3.5rem);display:grid;grid-template-columns:1.4fr 1fr;gap:2rem;align-items:center}
.job h2{color:var(--blanco);max-width:none}
.job p{color:#D6E6F2;margin-top:1rem;max-width:52ch}
.job .fechas-job{font-family:var(--display);font-stretch:120%;font-weight:900;font-size:clamp(2.4rem,5vw,3.6rem);line-height:1;color:#B3D146}
.job-logo{display:block;width:min(300px,70vw);height:auto}
.job p{color:#F6DADC}
.job .fechas-job span{display:block;font-family:var(--texto);font-weight:500;font-size:1rem;color:#D6E6F2;margin-top:.6rem}

.recuerdo{display:grid;grid-template-columns:1.3fr 1fr 1fr;grid-auto-rows:clamp(150px,20vw,250px);gap:.75rem;margin-top:.9rem}
.recuerdo figure{position:relative;border-radius:18px;overflow:hidden;margin:0}
.recuerdo img{width:100%;height:100%;object-fit:cover}
.recuerdo-pie{margin-top:.7rem;font-size:.95rem;color:var(--grafito)}
.recuerdo-pie b{color:var(--mar)}
.expo{background:linear-gradient(135deg,var(--mar),#12507A);color:var(--blanco);border-radius:28px;padding:clamp(2rem,5vw,3.5rem);display:grid;grid-template-columns:1.4fr 1fr;gap:2rem;align-items:center}
.expo h2{color:var(--blanco);max-width:none}
.expo p{color:#D6E6F2;margin-top:1rem;max-width:52ch}
.expo .fechas-job{font-family:var(--display);font-stretch:120%;font-weight:900;font-size:clamp(2.4rem,5vw,3.6rem);line-height:1;color:var(--olivo)}
.expo .fechas-job span{display:block;font-family:var(--texto);font-weight:500;font-size:1rem;color:#D6E6F2;margin-top:.6rem}
@media (max-width:960px){.expo{grid-template-columns:1fr}}
@media (max-width:600px){.recuerdo{grid-template-columns:1fr 1fr}.recuerdo figure:first-child{grid-column:1/-1}}

/* ---------- Uniones ---------- */
.uniones{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.mapa-previo{aspect-ratio:4/3;border-radius:22px;background:var(--espuma);position:relative;overflow:hidden;border:1px solid #D9E2EA}
.mapa-previo svg{width:100%;height:100%}

/* ---------- Pie ---------- */
.pie{background:#0B2740;color:#B9CCDC;padding:4rem 0 2rem;margin-top:0}
.pie .contenedor{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2.5rem}
.pie .sello{width:84px;height:84px;background:var(--blanco);border-radius:50%;padding:8px}
.pie h4{font-family:var(--display);font-stretch:112%;color:var(--blanco);font-size:1.05rem;margin-bottom:.8rem}
.pie ul{list-style:none;display:grid;gap:.45rem}
.pie a{text-decoration:none}
.pie a:hover{color:var(--turquesa)}
.pie .legal{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.12);padding-top:1.5rem;font-size:.9rem}

/* ---------- Responsivo ---------- */
@media (max-width:960px){
  .proxima,.uniones,.job{grid-template-columns:1fr}
  .rejilla-confras{grid-template-columns:repeat(2,1fr)}
  .pie .contenedor{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .menu{display:none;position:absolute;top:72px;left:0;right:0;flex-direction:column;gap:0;background:var(--blanco);border-bottom:1px solid #E1E8EE;padding:.5rem 1.25rem 1rem}
  .menu.abierto{display:flex}
  .menu a{display:block;padding:.75rem 0}
  .abrir-menu{display:block}
  .barra .boton{display:none}
  .timon{right:-40vw;width:120vw;opacity:.14}
  .rumbo{grid-template-columns:1fr}
  .rumbo div + div{padding-left:0;border-left:0;border-top:1px solid #D9E2EA}
  .rumbo div{padding-bottom:1.4rem}
  .linea::before{left:.45rem}
  .linea li{grid-template-columns:1fr;gap:.2rem;padding-left:2rem}
  .linea li::after{left:0}
  .linea .cuando{text-align:left}
  .pie .contenedor{grid-template-columns:1fr}
}
@media (max-width:520px){ .rejilla-confras{grid-template-columns:1fr} }
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .timon{transform:none!important} }