/* =====================================================================
   Vecino Centenario · Sitio público
   ===================================================================== */

.contenedor { width: min(1180px, 100% - 2rem); margin-inline: auto; }
.contenedor-angosto { width: min(860px, 100% - 2rem); margin-inline: auto; }
.saltar { position: absolute; left: 1rem; top: -100px; z-index: 100; background: var(--crema); color: var(--centenario); padding: .6rem 1rem; border-radius: var(--radio-s); font-weight: 700; }
.saltar:focus { top: .5rem; }

/* ---------- Barra institucional ---------- */
.barra-inst { background: var(--azul-950); color: var(--sobre-azul-suave); font-size: .8125rem; }
.barra-inst .contenedor { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 36px; }
.barra-inst a { color: var(--crema); text-decoration: none; display: inline-flex; align-items: center; gap: .3rem; }
.barra-inst a:hover { color: var(--blanco); text-decoration: underline; }
.barra-inst .enlaces { display: flex; gap: 1.25rem; }
@media (max-width: 640px) { .barra-inst .ocultar-movil { display: none; } }

/* ---------- Encabezado ---------- */
.encabezado { position: sticky; top: 0; z-index: 40; background: rgba(255, 255, 255, .96); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--linea); }
.encabezado .contenedor { display: flex; align-items: center; gap: 1.25rem; min-height: 76px; }
.marca { display: flex; align-items: center; gap: 1rem; text-decoration: none; color: inherit; margin-right: auto; }
.marca-muni { display: flex; align-items: center; gap: .55rem; color: var(--centenario); font-family: var(--fuente-titulo); line-height: 1; }
.marca-muni img { width: 25px; height: 46px; }
.marca-muni b { display: block; font-size: 1.15rem; font-weight: 700; letter-spacing: -.01em; }
.marca-muni small { display: block; margin-top: .2rem; font-size: .72rem; font-weight: 500; text-align: right; }
.marca-sep { width: 1px; height: 40px; background: var(--linea); }
.marca-vc { width: 156px; height: auto; }
.nav { display: flex; align-items: center; gap: .25rem; }
.nav a:not(.btn) { padding: .5rem .75rem; border-radius: var(--radio-s); color: var(--tinta-700); font-family: var(--fuente-titulo); font-weight: 500; text-decoration: none; font-size: .95rem; }
.nav a:not(.btn):hover { background: var(--arena-100); color: var(--azul-900); }
.nav a[aria-current="page"]:not(.btn) { color: var(--centenario); font-weight: 600; box-shadow: inset 0 -3px 0 var(--terracota); border-radius: 0; }
.nav .btn { margin-left: .5rem; }
.btn-menu { display: none; }
@media (max-width: 980px) {
  .marca { gap: .7rem; }
  .marca-vc { width: 124px; }
  .btn-menu { display: inline-flex; }
  .nav { position: absolute; inset: 100% 0 auto 0; flex-direction: column; align-items: stretch; gap: 0; padding: .75rem 1rem 1.25rem; background: var(--blanco); border-bottom: 1px solid var(--linea); box-shadow: var(--sombra); display: none; }
  .nav.abierto { display: flex; }
  .nav a:not(.btn) { padding: .85rem .5rem; border-bottom: 1px solid var(--arena-100); border-radius: 0; }
  .nav a[aria-current="page"]:not(.btn) { box-shadow: inset 3px 0 0 var(--terracota); padding-left: .9rem; }
  .nav .btn { margin: 1rem 0 0; }
}
@media (max-width: 420px) { .marca-muni span { display: none; } .marca-sep { height: 32px; } }

/* ---------- Antetítulo (usado en el encabezado del formulario) ---------- */
.antetitulo { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--fuente-titulo); font-size: .8rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--terra-300); margin-bottom: 1.1rem; }
.antetitulo::before { content: ""; width: 28px; height: 2px; background: var(--terra-300); }

