/* ===========================================================
   LyR Eventos — Design tokens
   Paleta muestreada de las piezas de marca reales (brochure,
   fotos promocionales de Lian Showman / DJ Richard Parra).
   =========================================================== */
:root{
  --bg:            #0A0714;
  --bg-soft:       #120B24;
  --surface:       #1B1130;
  --surface-line:  rgba(255,255,255,.08);

  --purple-900:    #1B0D38;
  --purple-700:    #43157B;
  --purple-600:    #5B21B6;
  --purple-500:    #6D34D9;
  --purple-400:    #9C6BF0;
  --purple-glow:   rgba(109,52,217,.45);

  --white:         #FFFFFF;
  --ink:           #F1EDFA;
  --ink-muted:     #B7ACD1;
  --ink-faint:     #83779E;

  --font-display:  'Poppins', 'Segoe UI', sans-serif;
  --font-body:     'Inter', 'Segoe UI', sans-serif;

  --container:     1200px;
  --gap:           clamp(1.25rem, 3vw, 2.5rem);
  --radius-lg:     22px;
  --radius-md:     14px;
  --radius-sm:     8px;

  --ease-out:      cubic-bezier(.16,1,.3,1);
  --dur-fast:      .25s;
  --dur-med:       .6s;
}

/* ===== Reset ===== */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family:inherit; cursor:pointer; }
h1,h2,h3,h4{ font-family:var(--font-display); margin:0; color:var(--white); font-weight:600; }
p{ margin:0; }

.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:clamp(1.25rem,5vw,2.5rem);
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* ===== Utility ===== */
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-family:var(--font-display);
  font-size:.8rem;
  letter-spacing:.02em;
  color:var(--purple-400);
  margin-bottom:.9rem;
}
.eyebrow::before{
  content:"";
  width:22px; height:2px;
  background:linear-gradient(90deg,var(--purple-400),transparent);
  border-radius:2px;
}
.section-head{ max-width:640px; margin-bottom:clamp(2rem,5vw,3.5rem); }
.section-head h2{ font-size:clamp(1.9rem,4vw,2.75rem); line-height:1.15; }
.section-head p{ color:var(--ink-muted); margin-top:.9rem; font-size:1.05rem; }
.section-head.center{ margin-inline:auto; text-align:center; }

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  padding:.9rem 1.9rem;
  border-radius:999px;
  font-family:var(--font-display);
  font-weight:600;
  font-size:.98rem;
  border:1px solid transparent;
  transition:transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
  white-space:nowrap;
}
.btn-primary{
  background:linear-gradient(135deg,var(--purple-500),var(--purple-700));
  color:var(--white);
  box-shadow:0 10px 30px -10px var(--purple-glow);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 16px 36px -8px var(--purple-glow); }
.btn-primary:active{ transform:translateY(0); }
.btn-ghost{
  background:rgba(255,255,255,.04);
  color:var(--white);
  border-color:var(--surface-line);
  backdrop-filter:blur(6px);
}
.btn-ghost:hover{ background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.2); }

