/*
==================================================================
Theme Name: Manaller
Version: 1.0
Author: Neobrand®
Author URI: https://neobrand.com
==================================================================
*/

:root {
    --dark: var(--wp--preset--color--dark);
    --blue: var(--wp--preset--color--blue);
    --blue-active: var(--wp--preset--color--blue-active);
    --blue-light: var(--wp--preset--color--blue-light);
    --black: var(--wp--preset--color--black);
    --white: var(--wp--preset--color--white);
    --light: var(--wp--preset--color--light);
    --grey: var(--wp--preset--color--grey);
    --blue-gradient: var(--wp--preset--gradient--blue-gradient);
    --blue-dark-gradient: var(--wp--preset--gradient--blue-dark-gradient);
    --font: var(--wp--preset--font-family--inter);
    --wp--preset--spacing--40: 45px;
    --separacion-vertical: clamp(50px, 2rem + 4vw, 150px);
}

::selection {
    background-color: var(--blue-active);
    text-shadow: none;
    color: white;
}
::placeholder {
    color: #888888;
}

body.wp-theme-manaller .d-none{
    display: none !important;
}

.wp-block-group {
    --wp--style--block-gap-horizontal: 20px;
    --wp--style--block-gap-vertical: 50px;
}

body, p, li, span {
    font-family: var(--font);
}

p {
    margin-top: 1rem;
    margin-bottom: 1rem;
    line-height: 1.7;
}

b, strong {
    font-weight: bold;
}

a strong {
    color: var(--blue);
}

a img{
    transition: all 250ms ease;
}

a:hover img{
    opacity: 0.5;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font);
    font-weight: 700;
    margin-top: 3rem;
    letter-spacing: 0.02em;
}

body {
    font-size: var(--wp--preset--font-size--medium);
    line-height: normal;
    color: var(--dark);
}

main{
    padding-top: 80px;
    overflow: hidden;
}

body.home main{
    padding-top: 0;
}

.post-type-post .editor-visual-editor__post-title-wrapper > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
.post-type-post .block-editor-block-list__layout.is-root-container > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
    max-width: 950px;
}

.content{
    max-width: var(--wp--style--global--content-size);
    width: 100%;
}

img{
    max-width: 100%;
}

.border-title {
    border-bottom: 3px solid var(--blue);
    width: 75%;
}

.wp-admin :where(.editor-styles-wrapper) .alignfull{
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 100% !important;
    width: 100% !important;
}

.wp-block-post-content,
.alignfull {
    padding-left: var(--wp--preset--spacing--40);
    padding-right: var(--wp--preset--spacing--40);
}

.wp-block-post-content > *:not(p):not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(ul):not(ol),
.alignfull > *:not(p):not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(ul):not(ol) {
    padding-top: var(--wp--preset--spacing--40);
    padding-bottom: var(--wp--preset--spacing--40);
}

:root :where(.is-layout-constrained) > * {
    margin-block-end: 0;
}

.wp-block-columns, .wp-block-column{
    overflow: hidden;
}

.wp-block-column.is-vertically-aligned-stretch figure{
    height: 100%;
}

.wp-block-column.is-vertically-aligned-stretch figure div,
.wp-block-column.is-vertically-aligned-stretch figure img{
    width: 100%;
    height: 100% !important;
    object-fit: cover;
    object-position: center;
}

.wp-block-post-content > .wp-block-group,
.wp-block-post-content > .wp-block-columns {
    padding-top: var(--separacion-vertical);
    padding-bottom: var(--separacion-vertical);
}

.wp-block-post-content > :where(.wp-block-group):first-of-type,
.wp-block-post-content > :where(.wp-block-columns):first-of-type {
    padding-top: 0;
}

.wp-block-post-content > :where(:not(.alignwide):not(.alignfull)) {
    width: 100%;
    max-width: var(--wp--style--global--content-size);
    margin-left: auto !important;
    margin-right: auto !important;
}

