/* @import "tailwindcss"; */
/* @source "../views"; */

/* Honeypot antibot: oculto visualmente sin display:none/visibility:hidden,
   que algunos bots detectan al parsear el HTML. */
.hp-field {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    left: -9999px;
}

/* ==========================================================================
   Design tokens — paleta consolidada (auditoría de colores hardcodeados).
   Mismos valores visuales que antes, solo centralizados en un único lugar.
   ========================================================================== */
:root {
    /* Marca */
    --color-brand-500: #0279FB;
    --color-brand-alt: #6A9AE2;
    --color-brand-light: #5480f5;

    /* Base oscura / texto */
    --color-ink-900: #1F2639;
    --color-ink-800: #0f1724;

    /* Blanco y negro */
    --color-white: #FFFFFF;
    --color-black: #000000;

    /* Grises */
    --color-gray-200: #E5E7EB;
    --color-gray-220: #D9DEE8;
    --color-gray-300: #9c9797;
    --color-gray-350: #A5A5A5;
    --color-gray-400: #9CA3AF;
    --color-gray-500: #6B7280;
    --color-gray-600: #4B5563;
    --color-gray-700: #7b7b7b;
    --color-gray-750: #cfcfcf;
    --color-gray-760: #cfcbcb;

    /* Azules / celestes decorativos (fondos, gradientes) */
    --color-mist-100: #F7F7FF;
    --color-mist-101: #F0F6FC;
    --color-mist-102: #F9FBFF;
    --color-mist-103: #f8fbff;
    --color-mist-104: #EAF2FF;
    --color-mist-105: #EAF1FF;
    --color-mist-106: #EAF0FF;
    --color-mist-107: #E8EEFF;
    --color-mist-108: #e2f0ff;
    --color-mist-109: #e2eaff;
    --color-mist-110: #dbe7f5;
    --color-mist-111: #D7E2F5;
    --color-mist-112: #E3E9FF;
    --color-mist-113: #CFDAFF;
    --color-mist-114: #bacdff;
    --color-mist-115: #c3c3e0;
    --color-mist-116: #c5ebff;
    --color-mist-117: #a3d5f7;
    --color-mist-118: #94BFFF;
    --color-mist-119: #70B4FF;
    --color-mist-120: #1D9DFF;
    --color-mist-121: #CCFFF9;
    --color-mist-122: #f5efff;
    --color-mist-123: #a388ff;

    /* Estados */
    --color-error-500: #d32f2f;
    --color-error-400: #EF5350;
    --color-error-450: #F95D54;
    --color-error-bg: #FFD9D9;
    --color-success-500: #66BB6A;
    --color-warning-500: #FFD600;

    /* Overlays (alpha) */
    --color-overlay-dark: #21202073;
    --color-overlay-black-60: #00000060;
    --color-overlay-black-20: #00000020;
    --color-overlay-gray: #95959526;
    --color-overlay-brand: #5480f51f;
    --color-overlay-mist: #d1dfffe6;
}

@font-face {
    font-family: 'figtree';
    font-display: swap;
    src: local(), url('../fontss/Figtree.ttf') format('truetype');
}

@font-face {
    font-family: 'figtree-bold';
    font-display: swap;
    src: local(), url('../fontss/Figtree-Bold.ttf') format('truetype');
}

@font-face {
    font-family: 'figtree-light';
    font-display: swap;
    src: local(), url('../fontss/Figtree-light.ttf') format('truetype');
}

@font-face {
    font-family: 'HostGrotesk-Regular';
    font-display: swap;
    src: local(), url('../fontss/HostGrotesk-Regular.ttf') format('truetype');
}

body {
    margin: 0;
    display: flex;
    flex-direction: column;
    font-family: 'figtree';
    color: var(--color-ink-900);
    background-color: var(--color-mist-101);
    overflow-x: clip;
}

/* Los navegadores no heredan font-family del body en controles de formulario
   (usan la fuente del sistema por defecto), así que se fuerza aquí para que
   inputs, selects, textareas y botones también usen figtree. */
input,
textarea,
select,
button {
    font-family: inherit;
}

html {
    scroll-behavior: smooth;
    overflow-x: clip;
}

#contenedorMain {
    padding-top: 70px;
}

#navBarMobile {
    height: 64px;
    justify-content: space-between;
    padding: 0 18px 0 12px;
    display: flex;
}

#navBarMobile button#iconoMenuMobile {
    background-image: url('../images/icons/menu.svg');
    width: 40px;
    height: 25px;
    background-repeat: no-repeat;
    padding: 10px;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
}

#menuMobile .subLista>li>a {
    height: 100%;
    display: inline-block;
    width: 100%;
    padding-top: 10px;
}



#navBarMobile,
#navBarDesktop {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: var(--color-white);
    align-items: center;
    z-index: 20;
}

#iconoMenuMobile {
    cursor: pointer;
}

#ideaunologo {
    height: 62px;
}


#ideaunoIsologo {
    height: 40px;
}

.cajaAzul,
.cajaBlanca {
    border-radius: 14px;
}

.cajaAzul3Bordes {
    border-radius: 24px 0 24px 24px;
}

.cajaAzul3Bordes,
img.lightbox {
    box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.25);
}

.somos-singulares div.cuadroCont.max-w-500px,
.cajaAzul3Bordes:hover,
#contMockups img,
img.lightbox,
a:hover,
button {
    cursor: pointer;
}

.cajaBlanca {
    height: auto;
    width: 100%;
    display: flex;
    color: var(--color-brand-500);
    background-color: var(--color-white);
    font-size: 40px;
    transition: background-color .15s ease-out;
}

.cajaAzul,
.cajaAzul3Bordes {
    height: auto;
    width: 100%;
    display: flex;
    background-color: var(--color-brand-500);
    font-size: 40px;
    transition: background-color .15s ease-out;
}

.cajaAzul a,
.cajaBlanca a,
.cajaAzul3Bordes a {
    font-size: 19px !important;
    line-height: 23px !important;
    color: var(--color-white);
    display: flex;
    align-items: center;
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 90px;
    transition: color .15s ease-out;
}

.cajaAzul svg path,
.cajaBlanca svg path {
    transition: fill .15s ease-out;
}

.cajaAzul3Bordes a.btnEstandar {
    height: auto;
}

.px8 {
    padding: 0 8px;
}

.gapY8 {
    row-gap: 8px;
}

#imgPrimera {
    position: relative;
    overflow: hidden;
    height: 782px;
    background-repeat: no-repeat;
    background-size: cover;
    padding-bottom: 70px;
}

.hero-spline {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    transition: transform 0.35s ease-out;
}

.hero-spline canvas,
.hero-spline iframe {
    width: 100%;
    height: 100%;
}

.btn-scroll-top {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: var(--color-brand-500);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    z-index: 200;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.2s ease;
}

.btn-scroll-top--visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.btn-scroll-top:hover {
    background-color: var(--color-ink-900);
}

@media only screen and (max-width: 599px) {
    .btn-scroll-top {
        right: 16px;
        bottom: 16px;
        width: 44px;
        height: 44px;
    }
}

.hero-page-loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    background: var(--color-mist-101);
    transition: opacity 0.4s ease;
}

.hero-page-loader__spinner {
    width: 48px;
    height: 48px;
    border: 4px solid var(--color-mist-110);
    border-top-color: var(--color-brand-500);
    border-radius: 50%;
    animation: heroPageLoaderSpin 0.8s linear infinite;
}

.hero-page-loader__text {
    font-size: 16px;
}

.hero-page-loader--hidden {
    opacity: 0;
    pointer-events: none;
}

@keyframes heroPageLoaderSpin {
    to { transform: rotate(360deg); }
}

#contLogoGris {
    background-repeat: no-repeat;
    background-size: cover;
    margin-top: -34px;
    display: flex;
    flex-direction: column;
    align-self: center;
    width: 76%;
}

#contLogoGris .cajaAzul3Bordes {
    max-width: 500px;
    z-index: 1;
}


#imgPrimera h2,
#tecnologiaDigital p,
#tecnologiaDigital h4.texto {
    font-size: 14px;
    line-height: 19px;
    max-width: 940px;
}


#indexContainer #imgPrimera h2 {
    max-width: 700px;
}

#tecnologiaDigital>h4.texto {
    padding: 0 10px;
}

#contactoContainer span.boldAzul,
#tecnologiaDigital span.boldAzul {
    font-family: 'figtree';
}

.btnEstandar,
.btnEstandarBlanco,
.btnBlanco {
    font-family: 'figtree';
    height: 56px;
    display: inline-block;
    width: max-content;
    border-radius: 28px;
    font-size: 18px;
    display: flex;
    align-items: center;
    transition: background-color .2s ease, color .2s ease;
}

/* El icono de flecha (mini-white-arrow) no tenia separacion real del texto:
   su margen (.me-1) queda del lado que no sirve porque el icono va al final
   del boton, asi que quedaba pegado al texto y casi tan alto como el boton. */
.btnEstandar svg,
.btnAzul svg,
.btnEstandarBlanco svg {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    margin-left: 12px;
}

/* El padding a la derecha del icono (flecha o calendario) quedaba muy grande
   al sumarse al padding horizontal del boton (px-7, etc); se fija en 24px sin
   tocar el padding izquierdo, que sigue viniendo de la clase de cada boton. */
.btnEstandar:has(svg),
.btnAzul:has(svg),
.btnEstandarBlanco:has(svg) {
    padding-right: 24px;
}

/* El boton "Contactanos" de la nav bar desktop se ve con demasiado espacio
   sin ocupar; se achica solo aca (margenes del texto + padding del icono),
   sin tocar el resto de botones que comparten estas mismas clases. */
#navBarDesktop .btnAzul:has(svg) {
    padding-right: 12px;
    padding-left: 8px;
}

#navBarDesktop .btnAzul span {
    margin-left: 16px;
    margin-right: 0px;
}

