/* Shaktiva · capa de página: metodo-l (2026-10-09). Se carga solo en esta página, después de shaktiva-fundacion.css.
   Dirección de arte: docs/05-plan-tecnico.md («Decisiones de dirección de arte») y
   docs/premium-2026-10/direccion-arte-fotos.md (cajas de rostro y object-position).
   El contenido trae ~144 estilos en línea: por eso hay !important. No se toca la BD.

   Escala de la página (6 tamaños): display --ml-h1 / --ml-h2 (53) · h3 --ml-h3 (22, el de la
   fundación; --sk-lg vale 22,4 y metía un 7.º tamaño) · cuerpo 17 · apoyo 15 · etiquetas 13.
   Ritmo (ronda 5): 64 px por lado = 128 px de aire entre dos secciones en escritorio;
   40 por lado = 80 en móvil (antes se sumaban 128+128). Radios 2-4 px. */

:root{
  --ml-tierra:#16121B;
  --ml-cosmos:#241F28;
  --ml-lila:#4A2E73;
  --ml-bruma:#B3A4C7;
  --ml-velo:#E7E2EC;
  --ml-lino:#E4DED3;
  --ml-oro:#A8813F;
  --ml-claro:#F4EEE6;          /* texto principal sobre oscuro */
  --ml-claro-2:#D3C9BE;        /* texto de apoyo sobre oscuro (9,9:1 sobre tierra) */
  --ml-tinta-2:#4A4351;        /* texto de apoyo sobre claro (7:1 sobre lino) */
  --ml-h1:var(--sk-2xl);
  --ml-h2:clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);
  --ml-h3:1.375rem;
  --ml-sec:64px;
}
@media (max-width:767px){:root{--ml-sec:40px}}

/* Secciones (selectores por contenido: el HTML no trae clases propias) */
.entry-content > .wp-block-group.shaktiva-section{
  padding-top:var(--ml-sec) !important;padding-bottom:var(--ml-sec) !important;
  margin-block-start:0 !important; /* el block-gap de WP dejaba franjas lino de 19 px entre secciones oscuras */
  scroll-margin-top:72px;
}

/* ---------- Tipografía común ---------- */
.entry-content .shaktiva-heading-lg{font-size:var(--ml-h2) !important;line-height:1.08 !important;margin-bottom:24px !important}
.entry-content .shaktiva-body-lead{font-size:var(--sk-md) !important;line-height:1.65 !important;max-width:36em !important}
.entry-content .shaktiva-section-header{margin-bottom:56px !important}
@media (max-width:767px){.entry-content .shaktiva-section-header{margin-bottom:40px !important}}
.entry-content .shaktiva-text-center .shaktiva-gold-rule{
  width:48px;margin:24px auto !important;opacity:1;background:var(--ml-oro);
}
.entry-content :is(h1,h2,h3){hyphens:manual}

/* ---------- Botón: uno por pantalla. Lino sobre oscuro (fundación), tinta sobre claro ---------- */
.entry-content .shaktiva-btn-gold{
  min-height:52px;border-radius:2px !important;box-shadow:none !important;
  font-size:var(--sk-sm) !important;white-space:nowrap;
}
.entry-content .shaktiva-btn-gold:hover{transform:none !important}

/* =========================================================
   1. HÉROE · metodo-l-voz-respiracion-bn-01 (perfil, rostro 40–59 % / 12–31 %; mira a la derecha)
   Ronda 6: héroe único del sitio (fundación §25, modelo de la Home): «que cambie la foto,
   no la maqueta». Fuera el texto y el velo a la derecha de la ronda 5.
   Escritorio (≥1024): 100svh, foto a sangre en ::after (z 0), velo SOLO a la izquierda
   (--sk-hero-velo, ::before, z 1) y el texto abajo a la izquierda (columnas de la retícula,
   máx. --sk-hero-texto-max, 96 px abajo y ≥104 arriba para la isla).
   Cómo va el rostro a la derecha: a ancho completo, una foto vertical con cover no se puede
   desplazar en horizontal (se ve todo su ancho), así que se amplía al 120 % del ancho y se
   ancla a la izquierda (0 %): el rostro pasa a x≈53–72 % del héroe, fuera del velo (0 desde
   el 44 %). Vertical al 8 %: la cara queda por debajo de la isla a 1024 y a 1440.
   Móvil (<1024): foto arriba a 50svh, fundido a tierra al pie (--sk-hero-velo-movil, solo
   en el 28 % inferior: el pecho, nunca la cara) y el texto debajo sobre tierra.
   ========================================================= */
