:root {
  --bg: #000000;
  --fg: #ffffff;
  --muted: rgba(255,255,255,.48);
  --line: rgba(255,255,255,.28);

  --color-time: 1.5s;
  --color-ease: linear;

  --icon-time: 1.15s;
  --icon-ease: cubic-bezier(.22, .61, .36, 1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--fg);
  font-family: Arial, Helvetica, sans-serif;
}

html { background: #000000; }

body {
  min-height: 100svh;
  overflow-x: hidden;
  transition:
    background-color var(--color-time) var(--color-ease),
    color var(--color-time) var(--color-ease);
}

body.inverted {
  --bg: #ffffff;
  --fg: #000000;
  --muted: rgba(0,0,0,.50);
  --line: rgba(0,0,0,.30);
}

.page {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 2px 18px 18px;
  background: var(--bg);
  transition: background-color var(--color-time) var(--color-ease);
}

.hero {
  width: 100%;
  text-align: center;
}

/* 10% menor que V9 */
.logo-motion {
  width: min(130.5vw, 1418px);
  margin: 0 auto;
  transform-style: preserve-3d;
  will-change: transform;
}

.logo-stage {
  --mx: 50%;
  --my: 50%;
  --radius: 168px;

  position: relative;
  width: 100%;
  transform-style: preserve-3d;
  cursor: crosshair;
  user-select: none;
}

.logo {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

.logo-main {
  position: relative;
  z-index: 1;
  animation: breathe 6.5s ease-in-out infinite;
  transition:
    filter var(--color-time) var(--color-ease),
    opacity var(--color-time) var(--color-ease);
}

body.inverted.intro-distort .logo-main {
  filter: invert(1) blur(13px) contrast(1.75);
  opacity: .70;
}

body:not(.inverted) .logo-main {
  filter: none;
  opacity: 1;
}

.intro-ghost {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  transition:
    opacity var(--color-time) var(--color-ease),
    filter var(--color-time) var(--color-ease),
    transform var(--color-time) var(--color-ease);
}

body.inverted.intro-distort .ghost-a {
  opacity: .72;
  filter: invert(1) blur(8px) contrast(2.1);
  transform: translate(18px, 2px) scaleX(1.045) skewX(-2deg);
}

body.inverted.intro-distort .ghost-b {
  opacity: .52;
  filter: invert(1) blur(18px) contrast(1.5);
  transform: translate(-15px, -2px) scaleX(.955) scaleY(1.02) skewX(2.5deg);
}

body:not(.inverted) .intro-ghost {
  opacity: 0;
  filter: none;
  transform: none;
}

.logo-distort,
.mouse-zoom {
  position: absolute;
  inset: 0;
  pointer-events: none;

  -webkit-mask-image: radial-gradient(
    circle var(--radius) at var(--mx) var(--my),
    #000 0%,
    rgba(0,0,0,.99) 10%,
    rgba(0,0,0,.93) 24%,
    rgba(0,0,0,.80) 40%,
    rgba(0,0,0,.60) 58%,
    rgba(0,0,0,.38) 73%,
    rgba(0,0,0,.18) 86%,
    rgba(0,0,0,.06) 94%,
    transparent 100%
  );

  mask-image: radial-gradient(
    circle var(--radius) at var(--mx) var(--my),
    #000 0%,
    rgba(0,0,0,.99) 10%,
    rgba(0,0,0,.93) 24%,
    rgba(0,0,0,.80) 40%,
    rgba(0,0,0,.60) 58%,
    rgba(0,0,0,.38) 73%,
    rgba(0,0,0,.18) 86%,
    rgba(0,0,0,.06) 94%,
    transparent 100%
  );
}

/* Zoom general de la lente */
.mouse-zoom {
  transform-origin: var(--mx) var(--my);
  transition:
    opacity .25s ease,
    filter var(--color-time) linear;
}

.zoom-soft {
  z-index: 2;
  opacity: 0;
  transform: scale(1.145);
  filter: contrast(1.10);
}

/* Núcleo con zoom más fuerte: especialmente en el centro */
.zoom-core {
  z-index: 3;
  opacity: 0;
  transform: scale(1.24);
  filter: contrast(1.16);

  -webkit-mask-image: radial-gradient(
    circle calc(var(--radius) * .58) at var(--mx) var(--my),
    #000 0%,
    rgba(0,0,0,.98) 20%,
    rgba(0,0,0,.76) 46%,
    rgba(0,0,0,.38) 70%,
    rgba(0,0,0,.10) 89%,
    transparent 100%
  );

  mask-image: radial-gradient(
    circle calc(var(--radius) * .58) at var(--mx) var(--my),
    #000 0%,
    rgba(0,0,0,.98) 20%,
    rgba(0,0,0,.76) 46%,
    rgba(0,0,0,.38) 70%,
    rgba(0,0,0,.10) 89%,
    transparent 100%
  );
}

body.inverted .mouse-zoom {
  filter: invert(1) contrast(1.10);
}

.logo-stage.is-active .zoom-soft {
  opacity: .62;
}

.logo-stage.is-active .zoom-core {
  opacity: .78;
}

.logo-distort {
  z-index: 4;
  opacity: 0;
  transition: opacity .22s ease, filter var(--color-time) linear;
}

body.inverted .logo-distort {
  filter: invert(1);
}

.distort-a {
  filter: blur(5px) contrast(1.55) saturate(1.25);
  transform-origin: var(--mx) var(--my);
  transform: translate(10px, 1px) scale(1.035) scaleX(1.022) scaleY(.998) skewX(-1.5deg);
}

.distort-b {
  filter: blur(11px) contrast(1.35);
  transform-origin: var(--mx) var(--my);
  transform: translate(-8px, -1px) scale(1.055) scaleX(.982) scaleY(1.018) skewX(1.8deg);
}

.distort-c {
  filter: blur(2px) contrast(2.05);
  transform-origin: var(--mx) var(--my);
  transform: translate(4px, 0) scale(1.025);
  mix-blend-mode: difference;
}

.logo-stage.is-active .distort-a { opacity: .74; }
.logo-stage.is-active .distort-b { opacity: .54; }
.logo-stage.is-active .distort-c { opacity: .20; }

.lens-blur {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  backdrop-filter: blur(4px) contrast(1.22);
  -webkit-backdrop-filter: blur(4px) contrast(1.22);

  -webkit-mask-image: radial-gradient(
    circle calc(var(--radius) * .96) at var(--mx) var(--my),
    rgba(0,0,0,.88) 0%,
    rgba(0,0,0,.76) 22%,
    rgba(0,0,0,.56) 45%,
    rgba(0,0,0,.34) 65%,
    rgba(0,0,0,.15) 82%,
    transparent 100%
  );

  mask-image: radial-gradient(
    circle calc(var(--radius) * .96) at var(--mx) var(--my),
    rgba(0,0,0,.88) 0%,
    rgba(0,0,0,.76) 22%,
    rgba(0,0,0,.56) 45%,
    rgba(0,0,0,.34) 65%,
    rgba(0,0,0,.15) 82%,
    transparent 100%
  );

  transition: opacity .28s ease;
}

.logo-stage.is-active .lens-blur { opacity: .72; }

.socials {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 14px auto 0;
}

.social {
  position: relative;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--fg);
  background: transparent;
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;

  transition:
    transform .16s ease,
    border-color var(--color-time) linear,
    color var(--color-time) linear,
    background-color var(--color-time) linear,
    border-radius var(--icon-time) var(--icon-ease);
}

.social.to-square {
  border-radius: 0;
}

.social::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--fg);
  transform: translateY(102%);
  border-radius: inherit;
  transition:
    transform .22s ease,
    background-color var(--color-time) linear,
    border-radius var(--icon-time) var(--icon-ease);
  z-index: -1;
}

.social:hover,
.social:focus-visible {
  color: var(--bg);
  border-color: var(--fg);
  transform: translateY(-3px);
  outline: none;
}

.social:hover::before,
.social:focus-visible::before {
  transform: translateY(0);
}

.social svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.social svg .fill {
  fill: currentColor;
  stroke: none;
}

.tag {
  margin: 10px 0 0;
  font-size: 10px;
  letter-spacing: .32em;
  color: var(--muted);
  transition: color var(--color-time) linear;
}

.noise {
  pointer-events: none;
  position: fixed;
  inset: 0;
  opacity: .038;
  z-index: 999;
  background-image:
    repeating-radial-gradient(circle at 17% 23%, currentColor 0 1px, transparent 1px 3px),
    repeating-linear-gradient(0deg, currentColor 0 1px, transparent 1px 4px);
  mix-blend-mode: difference;
  animation: noiseShift .34s steps(2) infinite;
  transition: color var(--color-time) linear;
}

@keyframes breathe {
  0%,100% { transform: scale(1); }
  50% { transform: scale(1.004); }
}

@keyframes noiseShift {
  0% { transform: translate(0,0); }
  25% { transform: translate(-.5%,.5%); }
  50% { transform: translate(.5%,-.5%); }
  75% { transform: translate(.25%,.5%); }
  100% { transform: translate(0,0); }
}

@media (max-width: 700px) {
  html, body {
    width: 100%;
    min-height: 100%;
    overflow-x: hidden;
  }

  body {
    min-height: 100dvh;
  }

  .page {
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding:
      max(8px, env(safe-area-inset-top))
      12px
      max(14px, env(safe-area-inset-bottom));
  }

  .hero {
    width: 100%;
    max-width: 100%;
    overflow: visible;
  }

  /* El logo entra completo en el viewport.
     Ya no usamos width > 100vw ni escalado que recorte los extremos. */
  .logo-motion {
    width: min(75vw, 448px);
    max-width: 75vw;
    margin: 0 auto;
    transform-origin: center center;
  }

  .logo-stage {
    width: 100%;
    --radius: 118px;
    touch-action: pan-y;
    margin: 18px auto 8px;
    transform: none;
  }

  /* Zoom local más fuerte en touch, sin agrandar el layout completo */
  .zoom-soft {
    transform: scale(1.18);
  }

  .zoom-core {
    transform: scale(1.34);
  }

  .socials {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    width: min(92vw, 360px);
    margin: 12px auto 0;
    padding: 0;
  }

  .social {
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;
    min-width: 0;
  }

  .social svg {
    width: 46%;
    height: 46%;
    max-width: 22px;
    max-height: 22px;
  }

  .tag {
    margin-top: 8px;
    font-size: 9px;
    letter-spacing: .26em;
  }
}