/* Hover del boton "Contactanos": pasa a azul oscuro con texto y flecha
   blancos, en vez del hover generico de .btnAzul (fondo blanco/texto azul). */
#navBarDesktop .btnAzul:hover {
    background-color: var(--color-ink-900);
    color: var(--color-white);
    border-color: var(--color-ink-900);
}

#navBarDesktop .btnAzul:hover svg path {
    fill: var(--color-white);
}

.btnEstandarBlanco:hover,
.btnBlanco:hover {
    font-family: 'figtree';
    height: 56px;
    display: inline-block;
    width: max-content;
    border-radius: 28px;
    font-size: 18px;
    display: flex;
    align-items: center;
    background-color: var(--color-ink-900);
    color: var(--color-white);
    transition: background-color .1s ease-in, color .1s ease-in;
}

.btnEstandar {
    background-color: var(--color-ink-900);
    color: var(--color-white);
    z-index: 1;
}

.btnEstandar:hover {
    background-color: var(--color-white);
    color: var(--color-brand-500);
    z-index: 1;
    transition: background-color .1s ease-in, color .1s ease-in;
}

.btnEstandarBlanco {
    border: solid 1px var(--color-ink-900);
}

.btnEstandarBlanco,
.btnBlanco,
.boldAzul,
.txtOscuro {
    color: var(--color-ink-900);
}

.btnBlanco {
    background-color: var(--color-white);
}

#btnContacto {
    padding: 5px 24px 5px 30px;
    column-gap: 10px;
}

/* Color del icono del botón de contacto */
.btnEstandar:hover svg path {
  fill: var(--color-brand-500);
  transition: fill .1s ease-in;
}


.barraClientes {
    display: flex;
    flex-direction: row;
    width: 100%;
    overflow-x: hidden;
    gap: 16px;
    margin-bottom: 52px;
    /* ---------------> NO BORRAR */
    justify-self: center;
    /*  ------------> NO BORRAR */
}

.barraClientes>div {
    min-width: 130px !important;
    transition: .9s ease;
    display: flex;
    justify-content: center;
    align-items: center;
}

.barraClientesCont {
    display: flex;
    justify-content: center;
    background-color: var(--color-white);
    padding-top: 96px;
    padding-bottom: 160px;
    position: relative;
    z-index: 10;
    margin-top: -64px;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

@media (max-width: 991px) {
    .barraClientesCont {
        margin-top: 0;
    }
}

.h2Main {
    font-size: 32px;
    line-height: 38px;
}

.boldAzul {
    color: var(--color-brand-500) !important;
}

button.boldAzul,
a.boldAzul {
    transition: opacity .1s ease-in;
}

button.boldAzul:hover,
a.boldAzul:hover,
button.boldAzul:focus-visible,
a.boldAzul:focus-visible {
    text-decoration: underline;
}

#contIndustrias>div>div>button.ind {
    display: flex;
    justify-content: center;
}


#contIndustrias div.subCuadro>p.txtCorto {
    text-align: left;
}

#contIndustrias>div>div>a>h3,
#contIndustrias>div>div>button>p {
    position: absolute;
    color: var(--color-white);
    padding-top: 120px;
}

#contIndustrias>div>div {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 19px;
    margin-bottom: 19px;
    align-self: flex-start;
    width: 100%;
}

.fondoGrisIndustrias {
    position: absolute;
    left: 0px;
}

#contIndustrias {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    background-repeat: no-repeat;
    background-position-y: 210px;

    max-width: 1230px;
    align-self: center;
}

#contIndustrias>div {
    width: 100%;
    display: flex;
    justify-content: center;
    background-repeat: no-repeat;
    background-position-y: 210px;

    max-width: 1230px;
    align-self: center;
    column-gap: 18px;
}

.industrias-index {
    flex-wrap: wrap;
    display: grid !important;
    grid-template-columns: 154px 154px;
    position: relative;
}

#descripcionesRapidas {
    padding: 0 50px;
    max-width: 934px;
    align-self: center;
    width: 100%;
    justify-self: center;
}

#descripcionesRapidas>div {
    border-top: solid 1px var(--color-brand-500);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 30px 0;
}

#descripcionesRapidas>div:last-child {
    border-bottom: solid 1px var(--color-brand-500);
}

/* #descripcionesRapidas h2 { */
#descripcionesRapidas p.boldAzul {
    font-size: 48px !important;
    font-weight: 600;
}

#descripcionesRapidas p {
    font-size: 20px;
    line-height: 26px;
    margin-left: -16px;
}

.txt16 {
    font-size: 16px !important;
}

#casosContainer {
    margin-bottom: 70px;
}

.caso-copec #casosContainer {
    display: flex;
    flex-direction: column;
}

#casosContainer .titulo {
    font-size: 32px;
}

#casosContainer .subTitulo {
    font-size: 22px;
    line-height: 22px;
    margin-top: 9px;
    margin-bottom: 4px;
}

#casosContainer .texto {
    font-size: 18px;
}

#casosContainer .texto,
#desarrolloMedida h2.mb-7,
#ecommerceContainer h2.mb-7,
#desarrolloMedida p.encargamos {
    line-height: 19px;
}

#desarrolloMedida p.encargamos {
    font-size: 17px;
}


#desarrolloMedida p.encargamos>span {
    font-family: 'figtree';
}

#somosSingulares h3.ssDesc {
    font-family: 'figtree-light';
    max-width: 670px;
}



#granulado p.puntaje {
    font-size: 34px;
}

#granulado p.usuario {
    font-size: 32px;
}

#granulado p.titulo {
    font-size: 18px;
    line-height: 22px;
}

#granulado p.texto {
    font-size: 15px;
    line-height: 20px;
    margin-top: 10px;
}

#somosSingulares img#fondoSomos,
#granulado>img {
    width: 100%;
}

#somosSingulares>img {
    min-height: 1300px;
}

#somosSingulares button.btnEstandarBlanco {
    margin-top: 10px;
}

#somosSingulares {
    min-height: 1330px;
    align-items: flex-start;
}

h5 {
    font-size: 16px !important;
}

#sliderOp {
    height: 317px;
    width: 384px;
    max-width: 100%;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    border-radius: 26px;
    background-color: var(--color-overlay-gray);
    backdrop-filter: blur(25px);
    box-shadow: 3px 3px 3px var(--color-overlay-dark);
    padding: 28px 25px 14px 25px;
    margin-top: -50px;
}

#sliderOp .descripcion {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 235px;
    position: absolute;
    top: 28px;
    left: 25px;
    right: 25px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(12px);
    transition: opacity 0.55s ease, transform 0.55s ease, visibility 0s linear 0.55s;
}

#sliderOp>.descripcion p.pie {
    font-family: 'figtree-light';
}

#sliderOp .descripcion.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition-delay: 0s;
}

#sliderControl {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 14px;
    margin-top: 0;
    z-index: 2;
}

#sliderControl span,
#herramientasCont span {
    height: 14px;
    width: 14px;
    background-color: var(--color-overlay-black-60);
    border-radius: 50%;
}

#sliderControl_ {
    padding: 8px 13px;
    width: max-content;
    align-self: center;
    border-radius: 16px;
    position: absolute;
    margin-top: 346px;
}

/* Mismos puntos de paginacion que la seccion de opiniones: 8px en vez de 14px. */
#sliderControl_ span {
    width: 8px;
    height: 8px;
}

#agendaCont,
#agendaContIndex {
    background-color: var(--color-white);
    border-radius: 14px;
    box-shadow: 0px 3px 2px var(--color-overlay-dark);
    padding: 20px 25px;
    z-index: 1;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
}

/* "Nuestras tecnologías": ya no es una tarjeta, solo el carrusel centrado
   sin fondo/borde/sombra. */
#herramientasCont {
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    z-index: 1;
    position: relative;
    background: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
}

#agendaContIndex {
    width: 100%;
    max-width: 640px;
    box-sizing: border-box;
    padding: 16px 40px;
    margin: 64px auto 96px;
}

#agendaHomeLogo svg {
    width: 84px;
    height: auto;
}

#agendaHomeTitulo {
    font-size: 40px;
    line-height: 1.15;
}

#agendaHomeSubtitulo {
    font-size: 24px;
    line-height: 28px;
}

/* Seccion "Agenda tu primera asesoría con un experto" (home): mismo patron
   visual que la de ciberseguridad, pero con su propia tarjeta/ids.
   Usa id propio (agendaCtaSection) en vez de #agendaAsesoria porque ese id
   sigue en uso en servicios/ecommerce.blade.php con su tarjeta chica
   original (#agendaAsesoria.cta-cumplimiento), con reglas de altura/ancho
   fijas en app.css y en los media queries que no aplican a esta sección. */
#agendaCtaSection h2.txt34 {
    font-size: 40px !important;
    line-height: 44px !important;
}

#agendaCtaSection h3.txt24 {
    font-size: 32px !important;
    line-height: 36px !important;
}

#agendaCtaCard {
    width: 100%;
    max-width: 500px;
    box-sizing: border-box;
    /* Mismo espacio entre titulo y formulario que en ciberseguridad-proteccion-datos
       (#cibersegAgendaTitulos margin-bottom:56 + #contactoForm margin-top:36 = 92px). */
    margin: 92px auto 0;
    /* Mismo padding que #contactoForm.contacto-form--centered en
       ciberseguridad-proteccion-datos (30px a los lados, 50px abajo, mas
       espacio arriba). */
    padding: 64px 30px 50px;
    display: flex;
    flex-direction: column;
    /* Mismo azul solido que #contactoForm.contacto-form--centered en
       ciberseguridad-proteccion-datos, sin transparencia ni blur. */
    background-color: var(--color-brand-500);
    border-radius: 14px;
    color: var(--color-white);
}

#agendaCtaCard .boldAzul {
    color: var(--color-white) !important;
}

