/* ════════════════════════════════════════════════════════════════════════
   Web de campaña · Elmo Pacheco
   Dos paletas a propósito:
     · la PÚBLICA usa los colores de Alianza para el Progreso,
     · el PANEL usa neutros de alto contraste. Misma decisión que en DETALLES
       FINOS: la marca es para quien visita; quien trabaja horas dentro
       necesita contraste y densidad, no estética.
   ════════════════════════════════════════════════════════════════════════ */
:root{
  --azul:#0F2A6B; --azul-hondo:#081A44; --azul-luz:#1B62D6;
  --rojo:#DD2027; --rojo-texto:#C8181F; --rojo-hondo:#A81219;
  --papel:#FFFFFF; --papel-gris:#EEF3FB; --tinta:#0F2A6B; --suave:#4C639B;
  --linea:rgba(15,42,107,.16); --linea-f:rgba(15,42,107,.32);
  --display:"Montserrat",system-ui,-apple-system,"Segoe UI",sans-serif;
  --texto:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --ancho:76rem;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--papel);color:var(--tinta);font-family:var(--texto);
     font-size:1.0625rem;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:var(--rojo-texto)}
:focus-visible{outline:3px solid var(--rojo);outline-offset:3px}
.env{max-width:var(--ancho);margin-inline:auto;padding-inline:clamp(1.25rem,4vw,3rem)}
h1,h2,h3{font-family:var(--display);margin:0;text-wrap:balance;letter-spacing:-.015em}
h2{font-size:clamp(1.9rem,5vw,3.1rem);font-weight:900;text-transform:uppercase;line-height:1.02}
h3{font-size:1.15rem;font-weight:800;text-transform:uppercase;line-height:1.2}
p{margin:0 0 1rem}
.eti{font-family:var(--display);font-weight:700;font-size:.76rem;letter-spacing:.2em;
     text-transform:uppercase;color:var(--rojo-texto);margin:0 0 .55rem}
.medida{max-width:62ch}

/* ── barra superior ── */
.barra{background:var(--rojo);color:#fff;font-family:var(--display);font-weight:700;
       font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;text-align:center;
       padding:.6rem 1rem;position:sticky;top:0;z-index:50}
.barra a{color:#fff;text-decoration:none;border-bottom:2px solid rgba(255,255,255,.55)}

/* ── portada ── */
.portada{position:relative;background:var(--azul);color:#fff;overflow:hidden;
         border-bottom:6px solid var(--rojo)}
.portada-fondo{position:absolute;inset:0;z-index:0}
.portada-fondo img{width:100%;height:100%;object-fit:cover;object-position:center 25%}
.portada-fondo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,var(--azul) 0%,rgba(15,42,107,.94) 42%,
             rgba(15,42,107,.55) 70%,rgba(15,42,107,.35) 100%)}
.portada .env{position:relative;z-index:1;padding-block:clamp(3rem,8vw,6rem)}
.portada h1{font-size:clamp(3rem,10vw,7rem);font-weight:900;line-height:.9;
            text-transform:uppercase;margin:0}
.portada h1 span{display:block}
.cargo{display:inline-block;background:var(--rojo);color:#fff;font-family:var(--display);
       font-weight:800;text-transform:uppercase;font-size:clamp(1.1rem,3vw,1.9rem);
       padding:.16em .5em;margin-top:.7rem}
.consigna{margin:1.6rem 0 0;display:flex;flex-direction:column;align-items:flex-start;gap:.22em}
.consigna span{background:#fff;color:var(--azul);font-family:var(--display);font-weight:800;
       text-transform:uppercase;font-size:clamp(1rem,2.4vw,1.55rem);padding:.18em .48em;line-height:1.2}
.entradilla{margin-top:1.75rem;max-width:44ch;font-size:clamp(1.05rem,2vw,1.3rem);
            color:rgba(255,255,255,.92)}
