/*
 * CALCULADORA DE PRECIOS WORDPRESS - LAYOUT HORIZONTAL
 * Version: 1.4.1
 * Integración con variables CSS del tema
 */

/* === VARIABLES CSS === */
:root {
    /* Fallback colors si el tema no define las variables */
    /*--color-content-primary: #667eea;
    --color-content-secondary: #764ba2;
    --color-content-heading: #2c3e50;
    --color-content-text: #34495e;
    --color-content-link: #667eea;*/

    /* Variables internas del calculador */
    --wpc-border-radius: 12px;
    --wpc-border-radius-small: 8px;
    --wpc-border-radius-large: 20px;
    --wpc-shadow-small: 0 2px 8px rgba(0, 0, 0, 0.08);
    --wpc-shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.12);
    --wpc-shadow-large: 0 8px 32px rgba(0, 0, 0, 0.16);
    --wpc-transition: 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --wpc-spacing-xs: 8px;
    --wpc-spacing-sm: 16px;
    --wpc-spacing-md: 24px;
    --wpc-spacing-lg: 40px;
    --wpc-spacing-xl: 48px;
}

/* === COMPATIBILIDAD CON WPBAKERY (VISUAL COMPOSER) E IMPREZA ===
 * WPBakery coloca el shortcode dentro de una .vc_column_inner / .wpb_wrapper
 * que usa flex. Sin un ancho y box-sizing explícitos, el contenedor desborda
 * o "no respeta la fila". Forzamos que ocupe el ancho de la columna y que el
 * padding no sume al ancho total. */
.wpc-calculator-container,
.wpc-calculator-container * {
    box-sizing: border-box;
}

/* Si el shortcode queda dentro de un wrapper flex de WPBakery, asegurar que
 * el bloque del calculador ocupe toda la fila y no se encoja. */
.wpb_wrapper > .wpc-calculator-container,
.vc_column-inner > .wpb_wrapper > .wpc-calculator-container {
    flex: 1 1 100%;
    width: 100%;
    max-width: 100%;
}

/* === CONTENEDOR PRINCIPAL === */
.wpc-calculator-container {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    font-family: Poppins, sans-serif;
    background: #ffffff;
    border-radius: var(--wpc-border-radius-large);
    overflow: hidden;
    box-shadow: var(--wpc-shadow-large);
    border: 1px solid #e5e7eb;
    clear: both;
    float: none;
    position: relative;
}

/* Reset de estilos que Impreza/WPBakery pueden heredar al contenido del
 * shortcode (líneas vacías de wpautop, márgenes de <p>, etc.). */
/* Solo afecta a los <p>/<br> espurios que wpautop inyecta como hijos
 * DIRECTOS del contenedor, no a los que el propio plugin usa en su markup
 * interno (notas de precio, garantía, etc.). */
.wpc-calculator-container > p:empty {
    display: none !important;
    margin: 0 !important;
}

.wpc-calculator-container > br {
    display: none;
}

/* === HEADER === */
.wpc-header {
    background: linear-gradient(135deg, var(--color-content-primary) 0%, var(--color-content-secondary) 100%);
    color: white;
    padding: var(--wpc-spacing-md);
}

.wpc-header-content {
    display: flex;
    align-items: center;
    gap: var(--wpc-spacing-sm);
    max-width: 100%;
}

.wpc-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    background: rgba(255, 255, 255, .15);
    border-radius: 50%;
    backdrop-filter: blur(10px);
    flex-shrink: 0;
    padding: 15px;
    /* Añadir padding para que la imagen no toque los bordes */
}

.wpc-header-icon {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    filter: brightness(0) invert(1);
    /* Hace la imagen blanca si es necesario */
}

.wpc-header-text {
    flex: 1;
    min-width: 0;
}

.wpc-title {
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0 0 2px 0;
    color: white;
    line-height: 1.2;
    font-family: var(--h1-font-family, inherit);
    margin-bottom: 3px;
}

.wpc-subtitle {
    font-size: 0.9rem;
    margin: 0;
    opacity: 0.9;
    color: white;
    line-height: 1.3;
}

/* === LAYOUT VERTICAL - Formulario arriba, resultados abajo === */
.wpc-content {
    display: flex;
    flex-direction: column;
}

/* === SECCIÓN DE FORMULARIO === */
.wpc-form-section {
    padding: var(--wpc-spacing-lg);
    background: #fafbfc;
    order: 1;
}



/* === NUEVA SECCIÓN DE RESULTADOS MEJORADA === */
.wpc-results-section {
    background: linear-gradient(145deg, #ffffff 0%, #f8faff 100%);
    box-shadow: var(--wpc-shadow-large);
    border: 1px solid #e5e8ff;
    overflow: hidden;
    position: relative;
    order: 2;
}

/* Efecto de brillo en el borde superior */
.wpc-results-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg,
            var(--color-content-primary) 0%,
            var(--color-content-secondary) 50%,
            var(--color-content-primary) 100%);
    z-index: 1;
}

/* Header de la sección de resultados */
.wpc-results-header {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.08) 100%);
    padding: var(--wpc-spacing-md) var(--wpc-spacing-lg);
    text-align: center;
    border-bottom: 1px solid #e5e8ff;
    position: relative;
    z-index: 2;
}

.wpc-results-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-content-heading);
    margin-bottom: 8px;
    font-family: var(--h1-font-family, inherit);
}

.wpc-results-icon {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, var(--color-content-primary), var(--color-content-secondary));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.2rem;
}

.wpc-results-subtitle {
    margin: 0;
    font-size: 0.9rem;
    opacity: 0.8;
    font-weight: 500;
    color: var(--color-content-text);
    line-height: 24px;
}

/* Layout principal mejorado */
.wpc-price-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--wpc-spacing-xl);
    align-items: stretch;
    padding: var(--wpc-spacing-lg);
    min-height: 280px;
}

/* === COLUMNA IZQUIERDA - PRECIO DESTACADO === */
.wpc-price-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    min-width: 280px;
    background: linear-gradient(135deg, #f0f4ff 0%, #e8f0ff 100%);
    border-radius: var(--wpc-border-radius);
    padding: var(--wpc-spacing-lg);
    position: relative;
    overflow: hidden;
    border: 2px solid #e5e8ff;
}

/* Decoración de fondo animada */
.wpc-price-info::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(102, 126, 234, 0.1) 0%, transparent 70%);
    animation: wpc-float 6s ease-in-out infinite;
}

.wpc-price-main {
    position: relative;
    z-index: 2;
}

.wpc-price-label {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    color: var(--color-content-primary);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.wpc-price-header {
    display: flex;
    align-items: center;
    gap: var(--wpc-spacing-sm);
    margin-bottom: var(--wpc-spacing-sm);
    justify-content: center;
    flex-wrap: wrap;
}

.wpc-price-header h3 {
    margin: 0;
    font-size: 1.1rem;
    color: var(--color-content-primary);
    font-family: var(--h1-font-family, inherit);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.wpc-price-badge {
    background: #10b981;
    color: white;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    animation: wpc-pulse-badge 2s infinite;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

.wpc-price-amount {
    margin: var(--wpc-spacing-sm) 0;
}

.wpc-price-value {
    font-size: 3.2rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--color-content-primary), var(--color-content-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    /* ← Esta línea faltaba */
    color: transparent;
    /* ← Fallback para otros navegadores */
    background-clip: text;
    line-height: 1.1;
    display: block;
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.wpc-price-maintenance {
    font-size: 1rem;
    color: #10b981;
    font-weight: 600;
    margin-top: 8px;
    padding: 8px 16px;
    background: #f0fdf4;
    border-radius: 25px;
    border: 2px solid #d1fae5;
    display: inline-block;
    -webkit-text-fill-color: #10b981;
}

.wpc-price-note {
    font-size: 0.85rem;
    color: var(--color-content-text);
    margin-top: 12px;
    opacity: 0.7;
    line-height: 1.6;
}

/* === COLUMNA CENTRAL - DESGLOSE MEJORADO === */
.wpc-price-breakdown {
    background: white;
    border: 2px solid #f0f4ff;
    border-radius: var(--wpc-border-radius);
    padding: var(--wpc-spacing-md);
    min-width: 320px;
    position: relative;
    display: flex;
    flex-direction: column;
    text-align: left;
}

.wpc-breakdown-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: var(--wpc-spacing-sm);
    padding-bottom: 12px;
    border-bottom: 2px solid #f0f4ff;
}

.wpc-breakdown-icon {
    width: 30px;
    height: 30px;
    background: var(--color-content-primary);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.9rem;
}

.wpc-breakdown-title {
    font-weight: 700;
    color: var(--color-content-heading);
    font-size: 1.2rem;
    margin: 0;
    font-family: var(--h1-font-family, inherit);
    padding: 0 !important;
}

/* === ESTILOS PARA BREAKDOWN CON ICONOS SVG === */

/* Contenedor principal del breakdown */
#breakdown-list {
    list-style: none;
    margin: 0;
    padding: 0;
    /* La lista hace scroll (no el contenedor), para que el desglose largo
       de ecommerce con extras no quede cortado sin poder verse. El alto se
       descuenta del header "¿Qué incluye?" para que el bloque total mida lo
       mismo que antes (~320px) y no sobresalga de la columna del precio. */
    max-height: 240px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

#breakdown-list::-webkit-scrollbar {
    width: 4px;
}

#breakdown-list::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 2px;
}

#breakdown-list::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 2px;
}

