/* ================================================================ TIPOGRAFÍA — Inter, autohospedada Fuente variable: un solo archivo cubre todos los pesos (100–900). Se sirve desde este dominio para no filtrar la IP de cada visitante a Google y para eliminar dos conexiones externas. Licencia SIL Open Font License, que permite el autohospedaje. El unicode-range hace que el navegador descargue latin-ext solo si la página realmente usa alguno de esos caracteres. El español entero cabe en el subconjunto latin. ================================================================ */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/fonts/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: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/fonts/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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ================================================================ QUINAYA Sistema visual heredado de la marca pública de Qullqix: marino #0F1B31 + dorado #D6B45E sobre fondo claro #F1F4F9, tipografía Inter, radios 10/14. ================================================================ */ :root{ --navy: #0F1B31; --navy-text: #17233D; --gold: #D6B45E; --gold-deep: #8A6A22; --gold-tint: #F7F0DF; --bg: #F1F4F9; --surface: #FFFFFF; --border: #DFE5EF; --muted: #5A6B87; --r-btn: 10px; --r-card: 14px; --lapso: 5s; /* duración de cada diapositiva */ --nav-h: 62px; /* alto de la barra fija — usado por scroll-margin */ --gutter: clamp(1.15rem, 4vw, 3.5rem); --max: 1600px; --t--1: clamp(0.8rem, 0.78rem + 0.1vw, 0.875rem); --t-0: clamp(0.98rem, 0.95rem + 0.15vw, 1.05rem); --t-1: clamp(1.1rem, 1.03rem + 0.35vw, 1.3rem); --t-2: clamp(1.35rem, 1.2rem + 0.75vw, 1.85rem); --t-3: clamp(1.8rem, 1.4rem + 1.9vw, 2.9rem); --t-4: clamp(2.15rem, 1.5rem + 3.3vw, 3.9rem); } *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } } body{ margin:0; background:var(--bg); color:var(--navy-text); font-family:"Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size:var(--t-0); line-height:1.65; -webkit-font-smoothing:antialiased; } img{ max-width:100%; display:block; } .wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gutter); } /* los anclajes no quedan tapados por la barra fija */ section[id], header[id], .prosa h2[id]{ scroll-margin-top:calc(var(--nav-h) + 8px); } a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{ outline:3px solid var(--gold-deep); outline-offset:2px; } .eyebrow{ font-size:var(--t--1); font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--gold-deep); margin:0 0 0.85rem; } /* ============ BARRA FIJA ============ Va colgada del , no dentro del header: un elemento sticky solo se mantiene dentro de los límites de su padre, así que dentro del header se perdería al pasar el hero. */ .navbar{ position:sticky; top:0; z-index:50; background:var(--navy); border-bottom:1px solid rgba(255,255,255,.10); transition:box-shadow .2s; } .navbar.scrolled{ box-shadow:0 6px 24px rgba(10,20,37,.28); } .topbar{ display:flex; align-items:center; justify-content:space-between; gap:.75rem 1rem; flex-wrap:wrap; min-height:var(--nav-h); padding-block:.7rem; } .logo{ display:inline-flex; align-items:center; gap:.5rem; color:var(--gold); font-weight:700; font-size:var(--t-1); letter-spacing:.02em; text-decoration:none; } .navlinks{ display:flex; gap:clamp(.85rem,3vw,1.9rem); flex-wrap:wrap; } .navlinks a{ color:rgba(255,255,255,.82); text-decoration:none; font-size:var(--t--1); font-weight:500; padding-block:.15rem; } .navlinks a:hover{ color:var(--gold); } /* ============ HERO — CARRUSEL DE 3 PESTAÑAS ============ */ .masthead{ background:var(--navy); color:#FFFFFF; } .hero{ padding-block:clamp(2.6rem,7vw,4.8rem) clamp(2rem,5vw,3.2rem); } /* Las 3 diapositivas se apilan en la MISMA celda de rejilla: el contenedor toma la altura de la más alta y al cambiar no hay salto. */ .slides{ display:grid; } .slide{ grid-area:1 / 1; display:grid; gap:clamp(1.8rem,4vw,3rem); grid-template-columns:1fr; align-items:center; opacity:0; visibility:hidden; transition:opacity .45s ease; } .slide.is-active{ opacity:1; visibility:visible; } @media (min-width:900px){ .slide{ grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); } } @media (min-width:1400px){ .slide{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(3rem,5vw,5rem); } } @media (prefers-reduced-motion: reduce){ .slide{ transition:none; } } .slide .eyebrow{ color:var(--gold); } .slide h1, .slide .h1-visual{ font-weight:700; font-size:var(--t-4); line-height:1.06; letter-spacing:-0.028em; margin:0 0 1.15rem; max-width:17ch; text-wrap:balance; } .slide h1 em, .slide .h1-visual em{ font-style:normal; color:var(--gold); } .slide p{ font-size:var(--t-1); color:rgba(255,255,255,.86); max-width:58ch; margin:0 0 clamp(1.7rem,4vw,2.3rem); } /* Marco de imagen: 4:3 fijo, así ninguna imagen rompe la maqueta */ .hero-media{ aspect-ratio:4 / 3; border-radius:var(--r-card); overflow:hidden; background:#1B2A47; border:1px solid rgba(255,255,255,.12); } .hero-media img{ width:100%; height:100%; object-fit:cover; display:block; } .hero-actions{ display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap; } /* Pestañas del carrusel */ .carousel-tabs{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:clamp(2rem,4vw,2.6rem); padding-top:1.1rem; border-top:1px solid rgba(255,255,255,.14); } .carousel-tabs button{ position:relative; overflow:hidden; font-family:inherit; font-size:var(--t--1); font-weight:600; color:rgba(255,255,255,.68); background:none; border:1px solid transparent; border-radius:8px; padding:.55em .9em .75em; cursor:pointer; transition:color .18s, border-color .18s; } /* Barra de carga: marca cuánto falta para la siguiente diapositiva. Es la que dispara el avance (ver el script), así que nunca se desincroniza con el cambio de slide. */ .tab-prog{ position:absolute; left:0; right:0; bottom:0; height:3px; background:rgba(255,255,255,.18); opacity:0; transition:opacity .2s; } .carousel-tabs button[aria-selected="true"] .tab-prog{ opacity:1; } .tab-prog i{ display:block; height:100%; width:100%; background:var(--gold); transform:scaleX(0); transform-origin:left; } .carousel-tabs:not(.sin-auto) button[aria-selected="true"] .tab-prog i{ animation:cargar var(--lapso) linear forwards; } @keyframes cargar{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } } /* Al pasar el mouse o enfocar con teclado, la barra se congela y con ella el avance. */ #carrusel:hover .tab-prog i, #carrusel:focus-within .tab-prog i{ animation-play-state:paused; } /* Si se eligió una pestaña a mano, se retira el automático por completo */ .carousel-tabs.sin-auto .tab-prog{ display:none; } .carousel-tabs button:hover{ color:#FFFFFF; } .carousel-tabs button[aria-selected="true"]{ color:var(--gold); border-color:rgba(214,180,94,.55); } .btn{ display:inline-block; font-family:inherit; font-size:var(--t-0); font-weight:700; border-radius:var(--r-btn); padding:0.9em 1.9em; text-decoration:none; text-align:center; border:1px solid transparent; cursor:pointer; transition:background-color .18s, color .18s; } .btn-gold{ background:var(--gold); color:var(--navy-text); } .btn-gold:hover{ background:#E4C878; } /* invitación a seguir bajando */ .scroll-cue{ color:rgba(255,255,255,.8); text-decoration:none; font-size:var(--t--1); font-weight:600; letter-spacing:.06em; text-transform:uppercase; display:inline-flex; align-items:center; gap:.5rem; } .scroll-cue:hover{ color:var(--gold); } .scroll-cue span{ display:inline-block; animation:nudge 2.2s ease-in-out infinite; } @keyframes nudge{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(4px); } } @media (prefers-reduced-motion: reduce){ .scroll-cue span{ animation:none; } } /* ============ BLOQUES CLAROS ============ */ .block{ padding-block:clamp(3rem,7vw,5.5rem); } /* Encabezado de sección: rótulo, título y bajada apilados. Sin max-width, para que la bajada ocupe el ancho del contenedor. */ .block-head{ margin-bottom:clamp(1.9rem,4vw,2.8rem); } .block-head h2{ font-weight:700; font-size:var(--t-3); line-height:1.12; letter-spacing:-0.02em; margin:0 0 .85rem; text-wrap:balance; } .block-head p{ margin:0; color:var(--muted); font-size:var(--t-1); } .card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card); padding:clamp(1.35rem,3vw,1.9rem); } /* 4 servicios en 2x2: con descripciones de este largo, cuatro columnas quedan demasiado angostas para leerse. */ .grid-svc{ display:grid; gap:1.1rem; grid-template-columns:1fr; } @media (min-width:760px){ .grid-svc{ grid-template-columns:repeat(2,1fr); } } .svc-mark{ width:44px; height:44px; border-radius:10px; background:var(--gold-tint); display:flex; align-items:center; justify-content:center; margin-bottom:1.05rem; } .svc-mark svg{ width:22px; height:22px; stroke:var(--gold-deep); fill:none; stroke-width:1.9; } .card h3{ font-weight:700; font-size:var(--t-2); line-height:1.2; margin:0 0 .6rem; letter-spacing:-0.015em; } .card > p{ margin:0 0 1.1rem; color:var(--muted); max-width:60ch; } .tick{ list-style:none; margin:0; padding:0; display:grid; gap:.45rem; } .tick li{ position:relative; padding-left:1.35rem; font-size:var(--t--1); } @media (min-width:1200px){ /* con el contenedor ancho, las viñetas dejarían media tarjeta vacía */ .tick{ grid-template-columns:1fr 1fr; column-gap:1.75rem; } } .tick li::before{ content:""; position:absolute; left:0; top:.55em; width:7px; height:7px; border-radius:50%; background:var(--gold); } /* ============ PROCESO ============ */ .steps{ list-style:none; margin:0; padding:0; display:grid; gap:1.1rem; grid-template-columns:1fr; counter-reset:s; } @media (min-width:760px){ .steps{ grid-template-columns:repeat(4,1fr); } } .steps li{ counter-increment:s; border-top:2px solid var(--gold); padding-top:1rem; } .steps li::before{ content:counter(s,decimal-leading-zero); display:block; font-size:var(--t--1); font-weight:700; color:var(--gold-deep); letter-spacing:.1em; margin-bottom:.5rem; } .steps h3{ font-weight:700; font-size:var(--t-1); margin:0 0 .35rem; } .steps p{ margin:0; color:var(--muted); font-size:var(--t--1); } /* ============ CONTACTO ============ */ .contact{ background:var(--navy); color:#FFFFFF; padding-block:clamp(3rem,7vw,5.5rem); } .contact-grid{ display:grid; gap:clamp(1.8rem,4vw,3rem); grid-template-columns:minmax(0,1fr); } @media (min-width:900px){ .contact-grid{ grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); } } @media (min-width:1400px){ .contact-grid{ grid-template-columns:minmax(0,1fr) minmax(0,.85fr); gap:clamp(3rem,6vw,6rem); } } .contact h2{ font-weight:700; font-size:var(--t-3); line-height:1.12; letter-spacing:-0.02em; margin:0 0 .8rem; } .contact .intro{ color:rgba(255,255,255,.84); margin:0 0 1.6rem; max-width:44ch; } .contact .eyebrow{ color:var(--gold); } .direct{ list-style:none; margin:0; padding:0; } .direct a{ color:#FFFFFF; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.35); padding-bottom:2px; } .direct a:hover{ color:var(--gold); border-color:var(--gold); } .form-card{ background:var(--surface); border-radius:var(--r-card); padding:clamp(1.35rem,3.5vw,2rem); color:var(--navy-text); } .field{ margin-bottom:1rem; } .field label{ display:block; font-size:var(--t--1); font-weight:600; margin-bottom:.4rem; } .req{ color:var(--gold-deep); } .field input, .field textarea, .field select{ width:100%; font-family:inherit; font-size:var(--t-0); color:var(--navy-text); background:var(--bg); border:1px solid var(--border); border-radius:12px; padding:.8em .9em; transition:border-color .16s, box-shadow .16s; } .field input:focus, .field textarea:focus, .field select:focus{ border-color:var(--gold-deep); box-shadow:0 0 0 3px rgba(214,180,94,.25); outline:none; } .field textarea{ resize:vertical; min-height:120px; } .row2{ display:grid; gap:1rem; grid-template-columns:1fr; } @media (min-width:560px){ .row2{ grid-template-columns:1fr 1fr; } } .trap{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; } .form-note{ font-size:var(--t--1); color:var(--muted); margin:.9rem 0 0; } .status{ margin:1rem 0 0; font-size:var(--t--1); font-weight:600; min-height:1.2em; } .status.ok{ color:#0B7A54; } .status.err{ color:#B4241C; } button.btn:disabled{ opacity:.6; cursor:not-allowed; } /* ============ PIE ============ */ footer{ background:#0A1425; color:rgba(255,255,255,.6); padding-block:1.9rem; font-size:var(--t--1); } footer .wrap{ display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; align-items:center; } footer strong{ color:var(--gold); font-weight:700; } /* ================================================================ PÁGINAS DE SERVICIO Reutilizan todos los tokens de arriba. Solo añaden la maqueta propia de una página interior. ================================================================ */ .svc-hero{ background:var(--navy); color:#FFFFFF; padding-block:clamp(2.8rem,7vw,5rem); } .svc-hero .eyebrow{ color:var(--gold); } .svc-hero h1{ font-weight:700; font-size:var(--t-4); line-height:1.06; letter-spacing:-0.028em; margin:0 0 1.15rem; max-width:20ch; text-wrap:balance; } .svc-hero h1 em{ font-style:normal; color:var(--gold); } .svc-hero .bajada{ font-size:var(--t-1); color:rgba(255,255,255,.86); max-width:62ch; margin:0 0 clamp(1.7rem,4vw,2.3rem); } /* migas de pan */ .migas{ font-size:var(--t--1); color:rgba(255,255,255,.62); margin:0 0 1.4rem; } .migas a{ color:rgba(255,255,255,.82); text-decoration:none; } .migas a:hover{ color:var(--gold); } .migas span{ margin-inline:.45rem; } /* cuerpo de artículo — mismas secciones que la portada Cada