.alignwide {
    width: 100%;
    max-width: var(--wp--style--global--wide-size);
    margin-left: auto !important;
    margin-right: auto !important;
}

.alignfull {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    max-width: 100vw;
    position: relative;
}

.wp-block-latest-posts__featured-image{
    margin-bottom: 1em;
}

/* Botones */

.btn,
.wp-block-button__link {
  background-color: var(--blue);
  color: #fff;
  border-radius: 5px;
  border: none;
  padding: 12px 18px !important;
  font-size: var(--has-medium-font-size);
  transition: all 250ms ease;
}

.btn:hover, .wp-block-button__link:hover {
    background-color: var(--blue-active);
    cursor: pointer;
    color: white !important; 
}

.wp-block-button.is-style-outline .wp-block-button__link.has-blue-active-color:hover{
    border: 2px solid var(--blue-active);
    color: white !important;
}

.btn-ia {
    display: flex;
    gap: 10px;
    align-items: center;
    border: 1px solid var(--grey);
    border-radius: 12px;
    padding: 15px;
}

.btn-ia:hover {
    color: var(--blue);
    border-color: var(--blue) ;
}

.btn-submenu a {
    font-weight: 600;
}


/* Enlaces */

a {
    color: currentColor;
    text-decoration: none;
    transition: all .25s ease;
}

a:hover {
    text-decoration: none;
}
p a:hover, form a:hover{
    color: var(--blue);
}

.overflow-hidden{
    overflow: hidden;
}

/*Header*/

.page-id-1602 header {
    display: none !important;
}


header.transparent{
    background-color: transparent;
    box-shadow: none;
}

header {
    width: 100%;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9;
    padding: 20px var(--wp--preset--spacing--40);
    box-shadow: 0 10px 30px 0 rgba(82,63,105,.05);
    transition: all 250ms ease;
}

header .content{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

header #logo, header #logo_b{
    width: 180px;
}

header #logo_b{
    display: none;
}

header.transparent #logo{
    display: none;
}

header.transparent #logo_b{
    display: inline-block;
}

header .menu-principal-container{
    display: flex;
    justify-content: end;
    align-items: center;
    width: fit-content;
}

header .menu {
    display: flex;
    justify-content: end;
    align-items: center;
    gap: 35px;
    margin: 0;
    padding: 0;
}

header li a{
    font-weight: 300;
    letter-spacing: 0.5px;
    color: var(--dark);
}

header.transparent li a{
    color: var(--grey);
}

header li {
    list-style: none;
    font-size: 18px;
    position: relative;
}

header.transparent .menu li a:hover,
header.transparent li.current-menu-item a{
    color: white;
}

header .menu li a:hover,
header li.current-menu-item a{
    color: var(--blue);
}

header .menu li.btn a,
header .menu li.btn a:hover,
header li.current-menu-item.btn a{
    color: white;
}

header #btn-menu{
    display: none;
}


/*
   SUBMENÚ DESPLEGABLE
*/

header .menu li.menu-item-has-children > a::after {
    content: '';
    display: inline-block;
    margin-left: 8px;
    vertical-align: middle;
    width: 6px;
    height: 6px;
    border-bottom: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: translateY(-3px) rotate(45deg);
    transition: transform 0.3s ease;
}

header .menu li.menu-item-has-children:hover > a::after {
    transform: translateY(-1px) rotate(225deg);
}

header .menu .sub-menu {
    position: fixed;
    top: 80px;
    left: 0;
    width: 100vw;
    background-color: var(--white);
    box-shadow: 0 15px 30px 0 rgba(82,63,105,.05);
    padding: 25px 50px 25px 50px;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all .3s ease;
    display: flex;
    justify-content: center;
    gap: 10px 40px;
    z-index: 99;
}

header .menu li.menu-item-has-children:hover > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

header .menu .sub-menu li {
    padding: 10px 20px;
}

header .menu .sub-menu li a {
    font-size: 16px;
    display: block;
    color: var(--dark) !important;
    transition: color 0.2s ease;
}

