:root {
    --full-width: 1200px;
    --main-color: #2B2D70;
    /* Replace with your desired primary color */
    --secondary-color: #8CB2DF;
    /* Replace with your desired secondary color */
    --text-color: #000;
    /* Replace with your desired text color */
    --background-color: #f9f9f9;
    /* Replace with your desired background color */
    --border-radius: 15px;
    /* Adjust as needed */
    --font-family: "Poppins", sans-serif;
    --font-weight: 400;
    --font-style: normal;
}

@font-face {
    font-family: 'Gotham Rounded';
    src: url('assets/fonts/gothamrnd_medium.otf') format('opentype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham Rounded Light';
    src: url('assets/fonts/gothamrnd_light.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


@font-face {
    font-family: 'Gotham Rounded Bold';
    src: url('assets/fonts/gothamrnd_bold.otf') format('opentype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--font-family);
    font-weight: var(--font-weight);
    font-style: var(--font-style);
}

header {
    background-color: #E1EAF1;
    position: fixed;
    width: 100%;
    z-index: 100;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    top: 0
}

header section {
    width: 100%;
    max-width: var(--full-width);
    margin: 0 auto;
}

header section div.mobile {
    display: none;
    /* Hide the mobile menu by default */
    padding: 10px;
    text-align: center;
}

header ul {
    display: flex;
    justify-content: space-between;
    /* Distribute items evenly across the width */
    align-items: center;
    /* Align items vertically in the center */
    list-style: none;
    /* Remove default list styling */
    padding: 0;
    margin: 0;
    height: 72px;
    max-height: 72px;
}

header ul li {
    flex: 1;
    /* Make each item take up equal space */
    text-align: center;
    /* Center text within each item */
    height: 72px;
    /* Match ul height */
    display: flex;
    align-items: stretch;
}

header ul li a,
header ul li>div {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
}

header ul li #logo {
    max-height: 80px;
    /* Adjust the logo size as needed */
    display: block;
    margin: 0 auto;
    /* Center the image */
    background-color: #fff;
    border-bottom-left-radius: var(--border-radius);
    /* Use the defined border radius */
    border-bottom-right-radius: var(--border-radius);
    /* Use the defined border radius */

    padding: 20px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    height: 150px;
}

header ul li #logo a {
    box-sizing: none;
}


#logo img {
    margin: 0;
}


 /* 3 enlaces a la izquierda del logo y 2 a la derecha: así el logo sigue centrado */
nav.desktop > ul > li:nth-child(-n+3) {
  flex: 0.667;
}

header ul li:first-child a {
    font-weight: bold;
}

header ul li a {
    text-decoration: none;
    /* Remove underline from links */
    color: var(--main-color);
    /* Use the primary color for links */
    font-size: .9em;
    /* Adjust font size as needed */
    padding: 3px;
    /* Add padding for better clickability */
    line-height: 12px;
}

header ul li a.btn {
    background-color: var(--main-color);
    color: #fff;
    border-radius: var(--border-radius);
    font-size: 20px;
    text-transform: uppercase;
    display: block;
    margin: 15px 10px;
    padding: 14px;
    height: 40px;


}

header ul li a.btn:hover {
    background-color: #fff;
    color: var(--main-color);
    /* border: 1px solid var(--main-color); */
}

#logo a {
    padding: 0 !important;
}


/*footer {
    background-color: #8CB2DF;
    color: #fff;
    font-size: .9em;
    padding: 30px 0;
}*/

/*footer section {
    width: 100%;
    max-width: var(--full-width);
    margin: 0 auto;
    display: flex;
     Use flexbox for layout 
    flex-wrap: wrap;
}*/


/*footer section div {
    padding: 10px;
     Add some padding for spacing 
}

footer section div:first-child {
    flex: 0 0 80%;
     First column takes 80% of the width 
}

footer section div:last-child {
    flex: 0 0 10%;
     Second column takes 20% of the width 
}

footer section span {
    font-size: .8rem;
    font-weight: 200;
}

footer a {
    color: #fff;
    text-decoration: none;
     Remove underline from links 
}

footer a:hover {
    text-decoration: underline;
}

footer a.social {
    margin: 0 20px 0 0
}*/

