/* ============================================================
   SERENATAS BOGOTÁ — Hoja de estilos principal
   Paleta de marca: Dorado #D4AF37 · Negro #000000 · Blanco #FFFFFF
   Tipografía de marca: Montserrat  ·  Display: Playfair Display
   ============================================================ */

:root{
  /* Marca */
  --oro:        #D4AF37;
  --oro-claro:  #EBD48A;
  --oro-hondo:  #9C7C1E;
  --negro:      #000000;
  --carbon:     #0D0C0A;
  --carbon-2:   #17150F;
  --blanco:     #FFFFFF;

  /* Neutros cálidos (lado "tradicional") */
  --crema:      #FBF7EF;
  --crema-2:    #F3EBDA;
  --tinta:      #191510;
  --tinta-2:    #574F44;
  --linea:      #E2D6BE;

  /* Utilitarios */
  --wa:         #1FA855;
  --wa-hover:   #17843F;

  --sombra-s:   0 2px 10px rgba(25,21,16,.08);
  --sombra-m:   0 10px 30px rgba(25,21,16,.12);
  --sombra-g:   0 24px 60px rgba(0,0,0,.35);

  --radio:      6px;
  --radio-g:    14px;

  --ancho:      1180px;
  --barra-movil: 0px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  font-family:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:16.5px;
  line-height:1.7;
  color:var(--tinta);
  background:var(--crema);
  overflow-x:hidden;
  padding-bottom:var(--barra-movil);
}

img,video{ max-width:100%; display:block; }
a{ color:inherit; }

h1,h2,h3,h4,.display{
  font-family:'Playfair Display',Georgia,'Times New Roman',serif;
  font-weight:700;
  line-height:1.14;
  letter-spacing:-.01em;
  margin:0 0 .5em;
}
h1{ font-size:clamp(2.1rem,5.4vw,4rem); }
h2{ font-size:clamp(1.75rem,3.9vw,2.9rem); }
h3{ font-size:clamp(1.2rem,2.2vw,1.6rem); }
p{ margin:0 0 1.1em; }

.contenedor{ width:100%; max-width:var(--ancho); margin-inline:auto; padding-inline:20px; }
.estrecho{ max-width:820px; }

/* ---------- Ornamentos tradicionales ---------- */
.filete{
  display:flex; align-items:center; justify-content:center;
  gap:14px; margin:0 auto 26px; max-width:340px;
}
.filete::before,.filete::after{
  content:''; height:1px; flex:1;
  background:linear-gradient(90deg,transparent,var(--oro));
}
.filete::after{ background:linear-gradient(90deg,var(--oro),transparent); }
.filete i{
  width:8px; height:8px; background:var(--oro);
  transform:rotate(45deg); flex:none; display:block;
}

.antetitulo{
  font-family:'Montserrat',sans-serif;
  font-size:.74rem; font-weight:700;
  letter-spacing:.28em; text-transform:uppercase;
  color:var(--oro-hondo); margin:0 0 12px; text-align:center;
}
.oscuro .antetitulo{ color:var(--oro); }

/* ---------- Botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:'Montserrat',sans-serif;
  font-weight:700; font-size:.95rem; letter-spacing:.02em;
  padding:15px 26px; border-radius:var(--radio);
  border:1.5px solid transparent; cursor:pointer;
  text-decoration:none; transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
  line-height:1.2; text-align:center;
}
.btn svg{ width:20px; height:20px; flex:none; }
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }

.btn-wa{ background:var(--wa); color:#fff; box-shadow:0 6px 20px rgba(31,168,85,.32); }
.btn-wa:hover{ background:var(--wa-hover); box-shadow:0 10px 26px rgba(31,168,85,.42); }

.btn-tel{ background:var(--oro); color:#1B1403; box-shadow:0 6px 20px rgba(212,175,55,.32); }
.btn-tel:hover{ background:var(--oro-claro); }

.btn-linea{ background:transparent; color:var(--oro); border-color:rgba(212,175,55,.55); }
.btn-linea:hover{ background:var(--oro); color:#1B1403; border-color:var(--oro); }

.btn-oscuro{ background:var(--tinta); color:var(--crema); }
.btn-oscuro:hover{ background:#000; }

.btn-bloque{ width:100%; }
.grupo-botones{ display:flex; flex-wrap:wrap; gap:12px; }

/* ============================================================
   CABECERA
   ============================================================ */
