/* OP_SAPO_11: tipografía y color del Gate. Paleta Tiana (refes/colometria.jpg):
   olive #DBD384 · cream #E5D99D · sage #A3BF80 · green #659256 · ink #190B0C.
   El stage/video vive en gate-video.css; aquí solo el bloque de texto. */
#kc-gate .kc-gate-content {
  gap:.5rem;padding:6.5rem 1.25rem max(1.6rem,env(safe-area-inset-bottom));
  background:linear-gradient(180deg,rgba(25,11,12,0) 0%,rgba(25,11,12,.5) 34%,rgba(25,11,12,.82) 100%);
  text-shadow:0 1px 2px #190B0C;
}
#kc-gate .kc-gate-label {
  font:italic 1.02rem Georgia,serif;letter-spacing:.14em;text-transform:none;color:#DBD384;
  opacity:0;transform:translateY(-6px);
}
#kc-gate .kc-gate-content h2 {
  color:#E5D99D;font-size:clamp(3.6rem,18vw,5.6rem);letter-spacing:.01em;
  text-shadow:0 0 14px rgba(219,211,132,.55),0 0 38px rgba(219,211,132,.28),0 2px 0 #190B0C,0 8px 22px rgba(25,11,12,.85);
}
/* Entrada de "Azula": se escribe de izquierda a derecha, de borroso a nítido, con bloom. */
#kc-gate .kc-gate-content h2 span {
  display:inline-block;clip-path:inset(-.2em 100% -.3em -.1em);filter:blur(6px);
}
#kc-gate[data-gate-phase="hold"] .kc-gate-label {animation:gate-label-in 800ms ease-out 650ms both;}
#kc-gate[data-gate-phase="hold"] .kc-gate-content h2 span {animation:gate-name-in 1500ms cubic-bezier(.3,.1,.2,1) 800ms both;}
#kc-gate[data-gate-phase="hold"] .kc-gate-date {animation:gate-label-in 800ms ease-out 1900ms both;}
#kc-gate[data-gate-phase="hold"] #kc-gate-cta {animation:gate-label-in 800ms ease-out 2200ms both;}
#kc-gate .kc-gate-date {
  font:1.02rem Georgia,serif;letter-spacing:.08em;color:#E5D99D;opacity:0;
  display:flex;align-items:center;gap:.7rem;
}
#kc-gate .kc-gate-date::before,#kc-gate .kc-gate-date::after {
  content:"";width:2.2rem;height:1px;background:linear-gradient(90deg,transparent,#A3BF80);
}
#kc-gate .kc-gate-date::after {transform:scaleX(-1);}
#kc-gate .kc-gate-credit {color:#A3BF80;opacity:.85;}
/* Botón: píldora de cristal con doble filete dorado y destello lento. */
#kc-gate #kc-gate-cta {
  position:relative;overflow:hidden;min-width:14.5rem;min-height:54px;margin:.9rem 0 0;padding:.8rem 2.4rem;
  border:1px solid rgba(229,217,157,.9);border-radius:999px;
  background:linear-gradient(180deg,rgba(101,146,86,.42),rgba(25,11,12,.72));
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  color:#F4EBC0;font:italic 1.14rem Georgia,serif;letter-spacing:.06em;text-shadow:0 1px 2px #190B0C;
  box-shadow:0 0 0 4px rgba(25,11,12,.38),0 0 0 5px rgba(219,211,132,.38),0 10px 28px rgba(0,0,0,.45),
    0 0 26px rgba(219,211,132,.28),inset 0 1px 0 rgba(255,250,220,.4);
  opacity:0;-webkit-tap-highlight-color:transparent;
}
#kc-gate #kc-gate-cta::before {
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 36%,rgba(255,248,210,.5) 50%,transparent 64%);
  transform:translateX(-120%);
}
#kc-gate[data-gate-phase="hold"] #kc-gate-cta:not(:disabled)::before {animation:gate-cta-sheen 4.2s ease-in-out 3.2s infinite;}
#kc-gate[data-gate-phase="hold"] #kc-gate-cta:not(:disabled) {animation:gate-label-in 800ms ease-out 2200ms both,gate-cta-breathe 3.6s ease-in-out 3s infinite;}
#kc-gate #kc-gate-cta:disabled {opacity:.5;}
#kc-gate #kc-gate-cta:hover:not(:disabled) {border-color:#F4EBC0;}
#kc-gate #kc-gate-cta:focus-visible {outline:2px solid #F4EBC0;outline-offset:6px;}
#kc-gate #kc-gate-cta:active:not(:disabled) {
  background:linear-gradient(180deg,rgba(229,217,157,.3),rgba(25,11,12,.82));transform:scale(.97);
}
@keyframes gate-label-in {from {opacity:0;transform:translateY(-6px);} to {opacity:1;transform:none;}}
@keyframes gate-name-in {
  0% {clip-path:inset(-.2em 100% -.3em -.1em);filter:blur(7px);letter-spacing:.14em;}
  60% {filter:blur(1.5px);}
  100% {clip-path:inset(-.2em -.2em -.3em -.1em);filter:blur(0);letter-spacing:0;}
}
@keyframes gate-cta-sheen {0%,55% {transform:translateX(-120%);} 100% {transform:translateX(120%);}}
@keyframes gate-cta-breathe {
  0%,100% {box-shadow:0 0 0 4px rgba(25,11,12,.38),0 0 0 5px rgba(219,211,132,.38),0 10px 28px rgba(0,0,0,.45),0 0 22px rgba(219,211,132,.22),inset 0 1px 0 rgba(255,250,220,.4);}
  50% {box-shadow:0 0 0 4px rgba(25,11,12,.38),0 0 0 5px rgba(229,217,157,.6),0 10px 28px rgba(0,0,0,.45),0 0 40px rgba(219,211,132,.42),inset 0 1px 0 rgba(255,250,220,.5);}
}
/* Salida: al pulsar el CTA el texto se disuelve en polvo dorado, escalonado, no se corta en seco.
   Parte de opacity:1 (las animaciones de hold ya no aplican fuera de hold). El scrim espera a que termine. */
