/* =========================================================
   FUENTES
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Antonio:wght@100..700&display=swap');

a {
    text-decoration: none;
}

/* =========================================================
   VARIABLES Y BASE
   ========================================================= */
.landing {
  --ink: #FFFFFF;
  --white: #FFFFFF;
  --grid: rgba(0,0,0,.06);
  --vignette: rgba(255,255,255,0);
  --grad-a: rgba(162, 78, 197, .20);
  --grad-b: rgba(23, 171, 160, .18);
  --text-hi: #0E1412;
  --text-med:#3A4440;
  --cta-bg:#0E1412;
  --cta-fg:#FFFFFF;
  --cta-bg-h:#1A2522;
  --container: 1100px;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  color: var(--text-hi);
  background: var(--ink);
}
.landing * { box-sizing: border-box; }
.landing .container { width:min(var(--container), 90vw); margin-inline:auto; }

/* =========================================================
   CANVAS FIJO DE FONDO (permanece en S0 y S1)
   ========================================================= */
.hero-fixed-bg{
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.hero-fixed-bg::before{
  content:"";
  position:absolute; inset:0;
  background: var(--ink);
}
.hero-fixed-bg .bg-white{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #fff 100%);
  opacity: 0;
  pointer-events:none;
}
.hero-fixed-bg .edge-glow{
  position:absolute; inset:-10% -20% -10% 40%;
  background: radial-gradient(55% 60% at 92% 50%, rgba(101, 255, 188, .20), rgba(101, 255, 188, .08) 40%, transparent 70%);
  filter: blur(60px);
  mix-blend-mode:multiply;
  opacity:.14;
  pointer-events:none;
}
.hero-fixed-bg .hero-wind{
  --x1: 28%; --y1: 12%;
  --x2: 78%; --y2: 88%;
  position:absolute; inset:-16%;
  background:
    radial-gradient(55% 55% at var(--x1) var(--y1), var(--grad-a), transparent 60%),
    radial-gradient(52% 52% at var(--x2) var(--y2), var(--grad-b), transparent 64%);
  filter: blur(90px) saturate(1.0);
  mix-blend-mode:multiply;
  opacity:.18;
  pointer-events:none;
}
.hero-fixed-bg .hero-grid{
  position:absolute; inset:0;
  background: linear-gradient(to right, var(--grid) 1px, transparent 1px) 0 0/140px 100%;
  opacity:.10;
  pointer-events:none;
}
.hero-fixed-bg .hero-vignette{
  position:absolute; inset:0;
  background: radial-gradient(120% 120% at 50% 48%, transparent 58%, var(--vignette) 100%);
  pointer-events:none;
  opacity:0;
}
.scroll-fader{
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,.85) 50%, #fff 100%);
}

/* ===== Topbar provisional ===== */
.provbar{
  position: fixed; inset: 0 0 auto 0; height: 72px;
  background: #f6f7f7;
  border-bottom: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 -2px 0 #2b2835 inset, 0 10px 22px rgba(0,0,0,.04);
  z-index: 10;
}
.provbar__wrap{
  width:min(1600px, 90vw);
  height:100%; margin-inline:auto; padding: 0 8px;
  display:flex; align-items:center; gap:16px;
}
.provbar__brand img{ height:38px; width:auto; display:block; }

.provnav{ flex:1 1 auto; }
.provnav__list{
  display:flex; align-items:center; justify-content:center; gap: clamp(22px, 4vw, 44px);
  list-style:none; margin:0; padding:0;
}
.provnav__list a{
  display:inline-block; padding:8px 2px;
  font-weight:600; text-decoration:none; color:#0E1412;
}
.provnav__list a:hover{ opacity:.7; }

/* CTA derecha (reutiliza tu .btn-pill) */
.provbar__cta{
  background:#111; color:#fff; 
  display:inline-flex; align-items:center;
  border-radius:999px; border:1px solid rgba(0,0,0,.12);
}

/* Hamburguesa (móvil) */
.provbar__toggle{
  display:none; width:42px; height:42px; border-radius:8px; border:1px solid rgba(0,0,0,.12);
  background:#fff; cursor:pointer;
}
.provbar__burger{
  position:relative; display:block; width:18px; height:2px; margin-inline:auto; background:#111;
}
.provbar__burger::before,
.provbar__burger::after{
  content:""; position:absolute; left:0; right:0; height:2px; background:#111;
}
.provbar__burger::before{ top:-6px; } .provbar__burger::after{ top:6px; }

/* Responsive */
@media (max-width: 980px){
  .provbar__toggle{ display:block; }
  .provnav{
    position: fixed; top:72px; left:0; right:0;
    max-height: 0; overflow:hidden; background:#f6f7f7;
    border-bottom: 1px solid rgba(0,0,0,.08);
    transition: max-height .25s ease;
  }
  .provnav.is-open{ max-height: 60vh; }
  .provnav__list{ flex-direction:column; align-items:stretch; gap:6px; padding:10px 14px; }
  .provnav__list a{ padding:12px 6px; }
}