/* reveal-on-scroll */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.reveal.is-visible{ opacity:1; transform:none; }
.reveal-stagger > *{ opacity:0; transform:translateY(24px); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.reveal-stagger.is-visible > *{ opacity:1; transform:none; }
.reveal-stagger.is-visible > *:nth-child(1){ transition-delay:.05s; }
.reveal-stagger.is-visible > *:nth-child(2){ transition-delay:.14s; }
.reveal-stagger.is-visible > *:nth-child(3){ transition-delay:.23s; }
.reveal-stagger.is-visible > *:nth-child(4){ transition-delay:.32s; }

/* ===== Ambient glow background ===== */
.glow{
  position:absolute;
  border-radius:50%;
  filter:blur(90px);
  pointer-events:none;
  z-index:0;
}

/* ===========================================================
   Header
   =========================================================== */
.site-header{
  position:fixed; inset:0 0 auto 0;
  z-index:100;
  padding:1.1rem 0;
  transition:background var(--dur-fast) var(--ease-out), padding var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
  border-bottom:1px solid transparent;
}
.site-header.is-scrolled{
  background:rgba(10,7,20,.82);
  backdrop-filter:blur(14px);
  padding:.7rem 0;
  border-color:var(--surface-line);
}
.site-header .container{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; }
.brand img{ height:34px; width:auto; }

.nav-links{ display:flex; align-items:center; gap:2.1rem; }
.nav-links a{
  font-family:var(--font-display);
  font-size:.94rem;
  color:var(--ink-muted);
  position:relative;
  padding:.3rem 0;
  transition:color var(--dur-fast);
}
.nav-links a::after{
  content:"";
  position:absolute; left:0; bottom:-2px;
  width:0; height:2px;
  background:linear-gradient(90deg,var(--purple-400),var(--purple-600));
  transition:width var(--dur-fast) var(--ease-out);
  border-radius:2px;
}
.nav-links a:hover{ color:var(--white); }
.nav-links a:hover::after{ width:100%; }

.header-actions{ display:flex; align-items:center; gap:.8rem; }
.icon-link{
  display:grid; place-items:center;
  width:38px; height:38px;
  border-radius:50%;
  border:1px solid var(--surface-line);
  color:var(--ink-muted);
  transition:all var(--dur-fast) var(--ease-out);
}
.icon-link:hover{ color:var(--white); border-color:var(--purple-400); background:rgba(156,107,240,.12); }

.nav-toggle{
  display:none;
  width:40px; height:40px;
  border-radius:10px;
  border:1px solid var(--surface-line);
  background:rgba(255,255,255,.03);
  color:var(--white);
  align-items:center; justify-content:center;
}

/* Mobile nav */
@media (max-width: 860px){
  .nav-links{
    position:fixed; inset:0 0 0 auto;
    width:min(78vw,340px);
    height:100vh;
    background:var(--bg-soft);
    border-left:1px solid var(--surface-line);
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    gap:1.8rem;
    padding:2rem 2.2rem;
    transform:translateX(100%);
    transition:transform .45s var(--ease-out);
    z-index:120;
  }
  .nav-links.is-open{ transform:translateX(0); }
  .nav-links a{ font-size:1.3rem; }
  .nav-toggle{ display:flex; }
  .nav-backdrop{
    position:fixed; inset:0; background:rgba(5,3,12,.6);
    opacity:0; pointer-events:none; transition:opacity .35s var(--ease-out);
    z-index:110;
  }
  .nav-backdrop.is-open{ opacity:1; pointer-events:auto; }
}

/* ===========================================================
   Hero
   =========================================================== */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  isolation:isolate;
}
.hero-media{ position:absolute; inset:0; z-index:-2; overflow:hidden; }
.hero-media img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.12);
  animation:heroZoom 16s ease-out forwards;
}
@keyframes heroZoom{ to{ transform:scale(1); } }
.hero-media::after{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(0deg, var(--bg) 2%, rgba(10,7,20,.55) 42%, rgba(10,7,20,.35) 65%),
    linear-gradient(100deg, rgba(27,13,56,.75) 0%, transparent 55%);
}
.hero-content{
  position:relative;
  z-index:1;
  padding-block:clamp(6rem,14vw,9rem) clamp(3.5rem,7vw,5.5rem);
  width:100%;
}
.hero-kicker{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--font-display); font-size:.85rem; letter-spacing:.03em;
  color:var(--purple-400); margin-bottom:1.2rem;
  opacity:0; animation:fadeUp .8s var(--ease-out) .3s forwards;
}
.hero-kicker::before{ content:"●"; font-size:.5rem; color:var(--purple-400); }
.hero h1{
  font-size:clamp(2.4rem, 6.4vw, 4.6rem);
  line-height:1.04;
  max-width:16ch;
  opacity:0; animation:fadeUp .9s var(--ease-out) .45s forwards;
}
.hero-sub{
  margin-top:1.5rem;
  max-width:56ch;
  font-size:clamp(1rem,1.6vw,1.15rem);
  color:var(--ink-muted);
  opacity:0; animation:fadeUp .9s var(--ease-out) .62s forwards;
}
.hero-cta{
  margin-top:2.1rem;
  display:flex; flex-wrap:wrap; gap:1rem;
  opacity:0; animation:fadeUp .9s var(--ease-out) .78s forwards;
}
.hero-meta{
  margin-top:3rem;
  display:flex; gap:clamp(1.5rem,4vw,3rem); flex-wrap:wrap;
  opacity:0; animation:fadeUp .9s var(--ease-out) .94s forwards;
}
.hero-meta div strong{ display:block; font-family:var(--font-display); font-size:1.5rem; color:var(--white); }
.hero-meta div span{ font-size:.85rem; color:var(--ink-faint); }