@media (max-width: 390px) {
  .logo-motion {
    width: 72vw;
    max-width: 72vw;
  }

  .logo-stage {
    --radius: 104px;
    margin-top: 14px;
  }

  .socials {
    width: 94vw;
    gap: 6px;
  }

  .tag {
    font-size: 8px;
  }
}


/* Marco dibujado original: blanco, plano, sin glow/neón/sombra.
   mix-blend-mode: screen hace que el negro del PNG no tape la página. */
.page-frame {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  object-fit: fill;
  z-index: 1000;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  opacity: 1;
  filter: none;
  mix-blend-mode: normal;
}

/* En navegadores que no soporten dvh */
@supports not (height: 100dvh) {
  .page-frame {
    height: 100vh;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}


/* V15 — el marco comparte el blur/distorsión inicial del logo */
body.inverted.intro-distort .page-frame {
  filter: blur(10px) contrast(1.45) saturate(1.25);
  transform: scale(1.018);
}

.page-frame {
  transform-origin: center center;
  transition:
    filter 1.5s linear,
    transform 1.5s linear;
  will-change: filter, transform;
}


/* V16 — marco con "trazo vivo" + glitch */
.frame-stack {
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
}

.frame-stack .page-frame {
  position: absolute;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  filter: none;
  mix-blend-mode: normal;
  transform-origin: center center;
  will-change: transform, opacity, filter, clip-path;
}

/* Base: estable, para que nunca se pierda la forma original */
.frame-base {
  opacity: 1;
}

/* Trazo vivo: dos copias extremadamente sutiles que nunca están quietas */
.frame-live {
  opacity: .22;
  animation-timing-function: steps(2, end);
  animation-iteration-count: infinite;
}

.frame-live-a {
  animation-name: frameLivingA;
  animation-duration: 1.9s;
}

.frame-live-b {
  animation-name: frameLivingB;
  animation-duration: 2.7s;
  opacity: .14;
}

/* Glitch: oculto casi todo el tiempo; JS lo activa en golpes breves */
.frame-glitch {
  opacity: 0;
}

.frame-glitch.is-hit {
  opacity: .48;
}

.frame-glitch-a.is-hit {
  animation: frameGlitchA .18s steps(2, end) 1;
}

.frame-glitch-b.is-hit {
  animation: frameGlitchB .16s steps(2, end) 1;
}

/* Mantener la animación inicial de blur del marco */
body.inverted.intro-distort .frame-stack .page-frame {
  filter: blur(10px) contrast(1.45) saturate(1.25);
  transform: scale(1.018);
}

.frame-stack .page-frame {
  transition:
    filter 1.5s linear,
    transform 1.5s linear;
}

@keyframes frameLivingA {
  0%   { transform: translate(0,0) scale(1); }
  15%  { transform: translate(.5px,-.3px) scaleX(1.0008); }
  32%  { transform: translate(-.6px,.4px) scaleY(.9994); }
  47%  { transform: translate(.2px,.7px) scaleX(.9995); }
  63%  { transform: translate(.7px,-.4px) scaleY(1.0006); }
  79%  { transform: translate(-.4px,-.2px) scaleX(1.0004); }
  100% { transform: translate(0,0) scale(1); }
}

@keyframes frameLivingB {
  0%   { transform: translate(0,0) skewX(0deg); }
  20%  { transform: translate(-.8px,.3px) skewX(.05deg); }
  43%  { transform: translate(.6px,-.5px) skewX(-.06deg); }
  68%  { transform: translate(-.3px,.6px) skewX(.04deg); }
  84%  { transform: translate(.4px,-.2px) skewX(-.03deg); }
  100% { transform: translate(0,0) skewX(0deg); }
}

@keyframes frameGlitchA {
  0% {
    transform: translate(0,0);
    clip-path: inset(0 0 0 0);
  }
  25% {
    transform: translate(8px,-1px) scaleX(1.008);
    clip-path: inset(7% 0 63% 0);
  }
  50% {
    transform: translate(-10px,1px) scaleX(.994);
    clip-path: inset(34% 0 38% 0);
  }
  75% {
    transform: translate(5px,0) scaleX(1.004);
    clip-path: inset(70% 0 9% 0);
  }
  100% {
    transform: translate(0,0);
    clip-path: inset(0 0 0 0);
  }
}

@keyframes frameGlitchB {
  0% {
    transform: translate(0,0);
    clip-path: inset(0 0 0 0);
  }
  30% {
    transform: translate(-6px,1px) skewX(-.2deg);
    clip-path: inset(18% 0 55% 0);
  }
  60% {
    transform: translate(9px,-1px) skewX(.18deg);
    clip-path: inset(52% 0 21% 0);
  }
  100% {
    transform: translate(0,0);
    clip-path: inset(0 0 0 0);
  }
}

@media (max-width: 700px) {
  .frame-stack .page-frame {
    width: 100vw;
    height: 100dvh;
  }

  .frame-live-a {
    animation-duration: 2.2s;
  }

  .frame-live-b {
    animation-duration: 3.1s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .frame-live,
  .frame-glitch {
    animation: none !important;
  }
}

/* V17 — stacking seguro: el marco ya tiene transparencia real */
.page {
  position: relative;
  z-index: 1;
}

.frame-stack {
  z-index: 20;
}

.frame-stack .page-frame {
  mix-blend-mode: normal;
}


/* V18 — glitch reactivo cuando el cursor se acerca al marco */
.frame-stack {
  --edge-intensity: 0;
  --edge-x: 50%;
  --edge-y: 50%;
}

.frame-stack.is-near-edge .frame-live-a {
  opacity: calc(.22 + (var(--edge-intensity) * .28));
  animation-duration: calc(1.9s - (var(--edge-intensity) * 1.15s));
}

.frame-stack.is-near-edge .frame-live-b {
  opacity: calc(.14 + (var(--edge-intensity) * .22));
  animation-duration: calc(2.7s - (var(--edge-intensity) * 1.55s));
}

/* Capa local de glitch que aparece cerca del cursor */
.frame-edge-react {
  position: absolute;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  object-fit: fill;
  opacity: 0;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  z-index: 6;
  transform-origin: var(--edge-x) var(--edge-y);
  will-change: transform, opacity, filter;

  -webkit-mask-image: radial-gradient(
    circle 150px at var(--edge-x) var(--edge-y),
    #000 0%,
    rgba(0,0,0,.95) 28%,
    rgba(0,0,0,.65) 55%,
    rgba(0,0,0,.25) 78%,
    transparent 100%
  );
  mask-image: radial-gradient(
    circle 150px at var(--edge-x) var(--edge-y),
    #000 0%,
    rgba(0,0,0,.95) 28%,
    rgba(0,0,0,.65) 55%,
    rgba(0,0,0,.25) 78%,
    transparent 100%
  );
}

.frame-stack.is-near-edge .frame-edge-react {
  opacity: calc(.18 + (var(--edge-intensity) * .68));
  animation: frameEdgeReactive .12s steps(2, end) infinite;
}

@keyframes frameEdgeReactive {
  0%   { transform: translate(0,0) scale(1); filter: contrast(1); }
  25%  { transform: translate(5px,-1px) scaleX(1.004); filter: contrast(1.25); }
  50%  { transform: translate(-7px,1px) scaleX(.997); filter: contrast(1.55); }
  75%  { transform: translate(3px,0) scaleX(1.002); filter: contrast(1.18); }
  100% { transform: translate(0,0) scale(1); filter: contrast(1); }
}

/* Cuando el cursor está muy cerca, el glitch se vuelve más agresivo */
.frame-stack.is-edge-hot .frame-edge-react {
  animation-duration: .075s;
}

@media (max-width: 700px) {
  .frame-edge-react {
    display: none;
  }
}


/* V19 — glitch + blur más fuerte en el marco al acercar el mouse */
.frame-stack.is-near-edge .frame-edge-react {
  opacity: calc(.35 + (var(--edge-intensity) * .65));
  animation: frameEdgeReactiveStrong .095s steps(2, end) infinite;
  filter:
    blur(calc(1px + (var(--edge-intensity) * 5px)))
    contrast(calc(1.2 + (var(--edge-intensity) * 1.5)));
}

.frame-stack.is-near-edge .frame-live-a {
  opacity: calc(.30 + (var(--edge-intensity) * .48));
  filter:
    blur(calc(var(--frame-blur, 0px) + (var(--edge-intensity) * 3px)))
    contrast(calc(1.1 + (var(--edge-intensity) * 1.1)));
}

.frame-stack.is-near-edge .frame-live-b {
  opacity: calc(.22 + (var(--edge-intensity) * .42));
  filter:
    blur(calc(var(--frame-blur, 0px) + (var(--edge-intensity) * 5px)))
    contrast(calc(1.15 + (var(--edge-intensity) * 1.35)));
}

.frame-stack.is-edge-hot .frame-edge-react {
  animation-duration: .055s;
  filter: blur(7px) contrast(3);
}

@keyframes frameEdgeReactiveStrong {
  0%   { transform: translate(0,0) scale(1) skewX(0deg); }
  18%  { transform: translate(10px,-2px) scaleX(1.012) skewX(.6deg); }
  36%  { transform: translate(-14px,2px) scaleX(.989) skewX(-.8deg); }
  54%  { transform: translate(8px,1px) scaleX(1.016) skewX(.45deg); }
  72%  { transform: translate(-9px,-1px) scaleX(.994) skewX(-.5deg); }
  88%  { transform: translate(5px,0) scaleX(1.007); }
  100% { transform: translate(0,0) scale(1) skewX(0deg); }
}

/* Glitch todavía más agresivo en el núcleo de la zona del cursor */
.frame-stack.is-edge-hot .frame-live-a {
  animation-duration: .32s;
}
.frame-stack.is-edge-hot .frame-live-b {
  animation-duration: .24s;
}


/* V20 — adaptación móvil del glitch/blur del marco */
@media (max-width: 700px) {
  html, body {
    width: 100%;
    min-height: 100%;
    overflow-x: hidden;
  }

  body {
    min-height: 100dvh;
  }

  .page {
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding:
      max(8px, env(safe-area-inset-top))
      12px
      max(14px, env(safe-area-inset-bottom));
  }

  .hero {
    width: 100%;
    max-width: 100%;
  }

  /* Logo contenido para móvil */
  .logo-motion {
    width: min(72vw, 430px) !important;
    max-width: 72vw !important;
    margin: 0 auto !important;
    transform-origin: center center;
  }

  .logo-stage {
    width: 100%;
    --radius: 112px;
    touch-action: pan-y;
    margin: 14px auto 6px;
  }

  .socials {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 7px;
    width: min(92vw, 340px);
    margin: 10px auto 0;
    padding: 0;
  }

  .social {
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;
    min-width: 0;
  }

  .social svg {
    width: 44%;
    height: 44%;
    max-width: 21px;
    max-height: 21px;
  }

  .tag {
    margin-top: 8px;
    font-size: 9px;
    letter-spacing: .25em;
  }

  /* El marco mantiene toda la pantalla y deja zona segura */
  .frame-stack,
  .frame-stack .page-frame,
  .frame-edge-react {
    width: 100vw;
    height: 100dvh;
  }

  /* En móvil el efecto se activa con touch cerca del borde */
  .frame-edge-react {
    display: block;
    -webkit-mask-image: radial-gradient(
      circle 120px at var(--edge-x) var(--edge-y),
      #000 0%,
      rgba(0,0,0,.96) 22%,
      rgba(0,0,0,.70) 48%,
      rgba(0,0,0,.30) 72%,
      transparent 100%
    );
    mask-image: radial-gradient(
      circle 120px at var(--edge-x) var(--edge-y),
      #000 0%,
      rgba(0,0,0,.96) 22%,
      rgba(0,0,0,.70) 48%,
      rgba(0,0,0,.30) 72%,
      transparent 100%
    );
  }

  .frame-stack.is-near-edge .frame-edge-react {
    animation-duration: .085s;
  }

  .frame-stack.is-edge-hot .frame-edge-react {
    animation-duration: .05s;
    filter: blur(6px) contrast(2.7);
  }
}

@media (max-width: 390px) {
  .logo-motion {
    width: min(68vw, 390px) !important;
    max-width: 68vw !important;
  }

  .logo-stage {
    --radius: 100px;
  }

  .socials {
    width: 94vw;
    gap: 5px;
  }

  .tag {
    font-size: 8px;
  }
}


/* V21 — FIX marco móvil: evita que la imagen 16:9 se estire/corte en vertical */
@media (max-width: 700px) {
  html, body {
    width: 100%;
    min-height: 100%;
    margin: 0;
    overflow-x: hidden;
  }

  body {
    min-height: 100svh;
  }

  /* El marco deja de usar la imagen completa deformada en móvil.
     Se reconstruye con cuatro lados usando la misma textura del PNG. */
  .frame-stack {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100svh !important;
    overflow: hidden !important;
    pointer-events: none !important;
    z-index: 30;
  }

  .frame-stack > .page-frame,
  .frame-stack > .frame-edge-react {
    display: none !important;
  }

  .frame-stack::before,
  .frame-stack::after {
    content: "";
    position: absolute;
    inset: 8px;
    pointer-events: none;
    border: 0;
    z-index: 31;
  }

  /* Marco limpio y proporcionado en portrait */
  .frame-stack::before {
    inset: 10px;
    border: 3px solid rgba(255,255,255,.92);
    clip-path: polygon(
      0 0, 100% 0, 100% 100%, 0 100%,
      0 98%, 1.2% 96.5%, .2% 94%, 1.3% 91.5%, .3% 89%,
      1.1% 86%, .2% 83%, 1.2% 80%, .3% 77%, 1% 74%,
      .2% 71%, 1.1% 68%, .3% 65%, 1% 62%, .2% 59%,
      1.2% 56%, .2% 53%, 1.1% 50%, .3% 47%, 1% 44%,
      .2% 41%, 1.1% 38%, .3% 35%, 1% 32%, .2% 29%,
      1.1% 26%, .3% 23%, 1% 20%, .2% 17%, 1.1% 14%,
      .3% 11%, 1% 8%, 0 5%
    );
    filter: none;
    opacity: .96;
  }

  /* segunda línea viva, muy sutil, para conservar el carácter */
  .frame-stack::after {
    inset: 12px;
    border: 1px solid rgba(255,255,255,.30);
    opacity: .45;
  }

  /* No permitir que el efecto táctil agrande físicamente el marco */
  .frame-stack.is-near-edge::before {
    filter: blur(calc(var(--edge-intensity) * 2.2px))
            contrast(calc(1 + var(--edge-intensity) * .8));
    animation: mobileFrameGlitch .11s steps(2,end) infinite;
  }

  .frame-stack.is-edge-hot::before {
    filter: blur(3.5px) contrast(2);
    animation-duration: .065s;
  }

  @keyframes mobileFrameGlitch {
    0%   { transform: translate(0,0); }
    25%  { transform: translate(2px,-1px); }
    50%  { transform: translate(-3px,1px); }
    75%  { transform: translate(1px,0); }
    100% { transform: translate(0,0); }
  }

  /* Evita que el contenido genere una segunda "pantalla" al hacer scroll */
  .page {
    box-sizing: border-box;
    width: 100%;
    min-height: 100svh;
    height: 100svh;
    overflow: hidden;
    padding-top: max(28px, env(safe-area-inset-top));
    padding-bottom: max(28px, env(safe-area-inset-bottom));
  }

  .hero {
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}


/* V22 — marco original reconstruido para móvil con 4 segmentos del PNG */
.mobile-frame-piece {
  display: none;
}

@media (max-width: 700px) {
  /* Desactiva el rectángulo CSS de V21 */
  .frame-stack::before,
  .frame-stack::after {
    display: none !important;
  }

  .frame-stack {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100svh !important;
    overflow: hidden !important;
    pointer-events: none !important;
    z-index: 30;
  }

  .mobile-frame-piece {
    display: block;
    position: absolute;
    z-index: 35;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
    opacity: .98;
    filter: none;
    transform-origin: center center;
    will-change: transform, filter, opacity;
  }

  .mobile-frame-top {
    top: 7px;
    left: 8px;
    width: calc(100vw - 16px);
    height: 34px;
  }

  .mobile-frame-bottom {
    bottom: 7px;
    left: 8px;
    width: calc(100vw - 16px);
    height: 34px;
  }

  .mobile-frame-left {
    top: 8px;
    left: 7px;
    width: 34px;
    height: calc(100svh - 16px);
  }

  .mobile-frame-right {
    top: 8px;
    right: 7px;
    width: 34px;
    height: calc(100svh - 16px);
  }

  /* trazo vivo */
  .mobile-frame-top,
  .mobile-frame-bottom {
    animation: mobileFrameAliveH 2.15s steps(2,end) infinite;
  }

  .mobile-frame-left,
  .mobile-frame-right {
    animation: mobileFrameAliveV 2.55s steps(2,end) infinite;
  }

  /* blur inicial sincronizado */
  body.inverted.intro-distort .mobile-frame-piece {
    filter: blur(9px) contrast(1.45);
    opacity: .78;
    transform: scale(1.012);
  }

  body:not(.inverted) .mobile-frame-piece {
    transition:
      filter 1.5s linear,
      opacity 1.5s linear,
      transform 1.5s linear;
  }

  /* glitch reactivo al touch cerca del borde */
  .frame-stack.is-near-edge .mobile-frame-piece {
    filter:
      blur(calc(var(--edge-intensity) * 2.7px))
      contrast(calc(1 + var(--edge-intensity) * .9));
  }

  .frame-stack.is-edge-hot .mobile-frame-piece {
    filter: blur(4px) contrast(2.15);
  }

  .frame-stack.is-edge-hot .mobile-frame-top,
  .frame-stack.is-edge-hot .mobile-frame-bottom {
    animation: mobileFrameHotH .075s steps(2,end) infinite;
  }

  .frame-stack.is-edge-hot .mobile-frame-left,
  .frame-stack.is-edge-hot .mobile-frame-right {
    animation: mobileFrameHotV .075s steps(2,end) infinite;
  }

  @keyframes mobileFrameAliveH {
    0%   { transform: translate(0,0) scaleX(1); }
    25%  { transform: translate(.6px,-.3px) scaleX(1.001); }
    50%  { transform: translate(-.5px,.4px) scaleX(.999); }
    75%  { transform: translate(.3px,-.2px) scaleX(1.0006); }
    100% { transform: translate(0,0) scaleX(1); }
  }

  @keyframes mobileFrameAliveV {
    0%   { transform: translate(0,0) scaleY(1); }
    25%  { transform: translate(-.3px,.7px) scaleY(1.001); }
    50%  { transform: translate(.4px,-.6px) scaleY(.999); }
    75%  { transform: translate(-.2px,.4px) scaleY(1.0006); }
    100% { transform: translate(0,0) scaleY(1); }
  }

  @keyframes mobileFrameHotH {
    0%   { transform: translate(0,0) scaleX(1); }
    25%  { transform: translate(5px,-1px) scaleX(1.008); }
    50%  { transform: translate(-7px,1px) scaleX(.994); }
    75%  { transform: translate(3px,0) scaleX(1.004); }
    100% { transform: translate(0,0) scaleX(1); }
  }

  @keyframes mobileFrameHotV {
    0%   { transform: translate(0,0) scaleY(1); }
    25%  { transform: translate(-1px,5px) scaleY(1.008); }
    50%  { transform: translate(1px,-7px) scaleY(.994); }
    75%  { transform: translate(0,3px) scaleY(1.004); }
    100% { transform: translate(0,0) scaleY(1); }
  }
}

@media (max-width: 390px) {
  .mobile-frame-top,
  .mobile-frame-bottom {
    height: 30px;
  }

  .mobile-frame-left,
  .mobile-frame-right {
    width: 30px;
  }
}


/* V23 — noise orgánico en el fondo, reemplazando el glitch de fondo */
body::before {
  content: "";
  position: fixed;
  inset: -50%;
  width: 200%;
  height: 200%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.12;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.72'/%3E%3C/svg%3E");
  animation: ocniNoise .18s steps(2) infinite;
  transform: translate3d(0,0,0);
  mix-blend-mode: screen;
}

@keyframes ocniNoise {
  0%   { transform: translate3d(0,0,0); }
  20%  { transform: translate3d(-2.5%, 1.5%, 0); }
  40%  { transform: translate3d(2%, -2%, 0); }
  60%  { transform: translate3d(-1%, 2.5%, 0); }
  80%  { transform: translate3d(2.5%, 1%, 0); }
  100% { transform: translate3d(-1.5%, -2%, 0); }
}

@media (max-width: 700px) {
  body::before {
    opacity: 0.10;
    animation-duration: .22s;
  }
}


/* V26 — recuadros móviles en 3 + 2, más respirados y centrados */
@media (max-width: 700px) {
  .socials {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    width: min(88vw, 340px) !important;
    gap: 10px 8px !important;
    margin: 12px auto 0 !important;
    padding: 0 !important;
  }

  /* Primera fila: 3 botones */
  .social:nth-child(1) { grid-column: 1 / span 2; }
  .social:nth-child(2) { grid-column: 3 / span 2; }
  .social:nth-child(3) { grid-column: 5 / span 2; }

  /* Segunda fila: 2 botones centrados */
  .social:nth-child(4) { grid-column: 2 / span 2; }
  .social:nth-child(5) { grid-column: 4 / span 2; }

  .social {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    min-width: 0 !important;
  }

  .social svg {
    width: 43% !important;
    height: 43% !important;
    max-width: 22px !important;
    max-height: 22px !important;
  }

  .tag {
    margin-top: 10px !important;
  }
}

@media (max-width: 390px) {
  .socials {
    width: 90vw !important;
    gap: 8px 6px !important;
  }

  .social svg {
    max-width: 20px !important;
    max-height: 20px !important;
  }
}


/* V27 — responsive de escritorio/laptop por ancho + altura disponible */
@media (min-width: 701px) {
  .page {
    min-height: 100vh;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding:
      clamp(18px, 2.2vh, 30px)
      clamp(22px, 2.5vw, 42px);
  }

  .hero {
    width: 100%;
    max-width: 100%;
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .logo-motion {
    width: min(78vw, 118vh, 1260px) !important;
    max-width: min(78vw, 118vh, 1260px) !important;
    margin: 0 auto !important;
  }

  .logo-stage {
    width: 100%;
    margin: 0 auto;
  }

  .socials {
    margin-top: clamp(10px, 1.8vh, 20px) !important;
  }

  .tag {
    margin-top: clamp(6px, 1vh, 10px) !important;
  }
}

@media (min-width: 701px) and (max-height: 820px) {
  .page {
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .logo-motion {
    width: min(66vw, 88vh, 980px) !important;
    max-width: min(66vw, 88vh, 980px) !important;
  }

  .socials {
    margin-top: 8px !important;
  }

  .social {
    width: 48px !important;
    height: 48px !important;
  }

  .social svg {
    width: 22px !important;
    height: 22px !important;
  }

  .tag {
    margin-top: 6px !important;
  }
}

@media (min-width: 701px) and (max-height: 700px) {
  .logo-motion {
    width: min(58vw, 76vh, 820px) !important;
    max-width: min(58vw, 76vh, 820px) !important;
  }

  .social {
    width: 44px !important;
    height: 44px !important;
  }

  .social svg {
    width: 20px !important;
    height: 20px !important;
  }
}

@media (min-width: 701px) {
  .frame-stack,
  .frame-stack .page-frame,
  .frame-edge-react {
    max-width: 100vw;
    max-height: 100vh;
  }
}


/* ==========================================================
   V30 CLEAN — unique selectors, no inherited signup styles
   ========================================================== */

.ocni-signup-v30{
  width:min(720px,74vw);
  margin:10px auto 0;
  position:relative;
  z-index:20;
  text-align:center;

  opacity:0;
  transform:translateY(14px) scale(.72);
  pointer-events:none;
}

.ocni-signup-v30.is-visible{
  pointer-events:auto;
  animation:ocniSignupPopV30 .78s cubic-bezier(.17,.89,.32,1.35) forwards;
}

@keyframes ocniSignupPopV30{
  0%{
    opacity:0;
    transform:translateY(18px) scale(.56);
    filter:blur(6px);
  }
  58%{
    opacity:1;
    transform:translateY(-3px) scale(1.07);
    filter:blur(0);
  }
  80%{
    transform:translateY(1px) scale(.98);
  }
  100%{
    opacity:1;
    transform:translateY(0) scale(1);
    filter:blur(0);
  }
}

.ocni-copy-v30{
  margin-bottom:12px;
}

.ocni-title-v30{
  color:#fff;
  font-size:clamp(11px,1vw,15px);
  letter-spacing:.16em;
  line-height:1.2;
}

.ocni-note-v30{
  margin-top:8px;
  color:#d250a7;
  font-size:clamp(8px,.72vw,11px);
  letter-spacing:.12em;
}

.ocni-row-v30{
  position:relative;
  display:block;
  padding-right:96px;
}

.ocni-form-v30{
  display:flex;
  width:100%;
  height:54px;
  border:1px solid rgba(210,80,167,.85);
  background:rgba(0,0,0,.18);
  box-shadow:0 0 14px rgba(210,80,167,.12);
}

.ocni-form-v30 input{
  flex:1;
  min-width:0;
  border:0;
  outline:0;
  background:transparent;
  color:#fff;
  padding:0 18px;
  font-size:12px;
  letter-spacing:.12em;
}

.ocni-form-v30 input::placeholder{
  color:rgba(255,255,255,.45);
}

.ocni-form-v30 button{
  width:58px;
  border:0;
  border-left:1px solid rgba(210,80,167,.40);
  background:transparent;
  color:#d250a7;
  font-size:25px;
  cursor:pointer;
}

.ocni-form-v30 button:hover{
  background:#d250a7;
  color:#000;
}

/* Cat absolutely isolated */
#ocni-cat-v30{
  position:absolute;
  right:0;
  top:50%;

  width:80.5px;
  height:80.5px;
  min-width:80.5px;
  min-height:80.5px;
  max-width:80.5px;
  max-height:80.5px;

  margin:0;
  padding:0;
  overflow:hidden;
  z-index:30;
  pointer-events:none;

  opacity:0;
  transform:translateY(-50%) translateX(14px) scale(.52) rotate(5deg);
}

#ocni-cat-v30 img{
  position:absolute;
  inset:0;
  display:block;

  width:80.5px;
  height:80.5px;
  min-width:80.5px;
  min-height:80.5px;
  max-width:80.5px;
  max-height:80.5px;

  margin:0;
  padding:0;
  object-fit:cover;
  transform:none;
  border:1px solid rgba(210,80,167,.72);
}

#ocni-cat-v30.is-visible{
  animation:ocniCatPopV30 .64s cubic-bezier(.17,.89,.32,1.35) forwards;
}

@keyframes ocniCatPopV30{
  0%{
    opacity:0;
    transform:translateY(-50%) translateX(14px) scale(.45) rotate(6deg);
    filter:blur(7px);
  }
  62%{
    opacity:1;
    transform:translateY(-50%) translateX(-3px) scale(1.08) rotate(-2deg);
    filter:blur(0);
  }
  100%{
    opacity:1;
    transform:translateY(-50%) translateX(0) scale(1) rotate(0);
    filter:blur(0);
  }
}

#ocni-particles-v30{
  position:absolute;
  left:50%;
  top:78%;
  width:1px;
  height:1px;
  z-index:40;
  pointer-events:none;
}

#ocni-particles-v30[data-origin="cat"]{
  left:calc(100% - 35px);
  top:74%;
}

