/* ==========================================================
   Secciones de cada página y responsive
   ========================================================== */

/* Inicio · La rama: foto en el marco del visor + misión y visión ----------- */
.rama { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(var(--sp-6), 6vw, var(--sp-9)); align-items: start; }
/* Foto grupal horizontal: a todo el ancho, encima del texto */
.rama.has-wide-photo { grid-template-columns: minmax(0, 1fr); gap: clamp(var(--sp-5), 4vw, var(--sp-7)); }
.mv { display: grid; gap: var(--sp-6); margin-top: var(--sp-6); }
.mv article { padding-left: var(--sp-5); border-left: 2px solid var(--c-link); }
.mv h3 { font-size: var(--fs-md); color: var(--c-heading); }
.mv .key { font-weight: 700; color: var(--c-link); margin: var(--sp-1) 0 var(--sp-2); }

/* Inicio · Índice de capítulos por área ------------------------------------ */
.index-head { display: flex; justify-content: space-between; align-items: end; gap: var(--sp-5); flex-wrap: wrap; margin-bottom: var(--sp-6); }
.index { list-style: none; border-top: 1px solid var(--c-line); }
.index > li { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--sp-5); align-items: baseline; padding: var(--sp-4) 0; border-bottom: 1px solid var(--c-line); }
.index-area { display: flex; gap: var(--sp-3); align-items: baseline; }
.index-area .mono { color: var(--c-orange-text); min-width: 2.5em; }
.index-area span:last-child { font-weight: 700; color: var(--c-heading); }
.index-siglas { display: flex; flex-wrap: wrap; gap: var(--sp-2); list-style: none; }
.index-siglas a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--sp-3);
  border: 1px solid var(--c-line); border-radius: var(--r-ctl); background: var(--c-card);
  font-weight: 700; color: var(--c-heading); text-decoration: none;
}
.index-siglas a:hover { border-color: var(--c-link); color: var(--c-link); }

/* Inicio · Historia ------------------------------------------------------- */
.story { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--sp-7); }
.steps { list-style: none; position: relative; display: grid; gap: var(--sp-6); padding-left: var(--sp-6); border-left: 1px solid var(--c-line); }
.steps li { position: relative; }
.steps li::before { content: ""; position: absolute; left: calc(-1 * var(--sp-6) - 5px); top: .55em; width: 9px; height: 9px; background: var(--c-link); }
.steps .mono { color: var(--c-orange-text); }
.steps h3 { font-size: var(--fs-md); color: var(--c-heading); margin: var(--sp-1) 0; }
.steps p { color: var(--c-text); max-width: 60ch; }

/* Inicio · Tres formas de participar (lista, no tarjetas) ------------------ */
.ways { list-style: none; border-top: 2px solid var(--c-heading); }
.ways li { display: grid; grid-template-columns: 96px minmax(0, 4fr) minmax(0, 6fr) 180px; gap: var(--sp-5); align-items: center; padding: var(--sp-5) 0; border-bottom: 1px solid var(--c-line); }
.ways .num { font-family: var(--f-mono); font-size: var(--fs-xl); font-weight: 500; color: var(--c-link); line-height: 1; }
.ways h3 { font-size: var(--fs-lg); color: var(--c-heading); }
.ways p { color: var(--c-muted); }
.ways .link-arrow { justify-self: end; }

