/* =====================================================================
   FLASH ROBOT · Sistema de diseño "HUD / Centro de mando robótico"
   Marca: rojo #FF1A2E · negro #0a0a0a · amarillo #FFD60A
   Tipografías: League Spartan (display) · Inter (texto) · JetBrains Mono (datos)
   Todo el CSS está acotado bajo .fr-scope para no romper GeneratePress.
   ===================================================================== */

/* ----- Tokens de marca ----- */
:root {
  --fr-black:      #0a0a0a;
  --fr-ink:        #0d0d0d;
  --fr-panel:      #121212;
  --fr-panel-2:    #181818;
  --fr-panel-3:    #1f1f1f;
  --fr-line:       rgba(255,255,255,.08);
  --fr-line-2:     rgba(255,255,255,.16);
  --fr-red:        #FF1A2E;
  --fr-red-2:      #ff4a59;
  --fr-red-deep:   #b00d1c;
  --fr-yellow:     #FFD60A;
  --fr-text:       #f4f4f4;
  --fr-dim:        #9a9a9a;
  --fr-faint:      #606060;
  --fr-glow:       0 0 0 1px var(--fr-red), 0 14px 40px -12px rgba(255,26,46,.55);

  --fr-display: "League Spartan", "Arial Narrow", sans-serif;
  --fr-body:    "Inter", system-ui, -apple-system, sans-serif;
  --fr-mono:    "JetBrains Mono", ui-monospace, "Courier New", monospace;

  --fr-rad: 0px;           /* esquinas rectas: estética técnica */
  --fr-maxw: 1240px;
  --fr-gut: clamp(18px, 4vw, 40px);
}

/* ----- Base acotada ----- */
.fr-scope, .fr-scope * { box-sizing: border-box; }
.fr-scope {
  font-family: var(--fr-body);
  color: var(--fr-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.fr-scope p { margin: 0 0 1em; }
.fr-scope a { color: inherit; text-decoration: none; }
.fr-scope img { max-width: 100%; display: block; }
.fr-scope ::selection { background: var(--fr-red); color: #fff; }

/* Truco de ancho completo dentro del contenedor de GeneratePress */
.fr-bleed {
  /* Full-bleed robusto: se sale del contenedor del tema usando márgenes
     negativos en vez de transform (que fallaba dentro de .fr-canvas). */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  max-width: 100vw;
}

/* Lienzo oscuro reutilizable con textura de rejilla + brillo rojo */
.fr-canvas {
  position: relative;
  background: var(--fr-black);
  overflow: hidden;
  isolation: isolate;
}
.fr-canvas::before {            /* rejilla técnica */
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--fr-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--fr-line) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(120% 90% at 50% -10%, #000 35%, transparent 80%);
          mask-image: radial-gradient(120% 90% at 50% -10%, #000 35%, transparent 80%);
  opacity: .5; z-index: -2;
}
.fr-canvas::after {             /* brillo rojo ambiental */
  content: "";
  position: absolute; top: -30%; left: 50%;
  width: 80vw; height: 80vw; max-width: 1100px; max-height: 1100px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(255,26,46,.22), transparent 60%);
  filter: blur(20px); z-index: -1; pointer-events: none;
}

.fr-wrap { max-width: var(--fr-maxw); margin: 0 auto; padding: 0 var(--fr-gut); }

/* ----- Etiqueta monoespaciada (eyebrow HUD) ----- */
.fr-eyebrow {
  font-family: var(--fr-mono);
  font-size: 12px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--fr-red);
  display: inline-flex; align-items: center; gap: 10px;
}
.fr-eyebrow::before { content: "//"; color: var(--fr-yellow); }

/* Título de sección */
.fr-shead { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 36px; }
.fr-shead h2 {
  font-family: var(--fr-display);
  font-weight: 800;
  font-size: clamp(30px, 5vw, 56px);
  line-height: .92;
  letter-spacing: -.01em;
  text-transform: uppercase;
  margin: 12px 0 0;
}
.fr-shead h2 em { font-style: normal; color: var(--fr-red); }
.fr-count {
  font-family: var(--fr-mono); font-size: 12px; letter-spacing: .12em;
  color: var(--fr-faint); white-space: nowrap; padding-bottom: 4px;
}
.fr-count b { color: var(--fr-text); }

/* =====================================================================
   BOTONES
   ===================================================================== */
.fr-btn {
  --c: var(--fr-red);
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--fr-mono); font-size: 13px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  padding: 15px 26px; cursor: pointer; border: 0;
  background: var(--c); color: #fff; position: relative;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.fr-btn::after { content: "→"; transition: transform .2s ease; }
.fr-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 30px -10px var(--c); }
.fr-btn:hover::after { transform: translateX(4px); }
.fr-btn--ghost {
  background: transparent; color: var(--fr-text);
  box-shadow: inset 0 0 0 1px var(--fr-line-2);
}
.fr-btn--ghost:hover { box-shadow: inset 0 0 0 1px var(--fr-red); color: #fff; }
.fr-btn--yellow { --c: var(--fr-yellow); color: #0a0a0a; }

/* =====================================================================
   HERO
   ===================================================================== */
.fr-hero { padding: clamp(90px, 16vh, 170px) 0 clamp(60px, 10vh, 110px); }
.fr-hero .fr-wrap { position: relative; }

/* marco de esquinas tipo retícula */
.fr-bracket { position: relative; }
.fr-bracket::before, .fr-bracket::after {
  content: ""; position: absolute; width: 26px; height: 26px; pointer-events: none;
}
.fr-bracket::before { top: -10px; left: -10px; border-top: 2px solid var(--fr-red); border-left: 2px solid var(--fr-red); }
.fr-bracket::after  { bottom: -10px; right: -10px; border-bottom: 2px solid var(--fr-red); border-right: 2px solid var(--fr-red); }

.fr-hero h1 {
  font-family: var(--fr-display);
  font-weight: 800;
  font-size: clamp(46px, 11vw, 132px);
  line-height: .86;
  letter-spacing: -.02em;
  text-transform: uppercase;
  margin: 22px 0 0;
}
.fr-hero h1 em { font-style: normal; color: var(--fr-red); position: relative; }
.fr-hero h1 .stroke {
  color: transparent;
  -webkit-text-stroke: 2px var(--fr-line-2);
}
.fr-hero__sub {
  max-width: 560px; color: var(--fr-dim);
  font-size: clamp(15px, 2.1vw, 19px); margin: 26px 0 0;
}
.fr-hero__cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 36px; }

/* línea de telemetría bajo el hero */
.fr-telemetry {
  margin-top: 54px; display: flex; gap: 30px; flex-wrap: wrap;
  padding-top: 22px; border-top: 1px solid var(--fr-line);
  font-family: var(--fr-mono); font-size: 12px; color: var(--fr-faint);
  letter-spacing: .08em;
}
.fr-telemetry span b { color: var(--fr-text); }
.fr-telemetry span i { color: var(--fr-yellow); font-style: normal; }

/* punto de estado en vivo */
.fr-live { display: inline-flex; align-items: center; gap: 8px; color: var(--fr-text); }
.fr-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--fr-red); box-shadow: 0 0 0 0 rgba(255,26,46,.7); animation: fr-pulse 1.8s infinite; }
@keyframes fr-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,26,46,.6); }
  70%  { box-shadow: 0 0 0 8px rgba(255,26,46,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,26,46,0); }
}

/* =====================================================================
   TICKER / MARQUEE
   ===================================================================== */
.fr-ticker {
  background: var(--fr-red); color: #fff; overflow: hidden;
  border-top: 1px solid rgba(0,0,0,.25); border-bottom: 1px solid rgba(0,0,0,.25);
  padding: 13px 0;
}
.fr-ticker__track {
  display: inline-flex; white-space: nowrap; gap: 0;
  animation: fr-marquee 38s linear infinite;
  will-change: transform;
}
.fr-ticker:hover .fr-ticker__track { animation-play-state: paused; }
.fr-ticker__track span {
  font-family: var(--fr-mono); font-size: 13px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; padding: 0 26px;
  display: inline-flex; align-items: center; gap: 26px;
}
.fr-ticker__track span::after { content: "◢"; color: rgba(255,255,255,.55); }
@keyframes fr-marquee { to { transform: translateX(-50%); } }

/* =====================================================================
   REJILLA DE TARJETAS (común)
   ===================================================================== */
.fr-grid { display: grid; gap: 20px; }
.fr-grid--3 { grid-template-columns: repeat(3, 1fr); }
.fr-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px){ .fr-grid--3, .fr-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .fr-grid--3, .fr-grid--4 { grid-template-columns: 1fr; } }

