/* ----------------------------------------------------------------------------------------
* Author        : Awaiken
* Template Name : Nextmind - AI Agency & Technology HTML Template
* File          : CSS File
* Version       : 1.0
* ---------------------------------------------------------------------------------------- */
/* INDEX
----------------------------------------------------------------------------------------
01. Global Variables
02. General css
03. Header css
04. Hero css
05. About Us css
06. Our Services css
07. How It Work css
08. Our Facts css
09. Our Projects css 
10. Real Impact css 
11. CTA Box css 
12. What We Do css
13. Our Testimonials css
14. Our FAQs css 
15. Our Blog css
16. Footer css 
17. About Us Page css 
18. Services Page css 
19. Service Single css 
20. Blog Archive css 
21. Blog Single css 
22. Projects Page css 
23. Project Single css 
24. Team Page css 
25. Team Single css 
26. Testimonials Page css 
27. Image Gallery css 
28. Video Gallery css 
29. FAQs Page css 
30. Contact Us Page css 
31. 404 Error Page css 
32. Responsive css
-------------------------------------------------------------------------------------- */

/************************************/
/*** 	 01. Global Variables	  ***/
/************************************/

:root {
    /* Neutrales base */
    --primary-color: #D7DBEA;
    /* Gris azulado claro (no blanco) */
    --secondary-color: #050812;
    /* Azul-negro muy profundo */
    --bg-color: #03050D;
    /* Fondo principal casi negro */
    --text-color: #8F96B0;
    /* Texto apagado y elegante */

    /* Azul corporativo principal */
    --accent-secondary-color: #12235A;
    /* Azul navy oscuro dominante */
    --accent-secondary-hover: #010202;
    /* Hover más cerrado */
    --accent-secondary-soft: #080F2B;
    /* Cards / bloques */

    /* Acento secundario */
    --accent-color: #4F628D;
    /* Azul acero oscuro */
    --accent-hover: #445679;

    /* 🔑 RESALTE DE MARCA — el color de los <span> destacados de los titulares.
       Decidido el 7-oct-2026 tras probar cuatro opciones (degradado largo,
       teselado por letra, diagonal y plano): gana el plano, el mismo azul acero
       del botón `join now`.
       ⚠️ Es un ALIAS, no un hex nuevo: apunta a --accent-color para que el valor
       viva en UN solo sitio. Si algún día cambia el azul acero de marca, el
       resalte lo sigue solo. Duplicar el `#4F628D` aquí habría creado dos
       fuentes de verdad que se desincronizan a la primera.
       📐 Contraste 3,4:1 sobre --bg-color: válido para texto GRANDE (mínimo 3:1),
       NO para texto normal. Es un color de titular, no de párrafo. */
    --highlight-color: var(--accent-color);

    /* Acento de RESALTE — el único color de la paleta más CLARO que el texto.
       Por qué hacía falta: los seis acentos de marca son más oscuros que
       --primary-color (#D7DBEA, 14,7:1 sobre el fondo), y sobre fondo casi negro
       un resalte más oscuro que la letra que lo rodea no resalta: se hunde.
       El degradado de los <span> de los títulos usaba --accent-secondary-color
       (#12235A) en el 50%, con 1,4:1 contra el fondo -> el centro de la frase
       desaparecía. Mismo TONO de marca (223° y 221° frente a los 222° del azul
       acero), solo más claro y más saturado. */
    --accent-highlight: #8AA4E8;
    /* Azul claro de marca — 8,3:1 sobre el fondo. Extremos del degradado. */
    --accent-highlight-deep: #5B82D6;
    /* Mismo tono, más profundo — 5,4:1. Centro del degradado: da el brillo
       animado que la plantilla busca con el hover, pero sin perderse. */

    /* 🔑 ACENTO CÁLIDO — el ÚNICO color de la marca que no es azul.
       Decidido por Andrés el 22-oct-2026: «ese naranja me gusta como color de marca».
       Es el acento que la plantilla ya traía, y no estaba en un sitio: está en SIETE
       activos, varios de ellos sirviéndose hoy en la web. Por orden de peso:
         · arrow-accent.svg          → la flecha de la lista lateral de /faqs (se VE)
         · sidebar-catagery-list-bg  → el destello de las tarjetas del cuerpo (se VE)
         · service-item-bg.svg       → fondo de tarjeta
         · icon-sparkle-gradient.svg → variante en degradado del destello de las píldoras
         · icon-mail-gradiant.svg · icon-phone-gradiant.svg → los iconos de contacto
         · footer-logo.svg           → sin usar hoy
       📌 POR QUÉ ENTRA AQUÍ AUNQUE NO LO USE NINGUNA REGLA TODAVÍA: hasta hoy este hex
       vivía SOLO dentro de ficheros .svg, donde el CSS no llega. Declararlo le da un
       nombre y un único hogar, que es la condición para poder usarlo en una regla, en un
       degradado o en un icono por máscara sin volver a escribir el hex.
       ⚠️ Y DECLARARLO NO PINTA NADA POR SÍ SOLO: el naranja de esos siete ficheros sigue
       estando dentro de ellos y una variable no entra en un .svg servido como imagen.
       📐 CONTRASTES MEDIDOS, que es lo que decide dónde se puede usar:
         · sobre --bg-color (#03050D): 3,29:1 → vale para TEXTO GRANDE (mínimo 3:1) y para
           bordes o iconos, NO para texto normal. Es casi exactamente lo mismo que da
           --highlight-color (3,36:1), así que la regla de uso es la misma.
         · como RELLENO funciona mejor que como tinta: blanco encima da 6,20:1 y
           --primary-color encima 4,49:1 — los dos válidos para texto normal.
       ⬜ Pendiente: si es color de marca, tiene que entrar también en
          `contextos/estilos_marca.md`, que es la fuente de la marca. Si vive solo aquí,
          la paleta documentada y el CSS se desincronizan. */
    --accent-warm: #A93E17;


    /* Divisores */
    --divider-color: #FFFFFF0A;
    --dark-divider-color: #FFFFFF1A;

    /* Estados - También se combina con distintos tonos en la interfaz para darle variedad */
    --error-color: #B94747;
    /* Rojo oscuro y sobrio */

    /* Tipografía */
    --default-font: "Manrope", sans-serif;
}


/************************************/
/*** 	   02. General css		  ***/
/************************************/

body {
    position: relative;
    font-family: var(--default-font);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.1em;
    color: var(--text-color);
    background: var(--bg-color);
}

::-webkit-scrollbar-track {
    background-color: var(--primary-color);
    border-left: 1px solid var(--primary-color);
}

::-webkit-scrollbar {
    width: 7px;
    background-color: var(--primary-color);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--accent-color) 0.26%, var(--accent-secondary-color) 99.99%);

}

::selection {
    color: var(--primary-color);
    background-color: var(--accent-color);
    filter: invert(1);
}

p {
    line-height: 1.6em;
    margin-bottom: 1.6em;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    font-weight: 700;
    line-height: 1.2em;
    color: var(--primary-color);
}

figure {
    margin: 0;
}

img {
    max-width: 100%;
}

a {
    text-decoration: none;
}

a:hover {
    text-decoration: none;
    outline: 0;
}

a:focus {
    text-decoration: none;
    outline: 0;
}

html,
body {
    width: 100%;
    overflow-x: clip;
}

.container {
    max-width: 1300px;
}

.container,
.container-fluid,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
    position: relative;
    padding-right: 15px;
    padding-left: 15px;
    z-index: 1;
}

.image-anime {
    position: relative;
    overflow: hidden;
}

.image-anime:after {
    content: "";
    position: absolute;
    width: 200%;
    height: 0%;
    left: 50%;
    top: 50%;
    background-color: rgba(255, 255, 255, .1);
    transform: translate(-50%, -50%) rotate(-45deg);
    z-index: 1;
}

.image-anime:hover:after {
    height: 250%;
    transition: all 600ms linear;
    background-color: transparent;
}

.reveal {
    position: relative;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    visibility: hidden;
    overflow: hidden;
}

.reveal img {
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -webkit-transform-origin: left;
    transform-origin: left;
}

.row {
    margin-right: -15px;
    margin-left: -15px;
}

.row>* {
    padding-right: 15px;
    padding-left: 15px;
}

.row.no-gutters {
    margin-right: 0px;
    margin-left: 0px;
}

.row.no-gutters>* {
    padding-right: 0px;
    padding-left: 0px;
}

.btn-default {
    position: relative;
    display: inline-block;
    background: linear-gradient(to right, var(--accent-color) 0%, var(--accent-secondary-color) 50%, var(--accent-color) 100%);
    background-size: 200% auto;
    border-radius: 100px;
    color: var(--primary-color);
    font-size: 16px;
    font-weight: 700;
    line-height: 1em;
    /* 🔑 `none`, no `capitalize`. En español el title case es incorrecto:
       `capitalize` pone mayúscula en la primera letra de CADA palabra, así que
       «Agentes de IA» se vería «Agentes De IA». Ya estaba estropeando el
       «Send a Message» de la plantilla, convirtiéndolo en «Send A Message».
       Los rótulos se escriben como se quieren leer, en el HTML. */
    text-transform: none;
    border: none;
    outline: none;
    padding: 17px 30px;
    transition: all 0.4s ease-in-out;
    overflow: hidden;
    z-index: 0;
}

.btn-default:hover {
    background-position: right center;
}

.btn-default.btn-highlighted {
    /* background: linear-gradient(var(--bg-color), var(--bg-color)) padding-box, linear-gradient(to left, var(--accent-color), var(--accent-secondary-color)) border-box; */
    /* border: 1px solid transparent; */
    border: 1px solid var(--accent-color);
    background: var(--bg-color);
    padding: 16px 30px;
}

.btn-default.btn-highlighted::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: -15%;
    right: 0;
    width: 0;
    height: 106%;
    /* background: linear-gradient(to left, var(--accent-color) 0%, var(--accent-secondary-color) 100%); */
    background: var(--accent-color);
    transform: skew(45deg);
    transition: all 0.4s ease-in-out;
    z-index: -1;
}

.btn-default.btn-highlighted:hover::before {
    width: 100%;
    transform: skew(0deg);
    left: 0;
}

.readmore-btn {
    position: relative;
    font-size: 16px;
    font-weight: 700;
    text-transform: capitalize;
    color: var(--accent-color);
    padding-right: 34px;
}

.readmore-btn::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    background: url('../images/arrow-accent.svg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 8px auto;
    border: 1px solid var(--divider-color);
    border-radius: 50%;
    width: 24px;
    height: 24px;
    transition: all 0.3s ease-in-out;
}

.readmore-btn:hover::after {
    border-color: var(--accent-color);
    transform: rotate(45deg);
}

.cb-cursor:before {
    background: linear-gradient(90.01deg, var(--accent-color) 0.26%, var(--accent-secondary-color) 99.99%);
}

/* 🗑️ Aquí vivía el CSS del PRELOADER (.preloader, .loading-container, .loading,
   #loading-icon, @keyframes rotate-loading). Eliminado el 3-oct-2026 junto con su
   HTML y su JS: tapaba la web hasta `window.load`. Ver contextos/arquitectura.md.
   ⚠️ Las 16 páginas de referencias/ todavía traen su marcado: si se convierte
   alguna, hay que quitarle el bloque del preloader también. */

.section-row {
    margin-bottom: 80px;
}

.section-row .section-title {
    margin-bottom: 0;
}

.section-title.section-title-center {
    width: 100%;
    max-width: 700px;
    text-align: center;
    margin: 0 auto;
}

.section-title {
    margin-bottom: 40px;
}

/* 🔑 `.titulo-pildora` — la MISMA pildora con los dos destellos, para un titular que
   NO es un h3. La receta sigue escrita una sola vez: a las SIETE reglas que la definen
   (estas tres mas cuatro responsive) se les ha anadido el selector de la clase, en vez
   de copiar las declaraciones a otro sitio donde divergirian en silencio.
   La usa el h2 de «Clientes satisfechos»: ahi la pildora ES el titulo de la seccion, no
   la etiqueta que va encima, y el titular tiene que seguir siendo un h2 para que no se
   lea como un subapartado de la seccion anterior. */
.section-title h3,
.section-title .titulo-pildora,
.page-catagery-list .titulo-pildora {
    display: inline-block;
    position: relative;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2em;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-color);
    background: var(--divider-color);
    border: 1px solid var(--divider-color);
    border-radius: 100px;
    padding: 10px 50px;
    margin-bottom: 20px;
}

.section-title h3::before,
.section-title .titulo-pildora::before,
.page-catagery-list .titulo-pildora::before {
    content: '';
    position: absolute;
    display: block;
    top: 50%;
    left: 24px;
    transform: translateY(-50%);
    background: url('../images/icon-sparkle.svg') no-repeat;
    background-position: left center;
    background-size: cover;
    width: 16px;
    height: 16px;
}

.section-title h3::after,
.section-title .titulo-pildora::after,
.page-catagery-list .titulo-pildora::after {
    content: '';
    position: absolute;
    display: block;
    top: 50%;
    right: 24px;
    transform: translateY(-50%);
    background: url('../images/icon-sparkle.svg') no-repeat;
    background-position: right center;
    background-size: cover;
    width: 16px;
    height: 16px;
}

.section-title h1 {
    font-size: 42px;
    line-height: 1.1em;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin-bottom: 0;
    cursor: none;
}

.section-title h2 {
    font-size: 34px;
    font-weight: 300;
    margin-bottom: 0;
    cursor: none;
}

.section-title h1 span,
.section-title h2 span {
    font-weight: 700;
    background: linear-gradient(to right, var(--accent-highlight) 0%, var(--accent-highlight-deep) 50%, var(--accent-highlight) 100%);
    background-size: 200% auto;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: all 0.4s ease-in-out;
}

.section-title h1:hover span,
.section-title h2:hover span {
    background-position: right center;
}

.section-title p {
    margin-top: 20px;
    margin-bottom: 0;
}

.section-title-content p {
    margin: 0;
}

.section-btn {
    text-align: right;
}

.section-content-btn .section-btn {
    text-align: left;
    margin-top: 30px;
}

.help-block.with-errors ul {
    margin: 0;
    text-align: left;
}

.help-block.with-errors ul li {
    color: var(--error-color);
    font-weight: 500;
    font-size: 14px;
}

/************************************/
/**** 	   03. Header css		 ****/
/************************************/

header.main-header {
    /* 🔑 `fixed`, no `absolute`: la cabecera se queda a la vista en todo el
       scroll, en escritorio y en movil.
       ℹ️ NO afecta a la reserva de hueco del hero: ni `absolute` ni `fixed`
       ocupan espacio en el flujo, asi que el `padding-top` de `.hero` y de
       `.page-header` sigue siendo exactamente el mismo calculo. */
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
}

header.main-header .header-sticky {
    position: relative;
    top: 0;
    z-index: 100;
}

header.main-header .header-sticky.hide {
    transform: translateY(-100%);
    transition: transform 0.3s ease-in-out;
    border-radius: 0;
}

header.main-header .header-sticky.active {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    border-radius: 0;
    transform: translateY(0);
    background: var(--bg-color);
    border-bottom: 1px solid var(--divider-color);
}

.navbar {
    /* 🔢 Entra en el alto de la cabecera DOS veces (arriba y abajo), así que cada
       píxel que se quita aquí sube el hero dos. Cabecera = logo + 2 x este padding. */
    padding: 22px 0;
    align-items: center;
}

.navbar-brand {
    padding: 0;
    margin: 0;
}

/* El logo se dimensiona por ALTURA, no por anchura: una cabecera se mide por su alto
   y el ancho sale solo manteniendo la proporción (el PNG es 300x184).
   🔴 Sin esta regla se dibujaba a tamaño natural -> 184px de alto de cabecera, que es
   lo que hacía que el título del hero se solapara con el logo en móvil y tablet. */
#logo {
    /* 🔑 Se dimensiona por ANCHURA, no por altura, y es a propósito: este logo es un
       lockup ANCHO (300x184), y lo que rompe la cabecera no es su alto sino su ancho —
       empuja el botón de menú a la línea de abajo en pantallas estrechas.
       `max-width` reserva ~100px para ese botón y el padding, así que el logo se encoge
       SOLO en cualquier anchura y no hace falta media query para móviles pequeños.
       ⚠️ El `height: auto` es obligatorio: con altura fija, el tope de anchura
       DEFORMARÍA la imagen en vez de escalarla. */
    width: 293px;                    /* = 180px de alto */
    max-width: calc(100vw - 100px);
    height: auto;
    /* Acompana al encogido de la cabecera al hacer scroll (ver mas abajo).
       Los 0.3s son los mismos que usa la propia cabecera. */
    transition: width 0.3s ease-in-out;
}

.main-menu .nav-menu-wrapper {
    /* 🔑 `text-align: left` (antes `center`): el contenedor ocupa todo el espacio libre
       con `flex: 1`, así que al centrar el menú quedaba lejísimos del logo — y más desde
       que se quitó el botón de la cabecera, que era lo que ocupaba la derecha.
       Alineado a la izquierda, el menú va pegado al logo y el aire sobrante queda a la
       derecha. El hueco exacto lo controla el `margin-left` de abajo. */
    flex: 1;
    text-align: left;
    margin: 0 40px;
}

.main-menu .nav-menu-wrapper .navbar-nav {
    background: var(--divider-color);
    border: 1px solid var(--divider-color);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 30px;
    padding: 0 10px;
}

.main-menu .nav-menu-wrapper>ul {
    align-items: center;
    display: inline-flex;
}

.main-menu ul li {
    margin: 0;
    position: relative;
}

.main-menu ul li a {
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
    padding: 13px 20px !important;
    border-radius: 100px;
    color: var(--primary-color);
    text-transform: capitalize;
    transition: all 0.3s ease-in-out;
}

.main-menu ul li.submenu>a:after {
    content: '\f107';
    font-family: 'FontAwesome';
    font-weight: 900;
    font-size: 14px;
    margin-left: 8px;
    margin-top: 4px;
}

.main-menu ul li a:hover,
.main-menu ul li a:focus {
    /* 🔑 En fondo OSCURO el hover tiene que ACLARAR, no oscurecer (7-oct-2026).
       Antes era `var(--accent-color)` = #4F628D, un azul acero oscuro: el texto pasaba
       de #D7DBEA (gris claro) a casi el tono del fondo y DESAPARECÍA.
       Blanco puro es el salto de brillo más pequeño que se percibe sin estridencia. */
    color: #FFFFFF;
}

.main-menu ul li a:focus-visible {
    box-shadow: none;
}

.main-menu ul ul {
    visibility: hidden;
    opacity: 0;
    transform: scale(1, 0.8);
    transform-origin: top;
    padding: 0;
    margin: 0;
    list-style: none;
    width: 235px;
    border-radius: 20px;
    position: absolute;
    left: 0;
    top: 100%;
    background: linear-gradient(110.01deg, var(--accent-color) 0.26%, var(--accent-secondary-color) 99.99%);
    transition: all 0.3s ease-in-out;
    text-align: left;
}

.main-menu ul li.submenu:first-child ul {
    width: 235px;
}

.main-menu ul ul ul {
    left: 100%;
    top: 0;
    text-align: left;
}

/* 🔑 `:focus-within` ademas de `:hover`. El desplegable solo se abria al pasar
   el raton, asi que con el teclado era inalcanzable — y ahora que «Servicios»
   no navega, sin esto no habria NINGUNA forma de abrirlo sin raton.
   `:focus-within` se cumple cuando el foco esta en el <li> o en cualquier
   descendiente, asi que el menu sigue abierto mientras se tabula por los
   siete hijos y se cierra al salir del ultimo. */
.main-menu ul li:focus-within>ul,
.main-menu ul li:hover>ul {
    visibility: visible;
    opacity: 1;
    transform: scale(1, 1);
    padding: 5px 0;
}

.main-menu ul li.submenu ul li.submenu>a:after {
    content: '\f105';
    float: right;
}

.main-menu ul ul li {
    margin: 0;
    padding: 0;
}

.main-menu ul ul li a {
    color: var(--primary-color);
    padding: 6px 20px !important;
    margin: 0;
    transition: all 0.3s ease-in-out;
}

.main-menu ul ul li a:hover,
.main-menu ul ul li a:focus {
    /* 🔑 Mismo caso que el menú principal, y aquí era peor: el hover iba a
       `var(--bg-color)` = #03050D, CASI NEGRO, sobre un degradado de los dos azules
       oscuros de la marca. El texto no se resaltaba: se apagaba hasta casi el fondo.
       Blanco, igual que el menú principal — un solo comportamiento en todo el navbar. */
    color: #FFFFFF;
    background-color: transparent;
    padding: 6px 20px 6px 23px !important;
}

.main-menu ul li.highlighted-menu {
    display: none;
}

.responsive-menu,
.navbar-toggle {
    display: none;
}

.responsive-menu {
    top: 0;
    position: relative;
}

.slicknav_btn {
    background: linear-gradient(to right, var(--accent-color) 0%, var(--accent-secondary-color) 50%, var(--accent-color) 100%);
    background-size: 200% auto;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin: 0;
    border-radius: 8px;
    transition: all 0.4s ease-in-out;
}

.navbar-toggle a.slicknav_btn.slicknav_open {
    background-position: right center;
}

.slicknav_icon .slicknav_icon-bar {
    display: block;
    width: 100%;
    height: 3px;
    width: 22px;
    background-color: var(--primary-color);
    border-radius: 6px;
    margin: 4px auto !important;
    transition: all 0.1s ease-in-out;
}

.slicknav_icon .slicknav_icon-bar:first-child {
    margin-top: 0 !important;
}

.slicknav_icon .slicknav_icon-bar:last-child {
    margin-bottom: 0 !important;
}

.navbar-toggle a.slicknav_btn.slicknav_open .slicknav_icon span.slicknav_icon-bar:nth-child(1) {
    transform: rotate(-45deg) translate(-5px, 5px);
    background-color: var(--primary-color);
}

.navbar-toggle a.slicknav_btn.slicknav_open .slicknav_icon span.slicknav_icon-bar:nth-child(2) {
    opacity: 0;
}

.navbar-toggle a.slicknav_btn.slicknav_open .slicknav_icon span.slicknav_icon-bar:nth-child(3) {
    transform: rotate(45deg) translate(-5px, -5px);
    background-color: var(--primary-color);
}

.slicknav_menu {
    position: absolute;
    width: 100%;
    padding: 0;
    background: linear-gradient(110deg, var(--accent-color) 0%, var(--accent-secondary-color) 100%);
}

.slicknav_menu ul {
    margin: 5px 0;
}

.slicknav_menu ul ul {
    margin: 0;
}

.slicknav_nav .slicknav_row,
.slicknav_nav li a {
    position: relative;
    font-size: 18px;
    font-weight: 400;
    text-transform: capitalize;
    padding: 7px 20px;
    text-align: center;          /* menú móvil centrado (7-oct-2026) */
    color: var(--primary-color);
    line-height: normal;
    margin: 0;
    border-radius: 0 !important;
    transition: all 0.3s ease-in-out;
}

.slicknav_nav a:hover,
.slicknav_nav a:focus,
.slicknav_nav a:active,
.slicknav_nav .slicknav_row:hover {
    /* 🔑 Blanco, igual que el menú de escritorio y el desplegable (7-oct-2026).
       Antes era `var(--bg-color)` = #03050D, casi negro, sobre el degradado de los dos
       azules de la marca: al pulsar, la opción se APAGABA en vez de resaltarse.
       📌 Se añade `:active` porque en táctil no hay «hover»: hay pulsación. Y el `:focus`
       que queda después del toque es justo la señal útil de qué acabas de abrir. */
    background-color: transparent;
    color: #FFFFFF;
}

.slicknav_menu ul ul li a {
    /* Padding SIMÉTRICO: el original era `7px 20px 7px 30px`, con 10px extra a la
       izquierda para indentar los hijos. Con el texto centrado esa asimetría los
       descentraba, así que el indentado se quita.
       🔑 La jerarquía la marcan el TAMAÑO y la OPACIDAD, no la sangría: el tamaño se
       percibe antes de leer y no depende del brillo del móvil ni del modo oscuro,
       como sí dependería el color.
       💡 Y se refuerza sola: estos hijos solo aparecen al pulsar «Servicios», y ese
       gesto ya comunica de qué cuelgan — por eso basta con marcarla suave. */
    padding: 7px 20px;
    font-size: 16px;
    opacity: 0.85;
}

.slicknav_arrow {
    font-size: 0 !important;
}

.slicknav_arrow:after {
    content: '\f107';
    font-family: 'FontAwesome';
    font-weight: 900;
    font-size: 13px;
    margin-left: 8px;
    color: var(--primary-color);
    /* 🔑 En FLUJO, no absoluta (7-oct-2026): antes iba anclada al borde derecho
       (`position: absolute; right: 15px`), lo que con el texto centrado dejaba la
       flecha sola en el margen. Ahora acompaña a la etiqueta y «Servicios ▾» se
       centra como una unidad.
       ⚠️ `inline-block` es obligatorio: a un elemento `inline` no se le aplica
       `transform`, y sin él la flecha no giraría al abrir el desplegable. */
    display: inline-block;
    transition: all 0.3s ease-out;
}

.slicknav_open>a .slicknav_arrow:after {
    transform: rotate(-180deg);
    color: #FFFFFF;
}

/************************************/
/***        04. Hero css	      ***/
/************************************/