/* label {} (más abajo en este archivo) fuerza texto oscuro en todos los
   formularios del sitio; sobre el fondo azul de esta tarjeta queda ilegible,
   asi que se revierte a blanco aqui, igual que .boldAzul arriba. */
#agendaCtaCard label {
    color: var(--color-white);
}

#agendaCtaCard .g-recaptcha.btnAzul {
    background-color: var(--color-white);
    color: var(--color-brand-500);
    transition: background-color .15s ease-in, color .15s ease-in, transform .15s ease-in;
}

#agendaCtaCard .g-recaptcha.btnAzul:hover {
    background-color: var(--color-ink-900);
    color: var(--color-white);
    transform: translateY(-2px);
}

#agendaCtaCard .inputComponent {
    color: var(--color-ink-900);
}

/* Tarjeta del formulario en dos columnas a partir de tablet, mismo patron que
   #formContacto.contacto-form--centered en ciberseguridad-proteccion-datos.
   Nombres/Apellidos/Correo/Telefono quedan de a 2 por fila; Empresa, Mensaje,
   el check de terminos y el boton ocupan las dos columnas (.agenda-cta-full). */
@media (min-width: 640px) {
    #agendaCtaCard {
        max-width: 780px;
    }

    #formAgendaCta {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 24px;
    }

    #formAgendaCta > * {
        min-width: 0;
    }

    #formAgendaCta .agenda-cta-full {
        grid-column: 1 / -1;
    }

    #formAgendaCta .agenda-cta-full.flex.justify-center {
        width: 100%;
        justify-self: stretch;
    }
}

#herramientasCont {
    height: 356px;
    width: 384px;
    max-width: 100%;
    box-sizing: border-box;
    margin-top: 55px;
    margin-top: 55px;
}

#contCompBajos {
    width: 384px;
    max-width: 100%;
}

#granuladoRow {
    flex-direction: column;
    align-items: center;
}

#agendaCont {
    height: 660px;
    width: 540px;
    position: absolute;
    top: 180px;
    display: flex;
    flex-direction: column;
    row-gap: 40px;
    justify-content: space-around;
}

#agendaCont p:nth-child(2),
#agendaContIndex p:nth-child(2) {
    line-height: 35px;
}

#agendaCont p:last-child,
#agendaContIndex p:last-child {
    font-size: 13px;
    margin-top: 20px;
    line-height: 16px;
}

#arco {
    z-index: 0;
    position: relative;
    width: 100%;
    max-width: 360px;
}

.btnAzul {
    font-family: 'figtree';
    background-color: var(--color-brand-500);
    height: 56px;
    display: inline-block;
    color: var(--color-white);
    width: max-content;
    border-radius: 28px;
    font-size: 20px;
    display: flex;
    align-items: center;
}

.btnAzul:hover {
    font-family: 'figtree';
    background-color: var(--color-white);
    color: var(--color-brand-500);
    border-color: var(--color-ink-900);
    transition: background-color .1s ease-in, color .1s ease-in;
}

.btnAzul:hover svg path {
  fill: var(--color-brand-500);
  transition: fill .1s ease-in;
}

.cajaAzul:hover {
    background-color: var(--color-white);
    color: var(--color-brand-500);
    transition: background-color .1s ease-in, color .1s ease-in;
}

.cajaAzul:hover svg path {
  fill: var(--color-brand-500);
  transition: fill .1s ease-in;
}

.cajaAzul3Bordes:hover {
    background-color: var(--color-white);
    transition: background-color .1s ease-in;
}

.cajaAzul3Bordes:hover a {
    color: var(--color-brand-500);
    transition: color .1s ease-in;
}

.cajaAzul3Bordes:hover svg path {
  fill: var(--color-brand-500);
  transition: fill .1s ease-in;
}

.titleServicios:hover {
    color: var(--color-brand-500) !important;
    transition: color .1s ease-in;
}

.cajaBlanca:hover {
    background-color: var(--color-ink-900);
    color: var(--color-white);
    transition: background-color .1s ease-in, color .1s ease-in;
}

.cajaBlanca:hover svg path {
  fill: var(--color-white);
  transition: fill .1s ease-in;
}

.titleIntranet:hover {
    color: var(--color-white) !important;
    transition: color .1s ease-in;
}

/* Pestaña flotante "¿Tienes dudas?" (agendaReujl). La pestaña y el panel se
   superponen con position:absolute en vez de ir en fila con flex: al ocultar
   la pestaña con opacity/visibility, esta seguia ocupando su espacio en el
   flex y empujaba el panel hacia la derecha. */
.duda-flotante {
    position: fixed;
    right: 0;
    top: calc(60% + 32px);
    z-index: 500;
}

.duda-flotante-tab {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    background-color: var(--color-brand-500);
    color: var(--color-white);
    border: none;
    border-radius: 16px 0 0 16px;
    padding: 16px 10px;
    cursor: pointer;
    box-shadow: -3px 0px 10px rgba(0, 0, 0, 0.2);
    font-family: 'figtree';
    font-size: 14px;
    line-height: 1.2;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transition: background-color .2s ease, opacity .2s ease, visibility .2s ease;
}

.duda-flotante-tab .calendarAgenda {
    writing-mode: horizontal-tb;
    margin: 0;
}

.duda-flotante-tab:hover {
    background-color: var(--color-ink-900);
}

.duda-flotante--open .duda-flotante-tab {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.duda-flotante-panel {
    position: absolute;
    right: 0;
    top: 50%;
    width: 340px;
    max-width: calc(100vw - 24px);
    background-color: var(--color-white);
    border-radius: 20px 0 0 20px;
    box-shadow: -3px 4px 16px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    padding: 32px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transform: translateY(-50%) translateX(100%);
    opacity: 0;
    visibility: hidden;
    transition: transform .3s ease, opacity .3s ease, visibility .3s;
}

.duda-flotante--open .duda-flotante-panel {
    transform: translateY(-50%) translateX(0);
    opacity: 1;
    visibility: visible;
}

.duda-flotante-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}

.duda-flotante-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* El boton de cerrar es absolute (arriba a la izquierda), asi que solo el
   titulo necesita separarse de el; el resto del contenido queda centrado
   sin compensaciones de padding/margin asimetricas. */
.duda-flotante-content > p.h2Main {
    padding-top: 8px;
}

.duda-flotante-content .btnAzul {
    padding-left: 8px;
}

.duda-flotante-close {
    position: absolute;
    top: 28px;
    left: 16px;
    width: 32px;
    height: 32px;
    padding: 6px;
    box-sizing: border-box;
    border-radius: 50%;
    border: none;
    background-color: rgba(255, 255, 255, 0.85);
    color: var(--color-ink-900);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color .2s ease;
}

.duda-flotante-close:hover {
    background-color: var(--color-white);
}

footer {
    background-color: var(--color-ink-900);
    z-index: 0;
}

footer {
    background-color: var(--color-ink-900);
}

footer>.bgFondo {
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

#contRRSS {
    display: grid;
    grid-template-columns: 22px 22px 22px;
    column-gap: 7px;
    grid-column-start: auto;
}

#contCertificados {
    display: grid;
    grid-template-columns: 42px 40px 40px 40px;
    column-gap: 5px;
    grid-column-start: auto;
    margin-top: 22px;
}

#contCertificados>img {
    width: 42px !important;
}

.txtLicencia {
    font-size: 12px;
    text-align: center;
    color: var(--color-gray-350);
    padding-top: 30px;
    line-height: 15px;
}

.txtLicencia a {
    color: var(--color-white);
}

.txtBlanco {
    color: var(--color-white) !important;
}

.fondoGrisIndustrias {
    margin-top: 207px;
    height: 560px;
    justify-content: center !important;
}

.fondoGrisTecnologias {
    display: flex;
    align-self: center;
    justify-self: center;
    position: absolute;
    margin-top: -77px;
}

.imgMainWeb {
    height: 140px;
}

#txtFooterContainer {
    width: 100%;
    max-width: 400px;
}

#menuMobile {
    height: auto;
    top: -240px;
    width: 100%;
    background-color: var(--color-ink-900);
    transition: 0.4s linear;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    z-index: 19;
    padding: 4px 18px 20px 18px;
}

.menuShow {
    top: 64px !important;
}

.badge {
    padding: 0 8px;
    color: var(--color-white);
    border-radius: 4px;
}

.badge-success {
    background-color: rgb(95, 160, 70);
}

.badge-danger {
    background-color: rgb(202, 80, 80);
}

.menuHide {
    height: 0;
    padding: 0;
    overflow-y: hidden;
}

.subListaHidden {
    height: 0px !important;
    transition: .3s cubic-bezier(0.55, 0.06, 0.68, 0.19);
}

.btnDropdown {
    display: flex;
    padding: 2px 10px;
    border: solid 1px var(--color-mist-104);
    border-radius: 14px;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    transition: border-color .1s ease-in, background-color .1s ease-in;
}

.btnDropdown:hover,
.btnDropdown:focus-visible {
    border-color: var(--color-brand-500);
    background-color: var(--color-overlay-brand);
}

a.btnDropdown {
    height: 54px;
}

.btnDropdown,
.subLista li {
    font-size: 14px;
}

.subLista li {
    padding: 0px 2px 0 2px;
}

.subLista {
    padding: 0 15px 0 10px;
    height: inherit;
    overflow-y: hidden;
}

.subMenuSeparador {
    height: 28px;
    padding-top: 16px !important;
}

.lineaSeparadora {
    height: 1px;
    background-color: var(--color-white);
}

.subMenuSeparador span {
    height: 9px;
    width: 9px;
    float: right;
    background-color: var(--color-white);
    border-radius: 50%;
    margin-top: -5px;
    margin-right: -2px;
}

.subListaCont {
    transition: .3s cubic-bezier(0.55, 0.06, 0.68, 0.19);
    display: none;
    display: block;
}

.arrow-btn {
    transition: .3s ease-in-out;
    height: 48px;
}

