/*!
 * FREDDY ENTRENAMIENTO — sistema visual
 * Cero dependencias. Cero webfonts. Cero peticiones de terceros.
 * Arquitectura: tokens → reset de baja especificidad (:where) → layout → componentes → motion → utilidades
 */

/* ============================== 1. TOKENS ============================== */
:root{
  /* color */
  --color-bg:        #080808;
  --color-surface:   #0d0d0d;
  --color-paper:     #f3f0e8;   /* crema */
  --color-paper-2:   #cfcfc9;   /* crema-gris (sección nutrición) */
  --color-ink:       #f3f0e8;   /* texto sobre negro */
  --color-ink-strong:#ffffff;
  --color-carbon:    #080808;   /* texto sobre crema */
  --color-muted:     #8a8a8a;
  --color-line:      #262626;
  --color-line-soft: #333333;
  --color-accent:    #ff2b16;   /* rojo */
  --color-accent-2:  #b9ff00;   /* verde estado */
  --color-accent-hover: color-mix(in srgb, var(--color-accent) 82%, black);

  /* tipografía — pila de sistema: 0 KB, coincide con la identidad Arial/Helvetica */
  --font-display: Arial, "Helvetica Neue", Helvetica, "Segoe UI", system-ui, sans-serif;
  --font-body: var(--font-display);

  /* escala fluida — clamp(min, preferido, max) */
  --fs-micro:  clamp(.5rem, .48rem + .08vw, .56rem);
  --fs-nano:   clamp(.56rem, .53rem + .1vw, .625rem);
  --fs-body:   clamp(.95rem, .9rem + .2vw, 1.0625rem);
  --fs-lead:   clamp(1rem, .88rem + .5vw, 1.3125rem);
  --fs-quote:  clamp(1.25rem, .95rem + 1.3vw, 2rem);
  --fs-h2:     clamp(1.65rem, .35rem + 6vw, 7.1875rem);
  --fs-h2-proj:clamp(1.55rem, .95rem + 2.6vw, 3.75rem);
  --fs-h2-nov: clamp(1.7rem, .55rem + 5vw, 6.25rem);
  --fs-hero:   clamp(2.5rem, .2rem + 13.5vw, 11.875rem);
  --fs-watermark: clamp(8rem, 1rem + 26vw, 20.625rem);

  --ls-tight: -.02em;
  --ls-hero: -.03em;
  --ls-h2: -.025em;

  /* espaciado fluido */
  --space-3xs: clamp(.3rem,.28rem + .1vw,.4rem);
  --space-2xs: clamp(.5rem,.46rem + .2vw,.65rem);
  --space-xs:  clamp(.75rem,.68rem + .35vw,1rem);
  --space-s:   clamp(1.1rem,1rem + .5vw,1.5rem);
  --space-m:   clamp(1.6rem,1.4rem + 1vw,2.3rem);
  --space-l:   clamp(2.3rem,1.9rem + 2vw,3.5rem);
  --space-xl:  clamp(3.2rem,2.4rem + 4vw,5rem);
  --space-2xl: clamp(4rem,2.8rem + 6vw,6.5rem);

  --radius-full: 999px;
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-brutal: cubic-bezier(.65,0,.35,1);
  --dur-fast: .15s;
  --dur-med: .4s;
  --dur-slow: .7s;

  --max-w: 1200px;
  --gutter: clamp(1rem, 1.5vw + .5rem, 3rem);
}

