/* ============================================================
     FUENTES REALES DE TU MANUAL DE MARCA
     - aAnotherTag  -> título/tag graffiti (ARIC, encabezados)
     - alittlepot   -> manuscrita (números de fase, notas, cifras)
     - Montserrat   -> cuerpo de texto (variable, uso en itálica fina)
     Los archivos viven en ./fonts — súbelos junto a este index.html.
     ============================================================ */
  @font-face{
    font-family:'AricTag';
    src:url('fonts/aAnotherTag.otf') format('opentype');
    font-display:swap;
  }
  @font-face{
    font-family:'AricHand';
    src:url('fonts/alittlepot.ttf') format('truetype');
    font-display:swap;
  }
  @font-face{
    font-family:'AricBody';
    src:url('fonts/Montserrat-Italic-VariableFont_wght.ttf') format('truetype-variations');
    font-weight:100 900;
    font-style:italic;
    font-display:swap;
  }

  :root{
    --purple:      #390099;
    --purple-deep: #22005c;
    --orange:      #FB5607;
    --cream:       #FDF0D5;
    --black:       #0a0a0a;

    --font-tag:  'AricTag', 'Permanent Marker', cursive;
    --font-hand: 'AricHand', 'Kalam', cursive;
    --font-body: 'AricBody', 'Montserrat', sans-serif;
  }

  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *{animation:none !important; transition:none !important;}
  }

  body{
    background:var(--purple);
    color:var(--cream);
    font-family:var(--font-body);
    font-style:normal;
    font-weight:400;
    line-height:1.65;
    overflow-x:hidden;
  }

  a{color:inherit;}
  img{max-width:100%; display:block;}

  /* ===================== TOP NAV ===================== */
  header.topnav{
    position:sticky;
    top:0;
    z-index:50;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    padding:.8rem 2rem;
    background:rgba(10,10,10,.88);
    backdrop-filter:blur(6px);
    border-bottom:3px solid var(--orange);
  }
  header.topnav .logo-lockup{
    height:52px;
  }
  header.topnav .logo-lockup img{height:100%; width:auto;}

  header.topnav nav{
    display:flex;
    gap:.35rem;
    overflow-x:auto;
    scrollbar-width:none;
  }
  header.topnav nav::-webkit-scrollbar{display:none;}
  header.topnav nav a{
    white-space:nowrap;
    font-family:var(--font-hand);
    font-size:1.02rem;
    color:rgba(253,240,213,.6);
    text-decoration:none;
    padding:.4rem .75rem;
    border-radius:999px;
    border:1px solid transparent;
    transition:color .2s ease, border-color .2s ease, background .2s ease;
  }
  header.topnav nav a:hover,
  header.topnav nav a.active{
    color:var(--cream);
    border-color:var(--orange);
    background:rgba(251,86,7,.12);
  }

  /* ===================== HERO ===================== */
  .hero{
    position:relative;
    min-height:78vh;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    padding:4rem 5vw;
    background:
      linear-gradient(160deg, var(--purple) 0%, var(--purple-deep) 60%, var(--black) 130%);
    overflow:hidden;
    border-bottom:6px solid var(--orange);
  }
  .hero .bg-star{
    position:absolute;
    right:-8%;
    top:50%;
    width:min(60vw, 800px);
    transform:translateY(-50%) rotate(0deg);
    opacity:.16;
    animation:spin 90s linear infinite;
    pointer-events:none;
  }
  @keyframes spin{ to{ transform:translateY(-50%) rotate(360deg); } }

  .hero .eyebrow{
    font-family:var(--font-hand);
    font-size:1.25rem;
    color:var(--orange);
    margin-bottom:.6rem;
  }
  .hero h1{
    font-family:var(--font-tag);
    font-weight:400;
    font-size:clamp(2.8rem, 8vw, 6.2rem);
    line-height:.92;
    color:var(--cream);
    text-shadow: 4px 4px 0 var(--orange);
    max-width:14ch;
  }
  .hero p.tagline{
    margin-top:1.6rem;
    font-family:var(--font-body);
    font-style:italic;
    font-weight:300;
    font-size:1.15rem;
    color:rgba(253,240,213,.8);
    max-width:44ch;
  }
  .hero .brand-logo{
    margin-top:2.4rem;
    width:170px;
  }

  /* ===================== SECCIONES ===================== */
  main{position:relative;}

  section.step{
    position:relative;
    padding:5.5rem 5vw;
    overflow:hidden;
    isolation:isolate;
  }

  /* Marcas de esquina inspiradas en el "área de protección" del manual */
  .corner{
    position:absolute;
    font-family:var(--font-tag);
    font-size:1.6rem;
    opacity:.35;
    z-index:0;
    line-height:1;
    pointer-events:none;
  }
  .corner.tl{top:1.4rem; left:1.4rem;}
  .corner.tr{top:1.4rem; right:1.4rem;}
  .corner.bl{bottom:1.4rem; left:1.4rem;}
  .corner.br{bottom:1.4rem; right:1.4rem;}

  /* número de fase gigante de fondo, en la manuscrita del manual */
  .ghost-num{
    position:absolute;
    font-family:var(--font-hand);
    font-size:min(38vw, 22rem);
    line-height:1;
    top:-4rem;
    right:-1rem;
    opacity:.07;
    z-index:0;
    pointer-events:none;
    user-select:none;
  }

  .step-inner{
    position:relative;
    z-index:1;
    max-width:900px;
  }

  .step-header{
    display:flex;
    align-items:center;
    gap:1.1rem;
    margin-bottom:1.7rem;
    flex-wrap:wrap;
  }
  .tag-title{
    position:relative;
    display:inline-block;
    padding:.85rem 1.5rem .65rem;
  }
  .tag-title h2{
    font-family:var(--font-tag);
    font-weight:400;
    font-size:clamp(1.7rem, 3.4vw, 2.6rem);
    line-height:1;
  }
  .tag-title .stripe{
    position:absolute;
    left:1.5rem;
    bottom:-9px;
    width:58%;
    height:9px;
  }
  .step-sub{
    font-family:var(--font-hand);
    font-size:1.2rem;
  }
  .step-body p{
    max-width:68ch;
    font-weight:300;
    font-style:italic;
    margin-bottom:1.2rem;
    opacity:.92;
  }

  /* ---- paletas de sección: cada fase toma un color distinto de tu paleta ---- */
  .bg-purple{ background:var(--purple); color:var(--cream); }
  .bg-purple .tag-title{ background:var(--orange); }
  .bg-purple .tag-title h2{ color:var(--black); }
  .bg-purple .tag-title .stripe{ background:var(--cream); }
  .bg-purple .step-sub{ color:var(--orange); }
  .bg-purple .corner, .bg-purple .ghost-num{ color:var(--cream); }

  .bg-black{ background:var(--black); color:var(--cream); }
  .bg-black .tag-title{ background:var(--cream); }
  .bg-black .tag-title h2{ color:var(--black); }
  .bg-black .tag-title .stripe{ background:var(--orange); }
  .bg-black .step-sub{ color:var(--orange); }
  .bg-black .corner, .bg-black .ghost-num{ color:var(--purple); filter:brightness(2.6); }

  .bg-orange{ background:var(--orange); color:var(--black); }
  .bg-orange .tag-title{ background:var(--black); }
  .bg-orange .tag-title h2{ color:var(--cream); }
  .bg-orange .tag-title .stripe{ background:var(--purple); }
  .bg-orange .step-sub{ color:var(--purple); }
  .bg-orange .step-body p{ color:rgba(0,0,0,.78); }
  .bg-orange .corner, .bg-orange .ghost-num{ color:var(--black); }
  .bg-orange .media-fallback{ background:var(--black); color:var(--cream); }

  .bg-cream{ background:var(--cream); color:var(--black); }
  .bg-cream .tag-title{ background:var(--purple); }
  .bg-cream .tag-title h2{ color:var(--cream); }
  .bg-cream .tag-title .stripe{ background:var(--orange); }
  .bg-cream .step-sub{ color:var(--purple); }
  .bg-cream .step-body p{ color:rgba(0,0,0,.75); }
  .bg-cream .corner, .bg-cream .ghost-num{ color:var(--orange); }
  .bg-cream .media-frame{ border-color:var(--purple); }

  .fase-tag{
    font-family:var(--font-hand);
    font-size:1rem;
    opacity:.65;
  }

  /* ===================== VISOR DE PDF / VIDEO ===================== */
  .media-frame{
    margin-top:1.6rem;
    border:3px solid var(--orange);
    background:var(--black);
    border-radius:8px;
    overflow:hidden;
    transform:rotate(-.4deg);
    transition:transform .25s ease;
  }
  .media-frame:hover{ transform:rotate(0deg) scale(1.01); }
  .media-frame iframe,
  .media-frame video{
    width:100%;
    display:block;
    aspect-ratio:16/10;
    background:#111;
  }
  .media-frame video{aspect-ratio:16/9;}

  .media-fallback{
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    margin-top:1rem;
    padding:.6rem 1.2rem;
    background:var(--cream);
    color:var(--black);
    font-weight:700;
    text-decoration:none;
    border-radius:3px;
    font-size:.9rem;
    transition:transform .15s ease;
  }
  .media-fallback:hover{transform:translateY(-2px) rotate(-1deg);}

  .mockup-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(220px,1fr));
    gap:1.1rem;
    margin-top:1.6rem;
  }
  .mockup-grid img{
    border:3px solid currentColor;
    border-radius:8px;
  }

  /* ===================== CTA / PROTOTIPO ===================== */
  .cta-portafolio{
    position:relative;
    text-align:center;
    padding:6rem 2rem;
    background:
      radial-gradient(circle at 30% 20%, rgba(251,86,7,.35), transparent 55%),
      radial-gradient(circle at 70% 80%, rgba(57,0,153,.6), transparent 55%),
      var(--black);
    overflow:hidden;
  }
  .cta-portafolio .star-spin{
    position:absolute;
    width:340px;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    opacity:.12;
    animation:spin 60s linear infinite;
  }
  .cta-portafolio .content{position:relative; z-index:1;}
  .cta-portafolio h2{
    font-family:var(--font-tag);
    font-weight:400;
    font-size:clamp(2.1rem,6vw,3.6rem);
    color:var(--orange);
    text-shadow:3px 3px 0 var(--cream);
  }
  .cta-portafolio p{
    font-family:var(--font-hand);
    font-size:1.3rem;
    margin-top:1rem;
    color:var(--cream);
  }
  .cta-portafolio a.btn{
    display:inline-block;
    margin-top:2rem;
    padding:1rem 2.5rem;
    background:var(--orange);
    color:var(--black);
    text-decoration:none;
    font-family:var(--font-tag);
    font-size:1.15rem;
    border-radius:4px;
    transition:transform .2s ease, background .2s ease;
  }
  .cta-portafolio a.btn:hover{
    background:var(--cream);
    transform:translateY(-3px) rotate(-1deg);
  }

  footer{
    text-align:center;
    padding:2.4rem;
    background:var(--purple-deep);
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:.8rem;
  }
  footer img{height:34px; width:auto; opacity:.85;}
  footer span{
    font-family:var(--font-hand);
    font-size:1rem;
    color:rgba(253,240,213,.55);
  }

  @media (max-width:760px){
    header.topnav{flex-direction:column; align-items:flex-start; gap:.6rem;}
    header.topnav .logo-lockup{height:40px;}
    .hero{min-height:60vh; padding:3.5rem 6vw;}
    section.step{padding:4rem 6vw;}
    .corner{font-size:1.1rem;}
  }