#kc-gate:is([data-gate-phase="arming"],[data-gate-phase="exit"],[data-gate-phase="complete"]) .kc-gate-content {
  transition:opacity 500ms ease 700ms;
}
#kc-gate:is([data-gate-phase="arming"],[data-gate-phase="exit"],[data-gate-phase="complete"]) #kc-gate-cta {
  animation:gate-out-cta 800ms cubic-bezier(.4,0,.6,1) both;
  /* OP13: opaque warm-dark glass while leaving. With backdrop blur + brightness the blue water tinted it teal. */
  -webkit-backdrop-filter:none;backdrop-filter:none;
  background:linear-gradient(180deg,rgba(62,78,46,.94),rgba(25,11,12,.94));
}
#kc-gate:is([data-gate-phase="arming"],[data-gate-phase="exit"],[data-gate-phase="complete"]) .kc-gate-date {
  animation:gate-out-text 800ms ease-in 120ms both;
}
#kc-gate:is([data-gate-phase="arming"],[data-gate-phase="exit"],[data-gate-phase="complete"]) .kc-gate-content h2 span {
  animation:gate-out-name 1000ms cubic-bezier(.4,0,.6,1) 200ms both;
}
#kc-gate:is([data-gate-phase="arming"],[data-gate-phase="exit"],[data-gate-phase="complete"]) .kc-gate-label {
  animation:gate-out-text 800ms ease-in 340ms both;
}
@keyframes gate-out-cta {
  0% {opacity:1;transform:none;filter:none;}
  22% {opacity:1;transform:scale(1.05);filter:none;
    box-shadow:0 0 0 4px rgba(25,11,12,.38),0 0 0 5px rgba(244,235,192,.9),0 0 46px rgba(229,217,157,.85),inset 0 1px 0 rgba(255,250,220,.6);}
  100% {opacity:0;transform:translateY(-10px) scale(.96);filter:blur(5px);}
}
@keyframes gate-out-text {
  0% {opacity:1;transform:none;filter:none;}
  100% {opacity:0;transform:translateY(-10px);filter:blur(4px);}
}
@keyframes gate-out-name {
  0% {opacity:1;transform:none;filter:none;letter-spacing:0;clip-path:inset(-.2em -.2em -.3em -.1em);}
  35% {opacity:1;filter:brightness(1.3) blur(0);clip-path:inset(-.2em -.2em -.3em -.1em);}
  100% {opacity:0;transform:translateY(-16px);filter:blur(10px);letter-spacing:.14em;clip-path:inset(-.2em -.2em -.3em -.1em);}
}
@media (max-height:600px) {
  #kc-gate .kc-gate-content {padding:2.5rem .7rem max(.5rem,env(safe-area-inset-bottom));}
  #kc-gate .kc-gate-content h2 {font-size:2.7rem;}
  #kc-gate .kc-gate-label {font-size:.82rem;}
  #kc-gate #kc-gate-cta {min-width:11rem;min-height:46px;font-size:.95rem;padding:.6rem 1.6rem;}
}
/* Sin motion: todo visible de inmediato. */
@media (prefers-reduced-motion:reduce) {
  #kc-gate .kc-gate-label,#kc-gate .kc-gate-date,#kc-gate #kc-gate-cta {opacity:1;transform:none;animation:none !important;}
  #kc-gate .kc-gate-content h2 span {clip-path:none;filter:none;animation:none !important;}
  #kc-gate #kc-gate-cta::before {display:none;}
}
#kc-gate[data-gate-limited="true"] .kc-gate-label,#kc-gate[data-gate-limited="true"] .kc-gate-date,
#kc-gate[data-gate-limited="true"] #kc-gate-cta {opacity:1;transform:none;animation:none !important;}
#kc-gate[data-gate-limited="true"] .kc-gate-content h2 span {clip-path:none;filter:none;animation:none !important;}