#navBarDesktop .arrow-btn {
    transition: .3s ease-in-out;
    height: 12px;
    margin-left: 7px;
    margin-top: 2px;
}



.herramienta p {
    font-size: 23px;
    text-align: center;
    color: var(--color-brand-500);
}

.herramienta {
    display: none;
}

#herramientasCont .herramienta.visible {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 256px;
    animation: herramientasFadeIn 0.55s ease;
}

@keyframes herramientasFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.solucionesCloud {
    height: 165px;
    margin-top: 44px;
    justify-content: space-between;
    padding: 0 20px;
    transform: scale(1.15);
    transform-origin: center;
}

.lenguajesProgramacion {
    height: 180px;
    margin-top: 42px;
    justify-content: space-between;
    padding: 0 24px;
    transform: scale(1.15);
    transform-origin: center;
}

.frameworks {
    height: 180px;
    margin-top: 42px;
    justify-content: space-between;
    padding: 0 20px;
    transform: scale(1.15);
    transform-origin: center;
}

.basesDatos {
    height: 191px;
    margin-top: 20px;
    transform: scale(1.15);
    transform-origin: center;
}

#agendaAsesoria {
    box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.25);
    width: auto;
    min-width: 330px;
    margin: 125px 10px 0 10px;
    border-radius: 25px;
    align-self: center;
    height: 290px;
    background: rgb(237, 204, 255);
    background: linear-gradient(90deg, rgb(237 204 255 / 49%) 0%, rgba(255, 255, 255, 1) 63%);
}

#brochurePortafolio {
    box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.25);
    width: 644px;
    min-width: 330px;
    padding-top: 56px;
    margin: 16px 10px 80px 10px;
    border-radius: 25px;
    align-self: center;
    height: 450px;
    background: rgb(237, 204, 255);
    background: linear-gradient(90deg, rgb(237 204 255 / 49%) 0%, rgba(255, 255, 255, 1) 63%);
}

#agendaAsesoria p.agentaTxt {
    /* #agendaAsesoria h2 { */
    font-size: 20px !important;
    line-height: 20px;
    z-index: 1;
}

#agendaAsesoria img.fondoTarjeta {
    position: absolute;
    right: 0px;
    height: inherit;
    display: block;
}

#agendaAsesoria .fondoTarjetaDesktop {
    position: absolute;
    top: 50%;
    right: -10px;
    transform: translateY(-50%);
    width: 38%;
    max-width: 420px;
    height: auto;
    display: none;
    pointer-events: none;
}


#nuestroEquipoCont {
    margin-top: 94px;
    width: 400px;
    align-self: center;
    column-gap: 16px;
    flex-direction: column;
}

#nuestroEquipoCont>div {
    margin-top: 14px;
}

#contComoSomos {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#contProceder {
    display: flex;
    flex-direction: column;
    gap: 15px;
    position: absolute;
    inset: 0;
    align-items: center;
    justify-content: center;
    z-index: 5;
}

#contProceder>span {
    border-radius: 31px;
    height: 50px;
    border: solid 1px var(--color-brand-light);
    background-color: var(--color-overlay-brand);
    display: flex;
    align-items: center;
    font-size: 17px;
    width: 220px;
    justify-content: center;
    backdrop-filter: blur(7px);
}

#contProceder>span,
#somosSingulares>div>h2,
#casosContainer .subTitulo,
#casosContainer .texto,
#contProceder>span,
#agendaAsesoria,
.tarjetas p,
#descripcionesRapidas .descripcionRapida>p,
.helv-l,
#listaFunciones>li {
    font-family: 'figtree-light';
}

#contProceder>span.grande {
    font-size: 22px;
    width: 206px;
    margin-bottom: 10px;
}

#imgComosomos {
    max-width: 460px;
    align-self: center;
    margin-top: 100px;
}

.descCorta {
    color: var(--color-brand-500);
    font-size: 48px;
}

.txtCorto {
    font-size: 16px;
    line-height: 17px;
}

span.boldAzul.helv-l {
    font-size: 14px;
}

#desarrolloMedida>div.heroSoftwareMedida {
    display: flex;
    justify-content: center;
    background-color: var(--color-white);
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    box-sizing: border-box;
    padding-top: 96px;
    padding-bottom: 64px;
}

.heroSoftwareMedida__inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 128px;
    width: 100%;
    max-width: 1400px;
    padding: 0 32px;
    box-sizing: border-box;
}

.heroSoftwareMedida__texto {
    max-width: 700px;
}

.heroSoftwareMedida__robot {
    width: 300px;
    height: auto;
    flex-shrink: 0;
}

@media (max-width: 900px) {
    .heroSoftwareMedida__inner {
        flex-direction: column;
        gap: 32px;
        padding: 0 24px;
    }

    .heroSoftwareMedida__texto {
        max-width: 100%;
    }

    .heroSoftwareMedida__robot {
        width: 200px;
    }
}

#desarrolloMedida {
    align-self: center;
    width: 100%;
    justify-content: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#contCajas {
    padding-bottom: 90px;
    display: grid;
    row-gap: 18px;
    grid-auto-columns: auto;
    margin-bottom: -40px;
    justify-content: center;
    z-index: 1;
}

.cajas-container {
    padding: 80px 0;
}

#imgContenedor img {
    height: 800px !important;
    position: absolute !important;
    margin-top: -800px !important;
}

#imgContenedor {
    left: 0;
}

#desarrolloMedida .cajaAzul3Bordes a>svg {
    transform: rotate(135deg);
}

.imgDown,
.divCont {
    transition: .5s ease-in-out;
}

.divCont {
    height: 0px;
    overflow: hidden;
}

.caja-desktop>.divCont {
    height: 530px !important;
    transition: .25s ease-in-out;
}

.caja-desktop>.divCont>img {
    border-radius: 20px 20px 0 0;
}

.divCont>img {
    width: 100%;
}

/* .divCont>div h5 {
    line-height: 19px;
    margin: 0 9px 20px 10px;
} */

.divCont>div p {
    font-size: 15px;
    line-height: 19px;
    margin: 0 9px 20px 10px;
}

.expandible {
    flex-direction: column !important;
}

.subText {
    font-size: 24px;
    line-height: 26px;
}

#uxuiContainer>#imgPrimera,
#tecnolgiasContainer>#imgPrimera {
    color: var(--color-white);
}

#uxuiContainer>#imgPrimera h2 {
    text-align: center;
}

#indexContainer>#imgPrimera,
#uxuiContainer>#imgPrimera,
#tecnolgiasContainer>#imgPrimera,
#uxuiContainer>#imgPrimera,
#uxuiContainer .img100Desktop {
    height: 100vh;
    background-repeat: no-repeat;
    background-size: cover;
}

#uxuiContainer>#imgPrimera img.imgMainMobile,
#tecnolgiasContainer>#imgPrimera img.imgMainMobile,
#indexContainer>#imgPrimera img.imgMainMobile {
    position: absolute;
    top: 64px;
    z-index: -1;
    width: auto;
    height: calc(100vh - 5vh);
}

#indexContainer .txtHeroWeb {
    font-size: 32px;
    line-height: 36px;
}

#contMockups {
    display: grid;
    flex-direction: column;
    margin: 70px 0;
    row-gap: 58px;
    overflow-x: hidden;
}

#contMockups>div {
    flex-direction: row;
}

#contMockups>div:last-child {
    flex-direction: row-reverse;
}

#contMockups>div:first-child img,
#contMockups>div:last-child img {
    height: auto;
    width: 84%;
}

#ecommerceContainer p.encargamos {
    line-height: 22px;
}

#ecommerceContainer #agendaAsesoria {
    margin: 60px 0;
}

#ecommerceContainer #agendaAsesoria>h2.h2Main {
    line-height: 33px;
    font-size: 32px;
    margin: 27px 20px 17px 4px;
}

#listaFunciones li {
    list-style: disc;
    line-height: 20px;
    margin-bottom: 32px;
    font-size: 19px;
}

#listaFunciones li:last-of-type {
    grid-template-columns: auto auto auto;
    max-width: 350px;
    align-items: center;
}

#listaFunciones {
    margin: 0 10px 30px 60px;
    position: relative;
}

#cardIdeaUno p {
    line-height: 18px;
}

#cardIdeaUno {
    margin-bottom: -198px;
}

#cardIdeaUno>div {
    padding-top: 40px;
}

.max-w-500px {
    max-width: 500px;
}

.max-w-600px {
    max-width: 600px;
}

.max-w-750px {
    max-width: 750px;
}

.max-w-1400px {
    max-width: 1400px;
}

.max-w-926px {
    max-width: 926px;
}

.arrow_down {
    height: 50px;
    width: 60px;
    display: flex;
}

.contBottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    bottom: 10px;
}

.tecnologias-medida .contBottom div.w-full {
    justify-content: center;
}


#imgPrimera img.imgMainMobile {
    position: absolute;
    top: 49px;
    z-index: -1;
    width: 100vw !important;
    height: calc(100vh - 64px) !important;
}

.cuadro {
    height: 0px;
    width: 314px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 15px;
    background-image: url('../images/fondos/rectangulo_expandible.png');
    background-size: cover;
    z-index: 1;
    transition: .3s ease-in-out;
    overflow: hidden;
}

.cuadro img {
    justify-self: center;
    height: 40px;
}

.subCuadro {
    padding: 28px 26px 0 26px;
    color: var(--color-white);
    height: 87%;
}

/* .subCuadro p {
    font-size: 16px;
    line-height: 18px;
} */

.subCuadro p.txtCorto {
    font-size: 16px;
    line-height: 18px;
}

.noPadding {
    display: none !important;
}

.ind {
    transition: .3s ease-in-out;
    position: relative;
}

.ind:hover {
    transform: scale(1.05);
}

#cuadro_1,
#cuadro_2,
#cuadro_3,
#cuadro_4 {
    transition: .3s ease-in-out;
}