@keyframes fadeUp{ from{ opacity:0; transform:translateY(18px);} to{ opacity:1; transform:none; } }

.scroll-cue{
  position:absolute; right:clamp(1.25rem,5vw,2.5rem); bottom:2.2rem;
  writing-mode:vertical-rl;
  font-family:var(--font-display); font-size:.78rem; letter-spacing:.14em;
  color:var(--ink-faint);
  display:flex; align-items:center; gap:.7rem;
  z-index:1;
}
.scroll-cue::after{
  content:""; width:1px; height:46px; background:linear-gradient(var(--purple-400),transparent);
  animation:scrollLine 2.2s ease-in-out infinite;
}
@keyframes scrollLine{ 0%,100%{ transform:scaleY(1); opacity:.4;} 50%{ transform:scaleY(1.3); opacity:1;} }

/* ===========================================================
   Intro / About paragraphs
   =========================================================== */
.intro{ position:relative; padding-block:clamp(5rem,10vw,8rem) clamp(3rem,7vw,5rem); }
.intro .container{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(2rem,6vw,5rem); align-items:start; }
.intro-lede{ font-family:var(--font-display); font-size:clamp(1.5rem,2.6vw,2rem); color:var(--white); line-height:1.35; }
.intro-body p{ color:var(--ink-muted); margin-bottom:1.1rem; font-size:1.02rem; }
.intro-body p:last-child{ margin-bottom:0; color:var(--ink); font-weight:500; }

@media (max-width:860px){
  .intro .container{ grid-template-columns:1fr; gap:1.75rem; }
}

/* ===========================================================
   Servicios
   =========================================================== */
.services{ position:relative; padding-block:clamp(3rem,7vw,5rem); }
.service-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1.1rem;
}
.service-card{
  position:relative;
  border-radius:var(--radius-lg);
  overflow:hidden;
  aspect-ratio:3/4;
  border:1px solid var(--surface-line);
  transition:transform var(--dur-med) var(--ease-out), border-color var(--dur-fast);
}
.service-card img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .8s var(--ease-out);
}
.service-card::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(9,5,20,.92) 0%, rgba(9,5,20,.35) 45%, rgba(27,13,56,.15) 100%);
}
.service-card:hover{ transform:translateY(-6px); border-color:var(--purple-400); }
.service-card:hover img{ transform:scale(1.07); }
.service-label{
  position:absolute; left:0; right:0; bottom:0;
  z-index:1;
  padding:1.4rem;
  display:flex; align-items:center; justify-content:space-between; gap:.6rem;
}
.service-label h3{ font-size:1.15rem; }
.service-arrow{
  width:34px; height:34px; border-radius:50%;
  border:1px solid rgba(255,255,255,.35);
  display:grid; place-items:center;
  flex-shrink:0;
  transition:all var(--dur-fast) var(--ease-out);
}
.service-card:hover .service-arrow{ background:var(--purple-500); border-color:var(--purple-500); transform:rotate(45deg); }

@media (max-width:940px){ .service-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .service-grid{ grid-template-columns:1fr; } .service-card{ aspect-ratio:16/10; } }

/* ===========================================================
   Brochure / Vibramos
   =========================================================== */
.brochure{ position:relative; padding-block:clamp(4rem,9vw,7rem); overflow:hidden; }
.brochure .container{
  display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(2rem,6vw,4rem); align-items:center;
  background:linear-gradient(135deg, var(--surface), var(--purple-900));
  border:1px solid var(--surface-line);
  border-radius:32px;
  padding:clamp(2rem,5vw,3.5rem);
  position:relative; overflow:hidden;
}
.brochure-art{ position:relative; display:flex; justify-content:center; }
.brochure-art img{
  width:min(340px,80%);
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.55));
  transition:transform .5s var(--ease-out);
}
.brochure .container:hover .brochure-art img{ transform:translateY(-8px) rotate(-1deg); }
.brochure-copy p{ color:var(--ink-muted); margin-top:1rem; margin-bottom:1.9rem; font-size:1.03rem; }