.partido{font-family:var(--display);font-weight:700;font-size:.8rem;letter-spacing:.16em;
         text-transform:uppercase;color:rgba(255,255,255,.72);margin:1.75rem 0 0}
.acciones{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2rem}
.btn{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--display);
     font-weight:800;text-transform:uppercase;letter-spacing:.02em;font-size:.95rem;
     padding:.95rem 1.7rem;border:0;cursor:pointer;text-decoration:none;
     background:var(--rojo);color:#fff}
.btn:hover{background:var(--rojo-hondo);color:#fff}
.btn-linea{background:transparent;color:#fff;border:2px solid #fff}
.btn-linea:hover{background:#fff;color:var(--azul)}

/* ── secciones ── */
.sec{padding-block:clamp(3rem,7vw,5.5rem);border-bottom:1px solid var(--linea)}
.sec-gris{background:var(--papel-gris)}
.sec-azul{background:var(--azul);color:#fff;border-bottom:0}
.sec-azul .eti{color:#8FB7F2} .sec-azul h2{color:#fff}
.sec-azul p{color:rgba(255,255,255,.88)}
.dos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(20rem,100%),1fr));
     gap:clamp(1.75rem,4vw,3.5rem);align-items:center}
.cabecera-sec{margin-bottom:clamp(1.5rem,3vw,2.5rem)}
.cabecera-sec::after{content:"";display:block;width:3.5rem;height:5px;
                     background:var(--rojo);margin-top:1rem}

/* ── objetivo, a lo grande ── */
.objetivo{font-family:var(--display);font-weight:800;text-transform:uppercase;
          font-size:clamp(1.4rem,3.6vw,2.4rem);line-height:1.12;letter-spacing:-.015em;
          max-width:24ch}
.objetivo em{font-style:normal;color:var(--rojo)}
.sec-azul .objetivo em{color:#FF6B72}

/* ── propuestas ── */
.rejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(15rem,100%),1fr));
         gap:1.25rem;margin-top:2rem}
.tarjeta{background:#fff;border-top:5px solid var(--rojo);padding:1.4rem;
         display:flex;flex-direction:column;gap:.55rem}
.tarjeta h3{color:var(--azul)}
.tarjeta p{margin:0;color:var(--suave);font-size:.96rem}

/* ── galería ── */
.galeria{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(15rem,100%),1fr));
         gap:.75rem;margin-top:2rem}
.galeria figure{margin:0;position:relative;overflow:hidden;background:var(--azul)}
.galeria img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .4s ease}
.galeria figure:hover img{transform:scale(1.04)}
.galeria figcaption{position:absolute;left:0;bottom:0;background:var(--rojo);color:#fff;
   font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
   padding:.3rem .7rem}

