/* =====================================================================
   GoCloud — one-page redesign tokens & styles.
   Loaded by the Home / About / Contact views (in addition to base.css +
   custom.css from the Layout). All selectors are namespaced under `.pv`
   (the redesign root wrapper) so there is zero bleed into other markup.

   Palette is taken verbatim from the brand manual (v1.0.0, Jan 2023):
     Purple Cloud  #6619ff
     Aurora grad   #3200da -> #9966ff
     Go Orange     #fa9218
     Black / White
   Typography: Elza (loaded via Typekit in custom.css).
   ===================================================================== */

.pv {
  /* --- Brand core --- */
  --pv-purple: #6619ff;
  --pv-purple-600: #5a13e6;
  --pv-purple-700: #4a0fcc;
  --pv-aurora-from: #3200da;
  --pv-aurora-to: #9966ff;
  --pv-orange: #fa9218;
  --pv-black: #000000;
  --pv-white: #ffffff;

  /* --- Aurora gradient (brand) --- */
  --pv-aurora: linear-gradient(135deg, var(--pv-aurora-from) 0%, var(--pv-purple) 52%, var(--pv-aurora-to) 100%);
  --pv-aurora-soft: linear-gradient(135deg, rgba(50, 0, 218, 0.06) 0%, rgba(153, 102, 255, 0.06) 100%);

  /* --- Neutrals (airy, light-first) --- */
  --pv-ink: #15121f;        /* near-black with a violet cast, softer than #000 */
  --pv-ink-2: #4a4458;      /* secondary text */
  --pv-muted: #6f6980;      /* captions */
  --pv-line: #ece9f3;       /* hairline borders */
  --pv-surface: #ffffff;
  --pv-surface-2: #f7f5fc;  /* faint violet-tinted panel */
  --pv-surface-3: #f1edfa;

  /* --- Radii / elevation --- */
  --pv-r-sm: 12px;
  --pv-r: 18px;
  --pv-r-lg: 28px;
  --pv-shadow-sm: 0 2px 10px rgba(21, 18, 31, 0.06);
  --pv-shadow: 0 18px 50px -20px rgba(50, 0, 218, 0.28);
  --pv-shadow-lg: 0 40px 90px -30px rgba(50, 0, 218, 0.35);

  /* --- Spacing scale (generous whitespace is the point) --- */
  --pv-s1: 8px;
  --pv-s2: 16px;
  --pv-s3: 24px;
  --pv-s4: 40px;
  --pv-s5: 64px;
  --pv-s6: 96px;
  --pv-s7: 140px;

  /* --- Type --- */
  --pv-font: "elza", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --pv-maxw: 1180px;

  font-family: var(--pv-font);
  color: var(--pv-ink);
  background: var(--pv-surface);
  -webkit-font-smoothing: antialiased;
}

/* Override the global main top margin so the hero sits flush under the fixed
   navbar. Scoped to the .pv wrapper only. */
.pv { margin-top: -85px; padding-top: 85px; }

.pv * { box-sizing: border-box; }

.pv .pv-wrap {
  max-width: var(--pv-maxw);
  margin: 0 auto;
  padding-inline: clamp(20px, 5vw, 48px);
}

/* Smooth anchor scroll + offset for the fixed navbar */
html:has(.pv) { scroll-behavior: smooth; }
.pv [id] { scroll-margin-top: 110px; }

/* ---------- Typography ---------- */
.pv h1, .pv h2, .pv h3, .pv h4 { font-family: var(--pv-font); margin: 0; letter-spacing: -0.02em; line-height: 1.05; }
.pv p { margin: 0; font-family: var(--pv-font); }

.pv .pv-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--pv-purple);
}
.pv .pv-eyebrow::before {
  content: ""; width: 22px; height: 2px; border-radius: 2px; background: var(--pv-purple);
}
.pv .pv-eyebrow.on-dark { color: #d9c9ff; }
.pv .pv-eyebrow.on-dark::before { background: #d9c9ff; }

.pv .pv-h2 { font-size: clamp(2rem, 4vw, 3.1rem); font-weight: 600; }
.pv .pv-lead { font-size: clamp(1.05rem, 1.4vw, 1.25rem); line-height: 1.55; color: var(--pv-ink-2); max-width: 60ch; }

/* ---------- Buttons ---------- */
.pv .pv-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--pv-font); font-weight: 600; font-size: 1rem;
  padding: 15px 28px; border-radius: 999px; border: 1.5px solid transparent;
  cursor: pointer; text-decoration: none; transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}
.pv .pv-btn-primary { background: var(--pv-purple); color: #fff; box-shadow: 0 12px 28px -10px rgba(102, 25, 255, 0.6); }
.pv .pv-btn-primary:hover { transform: translateY(-2px); background: var(--pv-purple-600); box-shadow: 0 18px 36px -12px rgba(102, 25, 255, 0.7); }
.pv .pv-btn-ghost { background: transparent; color: var(--pv-ink); border-color: var(--pv-line); }
.pv .pv-btn-ghost:hover { border-color: var(--pv-purple); color: var(--pv-purple); transform: translateY(-2px); }
.pv .pv-btn-on-dark { background: #fff; color: var(--pv-purple); }
.pv .pv-btn-on-dark:hover { transform: translateY(-2px); box-shadow: 0 18px 36px -12px rgba(0,0,0,0.4); }
.pv .pv-btn-outline-dark { background: transparent; color: #fff; border-color: rgba(255,255,255,0.4); }
.pv .pv-btn-outline-dark:hover { border-color: #fff; transform: translateY(-2px); }

.pv .pv-link {
  display: inline-flex; align-items: center; gap: 8px; font-weight: 600; text-decoration: none;
  color: var(--pv-purple); transition: gap .18s ease;
}
.pv .pv-link:hover { gap: 14px; }
.pv .pv-link .pv-arrow { transition: transform .18s ease; }

/* ---------- Section rhythm ---------- */
.pv .pv-section { padding-block: 80px; } /* tablet 72px, phone 56px: see MOBILE / TABLET TUNING */
.pv .pv-section-tight { padding-block: var(--pv-s5); }
.pv .pv-section-head { max-width: 760px; margin: 0 auto var(--pv-s4); text-align: center; }
.pv .pv-section-head .pv-eyebrow { margin-bottom: 16px; }
.pv .pv-section-head .pv-lead { margin: 18px auto 0; }

/* =====================================================================
   HERO
   ===================================================================== */
.pv .pv-hero {
  position: relative; overflow: hidden;
  background: var(--pv-aurora);
  color: #fff;
  padding-block: clamp(90px, 12vw, 150px) clamp(72px, 7vw, 104px);
  isolation: isolate;
}
/* Ambient movement: slow-drifting aurora blobs + faint grid, no neon */
.pv .pv-hero::before,
.pv .pv-hero::after {
  content: ""; position: absolute; z-index: -1; border-radius: 50%;
  filter: blur(70px); opacity: 0.55; pointer-events: none;
}
.pv .pv-hero::before {
  width: 46vw; height: 46vw; left: -8vw; top: -14vw;
  background: radial-gradient(circle, rgba(153,102,255,0.9), transparent 62%);
  animation: pv-float1 16s ease-in-out infinite;
}
.pv .pv-hero::after {
  width: 40vw; height: 40vw; right: -10vw; bottom: -18vw;
  background: radial-gradient(circle, rgba(102,25,255,0.85), transparent 60%);
  animation: pv-float2 20s ease-in-out infinite;
}
.pv .pv-hero-grid {
  position: absolute; inset: 0; z-index: -1; opacity: 0.18; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.6) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.6) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 75%);
}
@keyframes pv-float1 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(5vw,4vw)} }
@keyframes pv-float2 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-4vw,-3vw)} }
@media (prefers-reduced-motion: reduce) {
  .pv .pv-hero::before, .pv .pv-hero::after { animation: none; }
}

.pv .pv-hero-inner { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--pv-s5); align-items: center; }
.pv .pv-hero-badge {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 24px;
  padding: 8px 16px; border-radius: 999px; font-size: 0.82rem; font-weight: 600;
  background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.22); color: #fff;
  backdrop-filter: blur(6px);
}
.pv .pv-hero-badge .pv-dot { width: 8px; height: 8px; border-radius: 50%; background: #6ee7a0; box-shadow: 0 0 0 4px rgba(110,231,160,0.25); }
.pv .pv-hero h1 { font-size: clamp(2.4rem, 5vw, 4.1rem); font-weight: 600; line-height: 1.02; }
.pv .pv-hero h1 .pv-accent { color: #cbb6ff; }
.pv .pv-hero-sub { margin-top: 24px; font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.55; color: rgba(255,255,255,0.86); max-width: 54ch; }
.pv .pv-hero-cta { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 16px; }
.pv .pv-hero-stats { margin-top: 48px; display: flex; flex-wrap: wrap; gap: 40px; }
.pv .pv-stat .pv-stat-n { font-size: 2.2rem; font-weight: 600; line-height: 1; }
.pv .pv-stat .pv-stat-l { font-size: 0.9rem; color: rgba(255,255,255,0.72); margin-top: 6px; }

/* Hero visual: logo mark orbit card */
.pv .pv-hero-visual { position: relative; display: flex; align-items: center; justify-content: center; min-height: 360px; }
.pv .pv-orb {
  position: relative; width: 300px; height: 300px; border-radius: 50%;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.18);
  display: flex; align-items: center; justify-content: center;
}
.pv .pv-orb::before, .pv .pv-orb::after {
  content: ""; position: absolute; border-radius: 50%; border: 1px solid rgba(255,255,255,0.14);
}
.pv .pv-orb::before { inset: -40px; animation: pv-spin 26s linear infinite; }
.pv .pv-orb::after { inset: -80px; animation: pv-spin 40s linear infinite reverse; }
.pv .pv-orb img { width: 150px; height: auto; }
.pv .pv-orb .pv-chip {
  position: absolute; padding: 8px 14px; border-radius: 999px; font-size: 0.8rem; font-weight: 600;
  background: #fff; color: var(--pv-purple); box-shadow: var(--pv-shadow);
}
.pv .pv-orb .pv-chip-1 { top: 6%; left: -8%; }
.pv .pv-orb .pv-chip-2 { bottom: 10%; right: -10%; }
.pv .pv-orb .pv-chip-3 { bottom: -6%; left: 14%; }
@keyframes pv-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .pv .pv-orb::before, .pv .pv-orb::after { animation: none; }
}

