/* ==========================================================================
   FUNESMA79 — DESIGN SYSTEM (prototype)
   Dirección: editorial / cinematográfica / humana.
   Evitar: dashboard, SaaS, terminal, prop-firm, academia.
   ========================================================================== */

:root{
  /* --- color: dark (trading / journal / entidad) --- */
  --ink:#0A0C10;
  --surface:#12151C;
  --surface-raised:#191D26;
  --line: rgba(233,236,241,0.09);
  --line-strong: rgba(233,236,241,0.16);
  --text:#ECEEF2;
  --text-dim:#9CA3B2;
  --text-faint:#5C6371;

  --accent:#3E63F0;
  --accent-dim:#8FA3FF;
  --accent-wash: rgba(62,99,240,0.10);

  --pos:#49B08A;
  --neg:#DC6A61;
  --amber:#D6A24E;

  /* --- color: light (fuera del gráfico) --- */
  --paper:#EDEEEA;
  --paper-raised:#FFFFFF;
  --paper-line: rgba(20,20,18,0.10);
  --paper-text:#181A17;
  --paper-dim:#63665F;
  --paper-faint:#96988F;

  /* --- type --- */
  --f-display:'Fraunces', 'Iowan Old Style', Georgia, serif;
  --f-body:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --f-mono:'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;

  /* --- scale (fluid) — VISUAL SYSTEM V2 -------------------------------
     Una sola escala para toda la web. Los nombres antiguos se conservan
     (hay 170+ usos en los renderers) y se limitan a apuntar a los nuevos
     valores, así que ninguna plantilla necesita tocarse para heredar V2. */
  --step-display-xl: clamp(46px, 9.5vw, 108px);
  --step-display:    clamp(40px, 7.6vw, 86px);
  --step-hero:       clamp(46px, 11vw, 104px);
  --step-h1:         clamp(34px, 6.4vw, 68px);
  --step-h2:         clamp(25px, 3.8vw, 38px);
  --step-h3:         clamp(19px, 2.4vw, 24px);
  --step-lede:       clamp(17px, 1.9vw, 21px);
  --step-body:       clamp(15px, 1.3vw, 17px);
  --step-small:      14px;
  --step-meta:       12px;
  --step-label:      10.5px;
  --step-caption:    var(--step-meta);

  /* --- cuatro anchos de contenido (V2) --------------------------------
     bleed    : sin contenedor, para media a sangre
     full     : 1560px — aprovecha 1440 y 1920 de verdad
     editorial: 1280px — composiciones de dos columnas
     reading  : 680px  — texto corrido
     El gutter crece con el viewport: 20px en móvil, 48px en escritorio. */
  --w-bleed: 100%;
  --w-full: 1560px;
  --w-editorial: 1280px;
  --w-mid: 920px;
  --w-reading: 680px;
  --gutter: clamp(20px, 3.4vw, 48px);

  /* --- ritmo vertical (V2) --- */
  --sec-y: clamp(56px, 7.2vw, 116px);
  --sec-y-compact: clamp(32px, 4vw, 64px);

  --radius: 2px;
  --content-w: var(--w-reading);
  --wide-w: var(--w-editorial);
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;overflow-x:clip;}
body{
  margin:0;
  overflow-x:clip;
  background:var(--ink);
  color:var(--text);
  font-family:var(--f-body);
  font-size:var(--step-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
body.light-section{background:var(--paper);color:var(--paper-text);}

h1,h2,h3,h4{font-family:var(--f-display);font-weight:600;margin:0;text-wrap:balance;letter-spacing:-0.01em;}
p{margin:0;}
a{color:inherit;text-decoration:none;}
/* Enlaces dentro de texto corrido: ahí el subrayado sí hace falta, porque
   no hay otra pista de que esa palabra sea un enlace. */
p a, .tp-block a, .disclosure a{
  text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;text-decoration-color:var(--line-strong);
}
p a:hover, .tp-block a:hover, .disclosure a:hover{text-decoration-color:currentColor;}
.footer-links a:hover, .breadcrumbs a:hover{color:var(--accent-dim);}
img{max-width:100%;display:block;}
ul,ol{margin:0;padding:0;list-style:none;}
button{font:inherit;background:none;border:none;color:inherit;cursor:pointer;}

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

a:focus-visible, button:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--accent-dim);
  outline-offset:3px;
  border-radius:2px;
}

.skip-link{
  position:absolute;left:12px;top:-48px;z-index:200;
  background:var(--accent);color:#fff;padding:10px 16px;
  font-family:var(--f-body);font-size:13px;border-radius:4px;
  transition:top .15s ease;
}
.skip-link:focus{top:12px;}

/* ==========================================================================
   Site chrome
   --header-h: alto real del header, usado por la subnav sticky y por la
   posición del drawer móvil. Se ajusta en el breakpoint desktop.
   ========================================================================== */
:root{
  --header-h: 60px;
  --subnav-h: 44px;
}
@media (min-width:860px){
  :root{--header-h: 74px;--subnav-h: 48px;}
}

.site-header{
  position:sticky;top:0;z-index:100;
  height:var(--header-h);
  background:rgba(10,12,16,0.90);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);
}
body.light-section .site-header{background:rgba(237,238,234,0.92);border-bottom-color:var(--paper-line);}
/* Cuando hay subnav de Trading, header + subnav forman UNA sola superficie:
   el header cede su borde inferior a la subnav para que no se lean como dos
   barras apiladas. */
body.has-trading-subnav .site-header{border-bottom-color:transparent;}
.site-header-inner{
  max-width:var(--wide-w);margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;
  padding:10px 20px;
  min-height:var(--header-h);
  height:var(--header-h);
}
@media (min-width:860px){
  .site-header-inner{padding:14px 28px;gap:48px;}
}

/* Wordmark — pilar de identidad. Serif, mayor peso visual que la nav. */
.wordmark{
  font-family:var(--f-display);font-weight:600;
  font-size:21px;letter-spacing:0.035em;
  color:var(--text);
  transition:color .15s ease;
  white-space:nowrap;
  line-height:1;
}
body.light-section .wordmark{color:var(--paper-text);}
.wordmark:hover{color:var(--accent-dim);}
body.light-section .wordmark:hover{color:var(--accent);}
@media (min-width:860px){
  .wordmark{font-size:25px;letter-spacing:0.045em;}
}

.nav-toggle{
  display:flex;flex-direction:column;gap:4px;padding:8px;
  width:40px;height:40px;align-items:center;justify-content:center;
  margin-right:-8px;
}
.nav-toggle span{width:20px;height:1.5px;background:var(--text);display:block;transition:transform .2s, opacity .2s;}
body.light-section .nav-toggle span{background:var(--paper-text);}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(5.5px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg);}
.site-header-inner > .site-nav{z-index:2;}
.site-header-inner > .language-switcher{display:none;}
.site-header-inner > .header-actions{display:flex;align-items:center;gap:6px;margin-left:auto;}
.language-switcher{display:flex;align-items:center;gap:2px;border:1px solid var(--line);border-radius:999px;padding:2px;background:rgba(10,12,16,.5);}
.language-switcher a{min-width:44px;min-height:44px;padding:0 8px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;font-family:var(--f-mono);font-size:10px;letter-spacing:.05em;color:var(--text-faint);white-space:nowrap;}
.language-switcher a:hover,.language-switcher a:focus-visible{color:var(--text);background:var(--surface);}
.language-switcher a[aria-current="page"]{color:var(--text);background:var(--surface-raised);}
body.light-section .language-switcher{border-color:var(--paper-line);background:rgba(237,238,234,.6);}
body.light-section .language-switcher a{color:var(--paper-faint);}
body.light-section .language-switcher a:hover,body.light-section .language-switcher a:focus-visible,body.light-section .language-switcher a[aria-current="page"]{color:var(--paper-text);background:var(--paper-raised);}

/* Drawer móvil */
.site-nav{
  position:fixed;inset:0 0 0 auto;top:var(--header-h);
  width:min(340px,88vw);height:calc(100vh - var(--header-h));
  background:var(--surface);border-left:1px solid var(--line);
  transform:translateX(100%);transition:transform .25s ease;
  padding:20px 24px 40px;overflow-y:auto;
}
body.light-section .site-nav{background:var(--paper-raised);border-left-color:var(--paper-line);}
.site-nav.is-open{transform:translateX(0);}
.nav-primary a{
  display:block;padding:15px 0;font-family:var(--f-display);font-size:21px;
  border-bottom:1px solid var(--line);
  color:var(--text-dim);transition:color .15s ease;
}
body.light-section .nav-primary a{border-bottom-color:var(--paper-line);color:var(--paper-dim);}
.nav-primary a:hover{color:var(--text);}
body.light-section .nav-primary a:hover{color:var(--paper-text);}
.nav-primary a[aria-current="page"]{color:var(--accent-dim);}
body.light-section .nav-primary a[aria-current="page"]{color:var(--accent);}

/* Nav horizontal desktop — cuatro entradas, con peso suficiente para no
   parecer "links pequeños flotando" a la derecha del wordmark. */
@media (min-width:860px){
  .site-header-inner > .header-actions{margin-left:0;order:3;}
  .site-header-inner > .site-nav{margin-left:auto;order:2;}
  .language-switcher a{min-width:40px;min-height:40px;padding:0 7px;}
  .nav-toggle{display:none;}
  .site-nav{
    position:static;transform:none;width:auto;height:auto;
    background:none;border:none;padding:0;
    display:flex;align-items:center;gap:18px;
    overflow:visible;
  }
  .nav-primary{display:flex;align-items:center;gap:6px;}
  /* La regla del drawer (body.light-section .site-nav) tiene más
     especificidad que el reset de escritorio, así que en las rutas claras el
     menú arrastraba el panel blanco del cajón y se veía como un rectángulo
     flotando detrás de los enlaces. Se anula aquí explícitamente. */
  body.light-section .site-nav{background:none;border-left:none;}
  .nav-primary a{
    padding:10px 14px;font-family:var(--f-body);font-size:15px;
    border-bottom:none;font-weight:500;color:var(--text-dim);
    position:relative;letter-spacing:0.005em;line-height:1.2;
    transition:color .15s ease;white-space:nowrap;
  }
  .nav-primary a::after{
    content:"";position:absolute;left:14px;right:14px;bottom:2px;
    height:1.5px;background:var(--accent-dim);
    transform:scaleX(0);transform-origin:center;
    transition:transform .18s ease;
  }
  .nav-primary a:hover{color:var(--text);}
  .nav-primary a:hover::after{transform:scaleX(1);background:var(--line-strong);}
  body.light-section .nav-primary a{color:var(--paper-dim);}
  body.light-section .nav-primary a:hover{color:var(--paper-text);}
  .nav-primary a[aria-current="page"]{color:var(--text);font-weight:600;}
  body.light-section .nav-primary a[aria-current="page"]{color:var(--paper-text);}
  .nav-primary a[aria-current="page"]::after,
  .nav-primary a[aria-current="page"]:hover::after{transform:scaleX(1);background:var(--accent-dim);}
  body.light-section .nav-primary a[aria-current="page"]::after{background:var(--accent);}
}
@media (min-width:1040px){
  .nav-primary{gap:14px;}
  .nav-primary a{padding:10px 16px;font-size:15.5px;}
  .nav-primary a::after{left:16px;right:16px;}
}
/* Entre los anchos de escritorio compactos, el nav ES de seis entradas,
   redes y selector no caben con las separaciones del escritorio amplio. */
@media (min-width:1040px) and (max-width:1499px){
  .site-header-inner{gap:24px;}
  .nav-primary{gap:6px;}
  .nav-primary a{padding-inline:10px;}
  .nav-primary a::after{left:10px;right:10px;}
}

/* ==========================================================================
   Trading subnav — barra secundaria del ecosistema Trading.
   Sticky bajo el header, scroll horizontal elegante en móvil.
   ========================================================================== */
/* La subnav no es una segunda barra: comparte fondo y desenfoque con el
   header, no tiene borde superior y es quien lleva el único borde inferior
   del conjunto. Tipografía más pequeña y en mayúsculas: se lee como el
   índice interior de Trading, no como otra navegación de nivel uno. */
.trading-subnav{
  position:sticky;top:var(--header-h);z-index:90;
  background:rgba(10,12,16,0.90);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);
}
.trading-subnav-inner{
  max-width:var(--wide-w);margin:0 auto;
  display:flex;align-items:stretch;gap:2px;
  padding:0 12px;
  overflow-x:auto;
  scrollbar-width:none;
  -ms-overflow-style:none;
  scroll-snap-type:x proximity;
  min-height:var(--subnav-h);
  -webkit-overflow-scrolling:touch;
}
.trading-subnav-inner::-webkit-scrollbar{display:none;}
.trading-subnav-item{
  flex:0 0 auto;scroll-snap-align:start;
  display:inline-flex;align-items:center;
  padding:0 11px;
  font-family:var(--f-body);font-size:11.5px;font-weight:600;
  text-transform:uppercase;letter-spacing:0.085em;
  color:var(--text-faint);
  border-bottom:2px solid transparent;
  text-decoration:none;
  transition:color .15s ease, border-color .15s ease;
  white-space:nowrap;
}
.trading-subnav-item:hover{color:var(--text-dim);border-bottom-color:var(--line-strong);}
.trading-subnav-item.is-active{
  color:var(--text);
  border-bottom-color:var(--accent-dim);
}
@media (min-width:640px){
  .trading-subnav-inner{padding:0 20px;gap:6px;}
  .trading-subnav-item{padding:0 13px;font-size:12px;}
}
@media (min-width:860px){
  .trading-subnav-inner{padding:0 28px;gap:10px;justify-content:flex-start;}
  .trading-subnav-item{padding:0 6px;letter-spacing:0.1em;}
}

/* Fades sutiles en los extremos del scroll horizontal en móvil, para
   sugerir que hay más items sin obligar a leer una scrollbar. */
@media (max-width:859px){
  .trading-subnav::before,
  .trading-subnav::after{
    content:"";position:absolute;top:0;bottom:1px;width:26px;pointer-events:none;z-index:1;
  }
  .trading-subnav::before{left:0;background:linear-gradient(90deg, rgba(10,12,16,0.95), rgba(10,12,16,0));}
  .trading-subnav::after{right:0;background:linear-gradient(-90deg, rgba(10,12,16,0.95), rgba(10,12,16,0));}
}
body.light-section .trading-subnav{background:rgba(237,238,234,0.92);border-bottom-color:var(--paper-line);}
body.light-section .trading-subnav-item{color:var(--paper-faint);}
body.light-section .trading-subnav-item:hover{color:var(--paper-dim);}
body.light-section .trading-subnav-item.is-active{color:var(--paper-text);border-bottom-color:var(--accent);}
@media (max-width:859px){
  body.light-section .trading-subnav::before{background:linear-gradient(90deg, rgba(237,238,234,0.95), rgba(237,238,234,0));}
  body.light-section .trading-subnav::after{background:linear-gradient(-90deg, rgba(237,238,234,0.95), rgba(237,238,234,0));}
}

/* La primera sección tras la subnav respira un poco menos: el bloque de
   contenido no debe quedar pegado a la barra ni demasiado lejos de ella. */
body.has-trading-subnav .breadcrumbs{padding-top:20px;}
/* Los hubs del ecosistema Trading usan una medida más ancha (.col-mid).
   La breadcrumb tiene que alinear con ella o los bordes izquierdos de la
   página no cuadran. */
body.measure-mid .breadcrumbs{max-width:920px;}

.site-footer{
  border-top:1px solid var(--line);
  padding:48px 20px 64px;
  color:var(--text-faint);
}
body.light-section .site-footer{border-top-color:var(--paper-line);color:var(--paper-faint);}
.site-footer-inner{max-width:var(--wide-w);margin:0 auto;}
.footer-grid{display:flex;flex-direction:column;gap:28px;}
@media (min-width:760px){.footer-grid{flex-direction:row;justify-content:space-between;align-items:flex-start;}}
.footer-links{display:flex;flex-wrap:wrap;gap:14px 20px;font-size:13px;}
.footer-legal{font-size:12px;line-height:1.7;max-width:480px;}
.footer-copy{margin-top:10px;color:var(--text-faint);}
body.light-section .footer-copy{color:var(--paper-faint);}

/* ==========================================================================
   Layout primitives
   ========================================================================== */
.col{max-width:var(--content-w);margin:0 auto;padding:0 var(--gutter);}
.col-mid{max-width:var(--w-mid);margin:0 auto;padding:0 var(--gutter);}
/* V2 — tiers nuevos. .col-bleed no lleva contenedor (media a sangre);
   .col-full es el tier ancho real para 1440/1920. */
.col-bleed{max-width:none;margin:0;padding:0;}
.col-full{max-width:var(--w-full);margin:0 auto;padding:0 var(--gutter);}
.col-wide{max-width:var(--wide-w);margin:0 auto;padding:0 var(--gutter);}
.stack{display:flex;flex-direction:column;}
.rhythm > * + *{margin-top:64px;}
.rhythm-tight > * + *{margin-top:32px;}

section.block{padding:var(--sec-y) 0;}
section.block.compact{padding:var(--sec-y-compact) 0;}
section.block + section.block{border-top:1px solid var(--line);}
body.light-section section.block + section.block{border-top-color:var(--paper-line);}

.eyebrow{
  font-family:var(--f-body);font-size:11.5px;font-weight:600;letter-spacing:0.11em;
  text-transform:uppercase;color:var(--accent-dim);display:block;margin-bottom:14px;
}
body.light-section .eyebrow{color:var(--accent);}

.lede{font-size:var(--step-lede);line-height:1.6;color:var(--text-dim);max-width:56ch;}
body.light-section .lede{color:var(--paper-dim);}

.meta{
  font-family:var(--f-mono);font-size:11.5px;color:var(--text-faint);
  display:flex;flex-wrap:wrap;gap:0 10px;letter-spacing:0.01em;
}
body.light-section .meta{color:var(--paper-faint);}
.meta .sep{opacity:.5;}

/* pills / tags */
.pill{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:0.02em;
  padding:5px 10px;border-radius:999px;border:1px solid;
}
.pill.pos{color:var(--pos);border-color:rgba(73,176,138,0.4);background:rgba(73,176,138,0.08);}
.pill.neg{color:var(--neg);border-color:rgba(220,106,97,0.4);background:rgba(220,106,97,0.08);}
.pill.amber{color:var(--amber);border-color:rgba(214,162,78,0.4);background:rgba(214,162,78,0.08);}
.pill.neutral{color:var(--text-dim);border-color:var(--line-strong);}
body.light-section .pill.neutral{color:var(--paper-dim);border-color:var(--paper-line);}

.content-state{
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:0.04em;color:var(--text-faint);
  border:1px dashed var(--line-strong);padding:2px 7px;border-radius:3px;
}
body.light-section .content-state{color:var(--paper-faint);border-color:var(--paper-line);}

.breadcrumbs{
  font-family:var(--f-mono);font-size:11px;color:var(--text-faint);
  display:flex;flex-wrap:wrap;gap:0 8px;letter-spacing:0.01em;
  padding:14px 20px 0;max-width:var(--content-w);margin:0 auto;
}
.breadcrumbs a{color:var(--text-faint);}
.breadcrumbs a:hover{color:var(--accent-dim);}
.breadcrumbs span[aria-current]{color:var(--text-dim);}
.breadcrumbs .sep{opacity:.4;}
body.light-section .breadcrumbs{color:var(--paper-faint);}
body.light-section .breadcrumbs a{color:var(--paper-faint);}
body.light-section .breadcrumbs span[aria-current]{color:var(--paper-dim);}

/* links list */
.link-list a{
  display:block;padding:18px 0;border-bottom:1px solid var(--line);
  font-family:var(--f-display);font-size:19px;
}
body.light-section .link-list a{border-bottom-color:var(--paper-line);}
.link-list a .meta{margin-top:6px;}
.link-list a:last-child{border-bottom:none;}

/* editorial figure / photo treatment (no external photography available) */
.figure{position:relative;overflow:hidden;background:var(--surface-raised);max-height:min(70vh,640px);}
.figure.ratio-portrait{aspect-ratio:4/5;}
.figure.ratio-wide{aspect-ratio:16/10;}
.figure.ratio-square{aspect-ratio:1/1;}
.figure.ratio-hero{aspect-ratio:3/4;max-height:min(58vh,520px);}
@media (min-width:860px){
  .figure.ratio-hero{aspect-ratio:21/9;max-height:min(64vh,560px);}
}
.figure .field{
  position:absolute;inset:0;
  background:
    radial-gradient(120% 90% at 20% 15%, rgba(62,99,240,0.16), transparent 60%),
    linear-gradient(155deg, #1E2330 0%, #12141B 55%, #0B0C10 100%);
}
.figure .field.warm{
  background:
    radial-gradient(110% 90% at 75% 20%, rgba(214,162,78,0.14), transparent 55%),
    linear-gradient(160deg, #23262A 0%, #16181A 60%, #0E0F10 100%);
}
.figure .field.cool2{
  background:
    radial-gradient(100% 80% at 80% 80%, rgba(143,163,255,0.14), transparent 60%),
    linear-gradient(200deg, #1A1E2A 0%, #101319 55%, #0A0B0F 100%);
}
.figure .field.warm2{
  background:
    radial-gradient(90% 70% at 30% 75%, rgba(220,150,90,0.13), transparent 55%),
    linear-gradient(140deg, #211D1A 0%, #17140F 55%, #0D0C0A 100%);
}
.figure .grain{
  position:absolute;inset:0;opacity:.5;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}
.figure .horizon{position:absolute;left:0;right:0;bottom:32%;height:1px;background:rgba(255,255,255,0.06);}
.figure .caption-mark{
  position:absolute;left:14px;bottom:12px;
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:0.04em;color:rgba(255,255,255,0.55);
  background:rgba(0,0,0,0.35);padding:3px 8px;border-radius:3px;backdrop-filter:blur(3px);
}

/* chart placeholder — schematic, honest, not fake data presented as real */
.chart-fig{
  background:var(--surface-raised);border:1px solid var(--line);
  padding:14px 14px 10px;
}
.chart-fig svg{width:100%;height:auto;display:block;}
.chart-fig .cap{
  font-family:var(--f-mono);font-size:9.5px;color:var(--text-faint);
  margin-top:8px;letter-spacing:0.03em;
}

/* pull quote */
.pull{
  font-family:var(--f-display);font-style:italic;font-weight:500;
  font-size:var(--step-h3);line-height:1.45;color:var(--text);
  border-left:2px solid var(--accent);padding-left:20px;
  max-width:52ch;
}
body.light-section .pull{color:var(--paper-text);}

/* buttons */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--f-body);font-size:14px;font-weight:600;
  padding:12px 20px;border:1px solid var(--line-strong);border-radius:3px;
  color:var(--text);
}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;}
.btn.ghost{border-color:var(--line-strong);}
body.light-section .btn{color:var(--paper-text);border-color:var(--paper-line);}
body.light-section .btn.primary{background:var(--accent);color:#fff;}
.btn-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px;}

/* intent doors */
.doors{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:20px;}
body.light-section .doors{background:var(--paper-line);border-color:var(--paper-line);}
.doors a{background:var(--ink);padding:20px;display:flex;justify-content:space-between;align-items:center;gap:10px;}
body.light-section .doors a{background:var(--paper);}
.doors a .t{font-family:var(--f-display);font-size:16px;}
.doors a .m{font-family:var(--f-mono);font-size:10.5px;color:var(--text-faint);}
body.light-section .doors a .m{color:var(--paper-faint);}
.doors a .arrow{font-size:16px;color:var(--accent-dim);flex-shrink:0;}
body.light-section .doors a .arrow{color:var(--accent);}
@media (min-width:640px){.doors{grid-template-columns:1fr 1fr;}}

/* case template two-col facts */
.facts{display:grid;grid-template-columns:1fr;gap:20px;}
@media (min-width:560px){.facts{grid-template-columns:1fr 1fr;}}
.facts dt{font-family:var(--f-body);font-size:11px;font-weight:600;letter-spacing:0.07em;text-transform:uppercase;color:var(--accent-dim);margin-bottom:6px;}
.facts dd{margin:0;font-size:14px;line-height:1.55;color:var(--text-dim);}

/* ahora blocks */
.ahora-item{padding:22px 0;border-bottom:1px solid var(--line);}
.ahora-item:last-child{border-bottom:none;}
.ahora-item .k{font-size:11px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--accent-dim);}
.ahora-item p{margin-top:8px;font-size:15px;line-height:1.6;}
.ahora-item.is-empty p{color:var(--text-faint);font-style:italic;}
.ahora-item .cadence{margin-top:8px;}

/* timeline */
.tl{position:relative;padding-left:26px;}
.tl::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:1px;background:var(--line);}
.tl-item{position:relative;padding-bottom:34px;}
.tl-item:last-child{padding-bottom:0;}
.tl-item::before{content:"";position:absolute;left:-21px;top:5px;width:8px;height:8px;border-radius:50%;background:var(--accent-dim);}
.tl-item.is-current::before{background:var(--pos);box-shadow:0 0 0 4px rgba(73,176,138,0.18);}
.tl-item .stage{font-family:var(--f-body);font-size:11px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-faint);}
.tl-item h3{margin-top:6px;font-size:18px;}
.tl-item p{margin-top:8px;font-size:13.5px;color:var(--text-dim);line-height:1.6;}

/* journal reflection blocks */
.reflect{padding:18px 0;border-bottom:1px solid var(--line);}
.reflect:last-child{border-bottom:none;}
.reflect .q{font-family:var(--f-display);font-size:15px;font-style:italic;color:var(--accent-dim);}
.reflect p{margin-top:8px;font-size:14.5px;line-height:1.6;}

