/* ============================================================
   Sakura & Co. — Portada Inmersiva #87 (intro.css) v8.1
   - PC/horizontal: portada HORIZONTAL oficial (intacta).
   - Movil vertical: portada VERTICAL definitiva 9:16, COMPLETA
     (sin crop, sin cover sobre ella, sin deformar, sin bandas).
   - Zona transparente sobre el DESCUBRIR integrado (sin boton nuevo).
   - Animacion de atencion delicada solo como indicador.
   - Petalos sutiles. Primer frame (body.page-id-87).
   - v8.1: plan aprobado — base de PC intocable, vertical aislada en
     @media (orientation: portrait), wrap oculto por defecto.
   ============================================================ */

/* ---- reset (primer frame via body.page-id-87) ----
   Sin color fijado: se usa el fondo natural de la estructura existente. */
html.sc-intro-page, html.sc-intro-page body, body.page-id-87{
  margin:0 !important;padding:0 !important;
  width:100%;height:100%;overflow:hidden;
}
html, body{
  overflow:hidden !important;
  margin:0 !important;
  padding:0 !important;
}

/* ---- ocultar titulo "Intro", header y footer (primer frame) ---- */
.sc-intro-page .wp-block-post-title, body.page-id-87 .wp-block-post-title{display:none !important;}
.sc-intro-page header.wp-block-template-part, body.page-id-87 header.wp-block-template-part{display:none !important;}
.sc-intro-page footer.wp-block-template-part, body.page-id-87 footer.wp-block-template-part{display:none !important;}
.sc-intro-page .wp-site-blocks, body.page-id-87 .wp-site-blocks{margin:0 !important;padding:0 !important;}

/* ---- neutralizar contenedores de WordPress ---- */
html.sc-intro-page .entry-content,
html.sc-intro-page .wp-block-post-content,
html.sc-intro-page .has-global-padding,
html.sc-intro-page .is-layout-constrained,
html.sc-intro-page main,
html.sc-intro-page .wp-site-blocks,
html.sc-intro-page .wp-site-blocks > *{
  margin:0 !important;padding:0 !important;
  max-width:none !important;width:100% !important;
  transform:none !important;filter:none !important;
  contain:none !important;overflow:visible !important;
}

/* ---- contenedor principal ---- */
html.sc-intro-page .sc-immersive, body.page-id-87 .sc-immersive{
  position:fixed !important;
  top:0 !important;left:0 !important;right:0 !important;bottom:0 !important;
  width:auto !important;height:auto !important;
  max-width:none !important;max-height:none !important;
  margin:0 !important;padding:0 !important;
  z-index:99990 !important;overflow:hidden !important;
  opacity:1;transition:opacity .25s cubic-bezier(.4,0,.2,1);
}
html.sc-intro-page .sc-immersive.sc-fading, body.page-id-87 .sc-immersive.sc-fading{opacity:0 !important;pointer-events:none !important;}
html.sc-intro-page .sc-immersive-stage, body.page-id-87 .sc-immersive-stage{
  position:absolute !important;
  top:0 !important;left:0 !important;right:0 !important;bottom:0 !important;
  width:100% !important;height:100% !important;
  margin:0 !important;padding:0 !important;
}

/* ============================================================
   PORTADA HORIZONTAL (PC / pantallas anchas) — intacta
   ============================================================ */
html.sc-intro-page .sc-immersive-bg, body.page-id-87 .sc-immersive-bg{
  position:absolute !important;
  top:0 !important;left:0 !important;right:0 !important;bottom:0 !important;
  width:100% !important;height:100% !important;
  max-width:none !important;max-height:none !important;
  object-fit:cover !important;
  object-position:50% 50%;
  display:block !important;
  margin:0 !important;padding:0 !important;
}
/* La imagen vertical SOLO se muestra en portrait; oculta en landscape/PC */
.sc-bg-v{ display:none !important; }
/* El contenedor vertical SOLO existe en portrait; oculto en landscape/PC */
.sc-bg-v-wrap{ display:none !important; }

/* ============================================================
   MOVIL VERTICAL — imagen vertical definitiva, COMPLETA
   - Contenedor .sc-bg-v-wrap: tiene EXACTAMENTE el tamaño renderizado
     de la imagen 9:16 (aspect-ratio) -> el hitbox es relativo a la
     IMAGEN, no al viewport (alineado en cualquier dispositivo).
   - Centrado del contenedor: left:50% + translate(-50%,-50%).
   - object-fit:contain + height:auto: proporcion original, sin crop,
     sin deformacion, sin zoom, sin blur, sin segunda capa.
   - SIN color nuevo: el sobrante usa el fondo natural de la estructura.
   ============================================================ */
/* ============================================================
   DETECCION POR ORIENTACION REAL (aprobada 2026-09-05)
   - portrait  -> portada VERTICAL definitiva (sc-bg-v-wrap + sc-bg-v)
   - landscape -> portada HORIZONTAL oficial (sc-bg-h)
   Sustituye el antiguo umbral max-aspect-ratio:3/4 (fallaba en
   viewports portrait grandes, p.ej. 1200x1290 -> gato enorme).
   ============================================================ */