.hero {
    position: relative;
    /* 🗑️ Aquí había `background: url('../images/hero-bg-shape.png')` (2,19 MB).
       Era CÓDIGO MUERTO: la regla más específica `.hero.hero-bg-image` sustituye la
       propiedad abreviada `background` ENTERA, imagen incluida, y en todo el proyecto
       existe UN solo uso de .hero -> `class="hero hero-bg-image hero-video"`.
       El navegador nunca llegó a pedir ese PNG (0 peticiones en el log del vhost).
       El fondo real del hero es hero-bg.jpg (20 KB), definido más abajo. */
    /* 🔢 El hueco superior RESERVA SITIO para la cabecera, que es `position: absolute`
       y por tanto no ocupa espacio: si este número se queda corto, el h1 se mete debajo.
           Cabecera = alto del logo + 2 x padding del navbar.
           Escritorio: logo 180px (ancho 293px) + 22 + 22 = 224px.  Aire: 16px.
       👉 Para subir el hero NO basta bajar este número: hay que adelgazar la cabecera
          primero (el navbar), o el título queda tapado. */
    padding: 240px 0 80px;
    z-index: 1;
}

.hero::before {
    content: '';
    display: block;
    position: absolute;
    left: 160px;
    top: 20%;
    background: url(../images/section-bg-shape-1.png) no-repeat;
    background-position: left center;
    background-size: cover;
    width: 113px;
    height: 110px;
    animation: shape1 20s infinite linear;
    animation-direction: alternate;
    z-index: 0;
}

@keyframes shape1 {
    from {
        transform: translateY(0) rotate(0deg);
    }

    to {
        transform: translateY(50px) rotate(360deg);
    }
}

.hero::after {
    content: '';
    display: block;
    position: absolute;
    right: 220px;
    top: 20%;
    background: url(../images/section-bg-shape-2.png) no-repeat;
    background-position: right center;
    background-size: cover;
    width: 82px;
    height: 110px;
    animation: shape1 20s infinite linear;
    animation-direction: alternate;
    z-index: 0;
}

.hero.hero-bg-image {
    position: relative;
    background: url('../images/hero-bg.jpg') no-repeat;
    background-position: center center;
    background-size: cover;
}

.hero.hero-bg-image::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(#06060660, var(--bg-color));
    opacity: 100%;
    width: 100%;
    height: 100%;
    animation: none;
    z-index: 1;
}

.hero.hero-bg-image::after {
    display: none;
}

.hero.hero-bg-image.hero-video .hero-bg-video {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}

.hero.hero-bg-image.hero-video .hero-bg-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-content {
    position: relative;
    width: 100%;
    max-width: 840px;
    margin: 0 auto;
    text-align: center;
    z-index: 2;
}

.hero-content::before {
    content: '';
    display: block;
    position: absolute;
    left: -28%;
    bottom: 20%;
    background: url(../images/section-bg-shape-3.png) no-repeat;
    background-position: left center;
    background-size: cover;
    width: 81px;
    height: 85px;
    animation: shape2 20s infinite linear;
    animation-direction: alternate;
    z-index: 0;
}

@keyframes shape2 {
    from {
        transform: translateY(0) rotate(0deg);
    }

    to {
        transform: translateY(50px) rotate(-360deg);
    }
}

.hero-content::after {
    content: '';
    display: block;
    position: absolute;
    right: -28%;
    bottom: 20%;
    background: url(../images/section-bg-shape-4.png) no-repeat;
    background-position: right center;
    background-size: cover;
    width: 122px;
    height: 126px;
    animation: shape2 20s infinite linear;
    animation-direction: alternate;
    z-index: 0;
}

.hero-content .section-title {
    position: relative;
    z-index: 2;
}

.hero.hero-bg-image .hero-content::after,
.hero.hero-bg-image .hero-content::before {
    display: none;
}

.hero-btn {
    position: relative;
    margin-top: 40px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px 30px;
    z-index: 2;
}

.hero-company-slider {
    text-align: center;
    margin-top: 80px;
    /* 🔑 SALIR DEL CONTENEDOR: el carrusel vive dentro de `.container`
       (max 1300px) > `.row` > `.col-12`, así que por sí solo nunca pasaría de
       ~1270px. Con `margin-left: 50%` se empuja su borde izquierdo al centro de
       la columna y `translateX(-50%)` lo retrocede media anchura PROPIA: queda
       centrado en la pantalla midiendo 90vw, sin importar lo que mida el padre.
       ⚠️ `90vw` y no `100vw` a propósito: `vw` INCLUYE la barra de scroll, así
       que un 100vw desbordaría a lo ancho y saldría scroll horizontal. El 10%
       restante es el colchón que lo evita. */
    width: 90vw;
    margin-left: 50%;
    transform: translateX(-50%);
}

.hero-company-slider p {
    font-size: 20px;
    margin-bottom: 30px;
}

/* ── Carrusel de SERVICIOS del hero ──────────────────────────────────────────
   Sustituye a `.company-logo img { width: 100%; max-height: 40px }`, que estaba
   pensado para logotipos anchos y planos: una pieza de 40px de alto no sirve
   para un icono con su nombre debajo. La clase `.company-logo` ya no existe en
   el marcado (0 usos comprobados), así que la regla se va entera.
   Swiper muestra 2 por pantalla en movil, 4 desde 768 y 5 desde 991
   (`function.js:41`), asi que el slide mas estrecho ronda los 165px: el nombre
   mas largo —«Integraciones y automatizaciones»— parte en varias lineas y por
   eso la caja se centra en vertical y en horizontal. */

.servicio-slide {
    display: flex;
    /* VERTICAL: imagen arriba, nombre debajo.
       🔑 Esto cambia la aritmetica del carrusel. En fila, cada tarjeta
       necesitaba imagen + hueco + nombre EN LA MISMA LINEA, y el nombre mas
       largo obligaba a ~319px. En columna, el ancho que pide la tarjeta es
       solo el mayor de los dos —imagen o texto—, asi que sobra sitio y la
       imagen puede crecer sin empujar a nadie.
       `align-items: center` centra la imagen sobre el texto; el texto se
       centra con el `text-align: center` de mas abajo.
       NO se pone `white-space: nowrap`: si se alarga un nombre, preferimos que
       parta en dos lineas antes que desbordar el carrusel. */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 12px 6px;
    /* 🔑 `center`, no `left`. Cuando un nombre PARTE en dos líneas, el <span>
       deja de medir lo que ocupa el texto y se estira a todo el ancho que
       queda: el icono se va al borde izquierdo y ya no hay nada que centrar
       con `justify-content`. Con el texto centrado, la segunda línea queda
       bajo la primera y el conjunto vuelve a verse equilibrado.
       (Se notaba en móviles con «Integraciones y automatizaciones».) */
    text-align: center;
    color: var(--primary-color);
    transition: all 0.3s ease-in-out;
}

/* ── Imagen del servicio ─────────────────────────────────────────────────────
   Desde el 9-oct-2026 cada tarjeta lleva una IMAGEN en vez de un icono.
   100px, frente a los 38 de los iconos. Caben porque la tarjeta paso a
   disposicion VERTICAL: el ancho ya no lo decide imagen + texto en la misma
   linea, sino el mayor de los dos.

   🔑 `object-fit: contain`, NO `cover`. Las imagenes vienen con proporciones
   muy distintas (de 0,78 vertical a 1,78 apaisada) y entre ellas hay un
   LOGOTIPO, el de Google Ads: `cover` llenaria la caja pero recortaria el
   logo, que es justo lo que no se puede tocar. `contain` lo deja entero a
   cambio de que cada imagen ocupe un ancho distinto dentro de su caja.
   `width`/`height` van tambien en el HTML para reservar el hueco antes de que
   la imagen cargue y evitar el salto de maquetacion.
   ───────────────────────────────────────────────────────────────────────── */

.servicio-slide-img {
    flex: none;
    width: 50px;
    height: 50px;
    object-fit: contain;
}

/* ── ICONOS (DESACTIVADO) ────────────────────────────────────────────────────
   Version anterior: el SVG no se pintaba, actuaba como PLANTILLA DE RECORTE
   (mask). Solo contaba su canal alfa, y lo que se veia era el background-color
   recortado a esa forma. Asi el color venia del :root y el hover podia
   cambiarlo, cosa imposible con un SVG dentro de un etiqueta img.
   La ruta vivia en el HTML, en la variable --icono, para conservar el ?v= de
   cache-busting y poder sustituir archivos sin tocar el CSS.
   El @supports evitaba que, sin soporte de mask, un elemento vacio con
   background-color se dibujara como un cuadrado de color.

   PARA VOLVER A ICONOS: quitar estas dos barras y el cierre de abajo,
   descomentar los span en index.php y borrar los img.
   ⚠️ Los comentarios CSS no se anidan, por eso el texto de arriba se reescribio
   sin los cierres de comentario que tenia el original.

.servicio-slide-icono {
    flex: none;
    width: 38px;
    height: 38px;
    mask: var(--icono) center / contain no-repeat;
    -webkit-mask: var(--icono) center / contain no-repeat;
}

@supports (mask-image: url("")) or (-webkit-mask-image: url("")) {
    .servicio-slide-icono {
        background-color: var(--error-color);
    }
}
   ───────────────────────────────────────────────────────────────────────── */

.servicio-slide span {
    /* 🔑 MISMA LETRA QUE EL h1 DEL HERO (`.section-title h1`) a menor tamaño:
       peso 600, `line-height: 1.1em` y —lo que de verdad le da el carácter—
       `letter-spacing: -0.02em`, la letra ligeramente apretada.
       ℹ️ SIN cursiva. La hubo un tiempo, pero era oblicua SINTÉTICA: Manrope
       no tiene cara italic (el @font-face de head.php solo declara `normal`),
       así que el navegador inclinaba la vertical a lo bruto. Al quitarla el
       texto NO cambia de ancho: la inclinación sintética respeta las anchuras
       de avance, así que las cuentas de abajo siguen valiendo.
       📐 17px con el icono a 38px -> proporción 2,2. Los dos números van
       juntos: si se cambia uno, el otro detrás.
       📏 A 17px el nombre más largo —«Integraciones y automatizaciones»—
       vuelve a pedir ~245px y parte en dos líneas en los anchos intermedios.
       Es el precio de la letra mayor; para una sola línea siempre, el camino
       son nombres más cortos en identidad.md, no tocar esto. */
    font-size: 16px;
    font-weight: 600;
    line-height: 1.1em;
    letter-spacing: -0.02em;
}

/* Fondo oscuro -> el hover ACLARA, nunca oscurece (misma regla que el menu). */
.servicio-slide:hover {
    color: #FFFFFF;
}

.servicio-slide:hover .servicio-slide-img {
    transform: translateY(-4px);
}

/************************************/
/***       05. About Us css	      ***/
/************************************/

.about-us {
    padding: 80px 0 50px;
}

.about-us .section-title.section-title-center {
    max-width: 1080px;
}

/* ── Presentación de «Quiénes somos» a todo el ancho (12-oct-2026) ────────────
   Mismo cuerpo que el párrafo de entrada del hero: 18px. El resto del estilo
   NO hace falta escribirlo, ya lo da la cascada global — `p { line-height:
   1.6em; margin-bottom: 1.6em }` (línea 145) y el color heredado del body.
   🔑 No se reutiliza la clase del hero (`.hero-content--video .hero-zona-texto p`)
   por dos razones: está atada al hero, y allí anula el `margin-top` porque el
   párrafo va solo en su envoltorio. Aquí hay DOS párrafos y ese margen es justo
   lo que los separa.
   ℹ️ 18px en TODAS las anchuras, igual que el hero: su regla tampoco está dentro
   de ninguna media query. */
.about-presentacion {
    margin-top: 30px;
}

.about-presentacion p {
    font-size: 18px;
}

/* El último sin margen inferior: `.about-us` ya pone 50px de `padding-bottom`
   (40 en móvil) y detrás viene la sección siguiente. Sin esto se le sumarían
   los ~29px del margen del párrafo y el hueco quedaría al doble. */
.about-presentacion p:last-child {
    margin-bottom: 0;
}

/* ── Párrafos JUSTIFICADOS en la portada, menos el hero (12-oct-2026) ─────────
   🔑 El selector se cuelga de `.pagina-inicio` (clase que `head.php` saca de
   `$pagina`) porque `.about-us` existe TAMBIÉN en quienes-somos.php: sin ese
   prefijo, justificar la portada justificaría media web de rebote.
   El HERO queda fuera por omisión: es `.hero-content--video`, que no está en
   esta lista. Su párrafo sigue alineado a la izquierda.

   ⚠️ `hyphens: auto` NO es decoración, es lo que hace que el justificado no se
   rompa. Justificar reparte el sobrante de cada línea entre sus espacios; en una
   columna estrecha —las tarjetas de servicio miden ~310px— ese sobrante es enorme
   y aparecen los «ríos» de blanco que bajan por el párrafo. Partiendo palabras,
   el sobrante por línea se reduce muchísimo. Funciona porque el <html> declara
   `lang="es"` (se corrigió el `zxx` de la plantilla): sin idioma, el navegador no
   sabe por dónde parte una palabra y `auto` no hace nada. */
.pagina-inicio .about-us p,
.pagina-inicio .our-services p,
.pagina-inicio .how-it-work p {
    text-align: justify;
    -webkit-hyphens: auto;
    hyphens: auto;
}

/* ── Lo mismo en /quienes-somos, sus cuatro secciones (21-oct-2026) ───────────
   Va PEGADO al bloque de la portada a proposito: son la misma decision tipografica y
   separarlos es garantizar que el dia que una cambie, la otra se quede atras.

   🔑 El prefijo `.pagina-quienes-somos` es OBLIGATORIO por el mismo motivo que el
   `.pagina-inicio` de arriba: `.about-us` existe en LAS DOS paginas. Sin el, justificar
   aqui justificaria la portada de rebote. La clase la pone head.php desde $pagina, y es
   la MISMA en los dos idiomas (/quienes-somos y /en/about), asi que un bloque cubre los
   dos. ⚠️ Si manana una de estas cuatro secciones la reutiliza otra pagina, alli NO ira
   justificada hasta que esa pagina se anada a esta lista. Es el precio del prefijo.

   ⚠️ `hyphens: auto` pesa aqui MAS que en la portada: el parrafo mas estrecho de la
   pagina es el de las tarjetas de personas, ~297px (339 de tarjeta menos 40 de padding),
   mas estrecho todavia que las tarjetas de servicio de la portada (~310px). Los metodos
   quedan en ~312px y mision/vision en ~506px. Sin partir palabras, a esos anchos el
   sobrante por linea abre «rios» de blanco que bajan por el parrafo.
   🔑 Y funciona en los dos idiomas porque <html lang> es correcto en ambos: sin idioma
   declarado el navegador no sabe por donde parte una palabra y `auto` no hace nada.
   ─────────────────────────────────────────────────────────────── */
.pagina-quienes-somos .about-us p,
.pagina-quienes-somos .our-facts p,
.pagina-quienes-somos .our-approach p,
.pagina-quienes-somos .our-solution p {
    text-align: justify;
    -webkit-hyphens: auto;
    hyphens: auto;
}

.about-us .section-title h2 span {
    background: var(--accent-secondary-color);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 5px;
}

.about-us .section-title h2 span img {
    max-width: 20px;
}

.about-us .section-title h2 span:nth-child(2) {
    background: var(--accent-color);
}

.text-effect .line {
    width: 100%;
    color: var(--dark-divider-color);
    background: linear-gradient(120deg, var(--primary-color), var(--primary-color)) no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    background-size: 0%;
}

.about-us-box {
    background: var(--secondary-color);
    border: 1px solid var(--divider-color);
    border-radius: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    height: calc(100% - 30px);
    margin-bottom: 30px;
    padding: 30px;
}

.about-us-item {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 50px;
    margin-bottom: 40px;
}

.about-item-content {
    width: calc(100% - 90px);
}

.about-item-content h3 {
    font-size: 16px;
    line-height: 1.3em;
    margin-bottom: 30px;
}

.about-item-content h2 {
    font-size: 34px;
    font-weight: 300;
}

.about-us-item .icon-box {
    position: relative;
    background: var(--bg-color);
    border: 1px solid var(--divider-color);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.about-us-item .icon-box::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(120deg, var(--accent-color), var(--accent-secondary-color)) no-repeat;
    border-radius: 50%;
    height: 100%;
    width: 100%;
    transform: scale(0);
    transition: all 0.4s ease-in-out;
}

.about-us-box:hover .about-us-item .icon-box::before {
    transform: scale(1);
}

.about-us-item .icon-box img {
    position: relative;
    max-width: 20px;
    z-index: 1;
}

.about-item-image {
    width: 100%;
    align-content: end;
    text-align: left;
}

.about-item-image img {
    max-height: 80px;
}

/************************************/
/***     06. Our Services css     ***/
/************************************/

.our-services {
    padding: 80px 0;
}

.service-item {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    border: 1px solid var(--divider-color);
    background: url('../images/service-item-bg.svg'), var(--secondary-color);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    border-radius: 20px;
    height: calc(100% - 30px);
    margin-bottom: 30px;
    padding: 30px;
    transition: all 0.4s ease-in-out;
}

.service-item:hover {
    transform: translateY(-5px);
}

.service-item-content {
    margin-bottom: 30px;
}

.service-item-content h3 {
    font-size: 20px;
    margin-bottom: 15px;
}

.service-item-content p {
    margin-bottom: 0;
}

.service-item-content h3 a {
    color: inherit;
}

.service-item-image {
    width: 100%;
    text-align: center;
    align-content: center;
}

.service-item-image figure {
    display: block;
}

.service-list {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    margin-top: 30px;
}

.service-list ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 25px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.service-list ul li {
    border: 1px solid var(--divider-color);
    background: var(--secondary-color) url('../images/icon-sparkle.svg') no-repeat;
    background-position: left 15px center;
    background-size: 20px auto;
    line-height: 1.3em;
    border-radius: 100px;
    padding: 10px 15px 10px 45px;
}

/************************************/
/***     07. How It Work css      ***/
/************************************/

.how-it-work {
    padding: 80px 0;
}

.how-work-item {
    background: var(--secondary-color);
    border: 1px solid var(--divider-color);
    border-radius: 20px;
    padding: 40px 35px;
    display: flex;
    align-items: center;
    margin-bottom: 40px;
}

.how-work-item:last-child {
    margin-bottom: 0;
}

.how-work-header {
    border-right: 1px solid var(--divider-color);
    margin-right: 40px;
    padding-right: 40px;
}

.how-work-header .icon-box {
    position: relative;
    background: var(--accent-color);
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.how-work-item .how-work-header .icon-box::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(120deg, var(--accent-color), var(--accent-secondary-color)) no-repeat;
    border-radius: 50%;
    height: 100%;
    width: 100%;
    transform: scale(0);
    transition: all 0.4s ease-in-out;
}

.how-work-item:hover .how-work-header .icon-box::before {
    transform: scale(1);
}

.how-work-header .icon-box img {
    position: relative;
    max-width: 30px;
    z-index: 1;
}

/* ── ICONOS POR MÁSCARA — patrón reutilizable (13-oct-2026) ───────────────────
   🔑 EL PROBLEMA QUE RESUELVE: un SVG cargado con `<img src="...">` es una
   IMAGEN, y el navegador la pinta en un documento APARTE y aislado. El CSS de
   la página no cruza esa frontera —igual que no entra en un <iframe>—, así que
   `fill` o `color` sobre ese <img> no hacen NADA. El icono sale del color que
   traiga escrito dentro: los de la plantilla llevan `stroke="white"` y se ven;
   los descargados de bancos de iconos suelen traer `fill="#000000"` y en un
   fondo oscuro desaparecen.

   LA SOLUCIÓN: usar el SVG como MÁSCARA. Deja de ser un dibujo y pasa a ser una
   plantilla de recorte — solo cuenta su canal alfa, es decir QUÉ zonas están
   pintadas, no DE QUÉ color. El color lo pone `background-color`, que sí es CSS
   normal: admite variables de marca, :hover y estado activo.
   ⇒ Los ficheros descargados NO hay que tocarlos.

   Es el mismo patrón que ya usan `.agente-flotante-icono` y los iconos del
   carrusel; esta clase lo generaliza para no escribirlo una tercera vez.
   Se usa así, con la ruta en línea porque cambia por icono:
       <span class="icono-mascara" aria-hidden="true"
             style="--icono: url('/assets/images/x.svg')"></span>
   `aria-hidden` porque es un <span> vacío: no admite `alt`, y aquí el icono es
   decorativo (el texto del paso ya dice lo mismo). */
.icono-mascara {
    display: block;
    flex: none;
    width: var(--icono-tam, 30px);
    height: var(--icono-tam, 30px);
    mask: var(--icono) center / contain no-repeat;
    -webkit-mask: var(--icono) center / contain no-repeat;
}

/* ⚠️ GUARDIA OBLIGATORIO, no es paranoia: sin soporte de máscara, un <span>
   vacío con `background-color` se dibuja como un CUADRADO sólido dentro del
   círculo. Así, un navegador que no la soporte no enseña icono —que es feo
   pero discreto— en vez de una mancha. Mismo guardia que el botón flotante. */
@supports (mask-image: url("")) or (-webkit-mask-image: url("")) {
    .icono-mascara {
        background-color: var(--icono-color, #FFFFFF);
    }
}

/* En «Cómo trabajamos» el icono tiene que ir POR ENCIMA del `::before` del
   círculo —el degradado que crece al pasar el ratón (línea ~1451)—. Es lo
   mismo que hacía `position: relative; z-index: 1` en la regla del <img> de
   aquí arriba; sin esto, al hacer hover el degradado taparía el icono. */
.how-work-header .icon-box .icono-mascara {
    position: relative;
    z-index: 1;
}

.how-work-step-no {
    text-align: center;
    margin-top: 15px;
}

.how-work-step-no p {
    color: var(--primary-color);
    text-transform: uppercase;
    margin: 0;
}

.how-work-item-content {
    width: calc(100% - 150px);
}

.how-work-item-content h3 {
    font-size: 20px;
    margin-bottom: 15px;
}

.how-work-item-content p {
    margin: 0;
}

.how-work-video-content {
    position: sticky;
    top: 30px;
    margin-left: 15px;
}

.how-work-video {
    width: 100%;
}

.how-work-video video,
.how-work-video img {
    width: 100%;
    height: 700px;
    object-fit: cover;
    border-radius: 20px;
    overflow: hidden;
}

.section-footer-text {
    margin-top: 30px;
    text-align: center;
}

.how-work-video-content .section-footer-text {
    margin: 30px 30px 0 30px;
}

.section-footer-text p {
    margin-bottom: 0;
}

.section-footer-text span {
    font-size: 14px;
    font-weight: 500;
    background: linear-gradient(to right, var(--accent-color) 0%, var(--accent-secondary-color) 50%, var(--accent-color) 100%);
    background-size: 200% auto;
    color: var(--primary-color);
    padding: 3px 12px;
    border-radius: 99px;
    margin-right: 10px;
    transition: all 0.4s ease-in-out;
}

.section-footer-text p:hover span {
    background-position: right center;
}

.section-footer-text p a {
    font-weight: 600;
    text-transform: capitalize;
    text-decoration: underline;
    text-underline-offset: 3px;
    color: var(--accent-color);
    transition: all 0.3s ease-in-out;
}

.section-footer-text p a:hover {
    color: var(--primary-color);
}

/************************************/
/***       08. Our Facts css      ***/
/************************************/

.our-facts {
    padding: 80px 0;
}

.facts-item {
    background: var(--secondary-color) url('../images/facts-item-bg.svg') no-repeat;
    background-position: center center;
    background-size: cover;
    border: 1px solid var(--divider-color);
    border-radius: 20px;
    height: calc(100% - 30px);
    margin-bottom: 30px;
    padding: 40px 35px;
}

/* ── Tarjetas de personas (21-oct-2026) ────────────────────────────────
   🔑 Estas reglas .facts-* vienen de la plantilla pero YA NO SON SUYAS: un grep por
   `facts-item` en todo el repo devuelve UN solo fichero, includes/secciones/
   quienes_estamos_detras.php. Por eso se corrigen aqui, en su sitio, en vez de envolver
   la seccion en una clase propia: no hay ninguna otra pagina que se pueda romper.

   📐 margin-bottom 20 y no 60. Los 60 originales eran el hueco del CONTADOR que la
   plantilla ponia entre el titulo y el texto; esta seccion no tiene contador, y desde hoy
   ahi va la imagen. Sesenta pixeles separarian el nombre de su propia foto.
   ─────────────────────────────────────────────────────────────── */

.facts-item-title {
    margin-bottom: 20px;
    text-align: center;
}

.facts-item-title h3 {
    font-size: 20px;
    text-transform: capitalize;
}

/* 🔴 EL CARGO ERA MAS GRANDE QUE EL NOMBRE, y no por diseno: faltaba la regla.
   El bloque global h1..h6 de este fichero solo fija margin, weight, line-height y color
   —ningun font-size—, asi que el h4 caia al de Bootstrap: 1.5rem = 24px a partir de
   1200px, contra los 20px que el h3 SI tiene fijados arriba. A <=767px era peor todavia:
   el h3 baja a 18px y el h4 se quedaba en calc(1.275rem + .3vw) ≈ 22,7px.
   15px y peso 500 lo dejan por debajo del nombre en los dos ejes a cualquier ancho.
   📐 --text-color (#8F96B0) sobre la tarjeta (#050812) da 6,8:1 — AA de sobra para
   texto normal, que pide 4,5:1. El nombre se queda con --primary-color, mas claro. */
.facts-item-title h4 {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-color);
    margin-top: 6px;
}

/* 🔑 CAJA FIJA PARA LAS TRES IMAGENES, Y ES LO QUE HACE QUE LA FILA CUADRE.
   Las originales traen proporciones muy distintas —850x980 (0,87), 600x857 (0,70) y
   360x371 (0,97)—, asi que sin caja cada una mediria un alto distinto y los nombres y
   los parrafos de las tres tarjetas no alinearian entre si. Con aspect-ratio el hueco lo
   decide el CSS y no el fichero: el dia que se sustituyan las fotos, la maquetacion ni se
   entera. Reserva el espacio antes de cargar, asi que tampoco hay salto de maquetacion.

   🔑 `cover` y no `contain`, al reves que .servicio-slide-img: alli hay un LOGOTIPO que
   no se puede recortar; aqui son retratos, y recortar un retrato es normal — lo que no
   vale es que cada uno ocupe un ancho distinto dentro de su caja.
   📐 object-position `top` y no `center`: el centro de un retrato vertical es el torso,
   no la cara. Es la linea a revisar cuando entren las fotos definitivas. */