/* ---------- Galería ---------- */
.galeria-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1.5rem; }
.persona { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-l); overflow: hidden; display: flex; flex-direction: column; transition: transform var(--transicion), box-shadow var(--transicion); }
.persona:hover { transform: translateY(-3px); box-shadow: var(--sombra); }
.persona-foto { aspect-ratio: 4 / 4.2; background: var(--acero-100); position: relative; overflow: hidden; }
.persona-foto img { width: 100%; height: 100%; object-fit: cover; }
.persona-foto .iniciales { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--fuente-titulo); font-weight: 600; font-size: 4rem; color: var(--centenario); background: var(--crema); }
.persona-foto .estado { position: absolute; left: .75rem; top: .75rem; box-shadow: var(--sombra-s); }
.persona-cuerpo { padding: 1.1rem 1.2rem 1.3rem; display: grid; gap: .35rem; }
.persona-cuerpo h3 { font-family: var(--fuente-titulo); font-weight: 600; font-size: 1.25rem; margin: 0; }
.persona-meta { display: flex; flex-wrap: wrap; gap: .25rem .9rem; font-size: .875rem; color: var(--tinta-500); }
.persona-meta span { display: inline-flex; gap: .3rem; align-items: center; }
.persona-cuerpo p { margin: .35rem 0 0; font-size: .95rem; color: var(--tinta-700); }

/* ---------- Páginas internas ---------- */
.cabecera-pagina { background: var(--centenario); color: var(--sobre-azul); position: relative; overflow: hidden; isolation: isolate; }
.cabecera-pagina .contenedor, .cabecera-pagina .contenedor-angosto { padding-block: 2.75rem 2.5rem; }
.cabecera-pagina h1 { color: var(--blanco); font-size: clamp(2rem, 4.5vw, 3rem); margin-bottom: .4rem; }
/* Pincelada de la línea gráfica bajo el título */
.cabecera-pagina h1::after { content: ""; display: block; width: min(220px, 60%); height: 20px; margin-top: .45rem; background: var(--terracota); -webkit-mask: url("../img/pincel.webp") 0 50% / 100% 100% no-repeat; mask: url("../img/pincel.webp") 0 50% / 100% 100% no-repeat; }
.cabecera-pagina p { margin: 0; font-size: 1.1rem; max-width: 42em; }
.migas { font-size: .85rem; margin-bottom: .8rem; color: var(--sobre-azul-suave); }
.migas a { color: var(--crema); }
.contenido { padding-block: 2.5rem 4rem; }
.prosa { font-size: 1.05rem; }
.prosa h2 { font-size: 1.6rem; margin-top: 2.2rem; }
.prosa h3 { margin-top: 1.6rem; font-size: 1.15rem; }
.prosa ul, .prosa ol { padding-left: 1.3rem; }
.prosa li { margin-bottom: .4rem; }
.prosa .aviso { margin: 1.5rem 0; }
.sello-borrador { display: inline-flex; gap: .4rem; align-items: center; font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--amarillo-800); background: var(--amarillo-100); border: 1px dashed var(--amarillo-300); padding: .3rem .7rem; border-radius: 6px; }

/* ---------- Pie ---------- */
.pie { background: var(--centenario); color: var(--sobre-azul-suave); font-size: .95rem; border-top: 4px solid var(--terracota); }
.pie .contenedor { padding-block: 3.5rem 2rem; }
.pie-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem; }
.pie h2 { font-family: var(--fuente-titulo); font-weight: 600; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--terra-300); margin-bottom: 1rem; }
.pie a { color: var(--crema); text-decoration: none; }
.pie a:hover { color: var(--blanco); text-decoration: underline; }
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.pie li { display: flex; gap: .6rem; align-items: flex-start; }
.pie li .ico { margin-top: .2em; color: var(--terra-300); }
.pie-marca { display: block; width: 230px; margin-bottom: 1.25rem; }
.pie-muni { display: flex; align-items: center; gap: .6rem; margin-top: 1.25rem; color: var(--crema); font-family: var(--fuente-titulo); line-height: 1.05; }
.pie-muni img { width: 22px; height: 40px; }
.pie-muni b { display: block; font-size: 1rem; }
.pie-muni small { display: block; font-size: .7rem; font-weight: 500; }
.pie-legal { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(234, 220, 202, .14); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; font-size: .85rem; color: var(--acero-400); }
@media (max-width: 860px) { .pie-grid { grid-template-columns: 1fr; gap: 2rem; } }