header .menu .sub-menu li a:hover {
    color: var(--blue) !important;
}

header.transparent .menu .sub-menu li a {
    color: var(--dark);
}


/*Blog*/

.breadcrumbs {
    font-size: 14px !important;
}

.pagination, .wp-block-query-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 50px 0;
}

.pagination .nav-links, 
.wp-block-query-pagination-numbers {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.pagination .page-numbers, 
.wp-block-query-pagination .page-numbers,
.wp-block-query-pagination-next,
.wp-block-query-pagination-previous {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 45px;
    height: 45px;
    padding: 0 15px;
    border: 1px solid var(--blue);
    border-radius: 8px;
    color: var(--blue);
    font-weight: 600;
    background-color: transparent;
    transition: all 250ms ease;
    text-decoration: none;
}

.pagination a.page-numbers:hover, 
.wp-block-query-pagination a.page-numbers:hover,
.wp-block-query-pagination-next:hover,
.wp-block-query-pagination-previous:hover {
    background-color: var(--blue);
    color: var(--white);
    border-color: var(--blue);
}

.pagination span.page-numbers.current, .wp-block-query-pagination span.page-numbers.current {
    background-color: var(--blue);
    color: var(--white);
    border-color: var(--blue);
    pointer-events: none;
}

.pagination span.page-numbers.dots, .wp-block-query-pagination span.page-numbers.dots {
    border-color: transparent;
    color: var(--dark);
    font-weight: bold;
    min-width: auto;
    padding: 0 5px;
    background: transparent;
}

.menu-categorias ul {
    list-style: none;
    display: flex;
    gap: 20px;
    padding: 20px 0 !important;
    margin: 0 !important;
}

.menu-categorias li {
    border: 1px solid var(--blue);
    border-radius: 8px;
    padding: 10px 20px;
    color: var(--blue);
}

.menu-categorias li:hover {
    background-color: var(--blue);
    color: white;
}

.categorias-blog ul {
    margin: 10px 0 !important; 
    padding-left: 0px !important;
}

.categorias-blog li{
    border: 1px solid var(--light);
    padding: 5px 10px !important;
    border-radius: 8px;
    margin-bottom: 0px !important;
}

.post-blog{
    display: flex;
    gap: 100px;
    align-items: stretch; 
    position: relative; 
}

.post-blog .post-content{
    width: 100%;
}

.post-blog .post-sidebar{
    position: relative;
    max-width: 400px;
    width: 100%;
}

.post-blog .post-sidebar .sidebar-content{
    position: fixed;
    top: 7rem;
    width: 400px;
    transition: opacity 0.3s ease;
}

.post-blog .post-sidebar .sidebar-content .share-btns {
    margin: 25px 0px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.post-blog .post-sidebar .sidebar-content .share-btns img {
    width: 30px;
    border-radius: 5px;
}

.post-blog .post-sidebar .sidebar-content .share-btns .share {
    margin: 0px 5px;
    display: flex;
    gap: 10px;
}

.post-blog .post-sidebar .sidebar-content .share-btns .share p {
    margin-bottom: 0;
}

.post-blog .post-sidebar .sidebar-content .share-btns .share p {
    margin-top: 0;
}

.post-blog h1{
    font-size: clamp(28px, 2.5vw, 60px);
}

.wp-block-post-content table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
}

.wp-block-post-content table th,
.wp-block-post-content table td {
    padding: 12px 16px;
    border: 1px solid #e2e2e2;
}

.wp-block-post-content table th {
    background: #f7f7f7;
    font-weight: 600;
    text-align: left;
}

.wp-block-post-content table tr:nth-child(even) {
    background: #fafafa;
}

.wp-block-post-content thead {
    border-bottom: 2px solid #e2e2e2;
}

.tabla-especial thead {
    border-bottom: 0px;
}

.tabla-especial table th {
    background: var(--blue-active);
    color: white;
    font-weight: 600;
    text-align: left;
    font-size: xx-large;
}

.tabla-especial table tr:nth-child(even) {
    background: #fff;
}

.tabla-especial table th, .tabla-especial table td {
    padding: 20px;
    border: 0px solid #e2e2e2;
}

.wp-block-post-content ul,
.wp-block-post-content ol {
    margin: 12px 16px;
    padding-left: 28px;
}

.wp-block-post-content ul li,
.wp-block-post-content ol li {
    margin-bottom: 10px;
    line-height: 1.6;
}

.wp-block-post-content ul li::marker {
    color: var(--blue);
}

.wp-block-post-content ol {
    counter-reset: lista;
}

.wp-block-post-content ol li {
    counter-increment: lista;
}

.wp-block-post-content ol li::marker {
    color: var(--blue);
    font-weight: 600;
}

/*Blog - Categoria*/

.posts-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 50px;
}

