:root{
  /* Paleta de la PRESENTACIÓN MADRE. Los valores están extraídos de los
     operadores de color del propio PDF, no estimados a ojo. Es la paleta que
     ya circula en el material compartido, así que manda sobre las anteriores. */
  --marino:#13233F;   --marino-alt:#1B3053;  --marino-2:#A8B6C9;  /* azul dominante */
  --dorado:#C5A15A;   --dorado-t:#826A3B;    --dorado-2:#C5A15A;  /* acento principal */
  --verde:#317069;    --verde-2:#679590;                          /* verde esmeralda */
  --terra:#C46A36;    --terra-t:#A5592D;     --terra-2:#C97646;   /* terracota */
  /* BLANCO PURO desde el 07/10/2026. La guía web v4 lo dice literal:
     «Navy profundo + blanco puro + camel como acento. No se utilizaron
     fondos crema». El crema #F6F2E8 venía de la presentación madre de agosto
     y SE MANTIENE en la papelería impresa, que no se rehace. */
  --crema:#FFFFFF;    --crema-2:#F6F7F9;                          /* fondos claros */
  --tinta:#282F39;    --tinta-2:#4A5563;     --gris:#626974;
  /* La línea pasa de cálida a neutra: sobre blanco, un borde crema se
     lee sucio en vez de sutil. */
  --linea:#E3E6EA;    --linea-honda:#2C3D5E;
  --on-marino:#FFFFFF; --on-marino-2:#A8B6C9;
  /* tintes pastel de las tarjetas de la presentación */
  /* Tintes de las tres líneas productivas, aclarados para que sobre
     blanco se lean como un matiz y no como un fondo de otro color. */
  --tinte-dorado:#FDF8EE; --tinte-verde:#EFF6F4; --tinte-terra:#FCF4ED;
  --display:"Petrona",Georgia,"Times New Roman",serif;
  --body:"Archivo","Helvetica Neue",Arial,sans-serif;
  --maxw:1140px;
}
*{box-sizing:border-box}
body{margin:0; background:var(--crema); color:var(--tinta);
  font-family:var(--body); font-size:17px; line-height:1.62; -webkit-font-smoothing:antialiased}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px}
@media (max-width:640px){ .wrap{padding:0 20px} body{font-size:16px} }

h1,h2,h3{font-family:var(--display); font-weight:700; letter-spacing:-.02em; text-wrap:balance; margin:0}
a{color:inherit}
.eyebrow{font-family:var(--body); font-size:11px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; margin:0}

.cordon{display:flex; height:3px; width:100%}
.cordon i{flex:1}
.cordon i:nth-child(1){background:var(--dorado)}
.cordon i:nth-child(2){background:var(--verde)}
.cordon i:nth-child(3){background:var(--terra)}

/* ---------- NAV ---------- */
.nav{display:flex; align-items:center; gap:26px; padding:20px 0 0}
.nav .brand{display:flex; align-items:center; gap:13px; margin-right:auto; text-decoration:none}
.nav .brand svg,.nav .brand img{width:auto; height:34px; flex:none; display:block}
.nav .brand b{font-family:var(--display); font-weight:700; font-size:1.15rem;
  letter-spacing:-.015em; color:var(--on-marino)}
.nav a.link{font-size:.9rem; color:var(--on-marino-2); text-decoration:none; padding:6px 0;
  border-bottom:1px solid transparent}
.nav a.link:hover{color:var(--on-marino); border-bottom-color:var(--dorado)}
.nav a.link:focus-visible{outline:2px solid var(--dorado); outline-offset:4px}
/* En móvil los enlaces NO se ocultan: con seis páginas, esconderlos dejaba la
   navegación solo en el pie. Se envuelven a una segunda fila. */
@media (max-width:1150px){
  .nav{flex-wrap:wrap; gap:12px 18px; padding-bottom:14px}
  .nav a.link{font-size:.85rem; order:10}
  .nav a.lang{order:5}
  /* Sin un `order` explícito, .acceso caería en 0 y se metería en la
     primera fila junto a la marca, empujando ENGLISH fuera de la
     pantalla y desbordando la página a lo ancho. Va al final de los
     enlaces envueltos, que es su jerarquía real. */
  .nav a.acceso{order:11}
  .nav .btn{order:6; padding:10px 20px; font-size:.88rem}
  /* pseudo-elemento como ítem flex: fuerza el salto para que TODOS los
     enlaces caigan juntos en la segunda fila, no uno colgando arriba */
  .nav::after{content:""; flex-basis:100%; height:0; order:7}
}
@media (max-width:520px){
  .nav .brand b{font-size:1rem}
  .nav a.link{font-size:.8rem}
}
/* el selector de idioma no se oculta en móvil: es la puerta de los aliados en EE. UU. */
.nav a.lang{font-size:.78rem; font-weight:600; letter-spacing:.07em; text-transform:uppercase;
  color:var(--on-marino-2); text-decoration:none; padding:5px 12px; border-radius:999px;
  border:1px solid rgba(239,237,234,.28); white-space:nowrap}
.nav a.lang:hover{color:var(--on-marino); border-color:var(--dorado)}
.nav a.lang:focus-visible{outline:2px solid var(--dorado); outline-offset:3px}

/* Acceso al interior de Esperanza 360. Deliberadamente discreto: el visitante
   que importa es el donante, no el equipo. Sin borde, para no competir con el
   selector de idioma ni con el botón principal. */
.nav a.acceso{font-size:.8rem; font-weight:500; color:var(--on-marino-2);
  text-decoration:none; white-space:nowrap; opacity:.85}
.nav a.acceso:hover{color:var(--on-marino); opacity:1; text-decoration:underline}
.nav a.acceso:focus-visible{outline:2px solid var(--dorado); outline-offset:3px}

.btn{display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--body); font-size:.94rem; font-weight:600; line-height:1.2;
  padding:13px 26px; border-radius:999px; border:1px solid transparent;
  text-decoration:none; cursor:pointer; transition:filter .14s ease, transform .14s ease}
