:root{
  --primary:#0C1F72;           /* Azul Emporio */
  --primary2:#2E4FA3;          /* Azul medio */
  --accent:#ECD5B3;            /* Dorado */
  --bg:#F6F8FF;                /* Fondo claro */
  --surface:#FFFFFF;           /* Tarjetas / superficies */
  --text:#141A2A;              /* Texto principal */
  --muted:#5B657A;             /* Texto secundario */
  --border:rgba(12,31,114,.14);

  --shadow-lg: 0 22px 55px rgba(0,0,0,.18);
  --shadow-md: 0 14px 28px rgba(0,0,0,.10);
  --shadow-sm: 0 10px 22px rgba(0,0,0,.08);

  --radius-xl: 26px;
  --radius-lg: 18px;
  --radius-md: 14px;

  --ease: cubic-bezier(.2,.8,.2,1);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  font-family:'Keep Calm','Segoe UI',Roboto,sans-serif;
  margin:0;
  line-height:1.6;
  background:var(--bg);
  color:var(--text);
}

.container{ width:min(1100px, 92%); margin:auto; }

/* =========================
   HERO (1-2-1 pro)
========================= */
.hero{
  padding: 86px 0 66px;
  text-align:center;
  color:#fff;
  position:relative;
  overflow:hidden;

  background:
    radial-gradient(
      900px 340px at 50% 8%,
      rgba(236,213,179,.30) 0%,
      rgba(236,213,179,0) 62%
    ),
    linear-gradient(
      to bottom,
      #ffffff 0%,
      #f2f5ff 34%,
      #0C1F72 34%,
      #0C1F72 78%,
      #f2f5ff 78%,
      #ffffff 100%
    );
}

/* Brillo de estadio muy sutil */
.hero::before{
  content:"";
  position:absolute;
  inset:-40px;
  background:
    radial-gradient(
      700px 240px at 18% 44%,
      rgba(255,255,255,.10) 0%,
      rgba(255,255,255,0) 64%
    ),
    radial-gradient(
      700px 240px at 82% 44%,
      rgba(255,255,255,.10) 0%,
      rgba(255,255,255,0) 64%
    );
  pointer-events:none;
  filter:blur(2px);
}

.hero-content{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  position:relative; /* encima de overlays */
  z-index:1;
}

/* =========================
   LOGO (más grande + halo)
========================= */
.logo-box{
  background:#ffffff;
  border-radius: var(--radius-xl);
  padding: 34px 44px;
  border:1px solid rgba(0,0,0,.06);
  box-shadow: var(--shadow-lg);
  margin-top: 6px;
  margin-bottom: 4px;
  position:relative;
  overflow:visible;

  /* anim */
  animation: softPop .65s var(--ease) both;
}



.logo-img{
  /* “doble” pero controlado: grande en desktop, no rompe en móvil */
  height: clamp(220px, 18vw, 380px);
  width:auto;
  display:block;
  image-rendering:auto;
}

.tagline{
  margin: 10px 0 0;
  font-size: clamp(2.0rem, 3.2vw, 3.0rem);
  letter-spacing: 1px;
  line-height:1.05;
  color:#fff;
  text-shadow:0 12px 34px rgba(0,0,0,.25);

  animation: fadeUp .60s var(--ease) both;
  animation-delay:.10s;
}

.subtitle{
  margin:0;
  max-width: 860px;
  font-size: clamp(.98rem, 1.25vw, 1.10rem);
  color:rgba(255,255,255,.92);

  animation: fadeUp .60s var(--ease) both;
  animation-delay:.18s;
}

/* =========================
   Botones de sedes
========================= */
.sedes-quick{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:18px;
  margin-top:14px;

  animation: fadeUp .60s var(--ease) both;
  animation-delay:.26s;
}

.sede-pill{
  min-width: 280px;
  padding: 16px 22px;
  border-radius: 16px;
  background: rgba(255,255,255,.96);
  color: var(--primary);
  text-decoration:none;
  font-weight: 900;
  letter-spacing: .35px;
  border: 1px solid rgba(12,31,114,.18);
  box-shadow: 0 16px 34px rgba(0,0,0,.12);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), background .22s var(--ease);
}