@media (max-width:860px){
  .brochure .container{ grid-template-columns:1fr; text-align:center; }
  .brochure-art{ order:-1; }
}

/* ===========================================================
   Galleries (photo reel / marquee)
   =========================================================== */
.reel-section{ padding-block:clamp(3.5rem,8vw,6rem); overflow:hidden; }
.reel-section .section-head{ padding-inline:clamp(1.25rem,5vw,2.5rem); max-width:var(--container); margin-inline:auto; }
.reel{
  display:flex;
  gap:1rem;
  width:max-content;
  padding-inline:clamp(1.25rem,5vw,2.5rem);
  animation:reelScroll var(--reel-duration,50s) linear infinite;
}
.reel:hover{ animation-play-state:paused; }
.reel-track{ overflow:hidden; }
.reel-track.dragging .reel{ animation-play-state:paused; }
.reel figure{
  margin:0; flex:0 0 auto;
  width:min(280px,72vw);
  border-radius:var(--radius-md);
  overflow:hidden;
  border:1px solid var(--surface-line);
  aspect-ratio:4/5;
}
.reel figure img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease-out); }
.reel figure:hover img{ transform:scale(1.06); }
@keyframes reelScroll{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

.reel-caption{
  display:flex; align-items:center; gap:.9rem;
  margin-block:1.6rem;
  color:var(--ink-faint);
  font-family:var(--font-display);
  font-size:.85rem;
  letter-spacing:.02em;
}
.reel-caption::before{ content:""; width:22px; height:2px; background:linear-gradient(90deg,var(--purple-400),transparent); border-radius:2px; flex-shrink:0; }
.reel-caption strong{ color:var(--ink); font-weight:600; }

/* ===========================================================
   Nosotros / Team
   =========================================================== */
.team{ position:relative; padding-block:clamp(4rem,9vw,7rem); }
.team-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,4vw,2.5rem); }
.team-card{
  position:relative;
  border-radius:var(--radius-lg);
  overflow:hidden;
  border:1px solid var(--surface-line);
}
.team-photo{ position:relative; aspect-ratio:4/5; overflow:hidden; }
.team-photo img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease-out); }
.team-card:hover .team-photo img{ transform:scale(1.05); }
.team-photo::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(0deg, var(--bg-soft) 0%, rgba(18,11,36,.15) 55%, transparent 80%);
  pointer-events:none;
}
.team-social{
  position:absolute; top:1.2rem; right:1.2rem; z-index:2;
  width:42px; height:42px; border-radius:50%;
  background:rgba(10,7,20,.55);
  backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.25);
  display:grid; place-items:center;
  transition:all var(--dur-fast) var(--ease-out);
  pointer-events:auto;
}
.team-card:hover .team-social{ background:var(--purple-500); border-color:var(--purple-500); }
.team-copy{ padding:1.6rem clamp(1.2rem,3vw,1.9rem) 1.9rem; }
.team-role{ color:var(--purple-400); font-family:var(--font-display); font-size:.85rem; margin-bottom:.35rem; display:block; }
.team-copy h3{ font-size:1.4rem; margin-bottom:.8rem; }
.team-copy p{ color:var(--ink-muted); font-size:.98rem; }

@media (max-width:820px){ .team-grid{ grid-template-columns:1fr; } }

/* ===========================================================
   Duo banner
   =========================================================== */
.duo-banner{ position:relative; padding-block:clamp(3rem,7vw,5rem); }
.duo-banner .frame{
  position:relative; border-radius:28px; overflow:hidden;
  min-height:clamp(320px,48vw,460px);
  display:flex; align-items:flex-end;
  border:1px solid var(--surface-line);
}
.duo-banner .frame img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 20%; }
.duo-banner .frame::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(9,5,20,.92) 5%, rgba(27,13,56,.35) 55%, rgba(27,13,56,.15) 100%);
}
.duo-copy{ position:relative; z-index:1; padding:clamp(1.75rem,5vw,3rem); max-width:640px; }
.duo-copy .eyebrow{ color:var(--white); opacity:.85; }
.duo-copy h2{ font-size:clamp(1.7rem,4vw,2.6rem); line-height:1.15; }