main {
    margin: 70px 0 0 0;
}

main section {
    width: 100%;
    max-width: var(--full-width);
    margin: 0 auto;
    padding: 20px;
}

main section .content {
    /* width: 96%;
    max-width: var(--full-width); */
    margin: 0 auto;
}

/* Elements */

main h1,
main h2,
main h3,
main h4,
main h5,
main h6 {
    color: var(--main-color);
}

main a.btn {
    background-color: #E1EAF1;
    border-radius: var(--border-radius);
    color: var(--main-color);
    padding: 20px 40px;
    text-decoration: none;
}

/* Custom for pages */

main#home section#cover {
    width: 100%;
    max-width: 100%;
    padding: 0;
    position: relative;
    /* top: -100px; */
    /* z-index: -1; */
}

main#home section#cover img.mobile {
    display: none;
}


main#home h1,
main#home h2,
main#home h3,
main#home h4 {
    text-align: center;
    font-weight: 600;
}

main#home section:nth-child(2) div.content {
    display: flex;
    flex-direction: row;
    align-items: center;
    /* Vertically center content */
    justify-content: center;
    /* Optional: center horizontally */
    gap: 40px;
    /* Space between columns */
    max-width: var(--full-width);
    margin: 0 auto;
    padding: 20px;
}

main#home section:nth-child(2) .content>div {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    justify-content: left;
    /* Center content vertically inside each column */
    padding: 20px;
    text-align: left;
}

main#home section:nth-child(2) .content>div h3 {
    text-align: left !important;
    color: #8CB2DF;

}

main#home section#what h2 {
    font-size: 2.5rem;
    padding: 0 50px;
    line-height: 3rem;
}

.main-color {
    color: var(--main-color);
}

main#home section:nth-child(3) {
    /* background-color: var(--main-color); */
    color: #fff;
    max-width: 100%;
    padding: 10px 0 10px 0;

}

main#home section:nth-child(3) .content {
    max-width: var(--full-width);
    margin: 0 auto;
    padding: 20px;
    text-align: center;
}


main#home section:nth-child(3) .content h2 {
    color: #fff;

}

div.protection {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    /* Optional: space between blocks */
}

div.protection>* {
    flex: 0 0 36%;
    /* Two columns, with some gap */
    box-sizing: border-box;
}

div.protection div {
    background-color: #E1EAF1;
    border-radius: var(--border-radius);
    padding: 20px 20px 20px 100px;
    margin: 10px 40px 10px 80px;
    position: relative;
    font-size: 1em;
}

div.protection div img {
    position: absolute;
    top: 40px;
    left: -70px;
}

div.protection div h2 {
    text-align: left !important;
    margin: 0;
    font-size: 1.2rem;
}

div.protection div a {
    color: var(--main-color);
    font-weight: bold;
    text-decoration: none;
    position: relative;
}

div.protection div a::after {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url('images/icon-arrow-right.png');
    /* Update with your arrow icon path */
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    right: -20px;
    top: 50%;
    transform: translateY(-50%);
}

main#about section {
    width: 70%;
    margin: 0 auto;
    text-align: center;
}

main#about section h2 {
    font-family: "Poppins", sans-serif;
    font-size: 2.5rem;
}

main#about section p {
    text-align: justify;
}

/* splide */



.splide__slide {
    text-align: center;
}

#splide1 .splide__slide img {
    width: 90%;
}

#splide2 .splide__slide img {
    width: 80%;
    filter: blur(4px);
    /* Add motion blur effect */
    transition: filter 0.3s;
    margin-top: 100px;

}

#splide2 .splide__slide.is-active img {
    width: 150%;
    filter: blur(0);
    transition: filter 0.3s;

    margin-top: 0;
    z-index: 2;
    position: relative;
    left: -25%
}

.splide__arrow--prev {
    left: -25px !important;
    width: 3em !important;
    height: 3em !important;
}

