/*
=============================================================
CLICWOW 2026
Hoja de estilos principal

ÍNDICE
01. Variables
02. Base
03. Utilidades
04. Cabecera
05. Portada
06. Integraciones
07. Soluciones
08. Inteligencia Artificial
09. Software a medida
10. Método de trabajo
11. Experiencia
12. Proyectos
13. Novedades
14. Contacto
15. Pie de página
16. Chatbot
17. Responsive
=============================================================
*/


/* =========================================================
   01. VARIABLES
   ========================================================= */

:root {
    --color-fondo-oscuro: #06161b;
    --color-fondo-oscuro-2: #0a2027;
    --color-turquesa: #00e4bf;
    --color-turquesa-suave: #aaf8ea;
    --color-texto: #142129;
    --color-texto-suave: #63727b;
    --color-blanco: #ffffff;
    --color-fondo-claro: #f4f7f8;
    --color-borde: #dfe7ea;

    --sombra-suave: 0 1em 2.5em rgba(9, 34, 41, 0.08);
    --sombra-fuerte: 0 1.375em 3.75em rgba(0, 0, 0, 0.20);

    --radio-pequeno: 0.625em;
    --radio-medio: 1.125em;
    --radio-grande: 1.75em;

    --ancho-contenido: 75.625em;
    --transicion: 180ms ease;
}


/* =========================================================
   02. BASE
   ========================================================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    color: var(--color-texto);
    background: var(--color-blanco);
    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

img {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
textarea {
    font: inherit;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

h1,
h2,
h3,
p {
    margin-top: 0;
}

h1,
h2,
h3 {
    line-height: 1.08;
    letter-spacing: -0.035em;
}

h1 {
    font-size: clamp(3rem, 6vw, 5.6rem);
}

h2 {
    font-size: clamp(2.15rem, 4vw, 3.7rem);
}

h3 {
    font-size: 1.25rem;
}


/* =========================================================
   03. UTILIDADES
   ========================================================= */

.contenedor {
    width: min(calc(100% - 2.5em), var(--ancho-contenido));
    margin-inline: auto;
}

.seccion {
    padding: 6.25em 0;
}

.sobretitulo,
.etiqueta-seccion {
    color: var(--color-turquesa);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.17em;
    text-transform: uppercase;
}

.grupo-botones {
    display: flex;
    flex-wrap: wrap;
    gap: 0.875em;
}

.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.625em;
    min-height: 3em;
    padding: 0 1.375em;
    border: 0.0625em solid transparent;
    border-radius: var(--radio-pequeno);
    font-size: 0.83rem;
    font-weight: 800;
    text-transform: uppercase;
    transition:
        transform var(--transicion),
        box-shadow var(--transicion),
        background var(--transicion);
}

.boton:hover {
    transform: translateY(-0.125em);
}

.boton-principal {
    color: #03241e;
    background: var(--color-turquesa);
    box-shadow: 0 0.625em 1.875em rgba(0, 228, 191, 0.18);
}

.boton-secundario {
    color: var(--color-blanco);
    border-color: rgba(255, 255, 255, 0.30);
    background: rgba(255, 255, 255, 0.04);
}

.boton-claro {
    color: var(--color-texto);
    border-color: var(--color-borde);
    background: var(--color-blanco);
}


/* =========================================================
   04. CABECERA
   ========================================================= */

.cabecera-principal {
    position: absolute;
    z-index: 1000;
    top: 0;
    right: 0;
    left: 0;
    color: var(--color-blanco);
}

.cabecera-con-fondo {
    position: fixed;
    background: rgba(3, 17, 22, 0.94);
    box-shadow: 0 0.625em 1.875em rgba(0, 0, 0, 0.14);
    backdrop-filter: blur(0.875em);
}

.cabecera-interior {
    display: grid;
    grid-template-columns: 11.875em 1fr auto;
    align-items: center;
    min-height: 5.75em;
    gap: 1.5em;
}

/* Se usa el logotipo original aportado por Clicwow, no una recreación CSS. */
.marca-clicwow {
    display: flex;
    align-items: center;
    width: 11.25em;
    height: 4.5em;
    overflow: hidden;
}

.marca-clicwow img {
    width: 11.125em;
    height: auto;
    object-fit: contain;
}

