/* =====================================================
           VARIABLES Y RESET
           ===================================================== */
        :root {
            --aquamarine: #73fbd3;
            --indigo-dye: #153b50;
            --indigo-dye-dark: #0d2a3a;
            --razzle-rose: #ff3cc7;
            --canary: #FFE900;
            --purple: #63038c;
            --text-dark: #2d3748;
            --text-gray: #4a5568;
            --bg-light: #f7fafc;
            --white: #ffffff;
            --regulated-color: #3182ce;
            --free-color: #38a169;
        }* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }body {
            font-family: 'Nunito', sans-serif;
            font-size: 18px;
            line-height: 1.8;
            color: var(--text-dark);
            background-color: var(--bg-light);
        }h1,
h2,
h3,
h4 {
            font-family: 'Krub', sans-serif;
            font-weight: 700;
            line-height: 1.3;
            color: var(--indigo-dye-dark);
        }/* =====================================================
           CONTENEDOR PRINCIPAL
           ===================================================== */
        .article-container {
            max-width: 900px;
            margin: 0 auto;
            background-color: var(--white);
            box-shadow: 0 6px 40px rgba(21, 59, 80, 0.1);
        }.article-content {
            padding: 50px 60px 60px;
        }/* =====================================================
           BREADCRUMBS
           ===================================================== */
        .breadcrumbs {
            background-color: var(--indigo-dye);
            padding: 15px 60px;
        }.breadcrumbs ul {
            list-style: none;
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            align-items: center;
        }.breadcrumbs li {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 0.85rem;
        }.breadcrumbs a {
            color: var(--aquamarine) !important;
            text-decoration: none;
            transition: opacity 0.3s ease;
        }.breadcrumbs a:hover {
            opacity: 0.8;
        }.breadcrumbs .separator {
            color: rgba(115, 251, 211, 0.5);
        }.breadcrumbs .current {
            color: var(--white) !important;
            opacity: 0.9;
        }/* =====================================================
           HEADER DEL ARTÍCULO
           ===================================================== */
        .article-header {
            text-align: center;
            margin-bottom: 40px;
            padding-bottom: 35px;
            border-bottom: 3px solid var(--aquamarine);
        }.article-category {
            display: inline-block;
            background-color: var(--razzle-rose) !important;
            color: var(--white) !important;
            padding: 6px 20px;
            font-family: 'Krub', sans-serif;
            font-size: 0.75rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
            border-radius: 20px;
            margin-bottom: 20px;
        }.article-header h1 {
            font-size: clamp(1.8rem, 4vw, 2.4rem);
            color: var(--indigo-dye-dark) !important;
            margin-bottom: 20px;
            line-height: 1.25;
        }.article-meta {
            display: flex;
            justify-content: center;
            gap: 25px;
            flex-wrap: wrap;
            font-size: 0.9rem;
            color: var(--text-gray);
            margin-bottom: 20px;
        }.article-meta span {
            display: flex;
            align-items: center;
            gap: 6px;
        }.article-excerpt {
            font-size: 1.15rem;
            color: var(--text-gray);
            max-width: 700px;
            margin: 0 auto;
            font-style: italic;
        }/* =====================================================
           IMAGEN DESTACADA
           ===================================================== */
        .featured-image {
            margin: -20px -60px 40px;
            border-radius: 0;
            overflow: hidden;
        }.featured-image img {
            width: 100%;
            height: auto;
            display: block;
        }.featured-image figcaption {
            padding: 12px 20px;
            background-color: var(--bg-light);
            font-size: 0.85rem;
            color: var(--text-gray);
            text-align: center;
        }/* =====================================================
           TABLA DE CONTENIDOS
           ===================================================== */
        .table-of-contents {
            background: linear-gradient(135deg, var(--indigo-dye) 0%, var(--indigo-dye-dark) 100%);
            border-radius: 20px 0 20px 0;
            padding: 30px 35px;
            margin-bottom: 45px;
        }.table-of-contents h2 {
            color: var(--aquamarine) !important;
            font-size: 1.2rem;
            margin-bottom: 20px;
            padding-bottom: 12px;
            border-bottom: 2px solid rgba(115, 251, 211, 0.3);
        }.toc-list {
            list-style: none;
            columns: 1;
        }.toc-list li {
            margin-bottom: 10px;
            padding-left: 0;
        }.toc-list a {
            color: var(--white) !important;
            text-decoration: none;
            font-size: 0.95rem;
            transition: all 0.3s ease;
            display: inline-block;
        }.toc-list a:hover {
            color: var(--aquamarine) !important;
            padding-left: 8px;
        }/* =====================================================
           CONTENIDO
           ===================================================== */
        .article-body h2 {
            font-size: clamp(1.4rem, 3vw, 1.7rem);
            color: var(--indigo-dye) !important;
            margin: 50px 0 20px;
            padding-bottom: 12px;
            border-bottom: 3px solid var(--aquamarine);
        }.article-body h3 {
            font-size: clamp(1.15rem, 2.5vw, 1.35rem);
            color: var(--indigo-dye-dark) !important;
            margin: 35px 0 15px;
        }.article-body h4 {
            font-size: 1.1rem;
            color: var(--text-dark) !important;
            margin: 25px 0 12px;
        }.article-body p {
            margin-bottom: 20px;
            text-align: justify;
        }.article-body ul,