.splide__arrow--next {
    right: -25px !important;
    width: 3em !important;
    height: 3em !important;
}

.splide__pagination {
    bottom: -1em !important;
}

.splide__pagination__page {
    background: #8CB2DF !important;
    border-color: #8CB2DF !important;
}

.splide__pagination__page.is-active {
    background: #2B2D70 !important;
    /* Optional: highlight active dot with main color */
    border-color: #2B2D70 !important;
}

#whatsapp {
    position: fixed;
    bottom: 0;
    right: 0px;
    z-index: 9999;
    width: 230px;
    display: block;
    cursor: pointer;

    padding: 8px;
    transition: box-shadow 0.2s;
}

#whatsapp img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.sidemenu {
    display: none
}

/* PRODUCTS */

section.product,
section.tablaCondiciones {
    margin: 100px auto;
    text-align: center;
    font-family: "Gotham Rounded", sans-serif;
}

section.product a.back {
    display: block;
    width: 100px;
    margin: 10px 0;
}

section.product a.back img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}



section.product img {
    width: 50%;
    max-width: 600px;
    margin: 0 auto;
    display: block;
    margin: 40px auto;
}

section.product h2,
section.tablaCondiciones h2 {
    color: var(--main-color);
    background-color: var(--secondary-color);
    font-size: 2.4rem;
    margin: 0;
    display: block;
    width: 75%;
    max-width: 800px;
    margin: 0 auto;
    padding: 5px;
    border-radius: var(--border-radius);
    font-family: "Gotham Rounded Bold", sans-serif;


}

section.product h3,
section.tablaCondiciones h3 {
    font-size: 2rem;
    font-family: "Gotham Rounded Bold", sans-serif;

}

section.product p,
section.tablaCondiciones p {
    font-family: "Gotham Rounded Light", sans-serif;
    color: var(--main-color);
    font-size: 1.2rem;
    margin: 20px
}

section.product table,
section.tablaCondiciones table {
    width: 100%;
    border: 1px solid var(--main-color);
    border-radius: 20px;
    font-size: 1rem;
    color: var(--main-color);

    table-layout: fixed;
    width: 100%;
    min-width: 700px;
    border-spacing: 0;

}

section.product a.btn {
    background-color: var(--main-color);
    color: #fff;
    border-radius: 40px;
    padding: 10px 80px;
    text-decoration: none;
    font-size: 1.8rem;
    margin: 10px 0;
}


section.product table thead {
    transform: translateY(-65px);
    /* No position:absolute or margin needed */
    display: table-header-group;
    width: 100%;
    z-index: 2;
}

section.product table tbody {
    transform: translateY(-65px);

}

.colorcond {
    background-color: #8CB2DF;
}

.colorcond2 {
    background-color: #DBE3F0;
}

.izquierdacond {
    text-align: center !important;
}

.rellenoder {
    padding-right: 6% !important;
}

.imgpdf {
    width: 20% !important;
    margin: 0 auto !important;
    height: auto;
    cursor: pointer;
    transition: transform 0.15s ease;
    display: unset !important;
}

.imgpdf:hover {
    transform: scale(1.3);
}

.imgpdf:active {
    transform: scale(1.7);
}

section.product table td:first-child {
    text-align: left;
}

section.product table td {
    padding: 30px 20px;
    width: auto;
    /* Optional: prevent text overflow */
    overflow: visible;
    white-space: normal;
    /* Display content as paragraph */
    display: table-cell;
    vertical-align: middle;
}

section.product table td small {
    font-size: .7rem;
}

section.product table tr:nth-child(even) {
    background-color: #9ACEE9;
    /* White for even rows */
}

/* Cambios regulatorios en páginas de producto */

section.product h3 + p.nota-iva {
    margin: -15px 20px 20px;
    font-size: .9rem;
}

.leyendas-producto {
    max-width: 800px;
    margin: 10px auto 40px;
    padding: 0 20px;
    box-sizing: border-box;
}

.leyendas-producto p {
    margin: 0 0 15px;
    font-family: "Gotham Rounded Light", sans-serif;
    font-size: .8rem;
    line-height: 1.4;
    text-align: justify;
    color: #333333; /* gris 80% */
}

