/* ==========================================================================
   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) --- */
  --step-caption: 12px;
  --step-body: clamp(15px, 1.4vw, 16.5px);
  --step-lede: clamp(17px, 2vw, 20px);
  --step-h3: clamp(19px, 2.6vw, 23px);
  --step-h2: clamp(24px, 4vw, 32px);
  --step-h1: clamp(34px, 7vw, 58px);
  --step-hero: clamp(44px, 11vw, 96px);

  --radius: 2px;
  --content-w: 640px;
  --wide-w: 1180px;
}

*{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;
  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);
}
@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);}

/* 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){
  .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;
  }
  .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;}
}

/* ==========================================================================
   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;}
.proto-badge{
  display:inline-block;font-family:var(--f-mono);font-size:10px;letter-spacing:0.04em;
  color:var(--amber);border:1px solid rgba(214,162,78,0.35);padding:3px 8px;border-radius:999px;
  margin-bottom:10px;
}

/* ==========================================================================
   Layout primitives
   ========================================================================== */
.col{max-width:var(--content-w);margin:0 auto;padding:0 20px;}
.col-mid{max-width:920px;margin:0 auto;padding:0 20px;}
.col-wide{max-width:var(--wide-w);margin:0 auto;padding:0 20px;}
.stack{display:flex;flex-direction:column;}
.rhythm > * + *{margin-top:64px;}
.rhythm-tight > * + *{margin-top:32px;}

section.block{padding:56px 0;}
section.block.compact{padding:32px 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 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 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;}

/* 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-top:0;border-top:none;padding-left:16px;border-left:1px solid var(--line);}
  body.light-section .nav-social{border-left-color:var(--paper-line);}
  .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-3x2{aspect-ratio:3/2;}
.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-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{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 1fr;gap:12px;margin-top:12px;}
@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);}
.platform-block{background:linear-gradient(180deg,transparent,rgba(62,99,240,0.05) 50%,transparent);}
.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;}}

/* placeholder: etiqueta discreta del asset que falta */
.media.ph .ph-tag{position:absolute;right:12px;bottom:10px;font-family:var(--f-mono);font-size:9px;letter-spacing:0.08em;color:rgba(236,238,242,0.38);background:rgba(10,12,16,0.45);padding:3px 7px;border-radius:2px;pointer-events:none;}

/* 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 */
.h4-hero{padding:28px 0 24px;overflow:hidden;}
.h4-hero-inner{display:flex;flex-direction:column;}
.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;}
.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);gap:0 64px;align-items:center;}
  .h4-hero-copy{order:1;padding-top:0;}
  .h4-hero-media{order:2;margin:0;}
  .h4-hero-media .media{max-height:min(82vh,720px);}
}
@media (min-width:1200px){.h4-hero-inner{gap:0 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%;}
.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;}}
.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);}}