/* Shaktiva · Home v2 (2026-10-09). Se carga solo en la portada, después de la fundación.
   Marcado: docs/premium-2026-10/home-v2.html (post_content de la página 32).
   Dirección (Adrián): retícula real de 12 columnas (.sk-grid, fundación §19), una card por oferta,
   fotos a sangre con degradado que parte de 0 donde está Tamara y crece solo bajo el texto,
   nunca sobre el rostro. Titulares de display al nivel del h1 (--sk-display-1). */

body.home{--h-tierra:#16121B;--h-claro:#F4EEE6;--h-claro-2:#D3C9BE;--h-sec:128px}
@media (max-width:767px){body.home{--h-sec:72px}}
body.home .entry-content > *{margin-block-start:0 !important}
body.home main{margin-bottom:0 !important}

/* ---------- Tipografía de la página (6 tamaños: display, 32, 30, 17, 15, 13) ---------- */
body.home .sk-home-display{
  font-family:var(--shaktiva-font-display);font-weight:400;font-size:var(--sk-display-1);
  line-height:1.04;letter-spacing:-.02em;color:var(--sk-heading);margin:0 0 32px;
}
body.home .sk-home-display em{font-style:italic;color:var(--shaktiva-oro-luz)}
body.home .sk-home-lead{font-size:var(--sk-md);line-height:1.6;color:var(--sk-ink-mute);max-width:52ch;margin:0 0 32px}
body.home .sk-home-hero .sk-home-lead,body.home .sk-home-cierre p{color:var(--h-claro-2)}

/* ---------- 1. Héroe ---------- */
.sk-home-hero{
  position:relative;isolation:isolate;overflow:hidden;background:var(--h-tierra);
  min-height:100svh;display:flex;align-items:center; /* texto centrado en vertical (Adrián: más arriba); la isla flota encima */
}
.sk-home-hero-media{position:absolute;inset:0;z-index:0}
.sk-home-hero-media picture{display:contents}
/* Pase de imágenes del héroe (Adrián): fundido cruzado; la primera se ve sin JS. */
.sk-pase .sk-pase-item{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity 1.2s ease}
.sk-pase picture.sk-pase-item{display:block}
.sk-pase picture.sk-pase-item img{position:absolute;inset:0;width:100%;height:100%}
.sk-pase .sk-pase-item.is-activa{opacity:1}
.sk-pase img.sk-pase-escritorio{object-position:46% 50%}
.sk-pase img.sk-pase-movil{object-position:50% 25%}
@media (max-width:1023px){.sk-pase .sk-pase-escritorio{display:none}}
@media (min-width:1024px){.sk-pase .sk-pase-movil{display:none}}
.sk-pase video.sk-pase-item{object-fit:cover;object-position:50% 50%}
/* Botón de pausa: Adrián no lo quiere visible; para cumplir WCAG 2.2.2 sigue ahí para teclado y
   lector de pantalla (aparece al recibir el foco). Además, el pase se para al pasar el cursor o con el foco. */
.sk-pase-pausa:not(:focus-visible){position:absolute !important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;padding:0 !important;border:0 !important}
.sk-pase-pausa{
  position:absolute;z-index:3;right:24px;bottom:24px;min-height:44px;padding:0 16px;
  background:rgba(22,18,27,.72);color:#F4EEE6;border:1px solid rgba(244,238,230,.4);border-radius:2px;
  font:500 var(--sk-xs)/1 var(--shaktiva-font-text);letter-spacing:.06em;cursor:pointer;
}
.sk-pase-pausa:hover{background:#16121B}
.sk-pase-pausa[hidden]{display:none}
/* Escritorio: foto horizontal (Tamara centrada, 42-56 % del ancho). Móvil: la vertical. */
.sk-home-hero-img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
/* Degradado desde el borde izquierdo, donde va el texto; llega a 0 antes de su brazo (~41 %). */
.sk-home-hero-media::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:var(--sk-hero-velo); /* héroe único del sitio (fundación §25) */
}
.sk-home-hero-text{max-width:var(--sk-hero-texto-max)}
/* Texto del héroe en escritorio (Adrián, 2026-10-09, sobre la captura a 1903×1037): el h1 llenaba la
   pantalla en 6 líneas y nacía pegado a la isla. Ahora:
   - h1 en 3 líneas fijas (<br> en el contenido) a clamp(48, 4.4vw, 72): la parte dorada en una sola línea.
   - El bloque mide lo que la línea más larga del h1 (width:max-content); la entradilla no cuenta para ese
     ancho (contain:inline-size) y se ajusta a él, igual que el CTA.
   - Centrado en vertical en el hueco bajo la isla (isla ≈ 88 px + 64 de aire), en la misma caja que la isla y las secciones.
   - Un solo velo fijo para todas las diapositivas: llega a 0 en el 51,5 %, antes de la cara de Tamara, que con
     .sk-pase-ancho queda en el 52-57 % del ancho. */
@media (min-width:1024px){
  /* todos los titulares de display de la Home al escalón del h1 del héroe: el h1 no puede quedar por debajo de los h2,
     y la página se queda en 6 tamaños (13 · 15 · 17 · 22,4 · 32 · display) */
  body.home .sk-home-display{font-size:clamp(3rem, min(4.4vw, 66.5px - .35vw), 4.5rem);line-height:1.04;letter-spacing:-.015em}
  .sk-home-hero{align-items:center}
  /* misma caja que la isla y las secciones (.sk-grid). Centrado óptico en el hueco bajo la isla (88 px + 64). */
  .sk-home-hero .sk-home-hero-grid{padding-block:152px 24px} /* más específica que la regla base de abajo (112/96), que la pisaba */
  .sk-home-hero .sk-home-hero-text{max-width:none;width:max-content;grid-column:1 / span 7 !important}
  body.home .sk-home-hero .sk-home-display{font-size:clamp(3rem, min(4.4vw, 66.5px - .35vw), 4.5rem); /* la línea más larga acaba antes del 47 % del ancho, también con la caja centrada en 1920-2560 */line-height:1.02;letter-spacing:-.015em}
  body.home .sk-home-hero .sk-home-lead{contain:inline-size;max-width:none;font-size:var(--sk-lg);font-weight:500;line-height:1.5;text-wrap:pretty}
  /* foto de la roca: 120 % de ancho anclada a la izquierda → la cara de Tamara queda en el 52-57 % en cualquier
     proporción de pantalla (sin margen de recorte en 16:9 se quedaba en el centro, bajo el texto) */
  .sk-pase picture.sk-pase-item .sk-home-hero-img{width:120% !important;max-width:none;left:0;object-position:0% 40%}
  /* mismo ensanchado en las demás diapositivas con la cara de Tamara (foto 206 y vídeos «Permanece» y de 2 s) */
  .sk-pase .sk-pase-item.sk-pase-ancho{width:120% !important;max-width:none;left:0;object-position:0% 40%}
  .sk-home-hero-media::after{background:linear-gradient(90deg,rgba(22,18,27,.9) 0%,rgba(22,18,27,.84) 38%,rgba(22,18,27,.66) 46%,rgba(22,18,27,0) 51.5%)}
}
.sk-home-hero-grid{position:relative;z-index:2;padding-block:112px 96px;pointer-events:none} /* deja pasar el clic al botón de pausa del pase */
.sk-home-hero-grid > *{pointer-events:auto}
.sk-home-hero-text .shaktiva-btn-ink{margin-top:8px}

/* ---------- Vídeo de fondo: invisible hasta que de verdad se reproduce; fundido al final del bucle ---------- */
/* (estado del vídeo: fundación §19) */
.sk-home-hero-media .sk-bg-video{object-position:50% 40%}
.sk-home-cierre-media .sk-bg-video{object-position:46% 50%}

/* ---------- 2. Manifiesto: textura de agua sobre mármol claro, fundida con la piedra ---------- */
.sk-home-manifiesto{position:relative;isolation:isolate;overflow:hidden;padding-block:var(--h-sec);background:var(--shaktiva-lino)}
.sk-home-manifiesto::before{
  content:"";position:absolute;inset:-6%;z-index:-1;pointer-events:none;
  background:url('/wp-content/uploads/2026/10/textura-agua-marmol-claro-01.webp') center / cover no-repeat;
  opacity:.55;mix-blend-mode:multiply;
}
.sk-home-manifiesto-texto{font-size:var(--sk-md);line-height:1.6;color:var(--sk-ink-mute);margin:0}
/* ~68 caracteres por línea (con --sk-measure daba 82); gana a la regla de medida de la fundación (.entry-content p:not()…) */
body.home .entry-content .sk-home-manifiesto p.sk-home-manifiesto-texto{max-width:52ch} /* (0,4,2) > (0,4,1) */
/* Los tres símbolos de Adrián, pequeños: marcas del proceso, no ilustración. */
/* Firma de marca: el mismo bloque que el logotipo, en pequeño y un solo color. */
.sk-home-firma{display:flex;align-items:center;gap:14px;margin:0;color:var(--shaktiva-violeta-cosmos)}
/* Fila final del manifiesto: firma a la izquierda, símbolos a la derecha, centrados entre sí. */
.sk-home-manifiesto-pie{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:32px;margin-top:48px}
.sk-home-firma-marca{font-family:var(--shaktiva-font-display);font-size:var(--sk-lg); /* 22,4: mismo escalón que la entradilla del héroe */letter-spacing:.14em;line-height:1}
.sk-home-firma-lema{font-size:var(--sk-xs);letter-spacing:.16em;text-transform:uppercase;font-weight:500;line-height:1.1;max-width:9em}
@media (prefers-reduced-motion:no-preference){
  @keyframes sk-deriva{from{transform:translate3d(-1.5%,-1%,0) scale(1)}to{transform:translate3d(1.5%,1%,0) scale(1.04)}}
  .sk-home-manifiesto::before{animation:sk-deriva 40s ease-in-out infinite alternate}
}

/* ---------- 3. Propuestas: símbolos + una card por oferta ---------- */
.sk-home-ofertas{position:relative;isolation:isolate;padding-block:var(--h-sec);background:var(--shaktiva-lino)}
/* Naturaleza integrada en la parte de abajo (Adrián): helechos lavados, fundidos con el lino. */
.sk-home-ofertas::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:55%;z-index:-1;pointer-events:none;
  background:url('/wp-content/uploads/2026/10/naturaleza-helechos-verde-01.webp') center bottom / cover no-repeat;
  filter:saturate(.45) brightness(1.08);opacity:.38;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 75%);mask-image:linear-gradient(180deg,transparent 0%,#000 75%);
}
.sk-home-ofertas-cabecera{align-items:end}
.sk-home-ofertas-cabecera .sk-home-lead{margin-bottom:0}
.sk-home-simbolos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.sk-home-simbolos li{display:flex;flex-direction:column;align-items:center;gap:12px;color:var(--shaktiva-violeta-cosmos)}
.sk-home-simbolos img{width:72px;height:72px;object-fit:contain} /* símbolos de Adrián, tinta violeta original sobre lino */
.sk-home-simbolos span{font-size:var(--sk-xs);font-weight:500;letter-spacing:.02em;color:var(--sk-ink-mute)}

