*{box-sizing:border-box}html,body{margin:0;padding:0;scroll-behavior:smooth}
:root{--dark:#0a192f;--mid:#112240;--ink:#e6edf6;--muted:#9fb0cf;--ivory:#f6eecf;--card:#0f2133;--accent:#cbd5f7}
body{background:var(--dark);color:var(--ink);font:17px/1.9 'Merriweather',serif}
.container{max-width:1200px;margin:0 auto;padding:24px}
.topnav{position:sticky;top:0;z-index:40;background:rgba(10,25,47,.78);backdrop-filter:blur(6px);border-bottom:1px solid rgba(136,146,176,.2)}
.nav-inner{display:flex;align-items:center;justify-content:space-between}
.brand{font-family:'Cinzel',serif;font-weight:900;color:var(--ink);text-decoration:none;font-variant:small-caps;letter-spacing:.08em}
.nav-links{display:flex;gap:14px;flex-wrap:wrap}
.nav-link{color:var(--ink);text-decoration:none;padding:10px 12px;border-radius:10px;position:relative;font-variant:small-caps}
.nav-link:after{content:'';position:absolute;left:0;bottom:-2px;width:0;height:1px;background:var(--ivory);transition:width .3s}
.nav-link:hover:after{width:100%}

.hero{min-height:92vh;display:grid;place-items:center;background:radial-gradient(60% 60% at 50% 40%, rgba(17,34,64,.55), transparent 60%)}
.hero-inner{display:grid;gap:16px;justify-items:center;text-align:center}
.hero-title{font:900 clamp(64px,12vw,140px)/.92 'Cinzel',serif;letter-spacing:.03em;margin:0;
  text-transform:uppercase;font-variant:small-caps;
  background:linear-gradient(135deg,#ccd6f6,var(--ivory));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  opacity:0;transform:translateY(14px);animation:fadeInUp 1.4s ease-out forwards}
.hero-sub{font-size:clamp(18px,2.1vw,26px);color:#c7d2fe;max-width:1100px;opacity:0;transform:translateY(10px);animation:fadeInUp 1.6s .1s ease-out forwards}
@keyframes fadeInUp{to{opacity:1;transform:translateY(0)}}

.section{padding:88px 0}
.section-title{font:800 clamp(28px,3.6vw,44px)/1.2 'Cinzel',serif;margin:0;text-align:center;font-variant:small-caps;letter-spacing:.08em}
.divider{width:min(980px,92%);height:4px;margin:18px auto;border-radius:999px;overflow:hidden;background:linear-gradient(90deg,transparent,var(--ivory),transparent);position:relative}
.divider:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.38),transparent);animation:shim 2.4s ease-in-out infinite}
@keyframes shim{0%{transform:translateX(-100%)}50%,100%{transform:translateX(100%)}}

.prose{max-width:1100px;margin:0 auto;text-align:center}
.prose p{margin:0 0 16px}

.center{text-align:center}
.avatar{width:170px;height:170px;border-radius:999px;object-fit:cover;border:2px solid rgba(136,146,176,.35);background:#0f2133;display:block;margin:0 auto}

.areas{max-width:950px;margin:0 auto}
.areas ul{columns:2;column-gap:48px;list-style:disc;list-style-position:inside;margin:16px auto 0;padding:0;text-align:center}
.areas li{break-inside:avoid;margin:8px 0;padding:8px 12px;border-radius:12px;background:var(--card);border:1px solid rgba(136,146,176,.25)}

.map{width:100%;min-height:440px;border:0;border-radius:16px;border:1px solid rgba(136,146,176,.25)}
.footer{border-top:1px solid rgba(136,146,176,.25);margin-top:32px}
.copy{text-align:center;color:var(--muted);border-top:1px solid rgba(136,146,176,.25);margin-top:8px;padding:10px 0;font-size:14px}

.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(8,14,24,.55);backdrop-filter:blur(4px);z-index:100}
.modal.open{display:flex}
.modal-card{width:min(920px,92vw);background:#0f2133;border:1px solid rgba(136,146,176,.3);border-radius:18px;overflow:hidden;box-shadow:0 20px 80px rgba(0,0,0,.4)}
.modal-head{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid rgba(136,146,176,.2)}
.modal-body{display:grid;gap:18px;grid-template-columns:170px 1fr;padding:18px}
.modal-body img{width:150px;height:150px;border-radius:999px;object-fit:cover;border:2px solid rgba(136,146,176,.35)}
.close{cursor:pointer;border:0;background:transparent;color:var(--ink);font-size:24px}

@media(max-width:980px){.areas ul{columns:1}}
@media(max-width:720px){.modal-body{grid-template-columns:1fr;text-align:center}}


/* ===== Responsive improvements v13.2 ===== */
.hero{min-height:86vh}
.hero-title{font:900 clamp(40px,9.5vw,120px)/1 'Cinzel',serif}
.hero-sub{font-size:clamp(16px,4.2vw,22px)}
.section{padding:68px 0}
.divider{height:3px}
.nav-toggle{display:none;background:#0f2133;border:1px solid rgba(136,146,176,.35);color:var(--ink);padding:8px 10px;border-radius:10px}
@media(max-width:980px){
  .areas ul{columns:1}
}
@media(max-width:720px){
  .container{padding:18px}
  .section{padding:54px 0}
  .hero{min-height:78vh}
  .hero-title{font:900 clamp(36px,10.5vw,64px)/1 'Cinzel',serif}
  .hero-sub{font-size:clamp(14px,4vw,18px)}
  .modal-body{grid-template-columns:1fr;text-align:center}
  .modal-card{width:96vw;border-radius:14px}
  .nav-links{display:none;flex-direction:column;gap:6px;padding:8px 0}
  .nav-links.open{display:flex}
  .nav-toggle{display:inline-flex;align-items:center;gap:8px}
}
.section-title {
  white-space: pre-line;
}
#openBio {
  display: inline-block;
  margin-top: 14px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  color: #fff;                 /* texto blanco */
  background: #0e1a2b;         /* mismo azul oscuro del fondo */
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 6px;
  padding: 10px 20px;
  box-shadow: 0 3px 6px rgba(0,0,0,0.4);  /* relieve tipo 3D */
  cursor: pointer;
  transition: all .2s ease;
}

#openBio:hover {
  background: #1a2940;         /* azul un poco más claro en hover */
  box-shadow: 0 5px 10px rgba(0,0,0,0.6);
}
/* Centrar la foto del Director */
#director .avatar {
  display: block;
  margin: 0 auto;
}
#director .container {
  text-align: center;
}
#director .avatar {
  display: block;
  margin: 0 auto;
}
/* Links dentro del modal de la bio */
#bioModal a {
  color: #e6f4ff;                       /* blanco celesteado */
  text-decoration: none;
  font-weight: 600;
  transition: all .2s ease;
}

