/* Shaktiva · capa de página: sobre-mi (2026-10-09). Se carga solo en esta página, después de shaktiva-fundacion.css. */

/* ============================================================
   SOBRE MÍ · DIRECCIÓN DE ARTE 2026-10 (Adrián)
   ------------------------------------------------------------
   Fotos de Tamara protagonistas, a sangre. El color entra como
   velo de token solo en la zona sin rostro. Nunca velo sobre la
   cara. Ronda 4 (héroe y manto, fotos horizontales): el velo es un
   degradado que parte de 0 en Tamara y crece solo bajo el texto.
   Cajas de rostro: docs/premium-2026-10/direccion-arte-fotos.md §2
   y los comentarios de cada bloque.
   Ritmo (escritorio): foto a sangre + velo tierra · claro partido ·
   foto a sangre + velo tierra · claro partido · foto a sangre + velo lila.
   Escala de la página (6 tamaños): xs 13 · sm 15 · md 17 ·
   lg 22 · 2xl · 3xl. Todo es reversible vaciando este fichero.
   ============================================================ */

body.page .entry-content{
  --sm-gutter:max(72px, calc(50vw - 640px));
  --sm-velo-tierra:rgba(22,18,27,.80);
  --sm-velo-lila:rgba(74,46,115,.76);
}

/* ---------- Comunes ---------- */
/* Párrafos con estilo en línea (1.05rem, #4A4556, 1.8): a la escala y a los tokens. */
.entry-content > section p{
  font-size:var(--sk-md) !important;
  line-height:1.6 !important;
  max-width:66ch;
  text-wrap:pretty;
}
.entry-content > :is(.shaktiva-story-editorial) p{color:var(--shaktiva-carbon-soft) !important}
/* Sin antetítulos (docs/05-plan-tecnico.md): cada titular abre su acto; ningún margen depende de un elemento previo. */
.entry-content :is(.shaktiva-story-h2,.shaktiva-deontological-lead){
  font-family:var(--shaktiva-font-display) !important;
  font-size:var(--sk-2xl) !important;font-weight:400 !important;
  line-height:1.1 !important;letter-spacing:-.015em !important;
  text-wrap:balance;margin:0 0 32px !important;
}
/* Botón único (fundación 14.3): sin destello, medida táctil, texto a la escala. */
.entry-content .shaktiva-btn-glow{
  display:inline-flex !important;align-items:center;justify-content:center;
  min-height:48px;padding:14px 32px !important;
  font-size:var(--sk-sm) !important;letter-spacing:.06em !important;line-height:1.3 !important;
  text-align:center;
}
.entry-content .shaktiva-btn-glow::after{display:none !important}
/* Sellos «El umbral…» / «Soberanía…»: pie de foto plano en la esquina, sin sombra. */
.entry-content .shaktiva-story-badge-overlap{
  top:auto !important;right:auto !important;bottom:0 !important;left:0 !important;
  padding:16px 24px !important;
  background:var(--shaktiva-violeta-deep) !important;
  color:var(--shaktiva-lila-bruma) !important;
  border:0 !important;border-radius:0 !important;box-shadow:none !important;
  font-size:var(--sk-md) !important;line-height:1.3 !important;
  z-index:2;max-width:calc(100% - 20px);
}
/* Todas las fotos de la página: color natural, sin filtros. */
.entry-content > section img{filter:none !important}

/* ============================================================
   1. HÉROE ÚNICO (fundación §25: «que cambie la foto, no la maqueta»)
   Maqueta calcada del héroe de la Home (home.css, .sk-home-hero*).
   Foto: sobre-mi-tamara-chal-azul-mar-h-01 (2400×1350).
   Rostro x49–54 / y19–28 · chal x42–58 · manos x38 y x64.
   · Escritorio (≥1024): 100svh, foto a sangre con OP 0 % (la foto se
     ancla a la izquierda y Tamara se va a la derecha: con «cover» el
     rostro nunca queda antes del 49 % del ancho; 54-60 % a 1440,
     65-70 % a 1024). Velo var(--sk-hero-velo): 0 desde el 44 %.
     Texto abajo en la retícula de la Home, 96 px de aire inferior.
   · Móvil (<1024): foto arriba a 50svh (tableta: 4:5 hasta 78svh,
     como la Home), texto debajo sobre tierra.
   El héroe sigue siendo hijo directo de .entry-content (capítulos apilados):
   aquí no se toca su position.
   ============================================================ */
