:root {
    --spcl-color-primary: #00A8A8;
    --spcl-color-secondary: #254EBB;
    --spcl-color-text: #1a202c;
    --spcl-color-text-light: #4a5568;
    --spcl-color-background: #f7fafc;
    --spcl-color-card-bg: #ffffff;
    --spcl-color-border: #e2e8f0;
    --spcl-color-highlight: #ffc107;
    --spcl-color-success: #10B981;
    --spcl-color-success-light-bg: #F0FDF4;
    --spcl-border-radius: 16px;
    --spcl-box-shadow: 0 8px 25px rgba(0,0,0,0.06);
    --spcl-box-shadow-hover: 0 14px 40px rgba(0,0,0,0.09);
    --spcl-box-shadow-recommended: 0 18px 50px rgba(37, 78, 187, 0.25);
    --spcl-box-shadow-popular: 0 18px 50px rgba(0, 168, 168, 0.25);

    --spcl-font-heading: 'Nunito', sans-serif;
    --spcl-font-body: 'Roboto', sans-serif;
    --spcl-font-microcopy: 'Montserrat', sans-serif;

    --spcl-font-size-base: 19px;
    --spcl-font-size-microcopy-val: 1.25rem;
    --spcl-font-size-ownership-summary-val: 1.2rem;
    --spcl-font-size-sm-val: 1.35rem;
    --spcl-font-size-md-val: 1.45rem;
    --spcl-font-size-lg-val: 1.8rem;
    --spcl-font-size-xl-val: 2.2rem;
    --spcl-font-size-3xl-val: 3.6rem;

    --spcl-tooltip-bg: var(--spcl-color-text);
    --spcl-tooltip-text-color: var(--spcl-color-card-bg);
    --spcl-tooltip-arrow-size: 10px;
    --spcl-tooltip-max-width: 320px;
    --spcl-tooltip-padding: 18px 22px;
    --spcl-tooltip-font-size: calc(var(--spcl-font-size-sm-val) * 0.85);
    --spcl-tooltip-z-index: 250;
    --spcl-tooltip-arrow-offset-x: 50%;
}

.spcl-plans-page-container {
    position: relative;
    z-index: 1;
}

.spcl-plans-page {
    font-family: var(--spcl-font-body);
    background-color: var(--spcl-color-background);
    color: var(--spcl-color-text);
    padding: 60px 0;
    font-size: var(--spcl-font-size-base);
    line-height: 1.75;
}

/* --- INICIO: NUEVOS ESTILOS PARA EL SELECTOR DE FRECUENCIA v2.4.23 --- */
.spcl-frequency-selector {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 25px auto; /* Reducido de 40px */
    background-color: #e9e9f0;
    border-radius: var(--spcl-border-radius);
    padding: 6px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

.spcl-frequency-button {
    background-color: transparent;
    border: none;
    padding: 12px 24px;
    font-family: var(--spcl-font-heading);
    font-size: var(--spcl-font-size-md-val);
    font-weight: 700;
    color: var(--spcl-color-text-light);
    border-radius: calc(var(--spcl-border-radius) - 6px);
    cursor: pointer;
    transition: color 0.3s ease, background-color 0.3s ease;
    display: flex;
    align-items: center;
    gap: 10px;
}

.spcl-frequency-button:hover:not(.spcl-frequency-button--active) {
    color: var(--spcl-color-text);
}

.spcl-frequency-button--active {
    background-color: var(--spcl-color-card-bg);
    color: var(--spcl-color-primary);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.spcl-frequency-savings-badge {
    background-color: var(--spcl-color-highlight);
    color: var(--spcl-color-text);
    padding: 4px 10px;
    border-radius: 8px;
    font-size: calc(var(--spcl-font-size-sm-val) * 0.75);
    font-weight: 700;
    line-height: 1.2;
    transition: all 0.3s ease;
    opacity: 0.8;
}

.spcl-frequency-button--active .spcl-frequency-savings-badge {
    opacity: 1;
    transform: scale(1.05);
}
/* --- FIN: NUEVOS ESTILOS PARA EL SELECTOR DE FRECUENCIA --- */


.spcl-plans-slider-container {
    position: relative;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    overflow-y: visible !important;
    overflow-x: hidden !important;
}

.spcl-plans-slider { /* Regla general para PC */
    padding-top: 70px; /* Reducido de 90px */
    padding-bottom: 90px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    z-index: 2;
}

.spcl-plans-slider .swiper-wrapper {
    position: relative;
    z-index: 1;
    display: flex;
}

.spcl-plans-slider-container::before,
.spcl-plans-slider-container::after {
    content: ""; position: absolute; top: 0; bottom: 80px; /* Ajustar 'bottom' si el padding-top del slider cambia en PC */
    width: 90px; z-index: 5;
    pointer-events: none;
    transition: opacity 0.4s ease; opacity: 0;
}
.spcl-plans-slider-container::before {
    left: -15px; background: linear-gradient(to right, var(--spcl-color-background) 25%, hsla(0,0%,98.8%,0));
}
.spcl-plans-slider-container::after {
    right: -15px; background: linear-gradient(to left, var(--spcl-color-background) 25%, hsla(0,0%,98.8%,0));
}
.spcl-plans-slider-container.spcl-slider-scrollable-left::before { opacity: 1; }
.spcl-plans-slider-container.spcl-slider-scrollable-right::after { opacity: 1; }
.spcl-plans-slider-container.spcl-slider-not-scrollable::before,
.spcl-plans-slider-container.spcl-slider-not-scrollable::after { opacity: 0 !important; }


.spcl-plan-card-slide {
    height: auto;
    display: flex;
    align-items: flex-start; /* v2.4.20.1: Cambiado de stretch a flex-start para evitar que las tarjetas se estiren */
    box-sizing: border-box;
    overflow: visible !important;
}

.spcl-plan-card {
    background-color: var(--spcl-color-card-bg);
    border: 1px solid var(--spcl-color-border);
    border-radius: var(--spcl-border-radius);
    box-shadow: var(--spcl-box-shadow);
    padding: 20px;
    text-align: left; display: flex; flex-direction: column;
    transition: transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
    width: 100%;
    position: relative;
    z-index: 3;
    font-family: var(--spcl-font-body);
}
.spcl-plan-card:hover,
.spcl-plan-card.spcl-plan-card--force-hover {
    transform: translateY(-14px);
    box-shadow: var(--spcl-box-shadow-hover);
    z-index: 15;
}
.spcl-plan-card--recommended {
    border: 3.5px solid var(--spcl-color-secondary);
    box-shadow: var(--spcl-box-shadow-recommended);
    transform: scale(1.05) translateY(-12px); /* Transformación para PC */
    z-index: 20;
}
.spcl-plan-card--recommended:hover,
.spcl-plan-card--recommended.spcl-plan-card--force-hover {
    transform: scale(1.06) translateY(-18px); /* Transformación para PC en hover */
    box-shadow: 0 20px 55px rgba(37, 78, 187, 0.3);
    z-index: 25;
}

.spcl-plan-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    background-color: var(--spcl-color-secondary); color: white;
    padding: 14px 30px; font-size: 1.1rem;
    font-weight: 700; font-family: var(--spcl-font-heading);
    border-bottom-left-radius: var(--spcl-border-radius);
    border-top-right-radius: calc(var(--spcl-border-radius) - 3.5px);
    animation: spcl-pulse-badge 2.5s infinite cubic-bezier(0.68, -0.55, 0.27, 1.55);
    z-index: 30;
}

.spcl-plan-badge--popular {
    background-color: var(--spcl-color-primary);
    box-shadow: var(--spcl-box-shadow-popular);
}

@keyframes spcl-pulse-badge {
    0%, 100% { opacity: 1; transform: scale(1) rotate(0deg); }
    50% { opacity: 0.9; transform: scale(1.07) rotate(1.5deg); }
}

.spcl-plan-header {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--spcl-color-border);
}
.spcl-plan-title {
    font-family: var(--spcl-font-heading); font-size: var(--spcl-font-size-xl-val);
    color: var(--spcl-color-secondary); margin: 0 0 15px 0;
    font-weight: 800;
}
.spcl-plan-price-info { 
    margin-bottom: 15px;
    text-align: left; /* Revertido a left */
}

