/* ── TOKENS ─────────────────────────────────────────── */
    :root {
      --navy:        #0C1A33;
      --gold:        #C8973D;
      --gold-text:   #C8973D;
      --gold-light:  #E2B86A;
      --cream:       #FEF8EF;
      --white:       #FFFFFF;
      --bg:          #080E1E;
      --surface:     rgba(18,30,60,0.70);
      --text:        #EEF2FF;
      --text-dim:    rgba(238,242,255,0.62);
      --border:      rgba(255,255,255,0.10);
      --radius-full: 999px;
      --tr: 0.30s cubic-bezier(.4,0,.2,1);
    }
    [data-theme="light"] {
      --gold-text:#7F5A19;
      --bg:      var(--cream);
      --surface: rgba(255,255,255,0.82);
      --text:    #0C1A33;
      --text-dim:rgba(12,26,51,0.70);
      --border:  rgba(200,151,61,0.18);
    }

    *,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
    html { font-size:16px; }
    body {
      font-family: 'Outfit', sans-serif;
      background-color: var(--bg);
      color: var(--text);
      min-height: 100vh;
      overflow-x: hidden;
      transition: background-color var(--tr), color var(--tr);
    }
    /* El cursor del sistema solo se oculta cuando js/comun.js ya ha activado el cursor personalizado (solo con ratón) */
    html.has-cursor, html.has-cursor * { cursor:none !important; }
    a { text-decoration:none; color:inherit; }
    button { font-family:inherit; }
    img { max-width:100%; display:block; }

    /* ── CURSOR ─────────────────────────────────────────── */
    #cursor-dot {
      position:fixed; width:8px; height:8px;
      background:var(--gold); border-radius:50%;
      pointer-events:none; z-index:99999;
      left:-20px; top:-20px; transform:translate(-50%,-50%);
    }
    #cursor-ring {
      position:fixed; width:34px; height:34px;
      border:2px solid var(--gold); border-radius:50%;
      pointer-events:none; z-index:99998;
      left:-20px; top:-20px; transform:translate(-50%,-50%);
      opacity:.50; transition:width .14s,height .14s,opacity .14s;
    }
    body.ch #cursor-ring { width:48px; height:48px; opacity:.28; }


    /* ── BACKGROUND ─────────────────────────────────────── */
    /* Static bg — no animations, no will-change, no backdrop-filter */
    .bg-image {
      position:fixed; inset:0;
      background: url('../imagenes/portada_cachorro.webp') center/cover no-repeat;
      filter:brightness(0.28) saturate(0.5);
      z-index:0;
    }
    [data-theme="light"] .bg-image { filter:brightness(0.55) saturate(0.4); }

    .bg-overlay {
      position:fixed; inset:0;
      background: linear-gradient(160deg, rgba(8,14,30,.82) 0%, rgba(8,14,30,.60) 60%, rgba(200,151,61,.10) 100%);
      z-index:1;
    }
    [data-theme="light"] .bg-overlay {
      background: linear-gradient(160deg, rgba(254,248,239,.90) 0%, rgba(243,234,216,.80) 100%);
    }

    /* Floating paw particles — pure CSS, no JS will-change */
    .paw-p {
      position:fixed; pointer-events:none; z-index:2;
      color:rgba(200,151,61,.14); animation:floatPaw linear infinite;
    }
    @keyframes floatPaw{0%{transform:translateY(110vh) rotate(0deg);opacity:0}10%{opacity:1}90%{opacity:.4}100%{transform:translateY(-10vh) rotate(280deg);opacity:0}}

    /* ── NAVBAR — NO backdrop-filter ───────────────────── */
    .navbar {
      position:fixed; top:0; left:0; right:0; z-index:1000;
      display:flex; align-items:center; justify-content:space-between;
      padding:12px 24px;
      background:rgba(8,14,30,0.94);
      border-bottom:1px solid rgba(255,255,255,.06);
      /* NO backdrop-filter */
    }
    [data-theme="light"] .navbar {
      background:rgba(255,255,255,0.96);
      border-bottom-color:rgba(200,151,61,0.12);
    }
    .navbar-left { display:flex; align-items:center; gap:12px; }
    .nav-back {
      display:inline-flex; align-items:center; gap:7px;
      font-size:.84rem; font-weight:600; color:var(--text-dim);
      padding:6px 13px; border-radius:var(--radius-full);
      border:1px solid var(--border);
      transition:color var(--tr),background var(--tr),border-color var(--tr);
    }
    .nav-back:hover { color:var(--gold); background:rgba(200,151,61,.09); border-color:rgba(200,151,61,.28); }
    .nav-back i { font-size:.76rem; }
    .nav-brand {
      font-family:'Cormorant Garamond',serif;
      font-size:1.1rem; font-weight:600; color:var(--text); letter-spacing:.01em;
    }
    .navbar-right { display:flex; align-items:center; gap:8px; }
    .icon-btn {
      width:34px; height:34px; border-radius:50%;
      border:1.5px solid var(--border); background:transparent;
      color:var(--text-dim); display:flex; align-items:center; justify-content:center;
      font-size:.84rem; font-weight:700; letter-spacing:.02em;
      transition:background var(--tr),color var(--tr),border-color var(--tr);
    }
    .icon-btn:hover { background:rgba(200,151,61,.12); color:var(--gold); border-color:rgba(200,151,61,.38); }

    /* ── MAIN CONTENT ───────────────────────────────────── */
    .page-wrap {
      position:relative; z-index:10;
      min-height:100vh;
      display:flex; flex-direction:column; align-items:center;
      padding:100px 20px 60px;
    }

    /* ── PROFILE CARD ───────────────────────────────────── */
    .profile-card {
      display:flex; flex-direction:column; align-items:center; gap:16px;
      margin-bottom:36px; text-align:center;
      opacity:0; transform:translateY(22px);
      animation:fadeUp .65s .25s cubic-bezier(.4,0,.2,1) forwards;
    }
    @keyframes fadeUp { to{opacity:1;transform:translateY(0)} }

    .avatar-wrap { position:relative; width:104px; height:104px; }
    .avatar-ring {
      position:absolute; inset:-4px; border-radius:50%;
      background:conic-gradient(var(--gold), var(--gold-light), #4A84CC, var(--gold));
      animation:spinRing 8s linear infinite;
      /* will-change only here — single rotating element, GPU handles it cleanly */
      will-change:transform;
    }
    @keyframes spinRing { to{transform:rotate(360deg)} }
    .avatar-img {
      position:absolute; inset:4px; border-radius:50%;
      overflow:hidden; background:var(--navy);
    }
    .avatar-img img { width:100%; height:100%; object-fit:cover; }
    .paw-badge {
      position:absolute; bottom:-3px; right:-3px;
      width:28px; height:28px; border-radius:50%;
      background:linear-gradient(135deg,var(--gold),var(--gold-light));
      display:flex; align-items:center; justify-content:center; font-size:.9rem;
      border:2px solid var(--bg); animation:pawPop .4s .9s cubic-bezier(.34,1.56,.64,1) both;
    }
    @keyframes pawPop { from{transform:scale(0)} to{transform:scale(1)} }

    .profile-name {
      font-family:'Cormorant Garamond',serif;
      font-size:1.9rem; font-weight:700; color:var(--text); line-height:1.1;
    }
    .profile-handle { font-size:.88rem; color:var(--gold); font-weight:500; }
    .profile-bio { font-size:.88rem; color:var(--text-dim); max-width:300px; line-height:1.6; }

    .mini-stats {
      display:flex; gap:20px; padding:12px 22px;
      background:rgba(255,255,255,.06); border:1px solid var(--border);
      border-radius:var(--radius-full);
    }
    [data-theme="light"] .mini-stats { background:rgba(200,151,61,.08); border-color:rgba(200,151,61,.18); }
    .mini-stat { text-align:center; }
    .mini-stat-num { font-family:'Cormorant Garamond',serif; font-size:1.2rem; font-weight:700; color:var(--gold); line-height:1; display:block; }
    .mini-stat-lbl { font-size:.68rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--text-dim); }

    /* ── SOCIAL LINK BUTTONS ────────────────────────────── */
    .links-container {
      display:flex; flex-direction:column; gap:13px;
      width:100%; max-width:460px;
    }

    /*
      Each button uses translucent brand colors + real FA icon.
      Background is a soft gradient inspired by the brand palette
      but at ~15-20% opacity so it's not overwhelming.
      Border uses the brand color at ~28% opacity.
      On hover: opacity increases slightly + subtle glow.
    */
    .social-btn {
      display:flex; align-items:center; gap:16px;
      padding:15px 22px; border-radius:16px; border:none;
      font-family:'Outfit',sans-serif; font-size:1rem; font-weight:600;
      color:var(--text); text-decoration:none;
      position:relative; overflow:hidden;
      opacity:0; transform:translateY(18px);
      transition:transform var(--tr), box-shadow var(--tr), filter var(--tr);
    }
    .social-btn.visible { opacity:1; transform:translateY(0); }
    .social-btn:hover { transform:translateY(-3px); filter:brightness(1.08); }

    /* Icon container */
    .social-btn-icon {
      width:42px; height:42px; border-radius:11px; flex-shrink:0;
      display:flex; align-items:center; justify-content:center;
      font-size:1.3rem;
    }
    .social-btn-text { flex:1; }
    .social-btn-sub { font-size:.76rem; font-weight:400; opacity:.65; display:block; }
    .social-btn-arrow { font-size:.8rem; opacity:.45; transition:opacity var(--tr),transform var(--tr); }
    .social-btn:hover .social-btn-arrow { opacity:.85; transform:translateX(4px); }

    /* Shimmer sweep on hover */
    .social-btn::after {
      content:''; position:absolute; top:0; left:-100%; width:60%; height:100%;
      background:linear-gradient(90deg,transparent,rgba(255,255,255,.10),transparent);
      transition:left .5s ease; pointer-events:none;
    }
    .social-btn:hover::after { left:130%; }

    /* ── WhatsApp ───────── */
    .btn-wa {
      background:linear-gradient(135deg, rgba(37,211,102,.18) 0%, rgba(18,140,60,.14) 100%);
      border:1px solid rgba(37,211,102,.28);
      box-shadow:0 4px 20px rgba(37,211,102,.08);
    }
    .btn-wa:hover { box-shadow:0 8px 30px rgba(37,211,102,.22); }
    .btn-wa .social-btn-icon { background:rgba(37,211,102,.20); color:#25D366; }

    /* ── Instagram ──────── */
    .btn-ig {
      background:linear-gradient(135deg, rgba(225,48,108,.16) 0%, rgba(131,56,236,.14) 55%, rgba(253,186,0,.10) 100%);
      border:1px solid rgba(225,48,108,.26);
      box-shadow:0 4px 20px rgba(225,48,108,.07);
    }
    .btn-ig:hover { box-shadow:0 8px 30px rgba(225,48,108,.20); }
    .btn-ig .social-btn-icon {
      background:linear-gradient(135deg, rgba(225,48,108,.28), rgba(131,56,236,.28));
      color:#F77737;
    }

    /* ── Facebook ───────── */
    .btn-fb {
      background:linear-gradient(135deg, rgba(24,119,242,.17) 0%, rgba(10,80,180,.13) 100%);
      border:1px solid rgba(24,119,242,.26);
      box-shadow:0 4px 20px rgba(24,119,242,.07);
    }
    .btn-fb:hover { box-shadow:0 8px 30px rgba(24,119,242,.20); }
    .btn-fb .social-btn-icon { background:rgba(24,119,242,.22); color:#1877F2; }

    /* ── TikTok ─────────── */
    .btn-tt {
      background:linear-gradient(135deg, rgba(105,201,208,.14) 0%, rgba(238,29,82,.12) 50%, rgba(1,1,1,.18) 100%);
      border:1px solid rgba(105,201,208,.22);
      box-shadow:0 4px 20px rgba(105,201,208,.06);
    }
    .btn-tt:hover { box-shadow:0 8px 30px rgba(105,201,208,.18); }
    .btn-tt .social-btn-icon {
      background:rgba(0,0,0,.30);
      /* TikTok dual-tone icon */
      background-clip:padding-box;
      color:#69C9D0;
      text-shadow:2px 2px 0 #EE1D52, -1px -1px 0 #69C9D0;
    }

    /* ── Website ────────── */
    .btn-web {
      background:linear-gradient(135deg, rgba(200,151,61,.17) 0%, rgba(226,184,106,.10) 100%);
      border:1px solid rgba(200,151,61,.28);
      box-shadow:0 4px 20px rgba(200,151,61,.07);
    }
    .btn-web:hover { box-shadow:0 8px 30px rgba(200,151,61,.22); }
    .btn-web .social-btn-icon { background:rgba(200,151,61,.22); color:var(--gold); }

    /* ── FOOTER ─────────────────────────────────────────── */
    .qr-card { margin:26px auto 0; max-width:420px; text-align:center; padding:20px 18px; border-radius:18px; border:1px solid var(--border, rgba(200,151,61,.25)); background:rgba(255,255,255,.04); }
    [data-theme="light"] .qr-card { background:rgba(200,151,61,.06); }
    .qr-card img { display:block; margin:0 auto 12px; width:170px; height:auto; aspect-ratio:1/1; border-radius:16px; background:#fff; box-shadow:0 8px 24px rgba(0,0,0,.25); }
    .qr-card span { display:block; font-size:.85rem; line-height:1.5; color:var(--text-dim); }
    .page-footer {
      position:relative; z-index:10;
      text-align:center; padding-top:32px;
      opacity:0; animation:fadeUp .6s 1.3s both;
    }
    .page-footer p { font-size:.78rem; color:var(--text-dim); }
    .page-footer a { color:var(--gold-text); opacity:1; text-decoration:underline; text-underline-offset:3px; }
    .page-footer a:hover { opacity:1; }

/* posiciones de las huellas flotantes (antes eran estilos en línea) */
.pp1{left:8%;font-size:16px;animation-duration:14s;animation-delay:-3s;opacity:.14}
.pp2{left:22%;font-size:11px;animation-duration:18s;animation-delay:-9s;opacity:.10}
.pp3{left:68%;font-size:14px;animation-duration:12s;animation-delay:-5s;opacity:.13}
.pp4{left:82%;font-size:10px;animation-duration:16s;animation-delay:-12s;opacity:.09}
.pp5{left:45%;font-size:13px;animation-duration:20s;animation-delay:-7s;opacity:.11}

/* onda al pulsar un botón (antes se inyectaba desde JS) */
@keyframes ripple{to{transform:scale(2.2);opacity:0}}
html.lang-pending body{visibility:hidden}