/* ===========================================================
   ELCHE LOVE SALSA — Landing "Kizomba"
   Hereda componentes de styles.css + plus55.css (clases .p55-*).
   Aquí: TEMA ÁFRICA (scoped .kiz) — terracota + esmeralda + oro.
   =========================================================== */

/* ---------------------------------------------------------
   TEMA ÁFRICA — atardecer terracota + esmeralda + oro
   --------------------------------------------------------- */
body.kiz{
  --c-red:#D97A2B;--c-red-strong:#B85F1B;
  --c-pink:#E89B4B;--c-teal:#1E9E6A;--c-yellow:#E8B23A;
  --c-orange:#D97A2B;--c-green:#1E9E6A;--c-blue:#1E9E6A;
  --primary:#D97A2B;--primary-strong:#B85F1B;--on-primary:#241505;
  --accent:#1E9E6A;--accent-2:#E8B23A;--pop:#D97A2B;
  --line:rgba(230,170,90,.16);
  --btn-shadow:0 18px 40px -14px rgba(217,122,43,.55);
  --band-bg:linear-gradient(115deg,#7A2E14 0%,#C0561C 45%,#E8B23A 100%);
  --band-ink:#fff;--band-eyebrow:#FBE4BE;
  --hero-fallback:#160c05;
}
.kiz .btn:hover{box-shadow:0 22px 50px -14px rgba(217,122,43,.68)}
.kiz .btn{--on-primary:#241505}
.kiz .feature__ico,.kiz .contact__perk .ico{background:color-mix(in srgb,var(--primary) 20%,transparent)}

/* --- Motivo de fondo: soles africanos muy tenues --- */
body.kiz::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='330'%20height='330'%20viewBox='0%200%20330%20330'%3E%3Cg%20fill='none'%20stroke='%23D97A2B'%20stroke-width='2.4'%3E%3Cg%20transform='translate(40%2052)%20scale(1.7)'%3E%3Ccircle%20cx='16'%20cy='16'%20r='7'/%3E%3Cpath%20d='M16%201v5M16%2026v5M1%2016h5M26%2016h5M6%206l3.5%203.5M26%206l-3.5%203.5M6%2026l3.5-3.5M26%2026l-3.5-3.5'%20stroke-linecap='round'/%3E%3C/g%3E%3Cg%20transform='translate(214%20212)%20scale(1.15)'%3E%3Ccircle%20cx='16'%20cy='16'%20r='7'/%3E%3Cpath%20d='M16%201v5M16%2026v5M1%2016h5M26%2016h5M6%206l3.5%203.5M26%206l-3.5%203.5M6%2026l3.5-3.5M26%2026l-3.5-3.5'%20stroke-linecap='round'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size:370px 370px;
}
/* resplandor atardecer detrás del hero */
body.kiz .hero__bg::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 80% at 50% 108%,rgba(217,122,43,.5),transparent 60%),
             radial-gradient(90% 60% at 85% 0%,rgba(30,158,106,.3),transparent 55%)}