/* narrative case story — same visual language as .reflect, first-person voice */
.story{padding:18px 0;border-bottom:1px solid var(--line);}
.story:last-child{border-bottom:none;}
.story .q{font-family:var(--f-display);font-size:15px;font-style:italic;color:var(--accent-dim);}
.story h2.q{margin:0;font-weight:400;line-height:normal;}
.story p{margin-top:8px;font-size:15px;line-height:1.65;color:var(--text-dim);}
body.light-section .story{border-bottom-color:var(--paper-line);}
body.light-section .story .q{color:var(--accent);}
body.light-section .story p{color:var(--paper-dim);}

/* secondary technical breakdown — collapsed by default, deliberately muted */
details.tech-details{margin-top:6px;}
details.tech-details summary{
  cursor:pointer;list-style:none;
  font-family:var(--f-mono);font-size:11px;letter-spacing:0.04em;color:var(--text-faint);
}
details.tech-details summary::-webkit-details-marker{display:none;}
details.tech-details summary::before{content:"+ "; opacity:.7;}
details.tech-details[open] summary::before{content:"– "; opacity:.7;}
details.tech-details .facts{margin-top:16px;}
body.light-section details.tech-details summary{color:var(--paper-faint);}

/* skip visual noise: only ONE card style, reserved for real "collections" */
.entry{padding:22px 0;border-bottom:1px solid var(--line);}
.entry:last-child{border-bottom:none;}
body.light-section .entry{border-bottom-color:var(--paper-line);}

.disclosure{
  font-family:var(--f-mono);font-size:11px;line-height:1.7;color:var(--text-faint);
  border-top:1px dashed var(--line-strong);margin-top:36px;padding-top:16px;
}
body.light-section .disclosure{color:var(--paper-faint);border-top-color:var(--paper-line);}

.related{margin-top:8px;}
.related a{font-size:13px;color:var(--accent-dim);}
body.light-section .related a{color:var(--accent);}

/* image grid for photography/collections */
.photo-grid{display:grid;grid-template-columns:1fr;gap:6px;}
@media (min-width:600px){.photo-grid.thirds{grid-template-columns:repeat(3,1fr);}}
@media (min-width:600px){.photo-grid.split{grid-template-columns:1.3fr 1fr;}}

/* music rows */
.music-row{display:flex;align-items:center;gap:14px;padding:16px 0;border-bottom:1px solid var(--line);}
.music-row:last-child{border-bottom:none;}
.music-row .disc{width:42px;height:42px;border-radius:50%;flex-shrink:0;background:conic-gradient(from 140deg, var(--surface-raised), var(--accent-wash), var(--surface-raised));border:1px solid var(--line-strong);}
.music-row .t{font-family:var(--f-display);font-size:15px;}
.music-row .m{font-family:var(--f-mono);font-size:10.5px;color:var(--text-faint);margin-top:3px;}
.music-context-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:6px;}
.music-context-grid a, .music-context-grid span{background:var(--surface-raised);color:var(--text);padding:16px 14px;font-family:var(--f-display);font-size:14.5px;}
.music-context-grid span{color:var(--text-dim);}
body.light-section .music-context-grid{background:var(--paper-line);border-color:var(--paper-line);}
body.light-section .music-context-grid a{background:var(--paper-raised);color:var(--paper-text);}
body.light-section .music-context-grid span{background:var(--paper-raised);color:var(--paper-dim);}

/* transparency page */
.tp-block{padding:26px 0;border-bottom:1px solid var(--line);}
.tp-block:last-child{border-bottom:none;}
.tp-block h3{font-size:16px;margin-bottom:8px;}
.tp-block p, .tp-block li{font-size:13.5px;line-height:1.65;color:var(--text-dim);}
.tp-block li{margin-top:4px;}
.tp-block .legal-identity{margin-top:14px;color:var(--text-dim);line-height:1.7;letter-spacing:0.02em;}
.tp-block ul{padding-left:18px;list-style:disc;}

/* ---------------------------------------------------------------------- */
/* CURSO — mismo design system, componentes más funcionales               */
/* ---------------------------------------------------------------------- */

/* estructura del curso / módulos: lista numerada, no cards */
.course-list{margin-top:6px;}
.course-list .course-item{
  display:flex;gap:16px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--line);
}
.course-list .course-item:last-child{border-bottom:none;}
.course-list .course-item.is-placeholder{opacity:.4;}
.course-list .n{font-family:var(--f-mono);font-size:12px;color:var(--accent-dim);flex-shrink:0;width:28px;}
.course-list .course-item a{font-family:var(--f-display);font-size:16px;}
.course-list .course-item p{margin-top:4px;font-size:13px;color:var(--text-faint);}

/* progreso — mock visual, sin persistencia real */
.progress-track{height:4px;background:var(--line-strong);border-radius:2px;overflow:hidden;margin-top:10px;}
.progress-fill{height:100%;background:var(--accent);border-radius:2px;}
body.light-section .progress-track{background:var(--paper-line);}
.progress-label{font-family:var(--f-mono);font-size:10.5px;color:var(--text-faint);letter-spacing:0.04em;margin-top:6px;display:block;}
body.light-section .progress-label{color:var(--paper-faint);}

.lesson-complete-toggle{
  margin-top:14px;padding:12px 18px;border:1px solid var(--line-strong);border-radius:4px;
  background:transparent;color:var(--text-dim);font-family:var(--f-mono);font-size:11.5px;letter-spacing:0.04em;
  cursor:pointer;
}
.lesson-complete-toggle[aria-pressed="true"]{border-color:var(--pos);color:var(--pos);}
.lesson-complete-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

/* vídeo — placeholder neutral, sin proveedor todavía */
.video-lesson{
  position:relative;aspect-ratio:16/9;background:var(--surface-raised);border:1px solid var(--line-strong);
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;
}
.video-lesson .play{
  width:48px;height:48px;border-radius:50%;border:1px solid var(--line-strong);
  display:flex;align-items:center;justify-content:center;color:var(--text-faint);font-size:16px;
}
.video-lesson .cap{font-family:var(--f-mono);font-size:11px;color:var(--text-faint);}
body.light-section .video-lesson{background:var(--paper-raised);border-color:var(--paper-line);}

/* ejercicio / checklist — mismo lenguaje visual que .tp-block */
.lesson-block{padding:22px 0;border-bottom:1px solid var(--line);}
.lesson-block:last-child{border-bottom:none;}
.lesson-block h3{font-size:14px;font-family:var(--f-mono);letter-spacing:0.04em;text-transform:uppercase;color:var(--accent-dim);margin-bottom:10px;}
.lesson-block p{font-size:14.5px;line-height:1.65;color:var(--text-dim);}
.lesson-block ul{padding-left:18px;list-style:disc;margin-top:6px;}
.lesson-block li{font-size:14px;line-height:1.7;color:var(--text-dim);margin-top:4px;}
body.light-section .lesson-block{border-bottom-color:var(--paper-line);}

/* recursos */
.resource-list{margin-top:6px;}
.resource-item{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:14px 0;border-bottom:1px solid var(--line);
}
.resource-item:last-child{border-bottom:none;}
.resource-item .t{font-size:14.5px;}
.resource-item .type{font-family:var(--f-mono);font-size:10.5px;color:var(--text-faint);white-space:nowrap;}
body.light-section .resource-item{border-bottom-color:var(--paper-line);}

/* navegación lección anterior/siguiente */
.lesson-nav{display:flex;justify-content:space-between;gap:16px;margin-top:8px;flex-wrap:wrap;}
.lesson-nav a, .lesson-nav span{font-family:var(--f-mono);font-size:12px;color:var(--text-faint);}
.lesson-nav a{color:var(--accent-dim);}
body.light-section .lesson-nav a{color:var(--accent);}

/* ==========================================================================
   TRADING HUB V2 — las cuatro puertas
   Deliberadamente NO son cards: son filas editoriales separadas por
   hairlines, con el verbo en display grande a la izquierda y la explicación
   a la derecha. Un grid de cuatro cajas con icono sería exactamente la
   estética SaaS que este sitio no quiere.
   ========================================================================== */
.hero-keyline{
  display:flex;flex-wrap:wrap;gap:0;margin-top:26px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.hero-keyline span{
  font-family:var(--f-mono);font-size:11px;letter-spacing:0.06em;
  text-transform:uppercase;color:var(--text-faint);
  padding:12px 0;flex:1 1 100%;
  border-bottom:1px solid var(--line);
}
.hero-keyline span:last-child{border-bottom:none;}
@media (min-width:640px){
  .hero-keyline span{flex:1 1 0;padding:14px 18px;border-bottom:none;border-left:1px solid var(--line);}
  .hero-keyline span:first-child{padding-left:0;border-left:none;}
}
body.light-section .hero-keyline{border-color:var(--paper-line);}
body.light-section .hero-keyline span{color:var(--paper-faint);border-color:var(--paper-line);}

.pillars{border-top:1px solid var(--line);margin-top:8px;}
.pillar{
  position:relative;display:block;
  padding:26px 0 24px;
  border-bottom:1px solid var(--line);
  text-decoration:none;color:inherit;
}
.pillar::before{
  content:"";position:absolute;inset:0 -16px;
  background:var(--accent-wash);opacity:0;
  transition:opacity .18s ease;pointer-events:none;
}
.pillar:hover::before, .pillar:focus-visible::before{opacity:1;}
.pillar > *{position:relative;}
.pillar-verb{
  display:block;
  font-family:var(--f-display);font-weight:600;
  font-size:clamp(32px,10vw,54px);line-height:0.92;letter-spacing:-0.025em;
  color:var(--text);
  transition:color .18s ease;
}
.pillar:hover .pillar-verb{color:var(--accent-dim);}
.pillar-name{
  display:block;margin-top:12px;
  font-family:var(--f-mono);font-size:11px;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--accent-dim);
}
.pillar-line{
  display:block;margin-top:10px;font-size:15px;line-height:1.6;
  color:var(--text-dim);max-width:44ch;
}
.pillar-go{
  display:inline-block;margin-top:14px;
  font-family:var(--f-mono);font-size:11px;letter-spacing:0.05em;
  color:var(--text-faint);transition:color .18s ease, transform .18s ease;
}
.pillar:hover .pillar-go{color:var(--accent-dim);}
@media (min-width:820px){
  .pillar{
    display:grid;grid-template-columns:minmax(0,8fr) minmax(0,11fr);
    gap:16px 48px;align-items:start;padding:34px 0 32px;
  }
  .pillar-verb{grid-column:1;grid-row:1 / span 2;font-size:clamp(40px,4.4vw,58px);}
  .pillar-name{grid-column:2;grid-row:1;margin-top:6px;}
  .pillar-line{grid-column:2;grid-row:2;margin-top:0;}
  .pillar-go{grid-column:2;grid-row:3;margin-top:12px;}
}
body.light-section .pillars, body.light-section .pillar{border-color:var(--paper-line);}

/* Mi camino — sección secundaria: presente, pero sin competir con las cuatro
   puertas. Por eso no es un quinto pilar sino un bloque aparte. */
.camino-block{
  border-left:2px solid var(--line-strong);padding-left:22px;
}
.camino-block .t{font-family:var(--f-display);font-size:var(--step-h3);line-height:1.35;color:var(--text);}
.camino-block p{margin-top:10px;font-size:15px;line-height:1.6;color:var(--text-dim);max-width:46ch;}

/* Cadena de contenidos — cómo se relacionan curso / caso / psico / diario.
   Tipográfica y sin flechas de funnel comercial. */
.chain{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-top:6px;}
.chain a, .chain span{
  font-family:var(--f-mono);font-size:11.5px;letter-spacing:0.05em;
  text-transform:uppercase;color:var(--text-faint);
}
.chain a{color:var(--text-dim);border-bottom:1px solid var(--line-strong);padding-bottom:2px;}
.chain a:hover{color:var(--accent-dim);border-bottom-color:var(--accent-dim);}
.chain .arr{opacity:.45;}

/* ==========================================================================
   CASOS REALES — biblioteca de decisiones
   Lo primero que se lee de cada entrada NO es el título ni el resultado:
   es el tipo de decisión. Así la lista se lee como un índice de decisiones
   y no como una galería de trades.
   ========================================================================== */
.case-kind{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--f-mono);font-size:10.5px;font-weight:500;
  letter-spacing:0.13em;text-transform:uppercase;
  color:var(--text-dim);
}
.case-kind::before{
  content:"";width:16px;height:2px;background:var(--text-faint);flex-shrink:0;
}
.case-kind.k-pos{color:var(--pos);}
.case-kind.k-pos::before{background:var(--pos);}
.case-kind.k-neg{color:var(--neg);}
.case-kind.k-neg::before{background:var(--neg);}
.case-kind.k-amber{color:var(--amber);}
.case-kind.k-amber::before{background:var(--amber);}
.case-kind.is-lg{font-size:11.5px;letter-spacing:0.15em;}
.case-kind.is-lg::before{width:24px;}

.case-library{border-top:1px solid var(--line);margin-top:10px;}
.case-entry{
  position:relative;display:block;
  padding:24px 0;border-bottom:1px solid var(--line);
  text-decoration:none;color:inherit;
}
.case-entry::before{
  content:"";position:absolute;inset:0 -16px;
  background:var(--accent-wash);opacity:0;transition:opacity .18s ease;pointer-events:none;
}
.case-entry:hover::before, .case-entry:focus-visible::before{opacity:1;}
.case-entry > *{position:relative;}
.case-title{
  display:block;margin-top:12px;
  font-family:var(--f-display);font-size:clamp(19px,3.4vw,24px);
  line-height:1.25;color:var(--text);
}
.case-entry:hover .case-title{color:var(--accent-dim);}
.case-where{
  display:block;margin-top:8px;
  font-family:var(--f-mono);font-size:11px;letter-spacing:0.03em;color:var(--text-faint);
}
.case-take{
  display:block;margin-top:12px;
  font-family:var(--f-display);font-style:italic;font-size:15px;line-height:1.55;
  color:var(--text-dim);max-width:52ch;
}
@media (min-width:820px){
  .case-entry{
    display:grid;grid-template-columns:minmax(0,7fr) minmax(0,10fr);
    gap:6px 40px;align-items:start;padding:28px 0;
  }
  .case-entry .case-kind{grid-column:1;grid-row:1;margin-top:6px;}
  .case-entry .case-where{grid-column:1;grid-row:2;margin-top:10px;}
  .case-entry .case-title{grid-column:2;grid-row:1;margin-top:0;}
  .case-entry .case-take{grid-column:2;grid-row:2;margin-top:10px;}
}

/* Leyenda de tipos: los siete tipos existen aunque no todos tengan caso
   publicado. Los vacíos se atenúan en vez de esconderse — la arquitectura
   queda visible y admite filtrado más adelante sin rediseño. */
.case-legend{display:grid;grid-template-columns:1fr;gap:11px 26px;margin-top:10px;}
@media (min-width:520px){.case-legend{grid-template-columns:1fr 1fr;}}
@media (min-width:900px){.case-legend{grid-template-columns:repeat(3,1fr);}}
.case-legend .case-kind{font-size:10px;}
.case-legend .is-empty{opacity:.38;}

/* ==========================================================================
   PSICOTRADING — mapa de patrones
   ========================================================================== */
.psy-moment{
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--text-faint);
  display:block;margin-bottom:2px;
}
.psy-list{border-top:1px solid var(--line);margin-top:10px;}
.psy-entry{
  position:relative;display:block;padding:22px 0;
  border-bottom:1px solid var(--line);text-decoration:none;color:inherit;
}
.psy-entry::before{
  content:"";position:absolute;inset:0 -16px;background:var(--accent-wash);
  opacity:0;transition:opacity .18s ease;pointer-events:none;
}
.psy-entry:hover::before, .psy-entry:focus-visible::before{opacity:1;}
.psy-entry > *{position:relative;}
.psy-title{
  display:block;margin-top:8px;
  font-family:var(--f-display);font-size:clamp(18px,3.2vw,22px);line-height:1.3;color:var(--text);
}
.psy-entry:hover .psy-title{color:var(--accent-dim);}
.psy-desc{display:block;margin-top:8px;font-size:14.5px;line-height:1.6;color:var(--text-dim);max-width:52ch;}
.psy-case{display:block;margin-top:10px;font-family:var(--f-mono);font-size:11px;color:var(--text-faint);letter-spacing:0.03em;}
.psy-entry:hover .psy-case{color:var(--accent-dim);}

/* Patrones todavía sin pieza escrita: se enseñan, atenuados y sin enlace.
   Decir "esto existe y aún no está escrito" es más honesto que ocultarlo.
   Va como índice tipográfico que fluye, no como rejilla de celdas: una
   cuadrícula de diez cajas aquí se leería como un panel de control. */
.pattern-flow{
  display:flex;flex-wrap:wrap;align-items:baseline;
  gap:2px 6px;margin-top:16px;max-width:62ch;
}
.pattern-flow a, .pattern-flow > span{
  font-family:var(--f-display);font-weight:500;
  font-size:clamp(17px,2.3vw,21px);line-height:1.55;
}
.pattern-flow a{color:var(--text);border-bottom:1px solid var(--line-strong);}
.pattern-flow a:hover{color:var(--accent-dim);border-bottom-color:var(--accent-dim);}
.pattern-flow > span{color:var(--text-faint);}
.pattern-flow .sep{
  font-family:var(--f-body);font-size:14px;color:var(--text-faint);opacity:.45;
}

@media (prefers-reduced-motion: reduce){
  *{transition-duration:0.001ms !important;animation-duration:0.001ms !important;}
}

/* ==========================================================================
   HOME V2 — presentación personal
   Bloques grandes, tipografía editorial, hairlines y aire. Ninguna sección
   se resuelve con una rejilla de cards: la única cuadrícula real es la de
   redes, y ahí la caja existe porque el objetivo declarado es poder pulsarla
   sin apuntar.
   ========================================================================== */

/* --- Hero: la primera pantalla presenta a una persona, no un producto --- */
.hero-personal{padding-bottom:8px;}
/* En móvil el retrato se recorta a apaisado: con 4/5 a 390px la imagen come
   toda la primera pantalla y el claim queda por debajo del pliegue — quien
   entra ve un rectángulo oscuro, no una presentación. Con 5/4 caben imagen,
   nombre, claim y el arranque del texto en la primera vista. */
.hero-media .figure{aspect-ratio:5/4;max-height:min(40vh,330px);}
.hero-copy{padding-top:34px;padding-bottom:8px;}
.hero-claim{
  font-family:var(--f-display);font-weight:600;
  font-size:clamp(40px,10.5vw,76px);line-height:0.96;letter-spacing:-0.03em;
  margin-top:2px;
}
.hero-claim .accented{color:var(--accent-dim);}
.hero-lede{margin-top:22px;max-width:48ch;}
.hero-cta{margin-top:26px;}
.hero-personal .hero-keyline{margin-top:30px;}

@media (min-width:900px){
  /* En desktop el retrato deja de ser una banda superior y pasa a convivir
     con el claim: la marca y la cara se leen a la vez, que es justo lo que
     una presentación personal necesita en los primeros cinco segundos. */
  .hero-personal{
    max-width:var(--wide-w);margin:0 auto;
    padding:44px 28px 16px;
    display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,0.98fr);
    gap:0 56px;align-items:center;
  }
  .hero-copy{order:1;max-width:none;padding:0;margin:0;}
  .hero-media{order:2;}
  .hero-media .figure{aspect-ratio:4/5;max-height:min(72vh,620px);}
  .hero-lede{max-width:42ch;}
}
@media (min-width:1180px){
  .hero-personal{gap:0 80px;padding-top:56px;}
}

/* --- Ritmo común de sección --------------------------------------------- */
.section-h2{font-size:var(--step-h2);line-height:1.15;max-width:20ch;}
.prose{margin-top:22px;}
.prose p{font-size:15.5px;line-height:1.75;color:var(--text-dim);max-width:60ch;}
.prose > p + p{margin-top:18px;}
.note-line{
  margin-top:18px;font-family:var(--f-mono);font-size:11.5px;line-height:1.7;
  color:var(--text-faint);max-width:58ch;
}

/* --- Evolución: cinco filas, no un diagrama de flujo -------------------- */
.evo{border-top:1px solid var(--line);margin-top:30px;}
.evo-step{
  position:relative;
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  gap:6px 16px;align-items:baseline;
  padding:22px 0;border-bottom:1px solid var(--line);
  color:inherit;text-decoration:none;
}
.evo-step::before{
  content:"";position:absolute;inset:0 -16px;
  background:var(--accent-wash);opacity:0;transition:opacity .18s ease;pointer-events:none;
}
a.evo-step:hover::before, a.evo-step:focus-visible::before{opacity:1;}
.evo-step > *{position:relative;}
.evo-n{
  grid-column:1;grid-row:1;
  font-family:var(--f-mono);font-size:11px;letter-spacing:0.06em;color:var(--text-faint);
}
.evo-stage{
  grid-column:2;grid-row:1;
  font-family:var(--f-display);font-weight:600;
  font-size:clamp(21px,4.6vw,29px);line-height:1.1;letter-spacing:-0.015em;
  color:var(--text);transition:color .18s ease;
}
a.evo-step:hover .evo-stage{color:var(--accent-dim);}
.evo-line{
  grid-column:2;grid-row:2;
  font-size:14.5px;line-height:1.6;color:var(--text-dim);max-width:54ch;
}
.evo-go{grid-column:3;grid-row:1;color:var(--text-faint);transition:color .18s ease;}
a.evo-step:hover .evo-go{color:var(--accent-dim);}
.evo-step.is-now .evo-n{color:var(--pos);}
.evo-step.is-now .evo-stage::after{
  content:"";display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--pos);margin-left:10px;vertical-align:middle;
  box-shadow:0 0 0 4px rgba(73,176,138,0.16);
}
@media (min-width:760px){
  .evo-step{grid-template-columns:auto minmax(0,7fr) minmax(0,11fr) auto;padding:26px 0;}
  .evo-stage{grid-column:2;}
  .evo-line{grid-column:3;grid-row:1;}
  .evo-go{grid-column:4;}
}

/* --- Formación: etiquetas con cuerpo, no chips de dashboard ------------- */
.tag-flow{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px;}
.tag-item{
  display:inline-flex;align-items:center;min-height:46px;padding:0 18px;
  border:1px solid var(--line-strong);border-radius:999px;
  font-family:var(--f-mono);font-size:12px;letter-spacing:0.04em;
  color:var(--text-dim);transition:color .15s ease, border-color .15s ease;
}
a.tag-item:hover{color:var(--text);border-color:var(--accent-dim);}

/* --- Batallas: índice tipográfico, los huecos se ven ------------------- */
.battle-flow{
  display:flex;flex-wrap:wrap;align-items:baseline;
  gap:2px 8px;margin-top:26px;max-width:60ch;
}
.battle-flow a, .battle-flow > span:not(.sep){
  font-family:var(--f-display);font-weight:500;
  font-size:clamp(18px,2.7vw,24px);line-height:1.5;padding:5px 0;
}
.battle-flow a{color:var(--text);border-bottom:1px solid var(--line-strong);}
.battle-flow a:hover{color:var(--accent-dim);border-bottom-color:var(--accent-dim);}
.battle-flow > span:not(.sep){color:var(--text-faint);}
.battle-flow .sep{font-family:var(--f-body);font-size:14px;color:var(--text-faint);opacity:.42;}
.battles-quote{margin-top:34px;font-size:var(--step-h3);}

/* --- Fuera del gráfico: tres piezas visuales, sin marco de card -------- */
.hobby-grid{display:grid;grid-template-columns:1fr;gap:26px;margin-top:30px;}
@media (min-width:720px){.hobby-grid{grid-template-columns:repeat(3,1fr);gap:22px;}}
.hobby{display:block;color:inherit;}
.hobby .figure{transition:opacity .2s ease;}
.hobby:hover .figure{opacity:.86;}
.hobby-name{
  display:block;margin-top:15px;
  font-family:var(--f-display);font-weight:600;font-size:20px;
  transition:color .15s ease;
}
.hobby:hover .hobby-name{color:var(--accent-dim);}
.hobby-line{display:block;margin-top:7px;font-size:14px;line-height:1.55;color:var(--text-dim);}

/* ==========================================================================
   REDES — la superficie clicable es la fila entera
   Requisito explícito: que se vean y que se puedan pulsar sin apuntar a
   390px. Por eso cada entrada mide 82px de alto y ocupa todo el ancho de la
   columna en móvil, y por eso el icono va dentro de un disco de 44px en vez
   de ser un glifo suelto de 14px.
   ========================================================================== */
.social-grid{
  display:grid;grid-template-columns:1fr;gap:1px;
  background:var(--line);border:1px solid var(--line);margin-top:28px;
}
@media (min-width:680px){.social-grid{grid-template-columns:1fr 1fr;}}
.social-item{
  background:var(--ink);color:inherit;text-decoration:none;
  display:flex;align-items:center;gap:16px;
  padding:18px 20px;min-height:82px;
  transition:background .18s ease;
}
body.light-section .social-grid{background:var(--paper-line);border-color:var(--paper-line);}
body.light-section .social-item{background:var(--paper);}
.social-mark{
  width:44px;height:44px;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line-strong);border-radius:50%;
  color:var(--text-dim);transition:color .18s ease, border-color .18s ease;
}
.social-icon{width:21px;height:21px;display:block;}
.social-text{display:flex;flex-direction:column;gap:4px;min-width:0;}
.social-name{
  font-family:var(--f-display);font-weight:600;font-size:17px;line-height:1.2;
  transition:color .18s ease;
}
.social-handle{
  font-family:var(--f-mono);font-weight:400;font-size:11.5px;
  color:var(--text-faint);margin-left:9px;letter-spacing:0.02em;
}
.social-context{font-size:13px;line-height:1.45;color:var(--text-dim);}
.social-arrow{margin-left:auto;padding-left:10px;color:var(--accent-dim);flex-shrink:0;}
a.social-item:hover{background:var(--surface);}
a.social-item:hover .social-name{color:var(--accent-dim);}
a.social-item:hover .social-mark{color:var(--accent-dim);border-color:var(--accent-dim);}
/* Sin URL verificada todavía: la caja se mantiene, la flecha desaparece —
   no se sugiere una acción que aún no lleva a ninguna parte. */
