/* ═══════════════════════════════════════════════════════════════════════
   Fachada institucional: portada, papel, numeración de capítulo y el
   escudo usado como recurso gráfico.

   El objetivo de esta hoja es uno solo: que el sitio se lea como el
   documento de una institución de 68 años y no como una plantilla. Tres
   decisiones lo consiguen —esquinas rectas en vez de tarjetas redondeadas,
   número romano de capítulo arriba de cada sección, y el escudo trabajado
   en tres escalas en lugar de un ícono de 44 px.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Papel ────────────────────────────────────────────────────────────────
   Ruido SVG embebido: sin archivo externo, sin petición de red, sin CDN.
   Muy leve a propósito: se tiene que notar solo cuando ya no está.        */
body{
  background-color:var(--crema);
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'>\
<filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/>\
<feColorMatrix type='saturate' values='0'/></filter>\
<rect width='140' height='140' filter='url(%23n)' opacity='0.035'/></svg>");
}

/* ═══ FRONTISPICIO ═══════════════════════════════════════════════════════ */
#v-inicio.vista{ padding-top:0 }

.frontis{
  background:var(--verde);
  color:#fff;
  padding:52px 0 0;
  position:relative;
  overflow:hidden;
  margin-bottom:0;
}
/* Sello de agua de la portada: centrado y completo, como un escudo grabado en
   seco sobre el papel. Antes iba a `right:-90px`, sangrando por el borde: un
   escudo cortado a la mitad se lee como un error de maquetación, no como una
   marca de agua. Un sello institucional se muestra entero o no se muestra. */
.frontis:before{
  content:""; position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:min(720px,96vw); aspect-ratio:1/.988;
  background:url("assets/escudo.png") no-repeat center/contain;
  /* Muy tenue y muy grande: a .055 el anillo tipográfico del escudo se leía y
     competía con el nombre de la institución. Un sello grabado en seco se
     adivina; si se lee, dejó de ser fondo. */
  opacity:.022; pointer-events:none;
}
.frontis .wrap{ position:relative; z-index:1; text-align:center }
.frontis img.sello{
  width:110px; height:109px; display:block; margin:0 auto 22px;
}
.frontis .nombre{
  font-family:var(--serif); font-size:clamp(28px,5.4vw,46px); line-height:1.08;
  letter-spacing:-.4px; margin:0;
}
.frontis .apodo{
  display:block; font-family:var(--sans-rotulo); font-size:clamp(11px,1.6vw,14px);
  letter-spacing:5px; text-transform:uppercase; color:#A8CBB1;
  margin-top:14px; font-weight:700;
}
.frontis .fundacion{
  font-family:var(--serif); font-style:italic; font-size:16.5px; color:#CFE3D3;
  margin:20px 0 0;
}
.frontis .lema{
  font-family:var(--serif); font-size:clamp(17px,2.6vw,22px); font-style:italic;
  margin:26px 0 0; padding-top:22px; color:#fff;
  border-top:1px solid rgba(255,255,255,.2); display:inline-block;
}