/* ============================== 2. RESET (:where → especificidad 0) ============================== */
*,*::before,*::after{ box-sizing:border-box; }
:where(html){ -webkit-text-size-adjust:100%; }
:where(body){ margin:0; }
:where(h1,h2,h3,p,figure,ol,ul){ margin:0; padding:0; }
:where(ol,ul){ list-style:none; }
:where(a){ color:inherit; text-decoration:none; }
:where(img,svg){ display:block; max-width:100%; }
:where(button){ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

html{
  scroll-behavior:smooth;
  background:var(--color-bg);
  color-scheme:dark;
}
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
}
body{
  background:#000;
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* foco visible — accesible, consistente con la marca */
:focus-visible{
  outline:3px solid var(--color-accent);
  outline-offset:3px;
}
.skip-link{
  position:fixed; z-index:1000; top:-100%; left:1rem;
  background:var(--color-accent); color:#fff;
  padding:.75em 1.2em; font-weight:900; font-size:var(--fs-nano);
  letter-spacing:.1em; text-transform:uppercase;
  transition:top var(--dur-fast) var(--ease-out);
}
.skip-link:focus{ top:1rem; }

/* ============================== 3. SHELL / LAYOUT ============================== */
.fe-shell{
  max-width:var(--max-w);
  margin-inline:auto;
  background:var(--color-bg);
  color:var(--color-ink);
  overflow:hidden;
  border:1px solid #202020;
  box-shadow:0 35px 120px rgba(0,0,0,.4);
  contain:layout paint;
}

/* barra de progreso — CSS scroll-driven cuando hay soporte; JS solo si no lo hay (ver main.js) */
.fe-progress{
  position:fixed; inset:0 0 auto 0; height:3px; z-index:999;
  background:var(--color-accent);
  transform-origin:0 50%;
  transform:scaleX(0);
  pointer-events:none;
}
@supports (animation-timeline: scroll()){
  .fe-progress{
    animation:fe-scroll-progress auto linear;
    animation-timeline:scroll(root);
  }
  @keyframes fe-scroll-progress{ from{ transform:scaleX(0);} to{ transform:scaleX(1);} }
}
@media (prefers-reduced-motion:reduce){
  .fe-progress{ display:none; }
}

/* ============================== 4. CABECERA + NAV ============================== */
.fe-header{
  height:44px; padding-inline:18px;
  display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid var(--color-line);
  font-size:var(--fs-micro); font-weight:900; letter-spacing:.18em; text-transform:uppercase;
}
.fe-status-dot{
  display:inline-block; width:6px; height:6px; border-radius:50%;
  background:var(--color-accent-2); margin-right:.6em;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--color-accent-2) 25%, transparent);
}
.fe-header__status{ color:var(--color-accent-2); display:flex; align-items:center; }

.fe-nav{
  position:sticky; top:0; z-index:50;
  padding:var(--space-xs) var(--gutter);
  background:color-mix(in srgb, var(--color-surface) 92%, transparent);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  border-bottom:1px solid var(--color-line);
}
@supports not (backdrop-filter: blur(1px)){
  .fe-nav{ background:var(--color-surface); }
}
.fe-nav__inner{ display:flex; flex-wrap:wrap; gap:var(--space-2xs); }
.fe-nav__link{
  padding:.85em 1em; border:1px solid var(--color-line-soft);
  font-size:var(--fs-micro); font-weight:900; letter-spacing:.14em; text-transform:uppercase;
  transition:background-color var(--dur-fast) var(--ease-out),
             color var(--dur-fast) var(--ease-out),
             transform var(--dur-fast) var(--ease-out),
             box-shadow var(--dur-fast) var(--ease-out),
             border-color var(--dur-fast) var(--ease-out);
}
.fe-nav__link.is-active{
  background:var(--color-accent); border-color:var(--color-accent); color:#fff;
}
@media (hover:hover) and (pointer:fine){
  .fe-nav__link:hover{
    background:var(--color-paper); color:var(--color-carbon); border-color:var(--color-paper);
    transform:translate(-3px,-3px); box-shadow:5px 5px 0 var(--color-accent);
  }
}