.facts-item-img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center top;
    border-radius: 20px;
    margin-bottom: 25px;
}

.facts-item-counter {
    margin-bottom: 60px;
}

.facts-item-counter h2 {
    font-size: 40px;
    color: var(--accent-color);
    margin-bottom: 5px;
}

.facts-item-counter p {
    margin: 0;
}

.facts-item-content {
    background: var(--bg-color);
    border: 1px solid var(--divider-color);
    border-radius: 20px;
    padding: 20px;
}

.facts-item-content p {
    margin: 0;
}

/************************************/
/***     09. Our Projects css     ***/
/************************************/

.our-projects {
    padding: 80px 0 50px;
}

.our-projects .container-fluid {
    max-width: 1600px;
}

.project-item {
    position: relative;
    height: calc(100% - 30px);
    margin-bottom: 30px;
}

.project-image a {
    display: block;
    cursor: none;
}

.project-image figure {
    display: block;
    border-radius: 20px;
    overflow: hidden;
}

.project-image figure:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(180deg, rgba(6, 6, 6, 0) 49.26%, rgba(6, 6, 6, 0.6) 86.32%);
    z-index: 1;
}

.project-image img {
    width: 100%;
    aspect-ratio: 1 / 1.352;
    object-fit: cover;
    border-radius: 20px;
    transition: all 0.4s ease-in-out;
}

.project-item:hover .project-image img {
    transform: scale(1.1);
    filter: blur(5px);
}

.project-btn {
    position: absolute;
    top: 50px;
    right: 30px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease-in-out;
    z-index: 1;
}

.project-item:hover .project-btn {
    top: 30px;
    opacity: 1;
    visibility: visible;
}

.project-btn a {
    position: relative;
    display: block;
    background: linear-gradient(to right, var(--accent-color) 0%, var(--accent-secondary-color) 50%, var(--accent-color) 100%);
    background-size: 200% auto;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease-in-out;
}

.project-btn a:hover {
    background-position: right center;
}

.project-btn a img {
    width: 100%;
    max-width: 20px;
    transition: all 0.3s ease-in-out;
}

.project-btn a:hover {
    transform: rotate(45deg);
}

.project-content {
    position: absolute;
    right: 30px;
    bottom: 30px;
    left: 30px;
    z-index: 2;
}

.project-content h3 {
    font-size: 20px;
    text-transform: capitalize;
    margin-bottom: 10px;
}

.project-content h3 a {
    color: inherit;
}

.project-content p {
    padding-left: 25px;
    background: url('../images/icon-sparkle.svg') no-repeat;
    background-position: left center;
    background-size: 18px auto;
    text-transform: capitalize;
    margin: 0;
}

/************************************/
/***      10. Real Impact css     ***/
/************************************/

.real-impacts {
    padding: 80px 0;
}

.real-impact-item {
    height: calc(100% - 30px);
    margin-bottom: 30px;
}

.real-impact-image {
    border: 1px solid var(--divider-color);
    background: var(--secondary-color) url('../images/real-impact-image-bg.svg') no-repeat;
    background-position: center center;
    background-size: cover;
    border-radius: 20px;
    margin-bottom: 30px;
    padding: 40px;
}

.real-impact-image h3 {
    font-size: 20px;
    line-height: 1.3em;
    border-bottom: 1px solid var(--divider-color);
    margin-bottom: 40px;
    padding-bottom: 40px;
}

.impact-chatbot-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;
}

.chatbot-item {
    width: 50px;
    height: 50px;
    background-color: var(--secondary-color);
    border: 1px solid var(--divider-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.real-impact-image .chatbot-item img {
    width: 100%;
    max-width: 30px;
}

.real-impact-image figure img {
    aspect-ratio: 1 / 0.57;
    object-fit: cover;
    border: 1px solid var(--divider-color);
    border-radius: 20px;
}

.real-impact-content.highlighted-content {
    background-color: var(--secondary-color);
    border: 1px solid var(--divider-color);
    border-radius: 20px;
    padding: 15px 20px;
    display: flex;
    align-items: center;
}

.customer-review-images {
    display: inline-flex;
    margin-right: 15px;
}

.customer-image {
    margin-left: -14px;
}

.customer-image:first-child {
    margin: 0;
}

.customer-image figure {
    display: block;
    width: 40px;
    border-radius: 50%;
}

.customer-image img {
    width: 100%;
    max-width: 40px;
    border-radius: 50%;
}

.real-impact-content p {
    margin: 0;
}

/************************************/
/***        11. CTA Box css       ***/
/************************************/

.cta-box {
    padding: 80px 0;
}

.cta-box-box {
    position: relative;
    background: var(--secondary-color) url('../images/cta-box-bg.svg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    border: 1px solid var(--divider-color);
    border-radius: 20px;
    padding: 120px 0;
}

.cta-box-box::before {
    content: '';
    display: block;
    position: absolute;
    left: 60px;
    top: 60px;
    background: url(../images/section-bg-shape-1.png) no-repeat;
    background-position: left top;
    background-size: cover;
    width: 113px;
    height: 110px;
    animation: shape1 20s infinite linear;
    animation-direction: alternate;
    z-index: 0;
}

.cta-box-box::after {
    content: '';
    display: block;
    position: absolute;
    right: 60px;
    bottom: 80px;
    background: url(../images/section-bg-shape-2.png) no-repeat;
    background-position: right bottom;
    background-size: cover;
    width: 82px;
    height: 110px;
    animation: shape1 20s infinite linear;
    animation-direction: alternate;
    z-index: 0;
}

.cta-box-content {
    position: relative;
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
    z-index: 1;
}

.cta-box-body {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

/************************************/
/***      12. What We Do css      ***/
/************************************/

.what-we-do {
    padding: 80px 0;
}

.what-we-box {
    background: var(--secondary-color) url('../images/what-we-do-box-bg.svg');
    background-position: top left;
    background-repeat: no-repeat;
    background-size: auto;
    border: 1px solid var(--divider-color);
    border-radius: 20px;
    padding: 50px 45px;
    text-align: center;
    margin-right: 15px;
}

.what-we-box h3 {
    font-size: 20px;
    line-height: 1.3em;
    margin-bottom: 50px;
}

.what-we-img img {
    width: 100%;
}

.what-we-img-list ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.what-we-img-list ul li {
    width: auto;
    line-height: 1.3em;
    border: 1px solid var(--divider-color);
    background: var(--secondary-color) url(../images/icon-sparkle-gradient.svg) no-repeat;
    background-position: left 15px center;
    background-size: 20px auto;
    border-radius: 100px;
    padding: 10px 15px 10px 45px;
}

.what-we-do-content {
    margin-left: 15px;
}

.what-we-do-body {
    margin-bottom: 40px;
}

.what-we-do-body ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.what-we-do-body ul li {
    position: relative;
    line-height: normal;
    border: 1px solid var(--divider-color);
    background: var(--secondary-color);
    border-radius: 100px;
    padding: 10px 15px 10px 45px;
}

.what-we-do-body ul li::before {
    content: '\f058';
    position: absolute;
    font-family: 'Font Awesome 6 Free';
    top: 12px;
    left: 15px;
    font-weight: 900;
    font-size: 18px;
    color: var(--accent-color);
}

/************************************/
/***   13. Our Testimonial css    ***/
/************************************/

.our-testimonials {
    padding: 80px 0;
}

.testimonials-box {
    background: var(--secondary-color) url('../images/testimonials-box-bg.svg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    border: 1px solid var(--divider-color);
    border-radius: 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 80px;
    overflow: hidden;
}

.testimonials-content,
.testimonial-slider {
    width: 50%;
}

.testimonials-body {
    display: flex;
    flex-wrap: wrap;
    gap: 30px 60px;
}

.testimonials-counter-item h2 {
    color: var(--accent-color);
    font-size: 40px;
    margin-bottom: 5px;
}

.testimonials-counter-item p {
    text-transform: capitalize;
    margin: 0;
}

.testimonial-slider {
    position: relative;
    width: 100%;
    max-width: 400px;
    margin: 25px auto;
}

.testimonial-slider::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--divider-color);
    border-radius: 20px;
    transform: rotate(-9deg);
    z-index: 0;
}

.testimonial-slider .swiper {
    position: relative;
    background: linear-gradient(136.83deg, var(--accent-color) 2.01%, var(--accent-secondary-color) 97.82%);
    border: 1px solid var(--secondary-color);
    border-radius: 20px;
    padding: 30px 30px 90px 30px;
    z-index: 1;
}

.testimonial-slider .swiper-wrapper {
    cursor: none;
}

.testimonial-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--divider-color);
    margin-bottom: 30px;
    padding-bottom: 30px;
    gap: 10px;
}

.testimonial-author {
    display: flex;
    align-items: center;
}

.author-image {
    display: inline-block;
    margin-right: 15px;
}

.author-image figure {
    border-radius: 50%;
    display: block;
}

.author-image img {
    width: 100%;
    max-width: 50px;
    border-radius: 50%;
}

.author-content h3 {
    font-size: 20px;
    text-transform: capitalize;
    color: var(--primary-color);
    margin-bottom: 5px;
}

.author-content p {
    color: var(--primary-color);
    text-transform: capitalize;
    margin-bottom: 0;
}

.testimonial-quotes-img img {
    width: 100%;
    max-width: 30px;
}

.testimonial-content p {
    color: var(--primary-color);
    font-size: 18px;
    font-weight: 500;
    margin: 0;
}

.testimonial-slider .testimonial-pagination {
    position: absolute;
    bottom: 30px;
    left: 30px;
    z-index: 2;
}

.testimonial-slider .testimonial-pagination .swiper-pagination-bullet {
    position: relative;
    height: 10px;
    width: 10px;
    background: var(--primary-color);
    opacity: 1;
    margin: 0 10px;
    transition: all 0.3s ease-in-out;
}

.testimonial-slider .testimonial-pagination .swiper-pagination-bullet:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 0;
    width: 0;
    border-radius: 50%;
    transition: all 0.3s ease-in-out;
}

.testimonial-slider .testimonial-pagination .swiper-pagination-bullet-active {
    background: var(--primary-color);
}

.testimonial-slider .testimonial-pagination .swiper-pagination-bullet-active:before {
    border: 1px solid var(--primary-color);
    height: 22px;
    width: 22px;
}

/************************************/
/***        14. Our FAQs css      ***/
/************************************/

.our-faqs {
    padding: 80px 0;
}

.faqs-content {
    position: sticky;
    top: 30px;
    margin-right: 30px;
}

.faq-accordion .accordion-item {
    position: relative;
    background: var(--secondary-color);
    border: 1px solid var(--divider-color);
    border-radius: 10px;
    margin-bottom: 30px;
    padding: 0;
    overflow: hidden;
}

.faq-accordion .accordion-item:last-child {
    margin-bottom: 0;
}

.faq-accordion .accordion-header .accordion-button {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.333em;
    background: transparent;
    color: var(--primary-color);
    padding: 20px 50px 20px 20px;
}

.faq-accordion .accordion-item .accordion-button::after,
.faq-accordion .accordion-item .accordion-button.collapsed::after {
    content: '\f107';
    font-family: 'FontAwesome';
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 22px;
    color: var(--primary-color);
    transition: all 0.3s ease-in-out;
}

.faq-accordion .accordion-button:not(.collapsed)::after {
    transform: translateY(-50%) rotate(180deg);
}

.faq-accordion .accordion-item .accordion-body {
    border-top: 1px solid var(--divider-color);
    padding: 20px;
}

.faq-accordion .accordion-item .accordion-body p {
    margin: 0;
}

/************************************/
/***       15. Our Blog css       ***/
/************************************/

.our-blog {
    padding: 80px 0 130px;
}

.post-item {
    position: relative;
    background: var(--secondary-color) url('../images/post-item-bg.svg') no-repeat;
    background-position: center center;
    background-size: cover;
    border: 1px solid var(--divider-color);
    border-radius: 20px;
    padding: 40px 35px;
    height: calc(100% - 30px);
    margin-bottom: 30px;
    overflow: hidden;
}

.post-meta {
    margin-bottom: 20px;
}

.post-meta ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.post-meta ul li {
    line-height: normal;
    text-transform: capitalize;
}

.post-meta ul li a {
    color: inherit;
}

.post-meta ul li i {
    color: var(--accent-color);
    font-size: 18px;
    margin-right: 5px;
}

.post-item-content {
    border-bottom: 1px solid var(--divider-color);
    margin-bottom: 30px;
    padding-bottom: 30px;
}

.post-item-content h2 {
    font-size: 20px;
    line-height: 1.4em;
    margin-bottom: 15px;
}

.post-item-content h2 a {
    color: inherit;
}

.post-item-content p {
    margin: 0;
}

/************************************/
/***        16. Footer css        ***/
/************************************/

.main-footer {
    background: url('../images/footer-bg.png') no-repeat;
    background-position: bottom center;
    background-size: auto;
    border-top: 1px solid var(--divider-color);
    padding: 100px 0 0;
}

.main-footer .section-row {
    border-bottom: 1px solid var(--divider-color);
    padding-bottom: 80px;
}

.footer-logo img {
    /* 110px, antes 202. El logo del footer paso a ser el ISOTIPO solo —un
       cuadrado de 750x750— y un cuadrado a 202px pesa mucho mas en pantalla
       que el lockup apaisado que habia antes: a igual anchura, ocupa el doble
       de alto. Con el nombre escrito debajo, el simbolo no necesita tamano. */
    width: 100%;
    max-width: 110px;
}

/* ── «K3A SOLUTIONS» bajo el isotipo ────────────────────────────────────────
   🔒 Manrope, NO una fuente display. Dos motivos y los dos son reglas del
   proyecto: el CLAUDE.md prohibe cargar activos de terceros (por eso Manrope
   esta autoalojada) y `estilos_marca.md` la declara fuente de marca. Traer
   una display significaria autoalojarla: otra peticion, otro fichero y otra
   licencia que verificar.
   🔑 La vistosidad sale de otras tres palancas, que no cuestan un byte:
   peso 800 (el maximo de la Manrope variable), MAYUSCULAS, y `letter-spacing`
   muy abierto — el tracking amplio es lo que hace que un nombre corto lea
   como logotipo en vez de como texto.
   ⚠️ El `margin-bottom: 1.6em` de la regla global de <p> se anula: aqui
   separaria el nombre del simbolo sin motivo. */
.footer-marca {
    margin: 12px 0 0;
    /* Valor de partida; cada breakpoint lo ajusta mas abajo (15 escritorio,
       14 movil). Se deja coherente para que leer esta regla no despiste. */
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--error-color);
    line-height: 1.2em;
    /* 🔑 DOS sombras, y la primera es la que de verdad hace el trabajo.
       Sobre un fondo casi negro una sombra OSCURA no se ve: proyectar negro
       sobre negro no produce relieve. Lo que separa el texto del fondo ahi es
       un HALO CLARO —blanco al 16%, muy difuminado y sin desplazamiento—, que
       funciona como una luz detras de la letra.
       La segunda si es oscura y va pegada (2px, poco blur): no sirve para
       despegar, sirve para dar CANTO a los trazos y que el rojo no se vea
       plano. Sin ella el halo solo emborrona. */
    /* RELIEVE, no resplandor. Antes habia dos halos blancos difuminados
       (`0 0 Npx`) que rodeaban la letra por igual: eso es brillo, no sombra.
       Un relieve se hace con DIRECCION, imitando una luz que viene de arriba:
       · filo claro en el borde SUPERIOR, 1px y sin desenfoque -> la cara que
         recibe la luz;
       · sombra oscura DESPLAZADA hacia abajo -> la que proyecta la letra.
       Sin el filo superior solo hay sombra; sin la sombra, solo un subrayado
       raro. Juntas, la letra parece levantada del fondo. */
    text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.20),
                 0 1px 1px rgba(0, 0, 0, 0.75),
                 0 2px 4px rgba(0, 0, 0, 0.55);
}

/* ESCRITORIO: el nombre AL LADO del isotipo, no debajo. */
@media only screen and (min-width: 992px) {

    .about-footer {
        display: flex;
        align-items: center;
        gap: 14px;
    }

    .footer-marca {
        /* El margen superior era para separarlo del logo cuando iba debajo;
           en horizontal esa separacion la da el `gap`. */
        margin: 0;
        /* 17px. (A 23 el texto no cabia en la columna y empujaba: como el
           otro hijo del flex podia encogerse, el que cedia era el LOGO.
           Ahora ademas sobra sitio, asi que el logo esta doblemente a salvo.) */
        font-size: 15px;
        letter-spacing: 0.14em;
    }

    /* 📐 El nombre parte en dos lineas —«K3A» / «SOLUTIONS»— y es deliberado.
       La columna del pie es `col-lg-3`: a 1280px son unos 282px, y el logo
       (110) mas el hueco (14) dejan 158 para el texto, cuando «SOLUTIONS» ya
       pide unos 162 a este tamano con este tracking. Forzar una sola linea
       exigiria encoger la letra justo despues de que Andres la pidiera mas
       grande. Partido queda como un lockup de dos pisos, que es una forma
       habitual y lee bien. */
    /* 🔴 `flex: none` va en el CONTENEDOR, no en la imagen. El hijo del flex es
       `.footer-logo` (un div); la imagen de dentro es `width: 100%`, asi que
       seguia al div. Al no estar protegido, flexbox lo encogia para hacer
       sitio al texto y el logo se veia mas pequeno de los 110px.
       `min-width: 0` no hace falta aqui, pero `flex: none` equivale a
       `flex: 0 0 auto`: ni crece ni se encoge, se queda en su tamano. */
    .footer-logo {
        flex: none;
    }
}

@media only screen and (max-width: 991px) {

    .footer-marca {
        font-size: 14px;
        letter-spacing: 0.14em;
    }
}

.footer-contact-box {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.footer-contact-box .footer-links {
    width: calc(50% - 15px);
}

.footer-links h3 {
    font-size: 20px;
    text-transform: capitalize;
    margin-bottom: 20px;
}

.footer-links p {
    margin-bottom: 2px;
}

.footer-links p:last-child {
    margin-bottom: 0;
}

.footer-links p a {
    color: inherit;
    transition: all 0.3s ease-in-out;
}

.footer-links p a:hover {
    color: var(--accent-color);
}

.footer-privacy-policy {
    margin-left: 20px;
}

.footer-newsletter-form .form-group {
    display: flex;
    border-bottom: 1px solid var(--divider-color);
    padding-bottom: 15px;
}

.footer-newsletter-form .form-group .form-control {
    width: 70%;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4em;
    color: var(--text-color);
    background: transparent;
    border: none;
    border-radius: 0;
    outline: none;
    box-shadow: none;
    padding: 0;
}

.footer-newsletter-form .form-group .form-control::placeholder {
    color: var(--text-color);
}

.footer-newsletter-form .form-group .newsletter-btn {
    width: 30%;
    font-size: 16px;
    font-weight: 700;
    text-transform: capitalize;
    color: var(--primary-color);
    background: transparent;
    border: none;
    text-align: right;
    padding: 0;
    transition: all 0.3s ease-in-out;
}

.footer-newsletter-form .form-group .newsletter-btn:hover {
    color: var(--accent-color);
}

.footer-newsletter-form .form-group .newsletter-btn i {
    font-size: 18px;
    color: var(--accent-color);
    margin-left: 8px;
}

.footer-copyright-text {
    border-top: 1px solid var(--divider-color);
    text-align: center;
    margin-top: 80px;
    padding: 60px 0;
}

.footer-copyright-text p {
    margin: 0;
}

/************************************/
/***     17. About Us Page css    ***/
/************************************/

.page-header {
    position: relative;
    background: url('../images/page-header-bg.webp') no-repeat;
    background-position: center center;
    background-size: cover;
    /* Misma reserva de cabecera que `.hero` (224px + 16 de aire). Si cambia una, cambia la otra. */
    padding: 240px 0 80px;
    z-index: 1;
}

.page-header::before {
    content: '';
    display: block;
    position: absolute;
    left: 160px;
    bottom: 20%;
    background: url('../images/section-bg-shape-1.png') no-repeat;
    background-position: left center;
    background-size: cover;
    width: 113px;
    height: 110px;
    animation: shape1 20s infinite linear;
    animation-direction: alternate;
    z-index: 0;
}

@keyframes shape1 {
    from {
        transform: translateY(0) rotate(0deg);
    }

    to {
        transform: translateY(50px) rotate(360deg);
    }
}

.page-header::after {
    content: '';
    display: block;
    position: absolute;
    right: 220px;
    top: 40%;
    background: url('../images/section-bg-shape-2.png') no-repeat;
    background-position: right center;
    background-size: cover;
    width: 82px;
    height: 110px;
    animation: shape1 20s infinite linear;
    animation-direction: alternate;
    z-index: 0;
}

.page-header-box {
    position: relative;
    text-align: center;
    z-index: 1;
}

.page-header-box h1 {
    font-size: 42px;
    display: inline-block;
    line-height: 1.2em;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin-bottom: 15px;
    cursor: none;
}

.page-header-box h1 span {
    font-weight: 700;
    background: linear-gradient(to right, var(--accent-highlight) 0%, var(--accent-highlight-deep) 50%, var(--accent-highlight) 100%);
    background-size: 200% auto;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: all 0.4s ease-in-out;
}

.page-header-box h1:hover span {
    background-position: right center;
}

.page-header-box ol {
    margin: 0;
    padding: 0;
    justify-content: center;
}

.page-header-box ol li.breadcrumb-item {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5em;
    text-transform: capitalize;
    color: var(--text-color);
}

.page-header-box ol li.breadcrumb-item a {
    color: inherit;
}

.page-header-box ol li.breadcrumb-item.active {
    color: var(--text-color);
}

.page-header-box ol .breadcrumb-item+.breadcrumb-item::before {
    content: "/";
    color: var(--text-color);
}

.our-approach {
    padding: 80px 0;
}

.approach-item {
    position: relative;
    display: flex;
    margin-bottom: 40px;
}

.approach-item:last-child {
    margin-bottom: 0;
}

.approach-item:after {
    content: "";
    display: block;
    position: absolute;
    left: 40px;
    bottom: -80px;
    border-left: 1px solid var(--divider-color);
    width: 1px;
    height: 100%;
}

.approach-item:last-child:after {
    display: none;
}

.approach-item .icon-box {
    position: relative;
    width: 80px;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--accent-color);
    border-radius: 50%;
    margin-right: 40px;
}

.approach-item .icon-box::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(120deg, var(--accent-color) 0, var(--accent-secondary-color) 100%);
    border-radius: 50%;
    height: 100%;
    width: 100%;
    transform: scale(0);
    transition: all 0.4s ease-in-out;
}

.approach-item:hover .icon-box::before {
    transform: scale(1);
}

.approach-item .icon-box img {
    position: relative;
    width: 100%;
    max-width: 40px;
    z-index: 1;
}

/* 🔄 EL ICONO PASO DE <img> A MASCARA (21-oct-2026). La regla de arriba se queda:
   es de la plantilla y ya no la usa nadie —`approach-item` solo existe en
   includes/secciones/mision_vision.php—, pero borrarla no gana nada.
   Mismo tamano que tenia el <img>, para que el cambio no se note en la maqueta.
   📐 Aqui NO hace falta tocar el color en el hover: el circulo es #4F628D y el
   degradado que entra acaba en #12235A. Los dos estados son oscuros, asi que el blanco
   vale siempre (6,1:1 en reposo, 14,9:1 al final del degradado). */
.approach-item .icon-box .icono-mascara {
    --icono-tam: 40px;
    position: relative;
    z-index: 1;
}

.approach-item-content {
    width: calc(100% - 120px);
}

.approach-item-content h3 {
    font-size: 20px;
    text-transform: capitalize;
    margin-bottom: 10px;
}

.approach-item-content p {
    margin-bottom: 0;
}

.approach-image {
    position: relative;
    margin-left: 15px;
}

.approach-image figure {
    display: block;
    border-radius: 20px;
}

.approach-image img {
    width: 100%;
    aspect-ratio: 1 / 0.604;
    object-fit: cover;
    border-radius: 20px;
}

.approach-counter-box {
    position: absolute;
    left: 20px;
    bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    border-radius: 20px;
    backdrop-filter: blur(20px);
    --webkit-backdrop-filter: blur(20px);
    padding: 20px;
    overflow: hidden;
    z-index: 1;
}

.approach-counter-box::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--secondary-color);
    opacity: 21%;
    height: 100%;
    width: 100%;
    transition: all 0.4s ease-in-out;
}

.approach-counter-item {
    position: relative;
    border-right: 1px solid var(--divider-color);
    margin-right: 15px;
    padding-right: 15px;
    z-index: 1;
}

.approach-counter-item:last-child {
    margin-right: 0;
    padding-right: 0;
    border-right: none;
}

.approach-counter-item h2 {
    font-size: 40px;
    margin-bottom: 5px;
}

.approach-counter-item p {
    color: var(--primary-color);
    margin-bottom: 0;
}

.our-solution {
    padding: 80px 0;
}

.our-solution-content {
    position: sticky;
    top: 20px;
    margin-right: 15px;
}

.our-solution-content .section-title {
    margin-bottom: 0;
}

