:root{
  --primary:#064b8d;       /* color del título y footer */
  --ink:#101820;
  --white:#ffffff;
  --border:#ffffff;
  --radius:20px;
  --shadow:0 10px 30px rgba(16,24,32,.10);
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,"Open Sans",sans-serif;
  background:#ffffff;   /* fondo BLANCO */
  color:var(--ink);
}
h1,h2,h3{margin:0 0 .5rem}
h1{
  color:var(--primary);
  font-size:clamp(2rem,3.2vw,3rem);
  font-weight:800;
  line-height:1.15;
  text-align:center;
}
h3{color:var(--primary); font-weight:700; font-size:1rem; line-height:1.25}
p{margin:.25rem 0 .75rem}
a{color:var(--primary); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%; height:auto; display:block}
.container{width:min(1120px,92%); margin-inline:auto}

/* Top bar */
.topbar{
  background:var(--white);
  border-bottom:1px solid var(--border);
}
.topbar .container{
  display:flex; align-items:center; justify-content:space-between;
  padding:.8rem 0;
}
.brand-img{height:100px; width:auto}
/* Redes sociales en la barra superior */
.social-icons{
  display:flex;
  align-items:center;
  gap:1rem;
}

.social-icons a img{
  height:28px;
  width:auto;
  transition:transform .25s ease, opacity .25s ease;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.15));
}

.social-icons a:hover img{
  transform:scale(1.15);
  opacity:0.85;
}

/* Hero centrado (sin tarjeta) */
.hero{
  padding-top: 0.4rem;   /* antes era 2rem–6vw–5rem */
  padding-bottom: 3rem;  /* mantiene aire hacia el texto inferior */
}
.hero-center{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;  /* separa logo, animación y texto */
  margin-top: 0; /* elimina espacio adicional */
}
.center-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0; /* elimina cualquier margen vertical */
}
.logo-center{width:min(260px,60%); height:auto}
.iso-media{width:min(500px,80%); height:auto; background:transparent}

.hero-copy{
  max-width: min(820px, 100%);
  margin-inline: auto;
  margin: bottom 4px;rem; /* nuevo espacio entre texto y pilares */
}
.hero-copy p{
  margin:.5rem auto 1rem; font-size:1.05rem; text-align:center; max-width:62ch;
}

/* Tres elementos como imágenes */
.pillars{
  display:flex; gap:1rem; flex-wrap:wrap; align-items:center; justify-content:center;
  margin:.25rem 0 0;
}
.pillars img{
  height:25px; width:auto;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.06));
}

/* Footer con Dirección + Contáctanos y línea superior */
.footer{
  position:relative;             /* para la línea superior */
  background:#fff;
  color:var(--primary);
  border-top:1px solid var(--border); /* si no la quieres, elimínala */
}

/* Línea superior 9px con degradado */
.footer::before{
  content:"";
  position:absolute; top:0; left:0; width:100%; height:9px;
  background: linear-gradient(
    90deg,
    #064b8d 0%,
    #2bc781 25%,
    #064b8d 50%,
    #2bc781 75%,
    #000000 100%
  );
  pointer-events:none;
  z-index:1;
}

.footer-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem;
  padding:1.2rem 0 .4rem;
  position:relative; z-index:2;
}
.footer-copy{
  text-align:center;
  padding:0 0 1.1rem;
  font-size:.95rem;
  position:relative; z-index:2;
}
.foot-block h3{
  margin:0 0 .35rem;
  font-size:1rem;
  color:var(--primary);
  font-weight:800;
}
.foot-block p{margin:0; line-height:1.45}
.footer a{ color:var(--primary); text-decoration:none }
.footer a:hover{ text-decoration:underline }

@media (max-width:640px){
  .footer-grid{ grid-template-columns:1fr; text-align:center }
}

/* Accesibilidad */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}