/* Pequeña reducción visual al hacer scroll (opcional) */
.provbar.is-scrolled{ box-shadow: 0 -2px 0 #2b2835 inset, 0 6px 16px rgba(0,0,0,.06); }

/* =========================================================
   NAV GLOBAL (fija izquierda)
   ========================================================= */
.phase-nav--global{
  position: fixed;
  left: 22px; top: 50%;
  transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 12px;
  z-index: 6;
}
.phase-nav--global button{
  width: 88px; height: 36px; padding: 0 14px;
  display: flex; align-items: center; justify-content: flex-start;
  border-radius: 18px; border: 1px solid rgba(0,0,0,.12);
  background: rgba(0,0,0,.04); color: #1a1a1a; font-weight: 600;
  backdrop-filter: blur(8px); cursor: pointer; transition: .2s ease;
  font-family: "Inter", sans-serif;
}
.phase-nav--global button:hover{ background: rgba(0,0,0,.06); transform: translateX(2px); }
.phase-nav--global button.is-active{ background: #111; color:#fff; border-color:#111; }
.phase-nav--global button span{ font-size: 12px; letter-spacing: .02em; }
@media (max-width: 900px){
  .phase-nav--global{ left: 10px; }
  .phase-nav--global button{ width: 64px; }
}
.admin-bar .phase-nav--global{ top: calc(50% + 16px); }

/* =========================================================
   S0 — HERO
   ========================================================= */
.hero--fund{
  position: relative;
  min-height: 100vh;
  display:flex; align-items:center; justify-content:center;
  text-align:center; color: var(--text-hi);
  z-index: 2;
}
.hero--fund .hero-inner{
  width:min(980px, 92vw); padding:0 20px;
}
.hero--fund .eyebrow{
  display:inline-block; padding:.44rem .95rem; margin:0 auto 22px;
  font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:#1b1b1b;
  border:1px solid rgba(0,0,0,.10); border-radius:999px;
  background:rgba(0,0,0,.04);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65); backdrop-filter: blur(4px);
  font-family: "Inter", sans-serif;
}
.hero--fund .hero-title,
.ideas-title,
.shape-title,
.final-title,
#s2 .build-title{
  font-family: "Antonio";
}
.hero--fund .hero-title{
  margin:0 0 .42em; font-weight:700;
  font-size: clamp(56px, 10vw, 100px); letter-spacing:-.015em;
}
.hero--fund .hero-title span{
  display:inline-block;
  background: linear-gradient(90deg, #F49CEB 0%, #B184FF 36%, #8CD6FF 72%, #D1D5D8 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow: none;
}
.hero--fund .hero-sub{
  max-width: 860px; margin: 0 auto 32px; color: var(--text-med);
  font-size: clamp(16px, 1.7vw, 20px); line-height: 1.62;
  font-family: "Inter", sans-serif;
}
.btn-pill{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  border-radius:999px; padding: 4px 40px;
  color:var(--cta-fg); background:var(--cta-bg);
  border:1px solid rgba(0,0,0,.12);
  box-shadow: 0 12px 40px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.35);
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
  font-family: "Inter", sans-serif;
}
.btn-pill:hover{
  transform:translateY(-2px); background:var(--cta-bg-h);
  box-shadow:0 16px 60px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.45);
}
.scroll-hint{ margin-top:28px; font-size:12px; opacity:.6; position: absolute !important; bottom: 20px; left: 50%; }
@media (max-width: 900px){
  .hero--fund .hero-title{ font-size: clamp(42px, 11vw, 92px); }
}

/* =========================================================
   S1 — PROCESO
   ========================================================= */