.entry-content > .shaktiva-cinema-hero{
  --hero-col:var(--sk-hero-texto-max);--hero-sec:72px;
  /* Velo: el token de la fundación (0,35 al 36 %, 0 al 44 %) se pensó para la roca oscura de la
     Home; sobre este mar claro dejaba el final de la columna de texto en 1,3:1 (medido, p98).
     Misma idea (tierra a la izquierda, 0 antes del sujeto), con la meseta hasta el borde real
     del texto (--velo-p) y caída en 160 px, como mucho hasta el 48 % (52 % en pantallas ≤16:10,
     donde con OP 0 % el rostro empieza en el ≥54 %). */
  --velo-p:calc(max(0px, (100% - var(--sk-grid-max)) / 2) + var(--sk-gutter) + var(--hero-col) + 16px);
  --velo-c:min(calc(var(--velo-p) + 160px), var(--velo-tope, 48%));
  --sk-hero-velo:linear-gradient(90deg,rgba(22,18,27,.88) 0%,rgba(22,18,27,.82) var(--velo-p),
    rgba(22,18,27,.6) calc(var(--velo-p) + (var(--velo-c) - var(--velo-p)) * .25),
    rgba(22,18,27,.36) calc(var(--velo-p) + (var(--velo-c) - var(--velo-p)) * .5),
    rgba(22,18,27,.14) calc(var(--velo-p) + (var(--velo-c) - var(--velo-p)) * .75),
    rgba(22,18,27,0) var(--velo-c));
  display:flex !important;flex-direction:column !important;
  justify-content:flex-end !important;align-items:stretch !important;
  min-height:100svh !important;padding:0 !important;overflow:hidden;
  background:#16121B !important;
}
.entry-content .shaktiva-cinema-hero .shaktiva-hero-overlay{display:none !important}
.entry-content .shaktiva-cinema-hero .shaktiva-hero-bg-layer{
  position:absolute !important;inset:0 !important;width:100% !important;height:100% !important;
  z-index:0;overflow:hidden;
}
.entry-content .shaktiva-cinema-hero .shaktiva-hero-bg-img{
  position:absolute;inset:0;display:block;width:100%;height:100% !important;
  object-fit:cover;object-position:0% 30% !important;filter:none !important;
}
/* Velo solo a la izquierda (escritorio) o fundido al pie de la foto (móvil). */
.entry-content .shaktiva-cinema-hero .shaktiva-hero-bg-layer::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:var(--sk-hero-velo);
}
.entry-content .shaktiva-cinema-hero-content{
  position:relative;z-index:2;box-sizing:border-box;
  width:100%;max-width:var(--sk-grid-max) !important;margin:0 auto !important;
  /* 104 px libres arriba para la isla; 96 px de aire inferior, como la Home */
  padding:104px var(--sk-gutter) 96px !important;
  text-align:left !important;color:var(--sk-hero-tinta) !important;
}
.entry-content .shaktiva-cinema-hero-content > *{max-width:var(--hero-col)}
.entry-content .shaktiva-cinema-hero .shaktiva-cinema-h1{
  font-family:var(--shaktiva-font-display) !important;font-weight:400 !important;
  font-size:var(--sk-display-1) !important;line-height:1.04 !important;letter-spacing:-.02em !important;
  color:var(--sk-hero-tinta) !important;text-shadow:none !important;margin:0 0 32px !important;
}
.entry-content .shaktiva-cinema-hero .shaktiva-cinema-h1 .shaktiva-gold-italic{
  font-style:italic !important;color:var(--shaktiva-oro-luz) !important;
}
.entry-content > section.shaktiva-cinema-hero .shaktiva-cinema-lead{
  font-size:var(--sk-md) !important;line-height:1.6 !important;
  color:var(--sk-hero-tinta-2) !important;text-shadow:none !important;
  max-width:min(44ch, var(--hero-col)) !important;margin:0 0 32px !important;
}
.entry-content .shaktiva-cinema-hero .shaktiva-cinema-cta-group{
  display:flex !important;justify-content:flex-start !important;gap:0 !important;margin:8px 0 0 !important;
}
/* Un CTA por pantalla. «Ver el próximo retiro» se repite como botón en el Acto III. */
.entry-content .shaktiva-cinema-cta-group .shaktiva-link-gold{display:none !important}
.entry-content .shaktiva-cinema-hero .shaktiva-cinema-cta-group .shaktiva-btn-glow{
  display:inline-flex !important;width:auto !important;min-height:48px;margin:0 !important;
  padding:0 28px !important;line-height:1.7 !important;
  font-size:.8125rem !important;letter-spacing:.1em !important;
}
@media (min-width:1024px) and (max-width:1279px){
  .entry-content > .shaktiva-cinema-hero{--hero-col:340px} /* como la Home */
}
@media (min-width:1024px) and (max-aspect-ratio:16/10){.entry-content > .shaktiva-cinema-hero{--velo-tope:52%}}
/* Pantalla vertical ≥1024 (tableta grande en retrato): con OP 0 % el rostro saldría por la derecha. */
@media (min-width:1024px) and (orientation:portrait){
  .entry-content .shaktiva-cinema-hero .shaktiva-hero-bg-img{object-position:42% 30% !important}
}
@media (max-width:1023px){
  .entry-content > .shaktiva-cinema-hero{display:block !important;min-height:0 !important;--hero-col:100%}
  .entry-content .shaktiva-cinema-hero .shaktiva-hero-bg-layer{
    position:relative !important;inset:auto !important;
    height:min(125vw, 78svh) !important; /* 4:5 hasta 78svh, como la Home */
  }
  .entry-content .shaktiva-cinema-hero .shaktiva-hero-bg-img{object-position:52% 30% !important}
  .entry-content .shaktiva-cinema-hero .shaktiva-hero-bg-layer::after{background:var(--sk-hero-velo-movil)}
  /* 24 px de la retícula − 8 px del texto, igual que la Home */
  .entry-content .shaktiva-cinema-hero-content{padding:16px var(--sk-gutter) var(--hero-sec) !important}
  .entry-content > .shaktiva-cinema-hero{--hero-sec:128px}
}
@media (max-width:767px){
  .entry-content > .shaktiva-cinema-hero{--hero-sec:72px}
  .entry-content .shaktiva-cinema-hero .shaktiva-hero-bg-layer{height:50svh !important}
  .entry-content .shaktiva-cinema-hero .shaktiva-cinema-h1{margin-bottom:16px !important}
  .entry-content > section.shaktiva-cinema-hero .shaktiva-cinema-lead{margin-bottom:20px !important}
}

