/* ══════════════════════════════════════════════════════════════ CLIMAFEL · Landing Page Paleta 60-30-10 → 60% blanco · 30% gris acero · 10% azul tecnológico ══════════════════════════════════════════════════════════════ */ :root{ /* ── 60% · blancos ── */ --white:#FFFFFF; --soft:#F5F7FA; /* gris casi blanco, sigue leyéndose como blanco */ --soft-2:#E9EDF3; /* ── 30% · acero y grafito (degradado) ── Sustituye al azul profundo original: gama metálica fría, en línea con el acabado de los equipos de climatización. */ --steel:#4E5763; /* acero medio, extremo claro del degradado */ --deep:#2E353F; /* grafito, color base de secciones y titulares */ --deep-2:#4B5565; /* acero, estados hover */ --deep-3:#171C23; /* grafito profundo, extremo oscuro */ --sh-rgb:23,28,35; /* base de todas las sombras */ /* ── 10% · azul tecnológico (único acento de color) ── */ --tech:#12A5EE; --tech-2:#4FC4F8; /* Versión oscurecida del acento para texto sobre blanco: 4.9:1 (WCAG AA). */ --tech-ink:#0977B0; --ink:#1A1F27; --ink-2:#525C6B; --ink-3:#667082; /* 4.65:1 sobre --soft */ --line:#E0E5EC; /* Texto sobre las secciones de grafito */ --on-deep:#DCE1E8; --on-deep-2:#AEB7C3; --on-deep-3:#8D97A4; --wa:#25D366; --wa-dark:#1EB855; --r-sm:10px; --r:16px; --r-lg:24px; --r-xl:32px; --sh-sm:0 2px 10px rgba(var(--sh-rgb),.07); --sh:0 12px 32px rgba(var(--sh-rgb),.11); --sh-lg:0 26px 64px rgba(var(--sh-rgb),.18); --sh-tech:0 16px 40px rgba(18,165,238,.28); --nav-h:86px; --ease:cubic-bezier(.22,.75,.28,1); --f-body:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; /* Si adquieres la licencia de Eurostile, basta con instalarla o declarar un @font-face llamado 'Eurostile Extended' y tomará prioridad aquí. */ --f-display:'Eurostile Extended','Eurostile','Orbitron','Montserrat',sans-serif; } /* ─── Reset ─── */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;overflow-x:hidden} html:focus-within{scroll-behavior:smooth} body{ margin:0; background:var(--white); color:var(--ink); font-family:var(--f-body); font-size:16px; line-height:1.65; font-weight:400; /* En por sí solo no basta: el desbordamiento se propaga a y la página seguiría desplazándose en horizontal. */ overflow-x:hidden; -webkit-font-smoothing:antialiased; } img,svg{display:block;max-width:100%} img{height:auto} button,input,select{font:inherit;color:inherit} a{color:inherit;text-decoration:none} h1,h2,h3,h4,p,figure,ul,fieldset{margin:0;padding:0} ul{list-style:none} fieldset{border:0} .skip-link{ position:absolute;left:-9999px;top:0;z-index:999; background:var(--deep);color:#fff;padding:12px 20px;border-radius:0 0 var(--r-sm) 0; } .skip-link:focus{left:0} :focus-visible{outline:3px solid var(--tech);outline-offset:3px;border-radius:6px} .container{width:min(1200px,calc(100% - 2.5rem));margin-inline:auto} /* ─── Tipografía display ─── */ .display{ font-family:var(--f-display); font-weight:900; line-height:1.03; letter-spacing:.02em; text-transform:uppercase; transform:skewX(-6deg); /* emula el italic extendido de Eurostile */ transform-origin:left center; margin:0; text-wrap:balance; } /* Cada palabra va en nowrap (lo exige el efecto blur-reveal), así que el tamaño está calculado para que "COMPLICACIONES." —la palabra más larga— quepa siempre: a una columna desde 320 px, y a dos columnas desde 901 px. */ .display--xl{font-size:clamp(1.6rem,7vw,3.4rem)} .display--lg{font-size:clamp(1.5rem,4.2vw,3rem)} @media (min-width:901px){ .display--xl{font-size:clamp(2.4rem,4.5vw,4rem)} } .eyebrow{ font-family:var(--f-display); font-size:clamp(.7rem,1.4vw,.82rem); font-weight:700; letter-spacing:.24em; text-transform:uppercase; color:var(--tech-ink); margin-bottom:.85rem; } .eyebrow--on-deep{color:var(--tech-2)} .lead{font-size:clamp(1rem,1.7vw,1.18rem);color:var(--ink-2);max-width:62ch} .lead--center{margin-inline:auto;text-align:center} .lead--on-deep{color:var(--on-deep)} /* ─── Botones ─── */ .btn{ --btn-bg:var(--tech); --btn-fg:#fff; display:inline-flex;align-items:center;justify-content:center;gap:.6rem; padding:.85rem 1.5rem;border:0;border-radius:999px; background:var(--btn-bg);color:var(--btn-fg); font-weight:700;font-size:.95rem;letter-spacing:.01em; cursor:pointer;position:relative; transition:transform .28s var(--ease),box-shadow .28s var(--ease),background .2s; box-shadow:var(--sh-tech); text-align:center; } .btn svg{width:1.15em;height:1.15em;flex:none} .btn:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 22px 48px rgba(18,165,238,.36)} .btn:active{transform:translateY(-1px) scale(1)} .btn--lg{padding:1.05rem 2rem;font-size:1.02rem} .btn--wa{--btn-bg:var(--wa);box-shadow:0 16px 40px rgba(37,211,102,.32)} .btn--wa:hover{--btn-bg:var(--wa-dark);box-shadow:0 22px 48px rgba(37,211,102,.42)} .btn--solid{--btn-bg:var(--deep);box-shadow:0 14px 34px rgba(var(--sh-rgb),.24)} .btn--solid:hover{--btn-bg:var(--deep-2);box-shadow:0 22px 46px rgba(var(--sh-rgb),.32)} .btn--ghost{ --btn-bg:transparent;--btn-fg:#fff; box-shadow:none;border:2px solid rgba(255,255,255,.35); } .btn--ghost:hover{--btn-bg:rgba(255,255,255,.1);box-shadow:none;border-color:var(--tech-2)} .btn--ghost.btn--dark{--btn-fg:var(--deep);border-color:var(--line)} .btn--ghost.btn--dark:hover{--btn-bg:var(--soft);border-color:var(--tech)} .btn:disabled{opacity:.4;pointer-events:none} /* micro-pulso del CTA principal */ .btn--pulse::after{ content:"";position:absolute;inset:0;border-radius:inherit; box-shadow:0 0 0 0 rgba(37,211,102,.55); animation:pulse 2.6s var(--ease) infinite; } @keyframes pulse{ 0%{box-shadow:0 0 0 0 rgba(37,211,102,.5)} 70%{box-shadow:0 0 0 18px rgba(37,211,102,0)} 100%{box-shadow:0 0 0 0 rgba(37,211,102,0)} } /* ══════════ NAV ══════════ */ .nav{ position:fixed;inset:0 0 auto;z-index:100;height:var(--nav-h); background:rgba(255,255,255,0); transition:background .35s var(--ease),box-shadow .35s var(--ease),backdrop-filter .35s; } .nav.is-stuck{ background:rgba(255,255,255,.92); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); box-shadow:0 1px 0 var(--line),var(--sh-sm); } .nav__inner{ width:min(1200px,calc(100% - 2.5rem));margin-inline:auto;height:100%; display:flex;align-items:center;gap:1.5rem; } .nav__brand{display:flex;align-items:center;gap:.8rem;margin-right:auto} /* Placa blanca: mantiene el logotipo legible tanto sobre el grafito del hero como sobre la barra blanca al hacer scroll, sin cambiar de versión. */ .nav__mark{ width:56px;height:56px;flex:none; padding:7px;border-radius:16px;background:#fff; box-shadow:0 8px 22px rgba(var(--sh-rgb),.32),0 0 0 1px rgba(255,255,255,.6); transition:transform .35s var(--ease),box-shadow .35s var(--ease); } .nav__brand:hover .nav__mark{transform:translateY(-2px) rotate(-3deg) scale(1.06)} .nav.is-stuck .nav__mark{box-shadow:0 6px 16px rgba(var(--sh-rgb),.14),0 0 0 1px var(--line)} .nav__word{ font-family:var(--f-display);font-weight:900;font-size:1.34rem;letter-spacing:.07em; transform:skewX(-6deg);line-height:1; text-shadow:0 2px 12px rgba(var(--sh-rgb),.45); } .nav__word b{color:#fff} .nav__word i{color:var(--on-deep-2);font-style:normal} .nav.is-stuck .nav__word{text-shadow:none} .nav.is-stuck .nav__word b{color:var(--deep)} .nav.is-stuck .nav__word i{color:var(--ink-3)} .nav__links{display:flex;gap:1.7rem} .nav__links a{ font-size:.9rem;font-weight:600;color:rgba(255,255,255,.86); position:relative;padding:.3rem 0;transition:color .2s; } .nav__links a::after{ content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--tech); transition:width .3s var(--ease); } .nav__links a:hover::after,.nav__links a.is-active::after{width:100%} .nav__links a:hover,.nav__links a.is-active{color:#fff} .nav.is-stuck .nav__links a{color:var(--ink-2)} .nav.is-stuck .nav__links a:hover,.nav.is-stuck .nav__links a.is-active{color:var(--deep)} .nav__cta{padding:.65rem 1.15rem;font-size:.86rem} .nav__burger{ display:none;width:44px;height:44px;border:0;background:transparent;cursor:pointer; flex-direction:column;justify-content:center;gap:5px;padding:0 8px; } .nav__burger span{height:2.5px;border-radius:2px;background:#fff;transition:.3s var(--ease)} .nav.is-stuck .nav__burger span{background:var(--deep)} .nav__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)} .nav__burger[aria-expanded="true"] span:nth-child(2){opacity:0} .nav__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)} /* ══════════ HERO ══════════ */ .hero{ position:relative;isolation:isolate; min-height:min(100svh,900px); display:flex;align-items:center; padding:calc(var(--nav-h) + 3.5rem) 0 8rem; /* La primera capa es un barrido de luz diagonal que imita el acabado cepillado del aluminio; la segunda, el degradado de acero a grafito. */ background: linear-gradient(102deg,rgba(255,255,255,.075) 0%,rgba(255,255,255,0) 32%,rgba(255,255,255,.045) 58%,rgba(255,255,255,0) 84%), radial-gradient(120% 100% at 72% 0%,var(--steel) 0%,var(--deep) 46%,var(--deep-3) 100%); color:#fff;overflow:hidden; } .hero__canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-2} .hero__glow{ position:absolute;z-index:-1;inset:auto -10% -30% auto; width:60vw;height:60vw;max-width:760px;max-height:760px;right:-8%;bottom:-22%; background:radial-gradient(circle,rgba(18,165,238,.30) 0%,rgba(18,165,238,0) 68%); pointer-events:none; } .hero__inner{ position:relative; display:grid; grid-template-columns:1.3fr .7fr; column-gap:clamp(1.5rem,3vw,3.5rem); align-items:center; } /* min-width:0 evita que el titular (con palabras en nowrap) imponga su min-content y le robe ancho a la columna de la foto. */ .hero__copy,.hero__visual{min-width:0} .hero__copy{grid-column:1} .hero__visual{grid-column:2} .hero__eyebrow{ display:inline-flex;align-items:center;gap:.6rem; font-size:.8rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase; color:var(--on-deep);background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14); padding:.45rem 1rem;border-radius:999px;margin-bottom:1.6rem; backdrop-filter:blur(6px); } .hero__eyebrow .dot{ width:8px;height:8px;border-radius:50%;background:var(--tech); box-shadow:0 0 0 4px rgba(18,165,238,.25);animation:blink 2.4s ease-in-out infinite; } @keyframes blink{0%,100%{opacity:1}50%{opacity:.35}} .hero__title{max-width:16ch;text-shadow:0 8px 40px rgba(0,0,0,.35)} .hero__sub{ margin-top:1.5rem;max-width:56ch;font-size:clamp(1rem,1.9vw,1.22rem); font-weight:600;color:var(--on-deep); } .hero__sub span{display:inline-block;margin-top:.4rem;font-weight:400;color:var(--on-deep-2);font-size:.96em} .hero__actions{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2.2rem} /* ─── Split flotante del hero ─── */ .hero__visual{position:relative;isolation:isolate} .hero__halo{ position:absolute;z-index:-1;inset:-18% -12% -22% -12%; background:radial-gradient(circle at 55% 45%,rgba(18,165,238,.42) 0%,rgba(18,165,238,0) 66%); pointer-events:none; } .hero__split{ position:relative; background:linear-gradient(152deg,#FFFFFF 0%,#F6F8FB 52%,#E7EBF1 100%); border:1px solid rgba(255,255,255,.55); border-radius:28px; padding:clamp(.9rem,2vw,1.5rem); box-shadow:0 34px 74px rgba(var(--sh-rgb),.42),0 0 0 1px rgba(18,165,238,.16); transform:rotate(-2.2deg); transition:transform .6s var(--ease),box-shadow .6s var(--ease); animation:float 7s ease-in-out infinite; } .hero__split img{width:100%;height:auto;border-radius:16px} .hero__visual:hover .hero__split{transform:rotate(-1deg) scale(1.025);box-shadow:0 40px 88px rgba(var(--sh-rgb),.5),0 0 0 1px rgba(18,165,238,.4)} @keyframes float{0%,100%{translate:0 0}50%{translate:0 -12px}} /* Líneas de flujo de aire saliendo del equipo */ .hero__flow{ position:absolute;left:8%;right:8%;bottom:-6%;width:84%;height:auto; fill:none;stroke:var(--tech);stroke-width:5;stroke-linecap:round;opacity:.9; filter:drop-shadow(0 0 10px rgba(18,165,238,.55)); } .hero__flow path{ stroke-dasharray:200;stroke-dashoffset:200; animation:flow 3.4s var(--ease) infinite; } .hero__flow path:nth-child(2){animation-delay:.45s} .hero__flow path:nth-child(3){animation-delay:.9s} @keyframes flow{ 0%{stroke-dashoffset:200;opacity:0} 25%{opacity:1} 70%{stroke-dashoffset:-200;opacity:0} 100%{stroke-dashoffset:-200;opacity:0} } .hero__chip{ position:absolute;left:-14%;bottom:-7%;z-index:2; display:flex;flex-direction:column; background:rgba(var(--sh-rgb),.86);border:1px solid rgba(18,165,238,.5); backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); padding:.7rem 1.1rem;border-radius:14px; box-shadow:0 14px 34px rgba(0,0,0,.34); } .hero__chip b{ font-family:var(--f-display);font-weight:900;font-size:.92rem; letter-spacing:.08em;text-transform:uppercase;color:var(--tech-2);transform:skewX(-6deg); } .hero__chip i{font-style:normal;font-size:.72rem;color:var(--on-deep);margin-top:.15rem} .why{ grid-column:1 / -1; display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:clamp(2.5rem,5vw,3.8rem); } .why__card{ background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.12); border-radius:var(--r);padding:1.3rem 1.2rem; backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .3s,background .3s; } .why__card:hover{ transform:translateY(-6px) scale(1.03); border-color:rgba(18,165,238,.55); background:rgba(18,165,238,.10); box-shadow:0 18px 44px rgba(18,165,238,.22); } .why__ico{ width:26px;height:26px;color:var(--tech);margin-bottom:.7rem; padding:4px;border-radius:8px;background:rgba(18,165,238,.15);box-sizing:content-box; } .why__card h3{font-size:.98rem;font-weight:800;letter-spacing:.01em;margin-bottom:.35rem} .why__card p{font-size:.85rem;line-height:1.55;color:var(--on-deep-2)} /* ─── Olas de transición entre secciones ─── */ .wave{position:absolute;left:0;width:100%;line-height:0;pointer-events:none;z-index:1} .wave svg{width:100%;height:clamp(48px,7vw,110px)} .wave--down{bottom:-1px} .wave--down svg path{fill:var(--white)} .wave--up{top:-1px;transform:scaleY(1)} .wave--up svg path{fill:var(--soft)} .wave--white svg path{fill:var(--white)} #equipos .wave--up svg path{fill:var(--soft)} #mision .wave--up svg path{fill:var(--soft)} #equipos .wave--down svg path{fill:var(--white)} #mision .wave--down svg path{fill:var(--white)} /* ══════════ SECCIONES ══════════ */ .section{position:relative;padding:clamp(4.5rem,9vw,7.5rem) 0} .section--light{background:var(--white)} .section--soft{background:var(--soft)} .section--deep{ background: linear-gradient(102deg,rgba(255,255,255,.06) 0%,rgba(255,255,255,0) 30%,rgba(255,255,255,.038) 56%,rgba(255,255,255,0) 82%), linear-gradient(165deg,var(--steel) 0%,var(--deep) 44%,var(--deep-3) 100%); color:#fff;padding:clamp(6.5rem,12vw,10rem) 0; } .section__head{text-align:center;max-width:820px;margin:0 auto clamp(2.5rem,5vw,4rem)} .section__head .display{transform:skewX(-6deg);display:inline-block;margin-bottom:1rem} .section--deep .section__head .display{color:#fff} /* ══════════ HISTORIA ══════════ */ .historia{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4.5rem);align-items:center} .historia__text .display{margin-bottom:1.4rem;color:var(--deep)} .historia__text p+p{margin-top:1rem;color:var(--ink-2)} .historia__text .btn{margin-top:2rem} .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2.2rem;padding-top:1.8rem;border-top:1px solid var(--line)} .stats b{ display:block;font-family:var(--f-display);font-size:clamp(1.9rem,4vw,2.6rem); font-weight:900;color:var(--tech);line-height:1;transform:skewX(-6deg);transform-origin:left; } .stats span{display:block;margin-top:.5rem;font-size:.78rem;line-height:1.4;color:var(--ink-3);font-weight:600} .historia__media{position:relative;min-height:420px} .tilt{ position:absolute;overflow:hidden;border-radius:var(--r-lg); box-shadow:var(--sh-lg);border:5px solid #fff; transition:transform .5s var(--ease),box-shadow .5s var(--ease); } .tilt img{width:100%;height:100%;object-fit:cover} .historia__media .tilt:first-child{ inset:0 18% 12% 0;transform:rotate(-2.5deg);z-index:1; } .historia__media .tilt--sm{ width:52%;height:52%;inset:auto 0 0 auto;transform:rotate(3deg);z-index:2; } .historia__media:hover .tilt:first-child{transform:rotate(-1.5deg) scale(1.02)} .historia__media:hover .tilt--sm{transform:rotate(1.5deg) scale(1.04)} .badge-float{ position:absolute;left:-6px;bottom:6%;z-index:3; background:var(--tech);color:#fff;font-size:.76rem;line-height:1.35;font-weight:600; padding:.75rem 1.1rem;border-radius:var(--r-sm); box-shadow:var(--sh-tech); } .badge-float b{font-family:var(--f-display);font-weight:900;letter-spacing:.03em;text-transform:uppercase;font-size:.86rem} /* ══════════ SERVICIOS ══════════ */ .grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem} .svc{ background:#fff;border:1px solid var(--line);border-radius:var(--r-lg); padding:2rem 1.6rem 1.5rem;display:flex;flex-direction:column; position:relative;overflow:hidden; transition:transform .38s var(--ease),box-shadow .38s var(--ease),border-color .3s; } .svc::before{ content:"";position:absolute;inset:0 0 auto;height:4px; background:linear-gradient(90deg,var(--tech),var(--deep)); transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease); } .svc:hover{transform:translateY(-8px) scale(1.02);box-shadow:0 26px 56px rgba(18,165,238,.20);border-color:rgba(18,165,238,.4)} .svc:hover::before{transform:scaleX(1)} .svc__ico{ width:88px;height:88px;border-radius:22px;margin-bottom:1.3rem; background:linear-gradient(150deg,var(--soft-2),#fff); border:1px solid var(--line); display:grid;place-items:center; transition:transform .45s var(--ease); } .svc__ico svg{width:62px;height:62px} .svc:hover .svc__ico{transform:translateY(-2px) rotate(-4deg) scale(1.06)} .svc h3{font-family:var(--f-display);font-size:1.22rem;font-weight:900;letter-spacing:.03em;text-transform:uppercase;color:var(--deep);transform:skewX(-6deg);transform-origin:left;margin-bottom:.6rem} .svc p{font-size:.92rem;color:var(--ink-2);flex:1} .svc__cta{ display:inline-flex;align-items:center;gap:.45rem;margin-top:1.4rem;cursor:pointer; font-size:.85rem;font-weight:700;color:var(--tech-ink); padding-top:1rem;border-top:1px solid var(--line); } .svc__cta svg{width:1.05em;height:1.05em;transition:transform .3s var(--ease)} .svc__cta:hover{color:var(--tech)} .svc__cta:hover svg{transform:translateX(5px)} /* ══════════ EQUIPOS ══════════ */ .grid-4--equip{position:relative;z-index:2} .eq{ background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13); border-radius:var(--r-lg);padding:1.2rem 1.2rem 1.4rem; backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); display:flex;flex-direction:column; transition:transform .38s var(--ease),box-shadow .38s var(--ease),border-color .3s,background .3s; } .eq:hover{ transform:translateY(-8px) scale(1.03); border-color:rgba(18,165,238,.6);background:rgba(18,165,238,.10); box-shadow:0 26px 56px rgba(18,165,238,.28); } /* Las 4 fotos vienen recortadas y centradas sobre un lienzo 4:3 idéntico, así que encajan exactamente en la caja y quedan alineadas entre tarjetas. */ .eq__img{ background:#fff;border-radius:var(--r);overflow:hidden; aspect-ratio:4/3;display:grid;place-items:center;padding:.35rem;margin-bottom:1.1rem; } .eq__img img{width:100%;height:100%;object-fit:contain;object-position:center;transition:transform .5s var(--ease)} .eq:hover .eq__img img{transform:scale(1.07)} .eq h3{font-family:var(--f-display);font-size:1.05rem;font-weight:900;letter-spacing:.04em;text-transform:uppercase;transform:skewX(-6deg);transform-origin:left;margin-bottom:.5rem} .eq p{font-size:.86rem;color:var(--on-deep-2);flex:1} .eq__cta{ display:inline-flex;align-items:center;gap:.4rem;margin-top:1.1rem;cursor:pointer; font-size:.82rem;font-weight:700;color:var(--tech-2); } .eq__cta svg{width:1em;height:1em;transition:transform .3s var(--ease)} .eq__cta:hover svg{transform:translateX(5px)} .eq__note{ text-align:center;margin-top:2.5rem;font-size:.92rem;color:var(--on-deep-3);position:relative;z-index:2; } /* ══════════ MARQUEE DE MARCAS ══════════ */ .marcas{background:var(--white);padding:clamp(2.5rem,5vw,4rem) 0 clamp(3rem,6vw,4.5rem)} .marcas__title{ text-align:center;font-size:.8rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase; color:var(--ink-3);margin-bottom:2rem; } .marquee{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); } .marquee__track{display:flex;width:max-content;gap:1.25rem;animation:slide var(--dur,55s) linear infinite} .marquee:hover .marquee__track{animation-duration:calc(var(--dur,55s) * 2.6)} @keyframes slide{from{transform:translateX(0)}to{transform:translateX(calc(-50% - .625rem))}} .marquee__item{ flex:none;width:176px;height:92px; background:#fff;border:1px solid var(--line);border-radius:var(--r); overflow:hidden;padding:.55rem; display:flex;align-items:center;justify-content:center; transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s; } .marquee__item:hover{transform:scale(1.06);border-color:rgba(18,165,238,.5);box-shadow:0 12px 28px rgba(18,165,238,.18)} /* Todos los logos vienen ya recortados y centrados sobre un lienzo 440x200, así que basta con contenerlos: quedan ópticamente alineados entre sí. */ .marquee__item img{ width:100%;height:100%; object-fit:contain;object-position:center; border-radius:8px; } /* ══════════ CARRUSEL 3D ══════════ */ /* overflow:hidden es necesario: las caras giradas del cilindro se proyectan más allá del ancho del contenedor y en móvil generaban scroll horizontal. Se recorta aquí y no en .carousel3d__stage para no aplanar el preserve-3d. */ .carousel3d{position:relative;margin:0 auto;user-select:none;overflow:hidden} .carousel3d__stage{ height:clamp(270px,34vw,390px); display:flex;align-items:center;justify-content:center; perspective:950px;perspective-origin:50% 50%; cursor:grab;touch-action:pan-y; } .carousel3d__stage.is-grabbing{cursor:grabbing} .carousel3d__ring{ position:relative;flex:none;width:100%;height:100%; transform-style:preserve-3d; will-change:transform; } .carousel3d__face{ position:absolute;top:50%;left:50%; width:var(--face,180px); aspect-ratio:1; margin:calc(var(--face,180px) / -2) 0 0 calc(var(--face,180px) / -2); border-radius:var(--r);overflow:hidden; background:var(--deep); box-shadow:0 18px 40px rgba(var(--sh-rgb),.28); border:3px solid #fff; cursor:pointer; transition:box-shadow .3s var(--ease); backface-visibility:hidden; } .carousel3d__face img{width:100%;height:100%;object-fit:cover;pointer-events:none} .carousel3d__face:hover{box-shadow:0 22px 52px rgba(18,165,238,.42);border-color:var(--tech-2)} .carousel3d__hint{ text-align:center;margin-top:1rem;font-size:.78rem;letter-spacing:.18em; text-transform:uppercase;color:var(--ink-3);font-weight:700; } .carousel3d__hint span{animation:hint 3s ease-in-out infinite} @keyframes hint{0%,100%{opacity:.45}50%{opacity:1}} .gal-actions{display:flex;justify-content:center;margin-top:2.5rem} /* ══════════ LIGHTBOX ══════════ */ .lightbox{ position:fixed;inset:0;z-index:200; background:rgba(var(--sh-rgb),.94);backdrop-filter:blur(8px); display:grid;place-items:center;padding:clamp(1rem,5vw,3rem); animation:fadeIn .3s var(--ease); } .lightbox[hidden]{display:none} @keyframes fadeIn{from{opacity:0}to{opacity:1}} .lightbox img{ max-width:100%;max-height:80vh;border-radius:var(--r); box-shadow:0 40px 90px rgba(0,0,0,.6); animation:zoomIn .4s var(--ease); } @keyframes zoomIn{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}} .lightbox__cap{ position:absolute;bottom:clamp(1rem,4vw,2.4rem);left:50%;transform:translateX(-50%); color:var(--on-deep);font-size:.9rem;font-weight:600;text-align:center; max-width:min(90%,60ch);background:rgba(0,0,0,.35);padding:.5rem 1.1rem;border-radius:999px; } .lightbox__close,.lightbox__nav{ position:absolute;border:0;cursor:pointer;color:#fff; background:rgba(255,255,255,.12);border-radius:50%; display:grid;place-items:center;transition:background .25s,transform .25s var(--ease); } .lightbox__close{top:1.2rem;right:1.2rem;width:46px;height:46px;font-size:1.1rem} .lightbox__nav{top:50%;margin-top:-28px;width:56px;height:56px;font-size:2rem;line-height:0;padding-bottom:5px} .lightbox__nav--prev{left:clamp(.5rem,2vw,1.6rem)} .lightbox__nav--next{right:clamp(.5rem,2vw,1.6rem)} .lightbox__close:hover,.lightbox__nav:hover{background:var(--tech);transform:scale(1.1)} /* ══════════ MISIÓN Y VISIÓN ══════════ */ .section--mv{padding-block:clamp(7rem,13vw,11rem)} .mv{display:grid;grid-template-columns:1fr 1fr;gap:1.75rem;position:relative;z-index:2} .mv__card{ background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.13); border-radius:var(--r-xl);padding:clamp(1.8rem,3.5vw,2.8rem); backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); position:relative;overflow:hidden; transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .3s; } .mv__card::after{ content:"";position:absolute;width:340px;height:340px;right:-140px;top:-140px;border-radius:50%; background:radial-gradient(circle,rgba(18,165,238,.28),transparent 68%);pointer-events:none; } .mv__card--alt::after{background:radial-gradient(circle,rgba(255,255,255,.16),transparent 68%)} .mv__card:hover{transform:translateY(-6px);border-color:rgba(18,165,238,.5);box-shadow:0 28px 60px rgba(18,165,238,.22)} .mv__tag{ display:inline-block;font-family:var(--f-display);font-weight:900; font-size:clamp(1.2rem,2.6vw,1.7rem);letter-spacing:.06em;text-transform:uppercase; color:var(--tech-2);transform:skewX(-6deg);margin-bottom:1.1rem; padding-bottom:.6rem;border-bottom:3px solid rgba(18,165,238,.4); } .mv__card p{color:var(--on-deep);font-size:clamp(.95rem,1.6vw,1.05rem);position:relative;z-index:1} .mv__card p+p{margin-top:.9rem} /* ══════════ COTIZACIÓN ══════════ */ .cotiza{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(2rem,5vw,4rem);align-items:start} .cotiza__aside .display{color:var(--deep);margin-bottom:1.2rem} .cotiza__aside .btn{margin-top:1.8rem} .contacto{margin-top:1.8rem} .contacto a{display:inline-flex;align-items:center;gap:.6rem;font-weight:600;color:var(--ink-2);transition:color .2s} .contacto a:hover{color:var(--tech)} .contacto svg{width:20px;height:20px;color:var(--tech)} .redes{display:flex;gap:.7rem;margin-top:1.6rem} .redes a{ width:46px;height:46px;border-radius:14px;display:grid;place-items:center; background:var(--soft);border:1px solid var(--line);color:var(--deep); transition:transform .3s var(--ease),background .3s,color .3s,box-shadow .3s; } .redes a:hover{transform:translateY(-4px) scale(1.06);background:var(--tech);color:#fff;box-shadow:var(--sh-tech);border-color:transparent} .redes svg{width:20px;height:20px} .redes--sm a{width:38px;height:38px;border-radius:11px;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);color:#fff} .redes--sm svg{width:17px;height:17px} /* ─── Wizard ─── */ .wizard{ background:#fff;border:1px solid var(--line);border-radius:var(--r-xl); padding:clamp(1.5rem,3.5vw,2.4rem);box-shadow:var(--sh); } .wizard__head{margin-bottom:1.8rem} .wizard__bar{height:6px;border-radius:999px;background:var(--soft-2);overflow:hidden} .wizard__bar span{ display:block;height:100%;width:16.66%;border-radius:999px; background:linear-gradient(90deg,var(--tech),var(--deep)); transition:width .5s var(--ease); } .wizard__count{margin-top:.7rem;font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)} .wizard__count b{color:var(--tech)} .wizard__steps{position:relative;min-height:280px} .step{ position:absolute;inset:0;opacity:0;visibility:hidden; transform:translateY(14px);pointer-events:none; transition:opacity .38s var(--ease),transform .38s var(--ease),visibility .38s; } .step.is-active{opacity:1;visibility:visible;transform:none;pointer-events:auto;position:relative} .step legend{ font-family:var(--f-display);font-size:clamp(1.1rem,2.2vw,1.45rem);font-weight:900; letter-spacing:.02em;text-transform:uppercase;color:var(--deep); transform:skewX(-6deg);transform-origin:left;margin-bottom:.5rem; } .step__help{font-size:.88rem;color:var(--ink-3);margin-bottom:1.4rem} .step__err{font-size:.82rem;color:#D64545;font-weight:600;margin-top:.6rem;min-height:1.2em} .step input[type=text],.step input[type=number]{ width:100%;padding:1rem 1.2rem;border:2px solid var(--line);border-radius:var(--r); background:var(--soft);font-size:1rem;font-weight:600;transition:border-color .25s,background .25s,box-shadow .25s; } .step input[type=text]:focus,.step input[type=number]:focus{ outline:0;border-color:var(--tech);background:#fff;box-shadow:0 0 0 4px rgba(18,165,238,.16); } .step input.is-invalid{border-color:#D64545;background:#FDF3F3} .chips{display:flex;flex-wrap:wrap;gap:.6rem} .chips input{position:absolute;opacity:0;width:0;height:0} .chips span{ display:block;padding:.7rem 1.15rem;border-radius:999px;cursor:pointer; border:2px solid var(--line);background:var(--soft); font-size:.88rem;font-weight:600;color:var(--ink-2); transition:all .25s var(--ease); } .chips label:hover span{border-color:rgba(18,165,238,.5);color:var(--deep);transform:translateY(-2px)} .chips input:checked+span{ background:var(--deep);border-color:var(--deep);color:#fff; box-shadow:0 10px 24px rgba(var(--sh-rgb),.22); } .chips input:focus-visible+span{outline:3px solid var(--tech);outline-offset:3px} .chips--wide span{padding:.85rem 1.3rem} .counter{display:flex;align-items:center;gap:.9rem;max-width:260px} .counter__btn{ width:52px;height:52px;flex:none;border-radius:14px;cursor:pointer; border:2px solid var(--line);background:var(--soft); font-size:1.5rem;font-weight:700;color:var(--deep);line-height:1; transition:all .25s var(--ease); } .counter__btn:hover{background:var(--deep);border-color:var(--deep);color:#fff;transform:translateY(-2px)} .counter input{text-align:center;-moz-appearance:textfield} .counter input::-webkit-outer-spin-button,.counter input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} .resumen{ margin-top:1.6rem;padding:1.1rem 1.3rem;border-radius:var(--r); background:var(--soft);border:1px dashed var(--line); font-size:.85rem;line-height:1.85;color:var(--ink-2); } .resumen b{color:var(--deep);font-weight:700} .resumen .resumen__t{ display:block;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase; color:var(--tech-ink);font-weight:800;margin-bottom:.5rem; } .wizard__nav{display:flex;gap:.8rem;margin-top:1.8rem;padding-top:1.6rem;border-top:1px solid var(--line)} .wizard__nav .btn{flex:1} .wizard__nav .btn[hidden]{display:none} /* ══════════ FOOTER ══════════ */ .footer{ background:linear-gradient(170deg,var(--deep) 0%,var(--deep-3) 72%); color:#fff;padding:clamp(3rem,6vw,4.5rem) 0 1.5rem; } .footer__inner{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:2.5rem;align-items:start} .footer__brand{display:flex;gap:1.1rem;align-items:flex-start} .footer__mark{ width:76px;height:76px;flex:none; padding:10px;border-radius:20px;background:#fff; box-shadow:0 12px 30px rgba(0,0,0,.4); } .footer__word{font-family:var(--f-display);font-weight:900;font-size:1.55rem;letter-spacing:.07em;transform:skewX(-6deg);line-height:1} .footer__word b{color:#fff} .footer__word i{color:var(--on-deep-3);font-style:normal} .footer__tag{margin-top:.55rem;font-size:.85rem;color:var(--on-deep-3);max-width:32ch} .footer__nav{display:flex;flex-direction:column;gap:.6rem} .footer__nav a{font-size:.9rem;color:var(--on-deep);transition:color .2s,transform .2s var(--ease)} .footer__nav a:hover{color:var(--tech-2);transform:translateX(4px)} .footer__contact{display:flex;flex-direction:column;align-items:flex-start;gap:1rem} .footer__mail{font-size:.9rem;color:var(--on-deep);transition:color .2s} .footer__mail:hover{color:var(--tech-2)} .footer__legal{ text-align:center;margin-top:3rem;padding-top:1.5rem; border-top:1px solid rgba(255,255,255,.1);font-size:.8rem;color:var(--on-deep-3); } /* ══════════ FAB ══════════ */ .fab{ position:fixed;right:clamp(1rem,3vw,1.75rem);bottom:clamp(1rem,3vw,1.75rem);z-index:90; width:60px;height:60px;border-radius:50%; background:var(--wa);color:#fff;display:grid;place-items:center; box-shadow:0 14px 34px rgba(37,211,102,.45); transform:translateY(20px) scale(.8);opacity:0;pointer-events:none; transition:transform .4s var(--ease),opacity .4s var(--ease),background .25s; } .fab.is-on{transform:none;opacity:1;pointer-events:auto} .fab:hover{background:var(--wa-dark);transform:scale(1.1)} .fab svg{width:30px;height:30px} .fab::before{ content:"";position:absolute;inset:0;border-radius:50%; box-shadow:0 0 0 0 rgba(37,211,102,.55);animation:pulse 2.6s var(--ease) infinite; } /* ══════════ ANIMACIONES DE ENTRADA ══════════ */ [data-reveal]{opacity:0;transform:translateY(12px);transition:opacity .7s var(--ease),transform .7s var(--ease)} [data-reveal].is-in{opacity:1;transform:none} .br-char{display:inline-block;opacity:0;filter:blur(12px);transform:translateY(10px);will-change:opacity,filter,transform} .br-word{display:inline-block;white-space:nowrap} [data-blur-reveal].is-in .br-char{animation:brIn .6s var(--ease) forwards;animation-delay:var(--d,0ms)} @keyframes brIn{to{opacity:1;filter:blur(0);transform:none}} /* ══════════ RESPONSIVE ══════════ */ @media (max-width:1080px){ .why{grid-template-columns:repeat(2,1fr)} .grid-4{grid-template-columns:repeat(2,1fr)} .footer__inner{grid-template-columns:1fr 1fr} .footer__brand{grid-column:1 / -1} .hero__chip{left:-10%;padding:.55rem .85rem} .hero__chip b{font-size:.8rem} .hero__chip i{font-size:.66rem} } @media (max-width:900px){ .nav__links{ position:fixed;inset:var(--nav-h) 0 auto;flex-direction:column;gap:0; background:rgba(255,255,255,.98);backdrop-filter:blur(16px); padding:.5rem 1.25rem 1.5rem;box-shadow:var(--sh); transform:translateY(-140%);transition:transform .4s var(--ease); max-height:calc(100svh - var(--nav-h));overflow-y:auto; } .nav__links.is-open{transform:none} .nav__links a,.nav.is-stuck .nav__links a{ color:var(--deep);font-size:1.02rem;font-weight:700; padding:1rem .25rem;border-bottom:1px solid var(--line); } .nav__links a::after{display:none} .nav__burger{display:flex} .nav__mark{width:50px;height:50px;padding:6px;border-radius:14px} .nav__word{font-size:1.18rem} .nav__cta span{display:none} .nav__cta{width:44px;height:44px;padding:0;border-radius:50%} .nav__cta svg{width:20px;height:20px} /* Hero apilado: texto → split → tarjetas de "por qué elegirnos" */ .hero__inner{grid-template-columns:1fr;row-gap:2.6rem} .hero__copy,.hero__visual{grid-column:1} .hero__visual{width:min(100%,460px);margin-inline:auto} .hero__split{transform:rotate(-1.6deg)} .hero__chip{left:auto;right:-2%;bottom:-4%} .historia{grid-template-columns:1fr} .historia__media{min-height:min(78vw,440px);order:-1;margin-bottom:1rem} .mv{grid-template-columns:1fr} .cotiza{grid-template-columns:1fr} } @media (max-width:680px){ .container{width:calc(100% - 2rem)} .display{transform:skewX(-4deg);letter-spacing:0} .nav__mark{width:46px;height:46px;padding:5px;border-radius:13px} .nav__word{font-size:1.05rem;letter-spacing:.05em} .nav__brand{gap:.55rem} .footer__mark{width:62px;height:62px;padding:8px;border-radius:17px} .footer__word{font-size:1.35rem} .hero{padding-bottom:6.5rem;min-height:auto} .hero__title{max-width:none} .hero__actions .btn{width:100%} .why{grid-template-columns:1fr;gap:.75rem} .why__card{display:grid;grid-template-columns:auto 1fr;gap:0 .9rem;align-items:center;padding:1rem} .why__ico{margin:0;grid-row:span 2} .why__card h3{align-self:end} .why__card p{align-self:start;font-size:.8rem} .grid-4{grid-template-columns:1fr} .stats{grid-template-columns:1fr;gap:1.2rem;text-align:left} .stats li{display:grid;grid-template-columns:auto 1fr;gap:.9rem;align-items:center} .stats span{margin:0} .footer__inner{grid-template-columns:1fr;gap:2rem} .marquee__item{width:146px;height:78px} .hero__visual{width:min(100%,340px)} .hero__split{border-radius:22px} .hero__chip{left:auto;right:0;bottom:-7%} .hero__flow{stroke-width:6} .wizard__nav{flex-direction:column-reverse} .lightbox__nav{width:44px;height:44px;font-size:1.6rem} } /* ══════════ ACCESIBILIDAD ══════════ */ @media (prefers-reduced-motion:reduce){ html:focus-within{scroll-behavior:auto} *,*::before,*::after{ animation-duration:.01ms !important;animation-iteration-count:1 !important; transition-duration:.01ms !important;scroll-behavior:auto !important; } [data-reveal]{opacity:1;transform:none} .br-char{opacity:1;filter:none;transform:none} .marquee__track{animation:none} .hero__split{animation:none} .hero__flow{display:none} } @media print{ .nav,.fab,.carousel3d,.marquee,.wizard__nav{display:none} .section--deep,.footer{background:#fff !important;color:#000 !important} }