/* =====================================================================
   TEAM NOIA · CSS del sitio
   Paleta (slugs del tema): base #F6F4EF · contrast #11173F · accent-1 #42C0BA
   Convención: prefijo tn-, bloque__elemento--modificador.
   Las secciones de la home y las páginas interiores comparten:
   .tn-eyebrow, .tn-sec__title, .tn-sec__lede, .tn-razon, .tn-quote, .tn-serv,
   .tn-cta, .tn-pagehero.
   ===================================================================== */


/* ---------- GLOBAL ---------- */

/* Acento cálido (15/10): un solo color, tomado de la agenda. Sobre navy el claro; sobre crudo el oscuro. */
:root {
  --tn-ambar: #F0B35A;
  --tn-ambar-oscuro: #C4862B;
}

/* Viñeta en las secciones navy: encapsula el contenido sin ensuciar las claras */
.wp-block-post-content > .alignfull.has-contrast-background-color {
  box-shadow: inset 0 0 140px rgba(0, 0, 0, 0.35);
}


/* Tarjetas: elevación al pasar el mouse */
.tn-quote,
.tn-docente,
.tn-programa,
.tn-form {
  transition: transform .25s ease, box-shadow .25s ease;
}

.tn-quote:hover,
.tn-docente:hover,
.tn-programa:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(17, 23, 63, 0.12);
}

/* Encabezado fijo, compacto y alineado con el ancho del contenido (1080 px) */
.wp-site-blocks > header {
  position: sticky;
  top: var(--wp-admin--admin-bar--height, 0px); /* con sesión iniciada, debajo de la barra de admin */
  z-index: 100;
  background: var(--wp--preset--color--base);
  padding-block: 0;
  transition: box-shadow .25s ease;
}

.wp-site-blocks > header.is-stuck {
  box-shadow: 0 1px 0 rgba(17, 23, 63, 0.08), 0 8px 24px rgba(17, 23, 63, 0.06);
}

.wp-site-blocks > header > .wp-block-group > .wp-block-group {
  padding-inline: 2rem !important;
}

.wp-site-blocks > header .wp-block-group.alignwide {
  max-width: none; /* logo y botón contra los bordes de la pantalla, como Coderhouse */
  margin-inline: 0;
  padding-block: 0.9rem !important;
  display: grid !important;
  grid-template-columns: 1fr auto 1fr; /* logo | menú centrado de verdad | botón */
  align-items: center;
  gap: 1.5rem;
}

.wp-site-blocks > header .tn-header__cta {
  justify-self: end;
  margin: 0;
}

.wp-site-blocks > header .tn-header__cta .wp-block-button__link {
  font-weight: 700;
  font-size: 1rem !important; /* 19/10: más grande, para equilibrar con el logo (antes 14 px, más chico que el menú). !important: el bloque trae has-small-font-size y padding en línea */
  padding: 0.75rem 1.4rem !important;
  white-space: nowrap;
  transition: transform .15s ease, opacity .2s ease;
}
/* En tablet no entran logo, menú y botón en una fila: el botón se oculta (el hero y el pie ya llevan a Contacto) */
@media (max-width: 960px) {
  .wp-site-blocks > header .tn-header__cta { display: none; }
}

.wp-site-blocks > header .tn-header__cta .wp-block-button__link:hover {
  transform: translateY(-1px);
  opacity: 0.92;
}

.wp-site-blocks > header .tn-header__nav .wp-block-navigation-item__content {
  position: relative;
  padding-block: 0.2rem;
  font-weight: 600; /* semibold, como calm.com; más aire entre ítems en vez de separadores */
}
.wp-site-blocks > header .tn-header__nav .wp-block-navigation__container { gap: 2rem; }

/* El tema subraya con text-decoration al pasar el mouse; acá el subrayado es el ::after de abajo */
.wp-site-blocks > header .tn-header__nav .wp-block-navigation-item__content:hover,
.wp-site-blocks > header .tn-header__nav .wp-block-navigation-item__content:focus {
  text-decoration: none !important;
}

/* Sin recuadro de foco al hacer clic con el mouse (menú, logo y botón); con teclado (Tab) sí, en turquesa */
.wp-site-blocks > header a:focus, .wp-site-blocks > header button:focus { outline: none; box-shadow: none; }
.wp-site-blocks > header a:focus-visible, .wp-site-blocks > header button:focus-visible { outline: 2px solid var(--wp--preset--color--accent-1); outline-offset: 4px; border-radius: 2px; }

/* Subrayado que crece al pasar el mouse */
.wp-site-blocks > header .tn-header__nav .wp-block-navigation-item__content::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: var(--wp--preset--color--accent-1);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}

.wp-site-blocks > header .tn-header__nav .wp-block-navigation-item__content:hover::after,
.wp-site-blocks > header .tn-header__nav .current-menu-item .wp-block-navigation-item__content::after {
  transform: scaleX(1);
}

@media (max-width: 781px) {
  .wp-site-blocks > header .wp-block-group.alignwide {
    grid-template-columns: 1fr auto auto;
    gap: 0.8rem;
  }
}

@media (max-width: 600px) {
  .wp-site-blocks > header .tn-header__cta { display: none; }
  .wp-site-blocks > header .wp-block-group.alignwide { grid-template-columns: 1fr auto; }
}

.wp-site-blocks > header .wp-block-site-title {
  line-height: 1;
}

/* Portada: el encabezado arranca transparente sobre la foto (como calm.com) y se vuelve crema al bajar.
   El hero pasa por debajo (margen negativo) y team-noia.js agrega .is-stuck a partir de 40 px de scroll. */
@media (min-width: 782px) {
  body.home .wp-site-blocks > header {
    margin-bottom: calc(-1 * var(--tn-header-h, 71px));
    background: transparent;
    transition: background-color .35s ease, box-shadow .35s ease;
  }
  body.home .wp-site-blocks > header::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 150%;
    background: linear-gradient(180deg, rgba(17, 23, 63, 0.55), rgba(17, 23, 63, 0));
    pointer-events: none;
    z-index: -1;
    transition: opacity .35s ease;
  }
  body.home .wp-site-blocks > header .wp-block-site-title a,
  body.home .wp-site-blocks > header .tn-header__nav .wp-block-navigation-item__content {
    color: var(--wp--preset--color--base);
    transition: color .35s ease;
  }
  body.home .wp-site-blocks > header .tn-header__nav .wp-block-navigation-item__content::after { background: var(--wp--preset--color--base); }
  body.home .wp-site-blocks > header.is-stuck { background: var(--wp--preset--color--base); }
  body.home .wp-site-blocks > header.is-stuck::before { opacity: 0; }
  body.home .wp-site-blocks > header.is-stuck .wp-block-site-title a,
  body.home .wp-site-blocks > header.is-stuck .tn-header__nav .wp-block-navigation-item__content { color: var(--wp--preset--color--contrast); }
  body.home .wp-site-blocks > header.is-stuck .tn-header__nav .wp-block-navigation-item__content::after { background: var(--wp--preset--color--accent-1); }
  /* el hero crece lo que mide el encabezado y baja el texto esa misma medida */
  body.home .tn-hero { min-height: calc(100svh - var(--wp-admin--admin-bar--height, 0px)); padding-top: calc(clamp(4rem, 11vh, 8rem) + var(--tn-header-h, 71px)) !important; }
  body.home .tn-hero.tn-hero--capas { min-height: calc(100svh - var(--wp-admin--admin-bar--height, 0px) + var(--tn-cifras-h, 0px) - var(--tn-asoma)); }
}

/* Sin franja entre el encabezado y la primera sección (el tema mete el blockGap como margen) */
.wp-site-blocks > header + * ,
.wp-site-blocks > .wp-block-post-content {
  margin-block-start: 0 !important;
}

/* Pie más compacto: el aviso de Defensa del Consumidor pegado a la fila legal, sin aire de más */
.wp-site-blocks > footer .tn-consumidor { margin-bottom: 0.5rem !important; }
.wp-site-blocks > footer .tn-consumidor + .wp-block-group { margin-block-start: 0 !important; }
.wp-site-blocks > footer .wp-block-site-tagline { margin-top: 0.3rem; }

/* Sin separación entre secciones de ancho completo */
.wp-block-post-content > .alignfull {
  margin-block: 0 !important;
}

/* Ante título (sobre navy en ámbar; --dark sobre fondos claros) */
.tn-eyebrow {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  margin-bottom: 1.1rem;
}


.tn-eyebrow--dark {
  color: rgba(17, 23, 63, 0.55);
}

/* Encabezado de sección */
.tn-sec__title {
  font-size: clamp(2rem, 4.2vw, 2.9rem);
  margin: 0 0 1rem;
}

.tn-sec__lede {
  font-size: 1.08rem;
  line-height: 1.6;
  opacity: 0.72;
  max-width: 34em;
  margin-left: auto;
  margin-right: auto;
}

.tn-sec__lede--left {
  margin-left: 0;
  margin-right: 0;
}

/* Ítem de lista con punto turquesa */
.tn-razon {
  position: relative;
  padding-left: 1.3rem;
  font-size: 0.97rem;
  line-height: 1.55;
  opacity: 0.8;
  margin: 0;
}

.tn-razon::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--wp--preset--color--accent-1);
}



