:root{
  --rojo:#d60016;
  --rojo-oscuro:#a90012;
  --azul:#071d69;
  --azul-claro:#123ea1;
  --blanco:#ffffff;
  --gris:#f3f4f7;
  --texto:#171717;
  --sombra:0 12px 35px rgba(7,29,105,.14);
  --radio:18px;
  --ancho:1180px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  color:var(--texto);
  background:var(--blanco);
  line-height:1.6;
}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
.contenedor{width:min(92%,var(--ancho));margin:auto}
.seccion{padding:76px 0}
.centrado{text-align:center}
.titulo{
  margin:0 0 12px;
  color:var(--azul);
  font-size:clamp(2rem,4vw,3.2rem);
  line-height:1.08;
}
.subtitulo{margin:0 auto 36px;color:#555;max-width:760px}
.etiqueta{color:var(--rojo);font-weight:900;margin:0 0 8px;letter-spacing:.5px}

.topbar{background:var(--rojo);color:white;font-size:.92rem}
.topbar .contenedor{
  min-height:38px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.redes{display:flex;gap:14px}
.redes a{font-weight:bold;opacity:.95}
.redes a:hover{opacity:.72}

header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(10px);
  border-bottom:1px solid #ececec;
}
nav{
  min-height:78px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
}
.marca{display:flex;align-items:center;gap:05px;min-width:max-content}
.logo-marca{
  width:50px;
  height:50px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.logo-marca img{
  width:100%;
  height:100%;
  object-fit:contain;
}
.marca-texto strong{display:block;color:var(--rojo);font-size:1.35rem;line-height:1;letter-spacing:.5px}
.marca-texto small{color:var(--azul);font-weight:800;letter-spacing:1.5px}
.menu{display:flex;align-items:center;gap:26px;font-weight:800;font-size:.92rem}
.menu a{position:relative;padding:27px 0}
.menu a::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:17px;
  height:3px;
  background:var(--rojo);
  transform:scaleX(0);
  transition:.25s;
}
.menu a:hover::after{transform:scaleX(1)}
.menu-btn{
  display:none;
  border:0;
  background:var(--rojo);
  color:white;
  width:44px;height:42px;
  border-radius:10px;
  font-size:1.3rem;
  cursor:pointer;
}

.hero{overflow:hidden;background:#fff;border-bottom:6px solid var(--rojo)}
.hero-banner{width:100%;height:auto;object-fit:cover;object-position:center}

.mensaje{background:linear-gradient(135deg,var(--azul),var(--azul-claro));color:white}
.mensaje .contenedor{
  padding:22px 0;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:18px;
  text-align:center;
  font-size:1.08rem;
  font-weight:800;
}
.mensaje-estrella{color:#fff;font-size:1.5rem}

.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.tarjeta{
  background:white;
  border-radius:var(--radio);
  box-shadow:var(--sombra);
  border:1px solid #eceef4;
  position:relative;
  overflow:hidden;
}
.propuesta{padding:30px}
.propuesta::before{
  content:"";
  position:absolute;
  width:84px;height:8px;
  background:linear-gradient(90deg,var(--rojo),var(--azul));
  top:0;left:0;
  border-radius:0 0 8px 0;
}
.icono{
  width:54px;height:54px;
  border-radius:15px;
  background:#fff0f2;
  color:var(--rojo);
  display:grid;place-items:center;
  font-size:1.35rem;
  margin-bottom:18px;
  font-weight:900;
}
.tarjeta h3{margin:0 0 8px;color:var(--azul)}
.tarjeta p{margin:0;color:#555}
.tarjeta-foto img{width:100%;aspect-ratio:16/10;object-fit:cover}
.tarjeta-contenido{padding:24px}

.acerca{background:var(--gris)}
.acerca-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:50px;align-items:center}
.foto-candidato{
  border-radius:24px;
  overflow:hidden;
  box-shadow:var(--sombra);
  background:white;
  border:8px solid white;
}
.foto-candidato img{width:100%;aspect-ratio:16/12;object-fit:cover;object-position:center 18%}
.lista{padding:0;list-style:none;margin:24px 0 0}
.lista li{margin:12px 0;padding-left:30px;position:relative;font-weight:700}
.lista li::before{content:"★";color:var(--rojo);position:absolute;left:0}

.cta{
  background:linear-gradient(120deg,rgba(214,0,22,.98),rgba(7,29,105,.98));
  color:white;
  text-align:center;
}
.cta h2{font-size:clamp(2rem,4vw,3.2rem);margin:0 0 12px}
.cta p{max-width:720px;margin:0 auto 24px;font-size:1.08rem}
.boton{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:12px 22px;
  border-radius:999px;
  font-weight:900;
  border:2px solid transparent;
  transition:.22s;
  cursor:pointer;
}
.boton-rojo{background:var(--rojo);color:white}
.boton-rojo:hover{background:var(--rojo-oscuro);transform:translateY(-2px)}
.boton-blanco{background:white;color:var(--azul)}
.boton-blanco:hover{background:#eef2ff;transform:translateY(-2px)}

.contacto-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:30px;align-items:start}
.contacto-box,form{
  border:1px solid #e6e8ef;
  border-radius:var(--radio);
  padding:30px;
  box-shadow:var(--sombra);
  background:white;
}
.contacto-box h3,form h3{margin-top:0;color:var(--azul)}
label{display:block;font-weight:800;margin:14px 0 6px}
input,textarea{
  width:100%;
  border:1px solid #ccd1dd;
  border-radius:12px;
  padding:13px 14px;
  font:inherit;
}
input:focus,textarea:focus{outline:3px solid rgba(18,62,161,.14);border-color:var(--azul-claro)}
textarea{min-height:130px;resize:vertical}
form .boton{margin-top:16px}
.aviso{display:block;margin-top:10px;color:#555}

footer{background:#051344;color:white;text-align:center;padding:28px 0}
footer small{opacity:.82}

@media (max-width:900px){
  .menu-btn{display:block}
  .menu{
    position:absolute;
    top:78px;
    left:0;right:0;
    display:none;
    flex-direction:column;
    gap:0;
    background:white;
    border-bottom:1px solid #ddd;
    box-shadow:0 16px 28px rgba(0,0,0,.1);
  }
  .menu.abierto{display:flex}
  .menu a{width:92%;padding:15px 0;border-bottom:1px solid #eee}
  .menu a::after{display:none}
  .grid-3{grid-template-columns:1fr 1fr}
  .acerca-grid,.contacto-grid{grid-template-columns:1fr}
}

@media (max-width:620px){
  .topbar .contenedor{justify-content:center}
  .topbar .lema{display:none}
  .marca-texto small{font-size:.67rem}
  .seccion{padding:56px 0}
  .grid-3{grid-template-columns:1fr}
  .hero-banner{min-height:245px;object-fit:cover;object-position:center}
  .mensaje .contenedor{font-size:.98rem}
  .contacto-box,form{padding:24px}
}