/*
 * Operación & Tecnología — Landing Page
 * Stylesheet principal
 * Versión: 2.0
 * Autor: O&T · Miguel A. Pino
 * ─────────────────────────────────────────
 * Estructura:
 *  1. Tokens (variables CSS)
 *  2. Reset & Base
 *  3. Componentes globales (botones, labels, reveal)
 *  4. Navegación
 *  5. Hero
 *  6. Sección — Empresa (About)
 *  7. Sección — Consultoría
 *  8. Sección — Stats
 *  9. Sección — Software
 * 10. Sección — Método
 * 11. Sección — Equipo
 * 12. Sección — Contacto / Formulario
 * 13. Footer
 * 14. Utilidades (WhatsApp float)
 * 15. Animaciones
 * 16. Responsive
 */

:root{
  /* Palette — matched to TTHH Element Sync screenshot */
  --ink:   #080E1A;   /* almost black-blue background */
  --navy:  #0C1525;   /* card/section dark */
  --deep:  #0F1C30;   /* slightly lighter panels */
  --panel: #111E32;   /* hover panels */

  --gold:       #C8A96E;   /* primary accent — serif gold */
  --gold-lt:    #DFC08A;   /* lighter gold for hover */
  --gold-dim:   rgba(200,169,110,.12);
  --gold-border:rgba(200,169,110,.25);

  --steel:  #3D4F66;
  --mist:   #7A90A8;
  --silver: #A8BDD0;
  --off:    #D8E4EF;
  --white:  #FFFFFF;

  /* semantic score colors — from screenshot */
  --match:    #4ADE80;  /* green */
  --friction: #FB923C;  /* orange */
  --risk:     #F87171;  /* red */
  --compat:   #60A5FA;  /* blue */

  --ff-head: 'Playfair Display', Georgia, serif;
  --ff-body: 'IBM Plex Sans', system-ui, sans-serif;

  --ease:     cubic-bezier(.4,0,.2,1);
  --ease-out: cubic-bezier(0,0,.2,1);
  --dur: .35s;
  --max: 1200px;
  --g:   clamp(1.25rem,4vw,2.5rem);
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--ff-body);background:var(--ink);color:var(--off);line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{cursor:pointer;font-family:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--g)}
body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:9000;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");opacity:.022}

/* NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:800;padding:.75rem 0;transition:padding var(--dur) var(--ease),background var(--dur) var(--ease)}
nav.s{padding:.5rem 0;background:rgba(8,14,26,.95);backdrop-filter:blur(20px) saturate(1.4);border-bottom:1px solid rgba(255,255,255,.05)}
.nav-row{display:flex;align-items:center;justify-content:space-between;gap:1.5rem}
.nav-brand{display:flex;align-items:center}
.nav-logo-img{height:110px;width:auto;filter:brightness(1.05);transition:opacity var(--dur) var(--ease)}
.nav-brand:hover .nav-logo-img{opacity:.8}
.nb-text{font-family:var(--ff-head);font-size:.95rem;font-weight:700;color:var(--white);line-height:1.2}
.nb-text span{display:block;font-size:.6rem;font-weight:400;letter-spacing:.12em;text-transform:uppercase;color:var(--mist)}
.nav-links{display:flex;align-items:center;gap:2rem;list-style:none}
.nav-links a{font-size:.78rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--silver);transition:color var(--dur) var(--ease);position:relative}
.nav-links a::after{content:'';position:absolute;bottom:-4px;left:0;right:0;height:1.5px;background:var(--gold);border-radius:2px;transform:scaleX(0);transform-origin:center;transition:transform var(--dur) var(--ease),opacity var(--dur)}
.nav-links a:hover{color:var(--white)}
.nav-links a.nav-active{color:var(--gold)}
.nav-links a.nav-active::after{transform:scaleX(1)}
.nav-links a:hover{color:var(--white)}
.nav-pill{padding:.45rem 1.1rem;border-radius:4px;border:1px solid rgba(200,169,110,.4);font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--gold)!important;transition:all var(--dur)}
.nav-pill:hover{background:var(--gold-dim)}
.ham{display:none;flex-direction:column;gap:5px;background:none;border:none;padding:4px}
.ham span{display:block;width:22px;height:1.5px;background:var(--silver);transition:all var(--dur)}

/* HERO */
.hero{min-height:100vh;display:grid;place-items:center;position:relative;overflow:hidden;padding:8.5rem 0 4rem}
.hero-bg{position:absolute;inset:0;background:url('hero-bg.jpg') center/cover no-repeat;transform:scale(1.06)}
.hero-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(160deg,rgba(8,14,26,.97) 0%,rgba(12,21,37,.88) 50%,rgba(8,14,26,.82) 100%)}
.hero-mesh{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(200,169,110,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(200,169,110,.03) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,black,transparent)}
.orb{position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none}
.orb1{width:620px;height:620px;background:radial-gradient(circle,rgba(180,140,75,.14),transparent 70%);top:-100px;right:-150px}
.orb2{width:380px;height:380px;background:radial-gradient(circle,rgba(200,169,110,.07),transparent 70%);bottom:80px;left:-80px}
.hero-content{position:relative;z-index:2;text-align:center}

.eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-size:.63rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:rgba(200,169,110,.75);margin-bottom:2rem;padding:.4rem 1.1rem;border:1px solid rgba(200,169,110,.2);border-radius:100px;background:rgba(200,169,110,.04);opacity:0;animation:up .8s var(--ease-out) .3s forwards}
.eyebrow::before{content:'·';color:var(--gold);font-size:.9rem}

h1.hero-h{font-family:var(--ff-head);font-size:clamp(2rem,3.5vw,3.4rem);font-weight:700;line-height:1.18;letter-spacing:.01em;color:var(--white);max-width:740px;margin:0 auto 1.5rem;opacity:0;animation:up .9s var(--ease-out) .5s forwards}
h1.hero-h em{font-style:italic;color:var(--gold);font-weight:600}
h1.hero-h strong{font-style:italic;color:var(--gold-lt);font-weight:700}
.hero-sub{font-size:clamp(1rem,1.8vw,1.2rem);font-weight:300;color:rgba(255,255,255,.68);max-width:600px;margin:0 auto 2rem;opacity:0;animation:up .9s var(--ease-out) .7s forwards}
.hero-pills{display:flex;justify-content:center;gap:.65rem;flex-wrap:wrap;margin-bottom:2.25rem;opacity:0;animation:up .8s var(--ease-out) .85s forwards}
.pill{padding:.28rem .85rem;border-radius:100px;font-size:.65rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.pill-c{background:rgba(37,94,88,.35);border:1px solid rgba(49,120,111,.5);color:#7EEADE}
.pill-s{background:rgba(200,169,110,.1);border:1px solid rgba(200,169,110,.35);color:var(--gold)}
.hero-btns{display:flex;align-items:center;justify-content:center;gap:1rem;flex-wrap:wrap;opacity:0;animation:up .9s var(--ease-out) 1s forwards}
.hero-scores{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;max-width:640px;margin:2.5rem auto 0;opacity:0;animation:up .9s var(--ease-out) 1.15s forwards}
.hero-score-label{font-size:.62rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--steel);text-align:center;margin-top:.85rem;opacity:0;animation:up .8s var(--ease-out) 1.3s forwards}

.btn-a{display:inline-flex;align-items:center;gap:.55rem;padding:.9rem 2.2rem;border-radius:6px;background:linear-gradient(135deg,#C8A96E,#B8935A);border:none;font-family:var(--ff-body);font-size:.88rem;font-weight:600;color:#080E1A;letter-spacing:.04em;text-transform:uppercase;transition:all var(--dur) var(--ease);position:relative;overflow:hidden}
.btn-a::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,var(--gold-dim),transparent);opacity:0;transition:opacity var(--dur)}
.btn-a:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(0,0,0,.4),0 0 0 2px rgba(200,169,110,.4)}
.btn-a:hover::before{opacity:1}
.btn-a svg{width:16px;height:16px;transition:transform var(--dur)}
.btn-a:hover svg{transform:translateX(3px)}
.btn-b{display:inline-flex;align-items:center;gap:.5rem;padding:.9rem 1.75rem;border-radius:6px;border:1px solid rgba(200,169,110,.3);font-size:.88rem;font-weight:500;color:var(--gold);transition:all var(--dur)}
.btn-b:hover{border-color:rgba(200,169,110,.6);color:var(--gold-lt);background:rgba(200,169,110,.06)}

