/* ============================================================
   TIBolivia - sitio web
   Colores del logo: azul tinta, azul, y la tricolor boliviana
   (rojo, amarillo, verde) como detalle, nunca como fondo.
   ============================================================ */
:root {
    --tinta: #0B2545;
    --tinta-2: #13345E;
    --azul: #1D5FA8;
    --celeste: #8FC1F0;
    --amarillo: #F4C20D;
    --amarillo-oscuro: #D9A900;
    --rojo: #D52B1E;
    --verde: #13894A;
    --verde-claro: #2BB673;
    --texto: #1B2A3A;
    --texto-suave: #55657A;
    --fondo: #FFFFFF;
    --fondo-suave: #F3F6FA;
    --borde: #E1E7EF;
    --radio: 14px;
    --sombra: 0 10px 30px rgba(11, 37, 69, .08);
    --titulo: "Montserrat", "Segoe UI", system-ui, sans-serif;
    --cuerpo: "Inter", "Segoe UI", system-ui, sans-serif;
    --ancho: 1160px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 80px; }

body {
    margin: 0;
    font-family: var(--cuerpo);
    font-size: 17px;
    line-height: 1.6;
    color: var(--texto);
    background: var(--fondo);
    -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
h1, h2, h3 { font-family: var(--titulo); line-height: 1.15; color: var(--tinta); margin: 0 0 .5em; }
h1 { font-size: clamp(34px, 5vw, 56px); font-weight: 800; letter-spacing: -.02em; }
h2 { font-size: clamp(28px, 3.4vw, 40px); font-weight: 800; letter-spacing: -.015em; }
h3 { font-size: 19px; font-weight: 700; }
p { margin: 0 0 1em; }
a { color: var(--azul); }

.contenedor { width: min(100% - 40px, var(--ancho)); margin-inline: auto; }

.saltar { position: absolute; left: -999px; top: 8px; background: var(--amarillo); color: var(--tinta); padding: 8px 14px; border-radius: 8px; z-index: 100; }
.saltar:focus { left: 8px; }

:focus-visible { outline: 3px solid var(--amarillo); outline-offset: 2px; }

/* ------------------------------ Botones ------------------------------ */
.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font: 700 16px/1 var(--titulo);
    padding: 15px 26px;
    border-radius: 999px;
    border: 2px solid transparent;
    text-decoration: none;
    cursor: pointer;
    transition: transform .15s, box-shadow .15s, background .15s;
}

.boton:hover { transform: translateY(-1px); }
.boton-acento { background: var(--amarillo); color: var(--tinta); box-shadow: 0 6px 18px rgba(244, 194, 13, .35); }
.boton-acento:hover { background: #FFD233; }
.boton-contorno { border-color: rgba(255, 255, 255, .45); color: #fff; background: transparent; }
.boton-contorno:hover { border-color: #fff; background: rgba(255, 255, 255, .06); }
.boton-chico { padding: 10px 18px; font-size: 14px; }
.boton-grande { padding: 18px 32px; font-size: 18px; }

.etiqueta {
    display: inline-block;
    font: 700 13px/1 var(--titulo);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--azul);
    margin-bottom: 14px;
}

.etiqueta::before {
    content: "";
    display: inline-block;
    width: 22px;
    height: 4px;
    margin-right: 10px;
    vertical-align: middle;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--rojo) 0 33%, var(--amarillo) 33% 66%, var(--verde) 66%);
}

.etiqueta-clara { color: var(--celeste); }

/* ----------------------------- Encabezado ----------------------------- */
.encabezado {
    position: fixed;
    inset: 0 0 auto;
    z-index: 50;
    transition: background .2s, box-shadow .2s;
}

.encabezado-fila { display: flex; align-items: center; justify-content: space-between; height: 76px; }
.marca img { height: 42px; width: auto; }
.logo-claro { display: none; }
.encabezado.fijo { background: rgba(255, 255, 255, .96); backdrop-filter: blur(8px); box-shadow: 0 1px 0 var(--borde); }
.encabezado.fijo .logo-claro { display: block; }
.encabezado.fijo .logo-oscuro { display: none; }