.posts-grid .post-content {
    background-color: var(--light);
    border-radius: 12px;
    overflow: hidden;
}

.posts-grid .post-content a {
    aspect-ratio: 16/9;
    margin-bottom: 15px;
}

.posts-grid .post-content img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.posts-grid .post-content h2 {
    margin: 0;
}
.posts-grid .post-content .entry-excerpt {
    margin-bottom: 15px;
}

.posts-grid .post-content .meta-categoria{
    font-size: 14px;
}

.posts-grid .post-content .entry-excerpt,
.posts-grid .post-content h2, .posts-grid .post-content .meta-categoria  {
    padding: 15px 30px;
}

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 30px 0;
}

.pagination .nav-links {
    display: flex;
    gap: 20px;
}

/* Contenedor de los posts sugeridos */
.sidebar-related-posts {
    padding: 20px;
    border: 1px solid var(--grey);
    border-radius: 12px;
}
.sidebar-related-posts h3 {
    font-size: 1.2rem;
    margin-bottom: 15px;
    margin-top: 0px;
    color: var(--dark);
}

.mini-post {
    margin-bottom: 10px;
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.2s ease;
}

.mini-post:hover {
    background: #eef2f6;
}

.mini-post a {
    display: flex; 
    align-items: center;
    text-decoration: none;
    color: inherit;
    gap: 15px;
}

.mini-post .mini-post-img{
    width: 120px;
    margin-bottom: 0;
}

.mini-post .mini-post-img img {
    width: 100%;  
    height: 100%;
    object-fit: cover;
    aspect-ratio: 1/1;
    border-radius: 12px;
}

.mini-post .mini-post-content {
    width: 100%;
}

.mini-post .mini-post-content h4 {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.3;
    font-weight: 600;
}

.mini-post .read-more {
    font-size: 0.8rem;
    color: var(--blue);
    font-weight: 500;
}

/*Formulario*/

.wpcf7 form{
    transition: all 280ms ease;
}

.wpcf7 form br{
    display: none;
}