.btn-chico{padding:9px 18px; font-size:.86rem}
.btn-marino{background:var(--marino); color:#fff}
.btn-marino:hover{background:var(--marino-alt)}
.btn:hover{filter:brightness(1.09)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid var(--dorado); outline-offset:3px}
.btn-dorado{background:var(--dorado); color:#2A1D0C}
/* Por defecto va sobre fondo CLARO, que es lo que la guía v4 hizo
   dominante. Dentro de una franja navy se invierte más abajo. */
.btn-linea{background:transparent; color:var(--marino); border-color:var(--linea)}
.btn-linea:hover{border-color:var(--dorado)}
/* `.dark` es la clase real de las secciones navy del sitio; `.sismo` y
   `.mensaje` son bloques DENTRO de ellas, no contenedores. Apuntar a los
   bloques dejaba el botón en navy sobre navy: invisible. */
.dark .btn-linea, .contacto .btn-linea, .mensaje .btn-linea,
.e360 .btn-linea{color:var(--on-marino); border-color:rgba(255,255,255,.38)}
.dark .btn-linea:hover, .contacto .btn-linea:hover{border-color:var(--dorado)}

/* ---------- HERO ---------- */
/* CABECERA CLARA desde el 07/10/2026 (guía web v4). Antes era un bloque
   navy; la v4 pone la marca y el menú sobre blanco puro y reserva el navy
   para las franjas de mensaje de alto impacto, que siguen igual. */
.hero{background:#fff; color:var(--tinta); overflow:hidden;
  border-bottom:1px solid var(--linea)}
.hero-in{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:56px; align-items:center; padding:74px 0 84px}
@media (max-width:900px){
  .hero-in{grid-template-columns:1fr; gap:40px; padding:52px 0 60px}
  .hero-art{order:-1; max-width:250px}
}
.hero .eyebrow{color:var(--dorado-t); margin-bottom:26px}
.hero h1{font-size:clamp(2.4rem,5.6vw,4rem); line-height:1.05; margin:0 0 24px; color:var(--marino)}
.hero h1 em{font-style:italic; color:var(--dorado)}
.hero p.lede{font-size:1.1rem; color:var(--tinta-2); max-width:56ch; margin:0 0 34px}
.hero p.lede em{font-style:italic; color:var(--dorado-2); font-weight:600}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap; align-items:center}
.hero-art svg,.hero-art img{width:100%; height:auto; display:block}
.hero-strip{border-top:1px solid var(--linea); padding:20px 0 26px;
  display:flex; gap:10px 34px; flex-wrap:wrap; align-items:baseline}
.hero-strip span{font-size:.85rem; color:var(--gris)}
.hero-strip b{color:var(--marino); font-weight:700}

.hero-art circle{stroke-dasharray:164; stroke-dashoffset:164;
  animation:draw 1.15s cubic-bezier(.62,0,.3,1) forwards}
.hero-art circle:nth-child(1){animation-delay:.20s}
.hero-art circle:nth-child(2){animation-delay:.42s}
.hero-art circle:nth-child(3){animation-delay:.64s}
@keyframes draw{to{stroke-dashoffset:0}}
.rise{opacity:0; transform:translateY(14px); animation:rise .8s cubic-bezier(.2,.7,.3,1) forwards}
.d1{animation-delay:.10s} .d2{animation-delay:.22s} .d3{animation-delay:.34s} .d4{animation-delay:.46s}
@keyframes rise{to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){
  .hero-art circle{stroke-dashoffset:0; animation:none}
  .rise{opacity:1; transform:none; animation:none}
  *{transition-duration:.01ms !important}
}


/* ---------- LA RAMITA (vara de San José) ---------- */
.rm-t{stroke:var(--verde); fill:none} .rm-h{fill:var(--verde)}
.hero .rm-t{stroke:var(--verde-2)} .hero .rm-h{fill:var(--verde-2)}
.fase-ramita{display:block; width:30px; height:auto; margin:0 0 14px}
.fase--3{position:relative}
.filigrana{position:absolute; right:-30px; bottom:-40px; width:280px; height:auto;
  opacity:.13; pointer-events:none}
.filigrana .rm-t{stroke:var(--crema)} .filigrana .rm-h{fill:var(--crema)}
.contacto{position:relative; overflow:hidden}
.contacto .wrap{position:relative; z-index:1}
@media (max-width:900px){ .filigrana{width:190px; right:-50px} }

/* ---------- SECTION SHELL ---------- */
section{padding:82px 0}
@media (max-width:640px){ section{padding:58px 0} }
.sec-head{max-width:62ch; margin-bottom:44px}
.sec-head .eyebrow{color:var(--gris); margin-bottom:16px}
.sec-head h2{font-size:clamp(1.8rem,4vw,2.7rem); line-height:1.1; margin:0 0 16px}
.sec-head p{margin:0; color:var(--tinta-2); font-size:1.05rem}
.sec-head p b{color:var(--tinta); font-weight:600}
.dark{background:var(--marino); color:var(--on-marino)}
.dark .sec-head .eyebrow{color:var(--dorado-2)}
.dark .sec-head h2{color:var(--on-marino)}
.dark .sec-head p{color:var(--on-marino-2)}
.pale{background:var(--crema-2); border-top:1px solid var(--linea); border-bottom:1px solid var(--linea)}
.kicker{font-family:var(--display); font-style:italic; font-size:1.15rem; color:var(--tinta-2);
  margin:34px 0 0; max-width:70ch}
.dark .kicker{color:var(--on-marino-2)}

/* ---------- FASES ---------- */
.fases{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--linea);
  border:1px solid var(--linea)}
@media (max-width:820px){ .fases{grid-template-columns:1fr} }
.fase{background:var(--crema); padding:26px 24px 30px}
.fase .n{font-family:var(--display); font-size:2.2rem; font-weight:700; line-height:1;
  color:var(--dorado-t); display:block; margin-bottom:12px; font-variant-numeric:tabular-nums}
.fase h3{font-size:1.1rem; margin:0 0 14px; letter-spacing:.01em}
.fase ul{margin:0; padding:0; list-style:none; display:grid; gap:8px}
.fase li{font-size:.93rem; color:var(--tinta-2); padding-left:16px; position:relative}
.fase li::before{content:""; position:absolute; left:0; top:.66em; width:7px; height:1px; background:var(--gris)}
.fase--3{background:var(--crema-2)}
.fase--3 .n{color:var(--verde)}
.clave{border:1px solid var(--dorado); border-left-width:3px; padding:22px 24px; margin-top:20px;
  background:var(--crema-2); border-radius:0 6px 6px 0}
.clave b{display:block; font-size:11px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--dorado-t); margin-bottom:8px}
.clave p{margin:0; color:var(--tinta-2); font-size:.97rem; max-width:74ch}


/* ---------- CADENA: DE DAMNIFICADO A COMUNIDAD RECUPERADA ---------- */
.circuito{margin:26px 0 0; padding:24px 26px; background:var(--crema-2);
  border:1px solid var(--linea); border-top:2px solid var(--verde); border-radius:0 0 6px 6px}
.circuito-t{font-family:var(--body); font-size:11px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gris); margin:0 0 16px}
.circuito ol{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap;
  align-items:center; gap:8px 12px}
.circuito li{font-family:var(--body); font-size:.95rem; font-weight:600; color:var(--marino);
  line-height:1.3}
.circuito li:first-child{color:var(--dorado-t)}
.circuito li:last-child{color:var(--verde)}
.circuito .fl{color:var(--dorado); font-weight:700; font-size:1rem}
@media (max-width:640px){
  .circuito ol{flex-direction:column; align-items:flex-start; gap:6px}
  .circuito .fl{transform:rotate(90deg); margin-left:6px}
}

