/* Inter servida desde aqui, no desde Google Fonts: la version de Google
   viene sin las variantes de caracter (cv01-cv13), asi que con ella la "a"
   de un piso es inalcanzable. Fuente oficial de rsms.me, SIL OFL 1.1,
   licencia en assets/fonts/Inter-LICENSE.txt */
@font-face {
  font-family: 'InterVariable';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/InterVariable.woff2') format('woff2');
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body { background-color: #070707; }

::selection { background: #1FBF6B; color: #0A0A0A; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid #1FBF6B;
  outline-offset: 2px;
}

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .55s ease, transform .55s ease;
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); will-change: auto; }
.reveal-delay-1 { transition-delay: .07s; }
.reveal-delay-2 { transition-delay: .14s; }
.reveal-delay-3 { transition-delay: .21s; }
.reveal-delay-4 { transition-delay: .28s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { transition: none; opacity: 1; transform: none; }
}

.glow {
  position: absolute;
  border-radius: 9999px;
  background: radial-gradient(closest-side, rgba(31,191,107,.16), rgba(31,191,107,0) 70%);
  filter: blur(40px);
  pointer-events: none;
}

.glow-strong {
  position: absolute;
  border-radius: 9999px;
  background: radial-gradient(closest-side, rgba(31,191,107,.34), rgba(31,191,107,0) 70%);
  filter: blur(50px);
  pointer-events: none;
}

.glow-red {
  position: absolute;
  border-radius: 9999px;
  background: radial-gradient(closest-side, rgba(180,30,30,.25), rgba(180,30,30,0) 70%);
  filter: blur(80px);
  pointer-events: none;
}

@keyframes glow-pulse-green {
  0%,100% {
    box-shadow:
      0 0 8px  rgba(31,191,107,0.65),
      0 0 22px rgba(31,191,107,0.40),
      0 0 50px rgba(31,191,107,0.18),
      0 0 90px rgba(31,191,107,0.08);
    border-color: rgba(31,191,107,0.75);
  }
  50% {
    box-shadow:
      0 0 10px rgba(31,191,107,0.80),
      0 0 28px rgba(31,191,107,0.50),
      0 0 62px rgba(31,191,107,0.24),
      0 0 110px rgba(31,191,107,0.11);
    border-color: rgba(31,191,107,0.90);
  }
}
@keyframes glow-pulse-red {
  0%,100% {
    box-shadow:
      0 0 8px  rgba(200,40,40,0.65),
      0 0 22px rgba(200,40,40,0.40),
      0 0 50px rgba(200,40,40,0.18),
      0 0 90px rgba(200,40,40,0.08);
    border-color: rgba(200,40,40,0.75);
  }
  50% {
    box-shadow:
      0 0 10px rgba(200,40,40,0.80),
      0 0 28px rgba(200,40,40,0.50),
      0 0 62px rgba(200,40,40,0.24),
      0 0 110px rgba(200,40,40,0.11);
    border-color: rgba(200,40,40,0.90);
  }
}
@keyframes glow-pulse-center {
  0%,100% {
    box-shadow:
      0 0 15px rgba(31,191,107,0.70),
      0 0 35px rgba(31,191,107,0.45),
      0 0 70px rgba(31,191,107,0.22),
      0 0 120px rgba(31,191,107,0.10);
  }
  50% {
    box-shadow:
      0 0 20px rgba(31,191,107,0.85),
      0 0 45px rgba(31,191,107,0.55),
      0 0 90px rgba(31,191,107,0.28),
      0 0 150px rgba(31,191,107,0.13);
  }
}
.glow-pulse-green {
  border-color: rgba(31,191,107,0.75);
  animation: glow-pulse-green 5s ease-in-out infinite;
}
.glow-pulse-red {
  border-color: rgba(200,40,40,0.75);
  animation: glow-pulse-red 5s ease-in-out infinite;
}
.glow-pulse-center {
  animation: glow-pulse-center 5s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .glow-pulse-green, .glow-pulse-red, .glow-pulse-center { animation: none !important; box-shadow: none !important; }
}

summary::-webkit-details-marker { display: none; }
summary::marker { content: ""; }

