/* Main styles extracted from index-blanco-negro.html */
:root{
  --bg:#FFFFFF; --panel:#F6F6F4; --line:#E4E4E0;
  --ink:#0A0A0A; --ink-soft:#3A3A38; --muted:#6E6B63;
  --dot:#D8D8D4; --hover:#FAFAF8;
}
/* dark band scope: sections with class="dark" override the design tokens locally */
.dark{
  --bg:#000000; --panel:#1D1D1F; --line:#2C2C2E;
  --ink:#FFFFFF; --ink-soft:#86868B; --muted:#A1A1A6;
  --hover:#2C2C2E;
  background:var(--bg); color:var(--ink);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{background:var(--bg);color:var(--ink);font-family:'Inter','Helvetica Neue',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-weight:400;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
h1,h2,h3{font-family:'Inter',sans-serif;font-weight:600;letter-spacing:-0.02em;}
a{color:inherit;text-decoration:none;}
.mono{font-family:'IBM Plex Mono',monospace;}
::selection{background:var(--ink);color:var(--bg);}
a:focus-visible, button:focus-visible{outline:1px solid var(--ink);outline-offset:4px;}
section{padding:170px 32px;}

header{position:fixed;top:0;left:0;right:0;z-index:200;transition:background .3s, padding .3s, border-color .3s;padding:22px 0;border-bottom:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.55);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);
  --bg:#000;--ink:#fff;--muted:#A1A1A6;--line:rgba(255,255,255,.12);color:var(--ink);}
header.scrolled{background:rgba(0,0,0,.78);padding:14px 0;}
nav{max-width:1120px;margin:0 auto;padding:0 32px;display:flex;align-items:center;justify-content:space-between;}
.brand{display:flex;align-items:center;gap:9px;}
.brand svg{width:16px;height:16px;color:#fff;}
.brand span{font-family:'Inter',sans-serif;font-weight:500;font-size:13px;letter-spacing:.05em;}
.nav-links{display:flex;gap:40px;}
.nav-links a{font-size:13px;font-weight:500;color:var(--muted);letter-spacing:.01em;transition:color .2s;}
.nav-links a:hover{color:var(--ink);}
.nav-cta{background:var(--ink);color:var(--bg);padding:8px 18px;font-size:12.5px;font-weight:500;border-radius:980px;transition:opacity .2s;}
.nav-cta:hover{opacity:.8;}
.burger{display:none;background:none;border:none;color:var(--ink);font-size:22px;}

/* HERO */
.hero{position:relative;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:140px 32px 80px;
  background-image:radial-gradient(ellipse 90% 55% at 50% -18%, rgba(255,255,255,.09), transparent 60%);}
.hero-logo{width:46px;height:46px;color:var(--ink);filter:drop-shadow(0 0 22px rgba(255,255,255,.35));opacity:0;animation:fadeUp 1s ease forwards .1s;}
.eyebrow{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--muted);margin:22px 0 0;opacity:0;animation:fadeUp 1s ease forwards .3s;}
.hero h1{font-size:clamp(56px,10vw,112px);line-height:0.98;margin-top:22px;font-weight:600;letter-spacing:-0.035em;opacity:0;animation:fadeUp 1.1s ease forwards .5s;}
.hero h1 em{font-style:normal;color:var(--ink-soft);}
.hero .lead{margin-top:24px;color:var(--muted);font-size:18px;max-width:480px;opacity:0;animation:fadeUp 1.1s ease forwards .7s;}
.hero-ctas{margin-top:40px;display:flex;gap:16px;opacity:0;animation:fadeUp 1.1s ease forwards .9s;position:relative;z-index:5;}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);}}

.btn{padding:13px 28px;font-size:15px;font-weight:400;letter-spacing:0;text-transform:none;transition:all .25s;display:inline-block;border-radius:980px;}
.btn-ink{background:var(--ink);color:var(--bg);}
.btn-ink:hover{background:var(--ink-soft);transform:scale(1.02);}
.btn-ink:active{transform:scale(.98);}
.btn-line{background:none;padding:13px 4px;color:var(--ink);border-bottom:1px solid transparent;}
.btn-line .chev{display:inline-block;transition:transform .25s;margin-left:2px;}
.btn-line:hover{border-color:var(--ink);}
.btn-line:hover .chev{transform:translateX(3px);}
.btn-lg{padding:15px 34px;font-size:16px;}