.social-item.is-idle .social-arrow{opacity:0;}
.social-item.is-idle .social-name{color:var(--text-dim);}
.social-grid.is-compact .social-item{min-height:74px;padding:15px 18px;}

/* Fila compacta de iconos: header desktop, drawer móvil y footer. */
.social-row{display:flex;flex-wrap:wrap;gap:4px;}
.social-chip{
  width:44px;height:44px;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid transparent;border-radius:50%;
  color:var(--text-faint);transition:color .15s ease, border-color .15s ease;
}
.social-chip:hover{color:var(--text);border-color:var(--line-strong);}
body.light-section .social-chip{color:var(--paper-faint);}
body.light-section .social-chip:hover{color:var(--paper-text);border-color:var(--paper-line);}
/* Icono preparado pero sin URL verificada todavía: mismo tamaño y spacing,
   sin hover ni cursor de enlace — reservado, no roto. */
.social-chip.is-idle{opacity:.45;cursor:default;}
.social-chip.is-idle:hover{color:var(--text-faint);border-color:transparent;}
body.light-section .social-chip.is-idle:hover{color:var(--paper-faint);border-color:transparent;}
.social-row.in-footer{margin-top:4px;}
.footer-nav{display:flex;flex-direction:column;gap:18px;}
/* Footer móvil: mismo contenido (nav, redes, legal), menos protagonismo
   vertical — paddings/gaps más ajustados y una línea de separación antes
   del bloque legal para que se lea como un grupo aparte, no como más
   contenido de la página. Nada se elimina: navegación, redes y disclaimer
   siguen presentes, solo se ajusta el ritmo vertical. */
@media (max-width:759px){
  .site-footer{padding:32px 20px 28px;}
  .footer-grid{gap:18px;}
  .footer-nav{gap:12px;}
  .social-row.in-footer{margin-top:2px;}
  .footer-legal{border-top:1px solid var(--line);padding-top:16px;line-height:1.55;}
  body.light-section .footer-legal{border-top-color:var(--paper-line);}
  .footer-copy{margin-top:6px;}
}

/* Redes dentro de la nav: en el drawer móvil van al final, separadas por una
   línea y con target de 48px; en desktop, iconos discretos junto al menú. */
.nav-social{margin-top:26px;padding-top:22px;border-top:1px solid var(--line);}
body.light-section .nav-social{border-top-color:var(--paper-line);}
.nav-social .social-chip{width:48px;height:48px;}
@media (min-width:860px){
  .nav-social{
    margin-top:0;
    padding:0 0 0 16px;
    border-top:none;
    border-left:1px solid var(--line);
    flex:0 0 auto;
    display:flex;
    align-items:center;
    width:max-content;
  }
  body.light-section .nav-social{border-left-color:var(--paper-line);}
  .nav-social .social-row{
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;
    align-items:center;
    width:max-content;
  }
  .nav-social .social-chip{width:36px;height:36px;}
  .nav-social .social-icon{width:18px;height:18px;}
}

/* ==========================================================================
   TELEGRAM / COMUNIDAD
   Visible sin gritar: un bloque con su propio fondo y su propio aire, pero
   con la misma tipografía que el resto. Nada de banner fluorescente.
   ========================================================================== */
.btn{min-height:46px;}
.btn-telegram{gap:10px;}
.btn-telegram .social-icon{width:18px;height:18px;}
.btn.is-lg{min-height:54px;padding:15px 26px;font-size:15px;}
.btn.is-lg .social-icon{width:20px;height:20px;}

.telegram-block{
  position:relative;margin-top:24px;
  border:1px solid var(--line-strong);
  background:
    radial-gradient(120% 130% at 12% 0%, rgba(62,99,240,0.13), transparent 62%),
    var(--surface);
  padding:32px 22px 30px;
}
@media (min-width:760px){.telegram-block{padding:46px 44px 42px;}}
.telegram-mark{
  display:inline-flex;width:54px;height:54px;align-items:center;justify-content:center;
  border:1px solid var(--line-strong);border-radius:50%;
  color:var(--accent-dim);margin-bottom:20px;
}
.telegram-mark .social-icon{width:26px;height:26px;}
.telegram-block .section-h2{max-width:16ch;}
.telegram-not{
  margin-top:16px;font-family:var(--f-mono);font-size:11.5px;line-height:1.75;
  color:var(--text-faint);max-width:52ch;
}

/* ==========================================================================
   CIERRE
   ========================================================================== */
section.block.closing{padding:74px 0 92px;}
.closing-quote{
  font-family:var(--f-display);font-style:italic;font-weight:500;
  font-size:clamp(23px,5vw,38px);line-height:1.32;letter-spacing:-0.01em;
  color:var(--text);max-width:24ch;text-wrap:balance;
}
.closing-sign{margin-top:22px;letter-spacing:0.06em;}

/* Anclas internas (#comunidad desde el CTA del hero): el header es sticky,
   así que el destino tiene que dejarle su altura libre o el título queda
   debajo de la barra. */
section[id]{scroll-margin-top:calc(var(--header-h) + 18px);}
@media (prefers-reduced-motion: no-preference){
  html{scroll-behavior:smooth;}
}

/* Botón primario sin destino todavía (Telegram sin URL aprobada): conserva
   la caja y el peso visual del CTA definitivo, pero no simula ser pulsable
   — sin cursor de mano y con el contraste bajado un punto. */
.btn.is-idle{cursor:default;opacity:.72;}

/* ==========================================================================
   CURSO V1 — sistema de lección, índice, glosario
   Mismo lenguaje: hairlines, mono para metadatos, display para títulos.
   Nada de cards con sombra ni barras de progreso gamificadas.
   ========================================================================== */
.course-page .course-hero{padding-top:34px;}
.course-page h1{font-size:var(--step-h1);line-height:1.02;}
.course-h1{font-size:clamp(36px,7.4vw,66px);letter-spacing:-0.02em;}
.course-page .lede{margin-top:18px;}
.prose-p{font-size:var(--step-body);line-height:1.7;color:var(--text-dim);max-width:62ch;}
.mod-kicker{display:block;font-family:var(--f-mono);font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--accent-dim);margin-bottom:14px;}
.mod-facts{display:flex;flex-wrap:wrap;gap:0;margin-top:22px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.mod-facts span{font-family:var(--f-mono);font-size:11px;letter-spacing:0.05em;text-transform:uppercase;color:var(--text-faint);padding:12px 18px 12px 0;}
.mod-facts span + span{padding-left:18px;border-left:1px solid var(--line);}
.mod-facts + .meta{margin-top:12px;}
.mod-facts + .meta a{color:var(--accent-dim);}

/* fases + módulos: filas editoriales */
.phase-flow{display:flex;flex-wrap:wrap;gap:8px 0;margin-top:18px;}
.phase-flow span{font-family:var(--f-mono);font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-dim);padding:8px 12px;border:1px solid var(--line-strong);border-radius:2px;position:relative;margin-right:22px;}
.phase-flow span::after{content:"→";position:absolute;right:-18px;top:8px;color:var(--text-faint);}
.phase-flow span:last-child{margin-right:0;}
.phase-flow span:last-child::after{content:none;}
.how-list{counter-reset:how;padding:0;margin-top:6px;list-style:none;}
.how-list li{position:relative;padding:16px 0 16px 44px;border-bottom:1px solid var(--line);font-size:15px;line-height:1.65;color:var(--text-dim);counter-increment:how;}
.how-list li::before{content:counter(how,decimal-leading-zero);position:absolute;left:0;top:18px;font-family:var(--f-mono);font-size:12px;color:var(--accent-dim);}
.how-list li:last-child{border-bottom:none;}
.phase-group{margin-top:28px;}
.phase-head{display:flex;flex-direction:column;gap:4px;padding-bottom:10px;border-bottom:1px solid var(--line-strong);}
.phase-name{font-family:var(--f-mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--accent-dim);}
.phase-line{font-size:13.5px;color:var(--text-faint);}
.mod-row{position:relative;display:grid;grid-template-columns:40px 1fr 24px;gap:0 12px;align-items:start;padding:20px 0;border-bottom:1px solid var(--line);color:inherit;}
.mod-row::before{content:"";position:absolute;inset:0 -14px;background:var(--accent-wash);opacity:0;transition:opacity .18s ease;pointer-events:none;}
.mod-row:hover::before,.mod-row:focus-visible::before{opacity:1;}
.mod-row > *{position:relative;}
.mod-n{font-family:var(--f-mono);font-size:12px;color:var(--accent-dim);padding-top:5px;}
.mod-body{display:flex;flex-direction:column;gap:4px;min-width:0;}
.mod-title{font-family:var(--f-display);font-size:clamp(19px,2.6vw,24px);font-weight:600;letter-spacing:-0.01em;line-height:1.2;}
.mod-track{font-family:var(--f-mono);font-size:10px;letter-spacing:0.08em;text-transform:uppercase;color:var(--amber);border:1px solid var(--amber);padding:2px 6px;border-radius:2px;margin-left:8px;vertical-align:middle;}
.mod-short{font-size:14px;color:var(--text-dim);line-height:1.55;}
.mod-meta{font-family:var(--f-mono);font-size:10.5px;letter-spacing:0.04em;color:var(--text-faint);margin-top:4px;}
.mod-go{color:var(--text-faint);padding-top:6px;transition:color .18s ease,transform .18s ease;}
.mod-row:hover .mod-go{color:var(--accent-dim);transform:translateX(3px);}

/* lista de lecciones (módulo, índice, sidebar) */
.lesson-list{padding:0;margin:6px 0 0;counter-reset:none;}
.lesson-list li{border-bottom:1px solid var(--line);}
.lesson-list li:last-child{border-bottom:none;}
.lesson-list a{display:grid;grid-template-columns:32px 1fr auto;gap:0 10px;align-items:baseline;padding:13px 0;min-height:44px;color:inherit;}
.lesson-list .ls-n{font-family:var(--f-mono);font-size:11.5px;color:var(--accent-dim);}
.lesson-list .ls-t{font-size:15px;line-height:1.4;}
.lesson-list .ls-dur{font-family:var(--f-mono);font-size:10.5px;color:var(--text-faint);white-space:nowrap;}
.lesson-list a:hover .ls-t{color:var(--accent-dim);}
.lesson-list .is-current a{color:var(--text);}
.lesson-list .is-current .ls-t{font-weight:600;}
.lesson-list .is-current{box-shadow:inset 2px 0 0 var(--accent);padding-left:10px;margin-left:-12px;}
.phase-group .lesson-list{margin:0 0 6px 52px;}
@media (max-width:640px){.phase-group .lesson-list{margin-left:0;}}

/* barra de curso: dónde estoy */
.course-bar{position:sticky;top:calc(var(--header-h) + var(--subnav-h));z-index:60;background:rgba(10,12,16,0.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line);}
.course-bar-inner{max-width:var(--wide-w);margin:0 auto;padding:0 20px;display:flex;align-items:center;gap:10px;min-height:44px;flex-wrap:wrap;font-family:var(--f-mono);font-size:11px;letter-spacing:0.04em;color:var(--text-faint);}
.course-bar a{color:var(--text-dim);}
.course-bar a:hover{color:var(--accent-dim);}
.cb-sep{opacity:.5;}
.cb-pos{color:var(--text);}
.cb-track{flex:1 1 60px;height:2px;background:var(--line-strong);border-radius:1px;overflow:hidden;min-width:40px;}
.cb-fill{display:block;height:100%;background:var(--accent);}
.cb-index{position:relative;}
.cb-index summary{cursor:pointer;list-style:none;padding:12px 0;color:var(--accent-dim);user-select:none;}
.cb-index summary::-webkit-details-marker{display:none;}
.cb-index summary::after{content:" ▾";}
.cb-index[open] summary::after{content:" ▴";}
.cb-index .lesson-list{position:absolute;right:0;top:100%;width:min(88vw,380px);background:var(--surface-raised);border:1px solid var(--line-strong);padding:6px 16px;z-index:70;max-height:60vh;overflow:auto;}
.cb-index .side-links{position:absolute;right:0;top:calc(100% + min(60vh,420px));display:none;}
.cb-index .lesson-list .ls-t{font-size:13.5px;}
.cb-index .lesson-list .is-current{margin-left:-16px;padding-left:14px;}
@media (min-width:1100px){.cb-index{display:none;}}

/* layout de lección: sidebar en desktop ancho, columna única en móvil */
.lesson-layout{max-width:var(--wide-w);margin:0 auto;padding:0 20px;}
.lesson-side{display:none;}
.lesson-main{max-width:var(--content-w);margin:0 auto;padding:34px 0 40px;}
@media (min-width:1100px){
  .lesson-layout{display:grid;grid-template-columns:280px minmax(0,1fr);gap:56px;align-items:start;}
  .lesson-side{display:block;position:sticky;top:calc(var(--header-h) + var(--subnav-h) + 44px);max-height:calc(100vh - var(--header-h) - var(--subnav-h) - 60px);overflow:auto;padding:34px 0 40px;}
  .lesson-main{margin:0;max-width:680px;}
}
.side-inner{border-left:1px solid var(--line);padding-left:18px;}
.side-mod{display:block;margin-bottom:6px;color:inherit;}
.side-mod .mod-kicker{margin-bottom:6px;}
.side-mod-t{display:block;font-family:var(--f-display);font-size:17px;font-weight:600;line-height:1.25;}
.side-mod:hover .side-mod-t{color:var(--accent-dim);}
.lesson-side .lesson-list a{padding:10px 0;grid-template-columns:26px 1fr;}
.lesson-side .lesson-list .ls-t{font-size:13.5px;}
.lesson-side .lesson-list .ls-dur{display:none;}
.side-links{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:14px;}
.side-links a{font-family:var(--f-mono);font-size:11px;color:var(--text-faint);}
.side-links a:hover{color:var(--accent-dim);}

.lesson-head h1{margin-top:6px;}
.lesson-head .lede{margin-top:16px;}
.wyl{margin-top:30px;padding:20px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.wyl .eyebrow{margin-bottom:10px;}
.wyl ul{padding-left:0;}
.wyl li{position:relative;padding:5px 0 5px 22px;font-size:15px;line-height:1.55;color:var(--text-dim);}
.wyl li::before{content:"—";position:absolute;left:0;color:var(--accent-dim);}
.lesson-toc{margin-top:22px;}
.lesson-toc ol{padding-left:0;display:flex;flex-wrap:wrap;gap:6px 16px;counter-reset:toc;}
.lesson-toc li{counter-increment:toc;font-size:13px;}
.lesson-toc li::before{content:counter(toc,decimal-leading-zero) " ";font-family:var(--f-mono);font-size:10.5px;color:var(--accent-dim);}
.lesson-toc a{color:var(--text-dim);}
.lesson-toc a:hover{color:var(--accent-dim);}

.lesson-body{margin-top:26px;}
.ls-section{padding:26px 0;border-top:1px solid var(--line);scroll-margin-top:calc(var(--header-h) + var(--subnav-h) + 60px);}
.ls-section:first-child{border-top:none;padding-top:8px;}
.ls-section h2{font-size:var(--step-h2);line-height:1.15;margin-bottom:14px;}
.ls-section h3.sub{font-size:var(--step-h3);margin:22px 0 8px;}
.ls-section p,.lb p{font-size:var(--step-body);line-height:1.72;color:var(--text-dim);}
.ls-section p + p,.lb p + p{margin-top:14px;}
.ls-section p strong,.lb p strong{color:var(--text);font-weight:600;}
.ls-section ul,.ls-section ol,.lb ul,.lb ol{margin:12px 0 12px 0;padding-left:22px;}
.ls-section ul,.lb ul{list-style:disc;}
.ls-section ol,.lb ol{list-style:decimal;}
.ls-section li,.lb li{font-size:15px;line-height:1.65;color:var(--text-dim);margin-top:6px;padding-left:4px;}
.ls-section li strong{color:var(--text);}
.ls-section .pull,.lb .pull{margin:22px 0;font-size:clamp(18px,2.4vw,22px);}
.ls-section p + ul,.ls-section p + ol{margin-top:8px;}
a.gl{color:var(--text);text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px;text-decoration-color:var(--accent-dim);}
a.gl:hover{color:var(--accent-dim);}

/* callouts DEF / INT / REGLA / EJEMPLO / OJO */
.callout{margin:18px 0;padding:14px 16px 14px 18px;border-left:2px solid var(--line-strong);background:var(--surface);}
.callout .c-label{display:block;font-family:var(--f-mono);font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--text-faint);margin-bottom:6px;}
.callout p{font-size:14.5px;line-height:1.65;color:var(--text-dim);}
.callout.c-def{border-left-color:var(--accent-dim);}
.callout.c-def .c-label{color:var(--accent-dim);}
.callout.c-int{border-left-color:var(--amber);}
.callout.c-int .c-label{color:var(--amber);}
.callout.c-regla{border-left-color:var(--pos);}
.callout.c-regla .c-label{color:var(--pos);}
.callout.c-ejemplo{border-left-color:var(--text-faint);}
.callout.c-ojo{border-left-color:var(--neg);}
.callout.c-ojo .c-label{color:var(--neg);}

/* diagramas placeholder */
.diagram{margin:22px 0;}
.diagram-canvas{background:var(--surface-raised);border:1px solid var(--line-strong);position:relative;overflow:hidden;}
.diagram-canvas::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 90% at 20% 0%,rgba(62,99,240,0.10),transparent 60%);}
.diagram svg{display:block;width:100%;height:auto;color:var(--text-dim);}
.diagram svg .g{stroke:rgba(233,236,241,0.06);stroke-width:1;}
.diagram svg .p{stroke:var(--text);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round;}
.diagram svg .lvl{stroke:var(--accent-dim);stroke-width:1;stroke-dasharray:4 4;}
.diagram svg .lvl.neg{stroke:var(--neg);}
.diagram svg .t{font-family:var(--f-mono);font-size:11px;fill:var(--text-dim);}
.diagram svg .t.acc{fill:var(--accent-dim);}
.diagram svg .t.neg{fill:var(--neg);}
.diagram svg .t.dim{fill:var(--text-faint);}
.diagram svg .wick{stroke-width:1;}
.diagram svg .wick.up,.diagram svg .body.up{stroke:var(--pos);fill:var(--pos);}
.diagram svg .wick.dn,.diagram svg .body.dn{stroke:var(--neg);fill:var(--neg);}
.diagram svg .body{opacity:.85;}
.diagram svg .zone{fill:rgba(143,163,255,0.10);stroke:none;}
.diagram svg .zone.prem{fill:rgba(220,106,97,0.10);}
.diagram svg .zone.disc{fill:rgba(73,176,138,0.10);}
.diagram svg .zone.ob{fill:rgba(143,163,255,0.22);}
.diagram svg .zone.fvg{fill:rgba(214,162,78,0.18);}
.diagram svg .bar{fill:rgba(233,236,241,0.28);}
.diagram svg .bar.poc{fill:var(--accent-dim);}
.diagram svg .cell{fill:rgba(233,236,241,0.04);stroke:rgba(233,236,241,0.14);}
.diagram figcaption{font-family:var(--f-mono);font-size:10.5px;line-height:1.6;color:var(--text-faint);margin-top:8px;letter-spacing:0.02em;}

/* bloques de lección */
.key-concept{margin-top:34px;padding:26px 24px;border:1px solid var(--accent);background:linear-gradient(180deg,rgba(62,99,240,0.12),rgba(62,99,240,0.03));}
.kc-label{display:block;font-family:var(--f-mono);font-size:10.5px;letter-spacing:0.14em;text-transform:uppercase;color:var(--accent-dim);margin-bottom:10px;}
.key-concept p{font-family:var(--f-display);font-size:clamp(17px,2.2vw,21px);line-height:1.5;color:var(--text);}
.lb{margin-top:34px;padding-top:22px;border-top:1px solid var(--line);}
.lb-h{font-family:var(--f-mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--accent-dim);font-weight:500;margin-bottom:12px;}
.lb-mistake .lb-h{color:var(--neg);}
.lb-exercise{background:var(--surface);border:1px solid var(--line-strong);padding:22px 22px 24px;border-top:1px solid var(--line-strong);}
.lb-exercise .lb-h{color:var(--pos);}
.checklist{padding-left:0 !important;list-style:none !important;margin-top:4px !important;}
.checklist li{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--line);margin:0;font-size:15px;}
.checklist li:last-child{border-bottom:none;}
.ck-box{flex-shrink:0;width:16px;height:16px;border:1px solid var(--line-strong);border-radius:2px;margin-top:4px;}
.summary{padding-left:0 !important;list-style:none !important;counter-reset:sm;}
.summary li{counter-increment:sm;position:relative;padding:10px 0 10px 40px;border-bottom:1px solid var(--line);margin:0;font-size:15.5px;line-height:1.6;color:var(--text);}
.summary li:last-child{border-bottom:none;}
.summary li::before{content:counter(sm,decimal-leading-zero);position:absolute;left:0;top:12px;font-family:var(--f-mono);font-size:11px;color:var(--accent-dim);}
.rel-grid{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line);border:1px solid var(--line);}
@media (min-width:640px){.rel-grid{grid-template-columns:1fr 1fr;}}
.rel-card{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;gap:2px 10px;background:var(--ink);padding:16px 18px;color:inherit;min-height:44px;}
.rel-card:hover{background:var(--surface);}
.rel-k{font-family:var(--f-mono);font-size:10px;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-faint);}
.rel-t{font-family:var(--f-display);font-size:15.5px;line-height:1.3;}
.rel-go{grid-column:2;grid-row:1 / span 2;align-self:center;color:var(--accent-dim);}
.gl-chips{display:flex;flex-wrap:wrap;gap:8px;}
.gl-chip{font-family:var(--f-mono);font-size:11.5px;padding:8px 12px;border:1px solid var(--line-strong);border-radius:2px;color:var(--text-dim);min-height:36px;display:inline-flex;align-items:center;}
.gl-chip:hover{color:var(--accent-dim);border-color:var(--accent-dim);}
.lb-glossary .meta a{color:var(--accent-dim);}
.prevnext{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:36px;}
@media (min-width:560px){.prevnext{grid-template-columns:1fr 1fr;}}
.pn-cell{display:flex;flex-direction:column;gap:6px;padding:18px 20px;background:var(--ink);color:inherit;min-height:44px;}
.pn-cell.next{text-align:right;}
.pn-cell:hover{background:var(--surface);}
.pn-cell.is-empty{opacity:.45;}
.pn-k{font-family:var(--f-mono);font-size:10.5px;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-faint);}
.pn-t{font-family:var(--f-display);font-size:16px;line-height:1.3;}
a.pn-cell:hover .pn-t{color:var(--accent-dim);}

/* glosario */
.gl-letters{display:flex;flex-wrap:wrap;gap:4px;margin-top:22px;}
.gl-letters a{font-family:var(--f-mono);font-size:12px;min-width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);color:var(--text-dim);}
.gl-letters a:hover{color:var(--accent-dim);border-color:var(--accent-dim);}
.gl-group{padding:10px 0 18px;scroll-margin-top:calc(var(--header-h) + var(--subnav-h) + 16px);}
.gl-letter{font-family:var(--f-display);font-size:clamp(30px,5vw,44px);color:var(--accent-dim);border-bottom:1px solid var(--line-strong);padding-bottom:6px;margin:10px 0 4px;}
.gl-entry{padding:18px 0;border-bottom:1px solid var(--line);scroll-margin-top:calc(var(--header-h) + var(--subnav-h) + 16px);}
.gl-entry:target{box-shadow:inset 2px 0 0 var(--accent);padding-left:14px;margin-left:-16px;}
.gl-term{font-size:19px;}
.gl-alias{font-family:var(--f-mono);font-size:11px;color:var(--text-faint);font-weight:400;letter-spacing:0.02em;margin-left:6px;}
.gl-short{margin-top:6px;font-size:15px;line-height:1.6;color:var(--text-dim);}
.gl-more{margin-top:8px;}
.gl-more summary{cursor:pointer;font-family:var(--f-mono);font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:var(--accent-dim);list-style:none;padding:6px 0;}
.gl-more summary::-webkit-details-marker{display:none;}
.gl-more summary::after{content:" ▾";}
.gl-more[open] summary::after{content:" ▴";}
.gl-more p{font-size:14.5px;line-height:1.7;color:var(--text-dim);margin-top:10px;}
.gl-see,.gl-taught{font-family:var(--f-mono) !important;font-size:11px !important;color:var(--text-faint) !important;}
.gl-see a,.gl-taught a{color:var(--accent-dim);}

/* Fix: figuras de apertura sin contenedor (Fuera del gráfico / Viajes)
   quedaban ancladas a la izquierda al recortarse por max-height. */
section.block > .figure{margin:0 auto;max-width:var(--wide-w);width:100%;}
@media (min-width:860px){section.block > .figure.ratio-wide{aspect-ratio:21/9;max-height:min(64vh,560px);}}

/* ==========================================================================
   PSICOTRADING V2 — página larga, escaneable, con anclas
   ========================================================================== */
