/* =========================================================
   FUENTES (self-hosted en assets/fonts)
   ========================================================= */
@font-face {
  font-family: 'Antonio';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/antonio-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

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;
  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%);
  /* PERF: blur 60→35px. Reduce trabajo GPU/repaint en cada frame del scroll
     sin cambio visual perceptible (el gradient suave ya difumina). */
  filter: blur(35px);
  mix-blend-mode:multiply;
  opacity:.14;
  pointer-events:none;
  will-change: transform;
}
.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%);
  /* PERF: blur 90→45px. Es el mayor gasto GPU porque además anima cada frame
     (--x1/--y1 vía RAF). A 45px sigue siendo "viento" suave y reduce 50% el coste. */
  filter: blur(45px) saturate(1.0);
  mix-blend-mode:multiply;
  opacity:.18;
  pointer-events:none;
  will-change: transform;
}
.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%);
  transition: opacity .18s linear;
  will-change: opacity;
}

/* =========================================================
   NAV GLOBAL (fija izquierda)
   ========================================================= */

/* Nav inferior tipo dock (estilo Awwwards) */
.phase-nav--global{
  position: fixed;
  left: 50%;
  bottom: clamp(14px, 2.4vh, 24px);
  transform: translateX(-50%);
  z-index: 30;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px;
  border-radius: 18px;
  background: rgba(14, 20, 18, .82);
  backdrop-filter: blur(20px) saturate(1.1);
  -webkit-backdrop-filter: blur(20px) saturate(1.1);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow:
    0 1px 0 rgba(255,255,255,.08) inset,
    0 2px 8px rgba(0,0,0,.20),
    0 18px 44px rgba(14,20,18,.32);
  font-family: "Inter", sans-serif;
}

/* Marca a la izquierda — ahora con SVG inline (logotipo "nous." cleanable) */
.phase-nav-brand{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 12px;
  border-radius: 12px;
  background: rgba(255,255,255,.06);
  color: #f4f5f3;
  line-height: 1;
  user-select: none;
  text-decoration: none;
  transition: background-color .25s ease, transform .2s ease;
}
.phase-nav-brand:hover{
  background: rgba(255,255,255,.10);
  transform: translateY(-1px);
}
.phase-nav-brand-svg{
  display: block;
  width: auto;
  height: 18px;
}

/* Cluster central con tabs */
.phase-nav-tabs{
  display: inline-flex;
  gap: 4px;
}

/* Botones de fase */
.phase-nav--global button{
  position: relative;
  height: 36px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  border-radius: 10px;
  border: 0;
  background: transparent;
  color: rgba(244,245,243,.72);
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: .02em;
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease, transform .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.phase-nav--global button:hover{
  background: rgba(255,255,255,.06);
  color: #f4f5f3;
}
.phase-nav--global button:focus-visible{
  outline: 2px solid rgba(255,255,255,.4);
  outline-offset: 1px;
}
.phase-nav--global button span{ position: relative; z-index: 1; }

/* Estado activo: fondo claro como en Awwwards */
.phase-nav--global button.is-active{
  background: #f4f5f3;
  color: #0E1412;
  box-shadow:
    0 1px 0 rgba(255,255,255,.6) inset,
    0 4px 10px rgba(0,0,0,.18);
}

/* Botón de descarga del catálogo PDF (entre tabs y CTA) */
.phase-nav-pdf{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  margin-left: 6px;
  position: relative;
  border-radius: 10px;
  background: rgba(255,255,255,.06);
  color: rgba(244,245,243,.78);
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: .03em;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,.08);
  transition: background-color .25s ease, color .25s ease, transform .2s ease, border-color .25s ease;
  white-space: nowrap;
}
/* Separador vertical sutil que aísla el PDF de las tabs de fase */
.phase-nav-pdf::before{
  content: "";
  position: absolute;
  left: -8px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: rgba(255,255,255,.12);
  pointer-events: none;
}
.phase-nav-pdf:hover{
  background: rgba(148, 211, 183, .14);
  border-color: rgba(148, 211, 183, .35);
  color: #f4f5f3;
  transform: translateY(-1px);
}
.phase-nav-pdf-icon{
  flex-shrink: 0;
  color: #94D3B7;
}

