:root{
    --bg:#070B10;
    --panel: rgba(255,255,255,.06);
    --panel2: rgba(255,255,255,.04);
    --text:#F8F9FA;
    --muted: rgba(248,249,250,.72);
  
    --c1:#00C0BE;
    --c2:#046BEE;
    --c3:#4619EF;
  
    --radius: 18px;
  }
  
  *{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  body{
    margin:0;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
    background: radial-gradient(1200px 600px at 10% 10%, rgba(0,192,190,.14), transparent 60%),
                radial-gradient(1000px 600px at 90% 30%, rgba(70,25,239,.16), transparent 60%),
                var(--bg);
    color: var(--text);
    overflow-x:hidden;
  }
  
  .bg-aurora{
    position: fixed;
    inset: -20%;
    pointer-events: none;
    z-index: 0;
    opacity: .55;
    filter: blur(30px);
    transform: rotate(0deg) scale(1.08);
    transform-origin: center;
    background:
      radial-gradient(700px 420px at 20% 20%, rgba(0,192,190,.22), transparent 60%),
      radial-gradient(760px 460px at 80% 35%, rgba(4,107,238,.20), transparent 60%),
      radial-gradient(760px 520px at 55% 85%, rgba(70,25,239,.22), transparent 60%);
  }
  .bg-orbs{ z-index: 1; }
  .nav, .hero, main, .footer{ position: relative; z-index: 2; }

  a{ color:inherit; text-decoration:none; }
  .muted{ color: var(--muted); }
  
  .grad{
    background: linear-gradient(90deg, var(--c1), var(--c2), var(--c3));
    -webkit-background-clip:text;
    background-clip:text;
    color: transparent;
  }
  
  .bg-orbs{ position:fixed; inset:0; pointer-events:none; }
  .orb{
    position:absolute; filter: blur(18px); opacity:.9;
    background: linear-gradient(135deg, var(--c1), var(--c2), var(--c3));
    border-radius: 999px;
  }
  .orb-1{ width:280px; height:280px; left:-80px; top:120px; opacity:.55;}
  .orb-2{ width:220px; height:220px; right:60px; top:80px; opacity:.40;}
  .orb-3{ width:340px; height:340px; right:-120px; bottom:-120px; opacity:.50;}
  
  .nav{
    position:sticky; top:0; z-index:10;
    display:flex; align-items:center; justify-content:space-between;
    padding:18px 26px;
    backdrop-filter: blur(10px);
    background: rgba(7,11,16,.55);
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  .nav__brand{
    font-weight:700; letter-spacing:.06em; text-transform:lowercase;
  }
  .nav__links{ display:flex; gap:16px; align-items:center; }
  .nav__links a{ opacity:.85; }
  .nav__links a:hover{ opacity:1; }
  
  .logo{
    height: 40px;
    width: auto;
    display:block;
    filter: drop-shadow(0 8px 18px rgba(0,0,0,.35));
  }
  @media (max-width: 960px){
    .logo{ height: 34px; }
  }

  .hero{
    display:grid; grid-template-columns: 1.2fr .8fr;
    gap:28px;
    max-width:1100px;
    margin: 0 auto;
    padding: 70px 22px 40px;
  }

  
  .hero__title{
    font-size: clamp(40px, 4.6vw, 64px);
    line-height: 1.02;
    margin: 10px 0 14px;
  }
  .hero__subtitle{ max-width: 52ch; color: var(--muted); font-size: 17px; line-height:1.6; }
  .chip{
    display:inline-flex; align-items:center; gap:10px;
    padding: 10px 14px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 999px;
    width: fit-content;
    color: rgba(248,249,250,.86);
  }
  
  .hero__cta{ display:flex; gap:12px; margin-top:18px; flex-wrap:wrap; }
  
  .btn{
    display:inline-flex; align-items:center; justify-content:center;
    padding: 12px 16px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.12);
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
    font-weight: 600;
  }
  .btn:hover{ transform: translateY(-1px); }
  .btn--primary{
    background: linear-gradient(90deg, var(--c1), var(--c2), var(--c3));
    border-color: rgba(255,255,255,.18);
    box-shadow: 0 14px 40px rgba(4,107,238,.22);
  }
  .btn--secondary{
    background: rgba(255,255,255,.06);
  }
  .btn--ghost{
    padding: 10px 14px;
    background: rgba(255,255,255,.04);
  }
  .btn--small{ margin-top:14px; padding: 10px 14px; border-radius: 12px; }
  
  .trust{
    display:grid; grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 10px;
    margin-top: 22px;
  }
  .trust__item{
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    padding: 12px 12px;
    border-radius: 14px;
  }
  .trust__item strong{ display:block; font-size: 14px; }
  .trust__item span{ display:block; font-size: 12px; color: var(--muted); margin-top:2px; }
  
  .hero__visual{ display:flex; align-items:center; justify-content:center; }
  .glass-card{
    width: 360px;
    background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.04));
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 22px;
    box-shadow: 0 25px 70px rgba(0,0,0,.5);
    position: relative;
    overflow:hidden;
  }
  .glass-card::before{
    content:"";
    position:absolute; inset:-2px;
    background: linear-gradient(90deg, rgba(0,192,190,.35), rgba(4,107,238,.35), rgba(70,25,239,.35));
    filter: blur(18px);
    opacity:.35;
  }
  .glass-card__top{
    position:relative;
    display:flex; gap:8px;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255,255,255,.10);
  }
  .dot{
    width:10px; height:10px; border-radius:999px;
    background: rgba(255,255,255,.25);
  }
  .glass-card__body{ position:relative; padding: 18px 18px 22px; }
  .mini{ font-size: 12px; color: rgba(248,249,250,.78); margin:0 0 6px; }
  .glass-card__body h3{ margin:0 0 6px; font-size: 18px; }
  .bar{
    height: 10px; border-radius: 999px;
    background: rgba(255,255,255,.10);
    margin-top: 14px;
  }
  .feat-meta{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 10px;
    margin-top: 10px;
  }
  
  .feat-tag{
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
    color: rgba(248,249,250,.85);
  }
  
  .feat-link{
    font-size: 12px;
    font-weight: 700;
    padding: 8px 12px;
    border-radius: 12px;
    background: linear-gradient(90deg, var(--c1), var(--c2), var(--c3));
    border: 1px solid rgba(255,255,255,.18);
    color: #ffffff;
  }
  
  .feat-dots{
    display:flex;
    gap: 8px;
    margin-top: 12px;
  }
  
  .feat-dot{
    width: 8px;
    height: 8px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.12);
    cursor: pointer;
    padding: 0;
  }
  
  .feat-dot.is-active{
    background: linear-gradient(90deg, var(--c1), var(--c2), var(--c3));
    border-color: rgba(255,255,255,.28);
    transform: scale(1.15);
  }
  .bar--short{ width: 65%; }
  
  .section{
    max-width:1100px;
    margin: 0 auto;
    padding: 58px 22px;
  }
  .section__head h2{ font-size: 30px; margin:0 0 10px; }
  .section__head p{ margin:0; color: var(--muted); max-width: 70ch; line-height:1.6; }
  
  .grid{
    margin-top: 22px;
    display:grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 14px;
  }
  .grid--3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
  
  .card{
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: var(--radius);
    padding: 18px 18px;
    position:relative;
    overflow:hidden;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  }
  .card:hover{
    transform: translateY(-2px);
    border-color: rgba(255,255,255,.18);
    box-shadow: 0 22px 60px rgba(0,0,0,.35);
  }
  .card::after{
    content:"";
    position:absolute; inset:-2px;
    background: linear-gradient(90deg, rgba(0,192,190,.22), rgba(4,107,238,.22), rgba(70,25,239,.22));
    filter: blur(18px);
    opacity: 0;
    transition: opacity .2s ease;
  }
  .card:hover::after{ opacity:.9; }
  .card > *{ position:relative; }
  
  .card ul{ margin: 12px 0 0; padding-left: 18px; color: rgba(248,249,250,.86); }
  .card li{ margin: 6px 0; }
  
  .card--soft{ background: rgba(255,255,255,.03); }
  
  .badge{
    display:inline-flex;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(0,192,190,.12);
    border: 1px solid rgba(0,192,190,.25);
    color: rgba(248,249,250,.88);
    font-size: 12px;
    margin-bottom: 10px;
  }
  
  .process{ margin-top: 10px; }
  .process__steps{
    margin-top: 18px;
    display:grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 12px;
  }
  .step{
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 16px;
    padding: 14px;
  }
  .step span{
    display:inline-block;
    font-weight:700;
    background: linear-gradient(90deg, var(--c1), var(--c2), var(--c3));
    -webkit-background-clip:text;
    background-clip:text;
    color: transparent;
  }
  .step h4{ margin: 8px 0 6px; }
  .step p{ margin:0; color: var(--muted); }
  
  .section--cta{
    background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 26px;
    text-align:center;
    padding: 50px 22px;
    margin: 10px auto 70px;
  }
  .section--cta h2{ margin:0 0 10px; font-size: 32px; }
  .section--cta p{ margin:0 auto 18px; color: var(--muted); max-width: 70ch; }
  
  .footer{
    padding: 26px 22px;
    border-top: 1px solid rgba(255,255,255,.08);
    text-align:center;
    color: rgba(248,249,250,.7);
  }
  
  /* Responsive */
  @media (max-width: 960px){
    .hero{ grid-template-columns: 1fr; }
    .hero__visual{ justify-content:flex-start; }
    .trust{ grid-template-columns: repeat(2, minmax(0,1fr)); }
    .process__steps{ grid-template-columns: repeat(2, minmax(0,1fr)); }
    .grid{ grid-template-columns: 1fr; }
    .grid--3{ grid-template-columns: 1fr; }
  
    /* Oculta solo los links, NO el botón */
    .nav__links{ display:none; }
    .nav__cta{ display:inline-flex; }
    .nav__cta{
        background: linear-gradient(90deg, var(--c1), var(--c2), var(--c3));
        border-color: rgba(255,255,255,.18);
        box-shadow: 0 14px 40px rgba(4,107,238,.22);
    }
      /* baja un poco la intensidad si aún molesta */
    .orb{
        opacity: .38;          /* opcional: ayuda a lectura */
        filter: blur(22px);    /* opcional: un poco más blur */
    }

    /* Orb 1: izquierda, se ve ~40% */
    .orb-1{
        left: -50%;
        top: 140px;
    }

    /* Orb 2: derecha, se ve ~35-45% */
    .orb-2{
        right: -35%;
        top: 40px;
    }

    /* Orb 3: derecha abajo, se ve ~45-50% */
    .orb-3{
        right: -45%;
        bottom: -30%;
    }
    /* Centrar foto en móvil */
    .hero__visual{
        display: flex;
        justify-content: center;
        align-items: flex-end;
    }
    
    .hero__photo{
        position: absolute;
        right: 0%;
        transform: translateX(-10%);
    }
  }

  .hero__visual{
    position: relative;
    display: flex;
    align-items: flex-end; /* clave */
    justify-content: center;
    min-height: 520px;
  }
  
  /* FOTO */
  .hero__photo{
    position: absolute;
    bottom: 0;
    right: 0;
    width: 85%;
    max-width: 420px;
    z-index: 1;
    pointer-events: none;
  }
  
  .hero__photo img{
    width: 100%;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 40px 80px rgba(0,0,0,.6));
  }
  
  /* GLASS CARD */
  .glass-card{
    position: relative;
    z-index: 2;
    margin-bottom: 40px; /* controla cuánto tapa */
  }
  

  /* =========================
   TABLET / IPAD (modo 1 columna)
   ========================= */