.menu-principal {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5625em;
    font-size: 0.82rem;
    white-space: nowrap;
}

.menu-principal a {
    color: rgba(255, 255, 255, 0.80);
    transition: color var(--transicion);
}

.menu-principal a:hover,
.menu-principal a.activo {
    color: var(--color-turquesa);
}

.boton-cabecera {
    min-width: 14.25em;
    color: var(--color-turquesa);
    border-color: var(--color-turquesa);
    background: rgba(3, 17, 22, .45);
}

.boton-menu-movil {
    display: none;
}


/* =========================================================
   05. PORTADA
   ========================================================= */

.seccion-portada {
    position: relative;
    overflow: hidden;
    min-height: 40.125em;
    padding: 7.875em 0 1.75em;
    color: var(--color-blanco);
    background: #031319;
}

/* Fotografía de ambiente + velo oscuro para mantener la legibilidad. */
.fondo-portada {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(2,16,21,.98) 0%, rgba(2,16,21,.93) 32%, rgba(2,16,21,.58) 66%, rgba(2,16,21,.36) 100%),
        linear-gradient(0deg, rgba(1,14,18,.42), rgba(1,14,18,.15)),
        url('/assets/img/fondo-portada-tecnologia.jpg') center right / cover no-repeat;
}

.portada-rejilla {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 48% 52%;
    align-items: center;
    gap: 0.75em;
}

.portada-contenido {
    position: relative;
    z-index: 4;
}

.portada-contenido .sobretitulo {
    margin-bottom: 0.8125em;
    font-size: .72rem;
    letter-spacing: .19em;
}

.portada-contenido h1 {
    max-width: 33.75em;
    margin-bottom: 1.0625em;
    font-size: clamp(2.7rem, 4vw, 4.15rem);
    line-height: 1.02;
    letter-spacing: -.045em;
}

.portada-contenido h1 span {
    color: var(--color-turquesa);
}

.portada-descripcion {
    max-width: 36.875em;
    margin-bottom: 1.5625em;
    color: rgba(255, 255, 255, 0.78);
    font-size: .98rem;
    line-height: 1.55;
}

.grupo-botones {
    gap: 1em;
}

.seccion-portada .boton {
    min-height: 3.25em;
    padding-inline: 1.6875em;
}

.portada-garantias {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    width: 100%;
    margin-top: 2.125em;
}

.garantia {
    display: grid;
    grid-template-columns: 2.375em 1fr;
    align-items: center;
    gap: 0.5625em;
    min-width: 0;
    padding: 0 0.875em;
    border-right: 0.0625em solid rgba(255,255,255,.20);
}

.garantia:first-child { padding-left: 0; }
.garantia:last-child { border-right: 0; }

.icono-garantia {
    color: var(--color-turquesa);
    font-size: 1.7rem;
    line-height: 1;
}

.garantia > span:last-child {
    color: rgba(255,255,255,.72);
    font-size: .68rem;
    line-height: 1.35;
}

.garantia strong {
    display: block;
    color: var(--color-blanco);
    font-size: .74rem;
}

/* Diagrama de sistemas: tamaños y posiciones replican el mockup aprobado. */
.portada-esquema {
    position: relative;
    min-height: 29.375em;
}

.nucleo-clicwow,
.nodo-sistema {
    position: absolute;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0.0625em solid rgba(0, 228, 191, 0.78);
    background: rgba(3, 23, 29, 0.88);
    box-shadow: 0 0 1.5em rgba(0, 228, 191, 0.13), inset 0 0 1.5625em rgba(0, 228, 191, 0.04);
    backdrop-filter: blur(0.5em);
}

.nucleo-clicwow {
    top: 50%;
    left: 52%;
    width: 9.875em;
    height: 8.75em;
    padding: 1.375em;
    border-radius: 1.25em;
    transform: translate(-50%, -50%);
}

.nucleo-clicwow img {
    width: 8.125em;
    height: auto;
}

.nodo-sistema {
    width: 6.75em;
    min-height: 5.25em;
    flex-direction: column;
    gap: 0.3125em;
    padding: 0.6875em;
    border-radius: 0.875em;
    color: var(--color-blanco);
    font-size: .69rem;
    text-align: center;
}