.wpcf7 form input:not([type="checkbox"]):not([type="button"]):not([type="radio"]):not([type="submit"]), .wpcf7 form textarea, .wpcf7 form select, .select2-container--default .select2-selection--single {
    font-size: var(--wp--preset--font-size--small);
    font-weight: normal;
    width: 100%;
    border: 1px solid var(--grey);
    border-radius: 5px;
    padding: 8px 16px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

.wpcf7 form textarea{
    height: auto;
    padding: 16px;
}

.select2-container{
    width: 100%;
    max-width: 100%;
}

.select2-container--default .select2-selection--single .select2-selection__rendered{
    padding: 0;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    width: auto;
    top: auto;
    right: auto;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    margin: 0;
    position: relative;
    left: auto;
    top: auto;
}

.wpcf7 form > p{
    transition: all 280ms ease;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
}

.wpcf7 form .last > p{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 20px;
}

.wpcf7 form .wpcf7-form-control-wrap{
    width: 100%;
}

.wpcf7 form .wpcf7-acceptance > span{
    margin-left: 0;
}

.wpcf7 form .wpcf7-acceptance > span label {
    font-size: var(--wp--preset--font-size--small);
    line-height: 1.1em;
    display: flex;
    align-items: center;
    gap: 10px;
}

.wpcf7 form .wpcf7-acceptance > span label a{
    color: var(--blue);
}

.wpcf7 form input[type="checkbox"]{
    width: 20px !important;
    height: 20px !important;
}

.wpcf7 form input[type="submit"]:disabled{
    pointer-events: none;
    opacity: 0.5;
}

.wpcf7 form.submitting > p{
    opacity: 0.2;
}

.wpcf7 form .wpcf7-spinner {
    position: absolute;
    width: 20px;
    height: 20px;
    top: calc(50% - 10px);
    left: calc(50% - 10px);
    margin: 0;
}

.wpcf7 form .wpcf7-response-output {
    background-color: #6fd5df;
    color: white;
    margin: 25px 0 0 0;
    border: none;
    padding: 15px 20px;
    font-size: 14px;
    text-align: center;
    font-weight: 600;
}

.wpcf7 form.sent .wpcf7-response-output {
    background-color: green;
}

.wpcf7 form.invalid .wpcf7-response-output {
    background-color: red;
}

.wpcf7-not-valid{
    border-color: red !important;
}

.wpcf7-not-valid-tip{
    display: none !important;
}

/* Carousel clientes */

.carousel-clientes {
    margin: 0;
    padding: 0;
    width: 100%;
}

.carousel-clientes .swiper-wrapper {
    height: auto !important;
}

.carousel-clientes.wp-block-gallery.has-nested-images figure.wp-block-image img{
    width: 100%;
    height: 100%;
    max-width: 150px !important;
    max-height: 100px;
    object-fit: contain;
    display: block;
    filter: grayscale(100%);
    transition: filter 0.3s ease;
}

.carousel-clientes.wp-block-gallery.has-nested-images figure.wp-block-image img:hover {
    filter: grayscale(0%);
}

/*SLIDER REVIEWS*/

.reviews .swiper-wrapper {
    display: flex;
    gap: 50px;
}

.swiper-button-next::after, .swiper-button-prev::after {
    color: var(--white);
}

.swiper-button-next, .swiper-button-prev {
    top: var(--swiper-navigation-top-offset,90%) !important;
}


/*FAQs CSS*/

.acf-faq-container, .faqs {
    max-width: 800px;
    margin: 40px auto;
}

.acf-faq-item, .wp-block-accordion-item, .item_faq {
    background-color: #fff;
    border: 1px solid var(--grey);
    border-radius: 8px;
    margin-bottom: 16px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
    overflow: hidden;
    transition: all 0.3s ease;
}

.acf-faq-item:hover, .wp-block-accordion-item:hover, .item_faq:hover {
    border-color: var(--blue);
    box-shadow: 0 4px 12px rgba(0,0,0,.05);
}

.acf-faq-summary, .wp-block-accordion-heading__toggle, .faq-title {
    padding: 20px 24px;
    cursor: pointer;
    font-weight: 700;
    color: var(--black);
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: transparent;
}

.acf-faq-summary::-webkit-details-marker{
    display: none;
}

.wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-title {
    text-decoration: none;
}

.wp-block-accordion-heading__toggle:focus, .wp-block-accordion-heading__toggle:hover {
    padding: 20px 24px; 
}

.faq-icon, .wp-block-accordion-heading__toggle-icon  {
    display: inline-block;
    width: 24px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    font-size: 14px;
    color: var(--blue);
    transition: transform 0.3s ease, color 0.3s ease;
}

details[open] .faq-icon {
    transform: rotate(135deg); 
    color: var(--blue-active);
}

.acf-faq-content, .wp-block-accordion-panel  {
    padding: 0 24px 24px 24px;
    color: #4a5568;
    line-height: 1.6;
    font-size: 16px;
    border-top: 0;
    opacity: 0;
    animation: fadeIn 0.4s ease forwards;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}



/*Enlaces redes*/

.lista-enlaces {
   display: flex;
   flex-direction: column;
   justify-content: center;
   gap: 30px;

}

.enlace {
    padding: 30px;
    border-radius: 15px;
    font-size: clamp(18px, 1.36vw + 13.64px, 30px);
    border: 1px solid var(--blue);
    text-align: center;
}

.enlace:hover {
    background-color: var(--light);
    color: var(--blue);
}

/*Contactar*/

#contactar {
    display: flex;
    align-items: flex-end;
    flex-direction: column-reverse;
    justify-content: space-between;
    position: fixed;
    right: 30px;
    bottom: 12px;
    z-index: 4;
}


