@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;src:url(../fuentes/inter-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;src:url(../fuentes/inter-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'Sora';font-style:normal;font-weight:600 800;font-display:swap;src:url(../fuentes/sora-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Sora';font-style:normal;font-weight:600 800;font-display:swap;src:url(../fuentes/sora-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} /* >>> ef:cabecera */ .ef-cabecera{z-index:9990;height:88px;color:#fff;background:transparent;transition:transform .45s cubic-bezier(.16,1,.3,1),height .35s ease,background-color .35s ease,box-shadow .35s ease,color .35s ease} .ef-cabecera.ef-compacta{height:64px;color:#16161a;background:var(--ef-cab-fondo,rgba(255,255,255,.8));-webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);box-shadow:0 1px 0 rgba(0,0,0,.06),0 8px 30px -12px rgba(0,0,0,.15)} .ef-cabecera.ef-escondida{transform:translateY(-105%)} @media (prefers-reduced-motion:reduce){.ef-cabecera{transition:none}} /* <<< ef:cabecera */ /* >>> ef:whatsapp */ .ef-wa{position:fixed;right:20px;bottom:var(--ef-wa-abajo,20px);z-index:9980;display:flex;align-items:flex-end;gap:12px;opacity:0;transform:translateY(20px) scale(.9);pointer-events:none;transition:opacity .4s ease,transform .5s cubic-bezier(.34,1.56,.64,1)} .ef-wa.ef-visible{opacity:1;transform:none;pointer-events:auto} .ef-wa-boton{position:relative;width:60px;height:60px;border-radius:50%;background:#25d366;display:grid;place-items:center;box-shadow:0 8px 24px rgba(37,211,102,.45);transition:transform .3s cubic-bezier(.34,1.56,.64,1)} .ef-wa-boton:hover{transform:scale(1.08)} .ef-wa-boton svg{width:32px;height:32px;fill:#fff} .ef-wa-boton::before{content:"";position:absolute;inset:0;border-radius:50%;background:#25d366;z-index:-1;animation:ef-wa-late 4s cubic-bezier(.16,1,.3,1) infinite} @keyframes ef-wa-late{0%,60%{transform:scale(1);opacity:.6}100%{transform:scale(1.9);opacity:0}} .ef-wa-globo{position:relative;max-width:230px;background:#fff;color:#16161a;border-radius:16px 16px 4px 16px;padding:.8rem 2.2rem .8rem 1rem;font-size:.92rem;line-height:1.35;box-shadow:0 10px 30px rgba(0,0,0,.15);opacity:0;transform:translateX(10px);transition:opacity .4s,transform .5s cubic-bezier(.16,1,.3,1);pointer-events:none} .ef-wa-globo.ef-visible{opacity:1;transform:none;pointer-events:auto} .ef-wa-cerrar{position:absolute;top:2px;right:2px;width:32px;height:32px;border:0;background:none;font-size:18px;line-height:1;color:#888;cursor:pointer;border-radius:50%} .ef-wa-barra{display:none} @media (max-width:767px){ .ef-wa{display:none} .ef-wa-barra{position:fixed;left:0;right:0;bottom:0;z-index:9980;display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:8px 8px calc(8px + env(safe-area-inset-bottom));background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 -6px 24px rgba(0,0,0,.1);transition:transform .4s cubic-bezier(.16,1,.3,1)} .ef-wa-barra.ef-escondida{transform:translateY(110%)} .ef-wa-barra a{display:flex;align-items:center;justify-content:center;gap:.5rem;min-height:50px;border-radius:12px;font-weight:700;text-decoration:none;color:#fff;background:#16161a} .ef-wa-barra a.ef-wa-barra-wa{background:#25d366} .ef-wa-barra svg{width:20px;height:20px;fill:currentColor} } @media (prefers-reduced-motion:reduce){.ef-wa-boton::before{animation:none}} /* <<< ef:whatsapp */ /* >>> ef:cursor */ .ef-cursor-punto,.ef-cursor-aro{position:fixed;top:0;left:0;z-index:2147483646;pointer-events:none;border-radius:50%;opacity:0;transition:opacity .3s ease} .ef-cursor-punto{width:8px;height:8px;margin:-4px 0 0 -4px;background:var(--ef-acento,#ff5a36)} .ef-cursor-aro{width:40px;height:40px;margin:-20px 0 0 -20px;border:1.5px solid var(--ef-acento,#ff5a36);display:grid;place-items:center;transition:opacity .3s ease,width .35s cubic-bezier(.16,1,.3,1),height .35s cubic-bezier(.16,1,.3,1),margin .35s cubic-bezier(.16,1,.3,1),background-color .35s ease,border-color .35s ease} .ef-cursor-aro span{font:700 13px/1 system-ui,sans-serif;color:#fff;letter-spacing:.04em;opacity:0;transition:opacity .2s ease} .ef-cursor-visible .ef-cursor-punto,.ef-cursor-visible .ef-cursor-aro{opacity:1} .ef-cursor-aro.ef-sobre-enlace{width:64px;height:64px;margin:-32px 0 0 -32px;background:color-mix(in srgb,var(--ef-acento,#ff5a36) 15%,transparent)} .ef-cursor-aro.ef-con-texto{width:92px;height:92px;margin:-46px 0 0 -46px;background:var(--ef-acento,#ff5a36);border-color:transparent} .ef-cursor-aro.ef-con-texto span{opacity:1} body.ef-cursor-oculto,body.ef-cursor-oculto *{cursor:none!important} /* <<< ef:cursor */ /* >>> ef:ilumina */ .ef-ilumina .ef-il-p{opacity:var(--ef-apagado,.18);transition:opacity .25s linear} .ef-ilumina .ef-il-p.ef-on{opacity:1} /* <<< ef:ilumina */ /* >>> ef:marquesina */ .ef-marquesina{overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)} .ef-marq-pista{display:flex;width:max-content;animation:ef-marq var(--ef-dur,40s) linear infinite} .ef-marquesina[data-ef-sentido="inverso"] .ef-marq-pista{animation-direction:reverse} .ef-marquesina:hover .ef-marq-pista{animation-play-state:paused} .ef-marq-grupo{display:flex;align-items:center;gap:var(--ef-hueco,2.5rem);padding-right:var(--ef-hueco,2.5rem);flex:0 0 auto} @keyframes ef-marq{to{transform:translateX(-50%)}} @media (prefers-reduced-motion:reduce){.ef-marquesina{overflow-x:auto}.ef-marq-pista{animation:none}} /* <<< ef:marquesina */ /* >>> ef:faq */ .ef-faq{max-width:800px;margin:0 auto;border-top:1px solid rgba(0,0,0,.14)} .ef-faq details{border-bottom:1px solid rgba(0,0,0,.14);overflow:hidden} .ef-faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:1.4rem .25rem;font-weight:650;font-size:clamp(1.05rem,2vw,1.25rem);line-height:1.3;transition:color .25s} .ef-faq summary::-webkit-details-marker{display:none} .ef-faq summary:hover{color:var(--ef-acento,#ff5a36)} .ef-faq summary:focus-visible{outline:3px solid var(--ef-acento,#ff5a36);outline-offset:2px;border-radius:6px} .ef-faq summary::after{content:"";flex:0 0 36px;height:36px;border-radius:50%;background:linear-gradient(currentColor,currentColor) center/12px 2px no-repeat,linear-gradient(currentColor,currentColor) center/2px 12px no-repeat;border:1.5px solid rgba(0,0,0,.18);transition:transform .45s cubic-bezier(.16,1,.3,1),background-color .3s,color .3s,border-color .3s} .ef-faq details[open] summary::after{transform:rotate(135deg);background-color:var(--ef-acento,#ff5a36);border-color:var(--ef-acento,#ff5a36);color:#fff} .ef-faq-resp{padding:0 3.5rem 1.5rem .25rem;color:#4a4a55} .ef-faq-resp p{margin:0 0 .75rem} .ef-faq-resp p:last-child{margin:0} /* <<< ef:faq */ :root{ --cc-fondo:#0D0D10;--cc-superficie:#17171C;--cc-borde:rgba(255,255,255,.08); --cc-texto:#F4F2EF;--cc-texto-2:#A9A9B3; --cc-rojo:#F83028;--cc-rojo-bloque:#E02828;--cc-rojo-hover:#C81F1F; --cc-f-titular:'Sora',system-ui,sans-serif;--cc-f-texto:'Inter',system-ui,sans-serif; --cc-radio:22px;--cc-radio-s:12px;--cc-ancho:1200px; --cc-ease:cubic-bezier(.16,1,.3,1); /* variables que leen los efectos de la biblioteca */ --ef-acento:#F83028;--ef-bento-tarjeta:#17171C;--ef-cab-fondo:rgba(13,13,16,.82); --ef-au-fondo:#0D0D10;--ef-au-1:#F83028;--ef-au-2:#7A1410;--ef-au-3:#3A0F0C;--ef-grano:.16; --ef-fondo-punto:#0D0D10; } /* Solo clases: las reglas de elemento (*, body, img, a, foco) van con ámbito en base-pagina.css y base-global.css */ .cc-h1,.cc-h2,.cc-h3,.cc-caso__titulo,.cc-hero__titular,.cc-rojo__titular{font-family:var(--cc-f-titular);font-weight:800;line-height:1.04;letter-spacing:-.035em;margin:0;color:inherit} .cc-h1{font-size:clamp(2.6rem,7vw,5.6rem);margin-bottom:1.2rem} .cc-h2{font-size:clamp(2rem,5vw,3.6rem);margin-bottom:1.2rem} .cc-h3{font-size:clamp(1.3rem,2.4vw,1.7rem);margin-bottom:.8rem;font-weight:600;letter-spacing:-.02em} .cc-lead{font-size:clamp(1.05rem,1.6vw,1.22rem);color:var(--cc-texto-2);max-width:60ch;margin:0 0 1.5rem} .cc-antetitulo{font-size:.78rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--cc-rojo);margin:0 0 1rem} .cc-envoltura{width:min(100% - 2.5rem,var(--cc-ancho));margin-inline:auto} .cc-seccion{padding-block:clamp(4.5rem,10vw,8rem)} .cc-seccion--sin-arriba{padding-top:0} .cc-solo-lector{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} /* Base de las páginas nuevas, con ámbito a su
: en WordPress conviven con el CSS de Divi. :where() deja la especificidad a cero para que las clases del sistema sigan mandando. */ main.cc-inicio,main.cc-trabajos,main.cc-contacto,main.cc-caso,main.cc-servicio{display:block;background:var(--cc-fondo);color:var(--cc-texto);font-family:var(--cc-f-texto);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased} :where(main.cc-inicio,main.cc-trabajos,main.cc-contacto,main.cc-caso,main.cc-servicio),:where(main.cc-inicio,main.cc-trabajos,main.cc-contacto,main.cc-caso,main.cc-servicio) *,:where(main.cc-inicio,main.cc-trabajos,main.cc-contacto,main.cc-caso,main.cc-servicio) *::before,:where(main.cc-inicio,main.cc-trabajos,main.cc-contacto,main.cc-caso,main.cc-servicio) *::after{box-sizing:border-box} :where(main.cc-inicio,main.cc-trabajos,main.cc-contacto,main.cc-caso,main.cc-servicio) img,:where(main.cc-inicio,main.cc-trabajos,main.cc-contacto,main.cc-caso,main.cc-servicio) video{max-width:100%;height:auto;display:block} :where(main.cc-inicio,main.cc-trabajos,main.cc-contacto,main.cc-caso,main.cc-servicio) a{color:inherit} :where(main.cc-inicio,main.cc-trabajos,main.cc-contacto,main.cc-caso,main.cc-servicio) :is(h1,h2,h3,h4,h5,h6){color:inherit} :where(main.cc-inicio,main.cc-trabajos,main.cc-contacto,main.cc-caso,main.cc-servicio) :focus-visible{outline:3px solid var(--cc-rojo);outline-offset:3px} /* Botones */ .cc-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:48px;padding:.85em 1.5em;border-radius:999px;border:1.5px solid transparent;font:600 1rem/1 var(--cc-f-texto);text-decoration:none;cursor:pointer;transition:background-color .3s,border-color .3s,color .3s} .cc-btn--primario{background:var(--cc-rojo-bloque);color:#FFFFFF} .cc-btn--primario:hover{background:var(--cc-rojo-hover)} .cc-btn--secundario{border-color:rgba(255,255,255,.28);color:var(--cc-texto)} .cc-btn--secundario:hover{border-color:var(--cc-texto)} .cc-btn--oscuro{background:var(--cc-fondo);color:#FFFFFF} .cc-btn--oscuro:hover{background:#26262E} /* Etiquetas */ .cc-chips{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;padding:0;margin:0} .cc-chip{font-size:.82rem;font-weight:600;padding:.45rem .85rem;border-radius:999px;background:rgba(248,48,40,.12);border:1px solid rgba(248,48,40,.32);color:#FF8A80} /* Maqueta de dispositivos: ordenador + tablet + móvil */ .cc-disp{position:relative;max-width:1100px;margin-inline:auto;aspect-ratio:16/10.4} .cc-disp__escritorio{position:absolute;left:0;top:0;width:78%;border-radius:14px;overflow:hidden;background:#1D1D23;border:1px solid var(--cc-borde);box-shadow:0 40px 90px -30px rgba(0,0,0,.75)} .cc-disp__barra{display:flex;gap:6px;padding:10px 12px;background:#24242B} .cc-disp__barra i{width:10px;height:10px;border-radius:50%;background:#45454F} .cc-disp__escritorio img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top} .cc-disp__tablet{position:absolute;right:9%;bottom:0;width:29%;padding:9px;border-radius:24px;background:#1D1D23;border:1px solid var(--cc-borde);box-shadow:0 30px 70px -25px rgba(0,0,0,.8)} .cc-disp__tablet img{width:100%;aspect-ratio:820/1180;object-fit:cover;object-position:top;border-radius:16px} .cc-disp__movil{position:absolute;right:0;bottom:-3%;width:14.5%;padding:6px;border-radius:26px;background:#1D1D23;border:1px solid var(--cc-borde);box-shadow:0 30px 60px -20px rgba(0,0,0,.85)} .cc-disp__movil img{width:100%;aspect-ratio:390/844;object-fit:cover;object-position:top;border-radius:20px} @media (max-width:700px){ .cc-disp{aspect-ratio:auto;display:grid;grid-template-columns:1.45fr 1fr;gap:12px;align-items:end} .cc-disp__escritorio,.cc-disp__tablet,.cc-disp__movil{position:static;width:auto} .cc-disp__escritorio{grid-column:1/-1} } /* Móvil con vídeo (reel) */ .cc-movil{position:relative;width:100%;max-width:260px;aspect-ratio:9/18;padding:7px;border-radius:36px;background:#1D1D23;border:1px solid var(--cc-borde);box-shadow:0 30px 60px -20px rgba(0,0,0,.75)} .cc-movil video,.cc-movil img{width:100%;height:100%;object-fit:cover;border-radius:29px;background:#000} .cc-fila-moviles{display:flex;justify-content:center;gap:clamp(.75rem,3vw,2rem);flex-wrap:wrap} .cc-fila-moviles .cc-movil{flex:1 1 200px} .cc-video-h{flex:1 1 100%;border-radius:var(--cc-radio);overflow:hidden;background:#000} .cc-video-h video{width:100%;aspect-ratio:16/9;object-fit:cover} /* Bloque rojo */ .cc-rojo{background:var(--cc-rojo-bloque);color:#FFFFFF;text-align:center} .cc-rojo__titular{font-size:clamp(2.6rem,8vw,6.5rem);margin-bottom:1.2rem} .cc-rojo__texto{font-size:clamp(1.05rem,1.8vw,1.3rem);max-width:46ch;margin:0 auto 2rem;color:#FFFFFF} .cc-rojo__botones{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem} .cc-rojo .cc-btn--secundario{border-color:rgba(255,255,255,.6);color:#FFFFFF} .cc-rojo .cc-btn--secundario:hover{border-color:#FFFFFF} /* Móvil con la web desplazándose sola */ .cc-movil__pantalla{width:100%;height:100%;overflow:hidden;border-radius:29px;background:#fff} .cc-movil--scroll .cc-movil__pantalla img{width:100%;height:auto;object-fit:initial;border-radius:0;animation:cc-recorrer var(--cc-scroll-dur,16s) ease-in-out infinite alternate;animation-play-state:paused} .cc-movil--scroll.cc-activo .cc-movil__pantalla img{animation-play-state:running} .cc-movil--scroll:focus-within .cc-movil__pantalla img{animation-play-state:paused} /* En móvil un toque deja :hover pegado y pararía la animación: la pausa al pasar el ratón solo con ratón */ @media (hover:hover){.cc-movil--scroll:hover .cc-movil__pantalla img{animation-play-state:paused}} @keyframes cc-recorrer{0%,8%{transform:translateY(0)}92%,100%{transform:translateY(calc(var(--cc-recorrido,0px) * -1))}} @media (prefers-reduced-motion:reduce){.cc-movil--scroll .cc-movil__pantalla img{animation:none}} /* Texto solo para lectores de pantalla */ .cc-oculto{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} /* Ficha de datos: el mismo esquema en el catálogo de Trabajos y en cada caso */ .cc-ficha__datos{display:grid;grid-template-columns:auto 1fr;gap:.3rem 1rem;margin:0;font-size:.9rem} .cc-ficha__datos div{display:contents} .cc-ficha__datos dt{color:var(--cc-texto-2);font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding-top:.2em} .cc-ficha__datos dd{margin:0;color:var(--cc-texto)} /* ---------- Inicio: hero ---------- */ /* El hueco de arriba suma la altura de la cabecera solo donde se superpone (vista local, ver preview.css) */ .cc-hero{min-height:min(100svh,940px);display:grid;align-items:center;padding-block:calc(var(--cc-cab-hueco,0px) + 3rem) 5rem} .cc-hero__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:3rem;align-items:center} .cc-hero__titular{font-size:clamp(2.6rem,6.2vw,5.4rem);margin:0 0 1.5rem} .cc-hero__titular em{font-style:normal;color:var(--cc-rojo)} .cc-hero__botones{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem} .cc-hero__moviles{display:flex;justify-content:center;align-items:center;gap:1rem} .cc-hero__capa{flex:0 1 31%} .cc-hero__capa:nth-child(2){margin-top:4rem} .cc-hero__capa .cc-movil{max-width:220px} /* ---------- Inicio: manifiesto ---------- */ .cc-manifiesto__texto{font-family:var(--cc-f-titular);font-weight:600;font-size:clamp(1.8rem,4.4vw,3.4rem);line-height:1.18;letter-spacing:-.025em;max-width:30ch;margin:0;color:var(--cc-texto)} @media (max-width:860px){.cc-hero__grid{grid-template-columns:1fr}.cc-hero{padding-top:calc(var(--cc-cab-hueco,0px) + 1.5rem)}} /* ---------- Inicio: clientes ---------- */ .cc-clientes{padding-block:2.2rem;border-block:1px solid var(--cc-borde);display:grid;gap:1rem} .cc-clientes .ef-marq-grupo span{font-family:var(--cc-f-titular);font-weight:600;font-size:1.2rem;color:var(--cc-texto-2);white-space:nowrap} .cc-clientes .ef-marq-grupo span::after{content:"✦";color:var(--cc-rojo);margin-left:var(--ef-hueco,2.5rem);font-size:.8em} /* ---------- Inicio: servicios (bento) ---------- */ .cc-servicios .ef-bento-item{text-decoration:none;color:var(--cc-texto);min-height:230px} .cc-servicios .ef-bento-item h3{font-family:var(--cc-f-titular);font-size:1.45rem;letter-spacing:-.02em;margin:0 0 .4rem} .cc-servicios .ef-bento-item p{color:var(--cc-texto-2)} .cc-servicio-num{font-family:var(--cc-f-titular);font-size:.85rem;font-weight:600;color:var(--cc-rojo);margin-bottom:auto} /* ---------- Inicio: trabajos destacados (scroll horizontal) ---------- */ .cc-destacados .ef-hz-titulo{font-family:var(--cc-f-titular)} .cc-destacados .ef-hz-item a{display:block;text-decoration:none;color:inherit} .cc-destacados .ef-hz-media{background:var(--cc-superficie)} .cc-destacados .ef-hz-media img{transition:transform .9s var(--cc-ease)} .cc-destacados .ef-hz-item a:hover img{transform:scale(1.04)} .cc-destacados .ef-hz-item h3{font-family:var(--cc-f-titular);color:var(--cc-texto)} .cc-destacados .ef-hz-item p{color:var(--cc-texto-2)} .cc-destacados__pie{margin-top:2rem} /* ---------- Inicio: huequi (historia fijada) ---------- */ .cc-huequi .ef-hist-paso p{color:var(--cc-texto-2)} .cc-huequi .ef-hist-visual{background:var(--cc-superficie);border:1px solid var(--cc-borde)} .cc-huequi .ef-hist-visual img{object-fit:contain;padding:6%} .cc-huequi .ef-hist.ef-gsap .ef-hist-barra{background:rgba(255,255,255,.12)} .cc-huequi__pie{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.5rem;margin-top:2.5rem} .cc-huequi__precio{color:var(--cc-texto-2);font-size:.95rem} /* ---------- Inicio: proceso ---------- */ .cc-proceso .ef-proceso::before{background:rgba(255,255,255,.14)} .cc-proceso .ef-proceso > li::before{border-color:rgba(255,255,255,.3)} .cc-proceso .ef-proceso p{color:var(--cc-texto-2)} .cc-proceso .ef-proceso h3{font-family:var(--cc-f-titular)} /* ---------- Inicio: cifras y equipo ---------- */ .cc-cifras .ef-cifra-txt{color:var(--cc-texto-2)} .cc-cifras .ef-cifra-num{font-family:var(--cc-f-titular)} .cc-equipo__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:2rem;margin-top:2.5rem} .cc-persona .ef-clip{aspect-ratio:4/5;max-width:340px} .cc-persona .ef-clip img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05)} .cc-persona h3{font-family:var(--cc-f-titular);font-size:1.4rem;margin:1rem 0 .1rem} .cc-persona__cargo{color:var(--cc-rojo);font-weight:600;font-size:.9rem;margin-bottom:.6rem} .cc-persona p{color:var(--cc-texto-2)} /* ---------- Cabeceras de página interior ---------- */ .cc-cabecera-pagina{padding-top:calc(var(--cc-cab-hueco,0px) + clamp(2.5rem,16vw - 5.5rem,5.5rem))} /* ---------- Trabajos ---------- */ .cc-trabajos .ef-flip-filtros button{border-color:rgba(255,255,255,.2);color:var(--cc-texto)} .cc-trabajos .ef-flip-filtros button[aria-pressed="true"]{background:var(--cc-rojo-bloque);border-color:var(--cc-rojo-bloque);color:#FFFFFF} .cc-tarjeta{display:block;text-decoration:none;color:inherit} .cc-tarjeta figure{margin:0} .cc-tarjeta__img{aspect-ratio:4/3;border-radius:var(--cc-radio-s);overflow:hidden;background:var(--cc-superficie)} .cc-tarjeta__img img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .9s var(--cc-ease)} .cc-tarjeta:hover .cc-tarjeta__img img{transform:scale(1.04)} .cc-tarjeta figcaption{display:grid;margin-top:.8rem} .cc-tarjeta strong{font-family:var(--cc-f-titular);font-size:1.15rem} .cc-tarjeta span{color:var(--cc-texto-2);font-size:.92rem} /* ---------- Caso de estudio ---------- */ .cc-caso-portada{padding-block:calc(var(--cc-cab-hueco,0px) + clamp(2.5rem,16vw - 5.5rem,5.5rem)) 4rem} .cc-caso__titulo{font-size:clamp(2.8rem,8vw,6.5rem);margin-bottom:1.2rem} .cc-caso .ef-expande{margin-bottom:2rem} .cc-encargo__grid{display:grid;grid-template-columns:1.6fr 1fr;gap:clamp(2rem,6vw,5rem);align-items:start} .cc-encargo__texto p{color:var(--cc-texto-2);font-size:1.08rem;max-width:62ch} .cc-ficha{background:var(--cc-superficie);border:1px solid var(--cc-borde);border-radius:var(--cc-radio);padding:1.8rem} .cc-ficha dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:.7rem 1.2rem} .cc-ficha dt{color:var(--cc-texto-2);font-size:.85rem;text-transform:uppercase;letter-spacing:.1em;padding-top:.15rem} .cc-ficha dd{margin:0;font-weight:500} .cc-ficha a{color:var(--cc-rojo)} @media (max-width:820px){.cc-encargo__grid{grid-template-columns:1fr}} .cc-bloque{border-top:1px solid var(--cc-borde)} .cc-bloque__cab{margin-bottom:clamp(2rem,5vw,3.5rem)} .cc-bloque__pie{margin-top:2rem} .cc-puntos{list-style:none;padding:0;margin:clamp(2rem,5vw,3.5rem) 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem} .cc-puntos li{background:var(--cc-superficie);border:1px solid var(--cc-borde);border-radius:var(--cc-radio-s);padding:1.2rem 1.3rem;color:var(--cc-texto)} .cc-puntos li::before{content:"";display:block;width:22px;height:3px;border-radius:3px;background:var(--cc-rojo);margin-bottom:.8rem} .cc-carruseles{margin-top:2.5rem} .cc-carrusel-img{width:clamp(200px,24vw,300px);aspect-ratio:4/5;object-fit:cover;border-radius:var(--cc-radio-s)} .cc-articulos{list-style:none;padding:0;margin:0;border-top:1px solid var(--cc-borde)} .cc-articulos a{display:flex;justify-content:space-between;gap:1rem;padding:1.1rem .2rem;border-bottom:1px solid var(--cc-borde);text-decoration:none;font-weight:500} .cc-articulos a:hover{color:var(--cc-rojo)} .cc-datos{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1.5rem} .cc-dato__cifra{display:block;font-family:var(--cc-f-titular);font-size:clamp(2.2rem,5vw,3.4rem);color:var(--cc-rojo)} .cc-dato__txt{color:var(--cc-texto-2)} .cc-capturas{display:grid;grid-template-columns:minmax(0,1fr);gap:1.2rem;align-items:center} .cc-capturas img{display:block;width:100%;height:auto} @media(min-width:760px){.cc-capturas{grid-template-columns:minmax(0,5fr) minmax(0,8fr)}} .cc-capturas .cc-captura:only-child{grid-column:1/-1} .cc-captura{margin:0;border-radius:var(--cc-radio-s);overflow:hidden;background:var(--cc-superficie);border:1px solid var(--cc-borde)} .cc-opinion blockquote{margin:0;font-family:var(--cc-f-titular);font-size:clamp(1.4rem,3vw,2.2rem);line-height:1.3;letter-spacing:-.02em} .cc-opinion figcaption{margin-top:1.2rem;color:var(--cc-texto-2)} .cc-siguiente .ef-lista{border-top-color:var(--cc-borde)} .cc-siguiente .ef-lista li{border-bottom-color:var(--cc-borde)} .cc-siguiente .ef-lista-meta{color:var(--cc-texto-2)} .cc-siguiente .ef-lista-titulo{font-family:var(--cc-f-titular)} /* ---------- Contacto ---------- */ .cc-contacto__grid{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(2rem,6vw,5rem);align-items:start} .cc-contacto__datos{list-style:none;margin:0;padding:0;display:grid;gap:1.6rem} .cc-contacto__datos span{display:block;font-size:.8rem;text-transform:uppercase;letter-spacing:.12em;color:var(--cc-texto-2);margin-bottom:.2rem} .cc-contacto__datos a,.cc-contacto__datos address{font-style:normal;font-size:1.2rem;font-weight:500} .cc-contacto__datos a:hover{color:var(--cc-rojo)} .cc-contacto__mapa{display:inline-block;margin-top:.4rem;font-size:.95rem!important;color:var(--cc-rojo)} @media (max-width:820px){.cc-contacto__grid{grid-template-columns:1fr}} /* ---------- Reducir movimiento ---------- */ @media (prefers-reduced-motion:reduce){ .cc-btn,.cc-destacados .ef-hz-media img,.cc-tarjeta__img img,.cc-cab__menu span,.cc-nav{transition:none!important} .cc-destacados .ef-hz-item a:hover img,.cc-tarjeta:hover .cc-tarjeta__img img{transform:none} } .cc-destacados .ef-hz-item .cc-movil{max-width:none;margin-bottom:1rem} .cc-destacados .ef-hz-item{width:clamp(220px,22vw,280px)} .cc-destacados .ef-hz-item a:hover .cc-movil img{transform:none} /* ---------- Inicio: FAQs ---------- */ .cc-faq .ef-faq{border-top-color:var(--cc-borde);max-width:860px;margin-left:0} .cc-faq .ef-faq details{border-bottom-color:var(--cc-borde)} .cc-faq .ef-faq summary{color:var(--cc-texto);font-family:var(--cc-f-titular);font-weight:600} .cc-faq .ef-faq summary:hover{color:#FFFFFF} .cc-faq .ef-faq summary::after{border-color:rgba(255,255,255,.25)} .cc-faq .ef-faq details[open] summary::after{background-color:var(--cc-rojo-bloque);border-color:var(--cc-rojo-bloque)} .cc-faq .ef-faq-resp{color:var(--cc-texto-2)} /* ---------- Mapa ---------- */ .cc-mapa{min-height:320px;border-radius:var(--cc-radio);overflow:hidden;background:var(--cc-superficie);border:1px solid var(--cc-borde)} .cc-mapa iframe{display:block;width:100%;height:100%;min-height:320px;border:0;filter:grayscale(1) invert(.9) contrast(.9)} .cc-contacto__col .cc-mapa{margin-top:2rem} :root { /* --- colour roles. Override these six and the page is rebranded. -------- */ --sc-canvas: #08090b; /* the page ground. Drift interpolates this. */ --sc-surface: #101217; /* anything raised off the ground */ --sc-ink: #f4f2ef; /* primary text */ --sc-ink-soft: #9a9ba1; /* secondary text. Tinted, never flat gray. */ --sc-accent: #d8ff3e; /* ONE accent. It owns a region, not confetti. */ --sc-accent-ink: #08090b; /* text that sits on the accent */ --sc-hairline: color-mix(in oklab, var(--sc-ink) 12%, transparent); --sc-hairline-strong: color-mix(in oklab, var(--sc-ink) 22%, transparent); /* --- type. Two families max. Display carries voice, text carries prose. - */ --sc-font-display: "Instrument Sans", "Geist", system-ui, sans-serif; --sc-font-text: "Geist", system-ui, sans-serif; --sc-font-mono: "Geist Mono", ui-monospace, monospace; /* Fluid ramp. Tracking tightens as size grows because a face set at 6rem with 0 tracking reads loose; this is optical correction, not decoration. */ --sc-t-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.82rem); --sc-t-sm: clamp(0.875rem, 0.84rem + 0.18vw, 0.95rem); --sc-t-base: clamp(1rem, 0.96rem + 0.22vw, 1.125rem); --sc-t-lg: clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem); --sc-t-xl: clamp(1.6rem, 1.35rem + 1.2vw, 2.25rem); --sc-t-2xl: clamp(2.1rem, 1.6rem + 2.4vw, 3.4rem); --sc-t-3xl: clamp(2.8rem, 1.9rem + 4.2vw, 5rem); --sc-t-4xl: clamp(3.4rem, 1.9rem + 6.6vw, 7.5rem); --sc-track-tight: -0.035em; --sc-track-snug: -0.02em; --sc-track-normal: -0.005em; --sc-track-wide: 0.08em; --sc-leading-none: 0.94; --sc-leading-tight: 1.06; --sc-leading-body: 1.62; --sc-measure: 62ch; /* --- space. 4px base: the useful middle steps an 8-only scale misses. --- */ --sc-1: 0.25rem; --sc-2: 0.5rem; --sc-3: 0.75rem; --sc-4: 1rem; --sc-5: 1.5rem; --sc-6: 2rem; --sc-7: 3rem; --sc-8: 4rem; --sc-9: 6rem; --sc-10: 8rem; --sc-11: 12rem; /* Section rhythm is fluid so a phone doesn't inherit desktop air. */ --sc-section: clamp(4.5rem, 9vw, 11rem); --sc-gutter: clamp(1.25rem, 5vw, 5.5rem); --sc-maxw: 82rem; /* --- radius. Pick one scale for the page and hold it. ------------------- */ --sc-r-sm: 6px; --sc-r-md: 12px; --sc-r-lg: 20px; --sc-r-pill: 999px; /* --- elevation. Every shadow has an offset AND a soft blur, and is tinted to the canvas hue. A zero-offset coloured halo is decoration, not depth, so there isn't one here. ---------------------------------- */ --sc-shadow-color: 220 40% 2%; --sc-e1: 0 1px 2px hsl(var(--sc-shadow-color) / 0.28), 0 2px 6px -1px hsl(var(--sc-shadow-color) / 0.20); --sc-e2: 0 2px 4px hsl(var(--sc-shadow-color) / 0.24), 0 8px 18px -4px hsl(var(--sc-shadow-color) / 0.30); --sc-e3: 0 4px 8px hsl(var(--sc-shadow-color) / 0.22), 0 18px 40px -8px hsl(var(--sc-shadow-color) / 0.38), 0 48px 90px -24px hsl(var(--sc-shadow-color) / 0.30); /* Edge light: a 1px top highlight sells a raised surface better than any amount of blur, because real raised things catch light on their lip. */ --sc-edge: inset 0 1px 0 color-mix(in oklab, var(--sc-ink) 10%, transparent); /* --- motion. Built-in CSS easings are too weak for UI. ------------------ */ --sc-ease-out: cubic-bezier(0.23, 1, 0.32, 1); --sc-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); --sc-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1); --sc-d-fast: 160ms; --sc-d-base: 240ms; --sc-d-slow: 420ms; --sc-z-stage: 1; --sc-z-copy: 20; --sc-z-chrome: 60; } /* =============================================================== DEVICES == Driven by the engine. Restyle your own markup, not these. */ .sc-act--pinned { position: relative; } .sc-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: clip; z-index: var(--sc-z-stage); } /* scrub / sequence media */ .sc-stage :is(video[data-sc-scrub], canvas[data-sc-sequence], .sc-stage__poster) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } video[data-sc-scrub] { opacity: 0; transition: opacity 380ms var(--sc-ease-out); } .sc-has-clip video[data-sc-scrub] { opacity: 1; } /* The poster is a live frame-holder, not a placeholder: it stays up until a real video frame has painted, which is what stops the blank-stage flash. */ .sc-stage__poster { z-index: 0; transition: opacity 380ms var(--sc-ease-out); } .sc-has-clip .sc-stage__poster { opacity: 0; } /* A scrim only where text sits. A full-frame darkening layer flattens the image everywhere to fix contrast in one corner. */ .sc-scrim { position: absolute; inset: 0; pointer-events: none; z-index: 1; background: linear-gradient( var(--sc-scrim-angle, 180deg), color-mix(in oklab, var(--sc-canvas) var(--sc-scrim-a, 78%), transparent) 0%, color-mix(in oklab, var(--sc-canvas) 30%, transparent) 42%, transparent 68%); } /* Point the scrim at the copy. A scrim gradient that darkens the top while the copy sits at the bottom fixes contrast nowhere and flattens the image everywhere, which is the most common way text-over-video goes wrong. */ .sc-scrim--bottom { --sc-scrim-angle: 0deg; } .sc-scrim--left { --sc-scrim-angle: 90deg; } .sc-scrim--right { --sc-scrim-angle: 270deg; } /* Corner scrims, for copy anchored to a corner. An edge gradient has to darken a whole band across the frame to cover one corner; a corner gradient puts the density where the text is and leaves the rest of the image alone. Pair with .sc-copy--lead / .sc-copy--trail. */ .sc-scrim--lead { background: linear-gradient(to top right, color-mix(in oklab, var(--sc-canvas) 94%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 72%, transparent) 30%, color-mix(in oklab, var(--sc-canvas) 30%, transparent) 52%, transparent 72%); } .sc-scrim--trail { background: linear-gradient(to top left, color-mix(in oklab, var(--sc-canvas) 94%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 72%, transparent) 30%, color-mix(in oklab, var(--sc-canvas) 30%, transparent) 52%, transparent 72%); } /* A band across the bottom, for copy that spans the full width of the frame. That is what both corner anchors become below 860px, and it is also the right shape whenever the copy block is wider than a corner. */ .sc-scrim--band { background: linear-gradient(to top, color-mix(in oklab, var(--sc-canvas) 94%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 74%, transparent) 22%, color-mix(in oklab, var(--sc-canvas) 30%, transparent) 42%, transparent 58%); } .sc-scrim--vignette { background: radial-gradient(120% 90% at 50% 45%, transparent 40%, color-mix(in oklab, var(--sc-canvas) 70%, transparent) 100%); } /* copy over a stage. max-width is in rem, never ch. A `ch` on this container resolves against the CONTAINER's font-size (body size), not the display size of the heading inside it, so `max-width: 20ch` here silently produces a ~180px column and wraps a hero headline to six lines. Set a ch measure on the text element itself. */ .sc-copy { position: absolute; z-index: var(--sc-z-copy); inset-inline: var(--sc-gutter); max-width: min(46rem, 76vw); will-change: opacity, transform; } .sc-copy--lead { left: var(--sc-gutter); bottom: clamp(3rem, 12vh, 9rem); } /* inset-inline FIRST. It is the shorthand for left+right, so declaring it after `left: 50%` resets left to auto and the block drifts off the left edge. */ .sc-copy--center { inset-inline: auto; left: 50%; top: 50%; translate: -50% -50%; text-align: center; } .sc-copy--trail { inset-inline: auto; right: var(--sc-gutter); bottom: clamp(3rem, 12vh, 9rem); text-align: right; } /* cue defaults: the engine writes opacity/transform inline, these are the pre-paint state so nothing flashes before the first read() */ [data-sc-cue] { opacity: 0; will-change: opacity, transform; } .sc-ready [data-sc-cue] { transition: none; } /* kinetic split */ .sc-split { display: inline-block; overflow: hidden; vertical-align: top; } /* Descenders live below the baseline; a line mask clipped to the line box eats the tails off g, y, p, j. The padding buys them room back. */ .sc-split--line { display: block; padding-bottom: 0.14em; margin-bottom: -0.14em; } .sc-split__i { display: inline-block; will-change: transform, opacity; } .sc-is-split { opacity: 1 !important; } /* horizontal rail */ [data-sc-pan] { display: flex; will-change: transform; } /* reveal + parallax */ [data-sc-reveal] { will-change: clip-path; } [data-sc-parallax] { will-change: transform; } /* flow reveal (fires once) */ [data-sc-in], [data-sc-stagger] > * { opacity: 0; transform: translate3d(0, 14px, 0); transition: opacity 620ms var(--sc-ease-out), transform 620ms var(--sc-ease-out); } [data-sc-in].sc-in, [data-sc-stagger] > .sc-in { opacity: 1; transform: none; } /* pointer devices */ [data-sc-tilt] { transform-style: preserve-3d; will-change: transform; } [data-sc-magnet] { will-change: transform; } /* isolation always; position only if nothing more specific already set it. Written with :where() (zero specificity) on purpose: a plain `position: relative` here has the same weight as `.sc-stage` and, being later in the file, silently wins. A stage carrying both attributes then stops being sticky and the whole act scrolls away instead of pinning. */ [data-sc-spotlight] { isolation: isolate; } :where([data-sc-spotlight]) { position: relative; } [data-sc-spotlight]::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2; background: radial-gradient( 28rem 28rem at calc(var(--sc-mx, 0.5) * 100%) calc(var(--sc-my, 0.5) * 100%), color-mix(in oklab, var(--sc-accent) 16%, transparent), transparent 70%); opacity: 0; transition: opacity var(--sc-d-slow) var(--sc-ease-out); } [data-sc-spotlight]:hover::after { opacity: 1; } /* =========================================================== WORLDFLIGHT == One fixed stage for the whole page. The only thing in document flow is the spacer, and it is empty. If you find yourself adding a section here, you want act mode instead: the moment a real block scrolls past the fixed stage, the page has a seam again and the whole point is gone. */ [data-sc-mode="worldflight"] { position: relative; } .sc-world { position: fixed; inset: 0; overflow: clip; z-index: var(--sc-z-stage); background: var(--sc-canvas); } /* Every leg is mounted for the life of the page and stacked in the same box. The engine owns opacity, visibility and z-index here; do not set them. */ .sc-world__seg { position: absolute; inset: 0; opacity: 0; will-change: opacity; } .sc-world__seg > :is(video, img, canvas) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* The poster is the frame-holder AND the first camera move: the engine pushes it in slowly until a real decoded frame is available to replace it. */ .sc-world__poster { z-index: 0; transform-origin: 50% 50%; transition: opacity 420ms var(--sc-ease-out); } .sc-world__seg > video { z-index: 1; } .sc-world__seg.sc-has-clip .sc-world__poster { opacity: 0; } /* The act stylesheet lights a clip through its ancestor act. A worldflight leg has no act, so match the class the engine also writes on the clip itself. */ video[data-sc-scrub].sc-has-clip { opacity: 1; } /* The copy layer is fixed too, and inert by default: the engine hands pointer-events back to a block only while it is actually legible. */ .sc-world__copy { position: fixed; inset: 0; z-index: var(--sc-z-copy); pointer-events: none; } .sc-world__scrim { position: absolute; inset: 0; pointer-events: none; z-index: 0; } [data-sc-copy] { opacity: 0; pointer-events: none; will-change: opacity, transform; } .sc-ready [data-sc-copy] { transition: none; } /* The track. Empty on purpose. */ .sc-world__spacer { pointer-events: none; } /* scroll progress */ [data-sc-progress] { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: var(--sc-z-chrome); background: var(--sc-accent); transform-origin: 0 50%; transform: scaleX(0); will-change: transform; } /* ----------------------------------------------------------- atmosphere -- Depth is not only shadow. Grain keeps a flat dark ground from banding, and it is the difference between "a dark page" and "a lit room". */ .sc-grain { position: fixed; inset: 0; pointer-events: none; z-index: 3; opacity: 0.045; } .sc-grain::before { content: ""; position: absolute; inset: -50%; background-image: url("data:image/svg+xml;utf8,"); } /* -------------------------------------------------------- reduced motion -- */ @media (prefers-reduced-motion: reduce) { /* Fewer and gentler, not zero. Opacity still carries the reveal so the page is comprehensible; every position change is dropped. */ [data-sc-in], [data-sc-stagger] > * { transform: none; transition-duration: 220ms; } [data-sc-parallax], [data-sc-pan], .sc-split__i { transform: none !important; } /* A wipe is a position change too. Show reveal content settled. */ [data-sc-reveal] { clip-path: none !important; } /* A rail's transform IS its navigation, not decoration. Zeroing it the way parallax and kinetic type are zeroed parks the act on its first screenful and makes everything past the fold unreachable: a device degrading into missing content. Hand the travel back to the reader as an ordinary scroll region instead, so the same items are all still gettable without motion. A build that would rather re-lay the rail out as a grid can still do that; this is the floor, not the ceiling. */ [data-sc-act="pan"] .sc-stage, [data-sc-act="pan"] [data-sc-stage] { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x proximity; } [data-sc-pan] > * { scroll-snap-align: center; } [data-sc-spotlight]::after { display: none; } /* A worldflight keeps its whole story here. No clip is ever fetched, so the posters are the film, and they cross-dissolve through exactly the same seams at exactly the same scroll positions. The push-in and the copy drift are the only things that go. */ .sc-world__poster, [data-sc-copy] { transform: none !important; } } /* --------------------------------------------------------------- mobile -- */ @media (max-width: 860px) { .sc-copy { inset-inline: var(--sc-gutter); max-width: none; } .sc-copy--trail { text-align: left; } .sc-stage { height: 100svh; } /* .sc-copy--trail re-anchors to the left and spans the full width here, so a bottom-RIGHT corner gradient darkens the one corner the copy just left and guarantees a contrast failure over any bright clip. Point the density at the copy: the same band .sc-scrim--band paints. */ .sc-scrim--trail { background: linear-gradient(to top, color-mix(in oklab, var(--sc-canvas) 94%, transparent) 0%, color-mix(in oklab, var(--sc-canvas) 74%, transparent) 22%, color-mix(in oklab, var(--sc-canvas) 30%, transparent) 42%, transparent 58%); } } /* ================= Inicio cinemático (scroll-craft) ================= Los actos fijados solo se maquetan como "escena" cuando el motor les pone .sc-stage. Sin JS o con "reducir movimiento" todo cae a secciones normales y legibles. */ main.cc-inicio{ --sc-canvas:#0D0D10;--sc-surface:#17171C;--sc-ink:#F4F2EF;--sc-ink-soft:#A9A9B3; --sc-accent:#F83028;--sc-accent-ink:#FFFFFF; --sc-font-display:var(--cc-f-titular);--sc-font-text:var(--cc-f-texto); --cc-margen:clamp(1.25rem,3.5vw,3rem); --cc-seguro:calc(var(--cc-cab-hueco,0px) + 1.5rem); overflow-x:clip } /* Sin motor (sin JS) nada se queda escondido */ html:not(.sc-ready) main.cc-inicio [data-sc-cue],html:not(.sc-ready) main.cc-inicio [data-sc-in]{opacity:1;transform:none} main.cc-inicio .cc-botones{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.8rem} main.cc-inicio .cc-btn{transition:background-color .18s,border-color .18s,color .18s,transform .14s var(--cc-ease)} main.cc-inicio .cc-btn:active{transform:scale(.97)} /* ---------- 1. Portal ---------- */ .cc-portal{position:relative;background:var(--cc-fondo)} .cc-portal__escena.sc-stage{background:var(--cc-fondo)} .cc-portal__escena.sc-stage > .cc-muro,.cc-portal__escena.sc-stage > .cc-muro__velo,.cc-portal__escena.sc-stage > .cc-tapa, .cc-portal__escena.sc-stage > .cc-portal__moviles{position:absolute;inset:0} .cc-tapa{display:block;width:100%;height:100%;pointer-events:none;visibility:hidden;z-index:3} .cc-tapa.cc-lista{visibility:visible} .cc-tapa text{font-family:var(--cc-f-titular);font-weight:800} .cc-tapa__cloud{letter-spacing:-.02em} .cc-tapa__cloud--tinta{fill:#F4F2EF} .cc-tapa__o{fill:#F83028} .cc-tapa__cantabria{font-weight:600!important;letter-spacing:.42em;fill:rgba(244,242,239,.72)} /* Muro de trabajos: un plano inclinado de columnas que derivan solas y con el scroll */ .cc-muro{overflow:hidden;perspective:1700px;z-index:1;background:#0A0A0D;pointer-events:none} .cc-muro.cc-abierto{pointer-events:auto} .cc-muro__plano{position:absolute;left:50%;top:50%;width:max(150vw,1500px);display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(.8rem,1.4vw,1.6rem); transform:translate(-50%,-50%) translate(var(--cc-muro-dx,0px),var(--cc-muro-dy,0px)) translate(var(--cc-muro-x,0px),var(--cc-muro-y,0px)) rotateX(24deg) rotateZ(-11deg) scale(var(--cc-muro-esc,1));transform-style:preserve-3d} .cc-muro__col{will-change:transform} .cc-muro__deriva{display:flex;flex-direction:column;gap:clamp(.8rem,1.4vw,1.6rem);animation:cc-deriva 90s linear infinite} .cc-muro__col:nth-child(even) .cc-muro__deriva{animation-direction:reverse;animation-duration:110s} @keyframes cc-deriva{to{transform:translateY(calc(-50% - clamp(.4rem,.7vw,.8rem)))}} .cc-tesela{position:relative;display:block;border-radius:14px;overflow:hidden;background:#17171C;box-shadow:0 30px 60px -28px rgba(0,0,0,.85);outline-offset:4px;transition:transform .18s var(--cc-ease)} .cc-tesela img,.cc-tesela video{width:100%;height:100%;object-fit:cover;object-position:top;display:block} .cc-tesela--escritorio{aspect-ratio:16/10} .cc-tesela--movil{aspect-ratio:9/16;padding:8px;border-radius:30px;background:#1D1D23} .cc-tesela__pantalla{display:block;width:100%;height:100%;overflow:hidden;border-radius:22px;background:#fff} .cc-tesela--movil img{height:auto;animation:cc-recorre-tesela 26s ease-in-out infinite alternate} @keyframes cc-recorre-tesela{0%,10%{transform:translateY(0)}90%,100%{transform:translateY(-62%)}} .cc-tesela--reel{aspect-ratio:9/16} .cc-tesela--post{aspect-ratio:4/5} .cc-tesela__nombre{position:absolute;left:0;right:0;bottom:0;padding:2.2rem .9rem .7rem;font:600 .9rem/1.2 var(--cc-f-titular);color:#fff; background:linear-gradient(to top,rgba(13,13,16,.92),transparent);opacity:0;transition:opacity .18s} .cc-tesela:focus-visible .cc-tesela__nombre{opacity:1} @media (hover:hover) and (pointer:fine){.cc-tesela:hover{transform:translateY(-6px)}.cc-tesela:hover .cc-tesela__nombre{opacity:1}} .cc-muro__velo{z-index:2;pointer-events:none;opacity:0; background:radial-gradient(120% 85% at 0% 100%,rgba(13,13,16,.94) 0%,rgba(13,13,16,.78) 34%,rgba(13,13,16,.2) 62%,transparent 78%)} html:not(.sc-ready) .cc-muro__velo{opacity:1} /* Móviles con reels: el plano de delante */ .cc-portal__moviles{z-index:4;pointer-events:none} .cc-portal__movil{position:absolute;will-change:transform,opacity} .cc-portal__movil .cc-movil{max-width:none} .cc-portal__movil[data-cc-movil="0"]{right:21vw;top:calc(var(--cc-seguro) + 3vh);width:clamp(150px,12.5vw,215px);rotate:-7deg} .cc-portal__movil[data-cc-movil="1"]{right:6vw;top:calc(var(--cc-seguro) + 14vh);width:clamp(165px,14vw,240px);rotate:6deg} .cc-portal__movil[data-cc-movil="2"]{right:36vw;top:calc(var(--cc-seguro) + 30vh);width:clamp(110px,8.5vw,150px);rotate:-12deg;filter:blur(1.2px) brightness(.8)} /* Texto del hero y del muro */ .cc-portal__copy{position:relative;z-index:5;padding:var(--cc-seguro) var(--cc-margen) 2rem;max-width:min(52rem,62vw)} .cc-portal__escena.sc-stage .cc-portal__copy{position:absolute;left:0;top:0} .cc-portal__titular{font-family:var(--cc-f-titular);font-weight:800;font-size:clamp(2.1rem,3.9vw,3.7rem);line-height:1.02;letter-spacing:-.038em;margin:0 0 1.1rem;text-wrap:balance;color:var(--cc-texto)} .cc-portal__titular em{font-style:normal;color:var(--cc-rojo)} /* Lo que somos y dónde, dentro del H1 (SEO) pero con aspecto de antetítulo */ .cc-portal__ante{display:block;margin-bottom:1.1rem;font:600 .78rem/1.3 var(--cc-f-texto);letter-spacing:.16em;text-transform:uppercase;color:var(--cc-rojo)} .cc-portal__texto{font-size:clamp(1.02rem,1.25vw,1.18rem);line-height:1.6;color:var(--cc-texto-2);max-width:44ch;margin:0;text-wrap:pretty} .cc-muro__copy{position:relative;z-index:5;padding:2rem var(--cc-margen) 3rem;max-width:40rem} .cc-portal__escena.sc-stage .cc-muro__copy{position:absolute;left:0;bottom:clamp(1.5rem,7vh,5rem)} .cc-muro__copy .cc-h2{text-wrap:balance} .cc-muro__copy .cc-lead{color:#C9C9D1} /* Sin escena (sin JS o reducir movimiento): hero arriba y el muro como bloque normal debajo */ .cc-portal__escena:not(.sc-stage){display:flex;flex-direction:column} .cc-portal__escena:not(.sc-stage) > .cc-portal__copy{order:1} .cc-portal__escena:not(.sc-stage) > .cc-tapa{order:2;height:min(42vh,360px)} .cc-portal__escena:not(.sc-stage) > .cc-muro{order:3;position:relative;height:110vh} .cc-portal__escena:not(.sc-stage) > .cc-muro__velo{display:none} .cc-portal__escena:not(.sc-stage) > .cc-muro__copy{order:4} .cc-portal__escena:not(.sc-stage) > .cc-portal__moviles{display:none} .cc-portal__escena:not(.sc-stage) .cc-muro{pointer-events:auto} @media (max-width:860px){ .cc-portal__copy{max-width:none} .cc-portal__titular{font-size:clamp(2rem,8.6vw,2.6rem)} /* inicio.js calcula el hueco libre bajo los botones (--cc-movil-top/-w); si no caben, se ocultan */ .cc-portal__movil[data-cc-movil="0"]{right:auto;left:12vw;top:calc(var(--cc-movil-top,40svh) + 2%);width:var(--cc-movil-w,31vw)} .cc-portal__movil[data-cc-movil="1"]{right:12vw;top:var(--cc-movil-top,35svh);width:var(--cc-movil-w,34vw)} .cc-portal--sin-moviles .cc-portal__moviles{display:none} .cc-portal__movil[data-cc-movil="2"]{display:none} .cc-muro__plano{width:260vw} .cc-muro__copy{max-width:none} /* En móvil el texto va encima del muro: velo de abajo arriba para que las teselas no se mezclen con él */ .cc-muro__velo{background:linear-gradient(to top,rgba(13,13,16,.97) 0%,rgba(13,13,16,.92) 42%,rgba(13,13,16,.45) 64%,transparent 82%)} } /* Pantallas estrechas o bajas: que los dos botones quepan en una fila y la palabra CLOUD no pise el texto */ @media (max-width:380px),(max-width:860px) and (max-height:680px){ .cc-portal__titular{font-size:clamp(1.75rem,8vw,2.2rem);margin-bottom:.8rem} .cc-portal__texto{font-size:.95rem;line-height:1.5} .cc-portal__copy .cc-btn{padding:.75em 1.1em;font-size:.95rem;min-height:44px} .cc-portal__copy .cc-botones{flex-wrap:nowrap;gap:.6rem} } /* ---------- 2. Manifiesto y clientes ---------- */ .cc-manifiesto{padding-block:clamp(5rem,12vw,10rem) clamp(3rem,7vw,5rem)} .cc-manifiesto__texto{font-family:var(--cc-f-titular);font-weight:600;font-size:clamp(1.9rem,4.4vw,4rem);line-height:1.12;letter-spacing:-.03em;max-width:24ch;margin:0;color:var(--cc-texto);text-wrap:balance} .cc-clientes{margin-top:clamp(3.5rem,8vw,6rem);display:grid;gap:.4rem} .cc-clientes .ef-marq-grupo span{font-family:var(--cc-f-titular);font-weight:800;font-size:clamp(1.6rem,3.4vw,3rem);letter-spacing:-.03em;white-space:nowrap;color:var(--cc-texto)} .cc-clientes .ef-marquesina + .ef-marquesina .ef-marq-grupo span{color:transparent;-webkit-text-stroke:1.2px rgba(244,242,239,.42)} .cc-clientes .ef-marq-grupo span::after{content:"";display:inline-block;width:.32em;height:.32em;border-radius:50%;background:var(--cc-rojo);margin-left:var(--ef-hueco,2.5rem);vertical-align:.2em} /* ---------- 3. Servicios: cartas que se apilan ---------- */ .cc-servicios{position:relative} .cc-servicios__escena{padding:var(--cc-seguro) var(--cc-margen) 3rem} .cc-servicios__cabeza{max-width:var(--cc-ancho);margin-inline:auto} .cc-servicios__cabeza .cc-h2{margin-bottom:.5rem} .cc-servicios__cabeza .cc-lead{margin-bottom:0;max-width:52ch} .cc-cartas{display:grid;gap:1.25rem;max-width:1180px;margin:2rem auto 0} .cc-carta{position:relative;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);min-height:min(62vh,600px);border-radius:28px;overflow:hidden; background:#17171C;border:1px solid var(--cc-borde);color:var(--cc-texto);box-shadow:0 -24px 60px -34px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.06)} .cc-carta::after{content:"";position:absolute;inset:0;background:#08080A;opacity:var(--cc-tapada,0);pointer-events:none;z-index:3} .cc-carta__texto{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(1.6rem,3.6vw,3.4rem)} .cc-carta h3{font-family:var(--cc-f-titular);font-weight:800;font-size:clamp(2rem,4vw,3.7rem);line-height:1;letter-spacing:-.04em;margin:0 0 1rem;text-wrap:balance} .cc-carta p{color:var(--cc-texto-2);font-size:1.08rem;max-width:34ch;margin:0 0 1.6rem} .cc-carta__enlace{align-self:flex-start;font-weight:600;text-decoration:none;color:var(--cc-texto);border-bottom:2px solid var(--cc-rojo);padding-bottom:.2rem;transition:color .16s} .cc-carta__enlace:hover{color:var(--cc-rojo)} .cc-carta__visual{position:relative;min-height:16rem} .cc-navegador{position:absolute;left:0;top:13%;width:122%;border-radius:14px;overflow:hidden;background:#1D1D23;box-shadow:0 40px 80px -30px rgba(0,0,0,.85)} .cc-navegador img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top} .cc-navegador__barra{display:flex;align-items:center;gap:6px;padding:10px 12px;background:#24242B} .cc-navegador__barra i{width:10px;height:10px;border-radius:50%;background:#45454F;transition:background-color .3s} .cc-navegador__barra span{margin-left:12px;font-size:.78rem;color:#A9A9B3;background:#17171C;border-radius:6px;padding:3px 10px;min-width:12ch;min-height:1.5em} .cc-carta__movil{position:absolute;left:-7%;bottom:-6%;width:24%;z-index:2} .cc-carta--claro{background:#F4F2EF;color:#0D0D10;border-color:transparent} .cc-carta--claro p{color:#4A4A55} .cc-carta--claro .cc-carta__enlace{color:#0D0D10} .cc-carta--claro .cc-navegador{background:#E4E1DC}.cc-carta--claro .cc-navegador__barra{background:#D9D6D0} .cc-carta--claro .cc-navegador__barra span{background:#F4F2EF;color:#4A4A55} .cc-carta--rojo{background:var(--cc-rojo-bloque);color:#fff;border-color:transparent} .cc-carta--rojo p{color:#fff} .cc-carta--rojo .cc-carta__enlace{color:#fff;border-color:#fff} .cc-carta--rojo .cc-carta__enlace:hover{color:#0D0D10;border-color:#0D0D10} .cc-carta--solo-texto{grid-template-columns:1fr} .cc-carta--solo-texto h3{font-size:clamp(2.8rem,7.4vw,7rem);max-width:12ch} .cc-redes .cc-redes__post{position:absolute;width:38%;aspect-ratio:4/5;border-radius:14px;overflow:hidden;box-shadow:0 30px 60px -25px rgba(0,0,0,.85)} .cc-redes .cc-redes__post img{width:100%;height:100%;object-fit:cover} .cc-redes .cc-redes__post:nth-child(1){left:4%;top:16%;rotate:-7deg} .cc-redes .cc-redes__post:nth-child(2){left:30%;top:8%;rotate:4deg} .cc-redes .cc-redes__reel{position:absolute;right:8%;top:12%;width:28%;max-width:220px;rotate:8deg} .cc-carta__visual--app img{position:absolute;left:0;top:13%;width:118%;border:10px solid #1D1D23;border-radius:22px;box-shadow:0 40px 80px -30px rgba(0,0,0,.85)} /* Escena fijada: las cartas se superponen en el mismo sitio y las mueve inicio.js */ .cc-servicios__escena.sc-stage{display:flex;flex-direction:column} .cc-servicios__escena.sc-stage .cc-cartas{position:relative;flex:1;width:100%;margin-top:clamp(2.2rem,7vh,4.5rem);margin-bottom:clamp(.5rem,3vh,2rem)} .cc-servicios__escena.sc-stage .cc-carta{position:absolute;inset:0;min-height:0;will-change:transform;transform-origin:50% 0} .cc-servicios__escena.sc-stage .cc-carta:not(:first-child){transform:translate3d(0,105vh,0)} @media (max-width:860px){ .cc-carta{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto} .cc-carta__visual{order:-1;min-height:12rem;overflow:hidden} .cc-navegador,.cc-carta__visual--app img{left:8%;top:12%;width:120%} .cc-carta__movil{left:3%;bottom:4%;width:26%} .cc-carta__texto{padding:1.4rem 1.4rem 1.6rem} .cc-carta h3{font-size:clamp(1.8rem,8vw,2.4rem);margin-bottom:.6rem} .cc-carta p{font-size:1rem;margin-bottom:1rem} .cc-carta--solo-texto h3{font-size:clamp(2.6rem,12vw,3.6rem)} .cc-servicios__cabeza .cc-lead{display:none} } /* ---------- 4. Cifras ---------- */ .cc-cifras{padding-block:clamp(4rem,9vw,7rem)} .cc-cifras__fila{display:grid;grid-template-columns:repeat(3,1fr);border-block:1px solid var(--cc-borde)} .cc-cifra{padding:clamp(1.6rem,3vw,2.6rem) clamp(1rem,2.5vw,2rem)} .cc-cifra + .cc-cifra{border-left:1px solid var(--cc-borde)} .cc-cifra__num{font-family:var(--cc-f-titular);font-weight:800;font-size:clamp(3rem,8vw,7.5rem);line-height:.95;letter-spacing:-.05em;margin:0;font-variant-numeric:tabular-nums;white-space:nowrap} .cc-cifra__signo{color:var(--cc-rojo)} .cc-cifra__txt{color:var(--cc-texto-2);margin:.8rem 0 0;max-width:22ch} @media (max-width:700px){.cc-cifras__fila{grid-template-columns:1fr}.cc-cifra + .cc-cifra{border-left:0;border-top:1px solid var(--cc-borde)}} /* ---------- 5. huequi: móvil en 3D ---------- */ .cc-hq{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(1.5rem,4vw,4rem);padding:var(--cc-seguro) var(--cc-margen) 2rem;max-width:1320px;margin-inline:auto} .cc-hq .cc-h2{font-size:clamp(2rem,4.2vw,3.6rem);text-wrap:balance} .cc-hq__pasos{display:grid;margin:1.4rem 0 2rem} .cc-hq__paso{grid-area:1/1} .cc-hq__paso h3{font-family:var(--cc-f-titular);font-size:clamp(1.4rem,2.2vw,1.9rem);letter-spacing:-.02em;margin:0 0 .4rem;color:var(--cc-texto)} .cc-hq__paso p{color:var(--cc-texto-2);margin:0;max-width:40ch} .cc-hq__pie{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.4rem} .cc-hq__precio{color:var(--cc-texto-2);font-size:.95rem} .cc-hq__escena{position:relative;height:min(78vh,700px);display:grid;place-items:center;perspective:1400px} .cc-hq__brillo{position:absolute;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(248,48,40,.42),rgba(248,48,40,.1) 55%,transparent);filter:blur(10px)} .cc-hq__movil{position:relative;width:min(300px,30vh);aspect-ratio:9/19.5;transform-style:preserve-3d;transform:rotateX(6deg) rotateY(-16deg);will-change:transform} .cc-hq__cara{position:absolute;inset:0;border-radius:42px;padding:9px;background:#1D1D23;border:1px solid rgba(255,255,255,.12);backface-visibility:hidden;-webkit-backface-visibility:hidden;container-type:size;overflow:hidden; box-shadow:inset 0 1px 0 rgba(255,255,255,.12)} .cc-hq__cara img{width:100%;height:100%;object-fit:cover;object-position:top;border-radius:33px;background:#fff} .cc-hq__cara--frente{transform:translateZ(5px)} .cc-hq__cara--dorso{transform:rotateY(180deg) translateZ(5px)} .cc-hq__canto{position:absolute;inset:2px;border-radius:40px;background:#0E0E12;transform:translateZ(0)} .cc-hq__cara img.cc-hq__apaisada{max-width:none;position:absolute;left:50%;top:50%;width:calc(100cqh - 18px);height:calc(100cqw - 18px);translate:-50% -50%;rotate:90deg;border-radius:30px;object-fit:cover;object-position:top left;opacity:0} .cc-hq__cara--frente.cc-apaisado img:not(.cc-hq__apaisada){opacity:0} .cc-hq__cara--frente.cc-apaisado img.cc-hq__apaisada{opacity:1} .cc-hq__sombra{position:absolute;bottom:4%;width:46%;height:22px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.75),transparent);filter:blur(6px)} .cc-hq:not(.sc-stage) .cc-hq__pasos{gap:1.6rem} .cc-hq:not(.sc-stage) .cc-hq__paso{grid-area:auto} @media (max-width:860px){ .cc-hq{grid-template-columns:1fr;align-content:start;gap:.5rem} .cc-hq.sc-stage .cc-hq__escena{position:absolute;inset:auto 0 0 0;height:46svh;z-index:0} .cc-hq .cc-h2{font-size:clamp(1.7rem,7.4vw,2.3rem)} .cc-hq__texto{position:relative;z-index:1} .cc-hq.sc-stage .cc-hq__texto{position:static} .cc-hq.sc-stage .cc-hq__texto > *{position:relative;z-index:1} .cc-hq.sc-stage .cc-hq__escena{bottom:6rem;height:37svh} .cc-hq__movil{width:min(170px,24svh)} .cc-hq__pasos{margin:.8rem 0 1rem} .cc-hq.sc-stage .cc-hq__pie{position:absolute;left:var(--cc-margen);right:var(--cc-margen);bottom:1rem;z-index:2} .cc-hq__precio{font-size:.85rem} } /* ---------- 6. Equipo ---------- */ .cc-equipo{padding-block:clamp(5rem,11vw,9rem)} .cc-equipo__rejilla{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(1rem,2.5vw,2rem);row-gap:2.5rem} .cc-equipo__cabeza{grid-column:1/8} .cc-persona--0{grid-column:1/6} .cc-persona--1{grid-column:8/12;margin-top:clamp(4rem,12vw,11rem)} .cc-persona__foto{margin:0 0 1.2rem;aspect-ratio:4/5;overflow:hidden;border-radius:var(--cc-radio)} .cc-persona__foto img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05);clip-path:inset(100% 0 0 0);transform:scale(1.12); transition:clip-path 1.1s var(--cc-ease),transform 1.4s var(--cc-ease),filter 1.4s ease .5s} .cc-persona__foto.sc-in img,html:not(.sc-ready) .cc-persona__foto img{clip-path:inset(0);transform:none;filter:grayscale(0) contrast(1.02)} .cc-persona h3{font-family:var(--cc-f-titular);font-size:clamp(1.4rem,2.2vw,1.9rem);letter-spacing:-.02em;margin:0 0 .1rem} .cc-persona__cargo{color:var(--cc-rojo);font-weight:600;font-size:.92rem;margin:0 0 .6rem} .cc-persona p{color:var(--cc-texto-2);max-width:42ch} @media (max-width:760px){.cc-equipo__cabeza,.cc-persona--0,.cc-persona--1{grid-column:1/-1}.cc-persona--1{margin-top:0;width:82%;justify-self:end}} @media (prefers-reduced-motion:reduce){.cc-persona__foto img{clip-path:inset(0);transform:none;transition:filter 1s ease}} /* ---------- 7. La web que se construye sola ---------- */ .cc-proceso__escena{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:center;gap:clamp(1.5rem,4vw,4.5rem);padding:var(--cc-seguro) var(--cc-margen) 2rem;max-width:1320px;margin-inline:auto} .cc-pasos{list-style:none;margin:1.6rem 0 0;padding:0 0 0 1.6rem;position:relative;display:grid;gap:clamp(.7rem,1.8vh,1.3rem)} .cc-pasos::before,.cc-pasos::after{content:"";position:absolute;left:0;top:.4rem;bottom:.4rem;width:2px;background:rgba(255,255,255,.12)} .cc-pasos::after{background:var(--cc-rojo);transform-origin:top;transform:scaleY(var(--cc-avance,1))} .cc-pasos li{opacity:.34;transition:opacity .25s} .cc-pasos li.cc-activo{opacity:1} .cc-pasos h3{font-family:var(--cc-f-titular);font-size:clamp(1.15rem,1.7vw,1.45rem);letter-spacing:-.02em;margin:0 0 .15rem} .cc-pasos p{color:var(--cc-texto-2);margin:0;font-size:.98rem;max-width:44ch} .cc-obra{position:relative} .cc-obra__ventana{border-radius:16px;overflow:hidden;background:#1D1D23;box-shadow:0 50px 100px -40px rgba(0,0,0,.9);border:1px solid var(--cc-borde)} .cc-obra__ventana.cc-publicada .cc-navegador__barra i:first-child{background:#2BD46B} .cc-obra__lienzo{position:relative;aspect-ratio:16/10;background:#F4F2EF;overflow:hidden} .cc-obra__boceto{position:absolute;inset:0;width:100%;height:100%} .cc-obra__trazos path{fill:none;stroke:#1A1A20;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1} .cc-obra__cajas rect{fill:#DAD6CF} .cc-obra__cajas{opacity:0} .cc-obra__web{position:absolute;inset:0;clip-path:inset(0 100% 0 0);filter:grayscale(1)} .cc-obra__web img{width:100%;height:100%;object-fit:cover;object-position:top} .cc-obra__movil{position:absolute;right:-5%;bottom:-9%;width:23%;opacity:0} .cc-obra__movil .cc-movil{max-width:none} .cc-obra__movil .cc-movil__pantalla img{animation:none} .cc-proceso__escena:not(.sc-stage) .cc-pasos li{opacity:1} @media (max-width:860px){ .cc-proceso__escena{grid-template-columns:1fr;align-content:start;gap:1.2rem} .cc-pasos{gap:.5rem;margin-top:1rem} .cc-pasos p{display:none} .cc-pasos li.cc-activo p{display:block} .cc-obra{margin-right:14%} .cc-obra__movil{right:-16%;width:30%} } /* ---------- FAQ y contacto ---------- */ .cc-faq__rejilla{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(1.5rem,5vw,5rem);align-items:start} .cc-faq__rejilla .cc-h2{position:sticky;top:calc(var(--cc-cab-hueco,0px) + 6rem)} @media (max-width:860px){.cc-faq__rejilla{grid-template-columns:1fr}.cc-faq__rejilla .cc-h2{position:static}} /* ---------- 9. ¿Hablamos? ---------- */ .cc-hablamos{position:relative;background:var(--cc-fondo);color:#fff} .cc-hablamos__escena{display:grid;place-items:center;text-align:center;padding:var(--cc-seguro) var(--cc-margen) 3rem;background:var(--cc-fondo)} .cc-hablamos__rojo{position:absolute;inset:0;background:var(--cc-rojo-bloque)} .cc-hablamos__escena:not(.sc-stage){position:relative;background:var(--cc-rojo-bloque);padding-block:clamp(5rem,12vw,9rem)} .cc-hablamos__copy{position:relative;z-index:2} .cc-hablamos__titular{font-family:var(--cc-f-titular);font-weight:800;font-size:clamp(3.6rem,15vw,15rem);line-height:.9;letter-spacing:-.06em;margin:0;color:#fff; transform:scale(calc(.62 + .38 * min(1, var(--sc-p, 1) * 2.2)));transform-origin:50% 60%} .cc-hablamos__resto p{font-size:clamp(1.05rem,1.8vw,1.35rem);max-width:40ch;margin:1.6rem auto 0;color:#fff} .cc-hablamos__resto .cc-botones{justify-content:center} .cc-hablamos .cc-btn--secundario{border-color:rgba(255,255,255,.7);color:#fff} .cc-hablamos .cc-btn--secundario:hover{border-color:#fff;background:rgba(255,255,255,.08)} @media (prefers-reduced-motion:reduce){.cc-hablamos__titular{transform:none}} /* Base de la cabecera y el pie globales. Se cargan en TODA la web (también en las páginas antiguas de Divi), así que nada de reglas sobre *, html, body, img, a o :focus-visible sin ámbito (lo comprueba qa.py). */ .cc-cab,.cc-pie,.ef-wa,.ef-wa-barra{font-family:var(--cc-f-texto);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased} :where(.cc-cab,.cc-pie,.ef-wa,.ef-wa-barra),:where(.cc-cab,.cc-pie,.ef-wa,.ef-wa-barra) *,:where(.cc-cab,.cc-pie,.ef-wa,.ef-wa-barra) *::before,:where(.cc-cab,.cc-pie,.ef-wa,.ef-wa-barra) *::after,.ef-cursor-punto,.ef-cursor-aro,.ef-cursor-aro *{box-sizing:border-box} :where(.cc-cab,.cc-pie,.ef-wa,.ef-wa-barra) img,:where(.cc-cab,.cc-pie,.ef-wa,.ef-wa-barra) video{max-width:100%;display:block} :where(.cc-cab,.cc-pie,.ef-wa,.ef-wa-barra) a{color:inherit} :where(.cc-cab,.cc-pie,.ef-wa,.ef-wa-barra) :is(h1,h2,h3,h4,h5,h6){color:inherit} :where(.cc-cab,.cc-pie,.ef-wa,.ef-wa-barra) :focus-visible{outline:3px solid var(--cc-rojo);outline-offset:3px} /* position:relative para que el z-index actúe (el menú móvil va dentro). En WordPress la cabecera ocupa su sitio (sticky de Divi) y lleva fondo propio porque la sección de Divi es transparente y en las páginas antiguas el fondo es blanco. En local, preview.css la fija y la deja transparente sobre el hero. */ .cc-cab{position:relative;z-index:9990;color:var(--cc-texto);background:var(--cc-fondo)} .cc-cab.ef-compacta{color:var(--cc-texto);background:var(--ef-cab-fondo);border-bottom:1px solid var(--cc-borde)} .cc-cab__in{height:100%;display:flex;align-items:center;gap:2rem} .cc-cab__logo img{height:46px;width:auto} .cc-cab.ef-compacta .cc-cab__logo img{height:38px} .cc-nav{margin-left:auto} .cc-nav ul{display:flex;gap:1.6rem;list-style:none;margin:0;padding:0} .cc-nav a{text-decoration:none;font-weight:500;font-size:.98rem;color:var(--cc-texto);padding:.4rem 0;border-bottom:2px solid transparent;transition:border-color .25s,color .25s} .cc-nav a:hover{color:#FFFFFF;border-bottom-color:var(--cc-rojo)} .cc-nav a[aria-current="page"]{border-bottom-color:var(--cc-rojo)} .cc-cab__cta{min-height:44px;padding:.7em 1.2em} .cc-cab__menu{display:none;width:48px;height:48px;border:0;background:none;color:inherit;cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:7px} .cc-cab__menu span{display:block;width:24px;height:2px;background:currentColor;transition:transform .35s var(--cc-ease)} .cc-cab__menu[aria-expanded="true"] span:first-child{transform:translateY(4.5px) rotate(45deg)} .cc-cab__menu[aria-expanded="true"] span:last-child{transform:translateY(-4.5px) rotate(-45deg)} @media (max-width:960px){ .cc-cab__menu{display:flex;margin-left:auto} .cc-cab__cta{display:none} .cc-nav{position:fixed;inset:0;margin:0;background:var(--cc-fondo);display:grid;place-content:center;opacity:0;visibility:hidden;transition:opacity .35s,visibility 0s .35s;z-index:-1} .cc-nav.cc-abierto{opacity:1;visibility:visible;transition-delay:0s} .cc-nav ul{flex-direction:column;align-items:center;gap:1.4rem} .cc-nav a{font-family:var(--cc-f-titular);font-size:2rem;font-weight:800} } /* Con el menú abierto, la cabecera no puede tener filtros ni transformaciones: atraparían el menú a pantalla completa */ .cc-cab.cc-menu-abierto{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;transform:none!important} /* Con el menú abierto, el contenido no se pinta: nada (3D, vídeos, efectos fijos) puede colarse por encima del menú */ html.cc-con-menu body > :not(.cc-cab):not(script):not(style){visibility:hidden} .cc-pie{background:#08080A;border-top:1px solid var(--cc-borde);padding-block:4.5rem 0;color:var(--cc-texto-2);font-size:.95rem} .cc-pie__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:2.5rem} .cc-pie__marca img{height:52px;width:auto;margin-bottom:1rem} .cc-pie__titulo{font-family:var(--cc-f-titular);font-size:.85rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cc-texto);margin:0 0 1rem} .cc-pie ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem} .cc-pie a{text-decoration:none;color:var(--cc-texto-2)} .cc-pie a:hover{color:var(--cc-texto)} .cc-pie address{font-style:normal} .cc-pie__redes{grid-auto-flow:column;justify-content:start;gap:1.2rem!important;margin-top:1.2rem!important} .cc-pie__legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;margin-top:3.5rem;padding-block:1.6rem;border-top:1px solid var(--cc-borde);font-size:.85rem} .cc-pie__legal p{margin:0} .cc-pie__legal ul{grid-auto-flow:column;gap:1.4rem} @media (max-width:900px){.cc-pie__grid{grid-template-columns:1fr 1fr}} @media (max-width:767px){.cc-pie{padding-bottom:76px}} @media (max-width:560px){.cc-pie__grid{grid-template-columns:1fr}} /* ===================================================== tema propio (sin Divi) Lo que antes hacía Divi: fondo de la página y cabecera fija. Va el último en cada CSS generado. */ html{scroll-padding-top:96px} body{margin:0;background:var(--cc-fondo);color:var(--cc-texto);font-family:var(--cc-f-texto);-webkit-font-smoothing:antialiased} *,*::before,*::after{box-sizing:border-box} .cc-cab{position:fixed;top:0;left:0;right:0;background:transparent} /* La cabecera fija se superpone: las cabeceras de página suman su altura */ :root{--cc-cab-hueco:88px} .admin-bar .cc-cab{top:32px} @media (max-width:782px){.admin-bar .cc-cab{top:46px}} /* ===================================================== base de las páginas de WordPress (blog, legales, 404) */ main.cc-tema{display:block;background:var(--cc-fondo);color:var(--cc-texto);font-family:var(--cc-f-texto);font-size:17px;line-height:1.6;padding:calc(var(--cc-cab-hueco) + clamp(2.5rem,6vw,5rem)) 0 clamp(4rem,9vw,7rem);min-height:70vh} :where(main.cc-tema) img{max-width:100%;height:auto} :where(main.cc-tema) a{color:inherit} .cc-tema__estrecho{max-width:760px} .cc-tema__ante{font:600 .8rem/1.2 var(--cc-f-texto);letter-spacing:.14em;text-transform:uppercase;color:var(--cc-rojo);margin:0 0 1rem} .cc-tema__ante a{text-decoration:none} .cc-tema__ante a:hover{text-decoration:underline} .cc-tema__titulo{font:800 clamp(2.2rem,6vw,4.2rem)/1.03 var(--cc-f-titular);letter-spacing:-.04em;margin:0 0 1.2rem;text-wrap:balance} /* ===================================================== listados del blog */ .cc-blog__cabeza{margin-bottom:clamp(2.5rem,5vw,4rem)} .cc-blog__lead{margin-bottom:2rem} .cc-blog__cats{display:flex;flex-wrap:wrap;gap:.5rem} .cc-blog__cats a{padding:.55em 1.1em;border:1px solid rgba(255,255,255,.18);border-radius:999px;font-size:.92rem;text-decoration:none;color:var(--cc-texto-2);transition:border-color .2s,color .2s} .cc-blog__cats a:hover{border-color:var(--cc-texto);color:var(--cc-texto)} .cc-blog__cats a[aria-current]{background:var(--cc-texto);border-color:var(--cc-texto);color:var(--cc-fondo)} .cc-blog__vacio{color:var(--cc-texto-2)} .cc-blog__buscar{margin:0 0 2.5rem} .cc-entradas{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:clamp(1.25rem,2.5vw,2rem)} .cc-entrada{background:var(--cc-superficie);border:1px solid var(--cc-borde);border-radius:var(--cc-radio);overflow:hidden;transition:transform .25s var(--cc-ease),border-color .25s} .cc-entrada:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.2)} .cc-entrada__enlace{display:flex;flex-direction:column;height:100%;text-decoration:none;color:inherit} .cc-entrada__enlace:focus-visible{outline:2px solid var(--cc-rojo);outline-offset:4px;border-radius:var(--cc-radio)} .cc-entrada__img{margin:0;aspect-ratio:16/10;background:#1D1D23;overflow:hidden} .cc-entrada__img img{width:100%;height:100%;object-fit:cover;display:block} .cc-entrada__sin-img{display:block;width:100%;height:100%;background:radial-gradient(120% 90% at 10% 0%,rgba(248,48,40,.45),transparent 60%),#1D1D23} .cc-entrada__texto{display:flex;flex-direction:column;gap:.55rem;padding:1.4rem 1.5rem 1.6rem;flex:1} .cc-entrada__cat{margin:0;font:600 .75rem/1 var(--cc-f-texto);letter-spacing:.12em;text-transform:uppercase;color:var(--cc-rojo)} .cc-entrada__titulo{margin:0;font:600 1.28rem/1.22 var(--cc-f-titular);letter-spacing:-.02em;text-wrap:balance} .cc-entrada__resumen{margin:0;color:var(--cc-texto-2);font-size:.97rem;line-height:1.55} .cc-entrada__meta{margin:auto 0 0;padding-top:.6rem;font-size:.85rem;color:var(--cc-texto-2)} .cc-paginacion{margin-top:3rem} .cc-paginacion .nav-links{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center} .cc-paginacion .page-numbers{min-width:44px;min-height:44px;display:inline-grid;place-items:center;padding:0 1rem;border:1px solid rgba(255,255,255,.18);border-radius:999px;text-decoration:none} .cc-paginacion .page-numbers.current{background:var(--cc-texto);color:var(--cc-fondo);border-color:var(--cc-texto)} .cc-paginacion .screen-reader-text,.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} /* «Del blog» en el inicio y «Sigue leyendo» en los artículos */ .cc-ultimas{background:var(--cc-fondo);color:var(--cc-texto);padding:clamp(4rem,9vw,7rem) 0;font-family:var(--cc-f-texto)} .cc-ultimas__cabeza{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:1rem;margin-bottom:2rem} .cc-ultimas__cabeza .cc-h2{margin:0} .cc-ultimas__todo{color:var(--cc-texto);font-weight:600;text-decoration:none;border-bottom:1.5px solid var(--cc-rojo);padding-bottom:.15em} .cc-ultimas--relacionadas{padding-bottom:0} .cc-ultimas--relacionadas .cc-h2{margin-bottom:2rem} /* ===================================================== artículo */ .cc-articulo__cabeza{margin-bottom:2rem} .cc-articulo__meta{color:var(--cc-texto-2);margin:0} .cc-articulo__portada{margin:0 auto clamp(2rem,5vw,3.5rem)} .cc-articulo__portada img{width:100%;max-height:560px;object-fit:cover;border-radius:var(--cc-radio);display:block} .cc-articulo__cierre{margin:clamp(3rem,6vw,4.5rem) 0 0;padding:clamp(1.6rem,4vw,2.4rem);border-radius:var(--cc-radio);background:radial-gradient(120% 120% at 0% 0%,rgba(248,48,40,.28),transparent 55%),var(--cc-superficie);border:1px solid var(--cc-borde)} .cc-articulo__cierre p{color:var(--cc-texto-2);margin:0 0 1.4rem} .cc-botones{display:flex;flex-wrap:wrap;gap:.75rem} /* Texto largo: entradas del blog y páginas legales (contenido de WordPress tal cual) */ .cc-prosa{font-size:1.08rem;line-height:1.75;color:#E4E2DF;overflow-wrap:break-word} .cc-prosa>*{margin-block:0 1.25em} .cc-prosa h2,.cc-prosa h3,.cc-prosa h4{font-family:var(--cc-f-titular);color:var(--cc-texto);letter-spacing:-.025em;line-height:1.2;margin:2em 0 .7em;text-wrap:balance} .cc-prosa h2{font-size:clamp(1.55rem,3.2vw,2.1rem);font-weight:800} .cc-prosa h3{font-size:clamp(1.25rem,2.4vw,1.5rem);font-weight:600} .cc-prosa h4{font-size:1.15rem;font-weight:600} .cc-prosa a{color:var(--cc-texto);text-decoration:underline;text-decoration-color:var(--cc-rojo);text-decoration-thickness:2px;text-underline-offset:3px} .cc-prosa a:hover{color:var(--cc-rojo)} .cc-prosa strong{color:var(--cc-texto)} .cc-prosa ul,.cc-prosa ol{padding-left:1.3em} .cc-prosa li{margin-bottom:.45em} .cc-prosa li::marker{color:var(--cc-rojo)} .cc-prosa blockquote{margin-inline:0;padding:.3em 0 .3em 1.4em;border-left:3px solid var(--cc-rojo);color:var(--cc-texto);font-size:1.15em} .cc-prosa img{border-radius:var(--cc-radio-s);height:auto} .cc-prosa figure{margin-inline:0} .cc-prosa figcaption,.cc-prosa .wp-caption-text{font-size:.88rem;color:var(--cc-texto-2);margin-top:.6em;text-align:center} .cc-prosa .wp-caption{max-width:100%} .cc-prosa .aligncenter{display:block;margin-inline:auto} .cc-prosa .alignleft{float:left;margin:.3em 1.5em 1em 0;max-width:50%} .cc-prosa .alignright{float:right;margin:.3em 0 1em 1.5em;max-width:50%} .cc-prosa table{width:100%;border-collapse:collapse;font-size:.95rem;display:block;overflow-x:auto} .cc-prosa th,.cc-prosa td{border:1px solid rgba(255,255,255,.14);padding:.6em .8em;text-align:left} .cc-prosa th{background:var(--cc-superficie);color:var(--cc-texto)} .cc-prosa code{background:var(--cc-superficie);padding:.15em .4em;border-radius:6px;font-size:.92em} .cc-prosa pre{background:var(--cc-superficie);padding:1.2em;border-radius:var(--cc-radio-s);overflow-x:auto} .cc-prosa hr{border:0;border-top:1px solid rgba(255,255,255,.14);margin:2.5em 0} .cc-prosa::after{content:"";display:table;clear:both} @media (max-width:600px){.cc-prosa .alignleft,.cc-prosa .alignright{float:none;margin:0 0 1em;max-width:100%}} /* ===================================================== buscador y 404 */ .cc-buscar{display:flex;gap:.6rem;max-width:520px} .cc-buscar input{flex:1} /* Los