/* ============================================================
   2 y 4. ACTO I y ACTO III · partidos, foto a sangre al borde
   ============================================================ */
.entry-content .shaktiva-story-editorial{
  max-width:none !important;margin:0 !important;padding:0 !important;
  gap:0 !important;background:var(--shaktiva-lino);
}
.entry-content .shaktiva-story-editorial .shaktiva-story-frame{
  border:0 !important;border-radius:0 !important;box-shadow:none !important;
}
.entry-content .shaktiva-story-editorial .shaktiva-story-frame img{display:block}
/* Manto: rostro 33–45 / 21–31. Mar: rostro 49–57 / 19–25, brazos x18–86 (se ve todo el ancho). */
.entry-content .shaktiva-story-frame img[src*="iniciacion-manto"]{object-position:25% 17% !important}
.entry-content .shaktiva-story-frame img[src*="presente-conexion-mar"]{object-position:50% 20% !important}
/* Fotos actuales de los actos (cambiadas en la BD, ronda 4): encuadres de direccion-arte-fotos.md.
   Retrato: rostro x39–65 / y26–50. Vientre: rostro x34–44 / y39–45. */
.entry-content .shaktiva-story-frame img[src*="heroe-retrato-tamara"]{object-position:55% 30% !important}
.entry-content .shaktiva-story-frame img[src*="vientre-respiracion"]{object-position:14% 43% !important}
.entry-content .shaktiva-editorial-pullquote{
  background:none !important;border-radius:0 !important;
  border-left:1px solid var(--shaktiva-oro-antiguo) !important;
  padding:4px 0 4px 32px !important;margin:40px 0 0 !important;
  font-size:1.375rem !important;line-height:1.45 !important;
  color:var(--shaktiva-violeta-cosmos) !important;max-width:40ch;
}