#contactar i {
    padding: 5px !important;
}
#contactar a{
    color: var(--white);
}

#contactar a:hover span {
    color: var(--dark)!important;
}

#contactar a:first-child {
    width: 70px;
    height: 70px;
    border-radius: 8px;
    background-color: var(--blue);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    z-index: 7;
    margin-top: 10px;
}

#contactar a:first-child i {
    font-size: 28px;
}

#contactar a:first-child::after {
    content: 'X';
    width: 100%;
    height: 100%;
    border-radius: 8px;
    font-size: 32px;
    opacity: 0;
    transform: scale(0);
    transition: all .28s cubic-bezier(.74,0,.24,.99);
    background-color: var(--blue-active);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
}

#contactar.bottom a:first-child::after {
    display: none;
}

#contactar.active a:first-child::after {
    opacity: 1;
    transform: scale(1);
}

#contactar a:not(:first-child) {
    width: fit-content;
    max-width: 0;
    height: 0;
    border-radius: 0;
    background-color: var(--blue);
    color: var(--white);
    white-space: nowrap;
    opacity: .75;
    transform: translateX(-20px);
    transform-origin: top right;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    transition: all 280ms cubic-bezier(.74, 0, .24, .99);
    overflow: hidden;
    margin-top: 10px;
}

#contactar a:not(:first-child):hover{
    background-color: var(--light);
    color: var(--dark);
}

#contactar.bottom a:not(:first-child),
#contactar.active a:not(:first-child) {
    max-width: 100%;
    height: 60px;
    border-radius: 12px;
    opacity: 1;
    transform: translateX(0);
    pointer-events: all;
}

#contactar a:nth-child(2) {
    transition-delay: 200ms;
}

#contactar a:nth-child(3) {
    transition-delay: 100ms;
}

#contactar a:nth-child(4) {
    transition-delay: 0;
}

#contactar.active a:nth-child(2) {
    transition-delay: 0ms;
}

#contactar.active a:nth-child(3) {
    transition-delay: 100ms;
}

#contactar.active a:nth-child(4) {
    transition-delay: 200ms;
}

#contactar.active a:nth-child(5) {
    transition-delay: 300ms;
}

#contactar a:not(:first-child) i {
    height: 40px;
    margin-inline: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(0);
    transition: all 280ms cubic-bezier(.74, 0, .24, .99);
}

#contactar.bottom a:nth-child(2) i,
#contactar.active a:nth-child(2) i {
    transition-delay: 100ms;
}

#contactar.bottom a:nth-child(3) i,
#contactar.active a:nth-child(3) i {
    transition-delay: 150ms;
}

#contactar.bottom a:nth-child(4) i,
#contactar.active a:nth-child(4) i {
    transition-delay: 250ms;
}

#contactar.bottom a:not(:first-child) i,
#contactar.active a:not(:first-child) i {
    transform: scale(1);
}

#contactar.active a:not(:first-child),
#contactar.active a:nth-child(2) i,
#contactar.active a:nth-child(2):hover i,
#contactar.active a:nth-child(3) i,
#contactar.active a:nth-child(3):hover i,
#contactar.active a:nth-child(4) i,
#contactar.active a:nth-child(4):hover i {
    transition-delay: 0ms;
    padding: 15px;
}