section.product table td small.provisto-metlife {
    display: inline-block;
    margin-top: 6px;
    font-family: "Gotham Rounded Bold", sans-serif;
}


/* Product headers */

.blue-hard {
    background-color: var(--main-color);
    color: #fff;
    font-size: 1.5rem;
    padding: 20px;
    border-radius: var(--border-radius);
    text-align: center;
}

.blue-hard.big {
    padding: 54px 0;
}

.info {
    background-color: #DBE3F0;
    border-radius: var(--border-radius);
    padding: 14px;
    margin: 5px 0;
    font-size: .8rem;

    font-family: "Gotham Rounded Light", sans-serif;
    color: var(--main-color);
    font-size: .8rem;
    min-height: 40px;

}

.info b {
    font-family: "Gotham Rounded Bold", sans-serif;
}

.info small {
    font-size: .6rem !important;
}

/* Product colors */
#product1 h2,
#product1 table tr:nth-child(even) {
    background-color: #50b046 !important;
}
#product1 h2 {
    color: #fff !important;
}

#product2 h2,
#product2 table tr:nth-child(even) {
    background-color: #E2A4AB !important;
}

#product3 h2,
#product3 table tr:nth-child(even) {
    background-color: #de328c !important;
}
#product3 h2 {
    color: #fff !important;
}

#product4 h2,
#product4 table tr:nth-child(even) {
    background-color: #A39ECA !important;
}

#product5 h2,
#product5 table tr:nth-child(even) {
    background-color: #C7B8D1 !important;
}

#product6 h2,
#product6 table tr:nth-child(even) {
    background-color: #9ACEE9 !important;
}

#product7 h2,
#product7 table tr:nth-child(even) {
    background-color: #008caa !important;
}
#product7 h2 {
    color: #fff !important;
}

#product8 h2,
#product8 table tr:nth-child(even) {
    background-color: #584690  !important;
}
#product8 h2 {
    color: #fff !important;
}

#product9 h2,
#product9 table tr:nth-child(even) {
    background-color: #CAE7ED !important;
}

#product10 h2,
#product10 table tr:nth-child(even) {
    background-color: #EDBDB5 !important;
}

#product11 h2,
#product11 table tr:nth-child(even) {
    background-color: #d6862b !important;
}
#product11 h2 {
    color: #fff !important;
}

#tablaCondiciones h2 #tablaCondiciones table tr:nth-child(even) {
    background-color: #A5BBE0 !important;
}

section.product table td.not {
    background-color: #fff !important;
}
#product8 table tr:nth-child(even) td,
#product8 table tr:nth-child(even) th,
#product8 table tr:nth-child(even) td *,
#product8 table tr:nth-child(even) th * {
    color: #fff !important;
}

#product11 table tr:nth-child(even) td,
#product11 table tr:nth-child(even) th,
#product11 table tr:nth-child(even) td *,
#product11 table tr:nth-child(even) th * {
    color: #fff !important;
}

#product7 table tr:nth-child(even) td,
#product7 table tr:nth-child(even) th,
#product7 table tr:nth-child(even) td *,
#product7 table tr:nth-child(even) th * {
    color: #fff !important;
}

#product1 table tr:nth-child(even) td,
#product1 table tr:nth-child(even) th,
#product1 table tr:nth-child(even) td *,
#product1 table tr:nth-child(even) th * {
    color: #fff !important;
}

#product3 table tr:nth-child(even) td,
#product3 table tr:nth-child(even) th,
#product3 table tr:nth-child(even) td *,
#product3 table tr:nth-child(even) th * {
    color: #fff !important;
}




#product8 table td.yes {
    background-color: #F4EAC2 !important;
}

#product9 table td.yes {
    background-color: #EBCBA0 !important;
}

#product10 table td.yes {
    background-color: #EDBDB5 !important;
}

/* protection */

main.protection {
    text-align: center;
}


main.protection h1 {

    font-family: "Gotham Rounded", sans-serif;
}