/* Banda del calendario cívico, pegada al pie de la portada */
.frontis .calendario{
  margin-top:38px; border-top:1px solid rgba(255,255,255,.18);
  display:grid; grid-template-columns:repeat(6,1fr);
}
.frontis .calendario a{
  padding:15px 8px 17px; text-align:center; text-decoration:none; color:#CFE3D3;
  border-right:1px solid rgba(255,255,255,.12); transition:background .12s;
}
.frontis .calendario a:last-child{ border-right:0 }
.frontis .calendario a:hover{ background:rgba(255,255,255,.07); color:#fff }
.frontis .calendario .d{
  display:block; font-family:var(--serif); font-size:19px; color:#fff; line-height:1;
}
.frontis .calendario .m{
  display:block; font-family:var(--sans-rotulo); font-size:9.5px; letter-spacing:1.6px;
  text-transform:uppercase; margin-top:6px;
}
.frontis .calendario a.union .d{ color:var(--oro-claro,#E3C877) }
.frontis .calendario a.union .m{ color:var(--oro-claro,#E3C877) }

/* Los tres accesos, debajo de la portada */
.puertas{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  border:1px solid var(--linea-fina); border-bottom:0; background:#fff;
  margin:34px 0 0;
}
/* Columna con el destino anclado abajo: los tres textos son de largos
   distintos y las flechas quedaban a tres alturas distintas, que es lo que
   delata una retícula que no se cerró. */
.puertas a{
  padding:24px 24px 26px; text-decoration:none; color:var(--tinta);
  border-right:1px solid var(--linea-fina); border-bottom:1px solid var(--linea-fina);
  transition:background .12s;
  display:flex; flex-direction:column;
}
.puertas a .destino{ margin-top:auto; padding-top:16px }
.puertas a:last-child{ border-right:0 }
.puertas a:hover{ background:var(--crema) }
.puertas .n{
  font-family:var(--sans-rotulo); font-size:10px; letter-spacing:2.2px;
  text-transform:uppercase; color:var(--oro); font-weight:700;
}
.puertas h3{
  font-family:var(--serif); font-size:21px; color:var(--verde); margin:8px 0 7px;
}
.puertas p{
  font-family:var(--serif); font-size:14.5px; line-height:1.5; color:var(--gris); margin:0;
}
.puertas .destino{
  display:block; font-family:var(--sans-rotulo); font-size:12px;
  color:var(--verde-2); font-weight:700;
}

/* ═══ NUMERACIÓN DE CAPÍTULO ═════════════════════════════════════════════
   Lo que más rápido corre el sitio de «plantilla» a «documento».          */
.seccion > .rotulo .cap{
  color:var(--verde-2); margin-right:12px; padding-right:12px;
  border-right:1px solid var(--linea-fina);
}

/* ═══ ESQUINAS RECTAS EN LO INSTITUCIONAL ════════════════════════════════
   El formulario de afiliación y el portal conservan las suyas: ahí sí
   corresponde que se vea como una herramienta.                            */
.seccion .panel{
  border-radius:0; box-shadow:none; border:1px solid var(--linea-fina);
}
.seccion .btn{ border-radius:0 }
.seccion .aviso{ border-radius:0 }
.seccion input, .seccion select, .seccion textarea{ border-radius:0 }

/* ═══ ESCUDO EN MARCA DE AGUA (secciones solemnes) ═══════════════════════
   Vive en el hueco que deja el encabezado: la bajada mide 660 px y el
   contenedor 944 px útiles, así que sobran ~280 px a la derecha del título.
   Antes iba a `right:-40px; top:120px` y en Mártires —dos columnas— caía
   encima del texto de la derecha, además de salirse del contenedor. Una marca
   de agua que estorba la lectura no es una marca de agua, es una mancha.
   Solo se dibuja cuando ese hueco existe de verdad.                        */
.seccion.solemne{ position:relative }
.seccion.solemne > *{ position:relative; z-index:1 }

@media(min-width:1000px){
  .seccion.solemne:before{
    content:""; position:absolute; right:4px; top:-10px;
    width:238px; height:235px;
    background:url("assets/escudo.png") no-repeat center/contain;
    opacity:.05; pointer-events:none; z-index:0;
  }
}

/* ═══ PIE INSTITUCIONAL ══════════════════════════════════════════════════ */
footer{ background:var(--verde); color:#CFE3D3; padding:0 }
footer .cols{
  display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:30px;
  padding:40px 0 34px; border-bottom:1px solid rgba(255,255,255,.14);
}
footer .cols h4{
  font-family:var(--sans-rotulo); font-size:10px; letter-spacing:2px;
  text-transform:uppercase; color:#9DC3A6; margin:0 0 12px; font-weight:700;
}
footer .cols a{
  display:block; color:#CFE3D3; text-decoration:none; font-size:14px;
  padding:4px 0; font-family:var(--serif);
}
footer .cols a:hover{ color:#fff; text-decoration:underline }
footer .sello{ display:flex; gap:14px; align-items:flex-start }
footer .sello img{ width:54px; height:53px; flex:none }
footer .sello .t{ font-family:var(--serif); font-size:15.5px; color:#fff; line-height:1.3 }
footer .sello .t small{
  display:block; font-family:var(--sans-rotulo); font-size:9.5px; letter-spacing:2px;
  text-transform:uppercase; color:#9DC3A6; margin-top:6px;
}
footer .sello p{
  font-family:var(--serif); font-size:13.5px; line-height:1.5; color:#A8CBB1;
  margin:12px 0 0;
}
footer .cierre{ padding:20px 0 30px; font-size:12.5px; color:#9DC3A6 }
footer .cierre .lema{
  font-family:var(--serif); font-style:italic; font-size:16px; color:#fff;
  margin-bottom:8px;
}

@media(max-width:820px){
  .frontis .calendario{ grid-template-columns:repeat(3,1fr) }
  .frontis .calendario a:nth-child(3){ border-right:0 }
  .frontis .calendario a:nth-child(-n+3){ border-bottom:1px solid rgba(255,255,255,.12) }
  footer .cols{ grid-template-columns:1fr 1fr; gap:24px }
}
@media(max-width:620px){
  .frontis{ padding-top:36px }
  .frontis:before{ width:min(320px,80vw) }
  .frontis img.sello{ width:76px; height:75px }
  .frontis .apodo{ letter-spacing:3px }
  .frontis .calendario{ grid-template-columns:repeat(2,1fr) }
  .frontis .calendario a{ border-bottom:1px solid rgba(255,255,255,.12) }
  .frontis .calendario a:nth-child(2n){ border-right:0 }
  .seccion.solemne:before{ display:none }
  footer .cols{ grid-template-columns:1fr }
}