#contactar a:not(:first-child) span {
    font-size: 16px;
    font-weight: 500;
    margin-left: 5px;
    transition: all 280ms cubic-bezier(.74, 0, .24, .99)
}

#contactar a:not(:first-child):hover span{
    color: var(--white);
    transition-delay: 0;
}

#contactar.active a:not(:first-child):hover i{
    filter: none;
    transition-delay: 0ms;
}

/* Mover reCAPTCHA v3 a la izquierda */
.grecaptcha-badge { 
    width: 70px !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
    left: 0 !important;
    right: auto !important; 
}

.grecaptcha-badge:hover { 
    width: 256px !important; 
}

/*ayuda*/

.header-ayuda {
    width: 100vw;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    max-width: 100vw;
    background: var(--dark);
    color: var(--light);
    text-align: center;
}

.header-ayuda h1 {
    font-size: 14px;
    font-weight: 400;
}

.header-ayuda h2 {
    font-size: 50px;
    margin: 15px;
}

.lupa{
    margin: 50px 0;
}

.lupa #input-buscador{
    border-radius: 8px;
    padding: 10px 30px;
    text-align: center;
}

.grid-ayuda {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 50px 0;
}

.tarjeta-ayuda {
    border: 1px solid var(--grey);
    border-radius: 8px;
    padding: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* align-items: center; */
    gap: 0px;
}

.tarjeta-ayuda h3 {
    margin: 0;
}

.tarjeta-ayuda a:hover{
    color: var(--blue-active);
}


.content-ayuda {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
    
.sidebar-ayuda {
    /*grid-column: span 1;*/
    margin-top: 50px;
    position: fixed;
}

.noside-ayuda {
    grid-column: span 4 / span 4;
    grid-column-start: 2;
}

.noside-ayuda h1 {
    margin: 10px 0;
}        

.video-contenedor iframe {
    width: 100%;
    height: auto;
    border-radius: 8px;
    aspect-ratio: 16 / 9;
}

.mini-ayuda {
    padding: 10px;
    border-radius: 8px;
    border: 1px solid var(--grey);
    margin-bottom: 15px;
}

.mini-ayuda h4{
    margin: 0;
    font-weight: 400;
}

.mini-ayuda:hover {
    background: #eef2f6;
    border-color: var(--blue);
}


/* CASO DE ÉXITO (Contenido + Sidebar) */
.contenedor-columnas {
    display: flex;
    gap: 100px;
    align-items: flex-start;
}

.contenedor-columnas .prime-bar {
    width: 100%;
}

.contenedor-columnas .sidebar {
    width: 100%;
    max-width: 400px;
    flex-shrink: 0;
}

.cabecera-exito {
    display: flex;
    flex-direction: column;
    padding: 5vw 0vw 1vw 0vw;
    width: 70%;
    margin: 0 auto;
}

.cabecera-exito .titulo-caso {
    font-size: 16px;
    text-align: center;
    width: fit-content;
    background: var(--blue);
    color: var(--white);
    font-weight: 400;
    display: inline;
    padding: 5px 10px;
    border-radius: 8px;
    align-self: center;
    margin-bottom: 50px;
}

.cabecera-exito .quote {
    font-size: 45px;
    text-align: center;
}

.cabecera-exito .quote h2, .body-exito h2, .empresa-testimonio p, .testimonio p, .cta h2 {
    margin: 0;
}

.cabecera-exito .subtitulo-caso {
    font-size: 20px;
    color: #B4B4B4;
    text-align: center;
    line-height: 1;
}

.reto img {
    width: 100px;
}

.solucion {
    padding: 50px 0;
}

.lista-problemas {
    list-style: none !important;
    padding-left: 0 !important;
    margin: 20px 0;
}

.lista-problemas li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 15px !important;
    line-height: 1.6;
}

.lista-problemas li::before {
    content: '✖'; 
    font-size: 16px;
    color: #e74c3c;
    font-weight: bold;
    margin-top: 2px;
    flex-shrink: 0;
}


