/* =========
   Fiorela Linktree — beige predominante, rosa suave, negro elegante
   Tipografía: Quicksand — 100% responsivo
========== */

:root{
  /* Claro */
  --bg: #F4E9DC;
  --bg-grad1: rgba(248,191,199,0.18);
  --bg-grad2: rgba(244,233,220,0.45);
  --fg: #1A1A1A;
  --muted:#5A5A5A;
  --rose:#F8BFC7;
  --rose-2:#F3A7B3;
  --card:#FAF3ED;
  --card-border: rgba(0,0,0,.06);
  --accent:#F8BFC7;
  --shadow: 0 10px 24px rgba(248,191,199,0.28);
  --radius: 20px;
  --maxw: 1040px;
  --success:#22c55e;
}
:root.dark{
  /* Oscuro Femenino */
  --bg: #151318;
  --bg-grad1: rgba(247,169,183,0.22);
  --bg-grad2: rgba(75,54,74,0.40);
  --fg: #F6EDEA;
  --muted:#DCCFD0;
  --card:#1E1A22;
  --card-border: rgba(255,255,255,0.08);
  --accent:#F3B0BE;
  --rose:#F3B0BE;
  --rose-2:#DFA0B2;
  --shadow: 0 14px 30px rgba(0,0,0,0.45);
  --success:#37d27a;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Quicksand', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:
    radial-gradient(1000px 700px at 80% -10%, var(--bg-grad1), transparent 40%),
    radial-gradient(800px 600px at 0% 100%, var(--bg-grad2), transparent 40%),
    var(--bg);
  color:var(--fg);
  overflow-x:hidden;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  transition: background .5s ease, color .5s ease;
}

.container{ width:min(var(--maxw), 92%); margin-inline:auto; padding: clamp(16px, 3vw, 32px) 0 72px; position:relative; }

/* Header */
.profile{
  display:grid; grid-template-columns: 100px 1fr; gap:18px; align-items:center;
  margin: clamp(8px, 2vw, 24px) 0 12px;
}
.avatar-wrap{position:relative}
.avatar{
  width:100px;height:100px;border-radius:50%;
  border:4px solid var(--card);
  box-shadow: 0 8px 24px rgba(0,0,0,.15), 0 0 0 8px color-mix(in srgb, var(--rose) 22%, transparent);
  object-fit:cover;background:#ddd;
}
.online-dot{ position:absolute;right:6px;bottom:8px;width:14px;height:14px;border-radius:50%;background:#31d0aa;border:2px solid var(--card) }
.title .brand{ margin:0 0 6px; font-weight:700; font-size: clamp(1.6rem, 2.5vw + 0.6rem, 2.6rem); letter-spacing:.2px }
.bio{ margin:.3rem 0 10px; color:var(--muted); font-size:clamp(.95rem, 1.2vw, 1.05rem) }

/* Redes */
.socials{ display:flex; gap:10px; align-items:center; flex-wrap:wrap }
.social-btn{
  width:44px;height:44px;border-radius:999px;background: var(--card);
  display:grid; place-items:center; border:1px solid var(--card-border);
  box-shadow: var(--shadow); transition: transform .12s ease, box-shadow .2s ease, background .2s ease, opacity .2s ease;
  text-decoration:none; color:inherit;
}
.social-btn:hover{ transform: translateY(-2px) }
.social-btn:active{ transform: translateY(0) }
.social-btn:focus-visible{ outline:3px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset:2px }
.ico{ display:inline-grid; place-items:center; width:22px; height:22px }
.ico svg{ width:22px; height:22px; display:block }

/* Acciones */
.actions{ grid-column: 1 / -1; display:flex;gap:10px;align-items:center;margin-top:6px }
.btn{ border:none;border-radius:999px;padding:.75rem 1.1rem;cursor:pointer; font-weight:700;transition: transform .12s ease, box-shadow .2s ease, background .2s ease, opacity .2s ease; min-height:44px }
.btn.ghost{ background: transparent; color: var(--fg); border:1px solid var(--card-border) }

/* Secciones */
.section{ margin-top: 26px }
.section-title{ font-size: clamp(1.05rem, 1.2vw, 1.2rem); color: var(--muted); margin: 10px 0 6px }

/* Links (tarjetas) */
.links{ display:grid; gap:14px; margin: clamp(12px, 2.5vw, 24px) 0; grid-template-columns: 1fr }
@media (min-width: 640px){
  .links{ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) }
  .profile{ grid-template-columns: 110px 1fr auto }
  .avatar{ width:110px;height:110px }
  .actions{ grid-column: auto; margin-top:0 }
}
@media (min-width: 1024px){
  :root{ --maxw: 1120px }
  .avatar{ width:120px;height:120px }
}