main.protection h2 {
    font-family: "poppins", sans-serif;
    font-size: 180px;
    font-weight: 300;
    margin: 0;
    padding: 0;
    line-height: 240px;
    color: #8CB2DF
}

main.protection span {
    color: #8CB2DF !important;
    width: 75%;
    display: block;
    margin: 0 auto;
    text-align: center;

}


.banners {
    text-align: center;
}

.banners a {
    display: inline-block;
    width: 33%;
    margin: 20px 0
}

.banners a img {
    width: 90%;
    height: auto;
}

/* dropdown menu */


/* Dropdown container */
nav.desktop ul li.dropdown {
    position: relative;

}

/* Hide dropdown by default */
nav.desktop ul li .dropdown-menu {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    background: #fff;
    min-width: 260px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);

    z-index: 100;
    padding: 0;
    margin: 0;
    border-radius: var(--border-radius);

}

/* Show dropdown on hover */
nav.desktop ul li.dropdown:hover .dropdown-menu {
    display: block;
}

/* Dropdown menu items */
nav.desktop ul li .dropdown-menu li {
    list-style: none;
    border-bottom: 1px solid #eee;
    height: 36px;
}

nav.desktop ul li .dropdown-menu li:first-child a {
    font-weight: normal;
}

nav.desktop ul li .dropdown-menu li:last-child {
    border-bottom: none;
}

nav.desktop ul li .dropdown-menu a {
    display: block;
    padding: 12px 20px;
    color: var(--main-color);
    text-decoration: none;
    background: #fff;
    font-size: .7em;
    text-align: left;
}

nav.desktop ul li .dropdown-menu a:hover {
    background: #f3f7fb;
    color: var(--secondary-color);
}


/* Responsive */

