@font-face{font-family:'Ablation';src:url('/fonts/Ablation.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap}
@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@200;300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;700&display=swap');
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --ink:#0A0B0D;--ink-2:#14161A;--ink-3:#1E2126;--ink-4:#272C33;
  --paper:#F4F5F3;--paper-2:#EAEBE7;--paper-3:#DDDED9;
  --fg-dark:#E8EAE6;--fg-dark-2:#9AA0A6;--fg-dark-3:#5A5F66;
  --fg-light:#0A0B0D;--fg-light-2:#4A4F55;--fg-light-3:#8A8F95;
  --cyan:#00C2E8;--cyan-deep:#0097B8;
  --border-dark:rgba(255,255,255,0.08);--border-dark-strong:rgba(255,255,255,0.18);
  --border-light:rgba(10,11,13,0.08);--border-light-strong:rgba(10,11,13,0.16);
  --logo:'Ablation','Inter Tight',sans-serif;
  --sans:'Inter Tight',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --ease:cubic-bezier(0.65,0,0.35,1);--ease-out:cubic-bezier(0.16,1,0.3,1)
}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden}
body{font-family:var(--sans);background:var(--ink);color:var(--fg-dark);line-height:1.6;-webkit-font-smoothing:antialiased;font-feature-settings:"ss01","cv11"}

/* NAV — 40px height per brand */
.nav{position:fixed;top:0;left:0;right:0;z-index:1000;display:grid;grid-template-columns:200px 1fr auto;align-items:center;height:40px;padding:0 28px;background:rgba(10,11,13,0.85);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--border-dark);font-family:var(--mono);font-size:11px;letter-spacing:0.06em}
.nav-logo{font-family:var(--logo);color:var(--cyan);font-weight:400;font-size:14px;display:flex;align-items:center;gap:8px;letter-spacing:0.18em}
.nav-dot{width:6px;height:6px;background:var(--cyan);border-radius:50%;box-shadow:0 0 8px var(--cyan);animation:pulse 2.4s infinite;flex-shrink:0}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.45;transform:scale(0.85)}}
.nav-meta{color:var(--fg-dark-3);text-transform:uppercase;text-align:center}
.nav-clock{color:var(--fg-dark-3);text-align:right}

/* BOOT SCREEN */
.boot{position:fixed;inset:0;z-index:9999;background:var(--ink);display:flex;align-items:center;justify-content:center;flex-direction:column;transition:opacity 0.8s var(--ease),visibility 0.8s;font-family:var(--mono)}
.boot.done{opacity:0;visibility:hidden;pointer-events:none}
.boot-lines{font-size:13px;color:var(--fg-dark-3);line-height:2.2;min-width:320px}
.boot-line{opacity:0;transform:translateY(8px);transition:all 0.4s var(--ease-out)}
.boot-line.show{opacity:1;transform:none}
.boot-line .ok{color:#4FBF7E}
.boot-line .ready{color:var(--cyan)}
.boot-cursor{display:inline-block;width:8px;height:15px;background:var(--cyan);margin-left:4px;animation:blink 0.8s step-end infinite}
@keyframes blink{50%{opacity:0}}

/* SECTIONS */
section{position:relative;min-height:100vh;padding:100px 80px 80px;overflow:hidden}
@media(max-width:767px){section{padding:80px 24px 60px}}
.container{max-width:1100px;margin:0 auto}

/* DOT GRID TEXTURE */
.dot-grid::before{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,0.055) 1px,transparent 1px);background-size:32px 32px;mask-image:radial-gradient(ellipse 80% 60% at 50% 50%,black,transparent);-webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 50%,black,transparent);pointer-events:none;z-index:0}
.light.dot-grid::before{background-image:radial-gradient(rgba(10,11,13,0.07) 1px,transparent 1px)}

/* CORNER MARKS — 10×10px per brand */
.corner-marks{position:relative}
.corner-marks::before,.corner-marks::after{content:'';position:absolute;width:10px;height:10px;border-color:var(--fg-dark-3);border-style:solid;z-index:1}
.corner-marks::before{top:0;left:0;border-width:1px 0 0 1px}
.corner-marks::after{top:0;right:0;border-width:1px 1px 0 0}
.cm-bl,.cm-br{position:absolute;width:10px;height:10px;border-color:var(--fg-dark-3);border-style:solid;bottom:0;z-index:1}
.cm-bl{left:0;border-width:0 0 1px 1px}
.cm-br{right:0;border-width:0 1px 1px 0}
.light .corner-marks::before,.light .corner-marks::after,.light .cm-bl,.light .cm-br{border-color:var(--fg-light-3)}

/* CROSSHAIR */
.crosshair{position:absolute;right:40px;bottom:80px;font-family:var(--mono);font-size:10px;color:var(--cyan);letter-spacing:0.1em;z-index:1}
.crosshair::before{content:'+';font-size:28px;font-weight:200;display:block;text-align:right;color:currentColor;mix-blend-mode:difference;line-height:1}