/* SECTIONS */
section{padding:clamp(4.5rem,9vw,7.5rem) 0}
.s-label{display:inline-flex;align-items:center;gap:.5rem;font-size:.93rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:rgba(200,169,110,.7);margin-bottom:1rem}
.s-label::before{display:none}
.s-title{font-family:var(--ff-head);font-size:clamp(1.5rem,2.4vw,2.2rem);font-weight:700;line-height:1.22;letter-spacing:.01em;color:var(--white)}
.s-body{font-size:1rem;color: gray; line-height:1.85}
.rv{opacity:0;transform:translateY(22px);transition:opacity .65s var(--ease-out),transform .65s var(--ease-out)}
.rv.in{opacity:1;transform:translateY(0)}
.rv[data-d="1"]{transition-delay:.1s}.rv[data-d="2"]{transition-delay:.2s}.rv[data-d="3"]{transition-delay:.3s}

/* ABOUT */
.about{background:var(--ink)}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(200,169,110,.08);border:1px solid rgba(200,169,110,.1);border-radius:14px;overflow:hidden;margin-top:3rem}
.ac{padding:3rem 2.5rem;background:var(--navy);transition:background var(--dur),border-color var(--dur)}
.ac:hover{background:var(--panel)}
.ac-icon{width:44px;height:44px;border-radius:10px;background:rgba(200,169,110,.06);border:1px solid rgba(255,255,255,.08);display:grid;place-items:center;margin-bottom:1.25rem}
.ac-icon svg{width:22px;height:22px;color:var(--gold);stroke-width:1.5}
.ac-title{font-family:var(--ff-head);font-size:1.3rem;font-weight:700;color:var(--white);margin-bottom:.7rem}
.ac-body{font-size:.9rem;color:var(--mist);line-height:1.85;margin-bottom:1.5rem}
.ac-list{list-style:none;display:flex;flex-direction:column;gap:.55rem}
.ac-list li{font-size:.85rem;color:rgba(255,255,255,.6);display:flex;gap:.6rem;align-items:flex-start}
.ac-list li::before{content:'→';color:var(--gold);flex-shrink:0;margin-top:.05rem}
.tag-row{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1.25rem}
.tag{padding:.22rem .65rem;border-radius:4px;font-size:.65rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border:1px solid rgba(255,255,255,.1);color:var(--steel)}
.tag.t{border-color:rgba(200,169,110,.3);color:rgba(0,217,255,.7);background:var(--gold-dim)}
.tag.g{border-color:rgba(200,169,110,.2);color:rgba(200,169,110,.75)}