abre un .block con su encabezado, igual que "Servicios" y "Cómo trabajamos" en el index. El fondo alterna para que se vea dónde termina una sección y empieza la siguiente. Dentro, el contenido ocupa el ancho repartiéndose —columnas y rejillas—, no alargando la línea. / .prosa{ max-width:none; } .block.alterna{ background:var(--surface); } .block.alterna .item, .block.alterna .otros a{ background:var(--bg); } .block-head .eyebrow{ color:var(--gold-deep); } / entradilla: los párrafos previos al primer título, a dos columnas / .entrada{ font-size:var(--t-1); } @media (min-width:900px){ .entrada{ columns:2; column-gap:clamp(2rem,4vw,4rem); } } .entrada p{ margin:0 0 1.05rem; break-inside:avoid; } .entrada p:last-child{ margin-bottom:0; } .bloque-cont{ display:grid; gap:1.6rem; } / rejilla de subtemas: cada h3 con su párrafo, en tarjetas / .rejilla{ display:grid; gap:clamp(1.1rem,2.2vw,1.7rem); } @media (min-width:760px){ .rejilla{ grid-template-columns:repeat(auto-fit,minmax(19rem,1fr)); } } .rejilla .item{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card); padding:1.35rem 1.5rem; } .rejilla h3{ margin:0 0 .5rem; font-weight:700; font-size:var(--t-1); letter-spacing:-.015em; line-height:1.25; } .rejilla p{ margin:0 0 .8rem; color:var(--muted); } .rejilla p:last-child{ margin-bottom:0; } / bloques de texto corrido: dos columnas en pantallas anchas / @media (min-width:900px){ .texto{ columns:2; column-gap:clamp(2rem,4vw,3.5rem); } } .texto p{ margin:0 0 1.05rem; break-inside:avoid; } .texto p:last-child{ margin-bottom:0; } .prosa .suelto, .prosa .entradilla{ margin:0; max-width:92ch; } .prosa .entradilla{ font-weight:600; } .bloque-cont ul{ margin:0; padding:0; list-style:none; display:grid; gap:.6rem; } @media (min-width:900px){ .bloque-cont ul{ grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:clamp(2rem,4vw,3.5rem); } } .prosa li{ position:relative; padding-left:1.5rem; } .prosa li::before{ content:""; position:absolute; left:0; top:.62em; width:8px; height:8px; border-radius:50%; background:var(--gold); } .prosa strong{ color:var(--navy-text); } / destacado / .nota{ background:var(--gold-tint); border-left:3px solid var(--gold-deep); border-radius:0 var(--r-card) var(--r-card) 0; padding:clamp(1.1rem,3vw,1.5rem); } .nota p{ margin:0; } / otros servicios / .otros{ display:grid; gap:1rem; grid-template-columns:1fr; } @media (min-width:760px){ .otros{ grid-template-columns:repeat(3,1fr); } } .otros a{ display:block; text-decoration:none; color:inherit; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card); padding:1.2rem; transition:border-color .18s, transform .18s; } .otros a:hover{ border-color:var(--gold-deep); transform:translateY(-2px); } .otros strong{ display:block; font-size:var(--t-1); margin-bottom:.3rem; } .otros span{ font-size:var(--t--1); color:var(--muted); } / cierre con llamada a la acción / .cierre{ background:var(--navy); color:#FFFFFF; padding-block:clamp(2.6rem,6vw,4.2rem); margin-top:clamp(3rem,7vw,5rem); } .cierre h2{ font-weight:700; font-size:var(--t-3); letter-spacing:-.02em; margin:0 0 .8rem; max-width:20ch; } .cierre p{ color:rgba(255,255,255,.86); max-width:52ch; margin:0 0 1.7rem; } / enlaces desde las tarjetas de servicio de la portada / .card h3 a{ color:inherit; text-decoration:none; } .card h3 a:hover{ color:var(--gold-deep); } .mas{ margin:1.1rem 0 0; } .mas a{ font-size:var(--t--1); font-weight:700; color:var(--gold-deep); text-decoration:none; } .mas a:hover{ text-decoration:underline; } / contenedor del widget de verificación El widget de Turnstile mide 300px fijos. Dentro de la tarjeta del formulario, en pantallas de 375px o menos el ancho útil se queda corto y el widget desbordaba hacia la derecha, lo que hace que toda la página se pueda arrastrar en horizontal. / .turnstile{ margin:0 0 1rem; min-height:65px; max-width:100%; overflow:hidden; } .turnstile iframe{ max-width:100%; } / ============ AJUSTES DE MÓVIL ============ / / iOS Safari amplía la página al enfocar un campo cuya tipografía mide menos de 16px, y al salir del campo no vuelve al zoom original. Es la causa más común de que un formulario se sienta roto en iPhone. / @media (max-width:768px){ .field input, .field textarea, .field select{ font-size:16px; } } / Se recorta el acolchado de la tarjeta para que el widget de verificación quepa sin desbordar. / @media (max-width:430px){ .form-card{ padding-inline:1.1rem; } } / Con el ancho justo, la barra reparte el logo y los enlaces en dos líneas —tres, bajo 360px— y mide bastante más que los 62px de escritorio. El salto a un ancla usa ese valor: si se queda corto, el título aterriza tapado. Medido: 100px a 360-414px, 149px a 320px. / @media (max-width:440px){ section[id], header[id]{ scroll-margin-top:116px; } } @media (max-width:359px){ section[id], header[id]{ scroll-margin-top:172px; } } / Área táctil de 44px en dispositivos de puntero grueso —teléfonos y tabletas—, que es el mínimo recomendado para tocar con el dedo. Se fija con min-height y no con relleno: así no depende de la métrica de la tipografía. En escritorio no aplica, porque alargaría la barra fija sin que nadie lo necesite. / @media (pointer:coarse){ .navlinks a{ display:inline-flex; align-items:center; min-height:44px; padding-block:0; } } / El widget de Turnstile mide 300px fijos y no se puede achicar por configuración. Bajo 400px se escala para que quepa dentro de la tarjeta: sin esto el navegador recorta el logotipo de Cloudflare y los enlaces legales del borde derecho. / @media (max-width:400px){ .turnstile{ / Se le deja su ancho natural y se reduce con transform. Recortarlo con overflow no sirve: el recorte ocurre antes de la escala y cortaría el widget igual. El área desplazable de la página sí cuenta la caja ya transformada, así que no aparece barra horizontal. */ width:300px; overflow:visible; transform:scale(.82); transform-origin:left top; min-height:54px; } }