.ocni-particle-v30{
  position:absolute;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#fff;
  opacity:0;
}

.ocni-particle-v30:nth-child(3n){ background:#bd4b98; }
.ocni-particle-v30:nth-child(4n){ width:4px; height:4px; }

#ocni-particles-v30.is-bursting .ocni-particle-v30{
  animation:ocniParticleBurstV30 .72s cubic-bezier(.18,.8,.28,1) var(--d) forwards;
}

@keyframes ocniParticleBurstV30{
  0%{
    opacity:0;
    transform:translate(-50%,-50%) scale(.2);
  }
  20%{ opacity:1; }
  100%{
    opacity:0;
    transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) scale(1.1);
  }
}

.ocni-signup-v30.is-submitted{
  animation:ocniSubmitV30 .43s ease forwards;
}

@keyframes ocniSubmitV30{
  0%{ transform:scale(1); filter:blur(0); }
  45%{ transform:scale(.94); filter:blur(4px); }
  100%{ transform:scale(1); filter:blur(0); }
}

.ocni-success-v30{
  margin-top:10px;
  padding:16px 18px;
  border:1px solid rgba(210,80,167,.72);
  color:#fff;
  font-size:13px;
  line-height:1.45;
  letter-spacing:.14em;
}

/* Small laptops */
@media (min-width:701px) and (max-height:820px){
  .ocni-signup-v30{
    width:min(620px,70vw);
    margin-top:6px;
  }

  .ocni-form-v30{
    height:46px;
  }

  .ocni-title-v30{
    font-size:11px;
  }

  .ocni-note-v30{
    font-size:7px;
    margin-top:6px;
  }

  .ocni-row-v30{
    padding-right:82px;
  }

  #ocni-cat-v30,
  #ocni-cat-v30 img{
    width:69px;
    height:69px;
    min-width:69px;
    min-height:69px;
    max-width:69px;
    max-height:69px;
  }
}