.solution-item-list {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.solution-item {
    width: calc(50% - 15px);
    padding: 20px;
}

.solution-item:nth-child(4n - 3),
.solution-item:nth-child(4n - 4) {
    background: url('../images/solution-item-bg.svg') no-repeat;
    background-position: center center;
    background-size: cover;
    border: 1px solid var(--divider-color);
    border-radius: 20px;
}

.solution-item .icon-box {
    position: relative;
    background: var(--accent-color);
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 40px;
}

.solution-item .icon-box::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--primary-color) no-repeat;
    border-radius: 50%;
    height: 100%;
    width: 100%;
    transform: scale(0);
    transition: all 0.4s ease-in-out;
}

.solution-item:hover .icon-box::before {
    transform: scale(1);
}

.solution-item .icon-box img {
    position: relative;
    max-width: 30px;
    transition: all 0.3s ease-in-out;
    z-index: 1;
}

.solution-item:hover .icon-box img {
    filter: brightness(0) invert(0);
}

/* 🔴 LA LINEA DE ARRIBA ES LA QUE HABIA QUE SUSTITUIR, no solo acompanar.
   Al pasar el raton, el `::before` de este circulo entra con --primary-color (#D7DBEA),
   que es CLARO, y la plantilla lo compensaba forzando el <img> a negro con un filtro.
   Ese filtro muere con el <img>: un icono blanco sobre #D7DBEA da 1,4:1 —desaparece—.
   Con la mascara el relevo es una variable: --icono-color pasa a --bg-color → 14,7:1.
   ⚠️ Si algun dia se cambia el color del hover de este circulo, ESTA regla va detras.
   (En mision_vision no hace falta nada de esto: alli los dos estados son oscuros.) */
.solution-item .icon-box .icono-mascara {
    --icono-tam: 30px;
    position: relative;
    z-index: 1;
    transition: background-color 0.3s ease-in-out;
}

.solution-item:hover .icon-box .icono-mascara {
    --icono-color: var(--bg-color);
}

.solution-item-content h3 {
    font-size: 20px;
    margin-bottom: 15px;
}

.solution-item-content p {
    margin-bottom: 0;
}

.our-team {
    padding: 80px 0 50px;
}

.team-item {
    position: relative;
    border-radius: 20px;
    height: calc(100% - 30px);
    margin-bottom: 30px;
    overflow: hidden;
}

.team-image figure,
.team-image a {
    display: block;
    cursor: none;
}

.team-image img {
    width: 100%;
    aspect-ratio: 1 / 1.424;
    object-fit: cover;
    transition: all 0.4s ease-in-out;
}

.team-item:hover .team-image img {
    transform: scale(1.1);
}

.team-body {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    border: 1px solid var(--divider-color);
    background: var(--secondary-color) url('../images/team-body-bg.svg') no-repeat;
    background-position: center center;
    background-size: cover;
    border-radius: 20px;
    text-align: center;
    padding: 20px;
    overflow: hidden;
    z-index: 1;
}

.team-content h3 {
    font-size: 20px;
    margin-bottom: 5px;
    text-transform: capitalize;
}

.team-content h3 a {
    color: inherit;
}

.team-content p {
    text-transform: capitalize;
    margin-bottom: 0;
}

.team-social-list {
    height: 0;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-in-out;
}

.team-item:hover .team-social-list {
    height: 38px;
    opacity: 1;
    visibility: visible;
    margin-top: 10px;
}

.team-social-list ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.team-social-list ul li {
    display: inline-block;
    margin-right: 10px;
}

.team-social-list ul li:last-child {
    margin: 0;
}

.team-social-list ul li a {
    background: var(--bg-color);
    border: 1px solid var(--divider-color);
    border-radius: 50%;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease-in-out;
}

.team-social-list ul li a:hover {
    background: var(--primary-color);
}

.team-social-list ul li a i {
    font-size: 18px;
    line-height: normal;
    background: linear-gradient(90deg, var(--accent-color) 0%, var(--accent-secondary-color) 100%);
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.our-faqs.about-our-faqs {
    padding: 80px 0 160px;
}

/************************************/
/***    18. Services Page css     ***/
/************************************/

.page-services {
    padding: 80px 0 50px;
}

/************************************/
/***    19. Service Single css    ***/
/************************************/

.page-service-single {
    padding: 80px 0 160px;
}

.page-single-sidebar {
    position: sticky;
    top: 30px;
    margin-right: 15px;
}

.page-catagery-list {
    background: var(--secondary-color) url('../images/sidebar-catagery-list-bg.svg') no-repeat;
    background-position: center center;
    background-size: cover;
    border: 1px solid var(--divider-color);
    border-radius: 20px;
    margin-bottom: 60px;
    overflow: hidden;
}

.page-catagery-list h3 {
    font-size: 20px;
    text-transform: capitalize;
    color: var(--primary-color);
    border-bottom: 1px solid var(--divider-color);
    padding: 30px;
}

.page-catagery-list ul {
    list-style: none;
    margin: 0;
    padding: 30px;
}

.page-catagery-list ul li {
    border-bottom: 1px solid var(--divider-color);
    line-height: 1.5em;
    padding-bottom: 20px;
    margin-bottom: 20px;
    transition: all 0.3s ease-in-out;
}

.page-catagery-list ul li:last-child {
    margin: 0;
    padding: 0;
    border-bottom: none;
}

.page-catagery-list ul li a {
    position: relative;
    display: block;
    text-transform: capitalize;
    color: var(--primary-color);
    padding-right: 30px;
    transition: all 0.3s ease-in-out;
}

.page-catagery-list ul li a:hover {
    color: var(--accent-color);
}

.page-catagery-list ul li a::before {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    background: url('../images/arrow-accent.svg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 8px auto;
    border: 1px solid var(--divider-color);
    border-radius: 50%;
    width: 24px;
    height: 24px;
    transition: all 0.3s ease-in-out;
}

.page-catagery-list ul li a:hover:before {
    border-color: var(--accent-color);
    transform: rotate(45deg);
}

.sidebar-cta-box {
    position: relative;
    border-radius: 20px;
    padding: 30px;
    overflow: hidden;
}

.sidebar-cta-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('../images/sidebar-cta-box.jpg') no-repeat;
    background-position: center center;
    background-size: cover;
    opacity: 30%;
    width: 100%;
    height: 100%;
}

.sidebar-cta-logo,
.sidebar-cta-content,
.sidebar-cta-contact {
    position: relative;
    z-index: 1;
}

.sidebar-cta-logo {
    width: 80px;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(90deg, var(--accent-color) 0%, var(--accent-secondary-color) 100%);
    border-radius: 50%;
    margin-bottom: 30px;
}

.sidebar-cta-logo img {
    width: 100%;
    max-width: 48px;
}

.sidebar-cta-content {
    margin-bottom: 40px;
}

.sidebar-cta-content h3 {
    font-size: 20px;
    margin-bottom: 20px;
}

.sidebar-cta-content p {
    margin: 0;
}

.sidebar-cta-contact ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sidebar-cta-contact ul li {
    width: 100%;
    margin-bottom: 20px;
}

.sidebar-cta-contact ul li:last-child {
    margin-bottom: 0;
}

.sidebar-cta-contact ul li a {
    display: inline-flex;
    align-items: center;
    line-height: 1.4em;
    color: var(--text-color);
    background: var(--divider-color);
    backdrop-filter: blur(10px);
    --webkit-backdrop-filter: blur(10px);
    padding: 10px 20px;
    border-radius: 100px;
    transition: all 0.4s ease-in-out;
}

.sidebar-cta-contact ul li a:hover {
    color: var(--primary-color);
}

.sidebar-cta-contact ul li a img {
    width: 100%;
    max-width: 20px;
    margin-right: 10px;
}

.page-single-image {
    margin-bottom: 40px;
}

.page-single-image figure {
    display: block;
    border-radius: 20px;
}

.page-single-image img {
    width: 100%;
    aspect-ratio: 1 / 0.598;
    object-fit: cover;
    border-radius: 20px;
}

.service-entry {
    margin-bottom: 60px;
}

.service-entry p {
    margin-bottom: 20px;
}

.service-entry p:last-child {
    margin-bottom: 0;
}

.service-entry h2 {
    font-size: 34px;
    font-weight: 300;
    margin-bottom: 20px;
}

.service-entry h2 span {
    font-weight: 700;
    background: linear-gradient(to right, var(--accent-highlight) 0%, var(--accent-highlight-deep) 50%, var(--accent-highlight) 100%);
    background-size: 200% auto;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: all 0.4s ease-in-out;
}

.service-entry h2:hover span {
    background-position: right center;
}

.service-entry ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.service-entry ul li {
    position: relative;
    width: calc(33.33% - 20px);
    line-height: 1.25em;
    background-color: var(--secondary-color);
    border: 1px solid var(--divider-color);
    border-radius: 100px;
    padding: 10px 15px 10px 45px;
}

.service-entry ul li::before {
    content: '\f058';
    position: absolute;
    font-family: 'Font Awesome 6 Free';
    top: 12px;
    left: 15px;
    font-size: 18px;
    font-weight: 900;
    color: var(--accent-color);
}

.service-solution-box,
.service-impact-box,
.service-innovation-box,
.building-smarter-box {
    margin-top: 60px;
}

.service-solution-steps {
    margin-top: 40px;
}

.service-impact-list {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    border: 1px solid var(--divider-color);
    background: var(--secondary-color) url('../images/service-impact-list-bg.svg') no-repeat;
    background-position: center center;
    background-size: cover;
    border-radius: 20px;
    margin-top: 40px;
    padding: 40px;
}

.service-impact-item {
    width: calc(33.33% - 20px);
}

.service-impact-item .icon-box {
    position: relative;
    background: var(--accent-color);
    border-radius: 50%;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 40px;
}

.service-impact-item .icon-box::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(120deg, var(--accent-color) 0, var(--accent-secondary-color) 100%) no-repeat;
    border-radius: 50%;
    height: 100%;
    width: 100%;
    transform: scale(0);
    transition: all 0.4s ease-in-out;
}

.service-impact-item:hover .icon-box::before {
    transform: scale(1);
}

.service-impact-item .icon-box img {
    position: relative;
    max-width: 40px;
    z-index: 1;
}

.service-impact-item-content h3 {
    font-size: 20px;
    margin-bottom: 15px;
}

.service-innovation-list {
    margin-top: 40px;
}

.building-steps-image {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin-top: 40px;
}

.building-smarter-steps,
.building-smarter-image {
    width: calc(50% - 15px);
}

.building-step-item {
    display: flex;
    border-bottom: 1px solid var(--divider-color);
    margin-bottom: 30px;
    padding-bottom: 30px;
}

.building-step-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.building-step-no {
    margin-right: 30px;
}

.building-step-no h2 {
    margin-bottom: 0;
    transition: all 0.3s ease-in-out;
}

.building-step-item:hover .building-step-no h2 {
    color: var(--accent-color);
}

.building-step-content h3 {
    font-size: 20px;
    margin-bottom: 15px;
}

.building-smarter-image figure {
    display: block;
    border-radius: 20px;
    height: 100%;
}

.building-smarter-image img {
    width: 100%;
    aspect-ratio: 1 / 0.68;
    object-fit: cover;
    border-radius: 20px;
}

/* ── FASE 2 DE LAS SIETE PAGINAS DE SERVICIO (21-oct-2026) ────────────────────
   El estilo del cuerpo de `includes/secciones/servicio_detalle.php`.

   🔑 EL AMBITO ES LA SECCION (`.page-service-single`) Y NO LA PAGINA. Es la diferencia
   con los bloques de `.pagina-inicio` y `.pagina-quienes-somos` de mas arriba, y no es
   un descuido: alli el prefijo de pagina era OBLIGATORIO porque `.about-us` existia en
   las dos paginas. Aqui `.service-entry` y `.service-innovation-*` existen SOLO en las
   siete paginas de servicio, que comparten un unico partial — el molde. Con un prefijo
   por pagina habria que acordarse de añadir seis mas, y olvidarse de uno es invisible:
   las siete sirven 200 y una se quedo con el estilo viejo.

   🔴 Y ES ADEMAS LO QUE PROTEGE /faqs, que no es teorico: `.page-catagery-list` y
   `.sidebar-cta-box` los usa TAMBIEN esa pagina, que va envuelta en `.page-faqs`. Sin el
   prefijo, cada regla de la barra lateral de aqui se le aplicaria de rebote.

   ⚡ De paso resuelve la especificidad sin depender del orden del fichero: estos
   selectores son (0,3,1) contra los (0,2,1) de la plantilla, asi que ganan TAMBIEN dentro
   de sus `@media` — una media query no suma especificidad. Nada depende de donde se pegue
   este bloque.
   ─────────────────────────────────────────────────────────────────────────── */

/* 9 · EL CUERPO, EN CUATRO TARJETAS — UNA POR SECCION (22-oct-2026).
   🔄 Se probo antes con UNA SOLA tarjeta en `.service-entry`, envolviendolo todo, y no era:
   un bloque de varios cientos de pixeles de alto no se lee como una tarjeta, se lee como
   un cambio de fondo de la pagina. Por secciones, cada unidad de sentido queda delimitada.

   📐 LAS CUATRO SON: los cuatro parrafos de entrada (`.service-intro-box`) y los tres
   bloques de cualificacion (`.service-innovation-box` x3 — «Ideal si», «No es ideal si»,
   «Qué problemas resuelve»).
   🔑 Los tres ultimos YA TENIAN contenedor, de la plantilla. El de los parrafos se añadio
   en el partial y existe solo para esto; el porque esta escrito alli.

   🔑 EL FONDO ES EL DE `.page-catagery-list`, la tarjeta de «¿Qué ofrecemos?», COMPLETO:
   el color, el SVG decorativo, el borde y el radio. Decision de Andres (22-oct-2026), tras
   probarlo sin el SVG. Los valores viven en variables, asi que lo unico que se repite son
   los nombres. ⚠️ Lo que SI queda duplicado es el `url()`: si algun dia se cambia ese SVG,
   son DOS sitios.

   ⚠️ CONSECUENCIA CONOCIDA Y ACEPTADA, para que no sorprenda dentro de tres meses:
   `sidebar-catagery-list-bg.svg` mide 390x457 —es VERTICAL, dibujado para la caja estrecha
   del lateral— y sus dos circulos desenfocados viven en las ESQUINAS. Con `cover` en una
   caja de 823px de ancho y 250-350 de alto, la escala la manda el ANCHO (2,1x) y el recorte
   vertical se come las esquinas. ⇒ el adorno se vera sobre todo en la tarjeta LARGA (la de
   los parrafos) y poco o nada en las tres cortas, y se movera al reescribir un parrafo.
   ⬜ Lo que lo arreglaria de verdad es un SVG APAISADO dibujado para esta caja. Mientras no
   exista, esto es lo que hay — y es lo que hace que las cuatro tarjetas y la del lateral se
   lean como la misma familia, que era el objetivo.
   📌 Y ese SVG lleva dentro un #A93E17. 🔄 AQUI DECIA «el unico naranja fuera de la
   paleta» Y ERA FALSO: al buscarlo resulto estar en SIETE activos de la plantilla, varios
   sirviendose ya (la flecha de la lista lateral de /faqs, entre otros). No era un descuido
   del diseño, era SU acento calido. Desde el 22-oct-2026 es `--accent-warm` en el :root.

   ⛔ SIN `overflow: hidden`, al contrario que `.page-catagery-list`, y es a proposito: el
   fondo YA lo recorta `border-radius` por si solo (un fondo se recorta a la caja del borde,
   que sigue el radio). Alli hace falta porque el filete del h3 llega a los bordes; aqui
   recortaria a los hijos con `wow fadeInUp` mientras entran —esa animacion los desplaza
   verticalmente— y los veriamos aparecer cortados. Mismo resultado visual, sin el efecto. */
.page-service-single .service-intro-box,
.page-service-single .service-innovation-box {
    background: var(--secondary-color) url('../images/sidebar-catagery-list-bg.svg') no-repeat;
    background-position: center center;
    background-size: cover;
    border: 1px solid var(--divider-color);
    border-radius: 20px;
    padding: 30px;
}

/* El hueco entre tarjetas lo da el `margin-top: 60px` que la plantilla ya pone a
   `.service-innovation-box` (40px en <=991px), asi que no hay nada que escribir. La de los
   parrafos es la primera y no lleva margen: la separa de la imagen el `margin-bottom: 40px`
   de `.page-single-image`. */

/* 9b · 🔄 EL CONTENEDOR DEL `ul` NO LLEVA FONDO. Lo llevo un rato —el de `.sidebar-cta-box`,
   una foto al 30% en un `::before`— y se retiro el 22-oct-2026 por dos motivos, el primero
   de los cuales no es de gusto:
   🔴 `sidebar-cta-box.jpg` ES UN MARCADOR DE POSICION, no una foto: una imagen gris de
      390x440 con el texto «390 × 440» escrito dentro. Es uno de los 22 marcadores
      degradados que el CLAUDE.md del repo tiene fichados como deuda. En el lateral va a
      tamaño nativo y al 30% y pasa desapercibido; estirado 2x en el cuerpo, los digitos se
      leen. ⚠️ SIGUE SIRVIENDOSE en `.sidebar-cta-box` —esta pagina, /faqs y las otras seis
      de servicio—, solo que ahi no se nota. No es problema de esta seccion.
   · Y el color que Andres queria ahi va en CADA punto, no detras de la lista entera.
   📌 El `margin-top: 20px` se queda: los 40px de la plantilla eran el aire de un bloque
   suelto en la pagina; dentro de la tarjeta dejaban el titulo flotando solo. */
.page-service-single .service-innovation-list {
    margin-top: 20px;
}

/* 10 · CADA PUNTO, RELLENO DE --divider-color — «ese negro en otro tono» (22-oct-2026).
   Andres señalo el fondo de `.sidebar-cta-box`, la tarjeta del «Haz que te encuentren…».

   🔑 Y ESA TARJETA NO TIENE `background-color`: lo que se ve ahi es el marcador gris
   (#212121 de media) al 30% sobre --bg-color. MEDIDO, esa mezcla da #0C0D13.
   ⇒ Replicarla con su mecanismo —otro `::before` con la imagen— era imposible y ademas
   indeseable: el `li` ya gasta su `::before` en el disco del check, y esa imagen es un
   marcador de posicion que no deberia multiplicarse.
   ✅ LA SALIDA, sin inventar un hex: --divider-color es #FFFFFF0A, blanco al 3,9%, y sobre
   ese mismo fondo da #0D0F16. Tres unidades de diferencia con el #0C0D13 del original, en
   la parte mas oscura de la escala: invisible.
   ⚡ Y NO ES UN APAÑO, ES EL IDIOMA DE LA CASA: `.sidebar-cta-contact ul li a` —la pastilla
   del boton del agente, que vive DENTRO de esa misma tarjeta— ya se rellena asi. Aqui se
   usa el mismo token para la misma idea: una superficie apenas levantada.
   ➕ Ventaja de que sea SEMITRANSPARENTE y no un hex plano: se apoya sobre lo que haya
   detras —incluido el SVG decorativo de la tarjeta— igual que el original se apoyaba sobre
   la pagina. Con un hex plano taparia el adorno en rectangulos.
   📐 Y EL TEXTO, EN --primary-color como los parrafos (22-oct-2026). Heredaba el
   --text-color de `body` (6,5:1 encima de este relleno); la tinta clara da 13,9:1.
   ⚡ Con esto las DOS listas de la pagina hablan igual: los puntos de «¿Qué ofrecemos?» ya
   estaban en --primary-color desde la primera pasada. El rotulo `h2` de arriba tambien lo
   lleva, pero por otra via —la regla global de h1..h6—, asi que no hay nada que tocar ahi. */
.page-service-single .service-innovation-list ul li {
    background-color: var(--divider-color);
    color: var(--primary-color);
}

/* 1 · EL ROTULO «¿Qué ofrecemos?» LLEVA LA PILDORA DE «NUESTROS METODOS» (`.titulo-pildora`
   en el marcado). 🔑 La receta NO se copia aqui: se le ha añadido un selector mas a las
   SIETE reglas que la definen alla arriba, que es la convencion que ese bloque dejo escrita
   —«en vez de copiar las declaraciones a otro sitio donde divergirian en silencio»—.
   De ahi sale todo: 14px, versalita, el espaciado de letra, el fondo, el radio de 100px y
   los dos destellos. Aqui solo queda lo que la pildora no puede saber.

   ⚡ Y de paso se arregla solo el «¿Qué Ofrecemos?» que servia la plantilla: su
   `text-transform: capitalize` capitaliza palabra a palabra —correcto en ingles, mal en
   español— y la pildora, con mas peso, lo sustituye por `uppercase`.

   El `margin` reemplaza al `padding: 30px` del cabecero de la plantilla: la pildora es un
   distintivo en linea, no una franja, asi que el hueco tiene que venir de fuera. */
.page-service-single .page-catagery-list h3 {
    margin: 30px 30px 20px;
}

/* Y la lista pierde su padding de arriba: ese hueco ya lo pone el margen de la pildora.
   Sin esto se sumaban los dos y quedaban 50px de aire. */
.page-service-single .page-catagery-list ul {
    padding-top: 0;
}

/* 2 · Los puntos de «¿Qué ofrecemos?» son TEXTO, no enlaces, asi que no les llegaba
   `.page-catagery-list ul li a` —donde la plantilla pone el color y la flecha— y se
   quedaban en el gris apagado del cuerpo. Se les da el MISMO --primary-color que a los de
   /faqs: es el color del componente, no uno inventado aqui.

   🔑 LA LETRA SALE DEL `h3` DE LA TARJETA DE ABAJO —«Haz que te
   encuentren…», `.sidebar-cta-content h3`— pero UN ESCALON POR DEBAJO: 18px y peso 500
   (22-oct-2026, tercera pasada de Andres sobre esta lista). 🔑 El porque es de jerarquia,
   y es la razon por la que 20px/700 no convencia: a esa medida estos seis puntos pesaban
   LO MISMO que el titular de la tarjeta de abajo, y un titular y una lista de apoyo no
   pueden tener la misma voz. 18px los deja legibles y claramente subordinados.
   📐 Las cuatro propiedades, para que no se desincronicen: 18px · peso 500 ·
   `line-height: 1.5em` · 16px en movil, abajo, junto a la regla del h3 de la que bajan.
   🔑 El 1.5em NO es inventado: es el que la plantilla le daba a este `li` antes de que
   tocaramos nada. Al subirlos a 20px se lo quite; a 18px vuelve a ser el bueno.
   🔑 Y el peso 500 es el de la pildora de arriba (`.section-title h3`), asi que la tarjeta
   usa dos pesos de la paleta del sitio y no un tercero nuevo.
   ⬜ El primer punto sigue pidiendo ser un PARRAFO del cuerpo y no un item de una lista de
   seis rotulos cortos («SEO técnico.» mide 12 caracteres). Es copy. */
.page-service-single .page-catagery-list ul li {
    color: var(--primary-color);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5em;
}

/* 3 · LOS PARRAFOS: 17px Y CON LA TINTA CLARA (22-oct-2026).
   📐 17px y no 18: «un poco mas grande» que los 16px que heredaban. 18px es el escalon que
   el sitio ya tiene escrito (`.about-presentacion p`, el parrafo de entrada de
   /quienes-somos) y esta a un caracter de distancia si 17 se queda corto.
   ⚠️ CON ESTO LA COLUMNA PRINCIPAL DEJA DE MEDIR LO MISMO QUE «Nuestros metodos», que
   sigue en 16px. Fue una peticion explicita y queda anotada para que no parezca un
   descuido: si algun dia se quiere que vuelvan a hablar igual, se cambia en los dos sitios.
   🔑 EL COLOR: --primary-color, la tinta CLARA del sitio (22-oct-2026, «mejor blanca»).
   Fue y volvio: estuvo en --primary-color, luego se BORRO para igualarlo al gris heredado
   de los parrafos de «Nuestros metodos» —que no declaran color ninguno— y ahora vuelve.
   Queda escrito para que la proxima lectura no lo tome por un descuido: esta seccion lleva
   la tinta clara A PROPOSITO y ya NO habla igual que «Nuestros metodos», ni en tamaño
   (17px frente a 16) ni en color.

   ⚠️ --primary-color (#D7DBEA) Y NO BLANCO PURO, y no es un matiz menor: la paleta define
   ese token como «Gris azulado claro (NO blanco)», y es la tinta de todos los titulares del
   sitio. Sobre la tarjeta da 14,5:1; el blanco puro daria 20,0:1 — los dos pasan AA de
   sobra, asi que la diferencia es de DISEÑO, no de accesibilidad. En el sitio el #FFFFFF
   esta reservado a los iconos pequeños (el boton flotante, las mascaras, el aspa del
   check), donde el area es minima y el extra de brillo ayuda. Un parrafo entero en blanco
   puro sobre casi-negro deslumbra, que es justo lo que ese «no blanco» evita.
   ⬜ Si aun asi se quiere mas brillo, es cambiar esta linea por `color: #FFFFFF` — pero
      seria el PRIMER texto de cuerpo en blanco puro de toda la web, y entonces lo coherente
      es decidirlo para el sitio entero, no para esta seccion.
   ⚠️ El parrafo de la tarjeta del lateral (`.sidebar-cta-content p`) se queda gris: es
   texto de apoyo dentro de un distintivo, no cuerpo de la pagina. */
.page-service-single .service-entry p {
    font-size: 17px;
    color: var(--primary-color);
}


/* 4 · LOS TRES ROTULOS, ahora <h2> (ver la cabecera del partial).
   26px y no los 34px que trae `.service-entry h2`: 34px es el tamaño de un titulo de
   SECCION (`.section-title h2`), y estos son subapartados del contenido — a ese tamaño le
   quitarian la voz a «Nuestros metodos», que entra justo debajo. 26px queda entre ese 34
   y los 20px de una tarjeta — 22px tras probarlo en pantalla. El peso 300 y el degradado
   del <span> los hereda de la
   plantilla, que ya tenia esa regla escrita y sin usar.
   `margin-bottom: 0` porque el hueco ya lo pone `.service-innovation-list` con sus 40px
   de `margin-top`: los dos margenes sumados daban 60px. */