/* tarjeta base con corchetes de retícula */
.fr-card {
  position: relative; background: var(--fr-panel);
  border: 1px solid var(--fr-line); overflow: hidden;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.fr-card::before, .fr-card::after {
  content: ""; position: absolute; width: 14px; height: 14px; z-index: 3;
  opacity: 0; transition: opacity .25s ease;
}
.fr-card::before { top: 8px; left: 8px; border-top: 2px solid var(--fr-red); border-left: 2px solid var(--fr-red); }
.fr-card::after  { bottom: 8px; right: 8px; border-bottom: 2px solid var(--fr-red); border-right: 2px solid var(--fr-red); }
.fr-card:hover { transform: translateY(-5px); border-color: rgba(255,26,46,.55); box-shadow: 0 22px 50px -22px rgba(255,26,46,.55); }
.fr-card:hover::before, .fr-card:hover::after { opacity: 1; }

/* ----- Tarjeta de ROBOT ----- */
.fr-robot__media {
  position: relative; aspect-ratio: 4/3; background: var(--fr-panel-2);
  overflow: hidden;
}
.fr-robot__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.fr-card:hover .fr-robot__media img { transform: scale(1.06); }
.fr-robot__media .fr-noimg {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--fr-faint); font-family: var(--fr-mono); font-size: 30px;
  background:
    repeating-linear-gradient(45deg, transparent 0 18px, rgba(255,255,255,.02) 18px 19px);
}
.fr-tag {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  font-family: var(--fr-mono); font-size: 10px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  background: var(--fr-yellow); color: #0a0a0a; padding: 5px 9px;
}
.fr-robot__body { padding: 18px 18px 20px; }
.fr-robot__body h3 {
  font-family: var(--fr-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(20px, 2.4vw, 26px); line-height: .98; margin: 0 0 6px;
  letter-spacing: -.005em;
}
.fr-robot__maker { color: var(--fr-dim); font-size: 14px; margin: 0 0 16px; }
.fr-robot__meta {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding-top: 13px; border-top: 1px solid var(--fr-line);
  font-family: var(--fr-mono); font-size: 11px; letter-spacing: .08em; color: var(--fr-faint);
}
.fr-status { display: inline-flex; align-items: center; gap: 7px; color: var(--fr-text); text-transform: uppercase; }
.fr-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--fr-dim); }
.fr-status[data-s="comercial"]::before  { background: #2ec27e; }
.fr-status[data-s="desarrollo"]::before  { background: var(--fr-yellow); }
.fr-status[data-s="prototipo"]::before   { background: var(--fr-red); }
.fr-status[data-s="concepto"]::before    { background: #8a8aff; }

/* ----- Filtros de tipo ----- */
.fr-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 26px; }
.fr-chip {
  font-family: var(--fr-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  padding: 9px 15px; background: var(--fr-panel); color: var(--fr-dim);
  border: 1px solid var(--fr-line); cursor: pointer; transition: all .18s ease;
}
.fr-chip:hover { color: var(--fr-text); border-color: var(--fr-line-2); }
.fr-chip.is-active { background: var(--fr-red); color: #fff; border-color: var(--fr-red); }

/* ----- Tarjeta de EPISODIO ----- */
.fr-ep { cursor: pointer; }
.fr-ep__thumb { position: relative; aspect-ratio: 16/9; background: #000; overflow: hidden; }
.fr-ep__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease, opacity .3s ease; }
.fr-card:hover .fr-ep__thumb img { transform: scale(1.05); }
.fr-ep__thumb::after {        /* degradado inferior */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,10,10,.85), transparent 55%);
}
.fr-ep__num {
  position: absolute; top: 12px; left: 12px; z-index: 3;
  font-family: var(--fr-mono); font-weight: 700; font-size: 11px; letter-spacing: .12em;
  background: var(--fr-red); color: #fff; padding: 5px 10px;
}
.fr-ep__dur {
  position: absolute; bottom: 12px; right: 12px; z-index: 3;
  font-family: var(--fr-mono); font-size: 11px; color: #fff;
  background: rgba(0,0,0,.7); padding: 4px 8px; letter-spacing: .06em;
}
.fr-play {
  position: absolute; inset: 0; display: grid; place-items: center; z-index: 3;
}
.fr-play span {
  width: 64px; height: 64px; border-radius: 50%;
  background: rgba(255,26,46,.92); display: grid; place-items: center;
  box-shadow: 0 10px 30px -8px rgba(255,26,46,.8);
  transition: transform .25s ease, background .25s ease;
}
.fr-play span::before {
  content: ""; width: 0; height: 0; margin-left: 5px;
  border-left: 18px solid #fff; border-top: 11px solid transparent; border-bottom: 11px solid transparent;
}
.fr-card:hover .fr-play span { transform: scale(1.12); background: var(--fr-red); }
.fr-ep__body { padding: 18px; }
.fr-ep__body h3 {
  font-family: var(--fr-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(18px, 2.1vw, 23px); line-height: 1; margin: 0 0 10px;
}
.fr-ep__body p { color: var(--fr-dim); font-size: 14px; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* =====================================================================
   FRANJA DE ESTADÍSTICAS
   ===================================================================== */
.fr-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--fr-line); border: 1px solid var(--fr-line); }
@media (max-width: 700px){ .fr-stats { grid-template-columns: repeat(2, 1fr); } }
.fr-stat { background: var(--fr-black); padding: 30px 24px; }
.fr-stat .n { font-family: var(--fr-display); font-weight: 800; font-size: clamp(34px, 5vw, 56px); line-height: 1; color: var(--fr-red); }
.fr-stat .l { font-family: var(--fr-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--fr-faint); margin-top: 10px; }

/* =====================================================================
   CTA DE YOUTUBE
   ===================================================================== */
.fr-cta { text-align: center; padding: clamp(70px, 12vh, 120px) 0; }
.fr-cta h2 {
  font-family: var(--fr-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(34px, 7vw, 78px); line-height: .9; margin: 18px auto 0; max-width: 14ch;
}
.fr-cta h2 em { font-style: normal; color: var(--fr-red); }
.fr-cta p { color: var(--fr-dim); max-width: 480px; margin: 22px auto 32px; }

/* =====================================================================
   PLANTILLAS SINGLE (robot / episodio)
   ===================================================================== */
.fr-single { background: var(--fr-black); color: var(--fr-text); }
.fr-back {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--fr-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--fr-dim); margin-bottom: 30px; transition: color .18s ease;
}
.fr-back::before { content: "←"; }
.fr-back:hover { color: var(--fr-red); }

.fr-rhero { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: start; padding-top: 50px; }
@media (max-width: 900px){ .fr-rhero { grid-template-columns: 1fr; } }
.fr-rhero__img { aspect-ratio: 4/3; background: var(--fr-panel-2); overflow: hidden; border: 1px solid var(--fr-line); }
.fr-rhero__img img { width: 100%; height: 100%; object-fit: cover; }
.fr-rhero__img .fr-noimg { position: relative; inset: auto; }
.fr-rhero h1 {
  font-family: var(--fr-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(40px, 7vw, 84px); line-height: .85; letter-spacing: -.02em; margin: 16px 0 0;
}
.fr-rhero__maker { color: var(--fr-dim); font-size: 17px; margin: 16px 0 0; }
.fr-rhero__badges { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 24px; }

/* hoja de especificaciones */
.fr-specs {
  margin-top: 30px; border: 1px solid var(--fr-line);
}
.fr-specs__head {
  font-family: var(--fr-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--fr-red); padding: 12px 16px; border-bottom: 1px solid var(--fr-line);
  background: var(--fr-panel); display: flex; justify-content: space-between;
}
.fr-specs__head span { color: var(--fr-faint); }
.fr-spec {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 13px 16px; border-bottom: 1px solid var(--fr-line);
  font-family: var(--fr-mono); font-size: 13px;
}
.fr-spec:last-child { border-bottom: 0; }
.fr-spec .k { color: var(--fr-faint); letter-spacing: .08em; text-transform: uppercase; font-size: 11px; }
.fr-spec .v { color: var(--fr-text); text-align: right; }

.fr-prose { max-width: 760px; margin: clamp(40px,7vw,72px) 0 0; font-size: 17px; color: #d8d8d8; }
.fr-prose h2, .fr-prose h3 { font-family: var(--fr-display); text-transform: uppercase; color: #fff; letter-spacing: -.01em; }
.fr-prose h2 { font-size: 30px; margin: 1.4em 0 .5em; }
.fr-prose a { color: var(--fr-red); text-decoration: underline; text-underline-offset: 3px; }
.fr-prose img { margin: 1.6em 0; border: 1px solid var(--fr-line); }
.fr-prose ul, .fr-prose ol { padding-left: 1.2em; }
.fr-prose li { margin: .4em 0; }

/* episodio single: vídeo */
.fr-video { position: relative; aspect-ratio: 16/9; background: #000; border: 1px solid var(--fr-line); margin-top: 30px; }
.fr-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* divisor de sección */
.fr-divider {
  display: flex; align-items: center; gap: 16px; margin: clamp(48px,8vw,80px) 0 30px;
  font-family: var(--fr-mono); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--fr-faint);
}
.fr-divider::before { content: ""; width: 28px; height: 2px; background: var(--fr-red); }
.fr-divider::after  { content: ""; flex: 1; height: 1px; background: var(--fr-line); }

/* =====================================================================
   LIGHTBOX DE VÍDEO
   ===================================================================== */
.fr-modal {
  position: fixed; inset: 0; z-index: 99999; display: none;
  background: rgba(5,5,5,.92); backdrop-filter: blur(6px);
  padding: var(--fr-gut);
}
.fr-modal.is-open { display: grid; place-items: center; animation: fr-fade .2s ease; }
@keyframes fr-fade { from { opacity: 0; } }
.fr-modal__box { width: min(960px, 100%); }
.fr-modal__bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.fr-modal__bar b { font-family: var(--fr-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--fr-red); }
.fr-modal__close {
  background: none; border: 1px solid var(--fr-line-2); color: #fff; cursor: pointer;
  font-family: var(--fr-mono); font-size: 12px; letter-spacing: .1em; padding: 8px 14px;
  text-transform: uppercase; transition: all .18s ease;
}
.fr-modal__close:hover { background: var(--fr-red); border-color: var(--fr-red); }
.fr-modal__video { position: relative; aspect-ratio: 16/9; background: #000; border: 1px solid var(--fr-line-2); }
.fr-modal__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* =====================================================================
   ESTADO VACÍO
   ===================================================================== */
.fr-empty {
  border: 1px dashed var(--fr-line-2); padding: 50px 24px; text-align: center;
  color: var(--fr-faint); font-family: var(--fr-mono); font-size: 13px; letter-spacing: .08em;
}
.fr-empty b { color: var(--fr-text); display: block; font-size: 15px; margin-bottom: 8px; letter-spacing: .12em; text-transform: uppercase; }

/* =====================================================================
   REVELADO AL SCROLL
   ===================================================================== */
.fr-reveal {
  opacity: 0; transform: translateY(24px); filter: blur(7px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.16,1,.3,1), filter .7s ease;
}
.fr-reveal--zoom  { transform: translateY(18px) scale(.94); }
.fr-reveal--left  { transform: translateX(-36px); }
.fr-reveal--right { transform: translateX(36px); }
.fr-reveal.is-in  { opacity: 1; transform: none; filter: none; }
@media (prefers-reduced-motion: reduce) {
  .fr-reveal, .fr-reveal--zoom, .fr-reveal--left, .fr-reveal--right {
    opacity: 1; transform: none; filter: none; transition: none;
  }
  .fr-dot, .fr-ticker__track { animation: none; }
}

/* Ajustes para que el contenido a pantalla completa no choque con GeneratePress */
.fr-scope section { margin: 0; }
.fr-section { padding: clamp(64px, 10vh, 110px) 0; }
.fr-section--tight { padding: clamp(44px, 7vh, 80px) 0; }

/* Título grande para fichas/episodios sueltos */
.fr-page-title {
  font-family: var(--fr-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(40px, 7vw, 84px); line-height: .86; letter-spacing: -.02em; margin: 14px 0 0;
}
.fr-page-title em { font-style: normal; color: var(--fr-red); }
.fr-meta-row {
  display: flex; gap: 22px; flex-wrap: wrap; margin-top: 18px;
  font-family: var(--fr-mono); font-size: 12px; letter-spacing: .1em; color: var(--fr-faint);
}
.fr-meta-row b { color: var(--fr-text); }

/* =====================================================================
   Neutralizar el contenedor de GeneratePress en páginas/fichas Flash Robot
   (para que las secciones a pantalla completa respiren bien)
   ===================================================================== */
body.fr-page { background: var(--fr-black); }

/* Neutralizar TODOS los contenedores que limitan el ancho (GeneratePress,
   theme.json, bloques). Es la causa de que el hero se viera estrecho:
   muchos temas aplican `.entry-content > * { max-width: <content-size> }`. */
body.fr-page .grid-container,
body.fr-page .site-content .grid-container,
body.fr-page .container,
body.fr-page .content-area,
body.fr-page .site-main,
body.fr-page .inside-article,
body.fr-page .entry-content,
body.fr-page .page-content {
  max-width: 100% !important;
  width: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
body.fr-page .entry-content > *,
body.fr-page .page-content > * {
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
body.fr-page .site-content { padding: 0 !important; }
body.fr-page .entry-content,
body.fr-page .page-content { margin-top: 0; }
body.fr-page .inside-article { border: 0; }
body.fr-page .entry-content > *:first-child { margin-top: 0; }
/* Ocultamos el título por defecto de WordPress: el hero / la cabecera de sección ya manda */
body.fr-page .entry-header,
body.fr-page .page-header,
body.fr-page header.entry-header { display: none; }
body.fr-page .entry-content > p:empty { display: none; }

/* v1.2.3 · Sin blancos: los contenedores del tema pueden traer fondo blanco y
   tapar el oscuro en los huecos (arriba, abajo y entre bloques). Los hacemos
   transparentes para que se vea el fondo oscuro del body, y quitamos
   separaciones verticales entre bloques. */
body.fr-page #page,
body.fr-page .site,
body.fr-page #content,
body.fr-page .site-content,
body.fr-page .content-area,
body.fr-page .site-main,
body.fr-page article,
body.fr-page .inside-article,
body.fr-page .entry,
body.fr-page .entry-content,
body.fr-page .page-content,
body.fr-page .entry-content > *,
body.fr-page .page-content > * {
  background: transparent !important;
  box-shadow: none !important;
}
body.fr-page .entry-content > *,
body.fr-page .page-content > * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
body.fr-page .site-content,
body.fr-page #content,
body.fr-page .content-area,
body.fr-page .site-main { padding-top: 0 !important; padding-bottom: 0 !important; }

/* =====================================================================
   v1.1 · Entorno cerrado: archivo de categoría, 404, búsqueda,
   pie de marca, aviso de cookies y reproductor "click para cargar".
   ===================================================================== */

/* ----- Cabecera de archivo (categoría de robot) ----- */
.fr-archive { padding: clamp(48px,8vw,96px) 0 clamp(28px,5vw,52px); }
.fr-archive .fr-eyebrow { margin-bottom: 14px; }
.fr-archive__title { font-family: var(--fr-display); font-weight: 900; text-transform: uppercase;
  line-height: .9; letter-spacing: -.02em; color: #fff; font-size: clamp(40px,8vw,92px); margin: 0; }
.fr-archive__title em { font-style: normal; color: var(--fr-red); }
.fr-archive__desc { color: var(--fr-dim); max-width: 620px; margin: 18px 0 0; font-size: 16px; }
.fr-archive__count { font-family: var(--fr-mono); color: var(--fr-faint); font-size: 12.5px;
  letter-spacing: .14em; text-transform: uppercase; margin-top: 16px; }
.fr-typebar { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 4px; }

/* ----- 404 ----- */
.fr-404 { min-height: 72vh; display: flex; align-items: center; }
.fr-404__inner { width: 100%; text-align: center; padding: clamp(40px,8vw,90px) 0; }
.fr-404__code { font-family: var(--fr-display); font-weight: 900; line-height: .82;
  font-size: clamp(110px,26vw,300px); letter-spacing: -.03em; margin: 0;
  color: transparent; -webkit-text-stroke: 2px var(--fr-red-deep);
  text-shadow: 0 0 60px rgba(255,26,46,.35); position: relative; }
.fr-404__code span { position: absolute; inset: 0; color: var(--fr-red);
  -webkit-text-stroke: 0; clip-path: inset(44% 0 44% 0); animation: fr-glitch 3.2s steps(2) infinite; }
@keyframes fr-glitch { 0%,92%,100% { transform: translateX(0); opacity:.0; }
  93% { transform: translateX(-4px); opacity:.9; } 96% { transform: translateX(5px); opacity:.7; } }
.fr-404__msg { font-family: var(--fr-mono); color: var(--fr-yellow); letter-spacing: .18em;
  text-transform: uppercase; font-size: 13px; margin: 8px 0 6px; }
.fr-404 h1 { font-family: var(--fr-display); text-transform: uppercase; color:#fff;
  font-size: clamp(26px,5vw,46px); letter-spacing: -.01em; margin: 0 0 14px; line-height: 1; }
.fr-404 p { color: var(--fr-dim); max-width: 460px; margin: 0 auto 26px; }
.fr-404__btns { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* ----- Buscador / resultados ----- */
.fr-searchbox { display: flex; gap: 10px; max-width: 520px; margin: 22px auto 0; }
.fr-searchbox input[type=search], .fr-searchbox input[type=text] {
  flex: 1; background: var(--fr-panel-2); border: 1px solid var(--fr-line-2); color: #fff;
  font-family: var(--fr-mono); font-size: 14px; padding: 13px 16px; border-radius: 0; outline: none; }
.fr-searchbox input::placeholder { color: var(--fr-faint); }
.fr-searchbox input:focus { border-color: var(--fr-red); box-shadow: 0 0 0 1px var(--fr-red); }
.fr-results { display: grid; gap: 14px; margin: 30px 0 0; }
.fr-result { display: block; border: 1px solid var(--fr-line); background: var(--fr-panel);
  padding: 20px 22px; transition: border-color .2s, transform .2s; }
.fr-result:hover { border-color: var(--fr-red); transform: translateX(4px); }
.fr-result__kind { font-family: var(--fr-mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--fr-red); }
.fr-result h3 { font-family: var(--fr-display); text-transform: uppercase; color: #fff;
  margin: 6px 0 6px; font-size: 22px; line-height: 1; }
.fr-result p { color: var(--fr-dim); font-size: 14.5px; margin: 0; }

/* ----- Pie de página de marca (global) ----- */
body.fr-site .site-footer,
body.fr-site footer.site-info { display: none !important; }  /* un solo pie, coherente */
.fr-footer { background: #050505; border-top: 1px solid var(--fr-line-2);
  position: relative; overflow: hidden; }
.fr-footer::before { content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(60% 120% at 80% 0%, rgba(255,26,46,.10), transparent 60%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0 1px, transparent 1px 28px); }
.fr-footer__in { position: relative; max-width: var(--fr-maxw); margin: 0 auto;
  padding: clamp(40px,6vw,64px) var(--fr-gut) 30px; }
.fr-footer__top { display: flex; flex-wrap: wrap; gap: 30px 60px; justify-content: space-between; }
.fr-footer__brand { max-width: 320px; }
.fr-footer__logo { font-family: var(--fr-display); font-weight: 900; text-transform: uppercase;
  font-size: 26px; color: #fff; letter-spacing: -.01em; display: inline-flex; align-items: center; gap: 10px; }
.fr-footer__logo b { width: 11px; height: 11px; background: var(--fr-red);
  display: inline-block; box-shadow: 0 0 12px var(--fr-red); }
.fr-footer__brand p { color: var(--fr-faint); font-size: 13.5px; margin: 12px 0 0; }
.fr-footer__cols { display: flex; gap: 50px; flex-wrap: wrap; }
.fr-footer__col h4 { font-family: var(--fr-mono); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--fr-faint); margin: 0 0 14px; }
.fr-footer__col a { display: block; color: var(--fr-dim); text-decoration: none;
  font-size: 14px; margin: 9px 0; transition: color .15s; }
.fr-footer__col a:hover { color: var(--fr-red); }
.fr-footer__bar { margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--fr-line);
  display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: space-between;
  font-family: var(--fr-mono); font-size: 11.5px; letter-spacing: .08em; color: var(--fr-faint); }
.fr-footer__bar .fr-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--fr-red); margin-right: 7px; box-shadow: 0 0 8px var(--fr-red);
  animation: fr-pulse 2s infinite; vertical-align: middle; }

/* ----- Aviso de cookies (banner mínimo) ----- */
.fr-cookie { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 9000;
  max-width: 560px; margin: 0 auto; background: var(--fr-panel-2);
  border: 1px solid var(--fr-red); box-shadow: 0 20px 60px -20px rgba(0,0,0,.8);
  padding: 18px 20px; display: none; }
.fr-cookie.is-show { display: block; animation: fr-cookie-in .35s ease both; }
@keyframes fr-cookie-in { from { transform: translateY(16px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.fr-cookie p { margin: 0 0 14px; color: var(--fr-dim); font-size: 13.5px; line-height: 1.55; }
.fr-cookie a { color: var(--fr-red); text-decoration: underline; text-underline-offset: 2px; }
.fr-cookie__row { display: flex; gap: 10px; flex-wrap: wrap; }
.fr-cookie__row .fr-btn { padding: 10px 18px; font-size: 12px; }

/* ----- Reproductor "click para cargar" en la ficha de episodio ----- */
.fr-video.fr-ytfacade { cursor: pointer; }
.fr-video.fr-ytfacade img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fr-video.fr-ytfacade::after { content: ""; position: absolute; inset: 0;
  background: radial-gradient(60% 60% at 50% 50%, rgba(0,0,0,.15), rgba(0,0,0,.55)); }
.fr-video__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 78px; height: 78px; border-radius: 50%; background: var(--fr-red); z-index: 2;
  display: grid; place-items: center; box-shadow: 0 0 0 10px rgba(255,26,46,.18), 0 14px 40px -10px rgba(255,26,46,.6);
  transition: transform .2s; }
.fr-video.fr-ytfacade:hover .fr-video__play { transform: translate(-50%,-50%) scale(1.08); }
.fr-video__play::before { content: ""; border-style: solid; border-width: 14px 0 14px 22px;
  border-color: transparent transparent transparent #fff; margin-left: 5px; }
.fr-video__hint { position: absolute; left: 14px; bottom: 12px; z-index: 2;
  font-family: var(--fr-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: #fff; background: rgba(0,0,0,.55); padding: 5px 9px; border: 1px solid var(--fr-line-2); }

@media (max-width: 640px) {
  .fr-footer__top { gap: 26px; }
  .fr-footer__cols { gap: 30px; }
}

/* =====================================================================
   v1.2 · Cabecera y menú de GeneratePress en oscuro (coherencia de marca)
   Se aplica en todo el sitio para que el header combine con el diseño.
   ===================================================================== */
.site-header,
.site-header.is-sticky,
#masthead {
  background-color: var(--fr-black) !important;
  border-bottom: 1px solid var(--fr-line);
}
.site-header .inside-header { padding-top: 14px; padding-bottom: 14px; }

/* Título / logo del sitio */
.site-title a,
.main-title a,
.site-branding-text .main-title a {
  color: #fff !important;
  font-family: var(--fr-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -.01em;
}
.site-description { color: var(--fr-faint) !important; font-family: var(--fr-mono); }

/* Menú principal */
.main-navigation,
.main-navigation.is-sticky,
.main-navigation ul {
  background-color: var(--fr-black) !important;
}
.main-navigation .main-nav ul li a,
.main-navigation a {
  color: #d8d8d8 !important;
  font-family: var(--fr-mono);
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li.current-menu-item > a,
.main-navigation .main-nav ul li[class*="current-menu"] > a {
  color: var(--fr-red) !important;
}
/* Submenús */
.main-navigation ul ul {
  background-color: var(--fr-panel) !important;
  border: 1px solid var(--fr-line);
}
.main-navigation ul ul li a { color: #cfcfcf !important; }

/* Botón de menú en móvil */
.menu-toggle,
.menu-toggle:hover,
.main-navigation .menu-toggle {
  color: #fff !important;
  background-color: var(--fr-black) !important;
}
button.menu-toggle .gp-icon { color: #fff; }

/* Barra superior (si el tema la usa) */
.top-bar { background-color: #050505 !important; color: var(--fr-faint) !important; }

/* =====================================================================
   v1.2.1 · Componente FICHA embebible (.fr-ficha)
   Pensado para pegar SOLO el HTML (con clases .fr-ficha / .ff-*) en un
   bloque "HTML personalizado". El estilo y las animaciones los pone el
   plugin. Todo va acotado bajo .fr-ficha para no chocar con nada.
   ===================================================================== */
.fr-ficha{
  position:relative; background:var(--fr-black); color:var(--fr-text);
  font-family:var(--fr-body); line-height:1.6;
  margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); max-width:100vw;
  overflow:hidden; -webkit-font-smoothing:antialiased;
}
.fr-ficha *{box-sizing:border-box}
.fr-ficha::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(var(--fr-line) 1px,transparent 1px),linear-gradient(90deg,var(--fr-line) 1px,transparent 1px);
  background-size:46px 46px;-webkit-mask-image:radial-gradient(130% 60% at 50% 0%,#000 30%,transparent 80%);
  mask-image:radial-gradient(130% 60% at 50% 0%,#000 30%,transparent 80%);opacity:.4}
.fr-ficha a{color:inherit;text-decoration:none}
.fr-ficha img,.fr-ficha svg{max-width:100%;display:block}
.fr-ficha .ff-wrap{max-width:1180px;margin:0 auto;padding:0 clamp(18px,4vw,40px);position:relative;z-index:1}
.fr-ficha .ff-eyebrow{font-family:var(--fr-mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--fr-red);display:inline-flex;gap:8px}
.fr-ficha .ff-eyebrow::before{content:"//";color:var(--fr-faint)}

/* Animación al scroll (si hay JS); sin JS, todo visible */
.fr-ficha .ff-rv{opacity:1}
.fr-ficha.is-js .ff-rv{opacity:0;transform:translateY(20px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.fr-ficha.is-js .ff-rv.in{opacity:1;transform:none}

/* Hero */
.fr-ficha .ff-hero{padding:clamp(48px,9vw,96px) 0 clamp(34px,5vw,56px)}
.fr-ficha .ff-hgrid{display:grid;grid-template-columns:1.3fr .9fr;gap:40px;align-items:center}
.fr-ficha .ff-hero h1{font-family:var(--fr-display);font-weight:900;text-transform:uppercase;line-height:.86;letter-spacing:-.02em;font-size:clamp(52px,11vw,128px);margin:.16em 0 .12em;color:#fff}
.fr-ficha .ff-hero h1 em{font-style:normal;color:var(--fr-red)}
.fr-ficha .ff-sub{color:var(--fr-dim);font-size:clamp(16px,2vw,20px);max-width:520px}
.fr-ficha .ff-badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.fr-ficha .ff-badge{font-family:var(--fr-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--fr-line-2);padding:8px 13px;color:#dcdcdc;background:var(--fr-panel)}
.fr-ficha .ff-badge.live{color:#7CFFB0;border-color:rgba(124,255,176,.4)}
.fr-ficha .ff-badge .d{width:7px;height:7px;border-radius:50%;background:#7CFFB0;display:inline-block;margin-right:7px;vertical-align:middle}
.fr-ficha .ff-figure{position:relative;border:1px solid var(--fr-line);background:linear-gradient(180deg,var(--fr-panel),#0c0c0c);padding:18px;display:grid;place-items:center;overflow:hidden;min-height:360px;aspect-ratio:4/5;max-height:560px}
.fr-ficha .ff-figure img{width:100%;height:100%;object-fit:contain;display:block}
.fr-ficha .ff-figure svg{max-height:100%;width:auto}
.fr-ficha .ff-figure .c{position:absolute;width:18px;height:18px;border:2px solid var(--fr-red)}
.fr-ficha .ff-figure .c.tl{top:10px;left:10px;border-right:0;border-bottom:0}
.fr-ficha .ff-figure .c.br{bottom:10px;right:10px;border-left:0;border-top:0}
.fr-ficha .ff-dot{transition:.2s}
.fr-ficha .ff-dot.on{filter:drop-shadow(0 0 6px var(--fr-red))}

/* Secciones */
.fr-ficha .ff-section{padding:clamp(48px,8vw,96px) 0;border-top:1px solid var(--fr-line)}
.fr-ficha .ff-shead{margin-bottom:34px}
.fr-ficha .ff-shead h2{font-family:var(--fr-display);font-weight:900;text-transform:uppercase;letter-spacing:-.01em;font-size:clamp(28px,5vw,52px);line-height:.95;margin:.16em 0 0;color:#fff}
.fr-ficha .ff-shead h2 em{font-style:normal;color:var(--fr-red)}
.fr-ficha .ff-lead{color:#d2d2d2;font-size:clamp(16px,2vw,19px);max-width:760px}
.fr-ficha .ff-lead strong{color:#fff}

/* Cifras */
.fr-ficha .ff-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--fr-line);border:1px solid var(--fr-line)}
.fr-ficha .ff-stat{background:var(--fr-panel);padding:24px 20px}
.fr-ficha .ff-stat .n{font-family:var(--fr-display);font-weight:900;color:#fff;font-size:clamp(30px,4.5vw,48px);line-height:1;letter-spacing:-.01em}
.fr-ficha .ff-stat .n .u{font-size:.42em;color:var(--fr-red);margin-left:5px}
.fr-ficha .ff-stat .l{font-family:var(--fr-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--fr-dim);margin-top:9px}

/* Tablas */
.fr-ficha .ff-specgrid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.fr-ficha .ff-table{border:1px solid var(--fr-line);background:var(--fr-panel)}
.fr-ficha .ff-table h3{font-family:var(--fr-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--fr-yellow);margin:0;padding:15px 18px;border-bottom:1px solid var(--fr-line);background:var(--fr-panel-2)}
.fr-ficha .ff-row{display:grid;grid-template-columns:1fr auto;gap:14px;padding:12px 18px;border-bottom:1px solid var(--fr-line);font-size:14.5px}
.fr-ficha .ff-row:last-child{border-bottom:0}
.fr-ficha .ff-row .k{color:var(--fr-dim)}
.fr-ficha .ff-row .v{color:#fff;text-align:right}
.fr-ficha .ff-row .v small{color:var(--fr-faint);font-family:var(--fr-mono);font-size:11px}
.fr-ficha .ff-note{font-family:var(--fr-mono);font-size:11px;color:var(--fr-faint);margin:14px 0 0;letter-spacing:.03em;line-height:1.7}

/* Anatomía */
.fr-ficha .ff-ana{display:grid;grid-template-columns:1fr 360px 1fr;gap:20px;align-items:center}
.fr-ficha .ff-col{display:flex;flex-direction:column;gap:14px}
.fr-ficha .ff-callout{border:1px solid var(--fr-line);background:var(--fr-panel);padding:15px 16px;transition:.2s;position:relative}
.fr-ficha .ff-callout:hover{border-color:var(--fr-red);transform:translateY(-2px)}
.fr-ficha .ff-callout .num{font-family:var(--fr-mono);font-size:11px;color:#0a0a0a;background:var(--fr-red);width:22px;height:22px;display:inline-grid;place-items:center;font-weight:600;position:absolute;top:-10px;left:14px}
.fr-ficha .ff-callout h4{font-family:var(--fr-display);text-transform:uppercase;color:#fff;margin:6px 0 4px;font-size:17px}
.fr-ficha .ff-callout p{margin:0;color:var(--fr-dim);font-size:13px}
.fr-ficha .ff-anafig{border:1px solid var(--fr-line);background:linear-gradient(180deg,var(--fr-panel),#0b0b0b);padding:18px}

/* Capacidades */
.fr-ficha .ff-caps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.fr-ficha .ff-cap{border:1px solid var(--fr-line);background:var(--fr-panel);padding:22px}
.fr-ficha .ff-cap .ic{font-family:var(--fr-mono);color:var(--fr-red);font-size:12px;letter-spacing:.12em}
.fr-ficha .ff-cap h4{font-family:var(--fr-display);text-transform:uppercase;color:#fff;font-size:19px;margin:10px 0 6px}
.fr-ficha .ff-cap p{margin:0;color:var(--fr-dim);font-size:14px}

/* Cronología */
.fr-ficha .ff-timeline{position:relative;margin-left:8px;padding-left:30px;border-left:2px solid var(--fr-line-2)}
.fr-ficha .ff-tl{position:relative;padding:0 0 30px}
.fr-ficha .ff-tl:last-child{padding-bottom:0}
.fr-ficha .ff-tl::before{content:"";position:absolute;left:-39px;top:3px;width:14px;height:14px;border-radius:50%;background:var(--fr-black);border:3px solid var(--fr-red)}
.fr-ficha .ff-tl .when{font-family:var(--fr-mono);font-size:12px;letter-spacing:.1em;color:var(--fr-yellow);text-transform:uppercase}
.fr-ficha .ff-tl h4{font-family:var(--fr-display);text-transform:uppercase;color:#fff;margin:5px 0;font-size:21px}
.fr-ficha .ff-tl p{margin:0;color:var(--fr-dim);font-size:14.5px;max-width:640px}

/* Contexto + fuentes */
.fr-ficha .ff-context{border:1px solid var(--fr-line-2);background:linear-gradient(135deg,rgba(255,26,46,.07),transparent 60%),var(--fr-panel);padding:clamp(28px,5vw,48px)}
.fr-ficha .ff-context .big{font-family:var(--fr-display);font-weight:900;text-transform:uppercase;color:#fff;font-size:clamp(26px,4vw,42px);line-height:1}
.fr-ficha .ff-context .big em{font-style:normal;color:var(--fr-red)}
.fr-ficha .ff-context p{color:var(--fr-dim);max-width:680px;margin:16px 0 0}
.fr-ficha .ff-sources{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.fr-ficha .ff-src{border:1px solid var(--fr-line);background:var(--fr-panel);padding:14px 16px;display:flex;justify-content:space-between;gap:14px;font-size:13.5px;transition:.18s}
.fr-ficha .ff-src:hover{border-color:var(--fr-red)}
.fr-ficha .ff-src .t{color:#fff}
.fr-ficha .ff-src .d{color:var(--fr-faint);font-family:var(--fr-mono);font-size:11px}
.fr-ficha .ff-src .go{color:var(--fr-red);font-family:var(--fr-mono);font-size:11px;white-space:nowrap}

@media (max-width:900px){
  .fr-ficha .ff-hgrid{grid-template-columns:1fr}
  .fr-ficha .ff-figure{order:-1;min-height:280px}
  .fr-ficha .ff-specgrid{grid-template-columns:1fr}
  .fr-ficha .ff-stats{grid-template-columns:repeat(2,1fr)}
  .fr-ficha .ff-caps{grid-template-columns:1fr}
  .fr-ficha .ff-ana{grid-template-columns:1fr}
  .fr-ficha .ff-anafig{order:-1;max-width:360px;margin:0 auto}
  .fr-ficha .ff-sources{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .fr-ficha.is-js .ff-rv{opacity:1;transform:none;transition:none}
}

/* =====================================================================
   v1.2.4 · Hero centrado
   El contenedor ya va centrado (max-width), pero el contenido del hero
   estaba alineado a la izquierda y en pantallas anchas quedaba a un lado.
   Lo centramos para que quede equilibrado en cualquier tamaño.
   ===================================================================== */
.fr-hero .fr-wrap { text-align: center; }
.fr-hero h1 { margin-left: auto; margin-right: auto; }
.fr-hero__sub { margin-left: auto; margin-right: auto; }
.fr-hero__cta { justify-content: center; }
.fr-telemetry { justify-content: center; }

/* =====================================================================
   v1.2.5 · Centrado robusto + ficha sin segundo dibujo
   ===================================================================== */
/* (1) Ancho completo determinista (también dentro de .fr-canvas, que crea
   su propio contexto y a veces no expande el ancho). La franja oscura va a
   todo el ancho y el contenido queda SIEMPRE en una columna centrada. */
/* (1) En Inicio/Episodios el contenido va dentro del contenedor del tema, que
   puede quedar estrecho y a la izquierda (p. ej. si hay barra lateral). Forzamos
   el área de contenido a TODO el ancho y sin barra lateral, igual que en la
   página de Robots (que usa plantilla propia y por eso ya iba centrada). Con el
   contenedor a todo el ancho, las secciones a sangre se centran solas. */
body.fr-page .widget-area,
body.fr-page .sidebar,
body.fr-page #right-sidebar,
body.fr-page #left-sidebar { display: none !important; }
body.fr-page .content-area,
body.fr-page .site-main {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
}
body.fr-page #content.site-content { display: block !important; }
body.fr-page .fr-wrap {
  max-width: var(--fr-maxw);
  margin-left: auto !important;
  margin-right: auto !important;
}
html { overflow-x: clip; }

/* (2) Ficha de robot: quitamos el segundo dibujo (el esquema de la sección
   «Por dentro») y dejamos las piezas en una rejilla limpia. Se aplica solo
   a las fichas ya pegadas, sin volver a pegarlas. */
.fr-ficha .ff-anafig { display: none; }
.fr-ficha .ff-ana { grid-template-columns: repeat(3, 1fr); align-items: stretch; }
.fr-ficha .ff-col { display: contents; }
@media (max-width: 900px) {
  .fr-ficha .ff-ana { grid-template-columns: 1fr; }
}


/* =====================================================================
   v1.2.7 · Subtítulo del hero centrado + cursor "mira" (estilo HUD)
   ===================================================================== */
.fr-hero .fr-hero__sub { display: inline-block; text-align: center; margin-left: auto; margin-right: auto; }
.fr-hero--split .fr-hero__sub { display: block; text-align: left; margin-left: 0; margin-right: 0; }

/* Cursor personalizado: punto rojo que late / se expande sobre lo clicable.
   Lo dibuja el JS (un elemento que sigue al ratón). Solo en equipos con ratón;
   el cursor nativo se oculta cuando el JS está listo (clase fr-has-cursor). */
@media (hover: hover) and (pointer: fine) {
  body.fr-site.fr-has-cursor,
  body.fr-site.fr-has-cursor * { cursor: none; }
}
.fr-cursor {
  position: fixed; top: 0; left: 0; width: 12px; height: 12px;
  margin: 0; border-radius: 50%; background: var(--fr-red, #FF1A2E);
  border: 2px solid transparent; box-sizing: border-box;
  pointer-events: none; opacity: 0; z-index: 2147483600;
  box-shadow: 0 0 10px rgba(255, 26, 46, .55);
  transition: width .22s ease, height .22s ease, background-color .22s ease,
              border-color .22s ease, opacity .2s ease;
  will-change: transform;
}
.fr-cursor.is-hover {
  width: 30px; height: 30px;
  background: rgba(255, 26, 46, .16);
  border-color: var(--fr-red, #FF1A2E);
  animation: fr-cursor-pulse 1.1s ease-in-out infinite;
}
.fr-cursor.is-down { background: #fff; border-color: #fff; }
@keyframes fr-cursor-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 26, 46, .5); }
  70%  { box-shadow: 0 0 0 9px rgba(255, 26, 46, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 26, 46, 0); }
}
@media (prefers-reduced-motion: reduce) { .fr-cursor.is-hover { animation: none; } }

/* =====================================================================
   v1.2.8 · Comparador de robots ([flash_comparador])
   ===================================================================== */
.fr-cmp { max-width: 980px; margin: 0 auto; }
.fr-cmp__head { text-align: center; margin-bottom: 22px; }
.fr-cmp__title { font-family: var(--fr-display); font-weight: 900; text-transform: uppercase; font-size: clamp(26px,4vw,44px); margin: .2em 0; color: #fff; }
.fr-cmp__hint, .fr-cmp__note { color: var(--fr-dim); font-family: var(--fr-mono); font-size: 12px; letter-spacing: .04em; }
.fr-cmp__note { margin-top: 18px; color: var(--fr-faint); text-align: center; }

.fr-cmp__pick { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 26px; }
.fr-cmp__chip { --c: var(--fr-red); display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-family: var(--fr-mono); font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: #cfcfcf; background: var(--fr-panel); border: 1px solid var(--fr-line-2); padding: 9px 14px; transition: .15s; }
.fr-cmp__chip .d { width: 9px; height: 9px; border-radius: 50%; background: var(--c); flex: 0 0 auto; }
.fr-cmp__chip:hover { border-color: var(--c); color: #fff; }
.fr-cmp__chip.is-on { border-color: var(--c); color: #fff; box-shadow: inset 0 0 0 1px var(--c); }
.fr-cmp__chip[aria-disabled="true"] { opacity: .38; cursor: not-allowed; }

.fr-cmp__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(0,1fr)); gap: 12px; margin-bottom: 10px; }
.fr-cmp__card { --c: var(--fr-red); border: 1px solid var(--fr-line); border-top: 3px solid var(--c); background: var(--fr-panel); padding: 14px; }
.fr-cmp__card h4 { font-family: var(--fr-display); text-transform: uppercase; color: #fff; font-size: 18px; margin: 0 0 4px; line-height: 1.05; }
.fr-cmp__card .o { font-family: var(--fr-mono); font-size: 11px; color: var(--fr-dim); display: block; }
.fr-cmp__card .s { font-family: var(--fr-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--c); margin-top: 8px; display: inline-block; }

.fr-cmp__metric { border-top: 1px solid var(--fr-line); padding: 18px 0; }
.fr-cmp__mlabel { font-family: var(--fr-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--fr-yellow); margin-bottom: 12px; }
.fr-cmp__bars { display: flex; flex-direction: column; gap: 9px; }
.fr-cmp__bar { --c: var(--fr-red); display: grid; grid-template-columns: 130px 1fr auto; align-items: center; gap: 12px; }
.fr-cmp__bar .nm { font-family: var(--fr-mono); font-size: 12px; color: #dcdcdc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fr-cmp__track { height: 14px; background: rgba(255,255,255,.06); position: relative; overflow: hidden; }
.fr-cmp__fill { height: 100%; width: 0; background: var(--c); transition: width .9s cubic-bezier(.2,.7,.2,1); }
.fr-cmp__val { font-family: var(--fr-mono); font-size: 12.5px; color: #fff; white-space: nowrap; min-width: 70px; text-align: right; }
.fr-cmp__val.dash { color: var(--fr-faint); }

@media (max-width: 640px) {
  .fr-cmp__bar { grid-template-columns: 92px 1fr auto; gap: 8px; }
  .fr-cmp__bar .nm { font-size: 11px; }
  .fr-cmp__val { min-width: 56px; font-size: 11.5px; }
}
@media (prefers-reduced-motion: reduce) { .fr-cmp__fill { transition: none; } }

/* =====================================================================
   v1.2.9 · Comparador: pestañas + modo Versus 1v1 + ficha del humano
   ===================================================================== */
.fr-cmp__tabs { display: flex; justify-content: center; margin-bottom: 22px; }
.fr-cmp__tab { cursor: pointer; font-family: var(--fr-mono); font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--fr-dim); background: transparent; border: 1px solid var(--fr-line-2); padding: 10px 20px; transition: .15s; }
.fr-cmp__tab + .fr-cmp__tab { border-left: none; }
.fr-cmp__tab:hover { color: #fff; }
.fr-cmp__tab.is-on { color: #0a0a0a; background: var(--fr-red); border-color: var(--fr-red); font-weight: 700; }

/* Versus 1v1 */
.fr-cmp__vshead { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; margin-bottom: 6px; }
.fr-cmp__vsname { font-family: var(--fr-display); font-weight: 900; text-transform: uppercase; font-size: clamp(18px,3vw,30px); line-height: 1; color: #fff; }
.fr-cmp__vsname.l { text-align: right; }
.fr-cmp__vsname.r { text-align: left; }
.fr-cmp__vsname b { display: block; height: 4px; width: 60px; margin-top: 9px; background: var(--c,#FF1A2E); }
.fr-cmp__vsname.l b { margin-left: auto; }
.fr-cmp__vsvs { font-family: var(--fr-display); font-weight: 900; color: var(--fr-red); font-size: 22px; letter-spacing: .05em; }
.fr-cmp__vsmeta { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.fr-cmp__vsmeta span { font-family: var(--fr-mono); font-size: 11px; color: var(--fr-dim); }
.fr-cmp__vsmeta .l { text-align: right; }
.fr-cmp__score { text-align: center; font-family: var(--fr-mono); font-size: 13px; letter-spacing: .1em; color: #fff; border-top: 1px solid var(--fr-line); border-bottom: 1px solid var(--fr-line); padding: 12px 0; }
.fr-cmp__score b { font-size: 22px; color: #fff; }

.fr-cmp__vslabel { text-align: center; font-family: var(--fr-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--fr-yellow); padding: 16px 0 8px; }
.fr-cmp__vsrow { display: grid; grid-template-columns: 92px 1fr 92px; align-items: center; gap: 12px; }
.fr-cmp__vstrack { display: flex; height: 18px; background: rgba(255,255,255,.06); overflow: hidden; }
.fr-cmp__vsfill { height: 100%; width: 0; transition: width .9s cubic-bezier(.2,.7,.2,1); }
.fr-cmp__vsval { font-family: var(--fr-mono); font-size: 13px; color: #b9b9b9; white-space: nowrap; }
.fr-cmp__vsval.l { text-align: right; }
.fr-cmp__vsval.r { text-align: left; }
.fr-cmp__vsval.win { color: #fff; font-weight: 700; }
.fr-cmp__vsval .w { color: var(--fr-yellow); }

.fr-cmp__src { margin-top: 16px; border: 1px solid var(--fr-line); background: var(--fr-panel); }
.fr-cmp__src summary { cursor: pointer; font-family: var(--fr-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--fr-yellow); padding: 12px 16px; list-style: none; }
.fr-cmp__src summary::-webkit-details-marker { display: none; }
.fr-cmp__src summary::before { content: "▸  "; }
.fr-cmp__src[open] summary::before { content: "▾  "; }
.fr-cmp__src ul { margin: 0; padding: 2px 18px 6px 36px; }
.fr-cmp__src li { font-size: 13.5px; color: var(--fr-dim); margin: 9px 0; line-height: 1.5; }
.fr-cmp__src li b { color: #eee; }
.fr-cmp__srcnote { padding: 0 18px 14px; margin: 6px 0 0; font-family: var(--fr-mono); font-size: 11px; color: var(--fr-faint); }

@media (max-width: 640px) {
  .fr-cmp__vsrow { grid-template-columns: 60px 1fr 60px; gap: 8px; }
  .fr-cmp__vsval { font-size: 10.5px; }
  .fr-cmp__vsmeta span { font-size: 10px; }
}


/* Radar hexagonal (estilo FIFA) del comparador */
.fr-cmp__radar { display: flex; flex-direction: column; align-items: center; margin-bottom: 18px; }
.fr-cmp__radarsvg { width: 100%; max-width: 380px; height: auto; display: block; }
.fr-cmp__legend { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 6px; }
.fr-cmp__leg { display: inline-flex; align-items: center; gap: 7px; font-family: var(--fr-mono); font-size: 12px; color: #dcdcdc; }
.fr-cmp__leg .d { width: 9px; height: 9px; border-radius: 50%; }
.fr-cmp__radartip { margin: 8px 0 0; font-family: var(--fr-mono); font-size: 10.5px; color: var(--fr-faint); text-align: center; }

/* =====================================================================
   v1.4.0 · Sección de Noticias (tarjetas reutilizan .fr-ep)
   ===================================================================== */
.fr-card.fr-news { display: block; text-decoration: none; color: inherit; }
.fr-news .fr-ep__body h3 { color: #fff; transition: color .15s ease; }
.fr-news:hover .fr-ep__body h3 { color: var(--fr-red); }
.fr-news__date {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  font-family: var(--fr-mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
  color: #fff; background: rgba(10, 10, 10, .8); border: 1px solid var(--fr-line-2); padding: 4px 9px;
}
.fr-news__src { font-family: var(--fr-mono); font-size: 11px; color: var(--fr-yellow); letter-spacing: .03em; margin: 0 0 7px; }
.fr-news__hero { margin: 0 0 26px; }
.fr-news__hero img { width: 100%; height: auto; display: block; border: 1px solid var(--fr-line); }

/* =====================================================================
   v1.6.0 · Explorador de robots (buscar + tipo + marca)
   ===================================================================== */
.fr-explorer { margin-bottom: 30px; }
.fr-explorer__search { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.fr-explorer__input {
  flex: 1; min-width: 220px;
  background: var(--fr-panel); border: 1px solid var(--fr-line-2); color: #fff;
  font-family: var(--fr-body); font-size: 15px; padding: 13px 16px;
}
.fr-explorer__input::placeholder { color: var(--fr-faint); }
.fr-explorer__input:focus { outline: none; border-color: var(--fr-red); }
.fr-explorer__count { font-family: var(--fr-mono); font-size: 12px; color: var(--fr-dim); letter-spacing: .05em; white-space: nowrap; }
.fr-explorer__row { display: flex; align-items: baseline; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
.fr-explorer__lbl { font-family: var(--fr-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--fr-yellow); min-width: 46px; flex: none; }
.fr-explorer__chips { display: flex; flex-wrap: wrap; gap: 8px; }

/* =====================================================================
   v1.8.0 · Portada viva — destacado (último episodio + últimas noticias)
   ===================================================================== */
.fr-tag--live { background: var(--fr-red); color: #fff; }

.fr-featured { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 24px; }
.fr-featured.fr-featured--solo { grid-template-columns: 1fr; }
@media (max-width: 880px) { .fr-featured { grid-template-columns: 1fr; } }

.fr-featured__main { display: block; text-decoration: none; color: inherit; background: var(--fr-panel); border: 1px solid var(--fr-line); transition: border-color .18s ease; }
.fr-featured__main:hover { border-color: var(--fr-line-2); }
.fr-featured__media { position: relative; aspect-ratio: 16/9; background: #000; overflow: hidden; }
.fr-featured__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.fr-featured__main:hover .fr-featured__media img { transform: scale(1.04); }
.fr-featured__main:hover .fr-play span { transform: scale(1.12); background: var(--fr-red); }
.fr-featured__body { padding: 22px 24px 26px; }
.fr-featured__body h3 { font-family: var(--fr-display); font-weight: 800; text-transform: uppercase; font-size: clamp(22px, 3vw, 32px); line-height: .98; margin: 0 0 12px; color: #fff; }
.fr-featured__body p { color: var(--fr-dim); margin: 0 0 18px; line-height: 1.55; }
.fr-featured__cta { font-family: var(--fr-mono); font-size: 13px; letter-spacing: .05em; color: var(--fr-red); text-transform: uppercase; }

.fr-featured__side { display: flex; flex-direction: column; gap: 12px; }
.fr-featured__sidehead { font-family: var(--fr-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--fr-yellow); margin-bottom: 2px; }
.fr-newsrow { display: flex; gap: 14px; text-decoration: none; color: inherit; background: var(--fr-panel); border: 1px solid var(--fr-line); transition: border-color .18s ease; }
.fr-newsrow:hover { border-color: var(--fr-line-2); }
.fr-newsrow:hover h4 { color: var(--fr-red); }
.fr-newsrow__thumb { position: relative; width: 116px; flex: none; aspect-ratio: 16/10; background: #000; overflow: hidden; display: grid; place-items: center; }
.fr-newsrow__thumb img { width: 100%; height: 100%; object-fit: cover; }
.fr-newsrow__body { padding: 10px 14px 10px 0; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.fr-newsrow__date { font-family: var(--fr-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--fr-faint); margin-bottom: 5px; }
.fr-newsrow h4 { font-family: var(--fr-body); font-weight: 700; font-size: 15px; line-height: 1.25; margin: 0; color: var(--fr-text); transition: color .15s ease; }

/* =====================================================================
   v1.9.0 · EFECTOS PREMIUM
   - Hero con imagen (parallax + escáner + tilt 3D + halo)
   - Barra de progreso de scroll
   - Grano cinematográfico sobre el lienzo
   - Spotlight que sigue al ratón en las tarjetas
   Todo respeta prefers-reduced-motion y se desactiva sin JS.
   ===================================================================== */

/* ----- Barra de progreso de lectura (arriba del todo) ----- */
.fr-progress {
  position: fixed; top: 0; left: 0; width: 100%; height: 3px; z-index: 999999;
  pointer-events: none; transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, var(--fr-red), var(--fr-red-2) 60%, var(--fr-yellow));
  box-shadow: 0 0 14px rgba(255, 26, 46, .55);
}

/* ----- Grano cinematográfico (lo inyecta el JS dentro de .fr-canvas) ----- */
.fr-grain {
  position: absolute; inset: -60%; z-index: 0; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
  opacity: .05; mix-blend-mode: screen;
  animation: fr-grain 1.2s steps(4) infinite;
}
@keyframes fr-grain {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-3%, 2%); }
  50%  { transform: translate(2%, -4%); }
  75%  { transform: translate(-2%, -2%); }
  100% { transform: translate(3%, 3%); }
}

/* ----- HERO CON IMAGEN (modo "split") ----- */
.fr-hero__grid { display: grid; gap: clamp(34px, 5vw, 72px); align-items: center; }
.fr-hero--split { padding: clamp(70px, 12vh, 130px) 0 clamp(56px, 9vh, 104px); }
.fr-hero--split .fr-hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
@media (max-width: 920px) {
  .fr-hero--split .fr-hero__grid { grid-template-columns: 1fr; }
  .fr-hero__visual { max-width: 460px; }
}

/* Contenedor con tilt 3D (el JS rota este nodo) */
.fr-hero__visual {
  position: relative; z-index: 1;
  transform-style: preserve-3d;
  transition: transform .5s cubic-bezier(.16, 1, .3, 1);
  will-change: transform;
}
.fr-hero__visual.is-tilting { transition: none; }

/* Capa interior: el parallax de scroll mueve este nodo */
.fr-hero__visual-in { position: relative; will-change: transform; }

/* Halo rojo ambiental detrás de la imagen */
.fr-hero__halo {
  position: absolute; inset: -14%; z-index: -1; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, rgba(255, 26, 46, .34), transparent 70%);
  filter: blur(30px);
  animation: fr-halo 6s ease-in-out infinite;
}
@keyframes fr-halo { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }

/* La imagen, flotando levemente, con marco técnico */
.fr-hero__imglink { display: block; }
.fr-hero__img {
  position: relative; margin: 0; overflow: hidden;
  background: var(--fr-panel); border: 1px solid var(--fr-line-2);
  animation: fr-float 7s ease-in-out infinite;
}
@keyframes fr-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.fr-hero__img img {
  width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; display: block;
  transform: scale(1.04);
}

/* Línea de escaneo que recorre la imagen */
.fr-hero__scan {
  position: absolute; left: 0; right: 0; top: 0; height: 32%; z-index: 2;
  pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(to bottom,
    transparent,
    rgba(255, 26, 46, .14) 76%,
    rgba(255, 26, 46, .85) 98%,
    transparent);
  animation: fr-scan 4.6s cubic-bezier(.45, 0, .55, 1) infinite;
}
@keyframes fr-scan {
  0%        { transform: translateY(-110%); opacity: 0; }
  8%        { opacity: 1; }
  60%       { transform: translateY(400%); opacity: 1; }
  68%, 100% { transform: translateY(400%); opacity: 0; }
}

/* Brillo que sigue al ratón durante el tilt */
.fr-hero__glare {
  position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0;
  transition: opacity .3s ease;
  background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, .13), transparent 60%);
}
.fr-hero__visual:hover .fr-hero__glare { opacity: 1; }

/* Pie de imagen tipo terminal con cursor parpadeante */
.fr-hero__caption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; margin: 0;
  display: flex; align-items: center; gap: 10px;
  font-family: var(--fr-mono); font-size: 11px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--fr-text);
  padding: 30px 16px 14px;
  background: linear-gradient(to top, rgba(10, 10, 10, .94), rgba(10, 10, 10, .55) 65%, transparent);
}
.fr-hero__caption b { color: var(--fr-yellow); font-weight: 700; }
.fr-hero__caption::after { content: "_"; color: var(--fr-red); animation: fr-caret 1.05s steps(2) infinite; }
@keyframes fr-caret { to { opacity: 0; } }

/* Esquinas de retícula alrededor de la imagen (fuera del overflow) */
.fr-hero__frame { position: absolute; inset: -11px; z-index: 5; pointer-events: none; }
.fr-hero__frame::before, .fr-hero__frame::after,
.fr-hero__frame i::before, .fr-hero__frame i::after {
  content: ""; position: absolute; width: 28px; height: 28px;
}
.fr-hero__frame::before    { top: 0; left: 0; border-top: 2px solid var(--fr-red); border-left: 2px solid var(--fr-red); }
.fr-hero__frame::after     { bottom: 0; right: 0; border-bottom: 2px solid var(--fr-red); border-right: 2px solid var(--fr-red); }
.fr-hero__frame i::before  { content: ""; position: absolute; top: 0; right: 0; border-top: 2px solid var(--fr-yellow); border-right: 2px solid var(--fr-yellow); width: 28px; height: 28px; }
.fr-hero__frame i::after   { content: ""; position: absolute; bottom: 0; left: 0; border-bottom: 2px solid var(--fr-yellow); border-left: 2px solid var(--fr-yellow); width: 28px; height: 28px; }

/* En modo split, el marco de esquinas del texto sobra: lo lleva la imagen */
.fr-hero--split .fr-bracket::before, .fr-hero--split .fr-bracket::after { display: none; }

/* ----- Spotlight en tarjetas (luz que sigue al ratón) ----- */
.fr-card .fr-spotlight {
  position: absolute; inset: 0; z-index: 2; opacity: 0; pointer-events: none;
  transition: opacity .35s ease;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 26, 46, .15), transparent 62%);
}
.fr-card:hover .fr-spotlight { opacity: 1; }

/* ----- Reduced motion: se apagan todos los efectos nuevos ----- */
@media (prefers-reduced-motion: reduce) {
  .fr-grain, .fr-hero__img, .fr-hero__halo, .fr-hero__scan, .fr-hero__caption::after { animation: none; }
  .fr-hero__scan { display: none; }
  .fr-progress { display: none; }
}

/* ----- v1.9.0 · Ajustes del hero en modo split (con imagen) ----- */
/* El centrado de v1.2.4 solo aplica al hero clásico; con imagen, el texto
   vuelve a la izquierda y el titular se adapta a media columna. */
.fr-hero--split .fr-wrap { text-align: left; }
.fr-hero--split h1 { margin-left: 0; margin-right: 0; font-size: clamp(42px, 6.6vw, 92px); }
.fr-hero--split .fr-hero__sub { margin-left: 0; margin-right: 0; }
.fr-hero--split .fr-hero__cta { justify-content: flex-start; }
.fr-hero--split .fr-telemetry { justify-content: flex-start; }
@media (max-width: 920px) {
  .fr-hero--split h1 { font-size: clamp(42px, 10vw, 76px); }
  .fr-hero__visual { margin-top: 8px; }
}