/* ===========================================================
   Spotify + YouTube
   =========================================================== */
.listen{ padding-block:clamp(3.5rem,8vw,6rem); }
.listen-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,4vw,2.5rem); align-items:stretch; }
.player-card{
  border-radius:var(--radius-lg);
  overflow:hidden;
  border:1px solid var(--surface-line);
  background:var(--surface);
}
.player-card iframe{ width:100%; border:0; display:block; }

.youtube-showcase{
  margin-top:1.5rem;
  display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(1.75rem,4vw,3rem); align-items:center;
  background:linear-gradient(135deg, var(--surface), var(--purple-900));
  border:1px solid var(--surface-line);
  border-radius:32px;
  padding:clamp(2rem,5vw,3.25rem);
  position:relative; overflow:hidden;
}
.youtube-art{ position:relative; }
.youtube-art img{
  width:100%;
  filter:drop-shadow(0 30px 55px rgba(0,0,0,.5));
  transition:transform .5s var(--ease-out);
}
.youtube-showcase:hover .youtube-art img{ transform:translateY(-6px); }
.youtube-play{
  position:absolute; left:1.5rem; bottom:-.75rem;
  width:52px; height:52px; border-radius:50%;
  background:linear-gradient(135deg,var(--purple-500),var(--purple-700));
  display:grid; place-items:center;
  box-shadow:0 10px 26px -8px var(--purple-glow);
}
.youtube-copy p{ color:var(--ink-muted); margin:.9rem 0 1.6rem; max-width:44ch; }
.youtube-stat{ display:flex; gap:.6rem; align-items:center; margin-bottom:1.3rem; color:var(--ink-faint); font-size:.88rem; }
.youtube-stat strong{ color:var(--white); font-family:var(--font-display); }

@media (max-width:860px){
  .listen-grid{ grid-template-columns:1fr; }
  .youtube-showcase{ grid-template-columns:1fr; text-align:center; }
  .youtube-play{ left:50%; transform:translateX(-50%); }
}

/* ===========================================================
   Shorts
   =========================================================== */
.shorts{ padding-block:clamp(3.5rem,8vw,6rem); }
.shorts-grid{
  display:flex;
  gap:1rem;
  overflow-x:auto;
  padding-bottom:.6rem;
  scroll-snap-type:x mandatory;
  scrollbar-width:thin;
  scrollbar-color:var(--purple-500) transparent;
}
.shorts-grid::-webkit-scrollbar{ height:6px; }
.shorts-grid::-webkit-scrollbar-thumb{ background:var(--purple-500); border-radius:6px; }
.short-slot{
  position:relative;
  flex:0 0 auto;
  width:min(200px,42vw);
  aspect-ratio:9/16;
  border-radius:var(--radius-md);
  overflow:hidden;
  border:1px solid var(--surface-line);
  background:var(--surface);
  scroll-snap-align:start;
  transition:border-color var(--dur-fast), transform var(--dur-fast) var(--ease-out);
}
.short-slot:hover{ border-color:var(--purple-400); transform:translateY(-4px); }
.short-slot iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }
.short-placeholder{
  position:absolute; inset:6px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.6rem;
  color:var(--ink-faint);
  font-family:var(--font-display); font-size:.85rem;
  border:1px dashed var(--surface-line);
  border-radius:calc(var(--radius-md) - 4px);
}
.short-placeholder svg{ color:var(--purple-400); }
.shorts-cta{ margin-top:1.9rem; text-align:center; }

/* ===========================================================
   Blog
   =========================================================== */
