:root{
    /* Paleta TIERRA — tonos relacionados, prehispánicos */
    --ink: #140A08;
    --paper: #EFE1C6;
    --bone: #E8D7B3;

    --clay-dark: #4A2817;
    --clay: #7A3E22;
    --clay-light: #9A5230;

    --ocher-dark: #6B4518;
    --ocher: #A66B2A;
    --ocher-light: #C68F3F;

    --mustard: #B8842E;
    --mustard-light: #D4A449;

    --rust: #8B3A1F;
    --rust-deep: #5C2515;

    --sepia: #3A2015;
    --sepia-deep: #1F0F08;

    --sage: #5C5A3E;
    --sage-deep: #3A3826;

    --dusty-rose: #8B4A42;
    --dusty-rose-deep: #5C2E29;

    --stone: #6B5543;
    --stone-light: #8A7055;

    --accent: #B8842E;
    --accent-glow: #D4A449;
  }

  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth; background:var(--ink)}
  body{
    background:var(--ink);
    color:var(--paper);
    font-family:'Noto Sans', system-ui, sans-serif;
    font-weight:400;
    line-height:1.5;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
  }
  ::selection{background:var(--clay); color:var(--paper)}

  body::before{
    content:'';
    position:fixed; inset:0;
    pointer-events:none; z-index:9000;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 0.9 0 0 0 0 0.7 0 0 0 0.3 0'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='0.4'/></svg>");
    opacity:0.3;
    mix-blend-mode:overlay;
  }

  /* ═══════════════════════════════════════════════════════════════════
     TRACKER inferior (navegación 1-9)
     ═══════════════════════════════════════════════════════════════════ */
  .tracker{
    position:fixed;
    bottom:20px; left:50%; transform:translateX(-50%);
    z-index:200;
    display:flex; gap:4px;
    background:rgba(20,10,8,0.9);
    padding:8px;
    border-radius:40px;
    backdrop-filter:blur(12px);
    border:1px solid rgba(239,225,198,0.15);
    box-shadow:0 10px 40px rgba(0,0,0,0.6);
    max-width:calc(100vw - 32px);
    overflow-x:auto;
  }
  .tracker::-webkit-scrollbar{display:none}
  .tracker a{
    width:36px; height:36px;
    flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    text-decoration:none;
    color:var(--paper);
    font-weight:800;
    font-size:13px;
    border-radius:50%;
    transition:all 0.3s;
    opacity:0.4;
  }
  .tracker a:hover{opacity:0.9}
  .tracker a.active{
    opacity:1;
    background:var(--mustard);
    color:var(--ink);
    transform:scale(1.1);
    box-shadow:0 0 20px rgba(184,132,46,0.5);
  }

  /* ═══════════════════════════════════════════════════════════════════
     HERO con imagen de fondo + fade periódico
     ═══════════════════════════════════════════════════════════════════ */
  .hero.hero-with-bg{
    position:relative;
    min-height:100vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:80px 24px 100px;
    text-align:center;
    overflow:hidden;
    background:#1a0f14;
  }
  .hero-bg{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    z-index:0;
    display:block;
  }
  .hero-overlay{
    position:absolute;
    inset:0;
    z-index:1;
    background:
      radial-gradient(ellipse at 30% 20%, rgba(224,123,0,0.35), transparent 55%),
      radial-gradient(ellipse at 70% 80%, rgba(139,30,74,0.4), transparent 55%),
      linear-gradient(180deg, rgba(26,15,20,0.35) 0%, rgba(26,15,20,0.75) 100%);
  }
  .hero-with-bg .hero-inner{position:relative; z-index:3}
  .hero-with-bg .scroll-cue{z-index:4}

  /* FADE periódico */
  .hero-with-bg .hero-inner,
  .hero-with-bg .scroll-cue{
    transition: opacity 1.2s ease, transform 1.2s ease;
  }
  .hero-with-bg .hero-overlay{
    transition: opacity 1.5s ease;
  }
  .hero-with-bg.image-visible .hero-inner{
    opacity:0;
    transform:translateY(-20px);
    pointer-events:none;
  }
  .hero-with-bg.image-visible .scroll-cue{
    opacity:0;
    pointer-events:none;
  }
  .hero-with-bg.image-visible .hero-overlay{
    opacity:0.25;
  }

  .hero-with-bg .image-hint{
    position:absolute;
    top:24px; right:24px;
    z-index:5;
    padding:6px 14px;
    background:rgba(20,10,8,0.6);
    color:var(--paper);
    font-size:10px;
    font-weight:700;
    letter-spacing:0.25em;
    text-transform:uppercase;
    border-radius:30px;
    backdrop-filter:blur(10px);
    border:1px solid rgba(239,225,198,0.2);
    opacity:0;
    transition:opacity 0.6s ease;
    pointer-events:none;
  }
  .hero-with-bg.image-visible .image-hint{opacity:0.85}

  .hero-eyebrow{
    display:inline-flex; align-items:center; gap:10px;
    padding:8px 18px;
    background:var(--mustard);
    color:var(--ink);
    font-size:11px;
    font-weight:900;
    letter-spacing:0.3em;
    border-radius:40px;
    margin-bottom:36px;
    text-transform:uppercase;
    box-shadow:0 6px 20px rgba(184,132,46,0.3);
  }
  .hero-eyebrow::before{content:''; width:6px; height:6px; background:var(--ink); border-radius:50%}
  .hero h1{
    font-size:clamp(3.5rem, 14vw, 10rem);
    font-weight:900;
    line-height:0.85;
    letter-spacing:-0.04em;
    margin-bottom:32px;
    background:linear-gradient(180deg, var(--mustard-light) 0%, var(--ocher) 40%, var(--clay) 75%, var(--rust-deep) 100%);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    filter:drop-shadow(0 4px 20px rgba(74,40,23,0.5));
  }
  .hero-sub{
    max-width:580px;
    margin:0 auto 44px;
    font-size:clamp(1rem, 2vw, 1.2rem);
    color:rgba(239,225,198,0.8);
    font-weight:300;
  }
  .hero-meta{
    display:inline-flex;
    background:rgba(239,225,198,0.05);
    border:1px solid rgba(239,225,198,0.15);
    border-radius:60px;
    padding:16px 8px;
    backdrop-filter:blur(10px);
    flex-wrap:wrap; justify-content:center;
  }
  .hero-meta .stat{
    padding:4px 24px;
    border-right:1px solid rgba(239,225,198,0.15);
    text-align:center;
  }
  .hero-meta .stat:last-child{border-right:none}
  .hero-meta .num{font-size:1.8rem; font-weight:900; color:var(--mustard-light); line-height:1}
  .hero-meta .lbl{font-size:9px; letter-spacing:0.25em; color:rgba(239,225,198,0.55); font-weight:700; text-transform:uppercase; margin-top:4px}

  .scroll-cue{
    position:absolute; bottom:30px; left:50%;
    transform:translateX(-50%);
    color:var(--mustard-light);
    font-size:10px;
    letter-spacing:0.35em;
    font-weight:800;
    display:flex; flex-direction:column; align-items:center; gap:8px;
    animation:bounce 2s ease-in-out infinite;
    z-index:4;
  }
  @keyframes bounce{0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(10px)}}

  /* ═══════════════════════════════════════════════════════════════════
     PAPEL PICADO
     ═══════════════════════════════════════════════════════════════════ */
  .papel{
    position:relative; z-index:50;
    height:36px;
    display:flex;
    gap:4px;
    padding:0 4px;
  }
  .papel .flag{
    flex:1; height:30px;
    clip-path:polygon(0 0, 100% 0, 100% 60%, 85% 70%, 70% 60%, 55% 70%, 40% 60%, 25% 70%, 10% 60%, 0 70%);
  }
  .papel .flag:nth-child(5n+1){background:var(--ocher)}
  .papel .flag:nth-child(5n+2){background:var(--clay)}
  .papel .flag:nth-child(5n+3){background:var(--mustard)}
  .papel .flag:nth-child(5n+4){background:var(--rust)}
  .papel .flag:nth-child(5n+5){background:var(--stone)}

  /* ═══════════════════════════════════════════════════════════════════
     INTRO con búhos y tira
     ═══════════════════════════════════════════════════════════════════ */
  .intro{
    position:sticky; top:0;
    min-height:100vh;
    background:var(--sepia);
    display:flex; align-items:center; justify-content:center;
    padding:100px 24px;
    border-radius:40px 40px 0 0;
    box-shadow:0 -30px 80px rgba(0,0,0,0.6), inset 0 1px 0 rgba(239,225,198,0.06);
    margin-top:-40px;
    overflow:hidden;
  }
  .intro-owl{
    position:absolute;
    width:min(22vw, 280px);
    height:auto;
    max-height:70%;
    object-fit:contain;
    pointer-events:none;
    user-select:none;
    z-index:1;
    opacity:0.95;
    filter:drop-shadow(0 10px 30px rgba(0,0,0,0.5));
  }
  .intro-owl-left{left:2%; top:50%; transform:translateY(-50%)}
  .intro-owl-right{right:2%; top:50%; transform:translateY(-50%)}
  .intro-inner{
    max-width:640px;
    text-align:center;
    position:relative;
    z-index:2;
  }
  .intro-eyebrow{
    display:inline-block;
    padding:7px 16px;
    background:var(--clay);
    color:var(--paper);
    font-size:10px;
    font-weight:900;
    letter-spacing:0.3em;
    border-radius:30px;
    margin-bottom:30px;
    text-transform:uppercase;
  }
  .intro h2{
    font-size:clamp(1.8rem, 5vw, 3.2rem);
    font-weight:800;
    line-height:1.1;
    margin-bottom:30px;
    letter-spacing:-0.02em;
  }
  .intro h2 em{color:var(--mustard-light); font-style:normal; position:relative}
  .intro h2 em::after{
    content:''; position:absolute; left:0; right:0; bottom:-4px;
    height:6px; background:var(--mustard); opacity:0.3; border-radius:3px;
  }
  .intro p{
    font-size:1.1rem;
    color:rgba(239,225,198,0.75);
    margin-bottom:16px;
    font-weight:300;
  }
  .intro-strip{
    display:block;
    width:100%;
    max-width:560px;
    height:auto;
    margin:36px auto 0;
    object-fit:contain;
    opacity:0.9;
    filter:drop-shadow(0 6px 20px rgba(0,0,0,0.3));
  }

  /* ═══════════════════════════════════════════════════════════════════
     LEVEL (stacking cards)
     ═══════════════════════════════════════════════════════════════════ */
  .level{
    position:sticky; top:0;
    min-height:100vh;
    padding:80px 40px;
    display:flex;
    align-items:center;
    border-radius:40px 40px 0 0;
    box-shadow:0 -30px 80px rgba(0,0,0,0.6), inset 0 1px 0 rgba(239,225,198,0.08);
    margin-top:-40px;
    overflow:hidden;
  }

  .mega-number{
    position:absolute;
    top:30px; right:40px;
    font-size:clamp(3rem, 7vw, 6rem);
    font-weight:900;
    line-height:0.8;
    color:transparent;
    -webkit-text-stroke:1.5px rgba(239,225,198,0.25);
    letter-spacing:-0.03em;
    pointer-events:none;
    user-select:none;
    z-index:2;
    transform:none;
  }

  .level-inner{
    position:relative;
    z-index:3;
    max-width:1300px;
    margin:0 auto;
    width:100%;
    display:grid;
    grid-template-columns:1.1fr 1fr 1fr;
    gap:40px;
    align-items:center;
  }

  .level-1{background:linear-gradient(140deg, var(--sepia-deep) 0%, var(--sepia) 60%, var(--clay-dark) 110%)}
  .level-2{background:linear-gradient(140deg, var(--clay-dark) 0%, var(--clay) 60%, var(--ocher-dark) 110%)}
  .level-3{background:linear-gradient(140deg, var(--clay) 0%, var(--clay-light) 60%, var(--ocher) 110%)}
  .level-4{background:linear-gradient(140deg, var(--stone) 0%, var(--sage) 60%, var(--sage-deep) 110%)}
  .level-5{background:linear-gradient(140deg, var(--ocher-dark) 0%, var(--ocher) 60%, var(--mustard) 110%)}
  .level-6{background:linear-gradient(140deg, var(--rust-deep) 0%, var(--rust) 60%, var(--ocher-light) 110%)}
  .level-7{background:linear-gradient(140deg, var(--sepia-deep) 0%, var(--dusty-rose-deep) 55%, var(--dusty-rose) 110%)}
  .level-8{background:linear-gradient(140deg, var(--ink) 0%, var(--sepia-deep) 50%, var(--sage-deep) 110%)}
  .level-9{background:linear-gradient(140deg, var(--mustard-light) 0%, var(--ocher) 55%, var(--rust) 110%)}
  .level-9 .mega-number{-webkit-text-stroke-color:rgba(20,10,8,0.35)}
  .level-9 .text-card{background:rgba(239,225,198,0.82); border-color:rgba(20,10,8,0.15)}
  .level-9 .text-card *{color:var(--ink)}
  .level-9 .trial-tag{background:var(--ink); color:var(--mustard-light)}
  .level-9 .nahua-word{color:var(--clay-dark); border-color:currentColor}
  .level-9 .image-tag{background:var(--ink); color:var(--mustard-light)}

  /* TEXT CARD */
  .text-card{
    position:relative;
    background:rgba(20,10,8,0.65);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    border:1px solid rgba(239,225,198,0.1);
    border-radius:28px;
    padding:36px 32px;
    box-shadow:0 20px 60px rgba(0,0,0,0.5), inset 0 1px 0 rgba(239,225,198,0.08);
  }
  .text-card::before{
    content:'';
    position:absolute;
    left:-1px; top:36px; bottom:36px;
    width:4px;
    background:linear-gradient(180deg, var(--mustard), var(--rust));
    border-radius:4px;
  }

  .level-tag{
    display:inline-flex; align-items:center; gap:8px;
    padding:6px 14px;
    background:rgba(239,225,198,0.06);
    border:1px solid rgba(239,225,198,0.18);
    color:var(--paper);
    font-size:10px;
    font-weight:800;
    letter-spacing:0.25em;
    border-radius:30px;
    margin-bottom:22px;
    text-transform:uppercase;
  }
  .level-tag .dot{width:6px; height:6px; background:var(--mustard-light); border-radius:50%; box-shadow:0 0 8px var(--mustard-light)}

  .text-card h2{
    font-size:clamp(1.8rem, 3.5vw, 2.8rem);
    font-weight:900;
    line-height:0.95;
    letter-spacing:-0.03em;
    margin-bottom:10px;
    color:var(--paper);
  }
  .level-translation{
    font-size:clamp(0.9rem, 1.3vw, 1rem);
    font-weight:400;
    font-style:italic;
    color:rgba(239,225,198,0.7);
    margin-bottom:20px;
  }
  .trial-tag{
    display:inline-block;
    padding:7px 14px;
    background:var(--ink);
    color:var(--mustard-light);
    font-size:10px;
    font-weight:900;
    letter-spacing:0.25em;
    border-radius:30px;
    text-transform:uppercase;
    margin-bottom:22px;
  }
  .level-text{
    color:var(--paper);
    font-size:clamp(0.95rem, 1.2vw, 1rem);
    opacity:0.9;
    margin-bottom:12px;
    font-weight:300;
  }
  .nahua-word{
    color:var(--mustard-light);
    font-weight:600;
    border-bottom:1.5px dotted currentColor;
    cursor:help;
    padding-bottom:1px;
  }

  /* ═══════════════════════════════════════════════════════════════════
     VIDEO HORIZONTAL (16:9) con estados de carga y audio
     ═══════════════════════════════════════════════════════════════════ */
  .level-video{
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
  }

  .video-frame{
    position:relative;
    width:100%;
    max-width:480px;                       /* horizontal cómodo en desktop */
    aspect-ratio:16/9;                     /* HORIZONTAL */
    border-radius:20px;
    overflow:hidden;
    background:#000;
    box-shadow:
      0 25px 60px rgba(0,0,0,0.5),
      0 0 0 6px rgba(239,225,198,0.92),
      0 0 0 8px rgba(20,10,8,0.3);
    /* Estados de carga: arranca invisible */
    opacity:0;
    visibility:hidden;
    transition:opacity 0.6s ease, visibility 0.6s ease;
  }
  .video-frame.video-ready{
    opacity:1;
    visibility:visible;
  }
  .video-frame.video-error{
    display:none !important;
  }
  .video-frame video{
    width:100%;
    height:100%;
    object-fit:cover;                      /* llena el marco; usa 'contain' si tus videos no son 16:9 exactos */
    display:block;
    background:#000;
    border-radius:inherit;
  }
  .video-frame video:fullscreen,
  .video-frame video:-webkit-full-screen{
    object-fit:contain;
    background:#000;
    width:100%;
    height:100%;
  }
  .video-frame video::backdrop{background:#000}

  .video-badge{
    position:absolute;
    top:12px; left:12px;
    background:var(--rust-deep);
    color:var(--paper);
    font-size:9px;
    font-weight:900;
    letter-spacing:0.2em;
    padding:4px 8px;
    border-radius:4px;
    z-index:3;
    text-transform:uppercase;
    display:flex; align-items:center; gap:6px;
    opacity:0;
    transition:opacity 0.4s ease 0.2s;
    pointer-events:none;                   /* no estorba a los controls */
  }
  .video-frame.video-ready .video-badge{opacity:1}
  .video-badge::before{
    content:''; width:5px; height:5px;
    background:var(--paper); border-radius:50%;
    animation:recordPulse 1.5s ease-in-out infinite;
  }
  @keyframes recordPulse{0%,100%{opacity:1} 50%{opacity:0.3}}

  /* IMAGEN + TAG DEBAJO */
  .level-right{display:flex; align-items:center; justify-content:center; position:relative}
  .level-image-wrap{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:14px;
    width:100%;
    max-width:380px;
    transition:transform 0.4s ease;
    transform:rotate(-2deg);
  }
  .level:nth-child(even) .level-image-wrap{transform:rotate(2deg)}
  .level-image-wrap:hover{transform:rotate(0deg) scale(1.02)}
  .level:nth-child(even) .level-image-wrap:hover{transform:rotate(0deg) scale(1.02)}

  .level-image{
    position:relative;
    width:100%;
    aspect-ratio:4/5;
    border-radius:20px;
    overflow:hidden;
  }
  .level-image img{width:100%; height:100%; object-fit:cover; display:block}

  .image-tag{
    display:inline-block;
    background:var(--mustard-light);
    color:var(--ink);
    padding:7px 14px;
    border-radius:6px;
    font-size:10px;
    font-weight:900;
    letter-spacing:0.2em;
    text-transform:uppercase;
    box-shadow:0 4px 12px rgba(0,0,0,0.25);
    white-space:nowrap;
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  /* ANIMACIONES */
  .anim-item{opacity:0; transform:translateY(40px); transition:opacity 0.9s cubic-bezier(0.25,0.46,0.45,0.94), transform 0.9s cubic-bezier(0.25,0.46,0.45,0.94)}
  .anim-item.on{opacity:1; transform:translateY(0)}
  .anim-image{opacity:0; transform:translateX(60px) rotate(-6deg) scale(0.92); transition:opacity 1s cubic-bezier(0.25,0.46,0.45,0.94), transform 1.1s cubic-bezier(0.25,0.46,0.45,0.94)}
  .anim-image.on{opacity:1; transform:rotate(-2deg) scale(1)}
  .level:nth-child(even) .anim-image{transform:translateX(-60px) rotate(6deg) scale(0.92)}
  .level:nth-child(even) .anim-image.on{transform:rotate(2deg) scale(1)}
  .anim-video{transform:translateY(60px) scale(0.9); transition:opacity 1s cubic-bezier(0.25,0.46,0.45,0.94), transform 1.1s cubic-bezier(0.25,0.46,0.45,0.94), visibility 0.6s ease}
  .anim-video.on{transform:translateY(0) scale(1)}
  .anim-mega{opacity:0; transform:translateX(30px); transition:opacity 1.2s ease, transform 1.4s cubic-bezier(0.25,0.46,0.45,0.94)}
  .anim-mega.on{opacity:1; transform:translateX(0)}
  .delay-0{transition-delay:0.1s} .delay-1{transition-delay:0.25s} .delay-2{transition-delay:0.4s}
  .delay-3{transition-delay:0.55s} .delay-4{transition-delay:0.7s} .delay-5{transition-delay:0.85s}

  .tooltip{
    position:fixed;
    background:#000;
    border:1px solid var(--mustard);
    color:var(--paper);
    padding:10px 14px;
    font-size:0.9rem;
    border-radius:10px;
    pointer-events:none;
    z-index:9999;
    opacity:0;
    transition:opacity 0.2s;
    max-width:240px;
    box-shadow:0 10px 30px rgba(0,0,0,0.8);
  }
  .tooltip.show{opacity:1}

  /* ═══════════════════════════════════════════════════════════════════
     PANTALLAS GRANDES
     ═══════════════════════════════════════════════════════════════════ */
  @media (min-width:1400px){
    .level-inner{max-width:1500px; gap:60px}
    .video-frame{max-width:560px}
    .level-image-wrap{max-width:460px}
    .mega-number{font-size:clamp(5rem, 8vw, 8rem); top:40px; right:50px}
    .intro-owl{width:min(20vw, 340px)}
    .intro-owl-left{left:4%}
    .intro-owl-right{right:4%}
    .intro-strip{max-width:640px; margin-top:44px}
  }
  @media (min-width:1700px){
    .level-inner{max-width:1700px; gap:80px}
    .video-frame{max-width:640px}
    .level-image-wrap{max-width:540px}
    .text-card{padding:44px 40px}
    .text-card h2{font-size:clamp(2.4rem, 3vw, 3.4rem)}
    .level-text{font-size:1.15rem}
    .mega-number{font-size:9rem}
  }
  @media (min-width:2200px){
    .level-inner{max-width:2000px; gap:100px}
    .video-frame{max-width:720px}
    .level-image-wrap{max-width:620px}
    .mega-number{font-size:11rem}
  }

  /* ═══════════════════════════════════════════════════════════════════
     TABLET (721-1100px)
     ═══════════════════════════════════════════════════════════════════ */
  @media (max-width:1100px) and (min-width:721px){
    .level-inner{
      grid-template-columns:1fr 1fr;
      grid-template-areas:
        "texto video"
        "imagen imagen";
      gap:30px;
    }
    .level-left{grid-area:texto}
    .level-video{grid-area:video}
    .level-right{grid-area:imagen; margin-top:10px}
    .level-image-wrap{max-width:420px}
    .video-frame{max-width:420px}
    .mega-number{top:24px; right:30px; font-size:4rem}

    /* INTRO tablet */
    .intro{padding:60px 20px 40px; min-height:auto}
    .intro-inner{
      max-width:100%;
      display:grid;
      grid-template-columns:auto 1fr auto;
      grid-template-areas:
        "buho-izq titulo buho-der"
        "texto texto texto"
        "tira tira tira";
      align-items:center;
      gap:16px 20px;
    }
    .intro-eyebrow{grid-column:1 / -1; justify-self:center}
    .intro h2{grid-area:titulo; margin:0; font-size:1.8rem}
    .intro-inner > p{grid-column:1 / -1}
    .intro-owl{
      position:relative;
      top:auto; left:auto; right:auto;
      transform:none;
      width:min(16vw, 140px);
      max-height:none;
      opacity:0.9;
    }
    .intro-owl-left{grid-area:buho-izq}
    .intro-owl-right{grid-area:buho-der}
    .intro-strip{grid-area:tira; max-width:500px; margin:20px auto 0}
  }

  /* ═══════════════════════════════════════════════════════════════════
     MOBILE (≤720px)
     ═══════════════════════════════════════════════════════════════════ */
  @media (max-width:720px){
    body{line-height:1.5}
    .tracker{padding:6px; gap:2px; max-width:calc(100vw - 24px)}
    .tracker a{width:30px; height:30px; font-size:11px}

    .hero{padding:70px 20px 100px; min-height:100vh}
    .hero h1{font-size:19vw; line-height:0.85; margin-bottom:24px}
    .hero-eyebrow{font-size:10px; padding:6px 14px; margin-bottom:24px}
    .hero-sub{font-size:1rem; margin-bottom:32px}
    .hero-meta{padding:12px 4px; width:100%}
    .hero-meta .stat{padding:4px 14px}
    .hero-meta .num{font-size:1.4rem}
    .hero-meta .lbl{font-size:8px}

    .hero-with-bg .image-hint{top:16px; right:16px; font-size:9px; padding:5px 10px}

    /* INTRO móvil */
    .intro{padding:50px 20px 60px; min-height:auto; border-radius:32px 32px 0 0}
    .intro h2{font-size:1.75rem; margin-bottom:24px}
    .intro p{font-size:1rem}
    .intro-inner{
      display:flex;
      flex-direction:column;
      align-items:center;
      max-width:100%;
      grid-template-columns:none;
      grid-template-areas:none;
    }
    .intro-owl, .intro-owl-left, .intro-owl-right{display:none !important}
    .intro-strip{max-width:92%; margin-top:28px}

    .level{padding:50px 20px 70px; border-radius:32px 32px 0 0; min-height:auto; align-items:flex-start}
    .level-inner{
      grid-template-columns:1fr;
   grid-template-areas:
    "texto"
    "video"
    "imagen";
      gap:24px;
    }
    .level-left{grid-area:texto}
    .level-video{grid-area:video}
    .level-right{grid-area:imagen; display:flex}

    .level-image-wrap{max-width:320px; gap:12px}
    .video-frame{
      max-width:100%;
      border-radius:16px;
      box-shadow:
        0 20px 50px rgba(0,0,0,0.5),
        0 0 0 5px rgba(239,225,198,0.92),
        0 0 0 7px rgba(20,10,8,0.3);
    }

    .text-card{padding:28px 22px; border-radius:22px}
    .text-card::before{top:28px; bottom:28px; width:3px}
    .text-card h2{font-size:1.9rem; margin-bottom:8px}
    .level-translation{font-size:0.95rem; margin-bottom:18px}
    .trial-tag{font-size:9px; padding:7px 14px; margin-bottom:18px}
    .level-text{font-size:1rem; margin-bottom:12px}
    .level-tag{font-size:9px; margin-bottom:18px; padding:5px 12px}

    .mega-number{top:16px; right:20px; font-size:3rem; -webkit-text-stroke-width:1.2px}
    .image-tag{font-size:9px; padding:6px 12px}

    .papel{height:28px}
    .papel .flag{height:22px}
  }

  @media (max-width:400px){
    .hero h1{font-size:22vw}
    .tracker{bottom:12px}
    .tracker a{width:26px; height:26px; font-size:10px}
    .text-card{padding:24px 18px; border-radius:18px}
    .level-image-wrap{max-width:280px}
    .mega-number{font-size:2.4rem; top:14px; right:16px}
    .intro-strip{max-width:96%}
    .intro h2{font-size:1.5rem}
  }

  @media (prefers-reduced-motion:reduce){
    .anim-item, .anim-image, .anim-video, .anim-mega{opacity:1 !important; transform:none !important; transition:none !important}
    .level:nth-child(even) .anim-image.on, .anim-image.on{transform:rotate(0deg) !important}
    .level-image-wrap{transform:rotate(0deg) !important}
    .level:nth-child(even) .level-image-wrap{transform:rotate(0deg) !important}
    .hero-with-bg .hero-inner,
    .hero-with-bg .scroll-cue,
    .hero-with-bg .hero-overlay{transition:none}
    .hero-with-bg.image-visible .hero-inner,
    .hero-with-bg.image-visible .scroll-cue{opacity:1 !important; transform:none !important}
    .hero-with-bg.image-visible .hero-overlay{opacity:1 !important}
  }