#tecnolgiasContainer {
    display: flex;
    flex-direction: column;
}


.bgRojo {
    background-color: red;
}

.contIndustriasLink {
    gap: 19px;
}

#contMockPasaste,
#contMockNestle {
    overflow: hidden;
}

.contMockNestle {
    padding-top: 64px;
}
#contMockPasaste>div {
    flex-direction: column;
    margin: 0px !important;
    row-gap: 30px;
    padding: 14px;
}

#contMockPasaste img {
    border-radius: 12px;
}

.paradigmasCont {
    display: grid;
    grid-template-rows: auto;
    gap: 10px;
    background-repeat: repeat-y;
    padding-bottom: 50px;
    background-repeat: no-repeat;
    justify-content: center;
    background-size: cover;
}

.paradigmasCont .cuadroCont {
    height: 108px;
    display: flex;
    border-radius: 20px;
    background-color: var(--color-brand-500);
    padding: 0 8px 0 15px;
    background-image: none;
    width: calc(100% - 44px);
    justify-content: space-between;
    justify-self: center;
    box-shadow: 0px 2px 3px 0px var(--color-black);
    align-items: center;
    transition: background-color .1s ease-in;
}

.paradigmasCont .cuadroCont:hover,
.paradigmasCont .cuadroCont:focus-visible {
    background-color: var(--color-ink-900);
}

.paradigmasCont>div:first-of-type {
    margin-top: 50px;
}


.paradigmasCont .cuadro>img {
    height: 70px;
    margin-left: 24px;
}

.paradigmasCont>img {
    position: absolute;
    height: 600px;
    z-index: -1;
}

.subCuadroCont {
    background-color: var(--color-white);
    background-image: none;
    width: calc(100% - 44px);
    height: 0px;
    justify-self: center;
    border-radius: 20px;
    padding: 0;
    transition: .4s ease-in;
    overflow: hidden;
    box-shadow: 0px 2px 3px 0px var(--color-black);
}

.subCuadroCont * {
    color: var(--color-black);
}

.subCuadroCont p.txt32 {
    line-height: 32px;
}

.subCuadroCont p.txtBlanco {
    line-height: 23px;
}

.subCuadroCont h2 {
    line-height: 23px;
}

.cuadro .imgDown {
    margin-right: 14px;
    transform: rotate(135deg);
}

#compromiso>li {
    margin-bottom: 18px;
    line-height: 17px;
}

#compromiso {
    list-style: unset;
}

#contPieVista {
    background-image: url('../images/fondos/fondo_estrellas.jpg');
}

#tecnolgiasContainer.somos-singulares>#imgPrimera {
    background-image: url(../images/fondos/fondo_index_desktop.webp);
    background-repeat: no-repeat;
}

#contenedorMain #tecnolgiasContainer.somos-singulares {
    background-image: url(../images/fondos/fondo-estrellas.webp);
    background-repeat: repeat-y;
    background-size: contain;
}

#contenedorMainReu {
    background-image: url(../images/fondos/fondo_index_desktop.webp);
}

#contenedorClientes {
    background: linear-gradient(229deg,var(--color-mist-103) 62%, var(--color-mist-109) 100%);
    padding-bottom: 300px;
}



#fila4_container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 64px;
}

#fila10_container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 64px;
}


#nuestroEquipoContainer {
    background-repeat: repeat-y;
    position: relative;
    background-size: contain;
    z-index: 2;
}

.perfilFoto {
    position: absolute;
    height: 161px;
    border-radius: 50%;
    top: 2px;
}

.perfilesContainer img.marco {
    height: 166px;
    width: 168px;
}

.perfilesContainer .descripcion {
    position: absolute;
    bottom: 0;
    color: var(--color-white);
    display: flex;
    flex-direction: column;
    font-family: 'figtree-light';
    font-size: 15px;
    line-height: 16px;
}

.perfilesContainer .descripcion * {
    text-align: center;
}

.perfilesContainer div.relative {
    height: 214px;
    width: 180px;
    justify-content: center;
    display: flex;
    margin-bottom: 55px;
}

.perfilesContainer {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: space-around;
    margin-top: 40px;
    margin-bottom: 80px;
}

#contPieVista {
    height: 600px;
    position: absolute;
    bottom: -585px;
    width: 100%;
}

#contactoForm {
    background-color: var(--color-mist-113);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    margin: -28px 20px 0 20px;
    padding: 50px 30px;
    justify-self: center;
}

#contactoForm p.boldAzul.txt16 {
    line-height: 18px;
}

label {
    display: block;
    margin-bottom: 4px;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-ink-900);
}

.inputComponent {
    background-color: var(--color-mist-100);
    border-radius: 4px;
    height: 34px;
    margin-top: 0;
    margin-bottom: 12px;
    width: 100%;
    padding: 8px 5px;
    box-sizing: border-box;
    border: none;
    font-size: 14px;
}

textarea.inputComponent,
.emojiComponent,
textarea {
    background-color: var(--color-mist-100);
    border-radius: 4px;
    width: 100%;
    box-sizing: border-box;
    border: none;
    padding: 8px 5px;
    font-size: 14px;
    font-family: inherit;
    resize: vertical;
}

.valueComponent {
    background-color: var(--color-mist-100);
    border-radius: 4px;
    height: 112px;
    width: 100%;
}

#valoracion {
   background-color: var(--color-mist-100);
    border-radius: 4px;
    height: 60px;
    margin-top: 4px;
    margin-bottom: 10px;
    width: 100%;
    padding-left: 5px;
}

.card {
    position: relative;
    display: flex;
    align-items: center;
    height: 370px;
    margin-top: 30px;
    margin-bottom: 60px;
    width: 100%;
    justify-self: center;
    border-radius: 20px;
    box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.15);
    background-color: var(--color-white);
    overflow: hidden;
}

.card > img.absolute {
    border-radius: 20px;
}

.cardReujl {
    box-shadow: 0px 2px 3px 0px var(--color-mist-115);
    border-radius: 16px;
}

.mapa {
    width: 100%;
    height: 550px;
}

.mapa iframe {
    width: 100%;
    height: 100%;
}

#contImgFontStrs img {
    border-radius: 500px 500px 0 0;
    position: absolute;
    width: inherit;
    height: inherit;
}

div#granulado,
.tecnologias-medida #contImgFontStrs,
#uxuiContainer #contImgFontStrs,
#desarrolloMedida #contImgFontStrs,
#ecommerceAContainer #contImgFontStrs,
.casos-exito #contImgFontStrs,
#ecommerceContainer #contImgFontStrs,
.transformacionDigital #contImgFontStrs {
    background-image: url('../images/fondos/estrellas.webp');
    background-repeat: no-repeat;
    background-size: cover;
    background-position-y: bottom;
    background-position-x: center;
}

#ecommerceAContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#imgPrimera>.contBottom>svg {
    height: 26px;
}




/* ESTILOS ESCRITORIO EN SU MAYORIA A PARTIR DE ACA */
.w-space4px {
    word-spacing: 4px;
}

.txt56px {
    font-size: 48px !important;
    line-height: 48px !important;
}

.txt48px {
    font-size: 32px !important;
    line-height: 32px !important;
    margin-bottom: 10px;
}


.txt44px {
    font-size: 31px;
    line-height: 31px;
}

.txt40px {
    font-size: 30px;
    line-height: 30px !important;
}

.txt34 {
    font-size: 24px !important;
    line-height: 26px !important;
}

#contactoAgendaTitulos {
    margin-top: 48px;
    margin-bottom: 48px;
}

.txt32 {
    font-size: 22px !important;
    line-height: 22px !important;
}

.txt26 {
    font-size: 20px !important;
    line-height: 22px !important;
}

.txt24 {
    font-size: 18px !important;
    line-height: 20px !important;
}

.txt22 {
    font-size: 17px !important;
    line-height: 18px !important;
}

.txt20 {
    font-size: 16px !important;
    line-height: 18px !important;
}

.txt19 {
    font-size: 19px !important;
    line-height: 21px !important;
}

.txt18 {
    font-size: 18px !important;
    line-height: 20px !important;
}

.txt16 {
    font-size: 16px !important;
    line-height: 16px !important;
}

#TituloPrincipal {
    margin-bottom: -2px;
}

/* navBarDesktop oculto en mobile (hasta 1023px) */
@media (max-width: 1023px) {
    #navBarDesktop {
        height: 0px;
        overflow: hidden;
    }
}

/* navBarDesktop visible en desktop (1024px+) */
@media (min-width: 1024px) {
    #navBarDesktop {
        justify-content: space-between;
        padding: 0 50px;
    }
}

@media (min-width: 1024px) {
    #itemsMenuCont {
        display: flex;
        align-items: center;
        user-select: none;
        height: 56px;
    }
}

#itemsMenuCont>button.dropd,
#itemsMenuCont>a.dropd {
    display: flex;
    cursor: pointer;
    align-items: center;
    height: inherit;
    border-radius: 33px;
    padding: 0 18px;
    transition: background-color 0.5s ease;
}

#itemsMenuCont>button.dropd:hover,
#itemsMenuCont>a.dropd:hover {
    color: var(--color-white);
}

#itemsMenuCont>button.dropd:hover>svg>path {
    stroke: var(--color-white);
}

#itemsMenuCont>button.dropd:hover,
#itemsMenuCont>a.dropd:hover {
    background-color: var(--color-brand-500);
}

#ideaunologoDesktop {
    height: 72px;
}

.contBottomDesktop {
    width: 60%;
    z-index: 0;
}

#imgPrimera img.absolute.visibleDesktop {
    top: 94px;
    z-index: 0;
    width: 100vw !important;
    height: calc(100vh - 94px) !important;
}

#contIndustriasDesktop,
#industriasSlideDesktop,
.scroll_container,
#asesoriaSlideDesktop {
    height: 80vh;
    width: 100%;
}

