/* =========================================================
   Johanna Rodríguez — Voz & Locución — Landing moderno
   ========================================================= */

:root{
  --ink: #14121f;
  --ink-soft: #4a4560;
  --bg: #fbf9ff;
  --bg-alt: #f2edff;
  --surface: #ffffff;

  --violet: #7c3aed;
  --violet-deep: #5b21b6;
  --coral: #ff5d73;
  --amber: #ffb238;
  --teal: #14b8a6;

  --gradient-main: linear-gradient(135deg, var(--violet) 0%, var(--coral) 55%, var(--amber) 100%);
  --gradient-soft: linear-gradient(135deg, rgba(124,58,237,.12), rgba(255,93,115,.12));

  --shadow-sm: 0 4px 16px rgba(20,18,31,.06);
  --shadow-md: 0 12px 32px rgba(20,18,31,.10);
  --shadow-lg: 0 24px 60px rgba(91,33,182,.18);

  --radius: 20px;
  --radius-sm: 12px;

  --font-display: "Space Grotesk", sans-serif;
  --font-body: "Manrope", sans-serif;
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
h1,h2,h3{ font-family: var(--font-display); line-height:1.15; margin:0 0 .5em; }
p{ margin:0 0 1em; color: var(--ink-soft); }
.container{ max-width:1180px; margin:0 auto; padding:0 24px; }

.noise-overlay{
  position: fixed; inset:0; pointer-events:none; z-index: 999;
  opacity:.025; mix-blend-mode: multiply;
  background-image: radial-gradient(circle, #000 1px, transparent 1px);
  background-size: 3px 3px;
}

/* ---------- Reveal on scroll ---------- */
.reveal{
  opacity:0;
  transform: translateY(28px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1);
}
.reveal.is-visible{ opacity:1; transform:none; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.55em;
  font-family: var(--font-display);
  font-weight:600; font-size:1rem;
  padding: .95em 1.7em;
  border-radius: 999px;
  border: none; cursor:pointer;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
  white-space: nowrap;
}
.btn-icon{ font-size:.95em; line-height:1; }
.btn-primary{
  background: var(--gradient-main);
  background-size: 180% 180%;
  color:#fff;
  box-shadow: var(--shadow-md);
}
.btn-primary:hover{ transform: translateY(-3px); box-shadow: var(--shadow-lg); background-position: 100% 0; }
.btn-ghost{
  background: var(--surface);
  color: var(--ink);
  border:1.5px solid rgba(20,18,31,.12);
}
.btn-ghost:hover{ transform: translateY(-3px); box-shadow: var(--shadow-sm); border-color: var(--violet); }

/* ---------- Header / Nav ---------- */
.site-header{
  position: fixed; top:0; left:0; right:0; z-index: 500;
  backdrop-filter: blur(14px) saturate(160%);
  background: rgba(251,249,255,.7);
  border-bottom: 1px solid rgba(20,18,31,.06);
}
.navbar{
  max-width:1180px; margin:0 auto; padding: 16px 24px;
  display:flex; align-items:center; justify-content:space-between;
}
.logo{
  font-family: var(--font-display);
  font-weight:700; font-size:1.15rem; letter-spacing:-.01em;
}
.logo span{ color: var(--violet); }
.nav-links{
  list-style:none; display:flex; gap:2.2rem; margin:0; padding:0;
}
.nav-links a{
  font-weight:600; font-size:.95rem; color: var(--ink-soft);
  position:relative; padding:.2em 0;
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:-4px; height:2px; width:0;
  background: var(--gradient-main); transition: width .25s ease;
}
.nav-links a:hover{ color: var(--ink); }
.nav-links a:hover::after{ width:100%; }

.nav-toggle{
  display:none; flex-direction:column; gap:5px;
  background:none; border:none; cursor:pointer; padding:8px;
}
.nav-toggle span{ width:24px; height:2px; background: var(--ink); border-radius:2px; transition: transform .25s ease, opacity .25s ease; }
.nav-toggle.open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero{
  position: relative;
  min-height: 100vh;
  display:flex; align-items:center;
  padding-top: 110px;
  overflow:hidden;
}
.hero-gradient{
  position:absolute; inset:0; z-index:-2;
  background: var(--bg);
  background-image:
    radial-gradient(60% 55% at 85% 10%, rgba(255,93,115,.16), transparent 60%),
    radial-gradient(55% 50% at 10% 90%, rgba(124,58,237,.16), transparent 60%);
}
.hero-blob{
  position:absolute; z-index:-1; border-radius:50%;
  filter: blur(70px); opacity:.55;
  animation: float 12s ease-in-out infinite;
}
.blob-1{ width:420px; height:420px; top:-120px; right:-100px; background: var(--gradient-main); }
.blob-2{ width:320px; height:320px; bottom:-100px; left:-80px; background: linear-gradient(135deg, var(--teal), var(--violet)); animation-delay: -6s; }
@keyframes float{
  0%,100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(-20px, 30px) scale(1.06); }
}

.hero-inner{
  display:grid; grid-template-columns: 1.1fr .9fr; gap:3rem; align-items:center;
}
.eyebrow{
  font-family: var(--font-display); font-weight:600; font-size:.9rem;
  letter-spacing:.14em; text-transform:uppercase; color: var(--violet-deep);
  margin-bottom: .8em;
}
.hero-text h1{
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  font-weight:700; letter-spacing:-.02em; color: var(--ink);
}
.gradient-text{
  background: var(--gradient-main);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-lead{ font-size:1.15rem; max-width:46ch; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:1rem; margin: 1.6rem 0; }
.hero-socials{ display:flex; gap:.9rem; margin-top: 1.4rem; }
.hero-socials a{
  width:42px; height:42px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: var(--surface); box-shadow: var(--shadow-sm);
  transition: transform .25s ease, color .25s ease;
}
.hero-socials a:hover{ transform: translateY(-3px); color: var(--violet); }

.hero-photo{ position:relative; justify-self:center; }
.photo-ring{
  width: min(340px, 80vw); aspect-ratio:1/1; border-radius:50%;
  padding:8px;
  background: var(--gradient-main);
  box-shadow: var(--shadow-lg);
  animation: spin 16s linear infinite;
}
.photo-ring img{
  width:100%; height:100%; object-fit:cover; border-radius:50%;
  border: 5px solid var(--bg);
  animation: spin-reverse 16s linear infinite;
}
@keyframes spin{ to{ transform: rotate(360deg); } }
@keyframes spin-reverse{ to{ transform: rotate(-360deg); } }

.floating-chip{
  position:absolute;
  background: var(--surface); box-shadow: var(--shadow-md);
  border-radius: 999px; padding:.6em 1.1em;
  font-family: var(--font-display); font-weight:600; font-size:.85rem;
  animation: bob 5s ease-in-out infinite;
}
.chip-1{ top:6%; left:-6%; }
.chip-2{ bottom:8%; right:-10%; animation-delay: -2.5s; }
@keyframes bob{ 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-10px);} }