/* ============================================================
   3. ACTO II · respiración en las rocas, a sangre
   Rostro 33–46 / 19–27. Velo tierra plano a la derecha (x58–100),
   lejos del rostro. Sin parallax fijo.
   ============================================================ */
.entry-content .shaktiva-parallax-break{
  background-attachment:scroll !important;
  background-position:10% 20% !important;
  margin:0 !important;padding:0 !important;
}
.entry-content .shaktiva-break-overlay{background:var(--sm-velo-tierra) !important}
.entry-content .shaktiva-break-content{text-align:left !important;max-width:none !important;margin:0 !important}
.entry-content .shaktiva-break-quote{
  font-size:var(--sk-2xl) !important;line-height:1.15 !important;letter-spacing:-.01em !important;
  color:var(--shaktiva-lino) !important;text-shadow:none !important;
  margin:0 0 32px !important;max-width:none !important;
}
/* Firma: solo «Tamara». Se lee como nombre, no como etiqueta en mayúsculas (17 px, ya en la escala). */
.entry-content .shaktiva-break-author{
  display:block;font-size:var(--sk-md) !important;font-weight:500;
  letter-spacing:.01em !important;text-transform:none !important;
  color:var(--shaktiva-lino) !important;
  padding-top:24px;border-top:1px solid var(--shaktiva-oro-filete);
}

/* ============================================================
   5. «No prometemos sanar tu vida» · sobre-mi-tamara-manto-blanco-rocas-h-02
   (-02, 2400×1242; sustituye a la -01, que tenía una costura)
   Rostro x42–48 / y12–24 · figura con manto x38–60 · roca oscura x62–100.
   Escritorio (≥1024): foto a sangre anclada a la derecha (OP 100%) para
   llevar a Tamara a la izquierda; velo lila #4A2E73 en degradado que es 0
   hasta el borde del manto y solo cubre la roca, donde va el texto.
   Móvil y tableta: foto arriba, texto debajo sobre lila sólido.
   ============================================================ */
.entry-content .shaktiva-deontological-split{
  --sk-btn-bg:#EAE3D9;--sk-btn-ink:#16121B;--sk-btn-bg-hover:#F4EEE6;
  max-width:none !important;margin:0 !important;padding:0 !important;
  border-radius:0 !important;box-shadow:none !important;
  position:relative;
}
.entry-content .shaktiva-deontological-right img{object-position:48% 40% !important;display:block}
.entry-content .shaktiva-deontological-left{color:var(--shaktiva-lino)}
.entry-content .shaktiva-deontological-left :is(h2,p,span){color:var(--shaktiva-lino) !important}
.entry-content .shaktiva-deontological-lead{margin-bottom:16px !important}
.entry-content .shaktiva-deontological-italic{
  font-size:1.375rem !important;line-height:1.35 !important;margin:0 0 32px !important;
}
.entry-content :is(.shaktiva-deontological-split,.shaktiva-parallax-break) :focus-visible{
  outline-color:#F4EEE6 !important;box-shadow:0 0 0 4px rgba(22,18,27,.9) !important;
}