/* CONSULT */
.consult{background:var(--ink)}
.c-header{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:end;margin-bottom:3.5rem}
.c-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(200,169,110,.08);border:1px solid rgba(200,169,110,.1);border-radius:12px;overflow:hidden}
.scard{padding:2.75rem 2.25rem;background:var(--navy);position:relative;transition:background var(--dur)}
.scard::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--gold-lt),transparent);transform:scaleX(0);transition:transform .5s var(--ease-out)}
.scard:hover{background:var(--navy)}
.scard:hover::before{transform:scaleX(1)}
.sn{font-family:var(--ff-body);font-size:.93rem;font-weight:700;letter-spacing:.2em;color:var(--gold);margin-bottom:1.5rem}
.si{width:44px;height:44px;border-radius:10px;background:rgba(31,61,58,.3);border:1px solid rgba(255,255,255,.07);display:grid;place-items:center;margin-bottom:1.2rem}
.si svg{width:20px;height:20px;color:var(--gold);stroke-width:1.5}
.st{font-family:var(--ff-head);font-size:1.15rem;font-weight:700;color:var(--white);margin-bottom:.8rem;line-height:1.25}
.sd{font-size:.87rem;color:var(--mist);line-height:1.8;margin-bottom:1.5rem}
.so{font-size:.77rem;font-weight:600;color:rgba(0,217,255,.6);padding-top:1rem;border-top:1px solid rgba(255,255,255,.07)}

/* STATS */
.stats{background:linear-gradient(135deg,rgba(15,28,48,1),rgba(18,22,35,1));border-top:1px solid rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.05);padding:3.5rem 0}
.sg{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;text-align:center}
.sv{font-family:var(--ff-head);font-size:clamp(2.2rem,3.5vw,3.2rem);font-weight:700;font-style:italic;color:var(--white);letter-spacing:.01em;line-height:1;margin-bottom:.35rem}
.sv em{font-style:normal;color:var(--gold)}
.sl{font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.45)}

/* SOFTWARE */
.software{background:var(--navy);position:relative;overflow:hidden}
.software::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 60% 50% at 50% 0%,rgba(200,169,110,.04),transparent 70%)}
.sw-head{text-align:center;margin-bottom:4rem}
.sw-head .s-label{justify-content:center}

/* product featured */
.pf{display:grid;grid-template-columns:1.1fr 1fr;gap:0;background:rgba(10,17,30,.9);border:1px solid rgba(200,169,110,.12);border-radius:14px;overflow:hidden;position:relative;margin-bottom:1.5rem}
.pf::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent 5%,var(--gold) 40%,var(--gold-lt) 60%,transparent 95%)}
.pi{padding:3.5rem 3rem}
.pbadge{display:inline-flex;align-items:center;gap:.5rem;padding:.28rem .75rem;border-radius:100px;font-size:.62rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;background:var(--gold-dim);border:1px solid rgba(200,169,110,.35);color:var(--match);margin-bottom:1.75rem}
.dot {animation: blink 2.5s infinite;}
.badge-text {animation: blink 2.5s infinite;}
@keyframes blink {0%, 100% { opacity: 1; } 50% { opacity: 0; }}
.pbadge .dot{width:6px;height:6px;border-radius:50%;background:var(--gold);animation:pulse 2s infinite}
.pname{font-family:var(--ff-head);font-size:clamp(1.4rem,2.2vw,1.9rem);font-weight:700;color:var(--white);line-height:1.15;margin-bottom:.3rem;letter-spacing:.01em}
.psub{font-size:.78rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin-bottom:1.25rem}
.pdesc{font-size:.93rem;color:var(--mist);line-height:1.85;margin-bottom:2rem}

.outputs{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin-bottom:2rem}.outputs .oc{padding:.85rem 1rem}.outputs .oc-v{font-size:1.6rem}
.oc{padding:1.25rem 1.5rem;background:rgba(12,21,37,.7);border:1px solid rgba(255,255,255,.06);border-radius:10px;text-align:center;transition:border-color var(--dur)}
.oc:hover{border-color:rgba(200,169,110,.2)}
.oc-l{font-size:.6rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--steel);margin-top:.4rem}
.oc-v{font-family:var(--ff-head);font-size:2.2rem;font-weight:700;font-style:italic;line-height:1;color:var(--white)}
.oc.m .oc-v{color:#4ADE80}.oc.f .oc-v{color:#FB923C}.oc.r .oc-v{color:#F87171}.oc.co .oc-v{color:#60A5FA}

.p-ctas{display:flex;gap:.7rem;flex-wrap:wrap}
.btp{display:inline-flex;align-items:center;gap:.5rem;padding:.65rem 1.4rem;border-radius:7px;font-family:var(--ff-head);font-size:.8rem;font-weight:700;letter-spacing:.03em;transition:all var(--dur)}
.btpm{background:linear-gradient(135deg,var(--deep),rgba(200,169,110,.25));border:1px solid rgba(200,169,110,.3);color:var(--white)}
.btpm:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(0,0,0,.3)}
.btpg{background:transparent;border:1px solid rgba(255,255,255,.12);color:var(--silver)}
.btpg:hover{border-color:rgba(255,255,255,.3);color:var(--white)}