@media (max-width: 768px) {
    header nav.desktop {
        display: none;
        /* Hide the menu on mobile devices */

    }

    header section div.mobile {
        display: block;
    }

    header ul li a {
        font-size: .7em;
        /* Adjust font size as needed */
        padding: 5px;
        /* Add padding for better clickability */
    }

    main {
        margin-top: 50px
    }

    main section {
        width: 80%;
    }

    main#home section#cover img.desktop {
        display: none;
    }

    main#home section#cover img.mobile {
        display: block;
    }



    main#home section:nth-child(3) {
        width: 100%;
    }

    main#home section:nth-child(2) div.content {
        flex-direction: column;
        gap: 20px;
        padding: 10px;
    }

    main#home section:nth-child(2) div.content>div {
        width: 100%;
        align-items: center;
        justify-content: center;
    }

    main#home section#what h2 {
        font-size: 1.5rem;
        padding: 0 50px;
        line-height: 2rem;
    }


    header section .mobile {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        width: 90%;
        padding: 10px 16px;
        text-align: left;
    }

    header section .mobile img:first-child {
        height: 40px;
    }

    header section .mobile img:nth-child(2) {
        height: 32px;
        width: 32px;
        cursor: pointer;
    }

    .sidemenu {
        display: block;
        position: fixed;
        top: 0;
        left: -100%;
        width: 90%;
        height: 100vh;
        background-color: #E1EAF1;

        box-shadow: 2px 0 16px rgba(0, 0, 0, 0.08);
        z-index: 10000;
        transition: left 0.3s;
        padding-top: 10px;
        overflow-y: auto;
        text-align: center;
    }

    .sidemenu.open {
        left: 0;
    }

    .sidemenu ul {
        list-style-type: none;
        margin: 20px 0;
        padding: 0;
    }

    .sidemenu ul a {
        text-decoration: none;
        color: var(--main-color);
        font-size: 1em;
        padding: 10px 20px;
        display: block;

        text-decoration: none;
        /* Remove underline from links */
        color: var(--main-color);
        /* Use the primary color for links */
        font-size: .8em;
        /* Adjust font size as needed */
        padding: 10px;
        /* Add padding for better clickability */
        line-height: 12px;
    }


    .sidemenu ul li a.btn {
        background-color: var(--main-color);
        color: #fff;
        border-radius: var(--border-radius);
        font-size: 9px;
        text-transform: uppercase;
        display: block;
        margin: 10px;
    }

    .sidemenu ul li a.btn:hover {
        background-color: #fff;
        color: var(--main-color);
        /* border: 1px solid var(--main-color); */
    }

    /* components */

    div.protection {
        flex-direction: column;
        gap: 15px;
    }

    div.protection>* {
        flex: 1 0 100%;
        width: 80%;
        margin: 0 auto !important;
    }

    div.protection div {
        background-color: #E1EAF1;
        border-radius: var(--border-radius);
        padding: 100px 20px 20px 20px;
        margin: 50px 40px 20px 40px !important;
        position: relative;
        font-size: 1em;
    }

    div.protection div img {
        position: absolute;
        left: 50%;
        top: -50px;
        transform: translateX(-50%);
        margin: 0;
        display: block;
    }

    /* products */

    section.product .information {
        width: 95%;
        overflow-x: auto;
        overflow-y: visible;
        border: 1px solid var(--main-color);
        border-radius: var(--border-radius);
    }

    section.product table {
        display: block;
        width: 100%;
        min-width: 1000px;
        /* or your table's minimum width */
        /* overflow-x: auto; */
        z-index: 10;
        border: none;
        font-size: .7rem;

    }

    section.tablaCondiciones table {
        display: block;
        width: 100%;
        min-width: 1000px;
        /* or your table's minimum width */
        /* overflow-x: auto; */
        z-index: 10;
        border: none;
        font-size: .7rem;

    }

    .blue-hard {
        font-size: 1rem;
    }

    section.product table td {
        padding: 10px;
        font-size: .8rem;
    }

    section.tablaCondiciones table td {
        padding: 10px;
        font-size: .8rem;
    }

    section.product table thead {
        transform: translateY(0px);

    }

    /* en movil el tbody tambien sin desplazamiento, si no la primera fila queda bajo el encabezado */
    section.product table tbody {
        transform: translateY(0px);
    }

    section.product a.btn {
        font-size: 1.2rem;
        padding: 10px 20px;
    }

    /*  */



    /* splide */

    #splide1 .splide__slide img {
        width: 60%;
    }

    #splide2 .splide__slide.is-active img {
        width: 80%;
        filter: blur(0);
        margin-top: 0;
    }

    #splide2 .splide__slide img {
        width: 80%;
        margin-top: 0;
        left: 0
    }

    #splide2 .splide__slide.is-active img {
        width: 80%;
        left: 0
    }

    /* protection */
    main.protection h2 {
        font-size: 60px;
        line-height: 70px;
        margin: 20px;
    }

    .banners a {
        display: inline-block;
        width: 90%;
        text-align: center;
    }

    #producto8 td {
        font-size: 10px !important;
        border: 1px solid red;
    }


}


.faq-container {
    max-width: 550px;
    /* Ajusta el ancho según tu diseño */
    margin: 40px auto;
    padding: 30px 25px;
    border-radius: 8px;
    font-family: 'Montserrat', 'Segoe UI', sans-serif;
    text-align: start;
    /* Tipografía limpia */
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 25px;
    /* Espaciado generoso entre bloques */
}

/* Elemento de pregunta individual */
.faq-item {
    display: block;
}

/* El título de la pregunta (Botón de clic) */
.faq-question {
    font-size: 1.15rem;
    font-weight: 700;
    color: #0d2c6c;
    /* Azul oscuro idéntico a la imagen */
    line-height: 1.3;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    /* Alinea arriba por si el título es largo */
    gap: 15px;
    user-select: none;
}

/* Eliminar la flecha por defecto del navegador */
.faq-question::-webkit-details-marker {
    display: none;
}

/* Estilo y animación de la flecha personalizada (SVG) */
.faq-arrow {
    flex-shrink: 0;
    color: #0d2c6c;
    margin-top: 2px;
    transition: transform 0.2s ease;
    transform: rotate(180deg);
    /* Flecha hacia abajo por defecto si está cerrado */
}

