/* ============================================================ LEAD THE MOOD — SHELL DEL SITE Tokens, g-flow core, header, footer, hero de media página y componentes compartidos. El diseño propio de cada apartado vive en pages.css. ============================================================ */ /* ------------------------------------------------ g-flow core */ @property --ang { syntax: ''; initial-value: 45deg; inherits: true; } @property --cA { syntax: ''; initial-value: #002bff; inherits: true; } @property --cB { syntax: ''; initial-value: #bf0fff; inherits: true; } @keyframes pair-shift { 0% { --cA:#002bff; --cB:#bf0fff; } 25% { --cA:#ff3b30; --cB:#bf0fff; } 50% { --cA:#00e632; --cB:#0044ff; } 75% { --cA:#0066ff; --cB:#ff3b30; } 100% { --cA:#002bff; --cB:#bf0fff; } } @keyframes angle-rotate { to { --ang: 405deg; } } /* ------------------------------------------------ tokens */ body{ --lm-bg:#faf8ff; --lm-ink:#191338; --lm-dim:rgba(25,19,56,.58); --lm-line:rgba(25,19,56,.12); --lm-card:#fff; --lm-deep:#171236; --lm-font:'Poppins',sans-serif; --lm-ease:cubic-bezier(.22,1,.36,1); --lm-pad:5vw; --ang:45deg; --cA:#002bff; --cB:#bf0fff; animation:pair-shift 16s linear infinite, angle-rotate 28s linear infinite; } /* scroll-behavior:smooth eliminado a propósito: entra en conflicto con Lenis (js/script.js crea `new Lenis({autoRaf:true})`) — cuando ambos intentan animar el scroll nativo a la vez, se bloquean entre sí y la página deja de responder al scroll. Lenis ya gestiona el suavizado por su cuenta. */ /* overflow-x:hidden explícito también aquí (no solo en body): si solo el body lo declara, el navegador convierte a en el elemento de scroll real (document.scrollingElement) en vez de . Lenis mueve el scroll de , así que con esa combinación sus llamadas no hacían nada — el scroll se quedaba completamente bloqueado en toda la web. */ html{ scroll-behavior:auto; overflow-x:hidden; } body{ background:var(--lm-bg); color:var(--lm-ink); font-family:var(--lm-font); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; margin:0; } body ::selection{ background:var(--cB); color:#fff; } a{ color:inherit; text-decoration:none; } img{ max-width:100%; display:block; } /* utilidad: gradiente vivo */ .g-fill{ background-image:linear-gradient(var(--ang),var(--cA),var(--cB)); background-size:200% 200%; } .g-text{ background-image:linear-gradient(var(--ang),var(--cA),var(--cB)); background-size:200% 200%; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; } /* ------------------------------------------------ tipografía base */ .lh1{ font-size:clamp(40px,6vw,96px); font-weight:700; line-height:1.03; letter-spacing:-.035em; margin:0; } .lh2{ font-size:clamp(30px,4.2vw,62px); font-weight:700; line-height:1.06; letter-spacing:-.03em; margin:0; } .lh3{ font-size:clamp(22px,2.4vw,34px); font-weight:600; line-height:1.15; letter-spacing:-.02em; margin:0; } .lh4{ font-size:clamp(18px,1.5vw,22px); font-weight:600; line-height:1.3; letter-spacing:-.01em; margin:0; } .lkicker{ display:inline-flex; align-items:center; gap:9px; font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; margin:0 0 18px; } .llead{ font-size:clamp(16px,1.3vw,19px); font-weight:400; line-height:1.7; color:var(--lm-dim); } /* ------------------------------------------------ botones */ .lbtn{ display:inline-flex; align-items:center; justify-content:center; padding:16px 32px; border-radius:100px; font-size:15px; font-weight:600; line-height:1; letter-spacing:.01em; transition:transform .35s var(--lm-ease), box-shadow .35s var(--lm-ease), background .3s, color .3s, border-color .3s; will-change:transform; cursor:pointer; border:none; } .lbtn-grad{ color:#fff; background-image:linear-gradient(var(--ang),var(--cA),var(--cB)); background-size:200% 200%; box-shadow:0 14px 34px -12px var(--cB); } .lbtn-grad:hover{ box-shadow:0 20px 44px -10px var(--cB); } .lbtn-ink{ background:var(--lm-ink); color:#fff; } .lbtn-ink:hover{ background:#0d0a24; } .lbtn-line{ border:1.5px solid rgba(25,19,56,.35); color:var(--lm-ink); background:transparent; } .lbtn-line:hover{ border-color:var(--lm-ink); } .lbtn-white{ background:#fff; color:var(--lm-ink); box-shadow:0 18px 44px -14px rgba(10,5,40,.5); } .lbtn-white:hover{ box-shadow:0 24px 54px -12px rgba(10,5,40,.62); } .lbtn-glass{ color:#fff; border:1.5px solid rgba(255,255,255,.55); background:rgba(255,255,255,.12); backdrop-filter:blur(8px); } .lbtn-glass:hover{ border-color:#fff; background:rgba(255,255,255,.2); } /* ============================================================ HEADER ============================================================ */ body{ --headerheight:88px; } .cheader{ position:fixed; top:0; left:0; width:100%; z-index:600; background:transparent; box-shadow:none; transition:background .4s, box-shadow .4s; } .cheader:not(.is-scrolled){ border-bottom:0; } .cheader.is-scrolled{ background:rgba(250,248,255,.82); backdrop-filter:blur(14px); box-shadow:0 1px 0 var(--lm-line); } .cheaderfix{ display:none; } .ctopbar{ display:none; } .cheaderinner{ height:88px; padding-left:2vw; padding-right:2vw; } .iusercomments{ display:none !important; } .cheaderlogo a{ color:#fff; transition:color .4s, opacity .3s; } .cheaderlogo a:hover{ opacity:.82; } .cheaderlogo svg{ height:54px; width:auto; } .cheader.is-scrolled .cheaderlogo a{ color:var(--lm-ink); } .cheader .cmenu{ display:flex; align-items:center; gap:2px; margin:0; padding:0; list-style:none; } .cheader .cmenu li a{ display:inline-block; color:#fff; font-family:var(--lm-font); font-size:13.5px; font-weight:500; line-height:1; letter-spacing:.015em; padding:11px 16px; border-radius:100px; opacity:.86; transition:opacity .25s, background .25s, color .4s, border-color .4s; } .cheader .cmenu li a:hover{ opacity:1; background:rgba(255,255,255,.16); } .cheader.is-scrolled .cmenu li a{ color:var(--lm-ink); } .cheader.is-scrolled .cmenu li a:hover{ background:rgba(25,19,56,.07); } .cheader .cmenu li.last-menu-item a, .cheader .cmenu li:last-child a{ opacity:1; border:1.5px solid rgba(255,255,255,.6); margin-left:10px; } .cheader.is-scrolled .cmenu li:last-child a{ border-color:var(--lm-ink); } .cheader .cmenu li:last-child a:hover{ background-image:linear-gradient(var(--ang),var(--cA),var(--cB)); background-size:200% 200%; border-color:transparent; color:#fff; } .cburger .cbar{ background:#fff; transition:background .4s; } .cheader.is-scrolled .cburger .cbar{ background:var(--lm-ink); } /* selector de idioma */ .llangs{ position:absolute; right:0; top:50%; transform:translateY(-50%); display:flex; align-items:center; gap:2px; } .cheader .cmenuwrap{ right:112px; } .lang{ font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:#fff; opacity:.6; padding:6px 8px; border-radius:100px; transition:opacity .25s, color .4s, background .25s; } .lang:hover{ opacity:1; background:rgba(255,255,255,.14); } .lang.is-current{ opacity:1; } .cheader.is-scrolled .lang{ color:var(--lm-ink); } .cheader.is-scrolled .lang:hover{ background:rgba(25,19,56,.07); } /* menú responsive */ .cmenuwrapresponsive{ position:fixed; inset:0; z-index:590; background:var(--lm-deep); display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .4s var(--lm-ease); } .menuopennav .cmenuwrapresponsive{ opacity:1; pointer-events:auto; } .cmenuwrapresponsive .cmenu{ display:block; text-align:center; } .cmenuwrapresponsive .cmenu li a{ display:block; color:#fff; font-size:26px; font-weight:600; padding:14px 0; border:none !important; margin:0 !important; } @media (max-width:900px){ .cheader .cmenuwrap{ display:none; } .cburger{ display:block !important; } .cheaderlogo svg{ height:42px; } .llangs{ right:52px; } } @media (min-width:901px){ .cmenuwrapresponsive{ display:none; } } /* ============================================================ HERO DE MEDIA PÁGINA (todas las páginas internas) ============================================================ */ /* media página: alto controlado por vh, el contenido se ajusta dentro. box-sizing explícito: sin él, min-height se suma al padding y el hero acaba ocupando tres cuartos de pantalla. */ .lhero2{ position:relative; overflow:hidden; box-sizing:border-box; min-height:clamp(430px,56vh,600px); display:flex; align-items:flex-end; padding:calc(var(--headerheight) + 34px) var(--lm-pad) 52px; border-radius:0 0 34px 34px; } .lhero2 *{ box-sizing:border-box; } .lhero2-gl{ position:absolute; inset:0; width:100%; height:100%; display:block; z-index:0; } .no-webgl .lhero2-gl{ display:none; } .no-webgl .lhero2{ background-image:linear-gradient(var(--ang),var(--cA),var(--cB)); background-size:200% 200%; } .lhero2-grain{ position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(to top, rgba(12,6,40,.42), transparent 46%); } .lhero2-inner{ position:relative; z-index:2; max-width:1320px; width:100%; color:#fff; } /* dos columnas: titular a la izquierda, apoyo a la derecha. Mantiene el hero en media página sin recortar contenido. */ .lhero2-cols{ display:grid; grid-template-columns:1.15fr .85fr; gap:5vw; align-items:end; } .lhero2-side{ padding-bottom:6px; } @media (max-width:900px){ .lhero2-cols{ grid-template-columns:1fr; gap:22px; } .lhero2-side{ padding-bottom:0; } } .lhero2-kicker{ display:inline-flex; align-items:center; gap:9px; font-size:11.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:#fff; background:rgba(255,255,255,.16); border:1.5px solid rgba(255,255,255,.4); border-radius:100px; padding:8px 18px; margin:0 0 16px; backdrop-filter:blur(8px); } .lhero2-title{ margin:0; font-size:clamp(34px,5.2vw,76px); font-weight:700; line-height:1.03; letter-spacing:-.035em; color:#fff; text-shadow:0 2px 30px rgba(10,5,40,.2); max-width:17ch; } .lhero2-title em{ font-style:normal; opacity:.7; } .lhero2-text{ margin:0; max-width:560px; font-size:clamp(15.5px,1.2vw,18px); font-weight:400; line-height:1.65; color:rgba(255,255,255,.92); text-shadow:0 1px 16px rgba(10,5,40,.22); } .lhero2-meta{ list-style:none; margin:18px 0 0; padding:0; display:flex; gap:8px; flex-wrap:wrap; } .lhero2-meta li{ font-size:12px; font-weight:600; color:#fff; border:1.5px solid rgba(255,255,255,.42); border-radius:100px; padding:8px 15px; background:rgba(255,255,255,.1); backdrop-filter:blur(6px); } .lhero2-ctas{ margin-top:24px; display:flex; gap:12px; flex-wrap:wrap; } .lhero2-ctas .lbtn{ padding:14px 28px; font-size:14.5px; } /* variante compacta */ .lhero2.is-short{ min-height:clamp(340px,46vh,480px); } /* migas */ .lcrumbs ol{ list-style:none; margin:0 0 16px; padding:0; display:flex; gap:8px; flex-wrap:wrap; } .lcrumbs li{ font-size:12px; color:rgba(255,255,255,.72); } .lcrumbs li + li::before{ content:"/"; margin-right:8px; opacity:.5; } .lcrumbs a:hover{ color:#fff; text-decoration:underline; } /* ============================================================ BLOQUE CTA FINAL ============================================================ */ .lcta{ padding:0 var(--lm-pad) 12vh; } .lcta-panel{ position:relative; border-radius:30px; overflow:hidden; padding:10vh 6vw; text-align:center; box-shadow:0 40px 90px -34px color-mix(in srgb, var(--cB) 55%, transparent); } .lcta-gl{ position:absolute; inset:0; width:100%; height:100%; display:block; z-index:0; } .no-webgl .lcta-gl{ display:none; } .no-webgl .lcta-panel{ background-image:linear-gradient(var(--ang),var(--cA),var(--cB)); background-size:200% 200%; } .lcta-body{ position:relative; z-index:1; } .lcta-title{ margin:0; font-size:clamp(30px,4.2vw,60px); font-weight:700; letter-spacing:-.03em; line-height:1.07; color:#fff; } .lcta-title em{ font-style:normal; text-decoration:underline; text-decoration-thickness:4px; text-underline-offset:8px; } .lcta-text{ max-width:620px; margin:26px auto 0; font-size:16.5px; line-height:1.7; color:rgba(255,255,255,.95); } .lcta-ctas{ margin-top:38px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap; } /* ============================================================ CASOS (rejilla compartida) ============================================================ */ .lcasos-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; } .lcaso{ display:flex; flex-direction:column; border-radius:22px; overflow:hidden; background:var(--lm-card); border:1px solid var(--lm-line); box-shadow:0 14px 40px -24px rgba(25,19,56,.35); transition:transform .5s var(--lm-ease), box-shadow .5s; } .lcaso:hover{ transform:translateY(-6px); box-shadow:0 28px 64px -24px color-mix(in srgb, var(--cB) 42%, rgba(25,19,56,.3)); } .lcaso-media{ display:block; overflow:hidden; aspect-ratio:4/3; background:#efeaff; } .lcaso-media img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--lm-ease); } .lcaso:hover .lcaso-media img{ transform:scale(1.06); } .lcaso-body{ display:flex; flex-direction:column; gap:9px; padding:26px 24px 28px; } .lcaso-sec{ font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--cB); } .lcaso-name{ font-size:22px; font-weight:600; letter-spacing:-.02em; } .lcaso-what{ font-size:14px; line-height:1.6; color:var(--lm-dim); } /* ============================================================ FAQ compartida ============================================================ */ .lfaq2{ padding:10vh var(--lm-pad); max-width:1180px; margin:0 auto; } .lfaq2-head{ margin-bottom:5vh; } .lfaq2-item{ border-bottom:1px solid var(--lm-line); } .lfaq2-item summary{ list-style:none; cursor:pointer; position:relative; padding:26px 60px 26px 0; font-size:clamp(17px,1.7vw,21px); font-weight:600; } .lfaq2-item summary::-webkit-details-marker{ display:none; } .lfaq2-item summary::after{ content:"+"; position:absolute; right:8px; top:50%; transform:translateY(-50%); font-size:26px; font-weight:300; color:var(--cB); transition:transform .35s var(--lm-ease); } .lfaq2-item[open] summary::after{ transform:translateY(-50%) rotate(45deg); } .lfaq2-a p{ margin:0 0 26px; max-width:820px; font-size:15.5px; line-height:1.75; color:var(--lm-dim); } /* ============================================================ FOOTER ============================================================ */ .lfooter{ position:relative; padding:12vh var(--lm-pad) 40px; background:var(--lm-deep); color:#fff; border-radius:34px 34px 0 0; } .lfooter-kicker{ font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.55); margin:0 0 2vh; } .lfooter-mail{ display:inline-block; font-size:clamp(28px,4.4vw,68px); font-weight:700; letter-spacing:-.03em; color:#fff; line-height:1.1; word-break:break-word; } .lfooter-mail:hover{ background-image:linear-gradient(var(--ang),var(--cA),var(--cB)); background-size:200% 200%; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } .lfooter-tel{ display:block; margin-top:1.6vh; font-size:19px; color:rgba(255,255,255,.62); } .lfooter-tel:hover{ color:#fff; } .lfooter-cols{ display:grid; grid-template-columns:repeat(4,1fr); gap:30px; margin-top:9vh; padding-top:6vh; border-top:1px solid rgba(255,255,255,.14); } .lfcol{ display:flex; flex-direction:column; gap:11px; } .lfcol-t{ font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.5); margin-bottom:5px; } .lfcol a{ font-size:14.5px; font-weight:300; color:rgba(255,255,255,.82); width:fit-content; transition:color .25s; } .lfcol a:hover{ color:#fff; } .lfcol-brand{ align-items:flex-end; text-align:right; } .lfooter-logo{ color:#fff; width:118px; } .lfooter-logo svg{ width:100%; height:auto; } .lfooter-area{ font-size:13px; font-weight:300; line-height:1.7; color:rgba(255,255,255,.55); margin:14px 0 0; } .lfooter-grupo{ font-size:12.5px; line-height:1.65; color:rgba(255,255,255,.75); margin:16px 0 0; padding-top:14px; border-top:1px solid rgba(255,255,255,.16); max-width:34ch; } .lfooter-legal{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; margin-top:7vh; padding-top:26px; border-top:1px solid rgba(255,255,255,.14); font-size:12.5px; color:rgba(255,255,255,.42); } /* el tema fija font-size en el selector `a`, así que hay que declararlo aquí o los legales salen a 18px */ .lfooter-legal a, .lfooter-legal span{ font-size:12.5px; line-height:1.5; } .lfooter-legal a{ color:rgba(255,255,255,.62); transition:color .25s; } .lfooter-legal a:hover{ color:#fff; } /* sello de grupo, a la derecha */ .lfooter-group{ margin-left:auto; display:inline-flex; align-items:center; gap:8px; } .lfooter-group a{ color:rgba(255,255,255,.78) !important; font-weight:600; letter-spacing:.04em; border-bottom:1px solid rgba(255,255,255,.3); padding-bottom:1px; } .lfooter-group a:hover{ color:#fff !important; border-bottom-color:#fff; } @media (max-width:760px){ .lfooter-group{ margin-left:0; width:100%; } } /* ============================================================ REVEALS ============================================================ */ .jqswaitem{ opacity:0; transform:translateY(28px); } .is-in .jqswaitem, .jqswaitem.is-in{ opacity:1; transform:none; transition:opacity .8s var(--lm-ease), transform .8s var(--lm-ease); } /* ============================================================ RESPONSIVE GENERAL ============================================================ */ @media (max-width:1100px){ .lcasos-grid{ grid-template-columns:1fr 1fr; } .lfooter-cols{ grid-template-columns:1fr 1fr; } } @media (max-width:760px){ body{ --lm-pad:6vw; font-size:16px; } .lcasos-grid{ grid-template-columns:1fr; } .lhero2{ min-height:auto; padding-top:calc(var(--headerheight) + 44px); padding-bottom:48px; border-radius:0 0 24px 24px; } .lhero2-title{ max-width:none; } .lfooter-cols{ grid-template-columns:1fr; } .lfcol-brand{ align-items:flex-start; text-align:left; } .lcta-panel{ padding:8vh 7vw; border-radius:24px; } }