/* floating skill chips — apple-style parallax cutouts */
.chip-field{position:absolute;inset:0;pointer-events:none;z-index:1;}
.chip-wrap{position:absolute;transition:transform .15s ease-out;}
.chip-float{animation:bob 5s ease-in-out infinite;}
@keyframes bob{0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);}}
.chip{
  display:flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--line);
  border-radius:100px;padding:10px 16px 10px 12px;box-shadow:0 14px 34px -14px rgba(0,0,0,.18);
  font-size:12px;color:var(--ink-soft);white-space:nowrap;
}
.chip svg{width:16px;height:16px;}
.dark .chip{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);box-shadow:0 24px 48px -24px rgba(0,0,0,.6);color:#fff;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);}
.c1{top:14%;left:9%;}
.c2{top:22%;right:10%;}
.c3{top:62%;left:6%;}
.c4{top:70%;right:8%;}
.c5{top:42%;left:1%;}
.c6{top:48%;right:1%;}
@media(max-width:900px){ .chip-field{display:none;} }

.s-head{text-align:center;max-width:600px;margin:0 auto 90px;}
.s-head .eyebrow{margin-bottom:18px;}
.s-head h2{font-size:clamp(34px,5vw,56px);font-weight:600;letter-spacing:-0.025em;}
.s-head p{color:var(--muted);font-size:15.5px;margin-top:16px;}

[data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);}
[data-reveal].in{opacity:1;transform:translateY(0);}

/* SERVICIOS — saas-style browser mockups */
#servicios{border-top:1px solid var(--line);overflow:hidden;}
.service{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;padding:80px 0;border-bottom:1px solid var(--line);}
.service:last-child{border-bottom:none;}
.service:nth-child(even){direction:rtl;}
.service:nth-child(even) > *{direction:ltr;}
.service-icon{width:30px;height:30px;margin-bottom:24px;color:var(--ink);}
.service h3{font-size:clamp(24px,2.6vw,30px);font-weight:600;letter-spacing:-0.02em;margin-bottom:14px;}
.service p{color:var(--muted);font-size:15px;line-height:1.85;max-width:400px;}
.service .price{margin-top:22px;font-size:13px;color:var(--ink-soft);letter-spacing:.03em;}
.service > div:first-child{position:relative;z-index:2;} /* el texto siempre por encima del aura */

/* tilt + aura de color detrás de los mockups (el color vive solo aquí, fuera queda B/N) */
.tilt-wrap{position:relative;perspective:1200px;}
.aura{
  position:absolute;top:50%;left:50%;width:150%;height:150%;
  transform:translate(-50%,-50%) scale(0.85);
  background:conic-gradient(from var(--angle,0deg), #ff5f6d, #ffc371, #6dd5fa, #b06ab3, #ff5f6d);
  filter:blur(38px);opacity:0.32;
  transition:opacity .5s ease, transform .5s ease;
  z-index:0;border-radius:50%;pointer-events:none;
}
.tilt-wrap.active .aura{opacity:.78;transform:translate(-50%,-50%) scale(1.05);}
.browser{position:relative;z-index:1;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--bg);box-shadow:0 40px 80px -40px rgba(0,0,0,.35);transition:transform .15s ease-out;will-change:transform;}
.browser-bar{background:var(--panel);padding:10px 14px;display:flex;align-items:center;gap:6px;border-bottom:1px solid var(--line);}
.browser-bar span{width:8px;height:8px;border-radius:50%;background:var(--dot);}
.browser-bar .pill{margin-left:12px;background:var(--bg);border:1px solid var(--line);border-radius:20px;height:16px;flex:1;max-width:160px;}
.browser-body{padding:22px;}
.bb-row{display:flex;gap:12px;margin-bottom:12px;}
.bb-side{width:26%;display:flex;flex-direction:column;gap:8px;}
.bb-side div{height:9px;background:var(--panel);border-radius:3px;}
.bb-side div:nth-child(1){width:80%;}
.bb-main{flex:1;display:flex;flex-direction:column;gap:10px;}
.bb-card{background:var(--panel);border-radius:6px;height:52px;}
.bb-chart{display:flex;align-items:flex-end;gap:5px;height:60px;background:var(--panel);border-radius:6px;padding:10px;}
.bb-chart div{flex:1;background:var(--ink);opacity:.15;border-radius:2px;}
.bb-chart div:nth-child(1){height:40%;} .bb-chart div:nth-child(2){height:70%;}
.bb-chart div:nth-child(3){height:50%;} .bb-chart div:nth-child(4){height:90%;}
.bb-chart div:nth-child(5){height:60%;}
.bb-line{height:8px;background:var(--panel);border-radius:3px;}
.bb-line.short{width:60%;}

#recursos{background:var(--bg);background-image:radial-gradient(ellipse 70% 45% at 50% 0%, rgba(255,255,255,.05), transparent 60%);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.res-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);max-width:1000px;margin:0 auto;}
.res-card{background:var(--bg);padding:44px 30px;display:flex;flex-direction:column;gap:16px;transition:background .25s, transform .25s;}
.res-card:hover{background:var(--hover);transform:translateY(-3px);}
.dark .res-card{background:var(--panel);}
.res-kind{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);}
.res-card h3{font-size:19px;font-weight:600;line-height:1.4;letter-spacing:-0.01em;}
.res-cta{margin-top:auto;font-size:12px;color:var(--muted);letter-spacing:.05em;}
.res-note{text-align:center;max-width:480px;margin:36px auto 0;color:var(--muted);font-size:13.5px;}

