.customize-support .fixed-top {
    top: 32px !important;
}

.wpcf7-spinner {
    position: absolute !important;
    top: 13px;
    right: 10px;
}

.wpcf7 form.sent .wpcf7-response-output {
	background-color: #46b450; /* Green */
    margin: 10px 0;
}

.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
	background-color: #dc3232; /* Red */
    color: #ffffff;
    margin: 10px 0;
}

.wpcf7 form.spam .wpcf7-response-output {
	background-color: #f56e28; /* Orange */
    margin: 10px 0;
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
	background-color: #ffb900; /* Yellow */
    margin: 10px 0;
}

#mainNav {
    transition: background-color 0.3s ease, color 0.3s ease;
}
#mainNav .nav-link{
    color: var(--white) !important;
}
#mainNav .nav-item{
  color: var(--white) !important;
}
#mainNav .nav-link:hover{
  color: var(--white) !important;
  font-weight: 600;
}
#mainNav .logo-head{
  height: 60px;
}
#mainNav.scrolled {
    background-color: rgba(4, 53, 114, 0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
#mainNav .logo-head {
    scale: 1;
    transition: 0.3s all ease-in-out;
}
#mainNav.scrolled .logo-head {
    scale: 1.1;
    transition: 0.3s all ease-in-out;
}
.btn-part{
    background-color: var(--warning)!important;
    border: var(--white) 1px solid!important;
    color: white!important;
    text-transform: none !important;
    border-radius: 0.8rem!important;
}
.btn-part:hover{
    background-color: var(--dark)!important;
    border: var(--white) 1px solid!important;
    color: white!important;
    text-transform: none !important;
    font-weight: 600;
}
.bg-menu{
    background-color: transparent;
}
.dropdown-menu{
    background-color: rgba(247, 247, 247, 0.5)!important;
    border: #fff 1px solid;
    border-radius: 1rem;
}
.section {
  padding-top: 6rem;
  padding-bottom: 6rem;
}

a {
  text-decoration: none;
  color: inherit;
}
.z-4 {
  z-index: 4 !important;
}
.dropdown-menu[data-bs-popper] {
    left: auto!important;
    right: auto!important;
}

.header-inicio {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-repeat: no-repeat;
    background-size: cover;
}

.overlay-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, #01142af9 44%, #01142a40 50%);
    z-index: 1;
}

.overlay-header-2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, #01142af9 10%, #01142a40 20%);
    z-index: 2;
}

.hero {
    position: relative;
    width: 100%;
    overflow: hidden;
    background-repeat: no-repeat;
    background-size: cover;
}

.overlay-hero {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, #01060ef9 44%, #032b2040 50%);
    z-index: 1;
}


.overlay-hero-2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, #01060ef9 10%, #032b2040 20%);
    z-index: 2;
}
.hero-form {
    position: relative;
    width: 100%;
    overflow: hidden;
    min-height: 80vh;
    background-repeat: no-repeat;
    background-size: cover;
}
.overlay-hero-form {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, #071d36d9 40%, #10274170 80%);
    z-index: 1;
}

.btn-violet{
    background-color: #c7bfe5!important;
    border: #c7bfe5 1px solid!important;
    color: #443777!important;
    border-radius: 0.8rem!important;
}
.btn-violet:hover{
    background-color: #443777!important;
    border: #c7bfe5 1px solid!important;
    color: #c7bfe5!important;
    font-weight: 600;
}

.btn-violet svg.icon-btn-scale{
    fill: #443777!important;
    scale: 1;
    transition: all ease-in-out 0.3s;
}
.btn-violet:hover svg.icon-btn-scale{
    fill: #c7bfe5!important;
    scale: 1.2;
    transition: all ease-in-out 0.3s;
}