.mode--s1 .hero-fixed-bg .edge-glow{ opacity:.08 !important; }
.mode--s1 .hero-fixed-bg .hero-wind{ opacity:.12 !important; filter: blur(70px) saturate(1); }
.mode--s1 .hero-fixed-bg .hero-grid{ opacity:.06 !important; }
.mode--s1 .hero-fixed-bg .hero-vignette{ opacity:0 !important; }
.mode--s1 .scene--ideas .ideas-sub,
.mode--s1 .scene--ideas .shape-sub,
.mode--s1 .scene--ideas .final-sub{ color:#2A2A2A; }
.mode--s1 .phase-nav--global button{
  background: rgba(0,0,0,.04);
  color: #1a1a1a;
  border-color: rgba(0,0,0,.12);
}
.mode--s1 .phase-nav--global button.is-active{ background:#111; color:#fff; border-color:#111; }
.core-copy, .shape-copy, .final-head{ position: relative; z-index: 3; }
.shape-board.ghost { z-index: 1; }
.shape-board.back  { z-index: 1; }
.shape-board.main  { z-index: 2; }
.scene--ideas{
  position: relative;
  min-height: 100vh;
  z-index: 2;
  overflow: hidden;
  color: var(--text-hi);
}
.s1-track{
  position: relative;
  width: 100%;
  min-height: 100vh;
}
.s1-panel{
  position: relative;
  min-height: 100vh;
  display: grid;
  grid-template-rows: 1fr auto auto 1fr;
  align-items: center;
  padding: clamp(48px, 6vh, 80px) 0;
}

/* =========================
   S1 CORE
   ========================= */
.s1-core{
  position: relative;
  display: grid;
  place-items: center;
}
.s1-core .shape-stage{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(1100px, 88vw);
  height: min(70vh, 720px);
  margin: 0;
  z-index: 2;
  pointer-events: none;
}
.s1-core .core-copy{
  position: relative;
  z-index: 3;
  margin: 0;
  text-align: center;
  width: min(var(--container), 90vw);
}
.s1-core .ideas-cloud{ z-index: 1; }
.s1-core .ideas-title,
.s1-core .shape-title{ margin-top: 0; }
.core-copy{
  grid-row: 2;
  text-align: center;
  width:min(var(--container), 90vw);
  margin-inline:auto;
}
.copy-block{
  max-width: 900px; margin: 0 auto;
}
.ideas-title{
  margin:0 0 .35em; font-weight:700;
  font-size: clamp(40px, 7.2vw, 96px); letter-spacing:-.01em;
}
.ideas-title span{ display:inline-block; color: #1f1f1f; }
.ideas-sub{
  max-width: 900px; margin: 0 auto; color:#2A2A2A;
  font-size:clamp(16px,1.5vw,20px); line-height:1.6;
  font-family: "Inter", sans-serif;
}
.shape-title{
  margin:0 0 .25em; font-weight:700;
  font-size: clamp(36px, 6.6vw, 82px);
  letter-spacing:-.01em;
}
.shape-title span{ display:inline-block; color: #1f1f1f; }
.shape-sub{
  max-width: 900px; margin: 0 auto; color:#3A4440;
  font-size:clamp(16px,1.5vw,20px); line-height:1.6;
  font-family: "Inter", sans-serif;
}

/* Nube de ideas */
.ideas-cloud{
  position:absolute; inset:0; z-index:1; pointer-events:none;
}
.idea{
  position:absolute; border-radius:12px;
  background: rgba(255,255,255,.85);
  border:1px solid rgba(0,0,0,.08);
  box-shadow: 0 12px 40px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.7);
  backdrop-filter: blur(6px);
  opacity:.25; transform: translate3d(0,0,0) scale(1);
}
.box-img{ overflow:hidden; background:rgba(255,255,255,.9); }
.box-img .media{
  width:100%; height:100%; object-fit:cover; display:block;
  transform: translateZ(0); will-change: transform;
}
.box-stroke{ background:transparent; border:1px solid rgba(0,0,0,.25); box-shadow:none; }
.squ{ aspect-ratio: 1/1; }
.tall{ aspect-ratio: 1/1.8; }
.i1{ width:520px; height:150px; left:210px; top: 90px; }
.i2{ width: 52px; height:320px; right:220px; top:120px; }
.i3{ width:340px; height:110px; left:120px; bottom:120px; }
.i4{ width:420px; height:120px; left:50%; transform:translateX(-50%); bottom:110px; }
.i5{ width:280px; height:280px; right:80px; bottom:90px; background: rgba(255,255,255,.75); }
.i6{ width:220px; height:170px; left:-40px; top:-40px; }
.i7{ width:180px; height: 60px; left:120px; bottom:40px; }
.i8{ width:340px; height:340px; right:-60px; bottom:-80px; background: rgba(255,255,255,.8); }
@media (max-width: 980px){
  .i1{ width:72vw; left:14vw; top:8vh; height:18vh; }
  .i2{ right:10vw; height:26vh; }
  .i3{ left:6vw; bottom:18vh; width:56vw; }
  .i4{ width:70vw; bottom:14vh; left:50%; transform:translateX(-50%); }
  .i5{ right:6vw; bottom:10vh; width:42vw; height:42vw; }
  .i6{ display:none; }
  .i7{ left:8vw; bottom:6vh; width:40vw; }
  .i8{ right:-12vw; bottom:-14vh; width:58vw; height:58vw; }
}

/* ===== Escenario/giro tarjeta (compartido) ===== */
.shape-stage{
  grid-row: 1 / span 1;
  position: relative;
  width: min(1100px, 88vw);
  height: min(70vh, 720px);
  margin-inline: auto;
  perspective: 1200px;
}
.line-guide{
  position: absolute; left: 50%; top: 6%; transform: translateX(-50%);
  width: clamp(8px, 0.9vw, 12px);
  height: 88%;
  border-radius: 8px;
  background: rgba(0,0,0,0.08);
  box-shadow: 0 18px 46px rgba(0,0,0,.04), inset 0 1px 0 rgba(255,255,255,.7);
  pointer-events: none;
  opacity: 0;
  z-index: 2;
}
.shape-board{
  position:absolute; inset:0;
  border-radius: 14px;
  will-change: transform, opacity;
  background: transparent;
}
.shape-board.back{
  transform: translate3d(-24px, 18px, -60px) scale(.98);
  opacity:.7;
}
.shape-board.main{
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
}
.guides{ position:absolute; inset:10px; border-radius:12px; overflow:hidden; }
.guides--cols::before{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(to right,
      rgba(0,0,0,.06) 1px, transparent 1px,
      transparent calc(33.333% - 1px),
      rgba(0,0,0,.06) calc(33.333% - 1px), rgba(0,0,0,.06) calc(33.333%),
      transparent calc(33.333% + 1px),
      transparent calc(66.666% - 1px),
      rgba(0,0,0,.06) calc(66.666% - 1px), rgba(0,0,0,.06) calc(66.666%),
      transparent calc(66.666% + 1px)
    );
  opacity:.6;
}
.workarea{
  position:absolute; inset: 24px;
  display:grid; gap:16px;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
}
.workarea .slot{
  border-radius: 10px;
  background: rgba(255,255,255,.92);
  border:1px solid rgba(0,0,0,.06);
  box-shadow: 0 10px 32px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.75);
}
.workarea .s-a{ grid-column: 1; }
.workarea .s-b{ grid-column: 2; }
.workarea .s-c{ grid-column: 3; }

/* ==========================
   S1.2 — Hasta la perfección + canvas compartido
   ========================== */
.s1-final{
  display:grid;
  grid-template-rows: auto 1fr;
  row-gap: 22px;
  justify-items: center;
  align-content: center;
}

.final-head{ text-align:center; }

.final-title{
  margin:0 0 .25em;
  font-weight:700;
  font-size: clamp(36px, 6.6vw, 82px);
  letter-spacing:-.01em;
}

.final-title span{
  display:inline-block;
  color: #1f1f1f;
}

.final-sub{
  max-width: 900px;
  margin: 0 auto;
  color:#4a4450;
  font-size:clamp(16px,1.5vw,20px);
  line-height:1.6;
  font-family: "Inter", sans-serif;
}

/* Canvas centrado y reutilizable (S1 + S2) */
.final-board{
  position: relative;
  width:min(1100px, 88vw);
  height:min(62vh, 640px);
  margin: 0 auto;
  border-radius: 14px;
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  box-shadow: 0 30px 90px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.8);
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  transition: box-shadow .35s ease, transform .35s ease;
}

/* Canvas interior */
.final-scene{
  background: transparent;
  border: none;
  box-shadow: none;
  width: min(960px, 92%);
  height: min(86%, 520px);
  margin: 0 auto;
  padding: 22px 24px 24px;
  display:flex;
  flex-direction:column;
  gap: 14px;

  opacity: 0;
  transform: translateY(10px) scale(.98);
  pointer-events: none;
  transition: opacity .35s cubic-bezier(.22,.61,.36,1),
              transform .35s cubic-bezier(.22,.61,.36,1);
}

/* Solo se ve cuando el slider no está en "propuesta" */
.final-board.is-detailed .final-scene{
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* Estado base (propuesta) */
.final-board[data-layout="propuesta"] .final-tagline{
  max-width: 420px;
}

/* ONE PAGE */
.final-board[data-layout="one-page"] .final-scene-header{
  justify-content: center;
  text-align: center;
}
.final-board[data-layout="one-page"] .final-tagline{
  text-align: center;
  max-width: 520px;
  margin: 4px auto 0;
}
.final-board[data-layout="one-page"] .final-scene-body{
  grid-template-columns: 1fr;
}
.final-board[data-layout="one-page"] .final-main{
  position: relative;
  min-height: 260px;
  overflow: hidden;
}
.final-board[data-layout="one-page"] .final-main::before{
  content:"";
  position:absolute;
  inset:14px;
  border-radius:18px;
  background:
    linear-gradient(to bottom,
      #e5e7eb 0 26%,
      #f3f4f6 26% 40%,
      #e5e7eb 40% 54%,
      #f3f4f6 54% 68%,
      #e5e7eb 68% 100%
    );
}

/* WEB COMPLETA — tagline más ancho */
.final-board[data-layout="web-completa"] .final-tagline{
  margin-top: 6px;
  max-width: none;
}

/* TIENDA ONLINE — layout general */
.final-board[data-layout="tienda"] .final-scene-body{
  grid-template-columns: minmax(0, 1.7fr) minmax(200px, 0.9fr);
  align-items: stretch;
}
.final-board[data-layout="tienda"] .final-tagline{
  margin-top: 6px;
  max-width: none;
  font-size: 12px;
}

/* Productos (3 cards) */
.final-board[data-layout="tienda"] .final-main{
  position: relative;
  min-height: 260px;
  border-radius: 14px;
  background:#f5f5f5;
  overflow:hidden;
}
.final-board[data-layout="tienda"] .final-main::before{
  content:"";
  position:absolute;
  inset:18px 22px 24px;
  border-radius:18px;
  background:
    /* Card 1 */
    linear-gradient(#e5e7eb 0 0) 0 0/26% 70% no-repeat,
    linear-gradient(#d1d5db 0 0) 4% 64%/18% 9% no-repeat,
    /* Card 2 */
    linear-gradient(#e5e7eb 0 0) 35% 0/26% 70% no-repeat,
    linear-gradient(#d1d5db 0 0) 39% 64%/18% 9% no-repeat,
    /* Card 3 */
    linear-gradient(#e5e7eb 0 0) 70% 0/26% 70% no-repeat,
    linear-gradient(#d1d5db 0 0) 74% 64%/18% 9% no-repeat;
}

/* Columna derecha tipo carrito */
.final-board[data-layout="tienda"] .final-side{
  opacity: 1;
  transform: none;
  position: relative;
}
.final-board[data-layout="tienda"] .final-side::before{
  content:"";
  position:absolute;
  inset:16px;
  border-radius:14px;
  background:
    linear-gradient(#e5e7eb 0 0) 0 6%/70% 10% no-repeat,
    linear-gradient(#e5e7eb 0 0) 0 24%/100% 10% no-repeat,
    linear-gradient(#e5e7eb 0 0) 0 38%/100% 10% no-repeat,
    linear-gradient(#d1d5db 0 0) 0 70%/60% 14% no-repeat;
}

/* LANDING PAGE */
.final-board[data-layout="landing"] .final-scene-body{
  grid-template-columns: minmax(0, 1.2fr) minmax(220px, 0.9fr);
  align-items: stretch;
}
.final-board[data-layout="landing"] .final-main{
  min-height: 220px;
  position:relative;
}
.final-board[data-layout="landing"] .final-main::before{
  content:"";
  position:absolute;
  inset:14px;
  border-radius:18px;
  background:
    linear-gradient(#e5e7eb 0 0) 0 0/70% 40% no-repeat,
    linear-gradient(#e5e7eb 0 0) 0 50%/60% 16% no-repeat,
    linear-gradient(#e5e7eb 0 0) 0 72%/50% 12% no-repeat;
}
.final-board[data-layout="landing"] .final-side{
  opacity:1;
  transform:none;
  min-height: 220px;
  position:relative;
}
.final-board[data-layout="landing"] .final-side::before{
  content:"";
  position:absolute;
  inset:16px;
  border-radius:16px;
  background:
    linear-gradient(#e5e7eb 0 0) 0 10%/80% 12% no-repeat,
    linear-gradient(#e5e7eb 0 0) 0 28%/100% 8% no-repeat,
    linear-gradient(#e5e7eb 0 0) 0 42%/100% 8% no-repeat,
    linear-gradient(#e5e7eb 0 0) 0 56%/100% 8% no-repeat,
    linear-gradient(#111 0 0)   0 78%/60% 14% no-repeat;
}

/* En FASE 1 (body.mode--s1) lo ocultamos */
.mode--s1 #s1p-final .final-scene{
  opacity: 0;
  transform: translateY(10px) scale(.98);
  pointer-events: none;
}

/* Cabecera: logo + CTA (la CTA se oculta en el canvas) */
.final-scene-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 18px;
}
.final-logo{
  min-width: 110px;
  padding: 8px 18px;
  border-radius:999px;
  background:#e5e7eb;
  font-weight:700;
  font-size:18px;
  letter-spacing:.03em;
  color:#a3a3a3;
  text-transform:uppercase;
}
.final-cta{
  display:none; /* ocultamos el botón dentro del canvas */
}

.final-tagline{
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color:#5a6160;
}

/* Tira de navegación superior (base) */
.final-strip{
  display:flex;
  gap: 10px;
  margin: 2px 0 4px;
}
.final-strip span{
  flex:1 0 0;
  height: 14px;
  border-radius: 999px;
  background:#e5e7eb;
}

/* Área principal + lateral */
.final-scene-body{
  flex:1;
  display:grid;
  grid-template-columns: 1fr;
  grid-auto-rows: minmax(140px, 1fr);
  gap: 18px;
  margin-top: 8px;
}
.final-main,
.final-side{
  border-radius: 14px;
  background:#f3f4f6;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}

/* ===== Estados por layout (data-layout) ===== */

/* strip y sidebar ocultos por defecto / propuesta / one-page */
.final-board .final-strip,
.final-board[data-layout="propuesta"] .final-strip,
.final-board[data-layout="one-page"] .final-strip{
  opacity:0;
  transform: translateY(-6px) scaleY(.5);
  transform-origin: top;
}
.final-board .final-side,
.final-board[data-layout="propuesta"] .final-side,
.final-board[data-layout="one-page"] .final-side{
  opacity:0;
  transform: translateY(10px);
}
.final-board[data-layout="one-page"] .final-scene-body,
.final-board[data-layout="propuesta"] .final-scene-body{
  grid-template-columns: 1fr;
}
.final-board[data-layout="one-page"] .final-main,
.final-board[data-layout="propuesta"] .final-main{
  min-height: 240px;
}

/* ===== HEADER GRID: WEB COMPLETA + TIENDA ===== */

/* Interior del canvas en grid:
   col 1 → logo
   col 2 → menú (strip)
   fila 2 → tagline (ocupa 1-2)
   fila 3 → body (ocupa 1-2) */
.final-board[data-layout="web-completa"] .final-scene,
.final-board[data-layout="tienda"] .final-scene{
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto 1fr;
  column-gap: 16px;
  row-gap: 8px;
}

/* fila 1, col 1: logo */
.final-board[data-layout="web-completa"] .final-scene-header,
.final-board[data-layout="tienda"] .final-scene-header{
  grid-row: 1;
  grid-column: 1;
}

/* fila 1, col 2: menú */
.final-board[data-layout="web-completa"] .final-strip,
.final-board[data-layout="tienda"] .final-strip{
  grid-row: 1;
  grid-column: 2;
  margin: 0;
  align-self: center;
  opacity: 1;
  transform: translateY(0) scaleY(1);
  gap: 8px;
}

/* en tienda usamos las dos últimas como iconos (carrito/favs) */
.final-board[data-layout="tienda"] .final-strip span:nth-child(3),
.final-board[data-layout="tienda"] .final-strip span:nth-child(4){
  flex: 0 0 auto;
  width: 18px;
}

/* fila 2: tagline ocupa las dos columnas */
.final-board[data-layout="web-completa"] .final-tagline,
.final-board[data-layout="tienda"] .final-tagline{
  grid-row: 2;
  grid-column: 1 / -1;
  margin-top: 4px;
}

/* fila 3: body ocupa las dos columnas */
.final-board[data-layout="web-completa"] .final-scene-body,
.final-board[data-layout="tienda"] .final-scene-body{
  grid-row: 3;
  grid-column: 1 / -1;
}

/* layout interno web completa (sidebar + contenido) */
.final-board[data-layout="web-completa"] .final-scene-body{
  grid-template-columns: minmax(160px, 220px) 1fr;
  align-items:stretch;
}
.final-board[data-layout="web-completa"] .final-main{
  min-height: 220px;
}
.final-board[data-layout="web-completa"] .final-side{
  opacity:1;
  transform: translateY(0);
}

/* Transiciones suaves dentro del canvas */
.final-board .final-strip,
.final-board .final-strip span,
.final-board .final-main,
.final-board .final-side,
.final-board .final-scene-body{
  transition: all .45s cubic-bezier(.22,.61,.36,1);
}

/* Navegación lateral del canvas (pads) */
.final-nav{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  width: 120px;
  height: 220px;
  border-radius: 14px;
  background: rgba(255,255,255,.82);
  border:1px solid rgba(255,255,255,.9);
  box-shadow: 0 12px 32px rgba(0,0,0,.08);
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 10px;
  font-size: 0;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#9ca3af;
  cursor:pointer;
  backdrop-filter: blur(14px);
  opacity:.95;
  transition:
    opacity .25s ease,
    transform .25s ease,
    box-shadow .25s ease,
    background .25s ease;
}
.final-nav--left{ left: 26px; }
.final-nav--right{ right: 26px; }

@media (hover:hover) and (pointer:fine){
  .final-nav:hover{
    opacity:1;
    background: rgba(255,255,255,.96);
    transform: translateY(-50%) scale(1.02);
    box-shadow: 0 18px 46px rgba(0,0,0,.12);
  }
}
@media (max-width: 900px){
  .final-nav{ display:none; }
}

/* layout slider + canvas en S2 */
.build-layout{
  margin-top: 4vh;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.85fr);
  gap: clamp(20px, 3vw, 32px);
  align-items: center;
}
@media (max-width: 980px){
  .build-layout{
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ===== S2 — Intro → Proyectos ===== */

/* Pads del slider en S2: fijos */
#s2 .final-nav{
  position: fixed;
  top: 56vh;
  transform: translateY(-50%);
  z-index: 8;
  pointer-events: auto;
}
#s2 .final-nav--left{
  left: max(4vw, 80px);
}
#s2 .final-nav--right{
  right: max(4vw, 80px);
}

#s2{
  --padX: 0px;
  --padY: 0px;
  --bgA:  0;
  --bgHue: 310;
  position: relative;
  min-height: 100vh;
  z-index: 2;
  color: #111;
  background: transparent;
  overflow: clip;
}
#s2 .s2-bg{
  position: absolute; inset: 0; pointer-events: none;
  opacity: var(--bgA);
  mix-blend-mode: multiply;
  background:
    radial-gradient(120% 120% at 100% 0%,
      hsl(var(--bgHue) 70% 40% / .18) 0%,
      hsl(calc(var(--bgHue) - 40) 70% 8% / 0) 60%),
    linear-gradient(160deg,
      hsl(250 18% 97% / 1) 0%,
      hsl(250 16% 96% / 1) 60%,
      hsl(310 20% 95% / 1) 100%);
}
/* S2: contenedor más ancho */
#s2 .container{
  max-width: 1440px;
  width: min(1440px, 100vw);
  margin: 0 auto;
  padding: 12vh clamp(32px, 4vw, 56px) 16vh;
  position: relative;
  z-index: 1;
}

/* S2: galería */
#s2 .s2-canvas{
  max-width: 1440px;
  margin: 6vh auto 0;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.05fr);
  gap: clamp(26px, 5vh, 52px);
  align-items: flex-start;
}

#s2 .build-head{ position: relative; text-align: left; }
#s2 .build-head + .build-head{ margin-top: 8vh; }
#s2 .build-title{
  margin: 0 0 .4rem;
  font-weight: 700;
  font-size: clamp(48px, 10vw, 120px);
  letter-spacing: -.015em;
  background: linear-gradient(90deg, #F49CEB 0%, #B184FF 36%, #8CD6FF 72%, #6b7276 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow: none;
}
#s2 .build-sub{
  max-width: 840px; color:#2E3532;
  font-size: clamp(16px, 1.6vw, 20px); line-height: 1.6;
  margin: 0 0 28px;
  font-family: "Inter", sans-serif;
}
#s2 .guides--cols{ pointer-events:none; position:absolute; inset:0; }
#s2 .guides--cols .g{
  position:absolute; top:0; bottom:0; width:1px;
  background: rgba(0,0,0,.12); opacity:0;
}
#s2 .guides--cols .g-1{ left:12% } .g-2{ left:26% } .g-3{ left:40% }
#s2 .guides--cols .g-4{ left:54% } .g-5{ left:68% } .g-6{ left:82% }

/* Proyectos */
#s2 .proj{
  position: relative;
  will-change: transform;
  opacity: 0;
  transform: translate3d(0, 40px, 0) scale(.97);
}
#s2 .proj-frame{
  position: relative;
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
  background:#000;
  box-shadow: 0 26px 70px rgba(0,0,0,.28);
}
#s2 .proj-frame iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}

/* patrón 2 col */
#s2 .proj:nth-child(4n+1) .proj-frame,
#s2 .proj:nth-child(4n+4) .proj-frame{
  aspect-ratio: 9 / 16;
}
#s2 .proj:nth-child(4n+2) .proj-frame,
#s2 .proj:nth-child(4n+3) .proj-frame{
  aspect-ratio: 16 / 9;
}
#s2 .proj:nth-child(2){ margin-top: 10%; }
#s2 .proj:nth-child(3){ margin-top: -4%; }
#s2 .proj:nth-child(6){ margin-top: 8%; }
#s2 .proj:nth-child(7){ margin-top: -6%; }

@media (max-width: 900px){
  #s2 .s2-canvas{
    display: block;
  }
  #s2 .proj{
    opacity: 1;
    transform: none;
    margin-top: 22px;
  }
  #s2 .proj:first-child{
    margin-top: 0;
  }
  #s2 .proj .proj-frame{
    aspect-ratio: 16 / 9 !important;
  }
}

/* =========================================================
   S2 — Slider de formatos
   ========================================================= */
#s2 .build-kicker{
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .18em;
  margin: 0 0 10px;
  color: #5b645f;
  font-weight: 600;
}
#s2 .build-slider{
  margin-top: 4vh;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.85fr);
  gap: clamp(20px, 3vw, 32px);
  align-items: center;
}
#s2 .build-slider-copy p{
  margin: 0;
  color: #3A4440;
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.7;
  font-family: "Inter", sans-serif;
}
#s2 .build-slider-track{
  position: relative;
  display: flex;
  gap: clamp(16px, 2vw, 22px);
  overflow: hidden;
  padding: 12px 4px;
}
#s2 .build-slide{
  flex: 0 0 68%;
  max-width: 420px;
  background: #ffffff;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 16px 44px rgba(0,0,0,.08);
  padding: 16px 18px 18px;
  transition:
    transform .35s ease,
    box-shadow .35s ease,
    border-color .35s ease,
    opacity .35s ease;
  opacity: .45;
  transform: translateY(8px) scale(.95);
}
#s2 .build-slide-title{
  margin: 0 0 6px;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: .11em;
  font-weight: 700;
  color: #1b1f1d;
}
#s2 .build-slide-sub{
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: #4b5550;
}
#s2 .build-slide--center{
  border-style: solid;
  border-width: 1px;
  border-color: rgba(0,0,0,.16);
}
#s2 .build-slide.is-active{
  opacity: 1;
  transform: translateY(0) scale(1);
  box-shadow: 0 22px 60px rgba(0,0,0,.12);
  border-color: rgba(0,0,0,.22);
}
#s2 .build-slider::after{
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 80px;
  pointer-events: none;
  background: linear-gradient(to right, rgba(255,255,255,0) 0%, #f7f8f9 60%, #f7f8f9 100%);
  opacity: .9;
}
@media (hover:hover) and (pointer:fine){
  #s2 .build-slide{
    cursor: pointer;
  }
  #s2 .build-slide:hover{
    box-shadow: 0 26px 70px rgba(0,0,0,.14);
    transform: translateY(-2px) scale(1.01);
  }
}
@media (max-width: 980px){
  #s2 .build-slider{
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    margin-top: 32px;
  }
  #s2 .build-slider-track{
    padding-inline: 0;
  }
  #s2 .build-slide{
    flex: 0 0 82vw;
    max-width: none;
  }
}
@media (max-width: 720px){
  #s2 .build-slider-track{
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  #s2 .build-slide{
    scroll-snap-align: center;
  }
}