/* recursos — formulario de suscripción */
.res-form{max-width:440px;margin:34px auto 0;text-align:left;}
.res-form label{display:block;font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:12px;}
.res-form-row{display:flex;gap:10px;}
.res-form input[type="email"]{flex:1;min-width:0;background:var(--bg);border:1px solid var(--line);border-radius:980px;padding:13px 20px;font-family:'Inter',sans-serif;font-weight:400;font-size:15px;color:var(--ink);outline:none;transition:border-color .25s;}
.res-form input[type="email"]:focus{border-color:var(--ink);}
.res-form input::placeholder{color:var(--muted);}
.res-form .btn{border:none;cursor:pointer;font-family:'Inter',sans-serif;}
.res-form .btn:disabled{opacity:.55;transform:none;cursor:wait;}
.dark .res-form input[type="email"]{background:var(--panel);border-color:var(--line);color:var(--ink);}
.dark .res-form input[type="email"]:focus{border-color:#fff;}
.res-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;}
.res-form-msg{min-height:22px;margin-top:14px;font-size:13px;color:var(--muted);text-align:center;}
.res-form-msg.ok{color:var(--ink-soft);}
.res-form-msg.err{color:var(--ink);font-weight:400;}
@media(max-width:480px){
  .res-form-row{flex-direction:column;}
  .res-form .btn{width:100%;}
}

#reservar{text-align:center;}
.book-frame{max-width:520px;margin:0 auto;}
.book-frame .num{font-family:'Inter',sans-serif;font-size:clamp(72px,10vw,104px);font-weight:600;letter-spacing:-0.04em;line-height:0.95;color:var(--ink);}
.book-frame .unit{color:var(--muted);font-size:13px;letter-spacing:.1em;text-transform:uppercase;margin-top:8px;}
.book-frame p{color:var(--muted);font-size:15px;margin:24px 0 34px;}

#apoyo{background:var(--bg);background-image:radial-gradient(ellipse 70% 45% at 50% 100%, rgba(255,255,255,.05), transparent 65%);border-top:1px solid var(--line);border-bottom:1px solid var(--line);text-align:center;}
#apoyo svg{width:30px;height:30px;margin:0 auto 24px;filter:drop-shadow(0 0 14px rgba(255,255,255,.25));}
#apoyo h2{font-size:clamp(30px,4vw,44px);letter-spacing:-0.02em;margin-bottom:16px;}
#apoyo p{color:var(--muted);font-size:15px;max-width:420px;margin:0 auto 32px;}

#social{padding-top:150px;padding-bottom:150px;}
.social-grid{display:flex;justify-content:center;gap:90px;flex-wrap:wrap;text-align:center;margin-top:46px;}
.stat b{display:block;font-family:'Inter',sans-serif;font-size:40px;font-weight:600;letter-spacing:-0.03em;color:var(--ink);}
.stat span{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);}

footer{border-top:1px solid var(--line);padding:56px 32px 36px;}
.footer-inner{max-width:1120px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px;}
.footer-brand{display:flex;align-items:center;gap:9px;opacity:.85;}
.footer-brand svg{width:15px;height:15px;}
.footer-brand span{font-family:'Inter',sans-serif;font-size:12.5px;font-weight:500;letter-spacing:.04em;}
.footer-links{display:flex;gap:26px;}
.footer-links a{color:var(--muted);font-size:12.5px;}
.footer-links a:hover{color:var(--ink);}

/* film grain — subtle texture over the whole page (delete this rule to remove) */
body::after{content:"";position:fixed;inset:0;z-index:400;pointer-events:none;opacity:.03;
  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='0.8' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");}

@media(max-width:860px){
  section{padding:100px 24px;}
  .service{grid-template-columns:1fr;gap:32px;direction:ltr !important;}
  .service > *{direction:ltr;}
  .res-grid{grid-template-columns:1fr;}
  .social-grid{gap:44px;}
  .nav-links{position:fixed;top:58px;left:0;right:0;background:var(--bg);border-bottom:1px solid var(--line);
    flex-direction:column;padding:22px;gap:18px;transform:translateY(-140%);transition:transform .3s ease;
    backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);}
  .nav-links.open{transform:translateY(0);}
  .burger{display:block;}
}
@media(max-width:480px){
  section{padding:80px 20px;}
  .hero{padding:120px 20px 70px;}
  .hero h1{font-size:clamp(44px,13vw,56px);}
  header{padding:16px 0;}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  [data-reveal]{opacity:1;transform:none;transition:none;}
  .hero-logo,.eyebrow,.hero h1,.hero .lead,.hero-ctas{animation:none;opacity:1;}
  .chip-float{animation:none;}
}