/* FAQ: animación suave de apertura con grid */
.faq-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s ease;
}
details[open] .faq-body {
  grid-template-rows: 1fr;
}
.faq-body > div { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .faq-body { transition: none; }
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: #1FBF6B;
  color: #0A0A0A;
  padding: .6rem 1rem;
  border-radius: 0 0 8px 0;
  font-weight: 700;
  z-index: 200;
}
.skip-link:focus { left: 0; }

.faq-item[open] .faq-icon { transform: rotate(45deg); }
.faq-icon { transition: transform .2s ease; }
@media (prefers-reduced-motion: reduce) {
  .faq-icon { transition: none; }
}

.bio-chip {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border: 1px solid #2A2A2A;
  border-radius: 9999px;
  padding: .5rem 1.1rem;
  font-size: .85rem;
  color: #F6F4EF;
  background: #0C0C0C;
}
.bio-chip-dot { width: 6px; height: 6px; border-radius: 9999px; background: #1FBF6B; flex: none; }

/* Marquee / scroll automático para ticker y carruseles */
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.marquee-section-logos {
  -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
  mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee linear infinite;
  will-change: transform;
}
.marquee-track.marquee-reverse {
  animation-direction: reverse;
}
.marquee-track:hover {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track {
    animation: none;
  }
  /* Logos ticker: muestra todos en grid centrado en lugar de cortarlos */
  .marquee-logos {
    flex-wrap: wrap;
    width: 100%;
    justify-content: center;
    gap: 1.25rem 2rem;
    padding: 0.5rem 1.5rem;
  }
  .marquee-logos [aria-hidden="true"] {
    display: none;
  }
  /* Sin máscara cuando los logos están en grid estático */
  .marquee-section-logos {
    -webkit-mask-image: none;
    mask-image: none;
  }
  /* Paneles: muestra los 3 en columna legible en lugar de solo el primero */
  .marquee-panels {
    flex-wrap: wrap;
    width: 100%;
    justify-content: center;
    gap: 1rem;
  }
  .marquee-panels [aria-hidden="true"] {
    display: none;
  }
}

.brand-logo-filter {
  filter: brightness(0) invert(1);
  opacity: 0.55;
  transition: opacity 0.3s ease;
}
.brand-logo-filter:hover {
  opacity: 1;
}

/* Blueprint del sistema: anillo rotante + tarjetas flotantes */
@keyframes ring-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes float-card {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-8px); }
}

@keyframes float-center {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-6px); }
}

.blueprint-wrapper {
  position: relative;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  aspect-ratio: 1 / 1;
  overflow: visible;
}

.blueprint-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.blueprint-ring-spin {
  animation: ring-spin 42s linear infinite;
  will-change: transform;
}

.blueprint-center {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: 150px;
  height: 150px;
  border-radius: 9999px;
  background: #0C0C0C;
  border: 1.5px solid #1FBF6B;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  animation: float-center 6s ease-in-out infinite, glow-pulse-center 5s ease-in-out infinite;
}
.blueprint-center span {
  font-family: 'Anton', sans-serif;
  font-size: 2.1rem;
  line-height: 1.15;
  letter-spacing: 0.04em;
  color: #1FBF6B;
}

.bp-card {
  position: absolute;
  /* `translate` se compone con la animación `transform` (float-card) sin pisarla */
  translate: -50% -50%;
  background: #0C0C0C;
  border: 1px solid #2A2A2A;
  border-radius: 16px;
  padding: 22px 28px;
  min-width: 210px;
  text-align: center;
  pointer-events: none;
  animation: float-card 4.5s ease-in-out infinite;
  will-change: transform;
}
.bp-title {
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  color: #F6F4EF;
  white-space: nowrap;
}
.bp-card-1 { left: 50%;   top: 10%;    animation-delay: 0s; }
.bp-card-2 { left: 88%;   top: 37.7%;  animation-delay: 0.9s; }
.bp-card-3 { left: 73.5%; top: 82.4%;  animation-delay: 1.8s; }
.bp-card-4 { left: 26.5%; top: 82.4%;  animation-delay: 2.7s; }
.bp-card-5 { left: 12%;   top: 37.7%;  animation-delay: 3.6s; }

.blueprint-caption {
  color: #F6F4EF;
  font-size: 1.1rem;
  line-height: 1.7;
}

