:root { --navy:#14284b; --blue:#00a4dd; --lime:#9bc74a; --ink:#17233a; --muted:#5e6b7e; --line:#dce5ec; --surface:#f4f8fa; --radius:14px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; font-family:"DM Sans",sans-serif; color:var(--ink); background:#fff; }
a { color:inherit; text-decoration:none; }
.site-header { height:90px; display:flex; align-items:center; justify-content:space-between; gap:26px; padding:7px clamp(22px,5vw,76px); border-bottom:1px solid #e8eef2; background:#fff; position:sticky; top:0; z-index:5; }
.brand img { display:block; width:112px; height:76px; object-fit:contain; object-position:left center; }
nav { display:flex; gap:31px; margin-left:auto; }
nav a { color:#405066; font-size:.92rem; font-weight:600; }
nav a:hover { color:var(--blue); }
.header-cta { font-size:.88rem; font-weight:700; color:var(--navy); border:1px solid #bfd0dc; padding:11px 16px; border-radius:var(--radius); }
.hero { position:relative; min-height:620px; overflow:hidden; background:#eaf5f8; }
.hero-image { position:absolute; inset:0; background-image:linear-gradient(90deg,rgba(247,252,253,.98) 0%,rgba(247,252,253,.91) 28%,rgba(247,252,253,.17) 60%,rgba(247,252,253,.02)),url("assets/laboratorio-hero.png"); background-size:cover; background-position:center; }
.hero-content { position:relative; width:min(660px,100%); padding:112px clamp(22px,9vw,150px) 80px; animation:hero-enter .72s cubic-bezier(.16,1,.3,1) both; }
.eyebrow,.section-kicker { letter-spacing:.13em; text-transform:uppercase; font-size:.72rem; line-height:1.3; font-weight:700; color:#2b679a; }
h1,h2,h3 { font-family:Manrope,sans-serif; margin:0; }
h1 { font-size:clamp(2.75rem,5vw,5rem); line-height:.99; letter-spacing:-.065em; max-width:650px; }
.hero-copy { margin:25px 0 31px; max-width:530px; color:#42566b; font-size:1.1rem; line-height:1.65; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; }
.button { min-height:49px; display:inline-flex; align-items:center; justify-content:center; gap:18px; border-radius:var(--radius); padding:13px 19px; font-size:.92rem; font-weight:700; border:1px solid transparent; cursor:pointer; transition:transform .15s ease,background .15s ease; }
.button:active { transform:translateY(1px); }
.button-primary { background:var(--navy); color:#fff; }.button-primary:hover { background:#0b6495; }
.button-secondary { border-color:#bfd0dc; background:rgba(255,255,255,.75); color:var(--navy); }.button-secondary:hover { background:#fff; }
.intro { max-width:1240px; margin:auto; display:grid; grid-template-columns:minmax(0,.84fr) minmax(380px,1.16fr); gap:78px; align-items:center; padding:110px 34px; }
.intro h2,.section-heading h2,.contact h2 { font-size:clamp(2rem,3.5vw,3.25rem); letter-spacing:-.055em; line-height:1.08; }
.intro p:not(.section-kicker) { max-width:640px; font-size:1.05rem; line-height:1.75; color:var(--muted); margin:23px 0 0; }
.intro-gallery { position:relative; min-height:440px; }.intro-main-image { position:absolute; inset:0 0 0 9%; width:91%; height:100%; object-fit:cover; border-radius:var(--radius); }.intro-detail-image { position:absolute; left:0; bottom:-28px; width:42%; aspect-ratio:1 / 1; object-fit:cover; border-radius:var(--radius); border:8px solid #fff; box-shadow:0 18px 45px rgba(21,40,75,.16); }
.solutions { background:var(--surface); padding:95px max(34px,calc((100vw - 1170px)/2)); }
.section-heading { max-width:680px; }.section-heading h2 { margin-top:13px; }
.solution-layout { display:grid; grid-template-columns:minmax(320px,.82fr) minmax(0,1.18fr); gap:70px; align-items:start; margin-top:52px; }.solution-visuals { display:grid; grid-template-columns:1.18fr .82fr; align-items:end; gap:14px; }.solution-visuals figure { margin:0; overflow:hidden; border-radius:var(--radius); background:#dcebf1; }.solution-visual-primary { height:440px; }.solution-visual-secondary { height:270px; margin-bottom:34px !important; }.solution-visuals img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .45s cubic-bezier(.16,1,.3,1); }.solution-visuals:hover img { transform:scale(1.035); }
.solution-list { border-top:1px solid #cbdbe3; }.solution-row { display:grid; grid-template-columns:56px 1fr; gap:17px; padding:23px 0 24px; border-bottom:1px solid #cbdbe3; transition:padding .2s ease,background .2s ease; }.solution-row:hover { padding-left:14px; background:rgba(255,255,255,.54); }.index { color:var(--blue); font-size:.76rem; font-weight:700; padding-top:5px; }.solution-row h3 { font-size:1.22rem; letter-spacing:-.04em; margin:0 0 7px; }.solution-row p { margin:0; font-size:.94rem; color:var(--muted); line-height:1.55; max-width:460px; }
.catalog-note { border-left:3px solid var(--lime); padding:15px 0 15px 18px; color:#405066; font-size:.92rem; max-width:720px; margin:10px 0 0; line-height:1.6; }
.promise { max-width:1240px; margin:auto; padding:110px 34px; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(340px,.95fr); gap:66px; align-items:center; }.promise-image { height:525px; overflow:hidden; border-radius:var(--radius); background:#dcebf1; }.promise-image img { width:100%; height:100%; object-fit:cover; display:block; }.promise-content { padding:12px 0; }.promise-band h2 { font-size:clamp(2.25rem,4vw,3.75rem); line-height:1.05; letter-spacing:-.065em; margin-top:13px; }
.promise-list { border-top:1px solid var(--line); margin-top:39px; }.promise-list div { display:grid; grid-template-columns:94px 1fr; gap:15px; padding:24px 0; border-bottom:1px solid var(--line); }.promise-list span { color:var(--blue); font-weight:700; font-size:.8rem; }.promise-list p { margin:0; font-size:1.07rem; line-height:1.45; font-weight:600; }
.contact { background:var(--navy); color:#fff; padding:88px max(34px,calc((100vw - 1170px)/2)); display:grid; grid-template-columns:1fr 1fr; gap:90px; }.contact .section-kicker { color:#8bcfee; }.contact h2 { max-width:520px; margin:13px 0 20px; }.contact > div > p:last-child { max-width:420px; color:#c0cfdf; line-height:1.65; }
.contact-details { display:grid; gap:9px; margin-top:28px; }.contact-details a { color:#dceeff; width:max-content; font-weight:700; font-size:.95rem; }.contact-details a:hover { color:#a9df5f; }
.contact-form { display:grid; gap:15px; }.contact-form label { display:grid; gap:7px; color:#d9e5f0; font-size:.84rem; font-weight:600; }.contact-form input,.contact-form textarea { width:100%; border:1px solid #637995; border-radius:10px; padding:12px; background:#fff; color:var(--ink); font:inherit; }.contact-form input:focus,.contact-form textarea:focus { outline:3px solid rgba(0,164,221,.45); border-color:var(--blue); }.contact-form .button { justify-self:start; margin-top:4px; background:var(--lime); color:#19320a; }.contact-form .button:hover { background:#b2dc65; }.form-status { margin:0; min-height:22px; color:#bde6f5; font-size:.9rem; }
footer { min-height:132px; padding:20px clamp(22px,5vw,76px); display:flex; align-items:center; justify-content:space-between; gap:24px; color:#65748a; font-size:.84rem; } footer img { width:102px; height:88px; object-fit:contain; } footer p { margin:0; }
.whatsapp-float { position:fixed; right:24px; bottom:24px; z-index:10; display:flex; align-items:center; gap:10px; min-height:54px; padding:10px 17px; border-radius:var(--radius); background:#25d366; color:#073c1c; font-size:.9rem; font-weight:800; box-shadow:0 12px 27px rgba(10,78,39,.24); transition:transform .15s ease,background .15s ease; }.whatsapp-float:hover { background:#48e17c; transform:translateY(-2px); }.whatsapp-float:active { transform:translateY(1px); }.whatsapp-float img { width:23px; height:23px; filter:brightness(0) saturate(100%) invert(17%) sepia(24%) saturate(1860%) hue-rotate(98deg) brightness(91%) contrast(97%); }
.motion-ready .reveal { opacity:0; transform:translateY(22px); transition:opacity .65s cubic-bezier(.16,1,.3,1),transform .65s cubic-bezier(.16,1,.3,1); }.motion-ready .reveal.is-visible { opacity:1; transform:translateY(0); }.motion-ready .reveal-child { opacity:0; transform:translateY(18px); transition:opacity .55s cubic-bezier(.16,1,.3,1),transform .55s cubic-bezier(.16,1,.3,1); }.motion-ready .is-visible .reveal-child { opacity:1; transform:translateY(0); }.motion-ready .is-visible .reveal-child:nth-child(2) { transition-delay:.08s; }.motion-ready .is-visible .reveal-child:nth-child(3) { transition-delay:.16s; }
@keyframes hero-enter { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } }
@media (max-width:760px) { .site-header { height:78px; padding:4px 20px; }.brand img { width:86px; height:70px; }.site-header nav,.header-cta { display:none; }.hero { min-height:630px; }.hero-image { background-position:63% center; background-image:linear-gradient(90deg,rgba(247,252,253,.98) 0%,rgba(247,252,253,.92) 63%,rgba(247,252,253,.40)),url("assets/laboratorio-hero.png"); }.hero-content { padding:76px 23px 55px; }.hero-copy { font-size:1rem; }.intro,.promise,.contact { grid-template-columns:1fr; gap:25px; padding:72px 24px; }.intro-gallery { min-height:350px; margin-top:10px; }.intro-main-image { inset:0 0 0 7%; width:93%; }.intro-detail-image { bottom:-20px; width:44%; border-width:6px; }.solution-layout { grid-template-columns:1fr; gap:34px; margin-top:32px; }.solution-visual-primary { height:340px; }.solution-visual-secondary { height:205px; margin-bottom:24px !important; }.solution-row { grid-template-columns:44px 1fr; padding:20px 0; }.solution-row:hover { padding-left:0; background:transparent; }.solutions { padding:72px 24px; }.promise-image { height:330px; }.promise-list { margin-top:26px; }.contact { gap:35px; }.contact-form .button { width:100%; } footer { flex-wrap:wrap; justify-content:flex-start; }.whatsapp-float { right:16px; bottom:16px; min-height:55px; width:55px; justify-content:center; padding:0; border-radius:50%; }.whatsapp-float span { display:none; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .button,.motion-ready .reveal,.motion-ready .reveal-child { transition:none; } .hero-content { animation:none; } }