.aviso{
  background:var(--carbon); color:var(--crema-2);
  font-size:.78rem; letter-spacing:.06em; text-align:center;
  padding:8px 16px; border-bottom:1px solid rgba(212,175,55,.22);
}
.aviso strong{ color:var(--oro); }

.cabecera{
  position:sticky; top:0; z-index:80;
  background:rgba(9,8,6,.94);
  border-bottom:1px solid rgba(212,175,55,.24);
  backdrop-filter:saturate(140%) blur(6px);
}
.cabecera .fila{
  display:flex; align-items:center; gap:18px;
  min-height:74px; padding-block:10px;
}
.marca{ display:flex; align-items:center; gap:12px; text-decoration:none; margin-right:auto; }
.marca img{ width:46px; height:46px; border-radius:50%; flex:none; }
.marca-txt{ display:flex; flex-direction:column; line-height:1.05; }
.marca-txt b{
  font-family:'Playfair Display',serif; font-size:1.22rem;
  color:var(--oro); font-weight:700; letter-spacing:.01em;
}
.marca-txt span{
  font-size:.55rem; letter-spacing:.17em; text-transform:uppercase;
  color:#B7AC94; font-weight:600; white-space:nowrap;
}

.nav{ display:flex; align-items:center; gap:22px; }
.nav a{
  color:#E7DFCE; text-decoration:none; font-size:.88rem; font-weight:600;
  letter-spacing:.02em; padding:6px 0; position:relative; white-space:nowrap;
}
.nav a::after{
  content:''; position:absolute; left:0; right:100%; bottom:0; height:1.5px;
  background:var(--oro); transition:right .25s ease;
}
.nav a:hover::after{ right:0; }

.cabecera-cta{ display:flex; gap:10px; align-items:center; }
.cabecera-cta .btn{ padding:11px 18px; font-size:.85rem; }