#asesoriaSlideDesktop {
    background-color: red !important;
    flex-direction: column;
    justify-content: center;
}

#asesoriaSlideDesktop>div:first-child {
    overflow-x: scroll;
}

#asesoriaSlideDesktop .flex.flex-row {
    width: 550px;
}

#industriasSlideDesktop {
    display: none;
    justify-content: center;
    align-items: center;
    background-color: var(--color-white);
    height: auto;
    min-height: 80vh;
    padding: 60px 0;
}

#contIndustriasDesktop {
    display: none;
    justify-content: center;
    align-items: center;
    position: -webkit-sticky;
    position: sticky;
}

#contCajasDesktop {
    grid-template-columns: auto;
    gap: 15px;
    grid-template-rows: auto auto;
    padding: 15px;
    background-color: var(--color-mist-114);
    border-radius: 10px;
}

#contCuadrosDesktop {
    grid-template-columns: 330px 330px;
    gap: 15px;
    grid-template-rows: 90px 90px;
}

.cajaBlanca a {
    color: var(--color-brand-500);
}

.tarjetas {
    display: grid;
    grid-template-columns: 300px 300px;
    gap: 30px;
    margin-left: 70px;
    grid-template-columns: repeat(2, 1fr);
    flex-shrink: 0;
    transition: 5s ease-in-out;
    height: 375px;
}

.tarjetas .frontal {
    height: 375px;
    width: 307px;
    border-radius: 28px;
    transition: 0.5s ease-in-out;
    transform: rotateY(0deg);
    cursor: pointer;
}

.tarjetas .frontal:hover {
    
    opacity: 25%;
    transition: 0.2s ease-in-out;
}

.tarjetas .frontal>div {
    height: 375px;
    width: 307px;
    border-radius: 28px;
    transition: 0.2s ease-in-out;
    transform: rotateY(0deg);
}

.tarjetas img,
.tarjetas .subTarjeta {
    transition: 0.5s ease-in-out;
}

.tarjetas .subTarjeta {
    transform: rotateY(90deg);
}

.tarjetas p.txtCorto {
    position: absolute;
    bottom: 18px;
    color: var(--color-white);
    text-align: center;
    width: 100%;
}

#contTarjetasDesktop {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-self: center;
    gap: 40px;
}

.industrias-slider-nav {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.industrias-slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    border: none;
    background-color: var(--color-ink-900);
    color: var(--color-white);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease, transform 0.2s ease;
    z-index: 3;
}

.industrias-slider-btn:hover {
    background-color: var(--color-brand-500);
}

.industrias-slider-btn.prev {
    left: -60px;
}

.industrias-slider-btn.next {
    right: -60px;
}

.slider-container {
    width: 646px;
    overflow: hidden;
    position: relative;
    border-radius: 28px;
}

.slider {
    display: flex;
    flex-direction: column;
    padding: 6px;
}

/*
 * Base para opcion B (autoplay por CSS).
 * No afecta el comportamiento actual hasta agregar la clase
 * "css-autoplay-ready" a #cont-industrias-desktop.
 */
#cont-industrias-desktop.css-autoplay-ready {
    /* Nunca mas chico que 1288px (el piso 1032px original + 256px, para que
       cada una de las 4 tarjetas gane al menos 64px de ancho total, 32px por
       lado); crece con el viewport en pantallas anchas para aprovechar el
       espacio libre a los costados, hasta un tope de 1536px. */
    width: clamp(1288px, calc(66vw + 256px), 1536px);
    /* Pisa el border-radius:28px de .slider-container (base, compartido con
       la pagina de tecnologias por industria): sin esto, el recorte
       (overflow:hidden) de la ventana del slider deja las esquinas
       exteriores de la primera/ultima tarjeta con un radio mayor al 12px
       de las tarjetas mismas. */
    border-radius: 12px;
    --industria-cycle-duration: 4s;
    --industria-cycle-easing: cubic-bezier(0.2, 0, 0.5, 1);
    --industria-enter-x: 1000px;
    --industria-exit-x: -750px;
}

#cont-industrias-desktop.css-autoplay-ready .slider {
    position: relative;
    min-height: 550px;
}

/* 4 tarjetas por vista en vez de 2. El ancho de cada tarjeta ahora es fluido
   (ver .frontal mas abajo, 100% de la columna del grid) para acompañar el
   ancho variable del contenedor; el alto queda fijo en 550px, suficiente
   para que el texto mas largo (Laboratorios) quepa completo sin scroll
   incluso en el ancho de columna mas angosto (~243px, en el piso de 1032px). */
#cont-industrias-desktop.css-autoplay-ready .tarjetas {
    height: 550px;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

#cont-industrias-desktop.css-autoplay-ready .tarjetas .frontal,
#cont-industrias-desktop.css-autoplay-ready .tarjetas .frontal > div {
    height: 100%;
    width: 100%;
    /* Pisa el border-radius:28px compartido con la pagina de tecnologias
       por industria (no afecta a esa pagina, que no usa css-autoplay-ready). */
    border-radius: 12px;
}

/* Las imagenes de fondo estaban pensadas para el tamaño anterior (307x375);
   con la tarjeta mas grande necesitan cubrir el nuevo alto/ancho. */
#cont-industrias-desktop.css-autoplay-ready .tarjetas .frontal > div {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* El ciclo (entrar/mantener/salir) ya no lo maneja un @keyframes: una
   animacion de CSS siempre gana por sobre una transition en la misma
   propiedad, asi que no habia forma de que esta transition suavizara nada
   mientras la animacion seguia corriendo. Ahora todo el movimiento (auto y
   manual) lo dirige el JS del slider vía estilos inline, y esta transition
   es la que efectivamente anima esos cambios. */
#cont-industrias-desktop.css-autoplay-ready .tarjetas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    margin-left: 0;
    opacity: 0;
    pointer-events: none;
    transform: translate3d(var(--industria-enter-x), 0, 0);
    will-change: transform, opacity;
    transition: opacity 0.6s var(--industria-cycle-easing), transform 0.6s var(--industria-cycle-easing);
}

#cont-industrias-desktop.css-autoplay-ready .tarjetas.is-active {
    pointer-events: auto;
}

#cont-industrias-desktop.css-autoplay-ready .tarjetas.is-active .frontal {
    pointer-events: none;
    position: relative;
    overflow: hidden;
}

/* El frontal de una tarjeta puntual se habilita (no toda la pareja): durante la ventana
   de hover del autoplay, o en cualquier momento si la pareja esta pausada porque la
   tarjeta hermana tiene el detalle abierto. Asi la tarjeta hermana sigue siendo
   clickeable/hover-able mientras la otra muestra su detalle. */
#cont-industrias-desktop.css-autoplay-ready .tarjetas.is-active:is(.is-hover-enabled, .is-detail-open) .relative:not(.card-flip--open) .frontal {
    pointer-events: auto;
    position: relative;
}

/* Neutraliza el hover global en el slider CSS */
#cont-industrias-desktop.css-autoplay-ready .tarjetas .frontal:hover {
    opacity: 1;
    transition: none;
}

/* Senal visual de clickeable: capa oscura semitransparente + boton centrado */
#cont-industrias-desktop.css-autoplay-ready .tarjetas.is-active:is(.is-hover-enabled, .is-detail-open) .relative:not(.card-flip--open) .frontal p.txt20 {
    z-index: 2;
}

#cont-industrias-desktop.css-autoplay-ready .tarjetas.is-active:is(.is-hover-enabled, .is-detail-open) .relative:not(.card-flip--open) .frontal::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.55);
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}

#cont-industrias-desktop.css-autoplay-ready .tarjetas.is-active:is(.is-hover-enabled, .is-detail-open) .relative:not(.card-flip--open) .frontal::after {
    content: "Ver más";
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    transform: translate(-50%, -50%);
    padding: 10px 28px;
    border: 1px solid var(--color-gray-220);
    border-radius: 999px;
    color: var(--color-gray-220);
    font-family: 'figtree';
    font-size: 14px;
    letter-spacing: 0.02em;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}

#cont-industrias-desktop.css-autoplay-ready .tarjetas.is-active:is(.is-hover-enabled, .is-detail-open) .relative:not(.card-flip--open) .frontal:hover::before,
#cont-industrias-desktop.css-autoplay-ready .tarjetas.is-active:is(.is-hover-enabled, .is-detail-open) .relative:not(.card-flip--open) .frontal:hover::after {
    opacity: 1;
}

#cont-industrias-desktop.css-autoplay-ready .tarjetas:not(.is-active) .frontal {
    pointer-events: none;
}

#cont-industrias-desktop.css-autoplay-ready .tarjetas .subTarjeta {
    pointer-events: none;
}

/* Transicion natural entre frontal y detalle (crossfade + escala),
   reemplaza el flip 3D por algo mas suave. */
#cont-industrias-desktop.css-autoplay-ready .tarjetas .frontal,
#cont-industrias-desktop.css-autoplay-ready .tarjetas .subTarjeta {
    transform: none;
    transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1), transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

#cont-industrias-desktop.css-autoplay-ready .tarjetas .subTarjeta {
    opacity: 0;
    transform: scale(1.04);
}

#cont-industrias-desktop.css-autoplay-ready .tarjetas .relative.card-flip--open .frontal {
    opacity: 0;
    transform: scale(0.96);
    pointer-events: none;
}

#cont-industrias-desktop.css-autoplay-ready .tarjetas .relative.card-flip--open .subTarjeta {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

/* Detalle de industria: tarjeta clara con borde/glow degradé, titulo, bajada,
   imagen (placeholder por ahora) y parrafos. Version escalada del diseño de
   Figma para caber en el tamaño actual de la tarjeta (307x375). */