.icono-nodo {
    color: var(--color-turquesa);
    font-size: 1.65rem;
    line-height: 1;
}

.nodo-sistema strong { font-size: .68rem; }

/* Líneas luminosas detrás de los nodos. */
.lineas-esquema {
    position: absolute;
    z-index: 1;
    inset: 19% 11% 17%;
    opacity: .78;
    background:
        linear-gradient(var(--color-turquesa),var(--color-turquesa)) 50% 0/0.0625em 100% no-repeat,
        linear-gradient(90deg,var(--color-turquesa),var(--color-turquesa)) 0 50%/100% 0.0625em no-repeat;
    filter: drop-shadow(0 0 0.375em rgba(0,228,191,.8));
}

.nodo-empresa { top: 0; left: 52%; transform: translateX(-50%); }
.nodo-erp { top: 19%; right: 2%; }
.nodo-app { right: -1%; bottom: 20%; }
.nodo-datos { right: 18%; bottom: 0; }
.nodo-integraciones { bottom: 0; left: 19%; width: 7.625em; }
.nodo-web { bottom: 20%; left: 0; }
.nodo-ia { top: 19%; left: 8%; }


/* =========================================================
   06. INTEGRACIONES
   ========================================================= */

.franja-integraciones {
    padding: 1.875em 0 2.125em;
    border-bottom: 0.0625em solid var(--color-borde);
    background: var(--color-blanco);
}

.franja-integraciones .etiqueta-seccion {
    margin-bottom: 1.25em;
    color: #98a4aa;
}

.lista-integraciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75em;
}

.integracion {
    padding: 0.5em 0.8125em;
    border: 0.0625em solid var(--color-borde);
    border-radius: 62.4375em;
    color: #46555c;
    background: #fff;
    font-size: 0.84rem;
    font-weight: 700;
}


/* =========================================================
   07. SOLUCIONES
   ========================================================= */

.seccion-soluciones {
    background: var(--color-fondo-claro);
}

.soluciones-rejilla {
    display: grid;
    grid-template-columns: 0.78fr 1.22fr;
    gap: 4.375em;
}

.soluciones-presentacion {
    align-self: center;
}

.soluciones-presentacion h2 {
    margin-bottom: 1.625em;
}

.soluciones-presentacion > p:not(.sobretitulo) {
    margin-bottom: 1.875em;
    color: var(--color-texto-suave);
}

.tarjetas-servicios {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.875em;
}

.tarjeta-servicio {
    min-height: 15.625em;
    padding: 1.625em;
    border: 0.0625em solid var(--color-borde);
    border-radius: var(--radio-medio);
    background: var(--color-blanco);
    box-shadow: var(--sombra-suave);
    transition:
        transform var(--transicion),
        border-color var(--transicion);
}

.tarjeta-servicio:hover {
    transform: translateY(-0.3125em);
    border-color: var(--color-turquesa);
}

.icono-servicio {
    margin-bottom: 2em;
    color: var(--color-turquesa);
    font-size: 2rem;
}

.tarjeta-servicio p {
    color: var(--color-texto-suave);
    font-size: 0.92rem;
}

.tarjeta-servicio a {
    color: #00a98e;
    font-size: 0.82rem;
    font-weight: 800;
}


/* =========================================================
   08. INTELIGENCIA ARTIFICIAL
   ========================================================= */

.seccion-ia {
    overflow: hidden;
    color: var(--color-blanco);
    background:
        radial-gradient(circle at 78% 50%, rgba(0, 228, 191, 0.16), transparent 27%),
        var(--color-fondo-oscuro);
}

.ia-rejilla {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    align-items: center;
    gap: 5em;
}

.ia-contenido h2 span {
    display: block;
    color: var(--color-turquesa);
}

.ia-contenido > p:not(.sobretitulo) {
    margin-bottom: 2em;
    color: rgba(255,255,255,.68);
}

.ia-mapa {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.875em;
}

.ia-centro {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    margin-bottom: 0.625em;
}

.ia-orbe {
    display: grid;
    width: 8.125em;
    height: 8.125em;
    place-items: center;
    border: 0.0625em solid var(--color-turquesa);
    border-radius: 50%;
    color: var(--color-turquesa);
    background:
        radial-gradient(circle, rgba(0,228,191,.25), transparent 65%);
    box-shadow: 0 0 4.375em rgba(0,228,191,.18);
    font-size: 2.5rem;
    font-weight: 900;
}