/* Mobile */
@media (max-width:700px){
  .ocni-signup-v30{
    width:min(88vw,430px);
    margin-top:10px;
  }

  .ocni-title-v30{
    font-size:10px;
    letter-spacing:.10em;
  }

  .ocni-note-v30{
    font-size:7px;
    letter-spacing:.08em;
  }

  .ocni-row-v30{
    padding-right:74px;
  }

  .ocni-form-v30{
    height:46px;
  }

  .ocni-form-v30 input{
    padding:0 12px;
    font-size:10px;
    letter-spacing:.08em;
  }

  .ocni-form-v30 button{
    width:46px;
    font-size:22px;
  }

  #ocni-cat-v30,
  #ocni-cat-v30 img{
    width:62.1px;
    height:62.1px;
    min-width:62.1px;
    min-height:62.1px;
    max-width:62.1px;
    max-height:62.1px;
  }
}

/* V31 corrections */
@media (max-width:700px){
  .ocni-form-v30 input{
    font-size:9px;
    letter-spacing:.045em;
  }
}


/* ==========================================================
   V32 — gato aparece frente al logo, conserva timing y animación
   ========================================================== */

.logo-stage,
.logo-motion {
  position: relative !important;
}

/* El formulario vuelve a ocupar todo el ancho */
.ocni-row-v30 {
  padding-right: 0 !important;
}