/* CTA a la derecha */
.phase-nav-cta{
  height: 36px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: linear-gradient(135deg, #F49CEB 0%, #B184FF 100%);
  color: #0E1412;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
  border: 1px solid rgba(0,0,0,.06);
}
.phase-nav-cta:hover{
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow: 0 8px 22px rgba(244,156,235,.32);
}

@media (max-width: 720px){
  /* En mobile ocultamos el dock horizontal — usamos el FAB vertical */
  .phase-nav--global{ display: none !important; }
}

/* ============================================================
   FAB DOCK (mobile only): botón circular derecha que despliega
   un menú vertical de acciones rápidas hacia arriba.
   ============================================================ */
.fab-dock{
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 60;
  display: none;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  font-family: "Inter", system-ui, sans-serif;
}
.fab-dock.is-hidden{ opacity: 0; transform: translateY(20px); pointer-events: none; }
.fab-dock.is-visible{ opacity: 1; transform: none; pointer-events: auto; }
.fab-dock,
.fab-dock.is-hidden,
.fab-dock.is-visible{ transition: opacity .3s ease, transform .35s cubic-bezier(.22,.61,.36,1); }

/* Solo aparece en mobile/tablet pequeño */
@media (max-width: 720px){
  .fab-dock{ display: flex; }
}

/* Botón principal: circular con líneas que se convierten en X al abrir */
.fab-dock-toggle{
  position: relative;
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 0;
  background: linear-gradient(135deg, #0E1412 0%, #2a2f2d 100%);
  color: #ffffff;
  cursor: pointer;
  box-shadow:
    0 1px 0 rgba(255,255,255,.08) inset,
    0 4px 12px rgba(0,0,0,.18),
    0 18px 40px rgba(14,20,18,.28);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .3s cubic-bezier(.22,.61,.36,1), background .3s ease;
}
.fab-dock-toggle:active{ transform: scale(.94); }
.fab-dock.is-open .fab-dock-toggle{
  background: linear-gradient(135deg, #B184FF 0%, #8CD6FF 100%);
  transform: rotate(90deg);
}

/* Barras hamburguesa → X al abrir */
.fab-dock-toggle-bars{
  display: inline-flex;
  flex-direction: column;
  gap: 5px;
  width: 22px;
}
.fab-dock-toggle-bars span{
  display: block;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .3s ease, opacity .2s ease;
}
.fab-dock.is-open .fab-dock-toggle-bars{ display: none; }
.fab-dock-toggle-close{ display: none; color: #0E1412; }
.fab-dock.is-open .fab-dock-toggle-close{ display: inline-flex; }

/* Lista de items: oculta por defecto, despliega vertical hacia arriba */
.fab-dock-list{
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column-reverse; /* el primero queda más cerca del botón */
  gap: 8px;
  align-items: flex-end;
  opacity: 0;
  transform: translateY(20px) scale(.92);
  transform-origin: bottom right;
  pointer-events: none;
  transition: opacity .3s ease, transform .35s cubic-bezier(.22,.61,.36,1);
}
.fab-dock.is-open .fab-dock-list{
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.fab-dock-list li{
  opacity: 0;
  transform: translateX(20px);
  transition: opacity .25s ease, transform .35s cubic-bezier(.22,.61,.36,1);
}
.fab-dock.is-open .fab-dock-list li{ opacity: 1; transform: none; }
/* Stagger al abrir */
.fab-dock.is-open .fab-dock-list li:nth-child(1){ transition-delay: .05s; }
.fab-dock.is-open .fab-dock-list li:nth-child(2){ transition-delay: .10s; }
.fab-dock.is-open .fab-dock-list li:nth-child(3){ transition-delay: .15s; }
.fab-dock.is-open .fab-dock-list li:nth-child(4){ transition-delay: .20s; }
.fab-dock.is-open .fab-dock-list li:nth-child(5){ transition-delay: .25s; }
.fab-dock.is-open .fab-dock-list li:nth-child(6){ transition-delay: .30s; }

/* Cada item: pill blanca con icono + label */
.fab-dock-item{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px 0 12px;
  height: 44px;
  border-radius: 999px;
  background: #ffffff;
  color: #15201c;
  border: 1px solid rgba(14, 20, 18, .08);
  text-decoration: none;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(14,20,18,.10);
  transition: transform .2s ease, background-color .25s ease, color .25s ease;
}
.fab-dock-item:hover,
.fab-dock-item:active{
  transform: translateY(-1px);
  background: #fafbfc;
}
.fab-dock-item svg{ color: rgba(14, 20, 18, .55); flex-shrink: 0; }
.fab-dock-item.is-active{
  background: #0E1412;
  color: #ffffff;
}
.fab-dock-item.is-active svg{ color: rgba(255,255,255,.6); }

/* Items numerados (Fase 1/2/3): círculo con número */
.fab-dock-num{
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(14, 20, 18, .08);
  color: #0E1412;
  font-family: "Antonio", sans-serif;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}
.fab-dock-item.is-active .fab-dock-num{
  background: rgba(255,255,255,.18);
  color: #ffffff;
}

/* CTA destacado en el menú */
.fab-dock-item--cta{
  background: linear-gradient(135deg, #F49CEB 0%, #B184FF 100%);
  color: #0E1412;
  border-color: transparent;
}
.fab-dock-item--cta svg{ color: #0E1412; }
.fab-dock-item--cta:hover{
  background: linear-gradient(135deg, #B184FF 0%, #8CD6FF 100%);
}
/* =========================================================
   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; text-align: center;
  font-size: clamp(56px, 10vw, 100px); letter-spacing:-.015em;
  /* line-height explícito: en producción Themify forzaba un line-height fijo
     sobre el h1 (apretaba el título contra el subtítulo). Con 'normal' coincide
     con el render correcto de local. */
  line-height: normal !important;
}
.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(35px) 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 overrides eliminados: el dock oscuro mantiene su propio tema) */
.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;
  /* Canvas de diseño: papel + grid de puntos */
  background-image:
    radial-gradient(rgba(14,20,18,.08) 1px, transparent 1px);
  background-size: 28px 28px;
  background-position: 0 0;
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 50%, #000 35%, transparent 85%);
          mask-image: radial-gradient(ellipse 90% 70% at 50% 50%, #000 35%, transparent 85%);
}
.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;
}
.s1-shape{
  position: relative;
  display: block;
  /* Altura = offset del head + alto del stage + respiro inferior.
     El stage va anclado bajo el head para que el texto no se solape. */
  min-height: calc(6vh + 320px + min(58vh, 560px) + 40px);
  overflow: hidden;
}
.shape-head{
  position: absolute;
  left: 50%;
  top: 6vh;
  transform: translateX(-50%);
  z-index: 5;
  text-align: center;
  width: min(640px, 86vw);
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.shape-head .shape-title,
.shape-head .shape-sub{
  /* Mejora legibilidad sobre el canvas con las cards detrás */
  text-shadow: 0 1px 0 rgba(255,255,255,.4);
}
.shape-stage--standalone{
  position: absolute;
  left: 50%;
  top: calc(6vh + 220px);
  transform: translateX(-50%);
  z-index: 2;
  width: min(1080px, 90vw);
  height: min(56vh, 540px);
  opacity: 1;
}
.shape-stage--standalone .guides--cols::before{
  opacity: .28;
}
.shape-stage--standalone .workarea{
  inset: clamp(18px, 3vw, 28px);
}
.shape-stage--standalone .workarea .slot{
  min-height: clamp(220px, 30vh, 360px);
  background: #ffffff;
  border: 1px solid rgba(14,20,18,.07);
  border-radius: 18px;
  backdrop-filter: none;
  box-shadow:
    0 1px 2px rgba(14,20,18,.04),
    0 6px 18px rgba(14,20,18,.06),
    0 28px 54px rgba(14,20,18,.08);
  overflow: hidden;
  isolation: isolate;
}
.shape-stage--standalone .workarea .s-a{
  transform: translateY(22px) rotate(-1.5deg);
}
.shape-stage--standalone .workarea .s-b{
  transform: translateY(-12px) rotate(.4deg);
}
.shape-stage--standalone .workarea .s-c{
  transform: translateY(18px) rotate(1.3deg);
}

/* =========================================================
   Propuestas de diseño (Le damos forma) — retícula + mockup
   ========================================================= */
.proposal{
  position: relative;
  padding: 16px;
  display: flex;
  flex-direction: column;
  transition: transform .4s cubic-bezier(.22,.61,.36,1), box-shadow .4s ease;
}
.proposal:hover{
  transform: translateY(-6px) rotate(0) !important;
  z-index: 4;
}

/* Retícula animada de fondo */
.proposal-grid{
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  pointer-events: none;
  z-index: 0;
  padding: 0 12px;
}
.proposal-grid i{
  display: block;
  height: 100%;
  background: linear-gradient(180deg, transparent 0%, rgba(14,20,18,.05) 50%, transparent 100%);
  border-left: 1px dashed rgba(14,20,18,.06);
  border-right: 1px dashed rgba(14,20,18,.06);
  animation: gridBreath 4.6s ease-in-out infinite;
}
.proposal-grid i:nth-child(1){ animation-delay: 0s; }
.proposal-grid i:nth-child(2){ animation-delay: .35s; }
.proposal-grid i:nth-child(3){ animation-delay: .7s; }
.proposal-grid i:nth-child(4){ animation-delay: 1.05s; }
.proposal-grid i:nth-child(5){ animation-delay: 1.4s; }
.proposal-grid i:nth-child(6){ animation-delay: 1.75s; }
@keyframes gridBreath {
  0%, 100% { opacity: .35; }
  50% { opacity: .9; }
}

/* Scanner: barra vertical que recorre */
.proposal-scan{
  position: absolute;
  top: 0;
  bottom: 0;
  left: -8%;
  width: 18%;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(244,156,235,.0) 20%,
    rgba(177,132,255,.14) 50%,
    rgba(140,214,255,.0) 80%,
    transparent 100%);
  filter: blur(8px);
  pointer-events: none;
  animation: scanSweep 5.8s cubic-bezier(.55,.05,.45,1) infinite;
}
.proposal-scan--alt{
  animation-duration: 6.6s;
  animation-direction: reverse;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(140,214,255,.18) 50%,
    transparent 100%);
}
@keyframes scanSweep {
  0% { transform: translateX(0); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateX(680%); opacity: 0; }
}

/* Tag superior de cada propuesta */
.proposal-tag{
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 3;
  font-family: "Inter", sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(14,20,18,.5);
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(14,20,18,.05);
  border: 1px solid rgba(14,20,18,.04);
  pointer-events: none;
}

/* Canvas interno: mockup */
.proposal-canvas{
  position: relative;
  z-index: 1;
  margin-top: 28px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Elementos comunes */
.proposal-bar{
  height: 8px;
  border-radius: 4px;
  background: rgba(14,20,18,.12);
  animation: pulseBar 3.2s ease-in-out infinite;
}
.proposal-bar.short{ width: 60%; }
.proposal-bar--head{ width: 38%; height: 6px; background: rgba(14,20,18,.65); }
.proposal-bar--title{ height: 14px; width: 80%; background: rgba(14,20,18,.85); border-radius: 4px; }
.proposal-bar--copy{ width: 100%; }
.proposal-bar--logo{ width: 28%; height: 7px; background: rgba(14,20,18,.7); }
@keyframes pulseBar {
  0%, 100% { opacity: 1; }
  50% { opacity: .55; }
}

.proposal-cta{
  margin-top: 8px;
  align-self: flex-start;
  width: 44%;
  height: 22px;
  border-radius: 999px;
  background: #0E1412;
  position: relative;
  overflow: hidden;
}
.proposal-cta::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  transform: translateX(-100%);
  animation: ctaShine 3.4s ease-in-out infinite;
}
@keyframes ctaShine {
  0% { transform: translateX(-100%); }
  60% { transform: translateX(200%); }
  100% { transform: translateX(200%); }
}
.proposal-cta--ghost{
  background: transparent;
  border: 1.5px solid rgba(14,20,18,.85);
  width: 60%;
}
.proposal-cta--store{ width: 36%; }

/* === Propuesta 1: Landing === */
.proposal--landing .proposal-nav{
  position: absolute;
  top: 10px;
  left: 12px;
  display: flex;
  gap: 5px;
  z-index: 2;
}
.proposal-dot{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(14,20,18,.18);
}
.proposal-dot:first-child{ background: #ff6f5e; }
.proposal-dot:nth-child(2){ background: #ffd56b; }
.proposal-dot:nth-child(3){ background: #94d3b7; }
.proposal--landing .proposal-hero{
  height: 64px;
  border-radius: 8px;
  background:
    linear-gradient(135deg, #F49CEB 0%, #B184FF 50%, #8CD6FF 100%);
  background-size: 200% 200%;
  animation: heroShift 8s ease-in-out infinite;
  margin: 2px 0 6px;
}
@keyframes heroShift {
  0%, 100% { background-position: 0% 0%; }
  50% { background-position: 100% 100%; }
}

/* Cursor flotante en landing */
.proposal-cursor{
  position: absolute;
  bottom: 22%;
  left: 32%;
  width: 12px;
  height: 12px;
  z-index: 3;
  pointer-events: none;
  animation: cursorOrbit 6s ease-in-out infinite;
}
.proposal-cursor::before{
  content: "";
  position: absolute;
  inset: 0;
  background: #0E1412;
  clip-path: polygon(0 0, 0 90%, 30% 70%, 50% 100%, 65% 90%, 45% 60%, 75% 60%);
}
@keyframes cursorOrbit {
  0% { transform: translate(0, 0); }
  25% { transform: translate(40px, -10px); }
  50% { transform: translate(60px, 18px); }
  75% { transform: translate(15px, 25px); }
  100% { transform: translate(0, 0); }
}

/* === Propuesta 2: Editorial === */
.proposal--editorial .proposal-meta{
  display: flex;
  gap: 6px;
}
.proposal-pill{
  display: inline-block;
  height: 14px;
  width: 38px;
  border-radius: 999px;
  background: rgba(14,20,18,.10);
}
.proposal-pill--alt{ background: rgba(244,156,235,.45); width: 50px; }
.proposal-pill--cart{ background: #0E1412; width: 26px; height: 16px; border-radius: 4px; }
.proposal-title{
  height: 18px;
  border-radius: 4px;
  background: rgba(14,20,18,.88);
  width: 100%;
}
.proposal-title--short{ width: 64%; }
.proposal-cols{
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 10px;
  margin-top: 4px;
  flex: 1;
}
.proposal-img{
  display: block;
  border-radius: 8px;
  background:
    linear-gradient(135deg, #B184FF 0%, #8CD6FF 100%);
  background-size: 220% 220%;
  animation: heroShift 9s ease-in-out infinite;
}
.proposal-text{
  display: grid;
  align-content: center;
  gap: 6px;
}
.proposal-text span{
  display: block;
  height: 6px;
  border-radius: 3px;
  background: rgba(14,20,18,.12);
  animation: pulseBar 3.6s ease-in-out infinite;
}
.proposal-text span.short{ width: 64%; }
.proposal-text span:nth-child(2){ animation-delay: .3s; }
.proposal-text span:nth-child(3){ animation-delay: .6s; }
.proposal-text span:nth-child(4){ animation-delay: .9s; width: 78%; }
.proposal-text span:nth-child(5){ animation-delay: 1.2s; }

/* === Propuesta 3: Tienda === */
.proposal--store .proposal-store-head{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.proposal-store-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  flex: 1;
  margin-top: 2px;
}
.proposal-store-item{
  display: block;
  border-radius: 8px;
  background: rgba(14,20,18,.06);
  border: 1px solid rgba(14,20,18,.08);
  position: relative;
  overflow: hidden;
  animation: storePulse 4.2s ease-in-out infinite;
}
.proposal-store-item:nth-child(1){
  background: linear-gradient(135deg, rgba(244,156,235,.35), rgba(177,132,255,.25));
  animation-delay: 0s;
}
.proposal-store-item:nth-child(2){
  background: linear-gradient(135deg, rgba(140,214,255,.30), rgba(78,163,255,.22));
  animation-delay: .4s;
}
.proposal-store-item:nth-child(3){
  background: linear-gradient(135deg, rgba(148,211,183,.32), rgba(94,206,250,.22));
  animation-delay: .8s;
}
.proposal-store-item:nth-child(4){
  background: linear-gradient(135deg, rgba(14,20,18,.82), rgba(14,20,18,.55));
  animation-delay: 1.2s;
}
@keyframes storePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(.97); }
}

/* Pausar animaciones si el user las prefiere reducidas */
@media (prefers-reduced-motion: reduce){
  .proposal-grid i,
  .proposal-scan,
  .proposal--landing .proposal-hero,
  .proposal-img,
  .proposal-bar,
  .proposal-text span,
  .proposal-cta::before,
  .proposal-store-item,
  .proposal-cursor{
    animation: none !important;
  }
}

/* Nube de ideas */
.ideas-cloud{
  position:absolute; inset:0; z-index:1; pointer-events:none;
}
.idea{
  position:absolute; border-radius:14px;
  background: #ffffff;
  border:1px solid rgba(14,20,18,.06);
  /* Sombra tipo Figma multi-layer */
  box-shadow:
    0 1px 2px rgba(14,20,18,.04),
    0 4px 12px rgba(14,20,18,.06),
    0 24px 48px rgba(14,20,18,.08);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  will-change: transform, opacity;
  opacity:.96;
  overflow: hidden;
  font-family: "Inter", sans-serif;
  transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease;
}
.idea:hover{
  transform: translateY(-2px) rotate(0) !important;
  box-shadow:
    0 2px 4px rgba(14,20,18,.05),
    0 8px 20px rgba(14,20,18,.08),
    0 36px 70px rgba(14,20,18,.12);
  z-index: 5;
}
.idea-tag{
  position: absolute;
  top: 8px;
  right: 10px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(14,20,18,.46);
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(14,20,18,.04);
  border: 1px solid rgba(14,20,18,.04);
  z-index: 3;
  pointer-events: none;
}

/* =========================================================
   Canvas: lineas conectoras, cursor, comentario, badge
   ========================================================= */
.cloud-links{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: .6;
}
.cloud-link{
  fill: none;
  stroke: rgba(14,20,18,.18);
  stroke-width: 1.4;
  stroke-dasharray: 5 6;
  stroke-linecap: round;
}
.cloud-cursor{
  position: absolute;
  top: 38%;
  left: 38%;
  z-index: 4;
  display: inline-flex;
  align-items: flex-start;
  gap: 6px;
  pointer-events: none;
  animation: cursorFloat 6s ease-in-out infinite;
}
.cloud-cursor svg{
  filter: drop-shadow(0 2px 6px rgba(14,20,18,.18));
}
.cloud-cursor-tag{
  margin-top: 14px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #0E1412;
  color: #fff;
  font-family: "Inter", sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .03em;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(14,20,18,.22);
}
@keyframes cursorFloat {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(8px, -6px); }
}
.cloud-comment{
  position: absolute;
  top: 12%;
  right: 30%;
  z-index: 4;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 12px 10px;
  border-radius: 14px 14px 14px 4px;
  background: #ffffff;
  border: 1px solid rgba(14,20,18,.08);
  box-shadow: 0 12px 28px rgba(14,20,18,.10), 0 1px 2px rgba(14,20,18,.04);
  pointer-events: none;
  max-width: 220px;
}
.cloud-comment-avatar{
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, #F49CEB 0%, #B184FF 100%);
  color: #fff;
  font-family: "Inter", sans-serif;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cloud-comment-body{
  display: grid;
  gap: 1px;
}
.cloud-comment-meta{
  margin: 0;
  font-family: "Inter", sans-serif;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .02em;
  color: rgba(14,20,18,.55);
  text-transform: uppercase;
}
.cloud-comment-text{
  margin: 0;
  font-family: "Inter", sans-serif;
  font-size: 12px;
  color: var(--text-hi);
  line-height: 1.35;
}
.cloud-badge{
  position: absolute;
  bottom: 5%;
  right: 18%;
  z-index: 4;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(148, 211, 183, .18);
  color: #1b6e4b;
  border: 1px solid rgba(148, 211, 183, .55);
  font-family: "Inter", sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(14,20,18,.06);
}

/* Paleta con códigos HEX (se generan via JS) */
.palette-stack[data-with-hex]{
  inset: 8px;
}
.palette-stack[data-with-hex] .palette-swatch{
  position: relative;
  border-radius: 6px;
  aspect-ratio: 1.2 / 1;
  flex: 1 1 0;
}
.palette-stack[data-with-hex] .palette-swatch::after{
  content: attr(data-hex);
  position: absolute;
  top: 50%;
  left: calc(100% + 6px);
  transform: translateY(-50%);
  font-family: "Inter", sans-serif;
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: .04em;
  color: rgba(14,20,18,.65);
  white-space: nowrap;
  pointer-events: none;
}
@media (max-width: 980px){
  .cloud-cursor,
  .cloud-comment,
  .cloud-badge,
  .cloud-links{ display: none; }
  .palette-stack[data-with-hex] .palette-swatch::after{ display: none; }
}

/* === i1: Logo scribble (mantiene .logo-scribble) === */
.idea-logo{
  background:
    radial-gradient(120% 170% at 0% 100%, rgba(138, 214, 255, .16), transparent 60%),
    radial-gradient(100% 140% at 100% 0%, rgba(244, 156, 235, .18), transparent 66%),
    rgba(255,255,255,.96);
}

/* === i3: Wireframe móvil SVG con cotas === */
.idea-wire{
  padding: 12px 14px;
  background: linear-gradient(180deg, #fbfaf6 0%, #ffffff 100%);
}
.wire-svg{ width:100%; height:100%; display:block; }
.wire-frame{
  fill: none;
  stroke: rgba(14,20,18,.48);
  stroke-width: 1.5;
}
.wire-bar{ fill: rgba(14,20,18,.10); }
.wire-pill{ fill: rgba(14,20,18,.16); }
.wire-dot{ fill: rgba(14,20,18,.32); }
.wire-dot-bar{ fill: rgba(14,20,18,.18); }
.wire-block{ fill: rgba(14,20,18,.08); }
.wire-block--accent{
  fill: rgba(244, 156, 235, .35);
  stroke: rgba(244, 156, 235, .65);
  stroke-width: 1;
}
.wire-label{
  font-family: "Inter", sans-serif;
  font-size: 6.5px;
  font-weight: 700;
  letter-spacing: .12em;
  fill: rgba(14,20,18,.55);
}
.wire-thumb{
  fill: rgba(14,20,18,.04);
  stroke: rgba(14,20,18,.18);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}
.wire-cta{ fill: #0E1412; }
.wire-cta-label{
  font-family: "Inter", sans-serif;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: .14em;
  fill: #ffffff;
  text-anchor: middle;
}
.wire-dim line{
  stroke: rgba(14,20,18,.4);
}
.wire-dim-text{
  font-family: "Inter", sans-serif;
  font-size: 6px;
  font-weight: 600;
  fill: rgba(14,20,18,.55);
  letter-spacing: .04em;
  writing-mode: tb;
  text-anchor: middle;
}

/* === i4: Nota / brief tipo post-it === */
.idea-note{
  background: linear-gradient(180deg, #fff5b8 0%, #ffec80 100%);
  border-color: rgba(160, 130, 0, .18);
  transform-origin: top left;
  padding: 18px 16px 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  box-shadow: 0 16px 32px rgba(180,150,0,.14), 0 2px 6px rgba(0,0,0,.06);
}
.note-pin{
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #ff6f5e 0%, #c0341a 70%);
  box-shadow: 0 2px 4px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.5);
}
.note-line{
  margin: 0;
  font-family: "Caveat", "Segoe Script", "Bradley Hand", "Comic Sans MS", cursive;
  font-size: 17px;
  line-height: 1.15;
  color: #3a2c00;
  letter-spacing: .01em;
}
.note-line--accent{
  font-weight: 700;
  color: #1f1500;
}
.note-line--accent u{
  text-decoration-color: rgba(31,21,0,.45);
  text-underline-offset: 3px;
}
.note-mark{
  background: rgba(255, 220, 0, .55);
  padding: 0 4px;
  border-radius: 3px;
  box-decoration-break: clone;
}
.note-checks{
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  gap: 3px;
  font-family: "Inter", sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  color: rgba(31,21,0,.74);
}
.note-checks li{
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.note-check{
  width: 11px;
  height: 11px;
  border-radius: 3px;
  border: 1.5px solid rgba(31,21,0,.46);
  background: rgba(255,255,255,.4);
  flex-shrink: 0;
  position: relative;
}
.note-check--on{
  background: #1f1500;
  border-color: #1f1500;
}
.note-check--on::after{
  content: "";
  position: absolute;
  inset: 2px;
  background: transparent;
  border-left: 1.5px solid #fff;
  border-bottom: 1.5px solid #fff;
  transform: rotate(-45deg) translateY(-1px);
  border-radius: .5px;
}
.note-scribble{
  position: absolute;
  bottom: 8px;
  left: 14px;
  right: 14px;
  height: 12px;
  color: rgba(31,21,0,.28);
}

/* === i5: Tipografía specimen + escala === */
.idea-type{
  padding: 14px 14px 14px 12px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: stretch;
  gap: 14px;
  background:
    radial-gradient(140% 120% at 100% 100%, rgba(140, 214, 255, .12), transparent 60%),
    #ffffff;
}
.type-left{
  position: relative;
  display: flex;
  align-items: center;
  padding-right: 12px;
  border-right: 1px solid rgba(14,20,18,.08);
}
.type-specimen{
  font-family: "Antonio", "Inter", sans-serif;
  font-size: 120px;
  font-weight: 700;
  line-height: .82;
  letter-spacing: -.02em;
  color: #0E1412;
  display: inline-block;
}
.type-baseline{
  position: absolute;
  left: 4px;
  right: 16px;
  bottom: 30%;
  height: 1px;
  border-top: 1px dashed rgba(244, 156, 235, .7);
  pointer-events: none;
}
.type-meta{
  display: grid;
  gap: 3px;
  font-size: 11px;
  color: rgba(14,20,18,.7);
  align-content: center;
}
.type-name{
  margin: 0;
  font-family: "Antonio", "Inter", sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: var(--text-hi);
  letter-spacing: -.005em;
  line-height: 1;
}
.type-name-sub{
  margin: 0 0 2px;
  font-size: 10.5px;
  color: rgba(14,20,18,.55);
  letter-spacing: .02em;
}
.type-divider{
  margin: 4px 0;
  height: 1px;
  background: rgba(14,20,18,.08);
}
.type-scale{
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}
.type-scale li{
  font-family: "Antonio", "Inter", sans-serif;
  font-weight: 700;
  color: rgba(14,20,18,.55);
  line-height: 1;
}

/* === i6: Retícula 12 col === */
.idea-grid{
  padding: 14px 16px;
  background:
    linear-gradient(180deg, #ffffff 0%, #fafaf6 100%);
}
.grid-svg{ width:100%; height: calc(100% - 8px); display:block; }
.grid-cols rect{
  fill: rgba(244, 156, 235, .10);
  stroke: rgba(244, 156, 235, .22);
  stroke-width: .5;
}
.grid-mod{
  fill: rgba(14, 20, 18, .82);
}
.grid-mod--big{
  fill: rgba(14, 20, 18, .92);
}

/* === i7: Mood / atributos === */
.idea-mood{
  padding: 14px 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background:
    radial-gradient(100% 130% at 0% 0%, rgba(177, 132, 255, .12), transparent 60%),
    #ffffff;
}
.mood-row--shapes{
  display: flex;
  align-items: center;
  gap: 10px;
}
.mood-shape{ display: inline-block; }
.mood-shape--circle{
  width: 20px; height: 20px;
  background: linear-gradient(135deg, #F49CEB 0%, #B184FF 100%);
  border-radius: 50%;
}
.mood-shape--square{
  width: 20px; height: 20px;
  background: linear-gradient(135deg, #8CD6FF 0%, #4ea3ff 100%);
  border-radius: 5px;
}
.mood-shape--tri{
  width: 0; height: 0;
  background: transparent;
  border-left: 11px solid transparent;
  border-right: 11px solid transparent;
  border-bottom: 20px solid #0E1412;
}
.mood-shape--ring{
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 3px solid #0E1412;
  background: transparent;
}
.mood-tags{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
}
.mood-tags li{
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(14,20,18,.06);
  color: rgba(14,20,18,.7);
}
.mood-bars{
  display: grid;
  gap: 5px;
  margin-top: 2px;
}
.mood-bar{
  display: grid;
  grid-template-columns: 60px 1fr;
  align-items: center;
  gap: 8px;
}
.mood-bar-label{
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .04em;
  color: rgba(14,20,18,.55);
  text-transform: uppercase;
}
.mood-bar-track{
  height: 4px;
  border-radius: 999px;
  background: rgba(14,20,18,.08);
  overflow: hidden;
  display: block;
}
.mood-bar-fill{
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #F49CEB 0%, #B184FF 60%, #8CD6FF 100%);
  border-radius: 999px;
}

/* === i8: Mockup móvil === */
.idea-mobile{
  padding: 12px;
  background: linear-gradient(180deg, #f3f4ef 0%, #ffffff 100%);
}
.mobile-frame{
  position: relative;
  width: 100%;
  height: 100%;
  background: #0E1412;
  border-radius: 20px;
  border: 4px solid #0E1412;
  box-shadow: 0 12px 28px rgba(0,0,0,.18), inset 0 0 0 1px rgba(255,255,255,.04);
  overflow: hidden;
}
.mobile-notch{
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 38%;
  height: 14px;
  background: #0E1412;
  border-radius: 0 0 10px 10px;
  z-index: 2;
}
.mobile-screen{
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #f4f4f0 0%, #ffffff 100%);
  padding: 22px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mobile-head{
  width: 50%;
  height: 8px;
  border-radius: 3px;
  background: rgba(14,20,18,.7);
}
.mobile-hero{
  width: 100%;
  height: 38%;
  border-radius: 8px;
  background: linear-gradient(135deg, #F49CEB 0%, #B184FF 50%, #8CD6FF 100%);
}
.mobile-row{
  height: 6px;
  border-radius: 3px;
  background: rgba(14,20,18,.18);
}
.mobile-row--short{ width: 60%; }
.mobile-cards{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 4px;
}
.mobile-cards span{
  height: 38px;
  border-radius: 6px;
  background: rgba(14,20,18,.08);
  border: 1px solid rgba(14,20,18,.12);
}
.mobile-cta{
  margin-top: auto;
  height: 16px;
  border-radius: 999px;
  background: #0E1412;
}
.logo-scribble{
  position: absolute;
  inset: 0;
  padding: 10px 16px;
}
.logo-scribble-svg{
  width: 100%;
  height: 100%;
  display: block;
}
.logo-scribble-word{
  font-family: "Antonio", "Inter", sans-serif;
  font-size: 126px;
  font-weight: 700;
  letter-spacing: .06em;
  fill: rgba(18, 24, 22, .18);
  fill-opacity: 0;
  stroke: rgba(18, 24, 22, .96);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  paint-order: stroke;
}
.logo-scribble-line{
  fill: none;
  stroke: rgba(18, 24, 22, .35);
  stroke-width: 2.6;
  stroke-linecap: round;
}
.box-palette{
  overflow: hidden;
  background: rgba(255,255,255,.92);
}
.palette-stack{
  position: absolute;
  inset: 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}
.palette-swatch{
  width: 100%;
  aspect-ratio: 1 / 1;
  flex: 0 0 auto;
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 4px 12px rgba(0,0,0,.12);
  transition:
    background-color .55s ease,
    transform .35s ease,
    box-shadow .35s ease;
}
.palette-swatch.is-active{
  transform: translateX(2px) scale(1.03);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65), 0 8px 18px rgba(0,0,0,.18);
}
/* Posiciones: cards en los bordes, centro libre para el copy */
.i1{ width:380px; height:110px; left:40px; top:60px; transform: rotate(-2deg); }
.i2{ width: 60px; height:260px; right:40px; top:60px; }
.i3{ width:170px; height:260px; left:30px; bottom:50px; transform: rotate(-1.5deg); }
.i4{ width:200px; height:150px; left:54%; top:18%; transform: rotate(4deg); }
.i5{ width:220px; height:170px; right:60px; bottom:70px; transform: rotate(-1.5deg); }
.i6{ width:260px; height:150px; left:-30px; top:42%; transform: rotate(-3deg); }
.i7{ width:200px; height:120px; right:-20px; top:48%; transform: rotate(2deg); }
.i8{ width:170px; height:300px; left:50%; margin-left:60px; bottom:-30px; transform: rotate(3deg); display: none; }
@media (max-width: 980px){
  #s1p-shape.s1-shape{
    min-height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 28px 0 48px;
    gap: 18px;
  }
  #s1p-shape .shape-head{
    position: static;
    transform: none;
    width: min(92vw, 720px);
    padding: 0 14px;
    text-align: center;
  }
  #s1p-shape .shape-stage.shape-stage--standalone{
    position: static;
    transform: none;
    margin: 0 auto;
    width: min(94vw, 700px);
    height: auto;
    min-height: 480px;
    opacity: 1;
  }
  #s1p-shape .shape-stage--standalone .workarea{
    position: relative;
    inset: 0;
    grid-template-columns: 1fr;
    grid-auto-rows: minmax(140px, auto);
    gap: 14px;
    padding: 12px;
  }
  #s1p-shape .shape-stage--standalone .workarea .s-a,
  #s1p-shape .shape-stage--standalone .workarea .s-b,
  #s1p-shape .shape-stage--standalone .workarea .s-c{
    transform: none;
    grid-column: 1;
  }
  /* s1p-final: ajustar altura para evitar gap en blanco en mobile */
  #s1p-final.s1-final{
    min-height: auto;
    grid-template-rows: auto auto;
    row-gap: 18px;
    padding: 32px 0 48px;
  }
  #s1p-final .final-board,
  #s1p-final .final-board--shared.is-floating{
    height: min(58vh, 460px);
  }
  .logo-scribble{
    padding: 10px 12px;
  }
  .logo-scribble-word{
    font-size: 96px;
  }
  /* Mobile: mostrar solo 4 cards bien colocadas */
  .i1{ width:62vw; left:6vw; top:5vh; height:80px; transform: rotate(-2deg); }
  .i2{ right:6vw; top:7vh; height:24vh; width:46px; }
  .i3{ display:none; }
  .i4{ width:64vw; top:18vh; left:18vw; height:130px; transform: rotate(3deg); }
  .i5{ right:6vw; bottom:6vh; width:42vw; height:120px; transform: rotate(-2deg); }
  .i6{ display:none; }
  .i7{ display:none; }
  .i8{ display:none; }
}

/* ===== 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;
}
.shape-stage.shape-stage--standalone{
  position: absolute;
  left: 50%;
  /* Anclado bajo el head (no centrado) para que las cards no se
     solapen con el título y el párrafo de "Le damos forma". */
  top: calc(6vh + 320px);
  transform: translateX(-50%);
  width: min(1080px, 88vw);
  height: min(58vh, 560px);
  margin: 0;
}
.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 — siempre visible */
.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;
  pointer-events: none;
  transition: opacity .45s cubic-bezier(.22,.61,.36,1),
              transform .45s cubic-bezier(.22,.61,.36,1);
}

/* Transición de layout — pequeño fade + scale al cambiar data-layout */
.final-board{
  transition: background-color .5s ease;
}

/* Centrado fijo del board cuando NO está pinneado por el bridge.
   !important para ganar sobre inline GSAP residuales del pin de la bridge (transform,
   inset, etc.) — antes el clearProps:'all' en onLeave rompía el pin al volver atrás. */
.final-board--shared.is-floating{
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  transform: translate(-50%, -50%) !important;
  z-index: 5;
  width: min(1100px, 88vw);
  height: min(62vh, 640px);
  transition: opacity .55s cubic-bezier(.22,.61,.36,1),
              visibility .55s linear;
}
/* En Fase 3 (galería) el board desaparece con fade — no display:none.
   !important para ganar sobre cualquier inline residual de GSAP (autoAlpha). */
.final-board--shared.is-hidden-floating{
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
/* Beat de intro de Fase 2: el board se atenúa mientras aparece el título
   "Lo hacemos realidad", para que se lea limpio sin solaparse con el demo. */
.final-board--shared.is-intro-dim{
  opacity: .1 !important;
  pointer-events: none !important;
  transition: opacity .45s cubic-bezier(.22,.61,.36,1) !important;
}
.final-board[data-changing] .final-scene{
  opacity: 0;
  transform: scale(.98) translateY(4px);
}

/* === Estado base "propuesta" — diseño final cerrado ===
   Se muestra en S1-final (Diseño cerrado contigo) como mockup final entregable. */
.final-board[data-layout="propuesta"] .final-scene-header{
  justify-content: space-between;
  align-items: center;
}
.final-board[data-layout="propuesta"] .final-logo{
  background: linear-gradient(135deg, #0E1412 0%, #3A4440 100%);
  color: #f4f5f3;
  letter-spacing: .04em;
}
.final-board[data-layout="propuesta"] .final-tagline{
  max-width: 580px;
  font-size: 13.5px;
  color: var(--text-hi);
  line-height: 1.45;
  font-weight: 500;
  letter-spacing: -.005em;
}
.final-board[data-layout="propuesta"] .final-strip{
  opacity: 1;
  transform: none;
  gap: 6px;
  margin: 0 0 6px;
}
.final-board[data-layout="propuesta"] .final-strip span{
  flex: 0 0 auto;
  width: 56px;
  height: 8px;
  background: rgba(14,20,18,.18);
}
.final-board[data-layout="propuesta"] .final-strip span:nth-child(4){
  width: 26px;
  background: #0E1412;
  border-radius: 999px;
  height: 14px;
  align-self: center;
}
.final-board[data-layout="propuesta"] .final-scene-body{
  grid-template-columns: minmax(0, 1.3fr) minmax(220px, 0.9fr);
  align-items: stretch;
  gap: 14px;
}
.final-board[data-layout="propuesta"] .final-main{
  position: relative;
  min-height: 220px;
  overflow: hidden;
  background:
    linear-gradient(135deg, #F49CEB 0%, #B184FF 45%, #8CD6FF 100%);
  background-size: 200% 200%;
  animation: heroShiftFinal 10s ease-in-out infinite;
}
.final-board[data-layout="propuesta"] .final-main::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(80% 60% at 20% 100%, rgba(14,20,18,.18), transparent 60%),
    radial-gradient(60% 70% at 100% 0%, rgba(255,255,255,.30), transparent 65%);
}
.final-board[data-layout="propuesta"] .final-main::after{
  content: "";
  position: absolute;
  left: 18px;
  bottom: 18px;
  right: 30%;
  height: 8px;
  border-radius: 4px;
  background: rgba(255,255,255,.85);
  box-shadow:
    0 -16px 0 -2px rgba(255,255,255,.7),
    0 -30px 0 -2px rgba(255,255,255,.55),
    0 -48px 0 -1px rgba(255,255,255,.45);
}
.final-board[data-layout="propuesta"] .final-side{
  opacity: 1;
  transform: none;
  position: relative;
  min-height: 220px;
  background: #f7f8f4;
  border-radius: 14px;
}
.final-board[data-layout="propuesta"] .final-side::before{
  content: "";
  position: absolute;
  inset: 16px;
  background:
    /* mini header */
    linear-gradient(rgba(14,20,18,.7) 0 0) 0 4%/40% 6px no-repeat,
    /* lines */
    linear-gradient(rgba(14,20,18,.16) 0 0) 0 22%/100% 5px no-repeat,
    linear-gradient(rgba(14,20,18,.16) 0 0) 0 32%/100% 5px no-repeat,
    linear-gradient(rgba(14,20,18,.16) 0 0) 0 42%/72% 5px no-repeat,
    /* card */
    linear-gradient(rgba(244,156,235,.22) 0 0) 0 58%/100% 46px no-repeat,
    /* CTA */
    linear-gradient(#0E1412 0 0) 0 100%/60% 14px no-repeat;
  border-radius: 8px;
}
@keyframes heroShiftFinal {
  0%, 100% { background-position: 0% 0%; }
  50% { background-position: 100% 100%; }
}

/* === ONE PAGE === diseño con secciones encadenadas verticalmente */
.final-board[data-layout="one-page"] .final-scene-header{
  justify-content: center;
  text-align: center;
}
.final-board[data-layout="one-page"] .final-logo{
  background: #0E1412;
  color: #f4f5f3;
}
.final-board[data-layout="one-page"] .final-tagline{
  text-align: center;
  max-width: 540px;
  margin: 4px auto 0;
  font-size: 13px;
  color: var(--text-hi);
}
.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: 280px;
  overflow: hidden;
  border-radius: 14px;
  background: linear-gradient(180deg, #fafaf6 0%, #ffffff 100%);
}
.final-board[data-layout="one-page"] .final-main::before{
  content: "";
  position: absolute;
  inset: 14px 14px 0;
  border-radius: 12px;
  background:
    /* Hero band con gradiente */
    linear-gradient(135deg, #F49CEB 0%, #B184FF 100%) 0 0/100% 38% no-repeat,
    /* Sección 2 */
    linear-gradient(rgba(14,20,18,.05) 0 0) 0 40%/100% 16% no-repeat,
    linear-gradient(rgba(14,20,18,.08) 0 0) 8% 44%/30% 4px no-repeat,
    linear-gradient(rgba(14,20,18,.08) 0 0) 8% 50%/22% 4px no-repeat,
    /* Sección 3 */
    linear-gradient(#fff 0 0) 0 58%/100% 18% no-repeat,
    linear-gradient(rgba(14,20,18,.12) 0 0) 10% 64%/26% 22% no-repeat,
    linear-gradient(rgba(14,20,18,.12) 0 0) 40% 64%/26% 22% no-repeat,
    linear-gradient(rgba(14,20,18,.12) 0 0) 70% 64%/22% 22% no-repeat,
    /* Sección 4 CTA */
    linear-gradient(#0E1412 0 0) 0 90%/100% 8% no-repeat;
  background-color: #fafafa;
}
.final-board[data-layout="one-page"] .final-main::after{
  /* Botones laterales tipo navigation dots */
  content: "";
  position: absolute;
  right: 22px;
  top: 50%;
  width: 6px;
  height: 80px;
  transform: translateY(-50%);
  background:
    linear-gradient(#0E1412 0 0) 0 0/100% 6px no-repeat,
    linear-gradient(rgba(14,20,18,.25) 0 0) 0 30%/100% 6px no-repeat,
    linear-gradient(rgba(14,20,18,.25) 0 0) 0 60%/100% 6px no-repeat,
    linear-gradient(rgba(14,20,18,.25) 0 0) 0 100%/100% 6px no-repeat;
}

/* === WEB COMPLETA === sidebar de navegación + contenido multipágina */
.final-board[data-layout="web-completa"] .final-tagline{
  margin-top: 6px;
  max-width: none;
  font-size: 12px;
  color: var(--text-med);
}
.final-board[data-layout="web-completa"] .final-logo{
  background: #f0f0ec;
  color: #1f1f1f;
}
.final-board[data-layout="web-completa"] .final-main{
  position: relative;
  background: #ffffff;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(14,20,18,.06);
}
.final-board[data-layout="web-completa"] .final-main::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    /* breadcrumb */
    linear-gradient(rgba(14,20,18,.12) 0 0) 4% 6%/30% 4px no-repeat,
    /* page title */
    linear-gradient(rgba(14,20,18,.85) 0 0) 4% 14%/55% 12px no-repeat,
    /* lines */
    linear-gradient(rgba(14,20,18,.12) 0 0) 4% 26%/92% 5px no-repeat,
    linear-gradient(rgba(14,20,18,.12) 0 0) 4% 33%/88% 5px no-repeat,
    linear-gradient(rgba(14,20,18,.12) 0 0) 4% 40%/72% 5px no-repeat,
    /* article image */
    linear-gradient(135deg, rgba(140,214,255,.5), rgba(177,132,255,.4)) 4% 55%/42% 30% no-repeat,
    /* article 2 image */
    linear-gradient(135deg, rgba(244,156,235,.45), rgba(177,132,255,.35)) 54% 55%/42% 30% no-repeat,
    /* article 1 lines */
    linear-gradient(rgba(14,20,18,.18) 0 0) 4% 92%/24% 5px no-repeat,
    linear-gradient(rgba(14,20,18,.18) 0 0) 54% 92%/24% 5px no-repeat;
}
.final-board[data-layout="web-completa"] .final-side{
  opacity: 1;
  transform: none;
  background: #0E1412;
  border-radius: 14px;
  position: relative;
  overflow: hidden;
}
.final-board[data-layout="web-completa"] .final-side::before{
  content: "";
  position: absolute;
  inset: 16px;
  background:
    /* search */
    linear-gradient(rgba(255,255,255,.16) 0 0) 0 4%/100% 18px no-repeat,
    /* nav items */
    linear-gradient(rgba(255,255,255,.92) 0 0) 0 22%/100% 6px no-repeat,
    linear-gradient(rgba(255,255,255,.32) 0 0) 0 30%/80% 6px no-repeat,
    linear-gradient(rgba(255,255,255,.32) 0 0) 0 38%/88% 6px no-repeat,
    linear-gradient(rgba(255,255,255,.32) 0 0) 0 46%/70% 6px no-repeat,
    linear-gradient(rgba(255,255,255,.32) 0 0) 0 54%/82% 6px no-repeat,
    /* CTA */
    linear-gradient(linear-gradient(135deg, #F49CEB, #B184FF)) 0 88%/100% 18px no-repeat,
    /* fallback CTA solido */
    linear-gradient(135deg, #F49CEB 0%, #B184FF 100%) 0 88%/100% 18px no-repeat;
  border-radius: 6px;
}

/* === TIENDA ONLINE === productos + carrito lateral */
.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;
  color: var(--text-med);
}
.final-board[data-layout="tienda"] .final-logo{
  background: linear-gradient(135deg, #F49CEB 0%, #B184FF 100%);
  color: #fff;
}

/* Grid de 3 productos con colores de marca */
.final-board[data-layout="tienda"] .final-main{
  position: relative;
  min-height: 270px;
  border-radius: 14px;
  background: #faf9f6;
  overflow: hidden;
}
.final-board[data-layout="tienda"] .final-main::before{
  content: "";
  position: absolute;
  inset: 16px 18px 20px;
  background:
    /* Card 1 con gradiente rosa-morado */
    linear-gradient(135deg, #F49CEB 0%, #B184FF 100%) 0 0/30% 64% no-repeat,
    /* precio */
    linear-gradient(#0E1412 0 0) 4% 68%/14% 6px no-repeat,
    /* nombre */
    linear-gradient(rgba(14,20,18,.22) 0 0) 4% 80%/22% 4px no-repeat,
    linear-gradient(rgba(14,20,18,.22) 0 0) 4% 88%/16% 4px no-repeat,

    /* Card 2 azul-menta */
    linear-gradient(135deg, #8CD6FF 0%, #94D3B7 100%) 36% 0/30% 64% no-repeat,
    linear-gradient(#0E1412 0 0) 40% 68%/14% 6px no-repeat,
    linear-gradient(rgba(14,20,18,.22) 0 0) 40% 80%/22% 4px no-repeat,
    linear-gradient(rgba(14,20,18,.22) 0 0) 40% 88%/16% 4px no-repeat,

    /* Card 3 oscuro */
    linear-gradient(135deg, #1F1F22 0%, #41506B 100%) 72% 0/28% 64% no-repeat,
    linear-gradient(#0E1412 0 0) 76% 68%/14% 6px no-repeat,
    linear-gradient(rgba(14,20,18,.22) 0 0) 76% 80%/22% 4px no-repeat,
    linear-gradient(rgba(14,20,18,.22) 0 0) 76% 88%/16% 4px no-repeat;
}
.final-board[data-layout="tienda"] .final-main::after{
  /* badge SALE */
  content: "SALE";
  position: absolute;
  top: 22px;
  left: 22px;
  padding: 3px 8px;
  border-radius: 4px;
  background: #0E1412;
  color: #fff;
  font-family: "Inter", sans-serif;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .14em;
}

/* Carrito lateral más detallado */
.final-board[data-layout="tienda"] .final-side{
  opacity: 1;
  transform: none;
  position: relative;
  background: #ffffff;
  border: 1px solid rgba(14,20,18,.08);
  border-radius: 14px;
}
.final-board[data-layout="tienda"] .final-side::before{
  content: "";
  position: absolute;
  inset: 14px;
  background:
    /* header "Carrito" */
    linear-gradient(#0E1412 0 0) 0 0/50% 8px no-repeat,
    /* line item 1 */
    linear-gradient(rgba(244,156,235,.5) 0 0) 0 16%/18% 24px no-repeat,
    linear-gradient(rgba(14,20,18,.18) 0 0) 24% 18%/60% 4px no-repeat,
    linear-gradient(rgba(14,20,18,.7) 0 0) 24% 26%/22% 6px no-repeat,
    /* line item 2 */
    linear-gradient(rgba(140,214,255,.5) 0 0) 0 44%/18% 24px no-repeat,
    linear-gradient(rgba(14,20,18,.18) 0 0) 24% 46%/55% 4px no-repeat,
    linear-gradient(rgba(14,20,18,.7) 0 0) 24% 54%/22% 6px no-repeat,
    /* total */
    linear-gradient(rgba(14,20,18,.08) 0 0) 0 74%/100% 1px no-repeat,
    linear-gradient(rgba(14,20,18,.16) 0 0) 0 78%/24% 5px no-repeat,
    linear-gradient(#0E1412 0 0) 60% 78%/40% 7px no-repeat,
    /* CTA Pagar */
    linear-gradient(135deg, #F49CEB 0%, #B184FF 100%) 0 92%/100% 18px no-repeat;
  border-radius: 4px;
}

/* === LANDING PAGE === hero conversión + formulario */
.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-tagline{
  font-size: 12px;
  color: var(--text-med);
}
.final-board[data-layout="landing"] .final-logo{
  background: #94D3B7;
  color: #0E1412;
}
.final-board[data-layout="landing"] .final-main{
  min-height: 240px;
  position: relative;
  border-radius: 14px;
  background: linear-gradient(135deg, #0E1412 0%, #3A4440 100%);
  overflow: hidden;
}
.final-board[data-layout="landing"] .final-main::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    /* Glow rosa-morado */
    radial-gradient(80% 60% at 20% 0%, rgba(244,156,235,.35), transparent 60%),
    radial-gradient(80% 70% at 100% 100%, rgba(140,214,255,.30), transparent 60%);
}
.final-board[data-layout="landing"] .final-main::after{
  content: "";
  position: absolute;
  inset: 20px 22px;
  background:
    /* kicker */
    linear-gradient(rgba(255,255,255,.45) 0 0) 0 8%/26% 5px no-repeat,
    /* H1 mega */
    linear-gradient(#fff 0 0) 0 22%/80% 14px no-repeat,
    linear-gradient(#fff 0 0) 0 36%/60% 14px no-repeat,
    /* Sub */
    linear-gradient(rgba(255,255,255,.6) 0 0) 0 56%/72% 6px no-repeat,
    linear-gradient(rgba(255,255,255,.6) 0 0) 0 64%/56% 6px no-repeat,
    /* CTAs */
    linear-gradient(#fff 0 0) 0 88%/28% 18px no-repeat,
    linear-gradient(rgba(255,255,255,.0) 0 0) 32% 88%/24% 18px no-repeat,
    linear-gradient(rgba(255,255,255,.3) 0 0) 32% 88%/1px 18px no-repeat;
}

/* Form panel a la derecha */
.final-board[data-layout="landing"] .final-side{
  opacity: 1;
  transform: none;
  min-height: 240px;
  position: relative;
  background: #ffffff;
  border: 1px solid rgba(14,20,18,.08);
  border-radius: 14px;
}
.final-board[data-layout="landing"] .final-side::before{
  content: "";
  position: absolute;
  inset: 18px;
  background:
    /* badge "Reserva ya" */
    linear-gradient(rgba(244,156,235,.45) 0 0) 0 0/40% 14px no-repeat,
    /* title del form */
    linear-gradient(#0E1412 0 0) 0 14%/72% 8px no-repeat,
    linear-gradient(#0E1412 0 0) 0 22%/52% 8px no-repeat,
    /* inputs (4) */
    linear-gradient(rgba(14,20,18,.08) 0 0) 0 36%/100% 16px no-repeat,
    linear-gradient(rgba(14,20,18,.08) 0 0) 0 52%/100% 16px no-repeat,
    linear-gradient(rgba(14,20,18,.08) 0 0) 0 68%/100% 16px no-repeat,
    /* CTA enviar */
    linear-gradient(#0E1412 0 0) 0 92%/100% 18px no-repeat;
  border-radius: 4px;
}

/* En FASE 1 mantenemos visible el mockup "propuesta"; ya no se oculta. */

/* 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 */
/* one-page no usa nav strip */
.final-board[data-layout="one-page"] .final-strip{
  opacity: 0;
  transform: translateY(-6px) scaleY(.5);
  transform-origin: top;
}
/* one-page no usa sidebar */
.final-board[data-layout="one-page"] .final-side{
  opacity: 0;
  transform: translateY(10px);
}
.final-board[data-layout="one-page"] .final-scene-body{
  grid-template-columns: 1fr;
}
.final-board[data-layout="one-page"] .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 IZQUIERDA + contenido derecha) */
.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-side{
  grid-column: 1;
  grid-row: 1;
}
.final-board[data-layout="web-completa"] .final-main{
  grid-column: 2;
  grid-row: 1;
}
.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: clamp(136px, 10vw, 180px);
  height: clamp(190px, 24vh, 234px);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(248,249,250,.88));
  border:1px solid rgba(0,0,0,.06);
  box-shadow: 0 14px 40px rgba(0,0,0,.10);
  display:flex;
  flex-direction: column;
  align-items:flex-start;
  justify-content:flex-start;
  gap: 8px;
  padding: 14px 12px;
  text-align: left;
  color:#17201d;
  cursor:pointer;
  backdrop-filter: blur(14px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  overflow: hidden;
  transition:
    opacity .25s ease,
    transform .25s ease,
    box-shadow .25s ease,
    background .25s ease,
    border-color .25s ease;
}
.final-nav-kicker{
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color:#6a7471;
}
.final-nav-title{
  font-family: "Antonio", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: clamp(24px, 2vw, 32px);
  line-height: .9;
  letter-spacing: -.01em;
  color:#0f1715;
  text-transform: none;
  overflow-wrap: normal;
}
.final-nav-sub{
  font-size: 11px;
  line-height: 1.38;
  color:#52605b;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}
.final-nav--left{ left: 26px; }
.final-nav--right{ right: 26px; }

@media (hover:hover) and (pointer:fine){
  .final-nav:hover{
    opacity:1;
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(250,251,252,.92));
    border-color: rgba(0,0,0,.11);
    transform: translateY(-50%) scale(1.03);
    box-shadow: 0 20px 56px rgba(0,0,0,.14);
  }
}
@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: none;
}
#s2:not(.is-build-active) .final-nav{
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
#s2.is-build-active .final-nav:not([hidden]){
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transition:
    transform .25s ease,
    box-shadow .25s ease,
    background .25s ease,
    border-color .25s ease;
}
#s2 .final-nav--left{
  left: clamp(170px, 12vw, 260px);
}
#s2 .final-nav--right{
  right: clamp(120px, 10vw, 240px);
}

#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 horizontal — slider controlado por JS (snap card a card) */
#s2 .s2-canvas-wrap{
  position: relative;
  max-width: 100vw;
  margin: clamp(80px, 12vh, 140px) 0 clamp(80px, 12vh, 140px);
  z-index: 1;
  --card-w: clamp(260px, 28vw, 380px);
  --card-gap: clamp(18px, 2vw, 28px);
  --side-pad: max(24px, calc((100vw - var(--card-w)) / 2));
  --fade-w: clamp(40px, 8vw, 120px);
  /* Aire vertical generoso para que las sombras respiren */
  padding: clamp(60px, 8vh, 110px) 0;
  /* Recorta lo que se sale horizontal (cards fuera del slider), permite sombras verticales */
  overflow-x: hidden;
  overflow-y: visible;
  /* Fade lateral aplicado al wrap */
  -webkit-mask-image: linear-gradient(90deg,
    transparent 0%,
    #000 var(--fade-w),
    #000 calc(100% - var(--fade-w)),
    transparent 100%);
          mask-image: linear-gradient(90deg,
    transparent 0%,
    #000 var(--fade-w),
    #000 calc(100% - var(--fade-w)),
    transparent 100%);
}
#s2 .s2-canvas{
  display: flex;
  gap: var(--card-gap);
  padding: 0 var(--side-pad);
  /* Sin scroll nativo: el slider se mueve con transform via JS */
  overflow: visible;
  align-items: center;
  transition: transform .55s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}
#s2 .s2-canvas::-webkit-scrollbar{ display: none; }

/* Meta superior: contador + nombre actual */
#s2 .s2-canvas-meta{
  position: relative;
  z-index: 3;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: clamp(14px, 2vw, 24px);
  margin-bottom: clamp(18px, 2.5vh, 30px);
  padding: 0 24px;
  font-family: "Inter", sans-serif;
}
#s2 .s2-canvas-counter{
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(14,20,18,.55);
  font-variant-numeric: tabular-nums;
}
#s2 .s2-canvas-current-name{
  font-family: "Antonio", "Inter", sans-serif;
  font-weight: 700;
  font-size: clamp(18px, 2.2vw, 26px);
  letter-spacing: -.01em;
  color: var(--text-hi);
  line-height: 1;
  transition: opacity .35s ease, transform .35s ease;
}
#s2 .s2-canvas-current-name.is-changing{
  opacity: 0;
  transform: translateY(-4px);
}

/* Flechas de navegación */
#s2 .s2-canvas-arrow{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(14,20,18,.10);
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #0E1412;
  cursor: pointer;
  box-shadow:
    0 1px 2px rgba(14,20,18,.04),
    0 12px 26px rgba(14,20,18,.10);
  transition: transform .25s ease, background-color .25s ease, opacity .25s ease, color .25s ease, box-shadow .25s ease;
}
#s2 .s2-canvas-arrow:hover{
  transform: translateY(-50%) scale(1.06);
  background: #0E1412;
  color: #ffffff;
  box-shadow: 0 14px 30px rgba(14,20,18,.22);
}
#s2 .s2-canvas-arrow--prev{ left: clamp(12px, 3vw, 40px); }
#s2 .s2-canvas-arrow--next{ right: clamp(12px, 3vw, 40px); }
#s2 .s2-canvas-arrow[aria-disabled="true"]{
  opacity: .25;
  pointer-events: none;
}

/* Dots */
#s2 .s2-canvas-dots{
  position: relative;
  z-index: 3;
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
  margin-top: clamp(18px, 3vh, 32px);
}
#s2 .s2-canvas-dots button{
  width: 26px;
  height: 4px;
  border-radius: 999px;
  border: 0;
  padding: 0;
  background: rgba(14,20,18,.14);
  cursor: pointer;
  transition: background-color .35s ease, width .35s ease;
}
#s2 .s2-canvas-dots button.is-active{
  background: #0E1412;
  width: 46px;
}
#s2 .s2-canvas-dots button:hover{ background: rgba(14,20,18,.4); }

@media (max-width: 720px){
  #s2 .s2-canvas-arrow{ display: none; }
  #s2 .s2-canvas-wrap{
    padding: 24px 16px 12px;
    margin: 24px 0 32px;
    --card-w: clamp(240px, 78vw, 320px);
  }
  #s2 .s2-canvas-meta{ margin-bottom: 14px; }
  #s2 .s2-canvas-dots{ margin-top: 18px; }
}

#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(46px, 8.2vw, 104px);
  letter-spacing: -.015em;
  line-height: .92;
  max-width: 11.5ch;
  background: linear-gradient(90deg, #F49CEB 0%, #B184FF 36%, #8CD6FF 72%, #6b7276 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow: none;
}
/* En mobile bajamos el tamaño para que no se corte por la derecha */
@media (max-width: 720px){
  #s2 .build-head--intro .build-title{
    font-size: clamp(36px, 9vw, 56px);
    line-height: 1;
  }
}
#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(14,20,18,.10); opacity:0;
}
#s2 .build-head--intro,
#s2 .build-head--proj{
  padding-left: clamp(96px, 9vw, 128px);
}
#s2 .build-title--proj{
  max-width: none;
  font-size: clamp(46px, 7.6vw, 96px);
  /* line-height 1.0 (no 0.92) para que los descendientes de "y" no queden cortados */
  line-height: 1.0;
}
#s2 .build-title--proj .tw-line{
  display: block;
  white-space: nowrap;
  /* padding-bottom para que el clip-path no recorte descendentes de tw-word inline-block */
  padding-bottom: 0.1em;
}

/* Header de Fase 3 ocupando pantalla completa con efecto typewriter.
   margin-top negativo "tira" el header hacia arriba durante el pin, así el
   título queda CENTRADO en viewport y no debajo del intro de Fase 2 que ocupa
   ~280px en la parte superior. */
#s2 .build-head--proj{
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  margin-top: -28vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: 0;
  padding-inline: clamp(96px, 9vw, 128px);
}
#s2 .build-head--proj-inner{
  position: relative;
  z-index: 1;
  width: 100%;
  text-align: left;
  max-width: 1100px;
}
#s2 .build-head--proj .build-kicker{
  margin-bottom: 14px;
}

/* Typewriter: cada palabra revela con clip-path izquierda → derecha */
[data-typewriter] .tw-word{
  display: inline-block;
  clip-path: inset(0 100% 0 0);
  transition: clip-path .55s cubic-bezier(.22,.61,.36,1);
  will-change: clip-path;
}
[data-typewriter].is-visible .tw-word{
  clip-path: inset(0 0 0 0);
}
/* Cursor parpadeante al final del título mientras escribe */
[data-typewriter] .tw-line:last-child .tw-word:last-child::after{
  content: "";
  display: inline-block;
  width: 4px;
  height: 0.85em;
  margin-left: 6px;
  margin-bottom: -0.06em;
  background: currentColor;
  vertical-align: baseline;
  opacity: 0;
}
[data-typewriter].is-visible .tw-line:last-child .tw-word:last-child::after{
  opacity: 1;
  animation: twBlink 1s steps(2) infinite 1.6s;
}
@keyframes twBlink {
  50% { opacity: 0; }
}
/* Sub-text con fade ligero tras typewriter */
[data-fade-in]{
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .6s ease 1.4s, transform .6s cubic-bezier(.22,.61,.36,1) 1.4s;
}
[data-fade-in].is-visible{
  opacity: 1;
  transform: translateY(0);
}
/* Indicador "desliza" en el header */
.build-head-hint{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: clamp(24px, 4vh, 40px);
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(14,20,18,.10);
  background: rgba(14,20,18,.03);
  color: var(--text-med);
  font-family: "Inter", sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: 0;
  animation: hintIn .5s ease 2s forwards;
}
.build-head-hint svg{ animation: hintBounce 1.6s ease-in-out infinite 2.5s; }
@keyframes hintIn { to { opacity: 1; } }
@keyframes hintBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(3px); }
}
@media (prefers-reduced-motion: reduce){
  [data-typewriter] .tw-word{ clip-path: inset(0 0 0 0); transition: none; }
  [data-typewriter] .tw-line:last-child .tw-word:last-child::after{ display: none; }
  [data-fade-in]{ opacity: 1; transform: none; transition: none; }
  .build-head-hint{ opacity: 1; animation: none; }
}
#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% }

/* En fase 3, las guías cubren TODA la altura del viewport (fixed) y son mas visibles */
#s2 .build-head--proj .guides--cols{
  position: fixed;
  inset: 0;
  width: 100vw;
  left: 50%;
  transform: translateX(-50%);
  z-index: 0;
}
#s2 .build-head--proj .guides--cols .g{
  top: 0;
  bottom: 0;
  height: 100vh;
  transform: none;
  width: 1px;
  background: linear-gradient(180deg,
    rgba(14,20,18,0) 0%,
    rgba(14,20,18,.16) 20%,
    rgba(14,20,18,.16) 80%,
    rgba(14,20,18,0) 100%);
}
#s2 .build-head--proj > :not(.guides--cols){
  position: relative;
  z-index: 1;
}