.ia-elemento {
    padding: 1.25em;
    border: 0.0625em solid rgba(0, 228, 191, 0.25);
    border-radius: 0.875em;
    background: rgba(255,255,255,.035);
    font-weight: 700;
}

.ia-elemento small {
    color: rgba(255,255,255,.55);
    font-weight: 400;
}


/* =========================================================
   09. SOFTWARE A MEDIDA
   ========================================================= */

.seccion-software {
    background: var(--color-blanco);
}

.software-rejilla {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 4.375em;
}

.software-visual {
    padding: 1.25em;
    border-radius: var(--radio-grande);
    background:
        linear-gradient(135deg, rgba(0,228,191,.20), rgba(8,37,45,.06));
}

.ventana-software {
    overflow: hidden;
    min-height: 24.375em;
    border: 0.0625em solid var(--color-borde);
    border-radius: 1.125em;
    background: #fff;
    box-shadow: var(--sombra-fuerte);
}

.barra-ventana {
    display: flex;
    gap: 0.4375em;
    padding: 0.875em;
    border-bottom: 0.0625em solid var(--color-borde);
}

.barra-ventana span {
    width: 0.5625em;
    height: 0.5625em;
    border-radius: 50%;
    background: #d6dee1;
}

.panel-software {
    display: grid;
    grid-template-columns: 5.75em 1fr;
    min-height: 21.25em;
}

.panel-lateral {
    background: #0c2027;
}

.panel-contenido {
    padding: 2.125em;
    background: #f8fafb;
}

.linea-panel {
    height: 0.875em;
    border-radius: 6.1875em;
    background: #dfe7e9;
}

.linea-grande {
    width: 52%;
}

.metricas-panel {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75em;
    margin: 1.75em 0;
}

.metricas-panel span {
    height: 5em;
    border-radius: 0.75em;
    background: #fff;
    box-shadow: 0 0.5em 1.5em rgba(0,0,0,.05);
}

.grafica-panel {
    height: 9.0625em;
    border-radius: 0.75em;
    background:
        linear-gradient(180deg, rgba(0,228,191,.20), transparent),
        repeating-linear-gradient(
            0deg,
            transparent 0,
            transparent 1.6875em,
            #e5edef 1.75em
        );
}

.software-contenido h2 {
    font-size: clamp(2rem, 3.5vw, 3.15rem);
}

.lista-ventajas {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.625em 1.375em;
    padding: 0;
    margin: 1.875em 0;
    list-style: none;
}

.lista-ventajas li::before {
    margin-right: 0.5em;
    color: var(--color-turquesa);
    content: "✓";
    font-weight: 900;
}


/* =========================================================
   10. MÉTODO DE TRABAJO
   ========================================================= */

.seccion-metodo {
    padding: 0 0 4.375em;
}

.pasos-metodo {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.0625em;
    overflow: hidden;
    border: 0.0625em solid var(--color-borde);
    border-radius: var(--radio-medio);
    background: var(--color-borde);
}

.paso-metodo {
    padding: 1.75em;
    background: var(--color-blanco);
}

.paso-metodo > span {
    display: block;
    margin-bottom: 1.5em;
    color: var(--color-turquesa);
    font-size: 1.45rem;
    font-weight: 900;
}

.paso-metodo p {
    margin-bottom: 0;
    color: var(--color-texto-suave);
    font-size: 0.9rem;
}


/* =========================================================
   11. EXPERIENCIA
   ========================================================= */

.seccion-experiencia {
    padding: 3em 0;
    background:
        linear-gradient(90deg, #d6fff7, #6ff5dc);
}

.experiencia-rejilla {
    display: grid;
    grid-template-columns: repeat(3, 0.65fr) 1.4fr;
    align-items: center;
    gap: 2.125em;
}

.dato-experiencia {
    display: flex;
    flex-direction: column;
}

.dato-experiencia strong {
    color: #007d6b;
    font-size: 2.6rem;
    line-height: 1;
}

.dato-experiencia span {
    margin-top: 0.5em;
    font-size: 0.82rem;
}

.frase-experiencia {
    margin: 0;
    padding: 1.5em 1.75em;
    border-radius: 1em;
    color: var(--color-blanco);
    background: var(--color-fondo-oscuro);
}

.frase-experiencia cite {
    display: block;
    margin-top: 0.625em;
    color: var(--color-turquesa);
    font-style: normal;
}


/* =========================================================
   12. PROYECTOS
   ========================================================= */

.seccion-proyectos {
    background: #fff;
}

.cabecera-seccion {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1.875em;
    margin-bottom: 2.5em;
}

.cabecera-seccion h2 {
    margin-bottom: 0.75em;
}

.cabecera-seccion p:last-child {
    margin-bottom: 0;
    color: var(--color-texto-suave);
}

.rejilla-proyectos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.375em;
}