/* Nuevo gato sobre el logo */
#ocni-cat-logo-v32 {
  position: absolute;
  left: 50%;
  top: 45%;
  width: 112px;
  height: 112px;
  min-width: 112px;
  min-height: 112px;
  max-width: 112px;
  max-height: 112px;
  z-index: 60;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.42) rotate(5deg);
  filter: blur(10px);
}

#ocni-cat-logo-v32 img {
  position: absolute !important;
  inset: 0 !important;
  width: 112px !important;
  height: 112px !important;
  min-width: 112px !important;
  min-height: 112px !important;
  max-width: 112px !important;
  max-height: 112px !important;
  object-fit: cover !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  border: 1px solid rgba(210,80,167,.78);
  box-shadow: 0 0 14px rgba(210,80,167,.20);
}

#ocni-cat-logo-v32.is-visible {
  animation: ocniCatLogoPopV32 .72s cubic-bezier(.17,.89,.32,1.35) forwards;
}

@keyframes ocniCatLogoPopV32 {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.34) rotate(7deg);
    filter: blur(12px);
  }
  58% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.10) rotate(-2deg);
    filter: blur(0);
  }
  80% {
    transform: translate(-50%, -50%) scale(.97) rotate(.5deg);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) rotate(0);
    filter: blur(0);
  }
}

/* Reacción del gato junto con el logo al hover/touch */
.logo-stage:hover #ocni-cat-logo-v32.is-visible {
  filter: blur(1.2px);
  transform: translate(-50%, -50%) scale(1.03);
  transition: transform .25s ease, filter .25s ease;
}

/* Mensaje final */
.ocni-success-v32 {
  width: min(720px, 74vw);
  margin: 14px auto 0;
  padding: 18px 22px;
  border: 1px solid rgba(210,80,167,.78);
  box-shadow: 0 0 16px rgba(210,80,167,.12);
  color: #fff;
  font-size: clamp(14px,1.1vw,18px);
  letter-spacing: .12em;
  line-height: 1.45;
  text-align: center;
  animation: ocniSuccessPopV32 .55s cubic-bezier(.17,.89,.32,1.35) forwards;
}

@keyframes ocniSuccessPopV32 {
  0% { opacity: 0; transform: scale(.72); filter: blur(6px); }
  60% { opacity: 1; transform: scale(1.06); filter: blur(0); }
  100% { opacity: 1; transform: scale(1); filter: blur(0); }
}

@media (min-width:701px) and (max-height:820px){
  #ocni-cat-logo-v32,
  #ocni-cat-logo-v32 img{
    width: 92px !important;
    height: 92px !important;
    min-width: 92px !important;
    min-height: 92px !important;
    max-width: 92px !important;
    max-height: 92px !important;
  }
}

@media (max-width:700px){
  #ocni-cat-logo-v32{
    top: 46%;
  }

  #ocni-cat-logo-v32,
  #ocni-cat-logo-v32 img{
    width: 78px !important;
    height: 78px !important;
    min-width: 78px !important;
    min-height: 78px !important;
    max-width: 78px !important;
    max-height: 78px !important;
  }

  .ocni-success-v32{
    width: min(88vw,430px);
    padding: 14px 12px;
    font-size: 11px;
  }
}


/* ==========================================================
   V33 — submit robusto + mensaje final visible
   ========================================================== */

.ocni-form-v30.is-leaving{
  animation: ocniFormLeaveV33 .32s ease forwards !important;
}

@keyframes ocniFormLeaveV33{
  0%{
    opacity:1;
    transform:scale(1);
    filter:blur(0);
  }
  100%{
    opacity:0;
    transform:scale(.88);
    filter:blur(6px);
  }
}

.ocni-success-panel-v33{
  display:none;
  width:100%;
  box-sizing:border-box;
  margin:0 auto;
  padding:18px 20px;

  border:1px solid rgba(210,80,167,.82);
  background:rgba(0,0,0,.20);
  box-shadow:0 0 16px rgba(210,80,167,.14);

  color:#fff;
  text-align:center;
  font-size:clamp(13px,1.05vw,17px);
  line-height:1.45;
  letter-spacing:.12em;

  opacity:0;
  transform:scale(.72);
  filter:blur(7px);
}

.ocni-success-panel-v33 strong{
  color:#d250a7;
  font-weight:600;
}

.ocni-success-panel-v33.is-visible{
  display:block;
  animation:ocniSuccessInV33 .62s cubic-bezier(.17,.89,.32,1.35) forwards;
}

@keyframes ocniSuccessInV33{
  0%{
    opacity:0;
    transform:scale(.68);
    filter:blur(8px);
  }
  58%{
    opacity:1;
    transform:scale(1.07);
    filter:blur(0);
  }
  82%{
    transform:scale(.98);
  }
  100%{
    opacity:1;
    transform:scale(1);
    filter:blur(0);
  }
}

@media (max-width:700px){
  .ocni-success-panel-v33{
    padding:14px 12px;
    font-size:11px;
    letter-spacing:.09em;
  }
}


/* ==========================================================
   V34 — gato escala -> crece 4s -> shake rápido + success fix
   ========================================================== */

/* Entrada del gato: sólo escala, sin pop ni rebote */
#ocni-cat-logo-v32 {
  opacity: 0 !important;
  transform: translate(-50%, -50%) scale(.18) !important;
  filter: blur(8px);
}

#ocni-cat-logo-v32.is-visible {
  animation: ocniCatScaleInV34 .65s linear forwards !important;
}

@keyframes ocniCatScaleInV34 {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.18);
    filter: blur(8px);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    filter: blur(0);
  }
}

/* Crece progresivamente durante 4 segundos */
#ocni-cat-logo-v32.is-growing {
  animation: ocniCatGrowV34 4s linear forwards !important;
}

@keyframes ocniCatGrowV34 {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(2.15);
    filter: blur(0);
  }
}

/* Shake de alta frecuencia una vez terminado el crecimiento */
#ocni-cat-logo-v32.is-shaking {
  opacity: 1 !important;
  transform: translate(-50%, -50%) scale(2.15);
  animation: ocniCatShakeV34 .055s linear infinite !important;
  will-change: transform;
}

@keyframes ocniCatShakeV34 {
  0%   { transform: translate(calc(-50% - 3px), calc(-50% + 1px)) scale(2.15) rotate(-.35deg); }
  20%  { transform: translate(calc(-50% + 3px), calc(-50% - 2px)) scale(2.15) rotate(.3deg); }
  40%  { transform: translate(calc(-50% - 2px), calc(-50% - 1px)) scale(2.15) rotate(-.25deg); }
  60%  { transform: translate(calc(-50% + 2px), calc(-50% + 2px)) scale(2.15) rotate(.35deg); }
  80%  { transform: translate(calc(-50% + 1px), calc(-50% - 2px)) scale(2.15) rotate(-.2deg); }
  100% { transform: translate(calc(-50% - 3px), calc(-50% + 1px)) scale(2.15) rotate(-.35deg); }
}

/* Mensaje final: forzado a mostrarse correctamente */
.ocni-success-panel-v33 {
  display: none;
  visibility: visible !important;
  opacity: 0;
}

.ocni-success-panel-v33.is-visible {
  display: block !important;
  visibility: visible !important;
  opacity: 1;
  animation: ocniSuccessV34 .58s cubic-bezier(.17,.89,.32,1.35) forwards !important;
}

