:root{
      --ink:#0b1220; --white:#ffffff;
      --brand-800:#0A2C6E; --brand-700:#0E5AD8; --brand-600:#1787FF; --brand-500:#12C2FF;

      /* Colores (solo iconos de BOTONES) */
      --wa:#25D366;
      --ig1:#515BD4; --ig2:#8134AF; --ig3:#DD2A7B; --ig4:#F58529;
      --maps:#EA4335; --mail:#EA4335;

      /* Fondo */
      --bg-grad: linear-gradient(180deg, var(--brand-700) 0%, var(--brand-600) 40%, var(--brand-500) 100%);
      --bg-radial: radial-gradient(1200px 600px at 50% -10%, rgba(255,255,255,.22), rgba(255,255,255,0) 60%);

      /* Botones */
      --btn-bg:#f8fbff; --btn-border: rgba(23,135,255,.28);
      --btn-shadow:#0b1220; --btn-shadow-offset: 8px;

      --avatar:112px; --radius:16px;
    }

    *{ box-sizing:border-box }
    html,body{ height:100% }

    body{
      margin:0; min-height:100dvh; display:grid; place-items:center; overflow-x:hidden;
      background: var(--bg-radial), var(--bg-grad);
      background-size: 120% 120%, 200% 200%;
      animation: bgShift 16s ease-in-out infinite alternate;
      font-family:'Sora', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Noto Sans", Arial;
      color:#fff; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
    }
    @keyframes bgShift{ to{ background-position: 30% 10%, 100% 100% } }

    .wrap{ width:min(420px, 100vw); padding:28px 18px max(20px, env(safe-area-inset-bottom)); perspective:1000px; }

    /* Avatar */
    .avatar{
      width:var(--avatar); height:var(--avatar); margin:0 auto 12px;
      border-radius:50%; overflow:hidden; background:#fff;
      box-shadow: rgba(0,0,0,.4) 0 2px 4px, rgba(0,0,0,.3) 0 7px 13px -3px, rgba(0,0,0,.2) 0 -3px 0 inset;
      display:grid; place-items:center; transform-style:preserve-3d;
    }
    .avatar img{ width:100%; height:100%; object-fit:cover; transform:scale(1.06) }

    .avatar.coin{ animation: coinIn 1.15s cubic-bezier(.22,.8,.35,1) both }
    @keyframes coinIn{
      0%{ opacity:0; transform: rotateY(0deg) scale(.2); filter:blur(4px) }
      45%{ opacity:1; transform: rotateY(540deg) scale(1.06) }
      70%{ transform: rotateY(720deg) scale(1) }
      100%{ transform: rotateY(720deg) }
    }
    .avatar.coin::after{
      content:""; position:absolute; inset:-30%; transform: translateX(-140%) rotate(20deg);
      background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,.6) 50%, transparent 100%);
      filter: blur(6px); animation: shine 1.1s .1s ease-out forwards;
    }
    @keyframes shine{ to{ transform: translateX(140%) rotate(20deg); opacity:0 } }
    .avatar.float{ animation:bob 5s ease-in-out infinite 1.2s }
    @keyframes bob{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-6px) } }

    /* Titulares */
    h1{
      font-family:'Poppins', system-ui; font-size:24px; margin:8px 0 2px;
      text-align:center; font-weight:800; letter-spacing:.2px; text-shadow:0 1px 0 rgba(0,0,0,.08)
    }
    .sub{ font-family:'Poppins', system-ui; text-align:center; margin:0 0 8px; letter-spacing:2.8px; font-weight:800; font-size:12px; opacity:.96 }

    /* Descripción */
    .desc{ text-align:center; font-size:14.5px; line-height:1.5; opacity:.95; margin:0 auto 18px; max-width:33ch }

    /* Aparición en cascada */
    .fx{ opacity:0; transform: translateY(10px) scale(.98) }
    .fx.in{ animation: rise .6s cubic-bezier(.22,.8,.30,1) forwards }
    @keyframes rise{ to{ opacity:1; transform: translateY(0) scale(1) } }

    /* Botones */
    .links{ display:grid; gap:20px; margin-top:16px }
    .btn{
      position:relative; display:flex; align-items:center; justify-content:center; gap:12px;
      padding:14px 18px; border-radius:999px; text-decoration:none;
      background:var(--btn-bg); color:var(--ink); font-weight:800;
      border:2px solid var(--btn-border);
      box-shadow: var(--btn-shadow-offset) var(--btn-shadow-offset) 0 var(--btn-shadow),
                  0 18px 28px rgba(11,19,33,.18);
      transition: transform .14s ease, box-shadow .14s ease, filter .14s ease;
      overflow:hidden;
    }
    .btn:hover{ filter:saturate(1.04) brightness(1.02) }
    .btn:active,.btn.pressed{
      transform:translate(2px,2px);
      box-shadow: calc(var(--btn-shadow-offset) - 2px) calc(var(--btn-shadow-offset) - 2px) 0 var(--btn-shadow),
                  0 12px 20px rgba(11,19,33,.18);
    }
    .btn:focus-visible{ outline:0; box-shadow: 0 0 0 3px rgba(23,135,255,.35), var(--btn-shadow-offset) var(--btn-shadow-offset) 0 var(--btn-shadow) }
    .btn .ico{
      width:30px; height:30px; display:grid; place-items:center; border-radius:999px;
      border:2px solid rgba(23,135,255,.40); background:transparent; flex:0 0 auto; color: var(--ink);
    }
    .btn .ico svg{ width:16px; height:16px }

    /* Ripple */
    .btn .ripple{
      position:absolute; border-radius:50%; pointer-events:none; width:10px; height:10px;
      background:radial-gradient(circle, rgba(26,108,255,.35) 0%, rgba(26,108,255,0) 70%);
      transform:translate(-50%,-50%) scale(0); animation:rip .6s ease-out forwards; opacity:.9
    }
    @keyframes rip{ to{ transform:translate(-50%,-50%) scale(18); opacity:0 } }

    /* Colores de iconos (solo botones) */
    .btn--wa .ico{ border-color: color-mix(in srgb, var(--wa) 55%, #fff 45%); }
    .btn--wa .ico svg{ color: var(--wa); }
    .btn--ig .ico{ border-color: color-mix(in srgb, var(--ig2) 55%, #fff 45%); }
    .btn--ig .ico svg{ color: var(--ig2); } /* gradiente dentro del SVG también */
    .btn--map .ico{ border-color: color-mix(in srgb, var(--maps) 55%, #fff 45%); }
    .btn--map .ico svg{ color: var(--maps); }
    .btn--mail .ico{ border-color: color-mix(in srgb, var(--mail) 55%, #fff 45%); }
    .btn--mail .ico svg{ color: var(--mail); }

    /* Redes */
    .social{ display:flex; justify-content:center; gap:18px; margin:22px 0 8px }
    .social a{
      position:relative; display:inline-grid; place-items:center; width:44px; height:44px;
      border-radius:999px; color:#fff; text-decoration:none; backdrop-filter: blur(6px);
      background:rgba(255,255,255,.10);
      box-shadow:inset 0 0 0 1px rgba(255,255,255,.28), 0 10px 26px rgba(0,0,0,.25);
      transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease;
    }
    .social a:active,.social a.pressed{ transform:scale(.96) }
    .social a svg{ width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round }

    .note{ text-align:center; font-size:12px; opacity:.85; margin-top:4px }

    @media (hover:hover){
      .btn:hover{
        transform: translate(-1px,-1px);
        filter: saturate(1.06) brightness(1.04);
        box-shadow: calc(var(--btn-shadow-offset) + 2px) calc(var(--btn-shadow-offset) + 2px) 0 var(--btn-shadow),
                    0 22px 32px rgba(11,19,33,.22);
      }
      .btn:hover .ico{ background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.60)) }
      .btn:hover .ico svg{ transform: translateY(-1px) scale(1.08) }
    }

    @media (prefers-reduced-motion: reduce){
      .avatar.float, body{ animation:none }
      .fx{ opacity:1; transform:none }
      .desc .line{ width:auto !important; border-right:0 !important; animation:none !important }
    }

    .avatar.coin.float{
      animation: coinIn 1.15s cubic-bezier(.22,.8,.35,1) both,
                 bob 5s ease-in-out infinite 1.2s;
      will-change: transform;
    }

    /* ===== TYPEWRITER multi-línea ===== */
    .desc .line{
      display:block;
      margin:0 auto 6px;
      white-space:nowrap;
      overflow:hidden;
      width:0;                    /* estado inicial */
      border-right:2px solid transparent;
    }
    .desc .line.typing{
      border-right-color: rgba(255,255,255,.85);
      animation:
        typewriter calc(var(--n)*.035s) steps(var(--n)) 0s forwards,
        blinkingCursor 600ms steps(1,end) infinite;
    }
    /* 👇 Estado final fijo: mantiene la anchura y apaga el cursor */
    .desc .line.done{
      width: calc(var(--n) * 1ch);
      border-right-color: transparent;
      animation: none;
    }
    @keyframes typewriter{ to{ width: calc(var(--n) * 1ch) } }
    @keyframes blinkingCursor{ 50%{ border-right-color: transparent } }