.spcl-plan-price-line {
    display: flex;
    align-items: baseline;
    justify-content: flex-start; /* Alineación a la izquierda */
}

/* NUEVO: Estilo para el prefijo de precio (ej. "A partir de") */
.spcl-plan-price-prefix {
    display: block;
    font-family: var(--spcl-font-heading);
    font-size: var(--spcl-font-size-md-val);
    font-weight: 600;
    color: var(--spcl-color-text-light);
    margin-bottom: -8px;
    line-height: 1.2;
    text-align: left; /* Alineado a la izquierda para consistencia */
}

.spcl-plan-price {
    font-family: var(--spcl-font-heading); font-size: var(--spcl-font-size-3xl-val);
    font-weight: 800; color: var(--spcl-color-primary);
}
.spcl-plan-price-suffix {
    font-size: var(--spcl-font-size-md-val);
    color: var(--spcl-color-text-light); margin-left: 12px;
    font-family: var(--spcl-font-body); font-weight: 500;
}
.spcl-plan-microcopy {
    font-family: var(--spcl-font-microcopy); font-style: normal;
    font-weight: 500;
    font-size: var(--spcl-font-size-microcopy-val);
    color: var(--spcl-color-text-light); margin: 0;
    line-height: 1.7; min-height: calc(1.7em * 2.5);
}
.spcl-plan-microcopy strong {
    font-weight: 700;
    color: var(--spcl-color-text);
}

.spcl-plan-hosting-info {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 15px;
    margin-top: 15px;
    margin-bottom: 18px;
    background-color: #f8f9fc;
    border-radius: calc(var(--spcl-border-radius) / 2);
    border: 1px solid var(--spcl-color-border);
    font-size: var(--spcl-font-size-sm-val);
    line-height: 1.6;
    font-family: var(--spcl-font-body);
}

.spcl-plan-hosting-info-icon {
    flex-shrink: 0;
    width: 1.8em;
    height: 1.8em;
    color: var(--spcl-color-primary);
    margin-top: 0.1em;
}

.spcl-plan-hosting-info-text {
    display: flex;
    flex-direction: column;
}
.spcl-plan-hosting-info-text strong {
    font-weight: 700;
    color: var(--spcl-color-text);
    font-size: 1.05em;
    margin-bottom: 4px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.spcl-plan-hosting-info-text span {
    color: var(--spcl-color-text-light);
    font-size: 0.95em;
}


.spcl-plan-tabs {
    margin-bottom: 20px;
    flex-grow: 1;
    display: flex; flex-direction: column;
}
.spcl-plan-tabs-nav-container {
    display: flex; align-items: center;
    margin-bottom: 15px;
    border-bottom: 1px solid var(--spcl-color-border);
    position: relative;
}
.spcl-plan-tab-nav {
    background: transparent; border: none; padding: 8px;
    cursor: pointer;
    color: var(--spcl-color-secondary); flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    z-index: 2;
}
.spcl-plan-tab-nav svg { width: 22px; height: 22px; fill: currentColor; }
.spcl-plan-tab-nav:disabled { opacity: 0.3; cursor: not-allowed; }
.spcl-plan-tab-nav:hover:not(:disabled) { color: var(--spcl-color-primary); }

.spcl-plan-tab-list-wrapper {
    overflow: hidden;
    flex-grow: 1;
    position: relative;
    margin-left: 0;
    margin-right: 0;
}
.spcl-plan-tab-list {
    display: flex; flex-wrap: nowrap; gap: 0;
    transform: translateX(0px);
    transition: transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
    padding-bottom: 0;
    scrollbar-width: none; /* Firefox */
}
.spcl-plan-tab-list::-webkit-scrollbar { display: none; /* Chrome, Safari, Opera */ }

.spcl-plan-tab-button {
    background-color: transparent; border: none;
    border-bottom: 4px solid transparent;
    padding: 12px 15px;
    margin-right: 8px;
    margin-bottom: -2px;
    cursor: pointer; font-size: var(--spcl-font-size-md-val);
    font-family: var(--spcl-font-heading); font-weight: 700;
    color: var(--spcl-color-text-light);
    transition: color 0.25s ease, border-color 0.25s ease;
    display: flex; align-items: center; gap: 8px;
    white-space: nowrap; flex-shrink: 0;
}
.spcl-plan-tab-button:last-child { margin-right: 0; }
.spcl-plan-tab-button:hover { color: var(--spcl-color-primary); }
.spcl-plan-tab-button--active {
    color: var(--spcl-color-primary); border-bottom-color: var(--spcl-color-primary);
}
.spcl-tab-icon { color: currentColor; width: 1.1em; height: 1.1em; flex-shrink: 0; }
.spcl-plan-tab-button span { line-height: 1.4; }

.spcl-plan-tab-panels-container { min-height: 280px; }
.spcl-plan-tab-panel[hidden] { display: none; }

.spcl-benefit-list { list-style: none; padding-left: 0; margin: 0; }
.spcl-benefit-item {
    display: flex; align-items: flex-start;
    font-size: var(--spcl-font-size-sm-val);
    line-height: 1.8; margin-bottom: 15px;
    color: var(--spcl-color-text);
    position: relative;
    font-family: var(--spcl-font-body);
}
.spcl-benefit-item span {
    flex-grow: 1;
    display: inline;
}
.spcl-benefit-item strong {
    font-weight: 700;
    color: var(--spcl-color-secondary);
}
.spcl-benefit-icon {
    color: var(--spcl-color-primary); margin-right: 12px;
    flex-shrink: 0; margin-top: 0.3em;
    width: 1.25em; height: 1.25em;
}
.spcl-service-note-item {
    font-style: italic;
    font-size: calc(var(--spcl-font-size-sm-val) * 0.9);
    color: var(--spcl-color-text-light);
    margin-top: 20px;
}
.spcl-service-note-item .spcl-benefit-icon {
    color: var(--spcl-color-text-light);
}

.spcl-benefit-item .spcl-strong-black {
    color: var(--spcl-color-text);
}

.spcl-plan-checklist {
    /* Los estilos de .spcl-resumen-seccion se aplicarán ahora */
}
.spcl-resumen-seccion .spcl-checklist-title {
    font-family: var(--spcl-font-heading);
    font-size: var(--spcl-font-size-lg-val);
    font-weight: 700;
    margin-bottom: 15px;
    color: var(--spcl-color-text);
}
.spcl-resumen-seccion .spcl-checklist-list { list-style: none; padding-left: 0; margin: 0; }
.spcl-resumen-seccion .spcl-checklist-item {
    display: flex; align-items: center;
    font-size: var(--spcl-font-size-sm-val);
    margin-bottom: 12px; color: var(--spcl-color-text-light);
    position: relative;
    font-family: var(--spcl-font-body);
}
.spcl-resumen-seccion .spcl-checklist-icon {
    color: var(--spcl-color-secondary); margin-right: 10px;
    flex-shrink: 0; width: 1.15em; height: 1.15em;
}
.spcl-resumen-seccion .spcl-checklist-label {
    font-weight: 600; margin-right: 8px; color: var(--spcl-color-text);
}
.spcl-resumen-seccion .spcl-checklist-value {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}


/* --- INICIO: ESTILOS PARA LA PESTAÑA RESUMEN Y CONSTRUCTOR INTERACTIVO --- */
.spcl-resumen-seccion {
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--spcl-color-border);
}
.spcl-resumen-seccion:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}
.spcl-resumen-seccion-titulo {
    font-family: var(--spcl-font-heading);
    font-size: var(--spcl-font-size-lg-val);
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 18px;
    color: var(--spcl-color-text);
}