@keyframes ocniSuccessV34 {
  0% {
    opacity: 0;
    transform: scale(.72);
    filter: blur(7px);
  }
  60% {
    opacity: 1;
    transform: scale(1.06);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
}

.ocni-signup-v30.has-success .ocni-copy-v30 {
  display: none !important;
}

/* En móvil, crecimiento menos extremo para no tapar toda la UI */
@media (max-width:700px) {
  @keyframes ocniCatGrowV34 {
    0% {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1);
    }
    100% {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1.65);
    }
  }

  #ocni-cat-logo-v32.is-shaking {
    transform: translate(-50%, -50%) scale(1.65);
  }

  @keyframes ocniCatShakeV34 {
    0%   { transform: translate(calc(-50% - 2px), calc(-50% + 1px)) scale(1.65) rotate(-.3deg); }
    20%  { transform: translate(calc(-50% + 2px), calc(-50% - 1px)) scale(1.65) rotate(.25deg); }
    40%  { transform: translate(calc(-50% - 1px), calc(-50% - 1px)) scale(1.65) rotate(-.2deg); }
    60%  { transform: translate(calc(-50% + 2px), calc(-50% + 1px)) scale(1.65) rotate(.3deg); }
    80%  { transform: translate(calc(-50% + 1px), calc(-50% - 1px)) scale(1.65) rotate(-.15deg); }
    100% { transform: translate(calc(-50% - 2px), calc(-50% + 1px)) scale(1.65) rotate(-.3deg); }
  }
}

/* V35 — corrected cat base scale */
#ocni-cat-logo-v32{
  width:clamp(92px,7.2vw,132px)!important;
  height:auto!important;
  opacity:0!important;
  transform:translate(-50%,-50%) scale(.82)!important;
  transform-origin:center!important;
  filter:blur(4px);
}
#ocni-cat-logo-v32.is-visible{animation:catIn35 .5s ease-out forwards!important}
@keyframes catIn35{
  from{opacity:0;transform:translate(-50%,-50%) scale(.82);filter:blur(4px)}
  to{opacity:1;transform:translate(-50%,-50%) scale(1);filter:blur(0)}
}
#ocni-cat-logo-v32.is-growing{opacity:1!important;filter:none!important;animation:catGrow35 4s linear forwards!important}
@keyframes catGrow35{
  from{transform:translate(-50%,-50%) scale(1)}
  to{transform:translate(-50%,-50%) scale(2.15)}
}
#ocni-cat-logo-v32.is-shaking{opacity:1!important;filter:none!important;animation:catShake35 .055s linear infinite!important}
@keyframes catShake35{
  0%{transform:translate(calc(-50% - 3px),calc(-50% + 1px)) scale(2.15) rotate(-.35deg)}
  25%{transform:translate(calc(-50% + 3px),calc(-50% - 2px)) scale(2.15) rotate(.3deg)}
  50%{transform:translate(calc(-50% - 2px),calc(-50% - 1px)) scale(2.15) rotate(-.25deg)}
  75%{transform:translate(calc(-50% + 2px),calc(-50% + 2px)) scale(2.15) rotate(.35deg)}
  100%{transform:translate(calc(-50% - 3px),calc(-50% + 1px)) scale(2.15) rotate(-.35deg)}
}
.ocni-success-panel-v33.is-visible{
 display:block!important;visibility:visible!important;opacity:1!important;
 animation:success35 .5s ease-out forwards!important
}
@keyframes success35{from{opacity:0;transform:scale(.92);filter:blur(5px)}to{opacity:1;transform:scale(1);filter:none}}
@media(max-width:700px){
 #ocni-cat-logo-v32{width:clamp(76px,22vw,104px)!important}
 @keyframes catGrow35{from{transform:translate(-50%,-50%) scale(1)}to{transform:translate(-50%,-50%) scale(1.65)}}
}


/* ==========================================================
   V36 — zoom continuo + shake simultáneo
   ========================================================== */

/* Después de la entrada, el gato crece sin límite visual
   mientras tiembla continuamente. */
#ocni-cat-logo-v32.is-shaking{
  opacity:1!important;
  filter:none!important;
  animation:ocniCatZoomShakeV36 12s linear infinite!important;
  will-change:transform;
}

/* Cada ciclo sigue dando la sensación de acercamiento:
   escala de 1x a 8x mientras mantiene shake de alta frecuencia. */
@keyframes ocniCatZoomShakeV36{
  0%   {transform:translate(calc(-50% - 2px),calc(-50% + 1px)) scale(1) rotate(-.25deg)}
  5%   {transform:translate(calc(-50% + 3px),calc(-50% - 2px)) scale(1.18) rotate(.25deg)}
  10%  {transform:translate(calc(-50% - 3px),calc(-50% + 2px)) scale(1.38) rotate(-.3deg)}
  15%  {transform:translate(calc(-50% + 2px),calc(-50% - 1px)) scale(1.62) rotate(.3deg)}
  20%  {transform:translate(calc(-50% - 2px),calc(-50% - 2px)) scale(1.9) rotate(-.25deg)}
  25%  {transform:translate(calc(-50% + 3px),calc(-50% + 2px)) scale(2.2) rotate(.3deg)}
  30%  {transform:translate(calc(-50% - 3px),calc(-50% + 1px)) scale(2.55) rotate(-.3deg)}
  35%  {transform:translate(calc(-50% + 2px),calc(-50% - 2px)) scale(2.95) rotate(.25deg)}
  40%  {transform:translate(calc(-50% - 2px),calc(-50% + 2px)) scale(3.4) rotate(-.3deg)}
  45%  {transform:translate(calc(-50% + 3px),calc(-50% - 1px)) scale(3.9) rotate(.3deg)}
  50%  {transform:translate(calc(-50% - 3px),calc(-50% - 2px)) scale(4.45) rotate(-.25deg)}
  55%  {transform:translate(calc(-50% + 2px),calc(-50% + 2px)) scale(5.0) rotate(.3deg)}
  60%  {transform:translate(calc(-50% - 2px),calc(-50% + 1px)) scale(5.55) rotate(-.3deg)}
  65%  {transform:translate(calc(-50% + 3px),calc(-50% - 2px)) scale(6.05) rotate(.25deg)}
  70%  {transform:translate(calc(-50% - 3px),calc(-50% + 2px)) scale(6.5) rotate(-.3deg)}
  75%  {transform:translate(calc(-50% + 2px),calc(-50% - 1px)) scale(6.9) rotate(.3deg)}
  80%  {transform:translate(calc(-50% - 2px),calc(-50% - 2px)) scale(7.25) rotate(-.25deg)}
  85%  {transform:translate(calc(-50% + 3px),calc(-50% + 2px)) scale(7.55) rotate(.3deg)}
  90%  {transform:translate(calc(-50% - 3px),calc(-50% + 1px)) scale(7.75) rotate(-.3deg)}
  95%  {transform:translate(calc(-50% + 2px),calc(-50% - 2px)) scale(7.9) rotate(.25deg)}
  100% {transform:translate(calc(-50% - 2px),calc(-50% + 1px)) scale(8) rotate(-.25deg)}
}

/* En móvil conserva el mismo concepto pero con shake ligeramente menor. */
@media(max-width:700px){
  #ocni-cat-logo-v32.is-shaking{
    animation-duration:12s!important;
  }
}


/* ==========================================================
   V37 — gato 200% más grande + ocultar después del correo
   ========================================================== */

/* 200% más grande respecto a V36 */
#ocni-cat-logo-v32 {
  width: clamp(276px, 21.6vw, 396px) !important;
}

/* Al completar el correo desaparece antes del mensaje final */
#ocni-cat-logo-v32.is-email-complete {
  animation: ocniCatEmailOutV37 .32s ease-in forwards !important;
  pointer-events: none !important;
}

@keyframes ocniCatEmailOutV37 {
  from {
    opacity: 1;
    filter: blur(0);
  }
  to {
    opacity: 0;
    filter: blur(8px);
    transform: translate(-50%, -50%) scale(.82);
  }
}

@media (max-width:700px) {
  #ocni-cat-logo-v32 {
    width: clamp(228px, 66vw, 312px) !important;
  }
}


/* ==========================================================
   V38 — tamaño inicial realmente 200% + eliminación tras email
   ========================================================== */

/* Tamaño grande real desde la aparición. */
#ocni-cat-logo-v32{
  width:clamp(276px,21.6vw,396px)!important;
  max-width:none!important;
  z-index:20!important;
}

/* Entrada desde 85% de SU NUEVO tamaño grande. */
#ocni-cat-logo-v32.is-visible{
  animation:ocniCatInV38 .5s ease-out forwards!important;
}
@keyframes ocniCatInV38{
  from{opacity:0;transform:translate(-50%,-50%) scale(.85);filter:blur(4px)}
  to{opacity:1;transform:translate(-50%,-50%) scale(1);filter:blur(0)}
}

/* Zoom lento que sigue creciendo + shake simultáneo. */
#ocni-cat-logo-v32.is-shaking{
  opacity:1!important;
  filter:none!important;
  animation:ocniCatZoomShakeV38 14s linear infinite!important;
}
@keyframes ocniCatZoomShakeV38{
  0%{transform:translate(calc(-50% - 2px),calc(-50% + 1px)) scale(1)}
  10%{transform:translate(calc(-50% + 3px),calc(-50% - 2px)) scale(1.25) rotate(.2deg)}
  20%{transform:translate(calc(-50% - 3px),calc(-50% + 2px)) scale(1.55) rotate(-.25deg)}
  30%{transform:translate(calc(-50% + 2px),calc(-50% - 2px)) scale(1.95) rotate(.25deg)}
  40%{transform:translate(calc(-50% - 3px),calc(-50% + 1px)) scale(2.45) rotate(-.25deg)}
  50%{transform:translate(calc(-50% + 3px),calc(-50% - 2px)) scale(3.05) rotate(.3deg)}
  60%{transform:translate(calc(-50% - 2px),calc(-50% + 2px)) scale(3.8) rotate(-.3deg)}
  70%{transform:translate(calc(-50% + 3px),calc(-50% - 1px)) scale(4.7) rotate(.3deg)}
  80%{transform:translate(calc(-50% - 3px),calc(-50% + 2px)) scale(5.8) rotate(-.3deg)}
  90%{transform:translate(calc(-50% + 2px),calc(-50% - 2px)) scale(7) rotate(.25deg)}
  100%{transform:translate(calc(-50% - 2px),calc(-50% + 1px)) scale(8.5)}
}