.card{
  display:grid; grid-template-columns: 56px 1fr auto 20px; gap:14px; align-items:center;
  text-decoration:none; color:var(--fg); background:var(--card); border-radius: var(--radius);
  padding:16px; box-shadow: var(--shadow); position:relative; overflow:hidden;
  border:1px solid var(--card-border); min-height: 64px;
}
.icon.icon-logo{
  width:56px;height:56px;border-radius:16px;background: #fff;
  display:grid;place-items:center; border:1px solid var(--card-border); overflow:hidden;
}
.icon.icon-logo > *{ width:70%; height:70%; object-fit:contain; display:block }
.card .text .title{display:block;font-size:clamp(1rem, 1.2vw, 1.1rem)}
.card .text .subtitle{display:block;color:var(--muted);font-size:clamp(.9rem, 1vw, .95rem)}
.card .chip{
  padding:.35rem .6rem; border-radius:999px; font-size:.78rem; font-weight:700;
  border:1px solid var(--card-border); color:#1A1A1A;
  background: linear-gradient(135deg, var(--rose), var(--rose-2));
  display:none;
}
.card.copy .chip{ display:inline-block }
.card .arrow{opacity:.55;transition: transform .2s ease}
.card.link:hover .arrow{transform: translateX(4px)}
.card::after{
  content:""; position:absolute; inset:auto -40% 0 auto; height:40px; width:160px; 
  background: radial-gradient(60px 40px at 50% 50%, rgba(255,255,255,.5), transparent 65%);
  transform: translateX(-100%); opacity:.0; transition: transform .5s ease, opacity .5s ease;
}
.card.link:hover::after{transform: translateX(120%); opacity:.5}

/* Ripple */
.card .ripple{ position:absolute; border-radius:50%; transform: scale(0); animation: ripple .6s ease-out; background: color-mix(in srgb, var(--rose) 35%, transparent); pointer-events:none }
@keyframes ripple { to { transform: scale(18); opacity: 0; } }

/* Toast */
#toast{
  position: fixed; left: 50%; bottom: 24px;
  transform: translateX(-50%) translateY(20px);
  background: var(--success); color: #fff; padding: .65rem 1rem; border-radius: 999px;
  font-weight: 700; box-shadow: 0 10px 24px rgba(0,0,0,.20); opacity: 0; pointer-events: none;
  transition: opacity .25s ease, transform .25s ease; z-index: 9999;
}
#toast.show{ opacity: 1; transform: translateX(-50%) translateY(0) }

.subtitle.copied{ color: var(--success) !important; font-weight: 700 }

/* Footer & canvas */
.footer{margin-top:28px;color:var(--muted);text-align:center}
#bg-ornaments{position:fixed; inset:0; z-index:-1}

/* Accesibilidad */
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important; scroll-behavior:auto !important}
}

/* Mobile estrecho */
@media (max-width: 360px){
  .card{ grid-template-columns: 48px 1fr auto 16px; padding:14px }
  .icon.icon-logo{ width:48px;height:48px;border-radius:14px }
}