/* ---------- Mensajes flash ---------- */
.flash-zona { display: grid; gap: .6rem; margin-block: 1.25rem; }

/* ---------- Seguimiento ---------- */
.linea-tiempo { list-style: none; margin: 0; padding: 0; position: relative; }
.linea-tiempo::before { content: ""; position: absolute; left: 11px; top: 8px; bottom: 8px; width: 2px; background: var(--linea); }
.linea-tiempo li { position: relative; padding: 0 0 1.4rem 2.5rem; }
.linea-tiempo li:last-child { padding-bottom: 0; }
.linea-tiempo .punto { position: absolute; left: 0; top: 2px; width: 24px; height: 24px; border-radius: 50%; background: var(--blanco); border: 2px solid var(--acero-500); display: grid; place-items: center; }
.linea-tiempo li:last-child .punto { background: var(--azul-700); border-color: var(--azul-700); color: var(--blanco); }
.linea-tiempo .punto svg { width: 13px; height: 13px; stroke-width: 3; }
.linea-tiempo time { display: block; font-size: .85rem; color: var(--tinta-500); }

/* ---------- Comprobante ---------- */
.comprobante { max-width: 720px; margin: -3.5rem auto 0; position: relative; z-index: 2; }
.comprobante-cabeza { text-align: center; padding: 2.25rem 1.5rem 1.5rem; border-bottom: 1px dashed var(--linea); }
.comprobante-ok { width: 72px; height: 72px; margin: 0 auto 1rem; border-radius: 50%; display: grid; place-items: center; background: var(--verde-100); color: var(--verde-700); animation: aparecer .5s cubic-bezier(.2, .9, .3, 1.3) both; }
.comprobante-ok .ico { width: 38px; height: 38px; stroke-width: 2.4; }
@keyframes aparecer { from { transform: scale(.4); opacity: 0; } }
.folio { display: inline-block; margin-top: .75rem; padding: .75rem 2.6rem .8rem 1.6rem; background: url("../img/papel-acero.webp") 0 0 / 100% 100% no-repeat; font-family: var(--fuente-titulo); font-size: 1.7rem; font-weight: 700; letter-spacing: .06em; color: var(--azul-900); }
.datos-lista { display: grid; grid-template-columns: max-content 1fr; gap: .55rem 1.5rem; margin: 0; }
.datos-lista dt { color: var(--tinta-500); font-size: .925rem; }
.datos-lista dd { margin: 0; font-weight: 500; }
@media (max-width: 520px) { .datos-lista { grid-template-columns: 1fr; gap: .1rem; } .datos-lista dd { margin-bottom: .6rem; } }

/* ---------- Página de error ---------- */
.pagina-error { text-align: center; padding-block: 5rem; }
.pagina-error .codigo { font-family: var(--fuente-titulo); font-weight: 700; font-size: 5rem; color: var(--terracota); line-height: 1; }

