/* design.css — todo el diseño del proyecto. Solo variables de tokens.css. */

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
  background: var(--color-bg);
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.1; color: var(--color-primary); }

.page-title { font-size: var(--text-display); padding-block: var(--space-6) var(--space-4); }
.entry-content { padding-bottom: var(--space-6); }

/* ==========================================================
   Componentes compartidos por los módulos
   (el CSS propio de cada módulo vive en assets/css/modules/{layout}.css)
   ========================================================== */

/* Antetítulo: «¿QUÉ ES LA ACADEMIA ADN?» */
.eyebrow {
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  line-height: var(--leading-snug);
}

/* Título de sección con remate destacado en amarillo (adn_heading()) */
.section-title {
  font-size: var(--text-h2);
  line-height: var(--leading-tight);
  font-weight: var(--weight-bold);
  color: var(--color-primary);
}
.section-title__accent { color: var(--color-accent); }

/* Texto enriquecido de los módulos (WYSIWYG) */
.rich-text { line-height: var(--leading-body); }
.rich-text > * + * { margin-top: var(--space-4); }
.rich-text strong { font-weight: var(--weight-semibold); }

/* Botones: 289×59 en el diseño */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-width: min(var(--btn-w), 100%);
  min-height: var(--btn-h);
  padding: var(--space-1) var(--space-3);
  border: 1px solid transparent;
  font-family: var(--font-ui);
  font-size: var(--text-btn);
  font-weight: var(--weight-ui);
  line-height: var(--leading-snug);
  text-align: center;
  text-decoration: none;
  background: var(--color-accent);
  color: var(--color-primary);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn--accent { background: var(--color-accent); color: var(--color-primary); }
.btn--accent:hover { background: var(--color-on-dark); }
.btn--primary { background: var(--color-primary); color: var(--color-accent); }
.btn--primary:hover { background: var(--color-primary-strong); }
.btn--outline { background: transparent; border-color: var(--color-primary); color: var(--color-primary); }
.btn--outline:hover { background: var(--color-primary); color: var(--color-on-dark); }
.btn--outline-light { background: transparent; border-color: var(--color-on-dark); color: var(--color-on-dark); }
.btn--outline-light:hover { background: var(--color-on-dark); color: var(--color-primary); }

/* Flecha fina «→» del diseño: .btn--arrow (botón) y .link-arrow (enlace de tarjeta) */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-ui);
  font-size: var(--text-btn);
  font-weight: var(--weight-ui);
  color: inherit;
  text-decoration: none;
}
.btn--arrow::after,
.link-arrow::after {
  content: "";
  flex: none;
  width: 1.2rem;
  height: .75rem;
  background: currentColor;
  -webkit-mask: url('../icons/arrow.svg') center / contain no-repeat;
  mask: url('../icons/arrow.svg') center / contain no-repeat;
  transition: transform var(--dur) var(--ease);
}
.btn--arrow:hover::after,
.link-arrow:hover::after { transform: translateX(.3rem); }

/* Reveal por scroll (main.js añade .is-visible) */
.js [data-animate] {
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.js [data-animate].is-visible { opacity: 1; transform: none; }

/* ==========================================================
   Header
   ========================================================== */
.site-header { background: var(--color-primary); color: var(--color-on-primary); }

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  column-gap: var(--space-4);
  min-height: var(--header-h);
}

.site-header .custom-logo-link { display: block; }
.site-header .custom-logo { height: var(--logo-h); width: auto; }

.site-header__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  color: inherit;
  text-decoration: none;
}

.site-header__menu {
  list-style: none;
  padding: 0;
  display: flex;
  gap: var(--space-3);
}

.site-header__menu a {
  position: relative;
  display: inline-block;
  padding-block: var(--space-1);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--weight-ui);
  letter-spacing: .02em;
  text-transform: uppercase;
  color: inherit;
  text-decoration: none;
}

.site-header__menu a::after {
  content: "";
  position: absolute;
  inset: auto -.2em 0;
  height: 2px;
  background: var(--color-accent);
  transform: scaleX(0);
  transition: transform var(--dur) var(--ease);
}

.site-header__menu a:hover::after,
.site-header__menu .current-menu-item > a::after,
.site-header__menu .current-menu-ancestor > a::after { transform: scaleX(1); }

.site-header__toggle {
  display: none;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-size: var(--text-lg);
  cursor: pointer;
}
.site-header__toggle[aria-expanded="true"] [aria-hidden] { display: none; }
.site-header__toggle[aria-expanded="true"]::after { content: "✕"; content: "✕" / ""; }

@media (max-width: 67.99rem) {
  .site-header__inner { min-height: 0; padding-block: var(--space-2); }
  .site-header .custom-logo { height: var(--logo-h-sm); }
  .js .site-header__toggle { display: grid; }

  .site-header__nav { flex-basis: 100%; padding-bottom: var(--space-3); }
  .js .site-header__nav:not(.is-open) { display: none; }

  .site-header__menu { flex-direction: column; gap: 0; }
  .site-header__menu li + li { border-top: 1px solid var(--color-line-on-primary); }
  .site-header__menu a { display: block; padding-block: var(--space-2); font-size: var(--text-base); }
  .site-header__menu a::after { inset: auto auto 0 0; width: 2.5rem; }
}

/* ==========================================================
   Footer
   ========================================================== */
.site-footer {
  padding-block: var(--space-5) var(--space-3);
  font-family: var(--font-ui);
  font-size: var(--text-md);
  font-weight: var(--weight-ui);
  background: var(--color-bg);
  color: var(--color-primary);
}

.site-footer a { color: inherit; text-decoration: none; }
.site-footer__menu a:hover,
.site-footer__legal a:hover { text-decoration: underline; text-underline-offset: .25em; }

.site-footer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-line);
}

.site-footer__logo { height: var(--logo-h-footer); width: auto; }
.site-footer__title { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; }

.site-footer__menu,
.site-footer__social,
.site-footer__legal { list-style: none; padding: 0; display: flex; flex-wrap: wrap; }

.site-footer__menu { gap: var(--space-2) var(--space-4); }
.site-footer__social { gap: var(--space-2); }

.site-footer__social-link { display: block; width: var(--icon-size); height: var(--icon-size); transition: opacity var(--dur) var(--ease); }
.site-footer__social-link:hover { opacity: .7; }
.site-footer__social-link svg { width: 100%; height: 100%; }

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  padding-top: var(--space-4);
}

.site-footer__legal li + li::before { content: "|"; content: "|" / ""; margin-inline: .3em; }

@media (max-width: 67.99rem) {
  .site-footer__top { flex-direction: column; align-items: flex-start; }
}