.psy-hero{padding:44px 0 34px;}
.psy-hero h1{font-size:clamp(46px,10vw,104px);line-height:0.95;letter-spacing:-0.03em;}
.psy-claim{margin-top:22px;font-family:var(--f-display);font-style:italic;font-weight:500;font-size:clamp(20px,3.2vw,30px);line-height:1.3;color:var(--text);max-width:24ch;}
.psy-lede{margin-top:22px;max-width:60ch;}
.psy-lede p{font-size:var(--step-lede);line-height:1.6;color:var(--text-dim);}
.psy-lede p + p{margin-top:12px;font-size:var(--step-body);}
.psy-rule{display:flex;gap:0;margin-top:30px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.psy-rule span{flex:1;font-family:var(--f-mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--accent-dim);padding:12px 0;position:relative;}
.psy-rule span + span{padding-left:18px;}
.psy-rule span + span::before{content:"→";position:absolute;left:0;color:var(--text-faint);}
@media (max-width:480px){.psy-rule span{font-size:10px;letter-spacing:0.1em;}}

.psy-nav{position:sticky;top:calc(var(--header-h) + var(--subnav-h));z-index:60;background:rgba(10,12,16,0.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.psy-nav-inner{max-width:920px;margin:0 auto;padding:0 20px;display:flex;gap:0;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.psy-nav-inner::-webkit-scrollbar{display:none;}
.psy-nav a{flex-shrink:0;font-family:var(--f-mono);font-size:11px;letter-spacing:0.06em;text-transform:uppercase;color:var(--text-dim);padding:14px 14px 13px 0;margin-right:10px;border-bottom:2px solid transparent;min-height:44px;display:inline-flex;align-items:center;}
.psy-nav a:hover{color:var(--text);}
.psy-nav a.is-active{color:var(--accent-dim);border-bottom-color:var(--accent);}

.psy-sec{padding:56px 0;border-top:1px solid var(--line);scroll-margin-top:calc(var(--header-h) + var(--subnav-h) + 48px);}
.psy-sec.psy-first{border-top:none;}
.psy-h2{font-size:clamp(28px,4.6vw,44px);line-height:1.08;letter-spacing:-0.02em;max-width:22ch;}
.psy-intro{margin-top:18px;font-size:var(--step-lede);line-height:1.55;color:var(--text-dim);max-width:58ch;}
.psy-prose{margin-top:22px;max-width:62ch;}
.psy-prose p{font-size:var(--step-body);line-height:1.72;color:var(--text-dim);}
.psy-prose p + p{margin-top:14px;}
.psy-prose p strong{color:var(--text);}
.psy-prose ul{list-style:disc;padding-left:22px;margin:12px 0;}
.psy-prose li{font-size:15px;line-height:1.65;color:var(--text-dim);margin-top:6px;}
.psy-prose .pull{margin:22px 0;}
.psy-prose .callout{margin:18px 0;}
.recog-inline{margin-top:26px;font-family:var(--f-display);font-style:italic;font-size:clamp(18px,2.4vw,23px);line-height:1.4;color:var(--text);border-left:2px solid var(--accent);padding-left:18px;max-width:40ch;}
.psy-recog{padding:64px 0;border-top:1px solid var(--line);background:radial-gradient(90% 120% at 50% 100%,rgba(62,99,240,0.12),transparent 70%);}
.recog-line{font-family:var(--f-display);font-weight:500;font-style:italic;font-size:clamp(26px,5.2vw,52px);line-height:1.12;letter-spacing:-0.02em;color:var(--text);max-width:22ch;}

/* ciclo de decisión */
.cycle{margin-top:26px;display:grid;grid-template-columns:1fr;gap:1px;background:var(--line);border:1px solid var(--line);}
@media (min-width:720px){.cycle{grid-template-columns:repeat(4,1fr);}}
.cyc-step{background:var(--ink);padding:16px 16px 18px;display:flex;flex-direction:column;gap:4px;position:relative;}
.cyc-n{font-family:var(--f-mono);font-size:10.5px;color:var(--accent-dim);}
.cyc-k{font-family:var(--f-display);font-size:18px;font-weight:600;}
.cyc-ex{font-size:13px;color:var(--text-faint);line-height:1.45;}
.cyc-loop{grid-column:1 / -1;background:var(--surface);font-family:var(--f-mono);font-size:11px;letter-spacing:0.06em;color:var(--text-faint);padding:12px 16px;}

/* filas desplegables (sesgos / emociones / conductas) */
.prow-list{margin-top:26px;border-top:1px solid var(--line-strong);}
.prow{border-bottom:1px solid var(--line);}
.prow summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:36px 1fr 28px;gap:0 12px;align-items:start;padding:18px 0;min-height:44px;}
.prow summary::-webkit-details-marker{display:none;}
.prow-n{font-family:var(--f-mono);font-size:12px;color:var(--accent-dim);padding-top:4px;}
.prow-head{display:flex;flex-direction:column;gap:4px;min-width:0;}
.prow-t{font-family:var(--f-display);font-size:clamp(19px,2.6vw,24px);font-weight:600;letter-spacing:-0.01em;line-height:1.2;}
.prow-s{font-size:14px;color:var(--text-faint);line-height:1.5;}
.prow-s.prow-line{font-family:var(--f-display);font-style:italic;font-size:16px;color:var(--text-dim);}
.prow-tgl{font-family:var(--f-mono);font-size:18px;color:var(--text-faint);text-align:right;transition:transform .2s ease;}
.prow[open] .prow-tgl{transform:rotate(45deg);color:var(--accent-dim);}
.prow summary:hover .prow-t{color:var(--accent-dim);}
.prow-body{padding:0 0 26px 48px;}
@media (max-width:560px){.prow-body{padding-left:0;}}
.kv{padding:12px 0;border-top:1px dashed var(--line);}
.kv:first-child{border-top:none;padding-top:0;}
.kv-k{display:block;font-family:var(--f-mono);font-size:10.5px;letter-spacing:0.12em;text-transform:uppercase;color:var(--accent-dim);margin-bottom:6px;}
.kv p{font-size:15px;line-height:1.68;color:var(--text-dim);}
.prow-body .rel-card{margin-top:14px;border:1px solid var(--line);}

/* rutina */
.rt-grid{display:grid;grid-template-columns:1fr;gap:28px;margin-top:26px;}
@media (min-width:860px){.rt-grid{grid-template-columns:repeat(3,1fr);gap:32px;}}
.rt-col h3{font-family:var(--f-mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--accent-dim);font-weight:500;padding-bottom:10px;border-bottom:1px solid var(--line-strong);}
.rt-col li{display:flex;flex-direction:column;gap:3px;padding:12px 0;border-bottom:1px solid var(--line);}
.rt-k{font-family:var(--f-display);font-size:15.5px;font-weight:600;}
.rt-v{font-size:13.5px;line-height:1.55;color:var(--text-dim);}

/* journal */
.jfields{margin-top:24px;border-top:1px solid var(--line-strong);}
.jfields li{display:grid;grid-template-columns:36px 1fr;gap:2px 12px;padding:14px 0;border-bottom:1px solid var(--line);}
.jf-n{font-family:var(--f-mono);font-size:11.5px;color:var(--accent-dim);grid-row:1 / span 2;padding-top:3px;}
.jf-l{font-family:var(--f-display);font-size:16.5px;font-weight:600;}
.jf-h{font-size:13.5px;color:var(--text-faint);line-height:1.5;}
.psy-outro{margin-top:18px;font-size:14.5px;color:var(--text-dim);line-height:1.6;}
.psy-outro a{color:var(--accent-dim);}

/* protocolos */
.proto-grid{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:26px;}
@media (min-width:860px){.proto-grid{grid-template-columns:1fr 1fr;}}
.proto{background:var(--ink);padding:24px 22px 26px;}
.proto h3{font-size:19px;}
.proto-when{margin-top:6px;font-family:var(--f-mono);font-size:11px;letter-spacing:0.04em;color:var(--text-faint);line-height:1.5;}
.proto-steps{margin-top:14px;counter-reset:ps;}
.proto-steps li{counter-increment:ps;position:relative;padding:8px 0 8px 32px;font-size:14.5px;line-height:1.6;color:var(--text-dim);border-top:1px dashed var(--line);}
.proto-steps li::before{content:counter(ps);position:absolute;left:0;top:9px;font-family:var(--f-mono);font-size:11px;color:var(--accent-dim);}
.proto-note{margin-top:12px;font-family:var(--f-mono);font-size:10.5px;color:var(--text-faint);line-height:1.6;}

/* ejercicios */
.pex-list{margin-top:26px;border-top:1px solid var(--line-strong);}
.pex{display:grid;grid-template-columns:36px 1fr;gap:0 12px;padding:22px 0;border-bottom:1px solid var(--line);}
.pex-n{font-family:var(--f-mono);font-size:12px;color:var(--pos);padding-top:5px;}
.pex h3{font-size:19px;}
.pex-dur{font-family:var(--f-mono);font-size:10.5px;color:var(--text-faint);font-weight:400;margin-left:8px;letter-spacing:0.04em;}
.pex p{margin-top:10px;font-size:15px;line-height:1.68;color:var(--text-dim);}
.pex ol,.pex ul{margin-top:10px;padding-left:22px;list-style:decimal;}
.pex ul{list-style:disc;}
.pex li{font-size:14.5px;line-height:1.6;color:var(--text-dim);margin-top:6px;}
.pex .callout{margin:14px 0 0;}

/* casos reales */
.case-rows{margin-top:24px;border-top:1px solid var(--line-strong);}
.case-row{display:flex;flex-direction:column;gap:6px;padding:18px 0;border-bottom:1px solid var(--line);color:inherit;}
.case-row:hover .case-row-t{color:var(--accent-dim);}
.case-row-t{font-family:var(--f-display);font-size:clamp(18px,2.4vw,22px);font-weight:600;line-height:1.25;}
.case-row-m{font-size:14px;color:var(--text-dim);line-height:1.55;max-width:60ch;}
.note-rows{margin-top:10px;border-top:1px solid var(--line);}
.note-row{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:14px 0;border-bottom:1px solid var(--line);color:inherit;min-height:44px;}
.note-k{font-family:var(--f-mono);font-size:10.5px;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-faint);}
.note-t{font-family:var(--f-display);font-size:16px;}
.note-row:hover .note-t{color:var(--accent-dim);}

/* libros */
.books{margin-top:24px;border-top:1px solid var(--line-strong);}
.book{display:grid;grid-template-columns:1fr;gap:4px;padding:16px 0;border-bottom:1px solid var(--line);}
@media (min-width:720px){.book{grid-template-columns:minmax(0,1.1fr) minmax(0,1.6fr);gap:2px 28px;}.book-t{grid-column:1;}.book-a{grid-column:1;}.book-w{grid-column:2;grid-row:1 / span 2;}.book-topic{grid-column:1;}}
.book-t{font-family:var(--f-display);font-size:17px;font-weight:600;}
.book-a{font-size:13.5px;color:var(--text-dim);}
.book-w{font-size:14px;line-height:1.6;color:var(--text-dim);}
.book-topic{font-family:var(--f-mono);font-size:10.5px;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-faint);margin-top:4px;}
.psy-note{margin-top:14px;font-family:var(--f-mono);font-size:11px;color:var(--text-faint);}

/* cierre */
.psy-close{padding:72px 0 80px;border-top:1px solid var(--line);background:linear-gradient(180deg,transparent,rgba(62,99,240,0.08));}
.psy-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px;}
.psy-tg{margin-top:18px;font-family:var(--f-mono);font-size:12px;}
.psy-tg a{color:var(--accent-dim);}

/* ==========================================================================
   MEDIA SYSTEM — content/media.json → media(id)
   Placeholders intencionales: gradiente por mood + composición + grano +
   marco. Nunca un rectángulo vacío. El asset real sustituye la caja sin
   cambiar el layout (mismo aspect-ratio).
   ========================================================================== */
.media{position:relative;overflow:hidden;margin:0;background:var(--surface-raised);display:block;}
.media .media-el{display:block;width:100%;height:100%;object-fit:cover;}
.media.r-4x5{aspect-ratio:4/5;}
.media.r-4x3{aspect-ratio:4/3;}
.media.r-3x2{aspect-ratio:3/2;}
.media.r-3x4{aspect-ratio:3/4;}
.media.r-16x9{aspect-ratio:16/9;}
.media.r-21x9{aspect-ratio:21/9;}
.media.r-1x1{aspect-ratio:1/1;}
.media.r-16x10{aspect-ratio:16/10;}
.media.r-9x16{aspect-ratio:9/16;}
.media.r-9x5{aspect-ratio:9/5;}
.media-cap{position:absolute;left:14px;bottom:12px;font-family:var(--f-mono);font-size:10px;letter-spacing:0.04em;color:rgba(255,255,255,0.7);background:rgba(0,0,0,0.38);padding:4px 9px;border-radius:3px;backdrop-filter:blur(4px);}
.media.ph .ph-field,.media.ph .ph-comp,.media.ph .ph-grain,.media.ph .ph-frame{position:absolute;inset:0;display:block;pointer-events:none;}
.media.ph .ph-grain{opacity:.55;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");}
.media.ph .ph-frame{inset:12px;border:1px solid rgba(255,255,255,0.07);}
.media.ph .ph-frame::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 120px rgba(0,0,0,0.45);}
/* moods */
.media.mood-portrait .ph-field{background:radial-gradient(70% 55% at 50% 38%,rgba(143,163,255,0.22),transparent 62%),radial-gradient(120% 80% at 50% 110%,rgba(62,99,240,0.10),transparent 60%),linear-gradient(170deg,#1B2030 0%,#12151C 55%,#0A0C10 100%);}
.media.mood-portrait .ph-comp{background:radial-gradient(38% 30% at 50% 44%,rgba(236,238,242,0.07),transparent 70%),radial-gradient(60% 40% at 50% 100%,rgba(236,238,242,0.05),transparent 70%);}
.media.mood-desk .ph-field{background:radial-gradient(60% 45% at 30% 40%,rgba(62,99,240,0.28),transparent 60%),radial-gradient(50% 40% at 75% 35%,rgba(143,163,255,0.16),transparent 60%),linear-gradient(180deg,#0E1118 0%,#0A0C10 100%);}
.media.mood-desk .ph-comp{background:linear-gradient(180deg,transparent 58%,rgba(255,255,255,0.035) 58.5%,transparent 59%),repeating-linear-gradient(90deg,transparent 0 22%,rgba(143,163,255,0.05) 22% 44%,transparent 44% 100%);background-size:100% 100%,320px 100%;background-position:0 0,18% 0;}
.media.mood-trading .ph-field{background:radial-gradient(90% 70% at 15% 20%,rgba(62,99,240,0.18),transparent 60%),linear-gradient(155deg,#1E2330 0%,#12141B 55%,#0B0C10 100%);}
.media.mood-trading .ph-comp{background:linear-gradient(0deg,transparent 0 40%,rgba(233,236,241,0.06) 40% calc(40% + 1px),transparent 0),linear-gradient(90deg,rgba(233,236,241,0.05) 1px,transparent 1px);background-size:100% 100%,12.5% 100%;}
.media.mood-travel .ph-field,.media.mood-aerial .ph-field{background:radial-gradient(110% 90% at 75% 20%,rgba(214,162,78,0.18),transparent 55%),radial-gradient(80% 60% at 20% 80%,rgba(73,176,138,0.12),transparent 60%),linear-gradient(160deg,#23262A 0%,#16181A 60%,#0E0F10 100%);}
.media.mood-travel .ph-comp,.media.mood-aerial .ph-comp{background:linear-gradient(180deg,transparent 0 62%,rgba(255,255,255,0.08) 62% calc(62% + 1px),transparent 0),radial-gradient(35% 20% at 70% 30%,rgba(255,220,170,0.10),transparent 70%);}
.media.mood-fjord .ph-field{background:radial-gradient(80% 60% at 30% 25%,rgba(143,163,255,0.14),transparent 60%),radial-gradient(70% 50% at 70% 85%,rgba(73,176,138,0.16),transparent 60%),linear-gradient(190deg,#1A2026 0%,#0F1418 55%,#0A0C0F 100%);}
.media.mood-fjord .ph-comp{background:linear-gradient(168deg,transparent 0 48%,rgba(255,255,255,0.05) 48% 50%,transparent 50%),linear-gradient(180deg,transparent 0 70%,rgba(255,255,255,0.06) 70% calc(70% + 1px),transparent 0);}
.media.mood-coast .ph-field{background:radial-gradient(80% 70% at 70% 30%,rgba(73,176,138,0.22),transparent 60%),radial-gradient(60% 50% at 20% 90%,rgba(214,162,78,0.16),transparent 60%),linear-gradient(200deg,#1B2422 0%,#111716 55%,#0B0E0D 100%);}
.media.mood-coast .ph-comp{background:radial-gradient(45% 35% at 55% 55%,rgba(255,255,255,0.06),transparent 70%);}
.media.mood-night .ph-field{background:radial-gradient(50% 40% at 50% 60%,rgba(62,99,240,0.22),transparent 60%),linear-gradient(180deg,#07080B 0%,#0A0C10 100%);}
.media.mood-night .ph-comp{background:linear-gradient(180deg,transparent 0 66%,rgba(143,163,255,0.08) 66% calc(66% + 1px),transparent 0);}
.media.mood-music .ph-field{background:radial-gradient(60% 50% at 30% 30%,rgba(220,150,90,0.18),transparent 60%),radial-gradient(50% 40% at 80% 80%,rgba(214,162,78,0.10),transparent 60%),linear-gradient(140deg,#211D1A 0%,#17140F 55%,#0D0C0A 100%);}
.media.mood-music .ph-comp{background:radial-gradient(22% 22% at 62% 52%,rgba(255,255,255,0.05),transparent 70%);}
.media.ph:hover .ph-comp{opacity:.9;}
@media (prefers-reduced-motion:no-preference){
  .media.ph .ph-comp{transition:transform 1.2s ease;}
  a:hover .media.ph .ph-comp{transform:scale(1.03);}
  a:hover .media .media-el{transform:scale(1.03);}
  .media .media-el{transition:transform 1.2s ease;}
}

/* ==========================================================================
   MARCA PERSONAL — Home V3 · Sobre mí V2 · Fuera del gráfico V2
   ========================================================================== */
/* reveal sutil: solo con motion permitido; sin JS la clase no existe y todo se ve */
@media (prefers-reduced-motion:no-preference){
  .js .reveal{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s ease;}
  .js .reveal.is-in{opacity:1;transform:none;}
}
.btn.is-idle{opacity:.55;cursor:default;}
.btn .social-icon{width:16px;height:16px;}

/* hero V3 */
.hero3{position:relative;overflow:hidden;padding:0 0 8px;}
.hero3-ambient{position:absolute;inset:0;pointer-events:none;opacity:.35;display:none;}
.hero3-ambient .media{width:100%;height:100%;aspect-ratio:auto;}
.hero3-ambient::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--ink) 0%,rgba(10,12,16,0.85) 45%,rgba(10,12,16,0.35) 100%),linear-gradient(180deg,rgba(10,12,16,0.2),var(--ink) 95%);}
@media (min-width:1100px){.hero3-ambient{display:block;}}
.hero3-inner{position:relative;max-width:var(--wide-w);margin:0 auto;padding:0 20px;display:flex;flex-direction:column;}
.hero3-media{order:1;margin:0 -20px;}
.hero3-media .media{aspect-ratio:4/5;max-height:min(62vh,540px);}
.hero3-copy{order:2;padding-top:30px;}
.hero-more{display:inline-flex;align-items:center;font-family:var(--f-mono);font-size:12px;letter-spacing:0.04em;color:var(--text-dim);padding:12px 4px;min-height:44px;}
.hero-more:hover{color:var(--accent-dim);}
@media (min-width:860px){
  .hero3-inner{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:0 56px;align-items:center;padding-top:48px;padding-bottom:40px;}
  .hero3-copy{order:1;padding-top:0;}
  .hero3-media{order:2;margin:0;}
  .hero3-media .media{max-height:min(78vh,680px);}
}
@media (min-width:1100px){.hero3-inner{gap:0 96px;padding-top:64px;}}

/* split: media + copy, alternable */
.split{display:grid;grid-template-columns:1fr;gap:26px;align-items:center;}
.split .split-media .media{max-height:min(60vh,560px);}
.split .split-copy .prose{margin-top:18px;}
@media (min-width:900px){
  .split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;}
  .split.split-rev .split-copy{order:1;}
  .split.split-rev .split-media{order:2;}
}

/* journey: narrativa con media intercalada */
.journey{margin-top:30px;border-top:1px solid var(--line);}
.jn-step{display:grid;grid-template-columns:1fr;gap:18px;padding:26px 0;border-bottom:1px solid var(--line);}
.jn-copy{position:relative;padding-left:44px;}
.jn-n{position:absolute;left:0;top:6px;font-family:var(--f-mono);font-size:12px;color:var(--accent-dim);}
.jn-stage{font-size:clamp(22px,3vw,30px);letter-spacing:-0.015em;}
.jn-copy p{margin-top:10px;font-size:15.5px;line-height:1.65;color:var(--text-dim);max-width:52ch;}
.jn-go{display:inline-block;margin-top:12px;font-family:var(--f-mono);font-size:11px;letter-spacing:0.05em;color:var(--accent-dim);min-height:24px;}
.jn-media{max-height:min(50vh,380px);}
@media (min-width:900px){
  .jn-step.has-media{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:56px;align-items:center;}
  .jn-step:nth-child(even).has-media .jn-copy{order:2;}
  .jn-step:nth-child(even).has-media .jn-media,
  .jn-step:nth-child(even).has-media .jn-media-cell{order:1;}
  .jn-step{padding:34px 0;}
}

/* la parte que no se ve */
.unseen-block{background:linear-gradient(180deg,transparent,rgba(62,99,240,0.06) 40%,transparent);}
.unseen{margin-top:26px;border-top:1px solid var(--line-strong);}
.unseen li{border-bottom:1px solid var(--line);}
.unseen a{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 0;min-height:44px;font-family:var(--f-display);font-style:italic;font-weight:500;font-size:clamp(18px,2.6vw,24px);line-height:1.25;color:var(--text);}
.unseen a::after{content:"→";font-style:normal;font-family:var(--f-mono);font-size:14px;color:var(--text-faint);flex-shrink:0;transition:color .18s ease,transform .18s ease;}
.unseen a:hover{color:var(--accent-dim);}
.unseen a:hover::after{color:var(--accent-dim);transform:translateX(3px);}

/* formación */
.study-flow{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:26px;}
@media (min-width:640px){.study-flow{grid-template-columns:1fr 1fr 1fr;}}
.study-item{display:flex;align-items:center;gap:12px;padding:16px 18px;background:var(--ink);color:inherit;min-height:56px;font-family:var(--f-display);font-size:16px;font-weight:600;}
.study-item:hover{background:var(--surface);color:var(--accent-dim);}
.study-n{font-family:var(--f-mono);font-size:11px;color:var(--accent-dim);font-weight:400;}

/* trading hoy: cuatro puertas verbales */
.tdoors{margin-top:22px;border-top:1px solid var(--line);}
.tdoor{position:relative;display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto auto;gap:2px 12px;padding:18px 0;border-bottom:1px solid var(--line);color:inherit;}
.tdoor-verb{font-family:var(--f-display);font-size:clamp(22px,3.4vw,32px);font-weight:600;letter-spacing:-0.02em;line-height:1;transition:color .18s ease;}
.tdoor-name{font-family:var(--f-mono);font-size:10.5px;letter-spacing:0.12em;text-transform:uppercase;color:var(--accent-dim);margin-top:6px;}
.tdoor-line{font-size:14px;color:var(--text-dim);line-height:1.5;max-width:40ch;margin-top:4px;}
.tdoor-go{grid-column:2;grid-row:1 / span 3;align-self:center;color:var(--text-faint);transition:color .18s ease,transform .18s ease;}
.tdoor:hover .tdoor-verb{color:var(--accent-dim);}
.tdoor:hover .tdoor-go{color:var(--accent-dim);transform:translateX(3px);}

/* fuera del gráfico en Home + destinos */
.outside-block .outside-hero{max-height:min(70vh,620px);}
.outside-copy{max-width:920px;margin:0 auto;padding:30px 0 0;}
.dest-grid{display:grid;grid-template-columns:1fr;gap:22px;margin-top:30px;}
@media (min-width:640px){.dest-grid{grid-template-columns:repeat(3,1fr);gap:20px;}}
.dest{display:block;color:inherit;}
.dest .media{aspect-ratio:4/5;max-height:min(56vh,460px);}
.dest-name{display:block;margin-top:14px;font-family:var(--f-display);font-size:20px;font-weight:600;transition:color .18s ease;}
.dest-line{display:block;margin-top:5px;font-size:14px;color:var(--text-dim);line-height:1.5;}
a.dest:hover .dest-name{color:var(--accent-dim);}
.outside-block .btn-row{margin-top:30px;}

/* cierre con fondo */
.closing3{position:relative;overflow:hidden;}
.closing-bg{position:absolute;inset:0;opacity:.45;pointer-events:none;}
.closing-bg .media{width:100%;height:100%;aspect-ratio:auto;max-height:none;}
.closing-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--ink) 0%,rgba(10,12,16,0.6) 40%,rgba(10,12,16,0.85) 100%);}
.closing3 .col-mid{position:relative;}
.closing-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;}
.closing-chip{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-mono);font-size:11.5px;letter-spacing:0.04em;padding:10px 14px;border:1px solid var(--line-strong);border-radius:2px;color:var(--text-dim);min-height:40px;}
.closing-chip:hover{color:var(--accent-dim);border-color:var(--accent-dim);}
.closing-chip .social-icon{width:14px;height:14px;}
.closing-chip.is-idle{opacity:.5;}

/* Sobre mí V2 */
.about-hero{padding:34px 0 10px;}
.about-hero-inner{display:grid;grid-template-columns:1fr;gap:28px;align-items:center;}
.about-h1{font-size:clamp(40px,8.5vw,84px);line-height:0.98;letter-spacing:-0.03em;}
.about-copy .lede{margin-top:20px;max-width:48ch;}
.about-media .media{max-height:min(64vh,560px);}
@media (min-width:860px){.about-hero{padding:56px 0 20px;}.about-hero-inner{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:72px;}.about-media .media{max-height:min(78vh,680px);}}

/* Fuera del gráfico V2 */
.fdg-hero{padding:0 0 16px;}
.fdg-hero-media{max-width:var(--wide-w);margin:0 auto;}
.fdg-lead{aspect-ratio:4/5;max-height:min(62vh,520px);}
@media (min-width:860px){.fdg-lead{aspect-ratio:21/9;max-height:min(70vh,620px);}}
.fdg-hero-copy{padding-top:34px;}
.fdg-h1{font-size:clamp(36px,7vw,72px);line-height:1;letter-spacing:-0.025em;max-width:16ch;}
.fdg-hero-copy .lede{margin-top:20px;max-width:56ch;}
.sec-head{max-width:920px;margin:0 auto 6px;}
.sec-head .lede{margin-top:14px;}
.trips{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:28px;}
@media (min-width:860px){.trips{grid-template-columns:repeat(3,1fr);}}
.trip{display:flex;flex-direction:column;background:var(--ink);color:inherit;}
.trip-media{aspect-ratio:4/5;max-height:min(60vh,520px);}
.trip-body{display:flex;flex-direction:column;gap:6px;padding:18px 20px 22px;}
.trip-k{font-family:var(--f-mono);font-size:10.5px;letter-spacing:0.12em;text-transform:uppercase;color:var(--accent-dim);}
.trip-t{font-family:var(--f-display);font-size:22px;font-weight:600;letter-spacing:-0.01em;}
.trip-l{font-size:14px;line-height:1.55;color:var(--text-dim);}
.trip-go{margin-top:8px;font-family:var(--f-mono);font-size:11px;letter-spacing:0.05em;color:var(--text-faint);}
a.trip:hover{background:var(--surface);}
a.trip:hover .trip-t{color:var(--accent-dim);}
a.trip:hover .trip-go{color:var(--accent-dim);}
.trip.is-soon .trip-k{color:var(--amber);}
.photo-lead{margin-top:28px;}
.photo-main{max-height:min(72vh,640px);}
.photo-sel{display:grid;grid-template-columns:1fr;gap:12px;margin-top:12px;}
@media (min-width:600px) and (max-width:859px){.photo-sel{grid-template-columns:repeat(3,1fr);}}
@media (min-width:860px){.photo-sel{grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px;}}
.photo-sel .media{max-height:min(50vh,420px);}
.aerial-gallery{margin-top:28px;}
.aerial-gallery .photo-lead{margin-top:0;}
.aerial-gallery .media{
  background:#080b0f;
  border:1px solid rgba(236,238,242,0.09);
  overflow:hidden;
}
.aerial-gallery .media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,11,15,0.02),rgba(8,11,15,0.18));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.025);
}
.aerial-gallery .media-el{pointer-events:none;}
.media-motion-control{
  position:absolute;right:12px;bottom:12px;z-index:3;
  min-height:44px;padding:9px 13px;border:1px solid rgba(255,255,255,0.38);
  border-radius:999px;background:rgba(8,11,15,0.82);color:#f4f5f7;
  font-family:var(--f-mono);font-size:10px;line-height:1;letter-spacing:0.08em;
  text-transform:uppercase;cursor:pointer;backdrop-filter:blur(8px);
}

/* El sistema de fuente conserva Inter y deja los glifos CJK al stack del SO;
   evita descargar una fuente china de varios MB y previene tofu. */
.i18n-zh{font-family:Inter,"Microsoft YaHei","PingFang SC","Noto Sans CJK SC",system-ui,sans-serif;}
.i18n-zh h1,.i18n-zh h2,.i18n-zh h3,.i18n-zh .h4-h2,.i18n-zh .h4-giant,.i18n-zh .pillar-verb{font-family:"Microsoft YaHei","PingFang SC","Noto Serif CJK SC",Inter,system-ui,sans-serif;letter-spacing:0;line-height:1.2;}
.media-motion-control:hover,.media-motion-control:focus-visible{
  border-color:var(--accent-dim);color:#fff;background:rgba(8,11,15,0.94);
}
.aerial-gallery [data-media="aerial-sunset-main"] .media-el{object-position:52% 50%;}
.aerial-gallery [data-media="aerial-waterfall-rainbow"] .media-el{object-position:58% 50%;}
.aerial-gallery [data-media="aerial-ice-lagoon"] .media-el{object-position:50% 55%;}
.aerial-gallery [data-media="aerial-coast-blowhole"] .media-el{object-position:53% 50%;}
@media (prefers-reduced-motion:reduce){
  .aerial-gallery .media-el{transition:none!important;}
}
.platform-block{background:linear-gradient(180deg,transparent,rgba(62,99,240,0.05) 50%,transparent);}
.pexels-mosaic-link{display:block;text-decoration:none;}
.pexels-mosaic{background:#080808;}
.pexels-mosaic picture{display:block;width:100%;height:100%;}
.pexels-mosaic .media-el{object-fit:contain;}
.music-mosaic{background:#070B16;overflow:hidden;}
.music-mosaic picture{display:block;width:100%;height:100%;}
.music-mosaic .media-el{width:100%;height:100%;object-fit:contain;object-position:center;}


.music-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;}
.music-tags span{font-family:var(--f-mono);font-size:11px;letter-spacing:0.06em;padding:8px 12px;border:1px solid var(--line-strong);border-radius:2px;color:var(--text-dim);}
/* proporciones homogéneas dentro de rejillas (el asset real se recorta con object-fit) */
.trip .media{aspect-ratio:4/5;}
.dest .media{aspect-ratio:4/5;}
.photo-sel .media{aspect-ratio:1/1;max-height:none;}
.photo-lead .media{max-height:none;}
@media (min-width:860px){.photo-lead .media,.outside-lead .media{aspect-ratio:21/9;max-height:none;}}
.split .split-media .media{max-height:none;}
@media (min-width:900px){.split .split-media .media{aspect-ratio:4/5;}}
.jn-media{max-height:none;}
@media (min-width:900px){.jn-media{aspect-ratio:3/2;}}

/* ==========================================================================
   HOME V4 — layout ancho, storytelling, fondo de velas sutil
   ========================================================================== */
:root{--home-w:1440px;}
.hw{max-width:var(--home-w);margin:0 auto;padding:0 20px;}
@media (min-width:1100px){.hw{padding:0 40px;}}
.h4-narrow{max-width:760px;}

/* header: subclaim bajo el wordmark (solo desktop) */
.wordmark{display:inline-flex;flex-direction:column;line-height:1;}
.wordmark-sub{display:none;font-family:var(--f-mono);font-size:9.5px;letter-spacing:0.16em;text-transform:uppercase;color:var(--text-faint);margin-top:5px;font-weight:400;}
@media (min-width:860px){.wordmark-sub{display:block;}}

/* textura de velas: 4–8% de opacidad, nunca un chart activo */
.h4-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;}
.bg-chart{width:100%;height:100%;display:block;}
.bg-chart .c rect,.bg-chart .c line{fill:var(--text);stroke:var(--text);opacity:.06;}
.bg-chart .c line{stroke-width:1;}
.bg-chart .s{fill:none;stroke:var(--accent-dim);stroke-width:1.2;opacity:.14;}
.bg-chart .lv{stroke:var(--accent-dim);stroke-width:1;stroke-dasharray:3 5;opacity:.12;}
.h4-hero,.h4-break,.h4-community,.h4-close{position:relative;}
.h4-hero > .hw,.h4-break > .hw,.h4-community > .hw,.h4-close > .hw{position:relative;z-index:1;}
.h4-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--ink) 0%,rgba(10,12,16,0.35) 40%,rgba(10,12,16,0.35) 60%,var(--ink) 100%);}