.blog{ padding-block:clamp(3.5rem,8vw,6rem); }
.blog-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.5rem; }
.blog-card{
  padding:clamp(1.6rem,4vw,2.2rem);
  border-radius:var(--radius-lg);
  border:1px solid var(--surface-line);
  background:linear-gradient(160deg, var(--surface), var(--bg-soft));
  transition:border-color var(--dur-fast), transform var(--dur-fast) var(--ease-out);
}
.blog-card:hover{ border-color:var(--purple-400); transform:translateY(-4px); }
.blog-num{ font-family:var(--font-display); color:var(--purple-400); font-size:.85rem; margin-bottom:1rem; display:block; }
.blog-card h3{ font-size:1.25rem; line-height:1.3; margin-bottom:1.2rem; }
.blog-link{ display:inline-flex; align-items:center; gap:.5rem; font-family:var(--font-display); font-size:.92rem; color:var(--white); }
.blog-link svg{ transition:transform var(--dur-fast) var(--ease-out); }
.blog-card:hover .blog-link svg{ transform:translateX(4px); }

@media (max-width:720px){ .blog-grid{ grid-template-columns:1fr; } }

/* ===========================================================
   Contacto
   =========================================================== */
.contact{ position:relative; padding-block:clamp(4rem,9vw,7rem); }
.contact .container{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(2rem,6vw,4rem); }
.contact-side p{ color:var(--ink-muted); margin-top:1rem; margin-bottom:2rem; max-width:40ch; }
.contact-detail{ display:flex; align-items:center; gap:.9rem; margin-bottom:1.1rem; }
.contact-detail .ico{
  width:42px; height:42px; border-radius:50%; flex-shrink:0;
  display:grid; place-items:center;
  background:rgba(109,52,217,.15); color:var(--purple-400);
  border:1px solid var(--surface-line);
}
.contact-detail strong{ display:block; font-family:var(--font-display); font-size:.95rem; color:var(--white); }
.contact-detail span{ font-size:.88rem; color:var(--ink-faint); }

.contact-form{
  background:var(--surface);
  border:1px solid var(--surface-line);
  border-radius:var(--radius-lg);
  padding:clamp(1.6rem,4vw,2.4rem);
}
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.field{ margin-bottom:1.1rem; }
.field label{ display:block; font-family:var(--font-display); font-size:.85rem; color:var(--ink-muted); margin-bottom:.5rem; }
.field input, .field select, .field textarea{
  width:100%;
  background:rgba(255,255,255,.04);
  border:1px solid var(--surface-line);
  border-radius:var(--radius-sm);
  padding:.85rem 1rem;
  color:var(--ink);
  font-family:var(--font-body);
  font-size:.98rem;
  transition:border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.field select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23B7ACD1' stroke-width='1.6' fill='none' fill-rule='evenodd'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 1rem center; }
.field select option{
  color:#1B0D38;
  background:#FFFFFF;
}
.field textarea{ resize:vertical; min-height:110px; }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--purple-400);
  box-shadow:0 0 0 3px rgba(156,107,240,.18);
}
.field ::placeholder{ color:var(--ink-faint); }
.form-submit{ width:100%; margin-top:.4rem; }
.form-note{ margin-top:1rem; font-size:.85rem; color:var(--ink-faint); text-align:center; }
.form-status{ margin-top:.9rem; font-size:.9rem; text-align:center; min-height:1.2em; color:var(--purple-400); }

@media (max-width:860px){
  .contact .container{ grid-template-columns:1fr; }
  .form-row{ grid-template-columns:1fr; }
}

/* ===========================================================
   Footer
   =========================================================== */
.site-footer{ position:relative; border-top:1px solid var(--surface-line); padding-block:clamp(2.5rem,6vw,3.5rem) 1.75rem; }
.footer-top{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:2rem; align-items:center; padding-bottom:2.2rem; }
.footer-brand img{ height:32px; margin-bottom:.9rem; }
.footer-brand p{ color:var(--ink-faint); font-size:.9rem; max-width:32ch; }
.footer-nav{ display:flex; gap:2rem; flex-wrap:wrap; }
.footer-nav a{ color:var(--ink-muted); font-size:.94rem; transition:color var(--dur-fast); }
.footer-nav a:hover{ color:var(--white); }
.footer-social{ display:flex; gap:.8rem; }
.footer-bottom{
  border-top:1px solid var(--surface-line);
  padding-top:1.5rem;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:.6rem;
  font-size:.82rem; color:var(--ink-faint);
}