/* =========================================================
   S2 - Galería de proyectos (carrusel horizontal)
   ========================================================= */
#s2 .proj{
  position: relative;
  margin: 0;
  opacity: 1;
  will-change: transform;
  flex: 0 0 auto;
  width: var(--card-w);
  /* Cards no activas: ligeramente reducidas + atenuadas */
  transform: scale(.88);
  filter: saturate(.85);
  transition:
    transform .55s cubic-bezier(.22,.61,.36,1),
    filter .55s ease,
    opacity .35s ease;
  opacity: .55;
}
#s2 .proj.is-active{
  transform: scale(1);
  filter: saturate(1);
  opacity: 1;
}
#s2 .proj.is-active .proj-frame{
  box-shadow:
    0 8px 18px rgba(14,20,18,.10),
    0 32px 80px rgba(14,20,18,.30);
}
#s2 .proj-link{
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: 22px;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
#s2 .proj-link:focus-visible{
  outline: 2px solid rgba(20, 24, 27, .55);
  outline-offset: 6px;
}
#s2 .proj-frame{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 22px;
  overflow: hidden;
  background:#0c0d0f;
  box-shadow: 0 22px 60px rgba(0,0,0,.22), 0 2px 4px rgba(0,0,0,.06);
  transition: transform .45s cubic-bezier(.22,.61,.36,1),
              box-shadow .45s cubic-bezier(.22,.61,.36,1),
              filter .45s cubic-bezier(.22,.61,.36,1);
  isolation: isolate;
}
#s2 .proj-frame :is(iframe, video, img.proj-poster){
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  display:block;
  object-fit: cover;
  z-index: 0;
  transition: transform .6s cubic-bezier(.22,.61,.36,1), filter .45s ease;
}