.tarjeta-proyecto {
    overflow: hidden;
    border: 0.0625em solid var(--color-borde);
    border-radius: var(--radio-medio);
    background: #fff;
    box-shadow: var(--sombra-suave);
}

.imagen-proyecto {
    height: 13.125em;
    background: #eaf0f2;
}

.imagen-proyecto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.proyecto-sin-imagen {
    display: grid;
    width: 100%;
    height: 100%;
    place-items: center;
    color: var(--color-turquesa);
    background:
        radial-gradient(circle at 50% 50%, rgba(0,228,191,.20), transparent 32%),
        linear-gradient(135deg, #0a2027, #12343e);
}

.proyecto-sin-imagen span {
    font-size: 4.2rem;
    font-weight: 900;
}

.contenido-proyecto {
    padding: 1.5em;
}

.etiqueta-proyecto {
    margin-bottom: 0.5em;
    color: #00a98e;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
}

.contenido-proyecto p:not(.etiqueta-proyecto) {
    color: var(--color-texto-suave);
    font-size: 0.92rem;
}

.contenido-proyecto a {
    color: #00a98e;
    font-size: 0.83rem;
    font-weight: 800;
}


/* =========================================================
   13. NOVEDADES
   ========================================================= */

.seccion-novedades {
    border-top: 0.0625em solid var(--color-borde);
    background: var(--color-fondo-claro);
}

.rejilla-novedades {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.375em;
}

.tarjeta-novedad {
    min-height: 18.125em;
    padding: 1.875em;
    border: 0.0625em solid var(--color-borde);
    border-radius: var(--radio-medio);
    background: #fff;
    box-shadow: var(--sombra-suave);
}

.fecha-novedad {
    color: #8a989e;
    font-size: 0.78rem;
}

.tarjeta-novedad h3 {
    font-size: 1.45rem;
}

.tarjeta-novedad > p:not(.fecha-novedad) {
    color: var(--color-texto-suave);
}

.tarjeta-novedad a {
    color: #00a98e;
    font-weight: 800;
}

.mensaje-sin-novedades {
    padding: 2.125em;
    border: 0.0625em dashed #b9c7cc;
    border-radius: var(--radio-medio);
    background: #fff;
}


/* =========================================================
   14. CONTACTO
   ========================================================= */

.seccion-contacto {
    padding: 6.25em 0;
    color: var(--color-blanco);
    background:
        radial-gradient(circle at 20% 100%, rgba(0,228,191,.17), transparent 30%),
        var(--color-fondo-oscuro);
}

.contacto-rejilla {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 5em;
}

.contacto-mensaje h2 span {
    display: block;
    color: var(--color-turquesa);
}

.contacto-mensaje > p:last-child {
    color: rgba(255,255,255,.65);
}

.formulario-contacto {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1em;
}

.campo-formulario {
    display: flex;
    flex-direction: column;
    gap: 0.4375em;
}

.campo-formulario label {
    color: rgba(255,255,255,.70);
    font-size: 0.8rem;
    font-weight: 700;
}

.campo-formulario input,
.campo-formulario textarea {
    width: 100%;
    border: 0.0625em solid rgba(255,255,255,.14);
    border-radius: 0.625em;
    outline: 0;
    color: #fff;
    background: rgba(255,255,255,.06);
    transition: border-color var(--transicion);
}

.campo-formulario input {
    height: 3em;
    padding: 0 0.875em;
}

.campo-formulario textarea {
    padding: 0.875em;
    resize: vertical;
}

.campo-formulario input:focus,
.campo-formulario textarea:focus {
    border-color: var(--color-turquesa);
}

.campo-formulario-ancho {
    grid-column: 1 / -1;
}

.campo-trampa {
    position: absolute;
    left: -624.9375em;
}


/* =========================================================
   15. PIE DE PÁGINA
   ========================================================= */

.pie-pagina {
    padding: 4em 0 1.5em;
    background: #fff;
}

.pie-rejilla {
    display: grid;
    grid-template-columns: 1.4fr repeat(3, 1fr);
    gap: 3.75em;
}

.marca-clicwow-pie {
    color: var(--color-texto);
}

.marca-clicwow-pie .arco-superior {
    color: var(--color-texto);
}

.pie-marca p {
    max-width: 16.25em;
    margin-top: 1.5em;
    color: var(--color-texto-suave);
    font-size: 0.9rem;
}

.pie-columna {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}

.pie-columna h2 {
    margin-bottom: 0.625em;
    font-size: 0.9rem;
}

.pie-columna a,
.pie-columna span {
    color: var(--color-texto-suave);
    font-size: 0.84rem;
}

.pie-legal {
    display: flex;
    justify-content: space-between;
    gap: 1.25em;
    margin-top: 3.375em;
    padding-top: 1.375em;
    border-top: 0.0625em solid var(--color-borde);
    color: #8a989e;
    font-size: 0.76rem;
}

.pie-legal div {
    display: flex;
    gap: 1.125em;
}


/* =========================================================
   16. CHATBOT
   ========================================================= */

.boton-chatbot {
    position: fixed;
    z-index: 1100;
    right: 1.5em;
    bottom: 1.5em;
    display: flex;
    align-items: center;
    gap: 0.625em;
    min-height: 3.25em;
    padding: 0 1.125em;
    border: 0;
    border-radius: 62.4375em;
    color: #04221d;
    background: var(--color-turquesa);
    box-shadow: var(--sombra-fuerte);
    cursor: pointer;
}

.boton-chatbot span {
    font-size: 1.35rem;
}

.panel-chatbot {
    position: fixed;
    z-index: 1090;
    right: 1.5em;
    bottom: 5.5em;
    width: min(24.375em, calc(100vw - 3em));
    overflow: hidden;
    border: 0.0625em solid rgba(0,228,191,.30);
    border-radius: 1.125em;
    color: #fff;
    background: var(--color-fondo-oscuro);
    box-shadow: var(--sombra-fuerte);
}

.cabecera-chatbot {
    display: flex;
    justify-content: space-between;
    gap: 1em;
    padding: 1.125em;
    border-bottom: 0.0625em solid rgba(255,255,255,.08);
}

.cabecera-chatbot div {
    display: flex;
    flex-direction: column;
}

.cabecera-chatbot small {
    color: rgba(255,255,255,.55);
}

.cabecera-chatbot button {
    border: 0;
    color: #fff;
    background: transparent;
    cursor: pointer;
    font-size: 1.7rem;
}

.contenido-chatbot {
    padding: 1.25em;
    color: rgba(255,255,255,.72);
}


/* =========================================================
   17. RESPONSIVE
   ========================================================= */

@media (max-width: 65.625em) {

    .cabecera-interior {
        grid-template-columns: 1fr auto auto;
    }

    .menu-principal {
        position: absolute;
        top: 4.625em;
        right: 1.25em;
        left: 1.25em;
        display: none;
        flex-direction: column;
        gap: 0;
        padding: 0.875em;
        border: 0.0625em solid rgba(255,255,255,.10);
        border-radius: 1em;
        background: #071a20;
        box-shadow: var(--sombra-fuerte);
    }

    .menu-principal.menu-abierto {
        display: flex;
    }

    .menu-principal a {
        padding: 0.75em;
    }

    .boton-menu-movil {
        display: flex;
        width: 2.625em;
        height: 2.625em;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.3125em;
        border: 0.0625em solid rgba(255,255,255,.20);
        border-radius: 0.5625em;
        background: transparent;
        cursor: pointer;
    }

    .boton-menu-movil span {
        width: 1.125em;
        height: 0.125em;
        background: #fff;
    }

    .portada-rejilla,
    .soluciones-rejilla,
    .ia-rejilla,
    .software-rejilla,
    .contacto-rejilla {
        grid-template-columns: 1fr;
    }

    .portada-esquema {
        min-height: 30em;
    }

    .tarjetas-servicios {
        grid-template-columns: repeat(2, 1fr);
    }

    .experiencia-rejilla {
        grid-template-columns: repeat(3, 1fr);
    }

    .frase-experiencia {
        grid-column: 1 / -1;
    }

    .pie-rejilla {
        grid-template-columns: repeat(2, 1fr);
    }
}


@media (max-width: 45em) {

    .contenedor {
        width: min(calc(100% - 1.75em), var(--ancho-contenido));
    }

    .seccion {
        padding: 4.5em 0;
    }

    .cabecera-interior {
        min-height: 4.375em;
    }

    .boton-cabecera {
        display: none;
    }

    .seccion-portada {
        min-height: auto;
        padding-top: 7.5em;
    }

    .portada-garantias {
        flex-direction: column;
        gap: 1em;
    }

    .portada-esquema {
        min-height: 25em;
        transform: scale(.88);
    }

    .nodo-sistema {
        width: 6.5625em;
    }

    .tarjetas-servicios,
    .rejilla-proyectos,
    .rejilla-novedades,
    .pasos-metodo,
    .experiencia-rejilla,
    .pie-rejilla {
        grid-template-columns: 1fr;
    }

    .ia-mapa {
        grid-template-columns: 1fr;
    }

    .ia-centro {
        grid-column: auto;
    }

    .lista-ventajas {
        grid-template-columns: 1fr;
    }

    .cabecera-seccion {
        align-items: start;
        flex-direction: column;
    }

    .formulario-contacto {
        grid-template-columns: 1fr;
    }

    .campo-formulario-ancho {
        grid-column: auto;
    }

    .pie-legal {
        flex-direction: column;
    }

    .boton-chatbot strong {
        display: none;
    }

    .boton-chatbot {
        width: 3.375em;
        padding: 0;
        justify-content: center;
    }
}

/* Ajustes específicos del nuevo HERO aprobado */
@media (max-width: 65.625em) {
    .portada-rejilla { gap: 2.1875em; }
    .portada-contenido h1 { max-width: 40.625em; }
    .portada-garantias { grid-template-columns: repeat(2, 1fr); row-gap: 1.125em; }
    .garantia:nth-child(2) { border-right: 0; }
}

@media (max-width: 45em) {
    .marca-clicwow { width: 9.0625em; height: 3.625em; }
    .marca-clicwow img { width: 8.9375em; }
    .portada-contenido h1 { font-size: clamp(2.45rem, 13vw, 3.6rem); }
    .salto-escritorio { display: none; }
    .portada-garantias { grid-template-columns: 1fr 1fr; }
    .garantia { padding: 0 0.625em; }
    .portada-esquema { margin-inline: -1.25em; }
}


/* =========================================================
   18. LOGOS DE INTEGRACIONES
   ========================================================= */
.integracion-con-logo {
    min-height: 3.4em;
    min-width: 7.5em;
    padding: 0.45em 0.7em;
    border: 0;
    background: transparent;
}
.integracion-con-logo img {
    width: auto;
    max-width: 10em;
    height: 2.6em;
    object-fit: contain;
}


/* Integraciones v2: logos siempre visibles */
.lista-integraciones{gap:.8em}
.integracion-con-logo{display:flex;align-items:center;justify-content:center;min-width:8.5em;min-height:4.2em;padding:.65em 1em;border:.0625em solid var(--color-borde);border-radius:.85em;background:#fff;box-shadow:0 .35em 1.1em rgba(10,35,42,.04)}
.integracion-con-logo img{display:block;width:auto;max-width:9.5em;height:2.55em;opacity:1;visibility:visible;object-fit:contain}
.integracion-mas{display:flex;align-items:center;min-height:4.2em;border-radius:.85em;padding:.65em 1.1em}

/* Software a medida v2: componente humano integrado */
.software-visual-humano{padding:0;overflow:hidden;min-height:27em;background:#eaf8f5;box-shadow:var(--sombra-fuerte)}
.software-visual-humano img{display:block;width:100%;height:27em;object-fit:cover;object-position:center center}
@media(max-width:62em){.software-visual-humano,.software-visual-humano img{min-height:22em;height:22em}}