/* ── TOKENS ── */
    :root {
      --wine:       #5C1A2B;
      --wine-mid:   #7A2238;
      --wine-soft:  rgba(92, 26, 43, 0.07);
      --wine-light: rgba(92, 26, 43, 0.15);
      --bg:         #FDFCFB;
      --white:      #FFFFFF;
      --text:       #1A1218;
      --muted:      #6B5E65;
      --faint:      #B0A4A8;
      --border:     #EAE4E7;
      --serif:      'Playfair Display', Georgia, serif;
      --sans:       'Inter', sans-serif;
    }

    /* ── RESET ── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body {
      font-family: var(--sans);
      background: var(--bg);
      color: var(--text);
      -webkit-font-smoothing: antialiased;
      min-height: 100vh;
      display: flex;
      align-items: flex-start;
      justify-content: center;
      padding: 48px 20px 64px;
    }
    a { text-decoration: none; color: inherit; }

    /* ── ANIMATIONS ── */
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(18px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .f1 { animation: fadeUp 0.6s 0.05s both; }
    .f2 { animation: fadeUp 0.6s 0.15s both; }
    .f3 { animation: fadeUp 0.6s 0.22s both; }
    .f4 { animation: fadeUp 0.6s 0.30s both; }
    .f5 { animation: fadeUp 0.6s 0.38s both; }
    .f6 { animation: fadeUp 0.6s 0.46s both; }
    .f7 { animation: fadeUp 0.6s 0.54s both; }

    /* ── CONTAINER ── */
    .page {
      width: 100%;
      max-width: 420px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    /* ── PROFILE ── */
    .profile-photo-wrap {
      position: relative;
      width: 96px;
      height: 96px;
      margin-bottom: 20px;
    }
    .profile-photo-wrap::before {
      content: '';
      position: absolute;
      inset: -3px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--wine), var(--wine-mid), #C9667A);
      z-index: 0;
    }
    .profile-photo-wrap::after {
      content: '';
      position: absolute;
      inset: -1px;
      border-radius: 50%;
      background: var(--bg);
      z-index: 1;
      /* inner ring gap */
      inset: 2px;
    }
    .profile-photo {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      object-fit: cover;
      object-position: center 15%;
      display: block;
      position: relative;
      z-index: 2;
    }

    /* ── NAME + BIO ── */
    .profile-name {
      font-family: var(--serif);
      font-size: 24px;
      font-weight: 500;
      letter-spacing: -0.01em;
      color: var(--text);
      margin-bottom: 10px;
      text-align: center;
    }
    .profile-name em {
      font-style: italic;
      font-weight: 400;
      color: var(--wine);
    }

    .profile-bio {
      font-size: 13.5px;
      color: var(--muted);
      line-height: 1.75;
      text-align: center;
      max-width: 320px;
      font-weight: 300;
      margin-bottom: 24px;
    }

    /* ── LOCATION PILL ── */
    .location-pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 5px 14px;
      background: var(--wine-soft);
      border: 1px solid var(--wine-light);
      border-radius: 9999px;
      font-size: 11px;
      font-weight: 500;
      color: var(--wine);
      letter-spacing: 0.03em;
      margin-bottom: 28px;
    }
    .location-pill svg {
      width: 11px;
      height: 11px;
      fill: var(--wine);
      flex-shrink: 0;
    }

    /* ── SOCIAL ROW ── */
    .social-row {
      display: flex;
      gap: 12px;
      margin-bottom: 36px;
    }
    .social-btn {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      border: 1.5px solid var(--border);
      background: var(--white);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: border-color 0.2s, transform 0.2s;
      color: var(--muted);
    }
    .social-btn:hover {
      border-color: var(--wine);
      color: var(--wine);
      transform: translateY(-2px);
    }
    .social-btn svg { width: 18px; height: 18px; fill: currentColor; }

    /* ── SECTION LABEL ── */
    .section-label {
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--faint);
      margin-bottom: 14px;
      align-self: flex-start;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .section-label::before,
    .section-label::after {
      content: '';
      flex: 1;
      height: 1px;
      background: var(--border);
    }
    .section-label::before { width: 0; flex: none; width: 16px; }

    /* ── LINK BUTTONS ── */
    .links-stack {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-bottom: 36px;
    }

    .link-btn {
      width: 100%;
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 16px 20px;
      background: var(--white);
      border: 1.5px solid var(--border);
      border-radius: 14px;
      cursor: pointer;
      transition: border-color 0.2s, transform 0.18s, box-shadow 0.2s;
      position: relative;
      overflow: hidden;
    }
    .link-btn::before {
      content: '';
      position: absolute;
      left: 0; top: 0; bottom: 0;
      width: 3px;
      background: var(--wine);
      opacity: 0;
      transition: opacity 0.2s;
      border-radius: 2px 0 0 2px;
    }
    .link-btn:hover {
      border-color: var(--wine-light);
      transform: translateY(-2px);
      box-shadow: 0 8px 28px rgba(92, 26, 43, 0.1);
    }
    .link-btn:hover::before { opacity: 1; }
    .link-btn:active { transform: translateY(0); }

    /* Icon area */
    .link-icon {
      width: 40px;
      height: 40px;
      border-radius: 10px;
      background: var(--wine-soft);
      border: 1px solid var(--wine-light);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      font-size: 18px;
      transition: background 0.2s;
    }
    .link-btn:hover .link-icon {
      background: rgba(92, 26, 43, 0.12);
    }
    .link-icon svg { width: 20px; height: 20px; }
    .link-icon img { width: 22px; height: 22px; object-fit: contain; border-radius: 5px; }

    /* Text area */
    .link-text { flex: 1; text-align: left; }
    .link-label {
      display: block;
      font-size: 14px;
      font-weight: 500;
      color: var(--text);
      letter-spacing: -0.01em;
    }
    .link-sub {
      display: block;
      font-size: 11px;
      color: var(--faint);
      margin-top: 2px;
      font-weight: 300;
    }

    /* Arrow */
    .link-arrow {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      border: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--faint);
      flex-shrink: 0;
      transition: all 0.2s;
    }
    .link-btn:hover .link-arrow {
      border-color: var(--wine-light);
      color: var(--wine);
      background: var(--wine-soft);
    }
    .link-arrow svg { width: 10px; height: 10px; fill: currentColor; }

    /* ── CTA PRINCIPAL ── */
    .cta-btn {
      width: 100%;
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 18px 22px;
      background: var(--wine);
      border: none;
      border-radius: 14px;
      cursor: pointer;
      transition: transform 0.18s, box-shadow 0.2s, opacity 0.2s;
      margin-bottom: 10px;
    }
    .cta-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 14px 40px rgba(92, 26, 43, 0.3);
    }
    .cta-btn:active { transform: translateY(0); }
    .cta-icon {
      width: 40px;
      height: 40px;
      border-radius: 10px;
      background: rgba(255,255,255,0.12);
      border: 1px solid rgba(255,255,255,0.2);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .cta-icon svg { width: 22px; height: 22px; fill: #fff; }
    .cta-text { flex: 1; text-align: left; }
    .cta-label {
      display: block;
      font-size: 14px;
      font-weight: 600;
      color: #fff;
      letter-spacing: -0.01em;
    }
    .cta-sub {
      display: block;
      font-size: 11px;
      color: rgba(255,255,255,0.55);
      margin-top: 2px;
    }
    .cta-arrow {
      width: 22px; height: 22px;
      border-radius: 50%;
      background: rgba(255,255,255,0.12);
      border: 1px solid rgba(255,255,255,0.2);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .cta-arrow svg { width: 10px; height: 10px; fill: rgba(255,255,255,0.7); }

    /* ── DIAGNÓSTICO CARD ── */
    .diag-card {
      width: 100%;
      background: var(--white);
      border: 1.5px solid var(--border);
      border-radius: 16px;
      padding: 20px;
      margin-bottom: 36px;
      text-align: center;
    }
    .diag-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px 12px;
      background: var(--wine-soft);
      border: 1px solid var(--wine-light);
      border-radius: 9999px;
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--wine);
      margin-bottom: 12px;
    }
    .diag-title {
      font-family: var(--serif);
      font-size: 18px;
      font-weight: 500;
      color: var(--text);
      margin-bottom: 8px;
      letter-spacing: -0.01em;
    }
    .diag-title em { font-style: italic; color: var(--wine); font-weight: 400; }
    .diag-desc {
      font-size: 13px;
      color: var(--muted);
      line-height: 1.7;
      margin-bottom: 16px;
      font-weight: 300;
    }
    .diag-btn {
      width: 100%;
      padding: 13px;
      background: var(--wine);
      color: #fff;
      font-family: var(--sans);
      font-size: 13px;
      font-weight: 500;
      border-radius: 9999px;
      border: none;
      cursor: pointer;
      letter-spacing: 0.01em;
      transition: opacity 0.2s, transform 0.2s;
    }
    .diag-btn:hover { opacity: 0.9; transform: translateY(-1px); }

    /* ── FOOTER ── */
    .page-footer {
      text-align: center;
    }
    .page-footer p {
      font-size: 11px;
      color: var(--faint);
      font-weight: 300;
      margin-bottom: 4px;
    }
    .page-footer strong {
      font-family: var(--serif);
      font-size: 12px;
      font-weight: 500;
      color: var(--wine);
    }