/* Modelo 3 — revisado: logo grande, sin dock, orden de botones y título de redes */
:root{
  --fuchsia-900:#3F0B28;
  --fuchsia-800:#6A0D3A;
  --fuchsia-700:#AD1457;
  --fuchsia-600:#C2185B;
  --fuchsia-500:#D81B60;
  --rose-300:#E57399;
  --rose-200:#E8A2B8;
  --rose-100:#F6D6E1;
  --ink:#232323;
  --muted:#585858;
  --card:#ffffff;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--ink); font-family:"Cormorant", serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  background:
    radial-gradient(1200px 760px at 110% -20%, var(--fuchsia-600) 0%, transparent 60%),
    radial-gradient(980px 600px at -10% 15%, var(--fuchsia-500) 0%, transparent 55%),
    linear-gradient(180deg, #fff, var(--rose-100));
}

/* HERO */
.hero{ position:relative; padding: clamp(20px,5vw,56px) clamp(16px,4vw,40px); }
.hero-inner{
  width:min(1100px,100%); margin:0 auto;
  display:grid; grid-template-columns:1.1fr 1fr; align-items:center;
  gap: clamp(16px,3vw,32px);
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(246,214,225,.65));
  border:1px solid rgba(0,0,0,.05); border-radius:28px;
  padding: clamp(18px,4vw,36px); box-shadow:0 24px 48px rgba(58,7,31,.12);
}
.brand{ text-align:center; }
.logo{ width: clamp(120px, 18vw, 180px); height:auto; } /* más grande */
.name{
  font-family:"Yeseva One", serif; font-size: clamp(30px,5.2vw,46px);
  margin:6px 0 0; color: var(--fuchsia-900); letter-spacing:.3px;
}
.role{ font-family:"Gilda Display", serif; margin:6px 0 0; color:var(--muted); font-size: clamp(15px,2.6vw,20px); }
.role .mk{ display:block; color: var(--fuchsia-700); font-weight:600; letter-spacing:.6px; }

.portrait{ display:flex; justify-content:center; }
.ring{
  width:min(360px,100%); aspect-ratio:1/1; border-radius:28px; padding:12px;
  background: linear-gradient(135deg, var(--rose-300), var(--rose-100));
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.04), 0 16px 36px rgba(58,7,31,.16);
}
.ring img{ width:100%; height:100%; object-fit:cover; border-radius:20px; display:block; }

/* Intro */
.intro{ width:min(900px,100%); margin: clamp(12px,3vw,22px) auto 0; text-align:center; }
.intro-title{ font-family:"Yeseva One", serif; color:var(--fuchsia-700); font-size: clamp(22px,4.8vw,32px); margin:0; }
.intro-text{ font-family:"Cormorant Infant", serif; font-size: clamp(16px,3.6vw,20px); color:#333; margin:8px auto 0; }

/* Actions */
.actions{
  width:min(980px,100%); margin: clamp(14px,3.2vw,24px) auto 0;
  display:grid; grid-template-columns: repeat(3, minmax(180px,1fr));
  gap: clamp(10px,2vw,16px);
}
.btn{
  --h: clamp(46px,6vw,56px);
  display:grid; place-items:center; height:var(--h);
  border-radius:14px; text-decoration:none;
  font-family:"Poppins", sans-serif; font-weight:700; font-size: clamp(16px,2.6vw,20px); letter-spacing:.3px;
  border:1px solid rgba(0,0,0,.05); color:#fff;
  background: linear-gradient(180deg, var(--fuchsia-700), var(--fuchsia-500));
  box-shadow:0 14px 26px rgba(58,7,31,.18); transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn:hover{ transform: translateY(-2px); box-shadow:0 18px 32px rgba(58,7,31,.22); filter:brightness(1.03); }

/* Socials */
.socials{
  width:min(900px,100%); margin: clamp(16px,3.5vw,26px) auto 0; text-align:center;
  background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:20px; padding: clamp(12px,2.6vw,18px);
  box-shadow:0 12px 22px rgba(58,7,31,.12);
}
.social-title{ font-family:"Cormorant", serif; font-weight:600; color:var(--fuchsia-900); margin:0 0 8px 0; font-size: clamp(18px,3.2vw,22px); }
.icons{ display:flex; justify-content:center; gap:16px; }
.icon{ width:48px; height:48px; display:inline-grid; place-items:center; border-radius:50%; background:#fff; border:1px solid rgba(0,0,0,.06); box-shadow:0 8px 18px rgba(58,7,31,.14); transition: transform .15s ease, box-shadow .15s ease; }
.icon img{ width:28px; height:28px; object-fit:contain; border-radius:50%; }
.icon:hover{ transform: translateY(-2px); box-shadow:0 12px 22px rgba(58,7,31,.18); }

/* Footer */
.footer{ text-align:center; padding: clamp(14px,3vw,22px) 0; }
.slogan{ font-family:"Parisienne", cursive; color:var(--fuchsia-700); font-size: clamp(22px,6vw,32px); margin:6px 0 8px; }
.distributor-link{ font-family:"Cormorant", serif; color:#444; text-decoration:none; font-size: clamp(14px,2.6vw,18px); }
.distributor-link:hover{ text-decoration:underline; }

/* Responsive */

@media (max-width: 960px){
  .hero-inner{ grid-template-columns:1fr; }
  .brand{ order:1; }
  .portrait{ order:2; }
  .ring{ width:min(320px,88%); margin:0 auto; }
  .actions{ grid-template-columns:1fr; }

  /* Mejora de legibilidad: tarjeta blanca para el texto de presentación */
  .intro{
    margin-top: 26px;
    padding: 14px 16px;
    background: rgba(255,255,255,.98);
    border-radius: 16px;
    box-shadow: 0 8px 18px rgba(58,7,31,.08);
  }
}