.modulos-implementados {
    list-style: none !important;
    padding-left: 0 !important;
    padding-top: 30px;
    margin: 30px 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px; 
}

.modulos-implementados li {
    background-color: var(--white);
    border: 1px solid var(--grey);
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    display: flex;
    gap: 15px;
    margin-bottom: 0 !important;
}

.modulos-implementados li::before {
    content: '✔';
    font-size: 32px;
    color: var(--blue);
    line-height: 1;
}

.modulos-implementados li strong {
    font-size: 18px;
    color: var(--dark);
    display: block;
}

.estadisticas {
    display: flex;
    margin: 50px auto;
    gap: 50px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--grey);
    padding: 25px;
    border-radius: 8px;
    width: fit-content;  
}

.estadistica-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.estadistica-item .valor {
    font-size: 50px;
    font-weight: bold;
    color: var(--blue);
    text-align: center;
}

.estadistica-item .etiqueta {
    color: #B4B4B4;
}

.empresa-testimonio {
    border: 1px solid #B4B4B4;
    border-radius: 8px;
    padding: 50px;
}

.empresa {
    display: flex;
    gap: 20px;
    justify-content: baseline;
    align-items: center;
    border-bottom: 1px solid #B4B4B4;
    padding-bottom: 15px;
}

.tipo, .minitexto {
    padding-top: 15px;
    font-size: 16px;
    color: #B4B4B4;
    margin: 0;
}

.empresa-nombre {
    font-weight: bold;
}

.empresa-logo {
    width: 100px;
}

.empresa-link {
    font-size: 14px;
    color: var(--blue);
}

.testimonio {
    margin-top: 20px;
    background-color: var(--dark);
    color: #fff;
    padding: 50px;
    border-radius: 8px;
}

.testimonio .test-nombre {
    margin-top: 15px;
}

.implementacion img {
    margin-top: 50px;
    aspect-ratio: 16/9;
    border-radius: 8px;
    box-shadow: -1px 12px 11px -7px rgba(3,75,161,.7);
    -webkit-box-shadow: -1px 12px 11px -7px rgba(3,75,161,.7);
    -moz-box-shadow: -1px 12px 11px -7px rgba(3,75,161,.7);
    width: fit-content;
    object-fit: cover;
}

body.single-caso-exito .oculta {
    display: none !important;
}

body.single-caso-exito .margenes {
    margin-top: 0 !important;
}

.content-cta{
    padding: 0 !important;
 }

.cta {
    background: var(--blue-dark-gradient);
    color: #fff;
    text-align: center;
    padding: 5vw 0;
}

.botones {
    display: flex;
    gap: 30px;
    justify-content: center;
    align-items: center;
    padding: 15px !important;
    margin: 0;
}

.wp-block-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
}

.wp-block-table table th {
    background: var(--blue-active);
    color: white;
    font-weight: 600;
    text-align: left;
    padding: 20px;
    border: 0px;
}

.wp-block-table thead {
    border-bottom: 0px;
}

.wp-block-table table td {
    padding: 10px;
    border: 0px;
}

.wp-block-table table tr:nth-child(even) {
    background: #fff;
}


/* --- POPUP LEAD MAGNET --- */

#leadmagnet {
    position: fixed;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 20px;
    bottom: 20px;
    left: 50%;
    z-index: 3;
    background: var(--white);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 30px);
    transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s ease;
}

#leadmagnet.show-leadmagnet {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

#leadmagnet.is-closed {
    display: none !important;
}

.leadmagnet-img {
    margin-right: 10px;
    width: 30px;
    height: 30px;
    background-color: var(--light);
}

.leadmagnet-img figure {
    margin: 0;
    width: 100%;
    height: 100%;
}

.leadmagnet-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.leadmagnet-content {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    text-align: center;
}

.leadmagnet-text {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--dark);
    line-height: 1.4;
}

.leadmagnet-content a.btn {
    display: inline-block;
    font-size: 14px;
    width: auto;
    text-align: center;
    padding: 10px !important;
}