/* Si el acordeón está ABIERTO [open], la flecha mira hacia arriba */
.faq-item[open] .faq-arrow {
    transform: rotate(0deg);
}

/* Bloque de la respuesta */
.faq-answer {
    margin-top: 12px;
    padding-right: 25px;
    /* Evita que el texto choque con la zona de la flecha */
}

.faq-answer p {
    margin: 0;
    font-size: 1.05rem;
    color: #3e5374;
    /* Color gris azulado para el texto de respuesta */
    line-height: 1.5;
    font-weight: 400;
}

/* FAQ de productos en dos columnas, mismo ancho que la tabla */
section.product .faq-container.faq-dos-columnas {
    max-width: 100%;
    margin: 60px auto 40px;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px 60px;
    align-items: start;
}

@media (max-width: 768px) {
    section.product .faq-container.faq-dos-columnas {
        grid-template-columns: 1fr;
        width: 95%;
    }
}

/* Botones de cada producto con el mismo color de su sección */
#product1 a.btn { background-color: #50b046; color: var(--main-color); }
#product1 a {
    color: #fff !important;
}
#product3 a.btn { background-color: #de328c; color: var(--main-color); }
#product3 a {
    color: #fff !important;
}
#product7 a.btn { background-color: #008caa; color: var(--main-color); }
#product7 a {
    color: #fff !important;
}

#product8 a.btn { background-color: #584690; color: var(--main-color); }
#product8 a {
    color: #fff !important;
}
#product11 a.btn { background-color: #d6862b; color: var(--main-color); }
#product11 a {
    color: #fff !important;
}


/* ===== FOOTER ===== */
footer.footer-vidaluz {
    position: relative;
    background-color: #E9EFF8;
    border-radius: 0 clamp(50px, 6vw, 100px) 0 0;
    margin-top: 80px;
    padding: clamp(35px, 4vw, 50px) 0 40px;
    font-family: "Gotham Rounded Light", sans-serif;
}

/* iconos decorativos que salen por arriba del footer */
footer.footer-vidaluz .footer-iconos {
    position: absolute;
    top: clamp(-38px, -2.5vw, -25px);
    right: 6%;
    width: clamp(100px, 10vw, 159px);
    height: auto;
    z-index: 2;
}

footer.footer-vidaluz .footer-contenido {
    width: 80%;
    max-width: 1520px;
    margin: 0 auto;
    box-sizing: border-box;
}

footer.footer-vidaluz .footer-logo img {
    width: clamp(200px, 18vw, 297px);
    height: auto;
    display: block;
}

footer.footer-vidaluz .footer-columnas {
    display: grid;
    grid-template-columns: repeat(4, auto);
    justify-content: space-between;
    gap: 30px;
    margin-top: 35px;
}

footer.footer-vidaluz .footer-col h4 {
    margin: 0 0 20px;
    padding-bottom: 8px;
    font-family: "Gotham Rounded", sans-serif;
    font-size: 1.1rem;
    color: #2A2E70;
    position: relative;
}

/* rayita debajo del titulo */
footer.footer-vidaluz .footer-col h4::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 42px;
    height: 3px;
    border-radius: 2px;
    background-color: #2A2E70;
}

footer.footer-vidaluz .footer-col a {
    display: block;
    font-size: 1rem;
    line-height: 1.75;
    color: #7EA2D1;
    text-decoration: none;
}

footer.footer-vidaluz .footer-col a:hover {
    color: #2A2E70;
}

/* en escritorio las redes quedan debajo de "Planes de protección" */
footer.footer-vidaluz .footer-redes {
    grid-column: 1;
    width: 202px;
    display: flex;
    justify-content: space-between;
    margin-top: -10px;
    padding-top: 18px;
    border-top: 2px solid #2A2E70;
}

footer.footer-vidaluz .footer-redes a {
    display: inline-block;
    line-height: 0;
}

footer.footer-vidaluz .footer-redes img {
    width: 40px;
    height: 40px;
}

footer.footer-vidaluz .footer-legal {
    margin: 35px 0 20px;
    font-size: .8rem;
    line-height: 1.2;
    color: #7EA2D1;
    text-align: left;
}