/* Ítems de lista con ícono (misma técnica que el Faro): .tn-razon--<clave> reemplaza el punto turquesa por un símbolo */
.tn-razon[class*="tn-razon--"] { padding-left: 2.1rem; }
.tn-razon[class*="tn-razon--"]::before {
  width: 22px; height: 22px; border-radius: 0; top: 0.05em;
  -webkit-mask: var(--tn-icono) center / contain no-repeat;
  mask: var(--tn-icono) center / contain no-repeat;
}
.tn-agenda__lista .tn-razon[class*="tn-razon--"] { padding-left: 2.4rem; }
.tn-agenda__lista .tn-razon[class*="tn-razon--"]::before { width: 26px; height: 26px; top: 0; }
.tn-razon--meditar { --tn-icono: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 32 32%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2216%22 cy=%2218%22 r=%225%22/%3E%3Cpath d=%22M16 7v3M27 18h-3M8 18H5M23.8 10.2l-2.1 2.1M10.3 10.2l2.1 2.1%22/%3E%3Cpath d=%22M4 27h24%22/%3E%3C/svg%3E"); }
.tn-razon--ejercicios { --tn-icono: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 32 32%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2216%22 cy=%2211%22 r=%225%22/%3E%3Cpath d=%22M6 27c1-6 5-9 10-9s9 3 10 9%22/%3E%3Cpath d=%22M24 5l1 2 2 1-2 1-1 2-1-2-2-1 2-1z%22/%3E%3C/svg%3E"); }
.tn-razon--cuadrantes { --tn-icono: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 32 32%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2216%22 cy=%2210%22 r=%226%22/%3E%3Ccircle cx=%2216%22 cy=%2222%22 r=%226%22/%3E%3Ccircle cx=%2210%22 cy=%2216%22 r=%226%22/%3E%3Ccircle cx=%2222%22 cy=%2216%22 r=%226%22/%3E%3C/svg%3E"); }
.tn-razon--frases { --tn-icono: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 32 32%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M8 20a5 5 0 0 1 5-5V9H6v6a3 3 0 0 0 3 3h1%22/%3E%3Cpath d=%22M19 20a5 5 0 0 1 5-5V9h-7v6a3 3 0 0 0 3 3h1%22/%3E%3Cpath d=%22M6 24h20%22/%3E%3C/svg%3E"); }
.tn-razon--escritura { --tn-icono: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 32 32%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M6 26l2-7L21 6l5 5L13 24z%22/%3E%3Cpath d=%22M8 19l5 5%22/%3E%3Cpath d=%22M18 9l5 5%22/%3E%3C/svg%3E"); }
.tn-razon--mandalas { --tn-icono: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 32 32%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2216%22 cy=%2216%22 r=%223%22/%3E%3Ccircle cx=%2216%22 cy=%227%22 r=%223%22/%3E%3Ccircle cx=%2216%22 cy=%2225%22 r=%223%22/%3E%3Ccircle cx=%227%22 cy=%2216%22 r=%223%22/%3E%3Ccircle cx=%2225%22 cy=%2216%22 r=%223%22/%3E%3Ccircle cx=%229.6%22 cy=%229.6%22 r=%222.2%22/%3E%3Ccircle cx=%2222.4%22 cy=%2222.4%22 r=%222.2%22/%3E%3Ccircle cx=%229.6%22 cy=%2222.4%22 r=%222.2%22/%3E%3Ccircle cx=%2222.4%22 cy=%229.6%22 r=%222.2%22/%3E%3C/svg%3E"); }

/* ---------- HOME 1 · PORTADA ---------- */

.tn-hero {
  position: relative;
  overflow: hidden;
  text-align: center;
}

/* Portada a pantalla completa, estilo calm.com: la imagen manda y el texto flota en el cielo.
   Foto real de Unsplash (https://unsplash.com/photos/_eMg25keCSw, licencia Unsplash: uso comercial libre),
   gradeada al navy de la marca con Nano Banana 2.1 en Higgsfield; el mar se llevó después, del horizonte hacia abajo,
   al navy exacto de la marca (Python). Exportada fuera de WordPress: AVIF (mejor en degradados de cielo) con WebP
   y JPEG de respaldo, 1600/2560/3840 px. Cada pantalla baja una más grande que ella.
   Las cifras quedan para el primer scroll. */
.tn-hero {
  min-height: calc(100svh - 71px - var(--wp-admin--admin-bar--height, 0px));
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  text-align: center;
  padding-top: clamp(4rem, 11vh, 8rem) !important;
  padding-bottom: 4rem !important;
  /* Siempre más grande que la pantalla: el navegador la achica y queda más nítida que servida 1:1 */
  --tn-hero-img: image-set(
    url("/wp-content/uploads/2026/10/hero-alto-2560.avif") type("image/avif") 1x,
    url("/wp-content/uploads/2026/10/hero-alto-2560.webp") type("image/webp") 1x,
    url("/wp-content/uploads/2026/10/hero-alto-3840.avif") type("image/avif") 2x,
    url("/wp-content/uploads/2026/10/hero-alto-3840.webp") type("image/webp") 2x
  );
  background-image: url("/wp-content/uploads/2026/10/hero-alto-2560.jpg");
  background-image: var(--tn-hero-img);
  --tn-foto-dx: -40px; /* la foto corrida 40 px a la izquierda (lo aplica team-noia.js al encuadrar) */
  background-size: cover;
  background-position: 50% 62%;
  background-repeat: no-repeat;
}

/* team-noia.js agrega .tn-hero--xl cuando el encuadre escala la foto por encima de los 2560 px */
.tn-hero.tn-hero--xl {
  --tn-hero-img: image-set(
    url("/wp-content/uploads/2026/10/hero-alto-3840.avif") type("image/avif"),
    url("/wp-content/uploads/2026/10/hero-alto-3840.webp") type("image/webp")
  );
}

@media (min-width: 1921px) {
  .tn-hero {
    --tn-hero-img: image-set(
      url("/wp-content/uploads/2026/10/hero-alto-3840.avif") type("image/avif"),
      url("/wp-content/uploads/2026/10/hero-alto-3840.webp") type("image/webp")
    );
  }
}

/* Profundidad (16/10): team-noia.js mueve la foto a una capa propia (.tn-hero__foto) que baja más lenta
   que la página (parallax). Sin JS, la foto queda como fondo fijo de .tn-hero. */
.tn-hero.tn-hero--capas { background-image: none !important; }
/* Con JS activo, la foto no se pinta como fondo CSS: aparece ya encuadrada en su capa (sin "salto" de tamaño) */
.tn-js .tn-hero { background-image: none; }
.tn-js .tn-hero__foto { opacity: 0; }
.tn-js .tn-hero__foto.is-lista { opacity: 1; }

.tn-hero__foto {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: -40px; /* margen para el desenfoque y el desplazamiento */
  background-image: var(--tn-hero-img);
  background-size: inherit; /* en celular el hero usa un tamaño propio (122 %)*/
  background-position: inherit;
  background-repeat: no-repeat;
  transform: translate3d(0, var(--tn-py, 0px), 0);
  will-change: transform;
  pointer-events: none;
  z-index: 0;
  max-width: none !important; /* el layout "constrained" de WordPress limita el ancho de cada hijo */
  margin: 0 !important;
}

/* La foto ya viene gradeada: solo una sombra suave arriba para que el texto se lea sobre el cielo */
.tn-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(17, 23, 63, 0.45) 0%, rgba(17, 23, 63, 0.2) 35%, rgba(17, 23, 63, 0) 58%);
  pointer-events: none;
  z-index: 1;
}

.tn-hero > .tn-hero__inner { z-index: 2; }

/* Cifras sobre el borde de la foto (16/10): team-noia.js mide la franja de cifras (--tn-cifras-h),
   el hero crece esa altura y la franja sube encima de la foto con un velo navy translúcido.
   Como la sección siguiente también es navy, la secuencia es foto → mar velado → navy sólido. */
.tn-hero + .alignfull {
  position: relative;
  z-index: 3;
}

.tn-hero.tn-hero--capas {
  --tn-asoma: 120px; /* cuánto del velo de las cifras entra en la primera pantalla: indicio de que sigue */
  min-height: calc(100svh - 71px - var(--wp-admin--admin-bar--height, 0px) + var(--tn-cifras-h, 0px) - var(--tn-asoma));
  padding-bottom: calc(4rem + var(--tn-cifras-h, 0px)) !important;
}

.wp-block-post-content > .tn-hero--capas + .alignfull.tn-cifras {
  margin-top: calc(-1 * var(--tn-cifras-h, 0px)) !important;
  /* Velo en degradé: arriba deja ver el mar, abajo llega al navy sólido de la sección siguiente. Sin bordes. */
  background-color: transparent !important;
  /* el mar de la foto ya llega al navy de la marca: la zona de mezcla puede ser corta */
  padding-top: calc(5rem + 120px) !important;
  background-image:
    /* el velo nunca se vuelve un bloque plano: sigue oscureciéndose hasta el borde, donde llega al navy de la sección siguiente */
    linear-gradient(180deg, rgba(17, 23, 63, 0) 0%, rgba(17, 23, 63, 0.25) 30%, rgba(17, 23, 63, 0.6) 55%, rgba(17, 23, 63, 0.88) 80%, #11173F 100%);
  /* sin viñeta lateral: su borde superior se notaba como una línea sobre el cielo */
  box-shadow: none;
}

/* El encuadre de la foto lo calcula team-noia.js en escritorio (horizonte al 62 % de la primera pantalla) */

/* Indicio de scroll: línea fina con un punto que baja, al pie de la primera pantalla (lo agrega team-noia.js) */
/* Indicio de scroll: una flecha "v" fina que late y se apaga apenas el usuario baja */
.tn-scroll-cue {
  position: absolute;
  left: 50%;
  top: calc(100svh - var(--wp-admin--admin-bar--height, 0px) - 64px);
  width: 22px;
  height: 22px;
  margin: 0 !important;
  max-width: none !important;
  transform: translateX(-50%);
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity .4s ease;
  animation: tn-cue-in 1s ease 1.4s forwards;
}

.tn-scroll-cue::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 1px;
  width: 14px;
  height: 14px;
  border-right: 2px solid rgba(246, 244, 239, 0.85);
  border-bottom: 2px solid rgba(246, 244, 239, 0.85);
  transform: rotate(45deg);
  animation: tn-cue 2s ease-in-out infinite;
}

/* Terminada la aparición, el JS pone .is-on (opacidad fija) para que .is-off pueda hacer el fade */
.tn-scroll-cue.is-on { opacity: 1; animation: none; }
.tn-scroll-cue.is-off { opacity: 0 !important; animation: none; transition: opacity .5s ease; }

@keyframes tn-cue-in { to { opacity: 1; } }
@keyframes tn-cue {
  0%, 100% { transform: translateY(0) rotate(45deg); }
  50% { transform: translateY(6px) rotate(45deg); }
}

@media (prefers-reduced-motion: reduce) {
  .tn-scroll-cue { opacity: 1; animation: none; }
  .tn-scroll-cue::after { animation: none; }
}

/* La sección que sigue a las cifras: sin viñeta (la de las cifras también se sacó; así no hay escalón en los costados) */
.tn-cifras + .alignfull.has-contrast-background-color {
  box-shadow: none;
}

.tn-hero--capas + .tn-cifras .tn-cifra__label { color: var(--wp--preset--color--base); opacity: 0.75; }
.tn-hero--capas + .tn-cifras .tn-cifra + .tn-cifra::before { background: rgba(240, 179, 90, 0.32); } /* separadores en ámbar: el reflejo del cielo */

.tn-hero > .tn-hero__inner {
  width: 100%;
  max-width: 1180px !important;
  margin-inline: auto !important;
}

.tn-hero > .tn-hero__inner > * {
  max-width: 680px !important;
  margin-inline: auto !important;
  text-align: center !important;
}

.tn-hero > .tn-hero__inner > .tn-hero__title {
  max-width: 960px !important;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.25);
}

.tn-hero .tn-hero__actions { justify-content: center; }

/* Primero el cielo: el texto aparece medio segundo después que la imagen */
.tn-hero .tn-reveal { transition-delay: calc(500ms + var(--i, 0) * 110ms); }

@media (max-width: 781px) {
  .wp-block-post-content > .alignfull.tn-hero.has-background {
    padding-top: 2.4rem !important;
    padding-bottom: calc(2rem + var(--tn-cifras-h, 0px)) !important;
    --tn-hero-img: image-set(
      url("/wp-content/uploads/2026/10/hero-alto-1600.avif") type("image/avif") 1x,
      url("/wp-content/uploads/2026/10/hero-alto-1600.webp") type("image/webp") 1x,
      url("/wp-content/uploads/2026/10/hero-alto-2560.avif") type("image/avif") 2x,
      url("/wp-content/uploads/2026/10/hero-alto-2560.webp") type("image/webp") 2x
    );
    /* Más grande y anclada arriba: el horizonte y el velero quedan justo debajo de los botones */
    background-size: auto calc((100svh - 71px) * 1.36); /* foto más alta (5056×3800): el horizonte queda al 80 % de la pantalla, como antes */
    background-position: 63% 0%;
  }
  .tn-hero .tn-eyebrow { margin-bottom: 0.6rem; }
  .tn-hero .tn-hero__title { font-size: 2.3rem; margin-bottom: 0.8rem; }
  .tn-hero .tn-lede { font-size: 0.98rem; line-height: 1.5; }
  .tn-hero .tn-hero__actions { margin-top: 1.4rem !important; gap: 0.6rem; }
  .tn-hero .tn-hero__actions .wp-element-button { padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; }
}

@media (max-width: 781px) {
  /* Asomo más chico en celular, y padding propio (la regla general de padding de celular le ganaría) */
  .tn-hero.tn-hero--capas { --tn-asoma: 50px; }
  .wp-block-post-content > .tn-hero--capas + .alignfull.tn-cifras.has-background { padding-top: calc(3.5rem + 50px) !important; }
  .tn-scroll-cue { display: none; }
  /* En celular el velero queda al borde inferior: sin parallax (lo escondía) */
  .tn-hero::before {
    background: linear-gradient(180deg, rgba(17, 23, 63, 0.6) 0%, rgba(17, 23, 63, 0.35) 40%, rgba(17, 23, 63, 0) 60%);
  }
}

@media (max-width: 781px) and (max-height: 700px) {
  .wp-block-post-content > .alignfull.tn-hero.has-background { background-size: auto calc((100svh - 71px) * 1.50); }
}


.tn-hero__inner {
  position: relative;
  z-index: 1;
}

.tn-faro svg {
  width: 66px;
  height: auto;
  display: block;
  margin: 0 auto 1.6rem;
}

.tn-hero__title {
  font-size: clamp(2.6rem, 7vw, 4.2rem);
  margin-bottom: 1.2rem;
}

.tn-hero__title .tn-lit {
  font-style: normal;
  color: var(--tn-ambar); /* respaldo */
  background: linear-gradient(95deg, var(--wp--preset--color--accent-1) 0%, #9BD0A8 35%, var(--tn-ambar) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 16px rgba(240, 179, 90, 0.22));
  animation: tn-encender 9s ease-in-out infinite alternate;
}

/* La palabra respira con la luz */
@keyframes tn-encender {
  from { filter: drop-shadow(0 0 14px rgba(240, 179, 90, 0.18)); }
  to   { filter: drop-shadow(0 0 26px rgba(240, 179, 90, 0.50)); }
}

.tn-lede {
  font-size: clamp(1.05rem, 2.2vw, 1.22rem);
  color: rgba(255, 255, 255, 0.75);
  max-width: 34em;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}

.tn-hero__actions .wp-element-button {
  font-weight: 700;
  transition: transform .15s ease, opacity .2s ease, border-color .2s ease, color .2s ease;
}

.tn-hero__actions .wp-element-button:hover {
  transform: translateY(-2px);
}

.tn-btn--ghost .wp-element-button {
  border: 1.5px solid rgba(255, 255, 255, 0.28);
  background: transparent;
}

.tn-btn--ghost .wp-element-button:hover {
  border-color: var(--wp--preset--color--accent-1);
  color: var(--wp--preset--color--accent-1);
}

@media (prefers-reduced-motion: reduce) {
  .tn-hero__title .tn-lit { animation: none; }
  .tn-hero__actions .wp-element-button:hover,
  .tn-cta__actions .wp-element-button:hover { transform: none; }
}

@media (max-width: 600px) {
  .tn-hero__actions { flex-direction: column; }
  .tn-hero__actions .wp-block-button,
  .tn-hero__actions .wp-element-button { width: 100%; }
}


/* ---------- HOME 2 · CIFRAS ---------- */

.tn-cifras__grid {
  align-items: flex-start;
}

.tn-cifra {
  position: relative;
}

.tn-cifra + .tn-cifra::before {
  content: "";
  position: absolute;
  left: -1.25rem;
  top: 12%;
  height: 76%;
  width: 1px;
  background: rgba(17, 23, 63, 0.14);
}

.tn-cifra__num {
  font-size: clamp(2.8rem, 6vw, 4rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.03em;
  margin: 0 0 0.4rem;
}

.tn-cifra__label {
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  opacity: 0.72;
  margin: 0 auto;
  max-width: 14em;
}

@media (max-width: 781px) {
  .tn-cifra + .tn-cifra::before { display: none; }
  .tn-cifras__grid { gap: 2.5rem; }
}


/* ---------- HOME 3 · QUIÉN ESTÁ DETRÁS (también en Quiénes somos) ---------- */

.tn-quien {
  position: relative;
  overflow: hidden;
}

.tn-quien::before {
  content: "";
  position: absolute;
  bottom: -20%;
  right: -10%;
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, rgba(66, 192, 186, 0.10), transparent 68%);
  filter: blur(20px);
  pointer-events: none;
  z-index: 0;
}

.tn-quien__grid {
  position: relative;
  z-index: 1;
}

.tn-retrato img {
  border-radius: 14px;
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.tn-quien__title {
  font-size: clamp(2rem, 4.2vw, 2.9rem);
  margin: 0 0 1.4rem;
}

.tn-quien__p {
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.62;
  margin-bottom: 1.1rem;
}

.tn-quien__p--destacado {
  color: #ffffff;
  font-size: 1.1rem;
  border-left: 3px solid var(--wp--preset--color--accent-1);
  padding-left: 1.2rem;
  margin-top: 1.8rem;
}

.tn-quien__link {
  margin-top: 2rem;
}

.tn-quien__link a {
  color: var(--wp--preset--color--accent-1);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid rgba(66, 192, 186, 0.4);
  padding-bottom: 2px;
  transition: border-color .2s ease;
}

.tn-quien__link a:hover {
  border-bottom-color: var(--wp--preset--color--accent-1);
}

@media (max-width: 781px) {
  .tn-quien__foto { max-width: 320px; margin-left: auto; margin-right: auto; }
  .tn-quien__p--destacado { font-size: 1.05rem; }
}


/* ---------- HOME 4 · CURSOS (tarjetas estáticas) ---------- */

.tn-cursos__lista .wp-block-columns {
  gap: 1.6rem;
}

.tn-curso {
  background: #ffffff;
  border: 1px solid rgba(17, 23, 63, 0.10);
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: transform .18s ease, box-shadow .18s ease;
}

.tn-curso:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(17, 23, 63, 0.10);
}

.tn-curso::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 100%;
  background: var(--wp--preset--color--accent-1);
  z-index: 2;
}

.tn-curso__img {
  margin: 0;
}

.tn-curso__img img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  border-radius: 0;
}

.tn-curso__body {
  padding: 1.5rem 1.6rem 1.7rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.tn-curso__title {
  font-size: 1.32rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--wp--preset--color--contrast);
  margin: 0 0 0.6rem;
}

.tn-curso__desc {
  font-size: 0.97rem;
  line-height: 1.55;
  opacity: 0.74;
  margin: 0 0 1.4rem;
}

.tn-curso__cta {
  margin-top: auto; /* alinea los botones al pie de ambas tarjetas */
}

.tn-curso__cta .wp-block-button__link {
  background: var(--wp--preset--color--accent-1);
  color: var(--wp--preset--color--contrast);
  font-weight: 700;
  border-radius: 10px;
  padding: 0.75rem 1.5rem;
  text-decoration: none;
  transition: opacity .2s ease;
}

.tn-curso__cta .wp-block-button__link:hover {
  opacity: 0.9;
}

@media (max-width: 781px) {
  .tn-cursos__lista .wp-block-columns { gap: 1.2rem; }
}


/* ---------- HOME 5 · CONSULTORÍA + lista numerada (.tn-serv, también en la página Consultoría) ---------- */

.tn-consultoria__intro {
  position: sticky;
  top: calc(var(--wp-admin--admin-bar--height, 0px) + 6rem);
  align-self: flex-start;
}

.tn-consultoria__cta {
  margin-top: 2rem;
}

.tn-consultoria__cta .wp-block-button__link {
  background: var(--wp--preset--color--contrast);
  color: var(--wp--preset--color--base);
  font-weight: 700;
  border-radius: 10px;
  padding: 0.75rem 1.5rem;
  text-decoration: none;
  transition: background .2s ease;
}

.tn-consultoria__cta .wp-block-button__link:hover {
  background: var(--wp--preset--color--accent-2);
}

.tn-serv {
  display: flex;
  gap: 1.4rem;
  align-items: flex-start;
  padding: 1.75rem 0;
  border-top: 1px solid rgba(17, 23, 63, 0.12);
}

.tn-serv:last-child {
  border-bottom: 1px solid rgba(17, 23, 63, 0.12);
}

.tn-serv__num {
  flex: 0 0 2.4rem;
  margin: 0;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--wp--preset--color--accent-1);
  line-height: 1.9;
}

.tn-serv__body {
  flex: 1;
}

/* El layout "flow" de WordPress mete margen arriba a cada hijo después del primero:
   dentro del servicio bajaba el título respecto del ícono, y entre servicios se sumaba por fuera de la línea divisoria */
.tn-serv > *,
.tn-serv + .tn-serv { margin-block-start: 0 !important; }

.tn-serv__title {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--wp--preset--color--contrast);
  margin: 0 0 0.3rem;
}