/* Aspect ratio uniforme para el carrusel (portrait menos alto para que respire) */
#s2 .proj-frame{ aspect-ratio: 4 / 5; }

/* === Marcos de dispositivo (desktop browser / mobile phone) === */
/* El video ahora vive dentro de un wrapper que simula un dispositivo. */
#s2 .proj-device{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: #0e1412;
  z-index: 0;
  overflow: hidden;
}
#s2 .proj-device video{
  position: relative !important;
  inset: auto !important;
  width: 100%;
  height: 100%;
  flex: 1 1 auto;
  object-fit: cover;
  display: block;
}

/* --- Desktop: barra de browser arriba con dots y URL --- */
#s2 .proj-device--desktop{
  padding: 0;
}
#s2 .proj-device-bar{
  flex: 0 0 auto;
  height: 28px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  background: linear-gradient(180deg, #1a1f1d 0%, #15191a 100%);
  border-bottom: 1px solid rgba(255,255,255,.04);
  position: relative;
}
#s2 .proj-device-dot{
  width: 9px; height: 9px;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  flex-shrink: 0;
}
#s2 .proj-device-dot:nth-child(1){ background: #ff5f57; }
#s2 .proj-device-dot:nth-child(2){ background: #febc2e; }
#s2 .proj-device-dot:nth-child(3){ background: #28c840; }
#s2 .proj-device-url{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  padding: 3px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  color: rgba(244,245,243,.62);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0;
  max-width: 60%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- Mobile: phone frame con notch --- */