.overlay-header-about {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, #30245fde 44%, #362b5f87 50%);
    z-index: 1;
}
.card-about{
    background-color: #443777 !important;
    transition: all ease-in-out 0.3s;
}
.card-about:hover{
    background: linear-gradient(to bottom, #011f17f9 0%, #443777da 90%);
    transition: all ease-out 0.3s;
}
.card-about-2{
    background-color: #443777 !important;
    transition: all ease-in-out 0.3s;
}
.card-about-2:hover{
    background: linear-gradient(to bottom, #011f17f9 0%, #443777da 90%);
    transition: all ease-out 0.3s;
}

.text-violet {
    color: #c3b5fc !important;
}
.text-violet-dark {
    color: #443777 !important;
}
.bg-violet-soft {
    background-color: #c7bfe5 !important;
}
.text-violet-soft {
    color: #c7bfe5 !important;
}
.border-violet {
    border-color: #c7bfe5 !important;
}
.bg-violet-dark {
    background: linear-gradient(to right, #03172df9 0%, #443777ec 90%)
}

.card-exp .card-header img{
    max-height: 55px;
    transition: all ease-out 0.3s;
}
.card-exp:hover .card-header img{
    scale: 1.1;
    transition: all ease-out 0.3s;
}
.card-exp .card-header h6{
    font-weight: 400;
    transition: all ease-out 0.3s;
}
.card-exp:hover .card-header h6{
    font-weight: bold;
    transition: all ease-out 0.3s;
}
.card-exp .card-body p{
    font-weight: 400;
    transition: all ease-out 0.3s;
}
.card-exp:hover .card-body p{
    font-weight: bold;
    transition: all ease-out 0.3s;
}

.bg-iconos-header {
    background-color: #0c4e9e4a;
}

.w-fit{
    width: fit-content;
}

input, textarea, select {
    color: var(--white) !important;
}
select option {
    color: var(--dark) !important;
}

input::placeholder, textarea::placeholder{
    color: var(--white) !important;
}

.form-control:focus {
    box-shadow: none !important;
    outline: none !important;
}
.form-control, select {
    background-color: rgba(235, 235, 235, 0.486)!important;
    backdrop-filter: blur(12px)!important;
    -webkit-backdrop-filter: blur(12px)!important;
}
.card-home-1{
    background-color: var(--secondary);
    transition: all ease-in-out 0.3s;
}
.card-home-1:hover{
    background: linear-gradient(to bottom, #011f17f9 0%, #032b20da 90%);
    transition: all ease-out 0.3s;
}
.card-home-2{
    background-color: var(--primary);
    transition: all ease-in-out 0.3s;
}
.card-home-2:hover{
    background: linear-gradient(to bottom, #01142af9 0%, #0c4e9eec 90%);
    transition: all ease-out 0.3s;
}
.card-home-3{
    background-color: var(--dark);
    transition: all ease-in-out 0.3s;
}
.card-home-3:hover{
    background: linear-gradient(to bottom, #01142af9 0%, #0a2444ec 75%);
    transition: all ease-out 0.3s;
}
.card-home-4{
    background-color: #443777 !important;
    transition: all ease-in-out 0.3s;
}
.card-home-4:hover{
    background: linear-gradient(to bottom, #011f17f9 0%, #443777da 90%);
    transition: all ease-out 0.3s;
}

.hidden {
    display: none;
}

.card-case{
    background: linear-gradient(to top, #00150ff9 0%, #021b14da 80%);
    border: var(--success) 1px solid!important;
    border-radius: 1rem;
    transition: all ease-in-out 0.4s;
}
.card-case:hover{
    background: linear-gradient(to top, #01142af9 0%, #0c4e9eec 80%);
    border: var(--primary) 1px solid!important;
    border-radius: 1rem;
    transition: all ease-in-out 0.4s;
}
.card-case h5{
    transition: all ease-in-out 0.4s;
    color: var(--success)!important;
}
.card-case:hover h5{
    transition: all ease-in-out 0.4s;
    color: var(--white)!important;
    font-weight: 600;
}
.card-case:hover .text-color-case{
    transition: all ease-in-out 0.4s;
    color: var(--white)!important;
    font-weight: 600;
}
.card-case .text-color-case{
    transition: all ease-in-out 0.4s;
    color: var(--success)!important;
}
.card-case ul{
    padding-left: 1rem!important;
}
.card-case ul li::marker {
    color: #276f55;
    font-size: 20px;
}
.card-case:hover ul li::marker {
    color: #6ca3e7;
}
.card-case svg{
    fill: #276f55;
}
.card-case:hover svg {
    fill: #6ca3e7;
}
.card-case .img-box-case{
    background: #032b20;
    border: var(--secondary) 1px solid!important;
    transition: all ease-in-out 0.4s;
}
.card-case:hover .img-box-case{
    background: #011630;
    border: var(--primary) 1px solid!important;
    transition: all ease-in-out 0.4s;
}
.p-height-case{
    min-height: 111px;
}
.card-case .icon-case{
    height: auto;
    width: 55px;
}
.card-case .icon-case-2{
    height: auto;
    width: 25px;
}

.card-bg-img{
    background-repeat: no-repeat;
    background-position-x: left;
    background-position-y: top;
    background-size: cover;
    position: relative;
    overflow: hidden;
    min-height: 200px;
}
.bg-dark-dark {
    background: linear-gradient(to right, #01142af9 0%, #0a2444ec 75%);
}

.overlay-white {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to left, #ffffffc3 15%, #ffffff00 40%);
    z-index: 1;
}

.card-bg-img{
    display: flex;
    align-items: end;
    justify-content: end;
}
.card-hero-2 svg{
    fill: #4d9ede;
    transition: all ease-in-out 0.4s;
}
.card-hero-2:hover svg{
    fill: #fff;
    transition: all ease-out 0.4s;
}
.text-violet {
    color: #c3b5fc !important;
}
.logo-card-white{
    width: auto;
    height: 125px;
    position: relative;
    z-index: 2;
}
.bg-warning-soft{
    background-color: #c7dae8;
}
.bg-white-glass{
    background-color: rgba(235, 235, 235, 0.486)!important;
    backdrop-filter: blur(12px)!important;
    -webkit-backdrop-filter: blur(12px)!important;
}
.bg-warning-light{
    background: #a3c0d7;
}
.card-phase .card-body{
    min-height: 133px;
    max-width: 300px;
}
.col-partner:hover .icon-patner-card{
    scale: 1;
    transition: all ease 0.4s;
}
.col-partner .icon-patner-card{
    scale: 0.8;
    transition: all ease 0.4s;
}



.card-home-1{
    background: linear-gradient(to bottom, #032b20da 25%, #011f17f9 60%);
    transition: all ease 0.3s;
}
.card-home-1:hover{
    background: linear-gradient(to bottom, #08372af9 25%, #032b20e3 60%);
    transition: all ease 0.3s;
}
.card-home-2{
    background: linear-gradient(to bottom, #0c4e9eda 25%, #084288f9 60%);
    transition: all ease 0.3s;
}
.card-home-2:hover{
    background: linear-gradient(to bottom, #0f52a4f9 25%, #104c94e3 60%);
    transition: all ease 0.3s;
}
.card-home-3{
    background: linear-gradient(to bottom, #0a2444da 25%, #071e3af9 60%);
    transition: all ease 0.3s;
}
.card-home-3:hover{
    background: linear-gradient(to bottom, #0f2e55f9 25%, #0a2444e3 60%);
    transition: all ease 0.3s;
}
.card-home-4{
    background: linear-gradient(to bottom, #443777da 25%, #362b5ff9 60%);
    transition: all ease 0.3s;
}
.card-home-4:hover{
    background: linear-gradient(to bottom, #534490da 25%,#413571f9 60%);
    transition: all ease 0.3s;
}








.industries-grid {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
}

.industry-item {
    text-align: center;
    padding: 20px 10px;
    border-right: 1px solid #ddd;
}
.industry-item svg {
    fill: #335097;
    scale: 0.9;
    transition: all ease-in-out 0.3s;
}
.industry-item:hover svg {
    fill: #2a4589;
    scale: 1;
    transition: all ease-in-out 0.3s;
}
.industry-item p{
    color: var(--dark)!important;
    transition: all ease-in-out 0.3s;
}
.industry-item:hover p{
    color: var(--primary)!important;
    transition: all ease-in-out 0.3s;
}
.text-violet-dark {
    color: #443777 !important;
}
.bg-violet-soft {
    background-color: #c7bfe5 !important;
}
.text-violet-soft {
    color: #c7bfe5 !important;
}
.border-violet {
    border-color: #c7bfe5 !important;
}
.bg-violet-dark {
    background: linear-gradient(to right, #03172df9 0%, #443777ec 90%)
}
@media (max-width: 1200px) {
    .industries-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

@media (max-width: 768px) {
    .industries-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 480px) {
    .industries-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.border-light-end{
    border-right: #9bb2c6 1px solid!important;
}

.card-home-white .bg-icon-card-light{
    background-color: #9bb2c6;
    transition: all ease-in-out 0.3s;
}
.card-home-white:hover .bg-icon-card-light{
    background-color: #a3c0d7;
    transition: all ease-in-out 0.3s;
}
.card-home-white-2 .bg-icon-card-light{
    background-color: #9bb2c6;
    transition: all ease-in-out 0.3s;
}
.card-home-white-2:hover .bg-icon-card-light{
    background-color: #a3c0d7;
    transition: all ease-in-out 0.3s;
}
.card-home-white-3 .bg-icon-card-light{
    background-color: #9bb2c6;
    transition: all ease-in-out 0.3s;
}
.card-home-white-3:hover .bg-icon-card-light{
    background-color: #a3c0d7;
    transition: all ease-in-out 0.3s;
}
.card-home-white-3, .card-home-white-2, .card-home-white{
    height: 100%;
}

.card-hero-dark-secondary{
    background: linear-gradient(to right, #011f17f9 25%, #032b20da 60%);
    transition: all ease-in-out 0.3s;
}
.card-hero-dark-secondary:hover{
    background: linear-gradient(to right, #032b20da 25%, #011f17f9 60%);
    transition: all ease-in-out 0.3s;
}
.card-hero-2 .border-end-warning {
    border-right: var(--warning)1px solid !important;
}
.border-end-last-case-2{
    border-right: var(--warning)1px solid !important;
}
.img-tool{
    max-height: 60px;
}
.modal-width{
    max-width: 60vw!important;
}
@media (max-width: 576px) {
    #mainNav.logo-head {
        scale: 0.9;
    }
    #mainNav.scrolled .logo-head {
        scale: 1;
    }
    .overlay-header {
        background: linear-gradient(to right, #01060e94 44%, #01142a3d 50%);
    }
    .overlay-hero {
        background: linear-gradient(to right, #01060ed6  44%, #032b208c 50%);
    }
    .section {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }
    .p-height-case{
        min-height: auto;
    }
    .card-case .icon-case{
        height: auto;
        width: 50px;
    }
    .card-case .icon-case-2{
        height: auto;
        width: 25px;
    }
    .border-light-end{
        border-right: none!important;
    }
    .bg-menu{
        background-color: var(--dark);
    }
    .card-hero-2 .border-end-warning {
        border-right: none!important;
    }
    .card-hero-2 svg{
        height: 40px!important;
    }
    .border-end-last-case-2{
        border-right: none !important;
    }
    .modal-width{
        max-width: 96vw!important;
    }
    .card-home-white-3, .card-home-white-2, .card-home-white{
        height: auto;
    }
}

@media  (min-width: 577px) and (max-width: 767px) {
    .p-height-case{
        min-height: auto;
    }
    .card-case .icon-case{
        height: auto;
        width: 50px;
    }
    .card-case .icon-case-2{
        height: auto;
        width: 25px;
    }
    .border-light-end{
        border-right: none!important;
    }
    .bg-menu{
        background-color: var(--dark);
    }
    .card-hero-2 .border-end-warning {
        border-right: none!important;
    }
    .card-hero-2 svg{
        height: 50px!important;
    }
    .border-end-last-case-2{
        border-right: none !important;
    }
    .modal-width{
        max-width: 90vw!important;
    }
    .card-home-white-3, .card-home-white-2, .card-home-white{
        height: auto;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .card-case .icon-case{
        height: auto;
        width: 75px;
    }
    .card-case .icon-case-2{
        height: auto;
        width: 25px;
    }
    .bg-menu{
        background-color: var(--dark);
    }
    .card-hero-2 .border-end-warning {
        border-right: none!important;
    }
    .card-hero-2 svg{
        height: 60px!important;
    }
    .modal-width{
        max-width: 70vw!important;
    }

}

@media (min-width: 992px) and (max-width: 1200px) {
    .card-case .icon-case{
        height: auto;
        width: 75px;
    }
    .card-hero-2 svg{
        height: 60px!important;
    }
    
}

@media  (min-width: 1200px) and (max-width: 1400px) {
    
}

@media  (min-width: 1401px) and (max-width: 1600px) {

}

/* ===== Página Tableau — v2 · paleta estable sobre el sistema (colors-usa / styler-usa) =====
   Paleta acotada: fondo oscuro azul + dos acentos → azul celeste (#4d9ede) y verde (#3eab59).
   Se elimina el violeta y la variación de colores entre tarjetas. */

/* ===== Fondo único y continuo para toda la página (Hero + main + Footer) =====
   Se fija al viewport para que no se vea ningún corte ni división al scrollear. */
body#tableau {
    background:
        radial-gradient(1200px 620px at 80% 18%, rgba(12, 78, 158, .45) 0%, rgba(12, 78, 158, 0) 55%),
        radial-gradient(900px 500px at 15% 90%, rgba(62, 171, 89, .16) 0%, rgba(62, 171, 89, 0) 55%),
        linear-gradient(120deg, #01060e 0%, #01142a 45%, #0a2444 100%);
    background-attachment: fixed;
    background-repeat: no-repeat;
}
/* El Hero ya no pinta su propio fondo: deja ver el fondo global */
#inicio.header-inicio {
    background: transparent !important;
    min-height: 100vh;
}

/* Imagen del hero: foto de dashboards difuminada, integrada al fondo oscuro */
.hero-img {
    opacity: .9;
    border-radius: 1rem;
    -webkit-mask-image: radial-gradient(115% 115% at 50% 48%, #000 62%, transparent 100%);
            mask-image: radial-gradient(115% 115% at 50% 48%, #000 62%, transparent 100%);
}

/* Evita que el texto se divida en líneas (usado en texto del Hero) */
.no-break {
    white-space: nowrap;
}

/* <main>, sus secciones y el Footer son transparentes: se ve el fondo global */
main { background: transparent; }
main > section.bg-black { background-color: transparent !important; }
main > section.contacto-tableau { background: transparent !important; }
footer.bg-black { background-color: transparent !important; }

/* Utilidad de texto suave sobre fondos oscuros */
.text-white-soft { color: rgba(255, 255, 255, .82) !important; }

/* ===== Servicios: lista vertical de tarjetas + panel CTA lateral ===== */
.card-service {
    background: linear-gradient(180deg, #0f2e55 0%, #0a2444 100%);
    border: 1px solid rgba(77, 158, 222, .18);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.card-service:hover {
    transform: translateY(-4px);
    border-color: rgba(77, 158, 222, .5);
    box-shadow: 0 .8rem 1.8rem rgba(1, 20, 42, .35);
}
.service-icon-box {
    width: 64px; height: 64px;
    border-radius: .9rem;
    background: rgba(77, 158, 222, .12);
    border: 1px solid rgba(77, 158, 222, .28);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
/* Servicios y Capacitaciones: apilar icono sobre el texto en mobile */
@media (max-width: 767.98px) {
    #servicios .card-service .d-flex,
    #capacitaciones .card-service .d-flex {
        flex-direction: column;
    }
    #servicios .card-service .service-icon-box,
    #capacitaciones .card-service .service-icon-box {
        margin-right: 0 !important;
        margin-bottom: 1rem;
    }
}
/* Características del servicio como badges (píldoras) */
.service-badges {
    display: flex; flex-wrap: wrap; gap: .5rem;
}
.service-badge {
    display: inline-flex; align-items: center;
    font-size: .8rem; font-weight: 600; line-height: 1;
    padding: .45rem .85rem;
    border-radius: 999px;
    color: #cfe6fb;
    background: rgba(77, 158, 222, .14);
    border: 1px solid rgba(77, 158, 222, .45);
}
/* El badge del medio de cada tarjeta usa el acento verde (paleta acotada) */
.service-badges .service-badge:nth-child(3n+2) {
    color: #cdeed5;
    background: rgba(62, 171, 89, .14);
    border-color: rgba(62, 171, 89, .5);
}

.services-cta {
    background: linear-gradient(160deg, #0c4e9e 0%, #0a2444 100%);
    border: 1px solid rgba(255, 255, 255, .12);
}
@media (min-width: 992px) {
    .services-cta-sticky { position: sticky; top: 100px; }
}

/* Sección de contacto con fondo oscuro degradado */
.contacto-tableau {
    background:
        radial-gradient(1000px 520px at 18% 8%, rgba(12, 78, 158, .55) 0%, rgba(12, 78, 158, 0) 60%),
        linear-gradient(120deg, #01060e 0%, #01142a 55%, #04503d 150%);
    min-height: 80vh;
}
.contacto-tableau .form-panel {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .16);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.contacto-tableau .form-control {
    background: rgba(255, 255, 255, .10) !important;
    border: 1px solid rgba(255, 255, 255, .45) !important;
    color: #ffffff !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
}
.contacto-tableau .form-control::placeholder {
    color: rgba(255, 255, 255, .75) !important;
}
.contacto-tableau .form-control:focus {
    border-color: #4d9ede !important;
    background: rgba(255, 255, 255, .16) !important;
}

/* Mensaje de feedback del formulario (éxito / error) */
.contacto-tableau .form-feedback {
    display: flex;
    align-items: flex-start;
    gap: .625rem;
    padding: .875rem 1rem;
    border-radius: .75rem;
    border: 1px solid transparent;
    font-size: .95rem;
    line-height: 1.45;
    word-break: break-word;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: form-feedback-in .25s ease-out;
}
.contacto-tableau .form-feedback[hidden] {
    display: none;
}
.contacto-tableau .form-feedback::before {
    content: "";
    flex: 0 0 auto;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: .1rem;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.contacto-tableau .form-feedback span {
    display: inline-block;
    min-width: 0;
}
.contacto-tableau .form-feedback-ok {
    color: #d6f5e3;
    background: rgba(62, 171, 89, .18);
    border-color: rgba(62, 171, 89, .55);
}
.contacto-tableau .form-feedback-ok::before {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233eab59' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>");
}
.contacto-tableau .form-feedback-error {
    color: #ffd9dc;
    background: rgba(220, 53, 69, .18);
    border-color: rgba(220, 53, 69, .55);
}
.contacto-tableau .form-feedback-error::before {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff8b93' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/><line x1='12' y1='9' x2='12' y2='13'/><line x1='12' y1='17' x2='12.01' y2='17'/></svg>");
}

@keyframes form-feedback-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .contacto-tableau .form-feedback {
        animation: none;
    }
}

/* ===== Beneficios: tarjeta oscura uniforme, sin hover, icono en badge ===== */
.card-benefit {
    background: linear-gradient(180deg, #0f2e55 0%, #0a2444 100%);
    border: 1px solid rgba(77, 158, 222, .18) !important;
}
.benefit-icon-box {
    width: 60px; height: 60px;
    border-radius: .9rem;
    background: rgba(77, 158, 222, .14);
    border: 1px solid rgba(77, 158, 222, .28);
    display: flex; align-items: center; justify-content: center;
}

/* Banda "¡Aún hay más!" — icono grande en lugar del logo */
.band-more-icon {
    width: 96px; height: 96px;
    border-radius: 1.2rem;
    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .22);
    display: inline-flex; align-items: center; justify-content: center;
}