.page-service-single .service-innovation-box h2 {
    font-size: 22px;
    margin-bottom: 0;
}

/* 5 · LAS LISTAS, EN COLUMNA.
   🔴 El problema: la plantilla las monta a tres por fila (`calc(33.33% - 20px)`) con radio
   de 100px. Eso es una PILDORA, pensada para una etiqueta corta («Entrega rapida»), y asi
   la usaba. Aqui cada punto es una frase: con 823px de columna, cada pildora mide 254px y
   le quedan 194px de texto — tres lineas dentro de un ovalo. Y el reparto no cuadra con el
   contenido: `ideal` tiene 3 puntos (fila limpia), `no_ideal` 2 (hueco a la derecha) y
   `problemas` 4 (tres y un huerfano). En movil la plantilla pasa a `width: auto` y quedan
   de anchos desiguales en zigzag.
   Se conserva el flex y solo se gira el eje, para que `gap` siga gobernando la separacion:
   con `display: block` habria que volver a inventar los margenes. */
.page-service-single .service-innovation-list ul {
    flex-direction: column;
    gap: 15px;
}

/* El radio deja de ser 100px: una pildora de dos lineas se deforma en dos semicirculos
   enormes. 20px es el radio de TODO lo demas del sitio —`.page-catagery-list`,
   `.sidebar-cta-box`, `.solution-item`, `.service-impact-list`—.
   Y 16px / 1.6em deshacen los 14px / 1.25em de la plantilla (los 14px los metia su
   `@media (max-width: 991px)`): eran medidas de etiqueta, no de frase. */
.page-service-single .service-innovation-list ul li {
    width: 100%;
    font-size: 16px;
    line-height: 1.6em;
    border-radius: 20px;
    padding: 18px 25px 18px 60px;
}

/* 6 · EL CHECK: DISCO AZUL, CHECK BLANCO. Y el cambio de glifo es lo que lo hace posible.
   🔴 POR QUE NO SE PUEDE CON EL GLIFO DE LA PLANTILLA: `\f058` es `fa-circle-check`, y en
   una tipografia un glifo tiene UN color. Ese dibuja el disco y RECORTA el check como un
   hueco, asi que el check no tiene color propio — se ve lo que haya detras. Con `color`
   solo se puede elegir el disco, y el check sale siempre del fondo de la pildora.
   ✅ LA SOLUCION: `\f00c` —`fa-check`, el aspa a secas, sin disco—. El glifo pasa a ser
   solo el check y se le da `color: #FFFFFF`; el disco deja de ser tipografia y pasa a ser
   una CAJA CSS: `background` + `border-radius: 50%`. Dos colores, dos mecanismos.
   🔑 El azul es --accent-color PLANO, que es como pinta sus discos «Nuestros metodos»
   (`.solution-item .icon-box`), no un azul nuevo. Blanco sobre el: 6,1:1.
   📐 24px de disco: el tamaño que ya usa el distintivo pequeño del sitio, la flecha de
   `.page-catagery-list ul li a::before`. Y 20 de `left` + 24 de disco + 16 de aire = los
   60px de `padding-left` de arriba.
   El `top` centra el disco en la PRIMERA linea: 18 de padding + (25,6 de linea - 24) / 2. */
.page-service-single .service-innovation-list ul li::before {
    content: '\f00c';
    display: flex;
    align-items: center;
    justify-content: center;
    top: 19px;
    left: 20px;
    width: 24px;
    height: 24px;
    font-size: 11px;
    color: #FFFFFF;
    background: var(--accent-color);
    border-radius: 50%;
}

/* 7 · LOS DOS ICONOS DE LA BARRA LATERAL, por mascara. El porque de cada uno —y los
   contrastes que daban— esta en la cabecera del partial, que es quien decide el marcado.
   📐 El logotipo replica el tamaño de la plantilla (`.sidebar-cta-logo img`, 48px).
   El del agente NO: la plantilla le daba 20px y ahi `whatsapp.svg` se empastaba, porque es
   la version de CONTORNO del logo —anillo + auricular + pico— y a 20px sus trazos se
   juntan. 28px (22-oct-2026, a peticion de Andres). ⚠️ Eso sube la pastilla del enlace de
   42 a 48px de alto: es `inline-flex` con 10px de padding arriba y abajo, asi que el icono
   manda sobre su altura en cuanto pasa de los 22px de la linea de texto.
   🔑 Blanco PURO y no --primary-color (#D7DBEA, que tira a lavanda): es la convencion ya
   escrita del sitio —el valor por omision de `.icono-mascara`—, la misma del boton
   flotante y de los iconos de `nuestros_metodos`. Por eso no hace falta --icono-color. */
.page-service-single .sidebar-cta-logo .icono-mascara {
    --icono-tam: 48px;
}

.page-service-single .sidebar-cta-contact .icono-mascara {
    --icono-tam: 28px;
    margin-right: 10px;
}

/* 8 · JUSTIFICADO LA PROSA, CENTRADAS LAS LISTAS (22-oct-2026).
   🔑 LAS LISTAS DEJAN DE IR JUSTIFICADAS, y no es un cambio de gusto: el justificado
   reparte el sobrante de cada linea entre sus espacios, asi que necesita LINEAS LARGAS
   para no abrir «rios» de blanco. En un parrafo de 823px eso se cumple; en estas dos
   listas, no, y por motivos distintos en cada una:
   · La del lateral mide 324px de ancho — mas estrecha que las tarjetas de personas de
     /quienes-somos (297px) pero con letra mayor, o sea menos caracteres por linea que
     nada de lo que habiamos justificado hasta ahora.
   · Y las de cualificacion tienen el problema CONTRARIO: la caja mide 738px y la mayoria
     de los puntos son UNA linea de 35-50 caracteres. Justificar no hace nada a una linea
     unica —el justificado nunca estira la ultima—, asi que lo que se veia era texto
     pegado al borde izquierdo de una caja enorme medio vacia.
   ⇒ Y DONDE SE ACABO: `text-align: left`. Se probo el centrado un momento y no era —en
   una lista, el ojo necesita un borde izquierdo recto desde el que arrancar cada punto, y
   centrar se lo quita a los seis o siete a la vez—. Izquierda a secas resuelve igual lo de
   la caja medio vacia, porque el problema no era de reparto sino de justificado.
   📐 Por eso el padding vuelve a ser ASIMETRICO: 60px a la izquierda —donde vive el disco
   del check, en absoluto— y 25px a la derecha. Simetrico solo tenia sentido para centrar.
   ⛔ Sin `hyphens: auto` en las listas: partir palabras solo sirve para que el justificado
   no se abra, y aqui ya no hay justificado que proteger. Alineado a la izquierda el borde
   derecho es irregular A PROPOSITO, que es como se lee una lista.

   La prosa SI se queda justificada, con sus guiones. Los anchos: parrafos 823px y texto
   del CTA lateral 264px.
   🔑 Funciona en los dos idiomas porque <html lang> es correcto en ambos: sin idioma
   declarado el navegador no sabe por donde parte una palabra y `auto` no hace nada. */
.page-service-single .service-entry p,
.page-service-single .sidebar-cta-content p {
    text-align: justify;
    -webkit-hyphens: auto;
    hyphens: auto;
}

.page-service-single .service-innovation-list ul li,
.page-service-single .page-catagery-list ul li {
    text-align: left;
}

/* 11 · FUERA EL MARCADOR DE POSICION DE LA TARJETA DEL CTA (23-oct-2026).
   `.sidebar-cta-box` —la del «Más oportunidades atendidas…»— no tiene `background-color`:
   su fondo es `sidebar-cta-box.jpg` al 30% en un `::before`. 🔴 Y ESE .jpg NO ES UNA FOTO,
   es un MARCADOR: una imagen gris de 390x440 con el texto «390 × 440» escrito dentro, uno
   de los 22 marcadores degradados que el CLAUDE.md del repo tiene fichados. Al 30% y a
   tamaño nativo no se lee, pero se descarga y esta ahi.

   ⚡ Y EL RECAMBIO YA ESTABA DECIDIDO SIN SABERLO: --divider-color se eligio para el relleno
   de los puntos de las listas (regla 10) justamente porque REPRODUCE este fondo. Medido:
     la tarjeta hoy, marcador al 30% sobre --bg-color  → #0C0D13
     la tarjeta con --divider-color                    → #0D0F16
   Tres unidades, en la parte mas oscura de la escala. ⇒ el mismo tono, sin imagen que
   descargar y sin un marcador servido. Y de paso la tarjeta del lateral y los puntos del
   cuerpo pasan a compartir superficie, que es lo que Andres venia pidiendo desde el
   principio: que todo se lea como la misma familia.

   📐 Lo que NO cambia, comprobado antes de tocar: el h3 encima sigue a 13,9:1 y el parrafo
   a 6,5:1. Y la pastilla del boton del agente, que tambien se rellena de --divider-color,
   se APILA sobre esta (#16181F contra #0D0F16): sigue distinguiendose tan poco por color
   como ya se distinguia —lo que la separa es su forma de pildora y su `backdrop-filter`—,
   asi que no hay regresion.

   🔑 `content: none` y no `display: none`: cancela el pseudoelemento en vez de pintarlo y
   esconderlo. Es la forma canonica de anular un `::before` heredado.
   ⚠️ CON EL PREFIJO, asi que /faqs NO se toca: usa la misma tarjeta y sigue sirviendo el
   marcador. ⬜ Resolverlo alli es una decision aparte — esa pagina esta dada por terminada
   y cambiarla obliga a revisarla de nuevo. */
.page-service-single .sidebar-cta-box {
    background-color: var(--divider-color);
}

.page-service-single .sidebar-cta-box::before {
    content: none;
}

/************************************/
/***     20. Blog Archive css     ***/
/************************************/

.page-blog {
    padding: 80px 0 160px;
}

.page-pagination {
    margin-top: 20px;
    text-align: center;
}

.page-pagination ul {
    justify-content: center;
    padding: 0;
    margin: 0;
}

.page-pagination ul li a,
.page-pagination ul li span {
    display: flex;
    text-decoration: none;
    justify-content: center;
    align-items: center;
    background: var(--divider-color);
    color: var(--primary-color);
    border-radius: 10px;
    width: 40px;
    height: 40px;
    margin: 0 5px;
    font-weight: 600;
    line-height: 1em;
    transition: all 0.3s ease-in-out;
}

.page-pagination ul li.active a,
.page-pagination ul li a:hover {
    background: var(--accent-color);
}

/************************************/
/***     21. Blog Single css      ***/
/************************************/

.page-single-post {
    padding: 80px 0 160px;
}

.post-single-meta ol li {
    font-size: 18px;
    color: var(--primary-color);
    margin-right: 15px;
}

.post-single-meta ol li:last-child {
    margin-right: 0;
}

.post-single-meta ol li i {
    font-size: 18px;
    color: var(--primary-color);
    margin-right: 5px;
}

.post-image {
    position: relative;
    margin-bottom: 30px;
}

.post-image figure {
    display: block;
    border-radius: 20px;
    overflow: hidden;
}

.post-image img {
    width: 100%;
    aspect-ratio: 1 / 0.50;
    object-fit: cover;
    border-radius: 20px;
}

.post-content {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
}

.post-entry {
    border-bottom: 1px solid var(--divider-color);
    padding-bottom: 30px;
    margin-bottom: 30px;
}

.post-entry:after {
    content: '';
    display: block;
    clear: both;
}

.post-entry a {
    color: var(--accent-color);
}

.post-entry h1,
.post-entry h2,
.post-entry h3,
.post-entry h4,
.post-entry h5,
.post-entry h6 {
    font-weight: 300;
    line-height: 1.2em;
    margin: 0 0 0.477em;
}

.post-entry h1 {
    font-size: 42px;
}

.post-entry h2 {
    font-size: 34px;
}

.post-entry h3 {
    font-size: 28px;
}

.post-entry h4 {
    font-size: 24px;
}

.post-entry h5 {
    font-size: 20px;
}

.post-entry h6 {
    font-size: 18px;
}

.post-entry p {
    margin-bottom: 20px;
}

.post-entry p:last-child {
    margin-bottom: 0;
}

.post-entry p strong {
    color: var(--primary-color);
    font-size: 18px;
    font-weight: 600;
}

.post-entry ol {
    margin: 0 0 30px;
}

.post-entry ul {
    padding: 0;
    margin: 20px 0 20px;
    padding-left: 20px;
}

.post-entry ol li,
.post-entry ul li {
    position: relative;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5em;
    color: var(--text-color);
    margin-bottom: 15px;
}

.post-entry ul li:last-child {
    margin-bottom: 0;
}

.post-entry ul ul,
.post-entry ul ol,
.post-entry ol ol,
.post-entry ol ul {
    margin-top: 20px;
    margin-bottom: 0;
}

.post-entry ul ul li:last-child,
.post-entry ul ol li:last-child,
.post-entry ol ol li:last-child,
.post-entry ol ul li:last-child {
    margin-bottom: 0;
}

.post-entry blockquote {
    background: url('../images/icon-blockquote.svg'), var(--secondary-color);
    background-repeat: no-repeat;
    background-position: 30px 30px;
    background-size: 45px;
    border: 1px solid var(--divider-color);
    border-radius: 20px;
    padding: 30px 30px 30px 90px;
    margin-bottom: 30px;
}

.post-entry blockquote p {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.5em;
    color: var(--primary-color);
}

.post-entry blockquote p:last-child {
    margin-bottom: 0;
}

.tag-links {
    font-size: 20px;
    font-weight: 700;
    text-transform: capitalize;
    color: var(--primary-color);
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.post-tags .tag-links a {
    display: inline-block;
    font-size: 16px;
    font-weight: 500;
    text-transform: capitalize;
    line-height: 1em;
    background: linear-gradient(to right, var(--accent-color) 0%, var(--accent-secondary-color) 50%, var(--accent-color) 100%);
    background-size: 200% auto;
    color: var(--white-color);
    border-radius: 100px;
    padding: 12px 20px;
    transition: all 0.3s ease-in-out;
}

.post-tags .tag-links a:hover {
    background-position: right center;
}

.post-social-sharing {
    text-align: right;
}

.post-social-sharing ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.post-social-sharing ul li {
    display: inline-block;
    margin-right: 10px;
}

.post-social-sharing ul li:last-child {
    margin-right: 0;
}

.post-social-sharing ul li a {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: linear-gradient(to right, var(--accent-color) 0%, var(--accent-secondary-color) 50%, var(--accent-color) 100%);
    background-size: 200% auto;
    color: var(--primary-color);
    border-radius: 100px;
    width: 40px;
    height: 40px;
    transition: all 0.3s ease-in-out;
}

.post-social-sharing ul li:hover a {
    background-position: right center;
}

.post-social-sharing ul li a i {
    font-size: 18px;
    color: inherit;
}

/************************************/
/***     22. Projects Page css    ***/
/************************************/

.page-projects {
    padding: 80px 0 130px;
}

/************************************/
/***    23. Project Details css   ***/
/************************************/

.page-project-single {
    padding: 80px 0 160px;
}

.project-category {
    border: 1px solid var(--divider-color);
    background: var(--secondary-color) url('../images/sidebar-catagery-list-bg.svg') no-repeat;
    background-position: center center;
    background-size: cover;
    border-radius: 20px;
    margin-bottom: 60px;
    padding: 30px;
    overflow: hidden;
}

.project-category-list ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.project-category-list ul li {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.5em;
    text-transform: capitalize;
    color: var(--primary-color);
    border-bottom: 1px solid var(--divider-color);
    display: flex;
    gap: 25px;
    margin-bottom: 20px;
    padding-bottom: 20px;
}

.project-category-list ul li span {
    font-size: 16px;
    font-weight: 400;
}

.category-social-link {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px 20px;
}

.category-social-link h3 {
    font-size: 20px;
}

.category-social-link ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.category-social-link ul li a {
    background: var(--bg-color);
    border: 1px solid var(--divider-color);
    border-radius: 50%;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease-in-out;
}

.category-social-link ul li a:hover {
    background: var(--primary-color);
}

.category-social-link ul li a i {
    font-size: 18px;
    line-height: normal;
    background: linear-gradient(90deg, var(--accent-color) 0%, var(--accent-secondary-color) 100%);
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.project-entry {
    margin-bottom: 60px;
}

.project-entry p {
    margin-bottom: 20px;
}

.project-entry p:last-child {
    margin-bottom: 0;
}

.project-entry h2 {
    font-size: 34px;
    font-weight: 300;
    margin-bottom: 20px;
}

.project-entry h2 span {
    font-weight: 700;
    background: linear-gradient(to right, var(--accent-highlight) 0%, var(--accent-highlight-deep) 50%, var(--accent-highlight) 100%);
    background-size: 200% auto;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: all 0.4s ease-in-out;
}

.project-entry h2:hover span {
    background-position: right center;
}

.project-entry ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.project-entry ul li {
    position: relative;
    line-height: 1.5em;
    padding-left: 30px;
    margin-bottom: 15px;
}

.project-entry ul li:last-child {
    margin-bottom: 0;
}

.project-entry ul li::before {
    content: '\f058';
    position: absolute;
    font-family: 'Font Awesome 6 Free';
    top: 0;
    left: 0;
    font-size: 18px;
    font-weight: 900;
    color: var(--accent-color);
}

.project-challenge-box,
.project-solution-box {
    margin-top: 60px;
}

.project-challenge-list {
    border: 1px solid var(--divider-color);
    border-radius: 20px;
    margin-top: 40px;
    padding: 30px;
}

.project-solution-counters {
    display: flex;
    flex-wrap: wrap;
    gap: 30px 60px;
    margin-top: 40px;
}

.solution-counter-item {
    width: calc(25% - 45px);
}

.solution-counter-item h2 {
    margin-bottom: 5px;
}

/************************************/
/***      24. Team Page css       ***/
/************************************/

.page-team {
    padding: 80px 0 130px;
}

/************************************/
/***     25. Team Single css      ***/
/************************************/

.page-team-single {
    padding: 80px 0 160px;
}

.team-single-image {
    margin-bottom: 60px;
}

.team-single-image figure {
    display: block;
    border-radius: 20px;
}

.team-single-image img {
    width: 100%;
    aspect-ratio: 1 / 1.29;
    object-fit: cover;
    border-radius: 20px;
}

.team-member-info,
.team-expertise-box,
.team-guideline-box {
    margin-bottom: 60px;
}

.team-member-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 40px 80px;
}

.member-info-box {
    position: relative;
    width: calc(62% - 40px);
}

.member-info-box::before {
    content: '';
    position: absolute;
    top: 0;
    right: -40px;
    background-color: var(--divider-color);
    width: 1px;
    height: 100%;
}

.member-info-box .section-title h3 {
    font-size: 16px;
    letter-spacing: 0;
    text-transform: capitalize;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    margin-bottom: 10px;
}

.member-info-box .section-title h3::before,
.member-info-box .section-title h3::after {
    display: none;
}

.member-contact-list {
    width: calc(38% - 40px);
}

.member-social-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.member-social-links ul li {
    display: inline-block;
    border-radius: 50%;
    margin-right: 15px;
}

.member-social-links ul li:last-child {
    margin: 0;
}

.member-social-links ul li a {
    width: 36px;
    height: 36px;
    background: linear-gradient(to right, var(--accent-color) 0%, var(--accent-secondary-color) 50%, var(--accent-color) 100%);
    background-size: 200% auto;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--primary-color);
    transition: all 0.4s ease-in-out;
}

.member-social-links ul li:hover a {
    background-position: right center;
}

.member-social-links ul li a i {
    font-size: 18px;
    color: inherit;
}

.member-contact-item {
    margin-bottom: 30px;
}

.member-contact-item:last-child {
    margin-bottom: 0;
}

.member-contact-item h3 {
    font-size: 20px;
    display: inline-block;
    text-transform: capitalize;
    background: linear-gradient(90deg, var(--accent-color) 0%, var(--accent-secondary-color) 100%);
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 10px;
}

.member-contact-item p {
    margin-bottom: 0;
}

.member-contact-item p a {
    color: inherit;
    transition: all 0.3s ease-in-out;
}

.member-contact-item p a:hover {
    color: var(--accent-color);
}

.team-expertise-list {
    display: flex;
    flex-wrap: wrap;
    gap: 40px 30px;
}

.skills-progress-bar {
    width: calc(50% - 15px);
}

.skills-progress-bar .skill-data {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

.skills-progress-bar .skill-data .skill-title,
.skills-progress-bar .skill-data .skill-no {
    font-size: 20px;
    font-weight: 700;
    color: var(--primary-color);
    text-transform: capitalize;
}

.skills-progress-bar .skillbar .skill-progress {
    position: relative;
    width: 100%;
    height: 16px;
    border: 1px solid var(--divider-color);
    background: var(--secondary-color);
    border-radius: 100px;
    overflow: hidden;
}

.skills-progress-bar .skillbar .skill-progress .count-bar {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    background: linear-gradient(90deg, var(--accent-color) 0%, var(--accent-secondary-color) 100%);
    border-radius: 100px;
}

.team-guideline-list ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.team-guideline-list ul li {
    position: relative;
    width: calc(50% - 15px);
    line-height: 1.25em;
    background-color: var(--secondary-color);
    border: 1px solid var(--divider-color);
    border-radius: 100px;
    padding: 10px 15px 10px 40px;
}

.team-guideline-list ul li::before {
    content: '\f058';
    position: absolute;
    font-family: 'Font Awesome 6 Free';
    top: 10px;
    left: 15px;
    font-size: 18px;
    font-weight: 900;
    color: var(--accent-color);
}

.team-contact-form .contact-form {
    border: 1px solid var(--divider-color);
    border-radius: 20px;
}

/************************************/
/***   26. Testimonials Page css  ***/
/************************************/

.page-testimonials {
    padding: 80px 0 50px;
}

.page-testimonials .testimonial-item {
    position: relative;
    border: 1px solid var(--divider-color);
    background: var(--secondary-color) url('../images/testimonial-item-bg.svg') no-repeat;
    background-position: center center;
    background-size: cover;
    border-radius: 20px;
    height: calc(100% - 30px);
    margin-bottom: 30px;
    padding: 30px 25px;
    overflow: hidden;
}

.page-testimonials .testimonial-item::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(136.83deg, var(--accent-color) 2.01%, var(--accent-secondary-color) 97.82%);
    border-radius: 999px 999px 0 0;
    height: 0;
    width: 100%;
    transition: all 0.4s ease-in-out;
    z-index: 0;
}

.page-testimonials .testimonial-item.active:before,
.page-testimonials .testimonial-item:hover:before {
    border-radius: 0;
    height: 100%;
}

.page-testimonials .testimonial-item .testimonial-content,
.page-testimonials .testimonial-item .testimonial-header {
    position: relative;
    z-index: 1;
}

/************************************/
/***     27. Image Gallery css    ***/
/************************************/

.page-gallery {
    padding: 80px 0 130px;
}

.page-gallery-box .photo-gallery {
    height: calc(100% - 30px);
    margin-bottom: 30px;
}

.page-gallery-box .photo-gallery a {
    cursor: none;
}

.page-gallery-box .photo-gallery figure {
    display: block;
    border-radius: 20px;
}

.page-gallery-box .photo-gallery img {
    width: 100%;
    aspect-ratio: 1 / 0.829;
    object-fit: cover;
    border-radius: 20px;
}

/************************************/
/***    28. Video Gallery css     ***/
/************************************/

.page-video-gallery {
    padding: 80px 0 130px;
}

.video-gallery-image {
    height: calc(100% - 30px);
    margin-bottom: 30px;
    overflow: hidden;
}

.video-gallery-image a {
    position: relative;
    display: block;
    cursor: none;
}

.video-gallery-image a::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--secondary-color);
    border-radius: 20px;
    opacity: 0%;
    visibility: hidden;
    width: 100%;
    height: 100%;
    z-index: 1;
    transform: scale(0);
    transition: all 0.4s ease-in-out;
}

.video-gallery-image:hover a::before {
    opacity: 40%;
    visibility: visible;
    transform: scale(1);
}

.video-gallery-image a::after {
    content: '\f04b';
    font-family: 'FontAwesome';
    position: absolute;
    top: 50%;
    left: 50%;
    right: 0;
    transform: translate(-50%, -50%);
    font-size: 20px;
    background: linear-gradient(136.83deg, var(--accent-color) 2.01%, var(--accent-secondary-color) 97.82%);
    color: var(--primary-color);
    border-radius: 50%;
    height: 60px;
    width: 60px;
    cursor: none;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s ease-in-out;
    z-index: 1;
}

.video-gallery-image:hover a::after {
    opacity: 1;
    visibility: visible;
}

.video-gallery-image img {
    width: 100%;
    aspect-ratio: 1 / 0.829;
    object-fit: cover;
    border-radius: 20px;
}

/************************************/
/***      29. FAQs Page css       ***/
/************************************/

.page-faqs {
    padding: 80px 0 160px;
}

.page-faqs .page-faq-accordion {
    margin-bottom: 60px;
}

.page-faqs .page-faq-accordion:last-child {
    margin-bottom: 0px;
}

/************************************/
/***    30. Contact Us Page css   ***/
/************************************/

.page-contact-us {
    padding: 80px 0 160px;
}

.conatct-us-form {
    display: flex;
    flex-wrap: wrap;
    border-radius: 40px;
    border: 1px solid var(--divider-color);
    overflow: hidden;
}

.contact-form {
    background: var(--secondary-color) url('../images/contact-form-bg.png') no-repeat;
    background-position: center center;
    background-size: cover;
    padding: 40px;
}