.article-body ol {
            margin: 20px 0 25px 25px;
        }.article-body li {
            margin-bottom: 10px;
            padding-left: 8px;
        }.article-body a {
            color: var(--razzle-rose) !important;
            text-decoration: none;
            font-weight: 600;
            transition: opacity 0.3s ease;
        }.article-body a:hover {
            opacity: 0.8;
            text-decoration: underline;
        }.article-body strong {
            color: var(--indigo-dye-dark);
        }/* =====================================================
           CAJAS DESTACADAS
           ===================================================== */
        .highlight-box {
            background: linear-gradient(135deg, rgba(255, 233, 0, 0.15) 0%, rgba(255, 233, 0, 0.08) 100%);
            border-left: 5px solid var(--canary);
            border-radius: 0 15px 15px 0;
            padding: 25px 30px;
            margin: 30px 0;
        }.highlight-box p:last-child {
            margin-bottom: 0;
        }.tip-box {
            background: linear-gradient(135deg, rgba(115, 251, 211, 0.15) 0%, rgba(115, 251, 211, 0.05) 100%);
            border-radius: 15px 0 15px 0;
            padding: 25px 30px;
            margin: 30px 0;
            border: 2px solid var(--aquamarine);
        }.tip-box-title {
            font-family: 'Krub', sans-serif;
            font-weight: 700;
            color: var(--indigo-dye) !important;
            margin-bottom: 12px;
            font-size: 1.05rem;
        }.tip-box p:last-child {
            margin-bottom: 0;
        }.warning-box {
            background: linear-gradient(135deg, rgba(255, 60, 199, 0.1) 0%, rgba(255, 60, 199, 0.05) 100%);
            border-left: 5px solid var(--razzle-rose);
            border-radius: 0 15px 15px 0;
            padding: 25px 30px;
            margin: 30px 0;
        }.warning-box p:last-child {
            margin-bottom: 0;
        }.success-box {
            background: linear-gradient(135deg, rgba(72, 187, 120, 0.12) 0%, rgba(72, 187, 120, 0.05) 100%);
            border-left: 5px solid #48bb78;
            border-radius: 0 15px 15px 0;
            padding: 25px 30px;
            margin: 30px 0;
        }.success-box p:last-child {
            margin-bottom: 0;
        }/* =====================================================
           TABLAS
           ===================================================== */
        .table-wrapper {
            overflow-x: auto;
            margin: 30px 0;
            border-radius: 15px 0 15px 0;
            box-shadow: 0 4px 15px rgba(21, 59, 80, 0.1);
        }.styled-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 0.95rem;
        }.styled-table thead {
            background-color: var(--indigo-dye) !important;
        }.styled-table th {
            color: var(--aquamarine) !important;
            font-family: 'Krub', sans-serif;
            font-weight: 600;
            padding: 16px 20px;
            text-align: left;
        }.styled-table td {
            padding: 14px 20px;
            border-bottom: 1px solid #e2e8f0;
            color: var(--text-dark) !important;
        }.styled-table tbody tr:nth-child(even) {
            background-color: var(--bg-light);
        }.styled-table tbody tr:hover {
            background-color: rgba(115, 251, 211, 0.1);
        }/* =====================================================
           VS COMPARISON
           ===================================================== */
        .vs-comparison {
            display: grid;
            grid-template-columns: 1fr auto 1fr;
            gap: 20px;
            margin: 40px 0;
            align-items: start;
        }.vs-card {
            background-color: var(--white);
            border-radius: 20px 0 20px 0;
            padding: 30px 25px;
            box-shadow: 0 6px 25px rgba(21, 59, 80, 0.1);
            position: relative;
        }.vs-card--regulated {
            border-top: 5px solid var(--regulated-color);
        }.vs-card--free {
            border-top: 5px solid var(--free-color);
        }.vs-card-badge {
            position: absolute;
            top: -15px;
            left: 20px;
            padding: 5px 15px;
            border-radius: 15px;
            font-family: 'Krub', sans-serif;
            font-weight: 700;
            font-size: 0.7rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }.vs-card--regulated .vs-card-badge {
            background-color: var(--regulated-color) !important;
            color: var(--white) !important;
        }.vs-card--free .vs-card-badge {
            background-color: var(--free-color) !important;
            color: var(--white) !important;
        }.vs-card-icon {
            font-size: 2.5rem;
            margin-bottom: 15px;
            text-align: center;
        }.vs-card h3 {
            text-align: center;
            margin-bottom: 20px;
            font-size: 1.2rem;
        }.vs-card--regulated h3 {
            color: var(--regulated-color) !important;
        }.vs-card--free h3 {
            color: var(--free-color) !important;
        }.vs-card-list {
            list-style: none;
            margin: 0;
            padding: 0;
        }.vs-card-list li {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            padding: 10px 0;
            border-bottom: 1px solid #e2e8f0;
            font-size: 0.9rem;
            margin: 0;
        }.vs-card-list li:last-child {
            border-bottom: none;
        }.vs-card-list li::before {
            content: '•';
            font-weight: 700;
            flex-shrink: 0;
        }.vs-card--regulated .vs-card-list li::before {
            color: var(--regulated-color);
        }.vs-card--free .vs-card-list li::before {
            color: var(--free-color);
        }.vs-divider {
            display: flex;
            align-items: center;
            justify-content: center;
        }.vs-badge {
            background: linear-gradient(135deg, var(--indigo-dye) 0%, var(--indigo-dye-dark) 100%);
            color: var(--canary) !important;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: 'Krub', sans-serif;
            font-weight: 700;
            font-size: 1.2rem;
            box-shadow: 0 4px 15px rgba(21, 59, 80, 0.3);
        }/* =====================================================
           PROS/CONS GRID
           ===================================================== */
        .pros-cons-section {
            margin: 40px 0;
        }.pros-cons-title {
            text-align: center;
            font-family: 'Krub', sans-serif;
            font-weight: 700;
            font-size: 1.1rem;
            margin-bottom: 20px;
            padding: 10px 20px;
            border-radius: 25px;
            display: inline-block;
        }.pros-cons-title--regulated {
            background-color: rgba(49, 130, 206, 0.1);
            color: var(--regulated-color) !important;
        }.pros-cons-title--free {
            background-color: rgba(56, 161, 105, 0.1);
            color: var(--free-color) !important;
        }.pros-cons-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }.pros-box,