/* ============================== 5. HERO ============================== */
.fe-hero{
  position:relative; min-height:min(690px, 100svh);
  background:var(--color-paper); color:var(--color-carbon);
  overflow:hidden;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:clamp(2rem,4vw,3.5rem) var(--gutter) var(--space-2xl);
}
.fe-hero__eyebrow{
  position:absolute; left:var(--gutter); top:clamp(1.5rem,3vw,2.5rem);
  font-size:var(--fs-micro); font-weight:900; letter-spacing:.18em; text-transform:uppercase;
}
.fe-hero__mark{ position:absolute; right:var(--gutter); top:clamp(1.5rem,3vw,2.5rem); width:min(110px,14vw); }
.fe-hero__mark circle{ fill:none; stroke:currentColor; stroke-width:1; }
.fe-hero__mark line{ stroke:currentColor; stroke-width:1; }
.fe-hero__side-label{
  position:absolute; right:var(--gutter); top:clamp(9rem,18vw,13rem);
  writing-mode:vertical-rl; font-size:var(--fs-micro); font-weight:900; letter-spacing:.18em;
}
.fe-hero__ring{
  position:absolute; left:-170px; bottom:-210px; width:500px; height:500px;
  border:1px solid rgba(8,8,8,.14); border-radius:50%; pointer-events:none;
}
.fe-hero__disc{
  position:absolute; right:-160px; bottom:-160px; width:470px; height:470px;
  background:var(--color-accent); border-radius:50%; pointer-events:none;
}
.fe-hero__kicker{
  font-size:var(--fs-nano); font-weight:900; letter-spacing:.2em; text-transform:uppercase;
  margin-bottom:var(--space-s); position:relative; z-index:2;
}
.fe-hero h1{
  position:relative; z-index:2;
  font-size:var(--fs-hero); line-height:.68; letter-spacing:var(--ls-hero);
  font-weight:900; text-transform:uppercase;
}
.fe-hero__meta{ position:relative; z-index:2; display:flex; align-items:center; gap:var(--space-2xs); margin-top:var(--space-l); }
.fe-hero__rule{ height:7px; width:70px; background:var(--color-carbon); }
.fe-hero__season{ font-size:var(--fs-nano); font-weight:900; letter-spacing:.12em; }

@media (max-width:640px){
  :root{ --ls-hero:-.01em; }
}

/* ============================== 6. CITA ============================== */
.fe-quote{
  border-bottom:1px solid var(--color-line); min-height:135px;
  container-type:inline-size; container-name:fe-quote;
}
.fe-quote__grid{ display:grid; grid-template-columns:70px 1fr 70px; min-height:135px; }
.fe-quote__side{
  display:flex; align-items:center; justify-content:center;
  font-size:var(--fs-micro); font-weight:900; letter-spacing:.14em; writing-mode:vertical-rl;
  border-inline:1px solid transparent;
}
.fe-quote__side:first-child{ border-right-color:var(--color-line); }
.fe-quote__side:last-child{ border-left-color:var(--color-line); color:#666; }
.fe-quote__body{ padding:var(--space-m) 6%; display:flex; align-items:center; justify-content:center; text-align:center; }
.fe-quote__author{ font-size:var(--fs-micro); color:var(--color-accent); font-weight:900; letter-spacing:.14em; margin-bottom:.7em; }
.fe-quote blockquote{ font-size:var(--fs-quote); font-weight:900; line-height:.95; letter-spacing:-.01em; }
@container fe-quote (max-width:680px){
  .fe-quote__grid{ grid-template-columns:1fr; }
  .fe-quote__side{ display:none; }
}

/* ============================== 7. PROYECTOS ============================== */
.fe-projects{ background:var(--color-bg); border-bottom:1px solid var(--color-line); container-type:inline-size; }
.fe-projects__summary{
  cursor:pointer; padding:var(--space-xl) var(--gutter);
  display:flex; justify-content:space-between; align-items:center;
  list-style:none;
}
.fe-projects__summary::-webkit-details-marker{ display:none; }
.fe-projects__season{ font-size:var(--fs-micro); color:var(--color-accent); font-weight:900; letter-spacing:.12em; margin-bottom:.8em; }
.fe-projects__title{
  font-size:var(--fs-h2-proj); font-weight:900; line-height:.85; letter-spacing:-.02em; text-transform:uppercase;
  display:flex; align-items:center; gap:.5em;
}
.fe-projects__plus{
  display:inline-grid; place-items:center; width:.7em; height:.7em; font-size:.55em;
  transition:transform var(--dur-med) var(--ease-brutal);
}
details[open] .fe-projects__plus{ transform:rotate(45deg); }
.fe-projects__list{ padding:0 var(--gutter) var(--space-xl); border-top:1px solid var(--color-line-soft); }
.fe-project{
  min-height:100px; border-bottom:1px solid var(--color-line-soft);
  display:flex; align-items:center; gap:var(--space-s); padding-block:var(--space-2xs);
}
.fe-project:has(a:focus-visible){ background:color-mix(in srgb, var(--color-accent) 10%, transparent); }
.fe-project__index{ width:2ch; flex:none; color:var(--color-accent); font-size:.8125rem; font-weight:900; }
.fe-project__badge{
  --badge: var(--color-accent);
  width:56px; aspect-ratio:1; flex:none; display:grid; place-items:center;
  background:var(--color-paper); color:var(--badge); border:1px solid var(--color-line-soft);
  font-weight:900; font-size:1.05rem; letter-spacing:0;
  overflow:hidden;
}
.fe-project__badge img{ width:100%; height:100%; object-fit:contain; padding:6px; display:block; }
.fe-project__body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:.35em; justify-content:center; }
.fe-project__org{ font-size:var(--fs-micro); color:var(--color-muted); font-weight:900; letter-spacing:.1em; }
.fe-project__role{
  font-size:clamp(.875rem,.75rem + .8vw,1.375rem); font-weight:900; line-height:.95; text-transform:uppercase;
  text-wrap:balance;
}
.fe-project a{ display:block; }
@container (max-width:480px){
  .fe-project{ flex-wrap:wrap; }
}