.shaktiva-metodo-hero{
  --ml-hero-foto:url('/wp-content/uploads/2026/09/metodo-l-voz-respiracion-bn-01.webp');
  background-image:none !important; /* el degradado en línea tapaba la foto entera */
  background-color:var(--ml-tierra) !important;
  padding:0 !important;overflow:hidden;position:relative;isolation:isolate;
  min-height:100svh !important;
  display:flex !important;align-items:flex-end !important;
}
.shaktiva-metodo-hero::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:var(--ml-hero-foto) 0% 8% / 120% auto no-repeat;
  transform-origin:62% 30%; /* centro del rostro: al ampliar (sk-zoom-lento) la cara no se acerca al velo */
}
.shaktiva-metodo-hero::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:var(--sk-hero-velo);
}
.shaktiva-metodo-hero .shaktiva-hero-inner{
  position:relative;z-index:2;max-width:none !important;width:100% !important;margin:0 !important;box-sizing:border-box;
  padding:104px var(--sk-gutter) 96px max(var(--sk-gutter), calc((100% - var(--sk-grid-max)) / 2 + var(--sk-gutter))) !important;
  text-align:left !important;
}
.shaktiva-metodo-hero .shaktiva-hero-inner > *{max-width:var(--sk-hero-texto-max) !important}
/* html body main … h1: la fundación §22 fija .shaktiva-hero-title en display-2 con :is() de especificidad (0,3,3) */
html body main .entry-content .shaktiva-metodo-hero h1.shaktiva-hero-title{
  font-size:var(--sk-display-1) !important;line-height:1.04 !important;letter-spacing:-.02em !important;
  color:var(--sk-hero-tinta) !important;margin:0 0 24px !important;
}
.shaktiva-metodo-hero .shaktiva-hero-title em{font-style:italic !important;color:#C9A868 !important}
.shaktiva-metodo-hero .shaktiva-hero-subtitle{
  font-size:var(--sk-md) !important;line-height:1.6 !important;
  color:var(--sk-hero-tinta-2) !important;max-width:min(44ch, var(--sk-hero-texto-max)) !important;margin:0 0 32px !important;
}
.shaktiva-metodo-hero .shaktiva-hero-actions{justify-content:flex-start !important}
@media (min-width:1024px) and (max-width:1279px){.shaktiva-metodo-hero .shaktiva-hero-inner > *{max-width:340px !important}} /* como la Home: el velo se acaba antes */
/* La entradilla (17 px, 4,5:1) no pasa del 36 % del ancho: más allá, el velo baja de 0,35 y debajo está el pelo claro (medido: 4,2:1 a 440 px). */
@media (min-width:1280px){.shaktiva-metodo-hero .shaktiva-hero-subtitle{max-width:360px !important}}

@media (max-width:1023px){
  .shaktiva-metodo-hero{min-height:0 !important;display:block !important}
  .shaktiva-metodo-hero::after{
    bottom:auto;height:50svh;background-size:cover;background-position:50% 10%;transform-origin:55% 100%; /* desde el pie: al ampliar, la foto no asoma bajo el fundido */
  }
  .shaktiva-metodo-hero::before{bottom:auto;height:50svh;background:var(--sk-hero-velo-movil)}
  .shaktiva-metodo-hero .shaktiva-hero-inner{padding:calc(50svh + 24px) var(--sk-gutter) var(--ml-sec) !important}
  .shaktiva-metodo-hero .shaktiva-hero-inner > *{max-width:none !important}
  .shaktiva-metodo-hero .shaktiva-hero-title{margin-bottom:16px !important}
  .shaktiva-metodo-hero .shaktiva-hero-subtitle{max-width:44ch !important;margin-bottom:24px !important}
}
@media (max-width:767px){
  .shaktiva-metodo-hero{--ml-hero-foto:url('/wp-content/uploads/2026/09/metodo-l-voz-respiracion-bn-01-768x1152.webp')}
  .shaktiva-metodo-hero .shaktiva-btn-gold{width:100%}
}

/* =========================================================
   2. VSL (#vsl-video, tierra)
   Póster: metodo-l-trabajo-corporal-cuclillas-01 (rostro 32–44 % / 21–31 %).
   Sin brillo rebajado ni degradado radial sobre la cara: velo plano tierra solo
   en la roca (x56–100 %) y ahí van el botón de reproducir y la duración.
   ========================================================= */
#vsl-video .shaktiva-heading-lg{color:var(--ml-claro) !important}
#vsl-video .shaktiva-body-lead{color:var(--ml-claro-2) !important}
#vsl-video .shaktiva-vsl-frame{
  border-radius:2px !important;box-shadow:none !important;
  border:1px solid rgba(234,227,217,.14) !important;background:var(--ml-tierra) !important;
}
#vsl-video .shaktiva-vsl-frame img{filter:none !important;object-position:10% 20% !important}
#vsl-video .shaktiva-vsl-frame [style*="radial-gradient"]{
  background:none !important;isolation:isolate;
  align-items:flex-start !important;justify-content:center !important;
  padding:32px 40px 32px calc(56% + 40px) !important;text-align:left;
}
#vsl-video .shaktiva-vsl-frame [style*="radial-gradient"]::before{
  content:"";position:absolute;top:0;bottom:0;left:56%;right:0;
  background:rgba(22,18,27,.78);z-index:-1;
}
#vsl-video .vsl-play-button{
  width:64px !important;height:64px !important;border-radius:2px !important;
  background:var(--ml-lino) !important;box-shadow:none !important;
  transform:none !important;transition:background-color .25s ease !important;
}
#vsl-video .shaktiva-vsl-frame [style*="radial-gradient"]:hover .vsl-play-button{background:#F4EEE6 !important}
#vsl-video .shaktiva-vsl-frame [style*="radial-gradient"] p{
  font-family:var(--shaktiva-font-text) !important;font-size:var(--sk-sm) !important;
  letter-spacing:.14em !important;line-height:1.5;color:var(--ml-claro) !important;
  margin:24px 0 8px !important;max-width:none !important;
}
#vsl-video .shaktiva-vsl-frame span[style]{
  font-family:var(--shaktiva-font-text) !important;font-size:var(--sk-xs) !important;
  letter-spacing:.08em !important;line-height:1.5;color:var(--ml-claro-2) !important;
}
#vsl-video .shaktiva-container > div[style*="margin-top: 2rem"]{margin-top:40px !important}
#vsl-video .shaktiva-container > div[style*="margin-top: 2rem"] p{
  font-size:var(--sk-sm) !important;color:var(--ml-claro-2) !important;margin:16px auto 0 !important;
}
/* Móvil: el póster pasa a vertical 4:5 para que la foto mande; el velo
   ocupa la mitad inferior (cuerpo y roca, sin rostro). */