#bioModal a:hover {
  color: #ffffff;                       /* blanco puro */
  text-decoration: underline;
  text-shadow: 0 0 6px rgba(90,180,255,0.8),
               0 0 12px rgba(90,180,255,0.6); /* glow celeste */
}
/* Botón "Ver bio completa" */
.btn-bio {
  background: #1a3a60;             /* azul profundo */
  color: #e6f4ff;                  /* blanco celesteado */
  border: 1px solid #4da3ff;       /* borde celeste */
  border-radius: 6px;
  padding: 10px 20px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 3px 6px rgba(0,0,0,0.4);  /* relieve */
  transition: all .2s ease;
}

.btn-bio:hover {
  background: #255080;             /* más claro al pasar el mouse */
  color: #ffffff;                  /* blanco pleno */
  box-shadow: 0 5px 12px rgba(0,0,0,0.6),
              0 0 8px rgba(90,180,255,0.6); /* glow celeste */
}
/* Link en la sección Contacto */
#contacto a {
  color: #e6f4ff;  /* blanco celesteado */
  text-decoration: none;
  font-weight: 600;
  font-size: 18px; /* más grande que el de la bio */
  transition: all .2s ease;
}

#contacto a:hover {
  color: #ffffff; /* blanco pleno */
  text-decoration: underline;
  text-shadow: 0 0 6px rgba(90,180,255,0.8),
               0 0 12px rgba(90,180,255,0.6); /* glow celeste */
}
/* Botón "Ver bio completa" con estilo brillante */
.btn-bio {
  display: inline-block;
  background: #1a3a60;            /* azul profundo */
  color: #e6f4ff;                 /* blanco celesteado */
  border: 1px solid #4da3ff;      /* borde celeste */
  border-radius: 6px;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,0.4);  /* relieve flotante */
  transition: all .25s ease;
  text-shadow: 0 0 4px rgba(90,180,255,0.6); /* glow sutil permanente */
}