/* ---------- ALIANZA ---------- */
.actores{display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--linea-honda); border:1px solid var(--linea-honda)}
@media (max-width:900px){ .actores{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){ .actores{grid-template-columns:1fr} }
.actor{background:var(--marino); padding:24px 22px 28px}
.actor .barra{display:block; width:30px; height:4px; border-radius:99px; margin-bottom:16px}
.actor h3{font-size:1.12rem; margin:0 0 12px; color:var(--on-marino)}
.actor ul{margin:0; padding:0; list-style:none; display:grid; gap:7px}
.actor li{font-size:.92rem; color:var(--on-marino-2)}

/* ---------- TERRITORIO ---------- */
.terr{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:48px; margin-top:56px;
  padding-top:44px; border-top:1px solid var(--linea-honda); align-items:start}
@media (max-width:900px){ .terr{grid-template-columns:1fr; gap:32px} }
.terr-cifras{display:flex; gap:34px; flex-wrap:wrap}
.terr-cifras div .c{font-family:var(--display); font-weight:700; font-size:3.2rem; line-height:1;
  color:var(--dorado-2); font-variant-numeric:tabular-nums; letter-spacing:-.03em; display:block}
.terr-cifras div .l{font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--on-marino-2); display:block; margin-top:9px}
.tabla{width:100%; border-collapse:collapse; font-size:.93rem}
.tabla th{text-align:left; font-family:var(--body); font-size:10.5px; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase; color:var(--dorado-2); padding:0 0 11px;
  border-bottom:1px solid var(--linea-honda)}
.tabla td{padding:11px 0; border-bottom:1px solid var(--linea-honda); color:var(--on-marino-2)}
.tabla td:first-child{color:var(--on-marino)}
.tabla td.num{text-align:right; font-variant-numeric:tabular-nums}
.terr-nota{font-size:.87rem; color:var(--on-marino-2); margin:18px 0 0; max-width:60ch}

/* ---------- LÍNEAS PRODUCTIVAS ---------- */
.lineas{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
@media (max-width:880px){ .lineas{grid-template-columns:1fr} }
.linea{background:var(--crema); border:1px solid var(--linea); border-radius:6px; overflow:hidden;
  display:flex; flex-direction:column}
.linea .tope{height:5px}
.linea .cuerpo{padding:24px 22px 26px; display:flex; flex-direction:column; gap:11px; flex:1}
.linea h3{font-size:1.25rem; margin:0}
.linea .cap{font-size:.9rem; color:var(--tinta-2); margin:0}
.linea .estado{margin-top:auto; padding-top:15px; border-top:1px solid var(--linea);
  font-size:10.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--gris)}
.linea .estado.on{color:var(--marino)}

.piloto{margin-top:34px; border:1px solid var(--linea); border-radius:6px; background:var(--crema);
  display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
@media (max-width:880px){ .piloto{grid-template-columns:1fr} }
.piloto-l{padding:28px 26px; border-right:1px solid var(--linea)}
@media (max-width:880px){ .piloto-l{border-right:0; border-bottom:1px solid var(--linea)} }
.piloto-l .eyebrow{color:var(--dorado-t); margin-bottom:12px}
.piloto-l h3{font-size:1.5rem; margin:0 0 10px}
.piloto-l p{margin:0; font-size:.94rem; color:var(--tinta-2)}
.piloto-r{padding:28px 26px}
.piloto-r ul{margin:0; padding:0; list-style:none; display:grid; gap:12px}
.piloto-r li{font-size:.95rem; color:var(--tinta-2); padding-left:20px; position:relative; line-height:1.5}
.piloto-r li::before{content:""; position:absolute; left:0; top:.55em; width:8px; height:8px;
  border-radius:99px; border:1.5px solid var(--dorado)}

/* ---------- DESTINATARIOS ---------- */
.dest{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--linea);
  border:1px solid var(--linea)}
@media (max-width:720px){ .dest{grid-template-columns:1fr} }
.dst{background:var(--crema); padding:24px 24px 26px}
.dst h3{font-size:1.08rem; margin:0 0 7px}
.dst p{margin:0; font-size:.93rem; color:var(--tinta-2)}

/* ---------- CADENA ---------- */
.cadena{display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--linea-honda); border:1px solid var(--linea-honda)}
@media (max-width:860px){ .cadena{grid-template-columns:repeat(2,1fr)} }
@media (max-width:460px){ .cadena{grid-template-columns:1fr} }
.paso{background:var(--marino); padding:20px 20px 24px}
.paso .n{font-family:var(--display); font-weight:700; font-size:1.5rem; line-height:1;
  color:var(--dorado-2); font-variant-numeric:tabular-nums; display:block; margin-bottom:10px}
.paso b{display:block; font-family:var(--body); font-size:.94rem; font-weight:600;
  color:var(--on-marino); line-height:1.35}

/* ---------- FORMAS DE APORTAR ---------- */
.formas{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
@media (max-width:900px){ .formas{grid-template-columns:repeat(2,1fr)} }
@media (max-width:600px){ .formas{grid-template-columns:1fr} }
.forma{border:1px solid var(--linea); border-radius:6px; padding:24px 22px 26px; background:var(--crema);
  display:flex; flex-direction:column; gap:10px}
.forma .barra{width:30px; height:4px; border-radius:99px}
.forma h3{font-size:1.12rem; margin:0}
.forma p{margin:0; font-size:.92rem; color:var(--tinta-2)}

.aviso{background:var(--crema); border:1px solid var(--linea); border-left:3px solid var(--dorado);
  border-radius:0 6px 6px 0; padding:20px 24px; margin-top:38px}
.aviso b{font-family:var(--body); font-size:11px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--dorado-t); display:block; margin-bottom:8px}
.aviso p{margin:0; font-size:.92rem; color:var(--tinta-2); max-width:78ch}


/* ---------- BANDA DE AFIRMACIÓN ---------- */
.banda{margin:34px 0 0; padding:24px 26px; background:var(--crema-2);
  border-top:2px solid var(--dorado); border-bottom:1px solid var(--linea); text-align:center}
.banda p{margin:0; font-family:var(--display); font-weight:700; letter-spacing:-.015em;
  font-size:clamp(1.15rem,2.5vw,1.5rem); line-height:1.3; color:var(--marino); text-wrap:balance}

/* ---------- CONVERSIÓN DEL APORTE ---------- */
.conv{display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr); gap:32px;
  margin-top:38px; padding-top:34px; border-top:1px solid var(--linea); align-items:start}
@media (max-width:820px){ .conv{grid-template-columns:1fr; gap:26px} }
.conv h3{font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gris); font-family:var(--body); margin:0 0 18px}
.conv-lista{display:grid; gap:1px; background:var(--linea); border:1px solid var(--linea)}
.conv-fila{background:var(--crema-2); display:grid;
  grid-template-columns:minmax(0,1fr) 22px minmax(0,1fr); align-items:center; gap:10px; padding:13px 16px}
