*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    background: #050505;
    color: #e8e3d9;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }

  /* v24: scroll-snap eliminado — scroll libre */

  /* v21: respiros entre secciones — silencio visual */
  .breath {
    height: clamp(20vh, 25vh, 30vh);
    background: #050505;
  }

  /* ══════════════════════════════════════════════════════
     HERO — v18.1
  ══════════════════════════════════════════════════════ */
  #hero {
    position: relative;
    height: 100vh;
    width: 100%;
    overflow: hidden;
  }

  /* v18.1: brightness final 0.62 (era 0.55) */
  #hero .video-container {
    position: absolute; inset: 0; z-index: 0;
    opacity: 0;
    animation: video-rise 4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  }

  @keyframes video-rise {
    0%   { opacity: 0;    filter: brightness(0.3)  contrast(1.05); }
    20%  { opacity: 0.5;  filter: brightness(0.40) contrast(1.05); }
    55%  { opacity: 0.8;  filter: brightness(0.52) contrast(1.05); }
    85%  { opacity: 0.95; filter: brightness(0.58) contrast(1.05); }
    100% { opacity: 1;    filter: brightness(0.62) contrast(1.05); }
  }

  .hero-iframe {
    width: 100vw; height: 56.25vw;
    min-height: 100vh; min-width: 177.78vh;
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    border: none;
    pointer-events: none;
  }

  /* ── LOGO ANIMADO ── */
  #hero .logo-stage {
    position: absolute; inset: 0; z-index: 10;
    display: flex; align-items: center; justify-content: center;
    pointer-events: none;
  }

  .logo-stack {
    position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
  }

  .logo-identity { position: relative; will-change: transform; }

  .logo-line {
    position: relative;
    font-family: 'Cormorant Garamond', serif;
    color: #e8e3d9;
    text-transform: uppercase;
    line-height: 1; white-space: nowrap;
    font-weight: 600; letter-spacing: -0.06em;
    font-size: clamp(104px, 18.2vw, 244px);
    opacity: 0; will-change: opacity, filter;
    animation: logo-line 6.4s cubic-bezier(0.7, 0, 0.2, 1) forwards;
  }

  .logo-anc { display: inline-block; }

  .logo-fill {
    display: inline-block; opacity: 0; max-width: 6em;
    overflow: hidden; white-space: nowrap; vertical-align: top;
    color: #e8e3d9;
    animation: logo-fill 6.4s cubic-bezier(0.7, 0, 0.2, 1) forwards;
  }

  .logo-gap {
    display: inline-block; width: 0.35em;
    animation: logo-gap 6.4s cubic-bezier(0.7, 0, 0.2, 1) forwards;
  }

  .logo-role {
    position: absolute; left: 50%; top: calc(100% + 36px);
    transform: translateX(-50%);
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300; font-size: clamp(15px, 1.35vw, 19.5px);
    color: rgba(232, 227, 217, 0.70);
    text-transform: uppercase;
    letter-spacing: 0em; text-indent: 0em;
    white-space: nowrap; opacity: 0;
    animation: logo-role 6.4s ease-in-out forwards;
  }

  @keyframes logo-line {
    0%      { opacity: 0; filter: blur(8px) brightness(1.1);
              font-size: clamp(36px, 5.46vw, 70px); font-weight: 300; letter-spacing: 0.7em;
              transform: translateY(0); }
    15.63%  { opacity: 1; filter: blur(0) brightness(1);
              font-size: clamp(36px, 5.46vw, 70px); font-weight: 300; letter-spacing: 0.6em;
              transform: translateY(0); }
    43.75%  { opacity: 1; filter: blur(0);
              font-size: clamp(36px, 5.46vw, 70px); font-weight: 300; letter-spacing: 0.6em;
              transform: translateY(0); }
    68.75%  { opacity: 1; filter: blur(0);
              font-size: clamp(52px, 8vw, 110px); font-weight: 600; letter-spacing: -0.09em;
              transform: translateY(0); }
    82.81%  { opacity: 1; filter: blur(0);
              font-size: clamp(52px, 8vw, 110px); font-weight: 600; letter-spacing: -0.09em;
              transform: translateY(0); }
    100%    { opacity: 0; filter: blur(4px);
              font-size: clamp(52px, 8vw, 110px); font-weight: 600; letter-spacing: -0.09em;
              transform: translateY(-20px); }
  }

  @keyframes logo-fill {
    0%           { opacity: 0; max-width: 6em; filter: blur(8px); }
    15.63%       { opacity: 1; max-width: 6em; filter: blur(0); }
    43.75%       { opacity: 1; max-width: 6em; }
    68.75%       { opacity: 0; max-width: 0; }
    100%         { opacity: 0; max-width: 0; }
  }

  @keyframes logo-gap {
    0%, 43.75%   { width: 0.35em; }
    68.75%       { width: 0; }
    100%         { width: 0; }
  }

  @keyframes logo-role {
    0%           { opacity: 0; letter-spacing: 0.9em; text-indent: 0.9em; }
    21.88%       { opacity: 1; letter-spacing: 0.9em; text-indent: 0.9em; }
    37.5%        { opacity: 1; letter-spacing: 0.9em; text-indent: 0.9em; }
    46.88%       { opacity: 0; letter-spacing: 0.2em; text-indent: 0.2em; }
    100%         { opacity: 0; }
  }

  /* ── MONOGRAMA DE RETORNO — v18.1: +3px ── */
  .monogram-return {
    position: absolute;
    top: clamp(28px, 4vh, 48px);
    left: 50%; transform: translateX(-50%);
    z-index: 20;
    font-family: 'Cormorant Garamond', serif;
    font-weight: 600;
    font-size: clamp(25px, 1.9vw, 31px);
    letter-spacing: -0.04em; line-height: 1;
    color: #e8e3d9;
    user-select: none; pointer-events: none;
    opacity: 0;
    transition: opacity 1.8s ease;
    text-shadow: 0 2px 24px rgba(0,0,0,0.9), 0 0 40px rgba(0,0,0,0.7);
  }

  .monogram-return.visible { opacity: 0.78; }

  /* ── CURSOR — v20: sistema nativo, sin custom ── */

  #hero.intro-playing .monogram-return { opacity: 0 !important; }

  /* ══════════════════════════════════════════════════════
     REEL — v18.1: play overlay con chevron
  ══════════════════════════════════════════════════════ */
  #reel {
    position: relative;
    width: 100%; height: 100vh;
    background: #050505;
    overflow: hidden;
  }

  #reel .reel-iframe-wrap {
    position: absolute; inset: 0; z-index: 1;
  }

  #reel .reel-iframe-wrap iframe {
    width: 100%; height: 100%; border: none;
  }

  #reel .reel-iframe-wrap::after {
    content: '';
    position: absolute;
    top: clamp(12px, 1.4vw, 20px);
    right: clamp(12px, 1.4vw, 20px);
    width: clamp(60px, 6vw, 80px);
    height: clamp(28px, 3vw, 40px);
    background: #050505;
    pointer-events: none; z-index: 5;
  }

  /* v19: play overlay — v37: fondo negro sólido (como mobile) */
  .reel-play-overlay {
    position: absolute; inset: 0; z-index: 15;
    background: #050505;
    background-image: none !important;
    background-size: cover;
    background-position: center;
    display: flex; align-items: center; justify-content: center;
    cursor: default;
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .reel-play-overlay::before {
    content: '';
    position: absolute; inset: 0;
    background: rgba(5, 5, 5, 1);
    pointer-events: none;
  }

  .reel-play-overlay.hidden {
    opacity: 0;
    pointer-events: none;
  }

  /* v38: pregunta reel desktop — brutalismo editorial */
  .reel-question {
    display: block;
    position: relative;
    z-index: 1;
    font-family: 'Inter Tight', sans-serif;
    font-weight: 700;
    font-size: clamp(46px, 4.8vw, 76px);
    letter-spacing: -0.02em;
    color: #e8e3d9;
    opacity: 0.85;
    user-select: none;
    animation: reel-q-breathe-desktop 4s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  }
  .reel-question::before {
    content: '▶\00a0\00a0\00a0';
    font-size: 0.5em;
    opacity: 0.30;
  }
  @keyframes reel-q-breathe-desktop {
    0%, 100% { opacity: 0.85; }
    50%      { opacity: 0.45; }
  }
  /* v26: flash reel — solo mobile */
  .reel-flash { display: none; }
  /* v26: micro-scale — no visible en desktop */
  .work-project.tapped { transform: none; }

  #reel-ended-overlay {
    position: absolute; inset: 0; z-index: 10;
    background: #000;
    display: none;
    align-items: center; justify-content: center;
    flex-direction: column;
    gap: clamp(20px, 3vw, 40px);
  }

  #reel-ended-overlay.show { display: flex; }

  .reel-ended-mono {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 600;
    font-size: clamp(48px, 8vw, 96px);
    letter-spacing: -0.09em;
    color: #e8e3d9; opacity: 0.15;
  }

  .reel-ended-replay {
    font-family: 'Inter Tight', sans-serif;
    font-weight: 300;
    font-size: clamp(10px, 0.85vw, 13px);
    letter-spacing: 0.38em;
    text-transform: uppercase;
    color: #e8e3d9; opacity: 0.60;
    cursor: pointer;
    transition: opacity 0.4s ease, letter-spacing 0.4s ease;
    user-select: none;
  }

  .reel-ended-replay:hover { opacity: 0.9; letter-spacing: 0.52em; }

  .reel-ended-foot {
    position: absolute;
    bottom: clamp(28px, 4vw, 48px);
    right: clamp(32px, 5vw, 64px);
    font-family: 'Inter Tight', sans-serif;
    font-weight: 300;
    font-size: clamp(10px, 0.82vw, 13px);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(232, 227, 217, 0.55);
    user-select: none; opacity: 0;
    transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1) 0.3s;
  }

  #reel-ended-overlay.show .reel-ended-foot { opacity: 1; }


  /* ══════════════════════════════════════════════════════
     01 — MANIFESTO — v18.4: 2 niveles limpio
     contexto 0.40 | acento 1.0
  ══════════════════════════════════════════════════════ */
  #profile {
    position: relative;
    min-height: 100vh; width: 100%;
    background: #050505;
    display: flex; align-items: center;
    overflow: hidden;
  }

  .manifesto {
    position: relative;
    display: flex; align-items: center;
    padding: clamp(48px, 6vw, 80px) clamp(80px, 12vw, 160px) clamp(48px, 6vw, 80px) clamp(40px, 8vw, 120px);
    min-height: 85vh;
  }

  .manifesto-inner { position: relative; width: 100%; }

  .manifesto-line {
    display: block;
    font-family: 'Inter Tight', sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    color: #e8e3d9;
    line-height: 0.88;
    letter-spacing: -0.03em;
    user-select: none;
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1),
                transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .manifesto-line.visible { transform: translateY(0); }

  /* v18.4: CONTEXTO — "No edito" */
  .line-1 { font-size: clamp(48px, 7vw, 100px); }
  .line-1.visible { opacity: 0.40; }

  /* v18.4: CONTEXTO — "escenas." */
  .line-2 {
    font-size: clamp(48px, 7vw, 100px);
    margin-left: clamp(4px, 1.2vw, 24px);
    transition-delay: 0.15s;
  }
  .line-2.visible { opacity: 0.40; }

  .manifesto-rule {
    display: block;
    width: clamp(40px, 5vw, 80px);
    height: 1px;
    background: rgba(232, 227, 217, 0.5);
    margin: clamp(16px, 2vw, 32px) 0;
    opacity: 0; transform: scaleX(0); transform-origin: left;
    transition: opacity 0.8s ease 0.3s,
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.3s;
  }

  .manifesto-rule.visible { opacity: 1; transform: scaleX(1); }

  /* v19: CONTEXTO — "Edito" */
  .line-3 {
    font-size: clamp(48px, 7vw, 100px);
    transition-delay: 0.08s;
  }
  .line-3.visible { opacity: 0.40; }

  /* v20: ACENTO — "decisiones." — enorme */
  .line-4 {
    font-size: clamp(90px, 18vw, 260px);
    margin-left: clamp(4px, 1.2vw, 24px);
    transition-delay: 0.22s;
  }
  .line-4.visible { opacity: 1.0; }

  /* v22: tercer acto eliminado */

  .section-index {
    position: absolute;
    top: clamp(40px, 8vw, 80px);
    right: clamp(40px, 8vw, 80px);
    font-family: 'Inter Tight', sans-serif;
    font-weight: 300;
    font-size: clamp(9px, 0.75vw, 11px);
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: rgba(232, 227, 217, 0.45);
    user-select: none; opacity: 0;
    transition: opacity 1.4s ease 0.6s;
  }

  .section-index.visible { opacity: 1; }

  /* ══════════════════════════════════════════════════════
     02 — WORK — v18.1: sin header, cursor chevron en chapters
  ══════════════════════════════════════════════════════ */
  #work {
    position: relative;
    width: 100%; height: 100vh;
    background: #050505;
    overflow: hidden;
  }

  .work-stage {
    position: absolute; inset: 0; z-index: 0;
    background: #050505;
  }

  .work-stage-slot {
    position: absolute; inset: 0;
    opacity: 0;
    transition: opacity 600ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  .work-stage-slot.active { opacity: 1; }

  .work-stage-slot img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    filter: blur(28px) brightness(0.42) saturate(0.78);
    transform: scale(1.08);
    transition: filter 1.4s cubic-bezier(0.16, 1, 0.3, 1),
                transform 1.6s cubic-bezier(0.16, 1, 0.3, 1);
  }

  /* v24: corrección encuadre stills problemáticos */
  [data-still-slot="tigre_veron"] img { object-position: center 20%; }
  [data-still-slot="cruzada"] img { object-position: center 30%; }
  [data-still-slot="conexion_masticar"] img { object-position: center 35%; }
  /* v25: La Jefa — removed custom position (new image has proper framing) */

  .work-stage.focused .work-stage-slot.active img {
    filter: blur(0px) brightness(0.72) saturate(0.92);
    transform: scale(1.0);
  }

  /* v29: fix franja gris Rewilding — overscale en focused */
  .work-stage.focused [data-still-slot="rewilding"].active img {
    object-position: center 55%;
    transform: scale(1.05);
  }

  .work-stage-slot.no-image {
    display: flex; align-items: center; justify-content: flex-end;
    background: #050505;
    padding-right: clamp(60px, 10vw, 140px);
  }

  .work-stage-placeholder {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 600; font-style: italic;
    font-size: clamp(48px, 7vw, 96px);
    letter-spacing: -0.04em; line-height: 1;
    color: rgba(232, 227, 217, 0.28);
    text-align: right; max-width: 45%;
    user-select: none;
  }

  .work-overlay {
    position: relative; z-index: 10;
    height: 100vh;
    display: grid;
    grid-template-rows: auto 1fr;
    padding: clamp(40px, 6vw, 80px) clamp(40px, 8vw, 120px);
    pointer-events: none;
  }

  .work-overlay > * { pointer-events: auto; }

  /* v20: chapters con count inline */
  .work-chapters {
    display: flex; align-items: baseline;
    gap: clamp(18px, 2.2vw, 32px);
    padding: 0 0 clamp(36px, 5vw, 56px);
  }

  .work-chapter-btn {
    background: none; border: none; padding: 0;
    cursor: pointer;
    font-family: 'Inter Tight', sans-serif;
    font-weight: 900;
    font-size: clamp(1.5rem, 2vw, 2rem);
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: #e8e3d9; opacity: 0.35;
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    user-select: none; line-height: 1;
    text-shadow: 0 2px 24px rgba(0,0,0,0.85);
  }

  .work-chapter-btn:hover { opacity: 0.70; }
  .work-chapter-btn.active { opacity: 1; }

  .work-chapter-sep {
    font-family: 'Inter Tight', sans-serif;
    font-weight: 300;
    font-size: clamp(1.5rem, 2vw, 2rem);
    line-height: 1;
    color: rgba(232, 227, 217, 0.25);
    user-select: none;
  }

  .work-header-count {
    font-family: 'Inter Tight', sans-serif;
    font-weight: 300;
    font-size: clamp(9px, 0.75vw, 11px);
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: rgba(232, 227, 217, 0.30);
    user-select: none;
    margin-left: auto;
  }

  .work-lists-viewport {
    position: relative; overflow: hidden;
    height: 100%; width: 55%; min-width: 0;
    mask-image: linear-gradient(to bottom, black 0%, black 85%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 85%, transparent 100%);
  }

  .work-lists-track {
    position: absolute; top: 0; left: 0;
    width: 300%; height: 100%;
    display: grid; grid-template-columns: repeat(3, 1fr);
    transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  .work-list {
    position: relative; height: 100%;
    overflow-y: auto;
    padding-right: clamp(16px, 2vw, 32px);
    scrollbar-width: none;
  }

  .work-list::-webkit-scrollbar { display: none; }

  .work-list-inner {
    display: flex; flex-direction: column;
    gap: clamp(4px, 0.6vw, 9px);
  }

  .work-project {
    cursor: pointer;
    display: flex; flex-direction: column;
    gap: clamp(6px, 0.6vw, 8px);
    opacity: 0.55;
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    user-select: none;
  }

  .work-project:hover,
  .work-project.hovered { opacity: 1; }

  .work-project.hovered .work-project-title {
    animation: project-breathe 3.5s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  }

  @keyframes project-breathe {
    0%, 100% { opacity: 1;    filter: brightness(1); }
    50%      { opacity: 0.88; filter: brightness(0.95); }
  }

  .work-project-title {
    font-family: 'Inter Tight', sans-serif;
    font-weight: 700;
    font-size: clamp(2rem, 3.5vw, 3.5rem);
    letter-spacing: -0.02em; line-height: 1;
    color: rgba(232, 227, 217, 0.85);
    text-shadow: 0 2px 32px rgba(0,0,0,0.7);
    transition: color 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                letter-spacing 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .work-project:hover .work-project-title,
  .work-project.hovered .work-project-title {
    color: rgba(232, 227, 217, 1);
    letter-spacing: 0.02em;
  }

  .work-project-meta {
    font-family: 'Inter Tight', sans-serif;
    font-weight: 300;
    font-size: clamp(9px, 0.72vw, 11px);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(232, 227, 217, 0.55);
    line-height: 1.6;
    text-shadow: 0 1px 16px rgba(0,0,0,0.7);
    /* v37: oculta por defecto, se despliega al hover */
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                max-height 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .work-project:hover .work-project-meta,
  .work-project.hovered .work-project-meta {
    opacity: 1;
    max-height: 3em;
  }

  /* ══════════════════════════════════════════════════════
     03 — CONTACT — v18.1: brutalista asimétrico
  ══════════════════════════════════════════════════════ */
  #contact {
    position: relative;
    width: 100%; min-height: 100vh;
    background: #050505;
    display: flex; align-items: center;
    padding: clamp(80px, 12vw, 160px) clamp(40px, 8vw, 120px);
  }

  /* v19: contact sin monograma, stack left-aligned */
  .contact-layout {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  .contact-left {
    display: flex;
    flex-direction: column;
    opacity: 0;
  }

  .contact-name {
    font-size: clamp(14px, 1.2vw, 18px);
    letter-spacing: 0.18em;
    color: rgba(232, 227, 217, 0.85);
  }

  /* v23: frase escalada — domina la viewport */
  .contact-frase {
    font-family: 'Inter Tight', sans-serif;
    font-weight: 900;
    font-size: clamp(64px, 10vw, 140px);
    letter-spacing: -0.03em;
    text-transform: uppercase;
    color: #e8e3d9;
    line-height: 0.90;
    user-select: none;
  }

  /* v23: nombre del autor — refuerzo de identidad */
  .contact-nombre {
    font-family: 'Inter Tight', sans-serif;
    font-weight: 300;
    font-size: clamp(11px, 0.85vw, 13px);
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(232, 227, 217, 0.45);
    margin-top: clamp(32px, 4vw, 56px);
    display: block;
  }

  .contact-divider {
    width: clamp(40px, 5vw, 80px);
    height: 1px;
    background: rgba(232, 227, 217, 0.30);
    margin: clamp(24px, 3vw, 40px) 0;
    opacity: 0;
    transform: scaleX(0); transform-origin: left;
  }

  .contact-info {
    display: flex; flex-direction: column;
    gap: clamp(4px, 0.5vw, 8px);
  }

  .contact-info-line {
    font-family: 'Inter Tight', sans-serif;
    font-weight: 300;
    font-size: clamp(11px, 0.85vw, 13px);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(232, 227, 217, 0.55);
    line-height: 1.7;
  }

  /* v24: rol del autor — Film Editor */
  .contact-role {
    font-family: 'Inter Tight', sans-serif;
    font-weight: 300;
    font-size: clamp(10px, 0.75vw, 12px);
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(232, 227, 217, 0.35);
    margin-top: clamp(4px, 0.5vw, 8px);
    display: block;
  }

  .contact-email {
    font-family: 'Inter Tight', sans-serif;
    font-weight: 300;
    font-size: clamp(11px, 0.85vw, 13px);
    letter-spacing: 0.22em;
    text-transform: lowercase;
    color: rgba(232, 227, 217, 0.55);
    text-decoration: none;
    display: block;
    margin-top: clamp(6px, 0.8vw, 12px);
    transition: color 0.4s ease;
  }

  .contact-email:hover { color: rgba(232, 227, 217, 0.90); }

  .contact-cv {
    font-size: clamp(11px, 1vw, 14px);
    letter-spacing: 0.32em;
    text-transform: uppercase;
  }

  /* v21.1: firma de autor — logo JPL + MMXXVI */
  .contact-firma {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(4px, 0.5vw, 8px);
    margin-top: clamp(64px, 8vw, 120px);
    user-select: none;
  }

  .contact-firma-logo {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 600;
    font-size: clamp(11px, 0.9vw, 14px);
    letter-spacing: -0.04em;
    line-height: 1;
    color: rgba(232, 227, 217, 0.30);
  }

  .contact-firma-anno {
    font-family: 'Inter Tight', sans-serif;
    font-weight: 300;
    font-size: clamp(8px, 0.65vw, 10px);
    letter-spacing: 0.35em;
    color: rgba(232, 227, 217, 0.18);
  }

  /* v24: contact cascada — frase 0.2s → nombre 0.7s → role 0.85s → email 1.0s → firma 1.3s */
  .contact-layout.active .contact-frase {
    opacity: 0;
    animation: contact-fade-up 1.0s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
  }

  .contact-layout.active .contact-nombre {
    opacity: 0;
    animation: contact-fade-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.7s forwards;
  }

  .contact-layout.active .contact-role {
    opacity: 0;
    animation: contact-fade-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.85s forwards;
  }

  .contact-layout.active .contact-email {
    opacity: 0;
    animation: contact-fade-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) 1.0s forwards;
  }

  .contact-layout.active .contact-firma {
    opacity: 0;
    animation: contact-fade-up 1.0s cubic-bezier(0.16, 1, 0.3, 1) 1.3s forwards;
  }

  /* contact-left ya no necesita animación propia, los hijos se animan */
  .contact-layout.active .contact-left {
    opacity: 1;
  }

  @keyframes contact-fade-up {
    0%   { opacity: 0; transform: translateY(12px); }
    100% { opacity: 1; transform: translateY(0); }
  }

  @keyframes contact-divider-in {
    0%   { opacity: 0; transform: scaleX(0); }
    100% { opacity: 1; transform: scaleX(1); }
  }

  /* ══════════════════════════════════════════════════════
     RESPONSIVE
  ══════════════════════════════════════════════════════ */
  /* ══════════════════════════════════════════════════════
     v24m — MOBILE ONLY
     Todo lo que sigue aplica solo a ≤768px
     Desktop no se toca.
  ══════════════════════════════════════════════════════ */
  @media (max-width: 768px) {

    /* v28: scroll snap mandatory — cada sección se magnetiza fuerte */
    html {
      scroll-snap-type: y mandatory;
    }
    #hero, #profile, #reel, #work, #contact {
      scroll-snap-align: start;
    }

    /* ── HERO mobile: misma mecánica desktop, valores proporcionales ── */
    .hero-iframe {
      width: 56.25vh;
      height: 100vh;
      min-height: 100vh;
      min-width: 56.25vh;
    }
    .logo-line {
      animation: logo-line-m 6.4s cubic-bezier(0.7, 0, 0.2, 1) forwards !important;
    }
    .logo-fill {
      animation: logo-fill-m 6.4s cubic-bezier(0.7, 0, 0.2, 1) forwards !important;
    }
    .logo-gap {
      animation: logo-gap-m 6.4s cubic-bezier(0.7, 0, 0.2, 1) forwards !important;
    }
    .logo-role {
      font-size: clamp(9px, 2.6vw, 12px) !important;
      top: calc(100% + 16px) !important;
      animation: logo-role-m 6.4s ease-in-out forwards !important;
    }

    @keyframes logo-line-m {
      0%      { opacity: 0; filter: blur(8px) brightness(1.1);
                font-size: clamp(20px, 5vw, 28px); font-weight: 300; letter-spacing: 0.35em;
                transform: translateY(0); }
      15.63%  { opacity: 1; filter: blur(0) brightness(1);
                font-size: clamp(20px, 5vw, 28px); font-weight: 300; letter-spacing: 0.3em;
                transform: translateY(0); }
      43.75%  { opacity: 1; filter: blur(0);
                font-size: clamp(20px, 5vw, 28px); font-weight: 300; letter-spacing: 0.3em;
                transform: translateY(0); }
      68.75%  { opacity: 1; filter: blur(0);
                font-size: clamp(36px, 10vw, 56px); font-weight: 600; letter-spacing: -0.09em;
                transform: translateY(0); }
      82.81%  { opacity: 1; filter: blur(0);
                font-size: clamp(36px, 10vw, 56px); font-weight: 600; letter-spacing: -0.09em;
                transform: translateY(0); }
      100%    { opacity: 0; filter: blur(4px);
                font-size: clamp(36px, 10vw, 56px); font-weight: 600; letter-spacing: -0.09em;
                transform: translateY(-20px); }
    }

    @keyframes logo-fill-m {
      0%           { opacity: 0; max-width: 6em; filter: blur(8px); }
      15.63%       { opacity: 1; max-width: 6em; filter: blur(0); }
      43.75%       { opacity: 1; max-width: 6em; }
      68.75%       { opacity: 0; max-width: 0; }
      100%         { opacity: 0; max-width: 0; }
    }

    @keyframes logo-gap-m {
      0%, 43.75%   { width: 0.25em; }
      68.75%       { width: 0; }
      100%         { width: 0; }
    }

    @keyframes logo-role-m {
      0%           { opacity: 0; letter-spacing: 0.55em; text-indent: 0.55em; }
      21.88%       { opacity: 1; letter-spacing: 0.55em; text-indent: 0.55em; }
      37.5%        { opacity: 1; letter-spacing: 0.55em; text-indent: 0.55em; }
      46.88%       { opacity: 0; letter-spacing: 0.15em; text-indent: 0.15em; }
      100%         { opacity: 0; }
    }

    /* ── MANIFIESTO: placa 100vh, anclado abajo — v28 ── */
    /* v28: monograma aparece automáticamente al terminar animación (6.4s) */
    @keyframes hero-monogram-appear {
      from { opacity: 0; }
      to   { opacity: 0.78; }
    }
    .monogram-return {
      animation: hero-monogram-appear 0.3s cubic-bezier(0.16, 1, 0.3, 1) 6.4s forwards;
    }
    #profile {
      min-height: 100vh;
      display: flex;
      align-items: flex-end;
      justify-content: flex-start;
      overflow: hidden;
    }
    .manifesto {
      padding: clamp(28px, 6vw, 48px) clamp(28px, 7vw, 48px) clamp(56px, 12vw, 80px);
      align-items: flex-end;
      min-height: auto;
    }
    /* v27: contexto más tenue — susurro antes del grito */
    .line-1, .line-2, .line-3 { font-size: clamp(25px, 7.35vw, 42px); }
    .line-1.visible, .line-2.visible, .line-3.visible { opacity: 0.45; }
    /* v28: DECISIONES. — escala extrema + max-width en em fuerza 3 líneas: DECI/SIO/NES. */
    .line-4 {
      font-size: clamp(84px, 25.2vw, 158px);
      margin-left: 0;
      line-height: 0.85;
      letter-spacing: -0.04em;
      word-break: break-all;
      max-width: 2.15em;
    }
    .manifesto-inner { padding-right: 0; }

    /* v28: breath profile+reel ya cubierto por regla global .breath { display: none } */

    /* ── REEL: placa negra 100vh con pregunta ── */
    #reel {
      height: 100vh;
      min-height: 100vh;
    }
    .reel-play-overlay {
      cursor: pointer;
      background-image: none !important;
    }
    .reel-play-overlay::before {
      background: rgba(5, 5, 5, 1);
    }

    /* v26: flash blanco al tocar el reel */
    .reel-flash {
      display: block;
      position: absolute; inset: 0;
      z-index: 20;
      background: #e8e3d9;
      opacity: 0;
      pointer-events: none;
    }
    .reel-flash.fire {
      animation: reel-flash-fire 200ms ease-out forwards;
    }
    @keyframes reel-flash-fire {
      0%   { opacity: 0.85; }
      100% { opacity: 0; }
    }

    /* v38: pregunta reel mobile — brutalismo editorial proporcional */
    .reel-question {
      display: block;
      position: relative;
      z-index: 1;
      font-family: 'Inter Tight', sans-serif;
      font-weight: 700;
      font-size: clamp(24px, 6.5vw, 38px);
      letter-spacing: -0.02em;
      color: #e8e3d9;
      opacity: 0.85;
      user-select: none;
      animation: reel-question-breathe 4s cubic-bezier(0.45, 0, 0.55, 1) infinite;
    }
    @keyframes reel-question-breathe {
      0%, 100% { opacity: 0.85; }
      50%      { opacity: 0.45; }
    }
    .reel-question::before {
      content: '▶\00a0\00a0\00a0';
      font-size: 0.5em;
      opacity: 0.30;
    }

    /* ── ROTATE INDICATOR ── */
    .rotate-indicator {
      position: fixed; inset: 0;
      z-index: 10000;
      background: #050505;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: clamp(20px, 5vw, 32px);
    }
    .rotate-indicator-icon {
      width: 48px; height: 48px;
      border: 1px solid rgba(232, 227, 217, 0.4);
      border-radius: 4px;
      position: relative;
      animation: rotate-hint 2s cubic-bezier(0.16, 1, 0.3, 1) infinite;
    }
    .rotate-indicator-icon::after {
      content: '';
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      width: 20px; height: 1px;
      background: rgba(232, 227, 217, 0.6);
    }
    @keyframes rotate-hint {
      0%, 100% { transform: rotate(0deg); }
      50% { transform: rotate(90deg); }
    }
    .rotate-indicator-text {
      font-family: 'Inter Tight', sans-serif;
      font-weight: 300;
      font-size: 11px;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      color: rgba(232, 227, 217, 0.55);
    }

    /* ── WORK: v28 — stills al tap como fondo, títulos sobre imagen ── */
    #work { height: auto; min-height: 100vh; }
    .work-stage {
      display: block;
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
    }
    /* v28: still más oscuro/desaturado en mobile para legibilidad */
    .work-stage-slot { background-color: #050505; }
    .work-stage-slot img {
      filter: blur(18px) brightness(0.30) saturate(0.55);
      transform: scale(1.06);
    }
    .work-stage.focused .work-stage-slot.active img {
      filter: blur(0px) brightness(0.45) saturate(0.75);
      transform: scale(1.0);
    }
    /* v30: encuadre mobile — portrait crop reposiciona sujetos */
    [data-still-slot="margarita"] img { object-position: 75% center; }
    [data-still-slot="puerta_7"] img { object-position: 50% center; }
    [data-still-slot="siempre_fui_yo"] img { object-position: 78% center; }
    [data-still-slot="la_jefa"] img { object-position: 85% center; transform: scale(1.15) !important; }
    [data-still-slot="cruzada"] img { object-position: 65% center; }
    [data-still-slot="rewilding"] img { object-position: 55% 30%; }
    [data-still-slot="baron_b"] img { object-position: 82% center; }
    [data-still-slot="mil_productores"] img { object-position: 45% center; }
    [data-still-slot="tierras_adentro"] img { object-position: 55% center; }
    [data-still-slot="eruca"] img { object-position: 75% center; }
    [data-still-slot="abel_pintos"] img { object-position: 60% center; }
    [data-still-slot="oreja_van_gogh"] img { object-position: 70% center; }
    [data-still-slot="violetta"] img { object-position: 48% center; }
    [data-still-slot="conexion_masticar"] img { object-position: 65% center; }
    .work-overlay {
      position: relative;
      z-index: 10;
      height: auto;
      min-height: 100vh;
      padding: clamp(48px, 10vw, 80px) clamp(20px, 5vw, 36px) clamp(48px, 10vw, 80px) clamp(28px, 7vw, 48px);
      display: flex;
      flex-direction: column;
    }
    .work-lists-viewport {
      width: 100%; height: auto; overflow: visible;
      mask-image: none;
      -webkit-mask-image: none;
    }
    /* v28: fix crítico — neutralizar translateX de work.js + layout block */
    .work-lists-track {
      position: relative;
      width: 100%;
      height: auto;
      display: block;
      transform: none !important;
    }
    /* v27: paneles no activos se ocultan, el activo fluye normal */
    .work-list {
      display: none;
      height: auto;
      overflow: visible;
      padding-right: 0;
    }
    .work-list:first-child { display: block; }
    .work-chapters {
      gap: clamp(14px, 3.5vw, 24px);
      padding: 0 0 clamp(32px, 6vw, 48px);
    }
    .work-chapter-btn,
    .work-chapter-sep { font-size: clamp(1.1rem, 4.5vw, 1.5rem); }

    /* v26: counter gigante detrás de cada proyecto */
    .work-list-inner {
      cursor: auto;
      counter-reset: work-counter;
    }
    .work-project {
      cursor: auto;
      position: relative;
      overflow: hidden;
      padding: clamp(16px, 3vw, 24px) 0;
      border-bottom: 1px solid rgba(232, 227, 217, 0.06);
      transition: transform 150ms cubic-bezier(0.16, 1, 0.3, 1);
      /* v27: fix visibilidad — override del opacity 0.55 de desktop */
      opacity: 1;
    }
    .work-project:hover,
    .work-project.hovered { opacity: 1; }
    .work-project::before {
      counter-increment: work-counter;
      content: counter(work-counter, decimal-leading-zero);
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      font-family: 'Inter Tight', sans-serif;
      font-weight: 900;
      font-size: clamp(64px, 18vw, 120px);
      line-height: 1;
      color: rgba(232, 227, 217, 0.04);
      pointer-events: none;
      user-select: none;
    }
    /* v26: micro-scale al tap */
    .work-project.tapped {
      transform: scale(1.03);
    }
    .work-project-title {
      font-size: clamp(1.4rem, 5.8vw, 2rem);
      position: relative;
      z-index: 1;
    }
    /* v28: título se ilumina a blanco puro al tap */
    .work-project.hovered .work-project-title {
      color: rgba(232, 227, 217, 1);
      text-shadow: 0 2px 24px rgba(0,0,0,0.9);
    }
    .work-project-meta {
      position: relative;
      z-index: 1;
      opacity: 0;
      max-height: 0;
      overflow: hidden;
      color: rgba(232, 227, 217, 0.70);
      transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                  max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }
    /* v28: meta se revela al tap — primer proyecto de cada capítulo arranca visible */
    .work-project.hovered .work-project-meta {
      opacity: 1;
      max-height: 3em;
    }
    .work-stage-slot.no-image { display: none; }
    .work-stage-placeholder { display: none; }

    /* ── CONTACT: más legible ── */
    .contact-layout {
      text-align: left;
    }
    .contact-frase {
      font-size: clamp(48px, 13vw, 100px) !important;
    }
    .contact-nombre {
      font-size: clamp(13px, 3.5vw, 16px) !important;
      opacity: 1 !important;
      color: rgba(232, 227, 217, 0.80);
      margin-top: clamp(28px, 6vw, 48px);
    }
    .contact-role {
      font-size: clamp(11px, 3vw, 14px) !important;
      color: rgba(232, 227, 217, 0.60);
    }
    .contact-email {
      font-size: clamp(13px, 3.5vw, 16px) !important;
      color: rgba(232, 227, 217, 0.85);
      margin-top: clamp(8px, 2vw, 16px);
    }
    .contact-firma {
      margin-top: clamp(48px, 10vw, 80px);
    }
    .contact-firma-logo {
      font-size: clamp(14px, 3.5vw, 18px) !important;
    }
    .contact-firma-anno {
      font-size: clamp(10px, 2.5vw, 13px) !important;
    }
    #contact {
      padding: clamp(60px, 12vw, 120px) clamp(28px, 7vw, 56px);
    }

    /* v28: breaths eliminados — corte directo entre placas */
    .breath {
      display: none;
    }

    /* v28: section index — label en esquina inferior izquierda de cada sección */
    .mobile-section-indicator {
      display: none;
    }
    #hero, #profile, #reel, #work, #contact {
      position: relative;
    }
    #hero::before, #profile::after, #reel::after, #work::after, #contact::after {
      position: absolute;
      bottom: clamp(20px, 4vw, 32px);
      left: clamp(28px, 7vw, 48px);
      z-index: 50;
      font-family: 'Inter Tight', sans-serif;
      font-weight: 300;
      font-size: 9px;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      color: rgba(232, 227, 217, 0.50);
      user-select: none;
      pointer-events: none;
    }
    #hero::before { content: '1/5 JPL'; }
    #profile::after { content: '2/5 Manifiesto'; }
    #reel::after { content: '3/5 Reel'; }
    #work::after { content: '4/5 Work'; }
    #contact::after { content: '5/5 Contact'; }
  }

  @media (max-width: 480px) {
    .line-1, .line-2, .line-3 { font-size: clamp(21px, 6.8vw, 38px); }
    /* v28: mantener 3 líneas en pantallas chicas */
    .line-4 { font-size: clamp(71px, 23vw, 105px); max-width: 2.15em; }
  }

  /* v18.4: indicador scroll para touch/mobile */
  @media (pointer: coarse) {
    #hero::after {
      content: '▽';
      position: absolute;
      bottom: clamp(28px, 6vh, 48px);
      left: 50%;
      transform: translateX(-50%);
      z-index: 20;
      font-family: 'Inter Tight', sans-serif;
      font-weight: 300;
      font-size: 20px;
      color: #e8e3d9;
      opacity: 0;
      animation: mobile-chevron-appear 0.3s ease 6.4s forwards,
                 mobile-chevron-pulse 2.4s ease 6.7s infinite;
    }
  }

  @keyframes mobile-chevron-appear {
    to { opacity: 0.65; }
  }

  @keyframes mobile-chevron-pulse {
    0%, 100% { opacity: 0.65; transform: translateX(-50%) translateY(0); }
    50%      { opacity: 0.35; transform: translateX(-50%) translateY(6px); }
  }

  /* ══════════════════════════════════════════════════════
     SIDE INDEX — v18.2: entrada destacada, fade orgánico
  ══════════════════════════════════════════════════════ */
  .side-index {
    position: fixed;
    top: 50%;
    right: clamp(20px, 2.5vw, 40px);
    transform: translateY(-50%);
    z-index: 100;
    display: flex; flex-direction: column;
    gap: clamp(14px, 1.6vw, 22px);
    opacity: 0;
    animation: side-index-flash 4s cubic-bezier(0.16, 1, 0.3, 1) 2.8s forwards;
  }

  /* Aparece fuerte (0.85) → baja orgánicamente a estado normal */
  @keyframes side-index-flash {
    0%   { opacity: 0; }
    20%  { opacity: 0.85; }
    50%  { opacity: 0.70; }
    100% { opacity: 1; }
  }

  .side-index-item {
    display: flex; align-items: center; gap: 10px;
    cursor: pointer; background: none; border: none;
    padding: 4px 0;
    font-family: 'Inter Tight', sans-serif;
    font-weight: 300;
    font-size: clamp(9px, 0.72vw, 11px);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #e8e3d9; opacity: 0.25;
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .side-index-item::before {
    content: ''; display: inline-block;
    width: 0; height: 1px; background: #e8e3d9;
    transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .side-index-item:hover { opacity: 0.75; }
  .side-index-item.active { opacity: 1; }
  .side-index-item.active::before { width: 8px; }

  @media (max-width: 767px) { .side-index { display: none; } }