.tn-serv__desc {
  font-size: 0.97rem;
  line-height: 1.55;
  opacity: 0.74;
  margin: 0;
}

/* Variante grande, página Consultoría */
.tn-serv--full {
  padding: 2.2rem 0;
  gap: 1.8rem;
}

.tn-serv--full .tn-serv__num {
  font-size: 1rem;
  line-height: 1.7;
}

.tn-serv--full .tn-serv__title {
  font-size: 1.5rem;
  margin-bottom: 0.7rem;
}

.tn-serv--full .tn-serv__desc {
  font-size: 1.02rem;
  line-height: 1.62;
  margin-bottom: 0.8rem;
}

.tn-serv--full .tn-serv__desc:last-child {
  margin-bottom: 0;
}

.tn-serv__tag {
  flex: 0 0 auto;
  align-self: flex-start;
  margin: 0.2rem 0 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wp--preset--color--contrast);
  background: rgba(66, 192, 186, 0.18);
  border-radius: 999px;
  padding: 0.35rem 0.8rem;
  white-space: nowrap;
}


/* Íconos de servicios (Consultoría y home): reemplazan el número. Se asignan por clase
   (tn-serv--i-perfil, etc.); el número queda en el HTML pero no se muestra. */
.tn-serv[class*="tn-serv--i-"] .tn-serv__num {
  font-size: 0;
  flex: 0 0 30px;
  height: 30px;
  position: relative;
  top: -3px; /* centro del ícono con el de la línea del título (medido) */
  background: var(--wp--preset--color--accent-1);
  -webkit-mask: var(--tn-icono) center / contain no-repeat;
  mask: var(--tn-icono) center / contain no-repeat;
  transition: transform .3s ease;
}