#s2 .proj-device--mobile{
  padding: 14px clamp(28px, 18%, 56px);
  background: linear-gradient(160deg, #1c1f1d 0%, #0e1412 100%);
}
#s2 .proj-device--mobile::before{
  content: "";
  position: absolute;
  inset: 14px clamp(28px, 18%, 56px);
  border-radius: clamp(20px, 4cqw, 32px);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.06);
  pointer-events: none;
  z-index: 2;
}
#s2 .proj-device--mobile video{
  border-radius: clamp(18px, 3.6cqw, 28px);
}
#s2 .proj-device-notch{
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: 64px;
  height: 14px;
  border-radius: 0 0 12px 12px;
  background: #000;
  z-index: 3;
}

/* Overlay: gradiente + meta + info */
#s2 .proj-gradient{
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(8,10,12,.32) 0%, rgba(8,10,12,0) 28%, rgba(8,10,12,0) 50%, rgba(8,10,12,.78) 100%);
  opacity: .85;
  transition: opacity .35s ease;
}
#s2 .proj-meta{
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  font-family: "Inter", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #f4f5f3;
  background: rgba(255,255,255,.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.14);
}
#s2 .proj-meta--top{
  top: clamp(14px, 1.6vw, 22px);
  left: clamp(14px, 1.6vw, 22px);
}
#s2 .proj-meta .proj-year{
  opacity: .72;
  font-weight: 500;
}
#s2 .proj-meta .proj-year::before{
  content: "•";
  margin-right: 6px;
  opacity: .6;
}
#s2 .proj-info{
  position: absolute;
  z-index: 2;
  left: clamp(16px, 1.8vw, 24px);
  right: clamp(16px, 1.8vw, 24px);
  bottom: clamp(16px, 1.8vw, 24px);
  color: #f4f5f3;
  font-family: "Inter", sans-serif;
  display: grid;
  gap: 4px;
}
#s2 .proj-name{
  margin: 0;
  font-family: "Antonio", "Inter", sans-serif;
  font-weight: 700;
  font-size: clamp(22px, 2.4vw, 32px);
  letter-spacing: -.01em;
  line-height: 1;
}
#s2 .proj-claim{
  margin: 2px 0 0;
  font-size: clamp(13px, 1.05vw, 14.5px);
  line-height: 1.4;
  color: rgba(244,245,243,.82);
  max-width: 32ch;
}
#s2 .proj-kpi{
  margin: 10px 0 0;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .02em;
  color: rgba(244,245,243,.74);
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}
#s2 .proj-kpi-value{
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(148, 211, 183, .18);
  color: #b9efd2;
  border: 1px solid rgba(148, 211, 183, .35);
  font-family: "Antonio", "Inter", sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .03em;
}
#s2 .proj-cta{
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: start;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #f4f5f3;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.04);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .35s ease, transform .35s ease, background-color .25s ease;
}

/* Estados interactivos */
#s2 .proj-link:hover .proj-frame,
#s2 .proj-link:focus-visible .proj-frame,
#s2 .proj.is-playing .proj-frame{
  transform: translateY(-6px);
  box-shadow: 0 36px 90px rgba(0,0,0,.32), 0 4px 10px rgba(0,0,0,.10);
}
#s2 .proj-link:hover .proj-frame :is(video, img.proj-poster),
#s2 .proj-link:focus-visible .proj-frame :is(video, img.proj-poster){
  transform: scale(1.04);
  filter: saturate(1.08);
}
#s2 .proj-link:hover .proj-cta,
#s2 .proj-link:focus-visible .proj-cta,
#s2 .proj.is-playing .proj-cta{
  opacity: 1;
  transform: translateY(0);
}
#s2 .proj-link:hover .proj-cta{ background: rgba(255,255,255,.10); }
#s2 .proj-link:hover .proj-gradient{ opacity: 1; }

/* Footer de la galeria */
#s2 .s2-canvas-foot{
  max-width: 1440px;
  margin: clamp(40px, 6vh, 72px) auto 0;
  padding-top: clamp(20px, 3vw, 32px);
  border-top: 1px solid rgba(0,0,0,.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
#s2 .s2-canvas-foot-note{
  margin: 0;
  color: var(--text-med);
  font-family: "Inter", sans-serif;
  font-size: clamp(14px, 1.2vw, 16px);
  max-width: 56ch;
}
#s2 .s2-canvas-foot-link{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border-radius: 999px;
  background: #111;
  color: #fff;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform .25s ease, background-color .25s ease;
}
#s2 .s2-canvas-foot-link:hover{
  transform: translateY(-2px);
  background: #1f1f1f;
}

@media (max-width: 900px){
  #s2 .build-head--intro,
  #s2 .build-head--proj{ padding-left: 0; }
  #s2 .build-head--proj{
    min-height: auto;
    margin-top: 0;
    padding-block: 56px 24px;
    padding-inline: 18px;
  }
  #s2 .build-head--intro{
    padding-block: 56px 0;
    padding-inline: 18px;
  }
  #s2 .build-head + .build-head{ margin-top: 56px; }
  #s2 .build-title{
    max-width: 100%;
    font-size: clamp(42px, 13vw, 74px);
  }
  #s2 .build-title--proj{
    font-size: clamp(36px, 11vw, 64px);
  }
  #s2 .proj{
    opacity: 1;
    transform: none;
    width: 78vw;
    max-width: 360px;
  }
  /* En mobile, CTA siempre visible (sin hover) */
  #s2 .proj-cta{ opacity: 1; transform: none; }
  #s2 .s2-canvas-foot{
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }
  #s2 .s2-canvas-foot-link{ align-self: stretch; justify-content: center; }
}

/* =========================================================
   S2 — Slider de formatos
   ========================================================= */