/* Trust strip under hero */

/* =====================================================================
   STANDARD PLATFORM — hierarchical, the hero's follow-up block
   ===================================================================== */
.pv .pv-sp { position: relative; background: var(--pv-surface-2); }
.pv .pv-sp-head { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--pv-s5); align-items: end; margin-bottom: var(--pv-s5); }
.pv .pv-sp-head h2 { font-size: clamp(2rem, 3.6vw, 2.9rem); font-weight: 600; margin-top: 16px; }
.pv .pv-sp-head .pv-lead { margin-top: 18px; }
.pv .pv-sp-head .pv-sp-cta { display: flex; flex-wrap: wrap; gap: 14px; align-self: end; justify-content: flex-start; }

/* Layer stack diagram */
.pv .pv-stack { display: flex; flex-direction: column; gap: 10px; counter-reset: layer; }
.pv .pv-layer {
  position: relative; display: grid; grid-template-columns: 150px 1fr auto; gap: var(--pv-s3); align-items: center;
  background: #fff; border: 1px solid var(--pv-line); border-radius: var(--pv-r);
  padding: 22px 26px; box-shadow: var(--pv-shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.pv .pv-layer:hover { transform: translateX(6px); box-shadow: var(--pv-shadow); border-color: transparent; }
.pv .pv-layer::before {
  counter-increment: layer; content: "0" counter(layer);
  position: absolute; left: 26px; top: 18px; font-size: 0.72rem; font-weight: 700; color: var(--pv-muted); letter-spacing: 0.1em;
}
.pv .pv-layer-name { display: flex; flex-direction: column; gap: 4px; padding-top: 14px; }
.pv .pv-layer-name .pv-ln-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pv-muted); }
.pv .pv-layer-name .pv-ln-title { font-size: 1.3rem; font-weight: 600; }
.pv .pv-layer-desc { font-size: 0.95rem; line-height: 1.5; color: var(--pv-ink-2); }
.pv .pv-layer-tags { display: flex; flex-wrap: wrap; gap: 6px; max-width: 320px; justify-content: flex-end; }
.pv .pv-tag { font-size: 0.74rem; font-weight: 600; padding: 5px 11px; border-radius: 999px; background: var(--pv-surface-3); color: var(--pv-purple-700); white-space: nowrap; }

/* Accent bar on the left per layer, cycling brand tints */
.pv .pv-layer { border-left: 4px solid var(--pv-line); }
.pv .pv-layer.a-aurora { border-left-color: var(--pv-purple); }
.pv .pv-layer.a-orange { border-left-color: var(--pv-orange); }
.pv .pv-layer.a-ink { border-left-color: var(--pv-ink); }

/* Benefits row */
.pv .pv-benefits { margin-top: var(--pv-s5); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--pv-s3); }
.pv .pv-benefit { background: #fff; border: 1px solid var(--pv-line); border-radius: var(--pv-r); padding: 28px; transition: transform .18s ease, box-shadow .18s ease; }
.pv .pv-benefit:hover { transform: translateY(-4px); box-shadow: var(--pv-shadow); }
.pv .pv-benefit .pv-b-ic { width: 48px; height: 48px; border-radius: 14px; background: var(--pv-surface-3); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; transition: background .2s ease; }
/* The icon span is recoloured via CSS mask so it can flip to white on hover. */
.pv .pv-benefit .pv-b-icon {
  width: 24px; height: 24px; display: block; background: var(--pv-purple);
  -webkit-mask: var(--icon) center/contain no-repeat; mask: var(--icon) center/contain no-repeat;
  transition: background .2s ease;
}
.pv .pv-benefit:hover .pv-b-ic { background: var(--pv-aurora); }
.pv .pv-benefit:hover .pv-b-icon { background: #fff; }
.pv .pv-benefit h4 { font-size: 1.1rem; font-weight: 600; margin-bottom: 8px; }
.pv .pv-benefit p { font-size: 0.92rem; line-height: 1.5; color: var(--pv-ink-2); }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 900px) {
  .pv .pv-hero-inner { grid-template-columns: 1fr; gap: var(--pv-s4); }
  .pv .pv-hero-visual { min-height: 280px; order: -1; }
  .pv .pv-orb { width: 220px; height: 220px; }
  .pv .pv-orb img { width: 110px; }
  .pv .pv-sp-head { grid-template-columns: 1fr; gap: var(--pv-s3); }
  .pv .pv-layer { grid-template-columns: 1fr; gap: 14px; }
  .pv .pv-layer-tags { justify-content: flex-start; max-width: none; }
  .pv .pv-benefits { grid-template-columns: 1fr; }
}

/* =====================================================================
   v2 ADDITIONS — orbit (A/B), LED pulse, console photo, AWS badge,
   sequential layer stack, brand symbol motifs. All scoped under .pv.
   ===================================================================== */

/* Brand hero background (SVG) replaces the CSS-only grid */
.pv .pv-hero.v2 { background: #4a0fcc; }
.pv .pv-hero.v2 .pv-hero-bg {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: url("/assets/img/brand/symbols/hero-bg.svg") center/cover no-repeat;
  animation: pv-bg-drift 40s ease-in-out infinite alternate;
}
@keyframes pv-bg-drift { from { transform: scale(1.05) translate(0,0); } to { transform: scale(1.12) translate(-2%, -2%); } }
@media (prefers-reduced-motion: reduce) { .pv .pv-hero.v2 .pv-hero-bg { animation: none; } }

/* ---------- ORBIT system (shared) ---------- */
.pv .pv-orbit-stage {
  position: relative; width: min(540px, 100%); aspect-ratio: 1; margin: 0 auto;
  display: flex; align-items: center; justify-content: center;
}
/* ring guides (brand concentric look) */
.pv .pv-orbit-stage .pv-ring {
  position: absolute; border-radius: 50%; border: 1px solid rgba(255,255,255,0.16);
  top: 50%; left: 50%; transform: translate(-50%,-50%);
}
.pv .pv-orbit-stage .pv-ring.r1 { width: 46%; height: 46%; }
.pv .pv-orbit-stage .pv-ring.r2 { width: 72%; height: 72%; }
.pv .pv-orbit-stage .pv-ring.r3 { width: 100%; height: 100%; }

/* centre logo mark */
.pv .pv-orbit-core {
  position: relative; z-index: 3; width: 34%; height: 34%; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.pv .pv-orbit-core img { width: 100%; height: auto; }

/* a planet (service chip) — glass style on the aurora bg: translucent fill +
   crisp border, harmonises with the brand instead of hard white pills, and
   reads cleanly even when two briefly cross. */
.pv .pv-planet {
  position: absolute; top: 50%; left: 50%; z-index: 4;
  padding: 9px 16px; border-radius: 12px; white-space: nowrap;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.4);
  color: #fff; font-weight: 600; font-size: 0.84rem; letter-spacing: 0.01em;
  box-shadow: 0 8px 22px -12px rgba(0,0,0,0.5);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transform: translate(-50%, -50%);
}
.pv .pv-planet::before {
  content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: #cbb6ff; margin-right: 8px; vertical-align: middle;
}

/* -------- Variant A: 7 planets all orbiting at once -------- */
/* Arm is a half-width bar pinned at centre; it rotates. The planet sits at the
   far end of the arm and counter-rotates by the same per-arm angle + spin so the
   text stays upright. Radius is set per-arm via --r. */
.pv .pv-orbit-A .pv-arm {
  position: absolute; top: 50%; left: 50%; height: 0;
  width: var(--r, 40%);
  transform-origin: 0 0;
  transform: rotate(var(--a, 0deg));
  animation: pv-orbit-spin var(--dur, 32s) linear infinite;
}
.pv .pv-orbit-A .pv-arm .pv-planet {
  position: absolute; left: 100%; top: 0;
  /* undo the arm's base angle + the running spin so the chip stays upright */
  transform: translate(-50%, -50%) rotate(calc(-1 * var(--a, 0deg)));
  animation: pv-orbit-upright var(--dur, 32s) linear infinite;
}
@keyframes pv-orbit-spin { from { transform: rotate(var(--a,0deg)); } to { transform: rotate(calc(var(--a,0deg) + 360deg)); } }
@keyframes pv-orbit-upright {
  from { transform: translate(-50%,-50%) rotate(calc(-1 * var(--a,0deg))); }
  to   { transform: translate(-50%,-50%) rotate(calc(-1 * var(--a,0deg) - 360deg)); }
}
/* Only the arm whose chip is hovered pauses — the rest keep orbiting. */
.pv .pv-orbit-A .pv-arm:hover,
.pv .pv-orbit-A .pv-arm:hover .pv-planet { animation-play-state: paused; }

/* -------- Variant B: 4 slots, planets rotate in/out -------- */
.pv .pv-orbit-B .pv-planet { transition: opacity .6s ease, transform .6s ease; }
.pv .pv-orbit-B .pv-planet[data-visible="false"] { opacity: 0; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .pv .pv-orbit-A .pv-arm, .pv .pv-orbit-A .pv-arm .pv-planet { animation: none; }
}

/* ---------- LED pulse (status indicator, NOT the AWS badge) ---------- */
.pv .pv-status {
  display: inline-flex; align-items: center; gap: 10px; padding: 9px 18px;
  border-radius: 999px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2);
  color: #fff; font-size: 0.82rem; font-weight: 600; line-height: 1; backdrop-filter: blur(6px);
  margin-bottom: 28px; /* clear separation from the H1 */
}
/* LED sits in its own fixed box so the glow never shifts the dot off-centre. */
.pv .pv-led {
  flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; background: #39d98a;
  position: relative; display: block;
}
/* both children are blocks with line-height:1 so align-items:center is exact */
.pv .pv-status { align-items: center; }
.pv .pv-status-txt { display: block; line-height: 1; }
.pv .pv-led::after {
  content: ""; position: absolute; inset: -3px; border-radius: 50%;
  background: #39d98a; opacity: 0.5; animation: pv-led-breathe 2.4s ease-in-out infinite;
}
.pv .pv-led { animation: pv-led-core 2.4s ease-in-out infinite; }
@keyframes pv-led-breathe { 0%,100% { transform: scale(1); opacity: 0.5; } 50% { transform: scale(2.1); opacity: 0; } }
@keyframes pv-led-core { 0%,100% { box-shadow: 0 0 4px 0 rgba(57,217,138,0.6); } 50% { box-shadow: 0 0 12px 3px rgba(57,217,138,0.9); } }
@media (prefers-reduced-motion: reduce) {
  .pv .pv-led, .pv .pv-led::after { animation: none; }
}

/* ---------- AWS badge (official image, never text) ---------- */
.pv .pv-aws-badge { display: inline-flex; }
.pv .pv-aws-badge img { height: 86px; width: auto; display: block; }

/* ---------- Console photo (reintegrated) ---------- */
.pv .pv-console {
  border-radius: var(--pv-r-lg); overflow: hidden; box-shadow: var(--pv-shadow-lg);
  border: 1px solid rgba(255,255,255,0.15); position: relative;
}
.pv .pv-console img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pv .pv-console::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(50,0,218,0.25), transparent 55%);
}