footer.footer-vidaluz .footer-copy {
    display: block;
    font-size: .8rem;
    color: #7EA2D1;
}

/* ===== BOTONES FLOTANTES ===== */
#whatsapp.flotantes {
    width: auto;
    right: 20px;
    bottom: 20px;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}

#whatsapp.flotantes .pill {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 4px 4px 14px;
    background-color: #E9EFF8;
    border: 1px solid #7EA2D1;
    border-radius: 30px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, .15);
    font-family: "Gotham Rounded Light", sans-serif;
    font-size: 15px;
    color: #2A2E70;
    text-decoration: none;
    white-space: nowrap;
    transition: transform .2s;
}

#whatsapp.flotantes .pill:hover {
    transform: translateX(-4px);
}

#whatsapp.flotantes .pill img {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
}

/* ===== TABLET Y LAPTOP CHICA ===== */
@media (max-width: 1024px) {
    footer.footer-vidaluz .footer-contenido {
        width: 90%;
    }

    /* no caben 4 columnas, se pasan a 2 */
    footer.footer-vidaluz .footer-columnas {
        grid-template-columns: 1fr 1fr;
    }

    /* las redes salen de la columna y van en su propio renglon */
    footer.footer-vidaluz .footer-redes {
        grid-column: 1 / -1;
        margin-top: 0;
    }

    /* espacio a la derecha para que los flotantes no tapen el texto */
    footer.footer-vidaluz .footer-legal,
    footer.footer-vidaluz .footer-copy {
        padding-right: 70px;
    }

    /* flotantes solo con el icono, en circulo */
    #whatsapp.flotantes {
        right: 10px;
        bottom: 15px;
    }

    #whatsapp.flotantes .pill span {
        display: none;
    }

    #whatsapp.flotantes .pill {
        padding: 4px;
        gap: 0;
        border-radius: 50%;
    }

    #whatsapp.flotantes .pill:hover {
        transform: none;
    }
}

/* ===== MOVIL ===== */
@media (max-width: 768px) {
    footer.footer-vidaluz {
        padding-bottom: 40px;
    }

    footer.footer-vidaluz .footer-contenido {
        width: auto;
        margin: 0;
        padding: 0 20px;
    }

    /* una sola columna y las listas se abren al tocar el titulo */
    footer.footer-vidaluz .footer-columnas {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    footer.footer-vidaluz .footer-col h4 {
        margin-bottom: 10px;
        cursor: pointer;
    }

    footer.footer-vidaluz .footer-col a {
        display: none;
    }

    footer.footer-vidaluz .footer-col.abierta a {
        display: block;
    }

    /* redes al 75% del ancho, igual que el texto */
    footer.footer-vidaluz .footer-redes {
        width: 75%;
        margin-top: clamp(40px, 15vw, 100px);
        padding-top: 0;
        border-top: none;
    }

    footer.footer-vidaluz .footer-redes img {
        width: 38px;
        height: 38px;
    }

    /* texto legal y copyright al 75%, en 375px queda como el diseño */
    footer.footer-vidaluz .footer-legal,
    footer.footer-vidaluz .footer-copy {
        width: 75%;
        padding-right: 0;
        font-size: clamp(13px, 3.7vw, 15px);
        line-height: 1.15;
    }

    footer.footer-vidaluz .footer-legal {
        margin: 30px 0 20px;
    }
}

/* Footer y botones flotantes del resto del sitio, para usarlos en el home nuevo.
   Copiado de theme.css (no se carga theme.css completo porque choca con styles.css). */

@font-face {
    font-family: 'Gotham Rounded';
    src: url('../assets/fonts/gothamrnd_medium.otf') format('opentype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham Rounded Light';
    src: url('../assets/fonts/gothamrnd_light.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

#whatsapp {
    position: fixed;
    bottom: 0;
    right: 0px;
    z-index: 9999;
    width: 230px;
    display: block;
    cursor: pointer;
    padding: 8px;
    transition: box-shadow 0.2s;
}

#whatsapp img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}