/* ---------- Impresión ---------- */
@media print {
  .barra-inst, .encabezado, .pie, .no-imprimir { display: none !important; }
  body { background: #fff; font-size: 12pt; }
  .cabecera-pagina { background: #fff; color: #000; border-bottom: 2px solid #000; }
  .cabecera-pagina h1 { color: #000; }
  .comprobante { margin-top: 1rem; box-shadow: none; }
  .tarjeta { box-shadow: none; border-color: #999; }
}

mark.por-definir { background: var(--amarillo-100); color: var(--amarillo-800); padding: .05em .4em; border-radius: 4px; font-weight: 600; font-size: .9em; border: 1px dashed var(--amarillo-300); white-space: nowrap; }

/* ---------- Tarjetas de la galería (clic para ver la historia) ---------- */
a.persona { color: inherit; text-decoration: none; cursor: pointer; }
a.persona:hover { color: inherit; }
a.persona:focus-visible { box-shadow: var(--foco); border-radius: var(--radio-l); }
a.persona:hover .persona-foto img { transform: scale(1.03); }
.persona-foto img { transition: transform .4s ease; }
.persona-cuerpo { flex: 1; }
.persona-mas { display: inline-flex; align-items: center; gap: .35rem; margin-top: .6rem; font-size: .875rem; font-weight: 600; color: var(--terracota); }
a.persona:hover .persona-mas { color: var(--terra-700); gap: .55rem; }
.persona-mas { transition: gap var(--transicion); }

/* ---------- Ventana "tarjeta" de una persona ---------- */
.modal-persona { width: min(980px, calc(100% - 2rem)); max-height: calc(100vh - 2rem); padding: 0; border: 0; border-radius: 20px; background: var(--blanco); box-shadow: 0 30px 80px rgba(2, 28, 41, .45); overflow: hidden; color: var(--tinta-900); }
.modal-persona::backdrop { background: rgba(2, 28, 41, .72); backdrop-filter: blur(4px); }
.modal-persona[open] { animation: modal-entrar .28s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes modal-entrar { from { opacity: 0; transform: translateY(16px) scale(.98); } }
.modal-persona .ficha-persona { max-height: calc(100vh - 2rem); }
.modal-persona .ficha-persona-cuerpo { overflow-y: auto; }

.ficha-persona { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.ficha-persona-foto { position: relative; min-height: 420px; background: var(--crema); }
.ficha-persona-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ficha-persona-foto .iniciales { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--fuente-titulo); font-weight: 600; font-size: 6rem; color: var(--centenario); }
.ficha-persona-foto::after { content: ""; position: absolute; inset: auto 0 0 0; height: 40%; background: linear-gradient(to top, rgba(2, 28, 41, .55), transparent); pointer-events: none; }
/* Logo "troquel" sobre la foto, como en los videos */
.ficha-persona-foto img.ficha-persona-sello { inset: auto auto 1rem 1rem; z-index: 1; width: 150px; height: auto; object-fit: contain; filter: drop-shadow(0 4px 10px rgba(2, 28, 41, .35)); }
.es-centenario .ficha-persona-foto { box-shadow: inset 0 0 0 6px var(--terracota); }

.ficha-persona-cuerpo { position: relative; padding: clamp(1.5rem, 3.5vw, 2.5rem); display: flex; flex-direction: column; gap: 1.1rem; }
.ficha-persona-kicker { display: inline-flex; align-items: center; gap: .4rem; align-self: flex-start; padding: .3rem .75rem; border-radius: 99px; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: var(--acero-50); color: var(--azul-800); }
.es-centenario .ficha-persona-kicker { background: var(--terracota); color: var(--blanco); }
.ficha-persona-nombre { font-size: clamp(1.7rem, 3.4vw, 2.35rem); line-height: 1.5; margin: -.2rem 0 0; padding-right: 2.5rem; }
/* Nombre sobre papel rasgado, como en los generadores de caracteres (GC) de los videos.
   Cada línea del nombre lleva su propia franja. */
.gc-nombre { padding: .12em 1.5em .16em .45em; margin-left: -.45em; background: url("../img/papel-acero.webp") 0 0 / 100% 100% no-repeat; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.es-centenario .gc-nombre { background-image: url("../img/papel-terracota.webp"); }
.ficha-persona-datos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .6rem; }
.ficha-persona-datos li { display: flex; align-items: center; gap: .65rem; padding: .65rem .75rem; border: 1px solid var(--linea); border-radius: 12px; background: var(--arena-50); }
.dato-ico { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--terracota); color: var(--crema); box-shadow: var(--sombra-s); }
.ficha-persona-datos b { display: block; font-size: .98rem; line-height: 1.25; color: var(--tinta-900); }
.ficha-persona-datos small { display: block; font-size: .78rem; color: var(--tinta-500); }
.ficha-persona h3 { font-family: var(--fuente-titulo);  font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--terracota); margin: 0 0 .5rem; }
.ficha-persona-historia blockquote { margin: 0; padding: .2rem 0 .2rem 1.1rem; border-left: 3px solid var(--terracota); }
.ficha-persona-historia p { margin: 0; font-style: italic; font-size: 1.1rem; line-height: 1.6; color: var(--tinta-700); }
.ficha-persona-aportes ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.ficha-persona-aportes li { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .75rem; border-radius: 99px; background: var(--verde-100); color: var(--verde-800); font-size: .875rem; font-weight: 600; }
.ficha-persona-pie { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--linea); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; }
.ficha-persona-pie p { margin: 0; display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; color: var(--tinta-500); }
.ficha-persona-acciones { display: flex; flex-wrap: wrap; gap: .35rem; }
.modal-cerrar { position: absolute; top: 1rem; right: 1rem; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--linea); background: var(--blanco); color: var(--tinta-700); display: grid; place-items: center; cursor: pointer; transition: all var(--transicion); z-index: 2; }
.modal-cerrar:hover { background: var(--arena-100); color: var(--azul-900); transform: rotate(90deg); }
.ficha-persona-pagina { overflow: hidden; }

@media (max-width: 760px) {
  .modal-persona { width: 100%; max-width: 100%; max-height: 100%; height: 100%; margin: 0; border-radius: 0; }
  .modal-persona .ficha-persona { max-height: 100%; height: 100%; overflow-y: auto; }
  .modal-persona .ficha-persona-cuerpo { overflow: visible; }
  .ficha-persona { display: block; }
  .ficha-persona-foto { min-height: 0; height: min(80vw, 440px); }
  .modal-cerrar { position: fixed; top: .75rem; right: .75rem; box-shadow: var(--sombra); }
  .ficha-persona-nombre { padding-right: 0; }
}
@media print { .modal-persona { display: none; } }

/* ---------- Portada = formulario de postulación ---------- */
.cabecera-postular .contenedor-angosto { padding-block: 2.6rem 2.4rem; }
.cabecera-postular-grid { display: grid; grid-template-columns: 1fr 280px; gap: 2rem; align-items: center; }
.cabecera-postular h1 { font-size: clamp(2rem, 5vw, 3rem); line-height: 1.08; margin-bottom: .6rem; }
.cabecera-postular p { font-size: 1.1rem; color: var(--sobre-azul); }
.cabecera-postular .antetitulo { margin-bottom: .8rem; }
.cabecera-postular-logo { width: 280px; filter: drop-shadow(0 12px 24px rgba(2, 28, 41, .5)); transform: rotate(-2deg); }

/* Requisitos con el recurso gráfico de "fecha" y "ubicación":
   círculo terracota con ícono + papel rasgado con pincelada. */
.requisitos-rapidos { list-style: none; margin: 1.6rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .9rem 1.4rem; }
.requisitos-rapidos li { position: relative; display: inline-flex; align-items: center; min-height: 46px; margin-left: 1.1rem; padding: .35rem 1.3rem .75rem 1.9rem; background: url("../img/papel-rasgado.webp") 0 0 / 100% 100% no-repeat; color: var(--centenario); font-size: .92rem; font-weight: 600; line-height: 1.25; }
.requisitos-rapidos li .ico-s { position: absolute; left: -1.15rem; top: 50%; width: 2.5rem; height: 2.5rem; padding: .55rem; margin-top: -1.35rem; border-radius: 50%; background: var(--terracota); color: var(--crema); stroke-width: 2.2; box-shadow: 0 2px 6px rgba(2, 28, 41, .35); }
.requisitos-rapidos li.plazo { color: var(--terra-700); }
@media (max-width: 760px) {
  .cabecera-postular-grid { grid-template-columns: 1fr; gap: 0; }
  .cabecera-postular-logo { display: none; }
}
@media (max-width: 640px) {
  .cabecera-postular .contenedor-angosto { padding-block: 1.5rem 1.5rem; }
  .cabecera-postular .antetitulo { display: none; }
  .cabecera-postular h1 { font-size: 1.75rem; margin-bottom: .45rem; }
  .cabecera-pagina h1::after { width: 150px; height: 14px; margin-top: .3rem; }
  .cabecera-postular p { font-size: .95rem; line-height: 1.5; }
  .requisitos-rapidos { margin-top: 1.1rem; gap: .55rem; }
  .requisitos-rapidos li { font-size: .82rem; min-height: 38px; padding: .3rem 1rem .6rem 1.55rem; margin-left: .95rem; }
  .requisitos-rapidos li .ico-s { width: 2.1rem; height: 2.1rem; padding: .45rem; left: -.95rem; margin-top: -1.15rem; }
}