/* Beneficios Destacados */
.spcl-plan-progression-note {
    font-size: calc(var(--spcl-font-size-sm-val) * 0.9);
    font-style: italic;
    color: var(--spcl-color-text-light);
    margin-bottom: 18px;
    padding-bottom: 8px;
    border-bottom: 1px dashed var(--spcl-color-border);
}
.spcl-plan-progression-note strong {
    font-style: normal;
    color: var(--spcl-color-text);
}

.spcl-beneficios-destacados-lista {
    list-style: none;
    padding: 0;
    margin: 0;
}
.spcl-beneficio-destacado-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: var(--spcl-font-size-sm-val);
    line-height: 1.7;
    margin-bottom: 15px;
    font-family: var(--spcl-font-body);
    color: var(--spcl-color-text);
}
.spcl-beneficio-destacado-icon {
    flex-shrink: 0;
    width: 1.4em;
    height: 1.4em;
    color: var(--spcl-color-secondary);
    margin-top: 0.2em;
}
.spcl-beneficio-destacado-item strong {
    font-weight: 700;
    color: var(--spcl-color-primary);
}
.spcl-beneficio-destacado-item .spcl-strong-black {
    color: var(--spcl-color-text);
}


/* Sección de Extras (Addons) */
.spcl-extras-grupo {
    margin-bottom: 20px;
}
.spcl-extras-grupo:last-child {
    margin-bottom: 0;
}
.spcl-extras-grupo-titulo {
    font-family: var(--spcl-font-heading);
    font-size: calc(var(--spcl-font-size-lg-val) * 0.9);
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 15px;
    color: var(--spcl-color-text);
    display: flex;
    align-items: center;
    gap: 10px;
}
.spcl-extras-grupo-subtitle {
    font-size: 0.9em;
    font-weight: 500;
    color: var(--spcl-color-text-light);
    margin-left: 8px;
}
.spcl-extras-counter {
    font-size: 0.8em;
    font-weight: 600;
    color: var(--spcl-color-text-light);
}

.spcl-extras-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.spcl-extra-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: var(--spcl-font-size-sm-val);
    font-family: var(--spcl-font-body);
    padding: 8px 12px;
    border-radius: calc(var(--spcl-border-radius) / 2);
    transition: background-color 0.2s ease, border-color 0.2s ease;
    position: relative;
    cursor: pointer;
}
/* v2.4.20.4: Regla específica para sobreescribir el `display: list-item` de jQuery sin afectar el `display: none` */
.spcl-extra-item[style*="list-item"] {
    display: flex !important;
}
.spcl-extra-item__main {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-grow: 1;
    flex-shrink: 1;
    min-width: 0;
}
.spcl-extra-icon {
    flex-shrink: 0;
    width: 1.2em;
    height: 1.2em;
    transition: color 0.2s ease;
}
.spcl-extra-nombre {
    color: var(--spcl-color-text);
    font-weight: 500;
}
.spcl-extra-precio {
    font-weight: 700;
    color: var(--spcl-color-primary);
    font-family: var(--spcl-font-heading);
    white-space: nowrap;
    flex-shrink: 0;
}

/* Estilos para Extras Incluidos */
.spcl-extra-item.spcl-extra-item--included {
    background-color: var(--spcl-color-success-light-bg);
    border-left: 4px solid var(--spcl-color-success);
    cursor: default;
}
.spcl-extra-item.spcl-extra-item--included .spcl-extra-icon {
    color: var(--spcl-color-success);
    cursor: default;
    pointer-events: none;
}
.spcl-extra-item.spcl-extra-item--included .spcl-extra-nombre {
    color: var(--spcl-color-text);
    font-weight: 600;
}
.spcl-extra-item.spcl-extra-item--included .spcl-extra-precio {
    display: none;
}


/* Estilos para Extras Disponibles (Interactivos) */
.spcl-extra-item.spcl-extra-item--available {
    border: 1px solid var(--spcl-color-border);
}
.spcl-extra-item.spcl-extra-item--available:hover {
    background-color: #f8f9fc;
    border-color: var(--spcl-color-secondary);
}
.spcl-extra-item.spcl-extra-item--available .spcl-extra-icon {
    color: var(--spcl-color-secondary);
}

/* Estado SELECCIONADO de un Extra Disponible */
.spcl-extra-item.spcl-extra-item--available.spcl-extra-item--selected {
    background-color: var(--spcl-color-success-light-bg);
    border: 1px solid var(--spcl-color-success);
    border-left: 4px solid var(--spcl-color-success);
}
.spcl-extra-item.spcl-extra-item--available.spcl-extra-item--selected .spcl-extra-icon {
    color: var(--spcl-color-success);
}
.spcl-extra-item.spcl-extra-item--available.spcl-extra-item--selected .spcl-extra-nombre {
    font-weight: 600;
}

/* Estado DESHABILITADO de un Extra */
.spcl-extra-item.spcl-extra-item--disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
    background-color: #f7fafc;
}

/* Animación para cambio de nombre de extra */
@keyframes spcl-flash-highlight {
    0% { color: var(--spcl-color-text); }
    50% { color: var(--spcl-color-primary); }
    100% { color: var(--spcl-color-text); }
}
.spcl-extra-name--highlight {
    animation: spcl-flash-highlight 0.8s ease-in-out;
}

/* Estilos para Divulgación Progresiva de Extras */
.spcl-extra-item--hidden {
    display: none;
}

.spcl-extras-toggle-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background-color: #f0f5ff; /* Color de fondo sutil */
    border: 1px solid var(--spcl-color-secondary);
    color: var(--spcl-color-secondary);
    font-family: var(--spcl-font-heading);
    font-weight: 700;
    font-size: var(--spcl-font-size-md-val); /* Texto más grande */
    padding: 12px 20px;
    border-radius: var(--spcl-border-radius);
    cursor: pointer;
    margin-top: 25px;
    width: 100%;
    text-align: center;
    transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 4px 10px rgba(37, 78, 187, 0.05);
}

.spcl-extras-toggle-button:hover,
.spcl-extras-toggle-button:focus {
    background-color: var(--spcl-color-secondary);
    color: white;
    transform: translateY(-3px) scale(1.02); /* Efecto de levitación */
    box-shadow: 0 8px 20px rgba(37, 78, 187, 0.18);
    outline: none;
}

.spcl-extras-toggle-button .spcl-toggle-icon {
    width: 1.2em;
    height: 1.2em;
    transition: transform 0.3s ease;
}

.spcl-extras-toggle-button[aria-expanded="true"] .spcl-toggle-icon {
    transform: rotate(180deg);
}

/* --- FIN: NUEVOS ESTILOS --- */


.spcl-ownership-details-container {
    position: relative;
    margin-top: 15px; margin-bottom: 20px;
    padding: 15px;
    background-color: #f8f9fc;
    border-radius: calc(var(--spcl-border-radius) / 1.5);
    border: 1px solid var(--spcl-color-border);
}
.spcl-ownership-details-container strong { font-weight: bold; }

.spcl-ownership-main-text {
    font-size: var(--spcl-font-size-ownership-summary-val);
    color: var(--spcl-color-text-light); font-weight: 500;
    line-height: 1.75; margin: 0;
    font-family: var(--spcl-font-body);
}
.spcl-ownership-info-trigger {
    color: var(--spcl-color-primary); cursor: pointer; text-decoration: none;
    font-weight: 600; display: inline-flex; align-items: center;
    gap: 6px; border-bottom: 1.5px dashed var(--spcl-color-primary);
    transition: color 0.2s ease, border-color 0.2s ease;
}
.spcl-ownership-info-trigger:hover,
.spcl-ownership-info-trigger:focus {
    color: var(--spcl-color-secondary); border-bottom-color: var(--spcl-color-secondary);
    outline: none;
}
.spcl-info-icon { width: 1em; height: 1em; color: currentColor; }