/* Floating WhatsApp */
.wa-float{
  position:fixed; right:1.4rem; bottom:1.4rem; z-index:90;
  width:56px; height:56px; border-radius:50%;
  background:linear-gradient(135deg,var(--purple-500),var(--purple-700));
  display:grid; place-items:center;
  box-shadow:0 12px 30px -8px var(--purple-glow);
  animation:floatPulse 3.2s ease-in-out infinite;
}
@keyframes floatPulse{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-6px);} }

/* Section divider glow accents (ambient, placed via inline elements in HTML) */
.glow-purple{ background:radial-gradient(circle, var(--purple-glow), transparent 70%); }

/* ===========================================================
   Blog / Article pages
   =========================================================== */
.breadcrumb{
  position:relative; z-index:1;
  padding-top:clamp(6.5rem,12vw,8.5rem);
  padding-bottom:1.5rem;
  display:flex; align-items:center; gap:.5rem;
  font-family:var(--font-display); font-size:.88rem; color:var(--ink-faint);
}
.breadcrumb a{ color:var(--ink-muted); transition:color var(--dur-fast); }
.breadcrumb a:hover{ color:var(--white); }

.article-hero{ position:relative; padding-bottom:clamp(2.5rem,6vw,4rem); }
.article-hero .eyebrow{ margin-bottom:1rem; }
.article-hero h1{ font-size:clamp(2rem,5vw,3.2rem); line-height:1.12; max-width:20ch; }
.article-meta{
  display:flex; flex-wrap:wrap; gap:1.5rem;
  margin-top:1.6rem; padding-top:1.6rem;
  border-top:1px solid var(--surface-line);
  color:var(--ink-faint); font-size:.9rem;
}
.article-meta strong{ color:var(--ink); font-weight:500; }

.article-cover{
  margin-inline:auto; max-width:var(--container);
  padding-inline:clamp(1.25rem,5vw,2.5rem);
  margin-bottom:clamp(2.5rem,6vw,4rem);
}
.article-cover figure{ margin:0; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--surface-line); aspect-ratio:16/8; }
.article-cover img{ width:100%; height:100%; object-fit:cover; }

.article-body{
  max-width:720px; margin-inline:auto;
  padding-inline:clamp(1.25rem,5vw,2.5rem);
  padding-bottom:clamp(3rem,7vw,5rem);
  font-size:1.08rem; line-height:1.8; color:var(--ink-muted);
}
.article-body p{ margin-bottom:1.4rem; }
.article-body h2{ color:var(--white); font-size:1.5rem; margin:2.4rem 0 1rem; line-height:1.3; }
.article-body h3{ color:var(--white); font-size:1.2rem; margin:1.8rem 0 .8rem; }
.article-body ul, .article-body ol{ margin:0 0 1.4rem; padding-left:1.3rem; }
.article-body li{ margin-bottom:.6rem; }
.article-body strong{ color:var(--ink); }
.article-body blockquote{
  margin:2rem 0; padding:1.2rem 1.6rem;
  border-left:3px solid var(--purple-400);
  background:rgba(109,52,217,.08);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  color:var(--ink); font-family:var(--font-display); font-size:1.05rem;
}

.article-cta{
  max-width:720px; margin-inline:auto;
  padding-inline:clamp(1.25rem,5vw,2.5rem);
  padding-bottom:clamp(4rem,9vw,6rem);
}
.article-cta .box{
  background:linear-gradient(135deg, var(--surface), var(--purple-900));
  border:1px solid var(--surface-line);
  border-radius:var(--radius-lg);
  padding:clamp(1.75rem,4vw,2.5rem);
  text-align:center;
}
.article-cta h3{ font-size:1.35rem; margin-bottom:.7rem; }
.article-cta p{ color:var(--ink-muted); margin-bottom:1.4rem; max-width:44ch; margin-inline:auto; }

.article-nav{
  max-width:720px; margin-inline:auto;
  padding-inline:clamp(1.25rem,5vw,2.5rem);
  padding-bottom:clamp(3rem,7vw,5rem);
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  border-top:1px solid var(--surface-line);
  padding-top:2rem;
}
.article-nav a{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--font-display); font-size:.92rem; color:var(--ink-muted);
  transition:color var(--dur-fast);
}
.article-nav a:hover{ color:var(--white); }