/* =======================================================
   GLOBAL RESET & BASE
   ======================================================= */
*,
*::before,
*::after {
    box-sizing: border-box;
    font-family: "Lato", sans-serif;
}

html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: "Roboto", Arial, Helvetica, sans-serif;
    line-height: 1.45;
    background: #fff;
    color: #212529;
    -webkit-font-smoothing: antialiased;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

/* =======================================================
   DESIGN TOKENS
   ======================================================= */
:root {
    --color-primary: #007bff;
    --color-primary-dark: #005fcc;
    --color-text: #333;
    --radius: 6px;
    --container-width: min(1150px, 94%);
}

/* =======================================================
   LAYOUT
   ======================================================= */
.container {
    width: var(--container-width);
    margin: 0 auto;
}

.container-fluid {
    width: 100%;
    max-width: 1280px;
    padding: 0 1rem;
    margin: 0 auto;
}

.text-center {
    text-align: center;
}
.bg-gray{
     background: #f5f5f5;
}

/* =======================================================
   TYPOGRAPHY
   ======================================================= */
h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--color-text);
    margin-bottom: .5rem;
    font-weight: 500;
    line-height: normal;
}

h4 {
    font-size: 1.5rem;
    margin: 0;
}

p {
    margin: .65rem 0 0;
    color: var(--color-text);
}

.section-title,
.section-subtitle {
    text-align: center;
    font-weight: 700;
    margin-top: 0;
    line-height: normal;
}

.section-title {
    padding-top: 3rem;
    font-size: 2rem;
    
}

.section-subtitle {
    margin-bottom: .75rem;
    font-size: 1.8rem;
}

.section-text {
    font-size: 1rem;
    max-width: 900px;
    margin: 0 auto 1rem;
}

/* =======================================================
   LINKS & BUTTONS
   ======================================================= */
a {
    color: var(--color-primary);
    font-weight: 500;
    text-decoration: none;
    transition: color .12s ease;
}

a:hover {
    color: var(--color-primary-dark);
}

.btn {
    display: inline-block;
    padding: 10px 16px;
    background: var(--color-primary);
    color: #fff;
    border-radius: 6px;
    font-weight: 600;
    border: none;
    cursor: pointer;
}

.btn:hover {
    background: var(--color-primary-dark);
}

/* =======================================================
   HERO
   ======================================================= */
.section-hero {
    padding: 50px 0 12px;
    background: #fff;
}

.hero-content {
    max-width: 900px;
    margin: auto;
    padding: 0 8px;
}

.section-title-line {
    display: block;
    max-width: 450px;
    margin: .5rem auto 1rem;
}

.hero-img {
    width: 100%;
    border-radius: var(--radius);
    object-fit: cover;
}

/* =======================================================
   POWERCARDCAROUSEL
   ======================================================= */
.PowercardCarousel {
    padding: 3.5rem 0 1.5rem;
}

.PowercardCarousel-wrapper {
    padding-bottom: 2.5rem;
}

.PowercardCarousel-wrapper .card-info {
    padding: 1.656rem 0 2rem;
}

.PowercardCarousel-swiper.few-items {
    width: 86%;
    margin: 0 auto;
}

/* ⭐ FLECHA DERECHA (SVG BASE64) */
.swiper-button-next,
.swiper-button-prev {
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjFweCIgaGVpZ2h0PSIzN3B4IiB2aWV3Qm94PSIwIDAgMjEgMzciIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDY0ICg5MzUzNykgLSBodHRwczovL3NrZXRjaC5jb20gLS0+CiAgICA8dGl0bGU+aWNvbi9hcnJvdy9yaWdodDwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxnIGlkPSJTeW1ib2xzIiBzdHJva2U9IiMzMzMzMzMiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iaWNvbi9hcnJvdy9yaWdodCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTI3LjAwMDAwMCwgLTIwLjAwMDAwMCkiIGZpbGw9IiNCQkJCQkIiPgogICAgICAgICAgICA8cG9seWdvbiBpZD0iUGF0aCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzcuNDM0NzUwLCAzOC4zOTU4MzMpIHNjYWxlKC0xLCAtMSkgcm90YXRlKDkwLjAwMDAwMCkgdHJhbnNsYXRlKC0zNy40MzQ3NTAsIC0zOC4zOTU4MzMpICIgcG9pbnRzPSI1NC4wNTUgMjguNSA1NS44Njk1IDMwLjMxNDUgMzcuNDMzMTY2NyA0OC4yOTE2NjY3IDE5IDMwLjMxNDUgMjAuODE0NSAyOC41IDM3LjE2MDUyMjMgNDQuMzc5NzU2NCAzNy43MTIxNDQzIDQ0LjM3OTc1NjQiPjwvcG9seWdvbj4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==") !important;
}

