/* =======================================================
   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;
}

.BaseTemplate_seo-landing__RDdyG {
    padding: 0 !important;
    background-color: #fff !important;
    border: none !important;
}
div[data-testid="power-card-content"]{
    padding-top: 0.5rem;
}

.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;
}

h3 {
    font-size: 1.4rem !important;
}

h4 {
    font-size: 1.2rem !important;
    margin: 0;
}

p {
    margin: .65rem 0 0;
    color: var(--color-text);
}
.titulo-principal {
  font-size: 32px;
  font-weight: 500; /* o 600 si tu fuente lo permite */
  font-style: normal; /* IMPORTANTE: no es cursiva */
  color: #222;
}

.highlight {
  /* font-size: 20px; */
  font-style: italic;
  color: #444;
  display: block;
}

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

.section-title {
    padding-top: 3rem;
    font-size: 2rem;
      font-size: 32px;
  font-weight: 500; /* o 600 si tu fuente lo permite */
  font-style: normal; /* IMPORTANTE: no es cursiva */
  color: #222;

}

.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 2.2rem;
    position: relative;
}

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



.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;
}

/* =======================================================
   LISTADO ICON
   ======================================================= */
.list-icon li {
    display: flex;
    align-items: flex-start;
    gap: 5px;
    padding-bottom: 1rem;
}

.list-icon {

    padding-left: 1rem;

}

.list-icon li::before {
    content: "";
    min-width: 18px;
    height: 18px;
    background-image: url("https://images.contentstack.io/v3/assets/blt6a82e9c0570891fd/blt3db114ca8aa8e7e7/69bb3a15f44075c836fbf73d/icon-check.png");
    background-size: contain;
    background-repeat: no-repeat;
}

@media (max-width: 600px) {
    .list-icon li {
        display: inline-block;
        padding-bottom: 1rem;
    }
      .list-icon strong {
        padding-left: 1rem;
    }

    .list-icon li::before {
        display: inline-block;
        width: 18px;

    }
}

.color-blue {
    color: #0072CE !important;
}

.color-gray {
    color: #848484 !important;
}

/* =======================================================
   TIMELINE
   ======================================================= */

.timeline {
    max-width: 800px;
    margin: 40px auto;
    padding: 0 20px;
    position: relative;
}

/* Línea vertical */
.timeline::before {
    content: "";
    position: absolute;
    left: 40px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #d0d5dd;
}

.item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    position: relative;
}


.icon {
    min-width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid #3b82f6;
    color: #3b82f6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    z-index: 1;
}

.content {
    margin-left: 20px;
}

.content h3 {
    margin: 0;
    font-size: 18px;
    color: #111827;
}

.content p {
    margin-top: 6px;
    color: #6b7280;
    font-size: 1rem;
    line-height: 1.4;
}

a[data-cta="true"]:hover,
a[data-cta="true"] {
    text-decoration: none !important;
}

.min-h-pw {
    min-height: 12rem;
}

.min-h-pw-carousel {
    min-height: 12rem;
}

div[data-testid="power-card-content"] .gInIje {
    font-size: 1rem;
    line-height: 1.5;
    text-decoration: none;
}

.jxuAIS.border-3d {
    border-radius: 12px;
    box-shadow: -12px 0 0 rgba(0, 0, 0, 0.15), -20px 0 20px rgba(0, 0, 0, 0.2);
}

.bScbpD.border-3d {
    border-radius: 12px;
    box-shadow:
        12px 0 0 rgba(0, 0, 0, 0.15),
        /* borde sólido */
        20px 0 20px rgba(0, 0, 0, 0.2);
    /* blur */
}

/* 📱 Responsive */
@media (max-width: 600px) {
    .border-3d {
        border-radius: 12px;
        box-shadow: none;
    }

    .timeline {
        margin: 2rem auto;
    }

    .timeline::before {
        left: 35px;
    }

    .icon {
        min-width: 32px;
        height: 32px;
        font-size: 14px;
    }

    .content {
        margin-left: .5rem;
    }

    .icon-listado-header {
        margin: 0;
    }

    .content h3 {
        font-size: 16px;
    }

    .content p {
        font-size: 0.9rem;
        margin-top: 0;
    }

    .pw-card p {
        margin: 0px;
        font-size: .9rem;
    }

}

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

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

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

.faq-question h2 {
    font-size: 1rem !important;
    font-weight: 600 !important;
}

.faq-arrow-circle {
    width: 34px;
    height: 34px;
    background: #d9d9d9;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
}

.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: 0.5rem 4rem 2rem;
}

/* =======================================================
   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;
    max-width: 950px;
    margin: 0 auto;
    border-collapse: collapse;
    text-align: center;
    background-color: #ffffff;
    font-size: 0.95em;
    color: #333;
    border-collapse: separate;
    border-spacing: 3px;
}

/* Encabezados */
.advantages-table table th {
    background-color: #5E5E5E;
    color: #fff;
    padding: 1.5rem 1rem;
    border: 1px solid #ccc;
    font-weight: bold;
}

/* Celdas */
.advantages-table table td {
    background-color: #f1f1f1;
    padding: 0.2rem .5rem;
    border: none;
}

/* Celdas */
.advantages-table table td:nth-child(1) {
    background-color: #d4d4d4;
}

/* ---------- RESPONSIVE DKP ---------- */
@media (min-width: 768px) {
    .advantages-table table {
        border-spacing: 6px;
    }

    .advantages-table table td {
        background-color: #f1f1f1;
        padding: 1rem;
        border: none;
    }

    .advantages-table {
        padding: 1rem 4rem;
    }

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

/* =======================================================
   POWERCARD-CAROUSEL
   ======================================================= */
.wrapper-px {
    padding-left: 3rem;
    padding-right: 3rem;
    padding-bottom: 1rem !important;
}

@media (max-width: 600px) {
    .wrapper-px {
        padding-left: .25rem;
        padding-right: .25rem;
        padding-bottom: 1.5rem !important;
    }
}

/* =======================================================
   ICON BLOCK (REUTILIZABLE)
   ======================================================= */

.icon-block-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 10px;
    width: fit-content;
}

.icon-listado-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 10px;
    width: fit-content;
}

.icon-listado-icon {
    width: 30px;
    height: 30px;
    object-fit: contain;
    flex-shrink: 0;
}

.icon-block-icon {
    width: 44px;
    height: 44px;
    object-fit: contain;
    flex-shrink: 0;
}

.icon-block-title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
}

/* Variante opcional con fondo */
.icon-block {
    /* opcional */
    /* background: #f5f5f5; */
    /* border-radius: 8px; */
}

/* 📱 Responsive */
@media (max-width: 600px) {
    .icon-block-icon {
        width: 34px;
        height: 34px;
    }

    .icon-block-title {
        font-size: 1.25rem !important;
        text-align: left;
    }
}

/* =======================================================
   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: 0.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: 28px;
        height: 28px;
        right: 1.5rem;
        position: absolute;
        margin-right: .5rem;
        /* right: 0.5rem; */
    }

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

    .faq-answer.open {
        padding: 0 1rem;
    }

    .faq-answer p {
        padding: 0 !important;
        margin: 6px 0 !important;
    }




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