/* Hero layout with console on the right (variant that keeps the photo) */
.pv .pv-hero-split { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--pv-s5); align-items: center; }

/* =====================================================================
   STANDARD PLATFORM v2 — sequential auto-advancing layers
   ===================================================================== */
.pv .pv-sp2 { position: relative; overflow: hidden; }
/* Positive brand motif (rings = signal/propagation) instead of the octagons. */
.pv .pv-sp2 .pv-sp-motif {
  position: absolute; right: -160px; top: -80px;
  width: 560px; height: 560px; color: var(--pv-purple); opacity: 0.08; z-index: 0; pointer-events: none;
  animation: pv-motif-pulse 9s ease-in-out infinite;
}
@keyframes pv-motif-pulse { 0%,100% { transform: scale(1); opacity: 0.08; } 50% { transform: scale(1.06); opacity: 0.12; } }
@media (prefers-reduced-motion: reduce) { .pv .pv-sp2 .pv-sp-motif { animation: none; } }
.pv .pv-sp2 .pv-wrap { position: relative; z-index: 1; }

/* ---------- Base card: Standard Platform as the baseline (full width) ---------- */
.pv .pv-base-card {
  position: relative; overflow: hidden; margin-bottom: 16px;
  display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--pv-s4); align-items: center;
  background: var(--pv-aurora); color: #fff; border-radius: var(--pv-r-lg);
  padding: 34px 40px; box-shadow: var(--pv-shadow);
}
.pv .pv-base-eyebrow { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; color: #d9c9ff; }
.pv .pv-base-card h3 { font-size: clamp(1.3rem, 2.2vw, 1.9rem); font-weight: 600; margin-top: 10px; line-height: 1.15; }
.pv .pv-base-note { font-size: 0.9rem; line-height: 1.5; color: rgba(255,255,255,0.86); position: relative; z-index: 1; }
.pv .pv-base-mark {
  position: absolute; right: -40px; bottom: -60px; width: 260px; height: 260px;
  opacity: 0.18; pointer-events: none; filter: brightness(0) invert(1);
}

/* ---------- Layer cards: strong contrast between inactive and active ---------- */
/* Inactive cards recede: tinted panel, dimmed text, no shadow, number in grey. */
.pv .pv-seq-item { background: var(--pv-surface-3); border-color: transparent; }
.pv .pv-seq-item:not(.active) { opacity: 0.55; filter: saturate(0.6); }
.pv .pv-seq-item:not(.active) .pv-seq-title { color: var(--pv-muted); }
.pv .pv-seq-item:not(.active):hover {
  opacity: 0.9; filter: none; background: #fff; border-left-color: var(--pv-aurora-to);
  box-shadow: var(--pv-shadow-sm); transform: translateX(2px);
}
/* active card: pure white, lifted, aurora left border + aurora number badge */
.pv .pv-seq-item.active {
  background: #fff; opacity: 1; filter: none;
  border-left-width: 5px; box-shadow: var(--pv-shadow-lg);
}

.pv .pv-seq { display: grid; grid-template-columns: 1fr; gap: 12px; }
.pv .pv-seq-item {
  background: #fff; border: 1px solid var(--pv-line); border-left: 4px solid var(--pv-line);
  border-radius: var(--pv-r); padding: 20px 24px; cursor: pointer;
  transition: all .4s cubic-bezier(.2,.7,.3,1); position: relative; overflow: hidden;
}
/* --seq-indent = pill width + head gap: desc/tags align under the title */
.pv .pv-seq-item { --seq-pill: 90px; --seq-gap: 16px; --seq-indent: calc(var(--seq-pill) + var(--seq-gap)); }
.pv .pv-seq-item .pv-seq-head { display: flex; align-items: center; gap: var(--seq-gap); }
/* "Layer N" pill badge (replaces the redundant 01 + LAYER 1 pair) — fixed width
   so the title's left edge is consistent and the body can align under it */
.pv .pv-seq-item .pv-seq-n {
  flex: 0 0 var(--seq-pill); width: var(--seq-pill); height: 30px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center; white-space: nowrap;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--pv-surface-3); color: var(--pv-purple-700); transition: all .4s ease;
}
.pv .pv-seq-item .pv-seq-title { font-size: 1.15rem; font-weight: 600; }
.pv .pv-seq-item .pv-seq-body {
  display: grid; grid-template-rows: 0fr; opacity: 0; margin-top: 0;
  transition: grid-template-rows .45s ease, opacity .4s ease, margin-top .4s ease;
}
.pv .pv-seq-item .pv-seq-body > div { overflow: hidden; min-height: 0; }
.pv .pv-seq-item .pv-seq-desc { font-size: 0.95rem; line-height: 1.55; color: var(--pv-ink-2); padding: 14px 0 8px var(--seq-indent); }
.pv .pv-seq-item .pv-seq-tags { display: flex; flex-wrap: wrap; gap: 6px; padding-left: var(--seq-indent); padding-bottom: 4px; }

/* active state */
.pv .pv-seq-item.active {
  border-left-color: var(--pv-purple); box-shadow: var(--pv-shadow); transform: translateX(4px);
}
.pv .pv-seq-item.active .pv-seq-n { background: var(--pv-aurora); color: #fff; }
.pv .pv-seq-item.active .pv-seq-body { grid-template-rows: 1fr; opacity: 1; margin-top: 6px; }
/* progress bar on active item */
.pv .pv-seq-item .pv-seq-progress {
  position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--pv-aurora);
}
.pv .pv-seq-item.active .pv-seq-progress { animation: pv-seq-fill var(--seq-dur, 3800ms) linear forwards; }
@keyframes pv-seq-fill { from { width: 0; } to { width: 100%; } }
.pv .pv-seq[data-paused="true"] .pv-seq-item.active .pv-seq-progress { animation-play-state: paused; }

@media (max-width: 900px) {
  .pv .pv-hero-split { grid-template-columns: 1fr; }
  .pv .pv-orbit-stage { width: min(380px, 86vw); }
  .pv .pv-seq-item .pv-seq-desc, .pv .pv-seq-item .pv-seq-tags { padding-left: 0; }
  .pv .pv-base-card { grid-template-columns: 1fr; gap: var(--pv-s2); padding: 26px 24px; }
  .pv .pv-base-mark { display: none; }
  .pv .pv-seq-corner { width: 40px; height: 40px; }
}

/* =====================================================================
   CONSOLE STRIP — tech product window, full width, after the small cards
   ===================================================================== */
.pv .pv-console-strip { margin-top: var(--pv-s5); }
.pv .pv-console-window {
  position: relative; border-radius: var(--pv-r-lg); overflow: hidden;
  background: #0e0b1a; border: 1px solid rgba(102,25,255,0.35);
  box-shadow: 0 50px 110px -40px rgba(50,0,218,0.6), 0 0 0 1px rgba(255,255,255,0.04);
}
/* aurora glow behind the window */
.pv .pv-console-window::before {
  content: ""; position: absolute; inset: -2px; z-index: 0; border-radius: inherit;
  background: radial-gradient(60% 120% at 20% 0%, rgba(102,25,255,0.35), transparent 60%);
  pointer-events: none;
}
.pv .pv-console-bar {
  position: relative; z-index: 1; display: flex; align-items: center; gap: 8px;
  padding: 13px 18px; background: rgba(255,255,255,0.04); border-bottom: 1px solid rgba(255,255,255,0.08);
}
.pv .pv-console-bar span[class^="pv-dot-"] { width: 11px; height: 11px; border-radius: 50%; }
.pv .pv-console-bar .pv-dot-r { background: #ff5f57; }
.pv .pv-console-bar .pv-dot-y { background: #febc2e; }
.pv .pv-console-bar .pv-dot-g { background: #28c840; }
.pv .pv-console-title {
  margin-left: 12px; font-size: 0.8rem; font-weight: 600; color: rgba(255,255,255,0.55);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; letter-spacing: 0.02em;
}
.pv .pv-console-photo { position: relative; z-index: 1; aspect-ratio: 16 / 7; overflow: hidden; }
.pv .pv-console-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pv .pv-console-photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(120deg, rgba(50,0,218,0.28), transparent 45%),
              linear-gradient(0deg, rgba(14,11,26,0.5), transparent 40%);
  /* faint scanline texture for the tech feel */
  mix-blend-mode: normal;
}
.pv .pv-console-photo::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,0.03) 0 1px, transparent 1px 3px);
}

/* =====================================================================
   FOOTER — full-bleed, balanced site map
   ===================================================================== */