#cont-industrias-desktop.css-autoplay-ready .tarjetas .subTarjeta {
    background:
        linear-gradient(180deg, var(--color-mist-105) 0%, var(--color-white) 65%) padding-box,
        linear-gradient(160deg, var(--color-mist-121) 0%, var(--color-mist-118) 100%) border-box;
    border: 2px solid transparent;
    border-radius: 12px;
    box-shadow: 0 0 14px rgba(148, 191, 255, 0.35);
    padding: 20px 16px 14px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-y: auto;
    overflow-x: hidden;
}

#cont-industrias-desktop.css-autoplay-ready .tarjetas .subTarjeta-title {
    font-family: 'figtree';
    font-weight: 500;
    font-size: 24px;
    letter-spacing: -0.02em;
    color: var(--color-brand-500);
    text-align: center;
    margin: 0;
    flex-shrink: 0;
}

#cont-industrias-desktop.css-autoplay-ready .tarjetas .subTarjeta-subtitle {
    font-size: 16px;
    color: var(--color-ink-900);
    text-align: center;
    margin: 2px 0 0;
    flex-shrink: 0;
}

#cont-industrias-desktop.css-autoplay-ready .tarjetas .subTarjeta-img {
    width: 152px;
    height: 116px;
    object-fit: contain;
    margin: 12px 0;
    flex-shrink: 0;
}

#cont-industrias-desktop.css-autoplay-ready .tarjetas .subTarjeta-body {
    width: 100%;
}

#cont-industrias-desktop.css-autoplay-ready .tarjetas .subTarjeta p.descripcionCard {
    width: 100%;
    margin: 0 0 6px;
    padding: 0;
    text-align: left;
    color: var(--color-gray-600);
    font-size: 14px;
    line-height: 18px;
}

#cont-industrias-desktop.css-autoplay-ready .tarjetas .subTarjeta p.descripcionCard:last-child {
    margin-bottom: 0;
}

#cont-industrias-desktop .industrias-pager {
    width: 100%;
    margin-top: 24px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 9px;
    padding-right: 6px;
    padding-bottom: 24px;
}

#cont-industrias-desktop.css-autoplay-ready .industrias-pager {
    justify-content: center;
    padding-right: 0;
}

/* Mismo estilo de puntos oscuros que la seccion de opiniones. */
#cont-industrias-desktop .industrias-pager-dot {
    width: 8px;
    height: 8px;
    border: 0;
    border-radius: 999px;
    background-color: var(--color-overlay-black-60);
    cursor: pointer;
    padding: 0;
    transition: background-color 0.2s ease;
}

#cont-industrias-desktop .industrias-pager-dot.is-active {
    background-color: var(--color-ink-900);
}

.scroll_container img.mas {
    height: 70px;
}

.horizontal_scroll div.flex.flex-col {
    justify-content: center;
    min-width: 530px !important;
}

.horizontal_scroll div.flex.flex-col p {
    width: 52%;
    line-height: 20px;
    margin-top: 16px;
}

#asesoriaSlideDesktop {
    display: flex;
    align-items: center;
    position: sticky;
}

#asesoriaSlideDesktop>div {
    height: 400px;
}

.outer {
    overflow-x: scroll;
    width: 100%;
    position: sticky;
    top: 70px;
}

.outer .inner {
    width: 4000px !important;
}

.scroll_container {
    height: 400vh;
    display: none;
}

.horizontal_scroll {
    position: absolute;
    height: 100%;
    width: 160vw;
    will-change: transform;
    display: flex;
    justify-content: space-between;
    padding-left: 18vw;
}

.scroll_contents {
    height: 400px;
    width: 100vw;
}

.sticky_wrap {
    overflow: hidden;
    position: sticky;
    top: 170px;
    height: 100vh;
    height: 340px;
    background-color: var(--color-white);
}

#bajo {
    position: sticky;
    top: 415px;
}

#scrollProgressBajo {
    position: absolute;
    left: 50%;
    bottom: 32px;
    width: min(980px, 90vw);
    height: 8px;
    margin-top: 32px;
    transform: translateX(-50%);
    border-radius: 999px;
    background-color: var(--color-mist-111);
    overflow: hidden;
    pointer-events: none;
    z-index: 2;
}

#scrollProgressBajoFill {
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, var(--color-brand-500) 0%, var(--color-mist-120) 100%);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.12s linear;
}

#bajoo {
    position: relative;
}

.visibleDesktop,
#imgTech,
#imgServ,
#equipoDesktop,
#imgComosomosDesktop {
    display: none;
}

.img-desarrollo-medida-d-wrap {
    height: 312px;
    width: 100vw;
    overflow: hidden;
}

.img-desarrollo-medida-d {
    margin-top: -52px;
    width: 100vw;
}

#desarrolloMedida .img-desarrollo-medida {
    border-radius: 40px;
}

.caja-desktop {
    height: 530px;
    width: 400px;
    background-color: var(--color-white);
    border-radius: 30px;
    box-shadow: 2px 2px 2px 0px var(--color-gray-750);
    transition: .25s ease-in-out;
}

.cajas-container {
    display: grid;
    flex-direction: row;
    justify-content: center;
    column-gap: 23px;
}

.rotate90deg {
    opacity: 0;
}

.bgBlanco {
    background-color: var(--color-white) !important;
}

.bgBlanco>a {
    color: var(--color-brand-500) !important;
}

.img-bajo-1,
.img-bajo-2 {
    position: absolute;
}

/* Ambas imágenes son position:absolute, así que no aportan altura a su
   contenedor .visibleDesktop.relative. Sin esto, el contenedor colapsa a
   height:0 y las imágenes quedan flotando sobre el contenido siguiente
   en vez de ocupar su propio espacio en el layout. */
.cont-bajo .visibleDesktop.relative {
    min-height: 483px;
}

.img-bajo-1 {
    top: -100px;
    left: 72px;
    height: 250px;
    z-index: 1;
}

.img-bajo-2 {
    top: 23px;
    left: 142px;
    height: 460px;
}

#ecommerceContainer>div>div div.subcuadro-container {
    padding-left: 18px;
}

.contSubCaja {
    display: flex;
    flex-direction: column;
}

.img-num {
    height: 50px;
}

.tecnologias-medida #contIndustrias {
    display: flex;
}

.tecnologias-medida #cont-industrias-desktop {
    display: none;
    overflow: hidden;
}

.tecnologias-medida .contSubCaja:nth-of-type(2) {
    margin-top: 80px;
    margin-bottom: 70px;
}

#navBarDesktop #itemsMenuCont div.subListaCont {
    overflow: hidden;
    transition: .2s ease-in;
    top: 100%;
    margin-top: 0;
    width: auto;
}

.calendarAgenda {
    margin-right: 8px;
    margin-left: 8px;
}

#navBarDesktop #itemsMenuCont a.flex.px-4.py-2 {
    flex-wrap: nowrap;
    width: max-content;
}

.caja-card-fuera {
    width: 100%;
    display: flex;
    justify-content: center;
}

#cont-mapa {
    display: flex;
    flex-direction: column;
    width: 100%;
}

#cont-mapa img {
    height: 50px;
}

.sub-cont-footer {
    display: flex;
    flex-direction: column;
}

#cont-teamwork-desktop>img {
    margin: 70px 0 40px 0;
    border-radius: 100px;
}

#equipo-desktop>img {
    margin: 0 0 180px 0;
    border-radius: 100px;
}

#casos-cont #casosContainer>div:first-of-type {
    margin-top: 50px;
}

.casos-exito #casosContainer>div:first-of-type {
    margin-top: 80px;
}

.somos-singulares #equipo-desktop {
    width: 100%;
    display: flex;
    justify-content: center;
}

#equipo-desktop>img {
    margin: 0px;
    border-radius: 0px;
    width: 100%;
}

.casos-exito>div:nth-child(4) {
    margin-top: 100px;
}

.border20px {
    border-radius: 20px;
}

.border12px {
    border-radius: 12px;
}

.tituloModalPoliticas {
    text-align: start !important;
}

.modalPoliticas {
    padding-bottom: 24px;
}

.btnAzul.btnConfirm {
    padding: 0 46px;
    border: none;
}

.btnAzul.btnConfirm:hover {
    background-color: var(--color-error-450);
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    border: none;
}

#socios-estrategicos>div>div {
    margin-top: 50px;
}

.Gracias_contacto {
    font-size: 40px;
    font-weight: 300;
}

.Ing_preventa {
    font-size: 24px;
}

.subTarjeta {
    height: 100%;
    width: 100%;
    border-radius: 28px;
    background-color: rgb(247, 247, 247);
    position: absolute;
    top: 0px;
    box-shadow: 0px 0px 14px -11px var(--color-black);
    padding-top: 18px;
    cursor: pointer;
}

.subTarjeta p.txtCorto,
.subTarjeta h3.descripcionCard {
    position: relative !important;
    width: 307px;
    padding: 0 14px;
    text-align: start;
    color: rgb(26, 26, 26);
    line-height: 16px;
}

#cont-industrias-desktop {
    width: 656px;
}

#cont-industrias-desktop .tarjetas {
    transition: 0.1s cubic-bezier(0, 0, 0.51, 0.97);
}

#cont-industrias-desktop .tarjetas p.txt20 {
    position: absolute;
    bottom: 20px;
    justify-self: center;
    color: var(--color-white);
}

#formContacto>div>div {
    height: 20px;
}

#formContacto>div>div span {
    display: block;
    height: 20px;
    font-size: 13px;
}

.pie {
    font-size: 12px;
}

.p-10px {
    padding: 10px !important;
}

.modalLigthbox {
    padding-bottom: 0px;
    width: auto;
    max-width: 1280px;
}

img.lightbox {
    border-radius: 14px;
}

.iUno_gandalf {
    border-radius: 12px;
    margin-bottom: 32px;
}

.wrap__FVQz2 {
    margin-bottom: 40px !important;
}

.pb-30px {
    padding-bottom: 30px;
}

.modalEnviando div.swal2-loader {
    animation: swal2-rotate-loading 2s linear 0s infinite normal;
    border-width: .45em;
}


