/* =========================================================================
   QuipusCode — tema "AS" (capa de apariencia)

   Reescribe SÓLO la piel del sitio: tipografía, color, radios, sombras y la
   forma de los botones. No toca el marcado ni el JavaScript: los mismos
   índices, los mismos datos y los mismos efectos siguen funcionando igual.

   Se carga DESPUÉS de quipus.css y efectos.css, así que gana por orden.

   Del sitio de referencia se toma el SISTEMA, no su color:
     · Tipografía  Figtree 400/500/600/700/800 (autoalojada, como Inter).
     · Radios      12px en controles, 16px en tarjetas, píldora en etiquetas.
     · Botones     16/32 de relleno, peso 600, degradado del acento.
     · Etiquetas   el "kicker" es una píldora de acento tenue sobre el título.
     · Secciones   96px de aire arriba y abajo; alternan claro / oscuro.
     · Remate      última banda saturada en color de acento pleno.

   El acento es el azul de marca #0f2747 (no el ámbar de la referencia). Sobre
   él el texto va en blanco; sobre fondo oscuro el acento sube a #6d95c4 para
   que se lea, igual que la referencia aclara su ámbar en los bloques oscuros.
   ========================================================================= */

/* ------------------------------------------------------------ Tipografía */
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 400; font-display: swap;
             src: url("../fonts/figtree-400-latin.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 500; font-display: swap;
             src: url("../fonts/figtree-500-latin.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 600; font-display: swap;
             src: url("../fonts/figtree-600-latin.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 700; font-display: swap;
             src: url("../fonts/figtree-700-latin.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 800; font-display: swap;
             src: url("../fonts/figtree-800-latin.woff2") format("woff2"); }

/* ---------------------------------------------------------- Fichas (tokens) */
/* Se redefinen las mismas variables de quipus.css: todo lo que ya las usaba
   —incluida la capa de efectos— cambia de color sin tocar sus reglas. */
:root {
    /* Azul de marca. El 900 es el color corporativo tal cual; el resto son
       aclarados suyos para hover, píldoras y textos sobre fondo oscuro. */
    --marca-950: #081a33;
    --marca-900: #0f2747;
    --marca-800: #16345e;
    --marca-700: #1c4172;
    --marca-500: #23548c;
    --marca-400: #4a7ab3;
    --marca-300: #6d95c4;
    --marca-200: #b9cade;
    --marca-100: #dfe8f3;
    --marca-50:  #f2f6fb;
    --degradado-marca: linear-gradient(to right, #0f2747 0%, #23548c 100%);

    /* Verde propio de WhatsApp: no se toca, es el color del canal. */
    --wa:     #25d366;
    --wa-700: #1eb457;

    /* Neutros fríos, afinados con el azul de marca */
    --pi-900: #0f172a;
    --pi-800: #1e293b;
    --pi-700: #334155;
    --pi-600: #475569;
    --pi-500: #64748b;
    --pi-400: #94a3b8;
    --pi-300: #cbd5e1;
    --pi-200: #e2e8f0;
    --pi-100: #f1f5f9;
    --pi-50:  #f8fafc;
    --carbon: #0a1526;              /* pie de página */

    /* Reasignación de la paleta original */
    --azul-900: #0f2747;
    --azul-800: #16345e;
    --azul-600: #23548c;
    --azul-400: #4a7ab3;
    --azul-100: #b9cade;

    --acento:     #0f2747;
    --acento-700: #23548c;          /* el hover aclara, como en la referencia */
    --acento-100: rgba(15, 39, 71, .10);

    --tinta:    #0f2747;
    --gris:     #475569;
    --gris-200: #e2e8f0;
    --nieve:    #f2f6fb;

    --radio:    16px;
    --radio-sm: 12px;
    --sombra:      0 10px 30px rgba(15, 39, 71, .08);
    --sombra-alta: 0 25px 50px rgba(8, 26, 51, .30);
    --sombra-marca: 0 20px 40px rgba(15, 39, 71, .30);
}

/* Una sola familia para todo, como en la referencia: el contraste lo pone el
   peso (400 texto / 600 controles / 700 títulos), no una segunda tipografía. */
:root {
    --fuente:         "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    --fuente-titulos: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}
body { font-family: var(--fuente); color: var(--pi-600); line-height: 1.7; }
/* Sin color aquí a propósito: los títulos heredan el del bloque, así el hero,
   la sección oscura y el pie siguen escribiendo en blanco. El color concreto
   lo pone cada componente más abajo. */
h1, h2, h3, h4 { font-family: var(--fuente); font-weight: 700; letter-spacing: -.02em; }

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
    outline: 3px solid var(--marca-500); outline-offset: 2px;
}

/* ------------------------------------------------------------------ Botones */
/* Rectángulo de esquinas suaves (12px), 16/32 de relleno y peso 600.
   El principal es el degradado de marca con texto blanco; el fantasma, un
   cristal de borde blanco translúcido sobre fondo oscuro. */
.btn {
    border-radius: 12px;
    padding: 1rem 2rem;
    font-weight: 600; font-size: 1rem;
    border-width: 1px;
    transition: transform .3s ease, box-shadow .3s ease, background .3s ease,
                color .3s ease, border-color .3s ease;
}
.btn:hover { transform: translateY(-2px); }

.btn-acento {
    background: var(--degradado-marca);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 10px 24px rgba(15, 39, 71, .28);
}
.btn-acento:hover {
    background: linear-gradient(to right, #16345e 0%, #2f6aad 100%);
    color: #fff;
    box-shadow: var(--sombra-marca);
}

/* WhatsApp conserva SIEMPRE su verde de marca: el canal se reconoce por el
   color, así que queda fuera de la paleta azul del sitio. */
.btn-wa, .proyecto__wa, .fab-wa {
    background: var(--wa);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 10px 24px rgba(37, 211, 102, .30);
}
.btn-wa:hover, .proyecto__wa:hover, .fab-wa:hover {
    background: var(--wa-700);
    color: #fff;
    box-shadow: 0 16px 34px rgba(37, 211, 102, .38);
}

/* Sobre fondo de marca el degradado se pierde contra el fondo. En la
   referencia el CTA principal siempre contrasta con su bloque, así que aquí
   se invierte: blanco macizo con el texto en azul de marca. */
.hero .btn-acento,
.seccion--oscura .btn-acento {
    background: #fff; color: var(--marca-900);
    box-shadow: 0 10px 24px rgba(8, 26, 51, .35);
}
.hero .btn-acento:hover,
.seccion--oscura .btn-acento:hover {
    background: var(--marca-50); color: var(--marca-900);
    box-shadow: 0 16px 34px rgba(8, 26, 51, .45);
}

.btn-fantasma {
    background: rgba(255, 255, 255, .05);
    border-color: rgba(255, 255, 255, .20);
    color: #fff;
}
.btn-fantasma:hover { background: rgba(255, 255, 255, .10); border-color: rgba(255, 255, 255, .35); }

.btn-linea {
    background: #fff; border-color: var(--pi-200); color: var(--marca-900);
}
.btn-linea:hover { background: var(--marca-900); border-color: var(--marca-900); color: #fff; }

.btn-azul { background: var(--marca-900); color: #fff; border-color: var(--marca-900); }
.btn-azul:hover { background: var(--marca-700); border-color: var(--marca-700); }

.btn-sm { padding: .6rem 1.15rem; font-size: .875rem; border-radius: 10px; }

/* ----------------------------------------------------------------- Cabecera */
.cabecera {
    background: rgba(255, 255, 255, .95);
    border-bottom: 1px solid var(--pi-200);
    box-shadow: 0 1px 3px rgba(15, 39, 71, .06);
}
.cabecera--fija { background: rgba(255, 255, 255, .98); box-shadow: 0 4px 16px rgba(15, 39, 71, .10); }

.marca { color: var(--marca-900); font-weight: 700; }
.marca span em { color: var(--marca-500); }
.marca__glifo {
    background: var(--degradado-marca);
    color: #fff;
    border-radius: 12px; font-weight: 800;
    box-shadow: 0 6px 16px rgba(15, 39, 71, .28);
}
.marca--claro { color: #fff; }

.nav a { color: var(--pi-700); font-weight: 500; font-size: .98rem; }
.nav a:hover, .nav a.activo { color: var(--marca-900); }
.nav a::after { background: var(--marca-500); height: 2px; }
.menu-btn { color: var(--pi-700); border-radius: 6px; }
.menu-btn:hover { background: var(--marca-50); color: var(--marca-900); }
.progreso { background: var(--degradado-marca); }

/* --------------------------------------------------------------------- Hero */
/* Azul de marca en diagonal, con dos resplandores del mismo azul aclarado. */
.hero {
    background:
        radial-gradient(900px 480px at 82% -10%, rgba(74, 122, 179, .30), transparent 62%),
        radial-gradient(700px 420px at 6% 108%, rgba(35, 84, 140, .35), transparent 60%),
        linear-gradient(135deg, #0b1e38 0%, #0f2747 50%, #16345e 100%);
}
.hero::after { background-size: 56px 56px; }

.hero__etiqueta {
    background: rgba(109, 149, 196, .14);
    border: 1px solid rgba(109, 149, 196, .38);
    color: #a8c3e0;
    border-radius: 999px;
    padding: .5rem 1rem;
    font-size: .875rem; font-weight: 500;
    letter-spacing: normal; text-transform: none;
}
.hero__etiqueta .latido, .motion .hero__etiqueta .latido::after { background: #8fb3da; }

.hero h1 { font-size: clamp(2.25rem, 4.6vw, 3.75rem); line-height: 1.1; font-weight: 700; }
.hero h1 em, .hero__dato strong { color: #8fb3da; }
.hero p { color: rgba(255, 255, 255, .82); font-size: 1.125rem; }
.hero__dato span { color: rgba(255, 255, 255, .62); }

/* Maqueta: panel translúcido con borde tenue, 16px de radio. */
.mockup {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 16px;
    box-shadow: var(--sombra-alta);
}
.mockup__lienzo { background: linear-gradient(160deg, #081a33, #16345e); border-radius: 12px; }
.mockup__linea.acento { background: linear-gradient(90deg, #8fb3da, transparent); }
.mockup__tarjeta { border-radius: 10px; }
.mockup__tarjeta:nth-child(2) { background: rgba(143, 179, 218, .30); }
.mockup__grafico i:nth-child(3),
.mockup__grafico i:nth-child(7) { background: rgba(143, 179, 218, .70); }

/* ---------------------------------------------------------------- Secciones */
.seccion { padding: 6rem 0; }
.seccion--nieve { background: var(--marca-50); }
.seccion h2 { font-size: clamp(1.875rem, 3.2vw, 3rem); line-height: 1.15; margin: .75rem 0 1rem; color: var(--marca-900); }
.seccion__encabezado p { color: var(--pi-500); font-size: 1.0625rem; }

/* El kicker deja de ser texto suelto: es la píldora de la referencia. */
.seccion__kicker {
    display: inline-block;
    background: var(--marca-100); color: var(--marca-700);
    border-radius: 999px;
    padding: .25rem 1rem;
    font-size: .875rem; font-weight: 500;
    text-transform: none; letter-spacing: normal;
}
.seccion--oscura .seccion__kicker,
.contacto .seccion__kicker {
    background: rgba(255, 255, 255, .12); color: #cfe0f2;
    border: 1px solid rgba(255, 255, 255, .22);
}

.seccion--oscura {
    background:
        radial-gradient(760px 400px at 88% -15%, rgba(74, 122, 179, .22), transparent 60%),
        linear-gradient(135deg, #0b1e38 0%, #16345e 50%, #0f2747 100%);
    background-color: var(--marca-900);
    color: rgba(255, 255, 255, .72);
    border-top: 1px solid rgba(255, 255, 255, .08);
}
.seccion--oscura h2 { color: #fff; }
.seccion--oscura .seccion__encabezado p { color: rgba(255, 255, 255, .70); }

/* --------------------------------------------------------------- Servicios */
.servicio {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 16px;
    padding: 2rem;
}
.servicio::before { background: linear-gradient(to right, #8fb3da, #4a7ab3); }
.servicio:hover {
    background: rgba(255, 255, 255, .10);
    border-color: rgba(143, 179, 218, .55);
    box-shadow: 0 20px 40px rgba(8, 26, 51, .35);
}
/* El foco de luz que sigue al puntero, en azul claro de marca. */
.servicio::after {
    background: radial-gradient(260px circle at var(--sx, 50%) var(--sy, 0%),
                                rgba(143, 179, 218, .18), transparent 70%);
}
/* Cuadrado de esquinas suaves en vez del disco: el icono en blanco sobre el
   azul de marca aclarado, para que destaque contra el fondo oscuro. */
.servicio__icono {
    width: 56px; height: 56px; border-radius: 12px;
    background: linear-gradient(to bottom right, #23548c, #4a7ab3);
    color: #fff;
    box-shadow: 0 8px 20px rgba(8, 26, 51, .35);
    margin-bottom: 1.5rem;
}
.servicio:hover .servicio__icono { color: #fff; }
.servicio h3 { font-size: 1.25rem; font-weight: 700; color: #fff; margin-bottom: .75rem; }
.servicio p { color: rgba(255, 255, 255, .68); font-size: .95rem; }

.puntos button { background: rgba(255, 255, 255, .30); }
.puntos button:hover { background: rgba(255, 255, 255, .60); }
.puntos button[aria-current="true"] { background: #8fb3da; width: 28px; }

/* -------------------------------------------------------------- Portafolio */
.filtro {
    border: 1px solid var(--pi-200); background: #fff; color: var(--pi-500);
    border-radius: 999px; padding: .5rem 1.15rem; font-weight: 500;
}
.filtro:hover { border-color: var(--marca-200); color: var(--marca-700); background: var(--marca-50); }
.filtro[aria-pressed="true"] { background: var(--marca-900); border-color: var(--marca-900); color: #fff; }

.proyecto {
    background: #fff;
    border: 1px solid var(--pi-200);
    border-radius: 16px;
    box-shadow: none;
}
.proyecto:hover {
    transform: translateY(-4px);
    border-color: var(--marca-200);
    box-shadow: 0 20px 40px rgba(15, 39, 71, .14);
}
.proyecto:focus-within { border-color: var(--marca-500); }

.proyecto__media { background: linear-gradient(140deg, #16345e, #0f2747); border-bottom-color: var(--pi-200); }
.proyecto__auto { background: var(--degradado-marca); }
.slider__flecha { color: var(--marca-900); box-shadow: 0 2px 8px rgba(15, 39, 71, .25); }
.proyecto__destacado {
    background: var(--degradado-marca); color: #fff; border-radius: 8px;
    box-shadow: 0 4px 12px rgba(15, 39, 71, .35);
}
.proyecto__ampliar { background: rgba(15, 39, 71, .60); border-radius: 8px; }
.proyecto__ampliar:hover { background: rgba(15, 39, 71, .85); }
.proyecto__contador { background: rgba(15, 39, 71, .60); }

.proyecto__meta { color: var(--pi-400); }
.proyecto__categoria { color: var(--marca-500); }
.proyecto h3 { color: var(--marca-900); font-size: 1.125rem; font-weight: 700; }
.proyecto p { color: var(--pi-500); }
.chip {
    background: var(--marca-50); color: var(--pi-600); border: 1px solid var(--pi-200);
    border-radius: 6px;
}
.proyecto__wa { box-shadow: 0 6px 16px rgba(37, 211, 102, .32); }

/* ------------------------------------------------------------------ Modal */
.modal { background: rgba(8, 26, 51, .78); }
.modal__panel { border-radius: 16px; box-shadow: var(--sombra-alta); }
.modal__cerrar { color: var(--pi-500); }
.visor { border-radius: 12px; border-color: var(--pi-200); background: var(--marca-900); }
.visor__mini { border-radius: 8px; background: var(--marca-50); }
.visor__mini[aria-current="true"] { border-color: var(--marca-500); }
.visor__flecha { color: var(--marca-900); }
.modal h3 { color: var(--marca-900); }
.modal__descripcion { color: var(--pi-500); }

/* ---------------------------------------------------------------- Proceso */
#proceso::before { background-image: radial-gradient(circle, rgba(15, 39, 71, .09) 1.1px, transparent 1.1px); }
#proceso::after  { background: radial-gradient(circle, rgba(35, 84, 140, .14), transparent 66%); }

.pasos::before { background-image: linear-gradient(90deg, var(--pi-200) 0 8px, transparent 8px 16px); }
.pasos::after  { background: var(--degradado-marca); }
@media (max-width: 820px) {
    .pasos::before { background-image: linear-gradient(180deg, var(--pi-200) 0 8px, transparent 8px 16px); }
}
.paso__nodo {
    background: #fff; border: 2px solid var(--pi-200); color: var(--marca-900);
    box-shadow: 0 4px 14px rgba(15, 39, 71, .07);
}
.paso__numero {
    background: var(--degradado-marca); color: #fff;
    font-weight: 800; border: 2px solid #fff;
}
.paso h3 { color: var(--marca-900); font-size: 1.125rem; }
.paso p { color: var(--pi-500); }
@media (hover: hover) and (pointer: fine) {
    .paso:hover .paso__nodo {
        border-color: var(--marca-400); color: var(--marca-700);
        box-shadow: 0 10px 24px rgba(15, 39, 71, .22);
    }
}

/* --------------------------------------------------------------- Contacto */
/* La banda final de la referencia va en el acento pleno: aquí, azul de marca
   saturado con texto blanco. Es el único bloque macizo de la página. */
.contacto {
    position: relative; overflow: hidden;
    background: linear-gradient(to right, #0f2747 0%, #1c4172 50%, #23548c 100%);
    color: #fff;
}
/* Cuadrícula sobre el azul: dos juegos de líneas de 1px cada 56px. Va en una
   capa aparte y con máscara radial, así se desvanece en los bordes y no
   ensucia el texto. El degradado de marca sigue viéndose por debajo. */
.contacto::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(circle at 50% 45%, #000 25%, transparent 78%);
    /* El puntero la desplaza unos píxeles; sin JS se queda quieta y centrada. */
    transform: translate3d(calc(var(--px, 0) * -12px), calc(var(--py, 0) * -12px), 0);
    transition: transform .5s var(--salida, ease);
}
/* Foco de luz que sigue al cursor dentro de la banda. */
.contacto::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 50%),
                                rgba(255, 255, 255, .10), transparent 65%);
    opacity: 0; transition: opacity .5s ease;
}
.contacto.iluminada::after { opacity: 1; }
.contacto .contenedor { position: relative; z-index: 1; }
.contacto h2 { color: #fff; }
.contacto p { color: rgba(255, 255, 255, .82); font-size: 1.125rem; }
/* El CTA de la banda es de WhatsApp: verde sobre el azul, que además es el
   contraste más fuerte de toda la página. */
.contacto .btn-wa {
    font-size: 1.0625rem; padding: 1.125rem 2.25rem;
    box-shadow: 0 14px 30px rgba(37, 211, 102, .35);
}
.contacto__nota { color: rgba(255, 255, 255, .65); }

/* ------------------------------------------------------------ Pie y flotantes */
.pie { background: var(--carbon); color: rgba(255, 255, 255, .65); padding: 4rem 0 1.75rem; }
.pie h4 { color: #fff; font-weight: 600; }
.pie a { color: rgba(255, 255, 255, .65); }
.pie a:hover { color: #8fb3da; }
.pie__legal { border-top-color: rgba(255, 255, 255, .10); }

/* Verde de WhatsApp, como el resto de accesos al canal. */
.fab-wa {
    font-weight: 600; border-radius: 999px;
    box-shadow: 0 12px 28px rgba(37, 211, 102, .42);
}

.arriba {
    border: 1px solid var(--pi-200); background: #fff; color: var(--marca-900);
    box-shadow: 0 8px 22px rgba(15, 39, 71, .14);
}
.arriba:hover { background: var(--marca-900); color: #fff; border-color: var(--marca-900); }

/* --------------------------------------------------------------- Responsivo */
@media (max-width: 900px) {
    .seccion { padding: 4rem 0; }
    .nav { border-bottom: 3px solid var(--marca-500); box-shadow: 0 18px 34px rgba(15, 39, 71, .16); }
    .nav a { border-bottom-color: var(--pi-200); }
    .nav a:hover, .nav a:focus-visible { background: var(--marca-50); }
}