/* ============================================================
   CEMTA Online — Design tokens
   ============================================================ */
:root {
  /* Brand */
  --cemta-blue:        #09174C;
  --cemta-blue-bright: #1B2E7A;
  --cemta-blue-deep:   #050D2E;
  --cemta-blue-ink:    #09174C;
  --cemta-blue-night:  #01040F;

  /* Chartreuse — nuevo accent principal */
  --cemta-amber:       #C2EE30;
  --cemta-amber-bright:#D4F26B;
  --cemta-amber-deep:  #9BC020;
  --cemta-amber-ink:   #09174C;

  /* Secondary accents (de tu paleta) */
  --cemta-teal:        #50C5B7;
  --cemta-burgundy:    #7B0D1E;
  --cemta-orange:      #F3A712;

  --cemta-cream:       #F5EEDE;
  --cemta-paper:       #FAF7EF;
  --cemta-ink:         #09174C;
  --cemta-ink-soft:    #3A3F50;
  --cemta-line:        rgba(255,255,255,.12);
  --cemta-line-dark:   rgba(9,23,76,.10);

  /* Type */
  --ff-display: "Archivo", "Helvetica Neue", system-ui, sans-serif;
  --ff-body:    "DM Sans", "Inter", system-ui, sans-serif;
  --ff-body-alt:"Nunito Sans", "DM Sans", system-ui, sans-serif;
  --ff-mono:    "JetBrains Mono", ui-monospace, monospace;

  /* Spacing/radii */
  --radius-sm: 8px;
  --radius:    14px;
  --radius-lg: 24px;
  --radius-xl: 36px;

  /* Shadows */
  --shadow-blue: 0 30px 80px -20px rgba(9,23,76,.55);
  --shadow-amber:0 30px 80px -20px rgba(194,238,48,.45);
}

/* ============================================================
   Google fonts (loaded once via design canvas page)
   ============================================================ */

/* ============================================================
   Reset-lite — scoped to .cemta surfaces only so the design
   canvas chrome keeps its own defaults.
   ============================================================ */
.cemta, .cemta * { box-sizing: border-box; }
.cemta {
  font-family: var(--ff-body);
  color: var(--cemta-ink);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.01em;
}
.cemta h1, .cemta h2, .cemta h3, .cemta h4, .cemta h5, .cemta h6 {
  font-family: var(--ff-display);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 0.98;
  margin: 50px 0 0;
}
.cemta p { margin: 0; }
.cemta a { color: inherit; text-decoration: none; }
.cemta img, .cemta svg { display: block; max-width: 100%; }
.cemta button { font: inherit; border: 0; background: none; cursor: pointer; }

/* ============================================================
   Reusable animations — Used across all 3 directions
   ============================================================ */
@keyframes cemta-marquee {
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(-50%,0,0); }
}
@keyframes cemta-marquee-rev {
  from { transform: translate3d(-50%,0,0); }
  to   { transform: translate3d(0,0,0); }
}
@keyframes cemta-bounce {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-6px); }
}
@keyframes cemta-pulse-ring {
  0%   { box-shadow: 0 0 0 0    rgba(194,238,48,.55); }
  70%  { box-shadow: 0 0 0 18px rgba(194,238,48,0);   }
  100% { box-shadow: 0 0 0 0    rgba(194,238,48,0);   }
}
@keyframes cemta-pulse-ring-blue {
  0%   { box-shadow: 0 0 0 0    rgba(27,46,122,.55); }
  70%  { box-shadow: 0 0 0 18px rgba(27,46,122,0);   }
  100% { box-shadow: 0 0 0 0    rgba(27,46,122,0);   }
}
@keyframes cemta-shine {
  0%   { transform: translateX(-120%) skewX(-20deg); }
  100% { transform: translateX(220%)  skewX(-20deg); }
}
@keyframes cemta-spin-slow { to { transform: rotate(360deg); } }
@keyframes cemta-float {
  0%,100% { transform: translateY(0) rotate(0deg); }
  50%     { transform: translateY(-12px) rotate(2deg); }
}
@keyframes cemta-blink { 50% { opacity: 0; } }
@keyframes cemta-arrow-nudge {
  0%,100% { transform: translateX(0); }
  50%     { transform: translateX(4px); }
}

/* ============================================================
   Generic primitives
   ============================================================ */
.cemta-marquee {
  display: flex;
  width: max-content;
  animation: cemta-marquee 30s linear infinite;
  will-change: transform;
}
.cemta-marquee--rev { animation-name: cemta-marquee-rev; }
.cemta-marquee:hover { animation-play-state: paused; }

/* Pulse button — used in CTAs */
.cemta-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px 30px;
  font-family: var(--ff-display);
  font-weight: 700;
  letter-spacing: 0.01em;
  font-size: 16px;
  border-radius: 999px;
  transition: transform .2s ease, box-shadow .2s ease;
  white-space: nowrap;
  overflow: hidden;
  isolation: isolate;
}
.cemta-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%);
  transform: translateX(-120%) skewX(-20deg);
  z-index: 1;
  pointer-events: none;
}
.cemta-btn:hover { transform: translateY(-2px) scale(1.02); }
.cemta-btn:hover::after { animation: cemta-shine 1s ease forwards; }

.cemta-btn--amber {
  background: linear-gradient(135deg, #0c2f8a 0%, #1ab4f5 100%);
  color: #fff;
  animation: cemta-pulse-ring 2.6s ease-out infinite;
}
/* Inside the amber newsletter section the button sits on a chartreuse bg —
   text and ring must be white to read properly */
.section-newsletter .cemta-btn--amber {
  color: #fff;
  box-shadow: inset 0 0 0 1.5px #fff;
}
.cemta-btn--blue {
  background: var(--cemta-blue-bright);
  color: #fff;
  animation: cemta-pulse-ring-blue 2.6s ease-out infinite;
}
.cemta-btn--ghost {
  background: transparent;
  color: currentColor;
  box-shadow: inset 0 0 0 1.5px currentColor;
}
.cemta-btn--ghost:hover { box-shadow: inset 0 0 0 1.5px currentColor, 0 8px 24px rgba(0,0,0,.12); }
.cemta-btn .arrow {
  display: inline-flex;
  transition: transform .25s ease;
}
.cemta-btn:hover .arrow { transform: translateX(4px); }

/* Generic card lift */
.cemta-lift {
  transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s ease;
}
.cemta-lift:hover {
  transform: translateY(-6px);
}

/* Sparkle + dot accents */
.cemta-dot {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 999px;
  background: currentColor;
}
.cemta-live-dot {
  position: relative;
  display: inline-block;
  width: 8px; height: 8px;
  background: #ff3b3b;
  border-radius: 999px;
}
.cemta-live-dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 999px;
  border: 1.5px solid #ff3b3b;
  animation: cemta-pulse-ring 1.6s ease-out infinite;
}

/* Number ticker (count-up landing state) */
.cemta-stat-num {
  font-family: var(--ff-display);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
  line-height: 0.9;
}

/* Section labels */
.cemta-eyebrow {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}