#s2 .build-kicker, .phase-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 {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
}
html{
  scroll-behavior: smooth;
}
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{
  position: relative;
  --metrics-cut-top: clamp(28px, 4.8vw, 72px);
  --metrics-cut-bottom: clamp(10px, 1.8vw, 28px);
  --metrics-cut-left: clamp(70px, 14vw, 260px);
  --metrics-cut-right: clamp(140px, 22vw, 420px);
  min-height: 100vh;
  min-height: 100svh;
  padding: clamp(84px, 12vh, 142px) 0 clamp(72px, 10vh, 120px);
  background: transparent;
  overflow: clip;
}
.scene--metrics::before,
.scene--metrics::after{
  content: "";
  position: absolute;
  inset: 0;
  clip-path: polygon(
    0 var(--metrics-cut-top),
    var(--metrics-cut-left) 0,
    100% clamp(1px, .8vw, 12px),
    100% calc(100% - var(--metrics-cut-bottom)),
    calc(100% - var(--metrics-cut-right)) 100%,
    0 100%
  );
  pointer-events: none;
}
.scene--metrics::before{
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(98, 121, 159, .22) 0%, rgba(98, 121, 159, 0) 58%),
    radial-gradient(90% 110% at 0% 100%, rgba(62, 110, 92, .20) 0%, rgba(62, 110, 92, 0) 62%),
    linear-gradient(165deg, rgba(12,18,16,.98) 0%, rgba(14,20,18,.98) 52%, rgba(10,15,14,.98) 100%);
}
.scene--metrics::after{
  opacity: .16;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.045) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 3px);
  mix-blend-mode: screen;
}
/* Fallback para Themify row frames: evita puntos >100% en SVG generado */
#s3 .tb_row_frame_wrap{
  inset-block: 0 !important;
}
#s3 .tb_row_frame_top,
#s3 .tb_row_frame_bottom{
  height: clamp(56px, 7vw, 110px) !important;
  background-image: none !important;
  background-color: rgba(12,18,16,.98) !important;
  background-repeat: no-repeat !important;
}
#s3 .tb_row_frame_top{
  clip-path: polygon(0 24%, 16% 0, 100% 0, 100% 100%, 0 100%);
}
#s3 .tb_row_frame_bottom{
  clip-path: polygon(0 0, 100% 0, 100% 78%, 82% 100%, 0 100%);
}
.scene--metrics .metrics-layout{
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(280px, .95fr) minmax(440px, 1.35fr);
  gap: clamp(24px, 3vw, 44px);
  align-items: start;
}
.scene--metrics .metrics-copy{
  max-width: 560px;
}
.scene--metrics .metrics-kicker{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #cdd6d2;
  font-weight: 700;
}
.scene--metrics .metrics-kicker-dot{
  position: relative;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #6FE0B6;
  box-shadow: 0 0 0 0 rgba(111, 224, 182, .55);
  animation: metricsPulse 2.2s ease-out infinite;
}
@keyframes metricsPulse {
  0% { box-shadow: 0 0 0 0 rgba(111, 224, 182, .55); }
  70%, 100% { box-shadow: 0 0 0 10px rgba(111, 224, 182, 0); }
}
.scene--metrics .metrics-title{
  margin: 0 0 .24em;
  font-size: clamp(44px, 7vw, 96px);
  line-height: .92;
  letter-spacing: -.02em;
  color: #ecf1ee;
  font-family: "Antonio", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
.scene--metrics .metrics-sub{
  margin: 0 0 28px;
  color: #c8d1cd;
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.62;
  max-width: 46ch;
}
.scene--metrics .metrics-chips{
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.scene--metrics .metrics-chip{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(239,246,242,.14);
  background: rgba(255,255,255,.04);
  color: #d6ddda;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  transition: border-color .25s ease, background-color .25s ease, color .25s ease, transform .25s ease;
}
.scene--metrics .metrics-chip svg{
  color: #6FE0B6;
  flex-shrink: 0;
}
.scene--metrics .metrics-chip:hover{
  border-color: rgba(111, 224, 182, .42);
  background: rgba(111, 224, 182, .08);
  color: #ecf1ee;
  transform: translateY(-1px);
}
.scene--metrics .metrics-chip code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .92em;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(255,255,255,.06);
  color: #cdd6d2;
}
.scene--metrics .metrics-cta{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.scene--metrics .metrics-link{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 12px 20px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: linear-gradient(135deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.04) 100%);
  color: #edf2ef;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: none;
  text-decoration: none;
  transition: border-color .25s ease, transform .25s ease, background .25s ease, gap .25s ease;
}
.scene--metrics .metrics-link svg{
  transition: transform .25s ease;
}
.scene--metrics .metrics-link:hover{
  border-color: rgba(111, 224, 182, .55);
  background: linear-gradient(135deg, rgba(111, 224, 182, .18) 0%, rgba(140, 214, 255, .10) 100%);
  transform: translateY(-1px);
}
.scene--metrics .metrics-link:hover svg{
  transform: translateX(3px);
}
.scene--metrics .metrics-note{
  margin: 0;
  font-size: 12px;
  color: #9aa6a1;
}
.scene--metrics .audit-panel{
  position: relative;
  border-radius: 28px;
  border: 1px solid rgba(0,0,0,.10);
  background:
    linear-gradient(180deg, rgba(255,255,255,.90), rgba(248,249,250,.86)),
    rgba(255,255,255,.9);
  box-shadow: 0 28px 80px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.68);
  backdrop-filter: blur(8px);
  padding: clamp(18px, 2.2vw, 28px);
  overflow: hidden;
}
.scene--metrics .audit-panel::before{
  content: "";
  position: absolute;
  top: -55%;
  left: -45%;
  width: 58%;
  height: 210%;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.28), rgba(255,255,255,0));
  transform: rotate(12deg) translateX(-34%);
  transition: transform .72s cubic-bezier(.22,.61,.36,1);
  pointer-events: none;
}
@media (hover:hover) and (pointer:fine){
  .scene--metrics .audit-panel:hover::before{
    transform: rotate(12deg) translateX(195%);
  }
}
.scene--metrics .audit-panel-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.scene--metrics .audit-panel-titlewrap{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.scene--metrics .audit-panel-title{
  margin: 0;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #5f6764;
  font-weight: 700;
}
.scene--metrics .audit-live{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px 3px 6px;
  border-radius: 999px;
  border: 1px solid rgba(10,156,109,.25);
  background: rgba(10,156,109,.10);
  color: #0b5f45;
  font-family: "Inter", sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
}
.scene--metrics .audit-live-dot{
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, .55);
  animation: auditPulse 1.8s ease-out infinite;
}
@keyframes auditPulse {
  0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, .55); }
  70%, 100% { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
}
.scene--metrics .audit-url{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  margin-bottom: 14px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.06);
  background: rgba(248,249,250,.7);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  color: #2a3431;
}
.scene--metrics .audit-url-icon{
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 20px; height: 20px;
  border-radius: 6px;
  background: rgba(14,20,18,.06);
  color: #5f6764;
  flex-shrink: 0;
}
.scene--metrics .audit-url-host{
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #15201c;
  font-weight: 600;
}
.scene--metrics .audit-url-meta{
  font-size: 10.5px;
  color: #6c7470;
  font-family: "Inter", sans-serif;
  font-weight: 500;
  letter-spacing: .02em;
  white-space: nowrap;
}
.scene--metrics .audit-toggle{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.09);
  background: rgba(255,255,255,.65);
}
.scene--metrics .audit-toggle-btn{
  border: 0;
  /* min-width quitado y padding/white-space añadidos para que "DESKTOP"
     no se parta en 2 líneas dentro de la pill */
  padding: 0 14px;
  height: 30px;
  border-radius: 999px;
  background: transparent;
  color: #3a4340;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  flex: 0 0 auto;
  cursor: pointer;
  transition: background .22s ease, color .22s ease, transform .22s ease;
}
.scene--metrics .audit-toggle-btn.is-active{
  background: #111716;
  color: #fff;
}
.scene--metrics .audit-toggle-btn:focus-visible{
  outline: 2px solid rgba(0,0,0,.45);
  outline-offset: 1px;
}
.scene--metrics .metrics-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.3vw, 18px);
}
.scene--metrics .metric-card{
  position: relative;
  min-height: 206px;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.92);
  box-shadow: 0 14px 34px rgba(0,0,0,.07);
  padding: 18px 14px 16px;
  text-align: center;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 2px;
  overflow: hidden;
  transition: transform .35s cubic-bezier(.22,.61,.36,1),
              border-color .35s ease,
              box-shadow .35s ease;
}
.scene--metrics .metric-card:hover{
  transform: translateY(-3px);
  border-color: rgba(0,0,0,.14);
  box-shadow: 0 20px 44px rgba(0,0,0,.10);
}
.scene--metrics .metric-icon{
  position: absolute;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 24px; height: 24px;
  border-radius: 8px;
  background: rgba(14,20,18,.05);
  color: #2a3431;
}
.scene--metrics .metric-card.is-ok .metric-icon{
  background: rgba(16, 185, 129, .12);
  color: #047857;
}
.scene--metrics .metric-card.is-warn .metric-icon{
  background: rgba(245, 158, 11, .14);
  color: #b45309;
}
.scene--metrics .metric-card.is-bad .metric-icon{
  background: rgba(239, 68, 68, .14);
  color: #b91c1c;
}
.scene--metrics .metric-ring{
  width: 94px;
  height: 94px;
  margin-top: 2px;
}
.scene--metrics .metric-ring-track{
  fill: none;
  stroke: rgba(19,23,24,.08);
  stroke-width: 10;
}
.scene--metrics .metric-ring-fill{
  fill: none;
  stroke: #10b981;
  stroke-width: 10;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  stroke-dasharray: 0;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset .9s cubic-bezier(.22,.61,.36,1),
              stroke .3s ease;
  filter: drop-shadow(0 2px 6px rgba(16, 185, 129, .25));
}
.scene--metrics .metric-card.is-warn .metric-ring-fill{
  stroke: #f59e0b;
  filter: drop-shadow(0 2px 6px rgba(245, 158, 11, .25));
}
.scene--metrics .metric-card.is-bad .metric-ring-fill{
  stroke: #ef4444;
  filter: drop-shadow(0 2px 6px rgba(239, 68, 68, .25));
}
.scene--metrics .metric-value{
  margin: -2px 0 2px;
  font-size: clamp(34px, 3vw, 44px);
  line-height: 1;
  font-weight: 800;
  color: #0f1614;
  font-family: "Antonio", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-variant-numeric: tabular-nums;
}
.scene--metrics .metric-card.is-ok .metric-value{ color: #047857; }
.scene--metrics .metric-card.is-warn .metric-value{ color: #b45309; }
.scene--metrics .metric-card.is-bad .metric-value{ color: #b91c1c; }
.scene--metrics .metric-label{
  margin: 6px 0 0;
  font-size: 12.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #2a3431;
  font-weight: 700;
  font-family: "Inter", sans-serif;
}
.scene--metrics .metric-hint{
  margin: 4px 0 0;
  font-size: 10.5px;
  letter-spacing: .04em;
  color: #5f6764;
  font-family: "Inter", sans-serif;
}
.scene--metrics .webvitals{
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.scene--metrics .vital-chip{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.9);
  color: #15201c;
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
}
.scene--metrics .vital-chip.is-ok{
  border-color: rgba(10,156,109,.35);
  background: linear-gradient(180deg, rgba(238,252,247,.96), rgba(233,248,242,.88));
}
.scene--metrics .vital-chip:focus-visible{
  outline: 2px solid rgba(0,0,0,.45);
  outline-offset: 2px;
}
.scene--metrics .chip-icon{
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  font-size: 9px;
  font-weight: 800;
  background: rgba(10,156,109,.17);
  color: #0b5f45;
}
.scene--metrics .chip-key{
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
}
.scene--metrics .chip-value{
  font-size: 12px;
  color: #26312d;
}
.scene--metrics .vital-chip::after{
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translate(-50%, 8px);
  opacity: 0;
  width: max-content;
  max-width: min(42ch, 70vw);
  padding: 8px 10px;
  border-radius: 10px;
  background: #121a18;
  color: #edf2ef;
  font-size: 12px;
  line-height: 1.35;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 5;
}
.scene--metrics .vital-chip:is(:hover, :focus-visible)::after{
  opacity: 1;
  transform: translate(-50%, 0);
}
@media (max-width: 1080px){
  .scene--metrics .metrics-layout{
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
  .scene--metrics .metrics-copy{
    max-width: none;
  }
}
@media (max-width: 720px){
  .scene--metrics .metrics-grid{
    gap: 10px;
  }
  .scene--metrics .metric-card{
    min-height: 184px;
    padding-inline: 10px;
  }
  .scene--metrics .webvitals{
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
    margin-right: -6px;
  }
  .scene--metrics .vital-chip{
    flex: 0 0 auto;
  }
}
@media (prefers-reduced-motion: reduce){
  .scene--metrics .metric-ring-fill{
    transition: none;
  }
  .scene--metrics .audit-panel::before{
    transition: none;
  }
}

/* — 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{
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  padding: clamp(86px, 12vh, 142px) 0 clamp(78px, 11vh, 130px);
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(173, 188, 216, .16) 0%, rgba(173, 188, 216, 0) 56%),
    radial-gradient(90% 110% at 0% 100%, rgba(196, 210, 192, .14) 0%, rgba(196, 210, 192, 0) 60%),
    #f6f7f8;
  overflow: clip;
  display: flex;
  align-items: center;
}
.scene--reviews > .container{ /* mantiene el width: min(var(--container), 90vw) del default */ }
.scene--reviews::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .12;
  background:
    repeating-linear-gradient(0deg, rgba(10,12,14,.03) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(10,12,14,.02) 0 1px, transparent 1px 3px);
  mix-blend-mode: multiply;
}
.scene--reviews .reviews-shell{
  position: relative;
  z-index: 1;
}
.scene--reviews .reviews-head{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px 26px;
  align-items: end;
}
.scene--reviews .reviews-kicker{
  margin: 0 0 10px;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #5f6764;
  font-weight: 700;
}
.scene--reviews .reviews-title{
  margin: 0 0 .22em;
  font-size: clamp(44px, 7vw, 96px);
  line-height: .9;
  letter-spacing: -.015em;
  color: #0d1412;
  font-family: "Antonio", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
.scene--reviews .reviews-sub{
  margin: 0;
  max-width: 60ch;
  color: #2e3734;
  font-size: clamp(17px, 1.55vw, 20px);
  line-height: 1.6;
}
.scene--reviews .reviews-badges{
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}
.scene--reviews .reviews-badges li{
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.76);
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #25302c;
  font-weight: 700;
}
.scene--reviews .reviews-track-wrap{
  margin-top: clamp(22px, 3vw, 30px);
  position: relative;
}
.scene--reviews .reviews-track{
  display: flex;
  gap: clamp(14px, 2vw, 22px);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* Padding generoso para que las sombras de las cards no se recorten
     (overflow-x:auto fuerza overflow-y a auto/hidden, así que reservamos espacio). */
  padding: 20px 4px 32px;
  scroll-padding-left: 4px;
}
.scene--reviews .reviews-track::-webkit-scrollbar{ display: none; }
.scene--reviews .review-card{
  flex: 0 0 calc((100% - clamp(28px, 4vw, 44px)) / 3);
  scroll-snap-align: start;
}
/* Flechas prev/next del slider */
.scene--reviews .reviews-arrow{
  position: absolute;
  top: calc(50% - 12px);
  transform: translateY(-50%);
  z-index: 4;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(14,20,18,.10);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #0E1412;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(14,20,18,.04), 0 12px 26px rgba(14,20,18,.12);
  transition: transform .25s ease, background-color .25s ease, opacity .25s ease, color .25s ease;
}
.scene--reviews .reviews-arrow:hover{
  background: #0E1412;
  color: #fff;
  transform: translateY(-50%) scale(1.05);
}
.scene--reviews .reviews-arrow--prev{ left: -8px; }
.scene--reviews .reviews-arrow--next{ right: -8px; }
.scene--reviews .reviews-arrow[aria-disabled="true"]{
  opacity: .25;
  pointer-events: none;
}
.scene--reviews .review-card{
  position: relative;
  min-height: 328px;
  border-radius: 22px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.92);
  /* Sombra más sutil — la anterior se recortaba con el overflow del track */
  box-shadow: 0 6px 16px rgba(14,20,18,.06);
  padding: 18px 16px 16px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 12px;
  overflow: hidden;
  transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}
.scene--reviews .review-card::before{
  content: "\"";
  position: absolute;
  top: -14px;
  right: 10px;
  font-size: 158px;
  line-height: 1;
  font-family: Georgia, "Times New Roman", serif;
  color: rgba(16,20,22,.06);
  pointer-events: none;
}
@media (hover:hover) and (pointer:fine){
  .scene--reviews .review-card:hover{
    transform: translateY(-3px);
    border-color: rgba(0,0,0,.16);
    box-shadow: 0 22px 58px rgba(0,0,0,.11);
  }
}
.scene--reviews .review-person{
  display: flex;
  align-items: center;
  gap: 10px;
}
.scene--reviews .review-avatar{
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  color: #0f1715;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,.10);
  overflow: hidden;
}
.scene--reviews .review-avatar img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.scene--reviews .review-identity{
  min-width: 0;
}
.scene--reviews .review-name{
  margin: 0;
  font-size: 14px;
  color: #111a18;
  font-weight: 700;
}
.scene--reviews .review-role{
  margin: 1px 0 0;
  font-size: 12px;
  color: #5f6764;
}
.scene--reviews .review-sector{
  margin-left: auto;
  flex: 0 0 auto;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.78);
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #2e3834;
  font-weight: 700;
}
.scene--reviews .review-quote-wrap{
  display: grid;
  align-content: start;
  gap: 8px;
}
.scene--reviews .review-quote{
  margin: 0;
  color: #15201c;
  font-size: 16px;
  line-height: 1.58;
  font-weight: 500;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}