/* hero */
/* Mobile-first: la primera impresión debe comunicar identidad
   (FUNESMA79) y especialización (TRADER DE FUTUROS · NASDAQ) ANTES de la
   fotografía — no solo "FUNESMA79 + foto grande". El kicker es un bloque
   corto (eyebrow + una línea de rol + una micro-propuesta), no un párrafo:
   no debe convertir el hero en texto denso ni tapar la foto (no hay overlay
   sobre la imagen). "No es suerte. Es proceso." sigue siendo el h1 y sigue
   viviendo justo después de la foto, como siempre. */
.h4-hero{padding:24px 0 24px;overflow:hidden;}
.h4-hero-inner{display:flex;flex-direction:column;}
.h4-hero-kicker{order:0;margin-bottom:18px;}
.h4-hero-media{order:1;margin:0 -20px;}
.h4-hero-media .media{aspect-ratio:4/5;max-height:min(64vh,560px);}
.h4-hero-copy{order:2;padding-top:28px;}
.hero-role{
  font-family:var(--f-mono);font-weight:600;font-size:14px;letter-spacing:0.03em;
  text-transform:uppercase;color:var(--text);line-height:1.5;margin-top:2px;
}
.hero-role .role-sep{color:var(--accent-dim);}
.hero-micro{margin-top:8px;font-size:14px;line-height:1.5;color:var(--text-dim);max-width:46ch;}
.h4-lede{margin-top:22px;max-width:52ch;}
.h4-lede p{font-size:var(--step-lede);line-height:1.55;color:var(--text-dim);}
.h4-lede p + p{margin-top:12px;}
.h4-lede p:last-child{color:var(--text);}
.h4-list{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:22px;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.h4-list li{font-family:var(--f-mono);font-size:11px;letter-spacing:0.06em;text-transform:uppercase;color:var(--text-faint);}
.h4-list li:last-child{color:var(--accent-dim);flex-basis:100%;}
@media (min-width:900px){
  .h4-hero{padding:56px 0 48px;}
  .h4-hero-inner{
    display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
    grid-template-areas:"kicker media" "copy media";gap:10px 64px;align-items:start;
  }
  .h4-hero-kicker{grid-area:kicker;margin-bottom:0;}
  .h4-hero-copy{grid-area:copy;padding-top:0;}
  .h4-hero-media{grid-area:media;margin:0;align-self:center;}
  .h4-hero-media .media{max-height:min(82vh,720px);}
  .hero-role{font-size:15px;}
}
@media (min-width:1200px){.h4-hero-inner{gap:10px 96px;}.h4-hero{padding:72px 0 64px;}}

/* secciones */
.h4-sec{padding:64px 0;border-top:1px solid var(--line);}
@media (min-width:900px){.h4-sec{padding:96px 0;}}
.h4-h2{font-size:clamp(30px,4.8vw,54px);line-height:1.02;letter-spacing:-0.025em;max-width:18ch;}
.h4-h2 + .story{margin-top:22px;}
.story{max-width:56ch;}
.story p{font-size:clamp(16px,1.6vw,18px);line-height:1.65;color:var(--text-dim);}
.story p + p{margin-top:14px;}
.big-line{font-family:var(--f-display) !important;font-weight:600;font-size:clamp(24px,3.4vw,38px) !important;line-height:1.1 !important;letter-spacing:-0.02em;color:var(--text) !important;margin:22px 0 !important;text-transform:uppercase;}
.h4-quote{margin-top:44px;font-family:var(--f-display);font-style:italic;font-weight:500;font-size:clamp(24px,3.6vw,44px);line-height:1.15;letter-spacing:-0.02em;color:var(--text);border-left:2px solid var(--accent);padding-left:22px;max-width:26ch;}
.split-wide{gap:32px;}
@media (min-width:900px){.split-wide{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:72px;}.split-wide .split-media .media{aspect-ratio:4/5;max-height:min(80vh,720px);}}
.h4-two{display:grid;grid-template-columns:1fr;gap:32px;align-items:center;}
@media (min-width:900px){.h4-two{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px;}}
.h4-two .media{max-height:none;}
.h4-break{background:linear-gradient(180deg,transparent,rgba(62,99,240,0.06) 50%,transparent);overflow:hidden;}
.h4-terms{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);}
@media (min-width:640px){.h4-terms{grid-template-columns:repeat(4,1fr);}}
.h4-terms span{background:var(--ink);padding:18px 14px;font-family:var(--f-display);font-size:16px;font-weight:600;text-align:center;}
.h4-cost{background:radial-gradient(70% 60% at 20% 40%,rgba(62,99,240,0.10),transparent 70%);}
.precio-media .media-el{object-position:50% 65%;}
.travel-family-media .media-el{object-position:80% 50%;}
/* Sobre mí · «Antes del gráfico»: la caja es 3:2 en móvil (la imagen encaja
   exacta, sin recorte) y 4:5 en escritorio, donde cover recorta a lo ancho.
   Desplazamos el punto focal a la derecha para que el recorte de escritorio
   conserve rostro + sol + horizonte + reflejo. Sin efecto por debajo de 900px. */
.antes-media .media-el{object-position:92% 50%;}
.h4-changes{border-top:1px solid var(--line-strong);counter-reset:ch;}
.h4-changes li{counter-increment:ch;position:relative;padding:16px 0 16px 44px;border-bottom:1px solid var(--line);font-family:var(--f-display);font-size:clamp(18px,2.2vw,23px);font-weight:500;line-height:1.3;}
.h4-changes li::before{content:counter(ch,decimal-leading-zero);position:absolute;left:0;top:19px;font-family:var(--f-mono);font-size:12px;color:var(--accent-dim);}
.gallery-3{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:36px;}
.gallery-3 .media{aspect-ratio:4/5;max-height:none;}
.gallery-3 > :first-child{grid-column:1 / -1;}
.gallery-3 > :first-child.media,.gallery-3 > :first-child .media{aspect-ratio:3/2;}
@media (min-width:900px){.gallery-3{grid-template-columns:5fr 4fr 4fr;gap:16px;}.gallery-3 > :first-child{grid-column:auto;}.gallery-3 > :first-child.media{aspect-ratio:4/5;}}
.gallery-3.is-tight{margin-top:0;}
.method-flow{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:34px;counter-reset:none;}
@media (min-width:900px){.method-flow{grid-template-columns:repeat(7,1fr);}}
.method-flow li{background:var(--ink);padding:18px 14px;display:flex;flex-direction:column;gap:6px;position:relative;}
.mf-n{font-family:var(--f-mono);font-size:10.5px;color:var(--accent-dim);}
.mf-t{font-family:var(--f-display);font-size:17px;font-weight:600;}
@media (min-width:900px){.method-flow li:not(:last-child)::after{content:"→";position:absolute;right:-6px;top:50%;transform:translateY(-50%);color:var(--text-faint);font-size:12px;z-index:1;}}

/* ---- SEO V2 / internacional (EN + ZH) --------------------------------
   H2 semanticos con la misma apariencia que tenian los <span>, y la
   variante "rich" de .method-flow con una linea de descripcion por paso.
   Solo afecta a clases nuevas: la pagina ES /trading/ no cambia.
   Motivo de .method-flow-rich: .method-flow pasa a repeat(7,1fr) en
   >=900px y con 8 pasos + descripcion seria ilegible.               */
h2.eyebrow-h2{
  font-family:var(--f-body);font-size:11.5px;font-weight:600;letter-spacing:0.11em;
  text-transform:uppercase;color:var(--accent-dim);display:block;
  margin:0 0 14px;line-height:1.4;text-wrap:normal;
}
body.light-section h2.eyebrow-h2{color:var(--accent);}

.ahora-item h2.k{
  font-family:var(--f-body);font-size:11px;font-weight:600;letter-spacing:0.08em;
  text-transform:uppercase;color:var(--accent-dim);
  margin:0;line-height:1.4;text-wrap:normal;
}

.method-flow .mf-d{
  display:block;font-family:var(--f-body);font-size:13.5px;line-height:1.55;
  color:var(--text-dim);letter-spacing:0;text-transform:none;margin-top:2px;
}
body.light-section .method-flow .mf-d{color:var(--paper-dim);}

.method-flow-rich{grid-template-columns:1fr;}
@media (min-width:620px){.method-flow-rich{grid-template-columns:1fr 1fr;}}
@media (min-width:900px){.method-flow-rich{grid-template-columns:repeat(4,1fr);}}
.method-flow-rich li{padding:20px 16px;gap:4px;}
@media (min-width:900px){.method-flow-rich li:not(:last-child)::after{content:none;}}
/* --------------------------------------------------------------------- */

.h4-data{background:linear-gradient(180deg,transparent,rgba(62,99,240,0.05) 50%,transparent);}
.mirror{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);}
.mirror li{background:var(--surface);padding:22px 18px;font-family:var(--f-display);font-style:italic;font-size:clamp(17px,2vw,22px);color:var(--text);}
.h4-full{margin-top:48px;}
.h4-full .media{aspect-ratio:4/5;max-height:none;}
@media (min-width:860px){.h4-full .media{aspect-ratio:21/9;}}
.h4-community{padding:80px 0;overflow:hidden;}
.h4-giant{margin-top:44px;font-family:var(--f-display);font-weight:600;font-size:clamp(34px,6.5vw,88px);line-height:0.98;letter-spacing:-0.03em;max-width:14ch;}
.yesno{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:40px;}
@media (min-width:720px){.yesno{grid-template-columns:2fr 3fr;}}
.yesno-col{background:var(--ink);padding:24px 22px 26px;}
.yesno-k{display:block;font-family:var(--f-mono);font-size:11px;letter-spacing:0.16em;text-transform:uppercase;margin-bottom:12px;}
.yesno-col.no .yesno-k{color:var(--neg);}
.yesno-col.yes .yesno-k{color:var(--pos);}
.yesno li{padding:9px 0;border-top:1px dashed var(--line);font-size:15.5px;color:var(--text-dim);}
.yesno-col.yes li{color:var(--text);}
/* ecosistema de redes */
.eco-grid{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:34px;}
@media (min-width:640px){.eco-grid{grid-template-columns:1fr 1fr;}}
@media (min-width:1000px){.eco-grid{grid-template-columns:repeat(4,1fr);}}
.eco-card{display:flex;flex-direction:column;gap:8px;padding:24px 20px 22px;background:var(--ink);color:inherit;min-height:150px;position:relative;}
.eco-card:hover{background:var(--surface);}
.eco-card.is-big{grid-column:1 / -1;background:linear-gradient(135deg,rgba(62,99,240,0.16),rgba(62,99,240,0.03));min-height:180px;}
@media (min-width:1000px){.eco-card.is-big{grid-column:span 2;}}
.eco-mark{width:40px;height:40px;border:1px solid var(--line-strong);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text-dim);}
.eco-mark .social-icon{width:18px;height:18px;}
.eco-card:hover .eco-mark{color:var(--accent-dim);border-color:var(--accent-dim);}
.eco-name{font-family:var(--f-display);font-size:19px;font-weight:600;margin-top:4px;}
.eco-card.is-big .eco-name{font-size:26px;}
.eco-handle{font-family:var(--f-mono);font-size:11px;color:var(--text-faint);font-weight:400;margin-left:6px;}
.eco-line{font-size:14px;line-height:1.5;color:var(--text-dim);flex:1;}
.eco-go{font-family:var(--f-mono);font-size:11px;letter-spacing:0.05em;color:var(--accent-dim);margin-top:6px;}
.eco-card.is-idle{opacity:.55;cursor:default;}
.eco-card.is-idle .eco-go{color:var(--text-faint);}
/* telegram ancho */
.tg-wide{max-width:none;}
.tg-cols{display:grid;grid-template-columns:1fr;gap:26px;margin-top:22px;}
@media (min-width:860px){.tg-cols{grid-template-columns:1fr 1.4fr;gap:56px;}}
.tg-list{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;}
.tg-list li{font-family:var(--f-display);font-size:19px;font-weight:500;padding:6px 0;border-bottom:1px solid var(--line);}
.tg-cols .story .btn-row{margin-top:22px;}
/* cierre */
.h4-close{position:relative;overflow:hidden;padding:0;min-height:520px;display:flex;align-items:flex-end;}
.h4-close-media{position:absolute;inset:0;z-index:0;}
.h4-close-media .media{width:100%;height:100%;aspect-ratio:auto;max-height:none;}
.h4-close-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--ink) 0%,rgba(10,12,16,0.3) 35%,rgba(10,12,16,0.92) 100%);}
.h4-close .h4-bg{z-index:1;opacity:.6;}
.h4-close-copy{position:relative;z-index:2;padding-top:200px;padding-bottom:80px;width:100%;}
.h4-close .closing-quote{max-width:22ch;}
.closing-sub{display:block;font-size:10px;letter-spacing:0.16em;color:var(--text-faint);margin-top:6px;}
@media (min-width:900px){.h4-close{min-height:680px;}.h4-close-copy{padding-top:320px;}}

/* cierre sin foto final aprobada: solo texto+CTA, sin hueco reservado para imagen */
.h4-close-text-only{min-height:0;display:block;padding:64px 0;border-top:1px solid var(--line);}
.h4-close-text-only .h4-bg{z-index:0;opacity:.5;}
.h4-close-text-only .h4-close-copy{padding-top:0;padding-bottom:0;}
@media (min-width:900px){.h4-close-text-only{padding:96px 0;}.h4-close-text-only .h4-close-copy{padding-top:0;}}

/* ajustes V4 tras revisión visual */
.story .h4-quote{font-size:clamp(22px,2.8vw,34px) !important;line-height:1.15 !important;color:var(--text) !important;font-family:var(--f-display) !important;}
.gallery-3.is-tight{grid-template-columns:1fr 1fr;align-items:start;}
@media (min-width:900px){.gallery-3.is-tight{grid-template-columns:repeat(3,1fr);}.gallery-3.is-tight .media{aspect-ratio:4/5;}}
@media (min-width:1000px){.eco-grid{grid-template-columns:repeat(4,1fr);}}


/* ===== BLOG · FUNESMA79 WEEKLY V1 ===== */
.blog-intro{
  margin-top:24px;
  max-width:64ch;
  font-size:15.5px;
  line-height:1.75;
  color:var(--text-dim);
}

.blog-topics{
  border-top:1px solid var(--line);
  margin-top:8px;
}

.blog-topic{
  display:grid;
  gap:8px;
  padding:24px 0;
  border-bottom:1px solid var(--line);
}

.blog-topic-kicker{
  font-family:var(--f-mono);
  font-size:10.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent-dim);
}

.blog-topic-title{
  font-family:var(--f-display);
  font-size:clamp(24px,5.5vw,34px);
  font-weight:600;
  line-height:1.05;
  letter-spacing:-.02em;
  color:var(--text);
}

.blog-topic-copy{
  max-width:48ch;
  font-size:15px;
  line-height:1.65;
  color:var(--text-dim);
}

@media (min-width:820px){
  .blog-topic{
    grid-template-columns:minmax(0,8fr) minmax(0,11fr);
    gap:8px 48px;
    padding:30px 0;
  }

  .blog-topic-kicker{
    grid-column:1;
    grid-row:1 / span 2;
    padding-top:6px;
  }

  .blog-topic-title{
    grid-column:2;
    grid-row:1;
  }

  .blog-topic-copy{
    grid-column:2;
    grid-row:2;
  }
}

.blog-archive-empty{
  border-left:2px solid var(--line-strong);
  padding:4px 0 4px 22px;
  max-width:62ch;
}

.blog-archive-empty p{
  margin-top:10px;
  font-size:14.5px;
  line-height:1.7;
  color:var(--text-faint);
}

.blog-archive-empty .blog-archive-lead{
  margin-top:0;
  font-family:var(--f-display);
  font-size:clamp(21px,4vw,28px);
  line-height:1.3;
  color:var(--text);
}

.blog-weekly-cta{
  padding:34px 0;
  border-top:1px solid var(--line-strong);
  border-bottom:1px solid var(--line-strong);
}

.blog-weekly-noise{
  margin-top:20px;
  font-family:var(--f-display);
  font-size:clamp(20px,4vw,28px);
  color:var(--text);
}

.blog-weekly-soon{
  margin-top:18px;
  font-family:var(--f-mono);
  font-size:10.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--text-faint);
}

/* ===== WEEKLY ARTICLE V1 ===== */

.blog-formats{
  display:grid;
  gap:12px;
  margin:28px 0 10px;
}
.blog-format{
  display:grid;
  gap:5px;
  padding:18px;
  border:1px solid var(--line);
  background:var(--surface);
}
.blog-format strong{
  font-family:var(--f-display);
  font-size:17px;
}
.blog-format span{
  color:var(--muted);
  line-height:1.55;
}

.weekly-card{
  display:grid;
  grid-template-columns:1fr;
  gap:0;
  margin-top:24px;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--surface);
  color:var(--text);
  text-decoration:none;
  overflow:hidden;
  transition:border-color .18s ease,background .18s ease;
}

.weekly-card:hover,
.weekly-card:focus-visible{
  border-color:var(--line-strong);
  text-decoration:none;
}

.weekly-card:focus-visible{
  outline:2px solid var(--accent-dim);
  outline-offset:3px;
}

.weekly-card-media{
  aspect-ratio:16/9;
  background:var(--surface-raised);
  overflow:hidden;
  border-bottom:1px solid var(--line);
}

.weekly-card-media img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
}

.weekly-card-copy{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:10px;
  padding:22px 22px 24px;
}

.weekly-card-tag{
  font-family:var(--f-mono);
  font-size:10.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent-dim);
}

.weekly-card-cats{
  font-family:var(--f-mono);
  font-size:10px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--text-faint);
}

.weekly-card-title{
  margin:2px 0 0;
  font-family:var(--f-display);
  font-size:clamp(22px,3vw,32px);
  line-height:1.08;
  letter-spacing:-.01em;
  color:var(--text);
}

.weekly-card-meta{
  margin:0;
  font-size:13px;
  color:var(--text-faint);
  font-variant-numeric:tabular-nums;
}

.weekly-card-excerpt{
  margin:0;
  max-width:56ch;
  font-size:14.5px;
  line-height:1.6;
  color:var(--muted);
}

.weekly-card-cta{
  margin-top:4px;
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:14px;
  color:var(--accent-dim);
}

.weekly-card-cta .arw{
  transition:transform .18s ease;
}

.weekly-card:hover .weekly-card-title{
  color:var(--accent-dim);
}

@media (prefers-reduced-motion:no-preference){
  .weekly-card:hover .weekly-card-cta .arw{
    transform:translateX(4px);
  }
}