/* SECTION LABELS — brand spec */
.section-label{font-family:var(--mono);font-size:11px;color:var(--cyan);letter-spacing:0.14em;text-transform:uppercase;margin-bottom:32px;z-index:1;position:relative}

/* HEADINGS */
.heading-xl{font-size:clamp(36px,6vw,72px);font-weight:300;line-height:1.05;letter-spacing:-0.04em;margin-bottom:40px}
.heading-lg{font-size:clamp(28px,4vw,52px);font-weight:300;line-height:1.1;letter-spacing:-0.04em;margin-bottom:24px}

/* HERO */
.hero{min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;background:var(--ink);padding-top:40px}
.hero-title{font-family:var(--logo);font-size:clamp(80px,20vw,140px);font-weight:400;letter-spacing:0.18em;line-height:0.9;color:var(--fg-dark);opacity:0;transform:scale(0.95);transition:all 1s var(--ease-out)}
.hero-title.show{opacity:1;transform:none}
.hero-sub{font-family:var(--mono);font-size:14px;letter-spacing:0.14em;color:var(--fg-dark-2);margin-top:28px;text-transform:uppercase;opacity:0;transition:opacity 0.8s 0.3s var(--ease-out)}
.hero-sub.show{opacity:1}

/* LIGHT SECTIONS */
.light{background:var(--paper);color:var(--fg-light)}
.light .heading-xl,.light .heading-lg{color:var(--fg-light)}
.light .section-label{color:var(--cyan-deep)}

/* DARK SECTIONS */
.dark{background:var(--ink);color:var(--fg-dark)}

/* PILARES */
.pilares-intro{font-size:clamp(24px,3.5vw,36px);font-weight:300;line-height:1.2;letter-spacing:-0.03em;margin-bottom:64px;max-width:700px;position:relative;z-index:1}
.pilares-grid{display:grid;gap:48px;position:relative;z-index:1}
@media(min-width:768px){.pilares-grid{grid-template-columns:repeat(3,1fr)}}
.pilar{border-top:1px solid var(--border-light-strong);padding-top:24px}
.pilar-num{font-family:var(--mono);font-size:11px;color:var(--fg-light-3);letter-spacing:0.1em;margin-bottom:8px}
.pilar-title{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:0.14em;text-transform:uppercase;margin-bottom:16px;color:var(--fg-light-2)}
.pilar-text{font-size:16px;line-height:1.7;color:var(--fg-light-2);font-weight:400}

/* VALORES */
.valores-header{display:grid;gap:40px;margin-bottom:80px;position:relative;z-index:1}
@media(min-width:768px){.valores-header{grid-template-columns:1fr 1fr}}
.valores-heading{font-size:clamp(36px,5vw,56px);font-weight:300;line-height:1.05;letter-spacing:-0.04em}
.valores-desc{font-family:var(--mono);font-size:13px;line-height:1.9;color:var(--fg-dark-2)}
.valores-grid{display:grid;gap:1px;background:var(--border-dark-strong);position:relative;z-index:1}
@media(min-width:600px){.valores-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.valores-grid{grid-template-columns:repeat(3,1fr)}}
.valor-card{background:var(--ink-2);padding:40px 36px;transition:background 200ms ease-out}
.valor-card:hover{background:var(--ink-3)}
.valor-letter{font-size:72px;font-weight:300;line-height:1;color:var(--fg-dark-3);margin-bottom:4px}
.valor-num{font-family:var(--mono);font-size:10px;color:var(--fg-dark-3);letter-spacing:0.12em;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.valor-num::after{content:'';width:6px;height:6px;background:var(--cyan);border-radius:50%;box-shadow:0 0 8px var(--cyan)}
.valor-title{font-size:18px;font-weight:600;margin-bottom:12px;color:var(--fg-dark)}
.valor-text{font-size:14px;line-height:1.7;color:var(--fg-dark-2);font-weight:400}

/* PUNTOS TABLE — numbered rows per brand */
.puntos-header{display:grid;gap:40px;margin-bottom:64px;position:relative;z-index:1}
@media(min-width:768px){.puntos-header{grid-template-columns:1fr 1fr;align-items:start}}
.puntos-desc{font-size:15px;line-height:1.8;color:var(--fg-light-2);font-weight:400}
.puntos-table{width:100%;border-collapse:collapse;position:relative;z-index:1}
.puntos-table thead{font-family:var(--mono);font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--fg-light-3)}
.puntos-table th{padding:12px 16px;text-align:left;border-bottom:1px solid var(--border-light-strong);font-weight:500}
.puntos-table td{padding:20px 16px;border-top:1px solid var(--border-light);vertical-align:top;font-size:14px;line-height:1.6}
.puntos-table .col-num{font-family:var(--mono);color:var(--cyan-deep);font-weight:500;width:40px;font-size:11px}
.puntos-table .col-principio{font-weight:600;font-size:15px;min-width:160px;color:var(--fg-light)}
.puntos-table .col-lectura{color:var(--fg-light-2);font-weight:400}
.puntos-table .col-tag{font-family:var(--mono);font-size:10px;letter-spacing:0.14em;color:var(--fg-light-3);text-align:right;white-space:nowrap;text-transform:uppercase}
@media(max-width:767px){
.puntos-table,.puntos-table thead,.puntos-table tbody,.puntos-table tr,.puntos-table th,.puntos-table td{display:block}
.puntos-table thead{display:none}
.puntos-table tr{padding:20px 0;border-top:1px solid var(--border-light)}
.puntos-table td{padding:4px 0;border:none}
.puntos-table .col-tag{text-align:left;margin-top:8px}
}