/* Esta clase gana sobre cualquier animación previa. Después JS elimina el nodo. */
#ocni-cat-logo-v32.is-email-complete{
  animation:ocniCatOutV38 .22s ease-in forwards!important;
  pointer-events:none!important;
}
@keyframes ocniCatOutV38{
  to{opacity:0;filter:blur(10px)}
}

@media(max-width:700px){
  #ocni-cat-logo-v32{
    width:clamp(228px,66vw,312px)!important;
  }
}


/* ==========================================================
   V39 — memes de gatos random, secuenciales y removibles
   ========================================================== */

#ocni-random-memes-v39{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  pointer-events:none;
  overflow:hidden;
  z-index:44;
}

.ocni-random-meme-v39{
  position:absolute;
  left:var(--meme-left, 10vw);
  top:var(--meme-top, 10vh);
  width:var(--meme-size, 120px);
  height:auto;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  opacity:0;
  transform:translate(-50%,-50%) scale(.35) rotate(var(--meme-rot, 0deg));
  filter:blur(7px);
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
  will-change:transform,opacity,filter;
  box-shadow:0 0 10px rgba(210,80,167,.12);
}

.ocni-random-meme-v39.is-visible{
  animation:ocniRandomMemeInV39 .48s ease-out forwards;
}

@keyframes ocniRandomMemeInV39{
  from{
    opacity:0;
    transform:translate(-50%,-50%) scale(.35) rotate(var(--meme-rot,0deg));
    filter:blur(7px);
  }
  to{
    opacity:1;
    transform:translate(-50%,-50%) scale(1) rotate(var(--meme-rot,0deg));
    filter:blur(0);
  }
}

.ocni-random-meme-v39.is-leaving{
  animation:ocniRandomMemeOutV39 .20s ease-in forwards!important;
}

@keyframes ocniRandomMemeOutV39{
  to{
    opacity:0;
    transform:translate(-50%,-50%) scale(.72) rotate(var(--meme-rot,0deg));
    filter:blur(8px);
  }
}

@media(max-width:700px){
  #ocni-random-memes-v39{
    height:100svh;
  }
}


/* ==========================================================
   V40 — 8 memes + flechas parpadeantes + limpiar tras email
   ========================================================== */

#ocni-email-arrows-v40{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:70;
  opacity:0;
}

#ocni-email-arrows-v40.is-visible{
  opacity:1;
}

.ocni-arrow-v40{
  position:absolute;
  width:110px;
  height:auto;
  max-width:none!important;
  animation:ocniArrowBlinkV40 .65s steps(2,end) infinite;
  filter:drop-shadow(0 0 6px rgba(255,0,0,.25));
}

.arrow-left-v40{
  left:7vw;
  top:66vh;
  transform:rotate(0deg);
}

.arrow-right-v40{
  right:7vw;
  top:66vh;
  transform:rotate(180deg);
}

@keyframes ocniArrowBlinkV40{
  0%,45%{opacity:1;transform:scale(1)}
  46%,100%{opacity:.16;transform:scale(.94)}
}

#ocni-email-arrows-v40.is-leaving{
  animation:ocniArrowOutV40 .2s ease-in forwards!important;
}
@keyframes ocniArrowOutV40{
  to{opacity:0;filter:blur(6px)}
}

.frame-stack.is-leaving-v40{
  animation:ocniFrameOutV40 .26s ease-in forwards!important;
}
@keyframes ocniFrameOutV40{
  to{opacity:0;filter:blur(8px)}
}

@media(max-width:700px){
  .ocni-arrow-v40{
    width:72px;
  }
  .arrow-left-v40{
    left:1vw;
    top:72svh;
  }
  .arrow-right-v40{
    right:1vw;
    top:72svh;
  }
}


/* ==========================================================
   V41 — memes más grandes + flechas CSS cerca del input
   ========================================================== */

#ocni-email-arrows-v41{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:75;
  opacity:0;
}

#ocni-email-arrows-v41.is-visible{
  opacity:1;
}

.ocni-arrow-v41{
  position:absolute;
  top:68.5vh;
  font-size:72px;
  line-height:1;
  font-family:Arial, Helvetica, sans-serif;
  font-weight:900;
  color:#ff1b1b;
  text-shadow:0 0 8px rgba(255,0,0,.18);
  animation:ocniArrowBlinkV41 .52s steps(2,end) infinite;
  transform-origin:center;
}

.arrow-left-v41{
  left:calc(50% - 430px);
}

.arrow-right-v41{
  right:calc(50% - 430px);
}

@keyframes ocniArrowBlinkV41{
  0%,45%{
    opacity:1;
    transform:scale(1);
  }
  46%,100%{
    opacity:.12;
    transform:scale(.92);
  }
}

#ocni-email-arrows-v41.is-leaving{
  animation:ocniArrowOutV41 .2s ease-in forwards!important;
}

@keyframes ocniArrowOutV41{
  to{
    opacity:0;
    filter:blur(6px);
  }
}

/* Memes larger than V40 */
.ocni-random-meme-v39{
  min-width:110px;
}

@media(max-width:1100px){
  .ocni-arrow-v41{
    top:69vh;
    font-size:58px;
  }

  .arrow-left-v41{
    left:7vw;
  }

  .arrow-right-v41{
    right:7vw;
  }
}

@media(max-width:700px){
  .ocni-arrow-v41{
    top:72svh;
    font-size:44px;
  }

  .arrow-left-v41{
    left:2vw;
  }

  .arrow-right-v41{
    right:2vw;
  }

  .ocni-random-meme-v39{
    min-width:95px;
  }
}


/* V42 — asegurar que las 8 imágenes sean visibles */
#ocni-random-memes-v39{
  overflow:visible!important;
}

.ocni-random-meme-v39{
  min-width:150px!important;
  max-width:290px!important;
}

@media(max-width:700px){
  .ocni-random-meme-v39{
    min-width:110px!important;
    max-width:190px!important;
  }
}


/* ==========================================================
   V43 — flechas-imagen apuntando al correo + escala final 70%
   ========================================================== */

#ocni-email-arrows-v43{
  position:fixed;
  inset:0;
  z-index:80;
  pointer-events:none;
  opacity:0;
}

#ocni-email-arrows-v43.is-visible{
  opacity:1;
}

.ocni-arrow-img-v43{
  position:absolute;
  width:105px;
  height:auto;
  max-width:none!important;
  top:calc(50% + 235px);
  animation:ocniArrowBlinkV43 .55s steps(2,end) infinite;
  transform-origin:center;
  filter:drop-shadow(0 0 6px rgba(255,0,0,.20));
}

/* La imagen original apunta a la izquierda.
   Lado izquierdo: rotamos 180° para que apunte hacia la derecha / input.
   Lado derecho: queda apuntando a la izquierda / input. */
.ocni-arrow-left-v43{
  left:calc(50% - 430px);
  transform:rotate(180deg);
}

.ocni-arrow-right-v43{
  right:calc(50% - 430px);
  transform:rotate(0deg);
}

@keyframes ocniArrowBlinkV43{
  0%,45%{opacity:1}
  46%,100%{opacity:.12}
}

#ocni-email-arrows-v43.is-leaving{
  animation:ocniArrowOutV43 .2s ease-in forwards!important;
}

@keyframes ocniArrowOutV43{
  to{opacity:0;filter:blur(6px)}
}

/* Después del correo: logo 30% más pequeño con transición suave */
.logo-motion.is-email-complete-v43{
  animation:ocniLogoReduceV43 1.15s cubic-bezier(.22,.61,.36,1) forwards!important;
  transform-origin:center center!important;
}

@keyframes ocniLogoReduceV43{
  from{transform:scale(1)}
  to{transform:scale(.70)}
}

/* El texto final también termina 30% más pequeño */
.ocni-success-panel-v33.is-success-small-v43{
  animation:ocniSuccessReduceV43 1.2s cubic-bezier(.22,.61,.36,1) forwards!important;
  transform-origin:center center!important;
}

@keyframes ocniSuccessReduceV43{
  0%{
    opacity:0;
    transform:scale(.88);
    filter:blur(5px);
  }
  45%{
    opacity:1;
    transform:scale(1);
    filter:blur(0);
  }
  100%{
    opacity:1;
    transform:scale(.70);
    filter:blur(0);
  }
}

@media(max-width:1100px){
  .ocni-arrow-img-v43{
    width:78px;
    top:calc(50% + 205px);
  }

  .ocni-arrow-left-v43{
    left:5vw;
  }

  .ocni-arrow-right-v43{
    right:5vw;
  }
}

@media(max-width:700px){
  .ocni-arrow-img-v43{
    width:58px;
    top:calc(50% + 185px);
  }

  .ocni-arrow-left-v43{
    left:1vw;
  }

  .ocni-arrow-right-v43{
    right:1vw;
  }
}


/* ==========================================================
   V44 — flechas CSS limpias + memes 1–6 solamente
   ========================================================== */

/* Oculta cualquier resto visual de las flechas de V41/V43. */
#ocni-email-arrows-v43,
.ocni-arrow-v41,
.ocni-arrow-img-v43 {
  display:none !important;
}

#ocni-email-arrows-v44{
  position:fixed;
  inset:0;
  z-index:90;
  pointer-events:none;
  opacity:0;
  transition:opacity .18s ease;
}

#ocni-email-arrows-v44.is-visible{
  opacity:1;
}