.sede-pill:hover{
  transform: translateY(-3px);
  box-shadow: 0 22px 44px rgba(0,0,0,.16);
  background:#fff;
}

.sede-pill:focus-visible{
  outline: 3px solid rgba(236,213,179,.75);
  outline-offset: 3px;
}

/* =========================
   Botones generales (CTA)
========================= */
.hero-btns{
  margin-top: 8px;

  animation: fadeUp .60s var(--ease) both;
  animation-delay:.34s;
}

.btn{
  padding: 12px 26px;
  border-radius: 12px;
  text-decoration:none;
  font-weight: 900;
  display:inline-block;
  text-transform:uppercase;
  font-size: .82rem;
  letter-spacing: .6px;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), background .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease);
  will-change: transform;
}

.btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(0,0,0,.18);
}

.btn:focus-visible{
  outline: 3px solid rgba(236,213,179,.75);
  outline-offset: 3px;
}

.btn-primary{
  background: var(--accent);
  color: var(--primary);
  border: 1px solid rgba(236,213,179,.72);
}

.btn-primary:hover{
  background: rgba(236,213,179,.92);
}

/* Secundario tipo “glass” para que SIEMPRE sea visible */
.btn-secondary{
  margin-left: 10px;
  background: rgba(255,255,255,.16);
  color:#fff;
  border: 1px solid rgba(255,255,255,.55);
  backdrop-filter: blur(6px);
}

.btn-secondary:hover{
  background: rgba(255,255,255,.22);
  border-color: rgba(255,255,255,.65);
}

/* Si algún día lo fuerzas sobre fondo claro */
.hero .btn-secondary.on-light{
  background:#ffffff;
  color:var(--primary);
  border:1px solid rgba(12,31,114,.22);
}

/* =========================
   Secciones
========================= */
.intro{
  padding: 58px 0 10px;
}

.intro h2{
  margin:0 0 10px;
  color:var(--primary);
  letter-spacing:.2px;
}

.intro p{
  margin:0;
  color:var(--muted);
}

.sedes{
  padding: 42px 0 10px;
}

.sedes h2{
  margin:0 0 6px;
  color:var(--primary);
}

/* =========================
   Cards
========================= */
.grid-sedes{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap:24px;
  margin-top:24px;
}

.card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow:hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}

.card:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: rgba(12,31,114,.22);
}

.card-img{
  height: 210px;

  /* Para LOGOS (evita “gigante” y recorte) */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color:#ffffff;
}

.card-body{
  padding:22px;
  text-align:center;
}

.card-body h3{
  margin:0 0 6px;
  color:var(--primary);
}

.card-body p{
  margin:0 0 14px;
  color:var(--muted);
}

.btn-card{
  background: var(--primary);
  color:#fff;
  border:1px solid rgba(12,31,114,.25);
  border-radius: 12px;
}

.btn-card:hover{
  background:#0a1a61;
}

/* =========================
   Valores
========================= */
.bg-alt{
  margin-top: 40px;
  background: linear-gradient(180deg, rgba(12,31,114,.05) 0%, rgba(236,213,179,.10) 100%);
}

.valores{
  padding: 58px 0 12px;
}

.vision-mision{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(280px,1fr));
  gap:18px;
  padding: 28px;
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,.78);
  border: 1px solid var(--border);
  box-shadow: 0 12px 26px rgba(0,0,0,.05);
}

.vision-mision h3{
  margin:0 0 6px;
  color:var(--primary);
}

.vision-mision p{
  margin:0;
  color:var(--muted);
}

.valores-grid{
  display:flex;
  justify-content: space-around;
  flex-wrap: wrap;
  gap:16px;
  margin-top: 28px;
  padding: 24px 0 6px;
  border-top: 1px solid rgba(12,31,114,.12);
}