.tn-serv--full[class*="tn-serv--i-"] .tn-serv__num {
  flex-basis: 38px;
  height: 38px;
  top: -4px; /* ícono de 38 px con la línea del título grande (medido) */
}

.tn-serv:hover .tn-serv__num { transform: translateY(-2px); }
.tn-serv--i-perfil { --tn-icono: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 32 32%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 9V5h4M24 5h4v4M28 23v4h-4M8 27H4v-4%22/%3E%3Ccircle cx=%2216%22 cy=%2213%22 r=%224%22/%3E%3Cpath d=%22M9.5 24c.8-3.6 3.4-5.6 6.5-5.6s5.7 2 6.5 5.6%22/%3E%3C/svg%3E"); }
.tn-serv--i-coaching { --tn-icono: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 32 32%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2211%22 cy=%2211%22 r=%223.6%22/%3E%3Ccircle cx=%2221.5%22 cy=%2212.5%22 r=%223%22/%3E%3Cpath d=%22M4.5 26c.6-4.4 3.2-7 6.5-7s5.9 2.6 6.5 7%22/%3E%3Cpath d=%22M17.5 21.2c1-1.4 2.4-2.2 4-2.2 3 0 5.2 2.4 5.7 6%22/%3E%3C/svg%3E"); }
.tn-serv--i-ikigai { --tn-icono: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 32 32%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212.5%22 cy=%2212.5%22 r=%226.5%22/%3E%3Ccircle cx=%2219.5%22 cy=%2212.5%22 r=%226.5%22/%3E%3Ccircle cx=%2212.5%22 cy=%2219.5%22 r=%226.5%22/%3E%3Ccircle cx=%2219.5%22 cy=%2219.5%22 r=%226.5%22/%3E%3C/svg%3E"); }
.tn-serv--i-talento { --tn-icono: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 32 32%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2213%22 cy=%2211.5%22 r=%224%22/%3E%3Cpath d=%22M5.5 26c.7-4.6 3.7-7.4 7.5-7.4 2.2 0 4.1.9 5.4 2.6%22/%3E%3Cpath d=%22M24 17v8M20 21h8%22/%3E%3C/svg%3E"); }
.tn-serv--i-medida { --tn-icono: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 32 32%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M5 9h22M5 16h22M5 23h22%22/%3E%3Ccircle cx=%2211%22 cy=%229%22 r=%222.4%22 fill=%22%23000%22/%3E%3Ccircle cx=%2221%22 cy=%2216%22 r=%222.4%22 fill=%22%23000%22/%3E%3Ccircle cx=%2214%22 cy=%2223%22 r=%222.4%22 fill=%22%23000%22/%3E%3C/svg%3E"); }

@media (max-width: 781px) {
  .tn-consultoria__intro { position: static; }
  .tn-serv { padding: 1.2rem 0; gap: 1rem; }
  .tn-serv--full { flex-wrap: wrap; gap: 1rem; }
  .tn-serv__tag { order: 3; margin-left: calc(38px + 1rem); white-space: normal; flex: 0 1 auto; max-width: calc(100% - 38px - 1rem); }
  /* Consultoría en celular: el ícono queda al lado del título; descripción y etiqueta usan todo el ancho */
  .tn-serv--full .tn-serv__desc { margin-left: calc(-38px - 1rem); }
  .tn-serv--full .tn-serv__body { flex: 1 1 calc(100% - 38px - 1rem); }
  .tn-serv--full .tn-serv__tag { margin-left: 0; max-width: 100%; }
}


/* ---------- HOME 6 · EL FARO INTERIOR ---------- */

.tn-faro {
  position: relative;
  overflow: hidden;
}

.tn-faro::before {
  content: "";
  position: absolute;
  top: -30%;
  left: -10%;
  width: 560px;
  height: 560px;
  background: radial-gradient(circle, rgba(66, 192, 186, 0.10), transparent 68%);
  filter: blur(20px);
  pointer-events: none;
  z-index: 0;
}

.tn-faro__intro {
  position: relative;
  z-index: 1;
  margin-bottom: 3rem;
}

.tn-faro__title {
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  max-width: 16em; /* el bloque va a todo el ancho; se acota el título, no el bloque, porque el layout constrained centra los bloques angostos */
  margin: 0;
}

.tn-faro__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2rem 2rem;
}

.tn-faro__grid > * {
  margin-block-start: 0 !important;
}

.tn-faro__item {
  border-top: 1px solid rgba(66, 192, 186, 0.28);
  padding-top: 1.4rem;
}

/* Íconos de línea: un símbolo por verbo. Van como máscara pintada con el turquesa,
   así cambian de color con la paleta. Se asignan por clase (tn-faro__item--integrar, etc.),
   no por posición: si se reordenan los bloques, cada ícono sigue a su verbo. */
.tn-faro__item[class*="tn-faro__item--"] {
  display: grid;
  grid-template-columns: 28px 1fr;
  column-gap: 0.7rem;
  align-items: center;
  align-content: start; /* si el texto es más corto, el espacio sobrante va abajo y no agranda la fila del ícono */
}

.tn-faro__item[class*="tn-faro__item--"] > * { grid-column: 1 / -1; margin-block-start: 0; }
.tn-faro__item[class*="tn-faro__item--"] > .tn-faro__verb { grid-column: 2; grid-row: 1; margin: 0; }
.tn-faro__item[class*="tn-faro__item--"] > .tn-faro__p { margin-top: 0.7rem; }

.tn-faro__item[class*="tn-faro__item--"]::before {
  content: "";
  display: block;
  grid-column: 1;
  grid-row: 1;
  width: 28px;
  height: 28px;
  background: var(--wp--preset--color--accent-1);
  -webkit-mask: var(--tn-icono) center / contain no-repeat;
  mask: var(--tn-icono) center / contain no-repeat;
  transition: transform .3s ease;
}

.tn-faro__item:hover::before { transform: translateY(-3px); }
.tn-faro__item--integrar { --tn-icono: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 32 32%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2213%22 r=%227%22/%3E%3Ccircle cx=%2220%22 cy=%2213%22 r=%227%22/%3E%3Ccircle cx=%2216%22 cy=%2220%22 r=%227%22/%3E%3C/svg%3E"); }
.tn-faro__item--practicar { --tn-icono: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 32 32%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M26.4 13.2A10.6 10.6 0 1 0 25 22%22/%3E%3Ccircle cx=%2216%22 cy=%2216%22 r=%221.4%22/%3E%3C/svg%3E"); }
.tn-faro__item--comunicar { --tn-icono: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 32 32%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M5 6h12a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2h-6l-4 3.5V17H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2z%22/%3E%3Cpath d=%22M22.5 11H27a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2h-2v3.5L21 22h-6a2 2 0 0 1-2-2v-1%22/%3E%3C/svg%3E"); }
.tn-faro__item--desarrollar { --tn-icono: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 32 32%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M16 27V15%22/%3E%3Cpath d=%22M16 18c0-5.5 3-8.5 9.5-8.5 0 6.2-3.2 8.5-9.5 8.5z%22/%3E%3Cpath d=%22M16 22c0-4.3-2.6-6.8-8-6.8 0 5 2.6 6.8 8 6.8z%22/%3E%3Cpath d=%22M10 27h12%22/%3E%3C/svg%3E"); }
.tn-faro__item--aplicar { --tn-icono: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 32 32%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2216%22 cy=%2216%22 r=%2212%22/%3E%3Cpath d=%22M16 7.5l3 8.5-3 8.5-3-8.5z%22/%3E%3Cpath d=%22M16 3.5v2M16 26.5v2M3.5 16h2M26.5 16h2%22/%3E%3C/svg%3E"); }

.tn-faro__verb {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--wp--preset--color--accent-1);
  margin: 0 0 0.5rem;
}

.tn-faro__p {
  color: rgba(255, 255, 255, 0.74);
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 0;
}

@media (max-width: 1024px) {
  .tn-faro__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 781px) {
  .tn-faro__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .tn-faro__grid { grid-template-columns: 1fr; gap: 1.8rem; }
}


/* ---------- HOME 7 · TESTIMONIOS (tarjetas .tn-quote también en Quiénes somos) ---------- */

.tn-razones {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  margin-top: 3rem;
}

.tn-quotes {
  margin-top: 3.5rem;
  gap: 1.6rem;
}

/* Home: los cuatro testimonios en fila (sin JS o con movimiento reducido: grilla fija) */
.tn-quotes--row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.4rem;
  margin-top: 3rem;
}

/* Con JS: cinta que se desplaza sola de derecha a izquierda; la cita del centro a opacidad plena */
.tn-quotes--row.tn-ticker {
  display: block;
  overflow: hidden;
  padding-block: 0.5rem;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.25) 18%, #000 42%, #000 58%, rgba(0,0,0,0.25) 82%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.25) 18%, #000 42%, #000 58%, rgba(0,0,0,0.25) 82%, transparent 100%);
}

.tn-ticker__track {
  display: flex;
  gap: 1.4rem;
  width: max-content;
  animation: tn-ticker calc(var(--n, 4) * 11s) linear infinite;
}

.tn-ticker:hover .tn-ticker__track {
  animation-play-state: paused;
}

.tn-ticker .tn-quote {
  flex: 0 0 340px;
  margin: 0 !important;
}

@keyframes tn-ticker {
  to { transform: translateX(calc(-50% - 0.7rem)); }
}

.tn-quotes--row > * {
  margin-block-start: 0 !important;
}

.tn-quotes--row .tn-quote {
  padding: 3rem 1.5rem 1.6rem;
}

.tn-quotes--row .tn-quote__text {
  font-size: 1.02rem;
}

.tn-quotes--row .tn-quote__who {
  font-size: 0.85rem;
}

.tn-quote__text strong {
  color: var(--wp--preset--color--contrast);
  font-weight: 700;
  background: linear-gradient(transparent 62%, rgba(66, 192, 186, 0.28) 62%);
}

@media (max-width: 1024px) {
  .tn-quotes--row { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .tn-quotes--row { grid-template-columns: 1fr; }
}

.tn-quotes--grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin-top: 3rem;
}

.tn-quote {
  background: #ffffff;
  border: 1px solid rgba(17, 23, 63, 0.10);
  border-radius: 16px;
  padding: 3.3rem 2rem 2rem;
  position: relative;
}

/* La comilla ocupa solo la mitad superior de su caja: el padding-top de la tarjeta
   deja ~0.6rem de aire entre el borde inferior del glifo y la primera línea. */
.tn-quote::before {
  content: "\201C";
  position: absolute;
  top: 0.8rem;
  left: 1.6rem;
  font-size: 4rem;
  font-weight: 900;
  line-height: 1;
  color: var(--wp--preset--color--accent-1);
  opacity: 0.6;
}

.tn-quote__text {
  position: relative;
  font-size: 1.12rem;
  line-height: 1.6;
  color: var(--wp--preset--color--contrast);
  margin: 0 0 1.4rem;
}

.tn-quote__who {
  font-size: 0.92rem;
  line-height: 1.5;
  opacity: 0.7;
  margin: 0;
}

.tn-quote__who strong {
  color: var(--wp--preset--color--contrast);
  opacity: 1;
}

.tn-testimonios__link {
  margin-top: 2.5rem;
}

.tn-testimonios__link a {
  color: var(--wp--preset--color--contrast);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid rgba(66, 192, 186, 0.6);
  padding-bottom: 2px;
}

.tn-testimonios__link a:hover {
  border-bottom-color: var(--wp--preset--color--accent-1);
  color: var(--wp--preset--color--accent-1);
}

@media (max-width: 1024px) {
  .tn-razones { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 781px) {
  .tn-quotes--grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .tn-razones { grid-template-columns: 1fr; gap: 1.2rem; }
}


/* ---------- HOME 8 · ENTREVISTA GRATUITA (cierre de todas las páginas) ---------- */

.tn-cta {
  position: relative;
  overflow: hidden;
}

.tn-cta::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 640px;
  height: 640px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(66, 192, 186, 0.16), transparent 62%);
  filter: blur(24px);
  pointer-events: none;
  z-index: 0;
}

.tn-cta__inner {
  position: relative;
  z-index: 1;
}

.tn-cta__title {
  font-size: clamp(2rem, 4.5vw, 3rem);
  margin: 0 0 1.2rem;
}

.tn-cta__text {
  font-size: 1.1rem;
  line-height: 1.62;
  color: rgba(255, 255, 255, 0.78);
  margin: 0;
}

.tn-cta__actions .wp-element-button {
  font-weight: 700;
  transition: transform .15s ease;
}

.tn-cta__actions .wp-element-button:hover {
  transform: translateY(-2px);
}


/* ---------- HOME 9 · NEWSLETTER (formulario embebido de Doppler) ----------
   Doppler dibuja el formulario con JS y estilos inline: por eso los !important.
   Si un día se ve roto, inspeccionar el HTML generado y comparar las clases. */

.tn-news__form,
.tn-news__form * {
  font-family: inherit !important;
}

.tn-news__form ._dp_container-content,
.tn-news__form ._dp_container-HTMLForm,
.tn-news__form ._dp_components-container,
.tn-news__form ._dp_container-confirmation > div {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  margin: 0 auto !important;
  max-width: 100% !important;
  padding: 0 !important;
}

.tn-news__form ._dp_form__content,
.tn-news__form ._dp_canvas-form--body {
  padding: 0 !important;
}

.tn-news__form ._dp_form-header p {
  text-align: center !important;
  margin: 0 !important;
}

.tn-news__form ._dp_form-header p:empty,
.tn-news__form ._dp_form-header p > br:only-child {
  display: none !important;
}

.tn-news__form ._dp_form-header strong {
  display: block;
  font-size: clamp(1.7rem, 3.5vw, 2.3rem) !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--wp--preset--color--contrast) !important;
  margin-bottom: 0.8rem;
}

.tn-news__form ._dp_form-header span {
  display: block;
  font-size: 1.05rem !important;
  line-height: 1.6;
  color: var(--wp--preset--color--contrast) !important;
  opacity: 0.74;
  margin-bottom: 1.8rem;
}

/* Campo + botón en una línea */
.tn-news__form ._dp_form-body {
  text-align: center !important;
}

.tn-news__form ._dp_form-body > div:first-child {
  display: inline-block;
  width: min(100%, 360px);
  vertical-align: top;
}

.tn-news__form ._dp_form-body > div:last-of-type {
  display: inline-block;
  vertical-align: top;
  padding: 0 0 0 0.6rem !important;
  text-align: left !important;
}

.tn-news__form ._dp_label--default {
  display: none !important;
}

.tn-news__form ._dp_input--text {
  width: 100% !important;
  font-size: 1rem !important;
  padding: 0.85rem 1rem !important;
  border: 1px solid rgba(17, 23, 63, 0.18) !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  color: var(--wp--preset--color--contrast) !important;
  box-shadow: none !important;
  margin: 0 !important;
  height: auto !important;
  line-height: 1.4 !important;
}

.tn-news__form ._dp_input--text:focus {
  outline: none !important;
  border-color: var(--wp--preset--color--accent-1) !important;
}

.tn-news__form .submit-button {
  font-size: 1rem !important;
  font-weight: 700 !important;
  background: var(--wp--preset--color--accent-1) !important;
  color: var(--wp--preset--color--contrast) !important;
  border: 0 !important;
  border-radius: 10px !important;
  padding: 0.85rem 1.6rem !important;
  line-height: 1.4 !important;
  cursor: pointer;
  transition: opacity .2s ease;
  white-space: nowrap;
}

.tn-news__form .submit-button:hover {
  opacity: 0.9;
}

.tn-news__form ._dp_msg-error {
  text-align: center;
  margin-top: 1rem;
}

.tn-news__form ._dp_container-confirmation p {
  text-align: center !important;
}

.tn-news__form ._dp_container-confirmation strong {
  font-size: clamp(1.5rem, 3vw, 2rem) !important;
  font-weight: 900 !important;
  color: var(--wp--preset--color--contrast) !important;
}

.tn-news__legal {
  font-size: 0.85rem;
  opacity: 0.6;
  margin-top: 1.2rem;
}

.tn-news__legal a {
  color: inherit;
  text-decoration: underline;
}

@media (max-width: 600px) {
  .tn-news__form ._dp_form-body > div:first-child,
  .tn-news__form ._dp_form-body > div:last-of-type {
    display: block;
    width: 100%;
    padding: 0 !important;
  }
  .tn-news__form ._dp_form-body > div:last-of-type { margin-top: 0.6rem; }
  .tn-news__form .submit-button { width: 100% !important; }
}


/* ---------- PÁGINAS INTERIORES · PORTADA ---------- */

.tn-pagehero {
  position: relative;
  overflow: hidden;
}

.tn-pagehero::before {
  content: "";
  position: absolute;
  top: -40%;
  left: 50%;
  width: 720px;
  height: 720px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(66, 192, 186, 0.14), transparent 62%);
  filter: blur(24px);
  pointer-events: none;
  z-index: 0;
}

.tn-pagehero__inner {
  position: relative;
  z-index: 1;
}

.tn-pagehero__title {
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  margin: 0 0 1.2rem;
}

.tn-pagehero--corto .tn-pagehero__title {
  font-size: clamp(1.9rem, 4vw, 2.8rem);
}

.tn-pagehero__text {
  font-size: 1.12rem;
  line-height: 1.62;
  color: rgba(255, 255, 255, 0.78);
  max-width: 36em;
  margin: 0 auto;
}


/* ---------- QUIÉNES SOMOS ---------- */

.tn-intro__p {
  font-size: 1.12rem;
  line-height: 1.65;
  opacity: 0.8;
  margin: 0 0 1.2rem;
}

.tn-intro__p--lead {
  font-size: clamp(1.3rem, 2.4vw, 1.6rem);
  font-weight: 600;
  line-height: 1.4;
  opacity: 1;
  color: var(--wp--preset--color--contrast);
}

.tn-creemos__title {
  font-size: 1.7rem;
  margin: 0 0 1.4rem;
}

.tn-creemos .tn-razon {
  margin-bottom: 0.9rem;
}

.tn-creemos__cierre {
  font-size: clamp(1.4rem, 2.6vw, 1.8rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--wp--preset--color--contrast);
  margin-top: 3.5rem;
}

/* Bio extendida */
.tn-bio__title {
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 1rem;
}

.tn-bio .tn-quien__p {
  font-size: 1rem;
  line-height: 1.6;
}

/* Certificaciones (bloque Detalles) */
.tn-cert {
  position: relative;
  z-index: 1;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: 1.4rem;
}

.tn-cert summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--wp--preset--color--accent-1);
  list-style: none;
}

.tn-cert summary::before {
  content: "+";
  display: inline-block;
  width: 1.4em;
  font-weight: 900;
}

.tn-cert[open] summary::before {
  content: "–";
}

.tn-cert__list {
  list-style: none;
  padding: 0.8rem 0 0 1.4em;
  margin: 0;
}

.tn-cert__list li {
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.55;
  margin-bottom: 0.6rem;
}

.tn-cert__list strong {
  color: var(--wp--preset--color--accent-1);
  display: inline-block;
  min-width: 6em;
}

@media (max-width: 781px) {
  .tn-cert__list strong { display: block; min-width: 0; }
}


/* ---------- CONSULTORÍA (página) · herramientas ---------- */

.tn-tools__text {
  font-size: 1.08rem;
  line-height: 1.6;
  opacity: 0.74;
  margin: 0 0 1.8rem;
}

.tn-tools__list {
  gap: 1.5rem 4.5rem;
  margin-top: 2.2rem;
}

/* Logos en navy, todos a la misma altura visual */
.tn-tools__logo {
  margin: 0;
  display: flex;
  align-items: center;
}

.tn-tools__logo img {
  width: auto;
  height: 34px;
  display: block;
  opacity: 0.85;
  transition: opacity .25s ease, transform .25s ease;
}

.tn-tools__logo:hover img {
  opacity: 1;
  transform: translateY(-2px);
}

/* Compensación óptica: cada logo a un peso visual parecido, y las palabras principales sobre la misma línea.
   Genos lleva "INTERNATIONAL" debajo, así que su caja baja un poco para que "genos" quede centrado con los demás. */
.tn-tools__logo--hogan img { height: 30px; }
.tn-tools__logo--tti img { height: 36px; }
.tn-tools__logo--genos img { height: 44px; }
.tn-tools__logo--genos { position: relative; top: 5px; }

@media (max-width: 600px) {
  .tn-tools__list { gap: 1.2rem 2rem; }
  .tn-tools__logo--hogan img { height: 24px; }
  .tn-tools__logo--tti img { height: 29px; }
  .tn-tools__logo--genos img { height: 35px; }
  .tn-tools__logo--genos { top: 4px; }
}


/* ---------- CONTACTO ---------- */

.tn-contacto__title {
  font-size: clamp(1.7rem, 3vw, 2.2rem);
  margin: 0 0 1rem;
}

.tn-contacto__p {
  font-size: 1.05rem;
  line-height: 1.6;
  opacity: 0.78;
  margin: 0 0 1.4rem;
}

/* Único color fuera de paleta del sitio, a propósito */
.tn-contacto__wa .wp-block-button__link {
  background: #25D366;
  color: #0b2b1a;
  font-weight: 700;
  border-radius: 10px;
  padding: 0.8rem 1.5rem;
  text-decoration: none;
  transition: opacity .2s ease;
}

.tn-contacto__wa .wp-block-button__link:hover {
  opacity: 0.9;
}

.tn-datos {
  margin-top: 2.5rem;
  border-top: 1px solid rgba(17, 23, 63, 0.12);
}

.tn-datos__item {
  padding: 1.1rem 0;
  border-bottom: 1px solid rgba(17, 23, 63, 0.12);
  margin: 0;
  line-height: 1.6;
}

.tn-datos__label {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.55;
  margin-bottom: 0.2rem;
}

.tn-datos__item a {
  color: var(--wp--preset--color--contrast);
  text-decoration: none;
  border-bottom: 1px solid rgba(66, 192, 186, 0.5);
}

.tn-datos__item a:hover {
  color: var(--wp--preset--color--accent-1);
  border-bottom-color: var(--wp--preset--color--accent-1);
}

/* Tarjeta del formulario (Contact Form 7) */
.tn-form {
  background: #ffffff;
  border: 1px solid rgba(17, 23, 63, 0.10);
  border-radius: 16px;
  padding: 2.2rem 2.2rem 2.4rem;
}

.tn-form__title {
  font-size: 1.6rem;
  margin: 0 0 1.4rem;
}

/* CF7 mete párrafos y saltos de línea propios; se neutralizan */
.tn-form .wpcf7 form p {
  margin: 0;
}

.tn-form .wpcf7 form br {
  display: none;
}

.tn-form .wpcf7 label {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--wp--preset--color--contrast);
  margin-bottom: 1.1rem;
}