.cons-box {
            padding: 25px;
            border-radius: 15px 0 15px 0;
        }.pros-box {
            background: linear-gradient(135deg, rgba(72, 187, 120, 0.1) 0%, rgba(72, 187, 120, 0.05) 100%);
            border: 2px solid #48bb78;
        }.cons-box {
            background: linear-gradient(135deg, rgba(237, 100, 100, 0.1) 0%, rgba(237, 100, 100, 0.05) 100%);
            border: 2px solid #e53e3e;
        }.pros-box h4,
.pros-box h3,
.cons-box h4,
.cons-box h3 {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 15px;
            font-size: 1rem;
        }.pros-box h4,
.pros-box h3 {
            color: #2f855a !important;
        }.cons-box h4,
.cons-box h3 {
            color: #c53030 !important;
        }.pros-box ul,
.cons-box ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }.pros-box li,
.cons-box li {
            font-size: 0.9rem;
            padding: 6px 0;
            padding-left: 20px;
            position: relative;
            margin: 0;
        }.pros-box li::before {
            content: '✓';
            position: absolute;
            left: 0;
            color: #48bb78;
            font-weight: 700;
        }.cons-box li::before {
            content: '✗';
            position: absolute;
            left: 0;
            color: #e53e3e;
            font-weight: 700;
        }/* =====================================================
           PERFIL CARDS
           ===================================================== */
        .profile-section {
            margin: 40px 0;
        }.profile-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 25px;
        }.profile-card {
            background-color: var(--white);
            border-radius: 20px 0 20px 0;
            padding: 30px;
            box-shadow: 0 5px 20px rgba(21, 59, 80, 0.1);
            border: 2px solid #e2e8f0;
            transition: all 0.3s ease;
        }.profile-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 30px rgba(21, 59, 80, 0.15);
        }.profile-card--regulated {
            border-color: var(--regulated-color);
        }.profile-card--free {
            border-color: var(--free-color);
        }.profile-card-header {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 20px;
        }.profile-card-icon {
            font-size: 2.5rem;
        }.profile-card-title {
            font-family: 'Krub', sans-serif;
            font-weight: 700;
            font-size: 1.1rem;
        }.profile-card--regulated .profile-card-title {
            color: var(--regulated-color) !important;
        }.profile-card--free .profile-card-title {
            color: var(--free-color) !important;
        }.profile-card-recommendation {
            display: inline-block;
            padding: 4px 12px;
            border-radius: 12px;
            font-size: 0.7rem;
            font-weight: 700;
            text-transform: uppercase;
            margin-bottom: 15px;
        }.profile-card--regulated .profile-card-recommendation {
            background-color: rgba(49, 130, 206, 0.15) !important;
            color: var(--regulated-color) !important;
        }.profile-card--free .profile-card-recommendation {
            background-color: rgba(56, 161, 105, 0.15) !important;
            color: var(--free-color) !important;
        }.profile-card p {
            font-size: 0.9rem;
            color: var(--text-gray);
            margin: 0;
            line-height: 1.6;
        }/* =====================================================
           EJEMPLO FACTURA
           ===================================================== */
        .invoice-comparison {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            margin: 35px 0;
        }.invoice-example {
            background-color: var(--white);
            border-radius: 15px 0 15px 0;
            overflow: hidden;
            box-shadow: 0 5px 20px rgba(21, 59, 80, 0.1);
        }.invoice-header {
            padding: 15px 20px;
            text-align: center;
        }.invoice-example--regulated .invoice-header {
            background-color: var(--regulated-color) !important;
        }.invoice-example--free .invoice-header {
            background-color: var(--free-color) !important;
        }.invoice-header h4,