.spcl-ownership-tooltip {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--spcl-color-text);
    color: var(--spcl-color-card-bg);
    padding: var(--spcl-tooltip-padding);
    border-radius: var(--spcl-border-radius);
    box-shadow: 0 12px 35px rgba(0,0,0,0.25);
    z-index: var(--spcl-tooltip-z-index);
    width: 360px;
    max-width: calc(100vw - 30px);
    font-size: calc(var(--spcl-font-size-sm-val) * 0.9);
    line-height: 1.8;
    text-align: left;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s 0.3s linear, transform 0.3s ease;
    transform-origin: bottom center;
    box-sizing: border-box;
    font-family: var(--spcl-font-body);
}
.spcl-ownership-tooltip[aria-hidden="false"] {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-8px);
    transition-delay: 0s, 0s, 0s;
}
.spcl-ownership-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 0; height: 0;
    border-left: var(--spcl-tooltip-arrow-size) solid transparent;
    border-right: var(--spcl-tooltip-arrow-size) solid transparent;
    border-top: var(--spcl-tooltip-arrow-size) solid var(--spcl-color-text);
}
.spcl-ownership-tooltip strong { font-weight: bold; color: var(--spcl-color-highlight); }


/* ======== ESTILOS PARA TOOLTIPS GLOBALES ======== */
.spcl-tooltip-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 6px;
    cursor: help;
    color: var(--spcl-color-secondary);
    transition: color 0.2s ease, background-color 0.2s ease;
    padding: 2px;
    border-radius: 50%;
}
.spcl-tooltip-trigger:hover,
.spcl-tooltip-trigger:focus {
    color: var(--spcl-color-primary);
    background-color: rgba(0, 168, 168, 0.08);
    outline: none;
}
.spcl-tooltip-icon { /* Hereda spcl-info-icon */
    width: 0.9em;
    height: 0.9em;
}

.spcl-global-tooltip {
    position: absolute;
    background-color: var(--spcl-tooltip-bg);
    color: var(--spcl-tooltip-text-color);
    padding: var(--spcl-tooltip-padding);
    border-radius: calc(var(--spcl-border-radius) / 1.5);
    box-shadow: var(--spcl-box-shadow-hover);
    z-index: var(--spcl-tooltip-z-index);
    width: auto;
    max-width: var(--spcl-tooltip-max-width);
    font-size: var(--spcl-tooltip-font-size);
    line-height: 1.7;
    text-align: left;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px) scale(0.98);
    transform-origin: top center;
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s 0.25s linear;
    box-sizing: border-box;
    pointer-events: auto;
    font-family: var(--spcl-font-body);
}
.spcl-global-tooltip.spcl-global-tooltip--visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    transition-delay: 0s;
}
.spcl-global-tooltip strong {
    font-weight: 700;
    color: var(--spcl-color-highlight);
}
.spcl-global-tooltip p {
    margin-top: 0;
    margin-bottom: 0.75em;
}
.spcl-global-tooltip p:last-child {
    margin-bottom: 0;
}

.spcl-global-tooltip::before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: var(--spcl-tooltip-arrow-size);
    left: var(--spcl-tooltip-arrow-offset-x);
    transform: translateX(-50%);
}
.spcl-global-tooltip.spcl-global-tooltip--arrow-top::before {
    top: calc(var(--spcl-tooltip-arrow-size) * -2 + 2px);
    border-color: transparent transparent var(--spcl-tooltip-bg) transparent;
}
.spcl-global-tooltip.spcl-global-tooltip--arrow-bottom::before {
    bottom: calc(var(--spcl-tooltip-arrow-size) * -2 + 2px);
    border-color: var(--spcl-tooltip-bg) transparent transparent transparent;
}

/* ======== INICIO: ELIMINACIÓN DE ESTILOS PARA TOOLTIP DE EXTRAS ======== */
/* Las siguientes reglas de .spcl-extra-tooltip han sido eliminadas en v2.4.20 */
/* porque la funcionalidad ahora la gestiona .spcl-global-tooltip */
/* ======== FIN: ELIMINACIÓN DE ESTILOS PARA TOOLTIP DE EXTRAS ======== */


.spcl-plan-footer {
    margin-top: auto; 
    padding-top: 10px;
}

.spcl-plan-actions { 
    display: flex; 
    gap: 15px;
}
.spcl-cta-button {
    flex-grow: 1; 
    padding: 15px 20px;
    border-radius: var(--spcl-border-radius); 
    text-align: center;
    font-size: var(--spcl-font-size-md-val);
    font-family: var(--spcl-font-heading); 
    font-weight: 700;
    cursor: pointer; 
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    text-decoration: none; 
    border: 3.5px solid transparent; 
    letter-spacing: 0.7px;
    background-color: var(--spcl-color-primary); 
    color: white; 
    border-color: var(--spcl-color-primary); 
}
.spcl-cta-button:hover { 
    background-color: #008a8a; 
    border-color: #008a8a; 
    transform: translateY(-5px) scale(1.03); 
    box-shadow: 0 8px 18px rgba(0, 168, 168, 0.45); 
}
.spcl-plan-card--recommended .spcl-cta-button { 
    background-color: var(--spcl-color-secondary); 
    border-color: var(--spcl-color-secondary); 
}
.spcl-plan-card--recommended .spcl-cta-button:hover { 
    background-color: #2045a9; 
    border-color: #2045a9; 
    box-shadow: 0 8px 18px rgba(37, 78, 187, 0.45); 
}

/* INICIO: Estilos para el resumen de costos */
.spcl-plan-cost-summary {
    margin-top: 18px;
    padding-top: 15px;
    border-top: 1px dashed var(--spcl-color-border);
    font-family: var(--spcl-font-microcopy);
    font-size: calc(var(--spcl-font-size-sm-val) * 0.85);
    color: var(--spcl-color-text-light);
}
.spcl-plan-cost-summary p {
    margin: 0 0 8px 0;
    display: flex;
    justify-content: space-between;
    line-height: 1.6;
}
.spcl-plan-cost-summary p:last-child {
    margin-bottom: 0;
}
.spcl-plan-cost-summary span {
    font-weight: 600;
    color: var(--spcl-color-text);
}
/* FIN: Estilos para el resumen de costos */


/* --- OBSOLETO: El botón de comparar en la tarjeta ya no es necesario --- */
.spcl-compare-button {
    display: none;
}
.spcl-plan-actions {
    justify-content: center;
}
.spcl-cta-button {
    width: 100%;
    max-width: 300px;
}
/* --- FIN OBSOLETO --- */


.spcl-swiper-pagination {
    position: absolute;
    bottom: 20px;
    left: 0;
    width: 100%;
    text-align: center;
    z-index: 10;
}
.spcl-swiper-pagination .swiper-pagination-bullet { background-color: var(--spcl-color-secondary); opacity: 0.35; width: 14px; height: 14px; margin: 0 8px !important; transition: all 0.35s ease; }
.spcl-swiper-pagination .swiper-pagination-bullet-active { opacity: 1; transform: scale(1.35); background-color: var(--spcl-color-primary); box-shadow: 0 0 12px rgba(0, 168, 168, 0.65); }

.spcl-swiper-nav {
    color: var(--spcl-color-secondary); background-color: rgba(255,255,255,0.95);
    border: 2px solid var(--spcl-color-border); border-radius: 50%;
    width: 60px; height: 60px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex; align-items: center; justify-content: center;
    z-index: 10;
    top: 50%;
}
.spcl-swiper-nav svg { width: 30px; height: 30px; fill: currentColor; transition: color 0.3s ease; }
.spcl-swiper-nav::after { display: none; }
.spcl-swiper-nav:hover {
    background-color: var(--spcl-color-primary); border-color: var(--spcl-color-primary);
    color: white; transform: translateY(-50%) scale(1.12);
    box-shadow: 0 8px 20px rgba(0, 168, 168, 0.4);
}
.spcl-swiper-nav.swiper-button-disabled {
    opacity: 0.35 !important; pointer-events: none !important; cursor: default !important;
    transform: translateY(-50%) scale(0.9) !important;
}


