/* Betancur Studio — capa de tema BLUE GLASS · MODO CLARO (por defecto desde 2026-07-10).
   Compartida por las páginas de servicio (fotografia / seo / email-marketing / privacy / terms).
   Se carga DESPUÉS del <style> inline de cada página → gana en el cascade y voltea
   los tokens oscuros originales a la versión blanca. El respaldo oscuro vive en /dark. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@700;800&family=Archivo:wght@900&display=swap');

:root{
  --brand:'Archivo','Inter',system-ui,sans-serif; --neon:#00E5FF;
  --optic:#0e1420; --silver:#46536a;
  --black:#f6f8fb; --dark:#ffffff; --panel:#ffffff;
  --ice:#2f6fb8; --cyan:#3f7fc4; --sky:#5a8fc9;
  /* aliases para los estilos inline y fx.css (referencian --gold/--gold-dim/--hair) */
  --gold:#2f6fb8; --gold-dim:rgba(47,111,184,.32); --hair:rgba(15,40,85,.13);
  --glass:rgba(255,255,255,.72); --glass-brd:rgba(15,40,85,.14);
  --prism:linear-gradient(100deg,#1b2a40,#3f6faf,#7fa6d8,#24394f);
  --text:#0e1420; --muted:#5c6a80; --faint:#8a97ab;
  --mono:ui-monospace,'SF Mono',Menlo,'Cascadia Code',monospace;
}
body{background:var(--black);color:var(--text)}
em{color:var(--ice)}
::selection{background:var(--ice);color:#fff}

/* ═══════════════════════════════════════════════════════════════════════════
   FONDO — "LUZ SOBRE VIDRIO"  (reescrito el 2026-07-29)
   ═══════════════════════════════════════════════════════════════════════════
   Antes había dos constelaciones de nodos: una animada en el hero y otra estática
   en toda la página. Se retiraron porque el dueño podía CAZARLAS con la vista, y
   un fondo que se puede cazar está mal calibrado. Además la red de nodos es un
   cliché de software; el ADN de esta marca es el CRISTAL.

   Tres capas, ninguna pide la mirada:
     1. Un lienzo que no es blanco plano, sino con una temperatura que cambia muy
        despacio de arriba abajo, como luz entrando por una ventana.
     2. Auroras: masas de luz azul difusa, sin borde, que dan profundidad.
     3. Grano de película finísimo, que es lo que separa "caro" de "plantilla".
        Es SVG embebido: cero peticiones, cero KB de red.

   Regla: NADA en el fondo se mueve y NADA tiene borde duro. Si al mirar la
   página el ojo salta a un elemento del fondo, ese elemento sobra.
   ═══════════════════════════════════════════════════════════════════════════ */

/* 1 · El lienzo: luz que baja, no un blanco muerto */
body{
  background:
    linear-gradient(178deg, #ffffff 0%, #f7fafd 38%, #eef3f9 100%)
    fixed;
}

/* 2 · Auroras: masas de luz, más suaves y más abiertas que antes */
.aurora{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.aurora span{position:absolute;border-radius:50%;filter:blur(110px);opacity:.55;mix-blend-mode:normal}
.aurora .a1{width:62vw;height:62vw;left:-18vw;top:-14vw;background:radial-gradient(circle,rgba(96,146,224,.15),transparent 70%)}
.aurora .a2{width:52vw;height:52vw;right:-14vw;top:14vh;background:radial-gradient(circle,rgba(126,174,242,.12),transparent 70%)}
.aurora .a3{width:48vw;height:48vw;left:20vw;bottom:-18vw;background:radial-gradient(circle,rgba(158,186,232,.10),transparent 72%)}

/* 3 · Grano de película: la textura que hace que un fondo se sienta caro.
   Invisible de cerca, se nota al quitarlo. */
.aurora::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  opacity:.055;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:140px 140px;
}
@media (prefers-reduced-motion: reduce){ .aurora span{filter:blur(120px)} }

/* ── Bandas y heros a claro ── */
.leak,.studio{background:rgba(240,246,252,.78)!important;backdrop-filter:blur(6px)}
.hero{background:radial-gradient(1200px 640px at 80% -10%, rgba(90,150,230,.12), transparent 60%)!important}
.form-sec{background:radial-gradient(1000px 560px at 24% 0%, rgba(90,150,230,.1), transparent 60%)!important}

/* ── Botones / nav ── */
.btn,.nav-cta,.sticky-cta .sc-main{
  background:linear-gradient(180deg,#26334a,#0b1322)!important;color:#f4f8ff!important;
  border:1px solid rgba(15,40,85,.2)!important;
  box-shadow:0 1px 0 rgba(255,255,255,.2) inset,0 10px 30px rgba(40,80,150,.18)}
.btn:hover,.nav-cta:hover{background:linear-gradient(180deg,#33445f,#131c2c)!important}
nav{background:rgba(255,255,255,.75)!important;backdrop-filter:blur(18px) saturate(1.15);border-bottom:1px solid var(--glass-brd)!important}

/* ── Logo (anillo cromo sobre tile blanco + wordmark) ── */
.nav-logo{display:flex;align-items:center;gap:12px;text-decoration:none}
.logo-mark{width:25px;height:30px;flex:none}
.logo-ring{width:30px!important;height:30px!important;border-radius:9px;filter:none;
  box-shadow:0 2px 12px rgba(20,40,80,.18),0 0 16px rgba(90,150,230,.14);border:1px solid rgba(15,40,85,.08)}
.logo-ring .ring{transform-origin:24px 24px;animation:lspin 14s linear infinite}
@keyframes lspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.logo-ring .ring{animation:none}}
.logo-words{display:flex;flex-direction:column;line-height:1}
.lw-b{font-family:var(--serif,'Cormorant Garamond',serif);font-weight:600;font-size:1.2rem;letter-spacing:.16em;-webkit-box-reflect:none}
.lw-s{font-family:var(--mono);font-size:.5rem;letter-spacing:.6em;color:var(--muted);text-transform:uppercase;margin-top:4px;padding-left:.32em}

/* ── Texto de cristal → cromo OSCURO sobre blanco ── */
.glass-txt{background:linear-gradient(180deg,#55677f 4%,#16202f 42%,#0b1220 62%,#48607c 96%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  text-shadow:0 0 1px rgba(255,255,255,.2);
  filter:drop-shadow(0 2px 10px rgba(90,150,230,.2))}
.glass-txt em{-webkit-text-fill-color:var(--ice);color:var(--ice)}

/* ── Inputs claros ── */
input,select,textarea{background:#ffffff!important;border:1px solid var(--hair)!important;color:var(--text)!important}
input:focus,select:focus,textarea:focus{border-color:var(--ice)!important;box-shadow:0 0 0 3px rgba(47,111,184,.14)}
input::placeholder{color:var(--faint)!important}

/* ── Acentos / fixes de fx.css (destellos) ── */
.hero-meta.in .rule,.hero-meta.rv.in .rule,.sec-head.in .sec-rule{background:var(--prism);opacity:.9;box-shadow:0 0 12px rgba(90,150,230,.3)}
.ledger-row:hover{background:rgba(47,111,184,.05)}
.ledger-row:hover .amt{text-shadow:0 0 26px rgba(90,150,230,.4)}
.use:hover,.step:hover{box-shadow:0 14px 40px rgba(20,40,80,.14)!important}
.gitem:hover{box-shadow:0 12px 40px rgba(20,40,80,.16)!important}

/* ── TIPOGRAFÍA moderna (estilo Resend): fuera la serif, grotesca limpia ── */
:root{--serif:'Inter',system-ui,-apple-system,sans-serif}
h1,h2,h3,.hero h1,.step h3,.scol h3{font-weight:600!important;letter-spacing:-.03em!important;font-style:normal}
h1 em,h2 em{font-style:normal!important}
.sec-no,.si,.step .n,.hp .n,.ledger-row .idx{font-family:var(--mono)!important;font-style:normal!important;
  font-size:.7rem!important;letter-spacing:.2em;text-transform:uppercase}
.ledger-row .amt{font-family:'Inter',system-ui,sans-serif!important;font-weight:800!important;letter-spacing:-.02em}
.problem-stat .big{font-family:'Inter',system-ui,sans-serif!important;font-weight:800!important;-webkit-text-stroke:1px var(--gold)}

/* ── Overrides de zonas oscuras hardcodeadas en las páginas viejas ── */
.ticker{background:rgba(255,255,255,.92)!important;border-bottom:1px solid var(--hair)!important}
.ticker b{color:var(--text)!important}
.sticky-cta{background:rgba(255,255,255,.92)!important;border-top:1px solid var(--glass-brd)!important}
.sticky-cta .sc-alt{color:var(--ice)!important;border:1px solid var(--glass-brd)!important;background:#fff!important}
.form-card{background:#ffffff!important;box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 24px 60px rgba(20,40,80,.12)!important}

/* ═══════════════════════════════════════════════════════════════════════
   v3 · 2026-07-13 — Branding diamante/glass + azul neón unificado con el HOME
   + SCROLL SUAVE (avión, no carro con cambios trabados). Aplica a las 4 landings.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── SCROLL SUAVE: fuera los fondos FIJOS pesados que repintan en cada frame ──
   El jank venía de la aurora con filter:blur(80px) (3 blobs gigantes fijos) y del
   overlay de ruido fijo. Los cambiamos por radiales pre-suaves (0 costo de blur). */
.aurora span{filter:none!important;mix-blend-mode:normal!important;opacity:1!important}
.aurora .a1{background:radial-gradient(circle,rgba(90,140,220,.16),transparent 66%)!important}
.aurora .a2{background:radial-gradient(circle,rgba(120,170,240,.13),transparent 66%)!important}
.aurora .a3{background:radial-gradient(circle,rgba(150,180,230,.11),transparent 68%)!important}
body::after{display:none!important}                 /* overlay de ruido fijo → jank en móvil */
.rv{will-change:opacity,transform}                  /* revelado en compositor, no en layout */
.rv.in{will-change:auto}
/* el nav ya usa backdrop-filter (1 solo elemento, OK); nada más fijo con blur */

/* ── TÍTULO HERO: grande, bold y moderno como el del home ── */
.hero h1{font-family:var(--brand)!important;font-weight:800!important;
  font-size:clamp(2.7rem,8.5vw,4.4rem)!important;line-height:1.03!important;
  letter-spacing:-.04em!important;max-width:18ch;text-wrap:balance}
/* la palabra-acento (em) → AZUL NEÓN con subrayado cromático vivo, como el home */
.glass-txt em,.hero h1 em,h2 em{
  background:linear-gradient(160deg,#173a6e,#2f6fb8 55%,#00b8d4)!important;
  -webkit-background-clip:text!important;background-clip:text!important;
  -webkit-text-fill-color:transparent!important;color:transparent!important;
  font-style:normal!important;position:relative}
.hero h1 em::after{content:'';position:absolute;left:0;right:0;bottom:-.06em;height:3px;border-radius:3px;
  background:linear-gradient(90deg,#00E5FF,#2f6fb8,#00E5FF);background-size:200% 100%;
  filter:drop-shadow(0 0 4px rgba(0,229,255,.55));animation:h1line 4s linear infinite}
@keyframes h1line{to{background-position:200% 0}}

/* ── SUBTÍTULO hero: legible, elegante, ancho controlado ── */
.hero .sub{margin-top:20px!important;color:var(--silver)!important;font-weight:400;
  font-size:clamp(1.05rem,2.5vw,1.18rem)!important;line-height:1.62!important;max-width:56ch}
.hero .sub strong{color:var(--optic)!important;font-weight:600}

/* ── kicker del hero con punto neón (detalle azul) ── */
.hero-meta span:last-child{color:var(--ice)!important;font-weight:600}
.hero-meta .rule{background:var(--prism)!important;box-shadow:0 0 10px rgba(0,229,255,.35)}

/* ── títulos de sección un punto más grandes + acento neón en el número ── */
h2{font-size:clamp(2.1rem,5.4vw,3.3rem)!important;line-height:1.1!important;letter-spacing:-.032em!important}
.sec-no,.kicker{color:var(--ice)!important}

@media (prefers-reduced-motion:reduce){.hero h1 em::after{animation:none}}

/* móvil: kicker del hero en UNA sola línea (menos tracking/tamaño + regla más corta) */
@media (max-width:560px){
  .hero-meta{gap:10px}
  .hero-meta .rule{width:30px!important}
  .hero-meta span:last-child,.kicker{font-size:.57rem!important;letter-spacing:.11em!important}
}