@media (max-width:520px){ .conv-fila{grid-template-columns:1fr; gap:4px; padding:12px 14px} }
.conv-fila .de{font-size:.93rem; color:var(--tinta-2)}
.conv-fila .fl{color:var(--dorado-t); font-weight:700; text-align:center}
@media (max-width:520px){ .conv-fila .fl{text-align:left} }
.conv-fila .a{font-size:.93rem; color:var(--marino); font-weight:600}
.impactos{background:var(--marino); color:var(--on-marino); padding:24px 22px 26px; border-radius:6px}
.impactos b{display:block; font-family:var(--display); font-weight:700; font-size:1.3rem;
  line-height:1.15; letter-spacing:-.02em; margin-bottom:16px; color:var(--on-marino)}
.impactos ul{margin:0; padding:0; list-style:none; display:grid; gap:9px}
.impactos li{font-size:.95rem; color:var(--dorado-2); font-weight:600}
.impactos li span{color:var(--on-marino-2); font-weight:400}

/* ---------- INDICADORES + METAS ---------- */
.inds{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--linea);
  border:1px solid var(--linea)}
@media (max-width:820px){ .inds{grid-template-columns:repeat(2,1fr)} }
@media (max-width:480px){ .inds{grid-template-columns:1fr} }
.ind{background:var(--crema); padding:22px 22px 24px}
.ind b{display:block; font-family:var(--display); font-size:1.15rem; margin-bottom:6px}
.ind span{font-size:.9rem; color:var(--tinta-2)}
.metas{margin-top:44px; padding-top:38px; border-top:1px solid var(--linea)}
.metas h3{font-size:1.4rem; margin:0 0 6px}
.metas .sub{margin:0 0 24px; color:var(--tinta-2); font-size:.97rem}
.metas-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1px;
  background:var(--linea); border:1px solid var(--linea)}
.meta{background:var(--crema); padding:18px 18px 20px; display:flex; flex-direction:column; gap:3px}
.meta .cifra{font-family:var(--display); font-weight:700; font-size:2.1rem; line-height:1;
  color:var(--marino); font-variant-numeric:tabular-nums; letter-spacing:-.03em}
.meta .que{font-size:.86rem; color:var(--tinta-2); line-height:1.4}