.scene--reviews .review-card.is-expanded .review-quote{
  display: block;
  -webkit-line-clamp: unset;
}
.scene--reviews .review-more{
  border: 0;
  padding: 0;
  background: none;
  color: #3f4a46;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 700;
  cursor: pointer;
  justify-self: start;
}
.scene--reviews .review-more:focus-visible{
  outline: 2px solid rgba(0,0,0,.45);
  outline-offset: 2px;
  border-radius: 6px;
}
.scene--reviews .review-impact{
  margin: 0;
  color: #2d3834;
  font-size: 13px;
  line-height: 1.45;
}
.scene--reviews .impact-pill{
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(9,122,89,.34);
  background: linear-gradient(180deg, rgba(235,250,244,.96), rgba(229,246,239,.88));
  color: #0f5f45;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-right: 6px;
}
.scene--reviews .reviews-dots{
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: clamp(14px, 2vh, 22px);
}
.scene--reviews .reviews-dot{
  width: 28px;
  height: 4px;
  border-radius: 999px;
  border: 0;
  padding: 0;
  background: rgba(14,20,18,.16);
  cursor: pointer;
  transition: background-color .35s ease, width .35s ease;
}
.scene--reviews .reviews-dot.is-active{
  background: #0E1412;
  width: 48px;
}
.scene--reviews .reviews-dot:hover{ background: rgba(14,20,18,.4); }
.scene--reviews .reviews-foot{
  margin: clamp(18px, 2.3vw, 24px) 0 0;
  color: #5c6662;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
@media (max-width: 980px){
  .scene--reviews .reviews-head{
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }
  .scene--reviews .reviews-badges{
    justify-content: flex-start;
  }
  .scene--reviews .reviews-track{
    gap: 12px;
    padding: 2px 2px 6px;
  }
  .scene--reviews .review-card{
    flex: 0 0 min(84vw, 360px);
    min-height: 324px;
  }
  .scene--reviews .reviews-arrow{ display: none; }
  .scene--reviews .reviews-dot{
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 0;
    padding: 0;
    background: rgba(18,22,24,.24);
    cursor: pointer;
  }
  .scene--reviews .reviews-dot.is-active{
    background: rgba(18,22,24,.86);
  }
}
@media (prefers-reduced-motion: reduce){
  .scene--reviews .review-card{
    transition: none;
  }
}

/* — 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{
  min-height: 100vh;
  min-height: 100svh;
  padding: 12vh 0 16vh;
  background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.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; font-size: 16px; }
.scene--contact .contact-shell{
  background:#ffffff;
  border:1px solid rgba(0,0,0,.06);
  border-radius:22px;
  box-shadow: 0 30px 80px rgba(14,20,18,.08), 0 1px 0 rgba(255,255,255,.6) inset;
  padding: clamp(24px, 3.5vw, 40px);
  max-width: 760px;
  margin: 0 auto;
}

/* CF7 form structure — limpia paragraphs */
.scene--contact .wpcf7 form p{ margin: 0 0 16px; }
.scene--contact .cf7-personalizado p{ margin: 0 0 14px; }
.scene--contact .wpcf7-form-control-wrap{ display: block; }

/* Inputs y textarea — diseño boxed limpio con focus accent */
.scene--contact .cf7-input,
.scene--contact .cf7-textarea,
.scene--contact input[type="text"],
.scene--contact input[type="email"],
.scene--contact input[type="tel"],
.scene--contact input[type="url"],
.scene--contact textarea{
  width:100%;
  border-radius: 14px;
  border: 1.5px solid rgba(14, 20, 18, .10);
  background: #fafbfc;
  padding: 14px 18px;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 15px;
  color: #15201c;
  transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
  outline: none;
  box-shadow: none;
}
.scene--contact .cf7-input::placeholder,
.scene--contact .cf7-textarea::placeholder,
.scene--contact textarea::placeholder,
.scene--contact input::placeholder{
  color: rgba(14, 20, 18, .42);
  font-weight: 400;
}
.scene--contact .cf7-input:hover,
.scene--contact .cf7-textarea:hover,
.scene--contact input:hover,
.scene--contact textarea:hover{
  border-color: rgba(14, 20, 18, .22);
  background: #ffffff;
}
.scene--contact .cf7-input:focus,
.scene--contact .cf7-textarea:focus,
.scene--contact input:focus,
.scene--contact textarea:focus{
  border-color: #B184FF;
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(177, 132, 255, .12);
}
.scene--contact .cf7-textarea,
.scene--contact textarea{
  min-height: 140px;
  resize: vertical;
  line-height: 1.5;
}

/* Checkboxes (consentimientos) */
.scene--contact .wpcf7-checkbox,
.scene--contact .wpcf7-acceptance{
  display: block;
  margin: 16px 0 4px;
}
.scene--contact .wpcf7-list-item{
  display: block;
  margin: 0 0 12px;
}
.scene--contact .wpcf7-list-item label{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(14, 20, 18, .68);
}
.scene--contact .wpcf7-list-item input[type="checkbox"]{
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: #B184FF;
  cursor: pointer;
}
.scene--contact .wpcf7-list-item-label a{
  color: #15201c;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Botón submit — pill grande con gradiente del brand */
.scene--contact .cf7-submit,
.scene--contact input[type="submit"],
.scene--contact button[type="submit"]{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  margin-top: 8px;
  padding: 16px 32px;
  border-radius: 999px;
  border: 0;
  color: #ffffff;
  background: linear-gradient(135deg, #0E1412 0%, #2a2f2d 100%);
  font-family: "Inter", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 14px 32px rgba(14, 20, 18, .18), 0 1px 0 rgba(255,255,255,.12) inset;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.scene--contact .cf7-submit:hover:not(:disabled),
.scene--contact input[type="submit"]:hover:not(:disabled),
.scene--contact button[type="submit"]:hover:not(:disabled){
  transform: translateY(-2px);
  background: linear-gradient(135deg, #B184FF 0%, #8CD6FF 100%);
  color: #0E1412;
  box-shadow: 0 20px 44px rgba(177, 132, 255, .35);
}
.scene--contact .cf7-submit:disabled{
  opacity: .65;
  cursor: not-allowed;
}

/* Spinner CF7 */
.scene--contact .wpcf7-spinner{
  margin-left: 10px;
  background-color: #B184FF;
}

/* Mensajes de error / éxito */
.scene--contact .wpcf7-not-valid-tip{
  color: #ef4444;
  font-size: 12px;
  margin-top: 6px;
}
.scene--contact .wpcf7-response-output{
  margin: 18px 0 0;
  padding: 14px 18px;
  border-radius: 12px;
  border: 1px solid rgba(14, 20, 18, .10);
  font-size: 13.5px;
  background: #fafbfc;
}
.scene--contact .wpcf7-mail-sent-ok + .wpcf7-response-output,
.scene--contact .wpcf7 form.sent .wpcf7-response-output{
  border-color: rgba(16, 185, 129, .35);
  background: rgba(16, 185, 129, .06);
  color: #047857;
}

@media (max-width: 720px){
  .scene--contact{ padding: 8vh 0 12vh; }
  .scene--contact .contact-shell{ padding: 20px 16px; border-radius: 16px; }
  .scene--contact .cf7-input,
  .scene--contact .cf7-textarea,
  .scene--contact input,
  .scene--contact textarea{ font-size: 16px; padding: 13px 16px; } /* 16px previene zoom iOS */
}

/* — 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;
}
@media (prefers-reduced-motion: reduce){
  .landing *{ transition-duration: 0s !important; animation-duration: 0s !important; }
}
/* (regla legacy de is-active eliminada — el dock define su propio estado activo) */
.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%);
}

/* En mobile reducimos aún más el blur (GPU móvil es 3-5x más débil) */
@media (max-width: 900px) {
  .hero-fixed-bg .hero-wind { filter: blur(28px) saturate(1); }
  .hero-fixed-bg .edge-glow { filter: blur(22px); }
}
@media (max-width: 600px) {
  .hero-fixed-bg .hero-wind { filter: blur(18px) saturate(1); }
  .hero-fixed-bg .edge-glow { filter: blur(16px); }
  #cta .cta-panel { backdrop-filter: none; background: rgba(255,255,255,.06); }
}

/* Reduce animaciones si el usuario pide menos */
@media (prefers-reduced-motion: reduce){
  .hero-fixed-bg,
  .hero-fixed-bg *{
    animation: none !important;
    transition: none !important;
  }
}

/* Reduce carga si el usuario pide ahorrar datos */
@media (prefers-reduced-data: reduce){
  /* Bajamos efectos pesados */
  .hero-fixed-bg .hero-wind,
  .hero-fixed-bg .edge-glow,
  .hero-fixed-bg .hero-grid{ display:none !important; }
}

/* Phase nav: hidden by default (hero) — entra desde abajo */
.phase-nav--global{
  opacity: 0;
  transform: translate(-50%, 24px);
  pointer-events: none;
  transition: opacity .35s ease, transform .45s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.phase-nav--global.is-visible{
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}
.phase-nav--global.is-hidden{
  opacity: 0 !important;
  transform: translate(-50%, 24px) !important;
  pointer-events: none !important;
}

/* ================================
   PERF: Render progresivo
   ================================ */

/* Evita calcular layout/paint de secciones fuera del viewport.
   Excluye #s0 (LCP), #s1 (contiene .final-board--shared pinneado que viaja a #s2)
   y #s2 (pinneado por GSAP). */
#s3, #s4, #s5, #cta, #s7 {
  content-visibility: auto;
  contain-intrinsic-size: 1000px; /* reserva para evitar saltos */
}

/* =========================================================
   S6 - CTA Premium (movido desde <style> inline en index.html)
   ========================================================= */
#cta.scene--cta-premium{
  position: relative;
  isolation: isolate;
  overflow: clip;
  min-height: 100vh;
  min-height: 100svh;
  /* Padding reducido arriba para que el título esté ~80px del section top.
     Así el snap a #cta (que aterriza en section top + offset) muestra el título. */
  padding: clamp(48px, 7vh, 80px) 0 clamp(60px, 8vh, 96px);
  background: #070707;
  color: #f4f5f3;
  display: flex;
  align-items: flex-start;
}

/* ===== CTA: capas animadas de fondo que llenan el espacio inferior ===== */
.cta-fx{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.cta-fx-orb{
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .35;
  will-change: transform, opacity;
}
.cta-fx-orb--a{
  width: clamp(420px, 50vw, 760px); height: clamp(420px, 50vw, 760px);
  bottom: -180px; left: -160px;
  background: radial-gradient(circle, rgba(177, 132, 255, .68) 0%, rgba(177, 132, 255, 0) 70%);
  animation: ctaOrbA 18s ease-in-out infinite;
}
.cta-fx-orb--b{
  width: clamp(360px, 42vw, 680px); height: clamp(360px, 42vw, 680px);
  bottom: 10%; right: -180px;
  background: radial-gradient(circle, rgba(140, 214, 255, .60) 0%, rgba(140, 214, 255, 0) 70%);
  animation: ctaOrbB 22s ease-in-out infinite -4s;
}
.cta-fx-orb--c{
  width: clamp(320px, 38vw, 540px); height: clamp(320px, 38vw, 540px);
  top: 32%; left: 42%;
  background: radial-gradient(circle, rgba(244, 156, 235, .42) 0%, rgba(244, 156, 235, 0) 70%);
  animation: ctaOrbC 26s ease-in-out infinite -10s;
  opacity: .35;
}

/* Palabra gigante de fondo (outline) que llena el ancho */
.cta-fx-bigword{
  position: absolute;
  left: 0; right: 0;
  bottom: clamp(20vh, 28vh, 32vh);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  text-align: center;
  gap: 0;
  line-height: .82;
  opacity: .9;
}
.cta-fx-bigword span{
  display: block;
  font-family: "Antonio", "Inter", sans-serif;
  font-weight: 700;
  font-size: clamp(120px, 18vw, 280px);
  letter-spacing: -.03em;
  text-transform: uppercase;
  -webkit-text-stroke: 1.5px rgba(177, 132, 255, .14);
  color: transparent;
  animation: ctaBigwordPulse 8s ease-in-out infinite;
}
.cta-fx-bigword .cta-fx-bigword--alt{
  -webkit-text-stroke-color: rgba(140, 214, 255, .14);
  animation-delay: -4s;
  margin-top: -.18em;
}
@keyframes ctaBigwordPulse{
  0%, 100% { opacity: .55; transform: translateY(0); }
  50%      { opacity: .95; transform: translateY(-6px); }
}
@keyframes ctaOrbA{
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(120px, -80px) scale(1.15); }
}
@keyframes ctaOrbB{
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-90px, -60px) scale(1.1); }
}
@keyframes ctaOrbC{
  0%, 100% { transform: translate(0, 0) scale(.95); }
  50%      { transform: translate(40px, 30px) scale(1.05); }
}
.cta-fx-grid{
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.045) 0 1px, transparent 1px 80px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 80px);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 100%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 100%, #000 30%, transparent 75%);
  opacity: .6;
}
.cta-fx-scan{
  position: absolute;
  left: 0; right: 0;
  bottom: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(177, 132, 255, .55) 30%, rgba(140, 214, 255, .55) 70%, transparent 100%);
  opacity: 0;
  animation: ctaScan 7s ease-in-out infinite 2s;
}
@keyframes ctaScan{
  0%   { transform: translateY(0); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(-260px); opacity: 0; }
}

/* Marquees con propuestas de valor (dos líneas en direcciones opuestas) */
.cta-marquee{
  position: absolute;
  left: 0; right: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.cta-marquee--top{
  bottom: clamp(140px, 22vh, 240px);
}
.cta-marquee--bottom{
  bottom: clamp(40px, 7vh, 80px);
}
.cta-marquee-track{
  display: inline-flex;
  align-items: center;
  gap: clamp(28px, 4vw, 56px);
  white-space: nowrap;
  animation: ctaMarquee 42s linear infinite;
  will-change: transform;
}
.cta-marquee-track--reverse{
  animation: ctaMarqueeReverse 36s linear infinite;
}
@keyframes ctaMarquee{
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@keyframes ctaMarqueeReverse{
  from { transform: translate3d(-50%, 0, 0); }
  to   { transform: translate3d(0, 0, 0); }
}
.cta-marquee-item{
  font-family: "Antonio", "Inter", sans-serif;
  font-weight: 700;
  font-size: clamp(56px, 8vw, 112px);
  letter-spacing: -.01em;
  line-height: 1;
  -webkit-text-stroke: 1.5px rgba(255,255,255,.22);
  color: transparent;
  text-transform: uppercase;
}
/* Variante "filled" — texto sólido (no outline) para la línea inferior */
.cta-marquee-item--filled{
  -webkit-text-stroke: 0;
  color: rgba(255,255,255,.06);
  font-size: clamp(32px, 4.5vw, 56px);
  text-transform: none;
  letter-spacing: 0;
}
.cta-marquee-dot{
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(244, 156, 235, .6), rgba(140, 214, 255, .6));
  font-size: 0;
}
@media (prefers-reduced-motion: reduce){
  .cta-fx-orb, .cta-fx-scan, .cta-marquee-track,
  .cta-fx-bigword span{ animation: none; }
}
@media (max-width: 720px){
  .cta-fx-orb{ filter: blur(50px); opacity: .25; }
  .cta-fx-grid{ opacity: .35; }
  .cta-fx-bigword{ display: none; }
  .cta-marquee--top{ bottom: clamp(90px, 16vh, 160px); }
  .cta-marquee--bottom{ bottom: clamp(28px, 5vh, 56px); }
  .cta-marquee-item{ font-size: clamp(36px, 11vw, 56px); }
  .cta-marquee-item--filled{ font-size: clamp(22px, 5vw, 32px); }
}
/* eliminado: hacía edge-to-edge y rompía padding lateral. width controlado en #cta .cta-shell */
#cta.scene--cta-premium::before{
  content: "";
  position: absolute;
  inset: -18% -8% auto -8%;
  height: 140%;
  background:
    radial-gradient(56% 64% at 22% 28%, rgba(66, 117, 94, .22) 0%, rgba(66, 117, 94, 0) 58%),
    radial-gradient(52% 60% at 84% 76%, rgba(78, 104, 148, .22) 0%, rgba(78, 104, 148, 0) 62%);
  pointer-events: none;
}
#cta.scene--cta-premium::after{
  content: "";
  position: absolute;
  inset: 0;
  opacity: .14;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.042) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 3px);
  mix-blend-mode: screen;
  pointer-events: none;
}
#cta .cta-shell{
  position: relative;
  z-index: 1;
  width: min(var(--container), 90vw);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(24px, 4.5vw, 58px);
  align-items: start;
}
#cta .cta-kicker{
  margin: 0 0 12px;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #9aa8a2;
  font-weight: 700;
}
#cta .cta-title{
  margin: 0 0 .24em;
  font-family: "Antonio", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  /* Reducido para evitar 432px de altura (4-5 líneas) — ahora cabe en 2-3 líneas */
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.02;
  letter-spacing: -.015em;
  color: #f3f6f4;
  text-wrap: balance;
}
#cta .cta-sub{
  margin: 0 0 20px;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.58;
  color: #c9d2cd;
  max-width: 42ch;
}
#cta .cta-trust{
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
#cta .cta-trust li{
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color: #e4ebe7;
  font-size: 12px;
  letter-spacing: .03em;
  text-transform: uppercase;
  padding: 8px 12px;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
}
#cta .cta-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
#cta .cta-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 20px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
}
#cta .cta-btn--primary{
  background: #f4f5f3;
  border-color: #f4f5f3;
  color: #0d1110;
}
#cta .cta-btn--primary:hover{
  transform: translateY(-1px);
  background: #ffffff;
}
#cta .cta-btn--ghost{
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.22);
  color: #e7ece9;
}
#cta .cta-btn--ghost:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.09);
}
#cta .cta-panel{
  border-radius: 30px;
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(165deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.04) 100%);
  box-shadow: 0 22px 70px rgba(0,0,0,.46);
  backdrop-filter: blur(6px);
  padding: clamp(18px, 2.4vw, 28px);
}
#cta .cta-panel-head{
  margin: 0 0 14px;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #a8b5b0;
  font-weight: 700;
}
#cta .cta-list{
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}
#cta .cta-list li{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: baseline;
  color: #dde6e1;
  font-size: 16px;
  line-height: 1.5;
}
#cta .cta-list li::before{
  content: "\2713";
  color: #94d3b7;
  font-weight: 800;
  transform: translateY(1px);
}
#cta .cta-note{
  margin: 14px 0 0;
  color: #9eb0a8;
  font-size: 13px;
}
@media (max-width: 920px){
  #cta .cta-shell{
    grid-template-columns: 1fr;
    gap: 20px;
  }
  #cta .cta-actions{
    flex-direction: column;
    align-items: stretch;
  }
  #cta .cta-btn{
    width: 100%;
  }
}
@media (prefers-reduced-motion: reduce){
  #cta *{
    transition: none !important;
    animation: none !important;
  }
}