/* --- OBSOLETO: El comparador modal ya no se usa --- */
.spcl-comparer-container { 
    display: none; 
}


.spcl-mobile-sticky-cta { position: fixed; bottom: 0; left: 0; right: 0; background-color: var(--spcl-color-secondary); color: white; padding: 18px 22px; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 -4px 12px rgba(0,0,0,0.18); z-index: 999; transform: translateY(100%); transition: transform 0.35s ease-in-out; font-family: var(--spcl-font-body); } /* Roboto */
.spcl-mobile-sticky-cta--hidden { transform: translateY(100%); }
.spcl-mobile-sticky-cta:not(.spcl-mobile-sticky-cta--hidden) { transform: translateY(0); }
.spcl-mobile-sticky-cta-text { font-size: var(--spcl-font-size-md-val); font-weight: 500; }
.spcl-mobile-sticky-cta-button { background-color: var(--spcl-color-primary); color: white; padding: 12px 20px; border-radius: var(--spcl-border-radius); text-decoration: none; font-size: var(--spcl-font-size-md-val); font-family: var(--spcl-font-heading); font-weight: 700; white-space: nowrap; transition: background-color 0.2s ease, transform 0.2s ease;} /* Nunito */
.spcl-mobile-sticky-cta-button:hover { background-color: #008a8a; transform: scale(1.03); }


@media (max-width: 1199px) { /* Para tablets grandes y PCs pequeños */
    :root {
        --spcl-font-size-sm-val: 1.25rem;
        --spcl-font-size-md-val: 1.35rem;
    }
    .spcl-plan-card--recommended {
        transform: scale(1.04) translateY(-10px); 
    }
    .spcl-plan-card--recommended:hover,
    .spcl-plan-card--recommended.spcl-plan-card--force-hover {
        transform: scale(1.05) translateY(-16px); 
    }
}

@media (max-width: 991px) { /* Para tablets en vertical y móviles grandes */
    :root {
        --spcl-font-size-microcopy-val: 1.15rem;
        --spcl-font-size-ownership-summary-val: 1.1rem;
        --spcl-font-size-sm-val: 1.25rem; 
        --spcl-font-size-md-val: 1.35rem; 
        --spcl-font-size-lg-val: 1.7rem;
        --spcl-font-size-xl-val: 2.05rem;
        --spcl-font-size-3xl-val: 3.3rem;
    }
    .spcl-plan-card { padding: 15px; }
    .spcl-swiper-nav { width: 56px; height: 56px; }
    .spcl-swiper-nav svg { width: 28px; height: 28px; }
    .spcl-plan-tab-nav svg { width: 20px; height: 20px; }

    .spcl-plan-hosting-info {
        font-size: calc(var(--spcl-font-size-sm-val) * 0.95);
        padding: 10px 12px;
    }
    .spcl-plan-hosting-info-icon {
        width: 1.7em;
        height: 1.7em;
    }
    .spcl-plan-card--recommended {
        transform: scale(1.025) translateY(-8px); 
    }
    .spcl-plan-card--recommended:hover,
    .spcl-plan-card--recommended.spcl-plan-card--force-hover {
        transform: scale(1.035) translateY(-12px); 
    }

    /* Estilos tabla comparativa en tablet */
    .spcl-comparative-table-section {
        padding: 60px 15px;
    }
    .spcl-comparative-table-title {
        font-size: calc(var(--spcl-font-size-xl-val) * 0.9);
    }
    .spcl-comparative-table {
        font-size: calc(var(--spcl-font-size-sm-val) * 0.95);
    }
    .spcl-comparative-table th,
    .spcl-comparative-table td {
        padding: 16px 16px;
    }
}

@media (max-width: 767px) { /* Estilos específicos para móvil */
    :root {
        --spcl-font-size-microcopy-val: 1.1rem;
        --spcl-font-size-ownership-summary-val: 1.05rem;
        --spcl-font-size-sm-val: 1.15rem;
        --spcl-font-size-md-val: 1.25rem;
        --spcl-font-size-lg-val: 1.5rem;
        --spcl-font-size-xl-val: 1.8rem;
        --spcl-font-size-3xl-val: 3rem;
        --spcl-tooltip-max-width: calc(100vw - 40px);
        --spcl-tooltip-font-size: calc(var(--spcl-font-size-sm-val) * 0.92);
    }
    .spcl-plans-page { padding: 40px 0; }

    .spcl-frequency-selector {
        padding: 4px;
    }
    .spcl-frequency-button {
        padding: 8px 12px;
        font-size: calc(var(--spcl-font-size-md-val) * 0.9);
    }

    .spcl-plans-slider {
        padding-top: 80px;    
        padding-bottom: 90px; 
        padding-left: 12px;   
        padding-right: 8px;    
    }

    .spcl-plan-card { padding: 15px; }
    .spcl-plan-card--recommended {
        transform: scale(1.025) translateY(-8px); 
    }
    .spcl-plan-card--recommended:hover,
    .spcl-plan-card--recommended.spcl-plan-card--force-hover {
        transform: scale(1.035) translateY(-12px); 
    }
    .spcl-plan-tab-button { padding: 10px 12px; gap: 6px; font-size: calc(var(--spcl-font-size-md-val) * 0.85); }
    .spcl-tab-icon { width: 1em; height: 1em; }
    .spcl-plan-tab-nav { padding: 6px; }
    .spcl-plan-tab-nav svg { width: 18px; height: 18px; }
    .spcl-benefit-icon { margin-right: 10px; width: 1.2em; height: 1.2em; }
    .spcl-resumen-seccion .spcl-checklist-icon { margin-right: 8px; width: 1.1em; height: 1.1em; }

    .spcl-plan-actions {
        flex-direction: column;
        gap: 10px;
    }
    .spcl-cta-button {
        width: 100%;
        padding: 14px 18px;
        font-size: calc(var(--spcl-font-size-md-val) * 0.9) ;
    }

    .spcl-swiper-nav { display: none; } 
    .spcl-plans-slider-container::before,
    .spcl-plans-slider-container::after { width: 60px; bottom: 60px;} 

    .spcl-ownership-tooltip {
        font-size: calc(var(--spcl-font-size-sm-val) * 0.9);
        padding: 18px 20px;
        left: 3vw;
        right: 3vw;
        width: auto;
        max-width: none;
        transform: translateY(0);
    }
    .spcl-ownership-tooltip[aria-hidden="false"] {
        transform: translateY(-8px);
    }
    .spcl-ownership-tooltip::after {
        left: 50%;
        transform: translateX(-50%);
    }
    .spcl-plan-hosting-info {
        font-size: calc(var(--spcl-font-size-sm-val) * 0.9);
        gap: 10px;
        padding: 10px;
        margin-top: 10px;
        margin-bottom: 15px;
    }
    .spcl-plan-hosting-info-icon {
        width: 1.6em;
        height: 1.6em;
    }
    .spcl-plan-hosting-info-text strong {
        font-size: 1em;
    }
    .spcl-plan-hosting-info-text span {
        font-size: 0.9em;
    }

    .spcl-global-tooltip {
        /* JS se encarga del posicionamiento */
    }
    .spcl-global-tooltip.spcl-global-tooltip--arrow-top::before,
    .spcl-global-tooltip.spcl-global-tooltip--arrow-bottom::before {
        /* var(--spcl-tooltip-arrow-offset-x) controlará el 'left' */
    }

    .spcl-plans-slider-container::before {
      opacity: 0 !important;
      visibility: hidden !important;
      pointer-events: none !important;
      transition: none !important;
    }
    .spcl-plans-slider-container:not(.spcl-slider-scrollable-right)::before {
      opacity: 1 !important;
      visibility: visible !important;
      pointer-events: auto;
      transition: opacity 0.4s ease;
    }

    /* =================================================================== */
    /* ============= INICIO: AJUSTES FINALES TABLA COMPARATIVA MÓVIL ============== */
    /* =================================================================== */
    .spcl-comparative-table-section {
        padding: 40px 0;
    }
    .spcl-comparative-table-container {
        border-radius: 0;
        border-left: none;
        border-right: none;
        overflow: visible !important; /* Clave para que position: sticky funcione */
    }

    /* 1. Transformar la cabecera en pestañas y hacerla STICKY */
    .spcl-comparative-table thead {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 11;
        background-color: var(--spcl-color-card-bg);
        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    }

    .spcl-comparative-table thead tr {
        display: flex;
    }

    .spcl-comparative-table thead th {
        flex: 1 1 25%;
        width: 25%;
        text-align: center;
        border-bottom: 2px solid transparent;
        transition: color 0.3s ease, border-color 0.3s ease;
        cursor: pointer;
        padding: 16px 8px;
    }

    .spcl-comparative-table thead th span {
        display: block;
    }

    .spcl-comparative-table thead th:first-child {
        display: none;
    }

    .spcl-comparative-table thead th:not(.spcl-plan-col--active) {
        color: var(--spcl-color-text-light);
        font-weight: 600;
    }

    .spcl-comparative-table thead th.spcl-plan-col--active {
        color: var(--spcl-color-primary);
        border-bottom-color: var(--spcl-color-primary);
        font-weight: 700;
    }
    
    /* 2. Transformar las filas del cuerpo */
    .spcl-comparative-table tbody tr {
        display: block;
    }

    /* --- INICIO: CORRECCIÓN DE ALINEACIÓN Y DESBORDAMIENTO MÓVIL (v5) --- */
    .spcl-comparative-table tbody tr:not(.spcl-group-header) {
        display: flex;
        justify-content: space-between;
        align-items: flex-start; /* Asegura alineación superior para contenido de altura variable */
        border-bottom: 1px solid var(--spcl-color-border);
        padding: 12px 15px;
    }
    
    .spcl-comparative-table tbody tr:not(.spcl-group-header) td {
        display: none;
        padding: 4px 0;
        border: none;
        background: none !important;
    }

    .spcl-comparative-table tbody tr:not(.spcl-group-header) td.spcl-feature-label,
    .spcl-comparative-table tbody tr:not(.spcl-group-header) td.spcl-plan-col--active {
        display: block; 
    }

    .spcl-comparative-table .spcl-feature-label {
        flex: 1; 
        text-align: left;
    }
    
    /* 3. AJUSTE FINAL DE TIPOGRAFÍA FLUIDA MÓVIL (CON COMENTARIOS) */
    
    /* Título de Grupo (ej. "Precios y Resumen Clave") */
    .spcl-comparative-table .spcl-group-header td {
        font-size: 20px !important;
        display: block;
        width: 100%;
        text-align: center;
        padding: 16px 15px;
    }

    /* Título de Característica (ej. "Banco Horas/Tareas") */
    .spcl-comparative-table .spcl-feature-label strong,
    .spcl-feature-row--price .spcl-feature-label strong {
        font-size: clamp(17px, 4vw, 18px) !important;
    }

    /* Descripción de Característica (el texto pequeño bajo el título) */
    .spcl-comparative-table tbody tr:not(.spcl-group-header) .spcl-feature-description {
        font-size: clamp(14px, 3.5vw, 15px);
    }

    /* Valor de la Característica (ej. "2h / 4t") */
    .spcl-comparative-table td.spcl-plan-col--active {
        flex-basis: 35%; 
        text-align: right;
        font-weight: 600;
        color: var(--spcl-color-text);
        font-size: clamp(14px, 2.5vw, 15px);
    }
    
    /* INICIO: Corrección de alineación para checkmarks en móvil. */
    .spcl-comparative-table td.spcl-plan-col--active .spcl-check-icon {
        text-align: right;
    }
    /* FIN: Corrección de alineación. */

    /* Suffix de IVA en Precios */
    .spcl-feature-row--price td.spcl-plan-col--active .spcl-price-vat-suffix {
        font-size: clamp(10px, 2vw, 12px);
    }
    
    /* 4. Estilos para las cabeceras de grupo (ya ajustados arriba) */
    .spcl-comparative-table .spcl-group-header {
        padding: 0;
    }
    /* =================================================================== */
    /* ============= FIN: AJUSTES FINALES TABLA COMPARATIVA MÓVIL =============== */
    /* =================================================================== */

    /* --- INICIO: CORRECCIÓN DE ANIMACIÓN Y DESBORDAMIENTO MÓVIL (v5) --- */
    .spcl-comparative-table tbody tr.spcl-feature-row,
    .spcl-comparative-table tbody tr.spcl-group-header {
        transition: opacity 0.3s ease, max-height 0.35s ease-in-out, padding-top 0.3s ease, padding-bottom 0.3s ease, border-width 0.3s ease;
        max-height: 500px; /* Valor seguro para acomodar contenido extenso */
        overflow: hidden;
    }

    .spcl-comparative-table tbody tr.spcl-row-hidden {
        max-height: 0 !important;
        opacity: 0 !important;
        padding-top: 0 !important;    /* Asegura que el padding se colapse */
        padding-bottom: 0 !important; /* Asegura que el padding se colapse */
        border-bottom-width: 0 !important; /* Asegura que el borde se colapse */
        margin: 0 !important;
        pointer-events: none;
    }
    /* --- FIN: CORRECCIÓN DE ANIMACIÓN Y DESBORDAMIENTO MÓVIL --- */
    
    /* =================================================================== */
    /* ============= INICIO: ESTILOS PARA CTA FOOTER MÓVIL =============== */
    /* =================================================================== */

    .spcl-comparative-table tfoot.spcl-cta-footer tr {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px 15px;
        border-top: 2px solid var(--spcl-color-border);
    }

    .spcl-comparative-table tfoot.spcl-cta-footer td {
        display: none; /* Oculta todas las celdas de botón por defecto */
        padding: 0;
        border: none;
    }

    .spcl-comparative-table tfoot.spcl-cta-footer td.spcl-feature-label,
    .spcl-comparative-table tfoot.spcl-cta-footer td.spcl-plan-col--active {
        display: block; /* Muestra solo la etiqueta y la celda del plan activo */
    }

    .spcl-comparative-table tfoot.spcl-cta-footer td.spcl-feature-label {
        flex: 1;
        text-align: left;
    }

    .spcl-comparative-table tfoot.spcl-cta-footer td.spcl-plan-col--active {
        flex-basis: 35%;
        text-align: right;
    }

    .spcl-comparative-cta-button {
        padding: 12px 18px;
        font-size: calc(var(--spcl-font-size-md-val) * 0.95);
        width: auto; /* Ajusta el ancho al contenido */
        min-width: 100px;
        transform: translateX(-5px); /* Ajuste solicitado por el cliente */
    }
}

@media (min-width: 768px) {
    .spcl-mobile-sticky-cta { display: none; }
}

.spcl-swipe-indicator-arrow {
    position: absolute;
    top: 15px;
    right: 10px;
    width: 95px;
    height: auto;
    z-index: 4;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-6px);
    transition: opacity 0.3s ease, visibility 0s 0.3s linear, transform 0.3s ease;
    pointer-events: none;
}

