/* =========================================================
   muta — caminos de marca s1 y s2 (propuesta fichaclaps, 16/09/2026)
   Todo va bajo html[data-marca]: sin el atributo no cambia nada.
   Medidas sacadas del PDF:
     tipografía  Mona Sans Display SemiExpanded, Bold y ExtraBold
     etiqueta    alto 1,575 veces el cuerpo de la palabra; aire lateral ~0,5
     s1          esquinas pixeladas: muesca de 0,27 del cuerpo
     s2          esquinas redondeadas
   ========================================================= */

html[data-marca]{
  --m-blanco:#FFFFFF;
  --m-negro:#000000;
  --m-verde:#00FDAD;
  --m-rosa:#FFA1FF;
  --m-azul:#0000FF;
  --m-mona:"Mona Sans","Helvetica Neue",Arial,sans-serif;
}
html[data-marca="s2"]{ --m-azul:#8B00FF; }   /* en s2 el azul pasa a violeta */

html[data-marca] body{font-family:var(--m-mona);font-stretch:100%;background:var(--m-negro)}
html[data-marca] ::selection{background:var(--m-verde);color:var(--m-negro)}

/* ---------- display: SemiExpanded ExtraBold ---------- */
html[data-marca] :is(.titular,.plan h3,.lg1,.capsula .nombre,.titulo-cap){
  font-family:var(--m-mona);font-stretch:112.5%;font-weight:800;letter-spacing:-.025em}
html[data-marca] .titular{font-size:clamp(34px,6.2vw,108px);line-height:.92;max-width:14ch}
html[data-marca] :is(.bajada,.claim,.plan .precio){
  font-family:var(--m-mona);font-stretch:112.5%;font-weight:700;letter-spacing:-.02em;font-style:normal}
html[data-marca] .kicker{font-stretch:112.5%;font-weight:600;opacity:.7}

/* ---------- el logo ---------- */
html[data-marca] .lg1{line-height:.8}
html[data-marca] .lg2{display:block;height:1em;width:auto;fill:currentColor}
html[data-marca] .lg2 .vacia{fill:var(--m-verde)}
/* s1: la etiqueta vacía es un cuadrado pixelado que apoya en la línea de base */
html[data-marca] .vacia:is(i){display:inline-block;width:.535em;height:.535em;margin-left:.064em;
  background:var(--m-verde);vertical-align:baseline;
  clip-path:polygon(16.6% 0,83.4% 0,83.4% 17.3%,100% 17.3%,100% 82.7%,83.4% 82.7%,83.4% 100%,16.6% 100%,16.6% 82.7%,0 82.7%,0 17.3%,16.6% 17.3%)}

/* ---------- la etiqueta con palabra ---------- */
html[data-marca] .chip{display:inline-flex;align-items:center;height:1.575em;padding:0 .55em;
  font-stretch:112.5%;font-weight:700;letter-spacing:-.02em;line-height:1;white-space:nowrap;
  background:var(--chip-fondo,var(--m-negro));color:var(--chip-letra,var(--m-blanco))}
html[data-marca="s1"] .chip{--n:.27em;
  clip-path:polygon(var(--n) 0,calc(100% - var(--n)) 0,calc(100% - var(--n)) var(--n),100% var(--n),100% calc(100% - var(--n)),
    calc(100% - var(--n)) calc(100% - var(--n)),calc(100% - var(--n)) 100%,var(--n) 100%,var(--n) calc(100% - var(--n)),
    0 calc(100% - var(--n)),0 var(--n),var(--n) var(--n))}
html[data-marca="s2"] .chip{border-radius:.2em;padding:0 .45em}

/* ---------- barra ---------- */
html[data-marca] .top{color:var(--m-blanco)}
html[data-marca] .top.claro{color:var(--m-negro)}
html[data-marca] .top .logo{font-size:22px;display:flex;align-items:flex-end}
html[data-marca="s2"] .top .logo{font-size:19px}
html[data-marca] .top ul{font-stretch:112.5%;font-weight:600;font-size:12.5px}
@media(max-width:820px){
  html[data-marca] .top{background:rgba(0,0,0,.86)}
  html[data-marca] .top.claro{background:rgba(255,255,255,.92)}
}

/* ---------- 01 · latente ---------- */
html[data-marca] .latente :is(.marca,.dato,.sigue){mix-blend-mode:normal;color:var(--m-blanco)}
html[data-marca] .latente .logo-xl{font-size:clamp(76px,16vw,290px);display:flex;align-items:flex-end}
html[data-marca="s2"] .latente .logo-xl{font-size:clamp(48px,9vw,160px)}
html[data-marca] .latente .claim{font-size:clamp(22px,3.1vw,54px);line-height:.98;margin-top:.3em}

/* ---------- 04 · cápsulas: el color vive en el fondo ---------- */
html[data-marca] .capsula{background:var(--fondo);color:var(--letra)}
html[data-marca] .capsula :is(.incluye,.tags,.boton){color:inherit}
html[data-marca] .capsula .texto{color:inherit;opacity:.88}
html[data-marca] .capsula .boton{font-stretch:112.5%;font-weight:700}
html[data-marca] .capsula .boton:hover{background:var(--letra);color:var(--fondo)}
html[data-marca] .capsula .tags{font-stretch:112.5%;font-weight:700}
html[data-marca] .capsula .nombre{display:flex;align-items:center;flex-wrap:wrap;gap:.14em;
  font-size:clamp(46px,6.4vw,104px);line-height:.8;color:inherit}
html[data-marca] .capsula .nombre .chip{font-size:.44em}
html[data-marca="s2"] .capsula .nombre .lg2{height:.62em}
html[data-marca="s2"] .capsula .nombre .chip{font-size:calc(.62em / 1.575)}

html[data-marca="s1"] [data-capsula="paredes"]{--fondo:var(--m-rosa);--letra:var(--m-negro)}
html[data-marca="s1"] [data-capsula="sonidos"]{--fondo:var(--m-negro);--letra:var(--m-blanco);--chip-fondo:var(--m-verde);--chip-letra:var(--m-negro)}
html[data-marca="s1"] [data-capsula="talleres"]{--fondo:var(--m-verde);--letra:var(--m-negro)}
html[data-marca="s1"] [data-capsula="marcas"]{--fondo:var(--m-azul);--letra:var(--m-blanco);--chip-fondo:var(--m-blanco);--chip-letra:var(--m-negro)}

html[data-marca="s2"] [data-capsula="paredes"]{--fondo:var(--m-rosa);--letra:var(--m-negro)}
html[data-marca="s2"] [data-capsula="sonidos"]{--fondo:var(--m-azul);--letra:var(--m-blanco);--chip-fondo:var(--m-blanco);--chip-letra:var(--m-negro)}
html[data-marca="s2"] [data-capsula="talleres"]{--fondo:var(--m-verde);--letra:var(--m-negro)}
html[data-marca="s2"] [data-capsula="marcas"]{--fondo:var(--m-negro);--letra:var(--m-blanco);--chip-fondo:var(--m-verde);--chip-letra:var(--m-negro)}

/* ---------- 05 · tiers ---------- */
html[data-marca] .tiers{background:var(--m-blanco);color:var(--m-negro)}
html[data-marca] .tiers.oscuro{background:var(--m-negro);color:var(--m-blanco)}
html[data-marca] .plan{color:var(--m-blanco)}
html[data-marca="s2"] .planes{border-radius:.5rem;overflow:hidden}

/* ---------- 06 · altera ---------- */
html[data-marca] .firma{background:var(--m-negro)}
html[data-marca] .datos dd{font-stretch:112.5%;font-weight:700}
html[data-marca] .boton{font-stretch:112.5%;font-weight:700}
html[data-marca="s2"] .boton{border-radius:.35em}

/* ---------- cápsulas sobre video (v06 en adelante) ---------- */
html[data-marca] .titulo-cap{display:flex;align-items:center;flex-wrap:wrap;gap:.14em;line-height:.8;
  font-size:clamp(22px,3.5vw,62px);color:var(--m-blanco)}
html[data-marca] .top.opaca{background:var(--m-negro);color:var(--m-blanco)}
html[data-marca] .titulo-cap .chip{font-size:.44em;--chip-fondo:var(--m-blanco);--chip-letra:var(--m-negro)}
html[data-marca="s2"] .titulo-cap .lg2{height:.62em}
html[data-marca="s2"] .titulo-cap .chip{font-size:calc(.62em / 1.575)}
html[data-marca] :is(.ficha-cap .tags,.ficha-cap .boton,.indice){font-stretch:112.5%;font-weight:700}