/* ⭐ FLECHA IZQUIERDA → MISMO ICONO, ROTADO */
.swiper-button-prev {
    transform: scaleX(-1);
}

.PowercardCarousel-swiper.few-items .swiper-wrapper {
    padding-bottom: 0rem;
}

.PowercardCarousel-swiper.few-items img,
.PowercardCarousel-swiper.few-items .card-info {
    width: 90%;
    margin: 0 auto;
}

.PowercardCarousel-swiper.many-items img {
    width: 100%;
}

/* =======================================================
   RICHTEXT-INFO
   ======================================================= */

.Richtext-info{
    padding: .8rem 0;
}

/* =======================================================
   POWERCARD
   ======================================================= */
.PowerCard {
    display: flex;
    padding: .8rem 0;
}

.row-reverse {
    flex-direction: row-reverse;
}

.PowerCard-media {
    flex: 0 0 46%;
}

.PowerCard-content {
    padding: 1.2rem 1.2rem 1.2rem 3.2rem;
    position: relative;
}

.PowerCard-content-flex {
    flex: 1;
    display: flex;
    align-items: center;
}

.PowerCard-content-flag::before {
    content: '';
    height: 4rem;
    width: .4rem;
    background: #0072CE;
    position: absolute;
    left: .9rem;
    top: 50%;
    transform: translateY(-50%);
}

.row-reverse .PowerCard-content-flag::before {
    left: auto;
    right: .9rem;
}

.card-info {
    padding: .8rem 0;
}

.Richtext-card-info{
   padding:  3rem;
}
.card-info,
.card-link {
    font-weight: 300;
    font-size: 1rem;
    line-height: 1.4;
    text-align: left;
}

/* =======================================================
   PROS & CONS
   ======================================================= */
.pros-cons {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    padding: .8rem 0;
}

.pros-cons-column {
    flex: 1 1 50%;
    padding: 2rem 1rem 2rem 3rem;
    background: #f5f5f5;
    position: relative;
}

.pros-cons-column::after {
    content: '';
    height: 4rem;
    width: .4rem;
    background: #0072CE;
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
}

.card-info-list {
    padding-left: 20px;
    margin: 0rem 0;
    line-height: 1.6;
}

/* =======================================================
   SWIPER
   ======================================================= */
.swiper-wrapper {
    height: auto;
    padding-bottom: 2rem;
}

.swiper-pagination-bullet {
    background: #c0c0c0;
}

.swiper-pagination-bullet-active {
    background: #8b8b8b;
}

.swiper-button-next,
.swiper-button-prev {
    width: 35px;
    height: 66px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 9px 15px;
    background-color: #fff;
    border-radius: 5px;
    border: 1px solid #b5b5b5;
    top: 140px;
}

/* Icono derecha */
.swiper-button-next {
    right: 0;
    background-image: var(--arrow-right);
}

/* Icono izquierda */
.swiper-button-prev {
    left: 0;
    transform: scaleX(-1);
    background-image: var(--arrow-right);
}

.swiper-button-next:after,
.swiper-button-prev:after {
    display: none;
}

/* =======================================================
   FAQ
   ======================================================= */
.faq {
    padding: 2.5rem 0 6rem;
}

.faq-item {
    border: 1px solid #e7e7e7;
    border-radius: 4px;
    margin-bottom: .5rem;
}