.spcl-swipe-indicator-arrow img {
    display: block;
    width: 100%;
    height: auto;
}

@media (max-width: 767px) {
    .spcl-swipe-indicator-arrow.spcl-swipe-indicator--visible {
        opacity: 0.9;
        visibility: visible;
        transform: translateX(0);
        animation: spcl-pulse-swipe-arrow 1.8s infinite ease-in-out;
        transition-delay: 0s, 0s, 0s;
    }
}

@keyframes spcl-pulse-swipe-arrow {
    0%, 100% {
        transform: translateX(0);
        opacity: 0.8;
    }
    50% {
        transform: translateX(6px);
        opacity: 1;
    }
}

/* =================================================================== */
/* ============= NUEVOS ESTILOS: TABLA COMPARATIVA FIJA ============== */
/* =================================================================== */

.spcl-comparative-table-section {
    padding: 80px 20px;
    background-color: #fff;
}

.spcl-comparative-table-title {
    font-family: var(--spcl-font-heading);
    font-size: var(--spcl-font-size-3xl-val);
    color: var(--spcl-color-secondary);
    text-align: center;
    margin-bottom: 40px;
    font-weight: 800;
}

.spcl-comparative-table-container {
    max-width: 1380px;
    margin: 0 auto;
    overflow-x: auto;
    border: 1px solid var(--spcl-color-border);
    border-radius: var(--spcl-border-radius);
    box-shadow: var(--spcl-box-shadow);
}