.invoice-header h3 {
            color: var(--white) !important;
            font-size: 0.95rem;
            margin: 0;
        }.invoice-body {
            padding: 20px;
        }.invoice-row {
            display: flex;
            justify-content: space-between;
            padding: 8px 0;
            border-bottom: 1px solid #e2e8f0;
            font-size: 0.85rem;
        }.invoice-row:last-child {
            border-bottom: none;
        }.invoice-row-label {
            color: var(--text-gray);
        }.invoice-row-value {
            font-weight: 600;
            color: var(--text-dark);
        }.invoice-total {
            margin-top: 15px;
            padding: 15px;
            border-radius: 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }.invoice-example--regulated .invoice-total {
            background-color: rgba(49, 130, 206, 0.1);
        }.invoice-example--free .invoice-total {
            background-color: rgba(56, 161, 105, 0.1);
        }.invoice-total-label {
            font-family: 'Krub', sans-serif;
            font-weight: 700;
            font-size: 0.95rem;
        }.invoice-example--regulated .invoice-total-label {
            color: var(--regulated-color) !important;
        }.invoice-example--free .invoice-total-label {
            color: var(--free-color) !important;
        }.invoice-total-value {
            font-family: 'Krub', sans-serif;
            font-weight: 700;
            font-size: 1.3rem;
        }.invoice-example--regulated .invoice-total-value {
            color: var(--regulated-color) !important;
        }.invoice-example--free .invoice-total-value {
            color: var(--free-color) !important;
        }.invoice-note {
            text-align: center;
            font-size: 0.8rem;
            color: var(--text-gray);
            margin-top: 20px;
            padding: 15px;
            background-color: var(--bg-light);
            border-radius: 10px;
        }/* =====================================================
           PROCESO CAMBIO
           ===================================================== */
        .change-process {
            background: linear-gradient(135deg, var(--bg-light) 0%, var(--white) 100%);
            border-radius: 20px 0 20px 0;
            padding: 35px;
            margin: 35px 0;
            border: 2px solid #e2e8f0;
        }.change-process-title {
            text-align: center;
            font-family: 'Krub', sans-serif;
            font-weight: 700;
            color: var(--indigo-dye) !important;
            font-size: 1.15rem;
            margin-bottom: 25px;
        }.change-steps {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 15px;
            flex-wrap: wrap;
        }.change-step {
            flex: 1;
            min-width: 150px;
            text-align: center;
            position: relative;
        }.change-step::after {
            content: '→';
            position: absolute;
            right: -20px;
            top: 25px;
            font-size: 1.5rem;
            color: var(--aquamarine);
            font-weight: 700;
        }.change-step:last-child::after {
            display: none;
        }.change-step-icon {
            width: 60px;
            height: 60px;
            background: linear-gradient(135deg, var(--indigo-dye) 0%, var(--indigo-dye-dark) 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 12px;
            font-size: 1.5rem;
        }.change-step-title {
            font-family: 'Krub', sans-serif;
            font-weight: 700;
            font-size: 0.85rem;
            color: var(--indigo-dye) !important;
            margin-bottom: 5px;
        }.change-step-desc {
            font-size: 0.8rem;
            color: var(--text-gray);
        }/* =====================================================
           FAQ
           ===================================================== */
        .faq-container {
            margin: 35px 0;
        }.faq-item {
            margin-bottom: 20px;
            border-radius: 12px 0 12px 0;
            overflow: hidden;
            box-shadow: 0 3px 10px rgba(21, 59, 80, 0.08);
        }.faq-question {
            background-color: var(--indigo-dye) !important;
            color: var(--white) !important;
            padding: 18px 25px;
            font-family: 'Krub', sans-serif;
            font-weight: 600;
            font-size: 1rem;
            display: flex;
            align-items: center;
            gap: 12px;
        }.faq-question::before {
            content: '';
    display: inline-block;
    width: 1.15em;
    height: 1.15em;
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.1 9.2a3 3 0 0 1 5.8 1c0 2-3 2.4-3 4'/%3E%3Cpath d='M12 17.2h.01'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.1 9.2a3 3 0 0 1 5.8 1c0 2-3 2.4-3 4'/%3E%3Cpath d='M12 17.2h.01'/%3E%3C/svg%3E") no-repeat center / contain;
        }.faq-answer {
            background-color: var(--bg-light);
            padding: 20px 25px;
            color: var(--text-dark) !important;
        }.faq-answer p {
            margin: 0;
        }/* =====================================================
           CTA BOX
           ===================================================== */
        .cta-box {
            background: linear-gradient(135deg, var(--indigo-dye) 0%, var(--indigo-dye-dark) 100%);
            border-radius: 25px 0 25px 0;
            padding: 45px 40px;
            margin: 50px 0;
            text-align: center;
        }.cta-box h3 {
            color: var(--aquamarine) !important;
            font-size: clamp(1.3rem, 3vw, 1.6rem);
            margin-bottom: 15px;
        }.cta-box p {
            color: var(--white) !important;
            font-size: 1.05rem;
            margin-bottom: 25px;
            opacity: 0.95;
        }.cta-buttons {
            display: flex;
            justify-content: center;
            gap: 15px;
            flex-wrap: wrap;
        }.cta-btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 14px 30px;
            font-family: 'Krub', sans-serif;
            font-weight: 700;
            font-size: 1rem;
            text-decoration: none;
            border-radius: 30px;
            transition: all 0.3s ease;
        }.cta-btn-primary {
            background-color: var(--canary) !important;
            color: var(--indigo-dye-dark) !important;
        }.cta-btn-primary:hover {
            background-color: #e6d200 !important;
            transform: translateY(-3px);
            box-shadow: 0 6px 20px rgba(255, 233, 0, 0.4);
        }.cta-btn-secondary {
            background-color: transparent !important;
            color: var(--white) !important;
            border: 2px solid var(--aquamarine) !important;
        }.cta-btn-secondary:hover {
            background-color: var(--aquamarine) !important;
            color: var(--indigo-dye-dark) !important;
        }.cta-contact {
            margin-top: 25px;
            color: rgba(255, 255, 255, 0.8);
            font-size: 0.9rem;
        }.cta-contact a {
            color: var(--aquamarine) !important;
            text-decoration: none;
            font-weight: 600;
        }/* =====================================================
           CONCLUSIÓN
           ===================================================== */
        .conclusion-box {
            background: linear-gradient(135deg, rgba(115, 251, 211, 0.12) 0%, rgba(115, 251, 211, 0.04) 100%);
            border: 2px solid var(--aquamarine);
            border-radius: 20px 0 20px 0;
            padding: 35px;
            margin: 45px 0;
        }.conclusion-box h2 {
            color: var(--indigo-dye) !important;
            border: none !important;
            margin-top: 0 !important;
            padding-bottom: 0 !important;
        }/* =====================================================
           COMPARTIR REDES
           ===================================================== */
        .share-section {
            margin-top: 50px;
            padding-top: 30px;
            border-top: 2px solid #e2e8f0;
            text-align: center;
        }.share-section h4,