/* =========================================================
   RESPONSIVE TWEAKS GENERALES
   ========================================================= */
@media (max-width: 780px){
  .shape-stage{ height: 56vh; }
  .final-board{ height: 54vh; }
}

/* =========================================================
   UTILIDADES
   ========================================================= */
.scene {
  scroll-margin-top: 10vh;
  position: relative;
  z-index: 2;
  isolation: isolate;
}
.scene > header {
  position: relative;
  z-index: 3;
}
@media (prefers-reduced-motion: reduce){
  .hero-fixed-bg .hero-wind { animation:none; }
  .idea .media { transform:none !important; }
}

/* =========================================================
   FALLBACK DE COLOR TITULARES
   ========================================================= */
.ideas-title,
.shape-title,
.final-title,
#s2 .build-title{
  color: #0E1412;
}
.hero--fund .hero-title,
.hero--fund .hero-title span,
.hero--fund .hero-sub,
.ideas-title,
.shape-title,
.final-title,
#s2 .build-title,
#s2 .build-sub,
.phase-nav--global button span,
.hero--fund .eyebrow {
  text-shadow: none !important;
  filter: none !important;
}
html, body {
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
}
h1, h2, h3,
.hero--fund .hero-title,
.ideas-title,
.shape-title,
.final-title,
#s2 .build-title {
  font-family: "Antonio", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
}