.contact-form form .form-control {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5em;
    color: var(--text-color);
    background-color: var(--secondary-color);
    border: 1px solid var(--divider-color);
    border-radius: 20px;
    padding: 17px 20px;
    outline: none;
    box-shadow: none;
}

.contact-form form .form-control::placeholder {
    color: var(--text-color);
}

.contact-form form .btn-default {
    width: 100%;
    padding: 17px;
}

.conatct-us-form .contact-form,
.google-map-iframe {
    width: 50%;
}

.google-map-iframe iframe {
    width: 100%;
    height: 100%;
}

.contact-info-list {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin-top: 160px;
}

.contact-info-item {
    position: relative;
    width: calc(25% - 22.5px);
    border: 1px solid var(--divider-color);
    background: var(--secondary-color) url('../images/contact-info-item-bg.png') no-repeat;
    background-position: center center;
    background-size: cover;
    border-radius: 20px;
    text-align: center;
    padding: 30px;
    overflow: hidden;
}

.contact-info-item .icon-box,
.contact-info-content {
    position: relative;
    z-index: 1;
}

.contact-info-item .icon-box {
    position: relative;
    background: var(--accent-color);
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 40px;
}

.contact-info-item .icon-box::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(120deg, var(--accent-color), var(--accent-secondary-color)) no-repeat;
    border-radius: 50%;
    height: 100%;
    width: 100%;
    transform: scale(0);
    transition: all 0.4s ease-in-out;
}

.contact-info-item:hover .icon-box::before {
    transform: scale(1);
}

.contact-info-item .icon-box img {
    position: relative;
    width: 100%;
    max-width: 30px;
    z-index: 1;
}

.contact-info-content h3 {
    font-size: 20px;
    text-transform: capitalize;
    margin-bottom: 15px;
}

.contact-info-content p {
    margin-bottom: 2px;
}

.contact-info-content p:last-child {
    margin-bottom: 0;
}

.contact-info-content p a {
    color: inherit;
}

/************************************/
/***    31. 404 Error Page css    ***/
/************************************/

.error-page {
    padding: 80px 0 160px;
}

.error-page-image {
    text-align: center;
    margin-bottom: 30px;
}

.error-page-image img {
    width: 100%;
    max-width: 45%;
}

.error-page-content {
    text-align: center;
}

.error-page-content .section-title {
    margin-bottom: 15px;
}

/************************************/
/***   Clientes satisfechos css   ***/
/************************************/

/* Seccion PROPIA de K3A, NO viene de la plantilla (14-oct-2026, WEB-45). Va aqui,
   fuera de la numeracion 01-32, porque esa numeracion es de la plantilla: meter un
   numero nuevo en medio obligaria a renumerar todas las secciones siguientes. */

/* 📐 ARRIBA 40 Y NO 80 COMO LAS DEMAS SECCIONES, Y ES A PROPOSITO.
   🔑 Lo que hay que igualar es el HUECO QUE SE VE, no el padding declarado: a las otras
   tres pildoras les sigue un h2 grande que llena el bloque, y a esta no le sigue nada,
   asi que con el mismo padding el titulo se queda descolgado en mitad del vacio.
   Medido en el navegador (1400px, de la ultima tinta de la seccion anterior al borde
   superior de la pildora): «Quienes somos» 173px · «Nuestros servicios» 175px · «Como
   trabajamos» 133px · aqui, con padding 40, 126px. Antes eran 206. */
.clientes-satisfechos {
    padding: 40px 0 80px;
}

/* El titulo de esta seccion usa `.titulo-pildora`, asi que NO lleva `data-cursor`: es una
   etiqueta pequena, no un titular grande. Pero `.section-title h2` trae `cursor: none`
   —pensado para que el cursor magico de la plantilla sustituya al puntero— y sin esto el
   raton DESAPARECERIA al pasar por encima. */
.clientes-satisfechos .section-title .titulo-pildora {
    cursor: auto;
}

/* 🔑 FILA ESTATICA, NO CARRUSEL. El razonamiento completo esta en la cabecera de
   includes/secciones/clientes_satisfechos.php; en corto: con dos clientes Swiper
   bloquea el bucle en todo lo que no sea un movil en vertical, y deja los logos
   pegados a la izquierda con la fila medio vacia.
   `flex-wrap` es lo unico que hace falta para que en pantallas estrechas los logos
   se apilen en vez de encogerse. */
.clientes-fila {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 30px 70px;
}

/* Cada cliente REUTILIZA `.servicio-slide` del carrusel del hero —columna, logo
   arriba y nombre debajo, centrado, hover que aclara—. Solo cambian dos cosas: */

/* 1) Ancho fijo. «Endosalud 360» y «Psicocardio» miden distinto, asi que sin esto
      cada caja mediria lo que su nombre y los dos logos quedarian asimetricos
      respecto al centro de la seccion. */
.clientes-fila .servicio-slide {
    width: 170px;
}

/* 2) El logo, mayor que los 50px de los iconos de servicio: aqui son solo dos y son
      la PRUEBA SOCIAL, no una tira de categorias. Es el unico numero que separa
      esta fila del carrusel del hero. */
.clientes-fila .servicio-slide-img {
    width: 78px;
    height: 78px;
}

/************************************/
/***      32. Responsive css      ***/
/************************************/

@media only screen and (max-width: 1600px) {

    .our-projects .container-fluid {
        max-width: 100%;
    }
}

@media only screen and (max-width: 1440px) {

    .hero::before {
        left: 30px;
    }

    .hero::after {
        right: 30px;
    }

    .hero-content::before {
        left: -20%;
    }

    .hero-content::after {
        right: -20%;
    }

    .page-header::before {
        left: 30px;
    }

    .page-header::after {
        right: 30px;
    }
}

@media only screen and (max-width: 1024px) {

    .hero-content::before {
        left: -5%;
    }

    .hero-content::after {
        right: -5%;
    }
}

@media only screen and (max-width: 991px) {

    .navbar {
        padding: 14px 0;
    }

    /* 🔑 El logo pequeño empieza AQUÍ (991px), no en 767px, y es a propósito:
       991px es justo donde el menú se convierte en botón de hamburguesa, o sea
       donde la cabecera cambia de forma. Con el corte en 767px existía una banda
       (768-991, el iPad en vertical) con el logo GRANDE (180px) y la reserva del
       hero pensada para el pequeño -> la cabecera se comía 15px del título.
       Un solo corte en 991 para logo + navbar + hero mantiene las tres cuentas
       cuadradas y elimina esa banda intermedia. */
    #logo {
        width: 228px;                /* = 140px de alto */
    }

    .slicknav_nav li,
    .slicknav_nav ul {
        display: block;
    }

    /* 🔑 EL PANEL DEL MENU SE DESPLAZA SI NO CABE.
       Hace falta desde que la cabecera es `position: fixed` (10-oct-2026): un
       elemento fijo NO se desplaza con la pagina, asi que lo que sobresalga por
       abajo es INALCANZABLE — no hay scroll de pagina que lo rescate. Con 5
       opciones mas los 7 servicios desplegados el panel ronda los 650px, que
       cabe en un movil alto pero no en uno de 667px.

       📐 El tope: alto de pantalla menos la cabecera (logo 140 + 14 + 14 = 168)
       menos un respiro de 22px, para que se vea que el panel termina.
       🔑 `dvh` y no `vh`: en el movil `100vh` cuenta TAMBIEN la franja que tapa
       la barra de direcciones del navegador, asi que el panel se pasaria de
       largo justo en los telefonos donde el problema existe. `dvh` mide el
       viewport REAL en cada momento. La linea con `vh` queda debajo como
       respaldo para navegadores sin `dvh`: se declara primero y la siguiente
       la pisa donde se entienda.
       `overscroll-behavior: contain` evita que al llegar al final del menu el
       gesto siga arrastrando la pagina de detras. */
    .slicknav_nav {
        max-height: calc(100vh - 190px);
        max-height: calc(100dvh - 190px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .responsive-menu,
    .navbar-toggle {
        display: block;
    }

    /* 🗑️ Aquí se ocultaba `.header-btn` (el botón «Get Started» de la plantilla).
       El botón se eliminó del marcado el 7-oct-2026 — competía con el botón flotante
       del agente, que es la conversión del sitio. Esta regla ya no ocultaba nada. */

    .btn-default {
        padding: 14px 20px;
    }

    .btn-default.btn-highlighted {
        padding: 13px 20px;
    }

    .section-row {
        margin-bottom: 40px;
    }

    .section-title.section-title-center {
        max-width: 100%;
    }

    .section-title {
        margin-bottom: 30px;
    }

    .section-title h3,
    .section-title .titulo-pildora,
    .page-catagery-list .titulo-pildora {
        padding: 10px 30px;
        margin-bottom: 15px;
    }

    .section-title h3::before,
    .section-title .titulo-pildora::before,
    .page-catagery-list .titulo-pildora::before {
        left: 10px;
    }

    .section-title h3::after,
    .section-title .titulo-pildora::after,
    .page-catagery-list .titulo-pildora::after {
        right: 10px;
    }

    .section-title h1 {
        font-size: 42px;
    }

    .section-title h2 {
        font-size: 34px;
    }

    .section-title p {
        margin-top: 15px;
    }

    .section-title p span {
        font-size: 18px;
    }

    .section-title-content {
        margin-top: 15px;
    }

    .section-btn {
        text-align: left;
        margin-top: 15px;
    }

    .section-content-btn .section-btn {
        margin-top: 15px;
    }

    .hero {
        background-size: 165% auto;
        /* Cabecera = logo 140px + 14 + 14 = 168px.  Aire: 16px, igual que en escritorio. */
        padding: 184px 0 40px;
    }

    .hero::before {
        width: 80px;
        height: 77px;
        opacity: 30%;
    }

    .hero::after {
        width: 52px;
        height: 80px;
        opacity: 30%;
    }

    .hero-content::before {
        left: 5%;
        width: 51px;
        height: 55px;
        opacity: 30%;
    }

    .hero-content::after {
        right: 5%;
        width: 72px;
        height: 76px;
        opacity: 30%;
    }

    .hero-btn {
        margin-top: 30px;
    }

    .hero-company-slider {
        margin-top: 40px;
    }

    .hero-company-slider p {
        margin-bottom: 20px;
    }

    .about-us {
        padding: 40px 0 10px;
    }

    .about-us-box {
        padding: 20px;
    }

    .about-us-item {
        gap: 20px;
        margin-bottom: 30px;
    }

    .about-item-content {
        width: calc(100% - 60px);
    }

    .about-item-content h3 {
        margin-bottom: 20px;
    }

    .about-item-content h2 {
        font-size: 34px;
    }

    .our-services {
        padding: 40px 0;
    }

    .service-item {
        display: block;
        padding: 20px;
    }

    .service-item-content {
        margin-bottom: 20px;
    }

    .service-list {
        margin-top: 10px;
    }

    .service-list ul {
        gap: 15px 12px;
    }

    .service-list ul li {
        background-size: 18px auto;
        padding: 8px 15px 8px 40px;
    }

    .how-it-work {
        padding: 40px 0;
    }

    /* Misma escala que las demas secciones: aqui el padding de arriba ya era 40. */
    .clientes-satisfechos {
        padding: 40px 0;
    }

    .how-work-content {
        margin-bottom: 30px;
    }

    .how-work-item {
        padding: 30px;
        margin-bottom: 30px;
    }

    .how-work-header {
        margin-right: 30px;
        padding-right: 30px;
    }

    .how-work-item-content {
        width: calc(100% - 130px);
    }

    .how-work-video-content {
        position: initial;
        top: 0px;
        margin-left: 0;
    }

    .how-work-video video,
    .how-work-video img {
        height: 500px;
    }

    .our-facts {
        padding: 40px 0;
    }

    .facts-item {
        padding: 30px 25px;
    }

    /* 🔄 .facts-item-title SALE de este selector (21-oct-2026): subia el hueco a 40px,
       por encima de los 20px de escritorio, justo donde ahora empieza la imagen. El
       contador se queda porque es regla de plantilla; su marcado ya no existe. */
    .facts-item-counter {
        margin-bottom: 40px;
    }

    .facts-item-counter h2 {
        font-size: 36px;
    }

    .facts-item-content {
        padding: 15px;
    }

    .our-facts .section-footer-text {
        margin-top: 10px;
    }

    .our-projects {
        padding: 40px 0 10px;
    }

    .project-image img {
        aspect-ratio: 1 / 1.1;
    }

    .project-content {
        right: 20px;
        bottom: 20px;
        left: 20px;
    }

    .project-btn {
        right: 20px;
    }

    .project-item:hover .project-btn {
        top: 20px;
    }

    .project-btn a {
        width: 50px;
        height: 50px;
    }

    .project-btn a img {
        max-width: 16px;
    }

    .real-impacts {
        padding: 40px 0 10px;
    }

    .real-impact-image {
        padding: 30px;
        margin-bottom: 20px;
    }

    .real-impact-image h3 {
        margin-bottom: 30px;
        padding-bottom: 30px;
    }

    .impact-chatbot-list {
        gap: 10px;
    }

    .real-impact-image .chatbot-item img {
        max-width: 24px;
    }

    .cta-box {
        padding: 40px 0;
    }

    .cta-box-box {
        padding: 50px 20px;
    }

    .cta-box-box::before {
        left: 30px;
        top: 30px;
        width: 80px;
        height: 77px;
        opacity: 30%;
    }

    .cta-box-box::after {
        right: 30px;
        width: 52px;
        height: 80px;
        opacity: 30%;
    }

    .what-we-do {
        padding: 40px 0;
    }

    .what-we-box {
        padding: 40px 35px;
        margin-right: 0;
        margin-bottom: 30px;
    }

    .what-we-box h3 {
        margin-bottom: 30px;
    }

    .what-we-img-list ul li {
        padding: 8px 15px 8px 40px;
    }

    .what-we-do-content {
        margin-left: 0;
    }

    .what-we-do-body {
        margin-bottom: 30px;
    }

    .what-we-do-body ul {
        gap: 20px;
    }

    .what-we-do-body ul li {
        padding: 8px 15px 8px 40px;
    }

    .what-we-do-body ul li::before {
        font-size: 16px;
    }

    .our-testimonials {
        padding: 40px 0;
    }

    .testimonials-box {
        padding: 50px 20px;
    }

    .testimonials-content,
    .testimonial-slider {
        width: 100%;
    }

    .testimonials-content {
        margin-bottom: 30px;
    }

    .testimonials-counter-item h2 {
        font-size: 36px;
    }

    .testimonial-header {
        margin-bottom: 20px;
        padding-bottom: 20px;
    }

    .testimonial-content p {
        font-size: 16px;
    }

    .our-faqs {
        padding: 40px 0;
    }

    .faqs-content {
        padding-left: 0;
        position: static;
        margin: 0 0 30px;
    }

    .faq-accordion .accordion-item {
        margin-bottom: 20px;
    }

    .faq-accordion .accordion-header .accordion-button {
        padding: 15px 45px 15px 15px;
    }

    .faq-accordion .accordion-item .accordion-button::after,
    .faq-accordion .accordion-item .accordion-button.collapsed::after {
        font-size: 20px;
        right: 15px;
    }

    .faq-accordion .accordion-item .accordion-body {
        padding: 15px;
    }

    .our-blog {
        padding: 50px 0 20px;
    }

    .post-item {
        padding: 30px;
    }

    .post-item-content {
        margin-bottom: 20px;
        padding-bottom: 20px;
    }

    .main-footer {
        padding: 50px 0 0;
    }

    .main-footer .section-row {
        padding-bottom: 40px;
    }

    .footer-contact-box {
        gap: 20px;
    }

    .footer-contact-box .footer-links {
        width: calc(50% - 10px);
    }

    .footer-privacy-policy {
        margin: 30px 0 0;
    }

    .footer-copyright-text {
        margin-top: 40px;
        padding: 30px 0;
    }

    .page-header {
        /* Eran 170px: por debajo de los 168px de cabecera + aire. No se veía porque
           aún no hay páginas internas, pero habría nacido con el título tapado. */
        padding: 184px 0 40px;
    }

    .page-header::before {
        width: 80px;
        height: 77px;
        opacity: 30%;
    }

    .page-header::after {
        width: 52px;
        height: 80px;
        opacity: 30%;
    }

    .page-header-box h1 {
        font-size: 42px;
        margin-bottom: 10px;
    }

    .our-approach {
        padding: 40px 0;
    }

    .approach-item-list {
        margin-bottom: 30px;
    }

    .approach-item:after {
        left: 30px;
        bottom: -60px;
    }

    .approach-item .icon-box {
        width: 60px;
        height: 60px;
        margin-right: 20px;
    }

    .approach-item .icon-box img {
        max-width: 30px;
    }

    /* 🔄 El mismo escalon para la mascara (21-oct-2026). */
    .approach-item .icon-box .icono-mascara {
        --icono-tam: 30px;
    }

    .approach-item-content {
        width: calc(100% - 80px);
    }

    .approach-image {
        margin-left: 0;
    }

    .approach-counter-item h2 {
        font-size: 36px;
    }

    .our-solution {
        padding: 40px 0;
    }

    .our-solution-content {
        position: initial;
        margin: 0 0 30px 0;
    }

    .solution-item .icon-box {
        margin-bottom: 30px;
    }

    .our-team {
        padding: 40px 0 10px;
    }

    .team-image img {
        aspect-ratio: 1 / 1.2;
    }

    .team-body {
        padding: 15px;
    }

    .our-faqs.about-our-faqs {
        padding: 40px 0 80px;
    }

    .page-services {
        padding: 40px 0 10px;
    }

    .page-service-single {
        padding: 40px 0 80px;
    }

    .page-single-sidebar {
        position: initial;
        margin: 0 0 30px 0;
    }

    .page-catagery-list {
        margin-bottom: 30px;
    }

    .page-catagery-list h3,
    .page-catagery-list ul {
        padding: 20px;
    }

    .page-catagery-list ul li {
        padding-bottom: 15px;
        margin-bottom: 15px;
    }

    .sidebar-cta-box {
        padding: 20px;
    }

    .sidebar-cta-logo {
        width: 60px;
        height: 60px;
        margin-bottom: 20px;
    }

    .sidebar-cta-logo img {
        max-width: 34px;
    }

    /* FASE 2 · el logotipo pasa a mascara; mismo tamaño que el <img> de arriba. */
    .page-service-single .sidebar-cta-logo .icono-mascara {
        --icono-tam: 34px;
    }

    .sidebar-cta-content {
        margin-bottom: 30px;
    }

    .sidebar-cta-content h3 .sidebar-cta-contact ul li {
        margin-bottom: 15px;
    }

    .page-single-image {
        margin-bottom: 30px;
    }

    .service-entry {
        margin-bottom: 40px;
    }

    /* FASE 2 · las cuatro tarjetas estrechan su relleno igual que lo hace la de «¿Qué
       ofrecemos?» en este mismo corte (`.page-catagery-list h3, ul` pasan de 30 a 20px). */
    .page-service-single .service-intro-box,
    .page-service-single .service-innovation-box {
        padding: 20px;
    }

    .service-entry p {
        margin-bottom: 15px;
    }

    .service-entry h2 {
        font-size: 34px;
        margin-bottom: 15px;
    }

    .service-entry ul {
        gap: 20px;
    }

    .service-entry ul li {
        width: calc(33.33% - 13.33px);
        padding: 8px 15px 8px 40px;
        font-size: 14px;
    }

    .service-entry ul li::before {
        font-size: 16px;
        top: 9px;
    }

    .service-solution-box,
    .service-impact-box,
    .service-innovation-box,
    .building-smarter-box {
        margin-top: 40px;
    }

    .service-solution-steps {
        margin-top: 30px;
    }

    .service-impact-list {
        padding: 30px;
        margin-top: 30px;
    }

    .service-impact-item .icon-box {
        width: 60px;
        height: 60px;
        margin-bottom: 30px;
    }

    .service-impact-item .icon-box img {
        max-width: 30px;
    }

    .service-impact-item-content h3 {
        margin-bottom: 10px;
    }

    .service-innovation-list {
        margin-top: 30px;
    }

    .building-steps-image {
        margin-top: 30px;
    }

    .building-step-item {
        margin-bottom: 20px;
        padding-bottom: 20px;
    }

    .building-step-no {
        margin-right: 20px;
    }

    .building-step-no h2 {
        margin-bottom: 0;
    }

    .page-blog {
        padding: 40px 0 80px;
    }

    .page-pagination {
        margin-top: 10px;
    }

    .page-single-post {
        padding: 40px 0 80px;
    }

    .post-image {
        margin-bottom: 20px;
    }

    .post-image figure,
    .post-image img {
        border-radius: 20px;
    }

    .post-entry h1,
    .post-entry h2,
    .post-entry h3,
    .post-entry h4,
    .post-entry h5,
    .post-entry h6 {
        margin: 0 0 0.45em;
    }

    .post-entry h2 {
        font-size: 34px;
    }

    .post-entry p {
        margin-bottom: 15px;
    }

    .post-entry ol li,
    .post-entry ul li {
        margin-bottom: 10px;
    }

    .post-entry blockquote {
        background-position: 20px 20px;
        background-size: 40px;
        padding: 20px 20px 20px 70px;
        margin-bottom: 20px;
    }

    .post-entry blockquote p {
        font-size: 18px;
    }

    .post-tags {
        margin-bottom: 20px;
    }

    .post-tags .tag-links a {
        padding: 12px 15px;
    }

    .post-social-sharing ul {
        text-align: left;
    }

    .page-projects {
        padding: 40px 0 50px;
    }

    .page-project-single {
        padding: 40px 0 80px;
    }

    .project-category {
        margin-bottom: 30px;
        padding: 20px;
    }

    .project-category-list ul li {
        margin-bottom: 15px;
        padding-bottom: 15px;
    }

    .project-entry {
        margin-bottom: 40px;
    }

    .project-entry h2 {
        font-size: 34px;
        margin-bottom: 15px;
    }

    .project-entry p {
        margin-bottom: 15px;
    }

    .project-entry ul li {
        padding-left: 25px;
        margin-bottom: 10px;
    }

    .project-entry ul li::before {
        font-size: 16px;
    }

    .project-challenge-box,
    .project-solution-box {
        margin-top: 40px;
    }

    .project-challenge-list {
        margin-top: 30px;
        padding: 20px;
    }

    .project-solution-counters {
        gap: 30px 40px;
        margin-top: 30px;
    }

    .solution-counter-item {
        width: calc(25% - 30px);
    }

    .solution-counter-item h2 {
        margin-bottom: 5px;
    }

    .page-team {
        padding: 40px 0 50px;
    }

    .page-team-single {
        padding: 40px 0 80px;
    }

    .team-single-image {
        margin-bottom: 30px;
    }

    .team-single-image img {
        aspect-ratio: 1 / 0.8;
        object-position: top center;
    }

    .team-member-info,
    .team-expertise-box,
    .team-guideline-box {
        margin-bottom: 40px;
    }

    .team-expertise-list {
        gap: 30px;
    }

    .team-guideline-list ul {
        gap: 20px;
    }

    .team-guideline-list ul li {
        width: calc(50% - 10px);
        font-size: 14px;
        padding: 8px 15px 8px 40px;
    }

    .team-guideline-list ul li::before {
        font-size: 16px;
    }

    .page-testimonials {
        padding: 40px 0 10px;
    }

    .page-testimonials .testimonial-item {
        padding: 20px;
    }

    .page-gallery {
        padding: 40px 0 50px;
    }

    .page-video-gallery {
        padding: 40px 0 50px;
    }

    .page-faqs {
        padding: 40px 0 80px;
    }

    .page-faqs .page-faq-accordion {
        margin-bottom: 40px;
    }

    .page-contact-us {
        padding: 40px 0 80px;
    }

    .conatct-us-form {
        border-radius: 26px;
    }

    .conatct-us-form .contact-form,
    .google-map-iframe {
        width: 100%;
    }

    .contact-form {
        padding: 30px;
    }

    .contact-form form .form-control {
        padding: 12px 15px;
        border-radius: 14px;
    }

    .google-map-iframe iframe {
        height: 450px;
    }

    .contact-info-list {
        margin-top: 80px;
    }

    .contact-info-item {
        width: calc(50% - 15px);
        padding: 20px;
    }

    .contact-info-item .icon-box {
        margin: 0 auto 30px;
    }

    .error-page {
        padding: 40px 0 80px;
    }

    .error-page-image {
        margin-bottom: 20px;
    }

    .error-page-image img {
        max-width: 80%;
    }
}

@media only screen and (max-width: 767px) {

    /* 🔢 Cabecera en móvil = 140 (alto del logo) + 20 + 20 de padding = 180px.
       El hueco del hero de la media query de 991px está a 230px → 50px de aire.
       Si se cambia este tamaño, hay que recalcular aquel padding. */
    .section-row {
        margin-bottom: 30px;
    }

    .section-title h3,
    .section-title .titulo-pildora,
    .page-catagery-list .titulo-pildora {
        font-size: 12px;
    }

    .section-title h1 {
        font-size: 29px;
    }

    /* 🔑 En el movil se deja UN solo boton. Dos botones en 390px de ancho se
       reparten la atencion y ninguno gana; el que queda es «Agentes de IA»,
       que es el servicio propio. Contactar sigue a un toque: esta en el menu
       y en el boton flotante, asi que no se pierde ninguna via.
       Se oculta por CLASE y no por posicion (`a:last-child`): si algun dia se
       anade un tercer boton, una regla posicional escondería el equivocado
       sin avisar.
       El que queda sale centrado solo — `.hero-btn` ya trae
       `justify-content: center`, no hace falta nada mas. */
    .hero-btn-secundario {
        display: none;
    }

    .section-title h2 {
        font-size: 22px;
    }

    .section-title p {
        margin-top: 10px;
    }

    .section-title p span {
        font-size: 16px;
    }

    .section-title-content {
        margin-top: 10px;
    }

    .hero-company-slider p {
        font-size: 18px;
    }

    .about-item-content h2 {
        font-size: 22px;
    }

    .service-item-content h3 {
        font-size: 18px;
        margin-bottom: 10px;
    }

    .service-list ul {
        gap: 10px;
    }

    .service-list ul li {
        background-position: left 10px top 10px;
        background-size: 16px auto;
        padding: 8px 10px 8px 30px;
    }

    .how-work-item {
        display: block;
        padding: 20px;
        margin-bottom: 20px;
    }

    .how-work-header {
        border-right: none;
        border-bottom: 1px solid var(--divider-color);
        margin: 0 0 20px 0;
        padding: 0 0 20px 0;
    }

    .how-work-step-no {
        text-align: left;
        margin-top: 10px;
    }

    .how-work-item-content {
        width: 100%;
    }

    .how-work-item-content h3 {
        font-size: 18px;
        margin-bottom: 10px;
    }

    .how-work-video video,
    .how-work-video img {
        height: 350px;
    }

    .how-work-video-content .section-footer-text {
        margin: 20px 0px 0 0px;
    }

    .facts-item {
        padding: 20px;
    }

    /* 🔄 .facts-item-title SALE de este selector (21-oct-2026): subia el hueco a 30px,
       por encima de los 20px de escritorio, justo donde ahora empieza la imagen. El
       contador se queda porque es regla de plantilla; su marcado ya no existe. */
    .facts-item-counter {
        margin-bottom: 30px;
    }

    .facts-item-title h3 {
        font-size: 18px;
    }

    .facts-item-counter h2 {
        font-size: 26px;
    }

    .facts-item-content {
        border-radius: 12px;
        padding: 10px;
    }

    .section-footer-text span {
        margin-right: 5px;
    }

    .project-content h3 {
        font-size: 18px;
        margin-bottom: 5px;
    }

    .real-impact-image {
        padding: 20px;
        margin-bottom: 15px;
    }

    .real-impact-image h3 {
        font-size: 18px;
        margin-bottom: 20px;
        padding-bottom: 20px;
    }

    .real-impact-content.highlighted-content {
        border-radius: 12px;
        padding: 15px;
    }

    .cta-box-box {
        padding: 50px 15px;
    }

    .what-we-box {
        padding: 25px 15px;
    }

    .what-we-box h3 {
        font-size: 18px;
        margin-bottom: 30px;
    }

    .what-we-img-list ul {
        gap: 15px;
    }

    .what-we-img-list ul li {
        font-size: 14px;
        background-position: left 10px center;
        background-size: 18px auto;
        padding: 8px 15px 8px 35px;
    }

    .what-we-img-list ul li img {
        max-width: 16px;
    }

    .what-we-do-body ul {
        gap: 15px;
    }

    .what-we-do-body ul li {
        font-size: 14px;
        padding: 8px 15px 8px 30px;
    }

    .what-we-do-body ul li::before {
        font-size: 14px;
        left: 10px;
    }

    .testimonials-body {
        gap: 20px;
    }

    .testimonials-counter-item h2 {
        font-size: 26px;
    }

    .testimonials-counter-item p {
        font-size: 14px;
    }

    .testimonial-slider {
        margin: 10px 0;
    }

    .testimonial-slider::before {
        transform: rotate(-6deg);
    }

    .testimonial-slider .swiper {
        padding: 20px 20px 50px 20px;
    }

    .author-image {
        margin-right: 10px;
    }

    .author-content h3 {
        font-size: 18px;
        margin-bottom: 3px;
    }

    .author-content p {
        font-size: 14px;
    }

    .testimonial-quotes-img img {
        max-width: 25px;
    }

    .testimonial-slider .testimonial-pagination {
        bottom: 20px;
        left: 20px;
    }

    .faq-accordion .accordion-header .accordion-button {
        font-size: 16px;
        padding: 12px 40px 12px 12px;
    }

    .faq-accordion .accordion-item .accordion-button::after,
    .faq-accordion .accordion-item .accordion-button.collapsed::after {
        font-size: 18px;
        right: 12px;
    }

    .faq-accordion .accordion-item .accordion-body {
        padding: 12px;
    }

    .post-item {
        padding: 20px;
    }

    .post-meta {
        margin-bottom: 15px;
    }

    .post-meta ul li i {
        font-size: 16px;
    }

    .post-item-content h2 {
        font-size: 18px;
        margin-bottom: 10px;
    }

    .main-footer .section-row {
        padding-bottom: 30px;
    }

    .about-footer {
        margin-bottom: 30px;
    }

    .footer-contact-box .footer-links {
        width: 100%;
    }

    .footer-links h3 {
        font-size: 18px;
        margin-bottom: 15px;
    }

    .footer-newsletter-form .form-group .newsletter-btn {
        width: 35%;
    }

    .footer-copyright-text {
        margin-top: 30px;
        padding: 15px 0;
    }

    .page-header-box h1 {
        font-size: 26px;
    }

    .approach-item {
        margin-bottom: 30px;
    }

    .approach-item:after {
        left: 25px;
        bottom: -50px;
    }

    .approach-item .icon-box {
        width: 50px;
        height: 50px;
        margin-right: 15px;
    }

    .approach-item .icon-box img {
        max-width: 26px;
    }

    /* 🔄 El mismo escalon para la mascara (21-oct-2026). */
    .approach-item .icon-box .icono-mascara {
        --icono-tam: 26px;
    }

    .approach-item-content {
        width: calc(100% - 65px);
    }

    .approach-item-content h3 {
        font-size: 18px;
    }

    .approach-image img {
        aspect-ratio: 1 / 0.8;
    }

    .approach-counter-box {
        left: 15px;
        bottom: 15px;
        border-radius: 14px;
        padding: 15px;
    }

    .approach-counter-item h2 {
        font-size: 26px;
    }

    .approach-counter-item p {
        font-size: 14px;
    }

    .solution-item-list {
        gap: 20px;
    }

    .solution-item:nth-child(4n - 1) {
        background: url('../images/solution-item-bg.svg') no-repeat;
        background-size: cover;
        background-position: center center;
        border: 1px solid var(--divider-color);
        border-radius: 20px;
    }

    .solution-item:nth-child(4n - 4) {
        background: transparent;
        border: none;
        border-radius: 0;
    }

    .solution-item {
        width: 100%;
    }

    .page-catagery-list h3 {
        font-size: 18px;
    }

    .sidebar-cta-content h3 {
        font-size: 18px;
        margin-bottom: 10px;
    }

    /* FASE 2 · los puntos de «¿Qué ofrecemos?» bajan CON el h3 de aqui arriba, que es de
       quien copian la letra un escalon mas abajo. Va pegado a esa regla a proposito:
       separarlos es garantizar que el dia que una cambie, la otra se quede atras. */
    .page-service-single .page-catagery-list ul li {
        font-size: 16px;
    }

    /* FASE 2 · y los rotulos «Ideal si» etc. un escalon mas abajo en movil. La plantilla
       ya bajaba `.service-entry h2` a 22px aqui, pero nuestra regla de 22px la gana por
       especificidad en TODOS los anchos, asi que en movil se quedaban igual que en
       escritorio. 20px es el escalon de subtitulo del sitio, con el h1 de la pagina en
       29px por encima. */
    .page-service-single .service-innovation-box h2 {
        font-size: 20px;
    }

    .sidebar-cta-content {
        margin-bottom: 20px;
    }

    .sidebar-cta-contact ul li {
        margin-bottom: 15px;
    }

    .sidebar-cta-contact ul li a {
        padding: 6px 14px;
    }

    .sidebar-cta-contact ul li a img {
        max-width: 16px;
    }

    /* FASE 2 · el icono del agente, un escalon por debajo del de escritorio (28px) y no
       los 16px del <img> de la plantilla: a ese tamaño el logo de contorno se empasta. */
    .page-service-single .sidebar-cta-contact .icono-mascara {
        --icono-tam: 24px;
    }

    .page-single-image {
        margin-bottom: 20px;
    }

    .service-entry h2 {
        font-size: 22px;
    }

    .service-entry ul li {
        width: auto;
    }

    .service-impact-list {
        padding: 20px;
    }

    .service-impact-item {
        width: 100%;
    }

    .service-impact-item .icon-box {
        width: 50px;
        height: 50px;
        margin-bottom: 20px;
    }

    .service-impact-item .icon-box img {
        max-width: 26px;
    }

    .service-impact-item-content h3 {
        font-size: 18px;
    }

    .building-smarter-steps,
    .building-smarter-image {
        width: 100%;
    }

    .building-step-item {
        margin-bottom: 15px;
        padding-bottom: 15px;
    }

    .building-step-content h3 {
        font-size: 18px;
        margin-bottom: 10px;
    }

    .building-smarter-image figure {
        height: auto;
    }

    .post-single-meta ol li {
        font-size: 16px;
    }

    .post-single-meta ol li i {
        font-size: 16px;
    }

    .post-image img {
        aspect-ratio: 1 / 0.7;
    }

    .post-entry blockquote {
        background-position: 15px 15px;
        padding: 60px 15px 15px 15px;
    }

    .post-entry blockquote p {
        font-size: 18px;
    }

    .post-entry h2 {
        font-size: 22px;
    }

    .tag-links {
        font-size: 18px;
    }

    .project-category-list ul li,
    .category-social-link h3 {
        font-size: 18px;
    }


    .project-entry h2 {
        font-size: 22px;
    }

    .project-challenge-list {
        padding: 12px;
        border-radius: 12px;
    }

    .solution-counter-item {
        width: calc(50% - 20px);
    }

    .solution-counter-item h2 {
        font-size: 30px;
    }

    .team-single-image img {
        aspect-ratio: 1 / 1.15;
        object-position: center center;
    }

    .member-info-box,
    .member-contact-list {
        width: 100%;
    }

    .member-info-box::before {
        width: 100%;
        height: 1px;
        top: auto;
        right: auto;
        left: 0;
        bottom: -20px;
    }

    .member-contact-item {
        margin-bottom: 20px;
    }

    .member-contact-item h3 {
        font-size: 18px;
        margin-bottom: 5px;
    }

    .skills-progress-bar {
        width: 100%;
    }

    .skills-progress-bar .skill-data {
        margin-bottom: 10px;
    }

    .skills-progress-bar .skill-data .skill-title,
    .skills-progress-bar .skill-data .skill-no {
        font-size: 18px;
    }

    .team-guideline-list ul li {
        width: 100%;
        padding: 8px 10px 8px 30px;
    }

    .team-guideline-list ul li::before {
        font-size: 14px;
        left: 10px;
        top: 9px;
    }

    .contact-form {
        padding: 30px 20px;
    }

    .google-map-iframe iframe {
        height: 350px;
    }

    .contact-info-item {
        width: 100%;
    }

    .contact-info-content h3 {
        font-size: 18px;
        margin-bottom: 10px;
    }
}

/* 🗑️ Aquí había `@media (max-width: 372px) { #logo { width: 1vw !important } }`.
   1vw = 1% del ancho de pantalla -> en un móvil de 360px eran 3,6 PÍXELES: el logo no
   desaparecía, se dibujaba invisible. Era un parche sobre el síntoma; la causa era que
   el logo no tenía tamaño responsive. Resuelto con la regla #logo de arriba. */

/* ─────────────────────────────────────────────────────────────────────────────
   MENÚ CENTRADO EN LA PÁGINA — RETIRADO el 15-oct-2026

   Aqui vivia una consulta de medios a partir de 1200 px que sacaba el menu del
   flujo —posicionandolo en absoluto al 50 % con un desplazamiento del −50 %—
   para centrarlo en la pagina.

   🔴 POR QUE SE FUE, con los numeros MEDIDOS en el navegador:
       el logo ocupa 293 px y el menu 688 → centrarlo de verdad necesita
       (ancho − 688) / 2 ≥ 308, es decir ancho ≥ 1304 px.
       Con el corte en 1200, entre 1200 y 1303 el menu se colocaba ENCIMA del
       logo. Y al estar fuera del flujo, un choque no empuja: se superpone.

   🔑 LO QUE LO DESTAPO, y es la leccion: a 1199 px el menu CABIA de sobra —
   empezaba en 348 y le sobraban 156 px a la derecha— y a 1200 se solapaba.
   No faltaba espacio: sobraba. Lo que fallaba era la ORDEN de centrarse en un
   centro que ya estaba ocupado. Las «soluciones» de hacer hueco —encoger el logo,
   apretar el padding— atacaban el sintoma.

   ⚠️ Y la cuenta que justificaba ese corte estaba MAL: estimaba el menu en ~450 px
   cuando mide 688, y daba «52 px de aire» donde lo medido eran −1 px. El fallo
   existia desde el 7-oct-2026 con 5 items; el selector de idioma (WEB-43) solo
   lo hizo visible, al llevar el solape de 1 px a 28.

   👉 Ahora el menu va alineado a la izquierda en TODOS los anchos, que es lo que
   ya hacia por debajo de 1200 y funcionaba. En el flujo, un choque EMPUJA.
   ───────────────────────────────────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────────────────────────────
   VÍDEO DE PRESENTACIÓN DEL HERO (7-oct-2026)
   Va en la columna derecha en escritorio y debajo del texto en móvil — el orden
   lo da el DOM, no hacen falta clases `order-`.
   ───────────────────────────────────────────────────────────────────────────── */

.hero-presentacion {
    position: relative;
    z-index: 2;
    /* 🖼️ MARCO translúcido, mismo patrón que `#video2Div` en endosalud360:
       el borde no es un `border` — es el PADDING del div padre con fondo blanco
       semitransparente. Así se ve lo que hay detrás (el vídeo de fondo) tamizado,
       y el marco acompaña al vídeo al escalar sin que haya que recalcular nada.
       El `box-shadow` lo despega del fondo y evita que el bloque flote plano.
       📐 MÓVIL-PRIMERO, igual que el `margin` de más abajo: aquí va el valor de móvil
       (10px) y el bloque de `min-width: 992px` lo sube a 16px. En móvil el vídeo ocupa
       todo el ancho, así que cada píxel de marco se lo quita al vídeo: 16px por lado
       eran ~10% del ancho de un teléfono. */
    padding: 10px;
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.16);
    box-shadow: 12px 12px 24px rgba(0, 0, 0, 0.35);
}