/* Elementos base del breakdown */
.breakdown-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 8px 0;
    font-size: 0.95rem;
    line-height: 1.5;
    border-bottom: 1px solid #f8f9fa;
    transition: all 0.3s ease;
    position: relative;
}

.breakdown-item:last-child {
    border-bottom: none;
}

.breakdown-item:hover {
    background: #f8f9ff;
    padding-left: 8px;
    padding-right: 8px;
    border-radius: 6px;
}

/* Icono del breakdown - Optimizado para SVG */
.breakdown-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 1px;
}

.breakdown-icon svg {
    width: 16px;
    height: 16px;
    display: block;
}

/* Texto del breakdown */
.breakdown-text {
    flex: 1;
    color: var(--color-content-text);
    font-weight: 500;
}

/* === ESTILOS ESPECÍFICOS POR TIPO === */

/* Elementos BASE (diseño, responsive, colores) */
.breakdown-item--base .breakdown-icon {
    background: linear-gradient(135deg, #f0f4ff 0%, #e0e7ff 100%);
    border: 2px solid #c7d2fe;
    color: var(--color-content-primary);
}

.breakdown-item--base .breakdown-text {
    color: var(--color-content-heading);
    font-weight: 600;
}

.breakdown-item--base:hover {
    background: linear-gradient(135deg, #f0f4ff 0%, #e8f0ff 100%);
}

/* Elementos PÁGINAS */
.breakdown-item--pages .breakdown-icon {
    background: linear-gradient(135deg, #fff7ed 0%, #fed7aa 100%);
    border: 2px solid #fdba74;
    color: #ea580c;
}

.breakdown-item--pages .breakdown-text {
    color: #ea580c;
    font-weight: 700;
    font-size: 1rem;
}

.breakdown-item--pages:hover {
    background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
}

/* Elementos ECOMMERCE */
.breakdown-item--ecommerce .breakdown-icon {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border: 2px solid #a7f3d0;
    color: #059669;
}

.breakdown-item--ecommerce .breakdown-text {
    color: #059669;
    font-weight: 600;
}

.breakdown-item--ecommerce:hover {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
}

/* Elementos EXTRA (funcionalidades adicionales) */
.breakdown-item--extra {
    background: linear-gradient(135deg, #fefce8 0%, #fef3c7 100%);
    border: 2px solid #fcd34d;
    border-radius: 8px;
    padding: 12px 16px;
    margin: 4px -8px;
    font-weight: 600;
}

.breakdown-item--extra .breakdown-icon {
    background: #f59e0b;
    color: white;
    border: 2px solid #d97706;
    animation: pulse-extra 2s infinite;
}

.breakdown-item--extra .breakdown-text {
    color: #92400e;
    font-weight: 700;
}

.breakdown-item--extra:hover {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    transform: translateX(4px);
    border-color: #f59e0b;
    margin: 4px -8px;
    padding: 12px 16px;
}

/* Elementos INCLUIDOS (servicios base) */
.breakdown-item--included .breakdown-icon {
    background: #10b981;
    color: white;
    border: 2px solid #059669;
}

.breakdown-item--included .breakdown-text {
    color: var(--color-content-text);
    opacity: 0.9;
}

.breakdown-item--included:hover {
    background: #f0fdf4;
}


/* Elementos del breakdown para rediseño */
.breakdown-item--redesign .breakdown-icon {
    background: linear-gradient(135deg, #f3e8ff 0%, #e9d5ff 100%);
    border: 2px solid #c4b5fd;
    color: #7c3aed;
}

.breakdown-item--redesign .breakdown-text {
    color: #7c3aed;
    font-weight: 600;
}

.breakdown-item--redesign:hover {
    background: linear-gradient(135deg, #f3e8ff 0%, #ede9fe 100%);
}

/* Barra lateral para elementos de rediseño */
.breakdown-item--redesign::before {
    background: #7c3aed;
}

/* === ELEMENTOS ESPECIALES === */

/* Mantenimiento (si se añade dinámicamente) */
.breakdown-item[data-maintenance] {
    background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%) !important;
    border: 2px solid #d1fae5 !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
    margin: 8px -16px !important;
    font-weight: 600;
    color: #059669 !important;
    border-bottom: 2px solid #d1fae5 !important;
}

.breakdown-item[data-maintenance] .breakdown-icon {
    background: #10b981 !important;
    color: white !important;
    border-color: #10b981 !important;
}

.breakdown-item[data-maintenance]:hover {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%) !important;
    margin: 8px -16px !important;
    padding: 12px 16px !important;
}

/* === ANIMACIONES === */

/* Animación para elementos extra */
@keyframes pulse-extra {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 2px 4px rgba(245, 158, 11, 0.3);
    }

    50% {
        transform: scale(1.05);
        box-shadow: 0 4px 8px rgba(245, 158, 11, 0.4);
    }
}

/* Animación de aparición progresiva */
.breakdown-item {
    animation: slideInLeft 0.4s ease;
    animation-fill-mode: both;
}

.breakdown-item:nth-child(1) {
    animation-delay: 0.1s;
}

.breakdown-item:nth-child(2) {
    animation-delay: 0.15s;
}

.breakdown-item:nth-child(3) {
    animation-delay: 0.2s;
}

.breakdown-item:nth-child(4) {
    animation-delay: 0.25s;
}

.breakdown-item:nth-child(5) {
    animation-delay: 0.3s;
}

.breakdown-item:nth-child(6) {
    animation-delay: 0.35s;
}

.breakdown-item:nth-child(7) {
    animation-delay: 0.4s;
}

.breakdown-item:nth-child(8) {
    animation-delay: 0.45s;
}

.breakdown-item:nth-child(9) {
    animation-delay: 0.5s;
}

.breakdown-item:nth-child(n+10) {
    animation-delay: 0.55s;
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* === INDICADORES VISUALES === */

/* Separadores visuales entre secciones */
.breakdown-item--pages::after,
.breakdown-item--ecommerce:last-of-type::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, #e5e7eb 50%, transparent 100%);
}

/* Destacar elementos importantes con barras laterales */
.breakdown-item--base,
.breakdown-item--pages,
.breakdown-item--redesign,
.breakdown-item--ecommerce,
.breakdown-item--included {
    position: relative;
}

.breakdown-item--base::before,
.breakdown-item--pages::before,
.breakdown-item--redesign::before,
.breakdown-item--ecommerce::before,
.breakdown-item--included::before {
    content: '';
    position: absolute;
    left: -8px;
    top: 50%;
    width: 3px;
    height: 20px;
    transform: translateY(-50%);
    border-radius: 2px;
}

.breakdown-item--base::before {
    background: var(--color-content-primary);
}

.breakdown-item--pages::before {
    background: #ea580c;
}

.breakdown-item--ecommerce::before {
    background: #059669;
}

.breakdown-item--included::before {
    background: #10b981;
}

.breakdown-item--redesign::before {
    background: #7c3aed;
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
    .breakdown-item {
        padding: 6px 0;
        font-size: 0.9rem;
    }

    .breakdown-icon {
        width: 20px;
        height: 20px;
    }

    .breakdown-icon svg {
        width: 14px;
        height: 14px;
    }

    .breakdown-item--extra {
        padding: 10px 12px;
        margin: 4px -6px;
    }

    .breakdown-item[data-maintenance] {
        padding: 10px 12px !important;
        margin: 6px -12px !important;
    }
}

@media (max-width: 480px) {
    .breakdown-item {
        gap: 8px;
        padding: 5px 0;
        font-size: 0.85rem;
    }

    .breakdown-icon {
        width: 18px;
        height: 18px;
    }

    .breakdown-icon svg {
        width: 12px;
        height: 12px;
    }

    .breakdown-item--extra {
        padding: 8px 10px;
        margin: 4px -4px;
    }

    .breakdown-item[data-maintenance] {
        padding: 8px 10px !important;
        margin: 6px -8px !important;
    }

    /* Simplificar animaciones en móviles */
    .breakdown-item {
        animation: none;
    }
}

/* === ESTADOS DE CARGA === */
.breakdown-loading .breakdown-item {
    opacity: 0.5;
    pointer-events: none;
}

.breakdown-loading .breakdown-item .breakdown-icon {
    animation: spin 1s linear infinite;
}

/* === ACCESIBILIDAD === */
@media (prefers-reduced-motion: reduce) {

    .breakdown-item,
    .breakdown-icon {
        animation: none !important;
        transition: none !important;
    }

    .breakdown-item:hover {
        transform: none !important;
    }
}

/* Alto contraste */
@media (prefers-contrast: high) {
    .breakdown-item {
        border-bottom-color: #000;
    }

    .breakdown-icon {
        border-width: 3px;
    }

    .breakdown-text {
        color: #000 !important;
        font-weight: 700 !important;
    }
}

/* (Bloque responsive/accesibilidad del breakdown unificado arriba; se
   eliminó una duplicación literal que existía aquí.) */

/* === COLUMNA DERECHA - ACCIONES MEJORADAS === */
.wpc-actions-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--wpc-spacing-sm);
    min-width: 260px;
    text-align: center;
}

.wpc-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: var(--wpc-spacing-md);
}