@media (max-width:767px){
  #vsl-video .shaktiva-vsl-frame{aspect-ratio:auto !important}
  #vsl-video .shaktiva-vsl-frame > div{padding-top:125% !important}
  #vsl-video .shaktiva-vsl-frame img{object-position:10% 14% !important}
  #vsl-video .shaktiva-vsl-frame [style*="radial-gradient"]{
    justify-content:flex-end !important;padding:24px 20px !important;
  }
  #vsl-video .shaktiva-vsl-frame [style*="radial-gradient"]::before{top:56%;left:0}
  #vsl-video .vsl-play-button{width:56px !important;height:56px !important}
  #vsl-video .shaktiva-vsl-frame [style*="radial-gradient"] p{margin-top:16px !important}
  #vsl-video .shaktiva-btn-gold{width:100%;white-space:normal}
}

/* =========================================================
   3. ¿PARA QUIÉN? (lino). Sin tarjetas blancas ni sombras: dos columnas
   abiertas con filete. Los iconos en círculo se retiran (decorativos).
   ========================================================= */
.entry-content > .wp-block-group:has([style*="minmax(320px"]){background-color:var(--ml-lino) !important}
.entry-content > .wp-block-group:has([style*="minmax(320px"]) .shaktiva-heading-lg{color:var(--ml-cosmos) !important}
.entry-content > .wp-block-group:has([style*="minmax(320px"]) [style*="minmax(320px"]{gap:64px !important}
.entry-content [style*="minmax(320px"] > div{
  background:none !important;box-shadow:none !important;border:0 !important;
  border-top:1px solid rgba(36,31,40,.18) !important;border-radius:0 !important;
  padding:32px 0 0 !important;
}
.entry-content [style*="minmax(320px"] > div > div:first-child{margin-bottom:24px !important}
.entry-content [style*="minmax(320px"] > div > div:first-child > div{display:none !important}
.entry-content [style*="minmax(320px"] h3{
  font-size:var(--ml-h3) !important;color:var(--ml-cosmos) !important;line-height:1.25;
}
.entry-content [style*="minmax(320px"] ul{font-size:var(--sk-md) !important;color:var(--ml-tinta-2) !important;gap:20px !important}
.entry-content [style*="minmax(320px"] li strong{color:var(--ml-cosmos);font-weight:600}
/* viñeta: filete de oro de 16 px en lugar del punto. El «•» se aparta con text-indent y no con font-size:0,
   que contaba como un tamaño más de la página (QA-10, 2026-10-10). */
.entry-content [style*="minmax(320px"] li > span:first-child{
  flex:0 0 16px;height:1px;margin-top:14px;text-indent:-9999px;overflow:hidden;white-space:nowrap;
  background:var(--ml-oro);color:transparent !important;
}
@media (max-width:767px){
  .entry-content > .wp-block-group:has([style*="minmax(320px"]) [style*="minmax(320px"]{gap:48px !important}
}

/* =========================================================
   4. LOS TRES MOVIMIENTOS (ronda 5). Sin fotos: la de Tamara en B/N ya está en el
   héroe y las tres tarjetas la repetían. Tres columnas de texto editorial con filete
   de oro; el mes, en minúscula de frase («Mes 1 • semanas 1 a 4»).
   Fondo: vídeo de helechos (.sk-bg-video, primer hijo; la fundación lo deja en
   opacity:0 hasta [data-sk-playing]) con su póster como fondo de la sección mientras
   tanto. Ronda 6 (Adrián): el vídeo, en SU color; nada de velo lila que lo tiña. Encima,
   solo un oscurecedor plano tierra (#16121B) al 62 % y todo el texto en lino (#F4EEE6): con #D3C9BE
   y el 55 % daba 3,3:1 sobre los helechos claros; así, ≥5,7:1 en las tres vistas.
   AA medido contra el fondo real (texto oculto, luminancia del percentil 98 bajo cada texto).
   Selector: .sk-movimientos (lo añade el contenido) o, mientras no esté, por el tríptico.
   ========================================================= */
.entry-content > .wp-block-group:is(.sk-movimientos,:has(.shaktiva-triptych-card)){
  position:relative !important;isolation:isolate;overflow:hidden;
  background:var(--ml-tierra) url('/wp-content/uploads/2026/10/video-helechos-verde-01-poster.webp') 50% 50% / cover no-repeat !important;
  color:var(--ml-claro) !important;
  --ml-mov-velo:rgba(22,18,27,.62);
  --sk-heading:#F4EEE6;--sk-ink:#F4EEE6;--sk-ink-mute:#F4EEE6;--sk-eyebrow:#F4EEE6;
  --sk-rule:rgba(244,238,230,.2);
  --ml-mov-tit:var(--ml-claro);--ml-mov-txt:var(--ml-claro);--ml-mov-acento:var(--ml-claro);
}
@media (max-width:767px){
  .entry-content > .wp-block-group:is(.sk-movimientos,:has(.shaktiva-triptych-card)){
    background-image:url('/wp-content/uploads/2026/10/video-helechos-verde-01-poster-768x432.webp') !important;
  }
}
.entry-content > .wp-block-group:is(.sk-movimientos,:has(.shaktiva-triptych-card)) > .sk-bg-video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;max-width:none;margin:0 !important;
}
.entry-content > .wp-block-group:is(.sk-movimientos,:has(.shaktiva-triptych-card))::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:var(--ml-mov-velo);
}
.entry-content > .wp-block-group:is(.sk-movimientos,:has(.shaktiva-triptych-card)) > :not(.sk-bg-video){position:relative;z-index:2}
.entry-content > .wp-block-group:is(.sk-movimientos,:has(.shaktiva-triptych-card)) .shaktiva-heading-lg{color:var(--ml-mov-tit) !important}