.pv .pv-footer {
  background: #0e0b1a; color: #fff;
  padding: 80px 0 0;
}
.pv .pv-footer-inner {
  max-width: var(--pv-maxw); margin: 0 auto; padding-inline: clamp(20px, 5vw, 48px);
  /* brand (narrower) · nav (3 cols) · AWS badge as the last column on the right */
  display: grid; grid-template-columns: 0.9fr 1.8fr auto; gap: var(--pv-s5); padding-bottom: var(--pv-s5);
  align-items: start;
}
.pv .pv-footer-brand img { height: 42px; width: auto; } /* bigger logo */
.pv .pv-footer-brand p { margin-top: 18px; color: rgba(255,255,255,0.6); font-size: 0.95rem; line-height: 1.65; }
.pv .pv-footer-aws { justify-self: end; }
.pv .pv-footer-aws img { height: 128px; width: auto; } /* bigger, legible badge */
.pv .pv-footer-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--pv-s4); }
.pv .pv-footer-col { display: flex; flex-direction: column; gap: 12px; }
.pv .pv-footer-col h5 { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #cbb6ff; margin: 0 0 4px; }
.pv .pv-footer-col a { color: rgba(255,255,255,0.72); text-decoration: none; font-size: 0.95rem; transition: color .15s ease; }
.pv .pv-footer-col a:hover { color: #fff; }
.pv .pv-footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  max-width: var(--pv-maxw); margin: 0 auto; padding: 22px clamp(20px, 5vw, 48px);
  display: flex; justify-content: space-between; align-items: center;
  color: rgba(255,255,255,0.5); font-size: 0.85rem;
}
/* footer is a direct child of .pv which has horizontal padding via wrap; make it full-bleed */
.pv .pv-footer { width: 100%; }

@media (max-width: 900px) {
  .pv .pv-footer-inner { grid-template-columns: 1fr; gap: var(--pv-s4); }
  .pv .pv-footer-cols { grid-template-columns: repeat(2, 1fr); gap: var(--pv-s3); }
  .pv .pv-footer-aws { justify-self: start; }
  .pv .pv-footer-aws img { height: 104px; }
}

/* =====================================================================
   TRAMO 1 ADDITIONS — one-page header, usage code window, base realign,
   bigger hero/footer AWS badge, footer bottom link.
   ===================================================================== */

/* Hide the Layout's default header/footer on redesigned pages (we render our own).
   The Layout footer is <footer class="footer"> (sibling of <main>); our footer
   is .pv-footer inside .pv, so this targets only the Layout one. */
body:has(.pv) nav#myNavbar { display: none; }
body:has(.pv) footer.footer { display: none; }
/* No need to tuck under the 85px Layout navbar (it's hidden). */
.pv { margin-top: 0; padding-top: 0; }

/* ---------- One-page sticky header with anchors ---------- */
.pv .pv-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  /* background/border handled by the state rules below (transparent at top,
     dark glass once scrolled). */
}
.pv .pv-nav-inner {
  max-width: var(--pv-maxw); margin: 0 auto; padding: 14px clamp(20px, 5vw, 48px);
  display: flex; align-items: center; gap: var(--pv-s4);
}
.pv .pv-nav-logo img { height: 30px; width: auto; display: block; }
.pv .pv-nav-links { display: flex; gap: 26px; margin-left: auto; }
.pv .pv-nav-links a {
  color: rgba(255,255,255,0.78); text-decoration: none; font-size: 0.92rem; font-weight: 600;
  position: relative; transition: color .15s ease;
}
.pv .pv-nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: -6px; height: 2px; width: 0; background: var(--pv-aurora-to); transition: width .2s ease;
}
.pv .pv-nav-links a:hover { color: #fff; }
.pv .pv-nav-links a:hover::after { width: 100%; }
.pv .pv-nav-cta { padding: 10px 22px; font-size: 0.92rem; }
.pv [id] { scroll-margin-top: 80px; } /* offset for the shorter sticky header */

/* Language switcher: EN / ES, separated from the nav by a pipe */
.pv .pv-nav-lang { display: inline-flex; align-items: center; gap: 7px; position: relative; padding-left: 20px; }
.pv .pv-nav-lang::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 16px; background: rgba(255,255,255,0.3); }
.pv .pv-nav-lang a { color: rgba(255,255,255,0.6); font-size: 0.86rem; font-weight: 700; text-decoration: none; transition: color .15s ease; }
.pv .pv-nav-lang a:hover { color: #fff; }
.pv .pv-nav-lang a.active { color: #fff; }
.pv .pv-nav-lang-sep { color: rgba(255,255,255,0.35); font-size: 0.8rem; }

@media (max-width: 900px) {
  .pv .pv-nav-links { display: none; }
  .pv .pv-nav-cta { margin-left: auto; }
}

/* ---------- Base card realign: IaC note sits right under the title ---------- */
.pv .pv-base-card { grid-template-columns: 1fr auto; align-items: center; }
.pv .pv-base-main { display: flex; flex-direction: column; gap: 8px; }
.pv .pv-base-note { margin: 0; } /* overrides earlier; now directly below h3 */
.pv .pv-base-mark { position: static; width: 120px; height: 120px; opacity: 0.9; justify-self: end; }

/* ---------- Usage: Terraform code window ---------- */
.pv .pv-usage { margin-top: var(--pv-s5); }
.pv .pv-usage-head { max-width: 760px; margin: 0 auto var(--pv-s3); text-align: center; }
.pv .pv-usage-head h3 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 600; margin-top: 12px; }
.pv .pv-usage-head .pv-lead { margin: 14px auto 0; }
.pv .pv-eyebrow-orange { color: var(--pv-orange); }
.pv .pv-eyebrow-orange::before { background: var(--pv-orange); }
.pv .pv-code {
  position: relative; z-index: 1; margin: 0; padding: 26px 28px; overflow-x: auto;
  background: #0e0b1a; color: #e9e3ff;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.9rem; line-height: 1.7;
}
.pv .pv-code code { background: none; color: inherit; white-space: pre; }
.pv .pv-usage-note { margin: 16px auto 0; max-width: 760px; text-align: center; font-size: 0.85rem; color: var(--pv-muted); }

/* ---------- Bigger AWS badge: hero stats row ---------- */
.pv .pv-hero-stats { align-items: center; gap: 44px; }
.pv .pv-aws-badge { margin-left: 4px; }
.pv .pv-aws-badge img { height: 112px; }

/* ---------- Footer: bottom link (badge size handled in the layout block) ---------- */
.pv .pv-footer-bottom a { color: rgba(255,255,255,0.6); text-decoration: none; transition: color .15s ease; }
.pv .pv-footer-bottom a:hover { color: #fff; }

@media (max-width: 900px) {
  .pv .pv-base-card { grid-template-columns: 1fr; }
  .pv .pv-base-mark { display: none; }
  .pv .pv-hero-stats { gap: 28px; }
  .pv .pv-aws-badge img { height: 92px; }
}

/* =====================================================================
   SERVICES TRAMO + fixes (gO orbit, header logo, chips, white band)
   ===================================================================== */

/* (1) Kill the leftover white band: the global <main> keeps an 85px top margin
   that showed as an empty strip once the live navbar was hidden. */
body:has(.pv) main { margin-top: 0; }

/* (2) Header: consistent DARK glass bar that floats over everything, so white
   nav text stays legible over both the dark hero and the light sections. No chip
   on the logo. This is the robust one-page solution for mixed-background pages. */
.pv .pv-nav-logo img { height: 42px; transition: height .25s ease; }
.pv .pv-nav {
  transition: background .25s ease, padding .25s ease, box-shadow .25s ease, border-color .25s ease;
  /* At the very top: fully transparent, floating ON TOP of the aurora hero, so
     the violet reads continuously with no visible bar/separation. */
  background: transparent;
  border-bottom: 1px solid transparent;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
/* Once scrolled: brand-violet glass bar (option B) — integrates with the hero
   and reads cleanly over any section, instead of the dark/grey slab. White nav
   text stays legible on the saturated violet tint. */
.pv .pv-nav.scrolled {
  background: rgba(90, 19, 230, 0.6);
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  border-bottom-color: rgba(255, 255, 255, 0.16);
  box-shadow: 0 10px 34px -16px rgba(50, 0, 218, 0.55);
}
.pv .pv-nav.scrolled .pv-nav-inner { padding-top: 9px; padding-bottom: 9px; }
.pv .pv-nav.scrolled .pv-nav-logo img { height: 34px; }
/* logo stays plain — no box, no shadow, no chip */

/* Inner pages (about/contact/privacy) use `.pv-nav-solid scrolled`: same violet glass as
   the home's scrolled header, so the bar looks identical on every page. */

/* (3) Align the header CTA and the hero status chip */
.pv .pv-nav-inner { justify-content: flex-start; }
.pv .pv-nav-links { margin-left: auto; }
.pv .pv-nav-cta { margin-left: 26px; align-self: center; }
.pv .pv-status { align-self: flex-start; } /* was inline-flex, ensure it hugs the left edge of the copy column */
.pv .pv-hero-copy { display: flex; flex-direction: column; align-items: flex-start; }

/* (4) Centre isotype (official gO, transparent PNG placeholder until the final
   SVG) — white gO sits directly on the aurora, no disc. The LED on each orbiting
   service is handled below. */
.pv .pv-orbit-go {
  width: 34%; height: 34%; display: flex; align-items: center; justify-content: center;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,0.3));
}
.pv .pv-orbit-go img { width: 100%; height: 100%; object-fit: contain; }
.pv .pv-planet { display: inline-flex; align-items: center; gap: 8px; }
.pv .pv-planet::before { display: none; } /* replaced by the LED dot */
.pv .pv-planet-led {
  width: 7px; height: 7px; border-radius: 50%; background: #39d98a; flex: 0 0 auto; position: relative;
}
.pv .pv-planet-led::after {
  content: ""; position: absolute; inset: -2px; border-radius: 50%; background: #39d98a; opacity: 0.5;
  animation: pv-led-breathe 2.4s ease-in-out infinite;
}
.pv .pv-planet-led { animation: pv-led-core 2.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .pv .pv-planet-led, .pv .pv-planet-led::after { animation: none; }
}

/* ---------- Services grid ---------- */
.pv .pv-svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--pv-s3); }
.pv .pv-svc-card {
  background: #fff; border: 1px solid var(--pv-line); border-radius: var(--pv-r); padding: 30px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; position: relative; overflow: hidden;
}
.pv .pv-svc-card::before {
  content: ""; position: absolute; left: 0; top: 0; height: 4px; width: 0; background: var(--pv-aurora); transition: width .25s ease;
}
.pv .pv-svc-card:hover { transform: translateY(-5px); box-shadow: var(--pv-shadow); border-color: transparent; }
.pv .pv-svc-card:hover::before { width: 100%; }
.pv .pv-svc-ic { width: 52px; height: 52px; border-radius: 14px; background: var(--pv-surface-3); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; transition: background .2s ease; }
.pv .pv-svc-ic .pv-b-icon { width: 26px; height: 26px; display: block; background: var(--pv-purple); -webkit-mask: var(--icon) center/contain no-repeat; mask: var(--icon) center/contain no-repeat; transition: background .2s ease; }
.pv .pv-svc-card:hover .pv-svc-ic { background: var(--pv-aurora); }
.pv .pv-svc-card:hover .pv-svc-ic .pv-b-icon { background: #fff; }
.pv .pv-svc-card h3 { font-size: 1.25rem; font-weight: 600; margin-bottom: 10px; }
.pv .pv-svc-card p { font-size: 0.95rem; line-height: 1.55; color: var(--pv-ink-2); }

/* "And more" complementary card */
.pv .pv-svc-more { background: var(--pv-surface-2); display: flex; flex-direction: column; }
/* match the paragraph of the other cards: same size/line-height, no extra gap
   (line-height alone sets the rhythm, exactly like a <p>) */
.pv .pv-svc-more ul { list-style: none; padding: 0; margin: 0; }
.pv .pv-svc-more li { font-weight: 400; color: var(--pv-ink-2); font-size: 0.95rem; line-height: 1.55; }

@media (max-width: 900px) {
  .pv .pv-svc-grid { grid-template-columns: 1fr; }
  .pv .pv-nav-logo img { height: 34px; }
}

/* =====================================================================
   3-UP AUTOPLAY CAROUSEL (shared: case studies + testimonials)
   ===================================================================== */
.pv .pv-snap { position: relative; }
.pv .pv-snap-row {
  display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 6px 2px 16px; scrollbar-width: none;
}
.pv .pv-snap-row::-webkit-scrollbar { display: none; }
.pv .pv-snap-item { scroll-snap-align: start; }
/* 3 columns visible on desktop */
.pv .pv-snap-3 > .pv-snap-item { flex: 0 0 calc((100% - 48px) / 3); }
/* pagination dots */
.pv .pv-snap-dots { display: flex; gap: 10px; justify-content: center; margin-top: 22px; }
.pv .pv-snap-dots button {
  width: 10px; height: 10px; border-radius: 50%; border: none; background: var(--pv-line); cursor: pointer;
  padding: 0; transition: all .2s ease;
}
.pv .pv-snap-dots button.active { background: var(--pv-aurora); width: 28px; border-radius: 999px; }

/* ---------- Case study card ---------- */
.pv .pv-case-card {
  position: relative;
  background: #fff; border: 1px solid var(--pv-line); border-radius: var(--pv-r-lg); overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease; display: flex; flex-direction: column; height: 100%;
}
.pv .pv-case-card:hover { transform: translateY(-5px); box-shadow: var(--pv-shadow); }
.pv .pv-case-img { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.pv .pv-case-img { flex: 1 0 auto; }
.pv .pv-case-card { min-height: 520px; }
@media (min-width: 901px) { .pv .pv-case-card { min-height: 560px; } }
.pv .pv-case-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.pv .pv-case-card:hover .pv-case-img img { transform: scale(1.05); }
.pv .pv-case-cat {
  position: absolute; left: 14px; top: 14px; z-index: 2; padding: 6px 12px; border-radius: 999px;
  background: rgba(14,11,26,0.72); color: #fff; font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; backdrop-filter: blur(6px);
}
/* hover-reveal: full case content slides over the card (same criterion as
   testimonials — reveal on hover, no navigation) */
.pv .pv-case-reveal {
  position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; gap: 12px;
  padding: 24px 26px; background: var(--pv-aurora); color: #fff;
  opacity: 0; transform: translateY(10px); pointer-events: none;
  transition: opacity .3s ease, transform .3s ease; overflow: auto;
}
.pv .pv-case-card:hover .pv-case-reveal,
.pv .pv-case-card:focus-within .pv-case-reveal { opacity: 1; transform: translateY(0); pointer-events: auto; }
.pv .pv-case-reveal-cat { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #d9c9ff; }
/* Story slots: every block hangs from a pipe (left rule) and Desafío / Solución keep a
   fixed height (4 lines), so "Impacto" starts at the same height on every card. */
.pv .pv-case-reveal-cat { min-height: 2.6em; line-height: 1.3; }
.pv .pv-case-reveal-cat strong { font-weight: 700; color: #fff; }
.pv .pv-case-story { margin: 2px 0 0; display: flex; flex-direction: column; gap: 12px; }
.pv .pv-case-story > div { padding-left: 12px; border-left: 2px solid rgba(255,255,255,0.3); }
.pv .pv-case-story dt {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #d9c9ff; margin-bottom: 4px;
}
.pv .pv-case-story dd { margin: 0; font-size: 0.875rem; line-height: 1.45; color: rgba(255,255,255,0.88); }
.pv .pv-case-story-challenge dd, .pv .pv-case-story-solution dd {
  min-height: 6em; /* 4 lines */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden;
}
/* the outcome is what the reader should keep: solid pipe, brighter text */
.pv .pv-case-story > .pv-case-story-impact { border-left-color: #fff; }
.pv .pv-case-story-impact dd { color: #fff; font-weight: 600; }
/* headline figure (40%, 250+, 3 meses): the first thing the eye lands on */
.pv .pv-case-story-impact .pv-case-metric { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.pv .pv-case-metric strong { font-size: 1.9rem; font-weight: 600; line-height: 1; letter-spacing: -0.02em; white-space: nowrap; }
.pv .pv-case-metric span { font-size: 0.82rem; font-weight: 500; line-height: 1.3; color: #d9c9ff; }
/* back side footer: GoCloud isotype | client logo, pinned to the bottom */
.pv .pv-case-brands {
  margin-top: auto; display: flex; align-items: center; gap: 12px;
  padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.2);
}
.pv .pv-case-brands .pv-case-sep { margin: 0; opacity: 0.5; }
.pv .pv-case-go { height: 28px; width: auto; display: block; }
.pv .pv-case-clientlogo { height: 24px; width: auto; max-width: 150px; object-fit: contain; display: block; }
.pv .pv-case-clientname { font-size: 0.95rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; }
/* narrow cards (phones, tablets): challenge -> impact only, so it fits without scrolling */
@media (max-width: 900px) { .pv .pv-case-story-solution { display: none; } }
.pv .pv-tag-light { background: rgba(255,255,255,0.16); color: #fff; }
.pv .pv-case-body { padding: 24px 26px 26px; display: flex; flex-direction: column; gap: 10px; }
/* "CLIENT | project": client bold caps, a light pipe, project in sentence case */
.pv .pv-case-title { font-size: 1.1rem; font-weight: 500; line-height: 1.35; min-height: calc(3 * 1.35em); }
.pv .pv-case-body .pv-case-tags { min-height: 62px; max-height: 62px; overflow: hidden; align-content: flex-start; } /* exactly 2 rows of tags */
@media (min-width: 1025px) and (max-width: 1199px) { .pv .pv-case-title { font-size: 1rem; } } /* narrowest 3-up cards */
@media (max-width: 680px) { .pv .pv-case-title { min-height: calc(4 * 1.35em); } } /* one card per view: room for 4 lines */
.pv .pv-case-title strong { font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--pv-purple); }
.pv .pv-case-sep { margin: 0 0.45em; font-weight: 300; opacity: 0.45; }
.pv .pv-case-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }

/* ---------- Testimonials: use the OFFICIAL .testimonial-card styles from
   custom.css (already loaded globally) so the hover-reveal photo and all
   behavior stay identical to the live site. We only set the section bg and make
   the official card fill the carousel item height. ---------- */
.pv .pv-testimonials-section { background: var(--pv-surface-2); }
.pv .pv-snap-item .testimonial-card { height: 100%; }

@media (max-width: 1024px) { .pv .pv-snap-3 > .pv-snap-item { flex-basis: calc((100% - 24px) / 2); } }
@media (max-width: 680px) { .pv .pv-snap-3 > .pv-snap-item { flex-basis: 86%; } }

/* =====================================================================
   WHY CHOOSE US
   ===================================================================== */
.pv .pv-why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--pv-s3); }
.pv .pv-why-card {
  position: relative; background: #fff; border: 1px solid var(--pv-line); border-radius: var(--pv-r);
  padding: 32px 28px; transition: transform .2s ease, box-shadow .2s ease; overflow: hidden;
}
.pv .pv-why-card::before {
  content: ""; position: absolute; left: 0; top: 0; width: 4px; height: 0; background: var(--pv-aurora); transition: height .3s ease;
}
.pv .pv-why-card:hover { transform: translateY(-5px); box-shadow: var(--pv-shadow); }
.pv .pv-why-card:hover::before { height: 100%; }
.pv .pv-why-ic {
  width: 48px; height: 48px; border-radius: 14px; background: var(--pv-surface-3);
  display: flex; align-items: center; justify-content: center; margin-bottom: 18px; transition: background .2s ease;
}
.pv .pv-why-ic .pv-b-icon {
  width: 26px; height: 26px; display: block; background: var(--pv-purple);
  -webkit-mask: var(--icon) center/contain no-repeat; mask: var(--icon) center/contain no-repeat;
  transition: background .2s ease;
}
.pv .pv-why-card:hover .pv-why-ic { background: var(--pv-aurora); }
.pv .pv-why-card:hover .pv-why-ic .pv-b-icon { background: #fff; }
.pv .pv-why-card h3 { font-size: 1.15rem; font-weight: 600; margin-bottom: 10px; }
.pv .pv-why-card p { font-size: 0.95rem; line-height: 1.55; color: var(--pv-ink-2); }

/* =====================================================================
   TECHNOLOGIES marquee
   ===================================================================== */
.pv .pv-tech-section { background: var(--pv-surface-2); }
.pv .pv-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.pv .pv-marquee-track { display: flex; width: max-content; gap: 20px; animation: pv-marquee 36s linear infinite; }
.pv .pv-marquee:hover .pv-marquee-track { animation-play-state: paused; }
@keyframes pv-marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .pv .pv-marquee-track { animation: none; } }
.pv .pv-marquee-item { flex: 0 0 auto; }
.pv .pv-tech-chip {
  width: 180px; height: 100px; background: #fff; border: 1px solid var(--pv-line); border-radius: var(--pv-r);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.pv .pv-tech-chip img { max-height: 56px; max-width: 130px; width: auto; height: auto; object-fit: contain; }

/* =====================================================================
   ABOUT / NOSOTROS — founders with circular avatars  +  FINAL CTA
   ===================================================================== */
.pv .pv-team { display: flex; flex-wrap: wrap; gap: var(--pv-s5); justify-content: center; margin-top: var(--pv-s4); }
.pv .pv-founder { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
/* circular avatar: square container, image cover-cropped into a perfect circle */
.pv .pv-founder-avatar {
  width: 210px; height: 210px; border-radius: 50%; overflow: hidden;
  background: var(--pv-surface-3); border: 4px solid #fff;
  box-shadow: 0 14px 36px -14px rgba(50,0,218,0.4), 0 0 0 1px var(--pv-line);
  transition: transform .2s ease, box-shadow .2s ease;
}
.pv .pv-founder:hover .pv-founder-avatar { transform: translateY(-5px); box-shadow: var(--pv-shadow); }
.pv .pv-founder-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pv .pv-founder-name { display: block; font-weight: 700; font-size: 1.35rem; }
.pv .pv-founder-role { display: block; font-size: 1.05rem; color: var(--pv-purple); font-weight: 600; margin-top: 4px; }
.pv .pv-about-cta { text-align: center; margin-top: var(--pv-s5); }

/* FINAL CTA — compact card; title + subtitle each on a single line on desktop */
.pv .pv-finalcta {
  position: relative; overflow: hidden; border-radius: var(--pv-r-lg);
  background: var(--pv-aurora); color: #fff; text-align: center;
  padding: clamp(30px, 3.5vw, 44px) clamp(28px, 5vw, 64px);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  max-width: 920px; margin: 0 auto; /* more compact, not full-bleed */
}
.pv .pv-finalcta-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.5;
  background:
    radial-gradient(40vw 40vw at 15% 120%, rgba(153,102,255,0.5), transparent 60%),
    radial-gradient(36vw 36vw at 90% -20%, rgba(102,25,255,0.6), transparent 60%);
}
.pv .pv-finalcta > *:not(.pv-finalcta-bg) { position: relative; z-index: 1; }
/* no max-width so each line fits on one row on desktop; nowrap where it fits */
.pv .pv-finalcta h2 { font-size: clamp(1.4rem, 2.4vw, 2rem); font-weight: 600; line-height: 1.12; }
.pv .pv-finalcta p { font-size: clamp(0.95rem, 1.3vw, 1.05rem); color: rgba(255,255,255,0.86); }
.pv .pv-finalcta .pv-btn { margin-top: 10px; }
@media (min-width: 760px) {
  .pv .pv-finalcta h2, .pv .pv-finalcta p { white-space: nowrap; }
}

@media (max-width: 900px) {
  .pv .pv-why-grid { grid-template-columns: 1fr; }
  .pv .pv-team { gap: var(--pv-s4); }
  .pv .pv-founder-avatar { width: 170px; height: 170px; }
}

/* =====================================================================
   CONTACT PAGE (/contact) — split card: aurora intro + form
   ===================================================================== */
.pv .pv-contact-page { padding-top: calc(var(--pv-s5) + 70px); } /* clear the fixed header */
.pv .pv-contact-card {
  display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 0; border-radius: var(--pv-r-lg); overflow: hidden;
  box-shadow: var(--pv-shadow-lg);
}
.pv .pv-contact-intro {
  background: var(--pv-aurora); color: #fff; padding: clamp(32px, 4vw, 56px);
  display: flex; flex-direction: column; gap: 16px; position: relative;
}
.pv .pv-contact-intro h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 600; line-height: 1.2; }
.pv .pv-contact-intro p { color: rgba(255,255,255,0.85); font-size: 1.05rem; }
.pv .pv-contact-aws { margin-top: auto; padding-top: 24px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.pv .pv-contact-aws-badge { height: 96px; width: auto; }
.pv .pv-contact-go { height: 96px; width: auto; }
.pv .pv-contact-form { background: #fff; padding: clamp(32px, 4vw, 56px); }
.pv .pv-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.pv .pv-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.pv .pv-field label { font-size: 0.88rem; font-weight: 600; color: var(--pv-ink-2); }
.pv .pv-field input, .pv .pv-field textarea {
  font-family: var(--pv-font); font-size: 1rem; padding: 13px 15px; border-radius: 12px;
  border: 1.5px solid var(--pv-line); background: var(--pv-surface); color: var(--pv-ink); transition: border-color .15s ease;
}
.pv .pv-field input:focus, .pv .pv-field textarea:focus { outline: none; border-color: var(--pv-purple); }
.pv .pv-field input.pv-invalid, .pv .pv-field textarea.pv-invalid { border-color: #e23b5a; }
.pv .pv-err { color: #e23b5a; font-size: 0.8rem; min-height: 1em; }
.pv .pv-contact-form .pv-btn-primary { margin-top: 6px; width: 100%; }
.pv .pv-form-status { margin-top: 14px; padding: 12px 16px; border-radius: 12px; font-size: 0.92rem; font-weight: 600; }
.pv .pv-form-status.ok { background: #e7f8ef; color: #157a4a; }
.pv .pv-form-status.err { background: #fdeaee; color: #c32d47; }

@media (max-width: 900px) {
  .pv .pv-contact-card { grid-template-columns: 1fr; }
  .pv .pv-field-row { grid-template-columns: 1fr; gap: 0; }
}

/* =====================================================================
   ABOUT PAGE (/about)
   ===================================================================== */
.pv .pv-about-hero {
  position: relative; overflow: hidden; background: var(--pv-aurora); color: #fff;
  padding: calc(70px + clamp(56px, 8vw, 110px)) 0 clamp(56px, 8vw, 110px); isolation: isolate;
}
.pv .pv-about-hero-bg {
  position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.5;
  background:
    radial-gradient(40vw 40vw at 12% 120%, rgba(153,102,255,0.55), transparent 60%),
    radial-gradient(36vw 36vw at 92% -20%, rgba(102,25,255,0.6), transparent 60%);
}
.pv .pv-about-hero h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 600; line-height: 1.05; margin-top: 16px; max-width: 18ch; }
.pv .pv-about-hero p { margin-top: 20px; font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.6; color: rgba(255,255,255,0.88); max-width: 62ch; }

/* first section clears the fixed header (the aurora hero was removed) */
.pv .pv-about-first { padding-top: calc(var(--pv-s6) + 70px); }

/* alternating text / image rows — text block matches the image height so the
   paragraphs span the same vertical extent as the picture */
.pv .pv-about-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--pv-s5); align-items: center; }
/* explicit column placement so reverse swaps sides cleanly (no overlap) */
.pv .pv-about-row .pv-about-text { grid-column: 1; grid-row: 1; }
.pv .pv-about-row .pv-about-media { grid-column: 2; grid-row: 1; }
.pv .pv-about-row.reverse .pv-about-text { grid-column: 2; }
.pv .pv-about-row.reverse .pv-about-media { grid-column: 1; }
/* min-width:0 lets grid children shrink to their track instead of overflowing */
.pv .pv-about-text, .pv .pv-about-media { min-width: 0; }
.pv .pv-about-text { display: flex; flex-direction: column; justify-content: center; }
.pv .pv-about-text .pv-eyebrow { margin-bottom: 14px; }
.pv .pv-about-text .pv-lead { margin-top: 14px; }
.pv .pv-about-media {
  border-radius: var(--pv-r-lg); overflow: hidden; box-shadow: var(--pv-shadow);
  width: 100%; height: 420px; /* fixed, uniform height so both images match */
}
.pv .pv-about-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* slightly smaller section titles so the copy stays compact */
.pv .pv-about-text .pv-h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); }

/* team section */
.pv .pv-team-section { background: var(--pv-surface-2); }

@media (max-width: 900px) {
  .pv .pv-about-row { grid-template-columns: 1fr; gap: var(--pv-s3); }
  .pv .pv-about-row .pv-about-text,
  .pv .pv-about-row .pv-about-media,
  .pv .pv-about-row.reverse .pv-about-text,
  .pv .pv-about-row.reverse .pv-about-media { grid-column: 1; }
  .pv .pv-about-row .pv-about-text { grid-row: 1; }
  .pv .pv-about-row .pv-about-media { grid-row: 2; }
}



/* =====================================================================
   PROCESS — "El Proceso GO": one continuous timeline, read left -> right.
   Numerals at the same scale as the hero stats. The sequence is paced so the
   eye can follow it: the active phase's LED pulses while the line travels to
   the next one (~2s per leg), then it loops, highlighting only the active
   phase and the leg in progress. JS (inline script in Home.astro) drives the
   states: .is-in (phase revealed), .is-active (LED pulsing), .is-filling
   (leg in progress), .is-done (leg travelled, kept as a faint trail).
   Without JS or with reduced motion: final static state, no pulse.
   ===================================================================== */
.pv .pv-process {
  --gap: var(--pv-s4); --node: 18px; --leg-t: 1.6s; /* = LEG in Home.astro */
  --n-size: 2.2rem; /* = .pv-stat-n */
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap);
}
.pv .pv-step { position: relative; }
.pv .pv-step-n {
  display: block; font-size: var(--n-size); font-weight: 600; line-height: 1;
  color: var(--pv-purple); margin-bottom: 18px;
}

/* node + leg to the next node */
.pv .pv-step-track { position: relative; height: var(--node); margin-bottom: 26px; }
.pv .pv-step-node {
  position: relative; z-index: 1; display: block; width: var(--node); height: var(--node); border-radius: 50%;
  background: var(--pv-surface); border: 2px solid var(--pv-purple);
  box-shadow: 0 0 0 6px var(--pv-surface);
  --led: 102, 25, 255;
}
.pv .pv-step-node::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--pv-aurora); }
.pv .pv-step-node::before { /* pulse ring, only while the phase is active */
  content: ""; position: absolute; inset: -2px; border-radius: 50%; background: rgb(var(--led)); opacity: 0;
}
.pv .pv-step.is-active .pv-step-node::before { animation: pv-step-pulse 1.6s ease-out infinite; }
@keyframes pv-step-pulse {
  0%        { transform: scale(1); opacity: 0.5; }
  70%, 100% { transform: scale(2.6); opacity: 0; }
}
.pv .pv-step-seg {
  position: absolute; top: calc(var(--node) / 2 - 1px); left: calc(var(--node) / 2);
  width: calc(100% + var(--gap)); height: 2px; background: var(--pv-line); overflow: hidden;
}
.pv .pv-step-seg > span { position: absolute; inset: 0; background: var(--pv-aurora); transform-origin: left; }

/* last phase: green LED (live operation, as in the hero) + dashed tail that fades out */
.pv .pv-step:last-child .pv-step-node { border-color: #39d98a; --led: 57, 217, 138; }
.pv .pv-step:last-child .pv-step-node::after { background: #39d98a; }
.pv .pv-step:last-child .pv-step-seg {
  width: 100%; background: linear-gradient(90deg, var(--pv-line) 0 55%, transparent 55%) 0 0 / 10px 2px repeat-x;
  -webkit-mask-image: linear-gradient(90deg, #000 30%, transparent); mask-image: linear-gradient(90deg, #000 30%, transparent);
}
.pv .pv-step:last-child .pv-step-seg > span { display: none; }

.pv .pv-step-name { font-size: 1.25rem; font-weight: 600; margin-bottom: 14px; }
.pv .pv-step-points { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.pv .pv-step-points li { position: relative; padding-left: 22px; font-size: 0.95rem; line-height: 1.55; color: var(--pv-ink-2); }
.pv .pv-step-points li::before {
  content: ""; position: absolute; left: 0; top: 0.72em; width: 12px; height: 2px; border-radius: 2px;
  background: var(--pv-purple); opacity: 0.55;
}

/* ---- sequence states (only when the script armed it: [data-reveal]) ---- */
/* phase reveal (first pass only; afterwards .is-in stays) */
.pv .pv-process[data-reveal] .pv-step-n,
.pv .pv-process[data-reveal] .pv-step-name,
.pv .pv-process[data-reveal] .pv-step-points li { transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.pv .pv-process[data-reveal] .pv-step-node { transition: transform .5s cubic-bezier(.3,1.6,.5,1), opacity .3s ease; }
.pv .pv-process[data-reveal] .pv-step:not(.is-in) .pv-step-node { opacity: 0; transform: scale(.3); }
.pv .pv-process[data-reveal] .pv-step:not(.is-in) .pv-step-n { opacity: 0; transform: translateY(14px); }
.pv .pv-process[data-reveal] .pv-step:not(.is-in) .pv-step-name,
.pv .pv-process[data-reveal] .pv-step:not(.is-in) .pv-step-points li { opacity: 0; transform: translateY(10px); }
.pv .pv-process[data-reveal] .pv-step.is-in .pv-step-n { transition-delay: .05s; }
.pv .pv-process[data-reveal] .pv-step.is-in .pv-step-name { transition-delay: .15s; }
.pv .pv-process[data-reveal] .pv-step.is-in .pv-step-points li { transition-delay: calc(.25s + var(--j) * .1s); }
/* legs: idle (empty) -> filling (travels in --leg-t) -> done (faint trail) */
.pv .pv-process[data-reveal] .pv-step-seg > span { transform: scaleX(0); transition: opacity .5s ease; }
.pv .pv-process[data-reveal] .pv-step.is-filling .pv-step-seg > span {
  transform: scaleX(1); transition: transform var(--leg-t) cubic-bezier(.45, .05, .55, .95);
}
.pv .pv-process[data-reveal] .pv-step.is-done .pv-step-seg > span { transform: scaleX(1); opacity: 0.3; }
/* loop restart: trails fade out, then reset invisibly */
.pv .pv-process.is-clearing .pv-step-seg > span { opacity: 0; transition: opacity .4s ease; }

@media (hover: hover) {
  .pv .pv-step-n { transition: transform .3s ease; }
  .pv .pv-step:hover .pv-step-node { box-shadow: 0 0 0 6px var(--pv-surface), 0 0 0 10px rgba(102, 25, 255, 0.12); }
}

/* mobile: vertical timeline, rail on the left */
@media (max-width: 900px) {
  .pv .pv-process { grid-template-columns: 1fr; }
  .pv .pv-step { padding-left: 42px; }
  .pv .pv-step-n { margin-bottom: 14px; }
  .pv .pv-step-track { position: absolute; left: 0; top: 0; bottom: 0; height: auto; margin: 0; width: var(--node); }
  .pv .pv-step-node { margin-top: calc((var(--n-size) - var(--node)) / 2); }
  .pv .pv-step-seg { left: calc(var(--node) / 2 - 1px); top: calc(var(--n-size) / 2); width: 2px; height: calc(100% + var(--gap)); }
  .pv .pv-step-seg > span { transform-origin: top; }
  .pv .pv-process[data-reveal] .pv-step-seg > span { transform: scaleY(0); }
  .pv .pv-process[data-reveal] .pv-step.is-filling .pv-step-seg > span,
  .pv .pv-process[data-reveal] .pv-step.is-done .pv-step-seg > span { transform: scaleY(1); }
  .pv .pv-step:last-child .pv-step-seg {
    height: 60%; width: 2px;
    background: linear-gradient(180deg, var(--pv-line) 0 55%, transparent 55%) 0 0 / 2px 10px repeat-y;
    -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent); mask-image: linear-gradient(180deg, #000 30%, transparent);
  }
}


/* =====================================================================
   ENTRANCE MOTION — opt-in via html.pv-motion (set at the top of Home.astro
   only with JS + IntersectionObserver + no reduced-motion preference).
   One vocabulary for the whole page: fade + 18px rise, ease-out, once.
   Uses `animation ... backwards` (not transitions / forwards fill) so after
   the entrance every element is back to its own styles and hover effects.
   ===================================================================== */
@keyframes pv-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes pv-settle { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }

.pv-motion .pv [data-reveal]:not(.is-in),
.pv-motion .pv [data-reveal-group]:not(.is-in) > * { opacity: 0; }
.pv-motion .pv [data-reveal].is-in,
.pv-motion .pv [data-reveal-group].is-in > * {
  animation: pv-rise .8s cubic-bezier(.2, .7, .2, 1) backwards; animation-delay: var(--rd, 0s);
}
/* a block that follows a section head waits a beat for it */
.pv-motion .pv .pv-section-head + [data-reveal].is-in { --rd: .12s; }

/* hero: plays on load (it is above the fold), copy first, orbit settles in */
.pv-motion .pv .pv-hero-copy > * { animation: pv-rise .9s cubic-bezier(.2, .7, .2, 1) backwards; }
.pv-motion .pv .pv-hero-copy > :nth-child(1) { animation-delay: .05s; }
.pv-motion .pv .pv-hero-copy > :nth-child(2) { animation-delay: .15s; }
.pv-motion .pv .pv-hero-copy > :nth-child(3) { animation-delay: .27s; }
.pv-motion .pv .pv-hero-copy > :nth-child(4) { animation-delay: .39s; }
.pv-motion .pv .pv-hero-copy > :nth-child(5) { animation-delay: .51s; }
.pv-motion .pv .pv-hero-visual { animation: pv-settle 1.4s cubic-bezier(.2, .7, .2, 1) .25s backwards; }

/* =====================================================================
   MOBILE / TABLET TUNING — tighter section rhythm, CTAs side by side,
   hero stats in one aligned row, footer badge next to "Compañía".
   ===================================================================== */
@media (max-width: 900px) {
  .pv .pv-section { padding-block: 72px; }
  .pv .pv-footer { padding-top: 64px; }
}
@media (max-width: 680px) {
  /* rhythm: 56px between sections (was 96 + 96), shorter head-to-content gap */
  .pv .pv-section { padding-block: 56px; }
  .pv .pv-section-head { margin-bottom: 28px; }
  .pv .pv-hero { padding-bottom: 56px; }

  /* two CTAs on one line (hero + Standard Platform); they only wrap below ~340px */
  .pv .pv-hero-cta, .pv .pv-sp-head .pv-sp-cta { flex-wrap: wrap; gap: 10px; margin-top: 28px; width: 100%; }
  .pv .pv-hero-cta .pv-btn, .pv .pv-sp-head .pv-sp-cta .pv-btn {
    flex: 1 1 auto; justify-content: center; text-align: center; white-space: nowrap;
    padding-inline: 18px; font-size: 0.95rem;
  }

  /* hero stats: +100 | +5 | AWS badge, evenly spread and vertically centred */
  .pv .pv-hero-stats {
    display: grid; grid-template-columns: auto auto auto; justify-content: space-between;
    align-items: center; gap: 16px; width: 100%; margin-top: 36px;
  }
  .pv .pv-aws-badge { margin-left: 0; }
  .pv .pv-aws-badge img { height: 78px; }

  /* footer: brand on top, then Servicios | Plataforma and Compañía | AWS badge */
  .pv .pv-footer { padding-top: 48px; }
  .pv .pv-footer-inner { grid-template-columns: 1fr 1fr; gap: 32px 24px; padding-bottom: 32px; }
  .pv .pv-footer-brand { grid-column: 1 / -1; }
  .pv .pv-footer-cols { display: contents; }
  .pv .pv-footer-aws { justify-self: start; align-self: center; }
  .pv .pv-footer-aws img { height: 96px; }
  .pv .pv-footer-bottom { flex-direction: column; align-items: flex-start; gap: 6px; }
}
@media (max-width: 380px) {
  /* small phones (360px): keep both CTAs on one line */
  .pv .pv-hero-cta .pv-btn, .pv .pv-sp-head .pv-sp-cta .pv-btn { padding-inline: 14px; font-size: 0.9rem; }
}

/* =====================================================================
   MOBILE MENU (SiteNav) — <= 900px the links live in a drop-down panel
   ===================================================================== */
.pv .pv-nav-toggle { display: none; }
@media (max-width: 900px) {
  .pv .pv-nav-toggle {
    display: inline-flex; align-items: center; justify-content: center; margin-left: auto;
    width: 44px; height: 44px; padding: 0; border: 0; border-radius: 12px; background: transparent; color: #fff; cursor: pointer;
  }
  .pv .pv-nav-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
  /* hamburger -> X */
  .pv .pv-nav-burger, .pv .pv-nav-burger::before, .pv .pv-nav-burger::after {
    display: block; width: 22px; height: 2px; border-radius: 2px; background: currentColor;
    transition: transform .25s ease, opacity .2s ease;
  }
  .pv .pv-nav-burger { position: relative; }
  .pv .pv-nav-burger::before, .pv .pv-nav-burger::after { content: ""; position: absolute; left: 0; }
  .pv .pv-nav-burger::before { top: -7px; }
  .pv .pv-nav-burger::after { top: 7px; }
  .pv .pv-nav.menu-open .pv-nav-burger { background: transparent; }
  .pv .pv-nav.menu-open .pv-nav-burger::before { transform: translateY(7px) rotate(45deg); }
  .pv .pv-nav.menu-open .pv-nav-burger::after { transform: translateY(-7px) rotate(-45deg); }

  /* the bar turns solid while the menu is open (also at the top of the home hero) */
  .pv .pv-nav.menu-open { background: #4a0fcc; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .pv .pv-nav.menu-open .pv-nav-links {
    display: flex; flex-direction: column; gap: 0;
    position: absolute; top: 100%; left: 0; right: 0; margin: 0;
    padding: 6px clamp(20px, 5vw, 48px) 22px;
    background: #4a0fcc; border-top: 1px solid rgba(255,255,255,0.14);
    box-shadow: 0 24px 40px -20px rgba(14, 11, 26, 0.6);
    max-height: calc(100vh - 64px); overflow-y: auto;
  }
  .pv .pv-nav.menu-open .pv-nav-links > a {
    padding: 14px 0; font-size: 1.05rem; color: #fff; border-bottom: 1px solid rgba(255,255,255,0.1);
  }
  .pv .pv-nav.menu-open .pv-nav-links > a::after { display: none; }
  .pv .pv-nav.menu-open .pv-nav-lang { padding: 18px 0 0; gap: 12px; }
  .pv .pv-nav.menu-open .pv-nav-lang::before { display: none; }
  .pv .pv-nav.menu-open .pv-nav-lang a { font-size: 1rem; }
}

/* =====================================================================
   LEGAL PAGES (privacy) — readable single column under the solid header
   ===================================================================== */
.pv .pv-legal { padding-top: calc(80px + 70px); }
.pv .pv-legal-head { max-width: 760px; margin: 0 auto 36px; padding-bottom: 28px; border-bottom: 1px solid var(--pv-line); }
.pv .pv-legal-head .pv-eyebrow { margin-bottom: 14px; }
.pv .pv-legal-updated { margin-top: 12px; font-size: 0.9rem; color: var(--pv-muted); }
.pv .pv-legal-body { max-width: 760px; margin: 0 auto; color: var(--pv-ink-2); font-size: 1rem; line-height: 1.75; }
.pv .pv-legal-body > * + * { margin-top: 14px; }
.pv .pv-legal-body h2 { margin-top: 40px; font-size: 1.3rem; font-weight: 600; line-height: 1.3; color: var(--pv-ink); }
.pv .pv-legal-body h3 { margin-top: 28px; font-size: 1.1rem; font-weight: 600; color: var(--pv-ink); }
.pv .pv-legal-body ul { padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.pv .pv-legal-body li { position: relative; padding-left: 22px; }
.pv .pv-legal-body li::before { /* same dash marker as the GO Process bullets */
  content: ""; position: absolute; left: 0; top: 0.85em; width: 12px; height: 2px; border-radius: 2px; background: var(--pv-purple); opacity: 0.55;
}
.pv .pv-legal-body strong { color: var(--pv-ink); font-weight: 600; }
.pv .pv-legal-body a { color: var(--pv-purple); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px) { .pv .pv-legal { padding-top: calc(72px + 60px); } }
@media (max-width: 680px) {
  .pv .pv-legal { padding-top: calc(56px + 60px); }
  .pv .pv-legal-head { margin-bottom: 28px; padding-bottom: 22px; }
  .pv .pv-legal-body h2 { margin-top: 32px; font-size: 1.15rem; }
}

/* =====================================================================
   NAV DROP-DOWN GROUP (SiteNav) — desktop: white card under the label,
   opens on hover, click or keyboard. Mobile panel: items listed inline.
   ===================================================================== */
.pv .pv-nav-group { position: relative; display: flex; align-items: center; }
.pv .pv-nav-group-btn {
  display: inline-flex; align-items: center; gap: 7px; padding: 0; border: 0; background: none; cursor: pointer;
  color: rgba(255,255,255,0.78); font: inherit; font-size: 0.92rem; font-weight: 600; transition: color .15s ease;
}
.pv .pv-nav-group-btn:hover, .pv .pv-nav-group.open .pv-nav-group-btn { color: #fff; }
.pv .pv-nav-group-btn:focus-visible { outline: 2px solid #fff; outline-offset: 4px; border-radius: 4px; }
.pv .pv-nav-chev {
  width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform .2s ease;
}
.pv .pv-nav-group:hover .pv-nav-chev, .pv .pv-nav-group.open .pv-nav-chev { transform: translateY(1px) rotate(-135deg); }
.pv .pv-nav-sub {
  position: absolute; top: calc(100% + 14px); left: 50%; min-width: 220px; padding: 8px;
  display: flex; flex-direction: column; gap: 2px;
  background: #fff; border-radius: 14px; box-shadow: 0 18px 44px -14px rgba(21, 18, 31, 0.35);
  opacity: 0; visibility: hidden; transform: translate(-50%, 6px); transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.pv .pv-nav-sub::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; } /* hover bridge */
.pv .pv-nav-group:hover .pv-nav-sub, .pv .pv-nav-group.open .pv-nav-sub, .pv .pv-nav-group:focus-within .pv-nav-sub {
  opacity: 1; visibility: visible; transform: translate(-50%, 0);
}
.pv .pv-nav-links .pv-nav-sub a {
  color: var(--pv-ink); font-size: 0.92rem; font-weight: 600; padding: 10px 14px; border-radius: 10px; white-space: nowrap;
}
.pv .pv-nav-links .pv-nav-sub a::after { display: none; }
.pv .pv-nav-links .pv-nav-sub a:hover { background: var(--pv-surface-3); color: var(--pv-purple); }

@media (max-width: 900px) {
  /* in the mobile panel the group is just a label with its links underneath */
  .pv .pv-nav.menu-open .pv-nav-group { display: block; border-bottom: 1px solid rgba(255,255,255,0.1); padding: 14px 0 8px; }
  .pv .pv-nav.menu-open .pv-nav-group-btn { color: #fff; font-size: 1.05rem; cursor: default; pointer-events: none; }
  .pv .pv-nav.menu-open .pv-nav-chev { display: none; }
  .pv .pv-nav.menu-open .pv-nav-sub {
    position: static; transform: none; opacity: 1; visibility: visible; min-width: 0;
    background: none; box-shadow: none; border-radius: 0; padding: 6px 0 0 16px; gap: 0;
    border-left: 2px solid rgba(255,255,255,0.25); margin: 8px 0 4px 2px;
  }
  .pv .pv-nav.menu-open .pv-nav-sub::before { display: none; }
  .pv .pv-nav.menu-open .pv-nav-links .pv-nav-sub a { color: rgba(255,255,255,0.86); font-size: 1rem; font-weight: 500; padding: 9px 0; border: 0; }
  .pv .pv-nav.menu-open .pv-nav-links .pv-nav-sub a:hover { background: none; color: #fff; }
}

/* home rhythm after moving "Por qué GoCloud" next to the GO Process: keep alternating backgrounds */
.pv .pv-why-section { background: var(--pv-surface-2); }
.pv .pv-tech-section { background: var(--pv-surface); }

/* =====================================================================
   NAV GLASS — one violet glass for the bar, the "Sobre Go" dropdown and
   the mobile panel (same tint + blur as the scrolled bar, like the
   orbiting service chips over the hero).
   The bar's blur lives on ::before: a backdrop-filter on the <header>
   itself would cap the blur of anything nested inside it (the dropdown).
   ===================================================================== */
.pv .pv-nav::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: transparent; transition: background .25s ease;
}
.pv .pv-nav.scrolled { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.pv .pv-nav.scrolled::before {
  background: rgba(90, 19, 230, 0.6);
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
}

/* desktop dropdown: same glass as the bar (over the hero it melts into the violet) */
.pv .pv-nav-sub {
  background: rgba(90, 19, 230, 0.6);
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 18px 40px -18px rgba(50, 0, 218, 0.55);
}
.pv .pv-nav-links .pv-nav-sub a { color: rgba(255, 255, 255, 0.86); }
.pv .pv-nav-links .pv-nav-sub a:hover,
.pv .pv-nav-links .pv-nav-sub a:focus-visible { background: rgba(255, 255, 255, 0.12); color: #fff; outline: none; }

@media (max-width: 900px) {
  /* bar + floating panel share one glass while the menu is open */
  .pv .pv-nav.menu-open { background: transparent; }
  .pv .pv-nav.menu-open::before {
    background: rgba(74, 15, 204, 0.88);
    -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4);
  }
  .pv .pv-nav.menu-open .pv-nav-links {
    top: calc(100% + 8px); left: 12px; right: 12px;
    padding: 6px 22px 20px;
    background: rgba(74, 15, 204, 0.88);
    -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4);
    border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 20px;
    box-shadow: 0 28px 56px -22px rgba(30, 6, 110, 0.75);
    max-height: calc(100vh - 88px);
  }
  /* the sub-list keeps the inline mobile look (no glass card inside the card) */
  .pv .pv-nav.menu-open .pv-nav-sub {
    background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none;
    border: 0; border-left: 2px solid rgba(255,255,255,0.25); border-radius: 0;
  }
  .pv .pv-nav.menu-open .pv-nav-links .pv-nav-sub a:hover { background: none; }
}

/* =====================================================================
   LED optical alignment + orbit "spin" on click
   Elza's caps sit ~0.11em above the centre of a line-height:1 box, so the
   label is nudged down by that much (padding) and the LED back up: caps and
   LED now share the chip's exact centre.
   ===================================================================== */
.pv .pv-status { padding-top: calc(9px + 0.11em); padding-bottom: calc(9px - 0.11em); }
.pv .pv-status .pv-led { top: -0.11em; }
.pv .pv-planet { padding-top: calc(9px + 0.11em); padding-bottom: calc(9px - 0.11em); }
.pv .pv-planet .pv-planet-led { top: -0.11em; }

/* grab & fling a single chip (JS drives its playbackRate/currentTime). pan-y keeps
   vertical page scrolling on touch; sideways drags move the chip. */
.pv .pv-orbit-A { user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.pv .pv-orbit-A .pv-planet { cursor: grab; touch-action: pan-y; }
.pv .pv-orbit-A .pv-arm.is-grabbing .pv-planet { cursor: grabbing; }
.pv .pv-orbit-A img { -webkit-user-drag: none; pointer-events: none; }
.pv .pv-orbit-A .pv-arm.is-live:hover,
.pv .pv-orbit-A .pv-arm.is-live:hover .pv-planet { animation-play-state: running; }