/* ==========================================================================
   MAIN.CSS — Reset, base, tipografía, footer, utilidades
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. RESET Y BASE
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: var(--color-cream);
  color: var(--color-black);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.7;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  padding-left: 1.25em;
}

/* GeneratePress: elimina el fondo blanco del body que impone el tema padre */
.site {
  background-color: var(--color-cream);
}

/* --------------------------------------------------------------------------
   2. TIPOGRAFÍA
   -------------------------------------------------------------------------- */

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  margin-top: 0;
  margin-bottom: 0.5em;
  color: var(--color-black);
}

h4,
h5,
h6 {
  font-family: var(--font-body);
  font-weight: 500;
  line-height: 1.3;
  margin-top: 0;
  margin-bottom: 0.5em;
  color: var(--color-black);
}

h1 {
  font-size: clamp(var(--text-3xl), 5vw, var(--text-5xl));
}
h2 {
  font-size: clamp(var(--text-2xl), 3.5vw, var(--text-4xl));
}
h3 {
  font-size: clamp(var(--text-xl), 2.5vw, var(--text-3xl));
}
h4 {
  font-size: var(--text-xl);
}
h5 {
  font-size: var(--text-lg);
}
h6 {
  font-size: var(--text-base);
}

p {
  margin-top: 0;
  margin-bottom: 1em;
}

/* Datos técnicos de la materioteca */
code,
pre,
.font-mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

/* Metadatos y textos secundarios */
.text-meta {
  font-size: var(--text-sm);
  color: var(--color-gray);
  font-weight: 300;
}

/* --------------------------------------------------------------------------
   3. CONTENEDOR
   -------------------------------------------------------------------------- */

.container,
.grid-container {
  margin-inline: auto;
  padding-inline: var(--container-pad);
  max-width: var(--container-max);
}

/* GeneratePress: anula el contenedor del footer */
.inside-site-info {
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* GeneratePress: #page tiene clases .container y .grid-container —
   resetear su padding y max-width para que las secciones
   lleguen al borde del viewport. El padding de contenido
   lo gestiona cada .container interior. */
#page.site {
  padding-inline: 0;
  max-width: none;
}

/* --------------------------------------------------------------------------
   4. CONTENIDO PRINCIPAL
   -------------------------------------------------------------------------- */

/* GeneratePress: elimina el fondo blanco y el flex-row de la zona de contenido.
   GP pone display:flex para colocar sidebar + main en fila; como no usamos sidebar
   en ninguna página, lo sobreescribimos a block para que hero y body apilen. */
.site-content {
  background-color: transparent;
  display: block;
}

/* GeneratePress: elimina el margen de 20px que el layout "separate-containers"
   aplica a .site-main — impide que las secciones rellenen el ancho completo.
   Usamos el mismo selector para tener especificidad igual o superior. */
.separate-containers .site-main,
.one-container .site-main {
  margin: 0;
}

/* GeneratePress: .site-content es flex y .site-main tiene flex-grow:0 por defecto —
   forzar width:100% para que ocupe todo el contenedor y las secciones
   lleguen al ancho completo. */
.site-main {
  width: 100%;
}

/* GeneratePress: elimina el margin-bottom automático entre hijos directos
   de .site-main — los templates gestionan su propio espaciado. */
.site-main > * {
  margin-bottom: 0;
}

/* Páginas por defecto (editor WP): contener entry-header y entry-content
   dentro del max-width del sitio sin perder el fondo blanco full-width
   de .inside-article. */
.inside-article > .entry-header,
.inside-article > .entry-content {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* Gutenberg: permitir que bloques .alignfull rompan el contenedor */
.inside-article > .entry-content > .alignfull {
  max-width: none;
  margin-inline: calc(-1 * var(--container-pad));
  padding-inline: 0;
}

/* --------------------------------------------------------------------------
   5. FOOTER
   -------------------------------------------------------------------------- */

/* ── Base: reset GP ── */
.site-footer {
  background: transparent;
  color: inherit;
  padding-block: 0;
  margin-top: 0;
}

/* Reset el color genérico de links heredado de GP — cada sección gestiona los suyos */
.site-footer a {
  color: inherit;
  transition: none;
}

.site-footer a:hover {
  opacity: 1;
}

/* Oculta el "Built with GeneratePress" */
.site-info .sep,
.site-info a[href*="generatepress"] {
  display: none;
}

/* ── BANDA CREMA: Brand Statement ── */
.footer-brand {
  background: var(--color-cream);
  border-top: 3px solid var(--color-primary);
  padding: 3.5rem 0 3rem;
}

.footer-brand__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3rem;
  align-items: center;
}

.footer-brand__heading {
  font-family: var(--font-display);
  font-size: clamp(1.875rem, 3vw, 2.875rem);
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--color-black);
  margin-bottom: 1.5rem;
}