.tn-form .wpcf7 input[type="text"],
.tn-form .wpcf7 input[type="email"],
.tn-form .wpcf7 select,
.tn-form .wpcf7 textarea {
  display: block;
  width: 100%;
  margin-top: 0.35rem;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 400;
  color: var(--wp--preset--color--contrast);
  background: var(--wp--preset--color--base);
  border: 1px solid rgba(17, 23, 63, 0.18);
  border-radius: 10px;
  padding: 0.8rem 1rem;
  box-sizing: border-box;
}

.tn-form .wpcf7 textarea {
  min-height: 120px;
  resize: vertical;
}

.tn-form .wpcf7 input:focus,
.tn-form .wpcf7 select:focus,
.tn-form .wpcf7 textarea:focus {
  outline: none;
  border-color: var(--wp--preset--color--accent-1);
  background: #ffffff;
}

.tn-form .wpcf7 input[type="submit"] {
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  background: var(--wp--preset--color--accent-1);
  color: var(--wp--preset--color--contrast);
  border: 0;
  border-radius: 10px;
  padding: 0.85rem 1.8rem;
  margin-top: 0.4rem;
  cursor: pointer;
  transition: opacity .2s ease;
}

.tn-form .wpcf7 input[type="submit"]:hover {
  opacity: 0.9;
}