@media (min-width: 650px) and (max-width: 1024px){

    /* 1 columna para que respire */
    .hero{
      grid-template-columns: 1fr;
      gap: 24px;
      padding: 70px 28px 30px;
    }
  
    /* Visual centrado y con altura controlada */
    .hero__visual{
      min-height: 520px;        /* controla el alto del bloque visual */
      justify-content: center;
      align-items: flex-end;
    }
  
    /* FOTO centrada (sin cambiar el JS ni movimiento) */
    .hero__photo{
      right: 50%;
      transform: translateX(50%);
    }
  
    /* Card más arriba para que no quede “en el piso” */
    .glass-card{
      margin-bottom: 110px;     /* sube la card (tapa torso, no piernas) */
    }
  
    /* Botones y trust más compactos */
    .hero__cta{
      gap: 10px;
    }
  
    .trust{
      grid-template-columns: repeat(2, minmax(0,1fr));
      gap: 10px;
    }
    
     /* El bloque visual se vuelve un "marco" y recorta la foto */
    .hero__visual{
        min-height: 460px;   /* baja altura del visual */
        overflow: show;    /* recorta lo que sube */
    }

    /* Baja la foto para que no invada el texto */
    .hero__photo{
        bottom: -90px;       /* ajusta entre -60 y -140 */
    }

    /* (Opcional) reducir un poquito el tamaño sin editar imagen */
    .hero__photo img{
        transform: scale(0.92);
        transform-origin: center bottom;
    }

    /* Sube la card para que siga tapando torso */
    .glass-card{
        margin-bottom: 0px;
    }
  }


  .card::after{
    pointer-events: none;
  }


  /* =========================
   SHOWCASE / CASE SLIDER
   ========================= */