/* texto sólido en sec-title */
.landing .sec-title,
.landing .sec-title span{
  background:none !important;
  -webkit-background-clip:initial !important;
  background-clip:initial !important;
  color:var(--text-hi) !important;
  -webkit-text-fill-color:currentColor !important;
  mix-blend-mode:normal !important;
}

/* =========================================================
   S3→S7
   ========================================================= */

/* — S3: Métricas — */
.scene--metrics{
  padding: 12vh 0 10vh;
  background:#fff;
}
.scene--metrics .sec-title{
  font-family:"Antonio", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight:700;
  font-size: clamp(36px, 7.2vw, 82px);
  letter-spacing:-.01em;
  margin:0 0 .3em;
  color: var(--text-hi);
}
.scene--metrics .sec-sub{
  color: var(--text-med);
  max-width: 800px;
  margin: 0 0 28px;
  font-size: clamp(16px,1.6vw,20px);
  line-height:1.6;
}
.scene--metrics .metrics-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: clamp(16px, 2.6vw, 28px);
  margin-top: 22px;
}
.scene--metrics .metric{
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:14px;
  box-shadow: 0 14px 40px rgba(0,0,0,.06);
  padding:18px;
  text-align:center;
}
.scene--metrics .metric .dial{
  width:96px; height:96px; margin:8px auto 10px; border-radius:50%;
  background: conic-gradient(currentColor 0deg, rgba(0,0,0,.06) 0);
  color:#111; display:grid; place-items:center;
}
.scene--metrics .metric .num{
  font-weight:800; font-size:28px; line-height:1; margin-bottom:6px;
}
.scene--metrics .metric h3{
  margin:0; font-size:14px; letter-spacing:.02em; color:#2d2d2d;
}
.scene--metrics .webvitals{
  display:flex; flex-wrap:wrap; gap:10px 14px;
  margin:26px auto 0; padding:0; list-style:none;
}
.scene--metrics .vital{
  display:inline-flex; align-items:center; gap:10px;
  border:1px solid rgba(0,0,0,.08); border-radius:999px; padding:10px 14px; background:#fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65), 0 8px 24px rgba(0,0,0,.05);
}
.scene--metrics .vital .tag{ font-weight:700; font-size:12px; letter-spacing:.08em; }
.scene--metrics .vital .val{ font-size:13px; color:#3a3a3a; }
.scene--metrics .vital[data-ok="true"]{ border-color: rgba(6,170,120,.35); }
@media (max-width: 980px){
  .scene--metrics .metrics-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* — S4: Tipos de web — */
.scene--types{
  padding: 14vh 0 12vh;
  background:#fafbfc;
}
.scene--types .sec-title{
  font-family:"Antonio", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight:700; font-size: clamp(32px, 6.6vw, 72px); margin:0 0 10px; color: var(--text-hi);
}
.scene--types .sec-sub{ color: var(--text-med); margin: 0 0 24px; }
.scene--types .types-deck{
  display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: clamp(14px, 2.4vw, 24px);
}
.scene--types .type-card{
  background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:14px; padding:20px 18px;
  box-shadow: 0 16px 44px rgba(0,0,0,.06);
  transform-origin: 50% 60%;
}
.scene--types .type-card h3{ margin:0 0 6px; font-size:18px; font-weight:800; }
.scene--types .type-card p{ margin:0 0 10px; color:#3b3b3b; font-size:14px; }
.scene--types .type-card .pills{
  display:flex; flex-wrap:wrap; gap:8px; list-style:none; padding:0; margin:0;
}
.scene--types .type-card .pills li{
  font-size:12px; padding:6px 10px; border-radius:999px; background:#f4f6f7; border:1px solid rgba(0,0,0,.06);
}
@media (max-width: 1100px){
  .scene--types .types-deck{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
  .scene--types .types-deck{ grid-template-columns: 1fr; }
}

/* — S5: Reseñas — */
.scene--reviews{
  padding: 12vh 0;
  background:#fff;
}
.scene--reviews .sec-title{
  font-family:"Antonio", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight:700; font-size: clamp(30px, 6vw, 64px); margin:0 0 20px; color: var(--text-hi);
}
.scene--reviews .reviews-track{
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: clamp(12px, 2vw, 20px);
  width:min(var(--container), 90vw); margin-inline:auto;
}
.scene--reviews .review-card{
  background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:14px; padding:20px 18px;
  box-shadow: 0 12px 36px rgba(0,0,0,.06);
}
.scene--reviews .review-card .stars{
  height:18px; margin-bottom:10px;
  --g: conic-gradient(#111 0 0) 0/calc(100%/5) 100% no-repeat;
  -webkit-mask: var(--g); mask: var(--g);
  background:
    linear-gradient(90deg, #111 0 90%, rgba(0,0,0,.2) 90%) 0/20% 100% repeat-x;
}
.scene--reviews .review-card .quote{ margin:0 0 8px; font-weight:600; line-height:1.5; }
.scene--reviews .review-card .who{ font-size:12px; color:#636a66; }
@media (max-width: 980px){
  .scene--reviews .reviews-track{ grid-template-columns: 1fr; }
}

/* — S6: CTA — */
.scene--cta{
  min-height: 70vh;
  display:grid; place-items:center;
  background:#111; color:#fff; position:relative;
}
.scene--cta .cta-inner{ position:relative; text-align:center; }
.scene--cta .cta-line{ font-family:"Antonio"; font-weight:800; letter-spacing:-.01em; }
.scene--cta .cta-ask{ font-size: clamp(36px, 8vw, 96px); opacity:.9; }
.scene--cta .cta-ready{ font-size: clamp(28px, 6vw, 76px); opacity:.95; }
.scene--cta .cta-wipe{
  position:absolute; inset:0; background:#fff; transform: scaleX(0); transform-origin: 0 50%;
  mix-blend-mode: difference; pointer-events:none;
}

/* — S7: Contacto — */
.scene--contact{
  padding: 12vh 0 16vh;
  background:#fff;
}
.scene--contact .sec-title{
  font-family:"Antonio", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight:700; font-size: clamp(34px, 7vw, 86px); margin:0 0 10px; color: var(--text-hi);
}
.scene--contact .sec-sub{ color: var(--text-med); margin:0 0 26px; }
.scene--contact .contact-shell{
  background:#fafbfc; border:1px solid rgba(0,0,0,.08); border-radius:16px;
  box-shadow: 0 18px 60px rgba(0,0,0,.08); padding: clamp(18px, 3vw, 28px);
}
.scene--contact .wpcf7 form p{ margin-bottom:14px; }
.scene--contact input[type="text"],
.scene--contact input[type="email"],
.scene--contact input[type="tel"],
.scene--contact textarea{
  width:100%; border-radius:12px; border:1px solid rgba(0,0,0,.12); background:#fff;
  padding:12px 14px; font:inherit; color:#111; box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
}
.scene--contact textarea{ min-height:120px; resize:vertical; }
.scene--contact input[type="submit"],
.scene--contact button[type="submit"]{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:14px 20px; border-radius:999px; border:1px solid rgba(0,0,0,.12);
  color:#fff; background:#111; cursor:pointer;
  box-shadow: 0 14px 44px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.25);
  transition:.25s ease;
}
.scene--contact input[type="submit"]:hover{ transform: translateY(-1px); background:#1A1A1A; }

/* — Utilidades — */
.sr-anchor{ position:absolute; inset-block-start:-80px; }

.scene--metrics .sec-title,
.scene--types .sec-title,
.scene--reviews .sec-title,
.scene--cta .cta-line,
.scene--contact .sec-title{
  text-shadow:none !important; filter:none !important;
}

/* PATCH SEGURO */
.hero--fund .scroll-hint{
  left: 50%;
  transform: translateX(-50%);
}
#s2{
  overflow: hidden;
  overflow: clip;
}
.landing :is(.scene--metrics,.scene--types,.scene--reviews,.scene--contact) .sec-title{
  font-family:"Antonio", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight:700;
  letter-spacing:-.01em;
  color: var(--text-hi);
  margin:0 0 .3em;
}
.landing :is(.scene--metrics,.scene--types,.scene--contact) .sec-sub{
  color: var(--text-med);
  font-size: clamp(16px,1.6vw,20px);
  line-height:1.6;
}
.scene--contact :is(input[type="text"], input[type="email"], input[type="tel"], textarea){
  width:100%;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  padding:12px 14px;
  font:inherit;
  color:#111;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
}
.scene--contact :is(input[type="submit"], button[type="submit"]){
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:14px 20px; border-radius:999px; border:1px solid rgba(0,0,0,.12);
  color:#fff; background:#111; cursor:pointer;
  box-shadow: 0 14px 44px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.25);
  transition:.25s ease;
}
.scene--contact :is(input[type="submit"], button[type="submit"]):hover{
  transform: translateY(-1px);
  background:#1A1A1A;
}
.scene--metrics .sec-title{ font-size: clamp(36px, 7.2vw, 82px); }
.scene--types   .sec-title{ font-size: clamp(32px, 6.6vw, 72px); }
.scene--reviews .sec-title{ font-size: clamp(30px, 6vw, 64px); }
.scene--contact .sec-title{ font-size: clamp(34px, 7vw, 86px); }
@media (prefers-reduced-motion: reduce){
  .landing *{ transition-duration: 0s !important; animation-duration: 0s !important; }
}
.phase-nav--global button.is-active{
  background:#111; color:#fff; border-color:#111;
  box-shadow: 0 6px 20px rgba(0,0,0,.15);
}
.hero-fixed-bg .section-sweep{
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: var(--sa, 0);
  mix-blend-mode: multiply;
  transition: opacity .2s linear;
  background:
    radial-gradient(120% 120% at 100% 0%,
      hsl(var(--sh,310) 70% 40% / .18) 0%,
      hsl(calc(var(--sh,310) - 40) 70% 8% / 0) 60%),
    linear-gradient(160deg,
      hsl(250 18% 97% / 1) 0%,
      hsl(250 16% 96% / 1) 60%,
      hsl(310 20% 95% / 1) 100%);
}