/* ============================== 8. MÓDULOS EDITORIALES (Entrenamiento / Nutrición / Psicología) ============================== */
.fe-module{
  position:relative; overflow:hidden; border-bottom:1px solid var(--color-bg);
  min-height:clamp(420px, 62vw, 610px);
  content-visibility:auto; contain-intrinsic-size:610px;
}
.fe-module--light{ background:var(--color-paper); color:var(--color-carbon); }
.fe-module--muted{ background:var(--color-paper-2); color:var(--color-carbon); }
.fe-module--dark{ background:#101010; color:var(--color-ink); border-bottom-color:#292929; }
.fe-module__watermark{
  position:absolute; right:-.5em; top:2vw;
  font-size:var(--fs-watermark); font-weight:900; line-height:.7; letter-spacing:-.09em;
  color:rgba(0,0,0,.06); pointer-events:none; user-select:none;
}
.fe-module--dark .fe-module__watermark{ color:rgba(255,255,255,.06); }
.fe-module__inner{ padding:var(--space-2xl) var(--gutter); position:relative; z-index:2; max-width:46rem; }
.fe-module__mod{ font-size:var(--fs-micro); color:var(--color-accent); font-weight:900; letter-spacing:.18em; margin-bottom:var(--space-s); }
.fe-module h2{ font-size:var(--fs-h2); font-weight:900; letter-spacing:var(--ls-h2); line-height:.78; text-transform:uppercase; }
.fe-module__rule{ display:flex; align-items:center; gap:var(--space-2xs); margin:var(--space-m) 0 var(--space-s); }
.fe-module__rule i{ height:6px; width:100px; background:currentColor; display:block; }
.fe-module p{ font-size:var(--fs-lead); font-weight:800; line-height:1.4; margin-bottom:var(--space-m); max-width:38ch; }
.fe-module--dark p{ color:#ccc; }

/* botones — inversión de color + desplazamiento de sombra, físicos y rápidos */
.fe-btn{
  display:inline-flex; align-items:center; gap:.6em;
  padding:1em 1.6em; font-size:var(--fs-nano); font-weight:900; letter-spacing:.14em; text-transform:uppercase;
  transition:background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out),
             box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.fe-btn svg{ transition:transform var(--dur-fast) var(--ease-out); }
.fe-btn--solid{ background:var(--color-carbon); color:#fff; box-shadow:9px 9px 0 var(--color-accent); }
.fe-btn--outline-dark{ border:3px solid var(--color-carbon); color:var(--color-carbon); }
.fe-btn--outline-light{ border:3px solid var(--color-paper); color:var(--color-paper); }
@media (hover:hover) and (pointer:fine){
  .fe-btn--solid:hover{ background:var(--color-accent); color:var(--color-carbon); box-shadow:4px 4px 0 var(--color-carbon); transform:translate(5px,5px); }
  .fe-btn--outline-dark:hover{ background:var(--color-carbon); color:var(--color-paper); box-shadow:6px 6px 0 var(--color-carbon); transform:translate(-3px,-3px); }
  .fe-btn--outline-light:hover{ background:var(--color-paper); color:var(--color-carbon); box-shadow:6px 6px 0 var(--color-paper); transform:translate(-3px,-3px); }
  .fe-btn:hover svg{ transform:translateX(5px); }
}

/* ============================== 9. NOVEDADES — feed unificado (IG/YouTube/Facebook/TikTok) ============================== */
.fe-editorial{ background:var(--color-accent); color:var(--color-carbon); container-type:inline-size; }
.fe-editorial__head{ padding:var(--space-2xl) var(--gutter) var(--space-m); }
.fe-key__mod{ font-size:var(--fs-micro); font-weight:900; letter-spacing:.18em; margin-bottom:var(--space-s); }
.fe-editorial__head h3{
  font-size:var(--fs-h2-nov); font-weight:900; line-height:.78; letter-spacing:var(--ls-h2); text-transform:uppercase;
}

.fe-feed{ padding:0 var(--gutter) var(--space-2xl); }

/* filtros — grupo de radio-botones (una sola red activa a la vez) */
.fe-feed__filters{ display:flex; flex-wrap:wrap; gap:var(--space-2xs); margin-bottom:var(--space-l); }
.fe-feed__filters[hidden]{ display:none; }
.fe-feed__filter{
  padding:.75em 1.1em; border:1.5px solid var(--color-carbon);
  font-size:var(--fs-micro); font-weight:900; letter-spacing:.12em; text-transform:uppercase;
  background:transparent; color:var(--color-carbon);
  transition:background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.fe-feed__filter.is-active{ background:var(--color-carbon); color:var(--color-paper); }
@media (hover:hover) and (pointer:fine){
  .fe-feed__filter:not(.is-active):hover{ background:rgba(8,8,8,.12); }
}

.fe-feed__status{ font-size:var(--fs-lead); font-weight:800; grid-column:1/-1; }
.fe-feed__status a{ text-decoration:underline; }

/* rejilla fluida — sin media queries: se reacomoda sola al ancho disponible */
.fe-feed__grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,270px),1fr));
  gap:var(--space-s);
}