/* ============================================================
   ESCRITORIO (≥ 900 px)
   ============================================================ */
@media (min-width:900px){
  /* 1 · Héroe: ver bloque ≥1024 más abajo (una foto horizontal a 900–1023 perdía la cara) */

  /* 2 · Acto I: manto a sangre a la izquierda */
  .entry-content .shaktiva-story-editorial{
    display:grid !important;grid-template-columns:46fr 54fr !important;align-items:stretch !important;
  }
  .entry-content .shaktiva-story-editorial .shaktiva-story-visual{align-self:stretch;min-height:100%}
  .entry-content .shaktiva-story-editorial .shaktiva-story-frame{
    position:absolute !important;inset:0;aspect-ratio:auto !important;height:100%;
  }
  .entry-content .shaktiva-story-editorial .shaktiva-story-narrative{
    align-self:center;padding:128px var(--sm-gutter) 128px 96px !important;
  }
  /* 4 · Acto III: texto a la izquierda, mar a sangre a la derecha */
  .entry-content .shaktiva-story-editorial:has(> .shaktiva-story-narrative:first-child){
    grid-template-columns:54fr 46fr !important;
  }
  .entry-content .shaktiva-story-editorial > .shaktiva-story-narrative:first-child{
    padding:128px 96px 128px var(--sm-gutter) !important;
  }

  /* 3 · Acto II: foto a sangre, velo tierra en x58–100 */
  .entry-content .shaktiva-parallax-break{
    display:grid !important;grid-template-columns:58fr 42fr;
    min-height:min(calc(100svh - 72px), 900px) !important;
  }
  .entry-content .shaktiva-break-overlay{left:58% !important;width:42% !important}
  .entry-content .shaktiva-break-content{
    grid-column:2;align-self:center;padding:128px var(--sm-gutter) 128px 64px !important;
  }
  /* 5 · «No prometemos…»: ver bloque ≥1024 más abajo */
}

/* ============================================================
   MÓVIL Y TABLETA (< 900 px): foto primero, texto debajo
   sobre el mismo token al 100 % (sin párrafos sobre la imagen).
   ============================================================ */
@media (max-width:899px){
  /* 1 · Héroe: ver bloque ≤1023 más abajo */

  /* 2 y 4 · foto 4:5 a ancho completo, texto sobre lino */
  .entry-content .shaktiva-story-editorial{
    display:flex !important;flex-direction:column !important;
    padding:0 !important;padding-inline:0 !important;
  }
  .entry-content .shaktiva-story-editorial .shaktiva-story-visual{order:-1;width:100%}
  .entry-content .shaktiva-story-editorial .shaktiva-story-frame{aspect-ratio:4 / 5 !important}
  .entry-content .shaktiva-story-editorial .shaktiva-story-narrative{
    padding:56px 20px 72px !important;padding-inline:20px !important;
  }
  .entry-content .shaktiva-story-editorial .shaktiva-story-narrative > div[style]{margin-top:32px !important}
  .entry-content .shaktiva-story-editorial .shaktiva-btn-glow{width:100%}
  .entry-content .shaktiva-editorial-pullquote{padding-left:20px !important}

  /* 3 · foto arriba (ventana de 440 px), cita sobre banda tierra plana abajo */
  .entry-content .shaktiva-parallax-break{
    display:block !important;min-height:0 !important;padding:440px 0 0 !important;
  }
  .entry-content .shaktiva-break-overlay{display:none !important}
  .entry-content .shaktiva-break-content{
    background:rgba(22,18,27,.86);padding:48px 20px 64px !important;
  }

  .entry-content .shaktiva-deontological-split .shaktiva-btn-glow{width:100%}
}

/* ============================================================
   1 y 5 · MÓVIL Y TABLETA (< 1024 px): foto horizontal arriba,
   texto debajo sobre el token sólido (tierra / lila). Sin velo.
   Teléfono 8:9 (héroe) y 4:5 (manto); tableta 3:2.
   ============================================================ */
