/* ==== KAIRON · mejoras móvil + contacto + intro robusta (añadido) ==== */

/* Partículas desactivadas en TODOS los tamaños (evita jank/petado, también en escritorio) */
html.kairon-no-particles .particle-canvas{display:none!important}

/* Destello fino cuando las manos se tocan (reusa keyframe intro-contact-bloom del sitio) */
.kairon-spark{position:fixed;top:52%;left:50%;width:clamp(220px,30vw,460px);height:clamp(220px,30vw,460px);border-radius:50%;z-index:72;pointer-events:none;opacity:0;filter:blur(9px);background:radial-gradient(circle,#fffffffa 0 7%,#ffffffd6 18%,#ffffff6b 40%,#ffffff1f 61%,#0000 76%);transform:translate(-50%,-50%) scale(.16)}
.kairon-spark.go{animation:intro-contact-bloom 1.1s cubic-bezier(.22,1,.36,1) forwards}

/* Intro ligera por WebP en ESCRITORIO (>=901px): sin vídeo, sin jank */
@media (min-width:901px){
  .cinematic-intro::after{content:"";position:fixed;inset:0;z-index:70;background:#f4f7f9 url(/media/kairon-intro-mobile.webp) center center/cover no-repeat;transition:opacity .7s ease,visibility 0s .7s;pointer-events:none}
  html.kairon-intro-done .cinematic-intro::after{opacity:0;visibility:hidden}
  .cinematic-intro .skip-intro{z-index:71}
}

/* Respeta notch / safe-area en cabecera y footer */
@supports (padding:max(0px)){
  .site-header{padding-left:max(4vw,env(safe-area-inset-left));padding-right:max(4vw,env(safe-area-inset-right))}
  footer{padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right));padding-bottom:max(28px,env(safe-area-inset-bottom))}
}

/* Contacto en el footer */
.footer-contact{display:flex;flex-direction:column;gap:6px;margin-top:14px}
.footer-contact .footer-contact-label{color:#8ea0ab;letter-spacing:.16em;text-transform:uppercase;font-size:10px}
.footer-tel{color:var(--champagne);font-family:var(--serif);font-size:clamp(26px,7vw,34px);letter-spacing:.005em;line-height:1.05;transition:color .3s,opacity .3s;display:inline-block}
.footer-tel:hover,.footer-tel:focus-visible{color:#d9c49d;opacity:.92}

/* Botón flotante de llamada (móvil) */
.kairon-call-fab{position:fixed;z-index:60;right:max(16px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));width:56px;height:56px;border-radius:50%;background:var(--champagne);color:var(--navy);display:none;align-items:center;justify-content:center;box-shadow:0 12px 30px #10233440,0 2px 8px #10233433;border:0;opacity:0;transform:translateY(14px) scale(.9);transition:opacity .5s var(--ease-premium),transform .5s var(--ease-premium),background .3s;-webkit-tap-highlight-color:transparent}
.kairon-call-fab svg{width:24px;height:24px;display:block;fill:currentColor}
.kairon-call-fab.is-ready{opacity:1;transform:none}
.kairon-call-fab:active{background:#c7a874}
.kairon-call-fab:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
@media (max-width:900px){.kairon-call-fab{display:flex}}
@media (prefers-reduced-motion:reduce){.kairon-call-fab{transition:none}}

/* ---- Intro más ligera y sin pantalla en blanco en móvil ---- */
/* Póster de respaldo detrás del vídeo: si el vídeo falla, no queda blanco */
@media (max-width:900px){
  /* Fondo limpio degradado mientras carga el vídeo (nada de póster recortado feo) */
  .cinematic-intro .intro-video-mobile{background:linear-gradient(160deg,#f4f7f9,#eef3f6 62%,#e8f0f5)}
  .cinematic-intro .static-intro-poster{display:none!important}
  /* Con partículas desactivadas por JS, el canvas queda vacío: lo ocultamos */
  html.kairon-no-particles .particle-canvas{display:none!important}
  /* La fase de partículas mantiene el fondo degradado (nunca blanco) */
  html.kairon-no-particles .native-stage{background:radial-gradient(circle at 50% 47%,#fff 0,#f8fafb 44%,#eef3f6 100%)}
  /* Reproductor por fotogramas (autoplay garantizado, incluso bajo consumo) */
  /* Overlay de intro por CSS (WebP animado). Pseudo-elemento: React no lo toca */
  .cinematic-intro::after{content:"";position:fixed;inset:0;z-index:70;background:#f4f7f9 url(/media/kairon-intro-mobile.webp) center center/cover no-repeat;transition:opacity .7s ease,visibility 0s .7s;pointer-events:none}
  html.kairon-intro-done .cinematic-intro::after{opacity:0;visibility:hidden}
  /* Botón "Saltar intro" por encima del overlay */
  .cinematic-intro .skip-intro{z-index:71}
  .cinematic-intro .mobile-intro-play{display:none!important}
}

/* ---- Ajustes finos de legibilidad/espaciado en móvil ---- */
@media (max-width:620px){
  /* Fix: al ocultar el <br>, "que" y "actuar" quedaban pegados */
  .moment h2 em::before{content:"\00a0"}

  /* Interlineado un poco más aireado en titulares grandes */
  .intro h2,.section-heading h2,.ecosystem-heading h2,.value-heading h2{line-height:1.02}
  .moment h2,.closing h2{line-height:1.04}

  /* Evita que palabras largas desborden en pantallas estrechas */
  .hero h1,.closing h2,.intro h2,.moment h2,.section-heading h2,.ecosystem-heading h2,.value-heading h2{overflow-wrap:anywhere}

  /* Copys y textos algo más cómodos de leer */
  .moment-content>p:last-child{max-width:none}
  .entity-accordion-content p{max-width:none}

  /* Deja aire para el botón flotante al final de la página */
  footer{padding-bottom:calc(max(28px,env(safe-area-inset-bottom)) + 78px)}
}

/* Pantallas muy estrechas (<=380px): reduce un punto los titulares enormes */
@media (max-width:380px){
  .hero h1{font-size:clamp(42px,15vw,58px)}
  .closing h2{font-size:clamp(42px,14vw,58px)}
}

/* Footer multi-columna (>=621px): coloca el bloque de contacto sin romper el grid */
@media (min-width:621px){
  footer{grid-template-columns:1.1fr 1.4fr auto;grid-template-rows:auto auto;grid-template-areas:"brand desc contact" "small small back";align-items:start;column-gap:40px}
  footer>.wordmark{grid-area:brand}
  footer>p{grid-area:desc}
  footer>.footer-contact{grid-area:contact;margin-top:0;align-items:flex-end;text-align:right}
  footer>a[href="#inicio"]{grid-area:back;align-self:end;justify-self:end;margin-top:24px}
  footer>small{grid-area:small}
}