/* Design philosophy: Editorial Swiss Utility — composición asimétrica, señalética precisa, marfil como calma, azul tinta como confianza y Mandarina Rescate como acción. */

:root { --ink:#12213A; --ink-2:#243650; --mandarin:#F46A3A; --cream:#F5F1E8; --paper:#FBF9F3; --muted:#7A7B77; --line:rgba(18,33,58,.16); --radius:.15rem; --background:#F5F1E8; --foreground:#12213A; --primary:#F46A3A; --primary-foreground:#fff; --card:#FBF9F3; --card-foreground:#12213A; --border:rgba(18,33,58,.16); --ease-out:cubic-bezier(.23,1,.32,1); }
@theme inline { --color-background:var(--background); --color-foreground:var(--foreground); --color-card:var(--card); --color-card-foreground:var(--card-foreground); --color-primary:var(--primary); --color-primary-foreground:var(--primary-foreground); --color-border:var(--border); --radius-sm:var(--radius); --radius-md:var(--radius); --radius-lg:var(--radius); --radius-xl:var(--radius); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--cream); color:var(--ink); font-family:'DM Sans',sans-serif; }
button,a { font:inherit; }
button { cursor:pointer; }
button:focus-visible,a:focus-visible { outline:3px solid var(--mandarin); outline-offset:4px; }
.site-shell { overflow:hidden; }.whatsapp-float { position:fixed; z-index:20; right:26px; bottom:26px; width:58px; height:58px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:#25D366; color:white; box-shadow:0 9px 24px rgba(18,33,58,.25),0 0 0 5px rgba(37,211,102,.14); text-decoration:none; transition:transform .18s var(--ease-out),box-shadow .18s ease; }.whatsapp-float svg { width:29px; height:29px; fill:currentColor; }.whatsapp-float:hover { transform:translateY(-4px) scale(1.03); box-shadow:0 13px 28px rgba(18,33,58,.3),0 0 0 7px rgba(37,211,102,.18); }.whatsapp-float:active { transform:scale(.96); }.whatsapp-ping { position:absolute; top:2px; right:1px; width:11px; height:11px; border-radius:50%; background:var(--mandarin); border:2px solid var(--paper); }.whatsapp-tooltip { position:absolute; right:70px; white-space:nowrap; padding:10px 13px; background:var(--ink); color:white; font:11px 'IBM Plex Mono'; letter-spacing:.02em; opacity:0; transform:translateX(6px); pointer-events:none; transition:opacity .18s ease,transform .18s var(--ease-out); }.whatsapp-float:hover .whatsapp-tooltip,.whatsapp-float:focus-visible .whatsapp-tooltip { opacity:1; transform:translateX(0); }
.site-header { height:86px; padding:0 clamp(22px,5vw,72px); display:flex; align-items:center; justify-content:space-between; gap:30px; background:var(--cream); border-bottom:1px solid var(--line); position:relative; z-index:5; }
.brand { display:flex; align-items:center; gap:11px; color:var(--ink); text-decoration:none; min-width:180px; }
.brand-mark { width:46px; height:46px; object-fit:contain; filter:drop-shadow(3px 3px 0 rgba(244,106,58,.3)); }
.brand-name { font-family:'IBM Plex Mono',monospace; text-transform:uppercase; letter-spacing:-.06em; line-height:.9; font-size:13px; }
.brand-name b { font-family:'Archivo Black',sans-serif; font-size:17px; letter-spacing:-.08em; }
.main-nav { display:flex; align-items:center; gap:34px; }
.main-nav button,.text-btn { border:0; background:transparent; color:var(--ink); font-size:13px; font-weight:600; }
.main-nav button { transition:color .2s ease; }
.main-nav button:hover { color:var(--mandarin); }
.nav-close,.menu-toggle { display:none; background:transparent; border:0; }
.header-cta,.primary-btn { border:0; background:var(--mandarin); color:white; font-weight:700; display:inline-flex; align-items:center; justify-content:center; gap:10px; transition:transform .16s var(--ease-out),box-shadow .2s ease; }
.header-cta { padding:13px 18px; font-size:12px; text-transform:uppercase; letter-spacing:.08em; }
.header-cta:hover,.primary-btn:hover { transform:translateY(-2px); box-shadow:5px 5px 0 var(--ink); }
.header-cta:active,.primary-btn:active { transform:scale(.97); }
.hero-section { min-height:calc(100vh - 86px); display:grid; grid-template-columns:45% 55%; background:var(--cream); }
.hero-copy { padding:clamp(70px,10vw,145px) clamp(28px,7vw,112px); display:flex; flex-direction:column; justify-content:center; position:relative; }
.hero-copy:before { content:'24'; position:absolute; left:-10px; bottom:24px; color:rgba(18,33,58,.07); font:120px 'Archivo Black'; line-height:1; }
.eyebrow,.section-tag { font:600 11px 'IBM Plex Mono',monospace; letter-spacing:.08em; text-transform:uppercase; }
.eyebrow { display:flex; align-items:center; gap:9px; margin-bottom:25px; }
.eyebrow-dot { background:var(--mandarin); width:8px; height:8px; border-radius:50%; box-shadow:0 0 0 5px rgba(244,106,58,.16); }
h1,h2 { font-family:'Archivo Black',sans-serif; letter-spacing:-.075em; line-height:.91; margin:0; }
h1 { font-size:clamp(50px,6.5vw,92px); max-width:760px; }
h1 em,h2 em { color:var(--mandarin); font-style:normal; }
.hero-lead { max-width:420px; font-size:18px; line-height:1.45; margin:34px 0 31px; color:var(--ink-2); }
.hero-actions { display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.primary-btn { padding:17px 21px; font-size:13px; }
.text-btn { padding:10px 0; font-weight:600; }
.text-btn span { color:var(--mandarin); margin-left:8px; font-size:18px; }
.hero-proof { display:flex; gap:20px; margin-top:64px; font:11px 'IBM Plex Mono',monospace; text-transform:uppercase; }
.hero-proof span { display:flex; align-items:center; gap:6px; }
.hero-proof svg { color:var(--mandarin); }
.hero-visual { min-height:660px; position:relative; overflow:hidden; background:var(--ink); }
.hero-visual img,.process-image img,.detail-visual img { width:100%; height:100%; object-fit:cover; display:block; }
.image-overlay { position:absolute; inset:0; background:linear-gradient(90deg,rgba(18,33,58,.7),rgba(18,33,58,.04) 70%),linear-gradient(0deg,rgba(18,33,58,.45),transparent 40%); }
.status-stamp { position:absolute; left:34px; bottom:38px; display:flex; align-items:center; gap:13px; color:white; font:11px 'IBM Plex Mono',monospace; text-transform:uppercase; letter-spacing:.08em; }
.stamp-ring { width:63px; height:63px; border:1px solid var(--mandarin); color:var(--mandarin); display:flex; align-items:center; justify-content:center; flex-direction:column; font:bold 23px 'Archivo Black'; line-height:.72; border-radius:50%; }
.stamp-ring small { font:11px 'IBM Plex Mono'; }
.status-stamp b { color:var(--mandarin); }
.hero-index { position:absolute; right:33px; bottom:35px; color:white; font:12px 'IBM Plex Mono'; }
.hero-index span { opacity:.45; margin:0 7px; }
.signal-strip { min-height:72px; display:flex; align-items:center; justify-content:space-between; gap:26px; padding:0 clamp(22px,5vw,72px); background:var(--mandarin); color:white; position:relative; }.signal-strip:after { content:''; position:absolute; right:8%; bottom:-12px; width:110px; height:24px; background:var(--ink); clip-path:polygon(0 0,100% 0,78% 100%,0 100%); }
.signal-label { font:600 11px 'IBM Plex Mono'; letter-spacing:.08em; }.signal-label span { margin-left:16px; font-size:20px; }.signal-items { display:flex; gap:40px; font:11px 'IBM Plex Mono'; text-transform:uppercase; letter-spacing:.04em; }
.section-pad { padding:clamp(80px,10vw,145px) clamp(22px,7vw,112px); }
.services-section { background:var(--paper); }
.services-section,.faq-section { position:relative; }.services-section:after { content:'02'; position:absolute; right:4vw; top:80px; font:100px 'Archivo Black'; color:rgba(18,33,58,.04); }
.section-intro { display:grid; grid-template-columns:1fr 1.1fr .75fr; align-items:end; gap:35px; margin-bottom:70px; }.section-tag { color:var(--mandarin); display:block; }.section-intro h2,.faq-section h2 { font-size:clamp(42px,5vw,70px); }.section-intro h2 span,.faq-section h2 span { color:var(--mandarin); }.section-intro p { max-width:260px; margin:0 0 2px; line-height:1.5; color:var(--muted); font-size:15px; }
.services-layout { display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(30px,7vw,100px); align-items:stretch; }.services-list { border-top:1px solid var(--line); }.service-card { display:grid; grid-template-columns:54px 1fr 30px 24px; align-items:center; gap:18px; padding:28px 0; border-bottom:1px solid var(--line); transition:padding .2s var(--ease-out),background .2s ease; position:relative; }.service-card:before { content:''; position:absolute; left:-1px; top:0; height:1px; width:46px; background:var(--mandarin); transform:skewX(-35deg); transform-origin:left; }.service-card:hover { padding-left:17px; padding-right:17px; background:var(--cream); }.service-num { align-self:start; color:var(--mandarin); font:600 12px 'IBM Plex Mono'; padding-top:3px; }.service-content h3 { margin:0 0 8px; font:25px 'Archivo Black'; letter-spacing:-.06em; }.service-content p { margin:0; max-width:430px; color:var(--muted); line-height:1.45; font-size:14px; }.service-icon { color:var(--mandarin); }.service-arrow { opacity:.4; }.detail-visual { min-height:390px; position:relative; }.detail-visual:before { content:'EVIDENCIA / 02'; position:absolute; inset:-12px 12px 12px -12px; border:1px solid var(--mandarin); z-index:0; padding:12px; color:var(--mandarin); font:10px 'IBM Plex Mono'; letter-spacing:.08em; }.detail-visual img { position:relative; z-index:1; }.detail-caption { position:absolute; z-index:2; bottom:22px; left:22px; color:white; font:18px 'Archivo Black'; letter-spacing:-.05em; line-height:.95; text-shadow:0 2px 14px rgba(0,0,0,.25); }
.process-section { display:grid; grid-template-columns:43% 57%; background:var(--ink); color:white; }.process-image { min-height:650px; position:relative; }.process-image:after { content:''; position:absolute; inset:0; background:linear-gradient(0deg,rgba(18,33,58,.6),transparent 55%); }.process-label { position:absolute; z-index:1; bottom:35px; left:clamp(22px,5vw,72px); font:11px 'IBM Plex Mono'; letter-spacing:.1em; line-height:1.45; }.process-label b { color:var(--mandarin); }.process-content { display:flex; flex-direction:column; justify-content:center; }.section-tag.light { color:var(--mandarin); }.process-content h2 { font-size:clamp(50px,6vw,82px); margin:27px 0 65px; }.steps { max-width:460px; }.steps>div { display:grid; grid-template-columns:55px 1fr; gap:20px; border-top:1px solid rgba(255,255,255,.2); padding:22px 0; }.steps span { color:var(--mandarin); font:12px 'IBM Plex Mono'; }.steps p { margin:0; color:rgba(255,255,255,.62); font-size:14px; line-height:1.45; }.steps b { color:white; font-size:17px; }
.faq-section { display:grid; grid-template-columns:1fr 1fr; gap:9vw; background:var(--cream); }.faq-section h2 { margin-top:28px; }.faq-list { border-top:1px solid var(--line); }.faq-item { border-bottom:1px solid var(--line); }.faq-item button { width:100%; display:flex; justify-content:space-between; text-align:left; align-items:center; gap:18px; padding:23px 0; border:0; background:transparent; color:var(--ink); font-weight:700; font-size:15px; }.faq-item button svg { flex:none; transition:transform .2s var(--ease-out); color:var(--mandarin); }.faq-item.open button svg { transform:rotate(180deg); }.faq-item p { margin:-3px 30px 24px 0; color:var(--muted); line-height:1.5; font-size:14px; }
.contact-section { background:var(--mandarin); color:white; padding:clamp(70px,9vw,120px) clamp(22px,7vw,112px) 28px; }.contact-inner { display:grid; grid-template-columns:1fr 1fr; align-items:end; gap:50px; }.contact-section h2 { font-size:clamp(48px,6vw,86px); margin:28px 0 22px; max-width:760px; }.contact-section p { font-size:17px; margin:0; }.contact-actions { display:flex; flex-direction:column; gap:13px; }.contact-call,.contact-social { text-decoration:none; display:flex; align-items:center; gap:16px; color:var(--ink); background:var(--cream); border:0; padding:19px 22px; text-align:left; }.contact-call span { display:flex; flex-direction:column; flex:1; }.contact-call small { font:11px 'IBM Plex Mono'; opacity:.6; }.contact-call b { font:24px 'Archivo Black'; letter-spacing:-.06em; }.contact-social { background:transparent; border:1px solid rgba(255,255,255,.6); color:white; font-weight:600; }.contact-social span { flex:1; }.contact-note { border-top:1px solid rgba(255,255,255,.35); margin-top:65px; padding-top:17px; font:10px 'IBM Plex Mono'; letter-spacing:.04em; display:flex; align-items:center; gap:13px; }.contact-note span { font-weight:700; padding:5px 8px; border:1px solid white; }
.site-footer { display:flex; align-items:center; justify-content:space-between; gap:30px; padding:25px clamp(22px,5vw,72px); background:var(--ink); color:white; }.footer-brand { color:white; }.footer-brand .brand-mark { width:40px; height:40px; }.footer-copy,.footer-meta { font:10px 'IBM Plex Mono'; text-transform:uppercase; letter-spacing:.05em; opacity:.6; }.footer-meta { opacity:1; }
@media (max-width:900px) { .hero-section,.process-section { grid-template-columns:1fr; }.hero-copy { padding-top:90px; padding-bottom:75px; }.hero-visual { min-height:560px; }.section-intro,.faq-section { grid-template-columns:1fr 1fr; }.section-intro p { grid-column:2; }.services-layout { grid-template-columns:1fr; }.detail-visual { max-width:530px; min-height:330px; }.process-image { min-height:440px; }.process-content { padding-top:80px; }.contact-inner { grid-template-columns:1fr 1fr; } }
@media (max-width:650px) { .whatsapp-float { right:18px; bottom:18px; width:54px; height:54px; }.whatsapp-float svg { width:27px; height:27px; }.whatsapp-tooltip { display:none; }.site-header { height:74px; }.brand { min-width:auto; }.brand-mark { width:32px; height:32px; }.brand-name { font-size:10px; }.brand-name b { font-size:14px; }.header-cta { padding:11px 12px; font-size:10px; }.header-cta svg { display:none; }.menu-toggle { display:block; color:var(--ink); }.main-nav { display:none; position:absolute; top:74px; left:0; right:0; background:var(--paper); padding:25px 22px; flex-direction:column; align-items:flex-start; border-bottom:1px solid var(--line); }.main-nav.is-open { display:flex; }.nav-close { display:block; position:absolute; right:18px; top:19px; }.hero-copy { padding:74px 22px 62px; }.hero-copy:before { font-size:80px; }.hero-lead { font-size:16px; margin-top:25px; }.hero-proof { margin-top:42px; flex-direction:column; gap:9px; }.hero-visual { min-height:440px; }.signal-strip { padding:17px 22px; align-items:flex-start; flex-direction:column; gap:13px; }.signal-items { gap:16px; flex-wrap:wrap; }.section-pad { padding:76px 22px; }.section-intro,.faq-section { display:block; }.section-intro p { margin-top:25px; }.section-intro { margin-bottom:50px; }.service-card { grid-template-columns:35px 1fr 20px; gap:11px; }.service-icon { display:none; }.service-content h3 { font-size:21px; }.service-content p { font-size:13px; }.detail-visual { margin:20px 12px 0; min-height:280px; }.process-image { min-height:350px; }.process-content h2 { margin:25px 0 44px; }.faq-list { margin-top:48px; }.contact-inner { display:block; }.contact-actions { margin-top:48px; }.contact-call b { font-size:21px; }.contact-note { margin-top:45px; line-height:1.45; align-items:flex-start; }.site-footer { align-items:flex-start; flex-direction:column; gap:22px; }.footer-copy { order:3; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition-duration:.01ms!important; animation-duration:.01ms!important; } }
.style-note { display:none; }