.tel-cabecera{
  display:flex; flex-direction:column; text-decoration:none; line-height:1.15;
  white-space:nowrap;
}
.tel-cabecera small{ font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; color:#A2977F; }
.tel-cabecera b{ color:var(--oro); font-size:1.02rem; font-weight:700; letter-spacing:.02em; }

.hamburguesa{
  display:none; background:none; border:1px solid rgba(212,175,55,.4);
  border-radius:var(--radio); width:44px; height:42px; cursor:pointer;
  align-items:center; justify-content:center;
}
.hamburguesa span{ display:block; width:20px; height:2px; background:var(--oro); position:relative; }
.hamburguesa span::before,.hamburguesa span::after{
  content:''; position:absolute; left:0; width:20px; height:2px; background:var(--oro);
}
.hamburguesa span::before{ top:-6px; } .hamburguesa span::after{ top:6px; }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; color:var(--crema);
  background:var(--carbon);
  overflow:hidden;
  isolation:isolate;
}
.hero-fondo{
  position:absolute; inset:0; z-index:-2;
}
.hero-fondo img{
  width:100%; height:100%; object-fit:cover; object-position:center 34%;
  filter:saturate(.72) contrast(1.04) brightness(.72);
}
.hero-fondo::after{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(115% 82% at 50% 34%,rgba(0,0,0,.42),rgba(0,0,0,.88) 66%,#000 100%),
    linear-gradient(180deg,rgba(0,0,0,.62),rgba(0,0,0,.5) 45%,rgba(0,0,0,.9));
}
.hero-inner{ padding:clamp(58px,9vw,120px) 0 clamp(48px,7vw,86px); text-align:center; position:relative; }
.hero-logo{ width:min(230px,52vw); margin:0 auto 26px; filter:drop-shadow(0 6px 24px rgba(0,0,0,.6)); }
.hero h1{ color:var(--blanco); margin-bottom:.35em; text-wrap:balance; }
.hero h1 em{ font-style:italic; color:var(--oro); }
.hero-bajada{
  font-size:clamp(1rem,1.9vw,1.2rem); color:#DED5C3; max-width:660px;
  margin:0 auto 34px; text-wrap:pretty;
}
.hero .grupo-botones{ justify-content:center; }
.hero .btn{ padding:17px 32px; font-size:1rem; }

.hero-sellos{
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px 26px;
  margin-top:34px; padding-top:26px;
  border-top:1px solid rgba(212,175,55,.22);
  font-size:.82rem; color:#CEC4AE;
}
.hero-sellos span{ display:inline-flex; align-items:center; gap:8px; }
.hero-sellos svg{ width:17px; height:17px; color:var(--oro); flex:none; }

/* ============================================================
   SECCIONES
   ============================================================ */
section{ padding:clamp(56px,7vw,96px) 0; }
.oscuro{ background:var(--carbon); color:#E5DCCA; }
.oscuro h2,.oscuro h3{ color:var(--blanco); }
.crema-2{ background:var(--crema-2); }
.centro{ text-align:center; }
.cabeza-seccion{ max-width:720px; margin:0 auto clamp(34px,4vw,54px); text-align:center; }
.cabeza-seccion h2{ text-wrap:balance; }
.cabeza-seccion p{ color:var(--tinta-2); margin-bottom:0; }
.oscuro .cabeza-seccion p{ color:#B9AE99; }

/* ---------- Franja de garantías ---------- */
.garantias{
  background:var(--carbon-2); border-block:1px solid rgba(212,175,55,.22);
  padding:26px 0;
}
.garantias ul{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:22px;
}
.garantias li{ display:flex; gap:12px; align-items:flex-start; color:#DCD2BE; font-size:.88rem; line-height:1.5; }
.garantias svg{ width:26px; height:26px; color:var(--oro); flex:none; }
.garantias b{ display:block; color:var(--blanco); font-size:.94rem; }

/* ---------- Ocasiones ---------- */
.ocasiones{
  display:grid; grid-template-columns:repeat(5,1fr); gap:14px;
}
.ocasion{
  background:var(--blanco); border:1px solid var(--linea); border-radius:var(--radio);
  padding:22px 16px; text-align:center; text-decoration:none;
  transition:border-color .2s,box-shadow .2s,transform .2s;
}
.ocasion:hover{ border-color:var(--oro); box-shadow:var(--sombra-m); transform:translateY(-3px); }
.ocasion svg{ width:32px; height:32px; color:var(--oro-hondo); margin:0 auto 10px; }
.ocasion b{ display:block; font-size:.92rem; font-weight:700; color:var(--tinta); }
.ocasion small{ display:block; font-size:.76rem; color:var(--tinta-2); margin-top:3px; }

/* ============================================================
   TARJETAS DE ARTISTA
   ============================================================ */
.rejilla-artistas{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:28px;
}
.artista{
  background:var(--blanco);
  border:1px solid var(--linea);
  border-radius:var(--radio-g);
  overflow:hidden; display:flex; flex-direction:column;
  box-shadow:var(--sombra-s);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.artista:hover{ transform:translateY(-5px); box-shadow:var(--sombra-m); border-color:rgba(212,175,55,.65); }
.artista-foto{ position:relative; aspect-ratio:4/3; overflow:hidden; background:#100E0B; }
.artista-foto img{
  width:100%; height:100%; object-fit:cover; object-position:center 26%;
  transition:transform .5s ease;
}
.artista:hover .artista-foto img{ transform:scale(1.05); }
.artista-foto::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.72));
}
.orden{
  position:absolute; top:14px; left:14px; z-index:2;
  background:var(--oro); color:#1B1403;
  font-family:'Playfair Display',serif; font-weight:700; font-size:1rem;
  width:36px; height:36px; border-radius:50%;
  display:grid; place-items:center;
  box-shadow:0 4px 14px rgba(0,0,0,.4);
}
.etiqueta{
  position:absolute; top:16px; right:14px; z-index:2;
  background:rgba(9,8,6,.82); color:var(--oro);
  border:1px solid rgba(212,175,55,.5);
  font-size:.66rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  padding:5px 11px; border-radius:100px;
}
.artista-foto figcaption{
  position:absolute; left:18px; right:18px; bottom:14px; z-index:2; color:#fff;
}
.artista-foto figcaption b{
  font-family:'Playfair Display',serif; font-size:1.42rem; font-weight:700; display:block; line-height:1.15;
}
.artista-foto figcaption span{ font-size:.78rem; color:var(--oro-claro); letter-spacing:.04em; }

.artista-cuerpo{ padding:20px 22px 22px; display:flex; flex-direction:column; flex:1; }
.artista-cuerpo > p{ font-size:.92rem; color:var(--tinta-2); margin-bottom:14px; }
.generos{ list-style:none; display:flex; flex-wrap:wrap; gap:7px; padding:0; margin:0 0 16px; }
.generos li{
  font-size:.72rem; font-weight:600; letter-spacing:.03em;
  background:var(--crema-2); border:1px solid var(--linea);
  color:#6B6152; padding:4px 10px; border-radius:100px;
}
.precio{
  display:flex; align-items:baseline; gap:8px;
  border-top:1px dashed var(--linea); padding-top:14px; margin-top:auto; margin-bottom:14px;
}
.precio small{ font-size:.74rem; color:var(--tinta-2); text-transform:uppercase; letter-spacing:.1em; }
.precio b{ font-family:'Playfair Display',serif; font-size:1.5rem; color:var(--tinta); }
.precio i{ font-style:normal; font-size:.74rem; color:var(--tinta-2); }
.artista-cta{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.artista-cta .btn{ padding:13px 12px; font-size:.85rem; }

/* ============================================================
   BLOQUE DE CONTACTO (arriba y abajo en fichas de artista)
   ============================================================ */
.contacto-rapido{
  background:var(--carbon);
  border:1px solid rgba(212,175,55,.34);
  border-radius:var(--radio-g);
  padding:clamp(24px,3.4vw,38px);
  display:grid; grid-template-columns:1.25fr 1fr; gap:clamp(22px,3vw,42px);
  align-items:center;
  color:#E3DACA;
  box-shadow:var(--sombra-g);
}
.contacto-rapido h2,.contacto-rapido h3{ color:var(--blanco); margin-bottom:.3em; }
.contacto-rapido p{ color:#B8AE99; font-size:.94rem; margin-bottom:0; }
.contacto-rapido .antetitulo{ text-align:left; }
.contacto-acciones{ display:grid; gap:12px; }
.contacto-acciones .btn{ padding:17px 22px; font-size:1rem; }
.contacto-nota{
  display:flex; align-items:center; justify-content:center; gap:8px;
  font-size:.76rem; color:#9C9280; letter-spacing:.04em;
}
.contacto-nota svg{ width:15px; height:15px; color:var(--oro); }

/* ============================================================
   PASOS
   ============================================================ */
.pasos{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; counter-reset:p; }
.paso{ position:relative; padding-top:14px; }
.paso::before{
  counter-increment:p; content:counter(p,decimal-leading-zero);
  font-family:'Playfair Display',serif; font-size:3.4rem; font-weight:700;
  color:rgba(212,175,55,.32); line-height:1; display:block; margin-bottom:6px;
}
.paso h3{ font-size:1.22rem; margin-bottom:.4em; }
.paso p{ font-size:.93rem; color:var(--tinta-2); margin:0; }
.oscuro .paso p{ color:#B4A992; }

/* ============================================================
   VIDEOS
   ============================================================ */
.rejilla-videos{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:20px;
  align-items:start;
}
.video-tarjeta{
  position:relative; border-radius:var(--radio-g); overflow:hidden;
  background:#0A0908; border:1px solid rgba(212,175,55,.28);
  aspect-ratio:9/16;
}
.video-tarjeta.apaisado{ aspect-ratio:16/9; }
.video-tarjeta video{
  position:absolute; inset:0; z-index:5;
  width:100%; height:100%; object-fit:cover; background:#000; display:block;
}
.video-tarjeta .cartel{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  z-index:2;
}
.video-tarjeta .play{
  position:absolute; inset:0; z-index:3; display:grid; place-items:center;
  border:0; background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.55));
  cursor:pointer; width:100%; height:100%;
}
.video-tarjeta .play i{
  width:66px; height:66px; border-radius:50%;
  background:rgba(212,175,55,.94); display:grid; place-items:center;
  box-shadow:0 8px 30px rgba(0,0,0,.5);
  transition:transform .2s ease, background .2s ease;
}
.video-tarjeta .play:hover i{ transform:scale(1.09); background:var(--oro-claro); }
.video-tarjeta .play svg{ width:26px; height:26px; color:#171203; margin-left:4px; }
.video-tarjeta .rotulo{
  position:absolute; left:0; right:0; bottom:0; z-index:4;
  padding:26px 14px 12px; pointer-events:none;
  background:linear-gradient(transparent,rgba(0,0,0,.85));
  color:#fff; font-size:.82rem; font-weight:600; letter-spacing:.02em;
}
/* ---------- Bloques por tipo de show ---------- */
.show + .show{ margin-top:clamp(42px,5vw,64px); }
.show-cabeza{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 16px;
  padding-bottom:16px; margin-bottom:22px;
  border-bottom:1px solid rgba(212,175,55,.3);
}
.show-cabeza h3{
  margin:0; color:var(--blanco); font-size:clamp(1.25rem,2.3vw,1.7rem);
  flex:1 1 auto; min-width:min(100%,320px);
}
.show-cabeza p{
  margin:0; flex:1 1 260px; font-size:.9rem; color:#A99E88; line-height:1.55;
}
.show-cabeza .conteo{
  flex:none; font-size:.68rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--oro);
  border:1px solid rgba(212,175,55,.45); border-radius:100px; padding:5px 12px;
}

.video-tarjeta.reproduciendo .cartel,
.video-tarjeta.reproduciendo .play,
.video-tarjeta.reproduciendo .rotulo{ display:none; }

/* ============================================================
   GALERÍA
   ============================================================ */
.galeria{ display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:14px; }
.galeria a{
  display:block; border-radius:var(--radio); overflow:hidden;
  border:1px solid var(--linea); aspect-ratio:3/4; background:#100E0B;
}
.oscuro .galeria a{ border-color:rgba(212,175,55,.28); }
.galeria img{ width:100%; height:100%; object-fit:cover; transition:transform .45s ease, opacity .3s; }
.galeria a:hover img{ transform:scale(1.06); opacity:.9; }

/* Lightbox */
.visor{
  position:fixed; inset:0; z-index:200; display:none;
  background:rgba(0,0,0,.94); place-items:center; padding:24px;
}
.visor.activo{ display:grid; }
.visor img{ max-width:min(1000px,94vw); max-height:88vh; border-radius:8px; }
.visor button{
  position:absolute; top:20px; right:22px; width:46px; height:46px;
  border-radius:50%; border:1px solid rgba(212,175,55,.5);
  background:rgba(0,0,0,.5); color:var(--oro); font-size:1.6rem; cursor:pointer; line-height:1;
}

/* ============================================================
   PRECIOS
   ============================================================ */
.tabla-precios{ width:100%; border-collapse:collapse; font-size:.94rem; background:var(--blanco); }
.tabla-precios th,.tabla-precios td{ padding:15px 16px; text-align:left; border-bottom:1px solid var(--linea); }
.tabla-precios thead th{
  background:var(--carbon); color:var(--oro);
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; font-weight:700;
}
.tabla-precios tbody tr:hover{ background:var(--crema); }
.tabla-precios td:last-child{ font-weight:700; white-space:nowrap; font-family:'Playfair Display',serif; font-size:1.1rem; }
.envoltorio-tabla{ overflow-x:auto; border:1px solid var(--linea); border-radius:var(--radio-g); }

.incluye{ list-style:none; padding:0; margin:26px 0 0; display:grid; grid-template-columns:repeat(3,1fr); gap:14px 26px; }
.incluye li{ display:flex; gap:10px; font-size:.92rem; color:var(--tinta-2); }
.incluye svg{ width:19px; height:19px; color:var(--oro-hondo); flex:none; margin-top:3px; }

/* ============================================================
   TESTIMONIOS
   ============================================================ */
.testimonios{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:22px; }
.testimonio{
  background:var(--blanco); border:1px solid var(--linea);
  border-radius:var(--radio-g); padding:26px 24px; position:relative;
}
.testimonio::before{
  content:'”'; font-family:'Playfair Display',serif; font-size:4.6rem; color:rgba(212,175,55,.3);
  position:absolute; top:2px; right:20px; line-height:1;
}
.estrellas{ color:var(--oro); letter-spacing:2px; font-size:.94rem; margin-bottom:10px; }
.testimonio p{ font-size:.95rem; color:#4A433A; font-style:italic; }
.testimonio cite{ font-style:normal; font-weight:700; font-size:.88rem; display:block; }
.testimonio cite small{ display:block; font-weight:500; color:var(--tinta-2); font-size:.78rem; letter-spacing:.04em; }

/* ============================================================
   COBERTURA
   ============================================================ */
.zonas{ list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:9px; justify-content:center; }
.zonas li{
  font-size:.82rem; padding:7px 15px; border-radius:100px;
  border:1px solid rgba(212,175,55,.34); color:#CFC5AF;
}
.zonas li:hover{ border-color:var(--oro); color:var(--oro); }

/* ============================================================
   FAQ
   ============================================================ */
.faq{ max-width:820px; margin-inline:auto; }
.faq details{
  border-bottom:1px solid var(--linea); padding:4px 0;
}
.oscuro .faq details{ border-color:rgba(212,175,55,.2); }
.faq summary{
  cursor:pointer; list-style:none; padding:19px 40px 19px 0; position:relative;
  font-weight:600; font-size:1.02rem; color:var(--tinta);
}
.oscuro .faq summary{ color:var(--blanco); }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:'+'; position:absolute; right:6px; top:50%; transform:translateY(-50%);
  color:var(--oro); font-size:1.5rem; font-weight:400; transition:transform .25s;
}
.faq details[open] summary::after{ content:'–'; }
.faq details p{ margin:0 0 18px; font-size:.95rem; color:var(--tinta-2); padding-right:40px; }
.oscuro .faq details p{ color:#B4A992; }

/* ============================================================
   CTA FINAL
   ============================================================ */
.cta-final{
  position:relative; text-align:center; color:var(--crema);
  background:var(--negro); overflow:hidden;
}
.cta-final .fondo{ position:absolute; inset:0; z-index:0; opacity:.3; }
.cta-final .fondo img{ width:100%; height:100%; object-fit:cover; filter:grayscale(.35) brightness(.55); }
.cta-final::after{
  content:''; position:absolute; inset:0; z-index:0;
  background:radial-gradient(100% 80% at 50% 50%,rgba(0,0,0,.55),rgba(0,0,0,.9));
}
.cta-final .contenedor{ position:relative; z-index:1; }
.cta-final h2{ color:#fff; }
.cta-final p{ color:#CDC3AD; max-width:600px; margin-inline:auto; }
.cta-final .grupo-botones{ justify-content:center; margin-top:8px; }
.cta-final .btn{ padding:18px 34px; font-size:1.02rem; }

/* ============================================================
   PIE
   ============================================================ */
.pie{ background:#070605; color:#948A76; padding:56px 0 0; font-size:.9rem; }
.pie p{ font-size:.88rem; line-height:1.65; }
.pie em{ color:var(--oro); font-family:'Playfair Display',serif; font-size:.95rem; }
.destacado{
  border-left:3px solid var(--oro); background:var(--crema-2);
  padding:16px 20px; border-radius:0 var(--radio) var(--radio) 0;
  font-style:italic; color:#4C453B;
}
.pie-rejilla{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.1fr; gap:34px; padding-bottom:40px; }
.pie h4{ color:var(--oro); font-family:'Montserrat',sans-serif; font-size:.75rem; letter-spacing:.2em; text-transform:uppercase; margin:0 0 16px; }
.pie ul{ list-style:none; padding:0; margin:0; display:grid; gap:9px; }
.pie a{ color:#B0A691; text-decoration:none; }
.pie a:hover{ color:var(--oro); }
.pie img.logo-pie{ width:180px; margin-bottom:16px; }
.pie-legal{
  border-top:1px solid rgba(212,175,55,.18); padding:18px 0 24px;
  display:flex; flex-wrap:wrap; gap:10px 22px; justify-content:space-between;
  font-size:.78rem; color:#6F675A;
}

/* ============================================================
   FLOTANTES
   ============================================================ */
.wa-flotante{
  position:fixed; right:18px; bottom:22px; z-index:90;
  width:60px; height:60px; border-radius:50%;
  background:var(--wa); display:grid; place-items:center;
  box-shadow:0 8px 26px rgba(31,168,85,.5); text-decoration:none;
  animation:latido 2.6s ease-in-out infinite;
}
.wa-flotante svg{ width:32px; height:32px; color:#fff; }
@keyframes latido{
  0%,100%{ box-shadow:0 8px 26px rgba(31,168,85,.5),0 0 0 0 rgba(31,168,85,.5); }
  60%{ box-shadow:0 8px 26px rgba(31,168,85,.5),0 0 0 16px rgba(31,168,85,0); }
}

.barra-movil{
  position:fixed; left:0; right:0; bottom:0; z-index:95;
  display:none; grid-template-columns:1fr 1fr;
  background:var(--carbon); border-top:1px solid rgba(212,175,55,.3);
}
.barra-movil a{
  display:flex; align-items:center; justify-content:center; gap:9px;
  padding:15px 8px; text-decoration:none; font-weight:700; font-size:.92rem;
}
.barra-movil svg{ width:20px; height:20px; }
.barra-movil .m-wa{ background:var(--wa); color:#fff; }
.barra-movil .m-tel{ color:var(--oro); }

/* ============================================================
   FICHA DE ARTISTA
   ============================================================ */
.migas{ font-size:.78rem; color:#8E8571; padding:14px 0; background:var(--carbon); }
.migas a{ color:#B4A98F; text-decoration:none; }
.migas a:hover{ color:var(--oro); }

.ficha-hero{ background:var(--carbon); color:#E1D8C6; padding:clamp(30px,4vw,56px) 0 clamp(44px,5vw,72px); }
.ficha-rejilla{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,58px); align-items:center; }
.ficha-hero h1{ color:#fff; margin-bottom:.25em; }
.ficha-hero .lema{ color:var(--oro); font-family:'Playfair Display',serif; font-style:italic; font-size:1.2rem; margin-bottom:1em; }
.ficha-hero p{ color:#BEB39D; }
.ficha-foto{
  border-radius:var(--radio-g); overflow:hidden; border:1px solid rgba(212,175,55,.4);
  box-shadow:var(--sombra-g); aspect-ratio:4/5;
}
.ficha-foto img{ width:100%; height:100%; object-fit:cover; }

.datos{ list-style:none; padding:0; margin:0 0 26px; display:grid; gap:12px; }
.datos li{ display:flex; gap:12px; align-items:flex-start; font-size:.94rem; }
.datos svg{ width:19px; height:19px; color:var(--oro); flex:none; margin-top:4px; }
.datos b{ color:#fff; }

.bloques{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:20px; }
.bloque{
  background:var(--blanco); border:1px solid var(--linea);
  border-left:3px solid var(--oro); border-radius:var(--radio);
  padding:24px 22px;
}
.bloque h3{ font-size:1.12rem; margin-bottom:.5em; }
.bloque ul{ margin:0; padding-left:18px; font-size:.93rem; color:var(--tinta-2); display:grid; gap:6px; }
.bloque p{ font-size:.93rem; color:var(--tinta-2); margin:0; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1040px){
  .garantias ul{ grid-template-columns:repeat(2,1fr); }
  .ocasiones{ grid-template-columns:repeat(3,1fr); }
  .incluye{ grid-template-columns:repeat(2,1fr); }
  .pie-rejilla{ grid-template-columns:1fr 1fr; }
}
@media (max-width:900px){
  .nav{
    display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--carbon); border-bottom:1px solid rgba(212,175,55,.3);
    padding:8px 20px 18px;
  }
  .nav.abierto{ display:flex; }
  .nav a{ padding:13px 0; border-bottom:1px solid rgba(212,175,55,.12); }
  .hamburguesa{ display:flex; }
  .cabecera-cta .btn-wa{ display:none; }
  .contacto-rapido{ grid-template-columns:1fr; }
  .ficha-rejilla{ grid-template-columns:1fr; }
  .ficha-foto{ aspect-ratio:4/3; max-height:420px; }
  .pasos{ grid-template-columns:1fr; gap:18px; }
}
@media (max-width:720px){
  :root{ --barra-movil:60px; }
  body{ font-size:16px; }
  .tel-cabecera{ display:none; }
  .barra-movil{ display:grid; }
  /* En móvil la barra fija ya ofrece los dos CTA: el flotante estorba */
  .wa-flotante{ display:none; }
  .rejilla-artistas{ grid-template-columns:1fr; }
  .artista-foto{ aspect-ratio:3/2; }
  .hero-sellos{ gap:8px 16px; font-size:.76rem; }
  .galeria{ grid-template-columns:repeat(2,1fr); }
  .ocasiones{ grid-template-columns:repeat(2,1fr); }
  .incluye{ grid-template-columns:1fr; }
  .rejilla-videos{ grid-template-columns:repeat(2,1fr); }
  .pie-rejilla{ grid-template-columns:1fr; gap:26px; }
  .garantias ul{ grid-template-columns:1fr; }
  .artista-cta{ grid-template-columns:1fr; }
}
@media (max-width:420px){
  .rejilla-videos{ grid-template-columns:1fr; }
  .marca-txt b{ font-size:1.05rem; }
  .marca img{ width:40px; height:40px; }
}

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

/* Accesibilidad */
:focus-visible{ outline:2px solid var(--oro); outline-offset:3px; border-radius:3px; }
.solo-lectores{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}