.tn-form .wpcf7-spinner {
  display: none;
}

.tn-form .wpcf7-not-valid-tip {
  font-size: 0.82rem;
  font-weight: 400;
  color: #b2074b;
  margin-top: 0.3rem;
}

.tn-form .wpcf7 form .wpcf7-response-output {
  margin: 1.2rem 0 0;
  padding: 0.8rem 1rem;
  border-radius: 10px;
  border: 1px solid rgba(17, 23, 63, 0.18);
  font-size: 0.92rem;
}

.tn-form .wpcf7 form.sent .wpcf7-response-output {
  border-color: var(--wp--preset--color--accent-1);
  background: rgba(66, 192, 186, 0.10);
}

.tn-form .wpcf7 form.invalid .wpcf7-response-output,
.tn-form .wpcf7 form.failed .wpcf7-response-output {
  border-color: #b2074b;
  background: rgba(178, 7, 75, 0.06);
}

@media (max-width: 781px) {
  .tn-form { padding: 1.6rem 1.4rem 1.8rem; }
}


/* =====================================================================
   CELULAR · ajustes transversales (revisión 14/10 en iPhone SE)
   ===================================================================== */

/* Red de seguridad: nada puede empujar el ancho de la página */
body {
  overflow-x: clip;
}

@media (max-width: 781px) {

  /* Encabezado: en celular no va fijo, se come media pantalla */
  .wp-site-blocks > header {
    position: static;
    padding-block: 0.8rem;
  }

  /* Pie: el tema lo arma con grupos flex "nowrap", no con columnas.
     La fila externa (marca | enlaces) se apila; la interna (Explorar | Contacto) queda en dos columnas. */
  .wp-site-blocks > footer .wp-block-group.alignfull.is-layout-flex {
    flex-wrap: wrap !important;
    gap: 2rem !important;
  }

  .wp-site-blocks > footer .wp-block-group.alignfull.is-layout-flex > .wp-block-group {
    flex-basis: 100%;
    min-width: 0;
  }

  .wp-site-blocks > footer .wp-block-site-title {
    font-size: 2rem !important;
  }

  .wp-site-blocks > footer .wp-block-site-title a {
    overflow-wrap: normal;
  }

  .wp-site-blocks > footer .is-vertical a,
  .wp-site-blocks > footer p {
    overflow-wrap: anywhere;
  }

  /* Cifras: fila de tres compacta en vez de apiladas */
  .tn-cifras__grid {
    flex-wrap: nowrap !important;
    gap: 0.6rem !important;
  }

  .tn-cifras__grid .tn-cifra {
    flex-basis: 33.333% !important;
    min-width: 0;
  }

  .tn-cifra__num {
    font-size: clamp(1.7rem, 8vw, 2.4rem);
  }

  .tn-cifra__label {
    font-size: 0.74rem;
    line-height: 1.3;
    letter-spacing: 0;
    overflow-wrap: normal; /* "acompañamiento" se partía en "acompañamient / o" */
    word-break: normal;
  }

  /* Retrato: cuadrado y más chico, no una pantalla entera */
  .tn-quien__foto {
    max-width: 240px;
  }

  .tn-retrato img {
    aspect-ratio: 1 / 1;
  }

  /* Datos de contacto más compactos */
  .tn-datos {
    margin-top: 1.8rem;
  }

  .tn-datos__item {
    padding: 0.8rem 0;
  }
}