.sk-home-ofertas-cards{margin-top:64px}
.sk-oferta{
  position:relative;isolation:isolate;overflow:hidden;margin:0;border-radius:2px;background:var(--h-tierra);
  display:flex;flex-direction:column;
}
/* Foto arriba, entera en 4:5. */
.sk-oferta-img{position:relative;z-index:0;display:block;width:100%;height:auto;aspect-ratio:4 / 5;object-fit:cover}
.sk-oferta-img--retiro{object-position:50% 18%}
.sk-oferta-img--metodo{object-position:50% 16%}
.sk-oferta-img--talismanes{object-position:50% 40%}
/* Degradado solo sobre la foto: 0 en su parte alta (rostro y cuerpo) y tierra sólido al pie,
   donde empieza el texto. Mismo alto que la foto gracias a aspect-ratio. */
.sk-oferta::after{
  content:"";position:absolute;z-index:1;left:0;right:0;top:0;aspect-ratio:4 / 5;pointer-events:none;
  background:linear-gradient(180deg,rgba(22,18,27,0) 0%,rgba(22,18,27,0) 58%,rgba(22,18,27,.75) 78%,var(--h-tierra) 92%); /* tierra sólida antes del borde: sin línea clara */
  box-shadow:0 2px 0 var(--h-tierra); /* tapa la junta subpíxel entre la foto y el texto (zoom del navegador 110 %) */
}
.sk-oferta-texto{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;margin-top:-72px;padding:0 32px 32px}
.sk-oferta-meta{font-size:var(--sk-xs);font-weight:500;letter-spacing:.02em;color:var(--h-claro-2);margin:0 0 12px}
.sk-oferta-titulo{
  font-family:var(--shaktiva-font-display);font-weight:400;font-size:2rem;line-height:1.1;
  letter-spacing:-.01em;color:var(--h-claro);margin:0 0 12px;
}
.sk-oferta-desc{font-size:var(--sk-sm);line-height:1.55;color:var(--h-claro-2);margin:0 0 16px;max-width:40ch}
.sk-oferta-precio{font-size:var(--sk-sm);font-weight:600;color:var(--h-claro);margin:auto 0 16px} /* al pie: el precio de las tres cards en la misma horizontal */
.sk-oferta .shaktiva-btn-ink{align-self:flex-start;margin-top:0}
/* Card clicable entera (Adrián): el CTA es el único enlace y su ::before cubre la card (sin anidar enlaces).
   Zoom leve de la foto al pasar el cursor y anillo de foco en toda la card. */