.wpc-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 24px;
    border: none;
    border-radius: var(--wpc-border-radius);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    text-decoration: none;
    font-family: inherit;
    position: relative;
    overflow: hidden;
    min-height: 54px;
    white-space: nowrap;
}

.wpc-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.6s;
}

.wpc-btn:hover::before {
    left: 100%;
}

.wpc-btn-primary {
    background: linear-gradient(135deg, var(--color-content-primary), var(--color-content-secondary));
    color: white;
    box-shadow: var(--wpc-shadow-medium);
    transform: scale(1);
}

.wpc-btn-primary:hover {
    transform: scale(1.05) translateY(-2px);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
}

.wpc-btn-secondary {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    box-shadow: var(--wpc-shadow-small);
}

.wpc-btn-secondary:hover {
    transform: scale(1.05) translateY(-2px);
    box-shadow: 0 8px 25px rgba(16, 185, 129, 0.4);
}

.wpc-btn-tertiary {
    background: linear-gradient(135deg, #6c5ce7, #5a4fd4);
    color: white;
    box-shadow: var(--wpc-shadow-small);
    text-decoration: none !important;
}

.wpc-btn-tertiary:hover {
    transform: scale(1.05) translateY(-2px);
    box-shadow: 0 8px 25px rgba(108, 92, 231, 0.4);
    text-decoration: none !important;
    color: white !important;
}

.wpc-btn-tertiary:visited {
    color: white !important;
}

.wpc-btn-tertiary:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.3);
}

.wpc-btn-tertiary:active {
    transform: scale(0.95);
    box-shadow: var(--wpc-shadow-small);
}

.wpc-btn-icon {
    font-size: 1.2rem;
    transition: transform 0.3s ease;
    height: 20px;
    width: 20px;
}

.wpc-btn:hover .wpc-btn-icon {
    transform: scale(1.2);
}

.wpc-btn:active {
    transform: scale(0.95);
    box-shadow: var(--wpc-shadow-small);
}

.wpc-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
}

/* Garantía mejorada */
.wpc-guarantee {
    background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
    border: 2px solid #d1fae5;
    border-radius: var(--wpc-border-radius);
    padding: var(--wpc-spacing-sm);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.wpc-guarantee::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #10b981, #059669, #10b981);
    animation: wpc-shimmer 2s linear infinite;
}

.wpc-guarantee {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    position: relative;
    z-index: 2;
}

.wpc-guarantee-icon {
    font-size: 1.5rem;
    color: #10b981;
    animation: wpc-bounce-guarantee 2s infinite;
}

.wpc-guarantee-text {
    color: #059669;
    font-weight: 600;
    font-size: 0.9rem;
    line-height: 1.4;
    text-align: left;
}

/* === ANIMACIONES === */
@keyframes wpc-float {

    0%,
    100% {
        transform: translateY(0px) rotate(0deg);
    }

    50% {
        transform: translateY(-10px) rotate(2deg);
    }
}

@keyframes wpc-pulse-badge {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
    }

    50% {
        transform: scale(1.05);
        box-shadow: 0 4px 16px rgba(16, 185, 129, 0.4);
    }
}

@keyframes wpc-bounce-guarantee {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-5px);
    }

    60% {
        transform: translateY(-3px);
    }
}

@keyframes wpc-shimmer {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

/* Estados de aparición mejorados */
.wpc-results-section.appear {
    animation: wpc-slideInUp 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@keyframes wpc-slideInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Estados de visibilidad mejorados */
.wpc-results-section.hidden {
    opacity: 0;
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-top: none;
    margin-top: 0;
    transform: translateY(-20px);
}

.wpc-results-section.visible {
    opacity: 1;
    max-height: 1000px;
    padding-top: 0;
    padding-bottom: 0;
    border-top: 1px solid #e5e7eb;
    margin-top: var(--wpc-spacing-lg);
    transform: translateY(0);
}

/* Efecto de precio actualizado */
.wpc-price-value.price-update {
    animation: wpc-priceGlow 0.5s ease;
}

@keyframes wpc-priceGlow {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
        filter: drop-shadow(0 0 20px rgba(102, 126, 234, 0.4));
    }

    100% {
        transform: scale(1);
    }
}

/* === RESPONSIVE MEJORADO === */
@media (max-width: 1200px) {
    .wpc-price-card {
        grid-template-columns: 1fr;
        gap: var(--wpc-spacing-md);
        text-align: center;
    }

    .wpc-price-info,
    .wpc-price-breakdown,
    .wpc-actions-section {
        min-width: auto;
    }

    .wpc-price-breakdown {
        text-align: left;
    }

    .wpc-results-header {
        padding: var(--wpc-spacing-sm) var(--wpc-spacing-md);
    }

    .wpc-results-title {
        font-size: 1.3rem;
    }
}

@media (max-width: 768px) {
    .wpc-results-section {
        margin: var(--wpc-spacing-md) -10px 0 -10px;
    }

    .wpc-price-card {
        padding: var(--wpc-spacing-md);
        min-height: auto;
    }

    .wpc-price-value {
        font-size: 2.8rem;
    }

    .wpc-price-info {
        min-width: auto;
        padding: var(--wpc-spacing-md);
    }

    .wpc-price-breakdown {
        min-width: auto;
    }

    /* En móvil el scroll también lo lleva la lista interna, con menos alto. */
    #breakdown-list {
        max-height: 180px;
    }

    .wpc-actions-section {
        min-width: auto;
    }

    .wpc-actions {
        gap: 8px;
    }

    .wpc-btn {
        min-height: 48px;
        font-size: 0.95rem;
        padding: 12px 20px;
    }

    .wpc-results-header {
        padding: var(--wpc-spacing-sm);
    }
}

@media (max-width: 480px) {
    .wpc-results-section {
        margin: var(--wpc-spacing-sm) 0 0 0;
        box-shadow: none;
        border: none;
        border-top: 1px solid #e5e7eb;
    }

    .wpc-results-section::before {
        display: none;
        border-radius: none;
    }

    .wpc-results-header {
        padding: var(--wpc-spacing-sm);
        border-radius: var(--wpc-border-radius);
    }

    .wpc-results-title {
        font-size: 1.2rem;
        flex-direction: column;
        gap: 8px;
    }

    .wpc-results-icon {
        width: 28px;
        height: 28px;
        font-size: 1rem;
    }

    .wpc-price-card {
        padding: var(--wpc-spacing-sm);
        gap: var(--wpc-spacing-sm);
        display: initial;
    }

    .wpc-price-card>div {
        margin-bottom: var(--wpc-spacing-sm);
    }

    .wpc-price-value {
        font-size: 2.4rem;
    }

    .wpc-price-info {
        padding: var(--wpc-spacing-sm);
        min-width: auto;
    }

    .wpc-price-header {
        flex-direction: column;
        gap: 8px;
    }

    .wpc-price-label {
        flex-direction: column;
        gap: 8px;
    }

    .wpc-price-breakdown {
        padding: var(--wpc-spacing-sm);
    }

    #breakdown-list {
        max-height: 140px;
    }

    .wpc-breakdown-header {
        margin-bottom: 12px;
        padding-bottom: 8px;
    }

    .wpc-breakdown-title {
        font-size: 1rem;
    }

    #breakdown-list li {
        padding: 8px 0;
        font-size: 0.9rem;
    }

    .wpc-actions {
        gap: 8px;
    }

    .wpc-btn {
        min-height: 44px;
        font-size: 0.9rem;
        padding: 12px 16px;
    }

    .wpc-guarantee {
        padding: 12px;
    }

    .wpc-guarantee-text {
        font-size: 0.8rem;
    }
}





/* === MANTENIMIENTO HORIZONTAL === */
.wpc-maintenance-section {
    grid-column: 1 / -1;
    margin-top: var(--wpc-spacing-md);
    padding-top: var(--wpc-spacing-md);
    border-top: 1px solid #e5e7eb;
    text-align: left;
}

.wpc-maintenance-section h4 {
    margin-bottom: var(--wpc-spacing-sm);
    color: var(--color-content-heading);
    font-size: 1.1rem;
    font-family: var(--h1-font-family, inherit);
}

.wpc-maintenance-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}

.wpc-maintenance-card {
    position: relative;
}

/* CORREGIDO: Cambiar el input para que no bloquee el label */
.wpc-maintenance-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    /* ← CAMBIADO: era 100% */
    height: 1px;
    /* ← CAMBIADO: era 100% */
    top: 0;
    left: 0;
    cursor: pointer;
    z-index: -1;
    /* ← AÑADIDO: mantener por debajo */
}

.wpc-maintenance-card label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--wpc-spacing-sm);
    background: #fff;
    border: 2px solid #e5e7eb;
    border-radius: var(--wpc-border-radius-small);
    cursor: pointer;
    transition: var(--wpc-transition);
    width: 100%;
    box-sizing: border-box;
    position: relative;
    /* ← AÑADIDO: para z-index */
    z-index: 1;
    /* ← AÑADIDO: mantener por encima */
}

.wpc-maintenance-card:hover label {
    border-color: var(--color-content-link);
    box-shadow: var(--wpc-shadow-small);
    background: #f0f6ff;
    /* azul muy clarito */
}