.showcase{
    margin-top: 18px;
  }
  
  .showcase__top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 12px;
    margin-bottom: 12px;
  }
  
  .pill{
    display:inline-flex;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
    font-size: 12px;
  }
  
  .showcase__controls{
    display:flex;
    gap: 8px;
  }
  
  .sc-btn{
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.06);
    color: rgba(248,249,250,.9);
    cursor: pointer;
    transition: transform .18s ease, background .18s ease, border-color .18s ease;
  }
  .sc-btn:hover{
    transform: translateY(-1px);
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.18);
  }
  
  .showcase__track{
    display:flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 6px 2px 14px;
    -webkit-overflow-scrolling: touch;
  }
  .showcase__track::-webkit-scrollbar{ height: 8px; }
  .showcase__track::-webkit-scrollbar-thumb{
    background: rgba(255,255,255,.10);
    border-radius: 999px;
  }
  .showcase__track::-webkit-scrollbar-track{
    background: rgba(255,255,255,.04);
    border-radius: 999px;
  }
  
  .case{
    flex: 0 0 auto;
    width: min(860px, 88vw);
    scroll-snap-align: start;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 22px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 22px 60px rgba(0,0,0,.35);
  }
  
  .case::after{
    content:"";
    position:absolute; inset:-2px;
    background: linear-gradient(90deg, rgba(0,192,190,.18), rgba(4,107,238,.18), rgba(70,25,239,.18));
    filter: blur(18px);
    opacity: .35;
    pointer-events: none;
  }
  
  .case__media{
    position: relative;
    height: 360px;
    overflow:hidden;
  }
  .case__media img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display:block;
    transform: scale(1.02);
  }
  .case__media::after{
    content:"";
    position:absolute; inset:0;
    background: linear-gradient(to bottom, transparent 35%, rgba(7,11,16,.85) 100%);
    pointer-events:none;
  }
  
  .case__body{
    position: relative;
    padding: 16px 16px 18px;
  }
  
  .case__meta{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 10px;
    margin-bottom: 10px;
  }
  
  .case__small{
    font-size: 12px;
  }
  
  .case__title{
    margin: 0 0 8px;
    font-size: 20px;
  }
  
  .case__desc{
    margin: 0 0 12px;
    line-height: 1.55;
  }
  
  .case__tags{
    display:flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  
  .tag{
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
    color: rgba(248,249,250,.86);
  }
  
  /* Dots */
  .showcase__dots{
    display:flex;
    justify-content:center;
    gap: 8px;
    margin-top: 12px;
  }
  .sc-dot{
    width: 8px;
    height: 8px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.12);
    cursor:pointer;
    padding:0;
  }
  .sc-dot.is-active{
    background: linear-gradient(90deg, var(--c1), var(--c2), var(--c3));
    border-color: rgba(255,255,255,.28);
    transform: scale(1.15);
  }
  
  /* Responsive */
  @media (max-width: 960px){
    .case{ width: 92vw; }
    .case__media{ height: 300px; }
  }

  .showcase,