#weekly-progress{
  position:fixed;
  top:0;
  left:0;
  z-index:1000;
  width:0;
  height:2px;
  background:var(--text);
  pointer-events:none;
}

.weekly-byline{
  display:flex;
  flex-wrap:wrap;
  gap:8px 18px;
  margin:18px 0 26px;
  color:var(--muted);
  font-size:13px;
}

.weekly-chain{
  display:grid;
  grid-template-columns:1fr;
  gap:0;
  margin:32px 0 14px;
}

.weekly-chain-node{
  display:grid;
  gap:6px;
  padding:22px 24px;
  border:1px solid var(--line);
  background:var(--surface);
}

.weekly-chain-label{
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted);
}

.weekly-chain-value{
  font-family:var(--f-display);
  font-size:clamp(27px,5vw,40px);
  line-height:1;
  letter-spacing:-.025em;
  color:var(--text);
}

.weekly-chain-detail{
  font-size:14px;
  line-height:1.5;
  color:var(--text);
}

.weekly-chain-impact{
  max-width:58ch;
  padding-top:7px;
  border-top:1px solid var(--line);
  font-size:13px;
  line-height:1.55;
  color:var(--muted);
}

.weekly-chain-arrow{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:36px;
  font-size:20px;
  color:var(--muted);
}

.weekly-chain-node--nasdaq{
  background:var(--surface-raised);
  border-color:var(--line-strong);
}

.weekly-chain-summary{
  margin:14px 0 30px;
  padding:16px 18px;
  border-left:2px solid var(--text);
  background:var(--surface);
  font-size:14px;
  line-height:1.65;
  color:var(--muted);
}

.weekly-chain-summary strong{
  color:var(--text);
}

.weekly-sixty{
  max-width:760px;
  margin:28px 0;
  padding:22px;
  border-left:2px solid var(--line-strong);
  background:var(--surface);
}
.weekly-sixty p{
  margin:0;
  font-size:clamp(17px,2vw,21px);
  line-height:1.6;
}

.weekly-h2{
  display:flex;
  align-items:baseline;
  gap:12px;
  margin:54px 0 20px;
  font-family:var(--f-display);
  font-size:clamp(25px,4vw,38px);
  line-height:1.1;
}
.weekly-idx{
  color:var(--muted);
  font-size:12px;
  letter-spacing:.14em;
}

.weekly-matters{
  display:grid;
  gap:12px;
  padding:0;
  margin:22px 0;
  list-style:none;
}
.weekly-matters li{
  display:grid;
  gap:8px;
  padding:18px;
  border:1px solid var(--line);
  background:var(--surface);
}
.weekly-matters .ev{
  font-family:var(--f-display);
  font-size:18px;
  line-height:1.35;
}
.weekly-matters .why{
  color:var(--muted);
  line-height:1.6;
}
.weekly-matters .why b{
  display:block;
  margin-bottom:4px;
  color:var(--text);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.weekly-pull{
  margin:34px 0;
  padding:26px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  font-family:var(--f-display);
  font-size:clamp(23px,4vw,36px);
  line-height:1.25;
}

.weekly-cta-mid{
  display:grid;
  gap:8px;
  margin:36px 0;
  padding:22px;
  border:1px solid var(--line-strong);
  background:var(--surface);
}
.weekly-cta-mid strong{
  font-family:var(--f-display);
  font-size:20px;
}

.weekly-stats{
  display:grid;
  gap:10px;
  margin:24px 0;
}
.weekly-stat{
  display:grid;
  grid-template-columns:1fr auto;
  gap:5px 16px;
  padding:16px 18px;
  border:1px solid var(--line);
  background:var(--surface);
}
.weekly-stat .k{
  color:var(--muted);
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.weekly-stat .v{
  grid-row:1 / 3;
  grid-column:2;
  align-self:center;
  font-family:var(--f-display);
  font-size:23px;
}
.weekly-stat .d{
  font-size:13px;
  color:var(--muted);
}
.weekly-note{
  color:var(--muted);
  font-size:12px;
  line-height:1.6;
}

.weekly-voice{
  margin:34px 0;
  padding:22px;
  background:var(--surface-raised);
  border:1px solid var(--line);
}
.weekly-voice p{
  margin:0;
  font-size:17px;
  line-height:1.7;
}

.weekly-radar{
  display:grid;
  gap:10px;
  margin:22px 0;
}
.weekly-radar > *{
  padding:16px 18px;
  border:1px solid var(--line);
  background:var(--surface);
}

.weekly-sub{
  display:grid;
  gap:12px;
  margin:48px 0 30px;
  padding:26px;
  border:1px solid var(--line-strong);
  background:var(--surface-raised);
}
.weekly-sub h2,
.weekly-sub h3{
  margin:0;
  font-family:var(--f-display);
}
.weekly-sub p{
  margin:0;
  color:var(--muted);
  line-height:1.6;
}

.weekly-share{
  margin:32px 0;
  padding-top:22px;
  border-top:1px solid var(--line);
}
.weekly-share .t{
  display:block;
  margin-bottom:12px;
  font-size:12px;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--muted);
}
.weekly-share .row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.weekly-share a,
.weekly-share button{
  appearance:none;
  border:1px solid var(--line);
  background:var(--surface);
  color:var(--text);
  padding:10px 13px;
  font:inherit;
  font-size:13px;
  text-decoration:none;
  cursor:pointer;
}
.weekly-share a:hover,
.weekly-share button:hover,
.weekly-share a:focus-visible,
.weekly-share button:focus-visible{
  border-color:var(--line-strong);
}

/* Weekly: compartir accesible durante toda la lectura. */
body.weekly{padding-bottom:78px;}
.weekly-share-dock{
  position:fixed;
  z-index:85;
  right:12px;
  bottom:max(12px, env(safe-area-inset-bottom));
  left:12px;
  display:flex;
  gap:5px;
  padding:6px;
  border:1px solid var(--line-strong);
  background:rgba(18,21,28,.96);
  box-shadow:0 10px 32px rgba(0,0,0,.3);
  backdrop-filter:blur(12px);
}
.weekly-share-dock a,
.weekly-share-dock button{
  display:flex;
  flex:1 1 0;
  min-width:0;
  min-height:44px;
  align-items:center;
  justify-content:center;
  appearance:none;
  padding:6px 3px;
  border:1px solid transparent;
  background:var(--surface-raised);
  color:var(--text);
  font:inherit;
  font-size:11px;
  line-height:1.2;
  text-align:center;
  text-decoration:none;
  cursor:pointer;
}
.weekly-share-dock a:hover,
.weekly-share-dock button:hover,
.weekly-share-dock a:focus-visible,
.weekly-share-dock button:focus-visible{
  border-color:var(--accent-dim);
  color:#fff;
}
.weekly-share-dock a:focus-visible,
.weekly-share-dock button:focus-visible{
  outline:2px solid var(--accent-dim);
  outline-offset:2px;
}
@media (min-width:1200px){
  .weekly-share-dock{
    right:16px;
    bottom:16px;
    left:auto;
    width:360px;
  }
  .weekly-share-dock a,
  .weekly-share-dock button{font-size:12px;}
}

.weekly-sources{
  margin:48px 0 16px;
  padding-top:24px;
  border-top:1px solid var(--line);
}
.weekly-sources ol{
  padding-left:20px;
  color:var(--muted);
  font-size:13px;
  line-height:1.7;
}
.weekly-disclaimer{
  margin-top:20px;
  color:var(--muted);
  font-size:12px;
  line-height:1.65;
}

@media (min-width:720px){
  .blog-formats{
    grid-template-columns:1fr 1fr;
  }

  .weekly-card{
    grid-template-columns:minmax(0,46%) minmax(0,54%);
    align-items:stretch;
    min-height:440px;
  }

  .weekly-card-media{
    aspect-ratio:auto;
    min-height:100%;
    border-bottom:0;
    border-right:1px solid var(--line);
  }

  .weekly-card-copy{
    padding:30px 34px;
  }

  .weekly-stats{
    grid-template-columns:repeat(3,1fr);
  }
}

@media (min-width:960px){
  .weekly-matters{
    grid-template-columns:1fr 1fr;
  }
}

/* ==========================================================================
   CASEBOOK — /trading/casos/ (hub y páginas de caso)
   Lenguaje: journal / archivo editorial. Sin tarjetas SaaS, sin gradientes,
   sin iconografía decorativa. Filetes de 1px, mucho aire, serif para los
   titulares y mono en versales para la metadata. El color solo significa:
   pos/neg/ámbar están reservados a la etiqueta de decisión (.case-kind),
   que ya existe y no se toca.
   ========================================================================== */
body.casebook .breadcrumbs{max-width:var(--wide-w);}

/* --- metadata y CTA compartidos ------------------------------------------ */
.cb-meta{
  display:block;font-family:var(--f-mono);font-size:11px;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--text-faint);
}
.cb-go{
  display:inline-block;margin-top:14px;font-family:var(--f-mono);font-size:11.5px;
  letter-spacing:0.1em;text-transform:uppercase;color:var(--accent-dim);
}
.cb-go span{display:inline-block;}

/* --- hueco de captura pendiente ------------------------------------------
   Deliberadamente NO dibuja velas: es un hueco declarado, no un gráfico. */
.cb-slot{
  position:relative;display:block;width:100%;aspect-ratio:16/9;
  background:
    linear-gradient(180deg, rgba(62,99,240,0.05), transparent 60%),
    var(--surface);
  border:1px solid var(--line);
}
.cb-slot .cb-slot-rule{
  position:absolute;left:0;right:0;top:58%;height:1px;
  background:linear-gradient(90deg,transparent,var(--line-strong) 20%,var(--line-strong) 80%,transparent);
}
.cb-slot .cb-slot-tag{
  position:absolute;left:14px;bottom:12px;font-family:var(--f-mono);font-size:10px;
  letter-spacing:0.12em;text-transform:uppercase;color:var(--text-faint);
}

/* --- hero ---------------------------------------------------------------- */
.cb-hero{padding-bottom:8px;}
.cb-h1{font-size:var(--step-h1);line-height:1.02;max-width:14ch;margin-top:6px;}
.cb-lede{
  margin-top:20px;max-width:56ch;font-size:var(--step-lede);line-height:1.5;
  color:var(--text-dim);
}
.cb-flow{
  display:flex;flex-wrap:wrap;gap:10px 0;align-items:center;margin:26px 0 0;padding:0;
  list-style:none;font-family:var(--f-mono);font-size:10.5px;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--text-faint);
}
.cb-flow li + li::before{content:"\2192";margin:0 10px;color:var(--accent-dim);opacity:.8;}

/* --- caso destacado ------------------------------------------------------ */
.cb-feat{display:grid;grid-template-columns:1fr;gap:20px;margin-top:14px;}
.cb-feat .cb-feat-media{display:block;}
.cb-feat .media, .cb-feat .cb-slot{border:1px solid var(--line);}
.cb-feat-copy{display:block;}
.cb-feat-copy .case-kind{margin-top:12px;}
.cb-feat-title{
  display:block;margin-top:12px;font-family:var(--f-display);font-weight:600;
  font-size:var(--step-h2);line-height:1.12;letter-spacing:-0.01em;max-width:22ch;
}
.cb-feat:hover .cb-feat-title, .cb-feat:focus-visible .cb-feat-title{color:var(--accent-dim);}
.cb-feat-take{
  display:block;margin-top:14px;max-width:52ch;font-size:15.5px;line-height:1.62;
  color:var(--text-dim);
}
@media (min-width:900px){
  .cb-feat{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:48px;align-items:center;}
}
/* Operación documentada: el bloque destacado ya no es un teaser con dos líneas,
   sino el caso entero. Con un texto largo, centrar verticalmente dejaba la
   captura flotando entre dos huecos. Se alinea arriba y se queda fija mientras
   se lee — el mismo patrón que .tr-media en /trading/. */
@media (min-width:1100px){
  .cb-featured .cb-feat{align-items:start;}
  .cb-featured .cb-feat-media{position:sticky;top:96px;}
  .cb-featured .cb-feat-copy{max-width:62ch;}
}

/* --- anatomía ------------------------------------------------------------ */
.cb-anatomy-head{max-width:62ch;}
.cb-anatomy-intro{margin-top:14px;max-width:58ch;font-size:15px;line-height:1.65;color:var(--text-dim);}
.cb-anatomy{
  list-style:none;margin:30px 0 0;padding:0;
  border-top:1px solid var(--line);
}
.cb-step{
  display:grid;grid-template-columns:auto 1fr;column-gap:16px;row-gap:4px;
  padding:16px 0;border-bottom:1px solid var(--line);
}
.cb-step-n{
  font-family:var(--f-mono);font-size:11px;letter-spacing:0.08em;color:var(--accent-dim);
  padding-top:2px;
}
.cb-step-k{
  font-family:var(--f-mono);font-size:11px;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--text);padding-top:2px;
}
.cb-step-v{grid-column:2;font-size:15px;line-height:1.62;color:var(--text-dim);}
.cb-step.is-empty .cb-step-n, .cb-step.is-empty .cb-step-k{color:var(--text-faint);}
.cb-step.is-empty .cb-step-v{color:var(--text-faint);font-style:italic;}
.cb-anatomy-count{
  margin-top:14px;font-family:var(--f-mono);font-size:11px;letter-spacing:0.06em;
  color:var(--text-faint);
}
@media (min-width:900px){
  .cb-anatomy{
    display:grid;grid-template-columns:1fr 1fr;column-gap:56px;
    border-top:none;
  }
  .cb-step{border-top:1px solid var(--line);border-bottom:none;}
  .cb-step-v{max-width:44ch;}
}

/* --- biblioteca ---------------------------------------------------------- */
.cb-libhead{max-width:62ch;}
.cb-filters{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px;}
.cb-filter{
  appearance:none;background:transparent;border:1px solid var(--line-strong);
  border-radius:999px;padding:9px 15px;min-height:40px;color:var(--text-dim);
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:0.12em;text-transform:uppercase;
  cursor:pointer;
}
.cb-filter:hover{color:var(--text);border-color:var(--text-faint);}
.cb-filter[aria-pressed="true"]{
  color:var(--ink);background:var(--text);border-color:var(--text);
}
.cb-filter.is-empty{opacity:.45;}
.cb-noresults{margin-top:22px;font-size:15px;color:var(--text-dim);}

.cb-grid{display:grid;grid-template-columns:1fr;gap:34px;margin-top:30px;}
.cb-grid .cb-card[hidden]{display:none;}
.cb-card-link{display:block;}
/* Tarjeta autocontenida (card_link:false): informativa, sin enlace ni hover.
   Ocupa la fila completa de la rejilla para que la captura sea legible. */
.cb-grid .cb-card--static{grid-column:1/-1;cursor:default;}
.cb-card--static .cb-card-media{margin:0;}
.cb-card--static .cb-card-cap{margin-top:10px;font-size:13px;line-height:1.55;color:var(--text-dim);max-width:72ch;}
.cb-card--static .cb-card-body{padding-top:18px;}
.cb-card--static .cb-meta{margin:0;}
.cb-card--static .cb-card-title{margin:10px 0 0;}
.cb-card--static .cb-card-take{margin:10px 0 0;max-width:62ch;font-size:15px;line-height:1.65;}
@media (min-width:1100px){
  .cb-grid .cb-card--static{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:36px;align-items:center;}
  .cb-card--static .cb-card-body{padding-top:0;}
}
.cb-card-media{display:block;}
.cb-card .media, .cb-card .cb-slot{border:1px solid var(--line);}
.cb-card-body{display:block;padding-top:14px;}
.cb-card-body .case-kind{margin-top:10px;}
.cb-card-title{
  display:block;margin-top:10px;font-family:var(--f-display);font-weight:600;
  font-size:var(--step-h3);line-height:1.18;letter-spacing:-0.01em;
}
.cb-card-link:hover .cb-card-title, .cb-card-link:focus-visible .cb-card-title{color:var(--accent-dim);}
.cb-card-take{
  display:block;margin-top:10px;max-width:48ch;font-size:14.5px;line-height:1.6;
  color:var(--text-dim);
}
.cb-note{margin-top:30px;max-width:66ch;line-height:1.7;}
@media (min-width:760px){
  .cb-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:44px 40px;}
}

/* --- filosofía ----------------------------------------------------------- */
.cb-philo-lede{margin-top:16px;max-width:58ch;font-size:16px;line-height:1.65;color:var(--text-dim);}
.cb-philo-list{margin:22px 0 0;padding:0;list-style:none;}
.cb-philo-list li{
  padding:14px 0;border-top:1px solid var(--line);font-size:15px;line-height:1.62;
  color:var(--text-dim);max-width:60ch;
}
.cb-philo-list li b{color:var(--text);font-weight:600;}
.cb-legend-title{display:block;margin-top:34px;}

/* --- página de caso ------------------------------------------------------ */
.cb-case-h1{font-size:var(--step-h1);line-height:1.04;margin-top:14px;max-width:18ch;}
.cb-case-meta{margin-top:16px;}
.cb-case-take{
  margin-top:20px;max-width:56ch;font-family:var(--f-display);font-size:19px;
  line-height:1.45;color:var(--text);
}
.cb-case-media{margin-top:30px;}
.cb-case-media .media, .cb-case-media .cb-slot{border:1px solid var(--line);}
.cb-anatomy-block.is-case .cb-anatomy{margin-top:20px;}

.cb-casenav{
  display:grid;grid-template-columns:1fr;gap:1px;background:var(--line);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.cb-casenav a{display:block;padding:20px 0;background:var(--ink);}
.cb-nav-k{
  display:block;font-family:var(--f-mono);font-size:10.5px;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--text-faint);
}
.cb-nav-t{
  display:block;margin-top:8px;font-family:var(--f-display);font-size:17px;line-height:1.25;
}
.cb-casenav a:hover .cb-nav-t, .cb-casenav a:focus-visible .cb-nav-t{color:var(--accent-dim);}
.cb-backlink{margin-top:24px;font-family:var(--f-mono);font-size:11.5px;letter-spacing:0.1em;text-transform:uppercase;}
.cb-backlink a{color:var(--accent-dim);}
@media (min-width:760px){
  .cb-casenav{grid-template-columns:1fr 1fr;}
  .cb-casenav a{padding:22px 24px;}
  .cb-casenav a:first-child{padding-left:0;}
  .cb-nav-next{text-align:right;}
  .cb-casenav a:last-child{padding-right:0;}
}

@media (prefers-reduced-motion: no-preference){
  .cb-feat-title, .cb-card-title, .cb-nav-t, .cb-filter{transition:color .18s ease, background-color .18s ease, border-color .18s ease;}
}

/* ==========================================================================
   HOME · DENTRO DEL PROCESO (V2) — bloque evergreen
   Cuatro pilares reales (Método, Psicotrading, Formación, Casos) + la tira
   del caso destacado. Todo sale de rutas y JSON que ya existen: no hay
   cotizaciones, ni niveles del día, ni nada que caduque en 24 horas.
   ========================================================================== */
.vp-pillars{
  list-style:none;margin:40px 0 0;padding:0;
  display:grid;grid-template-columns:1fr;gap:1px;background:var(--line);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.vp-pillar{background:var(--ink);}
.vp-pillar > a{display:block;padding:26px 0;}
.vp-n{
  display:block;font-family:var(--f-mono);font-size:var(--step-label);
  letter-spacing:0.14em;color:var(--accent-dim);
}
.vp-k{
  display:block;margin-top:10px;font-family:var(--f-mono);font-size:var(--step-label);
  letter-spacing:0.16em;text-transform:uppercase;color:var(--text-faint);
}
.vp-t{
  display:block;margin-top:8px;font-family:var(--f-display);font-weight:600;
  font-size:var(--step-h3);line-height:1.18;letter-spacing:-0.01em;max-width:24ch;
}
.vp-pillar > a:hover .vp-t, .vp-pillar > a:focus-visible .vp-t{color:var(--accent-dim);}
.vp-d{
  display:block;margin-top:12px;max-width:46ch;font-size:var(--step-small);
  line-height:1.62;color:var(--text-dim);
}
.vp-go{
  display:inline-block;margin-top:14px;font-family:var(--f-mono);
  font-size:var(--step-label);letter-spacing:0.12em;text-transform:uppercase;
  color:var(--accent-dim);
}
@media (min-width:760px){
  .vp-pillars{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1px;}
  .vp-pillar > a{padding:30px 28px;}
  .vp-pillar:nth-child(odd) > a{padding-left:0;}
  .vp-pillar:nth-child(even) > a{padding-right:0;}
}
@media (min-width:1200px){
  .vp-pillars{grid-template-columns:repeat(4,minmax(0,1fr));}
  .vp-pillar > a{padding:32px 24px;}
  .vp-pillar:first-child > a{padding-left:0;}
  .vp-pillar:last-child > a{padding-right:0;}
  .vp-d{max-width:34ch;}
}

.vp-case{
  display:block;margin-top:40px;padding:30px 0 30px 22px;
  border-left:2px solid var(--accent);
}
.vp-case-k{
  display:block;font-family:var(--f-mono);font-size:var(--step-label);
  letter-spacing:0.16em;text-transform:uppercase;color:var(--text-faint);
}
.vp-case-t{
  display:block;margin-top:10px;font-family:var(--f-display);font-weight:600;
  font-size:var(--step-h2);line-height:1.12;letter-spacing:-0.01em;max-width:22ch;
}
.vp-case:hover .vp-case-t, .vp-case:focus-visible .vp-case-t{color:var(--accent-dim);}
.vp-case-m{
  display:block;margin-top:12px;font-family:var(--f-mono);font-size:var(--step-meta);
  letter-spacing:0.08em;text-transform:uppercase;color:var(--text-faint);
}
.vp-case-d{
  display:block;margin-top:14px;max-width:62ch;font-size:var(--step-body);
  line-height:1.62;color:var(--text-dim);
}
@media (min-width:900px){
  .vp-case{padding-left:32px;}
}
@media (prefers-reduced-motion: no-preference){
  .vp-t, .vp-case-t{transition:color .18s ease;}
}

/* ==========================================================================
   HEADER + FOOTER V2
   ========================================================================== */
/* CTA Comunidad del header. Oculto por debajo de 860px: ahí el header ya
   lleva wordmark + selector de idioma + toggle, y el drawer móvil incluye
   Telegram en su fila de redes, así que el acceso a comunidad no se pierde. */
.header-cta{
  display:none;font-family:var(--f-mono);font-size:var(--step-label);
  letter-spacing:0.14em;text-transform:uppercase;color:var(--text);
  border:1px solid var(--line-strong);border-radius:999px;
  padding:9px 16px;white-space:nowrap;
}
.header-cta:hover{border-color:var(--accent);color:var(--accent-dim);}
body.light-section .header-cta{color:var(--paper-text);border-color:var(--paper-line);}
@media (min-width:860px){.header-cta{display:inline-block;}}

/* Footer V2: bloque de marca + navegación + legal */
.footer-brand{margin-bottom:26px;}
.footer-mark{
  display:block;font-family:var(--f-display);font-weight:600;font-size:24px;
  letter-spacing:0.04em;
}
.footer-role{
  display:block;margin-top:6px;font-family:var(--f-mono);font-size:var(--step-label);
  letter-spacing:0.2em;text-transform:uppercase;color:var(--text-faint);
}
body.light-section .footer-role{color:var(--paper-faint);}
@media (min-width:900px){
  .footer-brand{margin-bottom:34px;}
  .footer-mark{font-size:28px;}
}

/* ==========================================================================
   HOME V2 — pilares de marca, pull del hero, Weekly y lead de Fuera del gráfico
   ========================================================================== */
.hero-pull{
  margin-top:22px;font-family:var(--f-display);font-size:var(--step-h3);
  line-height:1.3;color:var(--text);
}
.vp-brand{padding-top:var(--sec-y-compact);}
.vb-grid{
  list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;
  gap:1px;background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.vb-item{background:var(--ink);}
.vb-item > a{display:block;padding:24px 0;}
.vb-k{
  display:block;font-family:var(--f-mono);font-size:var(--step-label);
  letter-spacing:0.18em;text-transform:uppercase;color:var(--accent-dim);
}
.vb-d{
  display:block;margin-top:10px;max-width:40ch;font-size:var(--step-small);
  line-height:1.6;color:var(--text-dim);
}
.vb-item > a:hover .vb-k, .vb-item > a:focus-visible .vb-k{color:var(--text);}
@media (min-width:700px){
  .vb-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .vb-item > a{padding:26px 26px;}
  .vb-item:nth-child(odd) > a{padding-left:0;}
  .vb-item:nth-child(even) > a{padding-right:0;}
}
@media (min-width:1100px){
  .vb-grid{grid-template-columns:repeat(4,minmax(0,1fr));}
  .vb-item > a{padding:28px 22px;}
  .vb-item:first-child > a{padding-left:0;}
  .vb-item:last-child > a{padding-right:0;}
  .vb-d{max-width:32ch;}
}

/* --- Weekly --- */
.vw-wrap{display:grid;grid-template-columns:1fr;gap:32px;margin-top:36px;}
.vw-lead{display:block;border-top:1px solid var(--line-strong);padding-top:22px;}
.vw-k{
  display:block;font-family:var(--f-mono);font-size:var(--step-label);
  letter-spacing:0.16em;text-transform:uppercase;color:var(--accent-dim);
}
.vw-t{
  display:block;margin-top:12px;font-family:var(--f-display);font-weight:600;
  font-size:var(--step-h2);line-height:1.12;letter-spacing:-0.01em;max-width:20ch;
}
.vw-lead:hover .vw-t, .vw-lead:focus-visible .vw-t{color:var(--accent-dim);}
.vw-m{
  display:block;margin-top:12px;font-family:var(--f-mono);font-size:var(--step-meta);
  letter-spacing:0.08em;text-transform:uppercase;color:var(--text-faint);
}
.vw-d{display:block;margin-top:14px;max-width:56ch;font-size:var(--step-body);line-height:1.62;color:var(--text-dim);}
.vw-side{display:grid;gap:20px;align-content:start;}
.vw-format{border-top:1px solid var(--line);padding-top:16px;}
.vw-day{
  display:block;font-family:var(--f-mono);font-size:var(--step-label);
  letter-spacing:0.16em;text-transform:uppercase;color:var(--text-faint);
}
.vw-fname{display:block;margin-top:6px;font-family:var(--f-display);font-size:var(--step-h3);line-height:1.2;}
.vw-fline{display:block;margin-top:8px;max-width:38ch;font-size:var(--step-small);line-height:1.6;color:var(--text-dim);}
@media (min-width:900px){
  .vw-wrap{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:56px;}
}

/* --- lead fotográfico de Fuera del gráfico (media real, a todo el ancho) --- */
.vf-lead{margin-bottom:38px;}
.vf-lead .media{width:100%;}
@media (min-width:1100px){.vf-lead{margin-bottom:52px;}}
@media (prefers-reduced-motion: no-preference){
  .vb-k, .vw-t{transition:color .18s ease;}
}

/* ==========================================================================
   SOBRE V2 — narrativa editorial: menos caja, más fotografía, más aire
   El recorrido ya alternaba texto/imagen (jn-step:nth-child(even)); V2
   reequilibra la rejilla para que la imagen pese MÁS que el texto y sube
   el aire entre pasos. Sin tocar contenido, textos ni rutas.
   ========================================================================== */
@media (min-width:900px){
  .jn-step.has-media{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:72px;}
  .jn-step{padding:48px 0;}
  .jn-stage{font-size:var(--step-h2);line-height:1.12;}
}
@media (min-width:1300px){
  .jn-step.has-media{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:96px;}
  .jn-step{padding:60px 0;}
}
/* "Antes del gráfico": la imagen manda en escritorio */
@media (min-width:900px){
  #antes.block .split{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:80px;}
}
/* En los pasos pares la media va en la PRIMERA columna (order:1), así que la
   proporción se invierte para que la imagen sea siempre la parte ancha. */
@media (min-width:900px){
  .jn-step:nth-child(even).has-media{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);}
}
@media (min-width:1300px){
  .jn-step:nth-child(even).has-media{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);}
}