/* FOOTER */
.footer{text-align:center;padding:120px 28px 60px;min-height:auto}
.footer-label{font-family:var(--mono);font-size:11px;color:var(--fg-dark-3);letter-spacing:0.14em;text-transform:uppercase;margin-bottom:64px}
.footer-statement{font-size:clamp(28px,5vw,48px);font-weight:300;line-height:1.2;margin-bottom:8px;letter-spacing:-0.03em}
.footer-statement em{font-style:normal;color:var(--cyan)}
.footer-meta{font-family:var(--mono);font-size:11px;color:var(--fg-dark-3);letter-spacing:0.15em;text-transform:uppercase;margin:24px 0 48px}
.contact-btn{display:inline-flex;align-items:center;gap:10px;padding:14px 32px;background:var(--cyan);color:var(--ink);font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:0.14em;text-transform:uppercase;text-decoration:none;border-radius:0;border:none;transition:all 200ms ease-out;cursor:pointer}
.contact-btn:hover{background:#00d4fc;box-shadow:0 0 20px rgba(0,194,232,0.3)}
.contact-btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* SCROLL REVEAL — brand spec */
.reveal{opacity:0;transform:translateY(20px);transition:opacity 0.8s var(--ease-out),transform 0.8s var(--ease-out)}
.reveal.visible{opacity:1;transform:none}
.reveal-d1{transition-delay:0.12s}
.reveal-d2{transition-delay:0.24s}
.reveal-d3{transition-delay:0.36s}

/* PROGRESS BAR */
.progress-bar{position:fixed;top:40px;left:0;height:2px;background:var(--cyan);opacity:0.7;z-index:1001;transition:width 100ms linear}

/* SAFE AREAS */
@supports(padding:env(safe-area-inset-bottom)){
.footer{padding-bottom:calc(60px + env(safe-area-inset-bottom))}
.nav{padding-top:env(safe-area-inset-top)}
}

/* ========== MOBILE HARDENING ========== */

/* Touch & overscroll */
html{-webkit-tap-highlight-color:transparent;overscroll-behavior:none}
a,button{-webkit-touch-callout:none}

/* Nav responsive: hide meta on small screens, shrink to 2-col */
@media(max-width:600px){
  .nav{grid-template-columns:auto 1fr;height:36px;padding:0 16px;font-size:10px}
  .nav-meta{display:none}
  .nav-clock{font-size:10px}
  .nav-logo{font-size:12px;letter-spacing:0.12em}
}

/* Boot text — prevent overflow on small screens */
@media(max-width:400px){
  .boot-lines{min-width:0;font-size:11px;padding:0 20px}
}

/* Hero subtitle — wrap gracefully */
@media(max-width:767px){
  .hero-sub{font-size:12px;letter-spacing:0.08em;padding:0 16px}
}

/* Pilares — reduce gap on mobile */
@media(max-width:767px){
  .pilares-intro{margin-bottom:40px}
  .pilares-grid{gap:32px}
}

/* Valores cards — tighter padding on mobile */
@media(max-width:600px){
  .valor-card{padding:28px 20px}
  .valor-letter{font-size:56px}
  .valor-title{font-size:16px}
  .valores-header{margin-bottom:48px}
}

/* Puntos table — better mobile card layout */
@media(max-width:767px){
  .puntos-table tr{padding:16px 0;display:block;border-top:1px solid var(--border-light)}
  .puntos-table .col-num{font-size:10px;padding:8px 0 4px}
  .puntos-table .col-principio{font-size:14px;padding:4px 0}
  .puntos-table .col-lectura{font-size:13px;padding:4px 0}
  .puntos-table .col-tag{font-size:9px;padding:4px 0 8px}
}

/* Crosshair — hide on mobile to prevent overflow */
@media(max-width:767px){
  .crosshair{display:none}
}

/* Contact button — enforce 44px min touch target */
.contact-btn{min-height:44px;min-width:44px}

/* Footer — tighter on mobile */
@media(max-width:767px){
  .footer{padding:80px 20px 40px}
  .footer-label{margin-bottom:40px}
}

/* Prevent horizontal scroll from any overflow */
body{overflow-x:hidden}
section{overflow-x:hidden}