.fe-feed-card{
  background:var(--color-paper); color:var(--color-carbon);
  display:flex; flex-direction:column; overflow:hidden;
  border:1px solid rgba(8,8,8,.15);
  opacity:0; transform:translateY(16px);
  transition:opacity var(--dur-med) var(--ease-out) calc(var(--reveal-i,0) * 45ms),
             transform var(--dur-med) var(--ease-out) calc(var(--reveal-i,0) * 45ms),
             box-shadow var(--dur-fast) var(--ease-out), translate var(--dur-fast) var(--ease-out);
}
.fe-feed-card.is-visible{ opacity:1; transform:none; }
.fe-feed-card[hidden]{ display:none; }
.fe-feed-card__link{ display:flex; flex-direction:column; flex:1; color:inherit; }
.fe-feed-card__media{
  position:relative; aspect-ratio:4/3; background:#dedad0 center/cover no-repeat; flex:none;
}
.fe-feed-card__media--empty{ display:none; }
.fe-feed-card__play{
  position:absolute; inset:0; display:grid; place-items:center; color:#fff;
  background:linear-gradient(0deg, rgba(0,0,0,.35), transparent 45%);
}
.fe-feed-card__body{ padding:var(--space-s); display:flex; flex-direction:column; gap:.6em; flex:1; }
.fe-feed-card__meta{ display:flex; align-items:center; gap:.6em; font-size:var(--fs-micro); font-weight:900; letter-spacing:.1em; }
.fe-feed-card__platform{ color:var(--color-accent); }
.fe-feed-card__date{ color:var(--color-muted); }
.fe-feed-card__text{ font-size:.9375rem; font-weight:700; line-height:1.4; flex:1; }
.fe-feed-card__cta{
  display:inline-flex; align-items:center; gap:.5em; margin-top:.3em;
  font-size:var(--fs-micro); font-weight:900; letter-spacing:.12em; text-transform:uppercase;
}
.fe-feed-card__cta svg{ transition:transform var(--dur-fast) var(--ease-out); }
@media (hover:hover) and (pointer:fine){
  .fe-feed-card:hover{ box-shadow:6px 6px 0 var(--color-carbon); translate:-4px -4px; }
  .fe-feed-card:hover .fe-feed-card__cta svg{ transform:translateX(4px); }
}
@media (prefers-reduced-motion:reduce){
  .fe-feed-card{ opacity:1; transform:none; }
}