/* --- Re-color de acentos que en plus55 venían fijos --- */
.kiz .p55-recognize .p55-rec:nth-child(1) .p55-rec__q{background:linear-gradient(135deg,#D97A2B,#B85F1B)}
.kiz .p55-recognize .p55-rec:nth-child(2) .p55-rec__q{background:linear-gradient(135deg,#1E9E6A,#147A50)}
.kiz .p55-recognize .p55-rec:nth-child(3) .p55-rec__q{background:linear-gradient(135deg,#E8B23A,#C48E18)}
.kiz .p55-recognize .p55-rec:nth-child(4) .p55-rec__q{background:linear-gradient(135deg,#C0561C,#7A2E14)}
.kiz .p55-recognize__after .p55-script{color:var(--accent-2)}

.kiz .p55-pillars .p55-pillar:nth-child(1)::before{background:#D97A2B}
.kiz .p55-pillars .p55-pillar:nth-child(1) .p55-pillar__ico{color:#D97A2B;background:color-mix(in srgb,#D97A2B 16%,transparent)}
.kiz .p55-pillars .p55-pillar:nth-child(1) li svg{color:#D97A2B}
.kiz .p55-pillars .p55-pillar:nth-child(2)::before{background:#1E9E6A}
.kiz .p55-pillars .p55-pillar:nth-child(2) .p55-pillar__ico{color:#1E9E6A;background:color-mix(in srgb,#1E9E6A 16%,transparent)}
.kiz .p55-pillars .p55-pillar:nth-child(2) li svg{color:#1E9E6A}
.kiz .p55-pillars .p55-pillar:nth-child(3)::before{background:#E8B23A}
.kiz .p55-pillars .p55-pillar:nth-child(3) .p55-pillar__ico{color:#C48E18;background:color-mix(in srgb,#E8B23A 18%,transparent)}
.kiz .p55-pillars .p55-pillar:nth-child(3) li svg{color:#C48E18}

.kiz .p55-steps .p55-step:nth-child(1) .p55-step__num{background:linear-gradient(135deg,#D97A2B,#B85F1B);color:#241505}
.kiz .p55-steps .p55-step:nth-child(2) .p55-step__num{background:linear-gradient(135deg,#1E9E6A,#147A50);color:#fff}
.kiz .p55-steps .p55-step:nth-child(3) .p55-step__num{background:linear-gradient(135deg,#E8B23A,#C48E18);color:#241505}
.kiz .p55-classes__media .badge{background:var(--accent-2);color:#3a2c08}
.kiz .p55-offer__aside::after{background:radial-gradient(circle,rgba(30,158,106,.4),transparent 60%)}
.kiz .p55-offer__tag{background:var(--accent-2);color:#3a2c08}

/* ---------------------------------------------------------
   HERO propio — titular Kizomba
   --------------------------------------------------------- */
.kiz-hero__badge{display:inline-flex;align-items:center;gap:.6em;padding:.55em 1.15em;border-radius:999px;
  background:color-mix(in srgb,var(--pop) 18%,transparent);border:1px solid color-mix(in srgb,var(--pop) 48%,transparent);
  color:#fff;font-weight:800;font-size:.82rem;letter-spacing:.13em;text-transform:uppercase;backdrop-filter:blur(4px);margin-bottom:22px}
.kiz-hero__badge .dot{width:9px;height:9px;border-radius:50%;background:var(--pop);box-shadow:0 0 0 4px color-mix(in srgb,var(--pop) 26%,transparent)}
.kiz-hero h1 .fire{background:linear-gradient(100deg,#E8B23A 0%,#D97A2B 50%,#1E9E6A 120%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 4px 24px rgba(217,122,43,.32))}

/* ---------------------------------------------------------
   ORIGEN — de dónde viene la kizomba (mini-mapa África)
   --------------------------------------------------------- */
.kiz-origin{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,66px);align-items:center}
.kiz-origin__badge{display:inline-flex;align-items:center;gap:.6em;font-weight:800;font-size:.82rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent-2);margin-bottom:10px}
.kiz-origin__pin{position:relative;aspect-ratio:1;max-width:400px;width:100%;margin-inline:auto;
  display:grid;place-items:center;
  background:radial-gradient(circle at 50% 42%,color-mix(in srgb,var(--primary) 24%,transparent),transparent 66%)}
.kiz-africa{position:relative;width:82%;aspect-ratio:710/760;margin-inline:auto;
  filter:drop-shadow(0 22px 50px rgba(217,122,43,.45))}
.kiz-africa img{width:100%;height:100%;object-fit:contain;display:block}
.kiz-africa__angola{position:absolute;left:39%;top:65%;width:12%;aspect-ratio:1;transform:translate(-50%,-50%);
  border-radius:50%;background:#1E9E6A;border:2.5px solid #EBD9A8;
  box-shadow:0 0 0 6px color-mix(in srgb,#1E9E6A 30%,transparent),0 6px 16px rgba(30,158,106,.6)}
.kiz-africa__angola::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:30%;height:30%;border-radius:50%;background:#fff}
.kiz-origin__tag{position:absolute;bottom:2%;left:50%;transform:translateX(-50%);white-space:nowrap;
  font-weight:800;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-2);
  background:color-mix(in srgb,var(--surface) 82%,transparent);border:1px solid var(--line);
  padding:.5em 1.1em;border-radius:999px;backdrop-filter:blur(6px)}

/* ---------------------------------------------------------
   BANDA DE CIFRAS
   --------------------------------------------------------- */
.kiz-figs{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,26px);text-align:center}
.kiz-fig{padding:8px}
.kiz-fig b{display:block;font-family:var(--font-display);font-size:clamp(2.6rem,5vw,4rem);line-height:1;
  background:linear-gradient(120deg,#fff,#FBE4BE);-webkit-background-clip:text;background-clip:text;color:transparent}
.kiz-fig span{display:block;margin-top:6px;font-weight:700;font-size:.98rem;color:color-mix(in srgb,var(--band-ink) 82%,transparent)}

/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */
@media (max-width:860px){
  .kiz-origin{grid-template-columns:1fr}
  .kiz-figs{grid-template-columns:repeat(2,1fr);gap:26px 14px}
}

/* ---------- Velo del hero cuando hay vídeo (móvil) ----------
   El velo de esta landing es solo color: dos manchas, naranja y verde, sin
   nada oscuro. Funcionaba porque detrás había un fondo negro, pero con el
   vídeo de la sala —muy claro— el texto blanco dejaba de leerse. Se le pone
   una base oscura debajo y se mantienen las dos manchas, que son las que dan
   el color de la kizomba. Solo en móvil: en ordenador no hay vídeo. */
@media (max-width:899px){
  body.kiz .hero__bg::after{
    background:
      radial-gradient(120% 80% at 50% 108%, rgba(217,122,43,.42), rgba(0,0,0,0) 60%),
      radial-gradient(90% 60% at 85% 0%, rgba(30,158,106,.26), rgba(0,0,0,0) 55%),
      linear-gradient(180deg, rgba(10,6,4,.56) 0%, rgba(10,6,4,.6) 42%, rgba(10,6,4,.9) 100%);
  }
}