/* ── boletín ── */
.boletin{background:var(--azul-hondo);color:#fff;padding-block:clamp(3rem,7vw,5rem)}
.boletin .eti{color:#8FB7F2}
.boletin h2{color:#fff}
.form-boletin{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(14rem,100%),1fr));
              gap:.75rem;margin-top:1.75rem;max-width:44rem}
.form-boletin input[type=text],.form-boletin input[type=email]{
  padding:.95rem 1rem;border:2px solid rgba(255,255,255,.3);background:rgba(255,255,255,.06);
  color:#fff;font-family:var(--texto);font-size:1rem}
.form-boletin input::placeholder{color:rgba(255,255,255,.55)}
.form-boletin input:focus{border-color:var(--rojo);outline:none;background:rgba(255,255,255,.12)}
.form-boletin .ancho{grid-column:1/-1}
.acepto{display:flex;gap:.7rem;align-items:flex-start;font-size:.92rem;
        color:rgba(255,255,255,.85);grid-column:1/-1}
.acepto input{margin-top:.3rem;width:1.15rem;height:1.15rem;accent-color:var(--rojo);flex:none}
.trampa{position:absolute;left:-9999px}
.promesa{margin-top:1rem;font-size:.86rem;color:rgba(255,255,255,.6);max-width:52ch}

/* ── partes recientes ── */
.partes{display:grid;gap:1rem;margin-top:2rem}
.parte{background:#fff;border-left:5px solid var(--rojo);padding:1.1rem 1.3rem}
.parte time{font-family:var(--mono);font-size:.74rem;letter-spacing:.12em;
            text-transform:uppercase;color:var(--suave)}
.parte h3{margin:.3rem 0 .4rem;font-size:1.05rem;color:var(--azul)}
.parte p{margin:0;color:var(--suave);font-size:.95rem}

/* ── redes / local ── */
.redes{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:1.75rem}
.red{display:inline-flex;align-items:center;gap:.65rem;background:#fff;color:var(--azul);
     text-decoration:none;font-family:var(--display);font-weight:800;text-transform:uppercase;
     font-size:.9rem;padding:.8rem 1.3rem;border:2px solid var(--azul)}
.red:hover{background:var(--azul);color:#fff}
.red svg{width:1.25rem;height:1.25rem;fill:currentColor;flex:none}
.datos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(15rem,100%),1fr));
       gap:1.5rem;margin-top:1.5rem}
.dato{border-left:4px solid var(--rojo);padding-left:1rem}
.dato dt{font-family:var(--display);font-weight:700;font-size:.74rem;letter-spacing:.14em;
         text-transform:uppercase;color:var(--suave)}
.dato dd{margin:.25rem 0 0;font-weight:600}

/* ── pie ── */
.pie{background:var(--azul);color:rgba(255,255,255,.8);padding-block:2.25rem;font-size:.88rem}
.pie .env{display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:space-between}
.pie a{color:rgba(255,255,255,.9)}

/* ── avisos ── */
.aviso{padding:.9rem 1.15rem;margin:0 0 1rem;font-weight:600;font-size:.95rem}
.aviso-ok{background:#E9F6EC;border-left:5px solid #1E7A34;color:#14532A}
.aviso-error{background:#FDECEC;border-left:5px solid var(--rojo);color:var(--rojo-hondo)}
.avisos-flot{position:fixed;left:50%;transform:translateX(-50%);bottom:1.5rem;z-index:80;
             width:min(38rem,92vw)}

/* ── páginas de mensaje ── */
.mensaje{min-height:70vh;display:grid;place-items:center;text-align:center;
         padding:clamp(2rem,6vw,5rem) 1.25rem}
.mensaje h1{font-family:var(--display);font-weight:900;text-transform:uppercase;
            font-size:clamp(1.9rem,5vw,3rem);color:var(--azul);margin:0 0 1rem}
.mensaje p{max-width:46ch;color:var(--suave);margin-inline:auto}

@media (max-width:56rem){
  .portada-fondo::after{background:linear-gradient(180deg,rgba(15,42,107,.86) 0%,
                        rgba(15,42,107,.94) 60%,var(--azul) 100%)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
}

/* ══════════════════════════════════════════════════════════════════════
   PANEL — paleta neutra, densidad alta. No hereda la marca a propósito.
   ══════════════════════════════════════════════════════════════════════ */
.panel{--fondo:#F6F7F8;--tarjeta:#FFFFFF;--tx:#1A1A1A;--tx2:#5C5F62;
       --bd:#D2D5D8;--acento:#C8181F;--azulp:#0F2A6B;
       background:var(--fondo);color:var(--tx);font-size:.95rem}
.panel a{color:var(--acento)}
.panel-cab{background:var(--azulp);color:#fff;padding:.9rem 0}
.panel-cab .env{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between}
.panel-marca{font-family:var(--display);font-weight:900;text-transform:uppercase;
             letter-spacing:.02em;font-size:1.05rem}
.panel-nav{display:flex;flex-wrap:wrap;gap:.35rem}
.panel-nav a{color:rgba(255,255,255,.82);text-decoration:none;font-weight:600;
             font-size:.86rem;padding:.4rem .75rem;border-radius:2px}
.panel-nav a:hover{background:rgba(255,255,255,.12);color:#fff}
.panel-nav a.act{background:var(--acento);color:#fff}
.panel main{padding-block:2rem}
.panel h1{font-family:var(--display);font-weight:800;font-size:1.5rem;
          text-transform:uppercase;color:var(--azulp);margin:0 0 .3rem}
.panel h2{font-size:1.1rem;text-transform:none;font-weight:700;letter-spacing:0;color:var(--tx)}
.panel .sub{color:var(--tx2);margin:0 0 1.5rem;font-size:.92rem}
.caja{background:var(--tarjeta);border:1px solid var(--bd);padding:1.25rem;margin-bottom:1.25rem}
.caja>h2{margin:0 0 .9rem}
.cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(9rem,100%),1fr));gap:1rem}
.cifra{background:var(--tarjeta);border:1px solid var(--bd);padding:1rem 1.15rem}
.cifra b{display:block;font-family:var(--display);font-size:2rem;font-weight:800;
         line-height:1;color:var(--azulp)}
.cifra span{font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;color:var(--tx2)}
.panel label{display:block;font-size:.76rem;font-weight:700;letter-spacing:.08em;
             text-transform:uppercase;color:var(--tx2);margin:0 0 .3rem}
.panel input[type=text],.panel input[type=email],.panel input[type=password],
.panel input[type=date],.panel input[type=number],.panel textarea,.panel select{
  width:100%;padding:.6rem .7rem;border:1px solid var(--bd);background:#fff;
  color:var(--tx);font-family:var(--texto);font-size:.95rem;border-radius:2px}
.panel textarea{min-height:7rem;resize:vertical;line-height:1.5}
.panel input:focus,.panel textarea:focus{border-color:var(--acento);outline:none;
  box-shadow:0 0 0 3px rgba(200,24,31,.15)}
.campo{margin-bottom:1rem}
.rej2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(16rem,100%),1fr));gap:1rem}
.bt{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:.82rem;
    letter-spacing:.04em;padding:.65rem 1.2rem;border:0;cursor:pointer;
    background:var(--acento);color:#fff;text-decoration:none;display:inline-block}
.bt:hover{background:#A81219;color:#fff}
/* `.panel a` (0,1,1) le ganaba a `.bt` (0,1,0) y pintaba el texto del botón
   rojo sobre fondo rojo: invisible. Hay que igualar la especificidad. */
.panel a.bt{color:#fff}
.panel a.bt-sec{color:var(--tx)}
.panel a.bt-sec:hover{color:var(--tx)}
.bt-sec{background:#fff;color:var(--tx);border:1px solid var(--bd)}
.bt-sec:hover{background:#EEF0F2;color:var(--tx)}
.bt-peq{padding:.4rem .8rem;font-size:.74rem}
.tabla{width:100%;border-collapse:collapse;font-size:.9rem}
.tabla th{text-align:left;font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;
          color:var(--tx2);padding:.5rem .6rem;border-bottom:2px solid var(--bd);white-space:nowrap}
.tabla td{padding:.6rem;border-bottom:1px solid var(--bd);vertical-align:top}
.tabla tr:hover td{background:#FAFBFC}
.pastilla{display:inline-block;font-size:.7rem;font-weight:700;text-transform:uppercase;
          letter-spacing:.08em;padding:.2rem .55rem;border-radius:2px}
.p-activo{background:#E3F3E7;color:#14532A} .p-pendiente{background:#FDF1DC;color:#7A4E00}
.p-baja{background:#EDEFF1;color:#5C5F62}
.desplaza{overflow-x:auto}
.entrar{min-height:100vh;display:grid;place-items:center;background:#F6F7F8;padding:1.5rem}
.entrar .caja{width:min(24rem,100%)}
.miniatura{width:100%;aspect-ratio:16/10;object-fit:cover;border:1px solid var(--bd)}