.wpc-maintenance-card input[type="radio"]:checked+label {
    border-color: var(--color-content-primary);
    background: var(--color-content-primary);
    color: #FFF !important;
}

.wpc-maint-title {
    font-weight: 500;
    font-family: var(--h1-font-family, inherit);
}

.wpc-maint-price {
    font-weight: 600;
    color: var(--color-content-primary);
    font-size: 0.9rem;
}

.wpc-maintenance-card input[type="radio"]:checked+label .wpc-maint-price {
    color: white;
}

/* === RESTO DE ESTILOS DEL FORMULARIO (sin cambios) === */
.wpc-field-group {
    margin-bottom: var(--wpc-spacing-lg);
}

.wpc-dynamic-options .wpc-field-group {
    border-top: 1px solid #e5e7eb;
    padding-top: var(--wpc-spacing-md);
}

.wpc-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--wpc-spacing-sm);
}

.wpc-label-text {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-content-heading);
    font-family: var(--h1-font-family, inherit);
}

.wpc-project-type .wpc-label {
    margin-bottom: 10px;
}

.wpc-section-subtitle {
    color: #6b7280;
    font-size: 14px;
    line-height: 1.6;
    font-weight: 400;
    margin-bottom: var(--wpc-spacing-sm) !important;
    display: block;
}


.wpc-required {
    color: #ef4444;
    margin-left: 4px;
}

.wpc-value-display {
    background: var(--color-content-primary);
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
}

/* === ESTILOS ESPECÍFICOS PARA REDISEÑO WEB === */

/* Opciones específicas para rediseño */
.wpc-redesign-options {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s ease;
}

.wpc-redesign-options.visible {
    opacity: 1;
    max-height: 500px;
}


/* === OPCIONES DINÁMICAS === */
.wpc-dynamic-options {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: all 0.5s ease;
}

.wpc-dynamic-options.visible {
    opacity: 1;
    max-height: 100%;
}

.wpc-ecommerce-options {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s ease;
}

.wpc-ecommerce-options.visible {
    opacity: 1;
    max-height: 500px;
}

/* === RADIO CARDS === */
.wpc-radio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--wpc-spacing-sm);
}

.wpc-radio-card {
    position: relative;
    border-radius: var(--wpc-border-radius);
    /*overflow: hidden;*/
    transition: var(--wpc-transition);
    cursor: pointer;
}

.wpc-radio-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.wpc-radio-card label {
    display: block;
    padding: var(--wpc-spacing-md) var(--wpc-spacing-sm);
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: var(--wpc-border-radius);
    text-align: center;
    cursor: pointer;
    transition: var(--wpc-transition);
    height: 100%;
    text-decoration: none;
    color: inherit;
    transition: all .3s ease;
}

.wpc-radio-card:hover label {
    border-color: var(--color-content-link);
    transform: translateY(-2px);
    box-shadow: var(--wpc-shadow-medium);
    background: #f0f6ff;
    /* azul muy clarito */
    border-color: var(--color-content-primary);
}


.wpc-radio-card:hover h2 {
    color: var(--color-content-primary);
}

.wpc-radio-card:hover img {
    filter: invert(32%) sepia(50%) saturate(607%) hue-rotate(177deg) brightness(93%) contrast(90%);
}

.wpc-radio-card input[type="radio"]:checked+label {
    border-color: var(--color-content-primary);
    background: linear-gradient(135deg, var(--color-content-primary), var(--color-content-secondary));
    transform: translateY(-2px);
    color: #FFF !important;
    box-shadow: var(--wpc-shadow-medium);
}

.wpc-radio-card input[type="radio"]:checked+label h2 {
    color: #FFF;
}

.wpc-radio-card input[type="radio"]:checked+label img {
    color: #FFF;
    filter: invert(100%) sepia(0%) saturate(7500%) hue-rotate(276deg) brightness(101%) contrast(103%);
}

.wpc-card-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 12px auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wpc-card-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* Mantiene las proporciones */
    display: block;
}

.wpc-card-title {
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 4px;
    font-family: var(--h1-font-family, inherit);
}

.wpc-card-title h2 {
    font-size: 1.5rem;
}

.wpc-card-price {
    font-size: 0.9rem;
    opacity: 0.8;
}

/* === RANGE INPUTS === */
.wpc-range-container {
    position: relative;
    margin-bottom: 8px;
}

.wpc-range {
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: #e5e7eb;
    outline: none;
    -webkit-appearance: none;
    cursor: pointer;
}

.wpc-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--color-content-primary);
    cursor: pointer;
    box-shadow: var(--wpc-shadow-small);
    transition: all 0.2s ease;
}

.wpc-range::-webkit-slider-thumb:hover {
    transform: scale(1.1);
    box-shadow: var(--wpc-shadow-medium);
}

.wpc-range::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--color-content-primary);
    cursor: pointer;
    border: none;
    box-shadow: var(--wpc-shadow-small);
}

.wpc-range-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: var(--color-content-text);
    margin-top: 4px;
}

/* === CHECKBOXES === */
.wpc-checkbox-list {
    display: grid;
    gap: 12px;
}

.wpc-checkbox-item input[type="checkbox"] {
    position: absolute;
    opacity: 0;
}

.wpc-checkbox-item label {
    display: flex;
    align-items: center;
    /* Cambiar de 'center' a 'flex-start' */
    padding: var(--wpc-spacing-sm);
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: var(--wpc-border-radius-small);
    cursor: pointer;
    transition: var(--wpc-transition);
}

.wpc-checkbox-item:hover label {
    border-color: var(--color-content-link);
    box-shadow: var(--wpc-shadow-small);
    background: #f0f6ff;
    /* azul muy clarito */
}

.wpc-checkbox-item input[type="checkbox"]:checked+label {
    border-color: var(--color-content-primary);
    background: #f0f4ff;
}

.wpc-check-icon {
    width: 20px;
    height: 20px;
    border: 2px solid #e5e7eb;
    border-radius: 4px;
    margin-right: 12px;
    position: relative;
    transition: var(--wpc-transition);
    flex-shrink: 0;
}

.wpc-checkbox-item input[type="checkbox"]:checked+label .wpc-check-icon {
    background: var(--color-content-primary);
    border-color: var(--color-content-primary);
}

.wpc-checkbox-item input[type="checkbox"]:checked+label .wpc-check-icon::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 12px;
    font-weight: bold;
}

.wpc-check-content {
    flex: 1;
}

.wpc-check-text {
    font-weight: 600;
    color: var(--color-content-text);
    font-family: var(--h1-font-family, inherit);
    font-size: 1rem;
    line-height: 1.3;
    margin-bottom: 6px;
    display: block;
}

.wpc-check-text h3 {
    font-size: 1rem;
}

.wpc-check-description {
    color: #4b5563;
    /* Subido de #6b7280 para mejor contraste AA en texto pequeño */
    font-size: 0.85rem;
    line-height: 1.4;
    display: block;
    font-style: italic;
    /* Cursiva para diferenciarlo */
}

.wpc-check-price {
    color: var(--color-content-primary);
    font-weight: 600;
    font-size: 0.9rem;
    margin-left: 16px;
    flex-shrink: 0;
}

/* === TIMELINE OPTIONS === */
.wpc-timeline-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--wpc-spacing-sm);
}

.wpc-timeline-card {
    position: relative;
}

.wpc-timeline-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.wpc-timeline-card label {
    display: block;
    padding: var(--wpc-spacing-sm);
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: var(--wpc-border-radius);
    text-align: center;
    cursor: pointer;
    transition: var(--wpc-transition);
    height: 100%;
    transition: all .3s ease;
}

.wpc-timeline-card:hover label {
    border-color: var(--color-content-link);
    transform: translateY(-2px);
    box-shadow: var(--wpc-shadow-medium);
    background: #f0f6ff;
    /* azul muy clarito */
}

.wpc-timeline-card input[type="radio"]:checked+label {
    border-color: var(--color-content-primary);
    background: linear-gradient(135deg, var(--color-content-primary), var(--color-content-secondary));
    color: white;
    transform: translateY(-2px);
    box-shadow: var(--wpc-shadow-medium);
    color: #FFF !important;
}

.wpc-timeline-icon {
    font-size: 1.5rem;
    margin-bottom: 8px;
}

.wpc-timeline-title {
    font-weight: 600;
    margin-bottom: 4px;
    font-family: var(--h1-font-family, inherit);
}

.wpc-timeline-desc {
    font-size: 0.8rem;
    opacity: 0.8;
    margin-bottom: 4px;
}

.wpc-timeline-discount,
.wpc-timeline-extra {
    font-size: 0.8rem;
    font-weight: 600;
    color: #10b981;
}

.wpc-timeline-extra {
    color: #FF9800;
}

.wpc-timeline-price {
    font-size: 0.8rem;
    opacity: 0.7;
}



/* === CORRECCIÓN COMPLETA DEL MODAL - CENTRADO REAL === */

/* Modal principal - overlay de fondo */
.wpc-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75);
    display: none;
    /* Oculto por defecto */
    z-index: 10000;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    /* CENTRADO REAL EN TODAS LAS PANTALLAS */
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    /* PERMITIR SCROLL INTERNO SOLO CUANDO SEA NECESARIO */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Cuando el modal está activo - SIEMPRE CENTRADO */
.wpc-modal.active {
    display: flex !important;
    align-items: center;
    justify-content: center;
}