.spcl-comparative-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--spcl-font-body);
}

.spcl-comparative-table th,
.spcl-comparative-table td {
    padding: 24px 22px;
    text-align: left;
    vertical-align: top; /* Cambiado a top para alinear títulos */
    border-bottom: 1px solid var(--spcl-color-border);
}

.spcl-comparative-table thead th {
    background-color: #f8f9fc;
    color: var(--spcl-color-secondary);
    font-family: var(--spcl-font-heading);
    font-weight: 700;
    font-size: var(--spcl-font-size-lg-val);
    position: sticky;
    top: 0;
    z-index: 10;
    vertical-align: middle;
}

.spcl-comparative-table thead th span:first-child::after {
    content: " ";
}

.spcl-comparative-table thead th:first-child {
    text-align: left;
    min-width: 320px; /* Aumentado para dar espacio a la descripción */
    border-top-left-radius: var(--spcl-border-radius);
}

.spcl-comparative-table thead th:last-child {
    border-top-right-radius: var(--spcl-border-radius);
}

.spcl-comparative-table .spcl-group-header td {
    background-color: #e9ecef;
    color: var(--spcl-color-secondary);
    font-family: var(--spcl-font-heading);
    font-weight: 700;
    font-size: 1.1em;
    vertical-align: middle;
}

.spcl-comparative-table .spcl-feature-label {
    background-color: #fff;
}

/* INICIO: NUEVOS ESTILOS PARA TÍTULO Y DESCRIPCIÓN v2.4.23 */
.spcl-feature-title-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.spcl-comparative-table .spcl-feature-label strong {
    font-weight: 600;
    color: var(--spcl-color-text);
}

.spcl-comparative-table .spcl-feature-description {
    font-size: 0.9em;
    color: var(--spcl-color-text-light);
    margin: 0;
    line-height: 1.5;
    padding: 0;
}
/* FIN: NUEVOS ESTILOS */


.spcl-comparative-table tbody tr:nth-child(even) td {
    background-color: #fdfdff;
}

.spcl-comparative-table tbody tr:hover td {
    background-color: #f1f5f9;
}

.spcl-comparative-table td {
    text-align: center;
}

.spcl-comparative-table .spcl-feature-label {
    text-align: left;
}

.spcl-comparative-table .spcl-check-icon {
    display: inline-block;
    width: 100%;
    text-align: center;
}

.spcl-comparative-table .spcl-check-icon::before {
    content: '✔';
    color: var(--spcl-color-success);
    font-size: 1.5em;
    font-weight: bold;
    font-family: 'Segoe UI Symbol', 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
}

.spcl-comparative-table .spcl-cross-icon {
    color: #cbd5e0;
    font-size: 1.3em;
}

.spcl-comparative-table .spcl-feature-row-highlight td {
    font-weight: bold;
}
.spcl-comparative-table .spcl-feature-row-highlight .spcl-feature-label strong {
    color: var(--spcl-color-secondary);
}

/* INICIO: Estilos para destacar Precios y Resumen */
.spcl-group-header--highlight td {
    background-color: rgba(37, 78, 187, 0.05);
    border-top: 1px solid var(--spcl-color-border);
    border-bottom: 2px solid var(--spcl-color-border);
}

.spcl-feature-row--price td {
    font-size: 1.2em;
    font-weight: 800;
    color: var(--spcl-color-primary);
    vertical-align: middle;
}
.spcl-feature-row--price .spcl-price-vat-suffix {
    display: block;
    font-size: 0.6em;
    font-weight: 500;
    color: var(--spcl-color-text-light);
    margin-top: 2px;
}

.spcl-feature-row--price .spcl-feature-label {
    vertical-align: middle;
}
.spcl-feature-row--price .spcl-feature-label strong {
    font-size: 1em; /* Resetea el tamaño de fuente para la etiqueta */
    font-weight: 600; /* Resetea el peso de fuente para la etiqueta */
    color: var(--spcl-color-text); /* Resetea el color para la etiqueta */
}
/* FIN: Estilos para destacar Precios y Resumen */

/* INICIO: v2.4.26 - Estilo para estado "Incluido" en Extras */
.spcl-comparative-table .spcl-included-value {
    color: var(--spcl-color-success);
    font-weight: bold;
}
/* FIN: v2.4.26 */


/* =================================================================== */
/* ============= INICIO: ESTILOS PARA EL BUSCADOR DE TABLA ============== */
/* =================================================================== */

.spcl-table-search-wrapper {
    position: relative;
    max-width: 500px;
    margin: 0 auto 40px auto;
}

.spcl-table-search-icon {
    position: absolute;
    top: 50%;
    left: 18px;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    color: var(--spcl-color-text-light);
    pointer-events: none;
}

.spcl-table-search-input {
    width: 100%;
    padding: 16px 20px 16px 55px;
    font-family: var(--spcl-font-body);
    font-size: var(--spcl-font-size-md-val);
    color: var(--spcl-color-text);
    background-color: var(--spcl-color-card-bg);
    border: 1px solid var(--spcl-color-border);
    border-radius: var(--spcl-border-radius);
    box-shadow: var(--spcl-box-shadow);
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.spcl-table-search-input:focus {
    outline: none;
    border-color: var(--spcl-color-primary);
    box-shadow: 0 0 0 3px rgba(0, 168, 168, 0.2);
}

.spcl-table-search-input::placeholder {
    color: var(--spcl-color-text-light);
    opacity: 0.8;
}

/* Limpiar el botón 'x' por defecto del input[type=search] */
.spcl-table-search-input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    height: 18px;
    width: 18px;
    display: block;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23718096'><path d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/></svg>");
    cursor: pointer;
}

/* --- INICIO: CORRECCIÓN DE ANIMACIÓN DE FILAS (v3 - Definitiva) --- */
.spcl-comparative-table tbody tr {
    /* La transición de opacidad se mantiene en la fila para un desvanecimiento suave */
    transition: opacity 0.3s ease-out;
}

.spcl-comparative-table tbody tr td {
    /* Las celdas transicionan su padding para el efecto de colapso vertical */
    transition: padding-top 0.3s ease, padding-bottom 0.3s ease;
    overflow: hidden; /* Evita que el contenido se desborde durante la animación */
}

.spcl-comparative-table tbody tr.spcl-row-hidden {
    /* Ocultamos la fila visualmente y de la accesibilidad */
    opacity: 0;
    pointer-events: none;

    /* La propiedad 'visibility' se cambia después de la animación para colapsar el espacio */
    visibility: collapse;
    transition: opacity 0.3s ease, visibility 0s 0.3s;
}

.spcl-comparative-table tbody tr.spcl-row-hidden td {
    /* Colapsamos el padding y la altura de la fuente a cero para una animación fluida */
    padding-top: 0;
    padding-bottom: 0;
    border-bottom-width: 0;
    font-size: 0; /* Animar la fuente a cero ayuda a la animación de altura */
    line-height: 0; /* Animar la altura de línea a cero */
}
/* --- FIN: CORRECCIÓN DE ANIMACIÓN DE FILAS --- */