/* Tres columnas en escritorio, en la retícula de 12 (cada una ocupa 4). Una sola por debajo. */
.entry-content > .wp-block-group:is(.sk-movimientos,:has(.shaktiva-triptych-card)) [style*="minmax(310px"]{
  grid-template-columns:minmax(0,1fr) !important;gap:48px !important;max-width:40em;margin-inline:auto;
}
@media (min-width:1024px){
  .entry-content > .wp-block-group:is(.sk-movimientos,:has(.shaktiva-triptych-card)) > .shaktiva-container{
    max-width:var(--sk-grid-max) !important;padding-inline:var(--sk-gutter) !important;box-sizing:border-box;
  }
  .entry-content > .wp-block-group:is(.sk-movimientos,:has(.shaktiva-triptych-card)) [style*="minmax(310px"]{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;column-gap:var(--sk-grid-gap) !important;max-width:none;
  }
}
.entry-content .shaktiva-triptych-card{
  background:none !important;border:0 !important;border-top:1px solid var(--ml-oro) !important;
  border-radius:0 !important;overflow:visible !important;padding-top:24px;
}
.entry-content .shaktiva-triptych-card img{display:none !important}
.entry-content .shaktiva-triptych-card > div:first-child{height:auto !important;overflow:visible !important;position:static !important}
.entry-content .shaktiva-triptych-card > div:first-child > span{
  position:static !important;display:block;background:none !important;border:0 !important;border-radius:0 !important;
  padding:0 !important;color:var(--ml-mov-acento) !important;font-family:var(--shaktiva-font-text) !important;
  font-size:var(--sk-xs) !important;font-weight:500;letter-spacing:.04em;line-height:1.4;text-transform:lowercase;
}
.entry-content .shaktiva-triptych-card > div:first-child > span::first-letter{text-transform:uppercase}
.entry-content .shaktiva-triptych-card > div:last-child{padding:16px 0 0 !important}
.entry-content .shaktiva-triptych-card h3{
  font-size:var(--ml-h3) !important;color:var(--ml-mov-tit) !important;line-height:1.25;
  margin-bottom:8px !important;
}
.entry-content .shaktiva-triptych-card h3 + p{
  font-size:var(--sk-sm) !important;font-weight:500 !important;color:var(--ml-mov-tit) !important;
  text-transform:none !important;letter-spacing:0 !important;line-height:1.5;margin-bottom:16px !important;
}
.entry-content .shaktiva-triptych-card h3 + p + p{
  font-size:var(--sk-md) !important;color:var(--ml-mov-txt) !important;line-height:1.65 !important;
}

/* =========================================================
   5. QUÉ INCLUYE Y PRECIO (lino). Un único panel con filete, sin blanco
   ni sombra. Numerales en lila (acento), precio grande en tinta.
   ========================================================= */
.entry-content > .wp-block-group:has([style*="font-size: 2.5rem"]){background-color:var(--ml-lino) !important}
.entry-content > .wp-block-group:has([style*="font-size: 2.5rem"]) .shaktiva-heading-lg{color:var(--ml-cosmos) !important}
.entry-content > .wp-block-group:has([style*="font-size: 2.5rem"]) .shaktiva-container > div[style*="background: #FFFFFF"]{
  background:none !important;box-shadow:none !important;border-radius:2px !important;
  border:1px solid rgba(36,31,40,.18) !important;padding:56px 64px !important;
}
.entry-content > .wp-block-group:has([style*="font-size: 2.5rem"]) [style*="grid-template-columns: 1fr"]{gap:32px !important}
/* numerales */
.entry-content > .wp-block-group:has([style*="font-size: 2.5rem"]) [style*="border-radius: 50%"]{
  background:none !important;border-radius:0 !important;
  width:32px !important;min-width:32px !important;height:auto !important;
  justify-content:flex-start !important;align-items:flex-start !important;
  color:var(--ml-lila) !important;font-size:var(--ml-h3) !important;line-height:1.25;
}
.entry-content > .wp-block-group:has([style*="font-size: 2.5rem"]) [style*="border-radius: 50%"] + div h3{
  font-size:var(--ml-h3) !important;color:var(--ml-cosmos) !important;line-height:1.25;margin-bottom:8px !important;
}
.entry-content > .wp-block-group:has([style*="font-size: 2.5rem"]) [style*="border-radius: 50%"] + div p{
  font-size:var(--sk-md) !important;color:var(--ml-tinta-2) !important;line-height:1.65 !important;
  max-width:36em !important; /* ~70 caracteres por línea (Montserrat: 1ch ≈ 0,65em) */
}
/* fila del precio */
.entry-content [style*="border-top: 1px solid rgba(198,161,91,0.2)"]{
  border-top-color:rgba(36,31,40,.18) !important;margin-top:48px !important;padding-top:40px !important;
  align-items:flex-end !important;
}
/* la etiqueta ya no viene en mayúsculas (contenido, ronda 5): se reconoce por su tamaño en línea */
.entry-content [style*="border-top: 1px solid rgba(198,161,91,0.2)"] span[style*="font-size: 0.85rem"]{
  font-size:var(--sk-xs) !important;color:var(--ml-tinta-2) !important;letter-spacing:.02em !important;margin-bottom:8px !important;
}
.entry-content span[style*="font-size: 2.5rem"]{
  display:block;font-size:var(--ml-h1) !important;font-weight:400 !important;line-height:1.05;
  color:var(--ml-cosmos) !important;font-variant-numeric:lining-nums tabular-nums;letter-spacing:-.01em;
}
.entry-content [style*="border-top: 1px solid rgba(198,161,91,0.2)"] span[style*="font-size: 0.9rem"]{
  font-size:var(--sk-sm) !important;color:var(--ml-tinta-2) !important;margin-top:8px;
}
/* el botón, en tinta sobre claro */
.entry-content > .wp-block-group:has([style*="font-size: 2.5rem"]) .shaktiva-btn-gold{
  background:var(--ml-cosmos) !important;color:var(--ml-claro) !important;border:1px solid var(--ml-cosmos) !important;
}
.entry-content > .wp-block-group:has([style*="font-size: 2.5rem"]) .shaktiva-btn-gold:hover{
  background:var(--ml-lila) !important;border-color:var(--ml-lila) !important;color:var(--ml-claro) !important;
}
@media (max-width:767px){
  /* en móvil, sin marco: el doble relleno dejaba el texto en ~255 px */
  .entry-content > .wp-block-group:has([style*="font-size: 2.5rem"]) .shaktiva-container > div[style*="background: #FFFFFF"]{padding:0 !important;border:0 !important}
  .entry-content > .wp-block-group:has([style*="font-size: 2.5rem"]) [style*="grid-template-columns: 1fr"] > div{gap:16px !important}
  .entry-content > .wp-block-group:has([style*="font-size: 2.5rem"]) [style*="border-radius: 50%"]{width:24px !important;min-width:24px !important}
  .entry-content [style*="border-top: 1px solid rgba(198,161,91,0.2)"] > div{width:100%}
  .entry-content > .wp-block-group:has([style*="font-size: 2.5rem"]) .shaktiva-btn-gold{width:100%}
}