.scroll-cue{
  position:absolute; bottom:28px; left:50%; transform:translateX(-50%);
  width:26px; height:42px; border-radius:14px; border:2px solid rgba(20,18,31,.25);
  display:flex; justify-content:center; padding-top:6px;
}
.scroll-cue span{ width:4px; height:8px; border-radius:2px; background: var(--violet); animation: cue 1.6s ease-in-out infinite; }
@keyframes cue{ 0%{ transform: translateY(0); opacity:1;} 70%{ transform: translateY(14px); opacity:0;} 100%{ opacity:0;} }

/* ---------- Sections ---------- */
.section{ padding: 7rem 0; }
.section-alt{ background: var(--bg-alt); }
.section-tag{
  font-family: var(--font-display); font-weight:700; font-size:.85rem;
  letter-spacing:.14em; text-transform:uppercase; color: var(--coral);
  margin-bottom: .6em;
}
.section-tag.light{ color: #ffd9df; }
.section h2{ font-size: clamp(1.8rem, 3.4vw, 2.6rem); color: var(--ink); max-width: 20ch; }

.section-grid{
  display:grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; align-items:start;
}
.section-text{ font-size:1.05rem; max-width: 56ch; }
.stat-row{ display:flex; gap:2.4rem; margin-top:2rem; flex-wrap:wrap; }
.stat strong{ display:block; font-family: var(--font-display); font-size:2rem; color: var(--violet-deep); }
.stat span{ font-size:.85rem; color: var(--ink-soft); }

.quote-card{
  background: var(--surface); border-radius: var(--radius);
  padding: 2.4rem; box-shadow: var(--shadow-md);
  position:relative;
}
.quote-mark{ color: var(--violet); opacity:.35; margin-bottom:.4rem; }
.quote-card p{ font-family: var(--font-display); font-size:1.2rem; color: var(--ink); }
.quote-author{ font-weight:600; color: var(--violet-deep); }

/* ---------- Demos ---------- */
.demos-grid{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr));
  gap: 1.6rem; margin-top: 2.4rem;
}
.demo-card{
  background: var(--surface); border-radius: var(--radius);
  padding: 1.8rem; box-shadow: var(--shadow-sm);
  transition: transform .3s ease, box-shadow .3s ease;
}
.demo-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-md); }
.demo-icon{
  width:52px; height:52px; border-radius: var(--radius-sm);
  display:flex; align-items:center; justify-content:center;
  font-size:1.4rem; background: var(--gradient-soft); margin-bottom: 1rem;
}
.demo-card h3{ font-size:1.1rem; color: var(--ink); }
.demo-card p{ font-size:.92rem; }
.demo-card audio{ width:100%; margin-top:.6rem; }

