<style>
/* SCOPE: #propeler-widget 
    Esto asegura que los estilos no se escapen al resto de HubSpot 
  */


#propeler-widget {
    /* Reset local para que se vea bien sin afectar afuera /
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    color: #1e293b; / slate-800 default */
    box-sizing: border-box;
}


#propeler-widget *,

#propeler-widget ::before,

#propeler-widget ::after {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: #e2e8f0;
    /* slate-200 */
}

/* --- Colores --- */

#propeler-widget .bg-white {
    background-color: #ffffff;
}

#propeler-widget .bg-slate-50 {
    background-color: #f8fafc;
}

#propeler-widget .bg-slate-100 {
    background-color: #f1f5f9;
}

#propeler-widget .bg-slate-200 {
    background-color: #e2e8f0;
}

#propeler-widget .bg-slate-300 {
    background-color: #cbd5e1;
}

#propeler-widget .bg-slate-500 {
    background-color: #64748b;
}

#propeler-widget .bg-indigo-50 {
    background-color: #eef2ff;
}

#propeler-widget .bg-indigo-800 {
    background-color: #3730a3;
}

#propeler-widget .bg-indigo-900 {
    background-color: #312e81;
}

#propeler-widget .bg-emerald-400 {
    color: #34d399;
}

/* Usado como texto en footer */

#propeler-widget .bg-emerald-500 {
    background-color: #10b981;
}

#propeler-widget .bg-emerald-600:hover {
    background-color: #059669;
}

#propeler-widget .text-white {
    color: #ffffff;
}

#propeler-widget .text-slate-500 {
    color: #64748b;
}

#propeler-widget .text-indigo-800 {
    color: #3730a3;
}

#propeler-widget .text-emerald-400 {
    color: #34d399;
}

#propeler-widget .text-propeller-green {
    color: #61bba2;
}


#propeler-widget .border-slate-200 {
    border-width: 1px;
    border-color: #e2e8f0;
}

#propeler-widget .border-slate-300 {
    border-width: 1px;
    border-color: #cbd5e1;
}

#propeler-widget .border-indigo-800 {
    border-color: #3730a3;
}

#propeler-widget .border-dashed {
    border-style: dashed;
}

/* --- Layout & Spacing --- */

#propeler-widget .mx-auto {
    margin-left: auto;
    margin-right: auto;
}

#propeler-widget .block {
    display: block;
}

#propeler-widget .inline-block {
    display: inline-block;
}

#propeler-widget .flex {
    display: flex;
}

#propeler-widget .grid {
    display: grid;
}

#propeler-widget .hidden {
    display: none;
}


#propeler-widget .flex-col {
    flex-direction: column;
}

#propeler-widget .flex-wrap {
    flex-wrap: wrap;
}

#propeler-widget .items-start {
    align-items: flex-start;
}

#propeler-widget .items-center {
    align-items: center;
}

#propeler-widget .justify-between {
    justify-content: space-between;
}

#propeler-widget .justify-end {
    justify-content: flex-end;
}


#propeler-widget .gap-2 {
    gap: 0.5rem;
}

#propeler-widget .gap-3 {
    gap: 0.75rem;
}

#propeler-widget .gap-4 {
    gap: 1rem;
}

#propeler-widget .gap-5 {
    gap: 1.25rem;
}

#propeler-widget .gap-6 {
    gap: 1.5rem;
}

#propeler-widget .space-y-3> :not([hidden])~ :not([hidden]) {
    margin-top: 0.75rem;
    margin-bottom: 0px;
}

#propeler-widget .p-5 {
    padding: 1.25rem;
}

#propeler-widget .p-6 {
    padding: 1.5rem;
}

#propeler-widget .px-2 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

#propeler-widget .px-3 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

#propeler-widget .px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

#propeler-widget .py-1 {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

#propeler-widget .py-3 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

#propeler-widget .py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
}


#propeler-widget .mb-3 {
    margin-bottom: 0.75rem;
}

#propeler-widget .mb-4 {
    margin-bottom: 1rem;
}

#propeler-widget .mb-6 {
    margin-bottom: 1.5rem;
}

#propeler-widget .mt-0\.5 {
    margin-top: 0.125rem;
}

#propeler-widget .mt-2 {
    margin-top: 0.5rem;
}

