@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;700;900&display=swap');

:root{
  --gold: #d49b2f;
  --dark-70: rgba(0,0,0,0.65);
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color:#111827;
  font-size: 16px;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
header{
  background: #ed1c24;
  position: sticky;
  width: 100%;
  z-index: 100;
  border-bottom: 3px solid #3d3d3d;
}
h3{
  font-weight: 600;
  text-transform: uppercase;
}
.logoExpansion{
  height: 30px;
  margin: 0.5rem 0rem;
}


/* contenedor principal */
.page-container{
  width: min(1400px, 94%);
  margin: 36px auto;
  position: relative;
}

/* Hero principal (imagen grande con overlay) */
.hero{
  position: relative;
  height: 520px;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(15,23,42,0.12);
}

/* imagen de fondo (usando Lorem Picsum) */
.hero-bg{
  position:absolute;
  inset:0;
  background-position:center;
  background-size:cover;
  filter: saturate(0.98) contrast(0.95);
}

/* sombreado / degradado lateral para mejorar legibilidad */
.hero-overlay{
  position:absolute;
  inset:0;
  background: linear-gradient(90deg, rgba(7,10,13,0.62) 0%, rgba(7,10,13,0.25) 35%, rgba(7,10,13,0.0) 60%);
}

/* contenido dentro del hero */
.hero-content{
  position:relative;
  height:100%;
  display:flex;
  align-items:flex-start;
  padding:48px;
  padding-top:64px;
}

.hero-text{
  color:#fff;
  max-width:90%;
  margin-left:6px;
}

/* tipografía principal como en la imagen */
.hero-text h1{
  font-size:64px;
  line-height:1.3;
  margin:0 0 18px 0;
  font-weight:600;
  letter-spacing:-1px;
  text-shadow: 0 6px 18px rgba(2,6,23,0.35);
}

/* párrafo descriptivo */
.hero-text .lead{
  color: rgba(255,255,255,0.88);
  font-size:16px;
  max-width:620px;
  margin-bottom:22px;
}
.lead{
  font-weight: 700;
}

/* botones tipo pill */
.hero-buttons .btn{
  border-radius:999px;
  padding:10px 22px;
  font-weight:600;
  margin-right:12px;
  box-shadow: 0 6px 18px rgba(2,6,23,0.18);
}

/* botón blanco destacado */
.btn-white{
  background:#ffffff;
  color:#0b1220;
  border: none;
}

/* botón outline */
.btn-outline-light{
  background:transparent;
  color: rgba(255,255,255,0.95);
  border:2px solid rgba(255,255,255,0.38);
}

/* tarjeta blanca que se superpone a la derecha */
.who-card{
  position:absolute;
  right:18px;
  bottom:-18px;
  width:360px;
  background:#ffffff;
  border-radius:20px;
  padding:20px 20px 18px 22px;
  box-shadow: 0 18px 36px rgba(15,23,42,0.12);
  color:#111827;
}

/* título y descripción de la tarjeta */
.who-card h3{
  margin:0 0 8px 0;
  font-size:22px;
  font-weight:700;
}
.who-desc{
  margin:0;
  color:#475569;
  font-size:14px;
  margin-bottom:14px;
}

/* estadísticas */
.who-stats{
  display:flex;
  gap:10px;
  justify-content:space-between;
  align-items:center;
  margin-top:8px;
}

.stat{
  text-align:left;
  min-width:80px;
}

.stat .num{
  font-size:22px;
  font-weight:800;
  color: var(--gold);
  letter-spacing:0.5px;
}
.stat .label{
  font-size:12px;
  color:#6b7280;
  margin-top:4px;
}

.redondo{
  border-radius: 20px;
}
.box{
  height: 150px;
}
.bg-light{
  background: #b3b3b3;
background: linear-gradient(180deg, rgba(179, 179, 179, 1) 0%, rgba(255, 255, 255, 1) 90%);
}

.bg-azul{
  background: #00455d;
}
.text-naranja{
  color: #ff5502;
}
.text-azulb{
  color: #487696;
}
.text-azul{
  color: #002735;
}
.cita{
  border: 1px solid #ff5502;
  background: #ffc4a7;
}
.boton{
  color: #fff;
  transition: 0.5s;
  border: 1px solid #fff;
  padding: 10px 20px;
}
.boton:hover{
  color: #ff5502;
  transition: 0.5s;
  border: 1px solid #fff;
  padding: 10px;
  padding: 10px 20px;
  background: #fff;
}
.azulito{
  background: #00bdff45;
  border: 1 solid #00455d;
}

.material-symbols-outlined {
  font-variation-settings:
  'FILL' 1,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24
}

.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 20px;
    position: relative;
    top: 5px;
  }
.icono{
  width: 35px;
  padding: 5px;
}


.accordion-button:not(.collapsed) {
    color: #ffffff;
    background-color: #FF5722;
  }

.accordion-button:focus {
    z-index: 3;
    border-color: 1px solid #fff;
    box-shadow: none;
  }

  a.link{
    color: #fff;
  }

/* responsive */
@media (max-width: 1024px){
  .hero-text h1{ font-size:4vh; }
  .hero{ height:460px; }
  .who-card{ right:14px; left:14px; bottom:-22px; width:auto; }
}

@media (max-width: 768px){
  .hero-text h1{ font-size:3vh; }
  .hero{ height:460px; }
  .who-card{ right:14px; left:14px; bottom:-22px; width:auto; }
  .box{ font-size: 10px; }
}

@media (max-width: 600px){
  .hero{ height:420px; border-radius:14px; }
  .hero-content{ padding:20px; padding-top:28px; }
  .hero-text h1{ font-size:3vh; }
  .hero-text .lead{ font-size:13px; }
  .who-card{ position:relative; bottom:0; margin-top:18px; width:100%; border-radius:12px; }
  .page-container{ margin:18px auto; }
}
/* ...existing code... */