/* ========================================================================== 1. Tokens ========================================================================== */ :root{ --marca:#5849BF; --marca-claro:#7662FF; --marca-hondo:#3E3388; --seguridad:#4EBF7F; --seguridad-txt:#368458; --redes:#F2811D; --redes-txt:#B35F15; --cloud:#418EF2; --cloud-txt:#3777CB; --consultoria:#5849BF; --consultoria-txt:#5849BF; --tinta:#0B0F1A; --tinta-2:#12182B; --tinta-3:#1C2436; --gris:#5A6478; --gris-claro:#8B94A6; --linea:#E2E6EE; --hueso:#F5F7FB; --blanco:#fff; --papel:#fff; --texto:var(--tinta); --texto-2:var(--gris); --ancho:1220px; --gutter:clamp(1.15rem, 4vw, 2.5rem); --radio:14px; --radio-g:22px; --sombra-1:0 1px 2px rgba(11,15,26,.05), 0 4px 14px rgba(11,15,26,.05); --sombra-2:0 2px 6px rgba(11,15,26,.06), 0 18px 44px rgba(11,15,26,.10); --sombra-3:0 30px 80px rgba(11,15,26,.20); --fuente:'Inter var','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI', Roboto,'Helvetica Neue',Arial,sans-serif; --mono:'SFMono-Regular',ui-monospace,Menlo,Consolas,monospace; --curva:cubic-bezier(.22,.61,.36,1); --curva-suave:cubic-bezier(.4,0,.2,1); --cabecera-alto:76px; } /* ========================================================================== 2. Base ========================================================================== */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth; scroll-padding-top:calc(var(--cabecera-alto) + 18px)} body{ margin:0;background:var(--papel);color:var(--texto); font-family:var(--fuente);font-size:17px;line-height:1.68; font-feature-settings:'kern' 1,'liga' 1,'cv11' 1; -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; overflow-x:hidden; } img,svg,video{max-width:100%;height:auto;display:block} /* Tamaño por omisión de los iconos. Sin esta regla, un que caiga fuera de un contenedor que le fije medidas (un enlace de texto, por ejemplo) se estira hasta el ancho disponible: el viewBox no impone tamaño por sí solo. */ .ico{width:1em;height:1em;flex:none;fill:currentColor} a{color:var(--marca);text-decoration:none; transition:color .18s var(--curva-suave)} a:hover{color:var(--marca-hondo)} h1,h2,h3,h4{margin:0 0 .5em;line-height:1.14;letter-spacing:-.022em; font-weight:760;color:var(--tinta);text-wrap:balance} h1{font-size:clamp(2.15rem,5.2vw,3.7rem);letter-spacing:-.032em} h2{font-size:clamp(1.72rem,3.5vw,2.7rem);letter-spacing:-.028em} h3{font-size:clamp(1.16rem,1.9vw,1.42rem)} p{margin:0 0 1.1em;text-wrap:pretty} ul,ol{padding-left:1.15em} strong{font-weight:680;color:var(--tinta)} hr{border:0;border-top:1px solid var(--linea);margin:3rem 0} ::selection{background:var(--marca);color:#fff} :focus-visible{outline:3px solid var(--marca);outline-offset:3px; border-radius:6px} .contenedor{width:100%;max-width:var(--ancho);margin-inline:auto; padding-inline:var(--gutter)} .estrecho{max-width:800px} .saltar{position:absolute;left:-9999px;top:0;background:var(--marca); color:#fff;padding:.85rem 1.3rem;z-index:1000;border-radius:0 0 10px 0} .saltar:focus{left:0;color:#fff} .oculto-visual{position:absolute!important;width:1px;height:1px; padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* ========================================================================== 3. Piezas reutilizables ========================================================================== */ .kicker{ display:inline-flex;align-items:center;gap:.55rem; font-size:.775rem;font-weight:700;letter-spacing:.13em; text-transform:uppercase;color:var(--marca);margin-bottom:1rem; } .kicker::before{content:"";width:26px;height:2px;background:currentColor; border-radius:2px} .kicker.en-oscuro{color:var(--marca-claro)} .entradilla{font-size:clamp(1.06rem,1.6vw,1.22rem);color:var(--texto-2); line-height:1.62;max-width:64ch} .seccion{padding-block:clamp(3.6rem,8vw,6.6rem)} .seccion--hueso{background:var(--hueso)} .seccion--tinta{background:var(--tinta);color:#E8ECF4} .seccion--tinta h2,.seccion--tinta h3{color:#fff} .seccion--tinta .entradilla{color:#AEB8CB} .encabezado-seccion{max-width:66ch;margin-bottom:clamp(2rem,4vw,3.2rem)} .encabezado-seccion.centrado{margin-inline:auto;text-align:center} .encabezado-seccion.centrado .kicker{justify-content:center} /* --- Botones ------------------------------------------------------------ */ .boton{ --bg:var(--marca); --fg:#fff; position:relative;display:inline-flex;align-items:center; justify-content:center;gap:.6rem; padding:.92rem 1.7rem;border:0;border-radius:100px; background:var(--bg);color:var(--fg); font:inherit;font-size:.965rem;font-weight:650;letter-spacing:-.01em; cursor:pointer;text-align:center;isolation:isolate;overflow:hidden; box-shadow:0 1px 2px rgba(11,15,26,.10), 0 8px 22px -8px rgba(88,73,191,.55); transition:transform .22s var(--curva), box-shadow .22s var(--curva), background .2s var(--curva-suave); } /* brillo que barre el botón al pasar el cursor */ .boton::after{ content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(115deg,transparent 30%, rgba(255,255,255,.30) 50%,transparent 70%); transform:translateX(-110%);transition:transform .62s var(--curva); } .boton:hover{transform:translateY(-2px); box-shadow:0 2px 4px rgba(11,15,26,.10), 0 16px 34px -10px rgba(88,73,191,.62)} .boton:hover::after{transform:translateX(110%)} .boton:active{transform:translateY(0) scale(.985)} .boton:hover{color:#fff} .boton .ico{width:18px;height:18px;flex:none; transition:transform .25s var(--curva)} .boton:hover .ico{transform:translateX(3px)} .boton--fantasma{ background:transparent;color:var(--tinta); box-shadow:inset 0 0 0 1.5px var(--linea); } .boton--fantasma:hover{color:var(--marca); box-shadow:inset 0 0 0 1.5px var(--marca);transform:translateY(-2px)} .boton--claro{background:#fff;color:var(--tinta); box-shadow:0 10px 30px -10px rgba(0,0,0,.5)} .boton--claro:hover{color:var(--marca-hondo)} .boton--borde-claro{background:rgba(255,255,255,.06);color:#fff; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35);backdrop-filter:blur(6px)} .boton--borde-claro:hover{background:rgba(255,255,255,.14);color:#fff; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.6)} .boton--grande{padding:1.06rem 2.1rem;font-size:1.02rem} .boton--bloque{width:100%} /* --- Píldoras de familia ------------------------------------------------ */ .pildora{ display:inline-flex;align-items:center;gap:.45rem; padding:.34rem .82rem;border-radius:100px; font-size:.775rem;font-weight:650;letter-spacing:.01em; background:color-mix(in srgb,var(--c) 13%,#fff); color:var(--ct);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 26%,#fff); } .pildora .punto{width:7px;height:7px;border-radius:50%;background:var(--c)} .pildora--oscuro{background:color-mix(in srgb,var(--c) 20%,transparent); color:var(--c);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 40%,transparent)} /* familia -> variables locales */ .f-seguridad{--c:var(--seguridad);--ct:var(--seguridad-txt)} .f-redes{--c:var(--redes);--ct:var(--redes-txt)} .f-cloud{--c:var(--cloud);--ct:var(--cloud-txt)} .f-consultoria{--c:var(--consultoria);--ct:var(--consultoria-txt)} /* ========================================================================== 4. Cabecera -------------------------------------------------------------------------- El panel móvil y su velo NO viven aquí dentro: están al final del body. Meterlos en una cabecera sticky con z-index los encierra en su contexto de apilamiento y el velo termina robándose los toques. ========================================================================== */ .cabecera{ position:sticky;top:0;z-index:900; background:rgba(255,255,255,.86); border-bottom:1px solid transparent; transition:background .3s var(--curva-suave), border-color .3s var(--curva-suave), box-shadow .3s var(--curva-suave); } /* backdrop-filter crea contexto de apilamiento: solo se aplica mientras no haya panel abierto (guion.js pone .sin-vidrio en ). */ html:not(.sin-vidrio) .cabecera{backdrop-filter:saturate(1.7) blur(14px); -webkit-backdrop-filter:saturate(1.7) blur(14px)} .cabecera.pegada{background:rgba(255,255,255,.94);border-bottom-color:var(--linea); box-shadow:0 6px 26px -18px rgba(11,15,26,.5)} .cabecera__fila{ display:flex;align-items:center;gap:1.4rem; height:var(--cabecera-alto); } .marca-logo{display:flex;align-items:center;gap:.7rem;flex:none; color:var(--tinta)} .marca-logo img{height:38px;width:auto} .marca-logo:hover{color:var(--tinta)} .nav{margin-left:auto;display:flex;align-items:center;gap:.15rem} .nav a,.nav button.nav__disparo{ display:inline-flex;align-items:center;gap:.34rem; padding:.55rem .74rem;border-radius:9px;border:0;background:none; font:inherit;font-size:.925rem;font-weight:560;color:var(--tinta); cursor:pointer;white-space:nowrap; transition:background .16s var(--curva-suave),color .16s var(--curva-suave); } .nav a:hover,.nav button.nav__disparo:hover,.nav [aria-expanded="true"]{ background:var(--hueso);color:var(--marca)} .nav a[aria-current="page"]{color:var(--marca);font-weight:660} .nav .chevron{width:13px;height:13px;opacity:.55; transition:transform .22s var(--curva)} .nav [aria-expanded="true"] .chevron{transform:rotate(180deg)} .cabecera__cta{margin-left:.5rem} /* --- Mega menú ---------------------------------------------------------- */ .tiene-menu{position:relative} .mega{ position:absolute;top:calc(100% + 12px);left:50%; transform:translateX(-50%) translateY(-8px) scale(.985); width:min(860px,calc(100vw - 3rem)); background:#fff;border-radius:var(--radio-g); box-shadow:var(--sombra-3);border:1px solid var(--linea); padding:1.5rem;opacity:0;visibility:hidden;pointer-events:none; transition:opacity .2s var(--curva-suave),transform .26s var(--curva), visibility .2s; display:grid;grid-template-columns:repeat(2,1fr);gap:.4rem 1.6rem; } .tiene-menu.abierto .mega{ opacity:1;visibility:visible;pointer-events:auto; transform:translateX(-50%) translateY(0) scale(1)} .mega__grupo{padding:.2rem} .mega__titulo{ display:flex;align-items:center;gap:.5rem; font-size:.735rem;font-weight:730;letter-spacing:.12em;text-transform:uppercase; color:var(--ct);margin:.3rem .7rem .5rem; } .mega__titulo::before{content:"";width:9px;height:9px;border-radius:3px; background:var(--c)} .mega a{ display:block;padding:.56rem .7rem;border-radius:10px; font-size:.9rem;font-weight:520;color:var(--texto-2);line-height:1.35; } .mega a:hover{background:color-mix(in srgb,var(--c) 9%,#fff);color:var(--ct)} .mega__pie{ grid-column:1/-1;margin-top:.5rem;padding-top:1rem; border-top:1px solid var(--linea); display:flex;flex-wrap:wrap;align-items:center;gap:.8rem; font-size:.875rem;color:var(--texto-2); } .mega__pie strong{color:var(--tinta)} .mega__pie .boton{margin-left:auto;padding:.6rem 1.2rem;font-size:.875rem} /* --- Hamburguesa -------------------------------------------------------- */ .hamburguesa{ display:none;margin-left:auto;width:44px;height:44px;flex:none; border:1px solid var(--linea);border-radius:12px;background:#fff; cursor:pointer;padding:0;place-items:center; } .hamburguesa span{display:block;width:19px;height:2px;border-radius:2px; background:var(--tinta);margin:3.5px auto; transition:transform .28s var(--curva),opacity .18s} .hamburguesa[aria-expanded="true"] span:nth-child(1){transform:translateY(5.5px) rotate(45deg)} .hamburguesa[aria-expanded="true"] span:nth-child(2){opacity:0} .hamburguesa[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)} /* El menú se colapsa a 1180px: con siete entradas más el botón, entre 1081 y 1240 la fila se desborda sin producir scroll. Medido, no visto. */ @media (max-width:1180px){ .nav,.cabecera__cta{display:none} .hamburguesa{display:grid} } /* ========================================================================== 5. Panel móvil (hermano del
, nunca hijo de .cabecera) ========================================================================== */ .velo{ position:fixed;inset:0;z-index:940; background:rgba(11,15,26,.55);backdrop-filter:blur(3px); opacity:0;visibility:hidden;transition:opacity .3s var(--curva-suave),visibility .3s; } .velo.visible{opacity:1;visibility:visible} .panel{ position:fixed;top:0;right:0;bottom:0;z-index:950; /* > .velo, siempre */ width:min(400px,88vw);background:#fff; transform:translateX(100%); transition:transform .38s var(--curva); display:flex;flex-direction:column; box-shadow:-20px 0 60px rgba(11,15,26,.22); overscroll-behavior:contain; } .panel.abierto{transform:translateX(0)} .panel__cima{display:flex;align-items:center;justify-content:space-between; padding:1.1rem var(--gutter);border-bottom:1px solid var(--linea);flex:none} .panel__cima img{height:34px;width:auto} .panel__cerrar{width:42px;height:42px;border:1px solid var(--linea); border-radius:11px;background:#fff;cursor:pointer;display:grid;place-items:center} .panel__cuerpo{flex:1;overflow-y:auto;padding:1rem var(--gutter) 2rem; -webkit-overflow-scrolling:touch} .panel__cuerpo a{display:block;padding:.72rem 0;font-size:1.02rem; font-weight:560;color:var(--tinta);border-bottom:1px solid var(--hueso)} .panel__cuerpo a:hover{color:var(--marca)} .panel__grupo{margin-top:1.35rem} .panel__grupo > p{ display:flex;align-items:center;gap:.5rem;margin:0 0 .3rem; font-size:.72rem;font-weight:730;letter-spacing:.12em;text-transform:uppercase; color:var(--ct); } .panel__grupo > p::before{content:"";width:9px;height:9px;border-radius:3px; background:var(--c)} .panel__grupo a{font-size:.945rem;font-weight:500;color:var(--texto-2)} .panel__pie{padding:1.2rem var(--gutter);border-top:1px solid var(--linea); background:var(--hueso);flex:none} .panel__pie .boton{width:100%;margin-bottom:.6rem} .panel__pie .tel{display:block;text-align:center;font-size:.9rem; color:var(--texto-2)} /* ========================================================================== 6. HÉROE — slides panorámicos 3D -------------------------------------------------------------------------- La pista reserva su propia altura (min-height real, nunca auto) porque las diapositivas son absolutas: sin esa altura el héroe colapsa a cero en móvil y queda invisible. ========================================================================== */ .heroe{ position:relative;background:var(--tinta);color:#fff;isolation:isolate; overflow:hidden; } .heroe__pista{ position:relative; min-height:clamp(560px,84svh,860px); /* ← la altura vive aquí */ perspective:1700px;perspective-origin:50% 50%; transform-style:preserve-3d; } .diapo{ position:absolute;inset:0; display:grid;align-items:center; opacity:0;visibility:hidden;pointer-events:none; transform:translate3d(0,0,-460px) rotateY(var(--giro,16deg)); transform-origin:var(--origen,left center); transition:opacity .82s var(--curva-suave), transform 1.05s var(--curva), visibility .82s; will-change:transform,opacity; } .diapo.activa{ opacity:1;visibility:visible;pointer-events:auto; transform:translate3d(0,0,0) rotateY(0deg); z-index:2; } /* la que sale se va hacia el lado contrario, no hacia el mismo */ .diapo.saliendo{ opacity:0;z-index:1; transform:translate3d(0,0,-320px) rotateY(calc(var(--giro,16deg) * -1)); transform-origin:right center; } .diapo__fondo{ position:absolute;inset:0;z-index:-2;overflow:hidden; } .diapo__fondo img{ width:100%;height:100%;object-fit:cover; transform:scale(1.14); transition:transform 8.5s linear; will-change:transform; } .diapo.activa .diapo__fondo img{transform:scale(1.0)} /* Ken Burns */ /* velo doble: uno plano para contraste y otro direccional para el color */ .diapo__velo{ position:absolute;inset:0;z-index:-1; background: linear-gradient(100deg, rgba(11,15,26,.93) 0%, rgba(11,15,26,.80) 38%, rgba(11,15,26,.42) 68%, rgba(11,15,26,.30) 100%), radial-gradient(120% 90% at 8% 50%, color-mix(in srgb,var(--c) 34%,transparent) 0%, transparent 62%); } .diapo__caja{max-width:min(790px,100%)} .diapo__kicker{ display:inline-flex;align-items:center;gap:.6rem; padding:.42rem 1rem .42rem .55rem;border-radius:100px; background:color-mix(in srgb,var(--c) 22%,transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 48%,transparent); backdrop-filter:blur(8px); font-size:.79rem;font-weight:680;letter-spacing:.075em;text-transform:uppercase; color:#fff;margin-bottom:1.5rem; } .diapo__kicker .cuadro{ width:22px;height:22px;border-radius:7px;background:var(--c); display:grid;place-items:center;flex:none; } .diapo__kicker .cuadro svg{width:13px;height:13px;fill:#fff} .diapo h1,.diapo .t{ font-size:clamp(2rem,4.85vw,3.85rem);line-height:1.07; letter-spacing:-.035em;font-weight:780;color:#fff; margin:0 0 1.2rem;white-space:pre-line; text-shadow:0 2px 30px rgba(0,0,0,.45); } .diapo__texto{ font-size:clamp(1.02rem,1.55vw,1.2rem);line-height:1.6; color:#C9D2E2;max-width:56ch;margin:0 0 2rem; } .diapo__acciones{display:flex;flex-wrap:wrap;gap:.85rem} /* Entrada escalonada del texto: cada elemento entra un poco después. */ .diapo__kicker,.diapo .t,.diapo__texto,.diapo__acciones{ opacity:0;transform:translateY(26px); transition:opacity .7s var(--curva-suave),transform .82s var(--curva); } .diapo.activa .diapo__kicker {opacity:1;transform:none;transition-delay:.18s} .diapo.activa .t {opacity:1;transform:none;transition-delay:.28s} .diapo.activa .diapo__texto {opacity:1;transform:none;transition-delay:.40s} .diapo.activa .diapo__acciones{opacity:1;transform:none;transition-delay:.52s} /* --- Controles del carrusel -------------------------------------------- */ .heroe__barra{ position:absolute;left:0;right:0;bottom:0;z-index:5; padding:0 var(--gutter) clamp(1.4rem,3vw,2.4rem); } .heroe__barra-int{ max-width:var(--ancho);margin-inline:auto; display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap; } .puntos{display:flex;gap:.55rem;flex:1;min-width:0} .punto-b{ position:relative;height:4px;flex:1;max-width:96px; border:0;padding:0;border-radius:100px;cursor:pointer; background:rgba(255,255,255,.26);overflow:hidden; transition:background .25s; } .punto-b:hover{background:rgba(255,255,255,.44)} .punto-b::after{ content:"";position:absolute;inset:0;transform-origin:left; transform:scaleX(0);background:#fff;border-radius:100px; } .punto-b[aria-selected="true"]::after{animation:avance var(--dur,7s) linear forwards} .heroe.en-pausa .punto-b[aria-selected="true"]::after{animation-play-state:paused} @keyframes avance{to{transform:scaleX(1)}} .flechas{display:flex;gap:.5rem;flex:none} .flecha{ width:46px;height:46px;border-radius:50%;flex:none;cursor:pointer; display:grid;place-items:center; background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.28); backdrop-filter:blur(8px);color:#fff; transition:background .2s,transform .2s var(--curva),border-color .2s; } .flecha:hover{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.5); transform:scale(1.07)} .flecha:active{transform:scale(.95)} .flecha svg{width:17px;height:17px;fill:currentColor} .heroe__contador{font-variant-numeric:tabular-nums;font-size:.85rem; color:rgba(255,255,255,.62);flex:none;letter-spacing:.04em} .heroe__contador b{color:#fff;font-weight:660} /* ========================================================================== 7. Cuatro pilares ========================================================================== */ .pilares{display:grid;gap:1.15rem; grid-template-columns:repeat(auto-fit,minmax(232px,1fr))} .pilar{ position:relative;padding:1.9rem 1.6rem;border-radius:var(--radio-g); background:#fff;border:1px solid var(--linea);overflow:hidden; transition:transform .34s var(--curva),box-shadow .34s var(--curva), border-color .3s; isolation:isolate; } .pilar::before{ content:"";position:absolute;inset:0 0 auto;height:4px; background:var(--c);transform:scaleX(0);transform-origin:left; transition:transform .45s var(--curva); } .pilar::after{ content:"";position:absolute;z-index:-1;inset:auto -30% -60% -30%;height:70%; background:radial-gradient(60% 100% at 50% 100%, color-mix(in srgb,var(--c) 16%,transparent),transparent 72%); opacity:0;transition:opacity .4s var(--curva-suave); } .pilar:hover{transform:translateY(-6px);box-shadow:var(--sombra-2); border-color:color-mix(in srgb,var(--c) 30%,var(--linea))} .pilar:hover::before{transform:scaleX(1)} .pilar:hover::after{opacity:1} .pilar__ico{ width:56px;height:56px;border-radius:16px;background:var(--c); display:grid;place-items:center;margin-bottom:1.25rem; box-shadow:0 10px 26px -10px color-mix(in srgb,var(--c) 90%,transparent); transition:transform .4s var(--curva); } .pilar:hover .pilar__ico{transform:translateY(-3px) rotate(-5deg) scale(1.06)} .pilar__ico svg{width:27px;height:27px;fill:#fff} .pilar h3{margin-bottom:.45rem;font-size:1.2rem} .pilar p{color:var(--texto-2);font-size:.945rem;margin-bottom:1rem} .pilar__enlaces{display:flex;flex-direction:column;gap:.1rem} .pilar__enlaces a{ display:flex;align-items:center;gap:.4rem; font-size:.9rem;font-weight:520;color:var(--texto-2);padding:.24rem 0} .pilar__enlaces a .ico{ width:14px;height:14px;opacity:0;transform:translateX(-4px); transition:opacity .2s var(--curva-suave),transform .2s var(--curva)} .pilar__enlaces a:hover{color:var(--ct)} .pilar__enlaces a:hover .ico{opacity:1;transform:translateX(0)} /* ========================================================================== 8. Rejillas de tarjetas ========================================================================== */ .rejilla{display:grid;gap:1.25rem} .rejilla--2{grid-template-columns:repeat(auto-fit,minmax(310px,1fr))} .rejilla--3{grid-template-columns:repeat(auto-fit,minmax(288px,1fr))} .rejilla--4{grid-template-columns:repeat(auto-fit,minmax(224px,1fr))} /* Dos columnas de verdad: para bloques de 2 o 4 tarjetas con foto, donde auto-fit dejaría una huérfana en la última fila. */ .rejilla--duo{grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))} .tarjeta{ position:relative;display:flex;flex-direction:column; background:#fff;border:1px solid var(--linea);border-radius:var(--radio-g); overflow:hidden; transition:transform .32s var(--curva),box-shadow .32s var(--curva), border-color .3s; } .tarjeta:hover{transform:translateY(-5px);box-shadow:var(--sombra-2); border-color:color-mix(in srgb,var(--c,var(--marca)) 28%,var(--linea))} .tarjeta__img{position:relative;aspect-ratio:16/10;overflow:hidden; background:var(--hueso)} .tarjeta__img img{width:100%;height:100%;object-fit:cover; transition:transform .8s var(--curva)} .tarjeta:hover .tarjeta__img img{transform:scale(1.055)} .tarjeta__img .pildora{position:absolute;top:.85rem;left:.85rem; backdrop-filter:blur(10px);background:rgba(255,255,255,.9)} .tarjeta__cuerpo{padding:1.45rem 1.5rem 1.6rem;display:flex; flex-direction:column;flex:1} .tarjeta h3{font-size:1.14rem;margin-bottom:.4rem} .tarjeta h3 a{color:inherit} .tarjeta h3 a::after{content:"";position:absolute;inset:0} /* toda la tarjeta */ .tarjeta p{color:var(--texto-2);font-size:.93rem;margin-bottom:1rem} .tarjeta__pie{margin-top:auto;display:flex;align-items:center; gap:.4rem;font-size:.885rem;font-weight:620;color:var(--marca)} .tarjeta__pie svg{width:15px;height:15px;fill:currentColor; transition:transform .25s var(--curva)} .tarjeta:hover .tarjeta__pie svg{transform:translateX(4px)} /* --- Tarjeta de beneficio (sin imagen) ---------------------------------- */ .beneficio{ padding:1.55rem;border-radius:var(--radio);background:#fff; border:1px solid var(--linea); transition:transform .3s var(--curva),box-shadow .3s var(--curva)} .beneficio:hover{transform:translateY(-4px);box-shadow:var(--sombra-1)} .beneficio__n{ display:grid;place-items:center;width:38px;height:38px;border-radius:11px; background:color-mix(in srgb,var(--c,var(--marca)) 14%,#fff); color:var(--ct,var(--marca));font-weight:760;font-size:.95rem; margin-bottom:.95rem;font-variant-numeric:tabular-nums; } .beneficio__n .ico{width:19px;height:19px;fill:currentColor} .beneficio h3{font-size:1.04rem;margin-bottom:.35rem} .beneficio p{color:var(--texto-2);font-size:.92rem;margin:0} .seccion--tinta .beneficio{background:var(--tinta-2);border-color:var(--tinta-3)} .seccion--tinta .beneficio p{color:#AEB8CB} .seccion--tinta .beneficio__n{ background:color-mix(in srgb,var(--c,var(--marca-claro)) 22%,transparent); color:#fff} /* ========================================================================== 9. Muro de clientes (marquesina en dos direcciones) ========================================================================== */ .muro{overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent); mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)} .muro__pista{display:flex;gap:3.4rem;width:max-content; animation:desfile 46s linear infinite} .muro__pista--rev{animation-direction:reverse;animation-duration:56s} .muro:hover .muro__pista{animation-play-state:paused} @keyframes desfile{to{transform:translateX(-50%)}} .muro__logo{ height:46px;width:auto;max-width:none;flex:none;object-fit:contain; filter:grayscale(1);opacity:.52; transition:filter .3s,opacity .3s,transform .3s var(--curva); } .muro__logo:hover{filter:none;opacity:1;transform:scale(1.07)} .muro + .muro{margin-top:2.2rem} /* ========================================================================== 10. Cifras ========================================================================== */ .cifras{display:grid;gap:1.1rem; grid-template-columns:repeat(auto-fit,minmax(196px,1fr))} .cifra{padding:1.7rem 1.4rem;border-radius:var(--radio-g); background:var(--tinta-2);border:1px solid var(--tinta-3); text-align:center} .cifra__n{ font-size:clamp(2.1rem,4.4vw,2.9rem);font-weight:800;line-height:1; letter-spacing:-.04em;color:#fff;margin-bottom:.4rem; font-variant-numeric:tabular-nums; background:linear-gradient(180deg,#fff,#B9C2D6); -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent; } .cifra__r{font-size:.9rem;font-weight:640;color:#fff;margin-bottom:.3rem} .cifra p{font-size:.845rem;color:#98A3B8;margin:0;line-height:1.5} /* ========================================================================== 11. Método (pasos numerados con hilo) ========================================================================== */ .pasos{display:grid;gap:1.1rem;counter-reset:paso; grid-template-columns:repeat(auto-fit,minmax(252px,1fr))} .paso{position:relative;padding:1.7rem 1.5rem;border-radius:var(--radio-g); background:#fff;border:1px solid var(--linea);counter-increment:paso; transition:transform .3s var(--curva),box-shadow .3s var(--curva)} .paso:hover{transform:translateY(-4px);box-shadow:var(--sombra-2)} .paso::before{ content:counter(paso,decimal-leading-zero); display:block;font-size:.8rem;font-weight:760;letter-spacing:.1em; color:var(--marca);margin-bottom:.9rem; } .paso::after{ /* hilo que une los pasos en escritorio */ content:"";position:absolute;top:2.35rem;right:-1.1rem;width:1.1rem; border-top:1px dashed var(--linea); } .paso:last-child::after{display:none} @media (max-width:1000px){.paso::after{display:none}} .paso h3{font-size:1.06rem;margin-bottom:.4rem} .paso p{color:var(--texto-2);font-size:.92rem;margin:0} /* ========================================================================== 12. Encabezado interior ========================================================================== */ .interior{ position:relative;background:var(--tinta);color:#fff;overflow:hidden; padding-block:clamp(3.4rem,7vw,5.6rem);isolation:isolate; } .interior__fondo{position:absolute;inset:0;z-index:-2;overflow:hidden} .interior__fondo img{width:100%;height:100%;object-fit:cover; transform:scale(1.06)} .interior::after{ content:"";position:absolute;inset:0;z-index:-1; background: linear-gradient(95deg,rgba(11,15,26,.94),rgba(11,15,26,.72) 62%, rgba(11,15,26,.55)), radial-gradient(90% 120% at 0% 40%, color-mix(in srgb,var(--c,var(--marca)) 30%,transparent),transparent 60%); } .interior h1{color:#fff;max-width:20ch;margin-bottom:.9rem} .interior .entradilla{color:#C4CDDD;max-width:62ch} .interior__promesa{ font-size:clamp(1.05rem,1.7vw,1.24rem);font-weight:600;color:#fff; margin:0 0 1.1rem;max-width:52ch; } .interior .boton{margin-top:1.5rem} /* --- Migas -------------------------------------------------------------- */ .migas{font-size:.83rem;margin-bottom:1.35rem;color:rgba(255,255,255,.6)} .migas ol{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap; gap:.4rem;align-items:center} .migas a{color:rgba(255,255,255,.82)} .migas a:hover{color:#fff} .migas li+li::before{content:"›";margin-right:.4rem;opacity:.5} .migas [aria-current]{color:#fff} .migas--claro{color:var(--texto-2)} .migas--claro a{color:var(--texto-2)} .migas--claro a:hover{color:var(--marca)} .migas--claro [aria-current]{color:var(--tinta)} /* ========================================================================== 13. Contenido largo ========================================================================== */ .prosa{font-size:1.055rem;line-height:1.72;color:var(--texto)} .prosa > h2{margin-top:2.6rem} .prosa > h3{margin-top:1.9rem;font-size:1.16rem} .prosa > h2:first-child,.prosa > h3:first-child{margin-top:0} .prosa ul,.prosa ol{margin:0 0 1.3rem;padding-left:1.35em} .prosa li{margin-bottom:.55rem} .prosa li::marker{color:var(--marca)} .prosa a{text-decoration:underline;text-underline-offset:3px; text-decoration-thickness:1.5px; text-decoration-color:color-mix(in srgb,var(--marca) 38%,transparent)} .prosa a:hover{text-decoration-color:var(--marca)} .prosa img{border-radius:var(--radio);margin:1.8rem 0} .cita-bloque{ margin:2.2rem 0;padding:1.5rem 1.7rem;border-radius:var(--radio); background:var(--hueso);border-left:4px solid var(--marca); font-size:1.12rem;line-height:1.55;font-weight:560;color:var(--tinta); font-style:italic; } .nota-bloque{ margin:1.9rem 0;padding:1.15rem 1.35rem;border-radius:var(--radio); background:color-mix(in srgb,var(--marca) 6%,#fff); border:1px solid color-mix(in srgb,var(--marca) 20%,#fff); font-size:.945rem;color:var(--texto-2); } .nota-bloque strong{color:var(--marca)} /* --- Lista con marca de verificación ------------------------------------ */ .lista-check{list-style:none;padding:0;margin:0;display:grid;gap:.75rem} .lista-check li{position:relative;padding-left:2rem;font-size:.975rem; color:var(--texto-2);line-height:1.55} .lista-check li::before{ content:"";position:absolute;left:0;top:.2em;width:20px;height:20px; border-radius:50%;background:color-mix(in srgb,var(--c,var(--marca)) 15%,#fff); } .lista-check li::after{ content:"";position:absolute;left:6.5px;top:.52em;width:7px;height:4px; border-left:2px solid var(--ct,var(--marca)); border-bottom:2px solid var(--ct,var(--marca)); transform:rotate(-45deg); } .lista-check strong{display:block;color:var(--tinta);margin-bottom:.1rem} .seccion--tinta .lista-check li{color:#AEB8CB} .seccion--tinta .lista-check strong{color:#fff} .seccion--tinta .lista-check li::before{ background:color-mix(in srgb,var(--c,var(--marca-claro)) 26%,transparent)} .seccion--tinta .lista-check li::after{border-color:#fff} /* ========================================================================== 14. Acordeón (FAQ) ========================================================================== */ .faq{display:grid;gap:.7rem;max-width:860px} .faq__item{border:1px solid var(--linea);border-radius:var(--radio); background:#fff;overflow:hidden;transition:border-color .25s, box-shadow .25s} .faq__item[open]{border-color:color-mix(in srgb,var(--marca) 32%,var(--linea)); box-shadow:var(--sombra-1)} .faq__item summary{ display:flex;align-items:flex-start;gap:1rem;padding:1.15rem 1.35rem; cursor:pointer;list-style:none;font-weight:620;font-size:1.02rem; color:var(--tinta);transition:color .2s; } .faq__item summary::-webkit-details-marker{display:none} .faq__item summary:hover{color:var(--marca)} .faq__item summary::after{ content:"";flex:none;margin-left:auto;width:11px;height:11px; border-right:2px solid var(--marca);border-bottom:2px solid var(--marca); transform:rotate(45deg) translateY(-2px); transition:transform .3s var(--curva); } .faq__item[open] summary::after{transform:rotate(-135deg) translateY(-2px)} .faq__cuerpo{padding:0 1.35rem 1.3rem;color:var(--texto-2);font-size:.97rem; line-height:1.66} .faq__cuerpo p:last-child{margin-bottom:0} /* ========================================================================== 15. Certificaciones ========================================================================== */ .certs{display:grid;gap:1rem; grid-template-columns:repeat(auto-fit,minmax(230px,1fr))} .cert{ display:flex;gap:1rem;align-items:flex-start;padding:1.25rem; border-radius:var(--radio);background:#fff;border:1px solid var(--linea); transition:transform .3s var(--curva),box-shadow .3s var(--curva)} .cert:hover{transform:translateY(-3px);box-shadow:var(--sombra-1)} .cert img{width:62px;height:62px;object-fit:contain;flex:none} .cert h3{font-size:.98rem;margin-bottom:.2rem;line-height:1.3} .cert p{font-size:.855rem;color:var(--texto-2);margin:0;line-height:1.5} /* ========================================================================== 16. Formulario ========================================================================== */ .forma{display:grid;gap:1.05rem} .forma__fila{display:grid;gap:1.05rem;grid-template-columns:1fr 1fr} @media (max-width:640px){.forma__fila{grid-template-columns:1fr}} .campo{display:flex;flex-direction:column;gap:.4rem} .campo label{font-size:.88rem;font-weight:620;color:var(--tinta)} .campo label .req{color:#C2410C} .campo input,.campo select,.campo textarea{ font:inherit;font-size:.97rem;padding:.82rem 1rem; border:1.5px solid var(--linea);border-radius:11px;background:#fff; color:var(--texto);width:100%; transition:border-color .2s,box-shadow .2s; } .campo textarea{min-height:132px;resize:vertical} .campo input:focus,.campo select:focus,.campo textarea:focus{ outline:none;border-color:var(--marca); box-shadow:0 0 0 4px color-mix(in srgb,var(--marca) 15%,transparent)} .campo input::placeholder,.campo textarea::placeholder{color:var(--gris-claro)} .campo__ayuda{font-size:.8rem;color:var(--texto-2)} .radios{display:flex;flex-wrap:wrap;gap:.55rem} .radios label{ display:inline-flex;align-items:center;gap:.45rem;cursor:pointer; padding:.5rem .95rem;border:1.5px solid var(--linea);border-radius:100px; font-size:.9rem;font-weight:520;transition:border-color .2s,background .2s} .radios label:has(input:checked){border-color:var(--marca); background:color-mix(in srgb,var(--marca) 8%,#fff);color:var(--marca)} .radios input{accent-color:var(--marca)} .aviso-forma{font-size:.83rem;color:var(--texto-2)} /* ========================================================================== 17. Bloque de contacto lateral ========================================================================== */ .contacto-dual{display:grid;gap:clamp(1.8rem,4vw,3.4rem); grid-template-columns:1fr 1fr;align-items:start} @media (max-width:900px){.contacto-dual{grid-template-columns:1fr}} .contacto-datos{display:grid;gap:1rem} .dato{display:flex;gap:.9rem;align-items:flex-start;padding:1.05rem 1.2rem; border-radius:var(--radio);background:#fff;border:1px solid var(--linea)} .seccion--tinta .dato{background:var(--tinta-2);border-color:var(--tinta-3)} .dato__ico{width:40px;height:40px;border-radius:12px;flex:none;display:grid; place-items:center;background:color-mix(in srgb,var(--marca) 12%,#fff)} .dato__ico svg{width:19px;height:19px;fill:var(--marca)} .seccion--tinta .dato__ico{background:color-mix(in srgb,var(--marca-claro) 24%,transparent)} .seccion--tinta .dato__ico svg{fill:var(--marca-claro)} .dato h3{font-size:.83rem;margin-bottom:.2rem;letter-spacing:.06em; text-transform:uppercase;color:var(--texto-2);font-weight:700} .seccion--tinta .dato h3{color:#98A3B8} .dato p,.dato a{margin:0;font-size:1.01rem;font-weight:580;color:var(--tinta)} .seccion--tinta .dato p,.seccion--tinta .dato a{color:#fff} .dato a:hover{color:var(--marca)} .seccion--tinta .dato a:hover{color:var(--marca-claro)} .dato small{display:block;font-size:.85rem;color:var(--texto-2); font-weight:400;margin-top:.15rem} .mapa{border:0;width:100%;aspect-ratio:16/10;border-radius:var(--radio-g); filter:grayscale(.35)} /* ========================================================================== 18. Cierre / CTA ========================================================================== */ .cierre{position:relative;overflow:hidden;isolation:isolate; background:var(--tinta);color:#fff; padding-block:clamp(3.4rem,7vw,5.4rem)} .cierre::before{ content:"";position:absolute;inset:0;z-index:-1; background: radial-gradient(70% 130% at 12% 0%,rgba(88,73,191,.55),transparent 62%), radial-gradient(60% 120% at 88% 100%,rgba(65,142,242,.34),transparent 60%); } /* rejilla técnica de fondo, muy tenue */ .cierre::after{ content:"";position:absolute;inset:0;z-index:-1;opacity:.5; background-image: linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px); background-size:52px 52px; -webkit-mask-image:radial-gradient(80% 80% at 50% 50%,#000,transparent); mask-image:radial-gradient(80% 80% at 50% 50%,#000,transparent); } .cierre h2{color:#fff;max-width:19ch} .cierre__cuerpo{display:grid;gap:2rem;grid-template-columns:1.35fr 1fr; align-items:center} @media (max-width:860px){.cierre__cuerpo{grid-template-columns:1fr}} .cierre p{color:#C4CDDD;max-width:52ch;margin-bottom:0} .cierre__acciones{display:flex;flex-wrap:wrap;gap:.85rem} /* ========================================================================== 19. Pie ========================================================================== */ .pie{background:var(--tinta);color:#96A0B5;padding-block:3.4rem 0; border-top:1px solid var(--tinta-3)} .pie__rejilla{display:grid;gap:2.2rem; grid-template-columns:1.6fr repeat(3,1fr);padding-bottom:2.6rem} @media (max-width:940px){.pie__rejilla{grid-template-columns:1fr 1fr}} @media (max-width:560px){.pie__rejilla{grid-template-columns:1fr}} /* width:auto es obligatorio junto a un height fijo: sin él el navegador combina este alto con el ancho del atributo y deforma el logotipo. */ .pie img.logo{height:40px;width:auto;margin-bottom:1.1rem} .pie p{font-size:.92rem;line-height:1.62;margin-bottom:1.1rem} .pie h3{font-size:.78rem;letter-spacing:.13em;text-transform:uppercase; color:#fff;margin-bottom:1rem;font-weight:730} .pie ul{list-style:none;padding:0;margin:0;display:grid;gap:.5rem} .pie a{color:#96A0B5;font-size:.925rem} .pie a:hover{color:#fff} .pie__redes{display:flex;gap:.55rem;margin-top:.4rem} .pie__redes a{ width:38px;height:38px;border-radius:11px;display:grid;place-items:center; background:var(--tinta-2);border:1px solid var(--tinta-3); transition:background .22s,transform .22s var(--curva),border-color .22s} .pie__redes a:hover{background:var(--marca);border-color:var(--marca); transform:translateY(-3px)} .pie__redes svg{width:17px;height:17px;fill:#96A0B5;transition:fill .22s} .pie__redes a:hover svg{fill:#fff} .pie__base{ border-top:1px solid var(--tinta-3);padding-block:1.5rem; display:flex;flex-wrap:wrap;gap:.8rem 1.5rem;align-items:center; font-size:.855rem} .pie__base .credito{margin-left:auto} @media (max-width:700px){.pie__base .credito{margin-left:0}} /* ========================================================================== 20. Flotantes -------------------------------------------------------------------------- En móvil el flotante se sube para no tapar los controles del carrusel: la barra del héroe vive abajo y el botón se le encimaba. ========================================================================== */ .flotantes{position:fixed;right:1rem;bottom:1rem;z-index:800; display:flex;flex-direction:column;gap:.6rem} .flota{ width:54px;height:54px;border-radius:50%;display:grid;place-items:center; box-shadow:0 6px 22px rgba(11,15,26,.28); transition:transform .25s var(--curva),box-shadow .25s var(--curva); } .flota:hover{transform:scale(1.08) translateY(-2px); box-shadow:0 10px 30px rgba(11,15,26,.36)} .flota svg{width:26px;height:26px;fill:#fff} .flota--wa{background:#25D366} .flota--tel{background:var(--marca);display:none} @media (max-width:1180px){.flota--tel{display:grid}} /* reserva para los controles del carrusel */ @media (max-width:760px){ .flotantes{bottom:.85rem;right:.85rem} .heroe__barra{padding-bottom:5.6rem} .heroe__barra-int{padding-right:4.2rem} } /* ========================================================================== 21. Revelado al hacer scroll -------------------------------------------------------------------------- Arranca VISIBLE. Solo cuando el guion confirma que hay IntersectionObserver y que el documento está visible, marca y esconde. Así el contenido nunca queda invisible si el JS no corre. ========================================================================== */ html.animar .revelar{opacity:0;transform:translateY(26px); transition:opacity .72s var(--curva-suave),transform .82s var(--curva)} html.animar .revelar.visible{opacity:1;transform:none} html.animar .revelar-hijos > *{opacity:0;transform:translateY(24px); transition:opacity .68s var(--curva-suave),transform .78s var(--curva)} html.animar .revelar-hijos.visible > *{opacity:1;transform:none} html.animar .revelar-hijos.visible > *:nth-child(1){transition-delay:0s} html.animar .revelar-hijos.visible > *:nth-child(2){transition-delay:.08s} html.animar .revelar-hijos.visible > *:nth-child(3){transition-delay:.16s} html.animar .revelar-hijos.visible > *:nth-child(4){transition-delay:.24s} html.animar .revelar-hijos.visible > *:nth-child(5){transition-delay:.32s} html.animar .revelar-hijos.visible > *:nth-child(6){transition-delay:.40s} html.animar .revelar-hijos.visible > *:nth-child(n+7){transition-delay:.46s} /* ========================================================================== 22. Accesibilidad y respeto por el movimiento ========================================================================== */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.01ms!important;animation-iteration-count:1!important; transition-duration:.01ms!important;scroll-behavior:auto!important} .diapo{transform:none!important} .diapo__fondo img{transform:none!important} .muro__pista{animation:none;transform:none} html.animar .revelar,html.animar .revelar-hijos > *{ opacity:1!important;transform:none!important} } @media print{ .cabecera,.flotantes,.heroe__barra,.cierre,.panel,.velo{display:none!important} body{font-size:12pt;color:#000} .heroe,.interior{background:#fff;color:#000;padding-block:1rem} .heroe h1,.interior h1{color:#000} a{color:#000;text-decoration:underline} } /* ========================================================================== 23. Sección de video / testimonios -------------------------------------------------------------------------- La miniatura es una imagen local y el