/* =========================================================
   6. CUESTIONARIO (#cualificacion, tierra). Fluent Forms 4 (ronda 3, 2026-10-09).
   Un único contenedor plano (violeta-cosmos), etiquetas visibles en Montserrat
   sin mayúsculas, campos de 48 px con borde 4,4:1 sobre el contenedor, foco claro,
   casillas con objetivo de 44 px. Vence a style.css («LUXURY FLUENT FORMS»):
   etiquetas en mayúsculas, outline:none en foco, rojo #F56C6C a 12 px y el texto
   fijo «ENVIAR MENSAJE →» en ::after. Solo presentación: el envío no se toca.
   ========================================================= */
#cualificacion .shaktiva-heading-lg{color:var(--ml-claro) !important}
#cualificacion .shaktiva-body-lead{color:var(--ml-claro-2) !important}
#cualificacion .shaktiva-container > div[style*="padding: 3rem 2.5rem"]{
  background:var(--ml-cosmos) !important;border:1px solid rgba(234,227,217,.14) !important;
  border-radius:4px !important;box-shadow:none !important;padding:48px !important;
}
#cualificacion .fluentform{color-scheme:dark}
#cualificacion .fluentform .ff-el-group{margin-bottom:32px !important}
#cualificacion .fluentform .ff-el-input--label{display:block !important;margin-bottom:8px !important;padding:0 !important}
#cualificacion .fluentform .ff-el-input--label label{
  font-family:var(--shaktiva-font-text) !important;font-size:var(--sk-sm) !important;font-weight:600 !important;
  line-height:1.45 !important;letter-spacing:0 !important;text-transform:none !important;
  color:var(--ml-claro) !important;margin:0 !important;
}
#cualificacion .fluentform .ff-el-is-required.asterisk-right label::after{color:var(--ml-claro-2) !important;margin-left:4px !important}
/* La ayuda del campo vivía en un icono azul con tooltip solo al pasar el ratón
   (ni teclado ni táctil): se muestra como texto de apoyo bajo la etiqueta. */