/* En pantallas muy pequeñas, permitir que se ajuste mejor */
@media (max-height: 600px) {
    .wpc-modal.active {
        align-items: flex-start;
        padding-top: 20px;
    }
}

/* Contenido del modal */
.wpc-modal-content {
    background: white;
    border-radius: var(--wpc-border-radius-large, 20px);
    width: 100%;
    max-width: 600px;
    /* ALTURA DINÁMICA - se adapta al contenido */
    max-height: calc(100vh - 40px);
    /* CENTRADO PERFECTO */
    margin: auto;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: modalSlideIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    /* Asegurar que no se deforme */
    flex-shrink: 0;
}

/* Animación de entrada del modal - MÁS SUAVE */
@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-10px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Header del modal */
.wpc-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #e5e7eb;
    background: linear-gradient(135deg, #f8f9ff 0%, #ffffff 100%);
    border-radius: var(--wpc-border-radius-large, 20px) var(--wpc-border-radius-large, 20px) 0 0;
    flex-shrink: 0;
}

.wpc-modal-header h3 {
    margin: 0;
    font-size: 1.5rem;
    color: var(--color-content-heading, #2c3e50);
    font-weight: 600;
    font-family: var(--h1-font-family, inherit);
}

.wpc-modal-close {
    background: none;
    border: none;
    font-size: 24px;
    color: #6b7280;
    cursor: pointer;
    padding: 8px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
    line-height: 1;
}

.wpc-modal-close:hover {
    background: #f3f4f6;
    color: #374151;
    transform: rotate(90deg);
}

/* Cuerpo del modal - SCROLL INTERNO MEJORADO */
.wpc-modal-body {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    /* Importante para el flex */
    /* Scroll suave y bonito */
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 #f1f5f9;
}

/* Scrollbar personalizado para WebKit */
.wpc-modal-body::-webkit-scrollbar {
    width: 6px;
}

.wpc-modal-body::-webkit-scrollbar-track {
    background: #f1f5f9;
}

.wpc-modal-body::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

.wpc-modal-body::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Resumen de configuración */
.wpc-form-summary {
    background: #f0f4ff;
    border-radius: var(--wpc-border-radius-small, 8px);
    padding: 16px;
    margin: 20px 24px 0 24px;
    border: 1px solid #e5e8ff;
    flex-shrink: 0;
}

.wpc-form-summary h4 {
    margin: 0 0 12px 0;
    color: var(--color-content-heading, #2c3e50);
    font-size: 1.1rem;
    font-family: var(--h1-font-family, inherit);
    font-weight: 600;
}

.wpc-form-summary p {
    margin: 6px 0;
    font-size: 0.9rem;
    color: var(--color-content-text, #34495e);
    line-height: 1.4;
}

.wpc-form-summary strong {
    color: var(--color-content-heading, #2c3e50);
    font-weight: 600;
}

/* Container del formulario de Gravity Forms */
#gravity-form-container {
    padding: 16px 24px 24px 24px;
    flex: 1;
}

/* PREVENIR SCROLL DEL BODY - MEJORADO */
body.modal-open {
    overflow: hidden !important;
    /* La posición de scroll se conserva mediante el estilo inline top: -Ypx
       que aplica el JS; por eso NO forzamos top/left aquí. */
    position: fixed !important;
    width: 100% !important;
    left: 0 !important;
}

/* Responsive - Tablet */
@media (max-width: 768px) {
    .wpc-modal {
        padding: 16px;
    }

    .wpc-modal-content {
        max-width: calc(100% - 32px);
        max-height: calc(100vh - 32px);
        border-radius: 16px;
    }

    .wpc-modal-header {
        padding: 16px 20px;
        border-radius: 16px 16px 0 0;
    }

    .wpc-modal-header h3 {
        font-size: 1.25rem;
    }

    .wpc-form-summary {
        margin: 16px;
        padding: 12px;
    }

    #gravity-form-container {
        padding: 12px 16px 16px 16px;
    }
}

/* Responsive - Móvil */
@media (max-width: 480px) {
    .wpc-modal {
        padding: 12px;
        /* En móvil, permitir que se ajuste mejor si es necesario */
        align-items: flex-start;
        padding-top: 20px;
    }

    .wpc-modal-content {
        max-width: calc(100% - 24px);
        max-height: calc(100vh - 40px);
        border-radius: 12px;
    }

    .wpc-modal-header {
        padding: 12px 16px;
        border-radius: 12px 12px 0 0;
    }

    .wpc-modal-header h3 {
        font-size: 1.1rem;
    }

    .wpc-modal-close {
        width: 36px;
        height: 36px;
        font-size: 20px;
    }

    .wpc-form-summary {
        margin: 12px;
        padding: 12px;
    }

    #gravity-form-container {
        padding: 12px;
    }

    .wpc-check-text {
        font-size: 15px;
        line-height: 20px;
    }

    .wpc-check-text h3 {
        font-size: 15px;
        line-height: 22px;
    }

    .wpc-check-description {
        font-size: 13px;
    }

    .wpc-checkbox-item label {
        align-items: flex-start;
        padding: 12px;
    }

    .wpc-check-icon {
        margin-top: 3px;
    }

    .wpc-check-price {
        margin-left: 8px;
        font-size: 0.9rem;
    }
}

/* ANIMACIÓN DE CIERRE MEJORADA */
.wpc-modal.closing {
    animation: modalSlideOut 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

@keyframes modalSlideOut {
    from {
        opacity: 1;
        transform: scale(1) translateY(0);
    }

    to {
        opacity: 0;
        transform: scale(0.95) translateY(10px);
    }
}

/* INDICADOR VISUAL CUANDO EL MODAL ESTÁ CARGANDO */
.wpc-modal-loading {
    pointer-events: none;
}

.wpc-modal-loading .wpc-modal-content {
    opacity: 0.7;
}

.wpc-modal-loading .wpc-modal-content::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 32px;
    height: 32px;
    margin: -16px 0 0 -16px;
    border: 3px solid transparent;
    border-top: 3px solid var(--color-content-primary, #667eea);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    z-index: 1001;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}


/* Estilos mejorados para Gravity Forms dentro del modal */
#gravity-form-container .gform_wrapper {
    margin: 0 !important;
    max-width: none !important;
}

#gravity-form-container .gform_body {
    margin: 0 !important;
}

#gravity-form-container .gform_fields {
    margin: 0 !important;
    padding: 0 !important;
}

#gravity-form-container .gfield_label {
    font-weight: 600 !important;
    color: var(--color-content-heading, #2c3e50) !important;
    font-family: var(--h1-font-family, inherit) !important;
    margin-bottom: 8px !important;
    font-size: 1rem !important;
    line-height: 1.3;
    display: block;
}

#gravity-form-container input[type="text"],
#gravity-form-container input[type="email"],
#gravity-form-container input[type="tel"],
#gravity-form-container textarea {
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px 16px !important;
    border-radius: 8px !important;
    font-size: 16px !important;
    /* Previene zoom en iOS */
    transition: border-color 0.3s ease !important;
    box-sizing: border-box !important;
    line-height: 1.4 !important;
    font-family: inherit !important;
}

#gravity-form-container input:focus,
#gravity-form-container textarea:focus {
    outline: none !important;
    border-color: var(--color-content-primary, #667eea) !important;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
}

#gravity-form-container .gform_button {
    background: linear-gradient(135deg, var(--color-content-primary, #667eea), var(--color-content-secondary, #764ba2)) !important;
    color: white !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 12px 24px !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    width: 100% !important;
    margin-top: 8px !important;
}

#gravity-form-container .gform_button:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}



/* === FORMULARIOS === */
.wpc-form {
    padding: var(--wpc-spacing-lg);
}

.wpc-form-group {
    margin-bottom: var(--wpc-spacing-md);
}

.wpc-form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--color-content-heading);
    font-family: var(--h1-font-family, inherit);
}

.wpc-form-group input,
.wpc-form-group textarea,
.wpc-form-group select {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e5e7eb;
    border-radius: var(--wpc-border-radius-small);
    font-size: 1rem;
    transition: border-color 0.3s ease;
    box-sizing: border-box;
    font-family: inherit;
    color: var(--color-content-text);
}