.hero-presentacion video {
    width: 100%;
    height: auto;
    display: block;
    /* 🔑 Radio IGUAL al del marco (8 y 8), por decisión visual, y el MISMO en los dos
       breakpoints aunque el padding cambie (10px móvil / 16px escritorio).
       La regla estricta de radios anidados pediría `exterior − padding` → 8 − 10 = 0,
       pero desviarse HACIA ARRIBA es el lado benigno: solo sobra un poco de marco en
       las esquinas y no se nota. ⚠️ Lo que NO hay que hacer nunca es lo contrario
       —interior MAYOR que el hueco disponible— porque entonces la esquina del vídeo
       se come el marco y el borde blanco se ve recortado en los cuatro vértices. */
    border-radius: 8px;
    background: var(--accent-secondary-soft);
    /* Fondo por si el póster tardara: evita el rectángulo transparente. */
}

/* ── Espaciado vertical del hero ──────────────────────────────────────────────
   🔴 Los huecos venían de tres reglas de la plantilla que se SUMAN:
       .section-title  { margin-bottom: 40px }   ← en el wrapper del h1 Y en el del p
       .section-title p{ margin-top: 20px }      ← pensado para cuando el p va DEBAJO
                                                   de un h1 en el mismo wrapper; aquí
                                                   están separados, así que sobra
       .hero-btn       { margin-top: 40px }
   ⇒ entre el párrafo y los botones salían 40 + 40 = 80px.
   Se neutralizan SOLO dentro del hero (`.hero-content--video`) para no tocar el
   resto de la página, que usa `.section-title` en todas sus secciones. */

.hero-content--video .section-title {
    margin-bottom: 0;
}

.hero-content--video .hero-zona-texto p {
    margin-top: 0;
    /* 📐 18px. `.section-title p` no declara `font-size` en ningun breakpoint
       —solo margenes—, asi que el parrafo heredaba los 16px del `body`: el
       mismo cuerpo que un parrafo cualquiera del pie. Este es el parrafo de
       ENTRADA del hero y merece algo mas.
       🔑 Va con el selector del HERO, no tocando `.section-title p`: esa clase
       la usan todas las secciones de la pagina y subirla ahi cambiaria el
       cuerpo de texto del sitio entero.
       ℹ️ El interlineado ya esta bien: `p { line-height: 1.6em }` (linea 145)
       se impone al 1.1em del body, asi que no hay que tocarlo. */
    font-size: 18px;
}

.hero-content--video .hero-zona-titulo {
    margin-bottom: 20px;
}

.hero-content--video .hero-btn {
    margin-top: 26px;
}

/* MÓVIL (base): sin grid. Manda el orden del DOM → h1 · vídeo · párrafo+botones. */
.hero-presentacion {
    margin: 4px 0 24px;
}

/* ESCRITORIO: rejilla de dos columnas. El vídeo cruza las filas de la izquierda,
   así queda a la derecha y a la altura del título y del texto a la vez.

   🔑 DESDE 1200px, NO desde 992. Andrés detectó desbordamiento del hero en
   tablets a 992px. A esa anchura el contenedor útil son 962px y las pistas
   (428 + 70 + 464) cuadran exactas, así que las dos columnas caben MATEMÁTICAMENTE
   pero sin holgura: cualquier elemento con un ancho mínimo propio —un botón que
   no parte, una palabra larga del titular— empuja hacia fuera.
   1200px es además el mismo corte donde el menú pasa a centrarse en la página
   (bloque del final del fichero), así que la cabecera y el hero cambian de forma
   a la vez en lugar de en dos puntos distintos.
   Entre 992 y 1199: hero apilado (h1 · vídeo · texto) con la barra de navegación
   ya en modo escritorio. Es una combinación normal, no un estado intermedio roto. */
@media only screen and (min-width: 1200px) {

    .hero-content--video {
        display: grid;
        /* 🔴 `fr`, NO porcentajes. Aquí había `45% 55%` con `column-gap: 50px`:
           los porcentajes de Grid se calculan sobre el ancho ENTERO del contenedor
           y el hueco se SUMA después -> 100% + 50px = la rejilla se desbordaba 50px
           por la derecha, y el vídeo salía 50px más ancho de lo previsto y colgando
           fuera del contenedor. (Era parte de por qué se veía tan grande.)
           `fr` reparte lo que SOBRA después de restar el hueco, así que nunca desborda
           y se puede cambiar el `column-gap` sin recalcular las columnas. */
        grid-template-columns: 48fr 52fr;
        /* 🔴 LAS DOS FILAS VACÍAS NO SOBRAN: son las que arreglan el hueco.
           El vídeo CRUZA las filas de la izquierda y es más alto que el texto (≈400px
           frente a ≈310px). Con solo dos filas, CSS Grid reparte esos ~90px sobrantes
           ENTRE ELLAS y aparece un hueco gigante entre el h1 y el párrafo — un espacio
           que no viene de ningún `margin` y que por eso no se corrige tocándolos.
           Con `1fr` arriba y abajo, el sobrante se va a las filas vacías, el bloque de
           texto queda compacto y además centrado verticalmente contra el vídeo. */
        grid-template-areas:
            "hueco-sup video"
            "titulo    video"
            "texto     video"
            "hueco-inf video";
        grid-template-rows: 1fr min-content min-content 1fr;
        column-gap: 70px;
        /* 🔴 `.hero-content` trae `max-width: 840px`, pensado para UNA columna centrada.
           Con dos columnas ahogaría el vídeo, que es justo lo que se quiere agrandar. */
        max-width: 1240px;
    }

    .hero-zona-titulo {
        grid-area: titulo;
    }

    .hero-zona-texto {
        grid-area: texto;
    }

    .hero-presentacion {
        grid-area: video;
        margin: 0;
        padding: 16px;              /* el marco que se aprobó para escritorio */
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   🧪 PRUEBA — rojo de marca en el span del h1 del hero (7-oct-2026)

   A petición de Andrés: evaluar #B94747 (--error-color) como resalte del titular.

   🔑 Las tres propiedades son necesarias; ninguna es de adorno:
   · `background-image: none` → borra el degradado heredado de la línea 441.
   · `-webkit-text-fill-color` → la regla base lo pone en `transparent` para que
     el degradado se vea A TRAVÉS de la letra. Mientras siga `transparent`,
     `color` NO se ve: text-fill-color le gana. Hay que devolverlo a un color.
   · `color` → respaldo para motores sin `-webkit-text-fill-color`.
   ⚠️ NUNCA el atajo `background` aquí: reinicia `background-clip: text` y pinta
      la CAJA en vez de la letra. (Ya se tropezó con eso en esta misma sesión.)

   ⚠️ Solo el HERO, a propósito: los h2 de las secciones de abajo conservan el
      degradado azul, así se comparan los dos en la MISMA pantalla.
   ⚠️ Apaga el brillo del :hover del h1 (no hay fondo que deslizar). Es efecto
      del color plano, no un olvido.
   📐 3,9:1 sobre --bg-color. Pasa para texto GRANDE (mínimo 3:1), no para
      párrafos. El resalte azul actual da 8,3:1.
   🚩 DEUDA SEMÁNTICA: --error-color es el token de los errores de formulario.
      Si este rojo se adopta como color de marca, necesita su PROPIO token; si no,
      el mismo valor significará «resalte» y «algo ha fallado» a la vez.

   👉 DESCARTAR: borrar este bloque entero (es lo último del fichero).
   ───────────────────────────────────────────────────────────────────────────── */

.hero .section-title h1 span {
    background-image: none;
    -webkit-text-fill-color: var(--error-color);
    color: var(--error-color);
}

/* ─────────────────────────────────────────────────────────────────────────────
   BOTON FLOTANTE DEL AGENTE — estilo WhatsApp (7-oct-2026)

   Circulo fijo abajo a la derecha, presente en todas las paginas (vive en
   includes/footer.php). Es la conversion del sitio.

   🔑 El fondo es EL MISMO que el del boton «Contactar» (`.btn-default`): el
   degradado de marca con `background-size: 200% auto`, que es lo que permite
   el brillo al pasar el raton desplazando `background-position`. Se repite
   aqui en vez de reutilizar la clase porque `.btn-default` trae `padding`,
   `display: inline-block` y `border-radius: 100px` pensados para un boton de
   texto, no para un circulo.
   ⚠️ OJO: `.btn-default.btn-highlighted` (el de «Agentes de IA») NO lleva
   degradado — lo sustituye por `background: var(--bg-color)` y un borde. El
   fondo que pidio Andres es el del boton SIN resaltar.
   📐 z-index 900: el maximo del proyecto es 100, asi que queda holgado por
   encima de todo y deja margen para futuras capas.
   ───────────────────────────────────────────────────────────────────────────── */

.agente-flotante {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: transparent;
}

.agente-flotante-icono {
    /* Icono: `whatsapp.svg`, aportado por Andres (version de CONTORNO del
       logo: anillo + auricular + pico). Es distinto del del carrusel, que es
       de trazo fino para ir a juego con sus seis hermanos.
       📐 50px en escritorio, 48px en movil. Son valores altos respecto al
       contenedor a proposito: el boton tiene `background: transparent`, asi
       que no hay circulo que llenar — lo que se ve es el icono, y el
       contenedor solo define la zona tactil. */
    flex: none;
    width: 50px;
    height: 50px;
    mask: var(--icono) center / contain no-repeat;
    -webkit-mask: var(--icono) center / contain no-repeat;
}

/* Mismo guardia que los iconos del carrusel: sin mascara, un elemento vacio
   con `background-color` se dibujaria como un CUADRADO dentro del
   circulo. Asi, un navegador sin soporte no muestra icono en vez de eso. */
@supports (mask-image: url("")) or (-webkit-mask-image: url("")) {
    .agente-flotante-icono {
        /* Blanco puro, no --primary-color (#D7DBEA, que tira a lavanda).
           ℹ️ El color NO sale del SVG: `whatsapp.svg` lleva dentro
           `fill="#000000"` y da igual, porque al usarse como MASCARA solo
           cuenta su canal alfa. El color se pone aqui, y por eso el archivo
           de Andres no hay que tocarlo. */
        background-color: #FFFFFF;
    }
}

@media only screen and (max-width: 767px) {

    .agente-flotante {
        right: 16px;
        bottom: 16px;
        width: 54px;
        height: 54px;
    }

    .agente-flotante-icono {
        /* 📐 48px dentro de un contenedor de 54: casi lo llena, y es correcto
           porque el boton es TRANSPARENTE — el icono ya no va dentro de un
           circulo de color, el icono ES el boton. El contenedor solo queda
           como zona tactil (54px, por encima de los 44 que piden Apple y
           Android). Si se quisiera mas icono, hay que subir tambien los 54. */
        width: 48px;
        height: 48px;
    }
}

/* Un <a> SIN href no es un enlace para el navegador: no hereda el cursor de
   mano ni responde al teclado. El cursor se devuelve aqui; el foco de teclado
   con `tabindex="0"` en el marcado, y la apertura con `:focus-within` en la
   regla de arriba. Afecta solo a «Servicios», que abre el desplegable en
   lugar de navegar. */
.nav-link-solo-desplegable {
    cursor: pointer;
}

/* ── Formas giratorias de la cabecera de pagina: APAGADAS (10-oct-2026) ──────
   `.page-header::before` y `::after` pintaban dos trozos de metal girando sin
   parar (`animation: shape1 20s infinite linear`). Decision de Andres: fuera.

   🔑 Se apagan con UNA regla en vez de borrar los seis bloques originales
   (base + dos media queries por cada pseudo-elemento). Motivos: volver atras
   es quitar estas cuatro lineas, y las reglas de arriba siguen documentando
   como estaban colocadas. Los overrides responsive quedan inertes: solo
   tocaban anchura, altura y opacidad, y sin `display` no pintan nada.
   ℹ️ Las del HERO (`.hero::before` / `::after`) NO se tocan: son otras, y
   Andres hablo de la cabecera de pagina. */
.page-header::before,
.page-header::after {
    display: none;
}

/* ── Logo reducido con la cabecera en modo scroll (10-oct-2026) ─────────────
   `.active` la pone function.js al pasar de 40px de scroll, y es la que cambia
   la cabecera de transparente sobre el hero a fondo solido. Con el logo a
   tamano completo esa barra solida se comia 224px de pantalla en escritorio.

   📐 Las cuentas, que son las de siempre: cabecera = alto del logo + 2 x el
   padding del navbar. El logo se dimensiona por ANCHURA (es un lockup de
   300x184), asi que el alto sale solo con `height: auto`.
       Escritorio: 293px de ancho = 180 de alto -> 180 + 22 + 22 = 224px
                   140px de ancho =  86 de alto ->  86 + 14 + 10 = 110px  (-51%)
       Movil:      228px de ancho = 140 de alto -> 140 + 14 + 14 = 168px
                   112px de ancho =  69 de alto ->  69 + 12 +  8 =  89px  (-47%)

   ℹ️ NO afecta a la reserva de hueco del hero: el hero se ve con la pagina
   arriba del todo, donde `.active` todavia no esta puesta y el logo mide lo
   de siempre. El `padding-top` de `.hero` sigue calculado sobre los 224px.
   ℹ️ Tampoco rompe el tope del menu movil (`calc(100dvh - 190px)`): esos 190
   se calcularon con la cabecera GRANDE, asi que con la pequena simplemente
   sobra sitio. Queda conservador, nunca corto.
   ───────────────────────────────────────────────────────────────────────── */

header.main-header .header-sticky.active #logo {
    width: 140px;
}

/* 🔑 El padding del navbar ASIMETRICO, y solo en este estado. Entra DOS veces
   en el alto de la cabecera (arriba y abajo del logo), asi que es el otro
   mando ademas del tamano del logo. Se recorta mas por abajo que por arriba
   —que es lo que pidio Andres— porque la barra ya lleva su `border-bottom`
   haciendo de cierre visual: el aire de abajo sobra, el de arriba separa del
   borde de la pantalla. */
header.main-header .header-sticky.active .navbar {
    padding: 14px 0 10px;
}

@media only screen and (max-width: 991px) {

    header.main-header .header-sticky.active #logo {
        width: 112px;
    }

    header.main-header .header-sticky.active .navbar {
        padding: 12px 0 8px;
    }
}

