/* ==========================================================================
   Mythos — Tipografía y secciones

   Solo se carga en NUESTRAS plantillas, nunca en las páginas de Elementor.
   Todo va colgado de `.my-tpl`, una clase que el tema pone en el body cuando
   pinta una plantilla propia. Así una página de Elementor puede convivir con la
   cabecera y el pie nuevos sin que le cambien los títulos ni el fondo.
   ========================================================================== */

html { scroll-behavior: smooth; }

body.my-tpl {
  background: var(--my-bg);
  color: var(--my-text);
  font-family: var(--my-font-body);
  font-size: var(--my-body);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

.my-tpl h1, .my-tpl h2, .my-tpl h3, .my-tpl h4 {
  font-family: var(--my-font-display);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: .01em;
  color: var(--my-white);
  text-transform: uppercase;
  margin: 0 0 .5em;
  text-wrap: balance;
}
.my-tpl h1 { font-size: var(--my-h1); }
.my-tpl h2 { font-size: var(--my-h2); }
.my-tpl h3 { font-size: var(--my-h3); }
.my-tpl p  { margin: 0 0 1.15em; text-wrap: pretty; }
.my-tpl p:last-child { margin-bottom: 0; }

/* Los enlaces NO se pintan de forma global.
 *
 * Una regla `.my-tpl a` tiene especificidad (0,1,1) y le gana a cualquier
 * componente de una sola clase como `.my-btn` (0,1,0), así que pintaría de
 * dorado el texto de los botones dorados. Solo se colorean los enlaces de texto
 * corrido; cada componente manda sobre su propio color. */
.my-tpl p a {
  color: var(--my-gold);
  text-decoration: underline;
  text-decoration-color: var(--my-gold-dim);
  text-underline-offset: 3px;
}
.my-tpl p a:hover { color: var(--my-white); text-decoration-color: var(--my-gold); }

/* --- Secciones ---------------------------------------------------------- */

.my-section { padding-block: var(--my-section); position: relative; }
.my-section--tight { padding-block: calc(var(--my-section) * .6); }
/* Sección que arranca pegada a lo anterior. La usa el artículo: entre el
   titular del hero y los metadatos había 162 px de aire, que a la vista es un
   agujero, no un respiro. */
.my-section--pegada { padding-top: clamp(1.25rem, .75rem + 1vw, 2rem); }
.my-section--surface { background: var(--my-surface); }

/* Hilo dorado que separa secciones: sutil, no una línea dura */
.my-section + .my-section::before {
  content: "";
  position: absolute; inset-inline: 0; top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--my-line-soft) 22%, var(--my-line-soft) 78%, transparent);
}

/* --- Encabezado de sección ---------------------------------------------- */

.my-eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--my-font-body); font-weight: 600;
  font-size: .75rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--my-amber);
  margin: 0 0 1rem;
}
.my-eyebrow::before {
  content: ""; width: 2rem; height: 1px; background: var(--my-amber); opacity: .6;
}

.my-lead {
  font-size: clamp(1.05rem, 1rem + .35vw, 1.3rem);
  color: var(--my-text);
}

/* --- Aparición al hacer scroll -------------------------------------------
 *
 * El estado oculto SOLO se activa cuando el JS ha confirmado que puede
 * revelarlo (añade .js-reveal al <html>). Si el script falla, lo bloquea una
 * extensión o el navegador no soporta IntersectionObserver, el contenido se ve
 * igual: nunca se esconden bloques de texto detrás de un opacity:0 huérfano.
 */
.my-reveal { opacity: 1; transform: none; }
.js-reveal .my-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--my-ease), transform .7s var(--my-ease);
}
.js-reveal .my-reveal.is-in { opacity: 1; transform: none; }