@media (max-width: 600px) {

  /* Menos aire vertical entre secciones */
  .wp-block-post-content > .alignfull[class*="tn-"] {
    padding-top: 3.5rem !important;
    padding-bottom: 3.5rem !important;
  }

  /* Bajadas y párrafos un toque más chicos */
  .tn-sec__lede,
  .tn-pagehero__text,
  .tn-cta__text,
  .tn-intro__p {
    font-size: 1rem;
  }

  .tn-intro__p--lead {
    font-size: 1.2rem;
  }

  .tn-quien__p--destacado {
    font-size: 1rem;
  }
}

/* Redes como etiquetas (página Contacto) */
.tn-datos__item--redes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.tn-datos__item--redes .tn-datos__label {
  flex-basis: 100%;
}

.tn-datos__item--redes a {
  border: 1.5px solid rgba(17, 23, 63, 0.18);
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  font-size: 0.92rem;
  font-weight: 700;
  border-bottom-width: 1.5px;
}

.tn-datos__item--redes a:hover {
  border-color: var(--wp--preset--color--accent-1);
}


/* ---------- FORMACIÓN (home, cursos en standby) + PÁGINA CURSOS ---------- */

.tn-formacion__actions .wp-block-button__link {
  font-weight: 700;
  border-radius: 10px;
  padding: 0.85rem 1.6rem;
  text-decoration: none;
  transition: opacity .2s ease, border-color .2s ease, color .2s ease;
}

.tn-formacion__actions .wp-block-button:not(.is-style-outline) .wp-block-button__link {
  background: var(--wp--preset--color--accent-1);
  color: var(--wp--preset--color--contrast);
}

.tn-btn--ghost-dark .wp-block-button__link {
  border: 1.5px solid rgba(17, 23, 63, 0.25);
  color: var(--wp--preset--color--contrast);
  background: transparent;
}

.tn-btn--ghost-dark .wp-block-button__link:hover {
  border-color: var(--wp--preset--color--accent-1);
  color: var(--wp--preset--color--accent-1);
}

/* Aviso: sin inscripción abierta */
.tn-aviso {
  background: rgba(66, 192, 186, 0.12);
  border-left: 4px solid var(--wp--preset--color--accent-1);
  border-radius: 0 12px 12px 0;
  padding: 1.2rem 1.5rem;
  margin-bottom: 3rem;
}

.tn-aviso__title {
  font-weight: 700;
  color: var(--wp--preset--color--contrast);
  margin: 0 0 0.3rem;
}

.tn-aviso__text {
  margin: 0;
  line-height: 1.55;
  opacity: 0.85;
}

.tn-aviso__text a {
  color: var(--wp--preset--color--contrast);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--wp--preset--color--accent-1);
}

/* Programas */
.tn-programa {
  background: #ffffff;
  border: 1px solid rgba(17, 23, 63, 0.10);
  border-left: 5px solid var(--wp--preset--color--accent-1);
  border-radius: 16px;
  padding: 2.2rem 2.4rem 2.4rem;
  margin-bottom: 1.8rem;
}

.tn-programa__meta {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wp--preset--color--accent-1);
  margin: 0 0 0.6rem;
}

.tn-programa__title {
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin: 0 0 1rem;
}

.tn-programa__desc {
  font-size: 1.05rem;
  line-height: 1.62;
  opacity: 0.8;
  margin: 0 0 1.6rem;
}

.tn-programa__sub {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.55;
  margin: 0 0 0.6rem;
}

.tn-programa__list {
  margin: 0;
  padding-left: 1.4em;
  line-height: 1.7;
}

.tn-programa__list li::marker {
  color: var(--wp--preset--color--accent-1);
  font-weight: 700;
}

@media (max-width: 600px) {
  .tn-formacion__actions { flex-direction: column; }
  .tn-formacion__actions .wp-block-button,
  .tn-formacion__actions .wp-block-button__link { width: 100%; text-align: center; }
  .tn-programa { padding: 1.6rem 1.3rem 1.8rem; }
}

/* ---------- PÁGINAS LEGALES (política de privacidad, términos) ---------- */
.tn-legal p,
.tn-legal li {
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--wp--preset--color--contrast);
  opacity: 0.85;
}

.tn-legal li { margin-bottom: 0.5rem; }
.tn-legal ul { padding-left: 1.3em; margin: 0 0 1.4rem; }
.tn-legal li::marker { color: var(--wp--preset--color--accent-1); }

.tn-legal__h {
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 2.6rem 0 0.9rem;
}

.tn-legal__h:first-child { margin-top: 0; }

.tn-legal a {
  color: var(--wp--preset--color--contrast);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--wp--preset--color--accent-1);
}

.tn-legal__aaip {
  font-size: 0.92rem !important;
  border-left: 3px solid rgba(17, 23, 63, 0.2);
  padding-left: 1rem;
  opacity: 0.7 !important;
}

/* Docentes (página Cursos) */
.tn-docentes {
  margin-top: 4.5rem;
}

.tn-docentes__title {
  font-size: clamp(1.7rem, 3.2vw, 2.2rem);
  margin: 0 0 1.8rem;
}

.tn-docentes__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.6rem;
}

/* El layout "flow" de WordPress mete margen arriba al segundo hijo; en grilla sobra */
.tn-docentes__grid > * {
  margin-block-start: 0 !important;
}

.tn-docente {
  background: #ffffff;
  border: 1px solid rgba(17, 23, 63, 0.10);
  border-radius: 16px;
  padding: 2rem 2.1rem 2.2rem;
}

.tn-docente__foto {
  margin: 0 0 1.2rem;
  width: 96px;
}

.tn-docente__foto img {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.tn-docente__name {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 0.35rem;
}

.tn-docente__rol {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wp--preset--color--accent-1);
  margin: 0 0 1.1rem;
}

.tn-docente__p {
  font-size: 0.98rem;
  line-height: 1.62;
  opacity: 0.8;
  margin: 0 0 0.9rem;
}

.tn-docente__p:last-child {
  margin-bottom: 0;
}

@media (max-width: 781px) {
  .tn-docentes__grid { grid-template-columns: 1fr; }
  .tn-docente { padding: 1.6rem 1.3rem 1.8rem; }
}

/* Enlace obligatorio a Defensa del Consumidor (Res. SCI 274/2021), pie */
.tn-consumidor {
  margin: 0 0 0.6rem;
  opacity: 0.75;
}

.tn-consumidor a {
  text-decoration: underline;
  text-decoration-color: var(--wp--preset--color--accent-1);
}


/* ---------- AGENDA IKIGAI (página) ---------- */
.tn-agenda__hero .tn-pagehero__title {
  font-size: clamp(2.4rem, 5.5vw, 3.6rem);
  margin: 0 0 1.2rem;
}

.tn-agenda__lede {
  font-size: 1.15rem;
  line-height: 1.62;
  color: rgba(255, 255, 255, 0.8);
  max-width: 30em;
  margin: 0;
}

.tn-agenda__nota {
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.6);
  margin: 1rem 0 0;
}

.tn-agenda__tapa {
  margin: 0;
}

.tn-agenda__tapa img {
  width: 100%;
  max-width: 380px;
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: 14px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45);
  transition: transform .35s ease;
  will-change: transform;
}

.tn-agenda__lista .tn-razon {
  font-size: 1.1rem;
  margin-bottom: 1rem;
}

.tn-agenda__paginas {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem 2.5rem;
  margin-top: 3rem;
}

.tn-agenda__paginas > * {
  margin-block-start: 0 !important;
}

.tn-agenda__pagina {
  margin: 0;
}

.tn-agenda__pagina:first-child {
  grid-column: 1 / -1;
}