#formModal {
    text-align: start;
    padding-top: 32px;
    padding-bottom: 32px;
    background-color: rgba(15, 15, 38, 0.6);
    backdrop-filter: blur(2px);
    overflow-x: hidden;
}

#formModal2 {
    text-align: start;
    padding-top: 32px;
    padding-bottom: 32px;
    background-color: rgba(15, 15, 38, 0.6);
    backdrop-filter: blur(2px);
    overflow-x: hidden;
}

#tarjetaFormulario {
    background-color: var(--color-mist-112);
    border-radius: 20px;
}

.inhabilitadoBtn {
    background-color: var(--color-gray-760);
    color: var(--color-gray-700);
}

#cardIdeaUno p.h2Main {
    line-height: 38px;
}

#encuestaOpinion {
    margin-top: 164px;
    margin-bottom: 164px;
    text-align: start;
    padding-top: 32px;
    padding-bottom: 32px;
    background-color: var(--color-mist-112);
    border-radius: 20px;
    overflow-x: hidden;
}

.icon-row {
        display: flex;
        gap: 8px; /* Espacio entre los botones */
        align-items: center; /* Alinea los íconos verticalmente */
        background-color: var(--color-mist-100);
    }

.value-row {
    display: flex;
        gap: 4px; /* Espacio entre los botones */
        align-items: center; /* Alinea los íconos verticalmente */
        background-color: var(--color-mist-100);
}

.btn-icon {
    background: none;
    border: none;
    cursor: pointer;
    transition: transform 0.2s;
}

.btn-icon:hover {
    transform: scale(1.1);

}

.btn-icon img {
    display: block;
}

.valoracion-btn img {
    transition: all 0.3s ease;
}


.icon-row:has(.valoracion-btn.active) .valoracion-btn:not(.active) img {
    filter: grayscale(100%);
    opacity: 0.6;
}

.valoracion-btn.active img {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.1);
}

.recomendacion-btn img {
    transition: all 0.3s ease;
}

.value-row:has(.recomendacion-btn.active) .recomendacion-btn:not(.active) img {
    filter: grayscale(100%);
    opacity: 0.6;
}

.recomendacion-btn.active img {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.1);
}


button svg {
    pointer-events: none;
}


.grid-2-columns {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    max-width: 800px;
    margin: 0 auto; /* Centra el contenedor */
    justify-items: center; /* Centra horizontalmente cada imagen */
    align-items: center; /* Centra verticalmente cada imagen */
    margin-top: 64px;
    margin-bottom: 64px;
}

.grid-2-columns img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.img_hover {
    transition: transform 0.3s ease;
}

.img_hover:hover {
    transform: scale(1.05);
    transition: transform 0.3s ease;
}

/* Right column image for hero desktop CTA */
.img-right-cta {
    width: 360px;
    height: auto;
    object-fit: contain;
    transition: transform 0.15s ease-out;
    will-change: transform;
}

.contBottomDesktop-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-radius: 24px;
    padding: 48px 88px;
    box-shadow: 0 2px 1px rgba(31,38,57,0.15);
    box-sizing: border-box;
    margin: 0 -64px;
}

@media (max-width: 991px) {
    .img-right-cta {
        display: none;
    }
    .contBottomDesktop-inner {
        flex-direction: column;
        align-items: center;
    }
    .cta-right { display: none; }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}



.cards-seguridad {
    flex-direction: column;
    align-items: center;
    justify-content: center !important;
    gap: 24px;
    width: 100%;
    padding: 0 24px;
    box-sizing: border-box;
}

.card-seg-wrap {
    width: 100%;
    max-width: 400px;
}

/* Mobile (sin flex-direction: row, ver mediaQueries.css min-width:768px):
   las tarjetas de auditoria (Ley 21.663 / Ley 21.719, IDEA UNO vs consultoria
   tradicional) deben ocupar toda la columna, con solo 8px de margen lateral.
   El wrapper .mx-auto que envuelve ambas filas de tarjetas ya trae
   padding:0 40px inline (ver ciberseguridad-proteccion-datos.blade.php); ese
   padding se cancela con margin negativo y se reemplaza por los 8px reales. */
@media (max-width: 767px) {
    .cards-seguridad {
        width: calc(100% + 80px);
        margin-left: -40px;
        margin-right: -40px;
        padding: 0 8px;
        box-sizing: border-box;
    }
}

.cards-seguridad--equal-height {
    align-items: stretch;
}

.cards-seguridad--equal-height .card-seg-wrap {
    display: flex;
    flex: 1;
}

.cards-seguridad--equal-height .card-seg-wrap > div {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.cards-seguridad--equal-height .card-seg-wrap .card-icon {
    width: 160px;
    height: 160px;
    object-fit: contain;
    margin: 0 auto 24px;
    display: block;
}

/* Hover visual: cuando se pasa el mouse sobre el conjunto, la tarjeta no seleccionada recibe
   un filtro blanco suave como 'guiño' visual. La tarjeta sobre la que está el puntero
   se eleva ligeramente. */
.cards-seguridad--equal-height .card-seg-wrap > div {
    position: relative;
    transition: transform 260ms ease, box-shadow 260ms ease;
}

.cards-seguridad--equal-height .card-seg-wrap > div::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0);
    border-radius: inherit;
    transition: background-color 300ms ease;
    pointer-events: none;
    z-index: 4;
}

.cards-seguridad--equal-height .card-seg-wrap > div * {
    position: relative;
    z-index: 1;
}

/* Aplicar overlay blanco a las tarjetas que NO están en :hover, pero solo cuando el cursor
   está realmente sobre alguna tarjeta (no sobre el espacio vacío del contenedor). */
.cards-seguridad--equal-height:has(.card-seg-wrap:hover) .card-seg-wrap:not(:hover) > div::after {
    background: rgba(255,255,255,0.45);
}

/* Pequeña elevación del card hovered para acentuar el efecto */
.cards-seguridad--equal-height .card-seg-wrap:hover > div {
    transform: translateY(-6px);
    box-shadow: 0 10px 30px rgba(31,38,57,0.12);
    z-index: 6;
}

/* small check icon reused inside lists */
.card-check {
    height: 22px;
    flex-shrink: 0;
    margin-top: 2px;
}

/* CTA estilo iridiscente, fondo celeste-lila suave, texto oscuro */
.cta-cumplimiento {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    /* avoid collision with preceding section */
    margin-top: 28px;
    /* padding per request */
    padding: 12px;
    /* removed outer border; keep rounded corners */
    border-radius: 12px;
    background: linear-gradient(135deg, var(--color-mist-108) 0%, var(--color-mist-122) 100%);
    /* shadow: 2px vertical, 1px blur, blue-gray at 25% opacity */
    box-shadow: 0 2px 1px rgba(31,38,57,0.25);
}

.cta-cumplimiento .cta-content h2,
.cta-cumplimiento .cta-subtext {
    color: var(--color-ink-800); /* texto oscuro */
}

.cta-cumplimiento .cta-action .btnEstandar {
    /* no override heavy styles; ensure visible on light background */
    background-color: var(--color-brand-500);
    color: var(--color-white);
    /* menos ancho: sobraba espacio horizontal a los lados del texto/flecha */
    padding-left: 20px;
}

.cta-cumplimiento .cta-action .btnEstandar:has(svg) {
    padding-right: 16px;
}

/* Hover en azul oscuro con texto y flecha blancos, en vez del hover generico
   de .btnEstandar (fondo blanco/texto azul, que ademas dejaba la flecha
   blanca invisible sobre fondo blanco). */
.cta-cumplimiento .cta-action .btnEstandar:hover {
    background-color: var(--color-ink-900);
    color: var(--color-white);
}

.cta-cumplimiento .cta-action .btnEstandar:hover svg path {
    fill: var(--color-white);
}

/* Boton "Saber mas" de la seccion de ciberseguridad del home: oscuro por defecto
   (en vez del outline transparente de .btnEstandarBlanco), con el hover tipico
   invertido (fondo blanco, texto azul) que ya usan los demas botones .btnEstandar.
   Escopado por id para no afectar otros .btnEstandarBlanco dentro de .cta-cumplimiento
   (ej. "Descarga nuestro brochure" en la tarjeta de agenda del home). */
#cumplimientoNormativoIndex .cta-action .btnEstandarBlanco {
    background-color: var(--color-ink-900);
    border-color: var(--color-ink-900);
    color: var(--color-white);
}

#cumplimientoNormativoIndex .cta-action .btnEstandarBlanco:hover {
    background-color: var(--color-white);
    color: var(--color-brand-500);
}

/* placeholder icon block above heading */
.cta-icon {
    width: 124px;
    height: 124px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-mist-116), var(--color-mist-123));
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    box-shadow: 0 4px 2px rgba(66, 81, 122, 0.3);
    justify-self: center;
}

.cta-icon img {
    width: 90px;
    height: 90px;
    object-fit: contain;
    display: block;
    box-shadow: 0 6px 18px rgba(31,38,57,0.06) outside;
}

.card-body  {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 36px;
    position: relative;
    height: auto;
    padding-top: 24px;
    padding-bottom: 24px;
    margin-top: 30px;
    margin-bottom: 60px;
    width: 100%;
    max-width: 100%;
    justify-self: center;
}

/* Herramientas: reset márgenes negativos en tablet/mobile */
@media (max-width: 1023px) {
    #herramientasCont img[style*="margin-top"],
    #herramientasCont img[style*="margin-left"] {
        margin-top: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* Animación de entrada "desde la izquierda": promovida a global (antes vivía
   solo en el <style> de index.blade.php) para poder aplicar la misma clase,
   con el mismo trigger (IntersectionObserver, ver layout.blade.php) y el
   mismo timing, en cualquier vista del sitio. */
.servicios-slide-left {
    opacity: 0;
    transform: translateX(-48px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.servicios-slide-left--visible {
    opacity: 1;
    transform: none;
}