.pv{background:linear-gradient(145deg,rgba(10,25,41,.6),rgba(13,34,54,.8));border-left:1px solid rgba(255,255,255,.05);padding:2.5rem 2rem;display:flex;flex-direction:column;gap:1.1rem}
.pll{display:flex;flex-direction:column;gap:.45rem}
.pli{display:flex;align-items:center;gap:.9rem;padding:.65rem .9rem;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:8px;transition:background var(--dur)}
.pli:hover{background:rgba(255,255,255,.06)}
.pnum{font-family:var(--ff-head);font-size:.62rem;font-weight:800;width:26px;height:26px;border-radius:6px;background:rgba(200,169,110,.1);border:1px solid rgba(200,169,110,.3);display:grid;place-items:center;color:var(--gold);flex-shrink:0;letter-spacing:.05em}
.ptxt{font-size:.8rem;font-weight:500;color:rgba(255,255,255,.75);flex:1}
.pst{font-size:.56rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:.14rem .45rem;border-radius:100px}
.pst.ok{background:rgba(74,222,128,.1);color:#4ADE80;border:1px solid rgba(74,222,128,.25)}
.pst.wip{background:rgba(251,191,36,.1);color:#FBBF24;border:1px solid rgba(251,191,36,.25)}
.ts-label{font-size:.6rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--steel);margin-bottom:.55rem}
.ts-tags{display:flex;flex-wrap:wrap;gap:.35rem}
.ts-tag{padding:.18rem .55rem;border-radius:4px;font-size:.62rem;font-weight:700;letter-spacing:.06em;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);color:var(--mist)}
.ts-tag.ts-engine{background:rgba(232,200,112,.06);border-color:rgba(232,200,112,.2);color:rgba(232,200,112,.75)}

/* coming */
.cs-row{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
.csc{padding:2.25rem 2rem;background:rgba(10,17,30,.7);border:1px solid rgba(200,169,110,.08);border-radius:12px;position:relative;overflow:hidden;transition:background var(--dur),border-color var(--dur)}
.csc:hover{background:rgba(15,24,42,.9);border-color:rgba(200,169,110,.2)}
.cs-rib{position:absolute;top:1rem;right:1rem;font-size:.58rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:.18rem .55rem;border-radius:100px;background:rgba(232,200,112,.08);border:1px solid rgba(232,200,112,.25);color:var(--gold)}
.cs-icon{width:42px;height:42px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);display:grid;place-items:center;margin-bottom:1rem}
.cs-icon svg{width:20px;height:20px;color:var(--mist);stroke-width:1.5}
.cs-name{font-family:var(--ff-head);font-size:1.1rem;font-weight:700;color:var(--white);margin-bottom:.3rem}
.cs-sub{font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin-bottom:.85rem}
.cs-desc{font-size:.87rem;color:var(--mist);line-height:1.8}

