:root{--bg:#F9FAFB;--text:#111827;--muted:#6B7280;--primary:#1F2937;--accent:#16A34A;--cyan:#06B6D4;--card:#fff;--shadow:0 10px 30px rgba(0,0,0,.08);--radius:16px}
*,*::before,*::after{box-sizing:border-box} html:focus-within{scroll-behavior:smooth}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;background:var(--bg);color:var(--text);line-height:1.5}
a{color:var(--cyan);text-decoration:none} a:focus-visible,button:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}
.container{width:min(1100px,92vw);margin-inline:auto}
.btn{display:inline-block;padding:.8rem 1.1rem;border-radius:12px;border:0;background:var(--accent);color:#fff;font-weight:700;box-shadow:var(--shadow);transition:transform .15s ease,opacity .15s}
.btn.secondary{background:var(--primary)} .btn:hover{transform:translateY(-1px)} .btn:active{transform:translateY(0);opacity:.85}
.muted{color:var(--muted)} .pill{display:inline-block;padding:.35rem .7rem;border-radius:999px;background:#E5F9EE;color:#065F46;font-weight:600;font-size:.85rem}
header{position:sticky;top:0;z-index:50;background:rgba(249,250,251,.8);backdrop-filter:saturate(180%) blur(6px);border-bottom:1px solid #e5e7eb}
nav{display:flex;align-items:center;justify-content:space-between;padding:.8rem 0}
.brand{display:flex;align-items:center;gap:.75rem;font-weight:900;letter-spacing:.5px}
.brand-mark{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,var(--accent),#23c55e);display:grid;place-items:center;color:#fff;font-weight:900;box-shadow:var(--shadow);overflow:hidden}
.brand-icon{width:24px;height:24px;display:block}
.nav-links{display:flex;gap:1rem;align-items:center}
.nav-links a{color:var(--text);font-weight:600;padding:.5rem .6rem;border-radius:10px}
.nav-links a:hover{background:#EEF2FF} .hamb{display:none}
.hero{position:relative;padding:6rem 0;background:radial-gradient(1200px 500px at 20% 0%, #E0F7F1 0%, transparent 60%), radial-gradient(1000px 400px at 120% 20%, #DFF4FF 0%, transparent 55%)}
.hero h1{font-size:clamp(2rem,6vw,3.4rem);margin:0 0 .6rem;line-height:1.1;letter-spacing:.3px}
.hero p.lead{font-size:clamp(1.05rem,2.3vw,1.25rem);max-width:60ch;margin:.65rem 0 1.1rem}
.cta-row{display:flex;gap:.75rem;flex-wrap:wrap}
.hero-graphic{position:absolute;inset:auto 0 0 auto;right:2%;bottom:-30px;opacity:.25;pointer-events:none;width:420px;max-width:45vw;height:auto}
section{padding:4rem 0} h2{font-size:clamp(1.6rem,3.2vw,2.1rem);margin:0 0 1rem}
.grid{display:grid;gap:1rem} .grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))} .grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){.grid.cols-3,.grid.cols-4{grid-template-columns:1fr}.nav-links{display:none}.hamb{display:inline-flex;gap:.5rem;align-items:center}}
.card{background:var(--card);border-radius:var(--radius);padding:1.2rem;box-shadow:var(--shadow);border:1px solid #eef2f7}
.card h3{margin:.2rem 0 .5rem;font-size:1.15rem} .icon{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:#F3FAF7;margin-bottom:.6rem}
.cs .grid{align-items:stretch}
.cs .card{display:flex;flex-direction:column;gap:.5rem;justify-content:flex-end;min-height:180px}
.cs .card .big{font-size:1.3rem;font-weight:900;margin-top:auto}
.cs .card p{margin:0}
.tag{font-size:.75rem;background:#E5E7EB;color:#111827;padding:.25rem .5rem;border-radius:999px}
.portfolio .card{cursor:pointer;transition:transform .15s ease} .portfolio .card:hover{transform:translateY(-3px)}
/* Portfolio: uniform card sizing and media */
.portfolio .grid{align-items:stretch}
.portfolio .card{display:flex;flex-direction:column;height:100%}
.portfolio .card img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:12px;margin:0 0 .6rem}
.portfolio .card h3{margin:.5rem 0 .4rem}
.slider{position:relative;overflow:hidden} .slides{display:flex;transition:transform .5s ease} .slide{min-width:100%;padding:1rem}
.dots{display:flex;gap:.4rem;justify-content:center;margin-top:.5rem} .dot{width:10px;height:10px;border-radius:50%;background:#d1d5db} .dot.active{background:var(--accent)}
/* Uniform image sizing within sliders */
.slider .slide img{width:100%;aspect-ratio:16/9;height:auto;object-fit:cover;border-radius:12px}
form{display:grid;gap:.8rem} input,textarea{padding:.8rem 1rem;border:1px solid #e5e7eb;border-radius:12px;background:#fff} textarea{min-height:120px;resize:vertical}
/* Contact section: full-page layout */
#contacto{min-height:100vh;background:radial-gradient(1000px 500px at -10% 20%, #E0F7F1 0%, transparent 60%), radial-gradient(1000px 500px at 110% 80%, #DFF4FF 0%, transparent 60%)}
#contacto .container{width:min(1200px,92vw);display:grid;gap:1.2rem;grid-template-columns:1.1fr 1fr;align-items:stretch}
@media (max-width:900px){#contacto .container{grid-template-columns:1fr}}
#contacto .info{display:flex;flex-direction:column;gap:1rem}
#contacto .info .card{padding:1.2rem}
#contacto form{background:var(--card);padding:1.2rem;border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid #eef2f7}
#contacto .two-col{display:none}
#contacto .form-row{display:grid;grid-template-columns:160px 1fr;gap:.8rem;align-items:center}
#contacto .form-row.full-row{grid-template-columns:1fr}
#contacto .form-label{font-weight:700;color:var(--primary)}
#contacto input,#contacto textarea{width:100%}
/* Keep checkbox and its text on one line */
#contacto .checkbox{display:inline-flex;align-items:center;gap:.5rem;white-space:nowrap}
#contacto .checkbox input{margin:0}
@media (max-width:600px){#contacto .form-row{grid-template-columns:1fr}.form-label{margin-bottom:.3rem}}
.foot{padding:2rem 0;border-top:1px solid #e5e7eb;color:var(--muted);font-size:.95rem}
@media (prefers-reduced-motion:reduce){.slides{transition:none}.btn{transition:none}}

/* Case study / project view */
.breadcrumbs{font-size:.9rem;color:var(--muted);margin:.5rem 0 1rem}
.breadcrumbs a{color:inherit}
.case-hero{padding:4rem 0 2rem}
.section-subtitle{color:var(--muted);font-weight:600;margin:.2rem 0 1rem}
.meta-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.8rem}
.meta-item{background:var(--card);border:1px solid #eef2f7;border-radius:12px;padding:.8rem;display:grid;grid-template-columns:120px 1fr;align-items:center;gap:.5rem}
.meta-item .label{font-size:.75rem;color:var(--muted);text-transform:uppercase;letter-spacing:.3px}
.meta-item .value{font-weight:800;margin:0}
@media (max-width:900px){.meta-grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.meta-grid{grid-template-columns:1fr}}
.badge{display:inline-block;background:#EEF2FF;color:#1F2937;border-radius:999px;padding:.25rem .6rem;font-size:.8rem;font-weight:700}
.badges{display:flex;gap:.4rem;flex-wrap:wrap}
.stat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.stat-card{background:var(--card);border:1px solid #eef2f7;border-radius:12px;padding:1rem;text-align:center}
.stat-card .big{font-size:1.8rem;font-weight:900}
@media (max-width:900px){.stat-grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.stat-grid{grid-template-columns:1fr}}
.img-frame{border:1px solid #eef2f7;border-radius:12px;overflow:hidden;background:#fff}
.two-col-text{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media (max-width:900px){.two-col-text{grid-template-columns:1fr}}

/* Project page spacing tightening */
body.project .case-hero{padding:2.5rem 0 1rem}
body.project section{padding:2.5rem 0}
body.project .card{padding:1rem}

/* Solution card emphasis and centering */
body.project .solution-card{text-align:center}
body.project .solution-card h2{font-size:1.6rem}
body.project .solution-card ul{display:inline-block;text-align:left;margin:0 auto;font-size:1.05rem;line-height:1.6}