/* 🧪 PRUEBA — logo del footer CON el nombre dentro (10-oct-2026) ─────────────
   El isotipo era un cuadrado de 110px; este es el lockup apaisado de la barra
   de navegacion (300x184), asi que necesita mas anchura para que el nombre se
   lea: 190px -> 117 de alto, parecido al bloque de antes.
   ✅ Resuelta la nitidez: `logo_nombre_460.webp` se exporto del MASTER de
   `marca_fuentes/logo_nombre.png` (1221x750), no estirando el de 300px — que
   mostrado a 230 se habria visto blando. 460 es el doble de 230, lo que pide
   una pantalla de densidad 2x.
   👉 PARA DESCARTARLA: borrar este bloque (es lo ultimo del fichero) y
      descomentar en footer.php el bloque del isotipo + nombre en texto. */
.footer-logo--lockup img {
    max-width: 230px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BANNER DE COOKIES + MODAL DE PREFERENCIAS (10-oct-2026)

   Estructura portada de kalixto_le_roy; los COLORES son todos de K3A. Alli el
   sitio es claro (crema y dorado) y aqui casi negro, asi que no se copio ni un
   valor: se remapeo cada uno a los tokens del :root y al lenguaje que ya usa
   el sitio —el cristal de la barra de navegacion, el degradado de .btn-default
   y la regla de que sobre fondo oscuro el hover ACLARA—.

   📐 z-index 1000: por encima del boton flotante del agente (900), que es lo
   mas alto que habia.
   ═══════════════════════════════════════════════════════════════════════════ */

.cookie-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 24px;
    padding: 20px 24px;
    /* Mismo cristal que la barra de navegacion: velo blanco al 4% + desenfoque
       de lo que hay detras. Aqui el `backdrop-filter` se gana el sueldo, porque
       el banner SIEMPRE tiene contenido debajo. El fondo opaco va aparte porque
       un velo del 4% sobre texto no bastaria para leer encima. */
    background: var(--accent-secondary-soft);
    border-top: 1px solid var(--dark-divider-color);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.55);
    /* Entrada deslizando desde abajo. `transform` y `opacity` son las dos unicas
       propiedades que el navegador anima sin recalcular la pagina. */
    transform: translateY(100%);
    opacity: 0;
    transition: transform 0.35s ease-out, opacity 0.35s ease-out;
}

.cookie-banner.is-visible {
    transform: translateY(0);
    opacity: 1;
}

.cookie-banner__text {
    flex: 1 1 420px;
    font-size: 14px;
    line-height: 1.6em;
    color: var(--text-color);
}

.cookie-banner__text strong {
    display: block;
    margin-bottom: 4px;
    font-size: 16px;
    font-weight: 700;
    color: var(--primary-color);
}

.cookie-banner__text a {
    color: var(--accent-highlight);
    text-decoration: underline;
}

.cookie-banner__text a:hover {
    color: #FFFFFF;
}

.cookie-banner__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* ── Botones ───────────────────────────────────────────────────────────────
   🔑 Los tres tienen el MISMO tamano y el mismo peso visual a proposito.
   «Rechazar» tiene que ser tan facil de pulsar como «Aceptar»: si aceptar
   fuera un boton grande y rechazar un enlace pequeno, el consentimiento no
   se consideraria libre. Lo unico que los distingue es el relleno. */
.cookie-btn {
    flex: none;
    padding: 11px 22px;
    border-radius: 100px;
    border: 1px solid var(--accent-color);
    background: transparent;
    color: var(--primary-color);
    font-size: 14px;
    font-weight: 700;
    line-height: 1em;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

.cookie-btn--accept,
.cookie-btn--save {
    /* El degradado de `.btn-default`, el boton primario del sitio. */
    background: linear-gradient(to right, var(--accent-color) 0%, var(--accent-secondary-color) 50%, var(--accent-color) 100%);
    background-size: 200% auto;
    border-color: transparent;
}

.cookie-btn--accept:hover,
.cookie-btn--save:hover {
    background-position: right center;
}

/* Fondo oscuro -> el hover ACLARA. Misma regla que el menu y el carrusel. */
.cookie-btn--reject:hover,
.cookie-btn--customize:hover {
    background: var(--divider-color);
    border-color: var(--accent-highlight);
    color: #FFFFFF;
}

/* ── 🔑 El boton flotante del agente NO se mueve: el banner lo TAPA ─────────
   Decision del 11-oct-2026, revirtiendo la anterior. El motivo no es estetico,
   es de MEDICION: si el visitante pulsa el agente ANTES de consentir, no existe
   la cookie `_gcl_aw` con el gclid y Ads no puede atribuir esa conversion a la
   campana — solo estimarla. Tapandolo, resuelve el consentimiento primero y el
   dato de conversion llega limpio.
   ⚠️ Y no es un muro de cookies: RECHAZAR tambien cierra el banner y libera el
   boton en un clic, igual de facil que aceptar.
   Lo hace el z-index y nada mas: banner 1000 contra boton 900. Aqui no hay
   regla; este comentario existe para que nadie "arregle" el solapamiento
   creyendo que es un descuido.
   (Antes habia aqui un `body.con-banner-cookies .agente-flotante` que lo subia,
   con la altura medida por JS. Se retiro junto con esa logica de cookies.js.) */

/* ── Modal de preferencias ─────────────────────────────────────────────── */
.cookie-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(3, 5, 13, 0.82);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.25s ease-out;
}

.cookie-modal-overlay.is-open {
    opacity: 1;
}

.cookie-modal {
    position: relative;
    width: 100%;
    max-width: 560px;
    /* Si las categorias no caben, se desplaza el cuadro: nunca el fondo. */
    max-height: calc(100dvh - 40px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 32px 28px 26px;
    border-radius: 14px;
    background: var(--accent-secondary-soft);
    border: 1px solid var(--dark-divider-color);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}

.cookie-modal__close {
    position: absolute;
    top: 14px;
    right: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: var(--divider-color);
    color: var(--text-color);
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

.cookie-modal__close:hover {
    background: var(--dark-divider-color);
    color: #FFFFFF;
}

.cookie-modal__title {
    margin: 0 0 10px;
    font-size: 22px;
    font-weight: 700;
    color: var(--primary-color);
}

.cookie-modal__desc {
    margin: 0 0 22px;
    font-size: 14px;
    line-height: 1.6em;
    color: var(--text-color);
}

.cookie-category {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 16px 0;
    border-top: 1px solid var(--divider-color);
}

.cookie-category__name {
    font-size: 15px;
    font-weight: 700;
    color: var(--primary-color);
}

.cookie-category__desc {
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.55em;
    color: var(--text-color);
}

.cookie-category__tag {
    display: inline-block;
    margin-top: 8px;
    padding: 3px 10px;
    border-radius: 100px;
    background: var(--divider-color);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--accent-highlight);
}

/* ── Interruptores ─────────────────────────────────────────────────────────
   Lo unico que no existia en este CSS y hubo que crear. La casilla real se
   oculta pero NO con `display:none`: asi sigue recibiendo el foco del teclado
   y los lectores de pantalla la anuncian. Lo que se ve es el <span> hermano. */
.cookie-toggle {
    flex: none;
    position: relative;
    display: inline-block;
    width: 46px;
    height: 26px;
}

.cookie-toggle input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}

.cookie-toggle__slider {
    position: absolute;
    inset: 0;
    border-radius: 100px;
    background: var(--dark-divider-color);
    border: 1px solid var(--divider-color);
    transition: all 0.3s ease-in-out;
    pointer-events: none;
}

.cookie-toggle__slider::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--text-color);
    transition: all 0.3s ease-in-out;
}

.cookie-toggle input:checked + .cookie-toggle__slider {
    background: var(--accent-color);
    border-color: var(--accent-highlight);
}

.cookie-toggle input:checked + .cookie-toggle__slider::before {
    transform: translateX(20px);
    background: #FFFFFF;
}

.cookie-toggle input:disabled + .cookie-toggle__slider {
    opacity: 0.55;
}

/* El foco de teclado tiene que verse: es la unica pista de donde esta el cursor
   para quien no usa raton, y aqui la casilla real es invisible. */
.cookie-toggle input:focus-visible + .cookie-toggle__slider {
    outline: 2px solid var(--accent-highlight);
    outline-offset: 2px;
}

.cookie-modal__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--divider-color);
}

@media only screen and (max-width: 767px) {

    .cookie-banner {
        padding: 18px 16px;
        gap: 14px;
    }

    .cookie-banner__actions {
        width: 100%;
    }

    /* Los tres botones reparten el ancho por igual: ninguno destaca sobre otro. */
    .cookie-btn {
        flex: 1 1 0;
        padding: 12px 10px;
        text-align: center;
    }

    .cookie-modal {
        padding: 28px 18px 20px;
    }

    .cookie-modal__actions .cookie-btn {
        flex: 1 1 100%;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PAGINAS LEGALES (11-oct-2026)

   Las tres se apoyan en `.post-entry`, que ya da tipografia de titulares,
   parrafos y enlaces. Aqui solo van las tres piezas que NO existian en el
   proyecto: la fecha, el recuadro de resumen y las tablas de cookies.
   ⚠️ El CSS no traia NINGUN estilo de <table> (se comprobo: cero reglas). Sin
   esto, la tabla de cookies saldria con los bordes por defecto del navegador,
   que sobre fondo oscuro se ven como rayas blancas.
   ═══════════════════════════════════════════════════════════════════════════ */

.legal-fecha {
    margin-bottom: 28px;
    font-size: 14px;
    font-style: italic;
    color: var(--text-color);
    opacity: 0.85;
}

/* Resumen «de un vistazo»: lo primero que ve quien no va a leerse la pagina
   entera. Se destaca con el fondo de tarjeta y un filo de acento a la
   izquierda, no con color de texto: tiene que leerse igual de bien. */
.legal-resumen {
    margin: 0 0 36px;
    padding: 22px 24px;
    border-radius: 10px;
    border-left: 3px solid var(--accent-highlight);
    background: var(--divider-color);
}

.legal-resumen h3 {
    margin: 0 0 12px;
    font-size: 17px;
}

.legal-resumen ul {
    margin: 0;
    padding-left: 20px;
}

.legal-resumen li {
    margin-bottom: 8px;
    font-size: 15px;
    line-height: 1.6em;
}

/* ── Tablas de cookies ─────────────────────────────────────────────────── */
.legal-tabla {
    width: 100%;
    margin: 0 0 26px;
    border-collapse: collapse;
    font-size: 14px;
}

.legal-tabla th,
.legal-tabla td {
    padding: 11px 14px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--divider-color);
    line-height: 1.55em;
}

.legal-tabla th {
    font-weight: 700;
    color: var(--primary-color);
    border-bottom-color: var(--dark-divider-color);
}

.legal-tabla td {
    color: var(--text-color);
}

.legal-tabla code {
    padding: 2px 7px;
    border-radius: 4px;
    background: var(--accent-secondary-soft);
    color: var(--accent-highlight);
    font-size: 13px;
    white-space: nowrap;
}

@media only screen and (max-width: 767px) {

    /* En movil una tabla de tres columnas no cabe: se deja desplazar en
       horizontal dentro de su caja en vez de romper la pagina. */
    .legal-tabla {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    .legal-tabla td {
        white-space: normal;
        min-width: 150px;
    }

    .legal-resumen {
        padding: 18px 16px;
    }
}

/* ── PRECIOS: el selector de region y la tabla de cada tarjeta (WEB-56) ──────
   Seccion PROPIA de K3A, NO viene de la plantilla (24-oct-2026). Va al final por
   el mismo motivo que `.clientes-satisfechos` y `.legal-tabla`: la numeracion
   01-32 de arriba es de la plantilla y meter un numero nuevo en medio obligaria
   a renumerar todas las secciones siguientes. */

/* El selector de region. 🔑 LOS DOS BOTONES SON `btn-default`, el MISMO boton que
   «Contactar» del pie (footer.php) — decision de Andres, 24-oct-2026.
   ⚠️ Lo UNICO que hace falta anadir es `font-family`, y es la trampa del cambio:
   `.btn-default` no la declara porque en la plantilla siempre es un <a>, que la
   hereda del body. Un <button> NO la hereda: usa la del sistema operativo. Sin
   esta linea los dos botones saldrian en Arial en medio de una pagina en Manrope. */
.precios-selector {
    text-align: center;
    margin-bottom: 36px;
}

/* La linea de impuestos: obligatoria por marketing.md 5, y pequena a proposito.
   No es un argumento de venta, es un dato que el visitante necesita para no estar
   calculando si le sumaran un 7 % o un 21 %. */
.precios-impuestos {
    margin-top: -10px;
    font-size: 15px;
    color: var(--text-color);
}

.precios-selector-pregunta {
    margin-bottom: 14px;
    font-weight: 700;
    color: var(--primary-color);
}

.precios-selector-botones {
    display: inline-flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}

.precios-boton {
    font-family: inherit;
    cursor: pointer;
}

/* La region que NO esta activa: el mismo boton, apagado. No se le cambia la forma
   ni el color a proposito, para que se lea como «la otra opcion» y no como otro
   boton distinto. El estado lo pone el <script> de la seccion en `aria-pressed`,
   que ademas es lo que un lector de pantalla anuncia. */
.precios-boton[aria-pressed="false"] {
    opacity: 0.4;
}

.precios-boton[aria-pressed="false"]:hover {
    opacity: 0.7;
}

/* ── La tabla de precios de cada tarjeta ──────────────────────────────────── */

/* 🔴 `width: 100%` Y SIN ESTO LOS PRECIOS NO SE CENTRAN, que es el fallo que Andres
   vio el 24-oct-2026: solo se centraban en las tarjetas de Ads e Integraciones.
   🔑 LA CAUSA: `.service-item` es `display: flex` con `justify-content: space-between`
   (regla de la plantilla, mas arriba). Un hijo flex SIN ancho declarado se encoge a su
   contenido, asi que `justify-content: center` de los <li> centraba dentro de una caja
   ESTRECHA, no dentro de la tarjeta. En Ads e Integraciones las lineas son tan largas
   que la caja ya ocupaba casi todo el ancho, y ahi el centrado SI se veia. El sintoma
   —«solo en esas dos»— era la pista: son las de texto mas largo.
   📌 La plantilla ya tenia la respuesta escrita: `.service-item-image` declara
      `width: 100%` por exactamente este motivo. `.service-item-content` no lo necesita
      porque su parrafo largo lo llena solo — y por eso el problema no se veia ahi. */
.service-item-precios {
    width: 100%;
    margin-top: 20px;
}

/* 🔄 CENTRADO Y SIN RAYA (decision de Andres, 24-oct-2026). Antes esto era una
   rejilla `1fr auto` con un `border-bottom` tenue, es decir una tabla de dos
   columnas. Al quitar la raya, ese reparto izquierda/derecha a todo el ancho
   dejaba el concepto y su precio en los dos extremos y sin nada que los uniera;
   centrados se leen como UNA pieza.
   ⬜ LO QUE SE PAGA, por si no gusta en pantalla: las cifras ya NO forman una
      columna alineada dentro de la tarjeta, porque cada linea se centra por su
      cuenta. Volver a la tabla alineada es cambiar las tres propiedades de
      `display` por `display: grid; grid-template-columns: 1fr auto;` y quitar el
      `text-align`. Un sitio, tres lineas. */
.precios-lista {
    list-style: none;
    margin: 0;
    padding: 0;
}

.precios-lista li {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    /* Dos valores: 4px cuando el concepto y la cifra caen en lineas distintas
       —pasa en movil con los conceptos largos— y 10px cuando van seguidos. */
    gap: 4px 10px;
    padding: 6px 0;
    text-align: center;
}

.precio-concepto {
    font-size: 15px;
    line-height: 1.5em;
    color: var(--text-color);
}

/* 🔑 EL PESO Y EL COLOR DEL TITULO DE LA TARJETA, AL TAMAÑO DEL PARRAFO.
   El peso 700, el color --primary-color y el line-height 1.2em son los del h3 de
   `.service-item-content` (le vienen de la regla global de h1-h6), y se repiten aqui
   porque un <span> no hereda NADA de eso.
   🔑 Y 16px PORQUE ES LO QUE MIDE EL PARRAFO DE LA DESCRIPCION (decision de Andres,
   24-oct-2026). ⚠️ Rastreado antes de tocarlo: `.service-item-content p` NO declara
   tamaño, lo hereda del `body` (16px), y NINGUNA media query ni ningun selector de
   seccion lo cambia. ⇒ En escritorio ya coincidian; lo que los hacia parecer distintos
   es el peso 700, que es lo que Andres habia pedido antes. La unica diferencia REAL
   estaba en movil, donde esto bajaba a 15px — y por eso ya no hay regla de movil.
   📌 `nowrap` para que «desde 3.000 €/mes» no se parta por la mitad. */
.precio-cifra {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2em;
    color: var(--primary-color);
    white-space: nowrap;
}

/* 📌 `.precio-sin-cifra` ya NO necesita regla: con las filas centradas, una linea
   con un solo hijo se centra sola. La clase se queda en el HTML como gancho —es
   lo que distingue las lineas «a presupuesto»— y la estrenara WEB-57, cuando la
   del consumo de plataforma lleve su enlace a la tabla. */

/* ── Que lista se ve ──────────────────────────────────────────────────────── */

/* 🔴 LAS DOS LISTAS ESTAN EN EL HTML SIEMPRE, y aqui solo se decide cual se
   MUESTRA. Es lo que permite que Google indexe las dos (rastrea desde EE.UU.) y
   que la cache no sirva la region de otro visitante.
   El atributo lo pone el <script> inline de la seccion ANTES del pintado, asi que
   no hay destello. Sin JS se ve la de España, que es el cubo mas ancho. */
.precios-latam {
    display: none;
}

html[data-precios-region="latam"] .precios-es {
    display: none;
}

html[data-precios-region="latam"] .precios-latam {
    display: block;
}

/* 📐 En movil el h3 de la tarjeta baja de 20 a 18px (regla de la plantilla, en el
   bloque 767 de arriba), asi que la cifra baja en la misma proporcion.
   📌 Va en su propio @media al final y no dentro del bloque 767 existente: ese
      bloque esta a 1.400 lineas de aqui y partirlo para insertar tres reglas es
      mas arriesgado que anadir una consulta nueva, que en CSS cascada igual. */
/* 🔄 AQUI HABIA UN BLOQUE QUE BAJABA LA CIFRA A 15px Y EL CONCEPTO A 14px EN MOVIL,
   y se quito el 24-oct-2026: la cifra tiene que medir lo que mide el parrafo de la
   descripcion, y ese parrafo NO se reduce en movil —hereda 16px del body a toda
   anchura—. Reducir solo la cifra era precisamente la unica diferencia de tamaño que
   habia entre las dos. Y bajar el concepto sin bajar la cifra abria el salto entre
   los dos, asi que se fue con ella.
   📌 Resultado a cualquier anchura: concepto 15px, cifra 16px, parrafo 16px. */
@media only screen and (max-width: 767px) {
    .precios-selector {
        margin-bottom: 28px;
    }
}

/* ── PRECIOS DE LA PLATAFORMA DE IA: la tabla de consumo (WEB-57) ────────────
   Seccion PROPIA de K3A (24-oct-2026). Sigue el patron de `.legal-tabla`, que es
   el estilo de tabla que ya tiene el sitio, pero con su propia clase: la otra se
   llama «legal» y esta no lo es. */
.precios-plataforma {
    padding: 0 0 80px;
}

.tabla-plataforma-caja {
    overflow-x: auto;
}

.tabla-plataforma {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    font-size: 15px;
}

.tabla-plataforma th,
.tabla-plataforma td {
    padding: 13px 16px;
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid var(--divider-color);
    line-height: 1.5em;
}

.tabla-plataforma thead th {
    font-weight: 700;
    color: var(--primary-color);
    border-bottom-color: var(--dark-divider-color);
    white-space: nowrap;
}

.tabla-plataforma tbody td {
    color: var(--text-color);
}

/* La primera columna es <th scope="row">: el presupuesto es la cabecera de su fila,
   no un dato mas. Se escribe con `precio_texto()`, asi que lleva el € y el separador
   de miles del sitio. */
.tabla-plataforma tbody th {
    font-weight: 700;
    color: var(--primary-color);
    white-space: nowrap;
}

.tabla-plataforma tbody tr:last-child th,
.tabla-plataforma tbody tr:last-child td {
    border-bottom: none;
}

/* Los tres avisos obligatorios de § 5. Tenues pero legibles: son parte del dato,
   no letra pequena de descargo. */
.tabla-plataforma-notas {
    list-style: none;
    margin: 22px 0 0;
    padding: 0;
}

.tabla-plataforma-notas li {
    position: relative;
    padding-left: 16px;
    margin-bottom: 8px;
    font-size: 14px;
    line-height: 1.6em;
    color: var(--text-color);
}

.tabla-plataforma-notas li::before {
    content: "·";
    position: absolute;
    left: 4px;
    color: var(--accent-highlight);
    font-weight: 700;
}

/* ── El responsive, que aqui NO es cosmetica ──────────────────────────────────

   🔴 LA REGLA 1 DE § 5: «nunca una cifra sin decir el tipo de conversacion», porque
   «70 € = 300» y «70 € = 900» son LAS DOS CIERTAS y solo se diferencian en eso.
   ⇒ Una tabla de tres columnas a 360px se resuelve casi siempre ESCONDIENDO una
   columna o dejandola en scroll horizontal. Lo primero publicaria la cifra desnuda
   —y pasaria solo en movil, donde nadie mira—; lo segundo esconde la cabecera en
   cuanto el visitante desplaza.
   ✅ Por eso en movil la tabla se APILA por fila de presupuesto y cada celda PINTA
   su propia etiqueta desde `data-label`. La etiqueta no se puede perder porque va
   en cada celda, no en una cabecera que se queda arriba. */
@media only screen and (max-width: 767px) {
    .precios-plataforma {
        padding-bottom: 60px;
    }

    .tabla-plataforma-caja {
        overflow-x: visible;
    }

    .tabla-plataforma thead {
        /* Oculta visualmente la cabecera pero la deja para los lectores de pantalla:
           `display: none` la quitaria tambien del arbol de accesibilidad. */
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .tabla-plataforma,
    .tabla-plataforma tbody,
    .tabla-plataforma tr,
    .tabla-plataforma th,
    .tabla-plataforma td {
        display: block;
        width: auto;
    }

    .tabla-plataforma tbody tr {
        padding: 14px 0;
        border-bottom: 1px solid var(--dark-divider-color);
    }

    .tabla-plataforma tbody tr:last-child {
        border-bottom: none;
    }

    .tabla-plataforma tbody th,
    .tabla-plataforma tbody td {
        padding: 3px 0;
        border-bottom: none;
    }

    /* 🔴 AQUI ESTA LA REGLA 1: la etiqueta de la columna, delante de cada cifra. */
    .tabla-plataforma tbody td::before {
        content: attr(data-label) ": ";
        color: var(--primary-color);
        font-weight: 700;
    }

    .tabla-plataforma tbody th {
        font-size: 17px;
        margin-bottom: 4px;
    }
}