@media (max-width: 640px) {
  .bp-card { min-width: 130px; max-width: 148px; padding: 12px 14px; }
  .bp-title { font-size: 0.78rem; white-space: normal; }
  .blueprint-center { width: 104px; height: 104px; }
  .blueprint-center span { font-size: 1.3rem; }
  /* En móvil suspendemos el ring-spin y los float para no saturar la GPU */
  .blueprint-ring-spin { animation-play-state: paused; }
  .bp-card { animation: none; }
  .blueprint-center { animation: glow-pulse-center 5s ease-in-out infinite; }
}

@media (prefers-reduced-motion: reduce) {
  .blueprint-ring-spin,
  .blueprint-center,
  .bp-card { animation: none !important; }
}

/* GPU hint para glows estáticos */
.glow, .glow-strong, .glow-red {
  transform: translateZ(0);
}

/* =========================================================
   HERO · logo Amazon inclinado en el H1
   ========================================================= */
.amz-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  background: #151515;
  border: 1px solid #2A2A2A;
  border-radius: 18px;
  padding: .22em .42em;
  margin: 0 .12em;
  transform: rotate(-3deg);
  box-shadow: 0 6px 26px rgba(0,0,0,.55);
  animation: amz-flota 6s ease-in-out infinite;
}
/* la tinta del logo pesa arriba (letras gruesas, flecha fina abajo): se baja
   un pelo para que opticamente quede centrado, no solo geometricamente */
@keyframes amz-flota {
  0%   { transform: rotate(-3deg)   translate3d(0, 0, 0); }
  50%  { transform: rotate(-1.1deg) translate3d(4px, -7px, 0); }
  100% { transform: rotate(-3deg)   translate3d(0, 0, 0); }
}
@media (prefers-reduced-motion: reduce) { .amz-pill { animation: none; } }
.amz-pill img { height: .72em; width: auto; display: block; transform: translateY(6%); }

/* =========================================================
   HERO · flujo de pedidos (clientes entran -> pedidos salen)
   ========================================================= */
.flow-wrap {
  position: relative;
  width: 100%;
  height: 330px;
  overflow: hidden;
  /* Segundo difuminado, este sobre el ANCHO DE PANTALLA. El de .flow va en
     porcentaje de sus 985px, y al escalarse en movil sus extremos quedan
     fuera de la vista: por eso los carriles llegaban cortados al borde.
     Este remata siempre justo en el canto de la pantalla. */
  -webkit-mask: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
          mask: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
}
/* centrado absoluto: el bloque mide 985px y SIEMPRE sobresale por igual a
   ambos lados. Con grid/flex el navegador cae en "safe alignment" y lo pega
   a la izquierda — de ahi que en movil saliera cortado y descentrado. */
.flow {
  position: absolute;
  top: 50%; left: 50%;
  width: 985px;
  height: 293px;
  transform: translate(-50%, -50%) scale(var(--flow-s, 1));
  transform-origin: center center;
  -webkit-mask: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.75) 7%, #000 15%, #000 85%, rgba(0,0,0,.75) 93%, transparent 100%);
          mask: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.75) 7%, #000 15%, #000 85%, rgba(0,0,0,.75) 93%, transparent 100%);
}
.flow-lane { position: absolute; left: 0; width: 985px; overflow: visible; }
.flow-lane svg { position: absolute; inset: 0; overflow: visible; }
.flow-lane svg path { fill: none; stroke: rgba(120,120,116,.32); stroke-width: 4; }
#flowLaneA { top: 90px;  height: 38px; }
#flowLaneC { top: 161px; height: 1px;  }
#flowLaneB { top: 194px; height: 38px; }