.sk-oferta{cursor:pointer}
.sk-oferta .shaktiva-btn-ink::before{content:"";position:absolute;inset:0;z-index:3}
/* el texto sigue por encima del degradado como elemento flex (z-index sin position), para que el ::before
   del CTA se mida contra la card y no contra el bloque de texto */
.sk-oferta .sk-oferta-texto{position:static}
.sk-oferta .shaktiva-btn-ink:focus-visible{outline:none !important;box-shadow:none !important}
.sk-oferta:has(.shaktiva-btn-ink:focus-visible){outline:2px solid var(--shaktiva-lila-espacial);outline-offset:4px}
@media (prefers-reduced-motion:no-preference){
  .sk-oferta-img{transition:transform .3s ease}
  /* el zoom crece desde el pie de la foto: si crecía desde el centro, el borde inferior bajaba 1,5 % por debajo del
     degradado y asomaba como una línea clara sobre el titular (Adrián, captura a 1916 px) */
  .sk-oferta-img{transform-origin:50% 100%;backface-visibility:hidden}
  .sk-oferta:hover .sk-oferta-img{transform:scale(1.03)}
}

/* ---------- 4. Relato: la foto a sangre por la izquierda, al alto de la sección ---------- */
.sk-home-relato{position:relative;padding-block:var(--h-sec);background:var(--shaktiva-lino)}
.sk-home-relato .sk-grid{align-items:center}
.sk-home-relato-foto{margin:0}
.sk-home-relato-foto img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 25%;border-radius:0}
/* Integración difusa (Adrián): la foto se desvanece hacia el texto y se funde con la piedra. */
@media (min-width:1024px){
  .sk-home-relato-foto img{-webkit-mask-image:linear-gradient(90deg,#000 0%,#000 55%,transparent 100%);mask-image:linear-gradient(90deg,#000 0%,#000 55%,transparent 100%)}
  .sk-home-relato{padding-block:160px}
}
@media (max-width:1023px){
  .sk-home-relato-foto img{-webkit-mask-image:linear-gradient(180deg,#000 60%,transparent 100%);mask-image:linear-gradient(180deg,#000 60%,transparent 100%)}
}
@media (min-width:1024px){
  .sk-home-relato{min-height:640px}
  /* hasta el borde de la ventana; termina un medianil antes de la columna 7, donde empieza el texto */
  /* termina un medianil antes de la columna 6 (donde empieza el texto), calculado con la misma retícula */
  .sk-home-relato{
    --r-max:min(100vw, var(--sk-grid-max));
    --r-col:calc((var(--r-max) - 2 * var(--sk-gutter) - 11 * var(--sk-grid-gap)) / 12);
    --r-izq:calc((100vw - var(--r-max)) / 2 + var(--sk-gutter));
  }
  .sk-home-relato-foto{position:absolute;left:0;top:0;bottom:0;width:calc(var(--r-izq) + 5 * (var(--r-col) + var(--sk-grid-gap)) - var(--sk-grid-gap));overflow:hidden}
  .sk-home-relato-texto h2{white-space:nowrap} /* «Una experiencia» en una línea; el corte lo pone el <br> */
}
.sk-home-relato-texto p{font-size:var(--sk-md);line-height:1.6;color:var(--sk-ink-mute);max-width:60ch;margin:0 0 24px}
.sk-home-cita-corta{margin:0 0 24px;padding-left:24px;border-left:1px solid var(--shaktiva-oro-antiguo)}
.sk-home-cita-corta p{
  font-family:var(--shaktiva-font-text) !important;font-style:italic;font-size:var(--sk-md) !important;
  color:var(--shaktiva-violeta-cosmos) !important;margin:0 !important;
}
.sk-home-relato-texto .shaktiva-btn-ink{margin-top:8px}

/* ---------- 5. Audio: fondo de vídeo en secuencia, texto en lino, formulario en card encima ---------- */
.sk-home-audio{position:relative;isolation:isolate;overflow:hidden;padding-block:var(--h-sec);background:var(--h-tierra)}
.sk-home-audio-media{position:absolute;inset:0;z-index:0}
.sk-home-audio-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sk-home-audio-video{z-index:1}
/* Oscurecedor en degradado: más denso detrás del texto (izquierda), más leve tras la card. */
.sk-home-audio-media::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,rgba(22,18,27,.86) 0%,rgba(22,18,27,.74) 46%,rgba(22,18,27,.45) 70%,rgba(22,18,27,.35) 100%)}
.sk-home-audio .sk-grid{position:relative;z-index:3;align-items:center}
.sk-home-audio .sk-home-display{color:#F4EEE6}
.sk-home-audio .sk-home-lead{color:#E4DED3}
.sk-home-audio-meta{font-size:var(--sk-xs);font-weight:500;letter-spacing:.02em;color:#D3C9BE;margin:0}
.sk-home-audio-form{background:var(--shaktiva-lino-card);border:0;border-radius:4px;padding:40px;
  --sk-heading:#241F28;--sk-ink:#241F28;--sk-ink-mute:#4A4351;--sk-btn-bg:#241F28;--sk-btn-ink:#F4EEE6;--sk-btn-bg-hover:#4A2E73}
/* 32 px: mismo escalón que los títulos de las cards */
.sk-home-audio-form .shaktiva-form-h3{font-size:2rem !important;line-height:1.15;margin:0 0 24px;color:var(--shaktiva-violeta-cosmos) !important}

/* ---------- 6. Cierre a sangre ---------- */
.sk-home-cierre{
  position:relative;isolation:isolate;overflow:hidden;background:var(--h-tierra);
  min-height:min(88svh,820px);display:flex;align-items:center;
}
.sk-home-cierre-media{position:absolute;inset:0;z-index:0}
.sk-home-cierre-img{display:block;width:100%;height:100%;object-fit:cover;object-position:46% 50%} /* silueta sin rostro, centrada */
.sk-home-cierre-media::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(22,18,27,0) 0%,rgba(22,18,27,0) 46%,rgba(22,18,27,.55) 55%,rgba(22,18,27,.85) 66%,rgba(22,18,27,.92) 100%); /* 10 puntos más al centro (Adrián) */
}
.sk-home-cierre .sk-grid{position:relative;z-index:2;padding-block:96px}
.sk-home-cierre-cita{margin:0}
.sk-home-cierre-cita blockquote{margin:0 0 24px;padding:0;border:0}
.sk-home-cierre-cita blockquote p{
  font-family:var(--shaktiva-font-display);font-weight:400;font-size:2rem; /* vuelve a 32 px (Adrián) */
  line-height:1.2;letter-spacing:-.01em;color:var(--h-claro);margin:0;text-wrap:balance;
}
.sk-home-cierre-cita figcaption{font-size:var(--sk-xs);font-weight:500;letter-spacing:.02em;color:var(--h-claro-2)}

/* ---------- Móvil y tableta: la foto arriba, entera; el texto debajo sobre color sólido ---------- */
@media (max-width:1023px){
  .sk-home-hero-img{object-position:35% 22%}
  .sk-home-hero-text{max-width:none}
  .sk-home-hero,.sk-home-cierre{display:block;min-height:0}
  /* a sangre: siempre el 100 % del ancho (antes la proporción fija lo estrechaba en tableta) */
  .sk-home-hero-media,.sk-home-cierre-media{position:relative;width:100%;aspect-ratio:4 / 5;max-height:78svh}
  .sk-home-hero-media img,.sk-home-hero-media video,.sk-home-cierre-media img,.sk-home-cierre-media video{width:100% !important}
  .sk-home-hero-media::after,.sk-home-cierre-media::after{
    background:linear-gradient(180deg,rgba(22,18,27,0) 0%,rgba(22,18,27,0) 72%,rgba(22,18,27,1) 100%);
  }
  .sk-home-hero-grid,.sk-home-cierre .sk-grid{padding-block:24px var(--h-sec)}
  .sk-home-hero-text{margin-top:-8px}
  .sk-home-simbolos{margin-top:40px;max-width:420px}
  .sk-home-ofertas-cards{margin-top:48px}
  .sk-home-relato-texto{margin-top:40px}
  .sk-home-relato-foto{margin-inline:calc(-1 * var(--sk-gutter));aspect-ratio:4 / 5;overflow:hidden}
  .sk-home-audio-form{margin-top:40px;padding:28px 20px}
  .sk-home-audio-media::after{background:rgba(22,18,27,.78)}
}
@media (min-width:768px) and (max-width:1023px){
  .sk-home-ofertas-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sk-home-ofertas-cards > .sk-oferta{grid-column:auto}
}
@media (max-width:767px){
  /* En móvil, el display del héroe al mismo escalón que el resto de titulares de display. */
  body.home .sk-home-hero .sk-home-display{font-size:var(--sk-display-1);margin-bottom:16px}
  /* Primera pantalla completa: foto, titular, texto y el CTA sin hacer scroll. */
  .sk-home-hero-media{max-height:50svh;aspect-ratio:auto;height:50svh;width:100%}
  .sk-home-hero .sk-home-lead{margin-bottom:20px}
}

/* Casillas del formulario del audio: 20 px (las de Fluent salían a 13), y la etiqueta comparte el área de pulsación */
.sk-home-audio-form input[type="checkbox"]{width:20px;height:20px;flex:none;accent-color:var(--shaktiva-lila-espacial)}

/* Orden de la Home (Adrián, 2026-10-10): héroe → manifiesto → relato → Tres puertas → cierre → audio.
   El manifiesto (mármol) y el relato (lino) se distinguen por el fondo y mantienen su relleno. Cierre y audio son
   oscuros seguidos: un filete de oro los separa (el oro es filete, regla 10). */
.sk-home-relato + .sk-home-ofertas{padding-top:var(--h-sec)}
.sk-home-cierre + .sk-home-audio{border-top:1px solid color-mix(in srgb, var(--shaktiva-oro-luz) 45%, transparent)}

/* ---------- QA-03 (2026-10-10) · Seis tamaños también en móvil ----------
   En móvil el logotipo va a 1.375rem (22 px) y la firma a --sk-lg (22,4): dos escalones casi iguales.
   La firma baja al del logotipo; en escritorio (logotipo a 32) sigue en --sk-lg con la entradilla. */
@media (max-width:1023px){.sk-home-firma-marca{font-size:1.375rem}}

/* ---------- QA-13 (2026-10-10) · Movimiento continuo solo donde se ve ----------
   · Las diapositivas inactivas del pase no siguen haciendo zoom detrás de la activa.
   · Las secciones con bucle (héroe, manifiesto, símbolos, cierre) se pausan fuera de pantalla: el JS
     (shaktiva-interactions.js §2 octies) les pone .sk-anim-fuera con un IntersectionObserver.
   · La deriva del fondo del manifiesto (mix-blend-mode animado) no corre en móvil. */
.sk-pase .sk-pase-item:not(.is-activa),
.sk-pase .sk-pase-item:not(.is-activa) img{animation-play-state:paused}
.sk-anim-fuera,.sk-anim-fuera::before,.sk-anim-fuera *{animation-play-state:paused !important}
@media (max-width:1023px){.sk-home-manifiesto::before{animation:none !important}}

/* ---------- Centrado óptico del héroe · CTA por encima del 80 % del alto (2026-10-10) ----------
   Centrado entre 152 y 24 px, el botón acababa en el 85 % del alto a 1366×768 (82 % en Altea a 1440×900).
   Arriba: 17svh entre 128 (la isla acaba en 88) y 152; abajo, 15svh. El bloque queda algo por encima
   del centro geométrico (centro óptico) en todas las alturas. Igual en la fundación §27 para el resto. */
@media (min-width:1024px){
  .sk-home-hero .sk-home-hero-grid{padding-block:clamp(128px, 17svh, 152px) 15svh}
}