.faq-question {
    background: #f8f8f8;
    width: 100%;
    height: 4rem;
    padding: 0 2.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
}

.faq-arrow-circle {
    width: 34px;
    height: 34px;
    background: #9b9b9b;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.faq-arrow {
    color: #fff;
    transition: .3s;
}

.faq-question[aria-expanded="true"] .faq-arrow {
    transform: rotate(180deg);
}

.faq-answer {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    padding: 0 2.5rem;
    transition: max-height .35s ease, opacity .25s ease;
    color: #767676;
}

.faq-answer.open {
    max-height: 500px;
    opacity: 1;
}

.faq-answer p {
    margin: 12px 0;
    padding: 2.5rem 0;
}

/* =======================================================
   TABLAS
   ======================================================= */

.Richtext-table {
    padding: .8rem 0;
}

/* ---------- CONTENEDOR GENERAL ---------- */
.powercard.advantages-table {
    background-color: #f5f5f5;
    padding: 2rem 1.5rem;
}

.powercard.advantages-table h4 {
    text-align: center;
    margin-bottom: 1.5rem;
}

/* ---------- WRAPPER PARA SCROLL EN MÓVIL ---------- */
.table-wrapper {
    width: 100%;
    overflow-x: auto;
    padding: .5rem 0 ;
    /* Hace scroll horizontal en mobile */
}

/* ---------- TABLA BASE ---------- */
.advantages-table table {
    width: 100%;
    min-width: 650px;
    /* Para mantener formato en móvil */
    border-collapse: collapse;
    text-align: center;
    background-color: #ffffff;
    font-size: 0.95em;
    color: #333;
}

/* Encabezados */
.advantages-table table th {
    background-color: #f5f5f5;
    padding: 8px;
    border: 1px solid #ccc;
    font-weight: bold;
}

/* Celdas */
.advantages-table table td {
    background-color: #ffffff;
    padding: 8px;
    border: 1px solid #ccc;
}

/* ---------- RESPONSIVE DKP ---------- */
@media (min-width: 768px) {
    .advantages-table {
        padding: 3rem 4rem 3rem 3.2rem;
    }

    .table-wrapper {
        overflow-x: visible;
        padding: 1rem 0;
        /* En desktop se muestra completo */
    }
}


/* =======================================================
   RESPONSIVE
   ======================================================= */
@media (max-width: 900px) {
    .PowerCard {
        flex-direction: column;
        gap: 0px;
    }
}

@media (max-width: 660px) {

    .PowercardCarousel-swiper.few-items,
    .PowercardCarousel-swiper.few-items .card-info {
        width: 100%;
        margin: 0 auto;
    }
    .advantages-table{
        padding: 1.5rem;

    }

    .section-title {
        font-size: 1.8rem;
        padding-top: 1rem;
    }
     .section-subtitle {
        font-size: 1.6rem;
        padding-top: 1rem;
    }
    .section-text {
        font-size: 1.2rem;
    }

    .card-info {
        padding: 1.5rem;
    }

  

    .pros-cons-column {
        padding: 0rem;
    }

    .pros-cons {
        flex-direction: column;
        padding: 1rem 0;
        gap: 1rem;
    }
.Richtext-card-info{
    padding: 1.5rem;
}
    .PowerCard ,
    .Richtext-table{
        padding: 1rem 0;
    }


    .pros-cons-column::after {
        display: none;
    }

    .PowerCard-media,
    .PowerCard-content {
        padding: 0
    }

    .PowerCard-content::before {
        display: none;
    }

    .faq-arrow-circle {
        width: 31px;
        height: 31px;
        right: 1.5rem;
        position: absolute;
        /* right: 0.5rem; */
    }

    .faq-question {
        padding: 1.2rem 3rem 1.2rem 1rem;
        text-align: left;
        height: 5rem;
    }

    .faq-answer p {
        padding: 1rem 0;
        margin: 6px 0;
    }

    .section-title-line {
        width: 100%;
    }
}