@media (max-width:1023px){
  /* (1 · Héroe: ver el bloque 1, héroe único) */
  .entry-content .shaktiva-deontological-split{display:flex !important;flex-direction:column !important}
  .entry-content .shaktiva-deontological-right{order:-1;min-height:0 !important;aspect-ratio:4 / 5}
  .entry-content .shaktiva-deontological-right img{height:100% !important}
  .entry-content .shaktiva-deontological-left{
    background:var(--shaktiva-lila-espacial) !important;padding:56px 20px 56px !important;
  }
}
@media (min-width:600px) and (max-width:1023px){
  .entry-content .shaktiva-deontological-right{aspect-ratio:3 / 2}
  .entry-content .shaktiva-deontological-left{padding:64px var(--sk-gutter) 64px !important}
  .entry-content .shaktiva-deontological-split .shaktiva-btn-glow{width:auto}
}

/* ============================================================
   1 y 5 · ESCRITORIO (≥ 1024 px): fotos a sangre con velo en degradado.
   Alto: la ventana, entre 640 px y 62,5vw (por encima de 62,5vw
   la foto 16:9 se recortaría tanto de lado que la cara saldría del cuadro).
   --sm-*-cero: donde el velo vale 0 (borde del cuerpo de Tamara).
   --sm-*-pleno: donde llega a su opacidad; el texto empieza después.
   ============================================================ */
@media (min-width:1024px){
  .entry-content{
    /* La cabecera es una isla flotante (alto 0 en el flujo): el héroe empieza en y=0. */
    --sm-alto-foto:max(640px, min(100svh, 62.5vw));
    /* manto: el texto acaba en el medianil derecho; columna como máximo del 42 % */
    --sm-deo-col:42%;--sm-deo-cero:48%;--sm-deo-pleno:57%;
  }
  /* (1 · Héroe: ver el bloque 1, héroe único) */

  /* Columna del texto = su contenido (titular y entradilla con cortes manuales),
     pegada al medianil derecho y como máximo del 42 %. */
  .entry-content .shaktiva-deontological-split{
    display:grid !important;grid-template-columns:minmax(0,1fr) fit-content(var(--sm-deo-col)) !important;
    min-height:var(--sm-alto-foto);overflow:hidden;isolation:isolate;
  }
  .entry-content .shaktiva-deontological-right{
    position:absolute !important;inset:0;min-height:0 !important;z-index:0;
  }
  /* OP 90 % (1024-1279) / 100 % (≥1280): anclada a la derecha, Tamara queda a la izquierda
     y el borde del manto, antes del velo. */
  .entry-content .shaktiva-deontological-right img{
    position:absolute;inset:0;width:100%;height:100% !important;object-position:var(--sm-deo-op,90% 40%) !important;
  }
  .entry-content .shaktiva-deontological-split::before{
    --c:var(--sm-deo-cero);--d:calc(var(--sm-deo-pleno) - var(--sm-deo-cero));
    content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(90deg,
      rgba(74,46,115,0) 0%, rgba(74,46,115,0) var(--c),
      rgba(74,46,115,.09) calc(var(--c) + var(--d) * .15),
      rgba(74,46,115,.19) calc(var(--c) + var(--d) * .27),
      rgba(74,46,115,.31) calc(var(--c) + var(--d) * .40),
      rgba(74,46,115,.43) calc(var(--c) + var(--d) * .53),
      rgba(74,46,115,.57) calc(var(--c) + var(--d) * .66),
      rgba(74,46,115,.70) calc(var(--c) + var(--d) * .81),
      rgba(74,46,115,.86) var(--sm-deo-pleno), rgba(74,46,115,.86) 100%);
  }
  .entry-content .shaktiva-deontological-left{
    grid-column:2;position:relative;z-index:2;align-self:center;
    box-sizing:border-box; /* el tope del 42 % lo pone la pista fit-content() */
    background:transparent !important;
    padding:128px var(--sm-gutter) 128px 48px !important;
  }
}
@media (min-width:1280px){
  .entry-content{
    --sm-deo-col:42%;--sm-deo-cero:52%;--sm-deo-pleno:60%;
    --sm-deo-op:100% 40%;
  }
}