.valores-grid span{
  font-weight: 950;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* =========================
   Footer
========================= */
footer{
  padding: 30px 0;
  text-align:center;
  font-size: .85rem;
  color: rgba(26,31,43,.75);
}

/* =========================
   Animaciones
========================= */
@keyframes fadeUp{
  from{ opacity:0; transform: translateY(12px); }
  to{ opacity:1; transform: translateY(0); }
}

@keyframes softPop{
  from{ opacity:0; transform: translateY(10px) scale(.985); }
  to{ opacity:1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce){
  .logo-box, .tagline, .subtitle, .sedes-quick, .hero-btns{
    animation: none !important;
  }
}

/* =========================
   Responsive
========================= */
@media (max-width: 768px){
  .hero{ padding: 70px 0 56px; }
  .btn-secondary{ margin-left: 0; margin-top: 10px; display:inline-block; }
  .sede-pill{ min-width: 240px; }
}

@media (max-width: 520px){
  .hero{ padding: 60px 0 48px; }
  .tagline{ letter-spacing:.6px; }
  .logo-box{ padding: 26px 28px; border-radius: 22px; }
}


/* =========================
   HISTORIA - Manual de Marca
========================= */
.historia{
  background:#0C1F72;
  padding:90px 0;
  color:#fff;
}

.historia-content{
  max-width:1000px;
  margin:auto;
  text-align:left;
}

.historia h2{
  font-size:clamp(3.5rem, 8vw, 7rem);
  line-height:.9;
  margin:0 0 40px;
  color:#fff;
  text-transform:uppercase;
  font-weight:900;
  letter-spacing:2px;
}

.historia p{
  font-size:clamp(1.2rem, 2vw, 2rem);
  line-height:1.45;
  margin:0 0 30px;
  color:#fff;
}

.historia-destacado{
  font-size:clamp(1.4rem, 2.4vw, 2.2rem);
}

.historia strong{
  font-weight:950;
  color:#ffffff;
}

.historia-content::after{
  content:"";
  display:block;
  width:120px;
  height:4px;
  background:#ECD5B3;
  margin-top:30px;
  border-radius:10px;
}

@media (max-width: 768px){
  .historia{
    padding:64px 0;
  }

  .historia h2{
    margin-bottom:28px;
  }
}

/* =========================
   FIX RESPONSIVO: secciones 100vh + botones centrados
========================= */

/* Cada bloque principal ocupa al menos la altura visible del dispositivo.
   Se usa 100svh para móviles y min-height para evitar que el contenido se corte. */
.hero,
.historia,
.sedes,
.valores,
.mision-vision{
  min-height:100vh;
  min-height:100svh;
}

/* HERO centrado verticalmente sin morder contenido */
.hero{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(56px, 7vh, 86px) 0 clamp(56px, 7vh, 66px);
}

.hero-content{
  width:100%;
}

/* Botones superiores siempre centrados */
.sedes-quick{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:18px;
}

/* Botones inferiores siempre centrados y del mismo color/tamaño */
.hero-btns{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:14px;
  margin-top:8px;
}

.hero-btns .btn{
  min-width:210px;
  padding:10px 22px;
  text-align:center;
}

.btn-secondary{
  margin-left:0;
}

.hero .btn-secondary.on-light{
  background:#ffffff;
  color:var(--primary);
  border:1px solid rgba(12,31,114,.22);
  box-shadow:0 10px 24px rgba(0,0,0,.08);
}

/* HISTORIA como sección completa */
.historia{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(64px, 9vh, 100px) 0;
}

.historia-content{
  width:min(1000px, 92%);
}

/* SEDES como sección completa */
.sedes{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:clamp(64px, 8vh, 90px) 0;
}

/* VALORES como sección completa */
.valores{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(64px, 8vh, 90px) 0;
}

.valores > .container{
  width:min(1100px, 92%);
}

/* Evita que al navegar por anclas la sección quede pegada arriba */
section{
  scroll-margin-top:16px;
}

/* Ajustes para pantallas bajas */
@media (max-height: 760px){
  .logo-img{
    height:clamp(160px, 16vw, 260px);
  }

  .logo-box{
    padding:24px 34px;
  }

  .tagline{
    font-size:clamp(1.8rem, 3vw, 2.5rem);
  }

  .hero-content{
    gap:10px;
  }
}

/* Ajustes móviles */
@media (max-width: 768px){
  .hero,
  .historia,
  .sedes,
  .valores,
  .mision-vision{
    min-height:auto;
  }

  .hero{
    padding:64px 0 56px;
  }

  .sede-pill{
    width:min(100%, 340px);
    min-width:0;
  }

  .hero-btns .btn{
    width:min(100%, 280px);
    min-width:0;
  }

  .btn-secondary{
    margin-top:0;
  }

  .historia,
  .sedes,
  .valores{
    padding:64px 0;
  }
}


/* =========================
   MISIÓN Y VISIÓN - Sección premium
========================= */
.mision-vision{
  background:
    radial-gradient(780px 280px at 50% 6%, rgba(236,213,179,.26) 0%, rgba(236,213,179,0) 62%),
    linear-gradient(180deg, #f7f8fc 0%, #ffffff 52%, #f4f6fb 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(72px, 9vh, 110px) 0;
  color:var(--primary);
}

.mv-content{
  width:min(1180px, 92%);
}

.section-kicker{
  width:max-content;
  margin:0 auto 24px;
  padding:10px 18px;
  border-left:5px solid var(--accent);
  color:var(--primary);
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:1.2px;
  background:rgba(255,255,255,.72);
  border-radius:10px;
}

.mv-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:34px;
  align-items:stretch;
}

.mv-card{
  position:relative;
  overflow:hidden;
  min-height:390px;
  background:#ffffff;
  border:1px solid rgba(12,31,114,.15);
  border-radius:30px;
  padding:clamp(34px, 4.4vw, 58px);
  box-shadow:0 24px 58px rgba(12,31,114,.10);
}

.mv-card::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:8px;
  background:linear-gradient(90deg, var(--accent), #ffffff, var(--primary));
}

.mv-card::after{
  content:"";
  position:absolute;
  right:-70px;
  bottom:-70px;
  width:190px;
  height:190px;
  border:32px solid rgba(12,31,114,.045);
  border-radius:50%;
}

.mv-card-alt::before{
  background:linear-gradient(90deg, var(--primary), #ffffff, var(--accent));
}

.mv-card h2{
  margin:0 0 26px;
  color:var(--primary);
  font-size:clamp(3rem, 5.2vw, 5.2rem);
  line-height:.9;
  letter-spacing:1.5px;
  text-transform:uppercase;
  font-weight:950;
}

.mv-card p{
  position:relative;
  z-index:1;
  margin:0 0 22px;
  color:#253052;
  font-size:clamp(1.08rem, 1.45vw, 1.35rem);
  line-height:1.55;
}

.mv-card .mv-lead{
  font-size:clamp(1.28rem, 2vw, 1.7rem);
  color:#141A2A;
}

.mv-card strong{
  display:inline;
  color:#0C1F72;
  font-weight:950;
}

.valores-grid-mv{
  margin-top:42px;
  padding-top:28px;
  border-top:1px solid rgba(12,31,114,.14);
}

/* Neutraliza estilos anteriores de valores cuando ahora vive como mision-vision */
.mision-vision .valores-grid{
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:18px;
}

.mision-vision .valores-grid span{
  color:var(--primary);
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:1.2px;
}

@media (max-width: 900px){
  .mv-grid{
    grid-template-columns:1fr;
  }

  .mv-card{
    min-height:auto;
  }

  .section-kicker{
    margin-left:0;
    margin-right:0;
  }
}

@media (max-width: 768px){
  .mision-vision{
    min-height:auto;
    padding:64px 0;
  }

  .mv-card{
    padding:32px 26px;
    border-radius:24px;
  }

  .mision-vision .valores-grid{
    justify-content:center;
    text-align:center;
  }
}


/* =========================
   VALORES DE MARCA - Tarjetas premium
   Layout: 3 tarjetas arriba + 2 abajo / responsive
========================= */
.valores-marca{
  min-height:100vh;
  min-height:100svh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(72px, 9vh, 110px) 0;
  background:
    radial-gradient(760px 260px at 50% 8%, rgba(236,213,179,.24) 0%, rgba(236,213,179,0) 64%),
    linear-gradient(180deg, #ffffff 0%, #f6f8ff 52%, #ffffff 100%);
  color:var(--primary);
}

.valores-content{
  width:min(1180px, 92%);
}

.valores-heading{
  text-align:center;
  margin:0 auto 44px;
}

.valores-heading h2{
  margin:0 0 18px;
  color:var(--primary);
  font-size:clamp(3rem, 6.6vw, 6.2rem);
  line-height:.86;
  letter-spacing:1.5px;
  text-transform:uppercase;
  font-weight:950;
}

.valores-heading p{
  max-width:860px;
  margin:0 auto;
  color:#3e4968;
  font-size:clamp(1.02rem, 1.35vw, 1.25rem);
  line-height:1.65;
}

.valores-cards{
  display:grid;
  gap:24px;
}

.valores-cards-principales{
  grid-template-columns:repeat(3, minmax(0, 1fr));
}

.valores-cards-secundarias{
  grid-template-columns:repeat(2, minmax(0, 1fr));
  max-width:900px;
  margin:24px auto 0;
}

.valor-card{
  position:relative;
  overflow:hidden;
  background:#ffffff;
  border:2px solid rgba(12,31,114,.18);
  border-radius:18px;
  padding:clamp(22px, 2.6vw, 32px);
  min-height:265px;
  box-shadow:0 18px 42px rgba(12,31,114,.08);
  transition:transform .24s var(--ease), box-shadow .24s var(--ease), border-color .24s var(--ease);
}

.valor-card::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:6px;
  background:linear-gradient(90deg, var(--primary), var(--accent));
  opacity:.95;
}

.valor-card::after{
  content:"";
  position:absolute;
  right:-48px;
  bottom:-48px;
  width:130px;
  height:130px;
  border:24px solid rgba(12,31,114,.045);
  border-radius:50%;
  pointer-events:none;
}

.valor-card:hover{
  transform:translateY(-5px);
  box-shadow:0 24px 54px rgba(12,31,114,.13);
  border-color:rgba(12,31,114,.32);
}

.valor-card h3{
  position:relative;
  z-index:1;
  margin:0 0 16px;
  color:var(--primary);
  font-size:clamp(1.25rem, 1.75vw, 1.65rem);
  line-height:1.05;
  text-transform:uppercase;
  font-weight:950;
  letter-spacing:.4px;
  text-align:center;
}

.valor-card p{
  position:relative;
  z-index:1;
  margin:0 0 14px;
  color:#253052;
  font-size:clamp(.98rem, 1.12vw, 1.08rem);
  line-height:1.42;
}

.valor-card p:last-child{
  margin-bottom:0;
}

.valor-card strong{
  color:#0C1F72;
  font-weight:950;
}

.valor-card-wide{
  min-height:230px;
}

@media (max-width: 1024px){
  .valores-cards-principales,
  .valores-cards-secundarias{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    max-width:none;
  }

  .valores-cards-principales .valor-card:nth-child(3){
    grid-column:1 / -1;
  }
}

@media (max-width: 768px){
  .valores-marca{
    min-height:auto;
    padding:64px 0;
  }

  .valores-heading{
    margin-bottom:32px;
  }

  .valores-cards-principales,
  .valores-cards-secundarias{
    grid-template-columns:1fr;
  }

  .valores-cards-principales .valor-card:nth-child(3){
    grid-column:auto;
  }

  .valor-card{
    min-height:auto;
    border-radius:16px;
  }
}


/* =========================
   AJUSTE CLIENTE:
   Textos justificados + escudo como marca de agua
========================= */

/* La palabra correcta para el efecto solicitado es "marca de agua":
   una imagen con baja opacidad colocada por debajo del contenido. */

.historia p,
.mv-card p,
.valor-card p,
.valores-heading p{
  text-align:justify;
  text-justify:inter-word;
}

.valores-heading p{
  text-align-last:center;
}

.mv-card h2,
.mv-card p,
.valor-card h3,
.valor-card p{
  position:relative;
  z-index:1;
}

/* Sustituye el círculo decorativo por escudo.png como marca de agua */
.mv-card::after,
.valor-card::after{
  content:"";
  position:absolute;
  right:-34px;
  bottom:-34px;
  width:160px;
  height:160px;
  border:0;
  border-radius:0;
  background-image:url("assets/img/escudo.png");
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  opacity:.10;
  filter:grayscale(100%);
  pointer-events:none;
  z-index:0;
}

.mv-card::after{
  width:190px;
  height:190px;
  right:-44px;
  bottom:-44px;
}

@media (max-width:768px){
  .historia p,
  .mv-card p,
  .valor-card p,
  .valores-heading p{
    text-align:justify;
    text-justify:inter-word;
  }

  .mv-card::after,
  .valor-card::after{
    width:130px;
    height:130px;
    right:-28px;
    bottom:-28px;
  }

}