@media (orientation: portrait){
  html.sc-intro-page .sc-immersive-bg.sc-bg-h, body.page-id-87 .sc-bg-h{ display:none !important; }

  /* v8.1 (Opcion 2): extension visual de bordes — la MISMA portada-movil.webp
     como fondo, escalada al ALTO del viewport (auto 100%) y centrada.
     Sin blur, sin filter, sin degradado, sin color ajeno: el sobrante
     superior/inferior muestra el borde real de la propia imagen estirado,
     fundiendose sin linea. SOLO en portrait. */
  html.sc-intro-page .sc-immersive::before, body.page-id-87 .sc-immersive::before{
    content:"" !important;
    position:absolute !important;
    inset:0 !important;
    z-index:0 !important;
    background:url("https://sakuraandco.ch/wp-content/themes/sakura-child/assets/portada-movil.webp") center top/auto 100% no-repeat !important;
    pointer-events:none !important;
  }

  /* contenedor de la imagen vertical: ocupa TODO el viewport (nunca colapsa).
     display:block es OBLIGATORIO: la base oculta el wrap con
     display:none !important; sin esto el wrap (y la imagen vertical)
     permanecen ocultos -> pantalla blanca. (v8.1) */
  html.sc-intro-page .sc-bg-v-wrap, body.page-id-87 .sc-bg-v-wrap{
    display:block !important;
    position:absolute !important;
    top:0 !important;left:0 !important;right:0 !important;bottom:0 !important;
    width:100% !important;height:100% !important;
    margin:0 !important;padding:0 !important;
    z-index:1 !important;
  }
  /* la imagen vertical: completa, centrada, proporcion original.
     width/height:auto + max-width/max-height:100%: el navegador la escala
     conservando la proporcion (comportamiento nativo de <img>, universal).
     SIN aspect-ratio, SIN min(), SIN calc(), SIN dvh/vh. */
  html.sc-intro-page .sc-immersive-bg.sc-bg-v, body.page-id-87 .sc-bg-v{
    position:absolute !important;
    top:50% !important;left:50% !important;
    width:auto !important;height:auto !important;
    max-width:100% !important;max-height:100% !important;
    transform:translate(-50%,-50%);
    object-fit:contain !important; /* red de seguridad; no depende de el */
    display:block !important;
    margin:0 !important;padding:0 !important;
  }
  /* hitbox DESCUBRIR VERTICAL: RELATIVO al contenedor de la imagen (no al viewport).
     Boton integrado: 37-72% x, 29-32% y de la imagen vertical.
     left/top/width/height SIN !important: los controla positionHitV()
     con px del getBoundingClientRect() de .sc-bg-v (v8.1, Opcion A). */
  html.sc-intro-page .sc-hit-v, body.page-id-87 .sc-hit-v{
    position:absolute !important;z-index:2 !important;
    left:37%;top:29%;width:35%;height:6%;
    display:block !important;cursor:pointer !important;
    background:transparent !important;border:0 !important;outline:none !important;
    text-decoration:none !important;
  }
}

/* ============================================================
   ZONA INTERACTIVA sobre DESCUBRIR (integrado en la imagen)
   - HORIZONTAL (.sc-hit-h, en el stage, PC): boton en 62-79% x, 57-64% y
     de la imagen horizontal.
   - VERTICAL (.sc-hit-v, dentro del .sc-bg-v-wrap, movil): boton en
     37-72% x, 29-32% y, RELATIVO a la imagen vertical (no al viewport).
   Solo indicador; no crea boton/texto nuevo.
   ============================================================ */
html.sc-intro-page .sc-immersive-hit, body.page-id-87 .sc-immersive-hit{
  position:absolute !important;z-index:2 !important;
  display:block !important;cursor:pointer !important;
  background:transparent !important;border:0 !important;outline:none !important;
  text-decoration:none !important;
}
/* hitbox HORIZONTAL (PC): relativo al stage (imagen horizontal full-viewport) */
html.sc-intro-page .sc-hit-h, body.page-id-87 .sc-hit-h{
  left:59% !important;top:53% !important;width:24% !important;height:14% !important;
}
html.sc-intro-page .sc-immersive-hit:focus-visible, body.page-id-87 .sc-immersive-hit:focus-visible{outline:2px solid rgba(250,208,196,.6);outline-offset:-2px;}
.sc-visually-hidden{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ============================================================
   ANIMACION DE ATENCION DELICADA (solo indicador, no altera la imagen)
   Pulso suave de glow rosa en el area del boton (indicador interactivo).
   ============================================================ */
@keyframes sc-hit-glow{
  0%,100%{ box-shadow:0 0 0 0 rgba(250,208,196,0); }
  50%{ box-shadow:0 0 22px 4px rgba(250,208,196,.35); }
}
@media (orientation: portrait){
  html.sc-intro-page .sc-hit-v, body.page-id-87 .sc-hit-v{
    animation:sc-hit-glow 2.6s ease-in-out infinite;
    border-radius:999px;
  }
}
@media (prefers-reduced-motion:reduce){
  html.sc-intro-page .sc-immersive-hit, body.page-id-87 .sc-immersive-hit{ animation:none; }
}

/* ---- petalos extremadamente sutiles ---- */
html.sc-intro-page .sc-immersive-petals, body.page-id-87 .sc-immersive-petals{
  position:absolute !important;inset:0 !important;z-index:3 !important;
  pointer-events:none !important;
}