/* Inicio · Franja de afiliación ------------------------------------------- */
.join { --c-focus: #fff; background: var(--c-blue); color: #fff; padding-block: var(--sp-7) calc(var(--sp-7) + var(--foot-fade)); }   /* foco blanco sobre azul: 6.5:1; abajo, espacio para el degradado del pie */
.join .wrap { display: grid; grid-template-columns: minmax(0, 7fr) auto; gap: var(--sp-6); align-items: center; }
.join h2 { color: #fff; font-size: var(--fs-xl); letter-spacing: -.015em; }
.join p { color: #E3EEF6; margin-top: var(--sp-2); max-width: 56ch; }

/* Capítulos: lectura del encabezado --------------------------------------- */
.head-readout { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); margin-top: var(--sp-5); color: var(--c-on-dark-muted); }
.head-readout b { color: #fff; font-weight: 500; }

/* Contacto ----------------------------------------------------------------- */
.contact { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--sp-7); align-items: start; }
.contact-info { list-style: none; display: grid; gap: var(--sp-5); }
.contact-info li { padding-bottom: var(--sp-5); border-bottom: 1px solid var(--c-line); }
.contact-info .mono { color: var(--c-orange-text); display: block; margin-bottom: var(--sp-1); }
.contact-info .handles { list-style: none; display: grid; gap: var(--sp-1); }

/* Responsive --------------------------------------------------------------- */
@media (min-width: 1181px) and (max-width: 1240px) {   /* encabezado completo y ajustado: el IEEE Master Brand no se sale */
  .header-bar { gap: var(--sp-4); }
  .main-nav a { padding: 0 var(--sp-2); }
  .main-nav a::after { left: var(--sp-2); right: var(--sp-2); }
}
/* Menú móvil hasta 1180 px: con el botón de tema, el encabezado completo necesita ~1170 px */
@media (max-width: 1180px) {
  .main-nav {
    position: absolute; left: 0; right: 0; top: 100%; margin: 0; flex-direction: column; align-items: stretch; gap: 0;
    background: var(--c-menu-bg); color: var(--c-ink); border-bottom: 1px solid var(--c-line);
    box-shadow: 0 12px 24px -12px var(--c-menu-shadow);
    opacity: 0; transform: translateY(-8px); visibility: hidden;
    transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease), visibility 0s linear var(--dur-2);
  }
  .main-nav.open { opacity: 1; transform: none; visibility: visible; transition-delay: 0s; }
  .main-nav ul { flex-direction: column; width: min(100% - 2 * var(--gutter), var(--wrap)); margin: 0 auto; padding: var(--sp-3) 0; }
  .main-nav a { min-height: 52px; padding: 0; font-size: 1.05rem; border-bottom: 1px solid var(--c-line); }
  .main-nav a::after { left: 0; right: auto; width: 32px; bottom: 10px; }
  .main-nav a[aria-current="page"] { color: var(--c-link); }
  .main-nav .menu-cta { display: flex; width: min(100% - 2 * var(--gutter), var(--wrap)); margin: 0 auto var(--sp-5); }
  .theme-toggle { display: flex; justify-content: flex-start; gap: var(--sp-3); width: min(100% - 2 * var(--gutter), var(--wrap)); height: auto; min-height: 52px; margin: 0 auto var(--sp-4); padding: 0 var(--sp-4); border-color: var(--c-line); font-weight: 600; font-size: 1rem; }
  .theme-toggle .theme-label { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .header-cta { display: none; }
  .menu-toggle { display: inline-flex; }
  .ieee-mb { margin-left: auto; }
}
@media (max-width: 1100px) {
  .area { grid-template-columns: 1fr; gap: var(--sp-4); }
  .rama, .story, .contact { grid-template-columns: 1fr; }
  .rama .frame-visor:not(.is-wide) { max-width: 520px; }
  .log-entry { grid-template-columns: 120px minmax(0, 1fr); }
  .log-entry .ph { grid-column: 2; }
  .people { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .meta-sso { display: none; }
  .modules { grid-template-columns: 1fr 1fr; }
  .ways li { grid-template-columns: 56px minmax(0, 1fr); }
  .ways li p, .ways li .link-arrow { grid-column: 2; }
  .index > li { grid-template-columns: 1fr; gap: var(--sp-3); }
  .join .wrap { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .meta-links, .admin-links { gap: var(--sp-1) var(--sp-4); }
  .meta-links li + li::before, .admin-links li + li::before { content: none; }
  .site-id img { height: 40px; }
  .ieee-mb img { height: 29px; }
  .header-bar { gap: var(--sp-3); }
  .menu-toggle .label { display: none; }
  .hero { min-height: max(560px, calc(100svh - var(--meta-h))); }
  .visor-frame { inset: calc(var(--header-h) + var(--sp-1)) var(--sp-2) var(--sp-2); }
  .visor-bar { left: var(--sp-5); right: var(--sp-5); bottom: var(--sp-4); }
  .hero-content { padding-bottom: calc(var(--sp-9) + var(--sp-4)); }
  .hero .btn-row .btn { flex: 1 1 100%; }
  .modules { grid-template-columns: 1fr; }
  .module.is-wide { grid-column: auto; }
  .form { padding: var(--sp-5); }
  .form-row { grid-template-columns: 1fr; }
  .people { grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
  .log-entry { grid-template-columns: 1fr; gap: var(--sp-3); }
  .log-entry .ph { grid-column: auto; }
}

/* Pie apilado (< 960 px): enlaces en dos columnas bajo la presentación ---- */
@media (max-width: 959px) {
  .site-footer { --pt: 32px; }
  .foot-intro, .foot-legal { max-width: 520px; }
  .foot-arc { position: static; width: auto; max-width: 520px; margin-top: var(--sp-5); display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4) var(--sp-6); }
  .arc-group { position: static; text-align: left; pointer-events: auto; }
  .arc-shape, .arc-pad { display: none; }
  .foot-globe { --gx: 48px; opacity: .55; }     /* el planeta queda detrás, a la derecha; la etiqueta de Quito entra completa */
}
@media (max-width: 760px) {
  .foot-main { padding-bottom: var(--sp-4); }
  .foot-hero { display: flex; flex-direction: column; }
  .foot-globe {                                   /* franja con el planeta al final, Quito a la vista */
    position: relative; order: 2; top: auto; right: auto; transform: none; opacity: 1;
    width: 100%; aspect-ratio: auto; height: 180px; overflow: hidden;
    -webkit-mask-image: linear-gradient(transparent, #000 45%); mask-image: linear-gradient(transparent, #000 45%);
  }
  .foot-globe img { inset: auto; left: calc(50% - 560px * var(--px) / 900); top: calc(130px - 560px * var(--py) / 900); width: 560px; height: 560px; }
  .globe-pin { left: 50%; top: 130px; }
}
@media (max-width: 600px) {
  .foot-arc { grid-template-columns: 1fr; gap: var(--sp-4); }
  .foot-intro .site-id img { height: 48px; }
}

/* Movimiento reducido: todo queda quieto y visible ------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation: none !important; }
  .js .module.will-enter { opacity: 1; transform: none; }
}
@media (max-width: 400px) {
  .header-bar { gap: var(--sp-2); }
  .site-id img { height: 34px; }
  .menu-toggle { padding: 0 var(--sp-2); }
}

/* Portada en celular o tablet en vertical: la foto 16:9 se ve COMPLETA en una franja bajo
   el encabezado (sin recortar a los lados) y el texto va debajo, sobre el azul del visor.
   La franja se funde con el fondo por abajo; el encabezado sigue legible por arriba. */
@media (orientation: portrait) and (max-width: 1024px) {
  .hero { --band: calc(100vw * 9 / 16); min-height: 0; align-items: flex-start; padding-top: calc(var(--header-h) + var(--band) - var(--sp-5)); }
  .visor-media { inset: var(--header-h) 0 auto; height: auto; aspect-ratio: 16 / 9; background: transparent; }   /* 16:9 exacto, también con barra de desplazamiento */
  .visor-slide { border-radius: 0; }
  @media (prefers-reduced-motion: no-preference) {
    .visor-slide.is-on { animation-name: visor-kenburns-soft; }   /* acercamiento mínimo: la foto se ve casi completa */
  }
  .visor-media::after {
    background:
      linear-gradient(180deg, rgba(0, 20, 46, .35) 0, rgba(0, 20, 46, 0) 30%),
      linear-gradient(0deg, var(--c-deep) 0, rgba(0, 20, 46, 0) 38%);
  }
  .hero-content { padding-top: 0; }
}
@keyframes visor-kenburns-soft { from { transform: scale(1); } to { transform: scale(1.03); } }