/* ============================================================
   Base del sitio — Telecom Academy Latam
   ============================================================
   Sólo vive aquí lo que Elementor no puede hacer de forma nativa.
   Todo lo demás (color, tipografía, espaciado, rejilla, responsive)
   se configura en el editor con Global Colors y Global Fonts.

   Cada bloque lleva anotado por qué no se pudo resolver en Elementor.
   Ver design-tokens.md §8 y NOTAS.md §9.
   ============================================================ */

/* ---------------------------------------------------- tokens del proyecto

   Espejo de web/src/styles/tokens.css. Los colores apuntan a las variables
   de Elementor: si el cliente cambia el azul en Site Settings, cambia aquí
   también y no hay que tocar el tema. */

:root {
  /* degradado de marca */
  --tal-g-a: var(--e-global-color-secondary, #35dcc8);
  --tal-g-b: var(--e-global-color-primary, #29abe2);
  --tal-g-c: var(--e-global-color-accent, #3a52cf);
  --tal-grad: linear-gradient(135deg, var(--tal-g-a) 0%, var(--tal-g-b) 48%, var(--tal-g-c) 100%);
  --tal-grad-h: linear-gradient(90deg, var(--tal-g-a) 0%, var(--tal-g-b) 50%, var(--tal-g-c) 100%);
  --tal-grad-panel: linear-gradient(
    135deg,
    rgba(53, 220, 200, 0.14) 0%,
    rgba(41, 171, 226, 0.07) 42%,
    rgba(58, 82, 207, 0.16) 100%
  );

  /* superficies */
  --tal-fondo: var(--e-global-color-fondobs, #0a1220);
  --tal-panel: var(--e-global-color-fondoal, #131e31);
  --tal-panel-alto: var(--e-global-color-fondoel, #1a2740);

  /* líneas */
  --tal-borde: var(--e-global-color-bordeba, rgba(255, 255, 255, 0.09));
  --tal-borde-alto: var(--e-global-color-bordeal, rgba(255, 255, 255, 0.17));
  --tal-borde-contorno: var(--e-global-color-bordect, rgba(255, 255, 255, 0.22));

  /* geometría */
  --tal-r-sm: 8px;
  --tal-r-md: 14px;
  --tal-r-lg: 22px;
  --tal-nav-alto: 84px;

  /* sombras */
  --tal-sombra: 0 24px 60px -28px rgba(0, 0, 0, 0.85);
  --tal-sombra-alta: 0 40px 90px -36px rgba(0, 0, 0, 0.9);

  /* transiciones */
  --tal-ease: cubic-bezier(0.2, 0.7, 0.25, 1);
  --tal-rapido: 0.18s var(--tal-ease);
  --tal-medio: 0.34s var(--tal-ease);
  --tal-lento: 0.7s var(--tal-ease);
}

/* ---------------------------------------------------- fondo del sitio

   El control de fondo de Elementor no admite la sintaxis
   `radial-gradient(50% 60% at 85% 0%, ...)` con tamaño y posición, ni
   `background-attachment: fixed` sobre un degradado. El color base sí
   está en Site Settings; aquí sólo se le superpone el resplandor. */

body {
  background-image: radial-gradient(50% 60% at 85% 0%, rgba(34, 195, 224, 0.14), transparent 60%);
  background-attachment: fixed;
  background-repeat: no-repeat;
  overflow-x: hidden;
}

/* Los anclajes del menú tienen que despejar la cabecera fija. */
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--tal-nav-alto) + 24px);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* ---------------------------------------------------- énfasis en títulos

   El widget Heading acepta HTML, pero `<em>` y `<mark>` necesitan estas
   reglas para verse como en el prototipo. Es el recurso tipográfico de la
   referencia del cliente. */

.elementor-heading-title em,
.elementor-widget-heading em {
  font-style: italic;
  font-weight: 500;
}

.elementor-heading-title mark,
.elementor-widget-heading mark {
  background: linear-gradient(
    120deg,
    rgba(53, 220, 200, 0.5),
    rgba(41, 171, 226, 0.42) 45%,
    rgba(58, 82, 207, 0.55)
  );
  color: #fff;
  padding: 0 0.14em;
  border-radius: 4px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ---------------------------------------------------- degradados

   Elementor no guarda degradados como Global Colors, así que van como
   clases de utilidad y se aplican desde el campo "Clases CSS" del widget. */

.tal-grad {
  background-image: var(--tal-grad);
}

.tal-grad-h {
  background-image: var(--tal-grad-h);
}

/* Panel con velo degradado sobre el color de panel: es el `.panel` del
   prototipo, usado en formulario, filtros, temario y panel de compra.
   `#filtros-cursos` va por id porque la clase está en un contenedor y no
   se imprime (§18 de NOTAS.md). */
.tal-panel-grad,
#filtros-cursos {
  background-image: var(--tal-grad-panel);
  background-color: var(--tal-panel);
}

#filtros-cursos {
  border: 1px solid var(--tal-borde);
  border-radius: var(--tal-r-md);
}

/* Texto recortado sobre degradado: nombre de marca en la comparativa,
   especialidad del docente, índice activo del showcase. Sin equivalente
   nativo — Elementor sólo pinta color plano en tipografía. */
.tal-texto-grad {
  background-image: var(--tal-grad-h);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.tal-texto-grad-claro {
  background-image: linear-gradient(90deg, var(--tal-g-a), var(--e-global-color-cianclr, #7fe0f0));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------------------------------------------------- regla degradada

   La línea bajo el título de sección, para cuando la clase va en un
   contenedor vacío. En la portada la clase va sobre widgets Divider: ahí
   el envoltorio del widget mide 100% (lo fuerza .e-con) y esta regla lo
   pintaba entero como una línea de borde a borde encima de la del
   separador — por eso el :not(). El Divider se estiliza en componentes.css
   e inicio.css sobre .elementor-divider-separator. */

.tal-regla:not(.elementor-widget) {
  width: 148px;
  height: 3px;
  border-radius: 2px;
  background-image: var(--tal-grad-h);
}

.tal-regla--corta:not(.elementor-widget) {
  width: 96px;
  height: 2px;
}

/* ---------------------------------------------------- borde degradado

   Técnica del prototipo: el relleno se pinta en `padding-box` y el
   degradado en `border-box`, de modo que el contorno queda coloreado sin
   pseudo-elementos. El control de borde de Elementor sólo acepta color
   plano. Lo usan las tarjetas de beneficio, las cartas y el acordeón. */

.tal-borde-grad {
  border: 1px solid transparent;
  background-image:
    linear-gradient(var(--tal-panel), var(--tal-panel)),
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.06),
      rgba(53, 220, 200, 0.5),
      rgba(58, 82, 207, 0.42),
      rgba(255, 255, 255, 0.06)
    );
  background-origin: padding-box, border-box;
  background-clip: padding-box, border-box;
}

/* Tinte que aparece al pasar el cursor. Va en una capa aparte porque el
   fondo son dos imágenes superpuestas y esas no transicionan: saltarían. */
.tal-borde-grad::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background-image: linear-gradient(
    160deg,
    rgba(53, 220, 200, 0.16) 0%,
    rgba(41, 171, 226, 0.13) 45%,
    rgba(58, 82, 207, 0.2) 100%
  );
  transition: opacity var(--tal-medio);
}

.tal-borde-grad:hover::after {
  opacity: 1;
}

/* El contenido tiene que quedar por encima del tinte. */
.tal-borde-grad > * {
  position: relative;
  z-index: 1;
}

/* ---------------------------------------------------- borde superior degradado

   `border-image` no existe en los controles de Elementor. Lo llevan la
   cabecera, el pie del héroe y el pórtico del detalle de curso. */

.tal-borde-inferior-grad {
  border-bottom: 2px solid transparent;
  border-image: var(--tal-grad-h) 1;
}

/* ---------------------------------------------------- grano

   Textura sutil sobre las tarjetas de beneficio, tal como el prototipo. */

.tal-grano::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0.5;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='352' height='382'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
  background-size: 352px 382px;
}

/* ---------------------------------------------------- revelado al scroll

   Elementor trae animaciones de entrada, pero con duraciones fijas
   (`slow` = 2s, `normal` = 1s, `fast` = 0.8s) y una curva propia. El
   prototipo usa 0.7s con `cubic-bezier(.2,.7,.25,1)` y un desplazamiento
   de 22px. Se replica exacto; el retardo escalonado se pasa por la
   variable `--tal-retardo` desde el editor. */

.tal-revelar {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--tal-lento), transform var(--tal-lento);
  transition-delay: var(--tal-retardo, 0ms);
}

.tal-revelar[data-visible='true'] {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .tal-revelar {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------------------------------------------------- accesibilidad */

.tal-oculto-visualmente {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

:focus-visible {
  outline: 2px solid var(--tal-g-a);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Enlace de salto al contenido. */
.tal-saltar {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 200;
  background: var(--tal-g-a);
  color: var(--tal-fondo);
  padding: 10px 18px;
  border-radius: var(--tal-r-sm);
  font-size: 13px;
  font-weight: 600;
  transition: top var(--tal-rapido);
}

.tal-saltar:focus {
  top: 12px;
}