.tn-agenda__pagina:first-child img {
  max-width: 820px;
  margin: 0 auto;
}

.tn-agenda__pagina img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  box-shadow: 0 30px 60px -20px rgba(17, 23, 63, 0.28);
  transition: transform .4s ease, box-shadow .4s ease;
}

.tn-agenda__pagina:hover img {
  transform: translateY(-4px);
  box-shadow: 0 40px 70px -20px rgba(17, 23, 63, 0.36);
}

.tn-agenda__pagina figcaption {
  text-align: center;
  font-size: 0.92rem;
  opacity: 0.65;
  margin-top: 0.8rem;
}

@media (max-width: 781px) {
  .tn-agenda__grid { flex-direction: column-reverse; }
  .tn-agenda__texto { text-align: center; }
  .tn-agenda__lede { margin: 0 auto; }
  .tn-agenda__actions,
  .tn-agenda__actions.is-content-justification-left { justify-content: center !important; }
  .tn-agenda__tapa img { max-width: 260px; }
  .tn-agenda__paginas { grid-template-columns: 1fr; gap: 1.6rem; }
}


/* ---------- APARICIÓN AL HACER SCROLL (clases que pone team-noia.js) ---------- */
.tn-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
  transition-delay: calc(var(--i, 0) * 110ms);
  will-change: opacity, transform;
}

.tn-reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Las grillas aparecen de izquierda a derecha, con un leve desplazamiento lateral */
.tn-quotes--row .tn-reveal,
.tn-tools__list .tn-reveal,
.tn-cifras__grid .tn-reveal {
  transform: translateX(-14px);
}

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


/* ---------- INTERACCIÓN GLOBAL (16/10): foco, hover y clic de todos los botones ----------
   Va al final para ganar en cascada. Un solo sistema para todos los botones del sitio:
   bloques Botón de WordPress, el envío de Contact Form 7 y el de Doppler. */

/* Foco: nada al hacer clic con el mouse; anillo turquesa solo con teclado (Tab). */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
summary:focus:not(:focus-visible),
[tabindex]:focus:not(:focus-visible),
.wp-element-button:focus:not(:focus-visible),
input[type="submit"]:focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none;
}
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
.wp-element-button:focus-visible,
input[type="submit"]:focus-visible {
  outline: 2px solid var(--wp--preset--color--accent-1) !important;
  outline-offset: 3px;
}
html { -webkit-tap-highlight-color: transparent; }

/* Botones */
.wp-site-blocks .wp-element-button,
.wp-site-blocks .wp-block-button__link,
.tn-news__form .submit-button,
.tn-form .wpcf7 input[type="submit"] {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform .22s cubic-bezier(.2, .8, .2, 1), box-shadow .22s ease, background-color .2s ease,
              border-color .2s ease, color .2s ease, filter .2s ease, opacity .2s ease !important;
}

@media (hover: hover) and (pointer: fine) {
  .wp-site-blocks .wp-element-button:hover,
  .wp-site-blocks .wp-block-button__link:hover,
  .tn-news__form .submit-button:hover,
  .tn-form .wpcf7 input[type="submit"]:hover {
    transform: translateY(-2px);
    opacity: 1 !important;
    filter: brightness(1.06);
    box-shadow: 0 10px 24px -10px rgba(17, 23, 63, 0.45);
  }
  /* Los turquesa brillan en su propio color */
  .tn-hero__actions .wp-block-button:not(.tn-btn--ghost) .wp-element-button:hover,
  .tn-cta__actions .wp-block-button:not(.tn-btn--ghost) .wp-element-button:hover,
  .wp-site-blocks > header .tn-header__cta .wp-block-button__link:hover,
  .tn-formacion__actions .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
  .tn-curso__cta .wp-block-button__link:hover,
  .tn-news__form .submit-button:hover,
  .tn-form .wpcf7 input[type="submit"]:hover {
    box-shadow: 0 10px 26px -8px rgba(66, 192, 186, 0.6);
  }
  /* Los de borde se rellenan apenas */
  .tn-btn--ghost .wp-element-button:hover,
  .tn-btn--ghost-dark .wp-block-button__link:hover {
    filter: none;
    background-color: rgba(66, 192, 186, 0.08) !important;
    box-shadow: none;
  }
}

/* Clic: el botón se hunde un instante */
.wp-site-blocks .wp-element-button:active,
.wp-site-blocks .wp-block-button__link:active,
.tn-news__form .submit-button:active,
.tn-form .wpcf7 input[type="submit"]:active {
  transform: translateY(0) scale(0.97);
  filter: brightness(0.97);
  box-shadow: 0 3px 10px -6px rgba(17, 23, 63, 0.4);
  transition-duration: .08s !important;
}

/* Onda que sale desde el punto del clic (la crea team-noia.js) */
.tn-onda {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0);
  background: rgba(255, 255, 255, 0.45);
  animation: tn-onda .6s cubic-bezier(.2, .8, .2, 1) forwards;
  z-index: -1;
}
.tn-btn--ghost .tn-onda,
.tn-btn--ghost-dark .tn-onda { background: rgba(66, 192, 186, 0.3); }
@keyframes tn-onda { to { transform: translate(-50%, -50%) scale(1); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .wp-site-blocks .wp-element-button:hover,
  .wp-site-blocks .wp-block-button__link:hover,
  .wp-site-blocks .wp-element-button:active,
  .wp-site-blocks .wp-block-button__link:active { transform: none; }
  .tn-onda { display: none; }
}

/* Menú de celular abierto: ítems grandes y centrados en la pantalla, no un listado chico arriba */
.wp-site-blocks > header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  min-height: calc(100svh - 7rem);
  padding-top: 3rem !important;
}
.wp-site-blocks > header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  gap: 1.6rem !important;
  align-items: center !important;
  justify-content: center !important;
  padding-bottom: 4rem; /* centro óptico, un poco arriba del centro real */
}
.wp-site-blocks > header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.wp-site-blocks > header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after { display: none; }
.wp-site-blocks > header .wp-block-navigation__responsive-container.is-menu-open .current-menu-item .wp-block-navigation-item__content {
  color: var(--wp--preset--color--accent-1);
}


/* Newsletter: después de suscribirse (doble opt-in, 19/10/2026).
   Doppler muestra la confirmación sacándole la clase _dp_container-hide.
   Se oculta la línea legal y se estiliza el texto que pide revisar el mail. */
.tn-news:has(._dp_container-confirmation:not(._dp_container-hide)) .tn-news__legal {
  display: none;
}

.tn-news__form ._dp_container-confirmation span {
  display: block;
  font-size: 1.05rem !important;
  line-height: 1.6;
  color: var(--wp--preset--color--contrast) !important;
  opacity: 0.74;
  margin-top: 0.6rem;
}


/* Quién está detrás en celular: la foto centrada (19/10/2026).
   El margin:auto de arriba no alcanzaba: el layout flex de WordPress
   pone margin:0 a los hijos con más especificidad. */
@media (max-width: 781px) {
  .tn-quien__grid > .tn-quien__foto {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}


/* Testimonios en celular (19/10/2026): con la máscara de escritorio, en una pantalla
   de 360 px la cita solo se veía nítida en una franja de unos 50 px en el centro.
   En celular, nítida casi a todo el ancho y tarjetas un poco más angostas. */
@media (max-width: 600px) {
  .tn-quotes--row.tn-ticker {
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 9%, #000 91%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 9%, #000 91%, transparent 100%);
  }
  .tn-ticker .tn-quote {
    flex-basis: min(300px, 78vw);
  }
}


/* Suscripción confirmada (19/10/2026): botones con la misma forma que el resto del sitio */
.tn-gracias__title { font-size: clamp(1.6rem, 3vw, 2.1rem); margin: 0 0 1rem; }
.tn-gracias__p { font-size: 1.05rem; line-height: 1.6; opacity: 0.8; margin: 0 0 1.8rem; }
.tn-gracias__botones { gap: 0.8rem; }
.tn-gracias__botones .wp-block-button__link {
  border-radius: 10px;
  padding: 0.85rem 1.6rem;
  font-weight: 700;
}
.tn-gracias__botones .is-style-outline .wp-block-button__link {
  border: 1px solid rgba(17, 23, 63, 0.35);
  color: var(--wp--preset--color--contrast);
  background: transparent;
}


/* 19/10: sombra ovalada detrás del texto del hero (compu). Baja el brillo del atardecer justo detrás
   del título y los botones, sin oscurecer el velero ni los bordes de la foto. Para sacarla, borrar este bloque. */
@media (min-width: 782px) {
  .tn-hero > .tn-hero__inner::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 52%;
    width: min(1050px, 92vw);
    height: 165%;
    transform: translate(-50%, -50%);
    background: radial-gradient(closest-side, rgba(17, 23, 63, 0.34) 0%, rgba(17, 23, 63, 0.22) 50%, rgba(17, 23, 63, 0.08) 80%, rgba(17, 23, 63, 0) 100%);
    pointer-events: none;
    z-index: -1;
  }
}


/* 19/10: "Ver los cursos" en el hero con fondo navy translúcido (sobre el atardecer el borde solo se lavaba). */
.tn-hero .tn-btn--ghost .wp-element-button {
  background-color: rgba(17, 23, 63, 0.2);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-color: rgba(255, 255, 255, 0.4);
}
.tn-hero .tn-btn--ghost .wp-element-button:hover {
  background-color: rgba(17, 23, 63, 0.3) !important;
}

/* 19/10: sombra suave en los dos botones del hero, para despegarlos del cielo */
.tn-hero__actions .wp-element-button {
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.5);
}

/* 19/10: en la grilla de testimonios (Quiénes somos) el layout de WordPress le ponía margen arriba a todas
   las tarjetas menos la primera, y la primera quedaba más alta que la de al lado */
.tn-quotes--grid > .tn-quote { margin-block-start: 0 !important; }