/* ---------- CONTACTO ---------- */
.contacto{background:var(--marino-alt); color:var(--crema-2)}
.contacto-in{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.9fr); gap:56px; align-items:start}
@media (max-width:900px){ .contacto-in{grid-template-columns:1fr; gap:34px} }
.contacto h2{font-size:clamp(1.8rem,4vw,2.6rem); line-height:1.1; margin:0 0 16px; color:var(--crema-2)}
.contacto p{margin:0 0 8px; color:#D5DCE0; font-size:1.02rem}
.form{display:grid; gap:14px; background:rgba(255,255,255,.06); padding:26px 24px 28px;
  border:1px solid rgba(255,255,255,.16); border-radius:8px}
.form label{display:block; font-size:11px; font-weight:600; letter-spacing:.13em;
  text-transform:uppercase; color:#B9C4CA; margin-bottom:7px}
.form input,.form select{width:100%; font-family:var(--body); font-size:.96rem; padding:12px 14px;
  border:1px solid rgba(255,255,255,.24); border-radius:5px;
  background:rgba(255,255,255,.07); color:var(--crema-2)}
.form input::placeholder{color:#8FA0A9}
.form input:focus,.form select:focus{outline:2px solid var(--dorado-2); outline-offset:1px; border-color:transparent}
.form select option{color:#23282C}
.form .btn{width:100%; margin-top:4px}
.form small{font-size:.8rem; color:#AAB8BF; line-height:1.5}


/* ---------- FORMULARIO: señuelo y estado ---------- */
.honeypot{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.form-msg{margin:2px 0 0; font-size:.9rem; line-height:1.5; padding:11px 14px; border-radius:5px}
.form-msg.ok{background:rgba(127,163,122,.22); color:#DFF0DC; border:1px solid rgba(127,163,122,.55)}
.form-msg.error{background:rgba(211,164,104,.16); color:#F2DFC4; border:1px solid rgba(211,164,104,.5)}
.form-msg.enviando{color:#B9C4CA}
.form button[disabled]{opacity:.6; cursor:progress}

/* ---------- FOOTER ---------- */
footer{background:var(--marino); color:var(--on-marino-2); padding:54px 0 42px; font-size:.9rem}
.pie{display:grid; grid-template-columns:minmax(0,1.3fr) repeat(2,minmax(0,1fr)); gap:36px}
@media (max-width:760px){ .pie{grid-template-columns:1fr; gap:28px} }
.pie .marca{display:flex; align-items:center; gap:13px; margin-bottom:16px}
.pie .marca svg{width:36px; height:36px}
.pie .marca b{font-family:var(--display); font-size:1.15rem; color:var(--on-marino)}
.pie h4{font-family:var(--body); font-size:11px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--dorado-2); margin:0 0 13px}
.pie ul{margin:0; padding:0; list-style:none; display:grid; gap:8px}
.pie a{color:var(--on-marino-2); text-decoration:none}
.pie a:hover{color:var(--on-marino)}
.pie-base{margin-top:38px; padding-top:22px; border-top:1px solid var(--linea-honda);
  display:flex; gap:10px 26px; flex-wrap:wrap; font-size:.83rem}

/* ---------- ALIADOS (banda de logos) ---------- */
/* Los logos vienen de fuentes distintas: unos son vectores oscuros, otro trae
   su propio fondo azul. El recuadro blanco los normaliza para que la fila lea
   como un sistema y no como cinco recortes pegados. */
.aliados-band{margin-top:54px; border-top:1px solid var(--linea-honda); padding-top:36px}
.aliados-band .rotulo{font-family:var(--body); font-size:11px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--on-marino-2); margin:0 0 22px}
.logos{display:grid; grid-template-columns:repeat(5,1fr); gap:14px}
@media (max-width:900px){ .logos{grid-template-columns:repeat(3,1fr)} }
@media (max-width:560px){ .logos{grid-template-columns:repeat(2,1fr)} }
.logo-tile{background:#fff; border-radius:8px; display:flex; align-items:center;
  justify-content:center; padding:18px 20px; min-height:132px; overflow:hidden}
.logo-tile img{max-width:100%; max-height:80px; width:auto; height:auto; display:block}
/* Los logos cuadrados con texto apilado (símbolo + nombre + lema) quedan
   ilegibles si se limitan a la misma altura que los apaisados: se les da todo
   el alto útil del recuadro. */
.logo-tile--cuadrado img{max-height:96px}
/* Best Way trae su propio fondo azul marino y mucho aire interno. El recuadro
   iguala ese azul y la imagen ocupa el alto completo: limitada como las demás,
   su marca queda ilegible. */
.logo-tile--marino{background:#02122B; padding:0}
.logo-tile--marino img{max-height:100%; height:100%; width:auto; max-width:100%}
.aliados-nota{margin:20px 0 0; font-size:.86rem; color:var(--on-marino-2)}

/* ---------- CABECERA DE PÁGINA INTERNA ---------- */
/* navy más claro que el del contenido: sin este escalón, una cabecera oscura
   seguida de una sección oscura se lee como un solo bloque continuo */
/* Cabecera de las páginas interiores. Pasa a claro el 07/10/2026 por la
   guía v4: el navy se reserva para las franjas de mensaje, no para el marco
   de cada página. */
.cabecera{background:#fff; color:var(--tinta); border-bottom:1px solid var(--linea)}
.cabecera-in{padding:46px 0 58px; max-width:62ch}
.cabecera .eyebrow{color:var(--dorado-t); margin-bottom:18px}
.cabecera h1{font-size:clamp(2rem,4.4vw,3.05rem); line-height:1.08; margin:0 0 18px; color:var(--marino)}
.cabecera p{margin:0; color:var(--tinta-2); font-size:1.06rem}

/* ---------- EQUIPO ---------- */
.equipo{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
@media (max-width:900px){ .equipo{grid-template-columns:repeat(2,1fr)} }
@media (max-width:600px){ .equipo{grid-template-columns:1fr} }
.persona{border:1px solid var(--linea); border-radius:8px; overflow:hidden;
  background:var(--crema-2); display:flex; flex-direction:column}
.persona .foto{aspect-ratio:4/5; background:var(--linea); overflow:hidden}
.persona .foto img{width:100%; height:100%; object-fit:cover; object-position:50% 22%; display:block}
.persona .datos{padding:20px 20px 22px; display:grid; gap:7px; justify-items:start}
.persona h3{font-size:1.14rem; margin:0; letter-spacing:-.01em}
.persona .cargo{margin:0; font-size:.9rem; font-weight:600; color:var(--dorado-t); line-height:1.4}
.persona .correo{font-size:.88rem; color:var(--tinta-2); text-decoration:none; margin-top:4px;
  border-bottom:1px solid var(--linea); padding-bottom:2px; overflow-wrap:anywhere}
.persona .correo:hover{color:var(--dorado-t); border-bottom-color:var(--dorado)}
.persona .correo:focus-visible{outline:2px solid var(--dorado); outline-offset:3px}

/* ---------- ARQUITECTURA DE MARCA ---------- */
/* Tres niveles: fundación → programa → piloto. Va inmediatamente después del
   hero porque su función es que el visitante sepa QUÉ está mirando antes de
   leer nada más; confundir los tres niveles es el problema que evita. */
.jerarquia{background:var(--crema-2); border-bottom:1px solid var(--linea); padding:34px 0 36px}
.niveles{list-style:none; margin:0; padding:0; display:grid;
  grid-template-columns:1fr auto 1fr auto 1fr; align-items:stretch; gap:0 18px}
@media (max-width:820px){
  .niveles{grid-template-columns:1fr; gap:0}
  .niveles .fl{transform:rotate(90deg); padding:6px 0}
}
.nivel{display:flex; flex-direction:column; gap:5px; padding:16px 18px;
  background:var(--crema); border:1px solid var(--linea); border-radius:6px;
  border-top:3px solid var(--marino)}
.nivel:nth-of-type(2){border-top-color:var(--dorado)}
/* Variante de DOS niveles (página Fundación): la retícula base reparte tres
   niveles y dos flechas; con dos haría un hueco a la derecha. */
.niveles-dos{grid-template-columns:1fr auto 1fr}
@media (max-width:820px){ .niveles-dos{grid-template-columns:1fr} }
.nivel:nth-of-type(3){border-top-color:var(--verde)}
.nivel .rotulo{font-family:var(--body); font-size:10px; font-weight:600; letter-spacing:.15em;
  text-transform:uppercase; color:var(--gris)}
.nivel b{font-family:var(--display); font-size:1.16rem; font-weight:700;
  letter-spacing:-.01em; color:var(--tinta); line-height:1.2}
.nivel span.que{font-size:.86rem; color:var(--tinta-2); line-height:1.45}
.niveles .fl{display:flex; align-items:center; justify-content:center;
  color:var(--dorado); font-weight:700; font-size:1.15rem}

/* ---------- DIRECCIÓN EN EL PIE ---------- */
.pie-dir{margin:16px 0 0; font-style:normal; font-size:.88rem; line-height:1.65;
  color:var(--on-marino-2)}
.pie-dir a{color:var(--on-marino-2); text-decoration:none;
  border-bottom:1px solid var(--linea-honda)}
.pie-dir a:hover{color:var(--dorado-2); border-bottom-color:var(--dorado)}
.pie-dir a:focus-visible{outline:2px solid var(--dorado); outline-offset:3px}

/* ---------- MARCA SOBRE FONDO OSCURO ---------- */
/* El logotipo lleva el texto en azul marino, el mismo color del fondo del sitio.
   Por eso va dentro de un disco claro: así se usa la versión A COLOR, que además
   viene del archivo de 1536 px y se ve nítida, en vez de la blanca de 140 px que
   salía del panel del tablero y quedaba borrosa. */
.chip{background:var(--crema); border-radius:50%; flex:none; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  width:46px; height:46px}
.chip img{width:auto !important; height:37px !important; display:block}
footer .marca .chip{width:56px; height:56px}
footer .marca .chip img{height:45px !important}

/* placa del hero: el lockup completo, a color, sobre su propio fondo claro */
.placa{background:var(--crema); border-radius:14px; padding:30px 34px;
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 1px 0 rgba(255,255,255,.06)}
.placa img{width:100% !important; height:auto !important; max-width:330px; display:block}
@media (max-width:900px){ .placa{padding:22px 24px} .placa img{max-width:260px} }

/* ---------- LOS TRES OBISPOS ---------- */
/* Sustituyen a los escudos diocesanos: una persona con nombre pesa más que un
   emblema, y evita el problema de mostrar solo una de las tres diócesis. */
.prelados{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:12px}
@media (max-width:820px){ .prelados{grid-template-columns:1fr; gap:18px} }
.prelado{background:var(--crema); border-radius:8px; overflow:hidden;
  border:1px solid var(--linea); display:flex; flex-direction:column}
.prelado .retrato{aspect-ratio:4/5; background:#fff; overflow:hidden}
.prelado .retrato img{width:100%; height:100%; object-fit:cover;
  object-position:50% 16%; display:block}
.prelado .datos{padding:18px 20px 20px; display:grid; gap:5px}
.prelado .sede{font-family:var(--body); font-size:10px; font-weight:600;
  letter-spacing:.15em; text-transform:uppercase; color:var(--gris)}
.prelado b{font-family:var(--display); font-size:1.05rem; font-weight:700;
  color:var(--tinta); line-height:1.25}

/* ---------- POR QUÉ NACE · EL SISMO ---------- */
/* El sitio nunca decía qué pasó. Sin el hecho concreto —fecha y magnitud— el
   resto del relato flota: no se entiende de qué recuperación se habla. */
.sismo{display:grid; grid-template-columns:auto 1fr; gap:0 34px; align-items:center;
  background:rgba(255,255,255,.05); border:1px solid var(--linea-honda);
  border-left:3px solid var(--terra-2); border-radius:8px; padding:26px 30px; margin-top:8px}
@media (max-width:760px){ .sismo{grid-template-columns:1fr; gap:16px} }
.sismo-dato{display:grid; gap:4px; white-space:nowrap}
.sismo-dato .fecha{font-family:var(--display); font-size:1.5rem; font-weight:700;
  color:var(--on-marino); line-height:1.1}
.sismo-dato .mag{font-family:var(--body); font-size:11px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--terra-2)}
.sismo p{margin:0; font-size:.94rem; color:var(--on-marino-2); line-height:1.6}

/* ---------- EQUIPAR ESPERANZA ---------- */
.equipar-band{background:var(--marino); color:var(--on-marino); border-radius:8px;
  padding:24px 28px; display:grid; gap:8px; text-align:center}
.equipar-band b{font-family:var(--display); font-size:1.35rem; letter-spacing:.01em}
.equipar-band span{font-size:.9rem; color:var(--on-marino-2); line-height:1.6}
.equipar-cta{margin-top:24px; display:flex; gap:14px; flex-wrap:wrap; align-items:center}
.equipar-cta small{font-size:.86rem; color:var(--tinta-2)}

/* ---------- ESPERANZA 360 ---------- */
.e360{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:36px;
  align-items:start; margin-top:8px}
@media (max-width:820px){ .e360{grid-template-columns:1fr; gap:26px} }
.e360-que{background:rgba(255,255,255,.05); border:1px solid var(--linea-honda);
  border-radius:8px; padding:24px 26px}
.e360-que b{display:block; font-family:var(--display); font-size:1.3rem;
  color:var(--on-marino); margin-bottom:14px}
.e360-que ul{margin:0; padding:0; list-style:none; display:grid; gap:9px}
.e360-que li{font-size:.92rem; color:var(--on-marino-2); padding-left:16px; position:relative}
.e360-que li::before{content:"·"; position:absolute; left:4px; color:var(--dorado-2); font-weight:700}
.e360-flujo{margin:0; padding:0; list-style:none; display:grid; gap:10px}
.e360-flujo li{display:flex; align-items:center; gap:14px; font-size:.96rem;
  font-weight:600; color:var(--on-marino)}
.e360-flujo .n{flex:none; width:30px; height:30px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--body); font-size:.82rem; font-weight:700; color:var(--marino)}
.e360-flujo li:nth-child(1) .n{background:var(--terra-2)}
.e360-flujo li:nth-child(2) .n{background:var(--verde-2)}
.e360-flujo li:nth-child(3) .n{background:var(--marino-2)}
.e360-flujo li:nth-child(4) .n{background:var(--terra-2)}
.e360-flujo li:nth-child(5) .n{background:var(--dorado-2)}
.e360-flujo li:nth-child(6) .n{background:var(--verde-2)}

/* ---------- EQUIPAMIENTO POR LÍNEA (página interior) ---------- */
.equipo-linea{margin-bottom:46px}
.equipo-linea > h3{font-family:var(--display); font-size:1.5rem; margin:0 0 6px}
.equipo-linea > p.sub{margin:0 0 20px; color:var(--tinta-2); font-size:.98rem}
.listas{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
@media (max-width:820px){ .listas{grid-template-columns:1fr} }
.lista{background:var(--crema-2); border:1px solid var(--linea); border-radius:8px;
  padding:20px 22px; border-top:3px solid var(--dorado)}
.lista h4{font-family:var(--body); font-size:10.5px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--dorado-t); margin:0 0 12px}
.lista ul{margin:0; padding:0; list-style:none; display:grid; gap:8px}
.lista li{font-size:.92rem; color:var(--tinta-2); line-height:1.45}

/* ---------- BLOQUE INSTITUCIONAL (Quiénes somos) ---------- */
.mv{display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:8px}
@media (max-width:760px){ .mv{grid-template-columns:1fr} }
.mv > div{background:var(--crema-2); border:1px solid var(--linea); border-radius:8px;
  padding:26px 28px; border-top:3px solid var(--dorado)}
.mv > div:last-child{border-top-color:var(--verde)}
.mv h3{font-family:var(--body); font-size:11px; font-weight:600; letter-spacing:.15em;
  text-transform:uppercase; color:var(--dorado-t); margin:0 0 12px}
.mv:last-child h3{color:var(--verde)}
.mv p{margin:0; font-size:1rem; color:var(--tinta-2); line-height:1.65}
.proposito{margin-top:22px; background:var(--marino); color:var(--on-marino);
  border-radius:8px; padding:26px 30px; text-align:center}
.proposito span{display:block; font-family:var(--body); font-size:11px; font-weight:600;
  letter-spacing:.15em; text-transform:uppercase; color:var(--dorado-2); margin-bottom:8px}
.proposito b{font-family:var(--display); font-size:1.5rem; font-weight:700; letter-spacing:-.01em}
.principios{display:flex; flex-wrap:wrap; gap:10px; margin-top:8px}
.principios li{list-style:none; font-family:var(--body); font-size:.94rem; font-weight:600;
  color:var(--tinta); background:var(--crema-2); border:1px solid var(--linea);
  border-left:3px solid var(--dorado); border-radius:5px; padding:11px 18px}
.principios{margin:0; padding:0}
/* las tarjetas de navegación de la portada llevan enlace en el título */
.forma h3 a{color:inherit; text-decoration:none; border-bottom:1px solid var(--linea)}
.forma h3 a:hover{color:var(--dorado-t); border-bottom-color:var(--dorado)}
.forma h3 a:focus-visible{outline:2px solid var(--dorado); outline-offset:3px}

/* ---------- MEMORIA Y TRANSFORMACIÓN ---------- */
/* La guía visual pide fotografía protagonista y mensajes breves. Las fotos son
   documentales y reales; la regla de la guía es no saturar de destrucción:
   un solo bloque de contexto, el resto mira hacia la recuperación. */
.municipio{margin-bottom:44px}
.municipio-cab{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
  padding-bottom:12px; margin-bottom:18px; border-bottom:1px solid var(--linea)}
.municipio-cab h3{font-family:var(--display); font-size:1.6rem; margin:0; letter-spacing:-.01em}
.municipio-cab .dep{font-family:var(--body); font-size:11px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--dorado-t)}
.municipio-cab .nota{margin-left:auto; font-size:.88rem; color:var(--gris)}
/* Cuadrícula de fotos, en cuadrado. Las miniaturas se recortan con
   object-fit; la foto entera se ve al ampliarla, así que el recorte no
   esconde nada: es solo la manera de que la retícula quede pareja. */
.galeria{display:grid; grid-template-columns:repeat(4,1fr); gap:10px}
@media (max-width:900px){ .galeria{grid-template-columns:repeat(3,1fr); gap:6px} }
@media (max-width:520px){ .galeria{grid-template-columns:repeat(3,1fr); gap:3px} }

.tesela{display:block; position:relative; aspect-ratio:1; overflow:hidden;
  border-radius:6px; background:var(--linea); scroll-margin-top:110px}
.tesela img{width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .35s ease, filter .35s ease}
.tesela:hover img,.tesela:focus-visible img{transform:scale(1.05); filter:brightness(1.05)}
.tesela:focus-visible{outline:3px solid var(--dorado); outline-offset:2px}
/* El icono de ampliar solo aparece al pasar por encima; en táctil no estorba. */
.tesela::after{content:"⤢"; position:absolute; right:8px; bottom:6px; color:#fff;
  font-size:.95rem; line-height:1; text-shadow:0 1px 3px rgba(0,0,0,.6);
  opacity:0; transition:opacity .25s ease}
.tesela:hover::after{opacity:.9}
@media (hover:none){ .tesela::after{display:none} }

/* ---- Visor ampliado, sin JavaScript ----
   Cada foto es un destino (:target). El fondo es un enlace que devuelve a la
   miniatura, así que cerrar también reposiciona la página donde estaba. */
.lupa{display:none}
.lupa:target{display:flex; position:fixed; inset:0; z-index:90;
  align-items:center; justify-content:center; padding:20px;
  background:rgba(19,35,63,.94)}
.lupa-fondo{position:absolute; inset:0; cursor:zoom-out}
.lupa figure{position:relative; margin:0; max-width:min(1100px,94vw);
  display:flex; flex-direction:column; gap:12px}
.lupa img{max-width:100%; max-height:76vh; width:auto; height:auto;
  object-fit:contain; border-radius:8px; display:block; margin-inline:auto}
.lupa figcaption{color:var(--on-marino); font-size:.92rem; text-align:center;
  display:flex; flex-direction:column; gap:12px}
.lupa figcaption nav{display:flex; gap:10px; justify-content:center; flex-wrap:wrap}
.lupa figcaption a{color:var(--on-marino-2); text-decoration:none; font-size:.86rem;
  font-weight:600; padding:8px 18px; border-radius:999px;
  border:1px solid rgba(239,237,234,.3)}
.lupa figcaption a:hover{color:var(--on-marino); border-color:var(--dorado)}
.lupa figcaption a.cerrar{background:var(--dorado); color:var(--marino); border-color:transparent}
@media (max-width:520px){
  .lupa:target{padding:10px}
  .lupa img{max-height:66vh}
  .lupa figcaption{font-size:.84rem}
}
/* Quien prefiere menos movimiento no ve el zoom de las miniaturas. */
@media (prefers-reduced-motion:reduce){
  .tesela img{transition:none}
  .tesela:hover img{transform:none}
}

/* franja navy de mensaje alto impacto, como en el catálogo */
.mensaje{background:var(--marino); color:var(--on-marino); border-radius:10px;
  padding:38px 42px; text-align:center; margin:8px 0 0}
.mensaje p{margin:0; font-family:var(--display); font-size:clamp(1.25rem,2.6vw,1.75rem);
  line-height:1.35; max-width:44ch; margin-inline:auto}
.mensaje .pie{display:block; margin-top:14px; font-family:var(--body); font-size:.86rem;
  color:var(--on-marino-2); letter-spacing:.02em}

/* evolución del proyecto: estado inicial → diagnóstico → intervención → resultado */
.evolucion{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:8px}
@media (max-width:900px){ .evolucion{grid-template-columns:repeat(2,1fr)} }
.etapa{background:var(--crema-2); border:1px solid var(--linea); border-radius:8px;
  overflow:hidden; display:flex; flex-direction:column}
.etapa .marco{aspect-ratio:4/3; background:var(--linea); display:flex;
  align-items:center; justify-content:center}
.etapa .marco img{width:100%; height:100%; object-fit:cover; display:block}
.etapa .vacio{font-family:var(--body); font-size:.82rem; color:var(--gris); text-align:center;
  padding:0 16px; line-height:1.45}
.etapa .txt{padding:14px 16px 16px}
.etapa b{display:block; font-family:var(--body); font-size:10px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--dorado-t); margin-bottom:5px}
.etapa span{font-size:.88rem; color:var(--tinta-2); line-height:1.45}
.etapa--pendiente{opacity:.72}

/* el bloque de contexto del sismo: una sola foto, como pide la guía */
.sismo-foto{display:grid; grid-template-columns:minmax(0,.42fr) minmax(0,1fr);
  gap:30px; align-items:center; margin-top:26px}
@media (max-width:760px){ .sismo-foto{grid-template-columns:1fr; gap:20px} }
.sismo-foto img{width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:10px; display:block}
.sismo-foto .kicker{margin:0 0 18px}

/* Llamada a la vitrina de entidades, en Nuestra alianza. */
.aviso-aliados{background:var(--crema-2); border:1px solid var(--linea);
  border-left:4px solid var(--dorado); border-radius:10px; padding:20px 24px;
  margin:26px 0 0}
.aviso-aliados p{margin:0 0 12px}
.aviso-aliados p:last-child{margin:0}

/* Ficha de equipo sin retrato. Publicar la foto de alguien exige su
   consentimiento; mientras no lo haya, un monograma sobrio mantiene la
   retícula pareja sin fingir que hay una foto. */
.persona .foto.sin-foto{display:flex; align-items:center; justify-content:center;
  background:var(--marino); color:var(--on-marino-2)}
.persona .foto.sin-foto span{font-family:var(--display); font-size:2.6rem;
  font-weight:700; letter-spacing:.06em}


/* ---------- NAVEGACIÓN SOBRE FONDO CLARO (guía v4) ---------- */
.hero .nav .brand b,
.cabecera .nav .brand b{color:var(--marino)}
.hero .nav a.link,
.cabecera .nav a.link{color:var(--tinta-2)}
.hero .nav a.link:hover, .hero .nav a.link[aria-current],
.cabecera .nav a.link:hover, .cabecera .nav a.link[aria-current]{color:var(--marino)}
.hero .nav a.lang,
.cabecera .nav a.lang{color:var(--tinta-2); border-color:var(--linea)}
.hero .nav a.lang:hover,
.cabecera .nav a.lang:hover{color:var(--marino); border-color:var(--dorado)}
.hero .nav a.acceso,
.cabecera .nav a.acceso{color:var(--gris)}
.hero .nav a.acceso:hover,
.cabecera .nav a.acceso:hover{color:var(--marino)}
/* Sobre blanco el logo no necesita disco: ya tiene su propio fondo. */
.hero .nav .brand .chip,
.cabecera .nav .brand .chip{background:transparent}

/* ---------- Tres pilares de la portada (lámina 1 de la v4) ---------- */
.pilares{display:grid; grid-template-columns:repeat(3,1fr); gap:0;
  border-top:1px solid var(--linea); margin-top:46px; padding-top:26px}
@media (max-width:820px){ .pilares{grid-template-columns:1fr; gap:22px} }
.pilar{display:flex; gap:16px; align-items:flex-start; padding-right:26px}
.pilar .num{font-family:var(--display); font-size:1.65rem; font-weight:700;
  color:var(--dorado); line-height:1; flex:none; margin-top:2px}
.pilar b{display:block; font-family:var(--body); font-size:.78rem; font-weight:700;
  letter-spacing:.11em; text-transform:uppercase; color:var(--marino); line-height:1.35}
.pilar span{display:block; font-size:.92rem; color:var(--gris); margin-top:3px}
.dst .etiq{margin-top:10px; font-size:.74rem; letter-spacing:.12em;
  text-transform:uppercase; font-weight:700; color:var(--dorado-t)}

/* Cuatro líneas productivas desde la guía v4 del 23/09/2026: tapicería y
   costura dejan de ir juntas, y «metalistería» pasa a «herrería y
   metalmecánica», que es como la nombra la lámina. */
.lineas-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1000px){ .lineas-4{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .lineas-4{grid-template-columns:1fr} }

/* ---------- Escudos diocesanos (página Diócesis) ---------- */
.escudos{display:grid; grid-template-columns:repeat(5,1fr); gap:16px; margin-top:28px}
@media (max-width:980px){ .escudos{grid-template-columns:repeat(3,1fr)} }
@media (max-width:620px){ .escudos{grid-template-columns:repeat(2,1fr); gap:10px} }
.escudo{margin:0; background:#fff; border:1px solid var(--linea); border-radius:8px;
  padding:20px 14px 18px; display:flex; flex-direction:column; align-items:center; gap:14px}
/* `contain` y nunca `cover`: un escudo diocesano no se recorta. */
.escudo img{height:110px; width:100%; object-fit:contain; display:block}
@media (max-width:620px){ .escudo img{height:78px} }
.escudo figcaption{text-align:center; line-height:1.35}
.escudo figcaption b{display:block; font-size:.9rem; color:var(--marino)}
.escudo figcaption span{display:block; font-size:.78rem; color:var(--gris); margin-top:2px}

/* ---------- Render conceptual (Archivo) ---------- */
.render{margin:26px 0 0; background:#fff; border:1px solid var(--linea);
  border-radius:10px; overflow:hidden}
.render img{width:100%; height:auto; display:block}
/* El rótulo va PEGADO a la imagen y siempre visible: una pieza conceptual
   que se recorta o se comparte sin su etiqueta se lee como una fotografía. */
.render figcaption{padding:14px 20px 16px; font-size:.9rem; color:var(--tinta-2);
  border-top:3px solid var(--dorado); background:var(--crema-2)}
.render figcaption b{display:block; color:var(--marino); font-size:.78rem;
  letter-spacing:.1em; text-transform:uppercase; margin-bottom:4px}
/* ---------- Galería de renders del taller ----------
   Varios renders juntos corren un riesgo que uno solo no tiene: en cuadrícula
   se leen como un álbum de fotos. Por eso cada uno lleva su rótulo ENCIMA de
   la imagen y no debajo —viaja con la captura de pantalla— además del pie. */
.renders{display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:26px}
@media (max-width:760px){ .renders{grid-template-columns:1fr} }
.renders .ancho{grid-column:1/-1}
.rnd{margin:0; background:#fff; border:1px solid var(--linea);
  border-radius:10px; overflow:hidden; position:relative}
.rnd img{width:100%; height:auto; display:block}
/* `.rotulo` es la convención de la casa para una etiqueta corta en versalitas,
   y va SIEMPRE acotada por su padre: ya existe en `.aliados-band` y en
   `.nivel`. Aquí, además, es lo único que separa un render de una fotografía
   cuando alguien recorta la pantalla, así que va encima de la imagen. */
.rnd .rotulo{position:absolute; top:10px; left:10px;
  background:rgba(19,35,63,.88); color:#fff; font-size:.68rem; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase; padding:5px 10px; border-radius:4px;
  backdrop-filter:blur(2px)}
.rnd figcaption{padding:12px 16px 14px; font-size:.86rem; color:var(--tinta-2);
  border-top:3px solid var(--dorado); background:var(--crema-2)}
.rnd figcaption b{display:block; color:var(--marino); font-family:var(--display);
  font-size:1rem; margin-bottom:3px}

.marco.sin-evidencia{display:flex; align-items:center; justify-content:center;
  background:var(--crema-2); border:1px dashed var(--linea)}
.marco.sin-evidencia span{font-size:.84rem; color:var(--gris); text-align:center; padding:10px}
.nota-archivo{margin-top:18px; font-size:.9rem; color:var(--tinta-2);
  border-left:3px solid var(--dorado); padding-left:14px; max-width:62ch}

/* ---------- Cuatro pilares de transparencia (lámina 9) ---------- */
.pilares-4{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:28px}
@media (max-width:980px){ .pilares-4{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .pilares-4{grid-template-columns:1fr} }
.p4{background:#fff; border:1px solid var(--linea); border-top:3px solid var(--dorado);
  border-radius:8px; padding:20px 22px}
.p4 b{display:block; font-family:var(--display); font-size:1.1rem; color:var(--marino);
  margin-bottom:6px}
.p4 p{margin:0; font-size:.93rem; color:var(--tinta-2)}

/* ---------- Cinco formas de participar ---------- */
.participar{list-style:none; margin:26px 0 0; padding:0; display:grid; gap:0}
.participar li{display:flex; gap:20px; align-items:flex-start; padding:18px 0;
  border-bottom:1px solid var(--linea)}
.participar li:last-child{border-bottom:0}
.participar span{font-family:var(--display); font-size:1.5rem; font-weight:700;
  color:var(--dorado); line-height:1; flex:none; min-width:2ch}
.participar b{display:block; font-size:1.02rem; color:var(--marino)}
.participar p{margin:3px 0 0; font-size:.93rem; color:var(--tinta-2)}

/* Con el menú de ocho secciones de la guía v4 el espacio se estrecha: la
   marca se partía en tres líneas. Se impide el corte y se ajusta la escala
   de los enlaces, que antes eran seis. */
.nav .brand b{white-space:nowrap}
@media (min-width:1151px){
  .nav{gap:18px}
  .nav a.link{font-size:.84rem; white-space:nowrap}
  .nav a.acceso{font-size:.76rem}
  .nav .btn{padding:11px 20px; font-size:.88rem; white-space:nowrap}
}

/* Las metas tienen fecha de corte. Cuando esa fecha pasa, la página no puede
   seguir hablando en futuro ni marcar nada como cumplido por su cuenta: lo
   dice y espera la revisión de la mesa regional. Mismo criterio que
   `.sin-evidencia` en el archivo. */
.nota-corte{
  margin-top:14px; padding:12px 16px;
  background:var(--tinte-dorado); border-left:3px solid var(--dorado);
  border-radius:0 8px 8px 0;
}