/* =========================================================
   Trust strip - clientes + metricas globales
   ========================================================= */
.scene--trust{
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  padding: clamp(72px, 12vh, 140px) 0;
  background: linear-gradient(180deg, #fafaf8 0%, #ffffff 100%);
  border-block: 1px solid rgba(0,0,0,.06);
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}
.scene--trust > .container{ position: relative; z-index: 1; }
.trust-bg{
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 0;
}
.trust-bg-grid{
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(14,20,18,.10) 1px, transparent 0);
  background-size: 28px 28px;
  background-position: 0 0;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 30%, transparent 80%);
  opacity: .55;
}
.trust-bg-glow{
  position: absolute;
  width: 60vw; height: 60vw;
  max-width: 720px; max-height: 720px;
  top: 35%; left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(177, 132, 255, .22) 0%, rgba(140, 214, 255, .12) 35%, transparent 70%);
  filter: blur(40px);
  opacity: .6;
}
.trust-shell{
  display: grid;
  gap: clamp(40px, 6vh, 72px);
}
.trust-head{
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
}
.trust-kicker{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-med);
}
.trust-kicker-bar{
  display: inline-block;
  width: 28px; height: 2px;
  background: linear-gradient(90deg, #F49CEB 0%, #B184FF 60%, #8CD6FF 100%);
  border-radius: 2px;
}
.trust-title{
  margin: 0;
  font-family: "Antonio", "Inter", sans-serif;
  font-weight: 700;
  font-size: clamp(30px, 4vw, 52px);
  letter-spacing: -.015em;
  line-height: 1.04;
  color: var(--text-hi);
}
.trust-sub{
  margin: 16px auto 0;
  max-width: 580px;
  font-family: "Inter", sans-serif;
  font-size: clamp(14.5px, 1.2vw, 16px);
  line-height: 1.6;
  color: var(--text-med);
}

/* === Marquee de clientes (scroll horizontal infinito) === */
.trust-marquee{
  position: relative;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  overflow: hidden;
  padding-block: 4px;
  mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
}
.trust-marquee-track{
  display: inline-flex;
  gap: clamp(14px, 1.6vw, 22px);
  animation: trustMarquee 38s linear infinite;
  white-space: nowrap;
  will-change: transform;
}
.trust-marquee:hover .trust-marquee-track{ animation-play-state: paused; }
@keyframes trustMarquee{
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
.trust-brand{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px 10px 10px;
  border-radius: 999px;
  border: 1px solid rgba(14, 20, 18, .10);
  background: rgba(255, 255, 255, .72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: border-color .35s ease, background-color .35s ease, transform .35s ease, box-shadow .35s ease;
  flex-shrink: 0;
}
.trust-brand:hover{
  border-color: rgba(14, 20, 18, .22);
  background: rgba(255, 255, 255, .96);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(14, 20, 18, .08);
}
.trust-brand-mono{
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid rgba(14,20,18,.08);
  flex-shrink: 0;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(14,20,18,.04);
}
.trust-brand-mono img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.trust-brand-name{
  font-family: "Antonio", "Inter", sans-serif;
  font-weight: 700;
  font-size: clamp(14px, 1.05vw, 16px);
  letter-spacing: .02em;
  color: var(--text-hi);
  text-transform: uppercase;
  line-height: 1;
}
.trust-brand-sector{
  display: inline-block;
  padding: 4px 9px;
  margin-left: 4px;
  border-radius: 999px;
  background: rgba(14, 20, 18, .06);
  font-family: "Inter", sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-med);
  line-height: 1;
}

/* === Stats: 4 tarjetas claras integradas (no caja negra) === */
.trust-stats{
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
}
.trust-stat{
  position: relative;
  display: grid;
  gap: 8px;
  padding: clamp(22px, 3vw, 32px) clamp(20px, 2vw, 26px);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.86) 0%, rgba(255,255,255,.72) 100%);
  border: 1px solid rgba(14, 20, 18, .08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform .35s cubic-bezier(.22,.61,.36,1),
              border-color .35s ease,
              box-shadow .35s ease;
  overflow: hidden;
}
.trust-stat::before{
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, #F49CEB 0%, #B184FF 50%, #8CD6FF 100%);
  opacity: 0;
  transition: opacity .35s ease;
}
.trust-stat:hover{
  transform: translateY(-3px);
  border-color: rgba(14, 20, 18, .14);
  box-shadow: 0 16px 40px rgba(14, 20, 18, .07);
}
.trust-stat:hover::before{ opacity: 1; }
.trust-stat-tag{
  position: absolute;
  top: 14px; right: 16px;
  font-family: "Inter", sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
  color: rgba(14, 20, 18, .28);
}
.trust-stat-label{
  margin: 0;
  font-family: "Inter", sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-med);
}
.trust-stat-value{
  margin: 0;
  font-family: "Antonio", "Inter", sans-serif;
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: .96;
  color: var(--text-hi);
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}
.trust-stat-num{
  background: linear-gradient(135deg, #0E1412 0%, #2a2f2d 60%, #404844 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-variant-numeric: tabular-nums;
}
.trust-stat-unit{
  font-size: .38em;
  font-weight: 500;
  color: var(--text-med);
  letter-spacing: .02em;
}
.trust-stat-hint{
  margin-top: 4px;
  font-family: "Inter", sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.4;
  color: rgba(14, 20, 18, .52);
}

@media (max-width: 900px){
  .trust-stats{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
  .trust-stat{
    padding: 22px 20px;
  }
  .trust-brand{ padding: 8px 14px 8px 8px; gap: 10px; }
  .trust-brand-mono{ width: 32px; height: 32px; font-size: 16px; }
  .trust-brand-sector{ display: none; }
  .trust-bg-glow{ opacity: .4; }
}
@media (max-width: 540px){
  .trust-stats{ grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce){
  .trust-marquee-track{ animation: none; }
}

/* =========================================================
   Footer del sitio
   ========================================================= */
.sr-only{
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.site-footer{
  background: #0E1412;
  color: #d8dcd9;
  padding: clamp(48px, 8vh, 88px) 0 clamp(20px, 3vh, 32px);
  font-family: "Inter", sans-serif;
  border-top: 1px solid rgba(255,255,255,.06);
}
.site-footer-shell{
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: clamp(24px, 4vw, 56px);
  padding-bottom: clamp(28px, 5vh, 48px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.site-footer-logo{
  margin: 0 0 12px;
  font-family: "Antonio", "Inter", sans-serif;
  font-weight: 700;
  font-size: clamp(24px, 2.8vw, 32px);
  letter-spacing: -.01em;
  color: #f4f5f3;
  line-height: 1;
}
.site-footer-logo span{ color: rgba(244,245,243,.55); }
.site-footer-claim{
  margin: 0;
  color: rgba(216,220,217,.74);
  font-size: 14.5px;
  line-height: 1.55;
  max-width: 36ch;
}
.site-footer-col-title{
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(244,245,243,.72);
}
.site-footer-col ul{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.site-footer-col a{
  color: rgba(216,220,217,.82);
  text-decoration: none;
  font-size: 14px;
  line-height: 1.5;
  transition: color .2s ease, transform .2s ease;
  display: inline-block;
}
.site-footer-col a:hover{
  color: #f4f5f3;
  transform: translateX(2px);
}
.site-footer-social{
  margin-top: 16px !important;
  display: flex !important;
  gap: 8px !important;
}
.site-footer-social li a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.04);
  color: #f4f5f3;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-decoration: none;
  transition: background-color .25s ease, transform .25s ease, border-color .25s ease;
}
.site-footer-social li a:hover{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.32);
  transform: translateY(-2px);
}
.site-footer-bottom{
  padding-top: clamp(18px, 3vh, 26px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.site-footer-copy{
  margin: 0;
  font-size: 12.5px;
  color: rgba(216,220,217,.56);
  letter-spacing: .02em;
}
.site-footer-legal{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}
.site-footer-legal a{
  color: rgba(216,220,217,.62);
  text-decoration: none;
  font-size: 12.5px;
  transition: color .2s ease;
}
.site-footer-legal a:hover{ color: #f4f5f3; }
@media (max-width: 900px){
  .site-footer-shell{
    grid-template-columns: 1fr 1fr;
    gap: 28px 24px;
  }
  .site-footer-brand{ grid-column: 1 / -1; }
  .site-footer-bottom{
    flex-direction: column;
    align-items: flex-start;
  }
}
@media (max-width: 520px){
  .site-footer-shell{ grid-template-columns: 1fr; }
}

/* =========================================================
   Lightbox de proyecto (iframe modal)
   ========================================================= */
.proj-modal{
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 3vw, 40px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .35s ease, visibility 0s linear .35s;
  font-family: "Inter", sans-serif;
}
.proj-modal[aria-hidden="false"]{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .35s ease, visibility 0s linear 0s;
}
.proj-modal-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(14,20,18,.78);
  backdrop-filter: blur(8px) saturate(1.1);
  -webkit-backdrop-filter: blur(8px) saturate(1.1);
}
.proj-modal-frame{
  position: relative;
  z-index: 2;
  width: min(1280px, 100%);
  height: min(86vh, 820px);
  background: #0E1412;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 30px 80px rgba(0,0,0,.5);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(20px) scale(.98);
  transition: transform .4s cubic-bezier(.22,.61,.36,1);
}
.proj-modal[aria-hidden="false"] .proj-modal-frame{
  transform: translateY(0) scale(1);
}
.proj-modal-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 16px;
  background: #14181a;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.proj-modal-meta{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: rgba(244,245,243,.92);
  min-width: 0;
}
.proj-modal-dot{
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #94d3b7;
  box-shadow: 0 0 0 3px rgba(148,211,183,.18);
  flex-shrink: 0;
}
.proj-modal-dot.is-loading{
  background: #f7c948;
  box-shadow: 0 0 0 3px rgba(247,201,72,.18);
  animation: projDotPulse 1.4s ease-in-out infinite;
}
.proj-modal-dot.is-error{
  background: #ff6f5e;
  box-shadow: 0 0 0 3px rgba(255,111,94,.18);
}
@keyframes projDotPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .4; }
}
.proj-modal-title{
  font-family: "Antonio", "Inter", sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.005em;
  color: #f4f5f3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.proj-modal-link{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  color: rgba(244,245,243,.86);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,.1);
  transition: background-color .25s ease, color .25s ease, transform .2s ease;
  max-width: 320px;
  overflow: hidden;
}
.proj-modal-link span{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.proj-modal-link:hover{
  background: rgba(255,255,255,.14);
  color: #ffffff;
  transform: translateY(-1px);
}
.proj-modal-close{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: #f4f5f3;
  cursor: pointer;
  transition: background-color .25s ease, transform .2s ease;
  flex-shrink: 0;
}
.proj-modal-close:hover{
  background: rgba(255,255,255,.14);
  transform: rotate(90deg);
}
.proj-modal-body{
  position: relative;
  flex: 1;
  background: #ffffff;
}
.proj-modal-iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  opacity: 0;
  transition: opacity .35s ease;
}
.proj-modal-iframe.is-loaded{ opacity: 1; }
.proj-modal-loading{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: rgba(14,20,18,.55);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .03em;
  background: #fafafa;
  pointer-events: none;
}
.proj-modal-loading.is-hidden{ opacity: 0; transition: opacity .35s ease; }
.proj-modal-spinner{
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(14,20,18,.16);
  border-top-color: #0E1412;
  animation: projSpin .9s linear infinite;
}
@keyframes projSpin { to { transform: rotate(360deg); } }
.proj-modal-error{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
  justify-content: center;
  padding: 40px;
  text-align: center;
  background: #fafafa;
  color: var(--text-hi);
  font-family: "Inter", sans-serif;
}
.proj-modal-error-title{
  font-family: "Antonio", "Inter", sans-serif;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.01em;
  margin: 0;
}
.proj-modal-error-msg{
  margin: 0;
  font-size: 14px;
  color: var(--text-med);
  max-width: 48ch;
  line-height: 1.5;
}
.proj-modal-error-cta{
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 999px;
  background: #0E1412;
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform .2s ease;
}
.proj-modal-error-cta:hover{ transform: translateY(-1px); }

/* Body scroll lock cuando modal abierto */
body.proj-modal-open{ overflow: hidden; }

@media (max-width: 720px){
  .proj-modal-frame{ height: 100%; border-radius: 12px; }
  .proj-modal-link{ display: none; }
  .proj-modal-title{ font-size: 14px; }
}

/* =========================================================
   WP / Themify integration (sólo aplica si body.landing-gsap)
   Modo HEADER FIXED: el header del theme flota encima sin ocupar
   altura. El #s0 y el bg toman el 100% del viewport. Solo el
   CONTENIDO interior del hero se desplaza con padding-top para
   no quedar tapado por el header.
   ========================================================= */
body.landing-gsap{
  --header-h: 80px;
  scroll-padding-top: var(--header-h);
}
@media (min-width: 980px){
  body.landing-gsap{ --header-h: 100px; }
}

/* Header del theme: FIXED en la cima, no empuja la landing */
body.landing-gsap #headerwrap{
  position: fixed !important;
  top: 0; left: 0; right: 0;
  z-index: 100;
  /* Asegurar que cualquier margin/padding del theme no genere espacio */
  margin: 0 !important;
}

/* Quita el padding-top del body que Themify pone para hueco del header */
body.landing-gsap #body,
body.landing-gsap #pagewrap{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
}
body.landing-gsap .themify_builder_content{ padding: 0 !important; margin: 0 !important; }

/* Hero ocupa 100vh sin descontar header (el header flota encima) */
body.landing-gsap #s0,
body.landing-gsap .scene--hero{
  min-height: 100vh;
  min-height: 100dvh;
}

/* El contenido interior del hero baja para no taparse con el header */
body.landing-gsap #s0 .hero-inner{
  padding-top: var(--header-h);
}

/* Header del theme: misma tipografía del sistema */
body.landing-gsap #headerwrap,
body.landing-gsap #headerwrap *,
body.landing-gsap #footerwrap,
body.landing-gsap #footerwrap *{
  font-family: var(--wp--preset--font-family--system-font), -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Hero-fixed-bg ocupa el 100% del viewport (queda debajo del header transparente) */
body.landing-gsap .hero-fixed-bg{ top: 0; }