/* ═══ DISEÑO DREX v5 ═══════════════════════════════════════════════════ */
  .drex{
    --bg: #08080a;
    --bg-elev: #0d0d10;
    --fg: #f5f5f7;
    --fg-dim: rgba(245,245,247,.72);
    --muted: #8b8b95;
    --muted-deep: #4a4a52;
    --accent: #d81f26;
    --accent-glow: #ff3540;
    --border: rgba(255,255,255,.06);
    --border-strong: rgba(255,255,255,.14);

    background: var(--bg); color: var(--fg);
    font-family:'Manrope', -apple-system, system-ui, sans-serif;
    font-size:15px; line-height:1.6;
    min-height:100%;
    position:relative;
  }

  /* Tipografía display (Instrument Serif) */
  .serif{ font-family:'Instrument Serif', serif; font-style: italic; letter-spacing:-.005em }
  .mono{ font-family:'Space Mono', monospace; }
  .label{
    font-family:'Space Mono', monospace; font-size:10px;
    letter-spacing:.24em; text-transform:uppercase;
    color:var(--muted);
  }
  .label .dot{ color:var(--accent); margin-right:6px }
  .thin-rule{
    display:block; width:60px; height:1px; background:var(--border-strong);
    margin: 20px 0;
  }

  /* ═══ NAV ══════════════════════════════════════════════════════════════ */
  .drex-nav{
    position:fixed; top:0; left:0; right:0; z-index:1000;
    display:flex; align-items:center; justify-content:space-between;
    padding: 18px 44px;
    background: rgba(11,11,13,.82);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  .drex-nav .brand{
    font-family:'Manrope', sans-serif; font-weight:800; font-size:34px;
    letter-spacing:.08em; color:var(--fg); text-decoration:none;
    display:inline-flex; align-items:center; gap:14px;
    line-height:.95;
  }
  .drex-nav .brand::before{
    content:''; width:14px; height:14px; background:var(--accent); border-radius:50%;
    box-shadow: 0 0 18px rgba(216,31,38,.9);
  }
  /* Enlaces directos visibles en desktop (se ocultan en móvil) */
  .drex-nav-links{ display:flex; align-items:center; gap:26px; }
  .drex-nav-links a{
    font-family:'Manrope', sans-serif; font-weight:600; font-size:14px;
    letter-spacing:.06em; color: var(--muted); text-decoration:none;
    transition: color .18s ease;
  }
  .drex-nav-links a:hover, .drex-nav-links a:focus-visible{ color: var(--fg); }
  .drex-nav .right{ display:flex; align-items:center; gap:20px }

  /* Selector ES/EN — pill con banderas y activo en rojo */
  .drex-lang-pill{
    display:inline-flex; align-items:center; gap:3px;
    padding:3px; border-radius:999px;
    border:1px solid var(--border-strong);
    background: rgba(0,0,0,.4);
    backdrop-filter: blur(6px);
  }
  .drex-lang-item{
    display:inline-flex; align-items:center; gap:7px;
    padding:6px 13px 6px 10px;
    background:transparent; border:none;
    border-radius:999px;
    font-family:'Manrope', sans-serif; font-weight:700; font-size:12px;
    color: var(--muted); letter-spacing:.06em;
    cursor:pointer; transition: background .2s ease, color .2s ease;
    line-height:1;
  }
  .drex-lang-item:hover{ color: var(--fg) }
  .drex-lang-item.active{
    background: var(--accent); color:#fff;
    box-shadow: 0 4px 14px -3px rgba(216,31,38,.55);
  }
  .drex-lang-item .flag{
    font-size:14px; line-height:1;
    filter: saturate(1.05);
    display:inline-block;
  }
  .drex-nav .menu-btn{
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.22);
    color:var(--fg);
    font-family:'Manrope', sans-serif; font-weight:700; font-size:14px;
    letter-spacing:.14em; text-transform:uppercase;
    cursor:pointer;
    padding: 10px 18px 10px 20px;
    border-radius: 999px;
    display:inline-flex; align-items:center; gap:12px;
    transition: background .18s ease, border-color .18s ease, transform .18s ease;
  }
  .drex-nav .menu-btn:hover, .drex-nav .menu-btn:focus-visible{
    background: rgba(216,31,38,.22);
    border-color: rgba(216,31,38,.6);
    color:#fff;
  }
  .drex-nav .menu-btn::after{
    content:''; display:inline-block;
    width:22px; height:2px; background:currentColor; border-radius:1px;
    box-shadow: 0 -7px 0 currentColor, 0 7px 0 currentColor;
  }

  /* ═══ SECCIÓN 1 · HERO SILENCIOSO (manifiesto tipográfico) ═════════════ */
  .drex-hero{
    position:relative;
    min-height: 100%;
    display:flex; flex-direction:column; justify-content:center;
    padding: 140px 44px 100px;
    background: var(--bg);
    isolation:isolate;
  }
  .drex-hero-inner{
    max-width: 1100px; margin: 0 auto; width:100%;
  }
  .drex-hero .kicker{
    display:inline-flex; align-items:center; gap:10px;
    font-family:'Space Mono', monospace; font-size:10px;
    letter-spacing:.28em; text-transform:uppercase;
    color: var(--muted); margin-bottom: 40px;
  }
  .drex-hero .kicker::before{
    content:''; width:24px; height:1px; background:var(--muted-deep);
  }

  .drex-hero .thesis{
    font-family:'Manrope', sans-serif; font-weight: 700;
    font-size: clamp(34px, 5vw, 68px);
    line-height: 1.08; letter-spacing:-.02em;
    color: var(--fg); margin: 0;
    text-wrap: balance;
    max-width: 24ch;
  }
  .drex-hero .thesis .accent{ color: var(--accent) }
  .drex-hero .thesis .plain{
    font-family:'Manrope', sans-serif;
    font-weight: 300;
    color: var(--fg-dim);
  }
  .drex-hero .thesis::after{
    content:'.'; color: var(--accent);
  }

  .drex-hero .lede{
    max-width: 44ch;
    font-family:'Manrope', sans-serif; font-weight: 400;
    font-size: 16px; color: var(--fg-dim);
    line-height: 1.65;
    margin: 44px 0 40px;
  }

  .drex-hero .cta-row{
    display:flex; align-items:center; gap: 40px; flex-wrap:wrap;
  }
  .drex-hero .cta-primary{
    display:inline-flex; align-items:center; gap:14px;
    font-family:'Manrope', sans-serif; font-weight: 500;
    font-size: 15px; color: var(--fg);
    text-decoration: none; padding: 0;
    background:transparent; border:none; cursor:pointer;
    letter-spacing:.01em;
    transition: color .2s ease;
  }
  .drex-hero .cta-primary .arrow{
    display:inline-block; width: 42px; height:42px;
    border: 1px solid var(--border-strong); border-radius:50%;
    display:grid; place-items:center;
    transition: background .2s ease, border-color .2s ease, transform .25s ease;
  }
  .drex-hero .cta-primary:hover .arrow{
    background: var(--accent); border-color: var(--accent);
    transform: translateX(4px);
  }
  .drex-hero .cta-primary .arrow svg{ width:14px; height:14px; fill: var(--fg) }
  .drex-hero .cta-secondary{
    font-family:'Manrope', sans-serif; font-weight:500; font-size:14px;
    color: var(--muted); text-decoration:none;
    letter-spacing:.01em;
    border-bottom: 1px solid var(--muted-deep);
    padding-bottom: 3px;
    transition: color .2s ease, border-color .2s ease;
  }
  .drex-hero .cta-secondary:hover{ color: var(--fg); border-color: var(--fg) }

  .drex-hero-meta{
    position:absolute; bottom: 44px; left: 44px;
    display:flex; gap: 60px; align-items:flex-end;
  }
  .drex-hero-meta > div{
    font-family:'Space Mono', monospace; font-size:10px;
    color: var(--muted-deep); letter-spacing:.16em; text-transform:uppercase;
  }
  .drex-hero-meta b{
    display:block; font-family:'Manrope', sans-serif; font-weight:700;
    font-size:22px; color:var(--fg); letter-spacing:-.01em;
    text-transform:none; margin-bottom: 4px;
  }

  .drex-hero-scroll{
    position:absolute; bottom: 44px; right: 44px;
    font-family:'Space Mono', monospace; font-size:10px;
    color: var(--muted); letter-spacing:.22em; text-transform:uppercase;
    display:flex; align-items:center; gap:14px;
  }
  .drex-hero-scroll::after{
    content:''; width:1px; height:42px; background:var(--muted-deep);
    animation: pulse-line 2.4s ease-in-out infinite;
  }
  @keyframes pulse-line{
    0%,100%{ opacity:.4; transform: scaleY(1); transform-origin: top }
    50%{ opacity:1; transform: scaleY(1.15); transform-origin: top }
  }

  /* ═══ SECCIÓN 2 · MANIFIESTO SOBRE BACKDROP ════════════════════════════ */
  .drex-manifesto{
    position:relative;
    min-height: 90%;
    padding: 140px 44px;
    display:flex; align-items:center; justify-content:center;
    isolation:isolate; overflow:hidden;
  }
  .drex-manifesto::before{
    content:''; position:absolute; inset:0; z-index:0;
    background:
      radial-gradient(ellipse 720px 460px at 50% 50%, rgba(0,0,0,.28), transparent 70%),
      linear-gradient(180deg, rgba(8,8,10,.35) 0%, rgba(8,8,10,.10) 30%, rgba(8,8,10,.10) 70%, rgba(8,8,10,.55) 100%);
  }
  .drex-manifesto-inner{
    position:relative; z-index:1; max-width: 720px; text-align:center;
  }
  .drex-manifesto .label{ display:block; margin-bottom: 40px; }
  .drex-manifesto p{
    font-family:'Instrument Serif', serif; font-style: italic;
    font-size: clamp(24px, 3.2vw, 40px); line-height: 1.35;
    color: var(--fg); margin: 0 0 40px;
    letter-spacing:-.005em; text-wrap:balance;
  }
  .drex-manifesto p .accent{ color: var(--accent) }
  .drex-manifesto .signature{
    display:inline-flex; align-items:center; gap:14px;
    font-family:'Space Mono', monospace; font-size:11px;
    color: var(--fg-dim); letter-spacing:.14em; text-transform:uppercase;
  }
  .drex-manifesto .signature::before,
  .drex-manifesto .signature::after{
    content:''; width:32px; height:1px; background:var(--border-strong);
  }

  /* ═══ SECCIÓN 3 · CAPÍTULOS EDITORIALES (obras) ════════════════════════ */
  .drex-chapters{ padding: 100px 44px 60px }
  .drex-chapters-head{
    max-width: 1100px; margin: 0 auto 90px;
    display:flex; justify-content:space-between; align-items:flex-end;
    gap: 40px; flex-wrap:wrap;
  }
  .drex-chapters-head h2{
    font-family:'Instrument Serif', serif; font-style: italic;
    font-size: clamp(40px, 5.2vw, 76px); line-height:1;
    letter-spacing:-.01em; margin: 20px 0 0; color: var(--fg);
  }
  .drex-chapters-head .meta{
    font-family:'Manrope', sans-serif; font-weight:400;
    font-size:14px; color: var(--muted);
    max-width: 32ch;
  }

  .drex-chapter{
    max-width: 1100px; margin: 0 auto;
    display:grid; grid-template-columns: 1fr 1fr;
    gap: 60px; align-items: center;
    padding: 60px 0; border-top: 1px solid var(--border);
  }
  .drex-chapter:first-of-type{ border-top: 1px solid var(--border-strong) }
  .drex-chapter:nth-child(even) .cover-col{ order: 2 }

  .drex-chapter .cover-col{
    position:relative;
  }
  .drex-chapter .cover-col img{
    width:100%; aspect-ratio: 1/1; object-fit:cover;
    display:block; border-radius: 4px;
    box-shadow: 0 40px 80px -30px rgba(0,0,0,.9);
  }
  .drex-chapter .cover-col .num{
    display:none;
    font-family:'Space Mono', monospace; font-size:11px;
    color: var(--muted-deep); letter-spacing:.18em;
    background:transparent; padding:0;
  }
  .drex-chapter .info-col .kind{
    display:inline-flex; align-items:center; gap:8px;
    font-family:'Space Mono', monospace; font-size:10px;
    letter-spacing:.24em; text-transform:uppercase;
    color: var(--muted); margin-bottom: 22px;
  }
  .drex-chapter .info-col .kind::before{
    content:''; width:4px; height:4px; border-radius:50%; background:var(--accent);
  }
  .drex-chapter .info-col .kind.opera{ color: #ffb2b6 }
  .drex-chapter .info-col h3{
    font-family:'Instrument Serif', serif; font-style: italic;
    font-size: clamp(40px, 5.4vw, 78px);
    line-height: .95; letter-spacing:-.02em;
    margin: 0 0 24px; color: var(--fg);
    text-wrap: balance;
  }
  .drex-chapter .info-col .subline{
    display:flex; gap:24px;
    font-family:'Space Mono', monospace; font-size:11px;
    color: var(--muted); letter-spacing:.06em;
    margin-bottom: 28px;
  }
  .drex-chapter .info-col .subline span{
    display:inline-flex; align-items:center; gap:6px;
  }
  .drex-chapter .info-col .subline span::before{
    content:'◆'; color: var(--accent); font-size:8px;
  }
  .drex-chapter .info-col .desc{
    font-family:'Manrope', sans-serif; font-weight:400;
    font-size:15px; line-height:1.65; color: var(--fg-dim);
    margin: 0 0 36px; max-width: 44ch;
  }
  .drex-chapter .info-col .actions{
    display:flex; align-items:center; gap: 28px;
  }
  .drex-chapter .info-col .btn-primary{
    display:inline-flex; align-items:center; gap:12px;
    font-family:'Manrope', sans-serif; font-weight:500;
    font-size:14px; color: var(--fg); background:transparent;
    border:none; cursor:pointer; padding:0;
    letter-spacing:.01em;
  }
  .drex-chapter .info-col .btn-primary .icon{
    width: 44px; height:44px; border: 1px solid var(--fg);
    border-radius:50%; display:grid; place-items:center;
    transition: background .2s ease, transform .25s ease;
  }
  .drex-chapter .info-col .btn-primary:hover .icon{
    background: var(--accent); border-color:var(--accent);
    transform: scale(1.05);
  }
  .drex-chapter .info-col .btn-primary .icon svg{ width:12px; height:12px; fill: var(--fg); margin-left:2px }
  .drex-chapter .info-col .btn-secondary{
    font-family:'Manrope', sans-serif; font-weight:500; font-size:13px;
    color: var(--muted); text-decoration:none;
    letter-spacing:.02em;
    border-bottom: 1px solid var(--muted-deep);
    padding-bottom: 3px;
    transition: color .2s ease, border-color .2s ease;
  }
  .drex-chapter .info-col .btn-secondary:hover{ color: var(--fg); border-color: var(--fg) }

  /* ═══ SECCIÓN 4 · SELECTOR EMOCIONAL (al final) ════════════════════════ */
  .drex-emotions{
    padding: 100px 44px 120px;
    background: var(--bg-elev);
    border-top: 1px solid var(--border);
    text-align:center;
  }
  .drex-emotions .label{ display:block; margin-bottom: 20px }
  .drex-emotions h2{
    font-family:'Instrument Serif', serif; font-style: italic;
    font-size: clamp(36px, 4.6vw, 64px); line-height:1;
    margin: 0 0 50px; color: var(--fg); letter-spacing:-.015em;
  }
  .drex-emotions .chips{
    display:flex; gap:12px; flex-wrap:wrap; justify-content:center;
    max-width: 900px; margin: 0 auto;
  }
  .drex-emotions .chip{
    display:inline-flex; align-items:center; gap:10px;
    padding: 14px 24px; border-radius:999px;
    border: 1px solid var(--border-strong);
    background: transparent; color: var(--fg);
    font-family:'Manrope', sans-serif; font-weight:500; font-size:14px;
    cursor:pointer; letter-spacing:.01em;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
  }
  .drex-emotions .chip:hover{
    background: var(--accent); border-color:var(--accent); color:#fff;
  }
  .drex-emotions .chip .icon{ width:14px; height:14px; opacity:.8 }
  .drex-emotions .chip.surprise{
    background: transparent; color: var(--accent);
    border-color: var(--accent);
    font-family:'Instrument Serif', serif; font-style:italic;
    font-size:15px; padding: 14px 26px;
  }
  .drex-emotions .chip.surprise:hover{
    background: var(--accent); color:#fff;
  }
  .drex-emotions .chip.surprise .note{
    font-family:'Space Mono', monospace; font-style:normal;
    font-size:10px; opacity:.7; margin-left:6px;
    letter-spacing:.12em; text-transform:uppercase;
  }

  /* ═══ REPRODUCTOR PERSISTENTE (sticky bottom) ══════════════════════════ */
  .drex-player{
    position:sticky; bottom: 0;
    display:grid; grid-template-columns: minmax(200px, 1fr) auto 1fr;
    align-items:center; gap: 40px;
    padding: 14px 44px;
    background: rgba(8,8,10,.92); backdrop-filter: blur(14px);
    border-top: 1px solid var(--border);
    z-index: 15;
  }
  .drex-player .now-playing{
    display:flex; align-items:center; gap:14px; min-width:0;
  }
  .drex-player .now-playing img{
    width:44px; height:44px; border-radius:4px; object-fit:cover;
    flex-shrink:0;
  }
  .drex-player .now-playing .info{ min-width:0 }
  .drex-player .now-playing .track{
    font-family:'Manrope', sans-serif; font-weight:500; font-size:13px;
    color: var(--fg); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .drex-player .now-playing .work{
    font-family:'Space Mono', monospace; font-size:10px;
    color: var(--muted); letter-spacing:.08em;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .drex-player .controls{
    display:flex; align-items:center; gap: 18px;
  }
  .drex-player .controls button{
    background:transparent; border:none; color: var(--fg); cursor:pointer;
    display:grid; place-items:center; padding:6px;
  }
  .drex-player .controls button:hover{ color: var(--accent) }
  .drex-player .play-main{
    width:38px; height:38px; border-radius:50%;
    background: var(--fg); color: var(--bg);
  }
  .drex-player .play-main:hover{ background: var(--accent); color:#fff }
  .drex-player .play-main svg{ margin-left: 2px }
  .drex-player .progress{
    display:flex; align-items:center; gap:12px;
    font-family:'Space Mono', monospace; font-size:10px;
    color: var(--muted); letter-spacing:.06em;
  }
  .drex-player .bar{
    flex:1; height:2px; background: var(--border-strong); border-radius:2px;
    position:relative; min-width: 120px; max-width: 260px;
  }
  .drex-player .bar::before{
    content:''; position:absolute; left:0; top:0; bottom:0;
    width:32%; background: var(--accent); border-radius:2px;
  }

  /* ═══ FOOTER ═══════════════════════════════════════════════════════════ */
  .drex-footer{
    padding: 80px 44px 40px; text-align:center;
    background: var(--bg);
  }
  .drex-footer .brand-line{
    font-family:'Instrument Serif', serif; font-style: italic;
    font-size: 20px; color: var(--fg); margin-bottom: 12px;
  }
  .drex-footer .sub-line{
    font-family:'Manrope', sans-serif; font-size:13px;
    color: var(--muted); margin-bottom: 30px;
  }
  .drex-footer .platforms{
    display:flex; justify-content:center; gap: 26px; flex-wrap:wrap;
    font-family:'Space Mono', monospace; font-size:10px;
    color: var(--muted-deep); letter-spacing:.28em; text-transform:uppercase;
  }
  .drex-footer .platforms span{ position:relative }
  .drex-footer .platforms span + span::before{
    content:''; position:absolute; left:-15px; top:50%;
    width:4px; height:4px; border-radius:50%; background: var(--muted-deep);
    transform: translateY(-50%);
  }

  /* ═══ RESPONSIVE ═══════════════════════════════════════════════════════ */
  /* Frame móvil del prototipo (420 px) */






  /* Media query real (móvil real) */
  @media (max-width: 640px){
    .drex-nav{ padding: 10px 16px }
    .drex-nav .brand{ font-size: 22px; gap: 10px }
    .drex-nav .brand::before{ width: 11px; height: 11px }
    .drex-nav-links{ display:none }
    .drex-nav .right{ gap: 10px }
    .drex-nav .menu-btn{ padding: 9px 14px 9px 16px; font-size:13px; gap:10px }
    .drex-nav .menu-btn::after{ width:18px }
    .drex-hero{ padding: 110px 24px 90px }
    .drex-hero .thesis{ font-size: 52px; max-width: 100% }
    .drex-hero-meta{ left: 24px; bottom: 30px; gap:30px }
    .drex-hero-scroll{ display:none }
    .drex-manifesto{ padding: 100px 24px; }
    .drex-manifesto p{ font-size: 24px }
    .drex-chapters{ padding: 80px 24px 40px }
    .drex-chapter{ grid-template-columns:1fr; gap:30px; padding: 50px 0 }
    .drex-chapter:nth-child(even) .cover-col{ order:0 }
    .drex-emotions{ padding: 80px 24px }
    .drex-player{ grid-template-columns:1fr auto; padding: 12px 20px; gap: 14px }
    .drex-player .progress{ display:none }
    .drex-footer{ padding: 60px 24px 30px }
  }

  /* ═══ Backdrop del manifiesto vía <picture> (mejor performance que bg-image) ═══ */
  .drex-manifesto-bg{
    position:absolute; inset:0; z-index:0; display:block; overflow:hidden;
  }
  .drex-manifesto-bg img{
    width:100%; height:100%; object-fit:cover; display:block;
  }
  .drex-manifesto::before{ z-index: 1 !important; }
  .drex-manifesto-inner{ z-index: 2; }

  /* Loading placeholder mientras el JS hidrata /api/public-works */
  .drex-chapters-loading{
    text-align:center; padding: 60px 20px;
    font-family:'Space Mono', monospace; font-size: 11px;
    color: var(--muted-deep); letter-spacing: .18em; text-transform: uppercase;
  }
  .drex-chapter .cover-placeholder{
    width:100%; aspect-ratio: 1/1; background: var(--bg-elev);
    border-radius: 4px;
  }

/* ═══════════════════════════════════════════════════════════════════════
   Menú overlay v5 · fullscreen editorial
   Se inyecta desde drex-home-v5.js. Se activa con .open.
   ═══════════════════════════════════════════════════════════════════════ */
.drex-menu-overlay{
  position:fixed; inset:0;
  background:rgba(8,8,10,.97);
  -webkit-backdrop-filter:blur(24px);
  backdrop-filter:blur(24px);
  opacity:0; visibility:hidden;
  transition:opacity .3s ease, visibility 0s linear .3s;
  z-index:10000;
  overflow-y:auto;
  overscroll-behavior:contain;
}
.drex-menu-overlay.open{
  opacity:1; visibility:visible;
  transition:opacity .3s ease;
}
.drex-menu-inner{
  max-width:900px;
  margin:0 auto;
  padding:32px 40px 80px;
  min-height:100vh;
  box-sizing:border-box;
}
.drex-menu-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-bottom:56px;
}
.drex-menu-brand{
  font-family:'Manrope',-apple-system,system-ui,sans-serif;
  font-weight:800;
  font-size:24px;
  letter-spacing:.08em;
  color:#fff;
  text-decoration:none;
}
.drex-menu-close{
  background:transparent;
  border:1px solid rgba(255,255,255,.14);
  color:#fff;
  padding:10px 18px;
  border-radius:999px;
  font-family:'Manrope',sans-serif;
  font-weight:600;
  font-size:13px;
  cursor:pointer;
  letter-spacing:.04em;
  transition:border-color .18s ease, background .18s ease, color .18s ease;
}
.drex-menu-close:hover, .drex-menu-close:focus-visible{
  border-color:var(--accent);
  background:rgba(216,31,38,.10);
  outline:none;
}
.drex-menu-primary{
  display:grid;
  gap:0;
}
.drex-menu-primary a{
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:baseline;
  gap:24px;
  padding:22px 0;
  border-bottom:1px solid rgba(255,255,255,.10);
  color:#ffffff;
  text-decoration:none;
  font-family:'Instrument Serif',serif;
  font-style:italic;
  font-weight:400;
  font-size:clamp(40px,6vw,58px);
  line-height:1.02;
  letter-spacing:-.01em;
  opacity:0;
  transform:translateY(20px);
  transition:opacity .45s cubic-bezier(.22,.9,.32,1), transform .45s cubic-bezier(.22,.9,.32,1), color .2s ease;
}
.drex-menu-overlay.open .drex-menu-primary a{
  opacity:1;
  transform:translateY(0);
  transition-delay:calc(60ms * var(--i,0));
}
.drex-menu-primary a:hover, .drex-menu-primary a:focus-visible{
  color:#ff5560;
  outline:none;
}
.drex-menu-primary a:hover .drex-menu-item-label,
.drex-menu-primary a:focus-visible .drex-menu-item-label{
  transform:translateX(10px);
}
.drex-menu-primary a .drex-menu-item-label{
  transition:transform .2s ease;
  display:inline-block;
  font-family:'Instrument Serif',serif;
  font-style:italic;
  font-weight:400;
  font-size:inherit;
  text-transform:none;
  letter-spacing:normal;
  color:inherit;
}
.drex-menu-primary a .num{
  font-family:'Space Mono',ui-monospace,Menlo,monospace;
  font-style:normal;
  font-size:12px;
  color:#a8a8b0;
  align-self:flex-start;
  padding-top:24px;
  min-width:44px;
  letter-spacing:.06em;
}
.drex-menu-secondary{
  margin-top:56px;
  padding-top:32px;
  border-top:1px solid rgba(255,255,255,.06);
  display:flex;
  flex-wrap:wrap;
  gap:12px 40px;
}
.drex-menu-secondary a{
  color:#dcdce0;
  text-decoration:none;
  font-family:'Manrope',sans-serif;
  font-weight:600;
  font-size:16px;
  padding:10px 0;
  transition:color .2s ease;
}
.drex-menu-secondary a:hover, .drex-menu-secondary a:focus-visible{
  color:#ff5560;
  outline:none;
}
.drex-menu-legal{
  margin-top:56px;
  display:flex;
  gap:32px;
  flex-wrap:wrap;
  font-family:'Space Mono',ui-monospace,Menlo,monospace;
  font-size:12px;
  color:#9a9aa2;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.drex-menu-legal a{
  color:#9a9aa2;
  text-decoration:none;
  transition:color .2s ease;
}
.drex-menu-legal a:hover, .drex-menu-legal a:focus-visible{
  color:#ffffff;
  outline:none;
}
@keyframes drex-menu-item-in{
  from{opacity:0; transform:translateY(20px);}
  to{opacity:1; transform:translateY(0);}
}
@media (prefers-reduced-motion: reduce){
  .drex-menu-primary a{ transition:none; opacity:1; transform:none; }
  .drex-menu-overlay.open .drex-menu-primary a{ transition-delay:0s; }
  .drex-menu-overlay{ transition:opacity .12s ease; }
}
@media (max-width: 640px){
  .drex-menu-inner{ padding:24px 24px 60px; }
  .drex-menu-head{ padding-bottom:36px; }
  .drex-menu-primary a{ font-size:34px; gap:14px; padding:16px 0; }
  .drex-menu-primary a .num{ min-width:28px; font-size:10px; padding-top:14px; }
  .drex-menu-secondary{ margin-top:36px; padding-top:24px; gap:8px 24px; }
  .drex-menu-legal{ margin-top:40px; }
}
/* Bloquear el scroll del body cuando el menú está abierto */
body.drex-menu-open{
  overflow:hidden;
  touch-action:none;
}

/* ═══════════════════════════════════════════════════════════════════════
   Footer social + plataformas · v5.1
   ═══════════════════════════════════════════════════════════════════════ */
.drex-footer-socials{
  display:flex; justify-content:center; gap:16px; flex-wrap:wrap;
  margin:32px auto 0; max-width:400px;
}
.drex-footer-socials a{
  display:grid; place-items:center;
  width:48px; height:48px;
  border-radius:50%;
  color:#f5f5f7;
  border:1.5px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.08);
  text-decoration:none;
  transition:color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.drex-footer-socials a:hover,
.drex-footer-socials a:focus-visible{
  transform:translateY(-2px);
  outline:none;
}
/* Colores de marca en hover, uno por red */
.drex-footer-socials a[aria-label="Instagram"]:hover,
.drex-footer-socials a[aria-label="Instagram"]:focus-visible{
  color:#fff;
  border-color:transparent;
  background:linear-gradient(45deg,#f09433,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888);
}
.drex-footer-socials a[aria-label="Facebook"]:hover,
.drex-footer-socials a[aria-label="Facebook"]:focus-visible{
  color:#fff;
  border-color:#1877f2;
  background:#1877f2;
}
.drex-footer-socials a[aria-label="TikTok"]:hover,
.drex-footer-socials a[aria-label="TikTok"]:focus-visible{
  color:#25f4ee;
  border-color:#25f4ee;
  background:rgba(37,244,238,.10);
  box-shadow:2px 2px 0 -1px #fe2c55;
}
.drex-footer-socials a[aria-label="YouTube"]:hover,
.drex-footer-socials a[aria-label="YouTube"]:focus-visible{
  color:#fff;
  border-color:#ff0033;
  background:#ff0033;
}
.drex-footer-platforms{
  display:flex; justify-content:center; gap:8px 20px; flex-wrap:wrap;
  margin-top:20px;
  font-family:'Space Mono', ui-monospace, Menlo, monospace;
  font-size:11px;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.drex-footer-platforms a{
  color:var(--muted-deep);
  text-decoration:none;
  padding:6px 0;
  border-bottom:1px solid transparent;
  transition:color .2s ease, border-color .2s ease;
}
.drex-footer-platforms a:hover,
.drex-footer-platforms a:focus-visible{
  color:var(--muted);
  border-bottom-color:rgba(255,255,255,.30);
  outline:none;
}

/* La .drex-footer ya tenía padding; el hueco visual pequeño entre
   copyright y socials lo damos aquí en vez de tocar el bloque original. */
.drex-footer .brand-line + .sub-line{
  margin-bottom:0;
}

/* Ocultar del footer viejo el .platforms si algún caché lo trae */
.drex-footer .platforms{ display:none; }

/* ═══════════════════════════════════════════════════════════════════════
   Scroll indicator funcional · «Sigue leyendo» con chevrón animado
   ═══════════════════════════════════════════════════════════════════════ */
a.drex-hero-scroll{
  display:inline-flex; align-items:center; gap:8px;
  text-decoration:none;
  cursor:pointer;
  transition:color .2s ease, transform .2s ease;
}
a.drex-hero-scroll:hover,
a.drex-hero-scroll:focus-visible{
  color:#fff;
  outline:none;
}
a.drex-hero-scroll:hover .chev{ transform:translateY(3px); }
.drex-hero-scroll .chev{
  width:10px; height:10px;
  border-right:1px solid currentColor;
  border-bottom:1px solid currentColor;
  transform:rotate(45deg);
  transition:transform .3s ease;
  animation:drex-scroll-bounce 2s ease-in-out infinite;
  margin-bottom:4px;
}
@keyframes drex-scroll-bounce{
  0%, 100% { transform:rotate(45deg) translateY(0); }
  50%      { transform:rotate(45deg) translateY(4px); }
}
@media (prefers-reduced-motion: reduce){
  .drex-hero-scroll .chev{ animation:none; }
}

/* Smooth scroll para toda la home v5 (el link #manifiesto lo aprovecha) */
html:has(body.drex){ scroll-behavior:smooth; }

/* === Retoque 2026-11-06: contraste WCAG AA (mínimo 4,5:1 en texto pequeño) ===
   «Sorpréndeme» y «Elegimos por ti»: 3,83:1 y 2,37:1 -> 6,36:1.
   Plataformas del pie: 2,28:1 -> 5,9:1. El borde rojo de marca no cambia. */
.drex-emotions .chip.surprise { color: #ff5a61; }
.drex-emotions .chip.surprise:hover { color: #ffffff; }
.drex-emotions .chip.surprise .note { opacity: 1; }
.drex-footer-platforms a { color: var(--muted); }
.drex-footer-platforms a:hover,
.drex-footer-platforms a:focus-visible { color: #f5f5f7; }