/* =========================================================== QKStudio 2026 — tema nativo Paleta: #918fa7 (gris claro) · #261e25 (gris oscuro) · #f1f1f1 (blanco) Aislamiento: los estilos de página viven bajo :where(body.qk-native) (especificidad 0) y no tocan contenido hecho con Elementor (body.qk-elementor, proyectos). Header, menú y footer aplican siempre. Generado a partir de la maqueta v1 (tools/mkcss) + extras al final del archivo. =========================================================== */ /* Reset acotado: solo páginas nativas y el "chrome" del tema */ :where(body.qk-native,.site-header,.site-footer,.menu-overlay), :where(body.qk-native,.site-header,.site-footer,.menu-overlay) *, :where(body.qk-native,.site-header,.site-footer,.menu-overlay) *::before, :where(body.qk-native,.site-header,.site-footer,.menu-overlay) *::after{ box-sizing:border-box; } @media (prefers-reduced-motion:no-preference){ html{ scroll-behavior:smooth; } } body{ margin:0; } body.qk-native, body.qk-elementor{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } body.qk-native{ font-family:var(--font-body); color:var(--white); background:var(--gray-dark); overflow-x:hidden; } body.no-scroll{ overflow:hidden; } :where(body.qk-native,.site-header,.site-footer,.menu-overlay) :is(img,video){ max-width:100%; display:block; } :where(body.qk-native,.site-header,.site-footer,.menu-overlay) a{ color:inherit; text-decoration:none; } :where(body.qk-native,.site-header,.site-footer,.menu-overlay) :is(ul,ol){ margin:0; padding:0; list-style:none; } :where(body.qk-native,.site-header,.site-footer,.menu-overlay) button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; padding:0; } :where(body.qk-native,.site-header,.site-footer,.menu-overlay) :is(h1,h2,h3,h4){ font-family:var(--font-display); font-weight:600; margin:0; line-height:1.05; } :where(body.qk-native,.site-header,.site-footer,.menu-overlay) p{ margin:0; } :where(.site-header,.site-footer,.menu-overlay){ font-family:var(--font-body); color:var(--white); } /* Accesibilidad */ .screen-reader-text{ border:0; clip:rect(1px,1px,1px,1px); clip-path:inset(50%); height:1px; margin:-1px; overflow:hidden; padding:0; position:absolute; width:1px; word-wrap:normal; } .skip-link.screen-reader-text:focus{ clip:auto; clip-path:none; height:auto; width:auto; margin:0; overflow:visible; position:fixed; left:12px; top:12px; z-index:1000; padding:12px 18px; background:var(--white); color:var(--gray-dark); border-radius:8px; font-weight:600; text-decoration:none; } :where(body.qk-native,.site-header,.site-footer,.menu-overlay) :focus-visible{ outline:2px solid var(--white); outline-offset:3px; border-radius:4px; } :where(body.qk-native) .ct-card :focus-visible{ outline-offset:2px; } /* ===== CHROME (header, menú, footer, botones): se aplica en TODAS las páginas ===== */ :root{ --qk-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.5 4.5H20v10.5z'/%3E%3Cpath d='M5.2 19l11-11' stroke='%23000' stroke-width='3' stroke-linecap='round' fill='none'/%3E%3C/svg%3E"); --gray-light:#918fa7; --gray-dark:#261e25; --white:#f1f1f1; --dark-90: rgba(38,30,37,.94); --dark-70: rgba(38,30,37,.72); --dark-40: rgba(38,30,37,.4); --dark-15: rgba(38,30,37,.15); --dark-05: rgba(38,30,37,.05); --light-30: rgba(241,241,241,.3); --light-15: rgba(241,241,241,.15); --light-08: rgba(241,241,241,.08); --font-display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif; --font-body: "Inter", "Helvetica Neue", Arial, sans-serif; --container: 1360px; --pad: clamp(20px, 5vw, 64px); --radius: 18px; --ease: cubic-bezier(.16,.84,.44,1); } .container{ width:100%; max-width:var(--container); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); } .btn{ display:inline-flex; align-items:center; gap:.6em; padding:1em 1.7em; border-radius:100px; font-family:var(--font-body); font-weight:600; font-size:.95rem; transition:transform .45s var(--ease), background-color .3s ease, color .3s ease, border-color .3s ease; white-space:nowrap; } .btn-primary{ background:var(--white); color:var(--gray-dark); } .btn-primary:hover{ transform:translateY(-2px) scale(1.02); background:var(--gray-light); } .btn-primary-inverse{ background:var(--gray-dark); color:var(--white); } .btn-primary-inverse:hover{ transform:translateY(-2px) scale(1.02); background:var(--gray-light); color:var(--gray-dark); } .btn-ghost{ border:1px solid var(--light-30); color:var(--white); background:transparent; } .btn-ghost:hover{ border-color:var(--white); background:var(--light-08); } .btn-text{ font-family:var(--font-body); font-weight:600; font-size:.92rem; color:var(--white); border-bottom:1px solid var(--light-30); padding-bottom:.15em; transition:border-color .3s ease, opacity .3s ease; } .btn-text:hover{ border-color:var(--white); opacity:.8; } .btn-arrow{ display:inline-block; flex:none; width:1.05rem; height:1.05rem; font-size:0; line-height:0; background:currentColor; -webkit-mask:var(--qk-arrow) center/contain no-repeat; mask:var(--qk-arrow) center/contain no-repeat; transition:transform .35s var(--ease); } .btn:hover .btn-arrow{ transform:translate(3px,-3px); } .site-header{ position:fixed; top:0; left:0; width:100%; z-index:200; padding:22px 0; transition:background-color .4s ease, padding .4s ease, border-color .4s ease, transform .5s var(--ease); border-bottom:1px solid transparent; } .site-header .container{ display:flex; align-items:center; justify-content:space-between; gap:24px; } .site-header.is-solid{ background:var(--dark-90); backdrop-filter:blur(10px); padding:14px 0; border-color:var(--light-08); } .site-header.is-hidden{ transform:translateY(-130%); } .scroll-progress{ position:fixed; top:0; left:0; height:2px; width:0%; background:#88869c; z-index:400; pointer-events:none; } .header-left{ display:flex; align-items:center; gap:20px; } .hamburger{ width:44px; height:44px; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:5px; transition:opacity .3s ease; } .hamburger:hover{ opacity:.65; } .hamburger span{ width:18px; height:1.5px; background:var(--white); display:block; transition:transform .35s var(--ease), opacity .35s ease; } .hamburger:hover span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); } .hamburger:hover span:nth-child(2){ opacity:0; } .hamburger:hover span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); } .menu-open .hamburger span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); } .menu-open .hamburger span:nth-child(2){ opacity:0; } .menu-open .hamburger span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); } .logo{ display:inline-flex; align-items:center; } .logo img{ height:26px; width:auto; filter:invert(1) brightness(2); } @keyframes logoRedraw{ 0%{ clip-path:inset(0 0 0 0); } 38%{ clip-path:inset(0 100% 0 0); } 40%{ clip-path:inset(0 100% 0 0); } 100%{ clip-path:inset(0 0% 0 0); } } .logo:hover img{ animation:logoRedraw .9s var(--ease) 1; } .header-nav{ display:flex; align-items:center; gap:8px; } .header-nav .nav-link{ padding:10px 18px; font-size:.95rem; font-weight:500; border-radius:100px; transition:background-color .3s ease; } .header-nav .nav-link:hover{ background:var(--light-08); } .header-nav .nav-link.pill{ background:var(--white); color:var(--gray-dark); font-weight:600; margin-left:8px; display:inline-flex; align-items:center; gap:.5em; } .header-nav .nav-link.pill:hover{ background:var(--gray-light); } .menu-overlay{ position:fixed; inset:0; z-index:190; background:var(--gray-dark); display:flex; flex-direction:column; justify-content:center; padding:120px var(--pad) 60px; clip-path:circle(4% at 52px 47px); opacity:0; pointer-events:none; transition:clip-path .7s var(--ease), opacity .1s linear .6s; } .menu-open .menu-overlay{ opacity:1; pointer-events:auto; clip-path:circle(150% at 52px 47px); transition:clip-path .7s var(--ease), opacity 0s; } .menu-overlay-list{ display:flex; flex-direction:column; gap:2px; } .menu-overlay-list a{ font-family:var(--font-display); font-size:clamp(1.5rem,3.4vw,2.5rem); font-weight:600; line-height:1.15; color:var(--gray-light); padding:.08em 0; display:inline-block; transition:color .3s ease, transform .3s ease; } .menu-overlay-list a:hover{ color:var(--white); transform:translateX(14px); } .menu-overlay-foot{ margin-top:60px; display:flex; flex-wrap:wrap; gap:14px 40px; color:var(--gray-light); font-size:.9rem; } .menu-overlay-foot a:hover{ color:var(--white); } .site-footer{ padding-top:100px; background:var(--gray-dark); } .footer-grid{ display:grid; grid-template-columns:1.2fr .8fr .8fr; gap:60px; padding-bottom:70px; border-bottom:1px solid var(--light-08); } .footer-col h2{ font-size:1.7rem; margin-bottom:20px; } .footer-col .footer-logo img{ height:28px; filter:invert(1) brightness(2); margin-bottom:28px; } .footer-contact{ display:flex; flex-direction:column; gap:14px; } .footer-contact .fc-label{ color:var(--gray-light); font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; margin-top:10px; } .footer-contact a{ font-size:1.05rem; } .footer-contact a:hover{ color:var(--gray-light); } .footer-links{ display:flex; flex-direction:column; gap:14px; } .footer-links a{ font-size:1.05rem; transition:color .3s ease, transform .3s ease; display:inline-block; } .footer-links a:hover{ color:var(--gray-light); transform:translateX(4px); } .footer-badges{ display:flex; flex-direction:column; gap:18px; align-items:flex-start; } .footer-badges img{ height:60px; width:auto; } .footer-badges .iso-badge img{ height:70px; filter:brightness(0) invert(1) opacity(.85); } .footer-badges p{ color:var(--gray-light); font-size:.9rem; line-height:1.5; max-width:22em; } .footer-legal{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; padding:28px 0; color:var(--gray-light); font-size:.85rem; } .footer-legal .made{ order:2; } .footer-social{ display:flex; gap:14px; order:3; } .footer-social a{ width:36px; height:36px; border-radius:50%; border:1px solid var(--light-08); display:flex; align-items:center; justify-content:center; transition:border-color .3s ease, background-color .3s ease; } .footer-social a:hover{ border-color:var(--gray-light); background:var(--light-08); } .footer-social svg{ width:16px; height:16px; fill:var(--white); } @media (max-width:980px){.header-nav .nav-link:not(.pill){ display:none; }.footer-grid{ grid-template-columns:1fr; gap:44px; }} @media (max-width:600px){.menu-overlay-list a{ font-size:2.4rem; }} :root{ --ct-top:84px; } @media (max-width:980px){:root{ --ct-top:72px; }} /* ===== PÁGINAS NATIVAS: todo acotado con :where(body.qk-native) (especificidad 0) ===== */ :where(body.qk-native) .eyebrow{ display:inline-flex; align-items:center; gap:.5em; font-family:var(--font-body); font-size:.78rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--gray-light); } :where(body.qk-native) .hero{ position:relative; height:100svh; min-height:560px; width:100%; display:flex; align-items:flex-end; overflow:hidden; background:var(--gray-dark); } :where(body.qk-native) .hero-media{ position:absolute; inset:0; width:100%; height:100%; } :where(body.qk-native) .hero-media video{ width:100%; height:100%; object-fit:cover; transform:scale(1.08); will-change:transform; } :where(body.qk-native) .hero-media::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(38,30,37,.55) 0%, rgba(38,30,37,.25) 38%, rgba(38,30,37,.85) 100%); } :where(body.qk-native) .hero-content{ position:relative; z-index:2; width:100%; padding:0 0 64px; } :where(body.qk-native) .hero-content .container{ display:flex; flex-direction:column; gap:28px; } :where(body.qk-native) .hero-h1{ font-size:clamp(2.1rem, 5.2vw, 4.4rem); line-height:1.05; letter-spacing:-.01em; max-width:22em; } :where(body.qk-native) .hero-h1 .split-line{ display:block; overflow:hidden; } :where(body.qk-native) .ch{ display:inline-block; will-change:transform, opacity; } :where(body.qk-native) .hero-h1 .handwritten{ font-family:"Lacquer", system-ui; font-weight:400; font-size:1.08em; line-height:1; text-transform:lowercase; letter-spacing:.01em; display:inline-block; color:var(--white); clip-path:inset(0 100% 0 0); transition:clip-path 1.1s cubic-bezier(.65,0,.35,1); } :where(body.qk-native) .hero-h1 .handwritten.is-written{ clip-path:inset(0 0% 0 0); } :where(body.qk-native) .hero-sub{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; } :where(body.qk-native) .hero-sub-label{ color:var(--gray-light); font-size:1.05rem; } :where(body.qk-native) .hero-h2-swap{ position:relative; height:1.4em; overflow:hidden; min-width:280px; } :where(body.qk-native) .hero-h2-swap span{ position:absolute; left:0; top:0; font-family:var(--font-display); font-weight:500; font-size:1.3rem; color:var(--white); opacity:0; transform:translateY(100%); transition:transform .6s var(--ease), opacity .5s ease; } :where(body.qk-native) .hero-h2-swap span.is-active{ opacity:1; transform:translateY(0); } :where(body.qk-native) .hero-h2-swap span.is-prev{ opacity:0; transform:translateY(-100%); } :where(body.qk-native) .hero-ctas{ display:flex; align-items:center; gap:24px; flex-wrap:wrap; margin-top:8px; } :where(body.qk-native) .scroll-cue{ position:absolute; right:var(--pad); bottom:28px; z-index:2; display:flex; flex-direction:column; align-items:center; gap:10px; color:var(--light-30); font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; } :where(body.qk-native) .scroll-cue .line{ width:1px; height:44px; background:var(--light-30); position:relative; overflow:hidden; } :where(body.qk-native) .scroll-cue .line::after{ content:""; position:absolute; top:-100%; left:0; width:100%; height:100%; background:var(--white); animation:scrollcue 2.2s ease infinite; } @keyframes scrollcue{ 0%{ top:-100%; } 60%{ top:100%; } 100%{ top:100%; } } :where(body.qk-native) .cover-wrap{ position:relative; z-index:1; } :where(body.qk-native) .about-pin{ position:sticky; top:0; height:100svh; z-index:2; display:flex; align-items:center; justify-content:center; background:var(--white); color:var(--gray-dark); overflow:hidden; } :where(body.qk-native) .about-inner{ max-width:980px; padding:0 var(--pad); text-align:center; display:flex; flex-direction:column; gap:44px; align-items:center; } :where(body.qk-native) .about-text{ font-size:clamp(1.5rem, 3.4vw, 2.7rem); line-height:1.35; font-family:var(--font-display); font-weight:600; } :where(body.qk-native) .about-text .word{ color:var(--dark-15); transition:color .05s linear; } :where(body.qk-native) .about-text .word.is-filled{ color:var(--gray-dark); } :where(body.qk-native) .section{ position:relative; z-index:1; background:var(--gray-dark); padding:120px 0; } :where(body.qk-native) .section-head{ display:flex; flex-direction:column; gap:18px; margin-bottom:64px; } :where(body.qk-native) .section-head h2{ font-size:clamp(1.9rem, 4vw, 3.1rem); max-width:14em; } :where(body.qk-native) .section-head p{ color:var(--gray-light); font-size:1.05rem; max-width:42em; } :where(body.qk-native) .awards-scroller{ position:relative; } :where(body.qk-native) .award-card{ position:sticky; top:110px; background:var(--white); color:var(--gray-dark); border-radius:24px; padding:44px var(--pad); margin-bottom:24px; display:grid; grid-template-columns:120px 1fr auto; align-items:center; gap:36px; box-shadow:0 30px 60px -20px rgba(0,0,0,.45); transform:translateY(60px); opacity:0; transition:transform .6s var(--ease), opacity .6s var(--ease); min-height:170px; } :where(body.qk-native) .award-card.is-in{ transform:translateY(0); opacity:1; } :where(body.qk-native) .award-card .badge{ width:100%; aspect-ratio:1; object-fit:contain; } :where(body.qk-native) .award-card h3{ font-size:1.35rem; margin-bottom:6px; } :where(body.qk-native) .award-card .award-meta{ color:var(--gray-light); font-size:.95rem; line-height:1.5; } :where(body.qk-native) .award-card .award-year{ font-family:var(--font-display); font-size:2.4rem; color:var(--dark-15); justify-self:end; } :where(body.qk-native) .services-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--light-08); border-radius:24px; overflow:hidden; } :where(body.qk-native) .service-card{ background:var(--gray-dark); padding:44px 34px; display:flex; flex-direction:column; gap:18px; min-height:290px; transition:background-color .4s ease; } :where(body.qk-native) .service-card:hover{ background:#2f2530; } :where(body.qk-native) .service-card h3{ font-size:1.4rem; } :where(body.qk-native) .service-card ul{ display:flex; flex-direction:column; gap:6px; color:var(--gray-light); font-size:.92rem; margin-top:auto; } :where(body.qk-native) .service-card ul li::before{ content:"— "; } :where(body.qk-native) .about2{ display:grid; grid-template-columns:1.1fr .9fr; gap:80px; align-items:start; margin-bottom:64px; } :where(body.qk-native) .about2 .eyebrow{ margin-bottom:22px; } :where(body.qk-native) .about2 h2{ font-size:clamp(1.8rem,3.6vw,2.6rem); margin-bottom:24px; } :where(body.qk-native) .about2 h3{ font-family:var(--font-body); font-weight:400; font-size:1.05rem; color:var(--gray-light); line-height:1.7; } :where(body.qk-native) .logos-strip{ display:flex; flex-direction:column; gap:16px; width:100%; } :where(body.qk-native) .logos-row{ display:grid; grid-template-columns:repeat(5,1fr); gap:16px; } :where(body.qk-native) .logo-slot{ aspect-ratio:2/1; max-height:112px; border:1px solid var(--light-08); border-radius:12px; display:flex; align-items:center; justify-content:center; background:var(--light-08); overflow:hidden; position:relative; padding:18px; } :where(body.qk-native) .logo-slot img{ max-width:72%; max-height:56%; width:auto; height:auto; object-fit:contain; filter:brightness(0) invert(1); opacity:.6; transition:opacity .6s ease, filter .6s ease; } :where(body.qk-native) .logo-slot img.is-hidden{ opacity:0; } :where(body.qk-native) .about2-cta{ margin-top:28px; } :where(body.qk-native) .portfolio-section{ background:var(--gray-dark); padding:0; overflow:hidden; } :where(body.qk-native) .portfolio-pin{ height:100svh; display:flex; align-items:center; overflow:hidden; position:relative; } :where(body.qk-native) .portfolio-track{ display:flex; align-items:center; gap:48px; will-change:transform; padding:0 var(--pad); } :where(body.qk-native) .portfolio-intro{ flex:0 0 min(60vw,760px); padding-right:40px; } :where(body.qk-native) .portfolio-intro h2{ font-size:clamp(1.9rem,4.6vw,3.4rem); line-height:1.15; } :where(body.qk-native) .project-item{ flex:0 0 auto; display:flex; flex-direction:column; gap:20px; } :where(body.qk-native) .project-card{ width:min(58vh,64vw); height:min(58vh,64vw); border-radius:20px; overflow:hidden; position:relative; background:linear-gradient(150deg, var(--gray-light), var(--gray-dark)); transition:transform .5s var(--ease); } :where(body.qk-native) .project-item:hover .project-card{ transform:scale(1.045); } :where(body.qk-native) .project-card .project-img{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:.92; transition:transform .6s var(--ease); } :where(body.qk-native) .project-item:hover .project-img{ transform:scale(1.08); } :where(body.qk-native) .project-info{ padding:0 2px; } :where(body.qk-native) .project-info .project-service{ font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gray-light); } :where(body.qk-native) .project-info h3{ font-size:1.3rem; margin-top:6px; color:var(--white); } :where(body.qk-native) .press-row{ display:grid; grid-template-columns:280px 1fr; gap:36px; align-items:center; padding:32px 16px; border-top:1px solid var(--light-08); border-radius:16px; transition:background-color .35s ease, padding-left .35s ease, padding-right .35s ease; margin:0 -16px; } :where(body.qk-native) .press-row:last-child{ border-bottom:1px solid var(--light-08); } :where(body.qk-native) .press-row:hover{ background:var(--light-08); padding-left:28px; padding-right:28px; } :where(body.qk-native) .press-thumb{ width:100%; aspect-ratio:16/10; border-radius:14px; overflow:hidden; background:linear-gradient(135deg, var(--gray-light), var(--gray-dark)); transition:transform .5s var(--ease); } :where(body.qk-native) .press-row:hover .press-thumb{ transform:scale(1.03); } :where(body.qk-native) .press-cat{ color:var(--gray-light); font-size:.85rem; letter-spacing:.08em; text-transform:uppercase; } :where(body.qk-native) .press-row h3{ font-size:1.5rem; margin-top:10px; max-width:28em; } :where(body.qk-native) .reveal-toggle{ opacity:0; transform:translateY(40px); transition:opacity .7s var(--ease), transform .7s var(--ease); } :where(body.qk-native) .reveal-toggle.is-visible{ opacity:1; transform:translateY(0); } :where(body.qk-native) .cta-big{ text-align:center; padding:160px 0; } :where(body.qk-native) .cta-big h2{ font-size:clamp(2.2rem,5.6vw,4.4rem); max-width:16em; margin:0 auto 30px; } :where(body.qk-native) .cta-big h2 .split-line{ display:block; overflow:hidden; } :where(body.qk-native) .cta-big p{ color:var(--gray-light); max-width:38em; margin:0 auto 40px; font-size:1.05rem; } :where(body.qk-native) .prefooter{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:32px; padding:130px 0; background:#2b222c; } :where(body.qk-native) .prefooter h2{ font-size:clamp(1.8rem,3.6vw,2.7rem); line-height:1.3; max-width:20em; } :where(body.qk-native) .prefooter p{ color:var(--gray-light); font-size:1.02rem; line-height:1.6; max-width:36em; } :where(body.qk-native) .faq-list{ max-width:900px; margin:0 auto; } :where(body.qk-native) .faq-item{ border-top:1px solid var(--light-08); } :where(body.qk-native) .faq-list .faq-item:last-child{ border-bottom:1px solid var(--light-08); } :where(body.qk-native) .faq-q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:28px 4px; text-align:left; font-family:var(--font-display); font-size:1.25rem; } :where(body.qk-native) .faq-q .chev{ flex:none; transition:transform .4s var(--ease); color:var(--gray-light); } :where(body.qk-native) .faq-item.is-open .faq-q .chev{ transform:rotate(180deg); } :where(body.qk-native) .faq-a{ max-height:0; overflow:hidden; transition:max-height .5s var(--ease); } :where(body.qk-native) .faq-a p{ color:var(--gray-light); padding:0 4px 28px; max-width:44em; line-height:1.6; } :where(body.qk-native) .reveal{ opacity:0; transform:translateY(40px); transition:opacity .8s var(--ease), transform .8s var(--ease); } :where(body.qk-native) .reveal.is-visible{ opacity:1; transform:translateY(0); } :where(body.qk-native) .svc-hero{ padding:200px 0 100px; } :where(body.qk-native) .svc-hero .qk-bigt{ font-size:clamp(2.6rem,7vw,5.8rem); max-width:14em; } :where(body.qk-native) .svc-hero p{ color:var(--gray-light); font-size:1.15rem; max-width:38em; margin-top:26px; } :where(body.qk-native) .svc-stats{ display:flex; gap:60px; margin-top:60px; flex-wrap:wrap; } :where(body.qk-native) .svc-stat b{ display:block; font-family:var(--font-display); font-size:2.4rem; } :where(body.qk-native) .svc-stat span{ color:var(--gray-light); font-size:.9rem; } :where(body.qk-native) .svc-list{ display:flex; flex-direction:column; } :where(body.qk-native) .svc-row{ display:grid; grid-template-columns:.9fr 1.1fr; gap:60px; align-items:center; padding:80px 0; border-top:1px solid var(--light-08); } :where(body.qk-native) .svc-list .svc-row:last-child{ border-bottom:1px solid var(--light-08); } :where(body.qk-native) .svc-row .svc-index{ color:var(--gray-light); font-family:var(--font-display); font-size:1rem; margin-bottom:16px; display:block; } :where(body.qk-native) .svc-row h3{ font-size:clamp(1.6rem,3vw,2.4rem); margin-bottom:20px; } :where(body.qk-native) .svc-row ul{ display:flex; flex-wrap:wrap; gap:10px; } :where(body.qk-native) .svc-row ul li{ border:1px solid var(--light-15); border-radius:100px; padding:8px 16px; font-size:.88rem; color:var(--gray-light); } :where(body.qk-native) .svc-visual{ aspect-ratio:4/3; border-radius:22px; background:linear-gradient(150deg, var(--gray-light), var(--gray-dark)); position:relative; overflow:hidden; } :where(body.qk-native) .svc-row:nth-child(even) .svc-visual{ order:-1; } :where(body.qk-native) .svc-row:nth-child(even){ grid-template-columns:1.1fr .9fr; } :where(body.qk-native) .industries-wrap{ display:flex; flex-wrap:wrap; gap:14px; } :where(body.qk-native) .industry-tag{ border:1px solid var(--light-15); border-radius:100px; padding:14px 26px; font-size:1rem; transition:background-color .3s ease, border-color .3s ease; } :where(body.qk-native) .industry-tag:hover{ background:var(--light-08); border-color:var(--gray-light); } @media (max-width:980px){:where(body.qk-native) .about2{ grid-template-columns:1fr; gap:44px; }:where(body.qk-native) .services-grid{ grid-template-columns:1fr 1fr; }:where(body.qk-native) .award-card{ grid-template-columns:80px 1fr; }:where(body.qk-native) .award-card .award-year{ display:none; }:where(body.qk-native) .press-row{ grid-template-columns:1fr; }:where(body.qk-native) .svc-row{ grid-template-columns:1fr !important; }:where(body.qk-native) .svc-visual{ order:0 !important; }} @media (max-width:600px){:where(body.qk-native) .services-grid{ grid-template-columns:1fr; }:where(body.qk-native) .logos-row{ grid-template-columns:repeat(3,1fr); }:where(body.qk-native) .award-card{ padding:28px 20px; grid-template-columns:60px 1fr; gap:20px; }:where(body.qk-native) .svc-stats{ gap:32px; }} :where(body.qk-native) .ct-page{ position:relative; z-index:1; background:var(--gray-dark); padding:calc(var(--ct-top) + 36px) 0 90px; } :where(body.qk-native) .ct-split{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.92fr); gap:clamp(36px,6vw,110px); align-items:start; } :where(body.qk-native) .ct-left{ min-width:0; } :where(body.qk-native) .ct-intro{ min-height:calc(100vh - 330px); min-height:calc(100svh - 330px); padding-bottom:110px; display:flex; flex-direction:column; justify-content:flex-start; } :where(body.qk-native) .ct-intro h1{ font-size:clamp(3rem,7.2vw,6.6rem); line-height:.98; letter-spacing:-.03em; margin:8px 0 34px; } :where(body.qk-native) .ct-intro h1 .muted{ color:var(--gray-light); } :where(body.qk-native) .ct-intro .lead{ color:var(--white); opacity:.88; font-size:clamp(1.05rem,1.5vw,1.3rem); line-height:1.55; max-width:30em; } :where(body.qk-native) .ct-steps{ list-style:none; margin:40px 0 0; padding:0; counter-reset:ctstep; display:flex; flex-direction:column; gap:16px; max-width:30em; } :where(body.qk-native) .ct-steps li{ counter-increment:ctstep; display:grid; grid-template-columns:44px 1fr; gap:12px; color:var(--gray-light); line-height:1.5; } :where(body.qk-native) .ct-steps li::before{ content:counter(ctstep,decimal-leading-zero); font-family:var(--font-display); color:var(--white); } :where(body.qk-native) .ct-steps b{ color:var(--white); font-weight:500; display:block; } :where(body.qk-native) .ct-book{ position:sticky; top:var(--ct-top); z-index:3; background:var(--gray-dark); padding:0 0 26px; } :where(body.qk-native) .ct-book::before{ content:""; position:absolute; left:-1px; right:-1px; bottom:100%; height:var(--ct-top); background:var(--gray-dark); } :where(body.qk-native) .ct-book h2{ font-size:1.15rem; font-weight:600; margin:0 0 4px; } :where(body.qk-native) .ct-book p{ color:var(--gray-light); font-size:.95rem; margin:0 0 16px; } :where(body.qk-native) .ct-book-pill{ display:flex; align-items:center; gap:16px; background:rgba(145,143,167,.16); border-radius:999px; padding:12px 14px 12px 12px; max-width:440px; transition:background .35s ease, transform .5s var(--ease); } :where(body.qk-native) .ct-book-pill:hover{ background:rgba(145,143,167,.28); transform:translateY(-2px); } :where(body.qk-native) .ct-book-pill .avatar{ flex:none; width:52px; height:52px; border-radius:50%; background:var(--gray-light); color:var(--gray-dark); display:grid; place-items:center; font-family:var(--font-display); font-weight:700; } :where(body.qk-native) .ct-book-pill .who{ flex:1; min-width:0; line-height:1.3; } :where(body.qk-native) .ct-book-pill .who b{ display:block; font-weight:500; } :where(body.qk-native) .ct-book-pill .who span{ color:var(--gray-light); font-size:.88rem; } :where(body.qk-native) .ct-book-pill .go{ flex:none; width:44px; height:44px; border-radius:50%; background:var(--white); color:var(--gray-dark); display:grid; place-items:center; transition:transform .4s var(--ease); } :where(body.qk-native) .ct-book-pill:hover .go{ transform:rotate(45deg); } :where(body.qk-native) .ct-block{ padding-top:80px; } :where(body.qk-native) .ct-block > h2{ font-size:clamp(2.6rem,5.6vw,4.8rem); letter-spacing:-.03em; margin:0 0 40px; } :where(body.qk-native) .ct-block .faq-list{ max-width:none; margin:0; } :where(body.qk-native) .ct-locs{ border-top:1px solid var(--light-08); } :where(body.qk-native) .ct-loc{ display:grid; grid-template-columns:1fr 1.25fr; gap:20px; padding:26px 0; border-bottom:1px solid var(--light-08); } :where(body.qk-native) .ct-loc h3{ font-size:1.15rem; font-weight:500; } :where(body.qk-native) .ct-loc .code{ font-family:var(--font-display); font-weight:600; display:block; margin-bottom:6px; } :where(body.qk-native) .ct-loc address{ font-style:normal; color:var(--gray-light); line-height:1.55; } :where(body.qk-native) .ct-loc .ph{ font-style:italic; opacity:.7; } :where(body.qk-native) .ct-loc .time{ display:block; margin-top:18px; font-variant-numeric:tabular-nums; } :where(body.qk-native) .ct-loc .time:empty{ display:none; } :where(body.qk-native) .ct-loc .links{ display:flex; flex-direction:column; gap:4px; margin-top:14px; } :where(body.qk-native) .ct-loc .links a{ color:var(--gray-light); transition:color .3s ease; } :where(body.qk-native) .ct-loc .links a:hover{ color:var(--white); } :where(body.qk-native) .ct-socials a{ display:block; color:var(--gray-light); text-decoration:underline; text-underline-offset:3px; line-height:1.9; transition:color .3s ease; } :where(body.qk-native) .ct-socials a:hover{ color:var(--white); } :where(body.qk-native) .ct-end{ padding-bottom:20px; } :where(body.qk-native) .ct-block.is-end{ padding-top:0; } :where(body.qk-native) .ct-block.is-end .ct-locs{ border-top:0; } :where(body.qk-native) .ct-card{ position:sticky; top:var(--ct-top); max-height:calc(100vh - var(--ct-top) - 24px); max-height:calc(100svh - var(--ct-top) - 24px); overflow:auto; scrollbar-width:thin; scrollbar-color:var(--light-30) transparent; background:rgba(241,241,241,.05); border:1px solid var(--light-08); border-radius:26px; padding:clamp(24px,2.6vw,38px); } :where(body.qk-native) .ct-card h2{ font-size:clamp(1.3rem,2vw,1.7rem); margin-bottom:6px; } :where(body.qk-native) .ct-card .ct-card-sub{ color:var(--gray-light); margin:0 0 20px; font-size:.92rem; } :where(body.qk-native) .qk-form{ display:grid; grid-template-columns:1fr 1fr; gap:18px 22px; } :where(body.qk-native) .qk-field{ display:flex; flex-direction:column; gap:6px; position:relative; } :where(body.qk-native) .qk-field.is-full{ grid-column:1 / -1; } :where(body.qk-native) .qk-field label{ font-size:.8rem; letter-spacing:.03em; color:var(--gray-light); } :where(body.qk-native) .qk-field label .req{ color:var(--white); margin-left:3px; } :where(body.qk-native) .qk-field .opt{ opacity:.7; font-size:.74rem; margin-left:6px; } :where(body.qk-native) .qk-field input, :where(body.qk-native) .qk-field textarea{ width:100%; background:transparent; border:0; border-bottom:1px solid var(--light-30); color:var(--white); font:inherit; font-size:1rem; padding:8px 0 10px; border-radius:0; outline:none; transition:border-color .3s ease; } :where(body.qk-native) .qk-field textarea{ resize:vertical; min-height:64px; line-height:1.5; } :where(body.qk-native) .qk-field input::placeholder, :where(body.qk-native) .qk-field textarea::placeholder{ color:rgba(145,143,167,.55); } :where(body.qk-native) .qk-field input:focus, :where(body.qk-native) .qk-field textarea:focus{ border-bottom-color:var(--gray-light); } :where(body.qk-native) .qk-field.has-error input, :where(body.qk-native) .qk-field.has-error textarea{ border-bottom-color:#e58a8a; } :where(body.qk-native) .qk-field .field-error{ color:#e58a8a; font-size:.78rem; max-height:0; overflow:hidden; opacity:0; transition:max-height .3s ease, opacity .3s ease; } :where(body.qk-native) .qk-field.has-error .field-error{ max-height:40px; opacity:1; } :where(body.qk-native) .qk-hp{ position:absolute !important; left:-9999px; width:1px; height:1px; overflow:hidden; opacity:0; pointer-events:none; } :where(body.qk-native) .qk-submit{ grid-column:1 / -1; display:flex; flex-direction:column; align-items:stretch; gap:12px; margin-top:2px; } :where(body.qk-native) .qk-submit .btn{ width:100%; justify-content:center; padding-top:16px; padding-bottom:16px; } :where(body.qk-native) .qk-form .qk-legal{ color:var(--gray-light); font-size:.82rem; text-align:center; line-height:1.7; margin:0; } :where(body.qk-native) .qk-form .qk-legal a{ color:var(--white); text-decoration:underline; text-underline-offset:3px; } :where(body.qk-native) .qk-copy{ background:none; border:0; color:var(--gray-light); cursor:pointer; padding:0 0 0 6px; vertical-align:middle; } :where(body.qk-native) .qk-copy:hover{ color:var(--white); } :where(body.qk-native) .qk-copy svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.6; } :where(body.qk-native) .qk-form button[disabled]{ opacity:.6; cursor:progress; transform:none; } :where(body.qk-native) .form-status{ grid-column:1 / -1; font-size:.92rem; border-radius:14px; padding:0 16px; max-height:0; overflow:hidden; opacity:0; transition:max-height .4s ease, opacity .4s ease, padding .4s ease; } :where(body.qk-native) .form-status.is-error{ max-height:140px; opacity:1; padding:12px 16px; background:rgba(229,138,138,.12); border:1px solid rgba(229,138,138,.4); } :where(body.qk-native) .form-success{ display:none; padding:10px 0; } :where(body.qk-native) .form-success h3{ font-size:clamp(1.5rem,2.6vw,2.2rem); margin-bottom:14px; } :where(body.qk-native) .form-success p{ color:var(--gray-light); line-height:1.6; max-width:30em; margin:0 0 26px; } :where(body.qk-native) .ct-card.is-sent .qk-form, :where(body.qk-native) .ct-card.is-sent .ct-card-head{ display:none; } :where(body.qk-native) .ct-card.is-sent .form-success{ display:block; animation:ctIn .7s var(--ease) both; } @keyframes ctIn{ from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:none} } @media (max-width:980px){:where(body.qk-native) .ct-split{ grid-template-columns:1fr; gap:0; }:where(body.qk-native) .ct-left{ display:contents; }:where(body.qk-native) .ct-intro{ order:1; min-height:0; padding-bottom:44px; }:where(body.qk-native) .ct-card{ order:2; position:static; max-height:none; overflow:visible; }:where(body.qk-native) .ct-book{ order:3; position:static; background:none; padding:56px 0 0; }:where(body.qk-native) .ct-book::before{ display:none; }:where(body.qk-native) .ct-block.is-faq{ order:4; }:where(body.qk-native) .ct-block.is-locs{ order:5; }:where(body.qk-native) .ct-block.is-end{ order:6; }:where(body.qk-native) .ct-block{ padding-top:64px; }} @media (max-width:600px){:where(body.qk-native) .qk-form{ grid-template-columns:1fr; }:where(body.qk-native) .ct-loc{ grid-template-columns:1fr; gap:10px; }:where(body.qk-native) .ct-page{ padding-bottom:60px; }} /* =========================================================== EXTRAS (no vienen de la maqueta) =========================================================== */ /* --- Elementor (proyectos): el header fijo siempre sólido y espacio para que no tape el contenido --- */ /* Solo cuando se dibuja NUESTRO header (en proyectos lo reemplaza el de Elementor/UAE, que agrega body.ehf-header). */ body.qk-elementor:not(.ehf-header){ padding-top:var(--ct-top); } body.qk-elementor:not(.ehf-header) .site-header{ background:var(--dark-90); backdrop-filter:blur(10px); padding:10px 0; border-color:var(--light-08); } /* Header insertado con el shortcode [qk_header] dentro del header de Elementor/UAE: sólido y con espacio para el contenido. */ .site-header.is-embedded{ background:var(--dark-90); backdrop-filter:blur(10px); padding:10px 0; border-color:var(--light-08); } body.qk-elementor:has(.site-header.is-embedded){ padding-top:var(--ct-top); } body.qk-elementor .site-footer.is-embedded{ margin-top:0; } body.qk-elementor .site-footer{ margin-top:0; } body.admin-bar .site-header{ top:32px; } @media (max-width:782px){ body.admin-bar .site-header{ top:46px; } } /* --- Sin JavaScript: todo el contenido visible (SEO / accesibilidad) --- */ html:not(.js) :where(.reveal,.reveal-toggle,.award-card){ opacity:1 !important; transform:none !important; } html:not(.js) .hero-h1 .handwritten{ clip-path:none; } html:not(.js) .faq-a{ max-height:none; } html:not(.js) .hero-h2-swap span:first-child{ opacity:1; transform:none; } html:not(.js) .menu-overlay{ display:none; } /* --- Movimiento reducido --- */ @media (prefers-reduced-motion:reduce){ :where(body.qk-native) .reveal,:where(body.qk-native) .reveal-toggle{ opacity:1; transform:none; transition:none; } :where(body.qk-native) .award-card{ opacity:1; transform:none; transition:none; } :where(body.qk-native) .hero-h1 .handwritten{ clip-path:none; transition:none; } .scroll-cue .line::after{ animation:none; } :where(body.qk-native) .faq-a{ transition:none; } } /* --- Home: piezas que la maqueta resolvía con inline style o no tenía --- */ :where(body.qk-native) .hero-media video{ transform:none; } :where(body.qk-native) .hero-media:not(:has(video)){ background:linear-gradient(150deg,var(--gray-light),var(--gray-dark)); } :where(body.qk-native) .hero-h1 .split-line{ overflow:visible; } :where(body.qk-native) .project-card img.project-img{ width:100%; height:100%; object-fit:cover; opacity:.92; background:none; } :where(body.qk-native) .project-info h3 a.stretched::after{ content:""; position:absolute; inset:0; z-index:2; } :where(body.qk-native) .project-item{ position:relative; } :where(body.qk-native) .project-item--all{ justify-content:center; padding-right:var(--pad); } :where(body.qk-native) .press-row{ position:relative; } :where(body.qk-native) .press-row a.stretched::after{ content:""; position:absolute; inset:0; z-index:2; } :where(body.qk-native) .press-thumb img{ width:100%; height:100%; object-fit:cover; } :where(body.qk-native) .about2-cta--center{ text-align:center; } :where(body.qk-native) .about2-cta--press{ margin-top:44px; text-align:center; } :where(body.qk-native) .prefooter-inner{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:32px; } :where(body.qk-native) .logo-slot img{ width:auto; height:auto; } :where(body.qk-native) .award-card .badge{ max-width:120px; } @media (max-width:980px){ :where(body.qk-native) .portfolio-intro{ flex-basis:80vw; } } /* Con movimiento reducido el portafolio es una fila desplazable (sin pin) */ :where(body.qk-native) .portfolio-section.is-static .portfolio-pin{ height:auto; padding:80px 0; overflow-x:auto; } /* --- Servicios --- */ :where(body.qk-native) .svc-section{ padding-top:0; } :where(body.qk-native) .svc-title{ font-size:clamp(1.6rem,3vw,2.4rem); margin-bottom:20px; } :where(body.qk-native) .svc-intro{ color:var(--gray-light); line-height:1.6; margin-bottom:24px; max-width:32em; } :where(body.qk-native) .svc-hero .qk-bigt{ margin-top:18px; } :where(body.qk-native) .svc-row{ scroll-margin-top:100px; } /* --- Contacto / presupuesto --- */ :where(body.qk-native) .ct-thanks{ min-height:70svh; display:flex; align-items:center; } :where(body.qk-native) .ct-thanks h1{ font-size:clamp(3rem,7vw,6rem); margin-bottom:24px; } :where(body.qk-native) .ct-thanks p{ color:var(--gray-light); max-width:34em; margin-bottom:32px; line-height:1.6; } :where(body.qk-native) .ct-loc--last{ border-bottom:0; } :where(body.qk-native) #formulario,:where(body.qk-native) #agendar{ scroll-margin-top:96px; } :where(body.qk-native) .ct-book-pill{ color:inherit; } /* --- Blog / entradas / archivos / 404 (plantillas index, single, archive, page, 404) --- */ :where(body.qk-native) .qk-main{ padding:calc(var(--ct-top) + 60px) 0 100px; min-height:70svh; position:relative; z-index:1; background:var(--gray-dark); } :where(body.qk-native) .qk-pagehead{ margin-bottom:60px; } :where(body.qk-native) .qk-pagehead h1{ font-size:clamp(2.4rem,6vw,5rem); letter-spacing:-.02em; margin-top:14px; max-width:16em; } :where(body.qk-native) .qk-pagehead p{ color:var(--gray-light); font-size:1.1rem; max-width:40em; margin-top:20px; line-height:1.6; } :where(body.qk-native) .qk-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:44px 28px; } :where(body.qk-native) .qk-card{ position:relative; display:flex; flex-direction:column; gap:16px; } :where(body.qk-native) .qk-card-media{ aspect-ratio:16/10; border-radius:16px; overflow:hidden; background:linear-gradient(135deg,var(--gray-light),var(--gray-dark)); } :where(body.qk-native) .qk-card-media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); } :where(body.qk-native) .qk-card:hover .qk-card-media img{ transform:scale(1.04); } :where(body.qk-native) .qk-card h2,:where(body.qk-native) .qk-card h3{ font-size:1.35rem; line-height:1.2; } :where(body.qk-native) .qk-card a.stretched::after{ content:""; position:absolute; inset:0; z-index:2; } :where(body.qk-native) .qk-meta{ color:var(--gray-light); font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; } :where(body.qk-native) .qk-excerpt{ color:var(--gray-light); line-height:1.6; font-size:.95rem; } :where(body.qk-native) .qk-pagination{ display:flex; gap:10px; justify-content:center; margin-top:64px; flex-wrap:wrap; } :where(body.qk-native) .qk-pagination .page-numbers{ min-width:44px; height:44px; padding:0 14px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--light-15); border-radius:100px; transition:background-color .3s ease,border-color .3s ease; } :where(body.qk-native) .qk-pagination .page-numbers:hover{ background:var(--light-08); } :where(body.qk-native) .qk-pagination .page-numbers.current{ background:var(--white); color:var(--gray-dark); border-color:var(--white); } :where(body.qk-native) .qk-entry{ max-width:760px; margin:0 auto; } :where(body.qk-native) .qk-entry-head{ margin-bottom:44px; } :where(body.qk-native) .qk-entry-head h1{ font-size:clamp(2.2rem,5vw,3.8rem); letter-spacing:-.02em; margin:14px 0 18px; } :where(body.qk-native) .qk-entry-media{ margin:0 0 48px; border-radius:20px; overflow:hidden; } :where(body.qk-native) .qk-entry-media img{ width:100%; height:auto; } :where(body.qk-native) .qk-content{ font-size:1.08rem; line-height:1.75; color:rgba(241,241,241,.9); } :where(body.qk-native) .qk-content > * + *{ margin-top:1.3em; } :where(body.qk-native) .qk-content h2{ font-size:clamp(1.6rem,3vw,2.2rem); margin-top:2em; } :where(body.qk-native) .qk-content h3{ font-size:1.35rem; margin-top:1.8em; } :where(body.qk-native) .qk-content a{ text-decoration:underline; text-underline-offset:3px; color:var(--white); } :where(body.qk-native) .qk-content a:hover{ color:var(--gray-light); } :where(body.qk-native) .qk-content :is(ul,ol){ padding-left:1.4em; list-style:revert; } :where(body.qk-native) .qk-content li + li{ margin-top:.4em; } :where(body.qk-native) .qk-content img{ border-radius:14px; height:auto; } :where(body.qk-native) .qk-content figure{ margin:2em 0; } :where(body.qk-native) .qk-content figcaption{ color:var(--gray-light); font-size:.88rem; margin-top:10px; } :where(body.qk-native) .qk-content blockquote{ margin:2em 0; padding-left:24px; border-left:2px solid var(--gray-light); font-family:var(--font-display); font-size:1.3rem; line-height:1.4; } :where(body.qk-native) .qk-content table{ width:100%; border-collapse:collapse; font-size:.95rem; } :where(body.qk-native) .qk-content :is(th,td){ border-bottom:1px solid var(--light-15); padding:10px 8px; text-align:left; } :where(body.qk-native) .qk-content pre{ overflow:auto; background:var(--light-08); padding:16px; border-radius:12px; font-size:.9rem; } :where(body.qk-native) .qk-content iframe{ max-width:100%; border:0; border-radius:12px; } :where(body.qk-native) .qk-content .alignleft{ float:left; margin:0 1.4em 1em 0; } :where(body.qk-native) .qk-content .alignright{ float:right; margin:0 0 1em 1.4em; } :where(body.qk-native) .qk-content .aligncenter{ margin-left:auto; margin-right:auto; } :where(body.qk-native) .qk-entry-foot{ margin-top:64px; padding-top:32px; border-top:1px solid var(--light-08); display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; } :where(body.qk-native) .qk-404{ text-align:center; display:flex; flex-direction:column; align-items:center; gap:24px; } :where(body.qk-native) .qk-404 h1{ font-size:clamp(2.4rem,6vw,5rem); } :where(body.qk-native) .qk-404 p{ color:var(--gray-light); max-width:34em; line-height:1.6; } @media (max-width:980px){ :where(body.qk-native) .qk-grid{ grid-template-columns:1fr 1fr; } } @media (max-width:600px){ :where(body.qk-native) .qk-grid{ grid-template-columns:1fr; } } /* --- Botón de cierre del menú overlay --- */ .menu-overlay-close{ position:absolute; top:22px; right:var(--pad); } /* --- Mejoras posteriores a la revisión --- */ :where(body.qk-native) .qk-w{ display:inline-block; white-space:nowrap; } .logo img, .footer-col .footer-logo img{ filter:none; } /* el SVG del logo ya es blanco */ /* Insignias del footer: columna de 200px máx. con Premier (160px), texto e ISO (150px) debajo. */ .site-footer{ --qk-premier-w:160px; --qk-iso-w:150px; } .footer-badges{ max-width:200px; } .footer-badges .premier-badge{ display:block; width:var(--qk-premier-w); max-width:100%; } .footer-badges .premier-badge img{ width:100%; height:auto; } .footer-badges p{ color:var(--gray-light); max-width:none; } .footer-badges p strong{ color:var(--white); font-weight:700; } .footer-badges .iso-badge{ margin-top:12px; } .footer-badges .iso-badge a{ display:inline-block; } .footer-badges .iso-badge img{ width:var(--qk-iso-w); max-width:100%; height:auto; filter:none; opacity:.9; transition:opacity .3s ease; } .footer-badges .iso-badge a:hover img{ opacity:1; } /* Servicios (home): iconos SVG, sin numeración ni cambio de color */ :where(body.qk-native) .service-card .svc-icon{ width:44px; height:44px; object-fit:contain; object-position:left center; } :where(body.qk-native) .faq-a{ visibility:hidden; transition:max-height .5s var(--ease), visibility 0s linear .5s; } :where(body.qk-native) .faq-item.is-open .faq-a{ visibility:visible; transition-delay:0s; } html:not(.js) :where(body.qk-native) .faq-a{ visibility:visible; } @media (prefers-reduced-motion:reduce){ :where(body.qk-native) .faq-a{ transition:none; } } .qk-el-main{ display:block; } /* ===== Header: ancho completo (20px por lado), logo Q 45×45, nav centrada y "Conversemos" a la derecha ===== */ .site-header{ padding:10px 0; } .site-header.is-solid{ padding:6px 0; } .site-header .header-inner{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:24px; width:100%; padding:0 20px; } .site-header .header-left{ justify-self:start; gap:14px; } .site-header .header-nav{ justify-self:center; } .site-header .header-cta{ justify-self:end; } .logo img{ width:45px; height:45px; max-width:none; object-fit:contain; } .header-cta .nav-link.pill{ padding:12px 22px; font-size:.95rem; font-weight:600; border-radius:100px; background:var(--white); color:var(--gray-dark); display:inline-flex; align-items:center; gap:.5em; transition:background-color .3s ease, transform .3s ease; } .header-cta .nav-link.pill:hover{ background:var(--gray-light); transform:translateY(-1px); } .menu-overlay{ clip-path:circle(4% at 42px 33px); } @media (max-width:980px){ .site-header .header-inner{ grid-template-columns:1fr auto; gap:12px; } .site-header .header-nav{ display:none; } } /* ===== Hero → siguiente sección: sin línea divisoria (solapa 1px para tapar costuras de subpíxel del pin) ===== */ :where(body.qk-native) .cover-wrap{ margin-top:-1px; } /* ===== Footer: texto alineado con la fila legal (sin padding lateral extra en desktop) ===== */ @media (min-width:981px){ .site-footer{ padding-left:clamp(16px,2vw,32px); padding-right:clamp(16px,2vw,32px); } .site-footer .footer-grid, .site-footer .footer-legal{ padding-left:0; padding-right:0; } .site-footer .footer-grid{ grid-template-columns:1.1fr .8fr .8fr minmax(0,200px); } /* 4 columnas: contacto · mapa del sitio (2 columnas) · insignias */ .footer-col .footer-logo img{ height:50px; } } @media (max-width:980px){ .site-footer .footer-grid, .site-footer .footer-legal{ padding-left:var(--pad); padding-right:var(--pad); } } /* ===== Novedades / blog: imagen en blanco y violeta; a color al pasar el mouse ===== */ :where(body.qk-native) .press-thumb, :where(body.qk-native) .qk-card-media{ position:relative; isolation:isolate; } :where(body.qk-native) .press-thumb img, :where(body.qk-native) .qk-card-media img{ filter:grayscale(1) contrast(1.05); transition:filter .5s ease, transform .6s var(--ease); } :where(body.qk-native) .press-thumb::after, :where(body.qk-native) .qk-card-media::after{ content:""; position:absolute; inset:0; background:var(--gray-light); mix-blend-mode:screen; opacity:1; transition:opacity .5s ease; pointer-events:none; } :where(body.qk-native) .press-row:hover .press-thumb img, :where(body.qk-native) .qk-card:hover .qk-card-media img{ filter:none; } :where(body.qk-native) .press-row:hover .press-thumb::after, :where(body.qk-native) .qk-card:hover .qk-card-media::after{ opacity:0; } @media (hover:none){ :where(body.qk-native) .press-thumb img, :where(body.qk-native) .qk-card-media img{ filter:none; } :where(body.qk-native) .press-thumb::after, :where(body.qk-native) .qk-card-media::after{ opacity:0; } } @media (prefers-reduced-motion:reduce){ :where(body.qk-native) .press-thumb img, :where(body.qk-native) .qk-card-media img, :where(body.qk-native) .press-thumb::after, :where(body.qk-native) .qk-card-media::after{ transition:none; } } /* ===== Alturas del header (logo 45px + 10px arriba/abajo) ===== */ :root{ --ct-top:68px; } /* =========================================================== BLINDAJE del header, menú y footer frente a Elementor. En páginas dibujadas con Elementor (proyectos, plantillas del Theme Builder) el CSS del kit (a, button, h2…) pisaba el chrome del tema: links oscuros sobre fondo oscuro, botón rosa en la hamburguesa. Estas reglas usan más especificidad (html body + clase duplicada) que las del kit, incluidos sus :hover, y fijan cada color de forma explícita. =========================================================== */ html body .site-header.site-header a, html body .menu-overlay.menu-overlay a, html body .site-footer.site-footer a{ color:inherit; text-decoration:none; background-image:none; } html body .site-header.site-header, html body .menu-overlay.menu-overlay, html body .site-footer.site-footer{ font-family:var(--font-body); color:var(--white); line-height:1.5; text-transform:none; letter-spacing:normal; } /* Botones del header / menú (kit de Elementor: fondo rosa, borde y radio propios) */ html body .site-header.site-header :is(button,.hamburger), html body .site-header.site-header :is(button,.hamburger):is(:hover,:focus,:active), html body .menu-overlay.menu-overlay button, html body .menu-overlay.menu-overlay button:is(:hover,:focus,:active){ background:none; background-color:transparent; border:0; border-radius:0; box-shadow:none; color:var(--white); font:inherit; padding:0; min-width:0; text-transform:none; letter-spacing:normal; text-decoration:none; } html body .site-header.site-header .hamburger{ width:44px; height:44px; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:5px; } html body .site-header.site-header .hamburger span{ background:var(--white); } /* Navegación del header */ html body .site-header.site-header .header-nav .nav-link{ color:var(--white); font-family:var(--font-body); font-size:.95rem; font-weight:500; } html body .site-header.site-header .header-nav .nav-link:is(:hover,:focus-visible){ color:var(--white); background:var(--light-08); } html body .site-header.site-header .header-cta .nav-link.pill, html body .site-header.site-header .header-cta .nav-link.pill:is(:hover,:focus-visible){ color:var(--gray-dark); font-family:var(--font-body); font-size:.95rem; font-weight:600; } html body .site-header.site-header .header-cta .nav-link.pill{ background:var(--white); } html body .site-header.site-header .header-cta .nav-link.pill:is(:hover,:focus-visible){ background:var(--gray-light); } /* Menú overlay */ html body .menu-overlay.menu-overlay .menu-overlay-list a{ color:var(--gray-light); font-family:var(--font-display); font-weight:600; } html body .menu-overlay.menu-overlay .menu-overlay-list a:is(:hover,:focus-visible), html body .menu-overlay.menu-overlay .menu-overlay-list a[aria-current="page"]{ color:var(--white); } html body .menu-overlay.menu-overlay .menu-overlay-foot, html body .menu-overlay.menu-overlay .menu-overlay-foot a{ color:var(--gray-light); } html body .menu-overlay.menu-overlay .menu-overlay-foot a:is(:hover,:focus-visible){ color:var(--white); } /* Footer */ html body .site-footer.site-footer .footer-col h2{ font-family:var(--font-display); font-size:1.7rem; font-weight:600; line-height:1.05; color:var(--white); margin:0 0 20px; text-transform:none; letter-spacing:normal; } html body .site-footer.site-footer .footer-contact a, html body .site-footer.site-footer .footer-links a{ color:var(--white); font-family:var(--font-body); font-size:1.05rem; font-weight:400; } html body .site-footer.site-footer .footer-contact a:is(:hover,:focus-visible), html body .site-footer.site-footer .footer-links a:is(:hover,:focus-visible){ color:var(--gray-light); } html body .site-footer.site-footer .footer-contact .fc-label{ color:var(--gray-light); font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; } html body .site-footer.site-footer .footer-badges p{ color:var(--gray-light); font-size:.9rem; line-height:1.5; } html body .site-footer.site-footer .footer-badges p strong{ color:var(--white); } html body .site-footer.site-footer .footer-legal, html body .site-footer.site-footer .footer-legal a{ color:var(--gray-light); font-size:.85rem; } html body .site-footer.site-footer .footer-legal a:is(:hover,:focus-visible){ color:var(--white); } html body .site-footer.site-footer .footer-social a{ color:var(--white); } html body .site-footer.site-footer :is(ul,ol){ list-style:none; margin:0; padding:0; } html body .site-footer.site-footer img, html body .site-header.site-header img{ border:0; border-radius:0; box-shadow:none; } /* ===== Servicios: botón "Solicitar presupuesto" en cada servicio ===== */ :where(body.qk-native) .svc-row .svc-cta{ margin-top:32px; } @media (max-width:980px){ :where(body.qk-native) .svc-row .svc-cta{ margin-top:26px; } } /* =========================================================== Bloque flotante "¡Agendemos una llamada!" (template-parts/call-float.php; core.js agrega .is-visible al llegar al final). Reserva espacio al pie del footer para que no tape la fila legal / redes. =========================================================== */ .site-footer.has-call{ padding-bottom:112px; } .qk-call{ position:fixed; right:24px; bottom:24px; z-index:150; max-width:min(400px, calc(100vw - 32px)); opacity:0; visibility:hidden; transform:translateY(28px); transition:opacity .45s ease, transform .6s var(--ease), visibility 0s linear .6s; } .qk-call.is-visible{ opacity:1; visibility:visible; transform:none; transition-delay:0s; } html:not(.js) .qk-call{ display:none; } body.menu-open .qk-call{ opacity:0; visibility:hidden; pointer-events:none; } html body .qk-call.qk-call .qk-call-link{ display:flex; align-items:center; gap:16px; padding:10px 34px 10px 10px; border-radius:100px; background:var(--ax,#8D8CFF); color:var(--gray-dark,#261e25); text-decoration:none; box-shadow:0 18px 40px -14px rgba(0,0,0,.55), 0 0 0 1px rgba(241,241,241,.08); transition:background-color .3s ease, transform .4s var(--ease); } html body .qk-call.qk-call .qk-call-link:is(:hover,:focus-visible){ background:#a9a8ff; color:var(--gray-dark,#261e25); transform:translateY(-3px); } .qk-call-link img{ width:58px; height:58px; flex:none; border-radius:50%; } .qk-call-text{ display:flex; flex-direction:column; gap:3px; min-width:0; } .qk-call-text strong{ font-family:var(--font-display); font-size:1.12rem; font-weight:700; line-height:1.1; letter-spacing:-.01em; } .qk-call-text span{ font-family:var(--font-body); font-size:.9rem; line-height:1.3; font-weight:400; } html body .qk-call.qk-call .qk-call-close{ position:absolute; top:-8px; right:-4px; width:26px; height:26px; display:flex; align-items:center; justify-content:center; padding:0; border:0; border-radius:50%; background:var(--gray-dark); color:var(--white); box-shadow:0 0 0 1px rgba(241,241,241,.25); cursor:pointer; opacity:0; transition:opacity .25s ease; min-width:0; } .qk-call:hover .qk-call-close, .qk-call:focus-within .qk-call-close{ opacity:1; } @media (hover:none){ html body .qk-call.qk-call .qk-call-close{ opacity:1; } } .qk-call-close svg{ width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; } @media (max-width:640px){ .qk-call{ right:12px; left:12px; bottom:12px; max-width:none; } html body .qk-call.qk-call .qk-call-link{ padding:8px 26px 8px 8px; gap:12px; } .qk-call-link img{ width:48px; height:48px; } .qk-call-text strong{ font-size:1rem; } .qk-call-text span{ font-size:.82rem; } .site-footer.has-call{ padding-bottom:96px; } } @media (prefers-reduced-motion:reduce){ .qk-call{ transform:none; transition:opacity .2s ease, visibility 0s linear .2s; } } /* =========================================================== Hora de cada location + reloj de arena animado (template-parts/locations.php · qk_hourglass()). Sin JS no hay hora (la pone core.js), así que el bloque queda oculto. =========================================================== */ .ct-loc .ct-time{ display:none; align-items:center; gap:9px; margin-top:18px; } .js .ct-loc .ct-time{ display:flex; } .ct-loc .ct-time:has(.time:empty){ display:none; } .ct-loc .ct-time .time{ margin-top:0; } .qk-hg{ width:20px; height:20px; flex:none; overflow:visible; color:var(--gray-mid, #918fa7); } .qk-hg .hg-glass{ fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; } .qk-hg .hg-top,.qk-hg .hg-bot{ fill:currentColor; opacity:.9; transform-box:fill-box; transform-origin:50% 100%; } .qk-hg .hg-stream{ stroke:currentColor; stroke-width:1; stroke-linecap:round; stroke-dasharray:1.4 1.6; opacity:0; } .qk-hg .hg-turn{ transform-origin:12px 12px; } @media (prefers-reduced-motion:no-preference){ .qk-hg .hg-turn{ animation:qkHgTurn 6s ease-in-out infinite; } .qk-hg .hg-top{ animation:qkHgTop 6s linear infinite; } .qk-hg .hg-bot{ animation:qkHgBot 6s linear infinite; } .qk-hg .hg-stream{ animation:qkHgStream 6s linear infinite; } } @media (prefers-reduced-motion:reduce){ .qk-hg .hg-top{ transform:scaleY(.55); } .qk-hg .hg-bot{ transform:scaleY(.55); } } @keyframes qkHgTop{ 0%{ transform:scaleY(1); } 72%,100%{ transform:scaleY(0); } } @keyframes qkHgBot{ 0%{ transform:scaleY(0); } 72%,100%{ transform:scaleY(1); } } @keyframes qkHgStream{ 0%{ opacity:0; stroke-dashoffset:0; } 4%{ opacity:1; } 68%{ opacity:1; stroke-dashoffset:-14; } 73%,100%{ opacity:0; stroke-dashoffset:-14; } } @keyframes qkHgTurn{ 0%,80%{ transform:rotate(0); } 94%,100%{ transform:rotate(180deg); } } /* =========================================================== 404 (404.php) y páginas de gracias (template-parts/thanks.php): fondo oscuro nativo. =========================================================== */ :where(body.qk-native) .nf{ overflow:hidden; } :where(body.qk-native) .nf-hero{ position:relative; min-height:calc(100svh - 460px); padding:30px 0 80px; display:flex; flex-direction:column; align-items:flex-start; } :where(body.qk-native) .nf-num{ position:absolute; right:-.03em; top:-.06em; font-family:var(--font-display); font-weight:700; font-size:clamp(9rem,30vw,27rem); line-height:.8; letter-spacing:-.06em; color:transparent; -webkit-text-stroke:1px rgba(241,241,241,.16); pointer-events:none; user-select:none; } :where(body.qk-native) .nf-hero > *:not(.nf-num){ position:relative; } :where(body.qk-native) .nf h1, :where(body.qk-native) .th h1{ font-size:clamp(2.8rem,7vw,6.2rem); line-height:.98; letter-spacing:-.03em; margin:12px 0 30px; max-width:11em; } :where(body.qk-native) .nf h1 .muted, :where(body.qk-native) .th h1 .muted{ color:var(--gray-light); } :where(body.qk-native) .nf .lead, :where(body.qk-native) .th .lead{ color:var(--white); opacity:.88; font-size:clamp(1.05rem,1.5vw,1.3rem); line-height:1.55; max-width:32em; } :where(body.qk-native) .nf-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:38px; } :where(body.qk-native) .nf-mail{ margin-top:26px; color:var(--gray-light); font-size:.95rem; } :where(body.qk-native) .nf-mail a{ color:var(--white); border-bottom:1px solid var(--light-30); transition:border-color .25s ease; } :where(body.qk-native) .nf-mail a:hover{ border-color:var(--white); } :where(body.qk-native) .nf-links{ padding-top:44px; border-top:1px solid var(--light-08); } :where(body.qk-native) .nf-links h2, :where(body.qk-native) .th-grid h2{ font-family:var(--font-body); font-size:.78rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--gray-light); margin:0 0 22px; } :where(body.qk-native) .nf-links ul{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px; } :where(body.qk-native) .nf-links a{ position:relative; display:flex; flex-direction:column; gap:8px; height:100%; padding:24px 26px 26px; border:1px solid var(--light-08); border-radius:20px; transition:border-color .35s ease, background-color .35s ease, transform .5s var(--ease); } :where(body.qk-native) .nf-links a:hover{ border-color:var(--light-30); background:rgba(241,241,241,.04); transform:translateY(-3px); } :where(body.qk-native) .nf-links b{ font-family:var(--font-display); font-size:1.2rem; font-weight:600; } :where(body.qk-native) .nf-links span{ color:var(--gray-light); font-size:.92rem; line-height:1.5; padding-right:28px; } :where(body.qk-native) .nf-links i{ position:absolute; top:22px; right:24px; font-style:normal; transition:transform .4s var(--ease); } :where(body.qk-native) :is(.nf-links i,.th-more i){ display:inline-block; width:1.15rem; height:1.15rem; font-size:0; line-height:0; background:currentColor; -webkit-mask:var(--qk-arrow) center/contain no-repeat; mask:var(--qk-arrow) center/contain no-repeat; } :where(body.qk-native) .nf-links a:hover i{ transform:translate(3px,-3px); } :where(body.qk-native) .th-hero{ padding:24px 0 56px; } :where(body.qk-native) .th-check{ display:block; width:76px; height:76px; margin-bottom:30px; } :where(body.qk-native) .th-check svg{ width:100%; height:100%; fill:none; stroke:var(--white); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; } :where(body.qk-native) .th-ring{ stroke:var(--light-30); stroke-dasharray:183; stroke-dashoffset:183; animation:qkThDraw .9s var(--ease) .1s forwards; } :where(body.qk-native) .th-tick{ stroke-dasharray:50; stroke-dashoffset:50; animation:qkThDraw .6s var(--ease) .75s forwards; } @keyframes qkThDraw{ to{ stroke-dashoffset:0; } } :where(body.qk-native) .th-grid{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(32px,7vw,110px); padding-top:44px; border-top:1px solid var(--light-08); align-items:start; } :where(body.qk-native) .th-steps .ct-steps{ margin-top:0; } :where(body.qk-native) .th-side{ display:flex; flex-direction:column; gap:44px; } :where(body.qk-native) .th-book .ct-book-pill{ max-width:none; } :where(body.qk-native) .th-more ul{ list-style:none; margin:0; padding:0; } :where(body.qk-native) .th-more li + li{ border-top:1px solid var(--light-08); } :where(body.qk-native) .th-more a{ display:flex; justify-content:space-between; align-items:center; gap:16px; padding:18px 0; font-size:1.05rem; transition:color .25s ease, padding-left .35s var(--ease); } :where(body.qk-native) .th-more a:hover{ color:var(--gray-light); padding-left:8px; } :where(body.qk-native) .th-more i{ font-style:normal; } :where(body.qk-native) .th-back{ margin-top:64px; } @media (max-width:980px){ :where(body.qk-native) .th-grid{ grid-template-columns:1fr; } :where(body.qk-native) .nf-hero{ min-height:0; padding-bottom:56px; } :where(body.qk-native) .nf-num{ opacity:.7; } } @media (prefers-reduced-motion:reduce){ :where(body.qk-native) .th-ring, :where(body.qk-native) .th-tick{ animation:none; stroke-dashoffset:0; } } /* ===== Logo del header: Q + "QKStudio". Al hacer scroll (header sólido) una máscara circular centrada en la Q "se come" la palabra y queda sólo la Q. En mobile se muestra siempre sólo la Q. Prefijo .logo-* (acotado al header). ===== */ .site-header .logo{ position:relative; width:146px; height:45px; flex:none; transition:width .8s cubic-bezier(.65,0,.35,1); } .site-header .logo .logo-q{ position:relative; z-index:1; } .site-header .logo .logo-word{ position:absolute; left:47.9px; top:13.75px; width:97.6px; height:18.4px; pointer-events:none; clip-path:circle(128px at -26.5px 8.65px); transition:clip-path .8s cubic-bezier(.65,0,.35,1); } .site-header .logo .logo-word img{ display:block; width:100%; height:100%; max-width:none; object-fit:contain; } .site-header.is-solid .logo{ width:45px; } .site-header.is-solid .logo .logo-word{ clip-path:circle(24px at -26.5px 8.65px); } /* Hover/foco: sólo la palabra se oculta (misma máscara circular); la Q queda quieta y el área clickeable no cambia. */ .site-header .logo:hover img{ animation:none; } @media (hover:hover){ .site-header .logo:hover .logo-word{ clip-path:circle(24px at -26.5px 8.65px); } } .site-header .logo:focus-visible .logo-word{ clip-path:circle(24px at -26.5px 8.65px); } @media (max-width:767px){ .site-header .logo{ width:45px; transition:none; } .site-header .logo .logo-word{ display:none; } } @media (prefers-reduced-motion:reduce){ .site-header .logo, .site-header .logo .logo-word{ transition:none; } } /* ===== FAQ: título alineado al bloque de preguntas + botón opcional dentro de la respuesta ===== */ :where(body.qk-native) .container:has(> .faq-list) > .section-head{ max-width:900px; margin-left:auto; margin-right:auto; } :where(body.qk-native) .faq-a__cta{ padding:0 4px 28px; } :where(body.qk-native) .faq-a__cta .btn{ padding:.8em 1.4em; font-size:.9rem; } /* ===== REVEAL: franja previa al footer + footer que se "destapa" (inc/reveal.php, template-parts/reveal-cta.php) ===== El contenido (main + franja) tapa al footer; el footer queda pegado abajo (sticky) y aparece al terminar el contenido. Solo en pantallas grandes (en móvil el footer es más alto que la pantalla: queda normal). */ :where(body.qk-native) .qk-reveal{ position:relative; z-index:2; text-align:center; background:var(--ax,var(--gray-light)); color:var(--gray-dark); padding:clamp(72px,9vw,140px) 0 clamp(84px,11vw,170px); border-radius:0 0 clamp(26px,3.6vw,52px) clamp(26px,3.6vw,52px); overflow:clip; } :where(body.qk-native) .qk-reveal__in{ --qk-t:clamp(2.7rem,9.4vw,9.6rem); position:relative; display:flex; flex-direction:column; align-items:center; } :where(body.qk-native) .qk-reveal__t{ font-family:var(--font-display); font-weight:600; font-size:var(--qk-t); line-height:.96; letter-spacing:-.035em; max-width:11.5em; margin:0; color:var(--gray-dark); text-wrap:balance; } /* Entrada letra por letra, igual que la frase del hero (reveal.js) */ :where(body.qk-native) .qk-reveal__t.is-split .qk-w{ overflow:hidden; padding:.07em 0 .2em; margin:-.07em 0 -.2em; vertical-align:top; } :where(body.qk-native) .qk-reveal__t.is-split .ch{ transform:translateY(112%); opacity:0; transition:transform .9s cubic-bezier(.22,1,.36,1), opacity .9s cubic-bezier(.22,1,.36,1); transition-delay:calc(var(--i) * 18ms + 150ms); } :where(body.qk-native) .qk-reveal.is-in .qk-reveal__t.is-split .ch{ transform:none; opacity:1; } /* Móvil: el CTA va debajo de la frase. Escritorio: el CTA monta sobre la base de la palabra "realidad". */ :where(body.qk-native) .qk-reveal__cta{ order:2; margin-top:clamp(30px,6vw,48px); } @media (min-width:981px){ :where(body.qk-native) .qk-reveal__cta{ position:absolute; z-index:3; left:50%; top:100%; margin:0; transform:translate(-50%,-50%) rotate(-3deg); transition:transform .5s var(--ease), background-color .3s ease, color .3s ease; } /* reveal.js lo centra sobre la base de la última palabra */ body.qk-native .qk-reveal .btn.qk-reveal__cta:hover{ transform:translate(-50%,-50%) rotate(0deg) scale(1.04); } } html.js :where(body.qk-native) .qk-reveal__cta{ opacity:0; } html.js :where(body.qk-native) .qk-reveal.is-in .qk-reveal__cta{ opacity:1; transition:opacity .7s ease .9s, transform .5s var(--ease), background-color .3s ease, color .3s ease; } @media (prefers-reduced-motion:reduce){ html.js :where(body.qk-native) .qk-reveal__cta{ opacity:1; } :where(body.qk-native) .qk-reveal__t.is-split .ch{ transition:none; } } body.qk-native .qk-reveal .btn.btn-primary-inverse{ background:var(--gray-dark); color:var(--white); } body.qk-native .qk-reveal .btn.btn-primary-inverse:is(:hover,:focus-visible){ background:var(--white); color:var(--gray-dark); } body.qk-native .qk-reveal :focus-visible{ outline-color:var(--gray-dark); } @media (min-width:981px) and (min-height:620px){ body.qk-reveal-on > main, body.qk-reveal-on #main{ position:relative; z-index:2; background:inherit; } body.qk-reveal-on .site-footer:not(.is-embedded){ position:sticky; bottom:0; z-index:1; } } /* ===== HOME · bloque que se "pinta": palabras destacadas (home.js) ===== */ :where(body.qk-native) .about-text [data-hl="hand"], :where(body.qk-native) .about-text .word--hand{ font-family:"Lacquer",system-ui; font-weight:400; text-transform:lowercase; letter-spacing:.01em; font-size:1.06em; } :where(body.qk-native) .about-text [data-hl="hand"]{ color:var(--ax,var(--gray-light)); } :where(body.qk-native) .about-text .word--hand{ color:var(--dark-15); transition:color .25s ease; } :where(body.qk-native) .about-text .word--hand.is-filled{ color:var(--ax,var(--gray-light)); } :where(body.qk-native) .about-text [data-hl="pill"], :where(body.qk-native) .about-text .word--pill{ display:inline-flex; align-items:center; gap:.28em; padding:.02em .4em .06em .46em; border-radius:999px; line-height:1.15; } :where(body.qk-native) .about-text [data-hl="pill"]{ background:var(--ax,var(--gray-light)); color:var(--gray-dark); } :where(body.qk-native) .about-text .word--pill{ background:var(--white); color:var(--dark-15); transition:background-color .3s ease, color .3s ease; } :where(body.qk-native) .about-text .word--pill.is-filled{ background:var(--ax,var(--gray-light)); color:var(--gray-dark); } :where(body.qk-native) .about-text .w-ai{ flex:none; width:.78em; height:.78em; fill:currentColor; } :where(body.qk-native) .about-text .w-ai1, :where(body.qk-native) .about-text .w-ai2{ transform-box:fill-box; transform-origin:center; animation:qkStar 2.2s ease-in-out infinite; } :where(body.qk-native) .about-text .w-ai2{ animation-delay:-1.1s; } @keyframes qkStar{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(.55); } } @media (prefers-reduced-motion:reduce){ :where(body.qk-native) .about-text .w-ai1, :where(body.qk-native) .about-text .w-ai2{ animation:none; } } /* ===== HOME · "Servicios y soluciones": el fondo oscuro se invierte a lavanda al scrollear (--inv: 0 → 1, lo setea home.js) ===== */ body.qk-native #servicios{ --inv:0; --sv-a:var(--ax,var(--gray-light)); background:color-mix(in srgb, var(--sv-a) calc(var(--inv) * 100%), var(--gray-dark)); } body.qk-native #servicios .section-head h2{ color:color-mix(in srgb, var(--gray-dark) calc(var(--inv) * 100%), var(--white)); } body.qk-native #servicios .section-head .eyebrow{ color:color-mix(in srgb, var(--gray-dark) calc(var(--inv) * 100%), var(--ax,var(--gray-light))); } body.qk-native #servicios .section-head p{ color:color-mix(in srgb, var(--gray-dark) calc(var(--inv) * 82%), var(--gray-light)); } /* Al invertirse: de grilla pegada a tarjetas blancas separadas, con sombra paralela sutil, que aparecen una a una */ body.qk-native #servicios .services-grid{ background:transparent; overflow:visible; border-radius:0; gap:calc(2px + var(--inv) * 22px); } body.qk-native #servicios .service-card{ background:color-mix(in srgb, #fff calc(var(--inv) * 100%), var(--gray-dark)); border-radius:calc(var(--inv) * 22px); box-shadow:0 14px 34px -10px rgba(38,30,37,calc(var(--inv) * .22)), 0 2px 8px rgba(38,30,37,calc(var(--inv) * .08)); } body.qk-native #servicios:not(.is-spread) .service-card.reveal{ transition:opacity .7s var(--ease), transform .7s var(--ease), box-shadow .35s ease; transition-delay:calc(var(--i, 0) * 110ms), calc(var(--i, 0) * 110ms), 0s; } body.qk-native #servicios:not(.is-spread) .service-card.reveal.is-visible:hover{ transform:translateY(-5px); transition-delay:0s; box-shadow:0 22px 44px -12px rgba(38,30,37,calc(var(--inv) * .3)), 0 3px 10px rgba(38,30,37,calc(var(--inv) * .1)); } body.qk-native #servicios .service-card h3{ color:color-mix(in srgb, var(--gray-dark) calc(var(--inv) * 100%), var(--white)); } body.qk-native #servicios .service-card ul{ color:color-mix(in srgb, var(--gray-dark) calc(var(--inv) * 78%), var(--gray-light)); } /* ===== TÍTULOS DE PÁGINA (h1.qk-h1a): misma entrada que el h1 del home (assets/js/h1.js) + palabra en Lacquer (.qk-hand) ===== */ :where(body.qk-native) .qk-hand{ font-family:"Lacquer",system-ui; font-weight:400; font-size:1.06em; line-height:.78; text-transform:lowercase; letter-spacing:.01em; display:inline-block; padding:.08em .08em .02em 0; color:var(--ax,var(--gray-light)); } :where(body.qk-native) .bl-hero .qk-hand{ color:var(--ax-l,#5856E0); } html.js :where(body.qk-native) .qk-h1a .qk-hand{ clip-path:inset(0 100% 0 0); transition:clip-path 1.1s cubic-bezier(.65,0,.35,1); } html.js :where(body.qk-native) .qk-h1a .qk-hand.is-written{ clip-path:inset(-12% -6% -12% 0); } html.js :where(body.qk-native) .qk-h1a:not(.is-split){ visibility:hidden; animation:qkH1Show 0s 1.4s forwards; } @keyframes qkH1Show{ to{ visibility:visible; } } :where(body.qk-native) .qk-h1a.is-split .qk-w{ display:inline-block; overflow:hidden; padding:.08em .05em .22em; margin:-.08em -.05em -.22em; vertical-align:top; } :where(body.qk-native) .qk-h1a.is-split .ch{ display:inline-block; transform:translateY(112%); opacity:0; transition:transform .9s cubic-bezier(.215,.61,.355,1), opacity .9s cubic-bezier(.215,.61,.355,1); transition-delay:calc(var(--i) * 18ms + 200ms); } :where(body.qk-native) .qk-h1a.is-in .ch{ transform:none; opacity:1; } @media (prefers-reduced-motion:reduce){ html.js :where(body.qk-native) .qk-h1a .qk-hand{ clip-path:none; transition:none; } :where(body.qk-native) .qk-h1a .ch{ transition:none; } } /* ===== NAVEGACIÓN: indicador de la sección actual (header, menú off-canvas y footer) ===== */ html body .site-header.site-header .header-nav .nav-link{ position:relative; } html body .site-header.site-header .header-nav .nav-link:not(.pill)[aria-current="page"]{ color:var(--ax,var(--white)); } html body .site-header.site-header .header-nav .nav-link:not(.pill)[aria-current="page"]::after{ content:""; position:absolute; left:50%; bottom:2px; width:5px; height:5px; border-radius:50%; background:var(--ax,var(--gray-light)); transform:translateX(-50%); } html body .site-header.site-header .header-cta .nav-link.pill[aria-current="page"]{ box-shadow:0 0 0 2px var(--gray-dark), 0 0 0 4px var(--ax,var(--gray-light)); } html body .menu-overlay.menu-overlay .menu-overlay-list a[aria-current="page"]{ position:relative; color:var(--white); } html body .menu-overlay.menu-overlay .menu-overlay-list a[aria-current="page"]::before{ content:""; display:inline-block; width:.26em; height:.26em; border-radius:50%; background:var(--ax,var(--gray-light)); margin-right:.32em; vertical-align:.2em; } html body .site-footer.site-footer .footer-links a[aria-current="page"]{ color:var(--ax,var(--white)); } html body .site-footer.site-footer .footer-links a[aria-current="page"]::before{ content:""; display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--ax,var(--gray-light)); margin-right:.55em; vertical-align:.15em; } /* Footer: "humanos." en Lacquer */ .footer-legal .made .qk-hand{ font-family:"Lacquer",system-ui; font-weight:400; text-transform:lowercase; letter-spacing:.01em; font-size:1.3em; line-height:1; color:var(--ax,var(--gray-light)); display:inline-block; vertical-align:-.06em; } /* Servicios (≥601px): las tarjetas salen apiladas del centro y se ubican con el scroll (reversible). --sp: 0→1 (home.js); --dx/--dy/--rot por tarjeta. La primera ("Sitios y Plataformas Web") siempre queda arriba. */ body.qk-native #servicios.is-spread .services-grid{ --sp:0; position:relative; } body.qk-native #servicios.is-spread .service-card.reveal{ opacity:1; position:relative; z-index:calc(10 - var(--i, 0)); transform:translate(calc(var(--dx, 0px) * (1 - var(--sp))), calc(var(--dy, 0px) * (1 - var(--sp)))) rotate(calc(var(--rot, 0deg) * (1 - var(--sp)))) scale(calc(.9 + .1 * var(--sp))); transition:box-shadow .35s ease, translate .35s ease; transition-delay:0s; will-change:transform; } body.qk-native #servicios.is-spread .service-card.reveal:hover{ translate:0 -5px; box-shadow:0 22px 44px -12px rgba(38,30,37,calc(var(--inv) * .3)), 0 3px 10px rgba(38,30,37,calc(var(--inv) * .1)); } /* --- Servicios: imágenes por servicio + insignia Premier (page-servicios.php) --- */ :where(body.qk-native) .svc-visual--img{ aspect-ratio:1/1; background:none; max-width:560px; width:100%; justify-self:end; } :where(body.qk-native) .svc-row:nth-child(even) .svc-visual--img{ justify-self:start; } :where(body.qk-native) .svc-visual--img img{ display:block; width:100%; height:100%; object-fit:cover; } .svc-premier{ display:flex; align-items:center; gap:clamp(16px,2vw,26px); margin-top:34px; max-width:480px; } .svc-premier__badge{ flex:none; display:block; width:clamp(112px,11vw,140px); } .svc-premier__badge img{ display:block; width:100%; height:auto; } .svc-premier p{ margin:0; color:var(--gray-light); font-size:.95rem; line-height:1.55; max-width:none; } .svc-premier p strong{ color:var(--white); font-weight:700; } :where(body.qk-native) .svc-row .svc-premier + .svc-cta{ margin-top:30px; } @media (max-width:980px){ :where(body.qk-native) .svc-visual--img{ justify-self:start; max-width:none; } } @media (max-width:480px){ .svc-premier{ flex-direction:column; align-items:flex-start; gap:14px; } } /* ---- Servicios: botones "Saber más" + "Solicitar presupuesto" (outline) y tarjetas de la home clickeables ---- */ :where(body.qk-native) .svc-row .svc-btns{ display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; } :where(body.qk-native) .svc-row .svc-btns .svc-cta{ margin-top:0; } :where(body.qk-native) .svc-row .svc-premier + .svc-btns{ margin-top:30px; } body.qk-native #servicios .service-card{ position:relative; cursor:pointer; } body.qk-native #servicios .service-card__link::after{ content:""; position:absolute; inset:0; z-index:1; border-radius:inherit; } body.qk-native #servicios .service-card__more{ position:relative; z-index:2; align-self:flex-start; display:inline-flex; gap:.5em; align-items:center; margin-top:6px; padding:.7em 1.2em; border-radius:100px; font-size:.88rem; font-weight:600; border:1px solid currentColor; color:color-mix(in srgb, var(--gray-dark) calc(var(--inv, 0) * 100%), var(--white)); transition:background-color .3s ease, color .3s ease, border-color .3s ease, transform .35s var(--ease); } body.qk-native #servicios .service-card__more:hover,body.qk-native #servicios .service-card:hover .service-card__more{ background:var(--ax, #918fa7); border-color:var(--ax, #918fa7); color:var(--gray-dark); } body.qk-native #servicios .service-card__link:focus-visible::after{ outline:2px solid var(--white); outline-offset:-4px; } /* ---- HOME: el CTA de "Quiénes somos" aparece (fade-in-up) recién cuando el texto terminó de pintarse (home.js: .has-fill / .is-done) ---- */ :where(body.qk-native) .about-inner.has-fill .btn{ opacity:0; transform:translateY(26px); visibility:hidden; pointer-events:none; transition:opacity .7s var(--ease), transform .7s var(--ease), visibility 0s linear .7s, background-color .3s ease, color .3s ease; } :where(body.qk-native) .about-inner.has-fill.is-done .btn{ opacity:1; transform:none; visibility:visible; pointer-events:auto; transition:opacity .7s var(--ease) .05s, transform .7s var(--ease) .05s, visibility 0s, background-color .3s ease, color .3s ease; } /* ---- Palabras destacadas en textos editables: [[hand|palabra]] (Lacquer lavanda) y [[pill|palabra]] (pastilla con pluma/vector) ---- */ .hl-hand{ font-family:"Lacquer",system-ui; font-weight:400; text-transform:lowercase; letter-spacing:.01em; font-size:1.08em; color:var(--ax,#8D8CFF); } .hl-pill{ display:inline-flex; align-items:center; gap:.3em; padding:.02em .5em .06em .42em; border-radius:999px; line-height:1.15; font-size:.74em; vertical-align:.06em; background:var(--ax,#8D8CFF); color:var(--gray-dark,#261e25); white-space:nowrap; } .hl-pen{ flex:none; width:.82em; height:.82em; fill:currentColor; } /* ===== SEO (2026-10): el h1 real es la palabra clave (con el aspecto del eyebrow) y la frase grande animada es un ===== .qk-bigt = lo que antes daba la etiqueta h1 (display, peso, margen, interlineado); el tamaño lo sigue dando cada página (.hero-h1, .svc-hero .qk-bigt, .pj-hero .qk-bigt, .sv1-h1). */ :where(body.qk-native) .qk-bigt{ display:block; font-family:var(--font-display); font-weight:600; margin:0; line-height:1.05; } :where(body.qk-native) .eyebrow--kw{ display:flex; align-items:flex-start; gap:.6em; max-width:78em; margin:0; line-height:1.55; } :where(body.qk-native) .eyebrow--kw[data-idx]::before{ content:attr(data-idx) " —"; flex:none; } :where(body.qk-native) .hero-kw{ font-family:var(--font-body); font-weight:500; font-size:clamp(1rem,1.35vw,1.2rem); line-height:1.4; color:var(--gray-light); max-width:36em; margin:0; } :where(body.qk-native) .about2 .track-entity{ margin:22px 0 0; max-width:44em; font-size:.98rem; line-height:1.6; color:var(--gray-light); } /* ===== Desplegable de servicios (2026-10): menú de escritorio (.qk-dd) y menú completo (.qk-mdd) ===== */ .site-header .qk-dd{ position:relative; display:flex; align-items:center; } .site-header .qk-dd .nav-link{ padding-right:6px; } .site-header .qk-dd__btn{ display:grid; place-items:center; width:28px; height:28px; margin-left:-2px; border-radius:50%; color:var(--white); transition:background-color .3s ease, transform .3s var(--ease); } .site-header .qk-dd__btn:hover{ background:var(--light-08); } .site-header .qk-dd.is-open .qk-dd__btn{ transform:rotate(180deg); } .site-header .qk-dd__panel{ position:absolute; top:100%; left:50%; min-width:300px; padding-top:14px; transform:translate(-50%,6px); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .25s ease, transform .35s var(--ease), visibility 0s linear .25s; z-index:5; } .site-header .qk-dd__panel::before{ content:""; position:absolute; inset:14px 0 0 0; border-radius:20px; background:var(--dark-90); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border:1px solid var(--light-15); box-shadow:0 24px 60px rgba(0,0,0,.35); } .site-header .qk-dd.is-open .qk-dd__panel{ opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%,0); transition-delay:0s; } .site-header .qk-dd__list,.site-header .qk-dd__all{ position:relative; } .site-header .qk-dd__list{ padding:10px 10px 4px; } .site-header .qk-dd__list a{ display:flex; align-items:baseline; gap:14px; padding:11px 14px; border-radius:12px; font-size:.98rem; font-weight:500; color:var(--white); transition:background-color .25s ease; } .site-header .qk-dd__list a:hover,.site-header .qk-dd__list a:focus-visible{ background:var(--light-08); } .site-header .qk-dd__n{ font-size:.72rem; font-weight:600; letter-spacing:.08em; color:var(--gray-light); font-variant-numeric:tabular-nums; } .site-header .qk-dd__list a[aria-current="page"] .qk-dd__n{ color:var(--ax,var(--white)); } .site-header .qk-dd__list a[aria-current="page"] .qk-dd__t{ color:var(--ax,var(--white)); } .site-header .qk-dd__all{ display:flex; justify-content:space-between; align-items:center; margin:4px 10px 10px; padding:12px 14px; border-top:1px solid var(--light-08); font-size:.88rem; font-weight:600; color:var(--gray-light); transition:color .25s ease; } .site-header .qk-dd__all:hover,.site-header .qk-dd__all:focus-visible{ color:var(--white); } html:not(.js) .site-header .qk-dd:hover .qk-dd__panel,html:not(.js) .site-header .qk-dd:focus-within .qk-dd__panel{ opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%,0); transition-delay:0s; } @media (max-width:980px){ .site-header .qk-dd{ display:none; } } @media (prefers-reduced-motion:reduce){ .site-header .qk-dd__panel,.site-header .qk-dd__btn{ transition:none; } } /* Menú completo: "Servicios" con sublista (acordeón) */ .menu-overlay{ overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; justify-content:safe center; } .menu-overlay .qk-mdd__row{ display:flex; align-items:center; gap:.5em; } html body .menu-overlay.menu-overlay .qk-mdd__btn{ position:relative; width:2.2rem; height:2.2rem; flex:0 0 auto; border-radius:50%; border:1px solid var(--light-30); color:var(--gray-light); transition:color .3s ease, border-color .3s ease, transform .35s var(--ease); } html body .menu-overlay.menu-overlay .qk-mdd__btn span::before,html body .menu-overlay.menu-overlay .qk-mdd__btn span::after{ content:""; position:absolute; left:50%; top:50%; width:12px; height:1.6px; margin:-.8px 0 0 -6px; background:currentColor; transition:transform .35s var(--ease); } html body .menu-overlay.menu-overlay .qk-mdd__btn span::after{ transform:rotate(90deg); } html body .menu-overlay.menu-overlay .qk-mdd__btn:hover,html body .menu-overlay.menu-overlay .qk-mdd__btn:focus-visible{ color:var(--white); border-color:var(--white); } html body .menu-overlay.menu-overlay .qk-mdd__btn:is(:hover,:focus,:active){ border:1px solid var(--light-30); border-radius:50%; color:var(--white); } html body .menu-overlay.menu-overlay .qk-mdd__btn:is(:hover,:focus-visible){ border-color:var(--white); } .menu-overlay .qk-mdd.is-open .qk-mdd__btn span::after{ transform:rotate(0); } .menu-overlay .qk-mdd__wrap{ display:grid; grid-template-rows:0fr; visibility:hidden; transition:grid-template-rows .45s var(--ease), visibility 0s linear .45s; } .menu-overlay .qk-mdd.is-open .qk-mdd__wrap{ grid-template-rows:1fr; visibility:visible; transition-delay:0s; } .menu-overlay .qk-mdd__list{ overflow:hidden; min-height:0; display:flex; flex-direction:column; gap:0; padding-left:clamp(14px,2.4vw,30px); border-left:1px solid var(--light-15); margin:.35em 0 .35em .15em; } .menu-overlay .qk-mdd__list a{ font-size:clamp(1.05rem,2.2vw,1.55rem); font-weight:500; padding:.22em 0; } .menu-overlay .qk-mdd__list a:hover{ transform:translateX(8px); } @media (max-width:600px){ .menu-overlay .qk-mdd__list a{ font-size:1.3rem; } } @media (prefers-reduced-motion:reduce){ .menu-overlay .qk-mdd__wrap,html body .menu-overlay.menu-overlay .qk-mdd__btn,html body .menu-overlay.menu-overlay .qk-mdd__btn span::before,html body .menu-overlay.menu-overlay .qk-mdd__btn span::after{ transition:none; } } /* ===== Footer: mapa del sitio en 2 columnas + la Q del logo de fondo (cuadrante superior derecho, abajo a la izquierda) ===== */ .site-footer{ position:relative; overflow:hidden; isolation:isolate; } .site-footer::before{ content:""; position:absolute; left:0; bottom:0; z-index:-1; width:min(700px,70vw); aspect-ratio:50 / 47.35; background:url("../qkstudio-logo-q.svg") no-repeat 100% 0 / 200% 200%; opacity:.02; pointer-events:none; } .footer-col--sitemap{ grid-column:2 / span 2; } .footer-links--2{ display:grid; grid-auto-flow:column; grid-template-rows:repeat(var(--qk-rows,6),auto); grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 28px; } @media (max-width:980px){ .footer-col--sitemap{ grid-column:auto; } } .footer-col .footer-logo a{ display:inline-block; } /* Servicios: la imagen de cada servicio linkea a su página (el botón «Ver más» sigue siendo el enlace principal para teclado) */ :where(body.qk-native) .svc-visual__link{ display:block; width:100%; height:100%; } :where(body.qk-native) .svc-visual__link img{ transition:transform .6s cubic-bezier(.2,.7,.2,1); } @media (hover:hover){ :where(body.qk-native) .svc-visual__link:hover img{ transform:scale(1.03); } } @media (prefers-reduced-motion:reduce){ :where(body.qk-native) .svc-visual__link img{ transition:none; } :where(body.qk-native) .svc-visual__link:hover img{ transform:none; } }