/* Estilo para el resaltado de texto */
mark.spcl-highlight {
    background-color: rgba(255, 193, 7, 0.4); /* --spcl-color-highlight con alpha */
    color: inherit;
    padding: 2px 0;
    border-radius: 3px;
}

/* Estilo para la fila de "no resultados" */
.spcl-comparative-table .spcl-no-results-row td {
    text-align: center;
    padding: 40px 20px;
    font-size: 1.1em;
    color: var(--spcl-color-text-light);
    font-style: italic;
    background-color: #fdfdff;
}

/* =================================================================== */
/* ============= FIN: ESTILOS PARA EL BUSCADOR DE TABLA ================ */
/* =================================================================== */

/* =================================================================== */
/* ============= INICIO: v2.6.0 - ESTILOS FOOTER ESTADÍSTICO ============== */
/* =================================================================== */

.spcl-comparative-table tfoot.spcl-stats-footer {
    background-color: #fdfdff; /* Un fondo ligeramente diferente para separar */
    border-top: 3px solid var(--spcl-color-border); /* Borde superior grueso para marcar el cierre */
}

/* Fila del Título (ej. "Resumen de Valor del Plan") */
.spcl-stats-footer .spcl-stats-header-row td {
    background-color: #f8f9fc;
    text-align: center;
    font-family: var(--spcl-font-heading);
    font-size: var(--spcl-font-size-lg-val);
    font-weight: 700;
    color: var(--spcl-color-secondary);
    padding: 20px;
}

/* Fila de los Datos (ej. "Total de Beneficios") */
.spcl-stats-footer .spcl-stats-data-row > td {
    padding: 24px 22px;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.spcl-stats-footer .spcl-stats-data-row > td:not(.spcl-feature-label):hover {
    transform: translateY(-4px);
    box-shadow: var(--spcl-box-shadow-hover);
    border-radius: var(--spcl-border-radius);
}

/* Celda de la etiqueta "Total de Beneficios" */
.spcl-stats-footer .spcl-feature-label strong {
    font-size: 1.1em; /* Un poco más grande para destacar */
}

/* Contenedor de cada estadística de plan */
.spcl-stats-footer .spcl-stats-data-row .spcl-plan-col-emprende,
.spcl-stats-footer .spcl-stats-data-row .spcl-plan-col-profesional,
.spcl-stats-footer .spcl-stats-data-row .spcl-plan-col-expande,
.spcl-stats-footer .spcl-stats-data-row .spcl-plan-col-elite,
.spcl-stats-footer .spcl-stats-data-row .spcl-plan-col-esencial {
    text-align: center;
    vertical-align: middle;
}

/* El número grande (el héroe) */
.spcl-stats-footer .spcl-stat-value {
    display: block;
    font-family: var(--spcl-font-heading);
    font-size: clamp(2.2rem, 5vw, 2.8rem); /* Tipografía fluida */
    font-weight: 800;
    color: var(--spcl-color-primary);
    line-height: 1.1;
}

/* El desglose (el texto de apoyo) */
.spcl-stats-footer .spcl-stat-breakdown {
    display: block;
    font-size: 0.85em;
    color: var(--spcl-color-text-light);
    margin-top: 6px;
}

/* Ajustes para móvil en el footer */
@media (max-width: 767px) {
    .spcl-comparative-table tfoot.spcl-stats-footer {
        border-top: none; /* En móvil el borde superior no es necesario */
    }

    .spcl-stats-footer .spcl-stats-header-row {
        display: none; /* El título de grupo ya cumple esta función en móvil */
    }

    .spcl-stats-footer .spcl-stats-data-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px 15px;
        border-top: 2px solid var(--spcl-color-border);
    }
    
    .spcl-stats-footer .spcl-stats-data-row > td {
        display: none; /* Oculta todas las celdas por defecto */
        padding: 0;
    }

    .spcl-stats-footer .spcl-stats-data-row .spcl-feature-label,
    .spcl-stats-footer .spcl-stats-data-row td.spcl-plan-col--active {
        display: block; /* Muestra solo la etiqueta y la columna activa */
    }
    
    .spcl-stats-footer .spcl-stats-data-row .spcl-feature-label {
        flex: 1;
        text-align: left;
    }
    
    .spcl-stats-footer .spcl-stats-data-row .spcl-feature-label strong {
        font-size: clamp(18px, 4.2vw, 20px) !important;
    }

    .spcl-stats-footer .spcl-stats-data-row td.spcl-plan-col--active {
        flex-basis: 35%;
        text-align: right;
    }
    
    .spcl-stats-footer .spcl-stat-value {
        font-size: clamp(2rem, 7vw, 2.5rem);
    }
    
    .spcl-stats-footer .spcl-stat-breakdown {
        font-size: clamp(11px, 2.5vw, 12px);
    }
}

/* =================================================================== */
/* ============= FIN: v2.6.0 - ESTILOS FOOTER ESTADÍSTICO ============== */
/* =================================================================== */

/* =================================================================== */
/* ============= INICIO: ESTILOS PARA CTA FOOTER EN TABLA COMPARATIVA ====== */
/* =================================================================== */

.spcl-comparative-table tfoot.spcl-cta-footer {
    position: -webkit-sticky;
    position: sticky;
    bottom: -1px; /* Evita doble borde con el contenedor */
    background-color: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 12;
    border-top: 2px solid var(--spcl-color-border);
    box-shadow: 0 -5px 20px rgba(0,0,0,0.08);
}

.spcl-comparative-table tfoot.spcl-cta-footer td {
    padding: 20px 22px;
    vertical-align: middle;
    background: transparent;
    border-bottom: none; /* Asegura que no haya borde inferior */
}

.spcl-comparative-cta-button {
    display: block;
    width: 100%;
    padding: 16px 12px;
    border-radius: var(--spcl-border-radius);
    text-align: center;
    font-size: calc(var(--spcl-font-size-md-val) * 1.1);
    font-family: var(--spcl-font-heading);
    font-weight: 800;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
    text-decoration: none;
    border: none;
    background-color: var(--spcl-color-primary);
    color: white;
    box-shadow: var(--spcl-box-shadow);
    letter-spacing: 0.5px;
}

.spcl-comparative-cta-button:hover {
    background-color: #008a8a;
    transform: translateY(-4px);
    box-shadow: var(--spcl-box-shadow-popular);
}

.spcl-comparative-table .spcl-plan-col-elite .spcl-comparative-cta-button {
    background-color: var(--spcl-color-secondary);
}

.spcl-comparative-table .spcl-plan-col-elite .spcl-comparative-cta-button:hover {
    background-color: #2045a9;
    box-shadow: var(--spcl-box-shadow-recommended);
}

@media (max-width: 767px) {
    .spcl-comparative-table tfoot.spcl-cta-footer tr {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px 15px;
        border-top: 2px solid var(--spcl-color-border);
    }

    .spcl-comparative-table tfoot.spcl-cta-footer td {
        display: none; /* Oculta todas las celdas de botón por defecto */
        padding: 0;
        border: none;
    }

    .spcl-comparative-table tfoot.spcl-cta-footer td.spcl-feature-label,
    .spcl-comparative-table tfoot.spcl-cta-footer td.spcl-plan-col--active {
        display: block; /* Muestra solo la etiqueta y la celda del plan activo */
    }

    .spcl-comparative-table tfoot.spcl-cta-footer td.spcl-feature-label {
        flex: 1;
        text-align: left;
    }

    .spcl-comparative-table tfoot.spcl-cta-footer td.spcl-plan-col--active {
        flex-basis: 35%;
        text-align: right;
    }

    .spcl-comparative-cta-button {
        padding: 12px 18px;
        font-size: calc(var(--spcl-font-size-md-val) * 0.95);
        width: auto; /* Ajusta el ancho al contenido */
        min-width: 100px;
        transform: translateX(-5px); /* Ajuste solicitado por el cliente */
    }
}