/* «No prometemos…» en todas las anchuras: el ancho de la columna lo dan el titular y la
   entradilla (cortes manuales); el párrafo no aporta ancho (contain) y se ajusta a él. */
.entry-content .shaktiva-deontological-left{
  display:grid !important;grid-template-columns:minmax(0,max-content);
  justify-content:start;align-content:center;
}
.entry-content .shaktiva-deontological-left > p{contain:inline-size;max-width:none}
.entry-content .shaktiva-deontological-left > div{justify-self:start}

/* Actos I y III a caja: el texto llena su columna, de medianil a medianil
   (66ch dejaba ~40 px de aire suelto a la derecha a 1440). */
@media (min-width:900px){
  .entry-content .shaktiva-story-narrative :is(p,.shaktiva-editorial-pullquote){max-width:none}
}

/* Revisión cruzada Codex (docs/premium-2026-10/codex-3-revision-paginas.md), 2026-10-09 */
.shaktiva-story-badge-overlap{display:none !important} /* #11: los sellos interrumpían las fotos */
@media (max-width:767px){
  .shaktiva-break-content{background:var(--shaktiva-violeta-cosmos) !important} /* #2: cita sobre color sólido en móvil */
}

/* QA técnico (2026-10-09): ajustes tras la revisión de las hojas por página */
main:has(.entry-content){margin-bottom:0 !important}

/* ============================================================
   Capítulos apilados en escritorio (Adrián, 2026-10-09: «interactividad»).
   Excepción expresa a la regla 70, registrada en docs/05-plan-tecnico.md.
   Cada acto se queda fijo bajo la cabecera y el siguiente sube por encima.
   · Solo escritorio (≥1024 px) y solo si el sistema no pide movimiento reducido.
   · Solo con JS (html.sk-stack-on): el JS calcula --sk-stick-top para que un acto
     más alto que la ventana se vea entero antes de quedar tapado. Sin JS, flujo normal.
   · Nada se oculta: todo el contenido es visible en cualquier caso.
   ============================================================ */
@media (min-width:1024px) and (prefers-reduced-motion:no-preference){
  /* Sin scroll-snap: con sticky corregía el desplazamiento del foco de teclado (WCAG 2.4.11). */
  /* Desplazamiento nativo instantáneo: el del foco era animado y el JS no podía corregirlo a tiempo. */
  html.sk-stack-on{scroll-behavior:auto !important}
  html.sk-stack-on .entry-content > :is(.shaktiva-cinema-hero,.shaktiva-story-editorial,.shaktiva-parallax-break,.shaktiva-deontological-split){
    position:sticky !important;
    top:var(--sk-stick-top,0px); /* la isla flota encima; los textos dejan ≥104 px arriba */
    scroll-margin-top:73px;
  }
  /* La foto de cada acto se asienta al entrar (solo transform; navegadores con scroll-driven animations). */
  @supports (animation-timeline: view()){
    html.sk-stack-on .entry-content > :is(.shaktiva-story-editorial,.shaktiva-parallax-break,.shaktiva-deontological-split) img{
      animation:sk-asentar linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 80%;
    }
    @keyframes sk-asentar{from{transform:scale(1.06)}to{transform:none}}
  }
}

/* ============================================================
   MOVIMIENTO (ronda 4, Adrián: «más dinamismo»). Excepción a la regla 70,
   con las mismas condiciones que los capítulos apilados: solo sin
   prefers-reduced-motion, nada se oculta (sin opacity), solo escala.
   Se usa la propiedad «scale» (no «transform») para no pisar la animación
   sk-asentar de los actos ni el hover.
   ============================================================ */