.showcase__top,
.showcase__controls{
  position: relative;
  z-index: 5;
}
.sc-btn{
  position: relative;
  z-index: 6;
}

/* =========================
   SOBRE MI - centrado
   ========================= */
   #sobre .section__head{
    text-align: center;
    margin: 0 auto;
    max-width: 720px;
  }
  
  #sobre .section__head h2{
    margin-bottom: 14px;
  }
  
  #sobre .section__head p{
    margin: 0 auto;
    line-height: 1.7;
    color: var(--muted);
  }
  

  /* =========================
   COMO TRABAJO ICONOS
   ========================= */

.step{
    position: relative;
    padding: 20px;
    text-align: left;
  }
  
  .step__icon{
    width: 50px;
    height: 50px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
  
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.10);
  
    position: relative;
  }
  
  .step__icon::after{
    content:"";
    position:absolute;
    inset:-2px;
    background: linear-gradient(90deg, rgba(0,192,190,.25), rgba(4,107,238,.25), rgba(70,25,239,.25));
    filter: blur(10px);
    opacity:.4;
    z-index:-1;
    border-radius:14px;
  }
  
  .step__icon svg{
    width: 22px;
    height: 22px;
    stroke: #ffffff;
  }
  
  .step span{
    display:block;
    font-weight:700;
    margin-bottom:6px;
  }

  /* =========================
   Animación Apple: steps reveal
   ========================= */
.step{
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .55s ease, transform .55s ease;
  }
  
  .step.is-visible{
    opacity: 1;
    transform: translateY(0);
  }