:root{
  --primary:#0b74b5; /* azul marca */
  --primary-600:#085c90;
  --accent:#ff6b6b; /* botón */
  --bg:#0b1720;     /* fondo hero overlay */
  --text:#0f172a;   /* gris azulado */
  --muted:#576074;
  --card:#ffffff;
  --soft:#f3f7fb;
  --radius:18px;
  --shadow:0 10px 30px rgba(2,24,43,.08);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;padding:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,sans-serif;color:var(--text);}
a{color:inherit;text-decoration:none;transition:color .2s ease}
a:hover{color:var(--primary)}
img{max-width:100%;display:block}
.container{width:min(1100px,92%);margin-inline:auto}

/* Header */
header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid #e7eef6}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;align-items:center;gap:12px}
.brand img{height:42px;width:auto}
.brand b{font-weight:800;letter-spacing:.2px}
.menu{display:flex;gap:22px;align-items:center}
.menu{margin-left: 40px;}
.menu{position:relative}

@media (max-width: 400px) {
  .brand strong {
    display: none;
  }
}
.menu a{font-weight:600;color:#223;position:relative;padding:4px 0; transition: color .4s ease; z-index: 1;}
.burger{display:none;border:1px solid #d7e3ee;border-radius:10px;padding:8px;background:transparent;cursor:pointer;transition:all .2s ease}
.burger:hover, .burger[aria-expanded="true"]{border-color:var(--primary);color:var(--primary)}

/* Redes Sociales en Header */
.header-socials {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-right: 24px;
}

/* Botón Home */
.home-button {
  display: none; /* Oculto por defecto */
  color: var(--text);
  font-size: 22px;
  padding: 8px;
  border-radius: 10px;
  line-height: 1;
}

.menu-indicator {
  position: absolute;
  z-index: 0;
  background-color: var(--accent);
  border-radius: 999px;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
.menu a.is-active {
  color: #fff;
}

@media (max-width:1024px){
  .menu{display:none}
  .header-socials { display: none; } /* Ocultar en móvil para no saturar */
  .burger{display:block}
  .home-button {
    display: block; /* Se muestra en móvil */
    margin-left: auto; /* Empuja los botones a la derecha */
    margin-right: 8px; /* Espacio entre home y burger */
  }
}
@media (min-width: 1025px) {
  .menu { margin-right: auto; } /* Empuja los elementos de la derecha */
  .home-button { display: block; } /* Se muestra en escritorio */
}

/* Estilos del menú móvil */
.mobile {
  position: absolute;
  inset: 64px 0 auto 0;
  background: #fff;
  border-bottom: 1px solid #e7eef6;
  /* Estado oculto para permitir transiciones */
  visibility: hidden;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity .2s ease, visibility .2s ease, transform .2s ease;
}
.mobile.is-open { visibility: visible; opacity: 1; transform: translateY(0); }
.mobile a { display: block; padding: 16px 24px; border-top: 1px solid #eef3f8; font-weight: 600; font-size: 17px; }
.mobile a:hover { background-color: var(--soft); }

/* Botón flotante de WhatsApp */
.whatsapp-float {
  position: fixed;
  width: 60px;
  height: 60px;
  bottom: 40px;
  right: 40px;
  background-color: #25d366;
  color: #FFF;
  border-radius: 50px;
  text-align: center;
  font-size: 30px;
  box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
  z-index: 100;
  display: grid;
  place-content: center;
  transition: transform .3s ease;
}
.whatsapp-float:hover {
  transform: scale(1.1);
  color: #fff;
}

/* Hero */
.hero{position:relative;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;background:url('banner/foto1_banner.jpg') center/cover fixed no-repeat;z-index:-2}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,27,45,.60),rgba(11,23,32,.80));z-index:-1}
.hero .wrap{padding:80px 0 42px;color:#fff}
.hero h1{font-size:clamp(32px,5vw,48px);line-height:1.1;margin:8px 0 16px;font-weight:900}
.hero p.sub{font-size:18px;max-width:720px;opacity:.95}

/* Stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:30px}
.stat{background:rgba(255,255,255,.08);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.15);border-radius:16px;padding:18px}
.stat b{display:block;font-size:28px}
.stat span{opacity:.95}
@media (max-width:900px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .hero::before{background-attachment:scroll} /* 'fixed' can be jumpy on mobile */
}

@media (max-width: 600px) {
  section { padding: 48px 0; }
  .section-title { font-size: 24px; }
  .hero .wrap { padding: 60px 0 32px; }
}

/* Section base */
section{padding:64px 0}
.section-title{font-size:28px;margin:0 0 18px;font-weight:900;text-align:center}
.lead{font-size:18px;color:var(--muted);text-align:center}

/* Nosotros */
.nosotros-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr; /* Columna de imagen | Columna de texto */
  gap: 40px;
  align-items: center;
}
.nosotros-image img {
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.nosotros-content .section-title,
.nosotros-content p {
  text-align: left;
}
.feature-list {
  list-style: none;
  padding: 0;
  margin-top: 24px;
  display: grid;
  gap: 18px;
}
.feature-list li { display: flex; align-items: flex-start; gap: 14px; }
.feature-list i { font-size: 20px; color: var(--primary); margin-top: 4px; }
.feature-list b { display: block; font-weight: 700; margin-bottom: 4px; }
.feature-list span { color: var(--muted); }

@media (max-width: 900px) {
  .nosotros-grid { grid-template-columns: 1fr; gap: 24px; }
  /* Centrar texto en sección "Nosotros" en móviles */
  .nosotros-content .section-title,
  .nosotros-content p {
    text-align: center;
  }
}

/* Servicios */
.services{background:#f7fbff}
.service-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;list-style:none;padding:0}
.card{background:var(--card);border:1px solid #e7eef6;border-radius:var(--radius);box-shadow:var(--shadow);padding:18px;display:flex;gap:14px;align-items:flex-start}
.card i{font-size:22px;color:var(--primary)}
.card b{display:block;margin-bottom:6px}
@media (max-width:900px){.service-grid{grid-template-columns:1fr}}

/* Estilo para la tarjeta especial con botón integrado */
.card--action {
  padding: 0; /* Quitamos el padding para que el botón ocupe todo el alto */
  display: flex;
  justify-content: space-between;
  align-items: stretch;
}
.card--action .card__content {
  padding: 18px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.card-action-btn {
  display: grid;
  place-content: center;
  flex-shrink: 0;
  width: 60px;
  background-color: #e62828; /* Color rojo del diplomado */
  color: #fff; /* Asegura que el icono sea blanco */
  font-size: 20px;
  transition: background-color .2s ease;
  /* Redondea las esquinas derechas para que coincidan con la tarjeta */
  border-radius: 0 var(--radius) var(--radius) 0;
}
.card-action-btn:hover { background-color: #800202; color: #fff; }
/* Forzar el color del icono dentro del botón de acción para que sea blanco */
.card-action-btn i {
  color: #fff;
}

/* Conferencias */
.videos{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.video{position:relative;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;border:1px solid #dfeaf5}
.video iframe{position:absolute;width:100%;height:100%;inset:0}
@media (max-width:900px){.videos{grid-template-columns:1fr}}

/* Equipo */
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;list-style:none;padding:0}
.member{background:#fff;border:1px solid #e7eef6;border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.member .photo{aspect-ratio:1/1;background:#dfeaf5;position:relative;display:grid;place-content:center}
.member .photo img{width:100%;height:100%;object-fit:cover;position:relative;z-index:1}
/* Fallback icon for broken images */
.member .photo::after{
  content:'👤';
  font-size:4rem;
  color:var(--muted);
  opacity:0.5;
  position:absolute;
  inset:0;
  display:grid;
  place-content:center;
  z-index:0;
}
.member .body{padding:14px}
.role{color:var(--muted);font-size:14px}
@media (max-width: 900px){
  .team-grid{grid-template-columns:1fr}
  /* Centrar texto en tarjetas de equipo en móviles */
  .member .body { text-align: center; }
}

/* Clientes */
.logos{display:grid;grid-template-columns:repeat(6,1fr);gap:20px;align-items:center}
.logos img{width:100%;height:48px;object-fit:contain;opacity:.8; transition: opacity .2s ease;}
.logos img:hover{opacity:1;}
@media (max-width:1000px){.logos{grid-template-columns:repeat(3,1fr)}}

/* Contacto */
form{display:grid;gap:12px}
input,textarea{width:100%;padding:12px 14px;border-radius:12px;border:1px solid #cfe0ef;font:inherit}
input:focus, textarea:focus{outline:2px solid var(--primary);border-color:transparent}
textarea{min-height:120px}
.btn{cursor:pointer;background:var(--accent);color:#fff;padding:12px 18px;border:none;border-radius:999px;font-weight:800;transition:background-color .2s ease}
.btn:hover{background-color:var(--primary-600)}
.offices{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:22px}
.office{background:#fff;border:1px solid #e7eef6;border-radius:var(--radius);padding:18px}
.office h4{margin:.2rem 0 .6rem}
@media (max-width:900px){
  .offices{grid-template-columns:1fr}
  /* Centrar texto en tarjetas de oficinas en móviles */
  .office { text-align: center; }
}

footer{padding:30px 0;background:#061a2b;color:#cfe0ef}
footer .container{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
footer a:hover{color:#fff}