.footer-brand__heading em {
  font-style: italic;
  color: var(--color-gray);
}

/* Pills de líneas de investigación */
.footer-brand__lineas {
  display: flex;
  gap: 0.625rem;
  flex-wrap: wrap;
}

.footer-brand__linea-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.875rem 0.375rem 0.625rem;
  background: var(--color-white);
  border: 1px solid var(--color-gray-light);
  border-radius: 999px;
  font-size: 0.8125rem;
  text-decoration: none;
  font-weight: 400;
  transition:
    border-color var(--transition-base),
    transform var(--transition-base);
}

.footer-brand__linea-pill:hover {
  border-color: currentColor;
  transform: translateY(-1px);
}

.footer-brand__linea-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.footer-brand__linea-arrow {
  font-size: 0.7rem;
  opacity: 0.4;
  margin-left: 0.125rem;
}

/* Stats dinámicas de CPTs */
.footer-brand__stats {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: flex-end;
}

.footer-brand__stat-sep {
  width: 32px;
  height: 1px;
  background: var(--color-gray-light);
  align-self: flex-end;
}

.footer-brand__stat {
  text-align: right;
}

.footer-brand__stat-num {
  display: block;
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--color-black);
}

.footer-brand__stat-label {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-gray);
  margin-top: 0.125rem;
  font-weight: 500;
}

/* ── CUERPO OSCURO: 4 columnas ── */
.footer-dark {
  background: var(--color-black);
  color: var(--color-white);
}

.footer-dark__cols {
  padding-block: 3rem;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 2.5rem;
}

.footer-dark__col-label {
  display: block;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-primary);
  margin-bottom: 1.25rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--color-dark-border-mid);
}

/* Logo en la columna oscura */
.footer-logo {
  border-left: 4px solid var(--color-primary);
  padding-left: 14px;
  margin-bottom: 1rem;
  display: inline-block;
}

.footer-logo .custom-logo {
  height: 80px;
  width: auto;
  display: block;
  filter: invert(1);
}

.footer-logo__link {
  text-decoration: none;
  display: block;
}

.footer-logo__name {
  display: block;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 400;
  color: var(--color-white);
  line-height: 1.1;
}

.footer-logo__name strong {
  font-weight: 600;
}

.footer-logo__sub {
  display: block;
  font-size: 8.5px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--color-gray);
  font-family: var(--font-body);
  margin-top: 2px;
}

.footer-dark__tagline {
  font-size: 0.8125rem;
  line-height: 1.65;
  color: var(--color-dark-text-muted);
  margin-bottom: 1.5rem;
  max-width: 260px;
}

/* Líneas de investigación en la columna oscura */
.footer-dark__lineas-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.footer-dark__linea-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: var(--color-dark-text-muted);
  text-decoration: none;
  padding: 0.3rem 0;
  transition: color var(--transition-base);
}

.footer-dark__linea-badge:hover {
  color: var(--color-white);
}

.footer-dark__linea-strip {
  width: 3px;
  height: 14px;
  border-radius: 2px;
  flex-shrink: 0;
}

/* Menú de navegación en footer */
.footer-dark__nav {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-dark__nav li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 0;
  border-bottom: 1px solid var(--color-dark-border);
  color: var(--color-dark-text-muted);
  text-decoration: none;
  font-size: 0.8125rem;
  transition:
    color var(--transition-base),
    padding-left var(--transition-base);
}

.footer-dark__nav li a:hover {
  color: var(--color-white);
  padding-left: 4px;
}

.footer-dark__nav li a::after {
  content: "→";
  font-size: 0.7rem;
  color: var(--color-primary);
  opacity: 0;
  transition: opacity var(--transition-base);
  flex-shrink: 0;
}

.footer-dark__nav li a:hover::after {
  opacity: 1;
}

/* Contacto */
.footer-dark__contact {
  font-size: 0.8125rem;
  color: var(--color-dark-text-muted);
  line-height: 1.6;
  margin-bottom: 0.375rem;
}

.footer-dark__contact a {
  color: var(--color-primary);
  text-decoration: none;
  transition: opacity var(--transition-base);
}

.footer-dark__contact a:hover {
  opacity: 0.75;
}

/* Iconos de redes sociales */
.footer-social {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-dark-border);
}

.footer-social__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--color-dark-border-mid);
  color: var(--color-gray);
  text-decoration: none;
  transition:
    border-color var(--transition-base),
    color var(--transition-base),
    background var(--transition-base);
}

.footer-social__btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: rgba(247, 198, 0, 0.06);
}

.footer-social__btn i {
  font-size: 14px;
  display: block;
}