/* ---------- Podcast ---------- */
.podcast-grid{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr));
  gap: 1.4rem; margin-top: 2.4rem;
}
.podcast-card.podcast-extra{
  display:none;
}
.podcast-grid.expanded .podcast-card.podcast-extra{
  display:flex;
}
.podcast-card{
  display:flex; gap:1.1rem; align-items:center;
  background: var(--surface); border-radius: var(--radius-sm);
  padding: 1rem; box-shadow: var(--shadow-sm);
  transition: transform .3s ease, box-shadow .3s ease;
}
.podcast-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); }
.podcast-cover{
  flex: 0 0 64px; width:64px; height:64px; border-radius: 14px;
  display:flex; align-items:center; justify-content:center; font-size:1.5rem; color:#fff;
}
.cover-1{ background: linear-gradient(135deg, var(--violet), var(--coral)); }
.cover-2{ background: linear-gradient(135deg, var(--coral), var(--amber)); }
.cover-3{ background: linear-gradient(135deg, var(--teal), var(--violet)); }
.cover-4{ background: linear-gradient(135deg, var(--amber), var(--violet)); }
.cover-5{ background: linear-gradient(135deg, var(--violet-deep), var(--coral)); }
.cover-6{ background: linear-gradient(135deg, var(--teal), var(--amber)); }
.ep-tag{ font-size:.75rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color: var(--violet-deep); }
.podcast-info h3{ font-size:.98rem; margin:.25em 0 0; color: var(--ink); line-height:1.35; }

.podcast-more-wrap{ display:flex; justify-content:center; margin-top: 2rem; }
#podcastMoreIcon{ transition: transform .25s ease; }
#podcastMoreIcon.rotated{ transform: rotate(180deg); }

.platforms{ margin-top: 4rem; text-align:center; }
.platforms-label{
  font-family: var(--font-display); font-weight:600; font-size:.85rem;
  letter-spacing:.1em; text-transform:uppercase; color: var(--ink-soft);
}
.platform-buttons{ display:flex; flex-wrap:wrap; justify-content:center; gap:.9rem; margin-top:1rem; }
.platform-btn{
  padding:.7em 1.4em; border-radius:999px; font-weight:700; font-size:.9rem;
  box-shadow: var(--shadow-sm); transition: transform .25s ease, box-shadow .25s ease;
}
.platform-btn:hover{ transform: translateY(-3px); box-shadow: var(--shadow-md); }
.platform-btn.spotify{ background:#1DB954; color:#fff; }
.platform-btn.anchor{ background:#8940FA; color:#fff; }
.platform-btn.google{ background:#4285F4; color:#fff; }
.platform-btn.apple{ background:#e9e6f5; color:#a39fc0; cursor:not-allowed; }

/* ---------- Contact / CTA ---------- */
.section-cta{
  background: linear-gradient(135deg, var(--violet-deep), var(--violet) 55%, var(--coral));
  position:relative; overflow:hidden;
}
.cta-inner{ text-align:center; max-width: 720px; }
.section-cta h2{ color:#fff; margin-left:auto; margin-right:auto; }
.section-text.light{ color: rgba(255,255,255,.85); margin-left:auto; margin-right:auto; }

.contact-grid{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
  gap:1.2rem; margin-top:2.4rem; text-align:left;
}
.contact-card{
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25);
  border-radius: var(--radius-sm); padding:1.4rem;
  display:flex; flex-direction:column; gap:.3rem;
  backdrop-filter: blur(6px);
  transition: transform .25s ease, background .25s ease;
  color:#fff;
}
.contact-card:hover{ transform: translateY(-5px); background: rgba(255,255,255,.2); }
.contact-icon{ font-size:1.5rem; }
.contact-label{ font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; opacity:.75; }
.contact-value{ font-weight:700; word-break: break-word; }

/* ---------- Footer ---------- */
.site-footer{ padding: 2.2rem 0; background: var(--ink); }
.footer-inner{ text-align:center; }
.footer-inner span{ color: rgba(255,255,255,.6); font-size:.85rem; }

/* ---------- Responsive ---------- */
@media (max-width: 900px){
  .hero-inner{ grid-template-columns: 1fr; text-align:center; }
  .hero-lead{ margin-left:auto; margin-right:auto; }
  .hero-actions, .hero-socials{ justify-content:center; }
  .hero-photo{ order:-1; }
  .section-grid{ grid-template-columns: 1fr; }
  .floating-chip{ display:none; }
}

@media (max-width: 720px){
  .nav-links{
    position:fixed; top:70px; left:16px; right:16px;
    flex-direction:column; gap:0;
    background: var(--surface); border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: .6rem;
    transform: translateY(-16px); opacity:0; pointer-events:none;
    transition: transform .25s ease, opacity .25s ease;
  }
  .nav-links.open{ transform:none; opacity:1; pointer-events:auto; }
  .nav-links li{ width:100%; }
  .nav-links a{ display:block; padding: .9rem 1rem; }
  .nav-toggle{ display:flex; }
}

@media (max-width: 480px){
  .section{ padding: 4.5rem 0; }
  .hero{ padding-top: 130px; }
}