.ocni-css-arrow-v44{
  position:absolute;
  top:calc(50% + 225px);
  width:82px;
  height:24px;
  background:#ff1717;
  filter:drop-shadow(0 0 5px rgba(255,0,0,.24));
  animation:ocniCssArrowBlinkV44 .55s steps(2,end) infinite;
}

/* punta de flecha */
.ocni-css-arrow-v44::after{
  content:"";
  position:absolute;
  top:50%;
  width:0;
  height:0;
  border-top:24px solid transparent;
  border-bottom:24px solid transparent;
  transform:translateY(-50%);
}

/* Flecha izquierda: apunta hacia la derecha, al input */
.ocni-css-arrow-left-v44{
  left:calc(50% - 445px);
}
.ocni-css-arrow-left-v44::after{
  right:-34px;
  border-left:36px solid #ff1717;
}

/* Flecha derecha: apunta hacia la izquierda, al input */
.ocni-css-arrow-right-v44{
  right:calc(50% - 445px);
}
.ocni-css-arrow-right-v44::after{
  left:-34px;
  border-right:36px solid #ff1717;
}

@keyframes ocniCssArrowBlinkV44{
  0%,44%{opacity:1; transform:scale(1)}
  45%,100%{opacity:.08; transform:scale(.94)}
}

#ocni-email-arrows-v44.is-leaving{
  animation:ocniCssArrowOutV44 .2s ease-in forwards !important;
}

@keyframes ocniCssArrowOutV44{
  to{opacity:0; filter:blur(5px)}
}

/* Solo quedan los seis memes reales; se conserva su tamaño grande/random. */
#ocni-random-memes-v39{
  overflow:visible !important;
}
.ocni-random-meme-v39{
  min-width:150px !important;
  max-width:290px !important;
}

@media(max-width:1100px){
  .ocni-css-arrow-v44{
    top:calc(50% + 205px);
    width:58px;
    height:18px;
  }
  .ocni-css-arrow-v44::after{
    border-top-width:18px;
    border-bottom-width:18px;
  }
  .ocni-css-arrow-left-v44{left:8vw}
  .ocni-css-arrow-right-v44{right:8vw}
  .ocni-css-arrow-left-v44::after{
    right:-27px;
    border-left-width:29px;
  }
  .ocni-css-arrow-right-v44::after{
    left:-27px;
    border-right-width:29px;
  }
}

@media(max-width:700px){
  .ocni-css-arrow-v44{
    top:calc(50% + 185px);
    width:38px;
    height:12px;
  }
  .ocni-css-arrow-v44::after{
    border-top-width:12px;
    border-bottom-width:12px;
  }
  .ocni-css-arrow-left-v44{left:2vw}
  .ocni-css-arrow-right-v44{right:2vw}
  .ocni-css-arrow-left-v44::after{
    right:-19px;
    border-left-width:21px;
  }
  .ocni-css-arrow-right-v44::after{
    left:-19px;
    border-right-width:21px;
  }
  .ocni-random-meme-v39{
    min-width:110px !important;
    max-width:190px !important;
  }
}


/* ==========================================================
   V45 — marco más fuerte, más sensible y desde mayor distancia
   ========================================================== */

:root{
  --edge-top:0;
  --edge-bottom:0;
  --edge-left:0;
  --edge-right:0;
}

/* Reforzamos la respuesta visual del marco */
.frame-top,
.frame-bottom,
.frame-left,
.frame-right{
  will-change:transform, filter, opacity;
  transition:
    transform .08s linear,
    filter .08s linear,
    opacity .08s linear;
}

/* La línea se distorsiona y blurea más fuerte cuando el ratón se acerca */
.frame-top{
  transform:
    translateY(calc(var(--edge-top) * 8px))
    scaleX(calc(1 + var(--edge-top) * .018))
    skewX(calc(var(--edge-top) * 1.8deg));
  filter:
    blur(calc(var(--edge-top) * 3.8px))
    contrast(calc(1 + var(--edge-top) * 1.8))
    brightness(calc(1 + var(--edge-top) * .75));
}

.frame-bottom{
  transform:
    translateY(calc(var(--edge-bottom) * -8px))
    scaleX(calc(1 + var(--edge-bottom) * .018))
    skewX(calc(var(--edge-bottom) * -1.8deg));
  filter:
    blur(calc(var(--edge-bottom) * 3.8px))
    contrast(calc(1 + var(--edge-bottom) * 1.8))
    brightness(calc(1 + var(--edge-bottom) * .75));
}

.frame-left{
  transform:
    translateX(calc(var(--edge-left) * 8px))
    scaleY(calc(1 + var(--edge-left) * .018))
    skewY(calc(var(--edge-left) * 1.8deg));
  filter:
    blur(calc(var(--edge-left) * 3.8px))
    contrast(calc(1 + var(--edge-left) * 1.8))
    brightness(calc(1 + var(--edge-left) * .75));
}

.frame-right{
  transform:
    translateX(calc(var(--edge-right) * -8px))
    scaleY(calc(1 + var(--edge-right) * .018))
    skewY(calc(var(--edge-right) * -1.8deg));
  filter:
    blur(calc(var(--edge-right) * 3.8px))
    contrast(calc(1 + var(--edge-right) * 1.8))
    brightness(calc(1 + var(--edge-right) * .75));
}

/* Micro-glitch extra al entrar a la zona sensible */
@keyframes ocniEdgeJitterV45{
  0%{translate:0 0}
  25%{translate:1px -1px}
  50%{translate:-1px 1px}
  75%{translate:1px 1px}
  100%{translate:0 0}
}

.frame-top,
.frame-bottom,
.frame-left,
.frame-right{
  animation:ocniEdgeJitterV45 .14s steps(2,end) infinite;
  animation-play-state:paused;
}

/* Se activa el jitter desde lejos usando una aproximación global:
   mientras alguna variable tenga fuerza, la animación visual queda viva */
body:has(.frame-stack) .frame-top,
body:has(.frame-stack) .frame-bottom,
body:has(.frame-stack) .frame-left,
body:has(.frame-stack) .frame-right{
  animation-play-state:running;
}

/* Un halo sutil alrededor de todo el marco para hacerlo más presente */
.frame-stack{
  filter:drop-shadow(0 0 2px rgba(255,255,255,.55))
         drop-shadow(0 0 7px rgba(255,255,255,.14));
}


/* ==========================================================
   V46 — flechas ancladas dinámicamente al recuadro de correo
   ========================================================== */

#ocni-email-arrows-v44 .ocni-css-arrow-v44{
  top:var(--email-center-y-v46, 50%) !important;
  margin-top:-12px !important;
  transform-origin:center center;
}

/* Izquierda del formulario: apunta hacia la derecha */
#ocni-email-arrows-v44 .ocni-css-arrow-left-v44{
  left:auto !important;
  right:calc(100vw - var(--email-left-v46, 35vw) + var(--email-arrow-gap-v46, 28px)) !important;
}

/* Derecha del formulario: apunta hacia la izquierda */
#ocni-email-arrows-v44 .ocni-css-arrow-right-v44{
  right:auto !important;
  left:calc(var(--email-right-v46, 65vw) + var(--email-arrow-gap-v46, 28px)) !important;
}

/* El parpadeo ya no modifica la escala/posición base. */
@keyframes ocniCssArrowBlinkV44{
  0%,44%{opacity:1}
  45%,100%{opacity:.08}
}

@media(max-width:1100px){
  #ocni-email-arrows-v44 .ocni-css-arrow-v44{
    top:var(--email-center-y-v46, 50%) !important;
    margin-top:-9px !important;
  }
}

@media(max-width:700px){
  #ocni-email-arrows-v44 .ocni-css-arrow-v44{
    top:var(--email-center-y-v46, 50%) !important;
    margin-top:-6px !important;
  }
}


/* ==========================================================
   V47 — flechas físicamente unidas al formulario
   ========================================================== */

#ocni-email-form-v29{
  position:relative !important;
  overflow:visible !important;
}

/* El layer deja de ocupar toda la pantalla: ahora ocupa exactamente el form. */
#ocni-email-form-v29 > #ocni-email-arrows-v44{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  z-index:25 !important;
  pointer-events:none !important;
}

/* Ambas flechas se centran verticalmente contra el input. */
#ocni-email-form-v29 > #ocni-email-arrows-v44 .ocni-css-arrow-v44{
  top:50% !important;
  margin-top:0 !important;
  transform:translateY(-50%) !important;
  width:72px;
  height:20px;
}

/* Flecha izquierda, pegada al lado izquierdo y apuntando al recuadro. */
#ocni-email-form-v29 > #ocni-email-arrows-v44 .ocni-css-arrow-left-v44{
  left:-112px !important;
  right:auto !important;
}

/* Flecha derecha, pegada al lado derecho y apuntando al recuadro. */
#ocni-email-form-v29 > #ocni-email-arrows-v44 .ocni-css-arrow-right-v44{
  right:-112px !important;
  left:auto !important;
}

@media(max-width:900px){
  #ocni-email-form-v29 > #ocni-email-arrows-v44 .ocni-css-arrow-v44{
    width:52px;
    height:16px;
  }
  #ocni-email-form-v29 > #ocni-email-arrows-v44 .ocni-css-arrow-left-v44{
    left:-78px !important;
  }
  #ocni-email-form-v29 > #ocni-email-arrows-v44 .ocni-css-arrow-right-v44{
    right:-78px !important;
  }
}

@media(max-width:600px){
  #ocni-email-form-v29 > #ocni-email-arrows-v44 .ocni-css-arrow-v44{
    width:34px;
    height:12px;
  }
  #ocni-email-form-v29 > #ocni-email-arrows-v44 .ocni-css-arrow-left-v44{
    left:-45px !important;
  }
  #ocni-email-form-v29 > #ocni-email-arrows-v44 .ocni-css-arrow-right-v44{
    right:-45px !important;
  }
}