/* METODO */
.metodo{background:var(--ink)}
.ml{display:grid;grid-template-columns:1fr 1.5fr;gap:6rem;align-items:start}
.ms-sticky{position:sticky;top:110px}
.msteps{display:flex;flex-direction:column}
.mstep{display:grid;grid-template-columns:52px 1fr;gap:1.25rem;padding:1.75rem 0;border-bottom:1px solid rgba(255,255,255,.05);cursor:default;transition:all var(--dur)}
.mstep:last-child{border-bottom:none}
.mn{font-family:var(--ff-head);font-size:.63rem;font-weight:700;letter-spacing:.15em;color:var(--gold);padding-top:.25rem;transition:color var(--dur)}
.mstep:hover .mn{color:var(--gold)}
.mt{font-family:var(--ff-head);font-size:.98rem;font-weight:700;color:var(--silver);margin-bottom:.3rem;transition:color var(--dur)}
.mstep:hover .mt{color:var(--white)}
.md{font-size:.86rem;color:var(--steel);line-height:1.75;max-height:0;overflow:hidden;transition:max-height .4s var(--ease-out),color var(--dur)}
.mstep:hover .md{max-height:100px;color:var(--mist)}

/* EQUIPO */
.equipo{background:var(--ink)}
.eq-g{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(200,169,110,.08);border:1px solid rgba(200,169,110,.1);border-radius:14px;overflow:hidden;margin-top:3.5rem}
.eq-m{padding:3rem 2.75rem;background:var(--navy);transition:background var(--dur)}.eq-m:hover{background:var(--panel)}
.eq-av{width:56px;height:56px;border-radius:12px;background:linear-gradient(135deg,var(--deep),rgba(200,169,110,.25));border:1px solid rgba(255,255,255,.1);display:grid;place-items:center;font-family:var(--ff-head);font-size:1.3rem;font-weight:800;color:var(--white);margin-bottom:1.5rem}
.eq-name{font-family:var(--ff-head);font-size:1.35rem;font-weight:700;color:var(--white);margin-bottom:.2rem}
.eq-role{font-size:.68rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);opacity:.8;margin-bottom:1.25rem}
.eq-bio{font-size:.88rem;color:var(--mist);line-height:1.85}

/* CONTACTO */
.contacto{background:var(--ink);position:relative;overflow:hidden}
.contacto::before{content:'';position:absolute;bottom:-200px;left:50%;transform:translateX(-50%);width:700px;height:400px;background:radial-gradient(ellipse,rgba(200,169,110,.06),transparent 70%);pointer-events:none}
.ct-l{display:grid;grid-template-columns:1fr 1.1fr;gap:6rem;align-items:start}
.ct-i{position:sticky;top:110px}
.ct-feat{display:flex;align-items:flex-start;gap:.85rem;margin-bottom:1.5rem}
.ct-dot{width:7px;height:7px;border-radius:50%;background:var(--gold);flex-shrink:0;margin-top:.55rem}
.ct-ft{font-size:.9rem;color:rgba(255,255,255,.6);line-height:1.7}
.ct-card{background:rgba(12,21,37,.8);border:1px solid rgba(200,169,110,.12);border-radius:14px;padding:2.75rem;position:relative;overflow:hidden}
.ct-card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(200,169,110,.35),transparent)}