.wpc-form-group input:focus,
.wpc-form-group textarea:focus,
.wpc-form-group select:focus {
    outline: none;
    border-color: var(--color-content-primary);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.wpc-form-group textarea {
    resize: vertical;
    min-height: 100px;
}

.wpc-form-summary {
    background: #f0f4ff;
    border-radius: var(--wpc-border-radius-small);
    padding: var(--wpc-spacing-sm);
    margin-bottom: var(--wpc-spacing-md);
}

.wpc-form-summary h4 {
    margin: 0 0 12px 0;
    color: var(--color-content-heading);
    font-size: 1.1rem;
    font-family: var(--h1-font-family, inherit);
}

.wpc-form-summary p {
    margin: 8px 0;
    font-size: 0.9rem;
    color: var(--color-content-text);
}

.wpc-form-summary strong {
    color: var(--color-content-heading);
}

.wpc-form-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* === ESTADOS DE ERROR === */
.wpc-form-group.error input,
.wpc-form-group.error textarea,
.wpc-form-group.error select {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
}

.wpc-form-group.error label {
    color: #ef4444;
}

/* === ANIMACIONES === */
.fade-in-up {
    animation: fadeInUp 0.6s ease forwards;
    opacity: 0;
    transform: translateY(30px);
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-in {
    animation: slideInUp 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    opacity: 0;
    transform: translateY(50px);
}

@keyframes slideInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.price-update {
    animation: priceGlow 0.5s ease;
}

@keyframes priceGlow {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
        color: #10b981;
    }

    100% {
        transform: scale(1);
    }
}

/* === LOADING STATES === */
.wpc-loading {
    position: relative;
    pointer-events: none;
    opacity: 0.7;
}

.wpc-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid transparent;
    border-top: 2px solid currentColor;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* === RESPONSIVE DESIGN === */
@media (max-width: 1024px) {

    .wpc-price-info {
        order: 1;
    }

    .wpc-price-breakdown {
        order: 2;
        min-width: auto;
        text-align: center;
    }

    .wpc-actions-section {
        order: 3;
        min-width: auto;
    }

    .wpc-maintenance-section {
        order: 4;
        text-align: center;
    }
}

@media (max-width: 768px) {
    .wpc-calculator-container {
        margin: 0 10px;
        border-radius: var(--wpc-border-radius);
    }

    .wpc-form-section,
    .wpc-results-section {
        padding: var(--wpc-spacing-md);
    }

    .wpc-price-value {
        font-size: 2.2rem;
    }

    .wpc-radio-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .wpc-timeline-options {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}

@media (max-width: 480px) {
    .wpc-calculator-container {
        margin: 0;
        box-shadow: none;
        border: none;
        border-top: 1px solid #e5e7eb;
    }

    .wpc-header {
        padding: var(--wpc-spacing-sm);
    }

    .wpc-header-content {
        gap: 12px;
    }

    .wpc-title {
        font-size: 1.2rem;
    }

    .wpc-subtitle {
        font-size: 0.8rem;
    }

    .wpc-form-section,
    .wpc-results-section {
        padding: var(--wpc-spacing-sm);
    }

    .wpc-field-group {
        margin-bottom: var(--wpc-spacing-sm);
    }

    .wpc-price-value {
        font-size: 2rem;
    }

    .wpc-check-text {
        font-size: 15px;
        line-height: 22px;
    }


    .wpc-maint-title {
        font-size: 15px;
        line-height: 22px;
    }

    .wpc-form-actions {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .wpc-modal {
        padding: 10px;
    }

    .wpc-modal-content {
        max-height: calc(100vh - 20px);
        border-radius: var(--wpc-border-radius);
    }

    .wpc-modal-header {
        padding: var(--wpc-spacing-sm);
        border-radius: var(--wpc-border-radius) var(--wpc-border-radius) 0 0;
    }

    .wpc-modal-header h3 {
        font-size: 1.2rem;
    }

    .wpc-form {
        padding: var(--wpc-spacing-sm);
    }
}

/* === MEJORAS RESPONSIVE Y TÁCTILES === */

/* Tablet: mantener el timeline en 3 columnas compactas en vez de apilarlo,
   que ocupa demasiado alto. */
@media (min-width: 481px) and (max-width: 768px) {
    .wpc-timeline-options {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }

    .wpc-timeline-card label {
        padding: 12px 6px;
    }
}

/* Áreas táctiles mínimas (recomendación WCAG: 44x44px) en dispositivos
   táctiles, sin agrandar el icono visual del tooltip. */
@media (hover: none) and (pointer: coarse) {
    .wpc-tooltip-trigger {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
        /* Compensar el tamaño extra para no descuadrar el texto contiguo */
        margin: -14px;
        padding: 14px;
        vertical-align: middle;
    }

    .wpc-btn,
    .wpc-radio-card label,
    .wpc-timeline-card label,
    .wpc-maintenance-card label,
    .wpc-checkbox-item label {
        min-height: 48px;
    }
}

/* Móvil muy estrecho: evitar que los precios "+450 €" partan la línea
   del título de cada funcionalidad. */
@media (max-width: 380px) {
    .wpc-checkbox-item label {
        flex-wrap: wrap;
    }

    .wpc-check-price {
        margin-left: 32px;
        margin-top: 4px;
    }
}

/* === FOCUS MANAGEMENT === */
.wpc-calculator-container *:focus {
    outline: 2px solid var(--color-content-primary);
    outline-offset: 2px;
}

.wpc-calculator-container *:focus:not(:focus-visible) {
    outline: none;
}

.wpc-calculator-container *:focus-visible {
    outline: 2px solid var(--color-content-primary);
    outline-offset: 2px;
}

/* === NOTIFICACIONES === */
.wpc-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10001;
    max-width: 400px;
    background: white;
    border-radius: var(--wpc-border-radius);
    box-shadow: var(--wpc-shadow-large);
    transform: translateX(420px);
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow: hidden;
}

.wpc-notification.show {
    transform: translateX(0);
}

.wpc-notification-success {
    border-left: 4px solid #10b981;
}

.wpc-notification-error {
    border-left: 4px solid #ef4444;
}

.wpc-notification-content {
    display: flex;
    align-items: flex-start;
    padding: var(--wpc-spacing-sm);
    gap: 12px;
}

.wpc-notification-icon {
    font-size: 1.2rem;
    margin-top: 2px;
}

.wpc-notification-text {
    flex: 1;
    font-size: 0.9rem;
    color: var(--color-content-text);
    line-height: 1.4;
}

.wpc-notification-close {
    background: none;
    border: none;
    font-size: 1.4rem;
    color: var(--color-content-text);
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
    margin-top: 1px;
}

.wpc-notification-close:hover {
    background: #f3f4f6;
    color: var(--color-content-heading);
}

.wpc-radio-card label,
.wpc-timeline-card label,
.wpc-maintenance-card label {
    text-decoration: none !important;
    color: inherit !important;
}

.wpc-radio-card label:focus,
.wpc-timeline-card label:focus,
.wpc-maintenance-card label:focus {
    outline: none;
}

/* === FOCO DE TECLADO ACCESIBLE ===
 * Los inputs reales están ocultos (opacity:0), por lo que el foco del
 * teclado era invisible. Cuando el input recibe foco por teclado
 * (:focus-visible), marcamos el label visible asociado. */
.wpc-radio-card input[type="radio"]:focus-visible + label,
.wpc-timeline-card input[type="radio"]:focus-visible + label,
.wpc-maintenance-card input[type="radio"]:focus-visible + label,
.wpc-checkbox-item input[type="checkbox"]:focus-visible + label {
    outline: 3px solid var(--color-content-primary, #667eea);
    outline-offset: 2px;
    border-color: var(--color-content-primary, #667eea);
}

/* También resaltar el "checkbox visual" cuando el input tiene foco. */
.wpc-checkbox-item input[type="checkbox"]:focus-visible + label .wpc-check-icon {
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.35);
}

/* El trigger de los tooltips también debe tener foco visible. */
.wpc-tooltip-trigger:focus-visible {
    outline: 2px solid var(--color-content-primary, #667eea);
    outline-offset: 2px;
    border-radius: 50%;
}

/* Añadir al final de calculator.css */

/* === ANIMACIONES DE LA SECCIÓN DE RESULTADOS === */


/* Estado inicial oculto */
.wpc-results-section.hidden {
    opacity: 0;
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-top: none;
}

/* Estado visible */
.wpc-results-section.visible {
    opacity: 1;
    max-height: 1000px;
    padding-top: var(--wpc-spacing-lg);
    padding-bottom: var(--wpc-spacing-lg);
    border-top: 1px solid #e5e7eb;
}

/* Animación suave para los elementos internos */
.wpc-results-section .wpc-price-card {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
}

.wpc-results-section.visible .wpc-price-card {
    transform: translateY(0);
    opacity: 1;
}

/* Llamada de atención visual cuando aparece */
.wpc-results-section.appear {
    animation: highlightSection 1s ease;
}

@keyframes highlightSection {
    0% {
        background: white;
    }

    50% {
        background: #f0f4ff;
    }

    100% {
        background: white;
    }
}


/* === SINCRONIZACIÓN CON OPCIONES DINÁMICAS === */
.wpc-dynamic-options,
.wpc-results-section {
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Cuando las opciones dinámicas son visibles, los resultados también */
.wpc-dynamic-options.visible~.wpc-results-section,
.wpc-results-section.visible {
    animation: slideInUp 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* === MEJORAS VISUALES === */
.wpc-price-breakdown {
    background: #f8f9ff;
    /* Color más suave */
    border: 1px solid #e5e8ff;
    border-radius: var(--wpc-border-radius);
    padding: var(--wpc-spacing-md);
    /* El scroll lo gestiona la lista interna (#breakdown-list); aquí NO debe
       haber overflow para evitar un segundo scrollbar anidado. */
    min-width: 280px;
    text-align: left;
}

/* Asegurar que el breakdown se muestra correctamente */
#price-breakdown {
    display: block !important;
    opacity: 1;
}


/* === CORRECCIÓN PARA SCROLL SUAVE === */
.wpc-calculator-container {
    scroll-behavior: smooth;
}


/* === ESTILOS ADICIONALES PARA GRAVITY FORMS EN MODAL === */

/* Estructura del modal modificada */
.wpc-modal-body {
    padding: 0;
}

.wpc-form-summary {
    background: #f0f4ff;
    border-radius: var(--wpc-border-radius-small);
    padding: var(--wpc-spacing-sm);
    margin: var(--wpc-spacing-lg);
    margin-bottom: 0;
    border: 1px solid #e5e8ff;
}

.wpc-form-summary h4 {
    margin: 0 0 12px 0;
    color: var(--color-content-heading);
    font-size: 1.1rem;
    font-family: var(--h1-font-family, inherit);
}

.wpc-form-summary p {
    margin: 6px 0;
    font-size: 0.9rem;
    color: var(--color-content-text);
    line-height: 1.4;
}

.wpc-form-summary strong {
    color: var(--color-content-heading);
    font-weight: 600;
}

/* Container del Gravity Form */
#gravity-form-container {
    padding: var(--wpc-spacing-lg);
    padding-top: var(--wpc-spacing-sm);
}

/* Resetear estilos por defecto de Gravity Forms */
#gravity-form-container .gform_wrapper {
    margin: 0 !important;
    max-width: none !important;
}

#gravity-form-container .gform_body {
    margin: 0 !important;
}

#gravity-form-container .gform_fields {
    margin: 0 !important;
    padding: 0 !important;
}

#gravity-form-container .gfield {

    padding: 0 !important;
    clear: both;
}

