:root{
    --brass:#C6963C; --brass-light:#E3B865; --green:#33473B;
    --display:'Space Grotesk','Helvetica Neue',Arial,sans-serif;
    --body:'Inter','Helvetica Neue',Arial,sans-serif;
    --mono:'IBM Plex Mono',ui-monospace,'Courier New',monospace;
  }
  /* TEMA CLARO (por defecto) */
  html{
    --bg:#EDEAE1; --bg-alt:#E3DFD3; --surface:#FBF9F4;
    --fg:#15140F; --fg-soft:#57554A; --fg-mute:#8A8878;
    --line:rgba(21,20,15,0.12);
    --feature-bg:#15140F; --feature-bg2:#1A1913; --feature-fg:#FBF9F4;
    --feature-soft:rgba(251,249,244,0.66); --feature-mute:rgba(251,249,244,0.42);
    --feature-line:rgba(251,249,244,0.14); --feature-card:rgba(255,255,255,0.05);
    --ghost:rgba(21,20,15,0.05);
  }
  /* TEMA OSCURO */
  html[data-theme="dark"]{
    --bg:#131209; --bg-alt:#1A1913; --surface:#1F1E17;
    --fg:#F2EFE6; --fg-soft:#B0AC9E; --fg-mute:#8A8778;
    --line:rgba(242,239,230,0.13);
    --feature-bg:#0B0A06; --feature-bg2:#100F0A; --feature-fg:#F5F2E9;
    --feature-soft:rgba(245,242,233,0.66); --feature-mute:rgba(245,242,233,0.42);
    --feature-line:rgba(245,242,233,0.12); --feature-card:rgba(255,255,255,0.04);
    --ghost:rgba(242,239,230,0.045);
  }
  /* alias heredados */
  html{ --ink:var(--feature-bg); --ink-2:var(--feature-bg2); --paper:var(--bg); --paper-2:var(--bg-alt);
        --white:var(--surface); --line-dark:var(--feature-line); --line-light:var(--line); }
  html, body{transition:background-color .45s ease, color .45s ease;}
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{font-family:var(--body); background:var(--bg); color:var(--fg); -webkit-font-smoothing:antialiased; overflow-x:hidden;}
  html{height:100%;}
  body{position:relative;}
  .grain{position:absolute; top:0; left:0; right:0; bottom:0; z-index:9999; pointer-events:none; opacity:0.035; mix-blend-mode:overlay; will-change:auto;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
  a{color:inherit; text-decoration:none;}
  button{font:inherit; cursor:pointer; border:none; background:none; color:inherit;}
  .wrap{max-width:1180px; margin:0 auto; padding:0 32px;}
  .mono{font-family:var(--mono);}
  .eyebrow{font-family:var(--mono); font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--brass); font-weight:500;}

  /* NAV */
  nav{position:fixed; top:0; left:0; right:0; z-index:100; background:var(--feature-bg); border-bottom:1px solid var(--feature-line);}
  .nav-inner{max-width:1180px; margin:0 auto; padding:16px 32px; display:flex; align-items:center; justify-content:space-between;}
  .brand{display:flex; align-items:center; color:var(--feature-fg); font-family:var(--display); font-weight:700; font-size:16px;}
  .brand .fv-first{margin-right:8px;}
  .brand svg{display:block;}
  .nav-links{display:flex; align-items:center; gap:28px;}
  .nav-links a{font-size:13.5px; color:var(--feature-soft); transition:color .15s;}
  .nav-links a:hover{color:var(--feature-fg);}
  .lang-switch{display:flex; gap:2px; background:rgba(255,255,255,0.06); border-radius:20px; padding:3px;}
  .lang-switch button{font-family:var(--mono); font-size:11px; padding:5px 10px; border-radius:16px; color:rgba(251,249,244,0.5); letter-spacing:0.05em;}
  .lang-switch button.active{background:var(--brass); color:var(--ink); font-weight:700;}
  .nav-cta{font-family:var(--mono); font-size:12px; font-weight:500; background:var(--brass); color:var(--ink); padding:9px 16px; border-radius:2px; white-space:nowrap;}
  .nav-right{display:flex; align-items:center; gap:18px;}
  .burger{display:none; width:26px; height:20px; position:relative; flex-direction:column; justify-content:space-between;}
  .burger span{display:block; height:2px; background:var(--feature-fg); border-radius:2px;}
  .mobile-menu{display:none; position:fixed; top:64px; left:0; right:0; bottom:0; background:var(--feature-bg); z-index:99; padding:30px 32px; flex-direction:column; gap:22px;}
  .mobile-menu.open{display:flex;}
  .mobile-menu a{color:var(--feature-fg); font-family:var(--display); font-size:20px; font-weight:700;}

  /* HERO */
  .hero{background:var(--feature-bg); color:var(--feature-fg); padding:150px 0 90px; position:relative; overflow:hidden;
    background-image:radial-gradient(ellipse 60% 50% at 15% 20%, rgba(198,150,60,0.10) 0%, transparent 60%), radial-gradient(ellipse 50% 40% at 85% 80%, rgba(51,71,59,0.35) 0%, transparent 60%);}
  .hero::after{content:''; position:absolute; left:-6%; right:-6%; bottom:-32px; height:64px; background:var(--bg); transform:skewY(-1.6deg); z-index:5;}
  .bokeh{position:absolute; border-radius:50%; filter:blur(3px); pointer-events:none; z-index:1;}
  .bokeh.b1{width:90px; height:90px; background:radial-gradient(circle, rgba(198,150,60,0.35), transparent 70%); top:18%; left:10%; animation:bokeh-float 14s ease-in-out infinite;}
  .bokeh.b2{width:50px; height:50px; background:radial-gradient(circle, rgba(51,71,59,0.5), transparent 70%); top:65%; left:18%; animation:bokeh-float 11s ease-in-out infinite reverse;}
  .bokeh.b3{width:120px; height:120px; background:radial-gradient(circle, rgba(198,150,60,0.22), transparent 70%); top:12%; right:12%; animation:bokeh-float 16s ease-in-out infinite 1s;}
  .bokeh.b4{width:60px; height:60px; background:radial-gradient(circle, rgba(227,184,101,0.3), transparent 70%); top:70%; right:20%; animation:bokeh-float 12s ease-in-out infinite 2s reverse;}
  .bokeh.b5{width:38px; height:38px; background:radial-gradient(circle, rgba(198,150,60,0.4), transparent 70%); top:40%; left:4%; animation:bokeh-float 9s ease-in-out infinite 0.5s;}
  .bokeh.b6{width:70px; height:70px; background:radial-gradient(circle, rgba(51,71,59,0.4), transparent 70%); top:35%; right:6%; animation:bokeh-float 13s ease-in-out infinite 1.5s reverse;}
  @keyframes bokeh-float{ 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(18px,-24px) scale(1.12);} }
  .hero.paused .bokeh, .hero.paused .iris{animation-play-state:paused;}
  @media (max-width: 600px){
    .bokeh.b3, .bokeh.b4, .bokeh.b6{display:none;}
    .bokeh{filter:blur(2px);}
  }
  @media (prefers-reduced-motion: reduce){ .bokeh{animation:none;} }
  .viewfinder{position:relative; max-width:900px; margin:0 auto; padding:60px 24px; z-index:2; transition:transform .3s ease-out;}
  .bracket{position:absolute; width:34px; height:34px; opacity:0;}
  .bracket svg{width:100%; height:100%;}
  .bracket.tl{top:0; left:0; animation:bracket-in-tl .7s cubic-bezier(.2,.8,.3,1) 0.1s forwards;}
  .bracket.tr{top:0; right:0; animation:bracket-in-tr .7s cubic-bezier(.2,.8,.3,1) 0.18s forwards;}
  .bracket.bl{bottom:0; left:0; animation:bracket-in-bl .7s cubic-bezier(.2,.8,.3,1) 0.18s forwards;}
  .bracket.br{bottom:0; right:0; animation:bracket-in-br .7s cubic-bezier(.2,.8,.3,1) 0.26s forwards;}
  @keyframes bracket-in-tl{ from{opacity:0; transform:translate(-16px,-16px) scale(0.6);} to{opacity:1; transform:translate(0,0) scale(1);} }
  @keyframes bracket-in-tr{ from{opacity:0; transform:translate(16px,-16px) scale(0.6) scaleX(-1);} to{opacity:1; transform:translate(0,0) scale(1) scaleX(-1);} }
  @keyframes bracket-in-bl{ from{opacity:0; transform:translate(-16px,16px) scale(0.6) scaleY(-1);} to{opacity:1; transform:translate(0,0) scale(1) scaleY(-1);} }
  @keyframes bracket-in-br{ from{opacity:0; transform:translate(16px,16px) scale(0.6) scale(-1,-1);} to{opacity:1; transform:translate(0,0) scale(1) scale(-1,-1);} }
  .iris{width:70px; height:70px; margin:0 auto 26px; opacity:0; animation:iris-spin 18s linear infinite, iris-in .7s ease .1s forwards;}
  @keyframes iris-spin{ from{transform:rotate(0deg);} to{transform:rotate(360deg);} }
  @keyframes iris-in{ from{opacity:0; transform:scale(0.6);} to{opacity:1; transform:scale(1);} }
  @media (prefers-reduced-motion: reduce){ .iris{animation:none; opacity:1;} .bracket{animation:none; opacity:1;} .viewfinder{transition:none;} }
  .hero-eyebrow{text-align:center; margin-bottom:20px;}
  h1.hero-title{font-family:var(--display); font-weight:700; text-align:center; font-size:clamp(32px,5vw,58px); line-height:1.08; letter-spacing:-0.02em; max-width:820px; margin:0 auto;
    filter:blur(14px); opacity:0; transform:scale(1.05); animation:focus-in 1.3s cubic-bezier(.2,.6,.2,1) 0.15s forwards;}
  @keyframes focus-in{ 0%{filter:blur(14px); opacity:0; transform:scale(1.05);} 60%{filter:blur(2px); opacity:1;} 100%{filter:blur(0); opacity:1; transform:scale(1);} }
  @media (prefers-reduced-motion: reduce){ h1.hero-title{animation:none; filter:none; opacity:1; transform:none;} }
  h1.hero-title em{font-style:normal; color:var(--brass-light);}
  .hero-sub{text-align:center; max-width:520px; margin:22px auto 0; font-size:15.5px; line-height:1.6; color:var(--feature-soft);
    opacity:0; transform:translateY(14px); animation:fade-up .8s ease .95s forwards;}
  .hero-actions{display:flex; justify-content:center; margin-top:36px; flex-wrap:wrap;
    opacity:0; transform:translateY(14px); animation:fade-up .8s ease 1.15s forwards;}
  @keyframes fade-up{ to{opacity:1; transform:translateY(0);} }
  @media (prefers-reduced-motion: reduce){ .hero-sub, .hero-actions{animation:none; opacity:1; transform:none;} }
  .hero-actions > a{margin:6px 8px;}
  .btn-primary{font-family:var(--mono); font-size:13px; font-weight:500; background:var(--brass); color:var(--ink); padding:15px 26px; border-radius:2px; display:inline-flex; align-items:center; gap:8px; transition:transform .15s ease, background .15s ease;}
  .btn-primary:hover{background:var(--brass-light); transform:translateY(-2px);}
  .btn-ghost{font-family:var(--mono); font-size:13px; font-weight:500; border:1px solid var(--feature-line); color:var(--feature-fg); padding:15px 26px; border-radius:2px; transition:transform .15s ease, border-color .15s ease;}
  .btn-ghost:hover{border-color:var(--brass); transform:translateY(-2px);}
  .hero-foot{display:flex; justify-content:center; margin-top:56px; font-family:var(--mono); font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:var(--feature-mute); flex-wrap:wrap;
    opacity:0; transform:translateY(14px); animation:fade-up .8s ease 1.35s forwards;}
  @media (prefers-reduced-motion: reduce){ .hero-foot{animation:none; opacity:1; transform:none;} }
  .scroll-cue{display:flex; flex-direction:column; align-items:center; gap:8px; margin-top:64px; opacity:0; animation:fade-up .8s ease 1.7s forwards;}
  .scroll-cue span{font-family:var(--mono); font-size:9.5px; letter-spacing:0.14em; text-transform:uppercase; color:rgba(251,249,244,0.3);}
  .scroll-cue .chev{width:14px; height:8px; opacity:0.4; animation:chev-bounce 1.8s ease-in-out infinite;}
  .scroll-cue .chev:nth-child(3){animation-delay:0.15s;}
  @keyframes chev-bounce{ 0%,100%{transform:translateY(0); opacity:0.15;} 50%{transform:translateY(4px); opacity:0.5;} }
  @media (prefers-reduced-motion: reduce){ .scroll-cue{animation:none; opacity:1;} .scroll-cue .chev{animation:none;} }
  .hero-foot > span{margin:4px 16px;}

  section{padding:100px 0;}
  .section-head{max-width:640px; margin-bottom:56px;}
  h2.section-title{font-family:var(--display); font-weight:700; font-size:clamp(26px,3.2vw,36px); letter-spacing:-0.015em; line-height:1.15; margin-top:12px;}
  .section-lead{font-size:15px; line-height:1.7; color:var(--fg-soft); margin-top:14px;}

  /* WHY */
  .focus-grid{display:flex; border:1px solid var(--line); position:relative;}
  .focus-connector{position:absolute; top:50%; width:26px; height:26px; margin-top:-30px; background:var(--bg); border:1px solid var(--line); border-radius:50%; display:flex; align-items:center; justify-content:center; z-index:3;}
  .focus-connector svg{width:12px; height:12px;}
  .reveal{opacity:1;}
  .reveal.in{animation:revealIn .65s cubic-bezier(.2,.7,.3,1) both;}
  @keyframes revealIn{from{opacity:0; transform:translateY(22px);} to{opacity:1; transform:none;}}
  .reveal.in{opacity:1; transform:translateY(0);}
  .focus-grid .reveal:nth-child(2){transition-delay:.1s;}
  .focus-grid .reveal:nth-child(3){transition-delay:.2s;}
  .lens-grid .reveal:nth-child(2){transition-delay:.12s;}
  .lens-grid .reveal:nth-child(3){transition-delay:.24s;}
  .contact-methods .reveal:nth-child(2){transition-delay:.12s;}
  @media (prefers-reduced-motion: reduce){ .reveal{transition:none; opacity:1; transform:none;} }
  .focus-card{background:var(--surface); padding:40px 30px; flex:1; border-left:1px solid var(--line); transition:background .2s ease, transform .2s ease; position:relative; overflow:hidden;}
  .focus-card .ghost-num{position:absolute; top:-6px; right:14px; font-family:var(--display); font-weight:700; font-size:96px; color:var(--ghost); line-height:1; pointer-events:none; transition:color .2s ease;}
  .focus-card:hover .ghost-num{color:rgba(198,150,60,0.12);}
  .focus-card:first-child{border-left:none;}
  .focus-card:hover{background:var(--bg-alt); transform:translateY(-3px);}
  .focus-mark{margin-bottom:20px; position:relative; z-index:2;}
  .focus-card h3{font-family:var(--display); font-size:18px; font-weight:700; margin-bottom:9px; position:relative; z-index:2;}
  .focus-card p{font-size:14px; line-height:1.6; color:var(--fg-soft); position:relative; z-index:2;}

  /* PORTFOLIO */
  .portfolio{background:var(--bg-alt); position:relative;}
    .section-divider{position:relative; height:1px; background:var(--line-light); margin:56px 0 0;}
  .section-divider .sd-line{display:none;}
  .section-divider .sd-mark{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:18px; height:18px; background:var(--bg-alt); border-radius:50%; display:flex; align-items:center; justify-content:center;}
  .section-divider .sd-mark svg{width:12px; height:12px;}
  .section-divider.dark{background:var(--line-dark);}
  .section-divider.dark .sd-mark{background:var(--feature-bg2);}
  .case-featured{background:var(--surface); border:1px solid var(--line); display:flex; overflow:visible; transition:box-shadow .2s ease; position:relative;}
  .case-featured:hover{box-shadow:0 14px 34px rgba(21,20,15,0.10);}
  .cf-bracket{position:absolute; width:22px; height:22px; opacity:0.5; pointer-events:none;}
  .cf-bracket svg{width:100%; height:100%;}
  .cf-bracket.tl{top:-9px; left:-9px;}
  .cf-bracket.tr{top:-9px; right:-9px; transform:scaleX(-1);}
  .cf-bracket.bl{bottom:-9px; left:-9px; transform:scaleY(-1);}
  .cf-bracket.br{bottom:-9px; right:-9px; transform:scale(-1,-1);}
  #tiltCard{transition:transform .12s ease-out; will-change:transform;}
  .tilt-glare{position:absolute; inset:0; background:radial-gradient(circle at 50% 50%, rgba(255,255,255,0.15), transparent 55%); opacity:0; transition:opacity .25s ease; pointer-events:none; z-index:4;}
  .case-shot:hover .tilt-glare{opacity:1;}
  .live-badge{position:absolute; top:44px; right:12px; background:rgba(5,4,4,0.85); border:1px solid rgba(255,71,38,0.35); border-radius:20px; padding:6px 12px 6px 10px; display:flex; align-items:center; gap:6px; z-index:3;}
  .live-badge .live-dot{width:7px; height:7px; border-radius:50%; background:#25D366; animation:live-pulse 1.8s ease-in-out infinite;}
  .live-badge span{font-family:var(--mono); font-size:10px; color:#fff; letter-spacing:0.04em;}
  @keyframes live-pulse{ 0%,100%{opacity:1;} 50%{opacity:0.35;} }
  .case-shot{background:var(--ink); flex:1.15; aspect-ratio:16/11; display:flex; flex-direction:column; position:relative; overflow:hidden;}
  .browser-chrome{display:flex; align-items:center; gap:6px; padding:10px 14px; background:#1E1D15; border-bottom:1px solid var(--line-dark); flex-shrink:0; position:relative; z-index:2;}
  .browser-chrome .dot{width:8px; height:8px; border-radius:50%; background:rgba(251,249,244,0.18);}
  .browser-chrome .url{margin-left:8px; font-family:var(--mono); font-size:11px; color:rgba(251,249,244,0.4); background:rgba(251,249,244,0.05); padding:4px 12px; border-radius:10px;}
  .fl-mock{flex:1; background:radial-gradient(ellipse 120% 100% at 25% 0%, #1a0e08 0%, #0a0808 55%, #050404 100%); display:flex; flex-direction:column; padding:22px 26px; position:relative; overflow:hidden;}
  .fl-mock::before{content:''; position:absolute; inset:0; background-image:radial-gradient(circle at 1px 1px, rgba(255,255,255,0.05) 1px, transparent 0); background-size:14px 14px; opacity:0.5;}
  .fl-nav{display:flex; align-items:center; justify-content:space-between; position:relative; z-index:2;}
  .fl-logo{font-family:var(--display); font-weight:700; font-size:13px; letter-spacing:-0.01em; color:#fff;}
  .fl-logo .fl-orange{color:#FF4726;}
  .fl-nav-links{display:flex; gap:14px;}
  .fl-nav-links span{width:16px; height:2px; background:rgba(255,255,255,0.25); border-radius:1px;}
  .fl-badges{display:flex; gap:6px; margin-top:14px; flex-wrap:wrap; position:relative; z-index:2;}
  .fl-badge{font-family:var(--mono); font-size:8px; letter-spacing:0.05em; color:#FF4726; border:1px solid rgba(255,71,38,0.3); background:rgba(255,71,38,0.07); padding:3px 7px; border-radius:2px;}
  .fl-eyebrow{font-family:var(--mono); font-size:8.5px; letter-spacing:0.12em; text-transform:uppercase; color:#FF4726; margin-top:16px; position:relative; z-index:2;}
  .fl-headline{font-family:var(--display); font-weight:700; font-size:21px; line-height:1.18; color:#fff; margin-top:8px; max-width:250px; position:relative; z-index:2; letter-spacing:-0.01em;}
  .fl-headline em{font-style:normal; color:#FF4726;}
  .fl-cta{display:flex; align-items:center; gap:8px; margin-top:18px; position:relative; z-index:2;}
  .fl-btn{font-family:var(--mono); font-size:9px; font-weight:700; background:#FF4726; color:#fff; padding:8px 14px; border-radius:2px; letter-spacing:0.02em;}
  .fl-btn-ghost{font-family:var(--mono); font-size:9px; color:rgba(255,255,255,0.6); border:1px solid rgba(255,255,255,0.15); padding:8px 14px; border-radius:2px;}
  .fl-stats{display:flex; gap:26px; margin-top:auto; padding-top:18px; border-top:1px solid rgba(255,255,255,0.08); position:relative; z-index:2;}
  .fl-stats div{font-family:var(--mono); font-size:7.5px; color:rgba(255,255,255,0.4); line-height:1.6; white-space:nowrap;}
  .fl-stats b{display:block; color:#fff; font-family:var(--display); font-size:13px; font-weight:700; margin-bottom:3px;}
  .case-body{flex:1; padding:40px 40px; display:flex; flex-direction:column; justify-content:center;}
  .case-tag{font-family:var(--mono); font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:var(--brass); margin-bottom:10px;}
  .case-body h3{font-family:var(--display); font-size:24px; font-weight:700; margin-bottom:12px;}
  .case-body p{font-size:14.5px; color:var(--fg-soft); line-height:1.65; margin-bottom:20px;}
  .case-link{font-family:var(--mono); font-size:12.5px; color:var(--fg); border-bottom:1px solid var(--brass); padding-bottom:2px; align-self:flex-start;}
  .portfolio-cta{margin-top:24px; font-size:13.5px; color:var(--fg-soft);}
  .portfolio-cta a{color:var(--fg); border-bottom:1px solid var(--brass); font-weight:600;}

  /* SERVICES / LENSES */
  .lenses{background:var(--feature-bg); color:var(--feature-fg); position:relative;}
    .proceso-section{position:relative;}
    .lenses .section-lead{color:var(--feature-soft);}
  .lens-grid{display:flex; flex-wrap:wrap;}
  .lens-card{flex:1; min-width:260px; border:1px solid var(--feature-line); padding:34px 28px; margin:8px; display:flex; flex-direction:column; transition:transform .2s ease, border-color .2s ease;}
  .lens-card:hover{transform:translateY(-4px); border-color:rgba(198,150,60,0.5);}
  .lens-card.featured{border-color:var(--brass); background:rgba(198,150,60,0.05);}
  .lens-card.featured:hover{transform:translateY(-4px) scale(1.015);}
  .lens-top{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:6px;}
  .lens-name{font-family:var(--display); font-size:19px; font-weight:700;}
  .lens-use{font-family:var(--mono); font-size:11px; color:var(--feature-mute); letter-spacing:0.03em; margin-bottom:22px;}
  .lens-badge{font-family:var(--mono); font-size:10px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink); background:var(--brass); padding:4px 9px; border-radius:2px; font-weight:500;}
  .lens-price{font-family:var(--display); font-size:32px; font-weight:700; margin-bottom:22px;}
  .lens-specs{list-style:none; flex:1;}
  .lens-specs li{font-size:13px; padding:9px 0; border-top:1px solid var(--feature-line); display:flex; gap:9px; line-height:1.4; color:var(--feature-fg);}
  .lens-specs li:first-child{border-top:none;}
  .lens-specs li::before{content:"◆"; font-size:7px; color:var(--brass); margin-top:5px; flex-shrink:0;}

  .extras-panel{border:1px solid var(--line-dark); margin-top:50px;}
  .extras-row{display:flex; justify-content:space-between; padding:15px 24px; font-size:13px; border-top:1px solid var(--feature-line); color:var(--feature-soft);}
  .extras-row:first-child{border-top:none;}
  .extras-row b{font-family:var(--mono); font-weight:500; color:var(--feature-fg);}

  /* PROCESS - connected timeline */
  .timeline{position:relative; margin-top:20px;}
  .timeline::before{content:''; position:absolute; left:50%; top:6px; bottom:30px; width:2px; margin-left:-1px; background:linear-gradient(to bottom, var(--brass), rgba(198,150,60,0.15));}
  .tl-item{position:relative; display:flex; padding-bottom:56px;}
  .tl-item.in{animation:revealIn .55s cubic-bezier(.2,.7,.3,1) both;}
  
  .tl-item:last-child{padding-bottom:0;}
  .tl-item:nth-child(odd){justify-content:flex-start;}
  .tl-item:nth-child(even){justify-content:flex-end;}
  .tl-node{position:absolute; left:50%; top:0; transform:translateX(-50%); width:56px; height:56px; border-radius:50%; background:var(--feature-bg); border:2px solid var(--brass); display:flex; align-items:center; justify-content:center; transition:transform .2s ease, box-shadow .2s ease; z-index:2;}
  .tl-item:hover .tl-node{transform:translateX(-50%) scale(1.08); box-shadow:0 0 0 6px rgba(198,150,60,0.12);}
  .tl-node svg{width:22px; height:22px;}
  .tl-content{background:var(--surface); border:1px solid var(--line); padding:22px 26px; transition:transform .2s ease, box-shadow .2s ease; width:calc(50% - 52px); position:relative; overflow:hidden;}
  .tl-item:nth-child(odd) .tl-content{margin-right:52px;}
  .tl-item:nth-child(even) .tl-content{margin-left:52px;}
  .tl-item:hover .tl-content{box-shadow:0 8px 24px rgba(21,20,15,0.08);}
  .tl-item:nth-child(odd):hover .tl-content{transform:translateX(-4px);}
  .tl-item:nth-child(even):hover .tl-content{transform:translateX(4px);}
  .tl-ghost{position:absolute; top:-10px; font-family:var(--display); font-weight:700; font-size:64px; color:var(--ghost); line-height:1; pointer-events:none;}
  .tl-item:nth-child(odd) .tl-ghost{right:16px;}
  .tl-item:nth-child(even) .tl-ghost{left:16px;}
  .tl-num{font-family:var(--mono); font-size:11px; color:var(--brass); letter-spacing:0.05em; margin-bottom:6px; position:relative; z-index:2;}
  .tl-content h4{font-family:var(--display); font-weight:700; font-size:16.5px; margin-bottom:6px; position:relative; z-index:2;}
  .tl-content p{font-size:13.5px; line-height:1.55; color:var(--fg-soft); position:relative; z-index:2;}

  /* SECTORS - elegant rotator */
  .sectors-section{background:var(--feature-bg2); color:var(--feature-fg); padding:110px 0; position:relative; overflow:hidden;}
  .sectors-section::before{content:''; position:absolute; top:50%; left:50%; width:700px; height:700px; background:radial-gradient(circle, rgba(198,150,60,0.10) 0%, transparent 65%); transform:translate(-50%,-50%);}
  .sectors-inner{position:relative; z-index:2; text-align:center;}
  .rotator-line{font-family:var(--display); font-weight:700; font-size:clamp(26px,4.4vw,46px); line-height:1.35; letter-spacing:-0.01em; max-width:760px; margin:0 auto;}
  .rotator-word-wrap{display:inline-block; position:relative; height:1.35em; vertical-align:bottom; overflow:hidden; text-align:center; padding:0 4px; width:18ch;}
  .rotator-word{position:absolute; left:0; right:0; top:0; color:var(--brass-light); cursor:pointer; white-space:nowrap; opacity:0; transform:translateY(60%); transition:opacity .45s cubic-bezier(.2,.7,.3,1), transform .45s cubic-bezier(.2,.7,.3,1); border:none; background:none; font:inherit; padding:0; text-decoration:none; border-bottom:2px solid transparent;}
  .rotator-word.active{opacity:1; transform:translateY(0);}
  .rotator-word.leaving{opacity:0; transform:translateY(-60%);}
  .rotator-word:hover{border-bottom-color:var(--brass-light);}
  .rotator-hint{font-family:var(--mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--feature-mute); margin-top:26px;}
  .sector-chips{display:flex; flex-wrap:wrap; justify-content:center; gap:9px; margin-top:38px; max-width:760px; margin-left:auto; margin-right:auto;}
  .sector-chip{font-family:var(--mono); font-size:12px; color:var(--feature-soft); border:1px solid var(--feature-line); padding:8px 16px; border-radius:20px; cursor:pointer; background:none; transition:all .15s ease;}
  .sector-chip:hover{color:var(--ink); background:var(--brass); border-color:var(--brass);}
  .sector-more{font-size:13.5px; color:var(--feature-mute); margin-top:22px;}
  .sector-more a{color:var(--brass-light); border-bottom:1px solid rgba(227,184,101,0.4); padding-bottom:1px;}
  .rotator-dots{display:flex; justify-content:center; gap:7px; margin-top:22px;}
  .rotator-dots button{width:6px; height:6px; border-radius:50%; background:rgba(251,249,244,0.2); border:none; padding:0; cursor:pointer; transition:background .2s ease, transform .2s ease;}
  .rotator-dots button.active{background:var(--brass); transform:scale(1.4);}
  @media (prefers-reduced-motion: reduce){ .rotator-word{transition:opacity .3s ease;} }

  /* CTA / CONTACT */
  .cta{background:var(--feature-bg); color:var(--feature-fg); text-align:center; position:relative; overflow:hidden;}
  .cta::before{content:""; position:absolute; top:50%; left:50%; width:900px; height:900px; background:radial-gradient(circle, rgba(198,150,60,0.12) 0%, transparent 65%); transform:translate(-50%,-50%);}
  .cta-inner{position:relative; z-index:2;}
  h2.cta-title{font-family:var(--display); font-weight:700; font-size:clamp(28px,4.6vw,46px); letter-spacing:-0.02em; line-height:1.1; max-width:640px; margin:0 auto;}
  h2.cta-title em{font-style:normal; color:var(--brass-light);}
  .cta-sub{max-width:440px; margin:18px auto 0; font-size:14.5px; color:var(--feature-soft); line-height:1.6;}
  .contact-methods{display:flex; justify-content:center; flex-wrap:wrap; margin-top:38px; gap:18px;}
  .contact-card{background:var(--feature-card); border:1px solid var(--feature-line); padding:26px 28px; text-align:left; width:280px; transition:transform .15s ease, border-color .15s ease; cursor:pointer; display:block;}
  .contact-card:hover{transform:translateY(-4px);}
  .contact-card.wa{border-color:rgba(37,211,102,0.4);}
  .contact-card.wa:hover{border-color:#25D366;}
  .contact-card.mail:hover{border-color:var(--brass);}
  .contact-card .cc-top{display:flex; align-items:center; gap:10px; margin-bottom:12px;}
  .contact-card .cc-icon{width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
  .contact-card.wa .cc-icon{background:#25D366;}
  .contact-card.mail .cc-icon{background:var(--brass);}
  .contact-card .cc-icon svg{width:16px; height:16px;}
  .contact-card h4{font-family:var(--display); font-weight:700; font-size:15.5px; color:var(--feature-fg);}
  .contact-card p{font-size:12.5px; color:var(--feature-soft); line-height:1.55; margin-bottom:16px; min-height:52px;}
  .contact-card .cc-action{font-family:var(--mono); font-size:12px; font-weight:700;}
  .contact-card.wa .cc-action{color:#25D366;}
  .contact-card.mail .cc-action{color:var(--brass-light);}
  .wa-float:hover{transform:scale(1.08);}
  .wa-float::before{content:''; position:absolute; inset:0; border-radius:50%; background:#25D366; animation:wa-pulse 2.4s ease-out infinite;}
  @keyframes wa-pulse{ 0%{transform:scale(1); opacity:0.55;} 100%{transform:scale(1.7); opacity:0;} }
  @media (prefers-reduced-motion: reduce){ .wa-float::before{animation:none;} }

  footer{background:var(--feature-bg); color:var(--feature-mute); border-top:1px solid var(--feature-line); padding:40px 0;}
  .footer-top{display:flex; justify-content:space-between; flex-wrap:wrap; gap:20px; padding-bottom:28px; border-bottom:1px solid var(--line-dark);}
  .footer-brand{color:var(--feature-fg); font-family:var(--display); font-weight:700; font-size:15px; display:flex; align-items:center;}
  .footer-links{display:flex; gap:24px; flex-wrap:wrap; font-size:12.5px;}
  .footer-links a:hover{color:var(--white);}
  .footer-tagline{font-family:var(--mono); font-size:11.5px; color:var(--feature-mute); opacity:0.75; padding-top:18px; max-width:520px;}
  .footer-bottom{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; padding-top:20px; font-family:var(--mono); font-size:11px;}
  .footer-legal{display:flex; gap:18px; flex-wrap:wrap;}
  .footer-legal a:hover{color:var(--white);}

  .wa-float{position:fixed; bottom:calc(24px + env(safe-area-inset-bottom)); right:calc(24px + env(safe-area-inset-right)); z-index:210; background:#25D366; width:56px; height:56px; border-radius:50%;
    display:flex; align-items:center; justify-content:center; box-shadow:0 6px 20px rgba(0,0,0,0.3); transition:bottom .2s ease;}
  .wa-float svg{width:28px; height:28px;}

  .cookie-banner{position:fixed; left:0; right:0; bottom:0; z-index:200; background:var(--feature-bg); color:var(--feature-fg); border-top:1px solid var(--feature-line);
    padding:20px 24px calc(20px + env(safe-area-inset-bottom)); display:none; }
  .cookie-banner.show{display:block;}
  .cookie-inner{max-width:1180px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px;}
  .cookie-text{font-size:12.5px; line-height:1.5; color:var(--feature-soft); max-width:640px;}
  .cookie-text a{color:var(--brass-light); text-decoration:underline;}
  .cookie-actions{display:flex; gap:10px; flex-wrap:wrap;}
  .cookie-btn{font-family:var(--mono); font-size:11.5px; padding:10px 16px; border-radius:2px;}
  .cookie-btn.accept{background:var(--brass); color:var(--ink); font-weight:700;}
  .cookie-btn.reject{border:1px solid var(--feature-line); color:var(--feature-fg);}

  @media (max-width: 900px){
    .nav-links{display:none;}
    .burger{display:flex;}
    .nav-cta{display:none;}
    .case-featured{flex-direction:column;}
    .lens-card{min-width:100%;}
    .focus-grid{flex-direction:column;}
    .focus-card{border-left:none; border-top:1px solid var(--line);}
    .focus-card:first-child{border-top:none;}
    .focus-connector{display:none;}
  }
  @media (max-width: 600px){
    .focus-connector{display:none;}
    section{padding:70px 0;}
    .hero{padding:130px 0 60px;}
    .wrap{padding:0 20px;}
    .timeline::before{left:21px; margin-left:0;}
    .tl-item{padding-left:60px; display:block;}
    .tl-item:nth-child(odd), .tl-item:nth-child(even){justify-content:flex-start;}
    .tl-node{left:0; transform:none; width:44px; height:44px;}
    .tl-item:hover .tl-node{transform:scale(1.08);}
    .tl-content{width:auto;}
    .tl-item:nth-child(odd) .tl-content, .tl-item:nth-child(even) .tl-content{margin-left:0; margin-right:0;}
    .tl-item:nth-child(odd):hover .tl-content, .tl-item:nth-child(even):hover .tl-content{transform:none;}
    .tl-ghost{display:none;}
    .tl-node svg{width:18px; height:18px;}
    .marquee-item{font-size:17px; padding:0 18px;}
    .marquee-row.row2 .marquee-item{font-size:15px;}
  }

  .theme-toggle{width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    border:1px solid var(--line-dark); background:rgba(255,255,255,0.05); cursor:pointer; transition:transform .2s ease, background .2s ease; flex-shrink:0;}
  .theme-toggle:hover{transform:rotate(20deg) scale(1.08); background:rgba(198,150,60,0.18);}
  .theme-toggle svg{width:15px; height:15px;}
  .theme-toggle .icon-sun{display:none;}
  html[data-theme="dark"] .theme-toggle .icon-sun{display:block;}
  html[data-theme="dark"] .theme-toggle .icon-moon{display:none;}

  /* ===== PRELOADER ===== */
  #preloader{position:fixed; inset:0; z-index:10000; background:var(--feature-bg); display:flex; flex-direction:column;
    align-items:center; justify-content:center; transition:opacity .6s ease, visibility .6s ease;}
  #preloader.done{opacity:0; visibility:hidden;}
  .pl-frame{position:relative; width:120px; height:76px;}
  .pl-frame span{position:absolute; width:22px; height:22px; border:2px solid var(--brass); opacity:0;}
  .pl-frame span:nth-child(1){top:0; left:0; border-right:none; border-bottom:none; animation:pl-in .5s ease .05s forwards;}
  .pl-frame span:nth-child(2){top:0; right:0; border-left:none; border-bottom:none; animation:pl-in .5s ease .15s forwards;}
  .pl-frame span:nth-child(3){bottom:0; left:0; border-right:none; border-top:none; animation:pl-in .5s ease .25s forwards;}
  .pl-frame span:nth-child(4){bottom:0; right:0; border-left:none; border-top:none; animation:pl-in .5s ease .35s forwards;}
  @keyframes pl-in{from{opacity:0; transform:scale(.5);} to{opacity:1; transform:scale(1);}}
  .pl-word{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    font-family:var(--display); font-weight:700; font-size:15px; letter-spacing:.22em; color:var(--feature-fg);
    opacity:0; animation:pl-fade .6s ease .45s forwards;}
  @keyframes pl-fade{to{opacity:1;}}
  .pl-bar{width:120px; height:2px; background:rgba(198,150,60,.2); margin-top:26px; overflow:hidden;}
  .pl-bar i{display:block; height:100%; width:0; background:var(--brass); animation:pl-load 1.1s cubic-bezier(.4,0,.2,1) .3s forwards;}
  @keyframes pl-load{to{width:100%;}}

  /* ===== FORMULARIO ===== */
  .fv-form{max-width:620px; margin:40px auto 0; text-align:left;}
  .fv-row{display:flex; gap:16px; flex-wrap:wrap;}
  .fv-field{flex:1; min-width:220px; margin-bottom:18px; position:relative;}
  .fv-field label{display:block; font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
    color:var(--feature-soft); margin-bottom:7px;}
  .fv-field input, .fv-field textarea, .fv-field select{
    width:100%; background:var(--feature-card); border:1px solid var(--feature-line); color:var(--feature-fg);
    padding:13px 15px; font-family:var(--body); font-size:14.5px; border-radius:2px; transition:all .2s ease;}
  .fv-field textarea{min-height:110px; resize:vertical;}
  .fv-field input:focus, .fv-field textarea:focus, .fv-field select:focus{
    outline:none; border-color:var(--brass); background:rgba(198,150,60,.06);}
  .fv-field.invalid input, .fv-field.invalid textarea, .fv-field.invalid select{border-color:#E5533D;}
  .fv-error{display:none; font-size:12px; color:#E5533D; margin-top:6px;}
  .fv-field.invalid .fv-error{display:block;}
  .fv-submit{font-family:var(--mono); font-size:13px; font-weight:700; background:var(--brass); color:var(--ink);
    padding:15px 30px; border-radius:2px; border:none; cursor:pointer; transition:all .2s ease; width:100%;}
  .fv-submit:hover{background:var(--brass-light); transform:translateY(-2px);}
  .fv-submit:disabled{opacity:.6; cursor:wait; transform:none;}
  .fv-note{font-size:11.5px; color:var(--feature-mute); margin-top:14px; text-align:center;}
  .fv-note a{color:var(--brass-light); text-decoration:underline;}
  .fv-status{display:none; padding:16px; border-radius:2px; font-size:14px; margin-top:16px; text-align:center;}
  .fv-status.ok{display:block; background:rgba(37,211,102,.12); border:1px solid rgba(37,211,102,.4); color:#7BE3A3;}
  .fv-status.err{display:block; background:rgba(229,83,61,.12); border:1px solid rgba(229,83,61,.4); color:#F09080;}
  .fv-hp{position:absolute; left:-9999px; opacity:0;}

  /* ===== TESTIMONIOS ===== */
  .testi-grid{display:flex; flex-wrap:wrap; gap:22px; justify-content:center;}
  .testi-card{flex:1; min-width:280px; max-width:360px; background:var(--surface); border:1px solid var(--line);
    padding:30px 28px; position:relative; transition:transform .25s ease, box-shadow .25s ease;}
  .testi-card:hover{transform:translateY(-5px); box-shadow:0 14px 34px rgba(21,20,15,.09);}
  .testi-quote{font-family:var(--display); font-size:52px; line-height:1; color:var(--brass); opacity:.28; margin-bottom:6px;}
  .testi-card p{font-size:14.5px; line-height:1.65; color:var(--fg-soft); margin-bottom:20px;}
  .testi-who{display:flex; align-items:center; gap:12px; border-top:1px solid var(--line); padding-top:16px;}
  .testi-av{width:38px; height:38px; border-radius:50%; background:var(--ink); color:var(--brass);
    display:flex; align-items:center; justify-content:center; font-family:var(--display); font-weight:700; font-size:14px; flex-shrink:0;}
  .testi-name{font-family:var(--display); font-weight:700; font-size:14px;}
  .testi-role{font-family:var(--mono); font-size:11px; color:var(--fg-mute);}

  /* ===== REDES SOCIALES ===== */
  .social-row{display:flex; gap:10px;}
  .social-row a{width:36px; height:36px; border-radius:50%; border:1px solid var(--line-dark);
    display:flex; align-items:center; justify-content:center; transition:all .2s ease;}
  .social-row a:hover{background:var(--brass); border-color:var(--brass); transform:translateY(-3px);}
  .social-row svg{width:16px; height:16px; fill:rgba(251,249,244,.6); transition:fill .2s ease;}
  .social-row a:hover svg{fill:var(--ink);}

  /* ===== TEXTO QUE APARECE PALABRA A PALABRA ===== */
  .word-rise{display:inline-block; overflow:hidden; vertical-align:bottom;}
  .word-rise > i{display:inline-block; font-style:inherit; transform:translateY(105%);
    transition:transform .75s cubic-bezier(.16,1,.3,1);}
  .in .word-rise > i, .word-rise.in > i{transform:translateY(0);}

  /* ===== BOTONES MAGNÉTICOS / BRILLO ===== */
  .magnetic{transition:transform .25s cubic-bezier(.2,.8,.3,1);}
  .btn-primary, .fv-submit, .nav-cta{position:relative; overflow:hidden;}
  .btn-primary::after, .fv-submit::after, .nav-cta::after{
    content:''; position:absolute; top:0; left:-120%; width:60%; height:100%;
    background:linear-gradient(120deg, transparent, rgba(255,255,255,.45), transparent); transform:skewX(-20deg);}
  .btn-primary:hover::after, .fv-submit:hover::after, .nav-cta:hover::after{animation:sheen .75s ease;}
  @keyframes sheen{to{left:130%;}}

  @media (prefers-reduced-motion: reduce){
    .word-rise > i{transform:none !important; transition:none;}
    .pl-frame span, .pl-word, .pl-bar i{animation:none; opacity:1;}
    .magnetic{transition:none;}
  }
  @media (max-width:600px){
    .fv-row{gap:0; display:block;}
    .fv-field{min-width:0; width:100%;}
    .fv-form{margin-top:30px;}
    .testi-card{min-width:0; max-width:100%;}
  }

  /* ================= SIMULADOR ================= */
  .sim-section{background:var(--feature-bg2); color:var(--feature-fg); position:relative; overflow:hidden; padding:110px 0;}
  .sim-section::before{content:''; position:absolute; top:-20%; left:50%; width:900px; height:900px; transform:translateX(-50%);
    background:radial-gradient(circle, rgba(198,150,60,.10) 0%, transparent 62%); pointer-events:none;}
  .sim-head{text-align:center; max-width:640px; margin:0 auto 46px; position:relative; z-index:2;}
  .sim-head h2{font-family:var(--display); font-weight:700; font-size:clamp(26px,3.4vw,38px); letter-spacing:-.015em; margin-top:12px;}
  .sim-head p{font-size:15px; line-height:1.7; color:var(--feature-soft); margin-top:14px;}

  .sim-wrap{display:flex; gap:34px; align-items:flex-start; position:relative; z-index:2;}
  .sim-panel{width:340px; flex-shrink:0;}
  .sim-stage{flex:1; min-width:0; position:sticky; top:90px;}

  .sim-step{margin-bottom:26px;}
  .sim-step-label{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--brass); margin-bottom:12px; display:flex; align-items:center;}
  .sim-step-label b{margin-right:9px;}
  .sim-step-label b{width:19px; height:19px; border-radius:50%; background:var(--brass); color:var(--ink); font-size:10px;
    display:flex; align-items:center; justify-content:center; font-family:var(--display);}
  .sim-opts{display:flex; flex-wrap:wrap; margin:0 -4px;}
  .sim-opts .sim-opt{margin:0 4px 8px;}
  .sim-opt{font-family:var(--body); font-size:13px; padding:9px 15px; border-radius:2px; cursor:pointer;
    border:1px solid var(--feature-line); background:var(--feature-card); color:var(--feature-soft); transition:all .18s ease;}
  .sim-opt:hover{border-color:rgba(198,150,60,.55); color:var(--feature-fg); transform:translateY(-2px);}
  .sim-opt.on{background:var(--brass); border-color:var(--brass); color:var(--ink); font-weight:600;}
  .sim-swatch{display:inline-flex; align-items:center;}
  .sim-swatch i{margin-right:7px;}
  .sim-swatch i{width:13px; height:13px; border-radius:50%; display:inline-block; border:1px solid rgba(0,0,0,.25);}

  .sim-quote{margin-top:26px; border:1px solid var(--feature-line); background:var(--feature-card); padding:20px 22px;}
  .sim-quote .q-lab{font-family:var(--mono); font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--feature-mute);}
  .sim-quote .q-pack{font-family:var(--display); font-weight:700; font-size:19px; margin-top:5px;}
  .sim-quote .q-price{font-family:var(--display); font-weight:700; font-size:34px; color:var(--brass-light); line-height:1; margin-top:8px;}
  .sim-quote .q-why{font-size:12.5px; color:var(--feature-soft); margin-top:10px; line-height:1.55;}
  .sim-send{display:flex; align-items:center; justify-content:center; gap:9px; width:100%; margin-top:16px;
    font-family:var(--mono); font-size:12.5px; font-weight:700; background:#25D366; color:#0C1B10;
    padding:14px 18px; border-radius:2px; border:none; cursor:pointer; transition:transform .18s ease;}
  .sim-send:hover{transform:translateY(-2px);}
  .sim-send svg{width:16px; height:16px;}
  .sim-reset{width:100%; margin-top:9px; background:none; border:none; cursor:pointer;
    font-family:var(--mono); font-size:11.5px; color:var(--feature-mute); text-decoration:underline; padding:6px;}

  /* --- Maqueta de navegador --- */
  .sim-device{border:1px solid var(--feature-line); background:#0d0c09; overflow:hidden; transition:max-width .45s cubic-bezier(.2,.8,.3,1); max-width:100%; margin:0 auto;}
  .sim-device.mobile{max-width:340px;}
  .sim-bar{display:flex; align-items:center; gap:6px; padding:10px 14px; background:#1a1913; border-bottom:1px solid var(--feature-line);}
  .sim-bar i{width:8px; height:8px; border-radius:50%; background:rgba(251,249,244,.16); display:block;}
  .sim-url{margin-left:8px; font-family:var(--mono); font-size:10.5px; color:rgba(251,249,244,.4);
    background:rgba(251,249,244,.05); padding:4px 12px; border-radius:10px; flex:1; text-align:center;}
  .sim-toggle{display:flex; gap:4px; margin-left:8px;}
  .sim-toggle button{background:none; border:none; cursor:pointer; padding:3px; opacity:.4; transition:opacity .2s;}
  .sim-toggle button.on{opacity:1;}
  .sim-toggle svg{width:13px; height:13px; fill:#C6963C;}

  /* --- Web simulada --- */
  .mock{--m-bg:#12100c; --m-fg:#F5F2EA; --m-acc:#C6963C; --m-soft:rgba(245,242,234,.55); --m-card:rgba(255,255,255,.05);
    background:var(--m-bg); color:var(--m-fg); min-height:430px; transition:background .5s ease, color .5s ease;}
  .mock.light{--m-bg:#F7F5EF; --m-fg:#1a1813; --m-soft:rgba(26,24,19,.6); --m-card:rgba(0,0,0,.04);}
  .mock-nav{display:flex; align-items:center; justify-content:space-between; padding:14px 22px; border-bottom:1px solid rgba(128,128,128,.18);}
  .mock-logo{font-family:var(--display); font-weight:700; font-size:14px; letter-spacing:-.01em;}
  .mock-logo span{color:var(--m-acc);}
  .mock-links{display:flex; gap:14px;}
  .mock-links i{display:block; width:26px; height:5px; border-radius:3px; background:currentColor; opacity:.22;}
  .mock-cta{font-family:var(--mono); font-size:9.5px; font-weight:700; background:var(--m-acc); color:var(--m-acc-text,#fff); padding:6px 12px; border-radius:2px;}
  
  .mock-hero{padding:34px 22px 30px; position:relative; overflow:hidden;}
  .mock-eyebrow{font-family:var(--mono); font-size:8.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--m-acc);}
  .mock-h1{font-family:var(--display); font-weight:700; font-size:27px; line-height:1.14; margin-top:9px; max-width:330px; letter-spacing:-.015em;}
  .mock-h1 em{font-style:normal; color:var(--m-acc);}
  .mock-sub{font-size:11.5px; color:var(--m-soft); margin-top:11px; max-width:290px; line-height:1.6;}
  .mock-btns{display:flex; gap:8px; margin-top:16px;}
  .mock-b1{font-family:var(--mono); font-size:9.5px; font-weight:700; background:var(--m-acc); color:var(--m-acc-text,#fff); padding:9px 15px; border-radius:2px;}
  .mock-b2{font-family:var(--mono); font-size:9.5px; padding:9px 15px; border-radius:2px; border:1px solid rgba(128,128,128,.35); color:var(--m-soft);}
  .mock-block{padding:20px 22px; border-top:1px solid rgba(128,128,128,.16); animation:mock-in .45s cubic-bezier(.2,.8,.3,1);}
  @keyframes mock-in{from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:translateY(0);}}
  .mock-bt{font-family:var(--display); font-weight:700; font-size:13px; margin-bottom:12px; display:flex; align-items:center; gap:7px;}
  .mock-bt svg{width:13px; height:13px; stroke:var(--m-acc); fill:none; stroke-width:1.7;}
  .mock-gal{display:flex; gap:7px;}
  .mock-gal i{flex:1; height:52px; border-radius:2px; background:var(--m-card); display:block; border:1px solid rgba(128,128,128,.18);}
  .mock-rows i{display:block; height:8px; border-radius:3px; background:var(--m-card); margin-bottom:7px;}
  .mock-rows i:nth-child(2){width:80%;} .mock-rows i:nth-child(3){width:58%;}
  .mock-map{height:66px; border-radius:2px; background:var(--m-card); position:relative; overflow:hidden;}
  .mock-map::after{content:''; position:absolute; inset:0;
    background-image:linear-gradient(rgba(128,128,128,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(128,128,128,.16) 1px,transparent 1px);
    background-size:17px 17px;}
  .mock-map b{position:absolute; top:50%; left:50%; width:11px; height:11px; margin:-5px 0 0 -5px; border-radius:50% 50% 50% 0;
    transform:rotate(-45deg); background:var(--m-acc); z-index:2;}
  .mock-slots{display:flex; gap:6px; flex-wrap:wrap;}
  .mock-slots span{font-family:var(--mono); font-size:9px; padding:6px 10px; border-radius:2px; background:var(--m-card); color:var(--m-soft);}
  .mock-slots span.free{background:var(--m-acc); color:#fff;}
  .mock-testi{display:flex; gap:9px;}
  .mock-testi div{flex:1; background:var(--m-card); padding:11px; border-radius:2px;}
  .mock-testi b{display:block; font-size:14px; color:var(--m-acc); line-height:1;}
  .mock-testi i{display:block; height:5px; border-radius:3px; background:currentColor; opacity:.2; margin-top:7px;}
  .mock-testi i:nth-child(3){width:70%;}
  .mock-shop{display:flex; gap:8px;}
  .mock-shop div{flex:1;}
  .mock-shop i{display:block; height:42px; border-radius:2px; background:var(--m-card);}
  .mock-shop b{display:block; font-family:var(--mono); font-size:9px; color:var(--m-acc); margin-top:6px;}
  .mock-foot{padding:14px 22px; border-top:1px solid rgba(128,128,128,.16); display:flex; justify-content:space-between; align-items:center;}
  .mock-foot span{font-family:var(--mono); font-size:8.5px; color:var(--m-soft);}
  .mock-wa{width:26px; height:26px; border-radius:50%; background:#25D366; display:flex; align-items:center; justify-content:center;}
  .mock-wa svg{width:14px; height:14px; fill:#0C1B10;}

  @media (max-width:960px){
    .sim-wrap{flex-direction:column;}
    .sim-panel{width:100%;}
    .sim-stage{position:static; width:100%;}
    .sim-toggle{display:none;}
  }
/* ================= TRANSICIÓN ENTRE PÁGINAS ================= */
#pageVeil{position:fixed; inset:0; z-index:9998; background:var(--feature-bg); pointer-events:none;
  transform:scaleY(0); transform-origin:bottom; transition:transform .42s cubic-bezier(.7,0,.3,1);}
#pageVeil.on{transform:scaleY(1); transform-origin:bottom;}
main{animation:pageIn .55s cubic-bezier(.2,.8,.3,1) both;}
@keyframes pageIn{from{opacity:0; transform:translateY(12px);} to{opacity:1; transform:none;}}
@media (prefers-reduced-motion: reduce){ #pageVeil{display:none;} main{animation:none;} }

.nav-links a.active, .mobile-menu a.active{color:var(--brass);}
.nav-links a.active::after{content:''; display:block; height:1px; background:var(--brass); margin-top:3px;}

/* ================= CABECERA DE SUBPÁGINA ================= */
.page-hero{background:var(--feature-bg); color:var(--feature-fg); padding:150px 0 80px; position:relative; overflow:hidden;
  background-image:radial-gradient(ellipse 60% 60% at 20% 10%, rgba(198,150,60,.10) 0%, transparent 62%);}
.crumbs{font-family:var(--mono); font-size:11.5px; color:var(--feature-mute); margin-bottom:18px;}
.crumbs a{color:var(--feature-mute);} .crumbs a:hover{color:var(--brass);}
.crumbs span{color:var(--brass);}
.page-hero h1{font-family:var(--display); font-weight:700; font-size:clamp(32px,5.2vw,56px); line-height:1.06; letter-spacing:-.02em; max-width:780px;}
.page-hero h1 em{font-style:normal; color:var(--brass-light);}
.page-hero .ph-sub{font-size:16px; line-height:1.65; color:var(--feature-soft); max-width:560px; margin-top:20px;}
.page-hero .ph-meta{display:flex; flex-wrap:wrap; margin-top:32px;}
.page-hero .ph-meta div{margin-right:44px; margin-top:10px;}
.page-hero .ph-meta b{display:block; font-family:var(--display); font-size:23px; font-weight:700;}
.page-hero .ph-meta span{font-family:var(--mono); font-size:10.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--feature-mute);}

/* ================= TARJETAS DE PRODUCTO (estilo Apple) ================= */
.prod-grid{display:flex; flex-wrap:wrap; margin:0 -11px;}
.prod{width:calc(33.333% - 22px); margin:11px; background:var(--surface); border:1px solid var(--line);
  padding:40px 32px 34px; display:flex; flex-direction:column; text-align:center; position:relative; overflow:hidden;
  transition:transform .3s cubic-bezier(.2,.8,.3,1), box-shadow .3s ease, border-color .3s ease;}
.prod:hover{transform:translateY(-8px); box-shadow:0 22px 50px rgba(21,20,15,.12); border-color:rgba(198,150,60,.5);}
.prod.feat{border-color:var(--brass);}
.prod-tag{position:absolute; top:0; left:50%; transform:translateX(-50%); background:var(--brass); color:var(--ink);
  font-family:var(--mono); font-size:9.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; padding:5px 14px;}
.prod h3{font-family:var(--display); font-weight:700; font-size:24px; margin-bottom:5px;}
.prod .p-for{font-family:var(--mono); font-size:11.5px; color:var(--fg-mute); margin-bottom:22px;}
.prod .p-price{font-family:var(--display); font-weight:700; font-size:44px; line-height:1; letter-spacing:-.02em;}
.prod .p-note{font-family:var(--mono); font-size:10.5px; color:var(--fg-mute); margin-top:7px;}
.prod ul{list-style:none; text-align:left; margin:26px 0; flex:1;}
.prod li{font-size:13.5px; padding:9px 0; border-top:1px solid var(--line); display:flex; line-height:1.45; color:var(--fg-soft);}
.prod li:first-child{border-top:none;}
.prod li::before{content:'✓'; color:var(--brass); font-weight:700; margin-right:9px; flex-shrink:0;}
.prod .p-go{display:block; font-family:var(--mono); font-size:12.5px; font-weight:700; background:var(--feature-bg); color:var(--feature-fg);
  padding:14px; border-radius:2px; transition:background .2s ease;}
.prod:hover .p-go{background:var(--brass); color:var(--ink);}
@media (max-width:900px){ .prod{width:calc(100% - 22px);} }

/* ================= BLOQUES DE SUBPÁGINA ================= */
.split{display:flex; align-items:center; margin:0 -24px;}
.split > div{flex:1; padding:0 24px; min-width:0;}
.split.rev{flex-direction:row-reverse;}
.split h2{font-family:var(--display); font-weight:700; font-size:clamp(24px,3vw,34px); letter-spacing:-.015em; line-height:1.18;}
.split p{font-size:15px; line-height:1.75; color:var(--fg-soft); margin-top:16px;}
.split .visual{background:var(--ink); aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;}
@media (max-width:860px){ .split, .split.rev{flex-direction:column;} .split > div{width:100%; margin-bottom:26px;} }

.faq-item{border-top:1px solid var(--line); padding:0;}
.faq-item:last-child{border-bottom:1px solid var(--line);}
.faq-q{width:100%; text-align:left; background:none; border:none; cursor:pointer; padding:22px 0;
  font-family:var(--display); font-weight:700; font-size:16.5px; color:var(--fg); display:flex; justify-content:space-between; align-items:center;}
.faq-q i{font-style:normal; color:var(--brass); font-size:22px; line-height:1; transition:transform .3s ease; flex-shrink:0; margin-left:16px;}
.faq-item.open .faq-q i{transform:rotate(45deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .35s ease;}
.faq-a p{font-size:14.5px; line-height:1.7; color:var(--fg-soft); padding-bottom:22px; max-width:720px;}
.faq-item.open .faq-a{max-height:420px;}

.next-nav{display:flex; border-top:1px solid var(--line); margin-top:70px;}
.next-nav a{flex:1; padding:34px 0; transition:background .2s ease;}
.next-nav a:hover{background:var(--bg-alt);}
.next-nav a + a{border-left:1px solid var(--line); text-align:right; padding-left:24px;}
.next-nav span{font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--fg-mute); display:block; margin-bottom:7px;}
.next-nav b{font-family:var(--display); font-size:19px; font-weight:700;}

.ideal-list{list-style:none; margin-top:24px;}
.ideal-list li{font-size:15px; line-height:1.5; color:var(--fg-soft); padding:12px 0 12px 30px; position:relative; border-top:1px solid var(--line);}
.ideal-list li:first-child{border-top:none;}
.ideal-list li::before{content:'✓'; position:absolute; left:0; top:12px; color:var(--brass); font-weight:700;}


  /* --- Simulador: variantes tipográficas --- */
  .mock.font-grotesk .mock-h1, .mock.font-grotesk .mock-logo, .mock.font-grotesk .mock-bt{font-family:var(--display); letter-spacing:-.015em;}
  .mock.font-mono .mock-h1, .mock.font-mono .mock-logo, .mock.font-mono .mock-bt{font-family:var(--mono); letter-spacing:-.02em; text-transform:uppercase;}
  .mock.font-mono .mock-h1{font-size:22px; line-height:1.25;}
  .mock.font-serif .mock-h1, .mock.font-serif .mock-logo{font-family:Georgia,'Times New Roman',serif; letter-spacing:-.01em; font-weight:400;}
  .mock.font-serif .mock-h1{font-size:30px; line-height:1.16;}
  .mock.font-serif .mock-h1 em{font-style:italic;}

  /* --- Simulador: variantes de composición --- */
  .mock.lay-clasico .mock-hero{text-align:center;}
  .mock.lay-clasico .mock-h1, .mock.lay-clasico .mock-sub{margin-left:auto; margin-right:auto;}
  .mock.lay-clasico .mock-btns{justify-content:center;}
  .mock.lay-editorial .mock-hero{text-align:left; padding-left:26px;}
  .mock.lay-editorial .mock-h1{border-left:3px solid var(--m-acc); padding-left:14px;}
  .mock.lay-revista .mock-hero{display:flex; align-items:center;}
  .mock.lay-revista .mock-hero > *{flex:1;}
  .mock.lay-revista .mock-h1{max-width:none; font-size:24px;}
  .mock.lay-revista::after{content:''; }
  .mock.lay-revista .mock-hero{position:relative;}
  .mock.lay-revista .mock-hero .mock-btns{margin-top:12px;}
  .mock.lay-impacto .mock-h1{font-size:40px; line-height:1.02; max-width:none; text-transform:uppercase;}
  .mock.lay-impacto .mock-eyebrow{font-size:9.5px;}
  .mock.lay-impacto .mock-sub{max-width:250px;}
  .mock.font-serif.lay-impacto .mock-h1{text-transform:none; font-size:38px;}

  .mock.lay-minimal .mock-hero{padding:52px 26px; text-align:left;}
  .mock.lay-minimal .mock-eyebrow{display:none;}
  .mock.lay-minimal .mock-h1{font-size:24px; font-weight:500; max-width:280px;}
  .mock.lay-minimal .mock-sub{margin-top:16px;}
  .mock.lay-minimal .mock-btns .mock-b2{display:none;}
  .mock.lay-split .mock-hero{display:flex; align-items:center; padding:0; min-height:180px;}
  .mock.lay-split .mock-hero > .mock-eyebrow{display:none;}
  .mock.lay-split .mock-h1{flex:1; padding:26px; margin:0; background:var(--m-acc); color:#fff; font-size:23px; max-width:none; align-self:stretch; display:flex; align-items:center;}
  .mock.lay-split .mock-h1 em{color:#fff; opacity:.75;}
  .mock.lay-split .mock-sub{flex:1; padding:26px; margin:0; max-width:none;}
  .mock.lay-split .mock-btns{position:absolute; bottom:14px; right:26px; margin:0;}


  html:not([data-theme="dark"]) .glass{
    background: rgba(255,255,255,0.55);
    border: 1px solid rgba(21,20,15,0.08);
    box-shadow: 0 8px 32px rgba(21,20,15,0.08), inset 0 1px 0 rgba(255,255,255,0.5);
  }

  /* ================= SIMULADOR: efectos "wow" ================= */
  .mock-anim{animation:mockSwap .45s cubic-bezier(.2,.8,.3,1);}
  @keyframes mockSwap{from{opacity:.35; transform:scale(.985) translateY(4px);} to{opacity:1; transform:scale(1) translateY(0);}}

  #mockLogoEdit{outline:none; cursor:text; border-radius:2px; padding:2px 5px; margin:-2px -5px; transition:background .15s ease;}
  #mockLogoEdit:hover{background:rgba(128,128,128,.14);}
  #mockLogoEdit:focus{background:rgba(198,150,60,.14); box-shadow:0 0 0 1px var(--m-acc);}

  .sim-device.sim-pulse{animation:simPulse .7s ease;}
  @keyframes simPulse{0%{box-shadow:0 0 0 0 rgba(198,150,60,.55);} 100%{box-shadow:0 0 0 26px rgba(198,150,60,0);}}

  .sim-surprise{width:100%; margin-top:10px; font-family:var(--mono); font-size:12.5px; font-weight:700;
    background:none; border:1px dashed rgba(198,150,60,.55); color:var(--brass-light); padding:11px; border-radius:2px;
    cursor:pointer; transition:all .18s ease;}
  .sim-surprise:hover{background:rgba(198,150,60,.1); border-style:solid; transform:translateY(-2px);}

  .sim-color-row{display:flex; align-items:center; gap:10px; margin-top:10px;}
  .sim-color-row label{font-family:var(--mono); font-size:11.5px; color:var(--feature-soft);}
  .sim-color-row input[type=color]{width:34px; height:34px; border:1px solid var(--feature-line); border-radius:50%;
    padding:0; background:none; cursor:pointer; overflow:hidden;}
  .sim-color-row input[type=color]::-webkit-color-swatch-wrapper{padding:0;}
  .sim-color-row input[type=color]::-webkit-color-swatch{border:none; border-radius:50%;}

  @media (prefers-reduced-motion: reduce){ .mock-anim, .sim-device.sim-pulse{animation:none;} }

  /* ================= ANTES / DESPUÉS ================= */
  .ba-section{padding:90px 0 100px;}
  .ba-slider{position:relative; max-width:880px; margin:40px auto 0; height:420px; aspect-ratio:16/10.2; overflow:hidden;
    border:1px solid var(--line); border-radius:3px; user-select:none; cursor:ew-resize; box-shadow:0 20px 50px rgba(0,0,0,.12);}
  .ba-old, .ba-new{position:absolute; inset:0; overflow:hidden;}
  .ba-new{clip-path:inset(0 0 0 50%); transition:clip-path .05s linear;}
  .ba-handle{position:absolute; top:0; bottom:0; left:50%; width:2px; background:#fff; transform:translateX(-50%); pointer-events:none; box-shadow:0 0 0 1px rgba(0,0,0,.15);}
  .ba-handle::after{content:'⇔'; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:46px; height:46px;
    background:var(--brass); color:#15140F; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:18px; box-shadow:0 6px 18px rgba(0,0,0,.3);}
  .ba-tag{position:absolute; top:14px; font-family:var(--mono); font-size:10px; letter-spacing:.08em; padding:6px 13px; border-radius:20px; text-transform:uppercase; z-index:3;}
  .ba-tag-old{left:14px; background:#B3401F; color:#fff;}
  .ba-tag-new{right:14px; background:var(--brass); color:#15140F;}
  .ba-range{width:100%; max-width:880px; margin:16px auto 0; display:block; accent-color:var(--brass); cursor:ew-resize;}
  .ba-hint{text-align:center; font-family:var(--mono); font-size:11px; color:var(--fg-mute); margin-top:10px; letter-spacing:.04em;}

  /* --- Maqueta "vieja" (deliberadamente anticuada) --- */
  .ba-old-inner{font-family:'Times New Roman',Times,serif; background:#D6D2C4; color:#000; width:100%; height:100%; overflow:hidden; position:relative;}
  .ba-old-topbar{background:#000080; color:#fff; font-size:11px; padding:3px 8px; display:flex; justify-content:space-between;}
  .ba-old-banner{background:linear-gradient(#3d6ea5,#1c3f66); padding:10px 14px; text-align:center; border-bottom:4px solid #ffcc00;}
  .ba-old-banner h2{font-size:22px; color:#fff; text-shadow:2px 2px 0 #000; margin:0; font-family:Impact,'Arial Narrow',sans-serif; letter-spacing:1px;}
  .ba-old-marquee{background:#ffff00; color:#c00; font-weight:bold; font-size:12px; padding:4px; text-align:center; animation:baBlink 1s steps(1) infinite;}
  @keyframes baBlink{50%{opacity:0.25;}}
  .ba-old-body{display:flex; padding:10px 14px; gap:12px;}
  .ba-old-nav{width:90px; flex-shrink:0; background:#c9c5b5; border:2px solid #888; padding:6px;}
  .ba-old-nav a{display:block; color:#0000EE; text-decoration:underline; font-size:12px; margin-bottom:7px;}
  .ba-old-main p{font-size:12.5px; line-height:1.5; margin:0 0 8px;}
  .ba-old-btn{background:#c0c0c0; border:2px outset #fff; padding:4px 10px; font-size:11px; font-weight:bold; display:inline-block;}
  .ba-old-foot{position:absolute; bottom:0; left:0; right:0; background:#000; color:#0f0; font-size:9px; padding:4px 8px; font-family:'Courier New',monospace; display:flex; justify-content:space-between;}

  @media (max-width:640px){
    .ba-slider{height:300px;}
    .ba-old-nav{display:none;}
    .ba-old-banner h2{font-size:16px;}
  }

  .sim-edit-hint{text-align:center; font-family:var(--mono); font-size:12px; color:var(--brass-light); margin-bottom:10px;
    animation:hintBounce 2.2s ease-in-out infinite;}
  @keyframes hintBounce{0%,100%{transform:translateY(0);} 50%{transform:translateY(-3px);}}
  @media (prefers-reduced-motion: reduce){ .sim-edit-hint{animation:none;} }