/* ══════════════════════════════════════════════════════════
   Corazón A La Carta · páginas internas (/programas/creadoras,
   /programas/artistas, /noche-de-chicas) — basado en el mock de
   marketing (docs/2026_08_21/.../mock/pages.css, subset relevante).
   Se carga DESPUÉS de homepage-v2.css y reutiliza sus tokens y
   componentes (.wrap .btn .ghost .card .faq .quote .sec-head
   .soft-cta .lnk .section …). Clases sin prefijo "calac-" a
   propósito: aisladas a estas páginas, no colisionan con el
   resto del sitio.
   ══════════════════════════════════════════════════════════ */

/* hero de página interior */
.phero{background:
    radial-gradient(900px 460px at 82% -20%,rgba(255,0,127,.26),transparent 60%),
    radial-gradient(760px 520px at 0% 120%,rgba(0,229,255,.14),transparent 60%),
    linear-gradient(165deg,var(--ink),var(--ink-2) 60%,var(--ink-3));
  padding:3rem 0 3.4rem;position:relative;overflow:hidden}
.phero-in{display:grid;grid-template-columns:1.15fr .85fr;gap:2.4rem;align-items:center}
.phero h1{font-size:clamp(2rem,4.2vw,3.3rem)}
.phero .lead{color:var(--txt-soft);font-size:1.1rem;line-height:1.55;margin:1rem 0 1.5rem;max-width:48ch}
.phero .lead strong{color:var(--txt)}
.breadcrumb{font-size:.85rem;color:var(--txt-dim);margin-bottom:1.2rem}
.breadcrumb a{color:var(--txt-soft);text-decoration:none}
.breadcrumb a:hover{color:#fff}
.phero-art{position:relative;border-radius:24px;overflow:hidden;border:1px solid var(--violet-border);
  box-shadow:var(--shadow);aspect-ratio:4/5}
.phero-art img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.phero-art figcaption{position:absolute;inset:auto 0 0 0;padding:.7rem .9rem;font-size:.76rem;
  color:var(--txt-soft);background:linear-gradient(transparent,rgba(20,0,45,.94) 60%)}

/* cifras honestas */
.stats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.stats li{background:rgba(255,255,255,.05);border:1px solid var(--violet-border);border-radius:18px;
  padding:1.1rem 1.2rem}
.stats b{display:block;font-family:var(--f-head);font-size:1.9rem;line-height:1;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.stats span{display:block;margin-top:.35rem;font-size:.84rem;color:var(--txt-soft);line-height:1.35}
.stats small{display:block;margin-top:.3rem;font-size:.72rem;color:var(--txt-dim)}

/* ventajas */
.perks{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.perks li{background:rgba(255,255,255,.05);border:1px solid var(--violet-border);border-radius:20px;
  padding:1.3rem 1.4rem}
.perks h3{font-size:1.15rem;margin-bottom:.4rem;display:flex;align-items:center;gap:.55rem}
.perks .ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  background:var(--grad);font-size:1rem;flex:0 0 auto}
.perks p{margin:0;color:var(--txt-soft);font-size:.94rem;line-height:1.55}
.perks .proof{display:inline-block;margin-top:.6rem;font-size:.78rem;color:var(--cyan);
  border:1px solid rgba(0,229,255,.35);border-radius:999px;padding:.2rem .6rem}
.perks .pend{border-color:var(--violet-border);color:var(--txt-dim)}

/* pasos */
.steps{list-style:none;counter-reset:s;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(3,1fr);gap:1.1rem}
.steps li{counter-increment:s;position:relative;background:rgba(255,255,255,.05);
  border:1px solid var(--violet-border);border-radius:20px;padding:1.6rem 1.3rem 1.3rem}
.steps li::before{content:counter(s);position:absolute;top:-14px;left:1.3rem;width:30px;height:30px;
  border-radius:50%;background:var(--grad);display:grid;place-items:center;font-family:var(--f-head);
  font-weight:800;font-size:.95rem;color:#fff}
.steps h3{font-size:1.05rem;margin-bottom:.35rem}
.steps p{margin:0;color:var(--txt-soft);font-size:.92rem;line-height:1.5}

/* cómo funciona, en lista numerada vertical */
.howto{list-style:none;counter-reset:h;margin:0;padding:0;display:grid;gap:.8rem}
.howto li{counter-increment:h;display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:start}
.howto li::before{content:counter(h);width:30px;height:30px;border-radius:50%;background:var(--grad);
  display:grid;place-items:center;font-family:var(--f-head);font-weight:800;font-size:.9rem;color:#fff;
  flex:0 0 auto}
.howto b{display:block;font-family:var(--f-head);font-size:1.05rem}
.howto span{color:var(--txt-soft);font-size:.94rem;line-height:1.55}

/* elenco */
.roster{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.roster li{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:3/4;
  background:var(--ink-3);border:1px solid var(--violet-border)}
.roster a{display:block;position:relative;width:100%;height:100%;border-radius:18px;overflow:hidden;
  background:var(--ink-3);border:1px solid var(--violet-border);text-decoration:none;transition:.2s}
.roster a:hover{transform:translateY(-5px);border-color:var(--magenta)}
.roster img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.roster .r-meta{position:absolute;inset:auto 0 0 0;padding:.65rem .8rem;color:#fff;
  background:linear-gradient(transparent,rgba(20,0,45,.94) 60%)}
.roster b{display:block;font-family:var(--f-head);font-size:.98rem}
.roster span{font-size:.74rem;color:var(--txt-soft)}

/* derechos / bloque legal amable */
.rights{background:rgba(0,229,255,.06);border:1px solid rgba(0,229,255,.3);border-radius:22px;
  padding:1.6rem 1.8rem}
.rights h3{font-size:1.25rem;margin-bottom:.9rem}
.rights ul{margin:0;padding-left:1.1rem;color:var(--txt-soft);line-height:1.7;font-size:.96rem}
.rights li strong{color:var(--txt)}

/* formulario */
.form{background:rgba(255,255,255,.05);border:1px solid var(--violet-border);border-radius:22px;
  padding:1.7rem}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;margin:1.1rem 0}
.field{display:grid;gap:.35rem}
.field.wide{grid-column:1/-1}
.field label{font-size:.82rem;color:var(--txt-soft)}
.field input,.field select,.field textarea{background:rgba(0,0,0,.28);color:var(--txt);
  border:1px solid var(--violet-border);border-radius:12px;padding:.7rem .85rem;font-family:inherit;
  font-size:.95rem}
.field textarea{min-height:90px;resize:vertical}
.form .mini{display:block;margin-top:.9rem;color:var(--txt-dim)}

/* ficha de Delicia */
.sheet{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.sheet li{display:flex;justify-content:space-between;gap:1rem;padding:.6rem 0;
  border-bottom:1px dashed var(--violet-border);font-size:.95rem}
.sheet li:last-child{border-bottom:0}
.sheet span{color:var(--txt-soft)}
.sheet b{text-align:right}
.dual-cta{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;margin-top:1.6rem}
.dual-cta div{background:rgba(255,255,255,.05);border:1px solid var(--violet-border);
  border-radius:20px;padding:1.4rem}
.dual-cta b{display:block;font-family:var(--f-head);font-size:1.1rem;margin-bottom:.4rem}
.dual-cta p{margin:0 0 1rem;color:var(--txt-soft);font-size:.92rem}

/* etiqueta de dato pendiente */
.pending{display:inline-block;font-size:.7rem;color:var(--txt-dim);border:1px dashed var(--violet-border);
  border-radius:999px;padding:.15rem .55rem;margin-left:.4rem;vertical-align:middle}

@media(max-width:1000px){
  .phero-in{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
  .roster{grid-template-columns:repeat(3,1fr)}
  .steps{grid-template-columns:1fr}
}
@media(max-width:640px){
  .perks,.form-grid,.dual-cta{grid-template-columns:1fr}
  .roster{grid-template-columns:1fr 1fr}
}