#cualificacion .fluentform .ff-el-tooltip{
  display:block !important;margin:4px 0 0 !important;pointer-events:none;cursor:default;
  font-size:var(--sk-sm);line-height:1.55;color:var(--ml-claro-2);max-width:40em;
}
#cualificacion .fluentform .ff-el-tooltip svg{display:none !important}
#cualificacion .fluentform .ff-el-tooltip::before{content:attr(data-content)}
#cualificacion .fluentform .ff-el-form-control{
  background:var(--ml-tierra) !important;border:1px solid rgba(228,222,211,.55) !important;border-radius:2px !important;
  color:var(--ml-claro) !important;font-family:var(--shaktiva-font-text) !important;
  font-size:var(--sk-md) !important;line-height:1.5 !important;min-height:48px;padding:12px 16px !important;
  box-sizing:border-box;max-width:100%;box-shadow:none !important;
  transition:border-color .2s ease !important;
}
#cualificacion .fluentform input.ff-el-form-control{height:48px !important}
#cualificacion .fluentform textarea.ff-el-form-control{min-height:128px !important;resize:vertical}
#cualificacion .fluentform .ff-el-form-control:hover{border-color:var(--ml-bruma) !important}
#cualificacion .fluentform .ff-el-form-control::placeholder{color:rgba(228,222,211,.62) !important;opacity:1 !important}
/* Foco: style.css lo anulaba (outline:none y fondo blanco). Anillo claro sobre tierra. */
#cualificacion .fluentform .ff-el-form-control:focus{
  background:var(--ml-tierra) !important;border-color:var(--ml-claro) !important;box-shadow:none !important;
}
#cualificacion .fluentform .ff-el-form-control:focus-visible{
  outline:2px solid var(--ml-claro) !important;outline-offset:2px !important;
}
/* Casillas (contraindicaciones y privacidad): la etiqueta entera es el objetivo, ≥44 px */
#cualificacion .fluentform .ff-el-form-check{margin:0 !important}
#cualificacion .fluentform .ff-el-form-check-label{
  display:flex !important;align-items:flex-start;gap:12px;min-height:44px;padding:10px 0;box-sizing:border-box;
  font-family:var(--shaktiva-font-text) !important;font-size:var(--sk-sm) !important;font-weight:400 !important;
  line-height:1.55 !important;color:var(--ml-claro-2) !important;cursor:pointer;margin:0 !important;
}
#cualificacion .fluentform .ff_tc_checkbox{flex:0 0 20px;display:flex;margin-top:2px}
#cualificacion .fluentform .ff-el-form-check-input{
  width:20px !important;height:20px !important;margin:0 !important;accent-color:var(--ml-bruma);cursor:pointer;
}
#cualificacion .fluentform .ff_t_c{margin:0 !important;padding:0 !important}
#cualificacion .fluentform .ff_t_c a{color:var(--ml-claro) !important;text-decoration:underline !important;text-underline-offset:3px}
#cualificacion .fluentform .ff-el-group:has(.ff-el-form-check) + .ff-el-group:has(.ff-el-form-check){margin-top:-16px !important}
/* Errores: bruma (6,7:1 sobre el contenedor) a 15 px en lugar del rojo a 12 px; campo con borde de 2 px */
#cualificacion .fluentform .ff-el-is-error .ff-el-form-control{border:2px solid var(--ml-bruma) !important}
#cualificacion .fluentform :is(.error,.text-danger),
#cualificacion .ff-errors-in-stack{
  font-family:var(--shaktiva-font-text) !important;font-size:var(--sk-sm) !important;font-weight:500 !important;
  line-height:1.45 !important;color:var(--ml-bruma) !important;margin-top:8px !important;
}
#cualificacion .fluentform .ff-el-is-error .ff-el-form-check-label{color:var(--ml-claro-2) !important}
#cualificacion .fluentform .ff-el-is-error .ff-el-form-check-label a{color:var(--ml-claro) !important}
/* Botón: el único del sitio (lino sobre oscuro, fundación §14.3 y §16). Su propio texto, no el de style.css */
#cualificacion .fluentform .ff_submit_btn_wrapper{margin:40px 0 0 !important}
#cualificacion .fluentform .ff-btn-submit{
  width:100% !important;min-height:56px !important;height:auto !important;margin:0 !important;
  padding:14px 24px !important;white-space:normal !important;line-height:1.4 !important;
}
#cualificacion .fluentform .ff-btn-submit::after{content:none !important}
#cualificacion .fluentform .ff-btn-submit:is(:hover,:focus,:focus-visible,:active){opacity:1 !important}
/* aviso deontológico: filete de oro, sin caja */
#cualificacion .shaktiva-container > div[style*="border-left"]{
  background:none !important;border-left:1px solid var(--ml-oro) !important;
  padding:0 0 0 24px !important;margin-top:56px !important;
  font-size:var(--sk-sm) !important;line-height:1.65 !important;color:var(--ml-claro-2) !important;
  max-width:66ch;
}
#cualificacion .shaktiva-container > div[style*="border-left"] strong{
  font-size:var(--sk-xs) !important;letter-spacing:.14em !important;margin-bottom:8px !important;
}
@media (max-width:767px){
  #cualificacion .shaktiva-container > div[style*="padding: 3rem 2.5rem"]{padding:32px 20px !important}
  #cualificacion .fluentform .ff-el-group{margin-bottom:24px !important}
  #cualificacion .fluentform .ff-el-group:has(.ff-el-form-check) + .ff-el-group:has(.ff-el-form-check){margin-top:-8px !important}
  #cualificacion .fluentform .ff_submit_btn_wrapper{margin-top:32px !important}
}

/* Revisión cruzada Codex (docs/premium-2026-10/codex-3-revision-paginas.md), 2026-10-09 */
.shaktiva-cobra-diagram{display:none !important} /* #5: el diagrama repetía lo que cuentan las tres etapas */

/* QA técnico (2026-10-09): ajustes tras la revisión de las hojas por página */
/* Sin banda lino de 64 px entre la última sección oscura y el pie oscuro. */
main:has(.entry-content){margin-bottom:0 !important}

/* Display de las páginas interiores: 53 px a 1440, 34 en móvil (escala cerrada, fundación §21). */
.entry-content .shaktiva-heading-lg{font-size:clamp(2.125rem, 1rem + 2.6vw, 3.3rem) !important}

/* =========================================================
   RONDA 5 (2026-10-09) · Dos columnas en escritorio
   «Por qué empiezo…» (#vsl-video), «Qué incluye» y el formulario (#cualificacion):
   desde 1024 px, título y entradilla en las columnas 1-4 de la retícula de 12
   (fundación §19: --sk-grid-*) y el contenido en las 6-12; la 5 queda de aire.
   En el formulario, el aviso «no sustituye a tratamiento médico» pasa a la columna
   izquierda, bajo la entradilla: sigue junto al formulario y a la vista.
   Por debajo de 1024, una columna (lo de arriba sin cambios).
   ========================================================= */
