/* ==========================================================================
   Serenatas a domicilio — estilos propios.
   Reutiliza .section-head / .accordion / .btn / .cta de style.css.
   Prefijo "serenata" para no chocar con clases existentes.
   ========================================================================== */

main > .serenata-intro:first-child{
  padding-top: calc(var(--space-xl) + 4.5rem);
}

/* Respuesta directa bajo el H1. Es el parrafo que se lleva quien llega desde
   Google y el que citan los buscadores con IA, asi que va completo: precio,
   cobertura y horario en una sola lectura, sin obligar a bajar. */
.serenata-answer{
  margin-top: var(--space-m);
  padding: var(--space-m);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--gold);
  border-radius: 0 12px 12px 0;
  background: var(--bg-raised);
  max-width: 46rem;
}
.serenata-answer p{ margin: 0; font-size: 1.05rem; }
.serenata-answer p + p{ margin-top: var(--space-s); }
.serenata-answer strong{ color: var(--gold); font-weight: 600; }

/* Ocasiones: no es una secuencia, por eso van sin numerar */
.serenata-ocasiones{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--space-s);
}
.serenata-card{
  padding: var(--space-m);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--bg-raised);
}
.serenata-card h3{
  font-size: 1.1rem;
  margin: 0 0 0.4rem;
}
.serenata-card p{
  margin: 0;
  color: var(--ink-dim);
  font-size: 0.95rem;
}
/* Las ocasiones que ya tienen pagina propia enlazan desde el titulo de la ficha:
   es el ancla mas descriptiva de la pagina y la que Google lee mejor. */
.serenata-card h3 a{
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.serenata-card h3 a:hover{ color: var(--gold); border-color: var(--gold); }

/* La noche de la serenata SI es una secuencia real: el orden importa y es lo
   que la gente pregunta por WhatsApp. Por eso aqui los numeros si informan. */
.serenata-pasos{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--space-m);
  counter-reset: paso;
}
.serenata-pasos li{
  counter-increment: paso;
  padding-top: var(--space-s);
  border-top: 1px solid var(--hairline);
}
.serenata-pasos li::before{
  content: counter(paso);
  display: block;
  font-family: var(--font-display, inherit);
  font-size: 1.6rem;
  line-height: 1;
  color: var(--gold);
  margin-bottom: 0.5rem;
}
.serenata-pasos h3{ font-size: 1.05rem; margin: 0 0 0.3rem; }
.serenata-pasos p{ margin: 0; color: var(--ink-dim); font-size: 0.95rem; }

/* Precio resumido: el detalle vive en /precios, aqui solo el ancla */
.serenata-precio{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-s) var(--space-m);
  padding: var(--space-m);
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-raised);
}
.serenata-precio__cifra{
  font-family: var(--font-display, inherit);
  font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.5rem);
  line-height: 1;
  color: var(--gold);
}
.serenata-precio__cifra span{
  display: block;
  font-family: var(--font-body, inherit);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 0.35rem;
}
.serenata-precio__texto{
  flex: 1 1 18rem;
  margin: 0;
  color: var(--ink-dim);
  font-size: 0.95rem;
}

/* Distritos con pagina propia */
.serenata-distritos{
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.serenata-distritos a{
  display: inline-block;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  color: var(--ink-dim);
  text-decoration: none;
  font-size: 0.92rem;
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.serenata-distritos a:hover{ border-color: var(--gold); color: var(--gold); }

.serenata-nota{
  margin-top: var(--space-m);
  color: var(--ink-faint);
  font-size: 0.9rem;
  max-width: 52rem;
}