/* ==========================================================================
   TRADING V2 — ficha técnica: mono para los datos, serif para la idea,
   gráfico real con protagonismo y salida directa a Casos.
   ========================================================================== */
.tr-head{max-width:62ch;}
.tr-grid{display:grid;grid-template-columns:1fr;gap:36px;margin-top:34px;}
.tr-steps{
  list-style:none;margin:0;padding:0;border-top:1px solid var(--line);
}
.tr-step{padding:20px 0;border-bottom:1px solid var(--line);}
.tr-k{
  display:block;font-family:var(--f-mono);font-size:var(--step-label);
  letter-spacing:0.18em;text-transform:uppercase;color:var(--accent-dim);
}
.tr-v{display:block;margin-top:10px;max-width:56ch;font-size:var(--step-body);line-height:1.62;color:var(--text-dim);}
.tr-m{
  display:block;margin-top:10px;font-family:var(--f-mono);font-size:var(--step-meta);
  letter-spacing:0.08em;color:var(--text-faint);
}
.tr-media .media{border:1px solid var(--line);}
.tr-cap{
  margin-top:12px;font-family:var(--f-mono);font-size:var(--step-meta);
  letter-spacing:0.04em;color:var(--text-faint);max-width:48ch;line-height:1.55;
}
.tr-go{
  display:inline-block;margin-top:18px;font-family:var(--f-mono);font-size:var(--step-label);
  letter-spacing:0.12em;text-transform:uppercase;color:var(--accent-dim);
}
.tr-go:hover{color:var(--text);}
@media (min-width:1100px){
  .tr-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:72px;align-items:start;}
  .tr-media{position:sticky;top:96px;}
}

/* --- A11Y: objetivo táctil de los enlaces "ir a" -------------------------
   .vp-go y .tr-go son etiquetas mono de 10,5px; como <a> sueltos no llegaban
   a 24px de alto (WCAG 2.5.8 Target Size Minimum). Solo se corrige cuando el
   elemento ES un enlace: dentro de .vp-pillar el .vp-go es un <span> y el
   enlace real ya ocupa la tarjeta completa, así que ahí no se toca nada. */
a.vp-go, a.tr-go{
  padding-block:4px;
}

/* --- TRADING V2: una sola rejilla -----------------------------------------
   El hero y .tr-spec usan .col-full; las secciones preexistentes seguían en
   .col-mid, centradas, lo que dejaba dos bordes izquierdos distintos en la
   misma página (0/260px a 1440). Aquí NO se ensancha el texto: se conserva
   la medida de lectura de 920px y solo se alinea al mismo canalón que el
   resto de la página. Ámbito: únicamente el hub /trading/. */
body.trading-hub .col-mid{
  max-width:var(--w-full);
  margin:0 auto;
  padding:0 var(--gutter);
}
body.trading-hub .col-mid > *{max-width:var(--w-mid);}

/* ==========================================================================
   BLOG V2 — publicación editorial
   El hub dejaba todo en .col-mid (920px) pegado a la izquierda de una
   ventana de 1440, y enterraba la única edición publicada en una tarjeta
   de "Archivo" al final. V2 invierte la jerarquía: cabecera, edición
   destacada grande, cadencia como metadata y archivo declarado con
   honestidad (hay una edición; no se inventan más).
   ========================================================================== */
.bl-h1{
  font-size:var(--step-display);line-height:1.02;letter-spacing:-0.022em;
  margin-top:10px;max-width:16ch;
}
.bl-deck{
  margin-top:24px;max-width:46ch;font-size:var(--step-lede);line-height:1.45;
  color:var(--text);
}
.bl-intro{
  margin-top:16px;max-width:62ch;font-size:var(--step-body);line-height:1.7;
  color:var(--text-dim);
}
.bl-cadence{
  list-style:none;margin:38px 0 0;padding:0;display:grid;grid-template-columns:1fr;
  gap:1px;background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.bl-cadence li{display:block;padding:20px 0;background:var(--ink);}
.bl-cadence .d{
  display:block;font-family:var(--f-mono);font-size:var(--step-label);letter-spacing:0.14em;
  text-transform:uppercase;color:var(--accent-dim);
}
.bl-cadence .n{
  display:block;margin-top:10px;font-family:var(--f-display);font-weight:600;
  font-size:var(--step-h3);line-height:1.2;
}
.bl-cadence .l{
  display:block;margin-top:8px;max-width:46ch;font-size:var(--step-small);
  line-height:1.6;color:var(--text-dim);
}

/* --- edición destacada ---------------------------------------------------- */
.bl-feat-sec{padding-top:0;}
.bl-feature{display:grid;grid-template-columns:1fr;gap:24px;margin-top:18px;}
.bl-feature-media{display:block;border:1px solid var(--line);overflow:hidden;}
.bl-feature-media--type{
  display:flex;aspect-ratio:1200/630;flex-direction:column;
  justify-content:space-between;padding:clamp(20px,4vw,48px);
  background:linear-gradient(145deg,#202b35 0%,#111820 55%,#0b0e13 100%);
  color:var(--text);
}
.bl-feature-media--type span{
  font-family:var(--f-display);font-size:clamp(38px,7vw,108px);
  font-weight:600;line-height:.88;letter-spacing:-.055em;
}
.bl-feature-media--type small{
  font-family:var(--f-mono);font-size:clamp(10px,1vw,14px);
  letter-spacing:.18em;color:var(--accent-dim);
}
.bl-feature-cover{
  display:block;width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover;
}
.bl-feature-copy{display:block;}
.bl-kicker{
  display:block;font-family:var(--f-mono);font-size:var(--step-label);letter-spacing:0.14em;
  text-transform:uppercase;color:var(--accent-dim);
}
.bl-cats{
  display:block;margin-top:8px;font-family:var(--f-mono);font-size:var(--step-meta);
  letter-spacing:0.08em;text-transform:uppercase;color:var(--text-faint);
}
.bl-feature-title{
  display:block;margin-top:14px;font-family:var(--f-display);font-weight:600;
  font-size:var(--step-h2);line-height:1.1;letter-spacing:-0.012em;max-width:20ch;
}
.bl-meta{
  display:block;margin-top:12px;font-family:var(--f-mono);font-size:var(--step-meta);
  letter-spacing:0.06em;color:var(--text-faint);
}
.bl-feature-excerpt{
  display:block;margin-top:16px;max-width:52ch;font-size:var(--step-body);
  line-height:1.65;color:var(--text-dim);
}
.bl-feature-cta{
  display:inline-block;margin-top:20px;padding-block:4px;font-family:var(--f-mono);
  font-size:11.5px;letter-spacing:0.12em;text-transform:uppercase;color:var(--accent-dim);
}
.bl-feature:hover .bl-feature-title,
.bl-feature:focus-visible .bl-feature-title{color:var(--accent-dim);}

/* --- archivo y suscripción ------------------------------------------------ */
.bl-archive{border-top:1px solid var(--line);padding-top:22px;}
.bl-archive-note{margin-top:12px;max-width:56ch;font-size:var(--step-small);line-height:1.65;color:var(--text-dim);}
.bl-sub{border-top:1px solid var(--line);padding-top:32px;}
.bl-sub-h2{
  margin-top:14px;font-size:var(--step-h2);line-height:1.12;letter-spacing:-0.012em;max-width:30ch;
}
.bl-sub-cats{margin-top:18px;font-family:var(--f-mono);font-size:var(--step-meta);letter-spacing:0.1em;text-transform:uppercase;color:var(--text-dim);}
.bl-sub-noise{margin-top:10px;font-size:var(--step-small);color:var(--text-dim);}
.bl-sub-soon{margin-top:8px;font-family:var(--f-mono);font-size:var(--step-meta);letter-spacing:0.06em;color:var(--text-faint);}

@media (min-width:760px){
  .bl-cadence{grid-template-columns:1fr 1fr;column-gap:1px;}
  .bl-cadence li{padding:22px 26px;}
  .bl-cadence li:first-child{padding-left:0;}
}
@media (min-width:1000px){
  .bl-feature{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:56px;align-items:center;}
}
@media (prefers-reduced-motion: no-preference){
  .bl-feature-title{transition:color .18s ease;}
}

/* ==========================================================================
   WEEKLY V2 — pieza larga legible
   El artículo entero vivía en .col-mid (920px): demasiado ancho para prosa
   corrida. V2 mantiene el MISMO marco que el resto del sitio (--w-full +
   canalón, para que el borde izquierdo coincida con el del header) y baja la
   prosa a la medida de lectura, dejando que respiren los componentes anchos
   (cadena, stats, 60 segundos, radar, fuentes). No se toca una sola cifra.
   ========================================================================== */
body.weekly .col-mid{
  max-width:var(--w-full);margin:0 auto;padding:0 var(--gutter);
}
body.weekly .col-mid > *{max-width:var(--w-reading);}

/* componentes que necesitan más aire que la columna de lectura */
body.weekly .weekly-chain,
body.weekly .weekly-sixty,
body.weekly .weekly-stats,
body.weekly .weekly-radar,
body.weekly .weekly-sources,
body.weekly .weekly-share,
body.weekly .weekly-sub,
body.weekly .weekly-cta-mid{max-width:var(--w-mid);}

/* cabecera: titular y entradilla por encima de la medida de lectura */
body.weekly .weekly-hero .col-mid > *{max-width:none;}
body.weekly .weekly-hero h1{font-size:var(--step-h1);line-height:1.04;max-width:19ch;}
body.weekly .weekly-hero .lede{max-width:52ch;}
body.weekly .weekly-byline{
  margin-top:26px;padding-top:16px;border-top:1px solid var(--line);
  font-family:var(--f-mono);font-size:var(--step-meta);letter-spacing:0.06em;
  text-transform:uppercase;color:var(--text-faint);max-width:none;
}
body.weekly .weekly-byline b{color:var(--text-dim);font-weight:500;}

/* los h2 numerados marcan el cambio de bloque: contexto, noticias, análisis,
   cierre. Se refuerza el filete para que la separación se lea al hojear. */
body.weekly .weekly-h2{
  margin-top:64px;padding-top:22px;border-top:1px solid var(--line);
  max-width:var(--w-reading);
}
body.weekly .weekly-pull{max-width:var(--w-mid);}

/* --- seguir leyendo ------------------------------------------------------- */
.wk-more{border-top:1px solid var(--line);}
.wk-more-grid{
  display:grid;grid-template-columns:1fr;gap:1px;background:var(--line);
  margin-top:20px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  max-width:var(--w-mid);
}
.wk-more-item{display:block;padding:20px 0;background:var(--ink);}
.wk-more-k{
  display:block;font-family:var(--f-mono);font-size:var(--step-label);letter-spacing:0.14em;
  text-transform:uppercase;color:var(--accent-dim);
}
.wk-more-t{
  display:block;margin-top:10px;font-family:var(--f-display);font-weight:600;
  font-size:var(--step-h3);line-height:1.2;
}
.wk-more-l{
  display:block;margin-top:8px;font-size:var(--step-small);line-height:1.6;color:var(--text-dim);
}
.wk-more-item:hover .wk-more-t,
.wk-more-item:focus-visible .wk-more-t{color:var(--accent-dim);}
@media (min-width:800px){
  .wk-more-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  .wk-more-item{padding:22px 24px;}
  .wk-more-item:first-child{padding-left:0;}
}
@media (prefers-reduced-motion: no-preference){
  .wk-more-t{transition:color .18s ease;}
}

/* Espaciado de párrafo del artículo. En 48f3eab los <p> del cuerpo salían con
   margin-top:0 y se pegaban unos a otros; el defecto ya existía, pero a la
   medida de lectura se ve. Se corrige aquí, sin tocar el texto. */
body.weekly .col-mid > p{
  font-size:var(--step-body);line-height:1.78;color:var(--text-dim);
}
body.weekly .col-mid > p + p,
body.weekly .col-mid > .lede + p{margin-top:22px;}
body.weekly .col-mid > .weekly-matters + p,
body.weekly .col-mid > .weekly-pull + p{margin-top:26px;}

/* La cadena causal es parte del hilo de lectura, no un panel: a la medida de
   lectura los nodos dejan de verse medio vacíos. */
body.weekly .weekly-chain{max-width:var(--w-reading);}
body.weekly .weekly-chain-summary{max-width:var(--w-reading);}

/* --- "La semana en 60 segundos" y los recuadros "Por qué importa" ---------
   Defecto PREEXISTENTE en 48f3eab: el CSS de .weekly-sixty apuntaba a <p> y
   el de .weekly-matters a <li>/.ev/.why, pero el marcado real usa
   <ul><li><span class="ev"><span class="why"> y <div class="t"><p>. Al no
   coincidir ningún selector, .ev y .why se pintaban en línea y el evento se
   pegaba a su explicación; .weekly-matters salía en dos columnas con la
   etiqueta sola en una de ellas. Se corrigen los selectores. Texto intacto. */
.weekly-sixty ul{list-style:none;margin:16px 0 0;padding:0;}
.weekly-sixty ul li{
  display:block;padding:16px 0;border-top:1px solid var(--line);
}
.weekly-sixty ul li:first-child{border-top:none;padding-top:4px;}
.weekly-sixty ul li .ev{
  display:block;font-family:var(--f-display);font-weight:600;
  font-size:var(--step-h3);line-height:1.25;color:var(--text);
}
.weekly-sixty ul li .why{
  display:block;margin-top:8px;font-size:var(--step-small);line-height:1.65;
  color:var(--text-dim);
}
.weekly-sixty ul li .why b{
  display:block;margin-bottom:4px;font-family:var(--f-mono);font-weight:400;
  font-size:var(--step-label);letter-spacing:0.14em;text-transform:uppercase;
  color:var(--accent-dim);
}

.weekly-matters{
  display:block;padding:20px 22px;border-left:2px solid var(--accent-dim);
  background:var(--surface);
}
.weekly-matters .t{
  display:block;font-family:var(--f-mono);font-size:var(--step-label);
  letter-spacing:0.14em;text-transform:uppercase;color:var(--accent-dim);
}
.weekly-matters p{
  margin:10px 0 0;font-size:var(--step-small);line-height:1.7;color:var(--text-dim);
  max-width:62ch;
}
body.weekly .weekly-matters{max-width:var(--w-mid);}

/* Mismo defecto preexistente en el radar: .when y .what eran <span> en línea
   y la fecha se pegaba al titular. Se les da estructura. */
.weekly-radar .item{
  display:grid;grid-template-columns:1fr;gap:6px;padding:16px 0;
  border-top:1px solid var(--line);
}
.weekly-radar .item .when{
  font-family:var(--f-mono);font-size:var(--step-label);letter-spacing:0.14em;
  text-transform:uppercase;color:var(--accent-dim);
}
.weekly-radar .item .what{display:block;}
.weekly-radar .item .what b{
  display:block;font-family:var(--f-display);font-weight:600;
  font-size:var(--step-h3);line-height:1.25;color:var(--text);
}
.weekly-radar .item .what > span{
  display:block;margin-top:8px;font-size:var(--step-small);line-height:1.65;
  color:var(--text-dim);max-width:62ch;
}
@media (min-width:760px){
  .weekly-radar .item{grid-template-columns:160px minmax(0,1fr);column-gap:28px;}
  .weekly-radar .item .when{padding-top:4px;}
}

/* ==========================================================================
   FUERA DEL GRÁFICO V2 — la sección más cinematográfica
   Objetivo: más imagen, menos interfaz. Todo esto es LAYOUT: el marcado de
   los vídeos no se toca ni un atributo, así que el motor sigue intacto
   (lazy hydration por data-src, play/pause por viewport, tope de simultáneos,
   pausa con la pestaña oculta, reduced-motion y poster de reserva).
   ========================================================================== */
body.fdg-v2 .fdg-hero{padding:0 0 8px;}
body.fdg-v2 .fdg-hero-media{max-width:none;margin:0;}
body.fdg-v2 .fdg-lead{aspect-ratio:3/4;max-height:min(76vh,760px);}
body.fdg-v2 .fdg-hero-copy{padding-top:clamp(28px,4vw,52px);}
body.fdg-v2 .fdg-h1{
  font-size:var(--step-display);line-height:0.98;letter-spacing:-0.028em;max-width:15ch;
}
body.fdg-v2 .fdg-hero-copy .lede{margin-top:24px;max-width:58ch;font-size:var(--step-lede);}
@media (min-width:860px){
  body.fdg-v2 .fdg-lead{aspect-ratio:21/9;max-height:min(82vh,820px);}
}

/* --- viajes: tres panorámicas, no tres tarjetas --------------------------- */
body.fdg-v2 .trips{
  border:none;background:transparent;gap:clamp(28px,3.4vw,56px);margin-top:34px;
}
body.fdg-v2 .trip{background:transparent;}
body.fdg-v2 .trip .trip-media{border:1px solid var(--line);}
body.fdg-v2 .trip .trip-body{padding:18px 0 0;}
body.fdg-v2 .trip-k{
  display:block;font-family:var(--f-mono);font-size:var(--step-label);
  letter-spacing:0.14em;text-transform:uppercase;color:var(--accent-dim);
}
body.fdg-v2 .trip-t{
  display:block;margin-top:10px;font-family:var(--f-display);font-weight:600;
  font-size:var(--step-h3);line-height:1.2;
}
body.fdg-v2 .trip-l{
  display:block;margin-top:8px;font-size:var(--step-small);line-height:1.6;color:var(--text-dim);
}
body.fdg-v2 .trip-go{
  display:inline-block;margin-top:12px;padding-block:4px;font-family:var(--f-mono);
  font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--accent-dim);
}
body.fdg-v2 .trip.is-soon .trip-go{color:var(--text-faint);}
body.fdg-v2 a.trip:hover .trip-t,
body.fdg-v2 a.trip:focus-visible .trip-t{color:var(--accent-dim);}

/* --- galería aérea: la pieza más grande de la web ------------------------- */
body.fdg-v2 .aerial-gallery{margin-top:34px;}
@media (min-width:860px){
  body.fdg-v2 .aerial-gallery .photo-lead .media{aspect-ratio:21/9;max-height:min(84vh,840px);}
  body.fdg-v2 .photo-sel{gap:clamp(12px,1.4vw,22px);margin-top:clamp(12px,1.4vw,22px);}
  body.fdg-v2 .photo-sel .media{aspect-ratio:4/3;max-height:none;}
}

/* --- bloques de plataforma: media más grande, texto más corto ------------- */
@media (min-width:900px){
  body.fdg-v2 .platform-block .split,
  body.fdg-v2 #musica .split{
    grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
    gap:clamp(40px,4.4vw,80px);align-items:center;
  }
  body.fdg-v2 .split-rev{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);}
}
body.fdg-v2 .split-copy .section-h2{max-width:18ch;}
body.fdg-v2 .split-copy .prose p{max-width:48ch;}

/* --- cierre: la imagen manda ---------------------------------------------- */
body.fdg-v2 .closing3{padding-block:clamp(72px,9vw,150px);}
body.fdg-v2 .sec-head .lede{max-width:58ch;}

/* .sec-head lleva max-width:920px + margin:0 auto, que dentro de .col-full
   lo centraba y dejaba dos bordes izquierdos en la misma página (48px del
   canalón frente a 260px del encabezado). En FDG se alinea al canalón y se
   conserva la medida de lectura del texto. */
body.fdg-v2 .sec-head{margin-left:0;margin-right:0;max-width:var(--w-mid);}

/* El cierre seguía centrado (.col-mid) mientras el resto de la página se
   alinea al canalón. Se alinea también, sin tocar el componente .closing
   que usan otras páginas. */
body.fdg-v2 .closing3 .col-mid{max-width:var(--w-full);margin:0 auto;padding:0 var(--gutter);}
body.fdg-v2 .closing3 .col-mid > *{max-width:var(--w-mid);}

/* ==========================================================================
   AHORA V2 — evergreen, visual, ligero
   Nada de actividad en tiempo real, cotizaciones ni métricas dinámicas: el
   mismo contenido real de antes (cinco áreas y sus cadencias, incluida la
   que está vacía y lo dice), reorganizado en una rejilla editorial en vez de
   una columna estrecha perdida en medio de la ventana.
   ========================================================================== */
.ah-h1{
  font-size:var(--step-display);line-height:1.0;letter-spacing:-0.026em;
  margin-top:10px;max-width:14ch;
}
.ah-deck{
  margin-top:24px;max-width:54ch;font-size:var(--step-lede);line-height:1.5;color:var(--text-dim);
}
.ah-updated{
  margin-top:28px;padding-top:16px;border-top:1px solid var(--line);
  font-family:var(--f-mono);font-size:var(--step-meta);letter-spacing:0.1em;
  text-transform:uppercase;color:var(--text-faint);
}
.ah-grid{
  list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;
  border-top:1px solid var(--line);
}
/* Filetes por elemento, no un fondo de rejilla: con cinco áreas en una
   rejilla de tres columnas, el fondo dejaba una celda gris vacía al final. */
.ah-item{display:block;padding:24px 0;border-bottom:1px solid var(--line);}
.ah-n{
  display:block;font-family:var(--f-mono);font-size:11px;letter-spacing:0.08em;
  color:var(--accent-dim);
}
.ah-k{
  display:block;margin-top:10px;font-family:var(--f-display);font-weight:600;
  font-size:var(--step-h3);line-height:1.2;
}
.ah-q{
  display:block;margin-top:6px;font-family:var(--f-mono);font-size:var(--step-label);
  letter-spacing:0.12em;text-transform:uppercase;color:var(--text-faint);
}
.ah-p{
  margin:14px 0 0;max-width:46ch;font-size:var(--step-body);line-height:1.65;color:var(--text-dim);
}
.ah-c{
  display:block;margin-top:16px;font-family:var(--f-mono);font-size:var(--step-meta);
  letter-spacing:0.04em;color:var(--text-faint);
}
/* El área sin novedades se marca como tal: es información, no un hueco. */
.ah-item.is-empty .ah-k,
.ah-item.is-empty .ah-n{color:var(--text-faint);}
.ah-item.is-empty .ah-p{font-style:italic;color:var(--text-faint);}
.ah-hist{
  font-family:var(--f-mono);font-size:var(--step-meta);letter-spacing:0.04em;
  color:var(--text-faint);
}
@media (min-width:760px){
  .ah-grid{grid-template-columns:1fr 1fr;}
  .ah-item{padding:26px 28px;border-left:1px solid var(--line);}
  .ah-item:nth-child(odd){padding-left:0;border-left:none;}
}
@media (min-width:1200px){
  .ah-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  .ah-item{padding-left:28px;border-left:1px solid var(--line);}
  .ah-item:nth-child(3n+1){padding-left:0;border-left:none;}
}

/* ==========================================================================
   TRANSPARENCIA V2 — seria, sobria, editorial
   Mismo texto, palabra por palabra: los diez bloques legales y editoriales se
   conservan íntegros. Lo que cambia es la jerarquía — cuatro grupos, índice
   interno con anclas y filetes en vez de diez cajas iguales — para que se
   pueda navegar y citar. No se convierte en página de marketing.
   ========================================================================== */
.tp-h1{
  font-size:var(--step-display);line-height:1.0;letter-spacing:-0.026em;
  margin-top:10px;max-width:16ch;
}
.tp-deck{
  margin-top:24px;max-width:56ch;font-size:var(--step-lede);line-height:1.5;color:var(--text-dim);
}
.tp-index{
  margin-top:40px;padding-top:20px;border-top:1px solid var(--line);max-width:var(--w-mid);
}
.tp-index-k{
  display:block;font-family:var(--f-mono);font-size:var(--step-label);letter-spacing:0.14em;
  text-transform:uppercase;color:var(--text-faint);
}
.tp-index ol{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:1fr;gap:1px;background:var(--line);}
.tp-index li{background:var(--ink);}
.tp-index a{display:block;padding:14px 0;}
.tp-i-n{
  display:inline-block;font-family:var(--f-mono);font-size:11px;letter-spacing:0.08em;
  color:var(--accent-dim);margin-right:12px;
}
.tp-i-t{font-family:var(--f-display);font-weight:600;font-size:var(--step-h3);line-height:1.2;}
.tp-i-l{
  display:block;margin-top:6px;font-family:var(--f-mono);font-size:var(--step-meta);
  letter-spacing:0.04em;color:var(--text-faint);
}
.tp-index a:hover .tp-i-t,.tp-index a:focus-visible .tp-i-t{color:var(--accent-dim);}