/* ============================== 10. FOOTER ============================== */
.fe-footer{ padding:var(--space-l) var(--gutter); background:var(--color-bg); }
.fe-footer p{
  font-size:var(--fs-micro); color:var(--color-accent); font-weight:900; letter-spacing:.1em;
  display:flex; flex-wrap:wrap; align-items:center; gap:.4em;
}
.fe-footer svg{ opacity:.8; }

/* ============================== 11. REVEAL-ON-SCROLL ============================== */
[data-reveal]{
  opacity:0; transform:translateY(28px);
  transition:opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  transition-delay:calc(var(--reveal-i, 0) * 60ms);
}
[data-reveal].is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  [data-reveal]{ opacity:1; transform:none; transition:none; }
}

/* ============================== 12. CURSOR PERSONALIZADO (solo desktop, sin motion reducido) ==============================
   Retícula bicolor (anillo blanco + punto negro) en vez de mix-blend-mode: sobre el rojo de
   marca (#ff2b16) el contraste de un único color mezclado por "difference" cae a ~2:1 (insuficiente).
   Con dos colores fijos siempre presentes, el peor caso medido (WCAG, sección roja) es 3.74:1 —
   por encima del mínimo de 3:1 para componentes de UI — y en el resto de secciones supera 13:1. */
.fe-cursor{ display:none; }
html.has-fe-cursor{ cursor:none; }
html.has-fe-cursor .fe-cursor{
  display:block; position:fixed; z-index:998; left:0; top:0; pointer-events:none;
  width:14px; height:14px; margin:-7px 0 0 -7px; border-radius:50%;
  border:1.5px solid #fff;
  box-shadow:0 0 0 1px rgba(0,0,0,.55);
  transform:translate3d(var(--x,50vw), var(--y,50vh), 0) scale(var(--fe-cursor-scale,1));
  transition:transform .12s var(--ease-out);
  will-change:transform;
}
html.has-fe-cursor .fe-cursor::after{
  content:""; position:absolute; inset:0; margin:auto;
  width:4px; height:4px; border-radius:50%; background:#000;
  box-shadow:0 0 0 1px rgba(255,255,255,.55);
}
html.has-fe-cursor .fe-cursor.is-active{ --fe-cursor-scale:1.7; }
html.has-fe-cursor a, html.has-fe-cursor button, html.has-fe-cursor summary{ cursor:none; }

/* ============================== 13. VIEW TRANSITIONS (solo mejora la apertura de Proyectos) ============================== */
@media (prefers-reduced-motion:no-preference){
  ::view-transition-old(root),
  ::view-transition-new(root){ animation-duration:.35s; }
}

/* ============================== 13b. ENTRENAMIENTO (overlay embebido de EL MÉTODO) ==============================
   La app de EL MÉTODO vive en Apps Script (Google Sheets como base de datos) y se sirve con
   XFrameOptionsMode.ALLOWALL, así que se puede incrustar en un iframe sin que Google la bloquee.
   Se monta a pantalla completa por encima de todo el sitio: mismo dominio en la barra de
   direcciones, cero salto de contexto para el atleta. */
.fe-training{
  position:fixed; inset:0; z-index:2000;
  display:flex; flex-direction:column;
  background:var(--color-bg);
}
.fe-training[hidden]{ display:none; }
.fe-training__bar{
  flex:0 0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:var(--space-2xs) var(--gutter);
  background:var(--color-surface); border-bottom:1px solid var(--color-line);
}
.fe-training__label{
  font-size:var(--fs-micro); font-weight:900; letter-spacing:.1em; text-transform:uppercase;
  color:var(--color-accent);
}
.fe-training__close{
  display:inline-flex; align-items:center; justify-content:center;
  width:2.25rem; height:2.25rem; padding:0;
  background:transparent; border:1px solid var(--color-line-soft); color:var(--color-ink);
  cursor:pointer; transition:border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.fe-training__close:hover{ border-color:var(--color-accent); color:var(--color-accent); }
.fe-training__frame{
  flex:1 1 auto; width:100%; height:100%; border:0; background:var(--color-paper);
}

/* ============================== 14. VISUALMENTE OCULTO PERO ACCESIBLE ============================== */
.visually-hidden{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}