/* Base */ :root{ --bg:#0b1020; --bg-alt:#0f1530; --text:#e9eef7; --muted:#b9c6e0; --primary:#1e90ff; /* azul */ --primary-600:#1b7fe0; --primary-700:#176fc4; --accent:#5ec3ff; /* celeste */ --card:#121933; --border:rgba(255,255,255,.08); --success:#2bd576; --danger:#ff6b6b; --shadow:0 10px 30px rgba(0,0,0,.35); } *{box-sizing:border-box} html,body{height:100%} body{ margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; color:var(--text); background-color:#0b1020; background: radial-gradient(1200px 800px at 80% -10%, rgba(94,195,255,.18), transparent 55%), radial-gradient(900px 600px at -10% 20%, rgba(30,144,255,.18), transparent 55%), linear-gradient(180deg, #0b1020 0%, #0b1022 100%); line-height:1.6; } img{max-width:100%;display:block} a{color:var(--accent);text-decoration:none} .container{width:min(1120px, 92%);margin-inline:auto} .center{text-align:center} .small{font-size:.9rem;color:var(--muted)} .lead{font-size:1.1rem;color:var(--muted)} .eyebrow{letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--accent)} /* Fluid type scale */ h1{font-size:clamp(1.9rem, 1.3rem + 2.4vw, 3rem)} h2{font-size:clamp(1.35rem, 1.05rem + 1.4vw, 2rem)} h3{font-size:clamp(1.1rem, .95rem + .8vw, 1.35rem)} p, li{font-size:clamp(1rem, .96rem + .3vw, 1.1rem)} /* Header */ .site-header{position:sticky;top:0;z-index:50;backdrop-filter:saturate(160%) blur(8px);background:rgba(9,13,26,.5);border-bottom:1px solid var(--border)} .site-header .container{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:12px 0} .brand{display:flex;align-items:center;gap:.6rem;color:var(--text);font-weight:700} .brand-mark{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--primary),var(--accent));box-shadow:var(--shadow)} .brand-text{font-family:"Playfair Display",serif;letter-spacing:.2px} /* Logo variants */ .brand-mark--nobg{background:transparent !important;border:none;box-shadow:none;padding:0} .brand-mark--nobg img{width:100%;height:100%;display:block;object-fit:contain;border-radius:10px} .brand-mark--bg{background:#fff;border:1px solid var(--border);box-shadow:var(--shadow)} .brand-mark--bg img{width:100%;height:100%;display:block;object-fit:contain;padding:4px;border-radius:10px} .brand-mark--sm{width:28px;height:28px} .brand-mark--lg{width:44px;height:44px} .main-nav .nav-toggle{display:none} .nav-menu{list-style:none;display:flex;gap:1rem;margin:0;padding:0} .nav-menu a{padding:.5rem .75rem;border-radius:8px;transition:all .25s ease} .nav-menu a:hover{background:rgba(94,195,255,.12);box-shadow:0 6px 20px rgba(30,144,255,.15)} .btn{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:12px;padding:.9rem 1.1rem;font-weight:600;transition:all .25s ease;min-height:44px} .btn:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(30,144,255,.25)} .btn-primary{background:linear-gradient(135deg,var(--primary),var(--accent));color:#061021;border-color:transparent} .btn-outline{background:transparent;color:var(--text)} .btn-sm{padding:.55rem .8rem;border-radius:10px} .btn-block{width:100%} /* Sections */ .section{padding:clamp(64px, 9vw, 120px) 0;position:relative;background:transparent} /* Use a single unified background from to avoid seams between sections */ .section.alt{background:transparent} /* Extra clearance for Services to avoid overlapping with background glow */ #servicios.section{padding-top:calc(clamp(64px, 9vw, 120px) + 40px)} .grid-2{display:grid;grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));gap:clamp(1rem, 2.5vw, 2.2rem);align-items:center} .cards{display:grid;grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));gap:clamp(.9rem, 2.2vw, 1.4rem);margin-top:1.6rem} /* Servicios */ /* #servicios { display: flex; margin-top: 8rem; } /* Contacto */ /* #contacto { display: flex; margin-top: 10rem; } */ /* Hero */ .hero h1{font-size:clamp(2rem, 2.2vw + 1rem, 3.1rem);line-height:1.15;margin:.3rem 0 .6rem} .gradient{background:linear-gradient(135deg,var(--accent),#ffffff);-webkit-background-clip:text;background-clip:text;color:transparent} .hero-cta{display:flex;gap:.7rem;margin-top:.8rem} .trust-badges{display:flex;flex-wrap:wrap;gap:.8rem 1.2rem;margin:1rem 0 0;padding:0;list-style:none;color:var(--muted)} .trust-badges .icon{color:var(--accent);margin-right:.35rem} .hero .media-card{position:relative;border-radius:20px;overflow:hidden;background:linear-gradient(180deg,#0f1733,#0c1329);border:1px solid var(--border);box-shadow:var(--shadow)} .hero .media-card{aspect-ratio:1/1} .hero .media-card img{width:100%;height:100%;object-fit:cover;display:block} .media-glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(500px 300px at 70% 10%, rgba(94,195,255,.35), transparent 60%)} .floating{animation:floating 8s ease-in-out infinite} @keyframes floating{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}} .shape-divider{display:none} /* Cards */ .card{background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.01));border:1px solid var(--border);border-radius:18px;padding:1.2rem;box-shadow:var(--shadow)} .card-info{border-color:rgba(94,195,255,.35)} .card-service h3{margin-top:0} .tags{display:flex;flex-wrap:wrap;gap:.5rem .6rem;list-style:none;padding:0;margin:.6rem 0 0} .tags li{border:1px solid var(--border);padding:.3rem .6rem;border-radius:999px;color:var(--muted);background:rgba(255,255,255,.02)} /* Stats */ .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin-top:1rem} .stat{background:rgba(30,144,255,.08);border:1px solid rgba(94,195,255,.25);border-radius:14px;padding:.8rem;text-align:center} .stat .num{font-size:1.4rem;font-weight:700;color:#ffffff} .stat .label{font-size:.85rem;color:var(--muted)} /* Forms */ .form-card .form-field{margin-bottom:1rem} label{display:block;margin-bottom:.35rem;font-weight:600} input,select,textarea{width:100%;background:#0f1530;border:1px solid var(--border);border-radius:12px;padding:.8rem;color:var(--text);outline:none;transition:border-color .2s ease, box-shadow .2s ease} input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(94,195,255,.18)} .error{color:var(--danger);height:1rem;display:block} .form-note{color:var(--muted);font-size:.85rem} .form-status{margin-top:.8rem} .contact-grid{align-items:start} .contact-card .contact-list{list-style:none;padding:0;margin:0 0 .8rem} .contact-card .contact-list li{margin:.3rem 0} .social{display:flex;gap:.6rem} .social-link{border:1px solid var(--border);border-radius:10px;padding:.45rem .7rem;color:var(--text);transition:all .2s} .social-link:hover{background:rgba(94,195,255,.12);transform:translateY(-2px)} /* Footer */ .site-footer{border-top:none;padding:32px 0;background:transparent} .footer-grid{ display:grid; grid-template-columns:1fr 1fr; grid-template-areas: "nav brand" "copy copy"; gap:1.2rem 2rem; align-items:start } .site-footer .footer-grid > div:first-child{ /* brand block */ grid-area:brand; text-align:right } .site-footer nav{ /* footer nav */ grid-area:nav } .site-footer .footer-grid > .small{ /* copyright */ grid-area:copy; text-align:center; justify-self:stretch } .site-footer .brand{gap:.5rem} .site-footer .brand-mark{box-shadow:none} .footer-nav{list-style:none;padding:0;margin:0;display:grid;gap:.35rem} .footer-nav a{color:var(--muted);transition:color .2s ease, transform .2s ease} .footer-nav a:hover{color:#fff;transform:translateX(2px)} .footer-grid > :last-child{justify-self:unset} /* Reveal Animations */ .reveal{opacity:0;transform:translateY(16px);transition:opacity .8s ease, transform .8s ease} .reveal.visible{opacity:1;transform:none} /* WhatsApp Floating Button */ .whatsapp-float{ position:fixed; right:20px; bottom:calc(22px + env(safe-area-inset-bottom, 0px)); width:56px; height:56px; display:grid; place-items:center; background:#25D366; color:#fff; border-radius:50%; box-shadow:0 10px 25px rgba(0,0,0,.35); border:2px solid rgba(255,255,255,.85); z-index:60; transition:transform .2s ease, box-shadow .2s ease, filter .2s ease; animation:wa-pulse 2.6s ease-in-out infinite; } .whatsapp-float:hover{ transform:translateY(-2px) scale(1.04); box-shadow:0 14px 32px rgba(0,0,0,.45); filter:saturate(110%); } .wa-icon{ display:block } @keyframes wa-pulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(37,211,102,.45) } 50%{ box-shadow:0 0 0 14px rgba(37,211,102,0) } } @media (prefers-reduced-motion: reduce){ .whatsapp-float{ animation:none } } /* Responsive */ @media (max-width: 980px){ .footer-grid{ grid-template-columns:1fr; grid-template-areas: "brand" "nav" "copy"; gap:1rem } .site-footer .footer-grid > div:first-child{ text-align:center } .footer-grid > *{text-align:center;justify-self:center} .footer-nav{justify-items:center} } @media (max-width: 640px){ .nav-menu{ position:absolute; top:60px; right:16px; left:auto; background:rgba(9,13,26,.96); backdrop-filter:blur(10px); padding:12px; border:1px solid var(--border); border-radius:12px; display:none; flex-direction:column; gap:.55rem; width:min(88vw, 320px); max-height:calc(100dvh - 90px - env(safe-area-inset-bottom, 0px)); overflow:auto; margin-right:0; } /* Smaller tag pills on mobile */ .tags{gap:.45rem .5rem} .tags li{padding:.28rem .55rem} .main-nav .nav-toggle{display:inline-flex;border:1px solid var(--border);background:transparent;color:var(--text);border-radius:10px;padding:.5rem .75rem} .nav-menu.open{display:flex} .hero-cta{flex-direction:column} .trust-badges{gap:.6rem .9rem} /* Slightly reduce extra clearance on small screens */ #servicios.section{padding-top:calc(clamp(56px, 9vw, 100px) + 20px)} } @media (max-width: 480px){ .brand-mark{width:32px;height:32px} .site-header .container{padding:10px 0} .hero h1{font-size:clamp(1.7rem, 6.5vw, 2.2rem)} .card{padding:1rem} .stats{grid-template-columns:repeat(2,1fr)} } #nosotros { height: 60vh; background-color:#0b1020; background: radial-gradient(1200px 800px at 80% -10%, rgba(94,195,255,.18), transparent 55%), radial-gradient(900px 600px at -10% 20%, rgba(30,144,255,.18), transparent 55%), linear-gradient(180deg, #0b1020 0%, #0b1022 100%); line-height:1.6; } #servicios { height: 270vh; background-color:#0b1020; background: radial-gradient(1200px 800px at 80% -10%, rgba(94,195,255,.18), transparent 55%), radial-gradient(900px 600px at -10% 20%, rgba(30,144,255,.18), transparent 55%), linear-gradient(180deg, #0b1020 0%, #0b1022 100%); line-height:1.6; } #contacto { height: 110vh; background-color:#0b1020; background: radial-gradient(1200px 800px at 80% -10%, rgba(94,195,255,.18), transparent 55%), radial-gradient(900px 600px at -10% 20%, rgba(30,144,255,.18), transparent 55%), linear-gradient(180deg, #0b1020 0%, #0b1022 100%); line-height:1.6; } .carousel-track { width: 100%; } .carousel-slide img { width: 100%; height: 100%; object-fit: cover; } /* @media (max-width: 640px){ } */