/* Labels */
#gravity-form-container .gfield_label {
    font-weight: 600 !important;
    color: var(--color-content-heading) !important;
    font-family: var(--h1-font-family, inherit) !important;
    margin-bottom: 8px !important;
    font-size: 1rem !important;
    line-height: 1.3;
    display: block;
}

#gravity-form-container .gfield_required {
    color: #ef4444 !important;
}

/* Inputs y textareas */
#gravity-form-container input[type="text"],
#gravity-form-container input[type="email"],
#gravity-form-container input[type="tel"],
#gravity-form-container input[type="url"],
#gravity-form-container input[type="number"],
#gravity-form-container textarea,
#gravity-form-container select {
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px 16px !important;
    border-radius: var(--wpc-border-radius-small) !important;
    font-size: 1rem !important;
    transition: border-color 0.3s ease !important;
    box-sizing: border-box !important;
    line-height: 1.4 !important;
}

#gravity-form-container input[type="text"]:focus,
#gravity-form-container input[type="email"]:focus,
#gravity-form-container input[type="tel"]:focus,
#gravity-form-container input[type="url"]:focus,
#gravity-form-container input[type="number"]:focus,
#gravity-form-container textarea:focus,
#gravity-form-container select:focus {
    outline: none !important;
    border-color: var(--color-content-primary) !important;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
}

#gravity-form-container textarea {
    resize: vertical !important;
    min-height: 100px !important;
}

/* Botón de envío */
#gravity-form-container .gform_footer {
    margin: var(--wpc-spacing-md) 0 0 0 !important;
    padding: 0 !important;
}

#gravity-form-container .gform_button,
#gravity-form-container input[type="submit"] {
    background: linear-gradient(135deg, var(--color-content-primary), var(--color-content-secondary)) !important;
    color: white !important;
    border: none !important;
    border-radius: var(--wpc-border-radius) !important;
    padding: var(--wpc-spacing-sm) var(--wpc-spacing-lg) !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: var(--wpc-transition) !important;
    box-shadow: var(--wpc-shadow-small) !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 180px !important;
    font-family: inherit !important;
}

#gravity-form-container .gform_button:hover,
#gravity-form-container input[type="submit"]:hover {
    transform: translateY(-2px) !important;
    box-shadow: var(--wpc-shadow-medium) !important;
    background: var(--color-content-secondary) !important;
}

#gravity-form-container .gform_button:active,
#gravity-form-container input[type="submit"]:active {
    transform: translateY(0) !important;
    box-shadow: var(--wpc-shadow-small) !important;
}

/* Estados de validación */
#gravity-form-container .validation_error {
    border: 2px solid #ef4444 !important;
    background: #fef2f2 !important;
    border-radius: var(--wpc-border-radius-small) !important;
    padding: 12px 16px !important;
    margin-bottom: 16px !important;
    color: #dc2626 !important;
    font-size: 0.9rem !important;
}

#gravity-form-container .gfield_error .gfield_label {
    color: #ef4444 !important;
}

#gravity-form-container .gfield_error input[type="text"],
#gravity-form-container .gfield_error input[type="email"],
#gravity-form-container .gfield_error input[type="tel"],
#gravity-form-container .gfield_error input[type="url"],
#gravity-form-container .gfield_error input[type="number"],
#gravity-form-container .gfield_error textarea,
#gravity-form-container .gfield_error select {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
}

#gravity-form-container .validation_message {
    color: #ef4444 !important;
    font-size: 0.85rem !important;
    margin-top: 4px !important;
    line-height: 1.4 !important;
}

/* Mensaje de confirmación */
#gravity-form-container .gform_confirmation_message {
    background: #f0fdf4 !important;
    border: 2px solid #10b981 !important;
    border-radius: var(--wpc-border-radius-small) !important;
    padding: var(--wpc-spacing-md) !important;
    color: #059669 !important;
    text-align: center !important;
    font-weight: 600 !important;
    margin: var(--wpc-spacing-md) 0 !important;
}

/* Loading state */
#gravity-form-container .gform_ajax_spinner {
    display: inline-block !important;
    width: 20px !important;
    height: 20px !important;
    margin-left: 8px !important;
    border: 2px solid transparent !important;
    border-top: 2px solid white !important;
    border-radius: 50% !important;
    animation: spin 1s linear infinite !important;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Campos ocultos (como el de configuración) */
#gravity-form-container .gfield_visibility_hidden {
    display: none !important;
}

/* Campos de tipo hidden */
#gravity-form-container input[type="hidden"] {
    display: none !important;
}

/* Multi-column support si es necesario */
#gravity-form-container .gfield.gf_left_half,
#gravity-form-container .gfield.gf_right_half {
    width: 48% !important;
    float: left !important;
    margin-right: 4% !important;
}

#gravity-form-container .gfield.gf_right_half {
    margin-right: 0 !important;
}

#gravity-form-container .gform_footer {
    clear: both !important;
}

/* Honeypot (anti-spam) */
#gravity-form-container .gform_validation_container {
    display: none !important;
}

/* Progress bar si existe */
#gravity-form-container .gf_progressbar_wrapper {
    margin-bottom: var(--wpc-spacing-md) !important;
}

#gravity-form-container .gf_progressbar {
    background: #e5e7eb !important;
    border-radius: 10px !important;
    height: 8px !important;
    overflow: hidden !important;
}

#gravity-form-container .gf_progressbar_percentage {
    background: var(--color-content-primary) !important;
    height: 100% !important;
    transition: width 0.3s ease !important;
}

/* Responsive */
@media (max-width: 768px) {

    .wpc-form-summary,
    #gravity-form-container {
        padding: var(--wpc-spacing-md) !important;
    }

    #gravity-form-container .gfield.gf_left_half,
    #gravity-form-container .gfield.gf_right_half {
        width: 100% !important;
        float: none !important;
        margin-right: 0 !important;
    }
}

@media (max-width: 480px) {

    .wpc-form-summary,
    #gravity-form-container {
        padding: var(--wpc-spacing-sm) !important;
    }

    .wpc-form-summary {
        margin: var(--wpc-spacing-sm) !important;
        margin-bottom: 0 !important;
    }

    #gravity-form-container .gform_button,
    #gravity-form-container input[type="submit"] {
        width: 100% !important;
        min-width: auto !important;
    }
}

/* Fix para algunos temas que pueden interferir */
#gravity-form-container * {
    box-sizing: border-box !important;
}

#gravity-form-container .gfield input,
#gravity-form-container .gfield textarea,
#gravity-form-container .gfield select {
    margin: 0 !important;
}

/* Estilos para campos específicos si es necesario */
#gravity-form-container .gfield.field_configuracion {
    /* El campo configuracion estará oculto */
    display: none !important;
}

/* Mejorar la integración visual con el tema */
#gravity-form-container .gform_wrapper .gform_footer input[type="submit"] {
    font-family: var(--h1-font-family, inherit) !important;
}

#gravity-form-container .gfield_label {
    font-family: var(--h1-font-family, inherit) !important;
}

/* NUEVOS ESTILOS PARA OPCIONES ESPECÍFICAS DE ECOMMERCE */
/* Añadir al final del archivo calculator.css */

/* === OPCIONES ESPECÍFICAS DE ECOMMERCE === */

/* Contenedor para opciones específicas de ecommerce */
.wpc-ecommerce-only {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s ease;
    margin-bottom: 0 !important;
}

.wpc-ecommerce-only.visible {
    opacity: 1;
    max-height: 200px;
    margin-bottom: 12px !important;
}

/* Estilos especiales para opciones de ecommerce */
.wpc-ecommerce-only.visible label {
    border: 2px solid #e5f3ff;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    position: relative;
}