@media (prefers-reduced-motion:no-preference){
  /* Ken Burns del héroe: 1 → 1,06 en 20 s, ida y vuelta. El origen es el rostro
     (móvil x≈52 %; escritorio, con OP 0 %, x≈57 %; y≈24 %): la cara no se desplaza
     y no entra nunca bajo el velo. */
  .entry-content .shaktiva-cinema-hero .shaktiva-hero-bg-img{
    transform-origin:52% 24%;
    animation:sm-kenburns 20s ease-in-out infinite alternate;
  }
  @media (min-width:1024px){.entry-content .shaktiva-cinema-hero .shaktiva-hero-bg-img{transform-origin:57% 24%}}
  @keyframes sm-kenburns{from{scale:1}to{scale:1.06}}
}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  /* Hover vivo: la foto crece un 3 % dentro de su marco (overflow:hidden), 400 ms. */
  .entry-content .shaktiva-story-frame{overflow:hidden}
  .entry-content .shaktiva-story-frame img{transition:scale .4s var(--sk-ease)}
  .entry-content .shaktiva-story-frame:hover img{scale:1.03}
}

/* ---------- Héroe unificado v2 (fundación §27; Adrián, 2026-10-09) ---------- */
@media (min-width:1024px){
  html body .entry-content > section.shaktiva-cinema-hero{justify-content:center !important;--sk-hero-velo:var(--sk-hero-velo-v2)}
  html body .entry-content .shaktiva-cinema-hero .shaktiva-cinema-hero-content{padding:152px var(--sk-gutter) 24px !important}
  html body .entry-content .shaktiva-cinema-hero .shaktiva-cinema-hero-content > *{max-width:var(--sk-hero-texto-v2) !important}
  html body .entry-content .shaktiva-cinema-hero h1.shaktiva-cinema-h1{
    font-size:var(--sk-display-hero) !important;line-height:1.02 !important;letter-spacing:-.015em !important;text-wrap:balance;
  }
}

/* ---------- Velo largo para foto clara (Adrián, 2026-10-10, opción b) ----------
   Sobre el agua clara, el velo v2 (llega a 0 en el 51,5 %) dejaba una franja vertical marcada.
   Aquí la caída se alarga (del 46,5 % al 59 %; antes del 46,5 % el velo sigue denso porque la
   entradilla llega al 47 % y necesita 4,5:1) y, para que no llegue nunca a la cara, la toma se
   ensancha al 126 % anclada a la izquierda (como .sk-pase-ancho en la Home): el rostro pasa del
   50,5 % al 60-67 % del ancho. El Ken Burns crece desde el rostro (50,5 % de la caja ensanchada).
   Solo en escritorio apaisado; en vertical sigue la regla de arriba (OP 42 %). */
@media (min-width:1024px) and (orientation:landscape){
  html body .entry-content > section.shaktiva-cinema-hero{
    --sk-hero-velo:linear-gradient(90deg,rgba(22,18,27,.9) 0%,rgba(22,18,27,.84) 36%,rgba(22,18,27,.8) 46.5%,
      rgba(22,18,27,.54) 50%,rgba(22,18,27,.28) 53.5%,rgba(22,18,27,.09) 57%,rgba(22,18,27,0) 59%);
  }
  html body .entry-content .shaktiva-cinema-hero .shaktiva-hero-bg-img{
    width:126% !important;max-width:none !important;left:0;right:auto;object-position:0% 20% !important;transform-origin:50.5% 24%;
  }
}

/* ---------- QA-04 (2026-10-10) · Fotos horizontales en móvil y tableta, en su proporción ----------
   El héroe (16:9) en una caja de 50svh / 4:5 y el manto (≈1,93:1) en 4:5 / 3:2 obligaban a ampliar
   ×2 la copia de 1024 (con sizes=100vw el navegador no sabe que la caja recorta). Igual que Altea
   (QA-10 de la ronda anterior): a 16:9, sin recorte que pida ampliación. */
@media (max-width:1023px){
  .entry-content .shaktiva-cinema-hero .shaktiva-hero-bg-layer{height:auto !important;aspect-ratio:16 / 9}
  .entry-content .shaktiva-deontological-right{aspect-ratio:16 / 9}
}