/* ── BANDA INFERIOR ── */
.footer-bottom {
  background: var(--color-black-deep);
  border-top: 1px solid var(--color-dark-border);
}

.footer-bottom__inner {
  padding-block: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

/* Bloque izquierdo: etiqueta + logo CC */
.footer-bottom__affil {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.footer-bottom__affil-label {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-dark-text-muted);
  white-space: nowrap;
}

.footer-bottom__affil-link {
  display: block;
  text-decoration: none;
  opacity: 0.9;
  transition: opacity var(--transition-base);
}

.footer-bottom__affil-link:hover {
  opacity: 1;
}

.footer-bottom__affil-img {
  height: 30px;
  width: auto;
  display: block;
}

.footer-bottom__affil-name {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-dark-text-muted);
  line-height: 1.4;
}

/* Bloque derecho: copyright + legal juntos */
.footer-bottom__meta {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.footer-bottom__copyright {
  font-size: 0.6875rem;
  color: var(--color-dark-text-muted);
}

.footer-bottom__legal {
  display: flex;
  gap: 1.25rem;
  list-style: none;
  padding: 0;
  margin: 0;
  flex-wrap: wrap;
}

.footer-bottom__legal a {
  font-size: 0.6875rem;
  color: var(--color-dark-text-muted);
  text-decoration: none;
  transition: color var(--transition-base);
}

.footer-bottom__legal a:hover {
  color: var(--color-white);
}

/* ── Responsive ≤ 900px ── */
@media (max-width: 900px) {
  .footer-brand__inner {
    grid-template-columns: minmax(0, 1fr); /* 1fr no baja del ancho mínimo del contenido: desbordaba a 320 px */
    gap: 2rem;
  }

  .footer-brand__stats {
    flex-direction: row;
    align-items: center;
    gap: 1.5rem;
  }

  .footer-brand__stat-sep {
    width: 1px;
    height: 36px;
    align-self: center;
  }

  .footer-brand__stat {
    text-align: left;
  }

  .footer-dark__cols {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }

  .footer-dark__col--brand {
    grid-column: 1 / -1;
  }

  .footer-dark__col--contact {
    grid-column: 1 / -1;
  }
}

/* ── Responsive ≤ 600px ── */
@media (max-width: 600px) {
  .footer-brand {
    padding: 2.5rem 0 2rem;
  }

  .footer-dark__cols {
    grid-template-columns: 1fr;
    padding-block: 2.5rem;
  }

  .footer-dark__col--brand,
  .footer-dark__col--contact {
    grid-column: auto;
  }

  .footer-bottom__inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer-bottom__legal {
    gap: 1rem;
  }
}

/* --------------------------------------------------------------------------
   6. UTILIDADES GLOBALES
   -------------------------------------------------------------------------- */

/* Fondo de sección oscuro */
.section--dark {
  background-color: var(--color-black);
  color: var(--color-white);
}

.section--dark h1,
.section--dark h2,
.section--dark h3 {
  color: var(--color-white);
}

/* Fondo crema (por defecto) */
.section--light {
  background-color: var(--color-cream);
}

/* Fondo blanco */
.section--white {
  background-color: var(--color-white);
}

/* Separadores de sección */
.section {
  padding-block: var(--space-2xl);
}

.section--sm {
  padding-block: var(--space-xl);
}

/* Accesibilidad: focus visible */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

/* Screen reader only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* GP navigation fallback overrides (si el header personalizado no carga) */
.mobile-menu-control-wrapper .menu-toggle,
.mobile-menu-control-wrapper,
.mobile-menu-control-wrapper .menu-toggle:focus,
#site-navigation.toggled {
  background: none;
}

.main-navigation .inside-navigation {
  background-color: var(--color-white);
}

.main-navigation .inside-navigation li:hover {
  background-color: var(--color-primary);
}

.main-navigation .main-nav ul li a,
.main-navigation .main-nav ul li[class*="current-menu-item"] a {
  color: var(--color-black);
}

.main-navigation .main-nav ul li[class*="current-menu-item"] a {
  background-color: var(--color-cream);
  font-weight: 600;
  border-bottom: 2px solid var(--color-primary);
}

.main-navigation .main-nav ul li:not([class*="current-menu-item"]):hover a {
  color: var(--color-black);
}

.main-navigation .main-nav ul li a {
  line-height: 3.5;
}

.main-navigation * {
  transition:
    background-color var(--transition-base),
    color var(--transition-base);
}

/* Móviles estrechos (≤ 400 px, p. ej. Android de 360 px): la fila de cifras
   del pie desbordaba unos píxeles la pantalla. Se reduce el hueco y, si aun
   así no cabe (320 px), la última cifra baja de línea. */
@media (max-width: 400px) {
  .footer-brand__stats {
    gap: 1rem;
    flex-wrap: wrap;
  }
}