.flow-rider {
  position: absolute;
  z-index: 2;
  offset-rotate: 0deg;
  offset-distance: 0%;
  opacity: 0;
  will-change: offset-distance, opacity;
}
.flow-avatar {
  /* el memoji tal cual: sin circulo, sin fondo y sin recorte */
  width: 68px; height: 68px;
  margin: -34px 0 0 -34px;
  object-fit: contain;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,.55));
}
.flow-card {
  width: 264px;
  margin: -33px 0 0 0;
  /* clave: el punto del carril es su BORDE IZQUIERDO, no su centro.
     Sin esto el navegador la ancla por el centro y asoma media tarjeta. */
  offset-anchor: 0% 50%;
  display: flex;
  align-items: center;              /* el icono, a la altura del texto */
  gap: 10px;
  padding: 11px 13px;
  border-radius: 10px;
  background: #131313;
  border: 1px solid #242424;
  box-shadow: 0 1px 14px rgba(0,0,0,.5);
  font-family: Archivo, system-ui, sans-serif;
  letter-spacing: -.03em;
  color: #D9D9D9;
}
.flow-card .flow-ico {
  width: 32px; height: 32px; flex: none;
  border-radius: 7px;
  background: #1E1E1E;
  display: grid; place-items: center;
}
.flow-card .flow-ico img { width: 27px; height: 27px; object-fit: contain; }
.flow-card b  { display: block; font-size: 13px; font-weight: 700; line-height: 1.15; }
.flow-card span { display: block; font-size: 10.5px; line-height: 1.45; color: #A3A099; }
.flow-card .flow-now { margin-left: auto; align-self: flex-start; font-size: 9.5px; color: #56544F; font-style: normal; }

/* clientes: entran por los extremos y mueren en el nucleo */
@keyframes flow-inbound {
  0%   { offset-distance: 0%;  opacity: 0; }
  12%  { opacity: 1; }
  94%  { opacity: 1; }
  100% { offset-distance: 46%; opacity: 0; }
}
/* pedidos: nacen en el nucleo y salen hacia fuera */
@keyframes flow-outbound {
  0%   { offset-distance: 54%;  opacity: 0; }
  6%   { opacity: 1; }
  86%  { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}
/* duracion y arranque los fija orders-flow.js, uno a uno */
.flow-in, .flow-out { animation-timing-function: linear; animation-fill-mode: forwards; }

/* velo: apaga las lineas al acercarse al logo para que no lo toquen */
.flow-veil {
  position: absolute;
  left: 492px; top: 161px;
  width: 340px; height: 340px;
  margin: -170px 0 0 -170px;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(closest-side, #070707 0%, #070707 52%, rgba(7,7,7,0) 100%);
}

/* nucleo: la cuenta de Amazon, en verde */
.flow-core {
  position: absolute;
  left: 492px; top: 161px;
  width: 176px; height: 176px;
  margin: -88px 0 0 -88px;
  display: grid; place-items: center;
  z-index: 3;
}
/* el vibrante verde, detras de todo */
.flow-core::before {
  content: "";
  position: absolute;
  width: 260px; height: 260px;
  border-radius: 9999px;
  background: radial-gradient(closest-side, rgba(31,191,107,.38), rgba(31,191,107,0) 70%);
  filter: blur(22px);
  z-index: 0;
}
/* la onda: nace detras del logo y se expande */
.flow-core::after {
  content: "";
  position: absolute;
  width: 150px; height: 150px;
  border-radius: 9999px;
  border: 1px solid rgba(31,191,107,.5);
  z-index: 1;
  animation: flow-pulse 2.8s ease-out infinite;
}
.flow-core img {
  position: relative;
  z-index: 2;
  width: 158px; height: 158px;
  object-fit: contain;
  filter: var(--s-core-sombra, drop-shadow(0 0 26px rgba(0,0,0,.9)));
  animation: flow-flota 5.4s ease-in-out infinite;
  will-change: transform;
}
@keyframes flow-flota {
  0%   { transform: translate3d(-4px, 2px, 0)  rotate(-1.7deg) scale(.985); }
  35%  { transform: translate3d(3px, -9px, 0)  rotate(1.1deg)  scale(1.015); }
  70%  { transform: translate3d(5px, -13px, 0) rotate(1.8deg)  scale(1.005); }
  100% { transform: translate3d(-4px, 2px, 0)  rotate(-1.7deg) scale(.985); }
}
@keyframes flow-pulse {
  0%   { transform: scale(.55); opacity: 0; }
  25%  { opacity: .85; }
  100% { transform: scale(1.9); opacity: 0; }
}

/* escalado responsive: la geometria no cambia, se escala el bloque entero */
@media (max-width: 1279px) { .flow-wrap { height: 312px; } .flow { --flow-s: .95; } }
@media (max-width: 1023px) { .flow-wrap { height: 292px; } .flow { --flow-s: .88; } }
@media (max-width: 767px)  { .flow-wrap { height: 272px; } .flow { --flow-s: .80; } }
@media (max-width: 479px)  { .flow-wrap { height: 250px; } .flow { --flow-s: .72; } }

/* en movil el logo pesa demasiado en pantalla */
@media (max-width: 767px) {
  .flow-core { width: 152px; height: 152px; margin: -76px 0 0 -76px; }
  .flow-core img { width: 132px; height: 132px; }
  .flow-core::after { width: 128px; height: 128px; }
}
@media (max-width: 479px) {
  .flow-core { width: 136px; height: 136px; margin: -68px 0 0 -68px; }
  .flow-core img { width: 118px; height: 118px; }
  .flow-core::after { width: 114px; height: 114px; }
}

@media (prefers-reduced-motion: reduce) {
  .flow-in, .flow-out, .flow-core::after, .flow-core img { animation: none !important; }
  .flow-rider { opacity: 1; }
  .flow-in  { offset-distance: 18%; }
  .flow-out { offset-distance: 76%; }
}

/* =========================================================
   FOOTER · marco doble (negro distinto) + wordmark liquido
   ========================================================= */
.foot-shell {
  background: #131316;                 /* negro mas claro que el fondo (#070707) */
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 24px;
  padding: 8px;
  margin: 0 auto;
  max-width: 1200px;
}
.foot-card {
  background: #000;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 12px 32px -12px rgba(0,0,0,.45);
}
.foot-legal {
  padding: 16px 24px 10px;
  font-size: 12px;
  color: #56544F;
}

/* --- banda del wordmark: ancho completo, cortada SOLO por abajo --- */
.labs-band {
  --labs-font: Anton, Impact, "Arial Black", sans-serif;
  position: relative;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  min-height: 60px;
}
.labs-canvas { display: block; width: 100%; }

/* respaldo si no hay canvas: el JS lo oculta al tomar el relevo */
.labs-ink {
  display: inline-block;
  font-family: var(--labs-font);
  font-size: 13vw;
  line-height: .78;
  white-space: nowrap;
  color: #14532d;
}

.foot-outer { background: #070707; padding: 8px 12px 20px; }
@media (min-width: 768px) { .foot-outer { padding: 16px 24px 28px; } }

/* =========================================================
   CTA FINAL · marco, rejilla, brillo y cursor
   (patron tomado de la seccion LastCTA de iuropagency.com)
   ========================================================= */
.cta-card {
  position: relative;
  max-width: 1184px;
  margin: 0 auto;
  padding: 64px 24px;
  border-radius: 28px;
  background-color: #4f4f4f17;
  border-left: 1px solid #202026;
  border-right: 1px solid #202026;
  overflow: hidden;
  isolation: isolate;
}
/* rejilla de fondo */
.cta-card::before {
  content: "";
  position: absolute; inset: 0;
  z-index: 0;
  background-image:
    repeating-linear-gradient(0deg,  rgba(255,255,255,.035) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 64px);
  -webkit-mask: radial-gradient(120% 90% at 50% 40%, #000 25%, transparent 78%);
          mask: radial-gradient(120% 90% at 50% 40%, #000 25%, transparent 78%);
}
/* filo brillante del borde superior */
.cta-line {
  position: absolute; top: -1px; left: 0; right: 0;
  height: 6px; z-index: 4; opacity: .5;
  background: radial-gradient(25% 25%, #fff 0%, rgba(31,191,107,0) 99.7%);
}
/* halo verde que sube desde abajo */
.cta-light {
  position: absolute;
  width: 666px; height: 614px;
  bottom: -430px; left: calc(50% - 333px);
  z-index: 2;
  border-radius: 50%;
  background-color: #1FBF6B;
  opacity: .30;
  filter: blur(79px);
  pointer-events: none;
}
.cta-content { position: relative; z-index: 5; max-width: 700px; margin: 0 auto; }
@media (min-width: 1024px) { .cta-content { max-width: 900px; } }

/* halo que gira alrededor del boton */
.cta-btn-wrap { position: relative; display: inline-block; isolation: isolate; }
.cta-btn-wrap::before {
  content: "";
  position: absolute; inset: -22px;
  border-radius: 999px;
  background: radial-gradient(40% 62% at 50% 0%, rgba(31,191,107,.60), rgba(31,191,107,0) 70%);
  filter: blur(14px);
  z-index: -1;
  animation: cta-halo 5.5s linear infinite;
}
@keyframes cta-halo { to { transform: rotate(360deg); } }

.cta-btn-wrap > a { position: relative; z-index: 1; transition: transform .11s ease, box-shadow .11s ease, filter .11s ease; }
.cta-btn-wrap.cta-pressed > a {
  transform: scale(.93);
  filter: brightness(.88);
  box-shadow: inset 0 4px 12px rgba(0,0,0,.45);
}

/* ondas del click: por ENCIMA del boton y en claro, si no se camuflan con
   el verde del boton y el halo */
.cta-ripple {
  position: absolute;
  left: 50%; top: 50%;
  width: 170px; height: 170px;
  margin: -85px 0 0 -85px;
  border-radius: 999px;
  pointer-events: none;
  z-index: 3;
  background: radial-gradient(closest-side,
              rgba(230,255,242,0) 54%,
              rgba(230,255,242,.85) 76%,
              rgba(120,240,180,.35) 88%,
              rgba(230,255,242,0) 100%);
  animation: cta-onda 950ms cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes cta-onda {
  from { transform: scale(.22); opacity: 1; }
  to   { transform: scale(3.1); opacity: 0; }
}

/* cursor de macOS */
.cta-cursor {
  position: absolute;
  left: 0; top: 0;
  z-index: 6;
  display: flex; align-items: flex-start; gap: 3px;
  pointer-events: none;
  will-change: transform;
}
.cta-cursor svg { width: 26px; height: 34px; flex: none; }
.cta-cursor span {
  margin-top: 16px;
  padding: 5px 11px;
  border-radius: 40px;
  background: rgba(255,255,255,.04);
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
  box-shadow: 0 1px 2px rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.10);
  font-size: 12px; color: #F6F4EF; white-space: nowrap;
}
.cta-cursor.cta-click svg { transform: scale(.86); }
.cta-cursor svg { transition: transform .1s ease; }

@media (prefers-reduced-motion: reduce) {
  .cta-btn-wrap::before { animation: none; }
  .cta-cursor { display: none; }
}

.cta-wrap { padding: 0 16px; }
@media (min-width: 768px) { .cta-wrap { padding: 0 32px; } }

/* =========================================================
   TEMAS · oscuro (por defecto) · papel
   Los tres se comparan con el boton del header. Las utilidades de
   Tailwind estan compiladas con color fijo, asi que aqui se redefinen
   contra variables. site.css carga despues de tailwind.css, de modo que
   ganan por orden y no hace falta !important.
   ========================================================= */
:root {
  --s-bg: #070707;
  --s-ink: #0A0A0A;
  --s-panel: #0C0C0C;
  --s-text: #F6F4EF;
  --s-muted: #8D8A84;
  --s-faint: #56544F;
  --s-line: #1D1D1D;
  --s-line2: #2A2A2A;
  --s-shell: #131316;
  --s-footcard: #000000;
  --s-card: #131313;
  --s-card-line: #242424;
  --s-card-text: #D9D9D9;
  --s-card-sub: #A3A099;
  --s-ico: #1E1E1E;
  --s-avatar: #141414;
  --s-cta: #4f4f4f17;
  --s-cta-line: #202026;
  --s-grid: rgba(255,255,255,.035);
}

html[data-theme="papel"] {
  --s-card: #FFFFFF;
  --s-avatar: #FFFFFF;
  /* Paleta clara REAL de avatarhype.ai, leida de sus CSS:
     --paper #F4F1E8 · --paper-2 #EFEBDD · --ink #16150F
     --ink-60 .56 · --ink-40 .38 · --ink-15 .13 · --ink-08 .07
     Su acento es --lime #CDF13B; aqui se mantiene nuestro verde. */
  --s-bg: #F4F1E8;
  --s-ink: #EFEBDD;
  --s-panel: #EFEBDD;
  --s-text: #16150F;
  --s-muted: rgba(22,21,15,.56);
  --s-faint: rgba(22,21,15,.38);
  --s-line: rgba(22,21,15,.13);
  --s-line2: rgba(22,21,15,.20);
  --s-shell: #EFEBDD;
  --s-footcard: #F4F1E8;
  --s-card: #F4F1E8;
  --s-card-line: rgba(22,21,15,.13);
  --s-card-text: #16150F;
  --s-card-sub: rgba(22,21,15,.56);
  --s-ico: #EFEBDD;
  --s-avatar: #EFEBDD;
  --s-cta: rgba(22,21,15,.03);
  --s-cta-line: rgba(22,21,15,.13);
  --s-grid: rgba(22,21,15,.07);
}

/* utilidades de Tailwind reenganchadas a los tokens */
body,
.bg-bg      { background-color: var(--s-bg); }
.bg-bg\/80  { background-color: color-mix(in srgb, var(--s-bg) 80%, transparent); }
.bg-ink     { background-color: var(--s-ink); }
.bg-panel   { background-color: var(--s-panel); }
.text-bone  { color: var(--s-text); }
.text-muted { color: var(--s-muted); }
.text-faint { color: var(--s-faint); }
.placeholder\:text-faint::placeholder { color: var(--s-faint); }
.border-line    { border-color: var(--s-line); }
.border-line\/80{ border-color: var(--s-line); }
.border-line2   { border-color: var(--s-line2); }
/* bg-bone (fondo de las capturas) y text-ink (texto sobre el verde) NO cambian */

/* componentes propios */
.foot-outer { background: var(--s-bg); }
.foot-shell { background: var(--s-shell); }
.foot-card  { background: var(--s-footcard); }
.foot-legal { color: var(--s-faint); }
.cta-card   { background-color: var(--s-cta); border-color: var(--s-cta-line); }
.cta-card::before {
  background-image:
    repeating-linear-gradient(0deg,  var(--s-grid) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(90deg, var(--s-grid) 0 1px, transparent 1px 64px);
}
.flow-card  { background: var(--s-card); border-color: var(--s-card-line); color: var(--s-card-text); }
.flow-card span { color: var(--s-card-sub); }
.flow-card .flow-now { color: var(--s-faint); }
.flow-card .flow-ico { background: var(--s-ico); }

.flow-veil {
  background: radial-gradient(closest-side, var(--s-bg) 0%, var(--s-bg) 52%,
              color-mix(in srgb, var(--s-bg) 0%, transparent) 100%);
}
html[data-theme="papel"] {
  --s-core-sombra: drop-shadow(0 8px 20px rgba(22,21,15,.20));
}
html[data-theme="papel"] .flow-card { box-shadow: 0 2px 10px rgba(22,21,15,.12); }
html[data-theme="papel"] .flow-avatar { filter: drop-shadow(0 3px 8px rgba(22,21,15,.28)); }
html[data-theme="papel"] .flow-lane svg path { stroke: rgba(22,21,15,.22); }

/* El pie va SIEMPRE en oscuro, tambien sobre fondo claro: es un bloque de
   identidad de marca. Los tokens se redeclaran sobre .foot-shell, que es el
   MARCO: asi el recuadro y todo su contenido van en oscuro, mientras que
   .foot-outer (el fondo de pagina que lo rodea) sigue al tema claro. */
html[data-theme="papel"] .foot-shell {
  --s-bg: #070707;
  --s-ink: #0A0A0A;
  --s-panel: #0C0C0C;
  --s-text: #F6F4EF;
  --s-muted: #8D8A84;
  --s-faint: #56544F;
  --s-line: #1D1D1D;
  --s-line2: #2A2A2A;
  --s-shell: #131316;
  --s-footcard: #000000;
}

/* conmutador */
.tema-btn {
  /* solo icono: con texto, en movil la cabecera se partia en dos lineas */
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; padding: 0; flex: none;
  border-radius: 999px;
  border: 1px solid var(--s-line2);
  background: transparent;
  color: var(--s-text);
  font: 600 13px/1 Archivo, system-ui, sans-serif;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.tema-btn:hover { border-color: #1FBF6B; }
.tema-btn svg { width: 19px; height: 19px; display: block; }
.tema-btn:hover { color: #1FBF6B; }

/* =========================================================
   TITULARES · peso 700 con tracking negativo
   Archivo se mantiene. El 900 y el tracking a cero eran la razon de que
   los titulares se vieran mas pesados y sueltos que los de referencia
   (AMC va a 700 con -1.6px sobre 48px, o sea -0.033em).
   ========================================================= */
.font-black {
  /* Inter solo en titulares: la "a" de un piso es cv11, una variante de
     caracter de Inter. Archivo no la tiene, asi que con Archivo esa letra
     es imposible. cv03/cv04/cv09 son las otras que activa AMC:
     seis abierto, nueve abierto y tres de remate plano. */
  font-family: 'InterVariable', Archivo, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.03em;
  font-feature-settings: 'cv11' 1, 'cv03' 1, 'cv04' 1, 'cv09' 1;
}
/* la cursiva de acento no lleva tracking: Playfair se cierra demasiado */
.font-accent { letter-spacing: normal; }