.wpc-ecommerce-only.visible label::before {
    content: 'ECOMMERCE';
    position: absolute;
    top: -8px;
    right: 12px;
    background: linear-gradient(135deg, #0ea5e9, #0284c7);
    color: white;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 8px;
    padding-bottom: 0px !important;
    border-radius: 4px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.wpc-ecommerce-only:hover label {
    border-color: #0ea5e9;
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.15);
    background: linear-gradient(135deg, #f0f9ff 0%, #dbeafe 100%);
}

.wpc-ecommerce-only input[type="checkbox"]:checked+label {
    border-color: #0ea5e9;
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
}

.wpc-ecommerce-only input[type="checkbox"]:checked+label .wpc-check-icon {
    background: #0ea5e9;
    border-color: #0ea5e9;
}

.wpc-ecommerce-only .wpc-check-text {
    color: #0c4a6e;
    font-weight: 700;
}

.wpc-ecommerce-only .wpc-check-description {
    color: #075985;
}


.wpc-ecommerce-only .wpc-check-icon {
    border: 2px solid #0ea5e9;
}

.wpc-ecommerce-only .wpc-check-price {
    color: #0ea5e9;
    font-weight: 700;
    font-size: 1rem;
}

/* Separador visual antes de las opciones de ecommerce */
.wpc-ecommerce-separator {
    display: none;
    margin: 24px 0 16px 0;
    padding: 16px 0;
    border-top: 2px solid #e0f2fe;
    position: relative;
}

.wpc-ecommerce-separator.visible {
    display: block;
}

.wpc-ecommerce-separator::before {
    content: 'Funcionalidades para Tienda Online';
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: white;
    color: #0c4a6e;
    font-weight: 700;
    font-size: 0.9rem;
    padding: 0 16px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Elementos del breakdown específicos para ecommerce */
.breakdown-item--ecommerce-special {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border: 2px solid #bae6fd;
    border-radius: 8px;
    padding: 12px 16px;
    margin: 4px -8px;
    font-weight: 600;
}

.breakdown-item--ecommerce-special .breakdown-icon {
    background: #0ea5e9;
    color: white;
    border: 2px solid #0284c7;
    animation: pulse-ecommerce 2s infinite;
}

.breakdown-item--ecommerce-special .breakdown-text {
    color: #0c4a6e;
    font-weight: 700;
}

.breakdown-item--ecommerce-special:hover {
    background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
    transform: translateX(4px);
    border-color: #0ea5e9;
    margin: 4px -8px;
    padding: 12px 16px;
}

/* Barra lateral para elementos específicos de ecommerce */
.breakdown-item--ecommerce-special::before {
    background: #0ea5e9;
}

/* Animación específica para elementos de ecommerce */
@keyframes pulse-ecommerce {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 2px 4px rgba(14, 165, 233, 0.3);
    }

    50% {
        transform: scale(1.05);
        box-shadow: 0 4px 8px rgba(14, 165, 233, 0.4);
    }
}

/* Responsive específico para opciones de ecommerce */
@media (max-width: 768px) {
    .wpc-ecommerce-only.visible label::before {
        font-size: 0.65rem;
        padding: 1px 6px;
        right: 8px;
        top: -6px;
    }

    .wpc-ecommerce-separator::before {
        font-size: 0.8rem;
        padding: 0 12px;
    }

    .breakdown-item--ecommerce-special {
        padding: 10px 12px;
        margin: 4px -6px;
    }

    .breakdown-item--ecommerce-special:hover {
        margin: 4px -6px;
        padding: 10px 12px;
    }
}

@media (max-width: 480px) {
    .wpc-ecommerce-only.visible label::before {
        display: none;
    }

    .wpc-ecommerce-only .wpc-check-price {
        font-size: 0.9rem;
    }

    .wpc-ecommerce-separator::before {
        font-size: 0.75rem;
        padding: 0 8px;
        text-align: center;
        max-width: 90%;
        left: 50%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .breakdown-item--ecommerce-special {
        padding: 8px 10px;
        margin: 4px -4px;
    }

    .breakdown-item--ecommerce-special:hover {
        margin: 4px -4px;
        padding: 8px 10px;
    }
}

/* === RESUMEN EXPLICATIVO === */
.wpc-form-explanation {
    margin-bottom: 16px;
    padding: 0 0 0 12px;
    background-color: transparent;
    border-left: 3px solid var(--color-content-primary, #667eea);
    border-radius: 0;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--color-content-text, #34495e);
}

.wpc-form-explanation strong {
    color: var(--color-content-heading, #2c3e50);
    font-weight: 600;
}

/* === BARRA DE PRECIO FLOTANTE (INFERIOR, ANCHO COMPLETO) ===
   Formato único en todos los tamaños (patrón de checkout): franja fija abajo,
   no tapa contenido, muy clicable. Precio a la izquierda, CTA a la derecha. */
.wpc-price-fab {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    z-index: 10000;
    /* Reset de apariencia de <button>. El padding lateral lo gestiona el
       contenedor interno (.l-section-h); aquí solo el vertical. */
    display: block;
    margin: 0;
    padding: 14px 0;
    /* Respeta el notch/barra de gestos en iOS */
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    border: none;
    border-radius: 0;
    font-family: inherit;
    cursor: pointer;
    color: #ffffff;
    /* Degradado del tema con un pelín de transparencia; el blur deja
       entrever el contenido al hacer scroll sin perder legibilidad. */
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--color-content-primary, #667eea) 90%, transparent) 0%,
        color-mix(in srgb, var(--color-content-secondary, #764ba2) 90%, transparent) 100%);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.18);
    /* Animación de entrada deslizando desde abajo */
    transform: translateY(100%);
    transition: transform var(--wpc-transition), box-shadow var(--wpc-transition), filter var(--wpc-transition);
}

.wpc-price-fab.is-visible {
    transform: translateY(0);
}

/* (2) Cuando la sección "Solicitar presupuesto" está en pantalla, la barra ya
   no aporta nada: la deslizamos fuera. Prevalece sobre .is-visible. */
.wpc-price-fab.is-visible.wpc-fab-hidden-by-actions {
    transform: translateY(100%);
}

/* Con el modal de presupuesto abierto la barra es redundante (el modal ya
   muestra precio y CTA) y puede tapar contenido: la ocultamos. */
body.modal-open .wpc-price-fab.is-visible {
    transform: translateY(100%);
}

/* Contenedor interno centrado (mismo ancho que .l-section-h del tema).
   Mantiene el precio a la izquierda y el CTA a la derecha. El padding lateral
   garantiza separación de los bordes si el tema no lo aporta en móvil. */
.wpc-price-fab-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--wpc-spacing-sm);
    padding-left: var(--wpc-spacing-md);
    padding-right: var(--wpc-spacing-md);
}

.wpc-price-fab:active {
    filter: brightness(0.95);
}

/* Bloque del precio: importe + badge de extras, apilados verticalmente. */
.wpc-price-fab-price {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.15;
    min-width: 0;
}

.wpc-price-fab-value {
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.2;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* (4) Contador de extras seleccionados. */
.wpc-price-fab-extras {
    font-size: 0.72rem;
    font-weight: 600;
    opacity: 0.85;
    letter-spacing: 0.02em;
}
.wpc-price-fab-extras[hidden] {
    display: none;
}

/* (1) Pulse breve cuando el precio cambia. */
@keyframes wpc-price-pulse {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.12); }
    100% { transform: scale(1); }
}
.wpc-price-pulse {
    display: inline-block;
    animation: wpc-price-pulse 0.4s ease-out;
    transform-origin: left center;
}

.wpc-price-fab-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    padding: 8px 16px;
    border-radius: var(--wpc-border-radius-large);
    background: rgba(255, 255, 255, 0.18);
}

.wpc-price-fab-cta-text {
    font-size: 0.95rem;
    font-weight: 600;
}

.wpc-price-fab-arrow {
    flex-shrink: 0;
}

/* Cuando la barra de precio está visible, ocultar el botón flotante del tema
   (.to-top-content / "subir arriba" / "Solicitar Presupuesto") para que no se
   solape con la barra. Se restaura solo al desaparecer la barra. */
body.wpc-price-bar-active .to-top-content {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

/* En móvil reducimos el precio y evitamos que se parta en dos líneas. */
@media (max-width: 600px) {
    .wpc-price-fab-value {
        white-space: nowrap;
        font-size: 1rem;
    }
}

/* En pantallas muy pequeñas, ajustes finos para no apretar el contenido */
@media (max-width: 380px) {
    .wpc-price-fab-inner {
        padding-left: var(--wpc-spacing-sm);
        padding-right: var(--wpc-spacing-sm);
    }
    .wpc-price-fab-value {
        font-size: 0.9rem;
    }
    .wpc-price-fab-cta {
        padding: 7px 12px;
    }
    .wpc-price-fab-cta-text {
        font-size: 0.88rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wpc-price-fab {
        transition: opacity 0.15s linear;
    }
}

/* Resalte breve de la sección de Acciones al llegar desde la barra */
.wpc-actions-highlight {
    animation: wpc-actions-pulse 1.2s ease-out;
    border-radius: var(--wpc-border-radius);
}

@keyframes wpc-actions-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.0); }
    25%  { box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.35); }
    100% { box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.0); }
}

@media (prefers-reduced-motion: reduce) {
    .wpc-actions-highlight,
    .wpc-price-pulse {
        animation: none;
    }
}