:root {
  --bg: #0D0D0D;
  --bg-alt: #0A2E37;
  --white: #FFFFFF;
  --white-dim: #B9B7B3;
  --orange: #E8972B;
  --cyan-dark: #047C95;
  --border: #202124;
  --header-h: 64px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { height: 100%; }

/* Sticky footer: body es el wrapper flex de página completa (min-height:
   100vh). header es position:fixed, así que queda fuera de este flujo;
   main (flex:1) y footer son los dos flex items reales. En páginas
   cortas, main se estira y empuja el footer al fondo del viewport; en
   páginas largas, el footer simplemente sigue al contenido. */
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--white);
  font-family: "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.6;
}

h1, h2, h3 {
  font-family: "Montserrat", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Centrado: solo en Inicio */
body.home { text-align: center; }

/* Fondo global: foto de haz de luz (img/bg-haz-luz.jpg) detrás de todo
   el contenido, con overlay oscuro encima para legibilidad. Dos
   pseudo-elementos aparte (no tocan background/color de body):
   ::before = imagen, ::after = overlay. En Inicio la imagen va centrada
   y protagonista; en el resto, recortada a la esquina superior derecha,
   sutil, detrás del header. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image: url("img/bg-haz-luz.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top right;
}
/* Overlay con máscara radial: cerca de la esquina superior derecha deja
   ver la foto con oscurecido leve, y se va cerrando hacia el resto de
   la página — así queda como un detalle ambiental reconocible, no
   compite con el texto. Mismos valores en las 5 páginas interiores
   (Quiénes somos, Objetivos, Actividades, Únete, Contacto), que
   comparten este único selector sin overrides propios. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 620px 500px at 100% 0%, rgba(13, 13, 13, 0.22) 0%, rgba(13, 13, 13, 0.72) 55%, rgba(13, 13, 13, 0.85) 100%);
}

/* Inicio: imagen protagonista, centrada detrás del logo/hero. El núcleo
   del haz llega casi a blanco puro en la foto original, así que se
   atenúa con filter en vez de subir el overlay parejo (eso apagaría
   también los bordes, donde el haz debe seguir leyéndose como marca).
   El overlay pasa a un radial oscurecido sobre el bloque de contenido
   (logo + texto + botón, centrado y pegado al tercio inferior) y más
   claro hacia los bordes, para que el haz quede de atmósfera. */
body.home::before {
  background-position: center center;
  filter: brightness(0.5);
}
body.home::after {
  background: radial-gradient(ellipse 1050px 800px at 50% 68%, rgba(13, 13, 13, 0.88) 0%, rgba(13, 13, 13, 0.68) 55%, rgba(13, 13, 13, 0.55) 100%);
}

.wrap { max-width: 780px; margin: 0 auto; padding: 0 24px; }

/* Header (igual en todas las páginas) */
header {
  position: fixed;
  top: 0; left: 0; width: 100%;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: rgba(14,14,15,0.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--border);
  z-index: 10;
}

.header-inner {
  max-width: 780px;
  margin: 0 auto;
  padding: 0 24px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.logo { display: inline-flex; align-items: center; text-decoration: none; }
.logo img { height: 32px; width: auto; display: block; }

nav ul { list-style: none; display: flex; gap: 22px; flex-wrap: wrap; }
nav a { color: var(--white-dim); text-decoration: none; font-size: 0.92rem; letter-spacing: 0.02em; transition: color 0.15s; }
nav a:hover, nav a:focus-visible { color: var(--orange); }
nav a[aria-current="page"] { color: var(--orange); }

/* justify-content: flex-start (en vez de center) para que el título de
   todas las páginas de contenido arranque siempre a la misma altura,
   sin depender de cuánto contenido tenga cada una debajo.
   flex: 1 (en vez de min-height: 100vh) es lo que permite el sticky
   footer: main se estira para llenar el espacio libre del body. */
main.page {
  flex: 1;
  padding-top: calc(var(--header-h) + 50px);
  padding-bottom: 60px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* Centrado: solo en Inicio (evita que el botón se estire a lo ancho) */
body.home main.page { align-items: center; justify-content: flex-end; }

h1.title { font-size: clamp(2.6rem, 7vw, 4.2rem); font-weight: 700; letter-spacing: -0.01em; line-height: 1; margin-top: 0; margin-bottom: 100px; }
/* ~114% del tamaño anterior (clamp(21rem,65vw,42rem)); el máximo (48rem =
   768px) queda por debajo de los 780px de .header-inner. */
.title-logo { display: block; width: clamp(24rem, 74vw, 48rem); max-width: 100%; height: auto; }

/* Separador fino entre el tagline del logo y el párrafo de intro */
.hero-divider { width: 300px; height: 2px; border: none; background: #D4A574; margin: 0 auto 40px; }

/* Párrafo de intro del hero: minúsculas normales, sin tracking, distinto del tagline del logo.
   Selector con más especificidad que "main.page p" (640px) para que el
   max-width propio realmente se aplique. */
main.page .hero-lede { max-width: 960px; font-size: 0.875rem; text-transform: none; letter-spacing: normal; }

h2.section-title {
  font-size: 1.9rem; font-weight: 700; margin-bottom: 26px;
  display: flex; align-items: baseline; gap: 10px;
}
h2.section-title::before { content: ""; width: 26px; height: 3px; background: var(--orange); display: inline-block; margin-bottom: 5px; }

main.page p { color: var(--white-dim); max-width: 640px; margin-bottom: 16px; }
main.page p:last-child { margin-bottom: 0; }

h3.subhead { font-size: 1.05rem; font-weight: 700; color: var(--white); margin: 28px 0 10px; }

/* Dato destacado: línea o cifra clave en naranja + Inter Semibold. No es
   una etiqueta (para eso están .junta-role / .unete-label, en mayúscula
   y 0.7rem): mantiene el tamaño del texto que la rodea. El segundo
   selector iguala la especificidad de "main.page.content-page p" para
   poder pisar color y peso cuando se aplica sobre un párrafo. */
.dato-destacado,
main.page.content-page .dato-destacado {
  color: var(--orange);
  font-weight: 600;
}

/* Contenedor general de las páginas de contenido (Quiénes somos, Objetivos,
   Actividades, Únete, Contacto). Clase específica compartida, no
   reemplaza a .wrap ni a main.page para no afectar Inicio ni el header/footer.
   780px = mismo max-width que .header-inner, para que ambos compartan
   el mismo borde izquierdo al centrarse. */
.content-page { width: 100%; max-width: 780px; margin: 0 auto; padding: 0 24px; }
main.page.content-page p { max-width: 700px; text-align: left; font-size: 14px; }
/* main.page es flex-column con align-items:stretch por defecto (solo
   Inicio lo pisa con center): sin esto .btn se estira a todo el ancho
   del contenedor en vez de ajustarse a su contenido. */
main.page.content-page .btn { align-self: flex-start; }

/* Guion naranja en subtítulos de sección, igual al del H1 pero al 60% del tamaño (26px → ~16px).
   Modificador aparte (no ligado a .content-page) para no afectar otros h3.subhead
   (p.ej. "Junta directiva" en Quiénes somos) que no lo pidieron. */
.subhead-dash { display: flex; align-items: baseline; gap: 6px; }
.subhead-dash::before { content: ""; width: 16px; height: 2px; background: var(--orange); display: inline-block; margin-bottom: 3px; }

.btn {
  display: inline-block; background: var(--cyan-dark); color: var(--white); font-weight: 700;
  padding: 9px 20px; border-radius: 3px; text-decoration: none; font-size: 0.85rem;
  letter-spacing: 0.02em; transition: background 0.15s; margin-top: 24px;
}
.btn:hover, .btn:focus-visible { background: #0b92af; }

/* Link tipo "ver más" con flecha (p.ej. hacia Junta Directiva completa
   desde Quiénes somos). Mismo naranja que el resto de los enlaces del
   sitio, sin fondo ni caja — no es un .btn. */
.link-arrow { color: var(--orange); text-decoration: none; font-weight: 600; display: inline-block; margin-top: 16px; }
.link-arrow:hover, .link-arrow:focus-visible { text-decoration: underline; }

/* Estilo unificado de etiquetas/labels: naranja + mayúscula + tracking */
.junta-role,
.unete-label {
  color: var(--orange);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.7rem;
}

/* Junta directiva */
.junta-grid { width: 100%; max-width: 700px; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; margin-top: 24px; }
.junta-card { border: 1px solid var(--border); background: var(--bg-alt); border-radius: 4px; padding: 10px 18px; }
.junta-role { margin-bottom: 6px; }
.junta-name { color: var(--white-dim); font-size: 0.875rem; font-style: italic; }

/* País + profesión: línea debajo del nombre, solo en la página Junta
   Directiva completa (en Quiénes somos las tarjetas no la llevan). Texto
   en formato oración, sin mayúsculas forzadas. Tamaño: 0.7rem, el mismo
   que ya usa .junta-role — el más chico de la escala tipográfica en el
   contexto de esta tarjeta. Color: --white-dim con menor opacidad, para
   quedar más apagado que el gris de cuerpo del sitio sin llegar a blanco. */
.junta-meta { color: rgba(185, 183, 179, 0.6); font-size: 0.7rem; margin-top: 2px; }

/* Únete */
.unete-block { width: 100%; max-width: 700px; border: 1px solid var(--border); background: var(--bg-alt); border-radius: 4px; padding: 22px 24px; margin-top: 24px; }
.unete-row { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.unete-row:last-child { border-bottom: none; }
.unete-label { font-weight: 700; }
.unete-value { color: var(--white-dim); font-size: 0.92rem; }

/* Contacto: ícono + label arriba, dato debajo (mismo patrón vertical
   que Actividades/Únete/Objetivos v2), sin líneas separadoras entre filas. */
.contact-list { width: 100%; max-width: 700px; list-style: none; margin-top: 20px; }
.contact-list li { display: flex; flex-direction: column; gap: 4px; padding: 10px 0; color: var(--white-dim); font-size: 0.95rem; }
.contact-list strong { color: var(--white); display: inline-flex; align-items: center; gap: 6px; }
.contact-icon { width: 16px; height: 16px; flex-shrink: 0; }
/* Texto de respuesta (email, "Próximamente", "Escríbenos a...") al
   mismo tamaño que el párrafo de intro de la página (14px), igual en
   las 5 filas — el label ("Email", "Instagram"...) no cambia. */
.contact-list li > a,
.contact-list li > span { font-size: 14px; }
.contact-list a { color: var(--orange); text-decoration: none; }
.contact-list a:hover { text-decoration: underline; }

/* Footer institucional, en todas las páginas. Opacidad reducida sobre
   todo el bloque (no solo el texto) para que el logo también baje de
   peso, no solo el párrafo — el objetivo es que se sienta como cierre
   de página, no como un segundo bloque de contenido. */
footer { padding: 30px 0 24px; text-align: center; opacity: 0.55; }
footer .logo { justify-content: center; display: flex; margin-bottom: 10px; text-decoration: none; }
footer .logo img { height: 20px; }
footer p { color: var(--white-dim); font-size: 0.65rem; max-width: 520px; margin: 0 auto; }

/* Fila de íconos de redes en el footer, debajo del texto institucional.
   Hereda la opacidad reducida del footer (no necesita la suya propia);
   mismo naranja de hover que el resto de los enlaces del sitio. */
.footer-social { display: flex; justify-content: center; gap: 14px; margin-top: 12px; }
.footer-social a { color: var(--white-dim); display: inline-flex; }
.footer-social a:hover, .footer-social a:focus-visible { color: var(--orange); }

@media (max-width: 560px) {
  .header-inner { flex-direction: column; align-items: flex-start; padding: 10px 24px; }
  header { height: auto; position: fixed; }
  main.page { padding-top: 130px; }
}