.share-section h3 {
            margin-bottom: 20px;
            color: var(--text-gray) !important;
            font-size: 1rem;
        }.share-buttons {
            display: flex;
            justify-content: center;
            gap: 12px;
            flex-wrap: wrap;
        }.share-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 45px;
            height: 45px;
            border-radius: 50%;
            text-decoration: none;
            font-size: 1.2rem;
            transition: all 0.3s ease;
        }.share-btn:hover {
            transform: translateY(-3px);
        }.share-btn-facebook {
            background-color: #1877f2 !important;
            color: var(--white) !important;
        }.share-btn-twitter {
            background-color: #1da1f2 !important;
            color: var(--white) !important;
        }.share-btn-linkedin {
            background-color: #0077b5 !important;
            color: var(--white) !important;
        }.share-btn-whatsapp {
            background-color: #25d366 !important;
            color: var(--white) !important;
        }.share-btn-email {
            background-color: var(--indigo-dye) !important;
            color: var(--white) !important;
        }/* =====================================================
           RESPONSIVE
           ===================================================== */
        @media (max-width: 900px) {.vs-comparison {
                grid-template-columns: 1fr;
                gap: 30px;
            }.vs-divider {
                order: -1;
            }.vs-badge {
                width: 50px;
                height: 50px;
                font-size: 1rem;
            }
        }@media (max-width: 768px) {.article-content {
                padding: 30px 25px 40px;
            }.breadcrumbs {
                padding: 12px 25px;
            }.featured-image {
                margin: -10px -25px 30px;
            }.table-of-contents {
                padding: 25px;
            }.pros-cons-grid {
                grid-template-columns: 1fr;
            }.invoice-comparison {
                grid-template-columns: 1fr;
            }.change-steps {
                flex-direction: column;
                align-items: center;
            }.change-step {
                width: 100%;
                max-width: 250px;
            }.change-step::after {
                content: '↓';
                right: auto;
                left: 50%;
                transform: translateX(-50%);
                top: auto;
                bottom: -25px;
            }.profile-grid {
                grid-template-columns: 1fr;
            }.cta-box {
                padding: 35px 25px;
            }.cta-buttons {
                flex-direction: column;
            }.cta-btn {
                width: 100%;
                justify-content: center;
            }.article-meta {
                flex-direction: column;
                gap: 10px;
            }.share-btn {
                width: 42px;
                height: 42px;
            }
        }@media (max-width: 480px) {body {
                font-size: 16px;
            }.article-content {
                padding: 25px 20px 35px;
            }.breadcrumbs {
                padding: 10px 20px;
            }.featured-image {
                margin: -10px -20px 25px;
            }.table-of-contents,
.tip-box,
.highlight-box,
.warning-box,
.success-box {
                padding: 20px;
            }.vs-card {
                padding: 25px 20px;
            }.pros-box,
.cons-box {
                padding: 20px;
            }.profile-card {
                padding: 25px;
            }.change-process {
                padding: 25px 20px;
            }
        }


/* El acordeón lo abre/cierra assets/js/main.js: sin esto salen
   todas las respuestas desplegadas de golpe. */
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}
.faq-question { cursor: pointer; }

.faq-question {
    width: 100%;
    background: none;
    border: none;
    margin: 0;
    text-align: left;
    font: inherit;
    color: inherit;
    -webkit-appearance: none;
    appearance: none;
    min-height: 48px;
}