.tp-group{margin-top:var(--sec-y-compact);scroll-margin-top:110px;}
.tp-group:first-child{margin-top:0;}
.tp-group-h2{
  display:flex;align-items:baseline;gap:14px;padding-top:22px;
  border-top:1px solid var(--line-strong);
  font-size:var(--step-h2);line-height:1.12;letter-spacing:-0.012em;
}
.tp-group-n{font-family:var(--f-mono);font-size:12px;letter-spacing:0.1em;color:var(--accent-dim);}
body.transp-v2 .tp-block{
  margin-top:26px;padding-top:20px;border-top:1px solid var(--line);
  max-width:var(--w-mid);scroll-margin-top:110px;
}
body.transp-v2 .tp-block h3{
  font-family:var(--f-mono);font-size:var(--step-label);letter-spacing:0.14em;
  text-transform:uppercase;color:var(--text);font-weight:400;
}
body.transp-v2 .tp-block p,
body.transp-v2 .tp-block li{
  font-size:var(--step-body);line-height:1.75;color:var(--text-dim);max-width:68ch;
}
body.transp-v2 .tp-block p{margin-top:12px;}
body.transp-v2 .tp-block ul{margin:12px 0 0;padding-left:18px;}
body.transp-v2 .tp-block li{margin-top:6px;}
@media (min-width:760px){
  .tp-index ol{grid-template-columns:1fr 1fr;column-gap:1px;}
  .tp-index a{padding:16px 22px;}
  .tp-index li:nth-child(odd) a{padding-left:0;}
  body.transp-v2 .tp-block{display:grid;grid-template-columns:210px minmax(0,1fr);column-gap:36px;align-items:start;}
  body.transp-v2 .tp-block h3{padding-top:3px;}
  body.transp-v2 .tp-block > :not(h3){grid-column:2;}
  body.transp-v2 .tp-block p:first-of-type,
  body.transp-v2 .tp-block ul{margin-top:0;}
}

/* ==========================================================================
   CRÉDITOS DE MEDIOS DE TERCEROS
   La política de TradingView exige que la atribución sea "clearly visible at
   all times" y fija un mínimo de 10 PT = 13 PX. Por eso este tamaño NO usa
   --step-meta (12px): está fijado a 13px y no baja en móvil. No es una
   decisión estética — es el umbral de la política, y bajarlo la incumple.
   ========================================================================== */
.media-credit{
  margin-top:10px;
  font-family:var(--f-mono);
  font-size:13px;          /* mínimo exigido; no reducir */
  line-height:1.5;
  letter-spacing:0.02em;
  color:var(--text-dim);   /* --text-faint no llega a 4.5:1 con texto pequeño */
  max-width:52ch;
}
/* Dentro del recorrido de /sobre/ el crédito acompaña a su imagen: la celda
   .jn-media-cell ocupa el sitio que antes ocupaba .jn-media, de modo que la
   rejilla de dos columnas no cambia y el crédito queda bajo su figura. */
.jn-media-cell{display:block;min-width:0;}
.jn-step .media-credit{margin-top:10px;}
/* La caption de /trading/ cumple el mismo mínimo. */
.tr-cap{font-size:13px;color:var(--text-dim);}

/* ==========================================================================
   PANELES EDITORIALES DEL RECORRIDO (/sobre/)
   Sustituyen a las imágenes retiradas por dependencia de derechos de
   terceros. Deliberadamente NO imitan una foto ni un gráfico: son
   composición tipográfica propia. Ocupan la misma celda y la misma
   proporción que .jn-media para que la alternancia, el ritmo y el
   responsive de la página no cambien al retirar los assets.
   ========================================================================== */
.jn-panel{
  display:flex;flex-direction:column;justify-content:center;
  min-height:260px;padding:clamp(24px,3vw,40px);
  border:1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(62,99,240,0.05), transparent 62%),
    var(--surface);
}
@media (min-width:900px){
  /* Misma proporción REAL que .jn-media, medida en la página (705x421 a
     1440, 773x459 a 1920 => ~5/3), no la nominal 3/2: con 3/2 el panel
     quedaba 49px más alto que las fotos y el ritmo se notaba. */
  .jn-panel{aspect-ratio:5/3;min-height:0;}
}
.jn-p-eyebrow{
  display:block;font-family:var(--f-mono);font-size:var(--step-label);
  letter-spacing:0.14em;text-transform:uppercase;color:var(--accent-dim);
}
.jn-p-list{list-style:none;margin:18px 0 0;padding:0;}
.jn-p-row{
  display:flex;align-items:baseline;gap:14px;
  padding:10px 0;border-top:1px solid var(--line);
}
.jn-p-row:first-child{border-top:none;}
.jn-p-k{
  font-family:var(--f-display);font-weight:600;line-height:1;
  color:var(--text);font-variant-numeric:tabular-nums;
}
.jn-p-v{
  font-family:var(--f-mono);font-size:var(--step-meta);letter-spacing:0.06em;
  text-transform:uppercase;color:var(--text-dim);
}
.jn-p-foot{
  margin:16px 0 0;font-size:var(--step-small);line-height:1.6;
  color:var(--text-dim);max-width:38ch;
}

/* Tres tratamientos distintos para que tres paneles seguidos no se lean
   como el mismo bloque repetido. */
/* 02 Formación — cifras grandes: el curso es el resultado de esa etapa. */
.jn-panel--formacion .jn-p-k{font-size:clamp(34px,4.4vw,54px);min-width:2.6ch;}
.jn-panel--formacion .jn-p-row{padding:12px 0;}
/* 03 Práctica — secuencia: de la primera idea a real. */
.jn-panel--practica .jn-p-list{
  display:grid;grid-template-columns:1fr;gap:0;
}
.jn-panel--practica .jn-p-k{font-size:var(--step-h3);color:var(--accent-dim);min-width:5ch;}
/* 05 Proceso — lista numerada de reglas. */
.jn-panel--proceso .jn-p-k{
  font-family:var(--f-mono);font-size:12px;letter-spacing:0.08em;
  color:var(--accent-dim);min-width:2.5ch;
}
.jn-panel--proceso .jn-p-v{
  font-family:var(--f-display);font-size:var(--step-h3);letter-spacing:-0.01em;
  text-transform:none;color:var(--text);line-height:1.25;
}

/* Viajes — el vídeo del dron abre la historia; la fotografía personal aparece después. */
.viaje-cover-stage{max-width:1000px;margin-inline:auto;background:#08090a;}
.viaje-drone-video{display:block;width:100%;height:auto;aspect-ratio:16/9;
  object-fit:contain;background:#08090a;}
.viaje-drone-noscript{display:inline-block;margin:12px 20px;color:var(--text);}
.h4-iceland-card{display:grid;grid-template-columns:minmax(105px,30%) 1fr;
  gap:18px;align-items:center;margin-top:20px;color:var(--text);text-decoration:none;}
.h4-iceland-card .media{width:100%;aspect-ratio:3/2;}
.h4-iceland-card .eyebrow{display:block;margin-bottom:7px;}
.h4-iceland-card strong{display:block;font-family:var(--f-display);
  font-size:clamp(20px,2vw,27px);font-weight:400;line-height:1.1;margin-bottom:8px;}
.h4-iceland-card > span > span:last-child{color:var(--text-dim);font-size:var(--step-sm);}
.h4-iceland-card:hover > span > span:last-child{text-decoration:underline;}
.viaje-moments{max-width:1440px;margin-inline:auto;}
.viaje-moments h2{font-family:var(--f-display);font-size:clamp(28px,4vw,52px);
  font-weight:400;line-height:1.06;margin:10px 0 26px;}
.viaje-moments-grid{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);
  gap:clamp(12px,2vw,28px);align-items:start;}
.viaje-moments-grid figure{margin:0;}
.viaje-moments-grid img{display:block;width:100%;height:auto;object-fit:cover;}
.viaje-moments-grid .viaje-moment-motion{grid-column:1/-1;display:flex;
  justify-content:center;margin-top:clamp(24px,4vw,52px);}
.viaje-moment-video{display:block;width:min(100%,300px);height:auto;aspect-ratio:9/16;
  object-fit:cover;background:#0b0d0e;flex:none;}
.viaje-extra-videos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(12px,2vw,28px);max-width:1440px;margin-inline:auto;}
.viaje-extra-video{margin:0;min-width:0;background:#08090a;}
.viaje-extra-video-featured{grid-column:1/-1;}
.viaje-extra-video .media-el{display:block;width:100%;height:auto;aspect-ratio:16/9;
  object-fit:contain;background:#08090a;}
.viaje-chapters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(20px,3vw,44px);row-gap:clamp(44px,6vw,88px);}
.viaje-ch{margin:0;}
.viaje-ch-wide{width:100%;min-width:0;}
.viaje-ch-full{grid-column:1/-1;width:100%;}
.viaje-ch .viaje-media{width:100%;}
.viaje-ch .viaje-media .media-el{object-fit:contain;}
@media (max-width:700px){
  .viaje-moments-grid{grid-template-columns:1fr;gap:32px;}
  .viaje-moments-grid .viaje-moment-portrait{width:min(100%,320px);justify-self:center;}
  .viaje-moments-grid img{height:auto;max-height:none;object-fit:contain;}
  .viaje-moments-grid .viaje-moment-motion{grid-column:auto;display:flex;margin-top:8px;}
  .viaje-moment-video{width:min(100%,320px);height:auto;object-fit:contain;}
  .viaje-extra-videos{grid-template-columns:1fr;}
  .viaje-extra-video-featured{grid-column:auto;}
  .viaje-extra-video .media-el,.viaje-drone-video{height:auto;max-height:none;object-fit:contain;}
  .h4-iceland-card{grid-template-columns:minmax(90px,32%) 1fr;gap:12px;}
  .viaje-chapters{grid-template-columns:1fr;gap:40px;}
  .viaje-ch-full{grid-column:auto;}
  .viaje-ch .viaje-media{aspect-ratio:auto;overflow:visible;}
  .viaje-ch .viaje-media picture{display:block;}
  .viaje-ch .viaje-media .media-el{height:auto;max-height:none;object-fit:contain;}
  .viaje-ch .viaje-media video{aspect-ratio:16/9;}
}
@media (hover:none){
  .viaje-ch .viaje-media .media-el,
  .viaje-extra-video .media-el,
  .viaje-moment-video,
  .viaje-drone-video{transform:none;}
}

/* Weekly (viernes) 14–18 sep 2026: tabla de cierres, etiquetas editoriales y figura.
   Ámbito limitado a body.weekly; no afecta a otras páginas. */
body.weekly .weekly-table-wrap{overflow-x:auto;margin:24px 0 8px;}
body.weekly .weekly-table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;font-size:var(--step-small);}
body.weekly .weekly-table th,body.weekly .weekly-table td{padding:9px 12px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap;}
body.weekly .weekly-table--cal th,body.weekly .weekly-table--cal td{white-space:normal;text-align:left;vertical-align:top;}
body.weekly .weekly-table--cal td:first-child,body.weekly .weekly-table--cal td:nth-child(2){white-space:nowrap;}
body.weekly .weekly-table th[scope="row"],body.weekly .weekly-table thead th:first-child{text-align:left;font-weight:500;color:var(--text);}
body.weekly .weekly-table thead th{font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-dim);font-weight:500;border-bottom-color:var(--line-strong);}
body.weekly .wk-label{font-family:var(--f-mono);font-size:.78em;letter-spacing:.04em;font-weight:500;color:var(--accent-dim);}
body.weekly .weekly-chart{margin:28px 0 6px;}
body.weekly .weekly-chart .weekly-figcap{margin:10px 0 0;font-size:var(--step-small);line-height:1.55;color:var(--text-dim);}
body.weekly-recap .col-mid ol{list-style:decimal;padding-left:1.4em;margin:12px 0 20px;}
body.weekly-recap .col-mid ul{list-style:disc;padding-left:1.4em;margin:12px 0 20px;}
body.weekly-recap .col-mid li{margin:8px 0;}
body.weekly-recap .weekly-sources ol{list-style:decimal;}
body.weekly .weekly-chart + .media-credit{margin:6px 0 20px;font-size:13px;line-height:1.5;color:var(--text-dim);}
/* Weekly V2 (2026-09-19): portada conceptual tras la entradilla, separadores de cambio
   de marcha (antes del Nasdaq y antes del cierre) y firma. Solo body.weekly-recap. */
body.weekly-recap .weekly-cover{margin:32px 0 4px;}
body.weekly-recap hr.weekly-sep{border:0;border-top:1px solid var(--line);margin:56px 0 0;}
body.weekly-recap .weekly-signature{margin-top:8px;letter-spacing:.04em;}

/* ==========================================================================
   PODCAST — Psicotrading FUNESMA79
   ========================================================================== */
.podcast-page{background:#070a12;}
.pod-shell{width:min(1180px,calc(100% - 40px));margin-inline:auto;}
.pod-hero{position:relative;overflow:hidden;padding:40px 0 44px;background:radial-gradient(70% 90% at 84% 32%,rgba(98,54,255,.18),transparent 68%),radial-gradient(55% 75% at 16% 12%,rgba(25,129,255,.12),transparent 72%);}
.pod-hero::after{content:"";position:absolute;inset:auto -12% -1px 48%;height:1px;background:linear-gradient(90deg,transparent,var(--accent-dim),transparent);opacity:.7;}
.pod-hero-grid{display:grid;gap:38px;align-items:center;}
.pod-hero-copy h1{margin-top:10px;font-size:clamp(38px,7.5vw,64px);line-height:.98;letter-spacing:-.04em;max-width:12ch;}
.pod-hero-claim{margin-top:16px;font-family:var(--f-display);font-size:clamp(18px,2.6vw,24px);line-height:1.28;max-width:34ch;color:var(--text);}
.pod-hero-lede{margin-top:12px;max-width:58ch;font-size:clamp(15px,1.7vw,17px);line-height:1.6;color:var(--text-dim);}
.pod-actions{margin-top:20px;}
.pod-hero-cover{position:relative;max-width:340px;margin-inline:auto;}
.pod-hero-cover::before{content:"";position:absolute;inset:8%;background:#4c3dff;filter:blur(54px);opacity:.32;}
.pod-hero-cover .media{position:relative;border:1px solid rgba(143,163,255,.28);box-shadow:0 26px 70px rgba(0,0,0,.48);}
.pod-section{padding:44px 0;border-top:1px solid var(--line);scroll-margin-top:calc(var(--header-h) + 20px);}
.pod-section h2{margin-top:8px;font-size:clamp(24px,3.4vw,36px);line-height:1.1;letter-spacing:-.025em;max-width:22ch;}
.pod-section-head{display:grid;gap:8px;margin-bottom:20px;}
.pod-section-head p,.pod-next p{max-width:62ch;color:var(--text-dim);line-height:1.7;}
/* Rejilla compacta de episodios: 2 columnas desde movil, 3-4 en pantallas
   grandes. auto-fill con minmax evita que la ultima fila estire las tarjetas. */
.pod-episode-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:18px;}
.pod-episode{min-width:0;background:transparent;}
/* height:100% iguala la altura de las tarjetas de una misma fila aunque los
   titulos ocupen 1, 2 o 3 lineas; align-content:start deja el hueco abajo. */
.pod-episode-link{display:grid;gap:10px;height:100%;align-content:start;padding:10px;border:1px solid var(--line);background:var(--ink);color:inherit;text-decoration:none;cursor:pointer;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;}
.pod-episode-link:hover{border-color:rgba(143,163,255,.4);box-shadow:0 12px 30px rgba(0,0,0,.34);transform:translateY(-2px);}
.pod-episode-link:focus-visible{outline:2px solid var(--accent-dim);outline-offset:3px;}
/* Cuadrado 1:1. Sin arte propio por episodio es tipografico; si algun dia hay
   `cover` en episodes.json, la imagen ocupa el mismo hueco sin deformarse. */
/* Cuadrado 1:1 con la portada del podcast. Todas las tarjetas usan la misma
   imagen porque los episodios no tienen arte propio; si alguno trae `cover`,
   se pinta esa. object-fit:cover evita cualquier deformacion. */
.pod-episode-art{position:relative;aspect-ratio:1/1;overflow:hidden;border:1px solid var(--line);background:var(--ink-2,#0b0d16);}
.pod-episode-art .media,.pod-episode-art figure{margin:0;width:100%;height:100%;border:0;}
.pod-episode-art picture{display:block;width:100%;height:100%;}
.pod-episode-art img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s ease;}
.pod-episode-link:hover .pod-episode-art img{transform:scale(1.03);}
.pod-episode-copy{display:grid;gap:6px;min-width:0;}
.pod-episode-meta{display:flex;flex-wrap:wrap;gap:4px 10px;font-family:var(--f-mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint);}
.pod-episode-meta span:first-child{color:var(--accent-dim);}
/* Limite visual de 3 lineas: el titulo completo sigue disponible en el
   aria-label del enlace, asi que no se pierde informacion. */
.pod-episode h3{margin:0;font-family:var(--f-display);font-size:15px;line-height:1.25;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.pod-episode-desc{font-size:14px;line-height:1.62;color:var(--text-dim);}
/* Notas del episodio: hermanas del enlace, nunca dentro. El <summary> lleva
   un extracto, asi que la tarjeta sigue compacta y el texto completo viaja en
   el HTML inicial, sin JavaScript.
   La tarjeta pasa a columna flexible y el recuadro visible se reparte entre
   el enlace y las notas: el borde vive en .pod-episode-link, asi que sin esto
   el texto desplegado quedaba fuera de la caja. */
/* Relacionados del blog. Mismo lenguaje visual que las filas de casos:
   etiqueta de tipo (previa/resumen) + titulo + por que se enlaza. El motivo
   es el que hace util el enlace; sin el es un "ver tambien" cualquiera. */
.bl-related{border-top:1px solid var(--line)}
.bl-rel-h2{font-size:clamp(22px,3vw,30px);margin:6px 0 18px}
.bl-rel-rows{display:grid;gap:12px}
.bl-rel-row{display:grid;gap:4px;padding:16px;border:1px solid var(--line);background:var(--ink);text-decoration:none;color:inherit;transition:border-color .18s ease,transform .18s ease}
.bl-rel-row:hover{border-color:rgba(143,163,255,.4);transform:translateY(-2px)}
.bl-rel-row:focus-visible{outline:2px solid var(--accent-dim);outline-offset:3px}
.bl-rel-k{font-family:var(--f-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-dim)}
.bl-rel-t{font-family:var(--f-display);font-size:18px;line-height:1.25}
.bl-rel-w{font-size:13px;line-height:1.55;color:var(--text-dim)}
@media (min-width:720px){.bl-rel-rows{gap:14px}.bl-rel-t{font-size:20px}}
.pod-episode{display:flex;flex-direction:column}
.pod-episode>.pod-episode-link{flex:1 1 auto;height:auto}
.pod-episode-grid .pod-episode-link{border-bottom:0}
.pod-episode-notes{flex:0 0 auto;border:1px solid var(--line);border-top:0;background:var(--ink);padding:10px}
.pod-episode-notes summary{font-size:12px;line-height:1.45;color:var(--text-dim);cursor:pointer;list-style:none;display:block}
.pod-episode-notes summary::-webkit-details-marker{display:none}
.pod-episode-notes summary::after{content:" +";color:var(--accent-dim);font-family:var(--f-mono)}
.pod-episode-notes[open] summary::after{content:" − "}
.pod-episode-notes summary:hover{color:var(--text)}
.pod-episode-notes summary:focus-visible{outline:2px solid var(--accent-dim);outline-offset:3px}
.pod-episode-notes p{margin:8px 0 0;font-size:13px;line-height:1.6;color:var(--text-dim)}
@media (min-width:720px){.pod-episode-notes{padding:12px}}
.pod-listen{display:inline-flex;align-items:center;font-family:var(--f-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-dim);}
.pod-episode-link:hover .pod-listen{color:var(--text);}
/* Episodio sin URL directa: misma caja, pero sin ninguna afordancia de enlace.
   No se levanta, no cambia el borde, la portada no hace zoom y el cursor no es
   una mano. Una tarjeta que parece clicable y no lo es miente igual. */
.pod-episode-link.is-pending{cursor:default;}
.pod-episode-link.is-pending:hover{border-color:var(--line);box-shadow:none;transform:none;}
.pod-episode-link.is-pending:hover .pod-episode-art img{transform:none;}
/* --text-dim, no --text-faint: a 10px el faint se queda en 3.2:1 sobre --ink
   y no pasa AA. El distintivo es informacion, no decoracion, asi que se lee.
   No se usa --accent-dim para no darle aspecto de enlace. */
.pod-listen.is-pending,.pod-episode-link.is-pending:hover .pod-listen{color:var(--text-dim);}
/* Destacado: mismo componente, en horizontal y sin portada gigante. */
.pod-episode.is-featured{margin-top:14px;}
.pod-episode.is-featured .pod-episode-link{grid-template-columns:120px minmax(0,1fr);align-items:center;align-content:center;gap:20px;padding:18px;border-color:rgba(143,163,255,.24);background:linear-gradient(135deg,rgba(62,99,240,.11),var(--ink) 55%);}
.pod-episode.is-featured h3{font-size:clamp(19px,3.4vw,26px);-webkit-line-clamp:3;line-clamp:3;}
.pod-episode.is-featured .pod-listen{min-height:44px;font-size:11px;}
.pod-topics{background:linear-gradient(180deg,rgba(62,99,240,.04),transparent);}
.pod-topics ul{display:grid;grid-template-columns:1fr;margin-top:30px;border:1px solid var(--line);}
.pod-topics li{padding:18px;border-bottom:1px solid var(--line);font-family:var(--f-display);font-size:19px;}
.pod-topics li:last-child{border-bottom:0;}
.pod-about-grid{display:grid;gap:28px;}
.pod-prose p{font-size:clamp(16px,2vw,19px);line-height:1.75;color:var(--text-dim);}
.pod-prose p+p{margin-top:16px;}
.pod-prose a{color:var(--accent-dim);text-decoration:underline;text-underline-offset:3px;}
.pod-player-facade{padding:30px;border:1px solid rgba(143,163,255,.26);background:linear-gradient(135deg,rgba(62,99,240,.12),rgba(110,43,255,.08));text-align:center;}
.pod-player-facade h2{margin-inline:auto;}
.pod-player-facade .facade-note{margin:16px auto 22px;max-width:58ch;line-height:1.65;color:var(--text-dim);}
.pod-player-facade .pod-privacy{margin:14px auto 0;max-width:62ch;font-size:12px;line-height:1.55;color:var(--text-faint);}
.spotify-embed{border-radius:12px;overflow:hidden;min-height:352px;margin-block:0;background:var(--surface);}
.spotify-embed iframe{display:block;border:0;border-radius:12px;width:100%;}
.pod-next{text-align:center;background:radial-gradient(60% 120% at 50% 100%,rgba(62,99,240,.14),transparent 72%);}
.pod-next h2,.pod-next p{margin-inline:auto;}
.pod-next p{margin-top:16px;}
.pod-next .btn-row{justify-content:center;margin-top:26px;}

@media (min-width:720px){
  .pod-shell{width:min(1180px,calc(100% - 64px));}
  .pod-episode-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:20px;}
  .pod-episode-link{padding:12px;gap:12px;}
  .pod-episode h3{font-size:16px;}
  .pod-episode-desc{font-size:15px;}
  .pod-episode.is-featured .pod-episode-link{grid-template-columns:150px minmax(0,1fr);padding:22px;gap:24px;}
  .pod-topics ul{grid-template-columns:repeat(2,1fr);}
  .pod-topics li:nth-last-child(2){border-bottom:0;}
  .pod-topics li:nth-child(odd){border-right:1px solid var(--line);}
}
@media (min-width:960px){
  .pod-hero{padding:48px 0 52px;}
  .pod-hero-grid{grid-template-columns:minmax(0,1.25fr) minmax(240px,.75fr);gap:56px;}
  .pod-hero-cover{margin-right:0;}
  .pod-section{padding:52px 0;}
  /* 3 columnas en portatil */
  .pod-episode-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  .pod-episode.is-featured .pod-episode-link{grid-template-columns:170px minmax(0,1fr);padding:26px;}
  .pod-about-grid{grid-template-columns:.8fr 1.2fr;gap:80px;}
}
@media (max-width:430px){
  .pod-shell{width:min(100% - 28px,1180px);}
  /* 2 columnas en movil: con minmax(140px) siguen siendo legibles a 390px */
  .pod-episode-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;}
  .pod-episode-link{padding:8px;gap:8px;}
  .pod-episode-meta{gap:4px 8px;font-size:8.5px;}
  .pod-episode h3{font-size:14px;}
  .pod-episode-desc{font-size:13.5px;}
  .pod-episode.is-featured .pod-episode-link{grid-template-columns:92px minmax(0,1fr);gap:14px;padding:14px;}
  .pod-player-facade{padding:24px 16px;}
}
/* 4 columnas a partir de 1440 */
@media (min-width:1440px){
  .pod-episode-grid{grid-template-columns:repeat(4,minmax(0,1fr));}
}
@media (prefers-reduced-motion:reduce){
  .pod-episode-link,.pod-episode-art img{transition:none;}
  .pod-episode-link:hover{transform:none;}
  .pod-episode-link:hover .pod-episode-art img{transform:none;}
}