#propeler-widget .mt-3 {
    margin-top: 0.75rem;
}

#propeler-widget .mt-4 {
    margin-top: 1rem;
}

#propeler-widget .mt-8 {
    margin-top: 2rem;
}

#propeler-widget .w-4 {
    width: 1rem;
}

#propeler-widget .w-full {
    width: 100%;
}

#propeler-widget .h-4 {
    height: 1rem;
}

#propeler-widget .h-full {
    height: 100%;
}

/* --- Typography --- */

#propeler-widget .text-xs {
    font-size: 0.75rem;
    line-height: 1rem;
}

#propeler-widget .text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
}

#propeler-widget .text-base {
    font-size: 1rem;
    line-height: 1.5rem;
}

#propeler-widget .text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
}

#propeler-widget .text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
}

#propeler-widget .text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
}

#propeler-widget .text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
}

#propeler-widget .text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
}


#propeler-widget .font-semibold {
    font-weight: 600;
}

#propeler-widget .font-bold {
    font-weight: 700;
}

#propeler-widget .font-extrabold {
    font-weight: 800;
}

#propeler-widget .text-center {
    text-align: center;
}

#propeler-widget .uppercase {
    text-transform: uppercase;
}

#propeler-widget .tracking-wider {
    letter-spacing: 0.05em;
}

/* --- Components --- */

#propeler-widget .rounded {
    border-radius: 0.25rem;
}

#propeler-widget .rounded-md {
    border-radius: 0.375rem;
}

#propeler-widget .rounded-lg {
    border-radius: 0.5rem;
}

#propeler-widget .rounded-xl {
    border-radius: 0.75rem;
}

#propeler-widget .rounded-full {
    border-radius: 9999px;
}

#propeler-widget .shrink-0 {
    flex-shrink: 0;
}

#propeler-widget .shadow {
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
}

#propeler-widget .opacity-50 {
    opacity: 0.5;
}

#propeler-widget .opacity-60 {
    opacity: 0.6;
}

#propeler-widget .opacity-90 {
    opacity: 0.9;
}

#propeler-widget .opacity-100 {
    opacity: 1;
}


#propeler-widget .cursor-pointer {
    cursor: pointer;
}

#propeler-widget .transition {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

#propeler-widget .hover\:scale-[1.02]:hover {
    transform: scale(1.02);
}

/* --- Inputs & Toggles (Lógica custom para reemplazar 'peer') --- */

#propeler-widget .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

#propeler-widget .appearance-none {
    -webkit-appearance: none;
    appearance: none;
}

#propeler-widget .relative {
    position: relative;
}

#propeler-widget .absolute {
    position: absolute;
}

#propeler-widget .inset-0 {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

/* Lógica del Toggle Switch */

#propeler-widget input[type="checkbox"]:checked~span:nth-of-type(1) {
    opacity: 0.5;
}

/* UF text fade */

#propeler-widget input[type="checkbox"]:checked~span:nth-of-type(2) {
    opacity: 1;
}

/* $ text fade */

#propeler-widget input[data-pricing-target="currencySwitch"]:checked~span.bg-white {
    transform: translateX(28px);
}

/* Switch circle move /

  / Lógica del Toggle IA */

#propeler-widget input[type="checkbox"]:checked+span.bg-slate-300 {
    background-color: #3730a3;
}

/* Background active */

#propeler-widget input[data-pricing-target="iaCheck"]:checked~span:last-child {
    transform: translateX(1.25rem);
}

/* Circle move */

/* Range styling existente preservado */

#propeler-widget .pp-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 28px;
    height: 28px;
    background: #3d4395;
    border-radius: 999px;
    box-shadow: 0 0 0 4px rgba(61, 67, 149, 0.2);
    margin-top: -10px;
}

#propeler-widget .pp-range::-moz-range-thumb {
    width: 28px;
    height: 28px;
    background: #3d4395;
    border: none;
    border-radius: 999px;
}

/* --- Responsive (Mobile vs Desktop) --- */
@media (min-width: 640px) {

    #propeler-widget .sm\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    #propeler-widget .sm\:p-8 {
        padding: 2rem;
    }

    #propeler-widget .sm\:flex-row {
        flex-direction: row;
    }

    #propeler-widget .sm\:w-1\/2 {
        width: 50%;
    }
}

</style>