.btn-bio:hover {
  background: #255080;            /* más claro en hover */
  color: #ffffff;                 /* blanco pleno */
  text-shadow: 0 0 6px rgba(90,180,255,0.9),
               0 0 14px rgba(90,180,255,0.7); /* glow más intenso */
  box-shadow: 0 6px 14px rgba(0,0,0,0.6);     /* más relieve */
}
.modal-body a {
  color: #e6f7ff; /* blanco tirando a celeste */
  font-weight: 600;
  text-decoration: none;
  transition: color 0.3s, text-shadow 0.3s;
}

.modal-body a:hover {
  color: #ffffff;
  text-shadow: 0 0 8px #66ccff; /* efecto glow celeste */
}
/* === FIX MODAL iPhone / móvil — definitivo === */
.modal-card{
  max-height: 92vh;           /* que nunca exceda la pantalla */
  display: flex;
  flex-direction: column;
}
.modal-body{
  overflow-y: auto;            /* scroll interno del contenido */
  -webkit-overflow-scrolling: touch; /* scroll suave iOS */
}

/* Botón cerrar más cómodo al tacto */
.close{
  padding: .35rem .6rem;
  line-height: 1;
}

/* Ajuste en teléfonos */
@media (max-width: 720px){
  .modal-card{ max-height: 94vh; border-radius: 14px; width: 96vw; }
  .modal-body{ padding: 16px; }
}
.modal {
  max-height: 90vh;   /* que no ocupe más que la pantalla */
  overflow-y: auto;   /* que se pueda scrollear */
}
.socios-container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 40px; /* espacio entre cada socio */
  margin-top: 40px;
}

.socios-container .text-align-center {
  flex: 1 1 200px;   /* que cada bloque tenga un ancho mínimo y se adapte */
  max-width: 220px;  /* sutilmente más chico que el titular */
  text-align: center;
}

.socios-container img.avatar {
  width: 160px;   /* más chico que tu foto */
  height: 160px;
  border-radius: 50%;
  object-fit: cover;
}
/* grilla socios: horizontal y responsivo */
.socios-container{
  display:grid;
  grid-template-columns: repeat(4, minmax(180px,1fr));
  gap:36px;
  align-items:start;
  justify-items:center;
  margin-top:28px;
}

/* cada tarjeta un poco más chica que la del titular */
.socio{
  max-width:220px;
  text-align:center;
}

.socio .avatar{
  width:160px; height:160px; object-fit:cover; border-radius:50%;
  border:2px solid rgba(255,255,255,.2);
}

/* tablets y móvil */
@media(max-width:1024px){
  .socios-container{ grid-template-columns: repeat(2, minmax(180px,1fr)); }
}
@media(max-width:640px){
  .socios-container{ grid-template-columns: 1fr; }
}
/* uniformar estilo de todos los botones bio */
.btn-bio {
  background-color: #0d1b2a; /* mismo azul oscuro que tu esquema */
  color: #fff;
  border: 1px solid #fff;
  padding: 8px 18px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background-color 0.3s ease;
}

.btn-bio:hover {
  background-color: #1b263b; /* un tono apenas más claro */
}
.modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(13,27,42,.72);
}
.modal.open {
  display: block;
}
.modal .modal-body {
  max-width: 800px;
  margin: 8vh auto;
  background: #0d1b2a;
  color: #fff;
  padding: 24px;
  border-radius: 10px;
  position: relative;
}
.modal .close {
  position: absolute;
  right: 18px;
  top: 12px;
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 24px;
  cursor: pointer;
}
/* evita que quede “colgado” el panel interno de Mario sobre los demás */
.bio-modal {
  position: static !important;
}
/* Ajuste de encuadre solo para Juan */
#avatar-juan{
  object-fit: cover;         /* ya lo usa, lo refuerzo por si acaso */
  object-position: 28% 24%;  /* horizontal centro, vertical 24% desde arriba */
}
/* Estilo para títulos y descripciones en Áreas de Práctica */
.area-title {
  font-size: 1.2rem;   /* más grande que el texto común */
  font-weight: 600;    /* un poco más gruesa */
  color: #ffffff;      /* blanco fuerte */
}

.area-desc {
  font-size: 0.9rem;   /* más chica */
  color: #b0b0b0;      /* gris claro, menos protagonista */
  display: block;
  margin-top: 4px;     /* un poquito de espacio debajo del título */
}