/* form */
.fp{display:flex;align-items:center;gap:.4rem;margin-bottom:.75rem}
.fps{width:26px;height:26px;border-radius:50%;border:1px solid rgba(255,255,255,.12);display:grid;place-items:center;font-size:.67rem;font-weight:700;color:var(--steel);transition:all var(--dur);flex-shrink:0}
.fps.a{border-color:var(--gold);color:var(--gold);background:var(--gold-dim)}
.fps.d{border-color:rgba(200,169,110,.25);background:rgba(200,169,110,.25);color:var(--white)}
.fpl{flex:1;height:1px;background:rgba(255,255,255,.08)}
.fstep{display:none}
.fstep.active{display:block;animation:up .35s var(--ease-out)}
.fstep-label{font-size:.68rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--steel);margin-bottom:1.5rem}
.fq{font-family:var(--ff-head);font-size:1.1rem;font-weight:700;color:var(--white);margin-bottom:1.5rem;line-height:1.45}
.opts{display:flex;flex-direction:column;gap:.55rem}
.opt{padding:.8rem 1rem;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.09);border-radius:8px;color:var(--silver);font-size:.88rem;font-weight:500;text-align:left;transition:all var(--dur);display:flex;align-items:center;gap:.75rem}
.opt-icon{width:32px;height:32px;border-radius:7px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);display:grid;place-items:center;flex-shrink:0;transition:all var(--dur)}
.opt-icon svg{width:16px;height:16px;color:var(--mist);transition:color var(--dur)}
.opt-content{display:flex;flex-direction:column;gap:.15rem}
.opt-content strong{font-size:.88rem;font-weight:600;color:var(--silver);line-height:1.2;transition:color var(--dur)}
.opt-content span{font-size:.75rem;color:var(--steel);line-height:1.4;transition:color var(--dur)}
/* simple opts (no icon/content structure) */
.opt.simple{align-items:center;gap:.65rem}
.opt.simple::before{content:'';width:16px;height:16px;border-radius:50%;border:1.5px solid rgba(255,255,255,.18);flex-shrink:0;transition:all var(--dur)}
.opt:hover{background:rgba(255,255,255,.06);border-color:rgba(200,169,110,.3)}
.opt:hover .opt-icon{background:rgba(200,169,110,.06);border-color:rgba(200,169,110,.3)}
.opt:hover .opt-icon svg{color:var(--gold)}
.opt:hover .opt-content strong,.opt:hover .opt-content span{color:var(--white)}
.opt.sel{background:rgba(200,169,110,.1);border-color:rgba(200,169,110,.5)}
.opt.sel .opt-icon{background:rgba(0,217,255,.1);border-color:rgba(200,169,110,.4)}
.opt.sel .opt-icon svg{color:var(--gold)}
.opt.sel .opt-content strong{color:var(--white)}
.opt.sel .opt-content span{color:rgba(255,255,255,.6)}
.opt.simple.sel::before{background:var(--gold);border-color:var(--gold);box-shadow:0 0 0 3px rgba(200,169,110,.12)}
.opt.simple:hover .opt-content strong,.opt.simple:hover{color:var(--white)}
.flabel{display:block;font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--mist);margin-bottom:.4rem}
.fin,.fta{width:100%;padding:.8rem 1rem;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);color:var(--white);font-size:.9rem;border-radius:7px;font-family:var(--ff-body);transition:all var(--dur)}
.fta{min-height:88px;resize:vertical}
.fin::placeholder,.fta::placeholder{color:rgba(255,255,255,.28)}
.fin:focus,.fta:focus{outline:none;border-color:rgba(200,169,110,.45);background:rgba(255,255,255,.06);box-shadow:0 0 0 3px rgba(0,217,255,.05)}
.fg{display:grid;gap:.8rem;margin-bottom:.7rem}
.fr2{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.fgap{margin-bottom:.7rem}
.fnav{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-top:1.75rem}
.fbk{padding:.65rem 1.2rem;border-radius:7px;background:transparent;border:1px solid rgba(255,255,255,.12);color:var(--silver);font-size:.8rem;font-weight:600;transition:all var(--dur)}
.fbk:hover{border-color:rgba(255,255,255,.28);color:var(--white)}
.fnx,.fsb{padding:.7rem 1.6rem;border-radius:7px;background:linear-gradient(135deg,#C8A96E,#B8935A);border:none;color:#080E1A;font-size:.8rem;font-weight:700;font-family:var(--ff-body);letter-spacing:.05em;text-transform:uppercase;transition:all var(--dur)}
.fnx:hover,.fsb:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(0,0,0,.3)}
.fnx:disabled,.fsb:disabled{opacity:.38;cursor:not-allowed;transform:none}
.fnote{margin-top:1.25rem;font-size:.73rem;color:rgba(255,255,255,.3);text-align:center;line-height:1.6}
.sbox{text-align:center;padding:1.5rem 0}
.sicon{width:58px;height:58px;border-radius:50%;background:rgba(74,222,128,.06);border:1px solid rgba(74,222,128,.35);display:grid;place-items:center;margin:0 auto 1.5rem}.sicon svg{color:#4ADE80}
.sbox h3{font-family:var(--ff-head);font-size:1.5rem;font-weight:800;color:var(--white);margin-bottom:.6rem}
.sbox p{color:var(--mist);font-size:.93rem;line-height:1.8}

/* FOOTER */
footer{background:#07111C;border-top:1px solid rgba(255,255,255,.05);padding:4rem 0 2rem}
.ft-g{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:4rem;margin-bottom:3rem;padding-bottom:2.5rem;border-bottom:1px solid rgba(255,255,255,.05)}
.ft-logo{display:flex;align-items:center;margin-bottom:1.1rem}
.ft-logo-img{height:90px;width:auto;filter:brightness(1.0)}
.ft-tag{font-size:.85rem;color:var(--mist);line-height:1.75;max-width:280px}
.ft-ch{font-size:.67rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--silver);margin-bottom:1.1rem}
.ft-links{list-style:none;display:flex;flex-direction:column;gap:.6rem}
.ft-links a{font-size:.85rem;color:var(--mist);transition:color var(--dur)}
.ft-links a:hover{color:var(--white)}
.ft-bot{display:flex;align-items:center;justify-content:space-between;gap:1rem;font-size:.73rem;color:rgba(255,255,255,.28)}

/* WA */
.wa{position:fixed;bottom:2rem;right:2rem;z-index:700;display:flex;align-items:center;gap:.55rem;padding:.55rem .9rem .55rem .65rem;border-radius:8px;background:rgba(10,25,41,.85);border:1px solid rgba(37,211,102,.2);backdrop-filter:blur(12px);transition:all var(--dur) var(--ease)}
.wa:hover{background:rgba(10,25,41,.95);border-color:rgba(37,211,102,.45);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.3)}
.wa-icon{width:18px;height:18px;color:#4ADE80;flex-shrink:0;transition:color var(--dur)}
.wa:hover .wa-icon{color:#6EF29A}
.wa-text{font-size:.7rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.5);transition:color var(--dur)}
.wa:hover .wa-text{color:rgba(255,255,255,.75)}

/* ANIM */
@keyframes up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

/* RESPONSIVE */
@media(max-width:1024px){
  .pf{grid-template-columns:1fr}
  .pv{border-left:none;border-top:1px solid rgba(255,255,255,.05);padding:2rem}
  .c-header{grid-template-columns:1fr;gap:1.5rem}
  .ml{grid-template-columns:1fr;gap:3rem}
  .ms-sticky{position:static}
  .ct-l{grid-template-columns:1fr;gap:3rem}
  .ct-i{position:static}
  .sg{grid-template-columns:repeat(2,1fr)}
  .ft-g{grid-template-columns:1fr;gap:2rem}
}
@media(max-width:768px){
.hero-scores{grid-template-columns:1fr 1fr;max-width:340px}
  .nav-links{display:none}
  .nav-links.open{display:flex;flex-direction:column;position:fixed;inset:0;top:64px;background:rgba(10,25,41,.96);backdrop-filter:blur(20px);padding:3rem var(--g);gap:2rem;z-index:799}
  .nav-links.open a{font-size:1.1rem}
  .ham{display:flex}
  .about-grid,.c-grid,.eq-g{grid-template-columns:1fr}
  .cs-row{grid-template-columns:1fr}
  .outputs{grid-template-columns:1fr 1fr}
  .fr2{grid-template-columns:1fr}
  .ct-card{padding:2rem 1.5rem}
  .ft-bot{flex-direction:column;text-align:center}
}
@media(max-width:480px){
  .sg{grid-template-columns:1fr 1fr}
  .outputs{grid-template-columns:1fr}
}