.menu { display: flex; align-items: center; gap: 26px; }
.menu a { color: #fff; text-decoration: none; font-weight: 500; font-size: 15px; opacity: .9; }
.menu a:hover { opacity: 1; }
.encabezado.fijo .menu a { color: var(--tinta); }

.menu-boton { display: none; background: none; border: 0; width: 44px; height: 44px; cursor: pointer; padding: 10px; }
.menu-boton span { display: block; height: 2px; background: #fff; margin: 5px 0; border-radius: 2px; transition: transform .2s, opacity .2s; }
.encabezado.fijo .menu-boton span { background: var(--tinta); }

/* -------------------------------- Hero -------------------------------- */
.hero {
    position: relative;
    color: #fff;
    padding: 150px 0 110px;
    background:
        radial-gradient(900px 500px at 85% 20%, rgba(29, 95, 168, .55), transparent 60%),
        radial-gradient(600px 400px at 10% 90%, rgba(43, 182, 115, .16), transparent 60%),
        var(--tinta);
    overflow: hidden;
}

/* Trama de circuito muy tenue */
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: linear-gradient(180deg, #000 40%, transparent);
}

/* Franja tricolor al pie del hero */
.hero::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 5px;
    background: linear-gradient(90deg, var(--rojo) 0 33.33%, var(--amarillo) 33.33% 66.66%, var(--verde) 66.66%);
}

.hero-rejilla { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.hero h1 { color: #fff; }
.resalte { color: var(--amarillo); }
.hero-bajada { font-size: 19px; color: #D4DEEA; max-width: 36em; }
.hero-acciones { display: flex; flex-wrap: wrap; gap: 14px; margin: 30px 0 28px; }

.hero-garantias { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px 24px; font-size: 15px; color: #C3D1E2; }
.hero-garantias li::before { content: "✓"; color: var(--verde-claro); font-weight: 700; margin-right: 8px; }

/* Ilustracion del hero */
.hero-visual { position: relative; min-height: 400px; }

.ventana {
    position: absolute;
    inset: 0 60px 30px 0;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 30px 70px rgba(0, 0, 0, .35);
    overflow: hidden;
    transform: rotate(-1.5deg);
}

.ventana-barra { display: flex; align-items: center; gap: 6px; padding: 11px 14px; background: #EEF2F7; border-bottom: 1px solid var(--borde); }
.ventana-barra i { width: 10px; height: 10px; border-radius: 50%; background: var(--rojo); }
.ventana-barra i:nth-child(2) { background: var(--amarillo); }
.ventana-barra i:nth-child(3) { background: var(--verde-claro); }
.ventana-barra span { margin-left: 12px; font-size: 12px; color: var(--texto-suave); background: #fff; padding: 3px 12px; border-radius: 6px; }

.ventana-cuerpo { display: grid; grid-template-columns: 58px 1fr; height: calc(100% - 38px); }
.panel-lateral { background: var(--tinta); padding: 16px 12px; display: flex; flex-direction: column; gap: 12px; }
.panel-lateral b { height: 9px; border-radius: 4px; background: rgba(255, 255, 255, .2); }
.panel-lateral b.activo { background: var(--amarillo); }

.panel-principal { padding: 18px; display: flex; flex-direction: column; gap: 16px; }
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.kpi { border: 1px solid var(--borde); border-radius: 10px; padding: 10px 12px; }
.kpi small { display: block; font-size: 11px; color: var(--texto-suave); }
.kpi strong { font: 800 17px var(--titulo); color: var(--tinta); }
.kpi:first-child { border-top: 3px solid var(--verde-claro); }

.grafico { flex: 1; display: flex; align-items: flex-end; gap: 9px; min-height: 110px; padding: 10px 6px 0; border-bottom: 1px solid var(--borde); }
.grafico span { flex: 1; height: var(--h); border-radius: 6px 6px 0 0; background: linear-gradient(180deg, var(--azul), #5B97D6); animation: crecer 1.2s ease-out both; }
.grafico span:last-child { background: linear-gradient(180deg, var(--amarillo), #F8D65A); }
@keyframes crecer { from { height: 0; } }

.filas { display: grid; gap: 8px; }
.filas i { height: 10px; border-radius: 5px; background: var(--fondo-suave); }
.filas i:nth-child(2) { width: 82%; }
.filas i:nth-child(3) { width: 64%; }

.telefono {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 170px;
    height: 330px;
    background: #0A1A30;
    border-radius: 28px;
    padding: 10px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, .45);
    border: 2px solid #26456E;
    transform: rotate(3deg);
}

.telefono-pantalla { height: 100%; border-radius: 20px; background: var(--fondo-suave); padding: 12px 10px; display: flex; flex-direction: column; gap: 9px; }
.app-cabecera { font: 800 13px var(--titulo); color: #fff; background: var(--azul); border-radius: 10px; padding: 10px; }
.app-tarjeta { background: #fff; border-radius: 10px; padding: 9px 10px; box-shadow: 0 2px 6px rgba(11, 37, 69, .08); }
.app-tarjeta small { display: block; font-size: 10px; color: var(--texto-suave); }
.app-tarjeta b { font-size: 13px; color: var(--tinta); }
.app-boton { margin-top: auto; text-align: center; font: 700 12px var(--titulo); background: var(--amarillo); color: var(--tinta); border-radius: 999px; padding: 10px; }

/* ------------------------------ Secciones ------------------------------ */
.seccion { padding: 100px 0; }
.seccion-compacta { padding: 44px 0; }
.seccion-suave { background: var(--fondo-suave); }
.seccion-oscura { background: var(--tinta); color: #D4DEEA; }
.seccion-oscura h2 { color: #fff; }
.texto-claro { color: #C3D1E2; font-size: 18px; margin-bottom: 28px; }

.seccion-titulo { max-width: 720px; margin-bottom: 52px; }
.seccion-titulo p:last-child { color: var(--texto-suave); font-size: 18px; }

/* Tarjetas de servicios */
.tarjetas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }

.tarjeta {
    position: relative;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    padding: 30px 28px;
    background: #fff;
    transition: transform .2s, box-shadow .2s, border-color .2s;
}

.tarjeta:hover { transform: translateY(-4px); box-shadow: var(--sombra); border-color: #C9D6E6; }
.tarjeta p { color: var(--texto-suave); font-size: 16px; margin: 0; }

.tarjeta-icono {
    width: 52px;
    height: 52px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    background: #E8F0FA;
    margin-bottom: 20px;
}

.tarjeta-icono svg { width: 26px; height: 26px; fill: none; stroke: var(--azul); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.tarjeta-destacada { background: var(--tinta); border-color: var(--tinta); }
.tarjeta-destacada h3 { color: #fff; }
.tarjeta-destacada p { color: #C3D1E2; }
.tarjeta-destacada .tarjeta-icono { background: rgba(244, 194, 13, .15); }
.tarjeta-destacada .tarjeta-icono svg { stroke: var(--amarillo); }

.enlace-flecha { display: inline-block; margin-top: 16px; font-weight: 600; color: var(--amarillo); text-decoration: none; }
.enlace-flecha::after { content: " →"; }

/* Area de sistemas */
.area-rejilla { display: grid; grid-template-columns: .9fr 1.1fr; gap: 64px; align-items: center; }

.lista-incluye { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.lista-incluye li {
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 12px;
    padding: 20px;
}

.lista-incluye strong { display: block; color: #fff; font-family: var(--titulo); margin-bottom: 4px; }
.lista-incluye strong::before { content: "●"; color: var(--verde-claro); margin-right: 8px; font-size: 12px; vertical-align: 2px; }
.lista-incluye span { font-size: 15px; color: #AFC0D4; }

/* Funciones de los sistemas */
.funciones { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; }
.funcion { padding: 28px; border-right: 1px solid var(--borde); border-bottom: 1px solid var(--borde); }
.funcion:nth-child(3n) { border-right: 0; }
.funcion:nth-last-child(-n+3) { border-bottom: 0; }
.funcion b { display: block; font-family: var(--titulo); color: var(--tinta); margin-bottom: 6px; }
.funcion span { color: var(--texto-suave); font-size: 15.5px; }

/* Pasos */
.pasos { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; counter-reset: paso; }
.pasos li { position: relative; background: #fff; border-radius: var(--radio); padding: 26px 22px; border: 1px solid var(--borde); }
.pasos p { color: var(--texto-suave); font-size: 15px; margin: 0; }

.paso-numero {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--tinta);
    color: var(--amarillo);
    font: 800 17px var(--titulo);
    margin-bottom: 16px;
}

/* Sectores */
.sectores { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }

.sectores li {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--borde);
    border-radius: 12px;
    padding: 18px 20px;
    font-weight: 600;
    color: var(--tinta);
}

.sector-icono { font-size: 24px; }
.nota-centrada { text-align: center; margin-top: 32px; color: var(--texto-suave); }

.enlace-boton { background: none; border: 0; padding: 0; font: inherit; color: var(--azul); text-decoration: underline; cursor: pointer; }

/* Tecnologias */
.tecnologias { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 28px; text-align: center; }
.tecnologias p { margin: 0; font-weight: 600; color: var(--texto-suave); }
.tecnologias ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.tecnologias li { background: #fff; border: 1px solid var(--borde); border-radius: 999px; padding: 7px 16px; font-size: 14.5px; font-weight: 600; color: var(--tinta); }

/* Llamado final */
.seccion-cta { background: linear-gradient(120deg, var(--tinta), var(--tinta-2) 60%, #1B4E8A); color: #D4DEEA; padding: 84px 0; }
.seccion-cta h2 { color: #fff; }
.cta-rejilla { display: grid; grid-template-columns: 1.3fr .7fr; gap: 40px; align-items: center; }
.cta-acciones { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.contacto-dato { color: #fff; font-weight: 600; text-decoration: none; }
.contacto-dato:hover { text-decoration: underline; }
.oculto { display: none !important; }

/* Pie */
.pie { background: #07182E; color: #8FA3BC; padding: 48px 0 34px; font-size: 15px; }
.pie-rejilla { display: grid; grid-template-columns: 1fr auto; gap: 24px 40px; align-items: start; }
.pie img { height: 38px; width: auto; margin-bottom: 10px; }
.pie nav { display: flex; flex-wrap: wrap; gap: 18px 26px; }
.pie nav a { color: #C3D1E2; text-decoration: none; }
.pie nav a:hover { color: #fff; }
.pie-legal { grid-column: 1 / -1; border-top: 1px solid rgba(255, 255, 255, .08); padding-top: 22px; margin: 6px 0 0; font-size: 14px; }

/* ------------------------------- Chatbot ------------------------------- */
.chat-lanzador {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px 12px 12px;
    border: 0;
    border-radius: 999px;
    background: var(--tinta);
    color: #fff;
    font: 700 15px var(--titulo);
    cursor: pointer;
    box-shadow: 0 12px 30px rgba(11, 37, 69, .35);
    transition: transform .15s;
}

.chat-lanzador:hover { transform: translateY(-2px); }
.chat-lanzador-icono { width: 38px; height: 38px; border-radius: 50%; background: var(--amarillo); display: grid; place-items: center; }
.chat-lanzador-icono svg { width: 20px; height: 20px; fill: var(--tinta); }
.chat-lanzador.abierto { display: none; }

.chat {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 70;
    width: min(390px, calc(100vw - 24px));
    height: min(620px, calc(100vh - 44px));
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 24px 70px rgba(11, 37, 69, .35);
    overflow: hidden;
    animation: aparecer .2s ease-out;
}

.chat[hidden] { display: none; }
@keyframes aparecer { from { opacity: 0; transform: translateY(12px); } }

.chat-cabecera { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--tinta); color: #fff; }
.chat-cabecera img { border-radius: 9px; }
.chat-cabecera strong { display: block; font-family: var(--titulo); font-size: 15px; }
.chat-cabecera span { font-size: 12.5px; color: #AFC0D4; }
.chat-cabecera span::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--verde-claro); margin-right: 6px; }
.chat-cerrar { margin-left: auto; background: none; border: 0; color: #fff; font-size: 28px; line-height: 1; cursor: pointer; padding: 0 4px; opacity: .8; }
.chat-cerrar:hover { opacity: 1; }

.chat-mensajes { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; background: var(--fondo-suave); }

.burbuja { max-width: 86%; padding: 10px 14px; border-radius: 16px; font-size: 15px; line-height: 1.45; white-space: pre-line; }
.burbuja-bot { background: #fff; color: var(--texto); border-bottom-left-radius: 5px; box-shadow: 0 1px 2px rgba(11, 37, 69, .06); }
.burbuja-usuario { align-self: flex-end; background: var(--azul); color: #fff; border-bottom-right-radius: 5px; }
.burbuja-escribiendo { color: var(--texto-suave); font-style: italic; }

.chat-opciones { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 14px 4px; background: var(--fondo-suave); }
.chat-opciones:empty { display: none; }

.opcion {
    border: 1.5px solid var(--azul);
    background: #fff;
    color: var(--azul);
    border-radius: 999px;
    padding: 7px 14px;
    font: 600 14px var(--cuerpo);
    cursor: pointer;
}

.opcion:hover { background: var(--azul); color: #fff; }
.opcion-principal { background: var(--amarillo); border-color: var(--amarillo); color: var(--tinta); }
.opcion-principal:hover { background: #FFD233; color: var(--tinta); }

.chat-entrada { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--borde); background: #fff; }
.chat-entrada input { flex: 1; border: 1.5px solid var(--borde); border-radius: 999px; padding: 11px 16px; font: 15px var(--cuerpo); }
.chat-entrada input:focus { outline: none; border-color: var(--azul); }
.chat-entrada button { width: 44px; border: 0; border-radius: 50%; background: var(--tinta); color: var(--amarillo); font-size: 18px; cursor: pointer; }

/* ----------------------------- Responsive ----------------------------- */
@media (max-width: 1024px) {
    .tarjetas, .funciones { grid-template-columns: repeat(2, 1fr); }
    .funcion:nth-child(3n) { border-right: 1px solid var(--borde); }
    .funcion:nth-child(2n) { border-right: 0; }
    .funcion:nth-last-child(-n+3) { border-bottom: 1px solid var(--borde); }
    .funcion:nth-last-child(-n+2) { border-bottom: 0; }
    .pasos { grid-template-columns: repeat(3, 1fr); }
    .sectores { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 880px) {
    .menu-boton { display: block; }

    .menu {
        position: absolute;
        inset: 76px 0 auto;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: #fff;
        box-shadow: 0 12px 30px rgba(11, 37, 69, .15);
        padding: 10px 20px 20px;
        display: none;
    }

    .menu.abierto { display: flex; }
    .menu a { color: var(--tinta); padding: 14px 4px; border-bottom: 1px solid var(--borde); }
    .menu .boton { margin-top: 14px; }
    .encabezado:has(.menu.abierto) { background: #fff; }
    .encabezado:has(.menu.abierto) .logo-claro { display: block; }
    .encabezado:has(.menu.abierto) .logo-oscuro { display: none; }
    .encabezado:has(.menu.abierto) .menu-boton span { background: var(--tinta); }

    .hero { padding: 116px 0 80px; }
    .hero-rejilla, .area-rejilla, .cta-rejilla { grid-template-columns: 1fr; gap: 44px; }
    .hero-visual { min-height: 330px; }
    .lista-incluye { grid-template-columns: 1fr; }
    .seccion { padding: 72px 0; }
}

@media (max-width: 600px) {
    body { font-size: 16px; }
    .tarjetas, .funciones, .pasos, .sectores { grid-template-columns: 1fr; }
    .funcion { border-right: 0 !important; border-bottom: 1px solid var(--borde) !important; }
    .funcion:last-child { border-bottom: 0 !important; }
    .hero-visual { min-height: 270px; }
    .ventana { inset: 0 40px 40px 0; }
    .telefono { width: 128px; height: 250px; border-radius: 22px; }
    .kpi strong { font-size: 13px; }
    .hero-acciones .boton { flex: 1 1 100%; }
    .chat { right: 0; bottom: 0; width: 100vw; height: 100dvh; border-radius: 0; }
    .chat-lanzador { right: 14px; bottom: 14px; }
    .pie-rejilla { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    html { scroll-behavior: auto; }
}