@media (min-width:1024px){
  :is(#vsl-video,#cualificacion,.entry-content > .wp-block-group:has([style*="font-size: 2.5rem"])) > .shaktiva-container{
    display:grid !important;grid-template-columns:repeat(var(--sk-grid-cols),minmax(0,1fr));
    column-gap:var(--sk-grid-gap);row-gap:0;align-items:start;
    width:100%;max-width:var(--sk-grid-max) !important;padding-inline:var(--sk-gutter) !important;box-sizing:border-box;
  }
  :is(#vsl-video,#cualificacion,.entry-content > .wp-block-group:has([style*="font-size: 2.5rem"])) > .shaktiva-container > *{
    grid-column:6 / -1;min-width:0;
  }
  :is(#vsl-video,#cualificacion,.entry-content > .wp-block-group:has([style*="font-size: 2.5rem"])) .shaktiva-section-header{
    grid-column:1 / span 4;grid-row:1 / span 2;margin:0 !important;text-align:left !important;
  }
  :is(#vsl-video,#cualificacion,.entry-content > .wp-block-group:has([style*="font-size: 2.5rem"])) .shaktiva-section-header .shaktiva-body-lead{margin-inline:0 !important}
  :is(#vsl-video,#cualificacion,.entry-content > .wp-block-group:has([style*="font-size: 2.5rem"])) .shaktiva-section-header .shaktiva-gold-rule{margin:24px 0 !important}

  /* Por qué empiezo: vídeo y su llamada, alineados a la izquierda de su columna */
  #vsl-video .shaktiva-container > div[style*="margin-top: 2rem"]{text-align:left !important;margin-top:32px !important}
  #vsl-video .shaktiva-container > div[style*="margin-top: 2rem"] p{margin-inline:0 !important}

  /* Qué incluye: sin caja; la lista arranca a la altura del titular y el precio conserva su filete */
  .entry-content > .wp-block-group:has([style*="font-size: 2.5rem"]) .shaktiva-container > div[style*="background: #FFFFFF"]{
    padding:0 !important;border:0 !important;
  }

  /* Formulario: el aviso, a la izquierda bajo la entradilla; la fila 2 (1fr) absorbe el alto del formulario */
  #cualificacion > .shaktiva-container{grid-template-rows:auto 1fr}
  #cualificacion .shaktiva-section-header{grid-row:1}
  #cualificacion .shaktiva-container > div[style*="padding: 3rem 2.5rem"]{grid-row:1 / span 2}
  #cualificacion .shaktiva-container > div[style*="border-left"]{grid-column:1 / span 4;grid-row:2;margin-top:48px !important}
}
@media (min-width:1024px) and (max-width:1279px){
  #cualificacion .shaktiva-container > div[style*="padding: 3rem 2.5rem"]{padding:40px 32px !important}
}

/* =========================================================
   RONDA 5 · Movimiento (excepción expresa de Adrián a la regla 70).
   Solo sin movimiento reducido; nada usa opacity ni oculta contenido.
   · Héroe: zoom lento 1 → 1,06 en 20 s, ida y vuelta (keyframes sk-zoom-lento de la fundación).
   · Póster del vídeo: escala 1,03 en 400 ms dentro de su marco (overflow:hidden en línea).
   Subrayados y entradas escalonadas son de la fundación: aquí no se repiten.
   ========================================================= */
@media (prefers-reduced-motion:no-preference){
  .shaktiva-metodo-hero::after{animation:sk-zoom-lento 20s ease-in-out infinite alternate;will-change:transform}
}
@media (prefers-reduced-motion:no-preference) and (hover:hover){
  #vsl-video .shaktiva-vsl-frame img{transition:transform .4s cubic-bezier(.16,1,.3,1) !important}
  #vsl-video .shaktiva-vsl-frame:is(:hover,:focus-within) img{transform:scale(1.03)}
}

/* =========================================================
   RONDA 5 · Precio al contado en tarjeta (Adrián: «conviértelo en una card y aprovecha
   uno de los vídeos de fondo en bucle; en móvil no hace falta»).
   ≥1024: tarjeta oscura con el vídeo del mar a sangre (.sk-precio-video, primer hijo; el JS
   no lo carga por debajo de data-sk-min="1024" ni con movimiento reducido, y la fundación lo
   deja en opacity:0 hasta [data-sk-playing]); su póster es el fondo mientras tanto.
   Velo carbón (tierra) al 78 %: el texto de apoyo (#D3C9BE) da ≥5:1 aunque debajo haya blanco puro.
   Texto en lino, precio en el escalón 53 y el botón único en su versión sobre oscuro.
   <1024: sin vídeo y el bloque como estaba.
   ========================================================= */
.sk-precio-video{display:none}
@media (min-width:1024px){
  .entry-content .sk-precio-card{
    position:relative;isolation:isolate;overflow:hidden;border-radius:4px;
    border-top:0 !important;margin-top:48px !important;padding:48px 40px !important;
    background:var(--ml-tierra) url('/wp-content/uploads/2026/10/video-mar-violeta-oleaje-01-poster.webp') 50% 50% / cover no-repeat;
    --sk-btn-bg:#EAE3D9;--sk-btn-ink:#16121B;--sk-btn-bg-hover:#FFFFFF;
  }
  .entry-content .sk-precio-card > .sk-precio-video{
    display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;margin:0;max-width:none;
  }
  .entry-content .sk-precio-card::before{
    content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:rgba(22,18,27,.78);
  }
  .entry-content .sk-precio-card > :not(.sk-precio-video){position:relative;z-index:2}
  .entry-content .sk-precio-card span[style*="font-size: 0.85rem"],
  .entry-content .sk-precio-card span[style*="font-size: 0.9rem"]{color:var(--ml-claro-2) !important}
  .entry-content .sk-precio-card span[style*="font-size: 2.5rem"]{color:var(--ml-claro) !important;font-size:var(--ml-h1) !important}
  .entry-content > .wp-block-group:has([style*="font-size: 2.5rem"]) .sk-precio-card .shaktiva-btn-gold{
    background:#EAE3D9 !important;color:#16121B !important;border-color:#EAE3D9 !important;
  }
  .entry-content > .wp-block-group:has([style*="font-size: 2.5rem"]) .sk-precio-card .shaktiva-btn-gold:hover{
    background:#FFFFFF !important;border-color:#FFFFFF !important;color:#16121B !important;
  }
  html .sk-precio-card :focus-visible{outline-color:#F4EEE6 !important;box-shadow:0 0 0 4px rgba(22,18,27,.9) !important}
}

/* =========================================================
   RONDA 6 (Adrián, 2026-10-09)
   · «Qué incluye»: titular de sección al display-2, como los demás h2 (QA v3: con el h1 del
     héroe unificado a --sk-display-hero, ~61 px, un h2 a 80 px quedaba por encima del h1).
     Escala de la página: 13 · 15 · 17 · 22 · 53 · display-hero (6 tamaños).
   · Card del precio con vídeo a ancho de caja completo (≥1024): el panel blanco pasa a
     display:contents y la card ocupa las 12 columnas bajo la lista. En móvil, sin cambios.
   · «Hablemos 20 minutos»: retrato de Tamara (sobre-mi-heroe-retrato-tamara-01, rostro
     x39–65 / y26–50). A sangre, el formulario (columnas 6-12) le tapaba la cara y el velo la
     apagaba (captura ronda6/metodo-l/antes-1440-sangre-cualificacion.png), así que va en la
     columna izquierda, recortada 4:5 y SIN velo. Es decorativa (fondo CSS, sin alt): el texto
     y el formulario no dependen de ella. En móvil, encima del titular, a 4:5 y como mucho 420 px.
   ========================================================= */
.entry-content > .wp-block-group:has([style*="font-size: 2.5rem"]) .shaktiva-heading-lg{
  font-size:var(--sk-display-2) !important;line-height:1.1 !important;letter-spacing:-.015em !important;
}
#cualificacion > .shaktiva-container::before{
  content:"";display:block;aspect-ratio:4 / 5;width:min(100%, 420px);margin:0 auto 40px;border-radius:2px;
  background:var(--ml-cosmos) url('/wp-content/uploads/2026/09/sobre-mi-heroe-retrato-tamara-01-768x1152.webp') 50% 30% / cover no-repeat;
}
@media (min-width:1024px){
  .entry-content > .wp-block-group:has([style*="font-size: 2.5rem"]) .shaktiva-section-header{grid-column:1 / span 5}
  .entry-content > .wp-block-group:has([style*="font-size: 2.5rem"]) .shaktiva-container > div[style*="background: #FFFFFF"]{display:contents !important}
  .entry-content > .wp-block-group:has([style*="font-size: 2.5rem"]) .shaktiva-container > div[style*="background: #FFFFFF"] > [style*="grid-template-columns: 1fr"]{grid-column:6 / -1;grid-row:1 / span 2}
  .entry-content .sk-precio-card{grid-column:1 / -1;grid-row:3;margin-top:80px !important;padding:64px !important}

  #cualificacion > .shaktiva-container{grid-template-rows:auto auto 1fr}
  #cualificacion > .shaktiva-container::before{grid-column:1 / span 4;grid-row:2;width:100%;margin:48px 0 0}
  #cualificacion .shaktiva-container > div[style*="padding: 3rem 2.5rem"]{grid-row:1 / span 3}
  #cualificacion .shaktiva-container > div[style*="border-left"]{grid-row:3}
}

/* =========================================================
   Héroe unificado v2 (fundación §27; Adrián: «la tipografía está muy grande»). Solo ≥1024.
   Mismo h1, caja, centrado vertical y velo que la Home. La entradilla ya puede llegar al 47 %:
   el velo nuevo vale 0,66 en el 46 % (el anterior, 0,35 en el 36 %).
   El h1 no cabe en 3 líneas dentro del 47 % con el texto actual (suma ~1.680 px a 60 px; el tope
   es 510-531 px por línea): queda en 4, y el <em> pasa a bloque para que cada tramo se equilibre
   por separado (con un <br> en el bloque, Chromium no aplica text-wrap:balance y dejaba
   «pero el cuerpo no / descansa.»). Ahora: «Cuando la mente / lo entiende todo, / pero el cuerpo /
   no descansa.». Las 3 líneas piden acortar el texto (ver informe QA v3).
   ========================================================= */
@media (min-width:1024px){
  html body .entry-content .shaktiva-metodo-hero{align-items:center !important;--sk-hero-velo:var(--sk-hero-velo-v2)}
  html body .entry-content .shaktiva-metodo-hero .shaktiva-hero-inner{padding-top:152px !important;padding-bottom:24px !important}
  html body .entry-content .shaktiva-metodo-hero .shaktiva-hero-inner > *,
  html body .entry-content .shaktiva-metodo-hero .shaktiva-hero-subtitle{max-width:var(--sk-hero-texto-v2) !important}
  html body main .entry-content .shaktiva-metodo-hero h1.shaktiva-hero-title{
    font-size:var(--sk-display-hero) !important;line-height:1.02 !important;letter-spacing:-.015em !important;text-wrap:balance;
  }
  html body main .entry-content .shaktiva-metodo-hero h1.shaktiva-hero-title em{display:block;text-wrap:balance}
  html body main .entry-content .shaktiva-metodo-hero h1.shaktiva-hero-title br{display:none} /* el bloque ya corta; el <br> sumaba una línea vacía */
}

/* =========================================================
   QA v3 · Card de precio clicable entera (≥1024; patrón de la Home). Un único destino
   (#cualificacion), sin anidar enlaces: el ::before del botón cubre la card. El envoltorio del
   botón pasa a position:static para que el ::before tome la card como bloque contenedor, y sube
   con z-index como elemento flex (la card es flex), por encima del velo (z 1) y del precio (z 2).
   Cursor, foco visible en toda la card (lila sobre lino, 8:1) y zoom del 3 % del vídeo anclado
   al pie (transform-origin 50% 100%). Sin zoom con movimiento reducido (allí no hay vídeo).
   Altea: su card de reserva lleva dos enlaces y un details: no admite «toda la card, un destino».
   ========================================================= */
@media (min-width:1024px){
  .entry-content .sk-precio-card{cursor:pointer}
  .entry-content .sk-precio-card > div:has(> .shaktiva-btn-gold){position:static;z-index:3}
  .entry-content .sk-precio-card .shaktiva-btn-gold::before{content:"";position:absolute;inset:0;z-index:0}
  .entry-content .sk-precio-card:has(.shaktiva-btn-gold:focus-visible){outline:2px solid var(--shaktiva-lila-espacial);outline-offset:4px}
}
@media (min-width:1024px) and (hover:hover) and (prefers-reduced-motion:no-preference){
  .entry-content .sk-precio-card > .sk-precio-video{transform-origin:50% 100%;transition:transform .4s var(--sk-ease),opacity .6s ease}
  .entry-content .sk-precio-card:hover > .sk-precio-video{transform:scale(1.03)}
}