/* ============================================================
   CERRAPLUS · Presupuestos — v2
   Diseño integrado: HEREDA tipografía y colores del sitio.
   - Sin fuentes propias: usa la fuente de tu tema/Elementor.
   - Colores: lee las variables globales de Elementor; el naranja
     de marca queda como base (ajustable con acento="" en el shortcode).
   - Fondo transparente: deja ver el fondo de tu página.
   Todo va scopeado bajo #cp-presupuesto: no afecta al tema.
   ============================================================ */

#cp-presupuesto {
    /* —— ACENTO DE MARCA (cámbialo con [cerraplus_presupuesto acento="#xxxxxx"]) —— */
    --cp-accent:       var(--cp-acento, #ED1675);
    --cp-accent-dark:  #c00f5e;
    --cp-accent-soft:  color-mix(in srgb, var(--cp-accent) 10%, #ffffff);
    --cp-accent-glow:  color-mix(in srgb, var(--cp-accent) 14%, transparent);

    /* —— NEUTROS: heredan de Elementor si existen, si no neutros seguros —— */
    --cp-heading: var(--e-global-color-primary, #222222);
    --cp-text:    var(--e-global-color-text, #4a4a4a);
    --cp-dark:    var(--e-global-color-secondary, #2a2a2a);
    --cp-muted:   #8c8c8c;
    --cp-border:  #e7e7e7;
    --cp-card:    #ffffff;

    /* —— TIPOGRAFÍA: hereda la del sitio —— */
    --cp-font:      inherit;
    --cp-font-head: var(--e-global-typography-primary-font-family, inherit);

    --cp-radius: 12px;
    --cp-shadow: 0 1px 3px rgba(0,0,0,.05), 0 10px 30px rgba(0,0,0,.06);
    --cp-shadow-sm: 0 1px 2px rgba(0,0,0,.06);
    --cp-transition: .2s ease;

    font-family: var(--cp-font);
    color: var(--cp-text);
    line-height: 1.6;
    background: transparent;
}
#cp-presupuesto *, #cp-presupuesto *::before, #cp-presupuesto *::after { box-sizing: border-box; }
#cp-presupuesto h1, #cp-presupuesto h2, #cp-presupuesto h3, #cp-presupuesto p { margin: 0; }

/* ── CABECERA (ligera, integrada) ── */
#cp-presupuesto .cp-hero { text-align: center; padding: 8px 16px 28px; }
#cp-presupuesto .cp-hero h1 {
    font-family: var(--cp-font-head);
    font-size: clamp(1.6rem, 4.5vw, 2.4rem);
    font-weight: 700;
    color: var(--cp-heading);
    line-height: 1.18;
    letter-spacing: -.01em;
    margin-bottom: 10px;
}
#cp-presupuesto .cp-hero h1 em { font-style: normal; color: var(--cp-accent); }
#cp-presupuesto .cp-hero h1::after {
    content: ''; display: block; width: 56px; height: 3px; border-radius: 3px;
    background: var(--cp-accent); margin: 14px auto 0;
}
#cp-presupuesto .cp-hero p { color: var(--cp-muted); font-size: 1rem; max-width: 480px; margin: 12px auto 0; }
#cp-presupuesto .cp-trust-bar { display: flex; justify-content: center; gap: 22px; margin-top: 18px; flex-wrap: wrap; }
#cp-presupuesto .cp-trust-item { display: flex; align-items: center; gap: 7px; color: var(--cp-text); font-size: .82rem; font-weight: 600; }
#cp-presupuesto .cp-trust-item svg { width: 16px; height: 16px; color: var(--cp-accent); }

/* ── WRAPPER ── */
#cp-presupuesto .cp-wrapper { max-width: 820px; margin: 0 auto; padding: 0 16px 40px; }

/* ── STEPPER ── */
#cp-presupuesto .cp-stepper { display: flex; justify-content: center; align-items: center; margin: 4px auto 28px; max-width: 440px; }
#cp-presupuesto .cp-step { display: flex; flex-direction: column; align-items: center; gap: 5px; flex: 1; }
#cp-presupuesto .cp-step-num { width: 34px; height: 34px; border-radius: 50%; background: var(--cp-card); border: 2px solid var(--cp-border); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .82rem; color: var(--cp-muted); box-shadow: var(--cp-shadow-sm); transition: var(--cp-transition); }
#cp-presupuesto .cp-step.active .cp-step-num { background: var(--cp-accent); border-color: var(--cp-accent); color: #fff; }
#cp-presupuesto .cp-step.done .cp-step-num { background: var(--cp-dark); border-color: var(--cp-dark); color: #fff; }
#cp-presupuesto .cp-step-label { font-size: .68rem; font-weight: 700; color: var(--cp-muted); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
#cp-presupuesto .cp-step.active .cp-step-label { color: var(--cp-accent); }
#cp-presupuesto .cp-step.done .cp-step-label { color: var(--cp-dark); }
#cp-presupuesto .cp-step-line { flex: .8; height: 2px; background: var(--cp-border); margin-bottom: 20px; }

/* ── CARD ── */
#cp-presupuesto .cp-card { background: var(--cp-card); border-radius: var(--cp-radius); box-shadow: var(--cp-shadow); padding: 26px; margin-bottom: 16px; border: 1px solid var(--cp-border); }
#cp-presupuesto .cp-card-title { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--cp-accent); margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
#cp-presupuesto .cp-card-title::after { content: ''; flex: 1; height: 1px; background: var(--cp-border); }

/* ── PRODUCT TABS ── */
#cp-presupuesto .cp-product-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
#cp-presupuesto .cp-product-tab { border: 2px solid var(--cp-border); border-radius: 10px; padding: 14px 10px; cursor: pointer; transition: var(--cp-transition); text-align: center; background: transparent; }
#cp-presupuesto .cp-product-tab:hover { border-color: var(--cp-accent); background: var(--cp-accent-glow); }
#cp-presupuesto .cp-product-tab.selected { border-color: var(--cp-accent); background: var(--cp-accent-glow); }
#cp-presupuesto .cp-product-icon { font-size: 1.7rem; margin-bottom: 4px; display: block; }
#cp-presupuesto .cp-product-name { font-size: .82rem; font-weight: 600; color: var(--cp-heading); }
#cp-presupuesto .cp-product-tab.selected .cp-product-name { color: var(--cp-accent); }

/* ── DIMENSIONES ── */
#cp-presupuesto .cp-dims-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
#cp-presupuesto .cp-field-label { display: block; font-size: .76rem; font-weight: 700; color: var(--cp-heading); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 7px; }
#cp-presupuesto .cp-field-hint { font-size: .72rem; color: var(--cp-muted); font-weight: 400; text-transform: none; letter-spacing: 0; }
#cp-presupuesto input[type="number"], #cp-presupuesto select { width: 100%; padding: 12px 14px; border: 1.5px solid var(--cp-border); border-radius: 9px; font-size: 1rem; font-family: var(--cp-font); color: var(--cp-text); background: #fafafa; transition: var(--cp-transition); -moz-appearance: textfield; }
#cp-presupuesto input[type="number"]::-webkit-outer-spin-button, #cp-presupuesto input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; }
#cp-presupuesto input[type="number"]:focus, #cp-presupuesto select:focus { outline: none; border-color: var(--cp-accent); background: #fff; box-shadow: 0 0 0 3px var(--cp-accent-glow); }
#cp-presupuesto select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238c8c8c' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }

/* ── OPTION GRID ── */
#cp-presupuesto .cp-options-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
#cp-presupuesto .cp-option-card { border: 1.5px solid var(--cp-border); border-radius: 10px; padding: 14px 12px; cursor: pointer; transition: var(--cp-transition); text-align: center; background: #fafafa; }
#cp-presupuesto .cp-option-card:hover { border-color: var(--cp-accent); background: var(--cp-accent-glow); }
#cp-presupuesto .cp-option-card.selected { border-color: var(--cp-accent); background: var(--cp-accent-glow); }
#cp-presupuesto .cp-option-card-name { font-size: .84rem; font-weight: 600; color: var(--cp-heading); }
#cp-presupuesto .cp-option-card.selected .cp-option-card-name { color: var(--cp-accent); }
#cp-presupuesto .cp-option-card-sub { font-size: .72rem; color: var(--cp-muted); margin-top: 3px; }

/* ── EXTRAS ── */
#cp-presupuesto .cp-extra-item { display: flex; align-items: center; justify-content: space-between; padding: 13px 0; border-bottom: 1px solid var(--cp-border); }
#cp-presupuesto .cp-extra-item:last-child { border-bottom: none; }
#cp-presupuesto .cp-extra-info { flex: 1; }
#cp-presupuesto .cp-extra-name { font-size: .9rem; font-weight: 500; color: var(--cp-heading); }
#cp-presupuesto .cp-extra-price { font-size: .78rem; color: var(--cp-accent); font-weight: 700; margin-top: 2px; }
#cp-presupuesto .cp-switch { position: relative; display: inline-block; width: 48px; height: 26px; flex-shrink: 0; }
#cp-presupuesto .cp-switch input { opacity: 0; width: 0; height: 0; }
#cp-presupuesto .cp-slider { position: absolute; cursor: pointer; inset: 0; background: #d4d4d4; border-radius: 26px; transition: var(--cp-transition); }
#cp-presupuesto .cp-slider::before { content: ''; position: absolute; width: 20px; height: 20px; left: 3px; bottom: 3px; background: #fff; border-radius: 50%; transition: var(--cp-transition); box-shadow: 0 1px 4px rgba(0,0,0,.15); }
#cp-presupuesto input:checked + .cp-slider { background: var(--cp-accent); }
#cp-presupuesto input:checked + .cp-slider::before { transform: translateX(22px); }

/* ── LIVE PREVIEW ── */
#cp-presupuesto .cp-price-preview { background: var(--cp-dark); border-radius: var(--cp-radius); padding: 24px 26px; color: #fff; margin-bottom: 16px; }
#cp-presupuesto .cp-price-preview-label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: rgba(255,255,255,.55); margin-bottom: 4px; }
#cp-presupuesto .cp-price-preview-amount { font-family: var(--cp-font-head); font-size: 2.4rem; font-weight: 700; color: #fff; line-height: 1; margin-bottom: 2px; }
#cp-presupuesto .cp-price-preview-iva { font-size: .78rem; color: rgba(255,255,255,.5); margin-bottom: 16px; }
#cp-presupuesto .cp-price-preview-lines { border-top: 1px solid rgba(255,255,255,.12); padding-top: 14px; }
#cp-presupuesto .cp-preview-line { display: flex; justify-content: space-between; font-size: .82rem; color: rgba(255,255,255,.7); padding: 4px 0; }
#cp-presupuesto .cp-preview-line.total { color: #fff; font-weight: 700; font-size: .95rem; border-top: 1px solid rgba(255,255,255,.15); padding-top: 10px; margin-top: 6px; }
#cp-presupuesto .cp-preview-line.total span:last-child { color: var(--cp-accent); }

/* ── STICKY BAR ── */
#cp-presupuesto .cp-sticky-bar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 100; background: var(--cp-dark); padding: 10px 20px; display: flex; align-items: center; justify-content: center; gap: 10px; box-shadow: 0 -4px 20px rgba(0,0,0,.2); transition: transform .3s ease, opacity .3s; }
#cp-presupuesto .cp-sticky-bar.hidden { transform: translateY(100%); opacity: 0; pointer-events: none; }
#cp-presupuesto .cp-sticky-bar-label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: rgba(255,255,255,.5); white-space: nowrap; }
#cp-presupuesto .cp-sticky-bar-amount { font-family: var(--cp-font-head); font-size: 1.4rem; font-weight: 700; color: var(--cp-accent); line-height: 1; }
#cp-presupuesto .cp-sticky-bar-iva { font-size: .7rem; color: rgba(255,255,255,.4); white-space: nowrap; }
#cp-presupuesto .cp-sticky-bar-divider { width: 1px; height: 26px; background: rgba(255,255,255,.14); }

/* ── CTA LEAD FORM ── */
#cp-presupuesto .cp-cta-card { background: var(--cp-accent); border-radius: var(--cp-radius); padding: 30px 28px; color: #fff; box-shadow: 0 8px 30px var(--cp-accent-glow); }
#cp-presupuesto .cp-cta-title { font-family: var(--cp-font-head); font-size: 1.45rem; font-weight: 700; margin-bottom: 6px; line-height: 1.2; }
#cp-presupuesto .cp-cta-subtitle { font-size: .9rem; opacity: .9; margin-bottom: 22px; }
#cp-presupuesto .cp-lead-form { display: flex; flex-direction: column; gap: 12px; }
#cp-presupuesto .cp-lead-form input, #cp-presupuesto .cp-lead-form select { background: rgba(255,255,255,.16); border: 1.5px solid rgba(255,255,255,.35); color: #fff; border-radius: 9px; padding: 13px 15px; font-size: .95rem; font-family: var(--cp-font); }
#cp-presupuesto .cp-lead-form input::placeholder { color: rgba(255,255,255,.75); }
#cp-presupuesto .cp-lead-form input:focus, #cp-presupuesto .cp-lead-form select:focus { outline: none; border-color: #fff; background: rgba(255,255,255,.24); box-shadow: none; }
#cp-presupuesto .cp-lead-form select { color: rgba(255,255,255,.92); appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='white' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }
#cp-presupuesto .cp-lead-form select option { color: #333; background: #fff; }
#cp-presupuesto .cp-lead-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#cp-presupuesto .cp-btn-send { width: 100%; padding: 15px; background: #fff; color: var(--cp-accent); border: none; border-radius: 9px; font-size: 1rem; font-weight: 700; cursor: pointer; transition: var(--cp-transition); box-shadow: 0 4px 16px rgba(0,0,0,.12); }
#cp-presupuesto .cp-btn-send:hover { background: #fff6f1; transform: translateY(-1px); }
#cp-presupuesto .cp-btn-send:disabled { opacity: .6; cursor: wait; transform: none; }
#cp-presupuesto .cp-privacy-note { font-size: .72rem; opacity: .8; text-align: center; margin-top: 8px; }

/* ── URGENCY ── */
#cp-presupuesto .cp-urgency { display: flex; align-items: center; gap: 10px; background: var(--cp-accent-soft); border: 1px solid color-mix(in srgb, var(--cp-accent) 30%, #fff); border-radius: 9px; padding: 12px 15px; margin-bottom: 16px; }
#cp-presupuesto .cp-urgency-dot { width: 10px; height: 10px; background: var(--cp-accent); border-radius: 50%; flex-shrink: 0; animation: cpPulse 1.8s ease-in-out infinite; }
@keyframes cpPulse { 0%,100% { box-shadow: 0 0 0 0 var(--cp-accent-glow); } 50% { box-shadow: 0 0 0 6px transparent; } }
#cp-presupuesto .cp-urgency-text { font-size: .82rem; color: var(--cp-accent-dark); font-weight: 500; }

/* ── SUCCESS ── */
#cp-presupuesto .cp-success-state { display: none; text-align: center; padding: 20px 0; }
#cp-presupuesto .cp-success-state.visible { display: block; }
#cp-presupuesto .cp-success-icon { width: 64px; height: 64px; background: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; font-size: 2rem; }
#cp-presupuesto .cp-success-state h3 { font-family: var(--cp-font-head); font-size: 1.35rem; margin-bottom: 8px; color: #fff; }
#cp-presupuesto .cp-success-state p { font-size: .9rem; opacity: .9; }

/* ── CALCULATE BTN ── */
#cp-presupuesto .cp-btn-calculate { width: 100%; padding: 16px; background: var(--cp-dark); color: #fff; border: none; border-radius: 10px; font-size: 1rem; font-weight: 700; cursor: pointer; transition: var(--cp-transition); display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 16px; }
#cp-presupuesto .cp-btn-calculate:hover { filter: brightness(1.15); }

/* ── SOCIAL PROOF ── */
#cp-presupuesto .cp-social-proof { display: flex; align-items: center; gap: 14px; padding: 14px 18px; background: var(--cp-card); border-radius: 10px; border: 1px solid var(--cp-border); margin-bottom: 16px; }
#cp-presupuesto .cp-avatars { display: flex; }
#cp-presupuesto .cp-avatar { width: 34px; height: 34px; border-radius: 50%; border: 2px solid #fff; background: var(--cp-dark); margin-left: -8px; display: flex; align-items: center; justify-content: center; font-size: .72rem; color: #fff; font-weight: 600; }
#cp-presupuesto .cp-avatar:first-child { margin-left: 0; }
#cp-presupuesto .cp-avatar:nth-child(2) { background: var(--cp-accent); }
#cp-presupuesto .cp-avatar:nth-child(3) { background: var(--cp-accent-dark); }
#cp-presupuesto .cp-sp-text { font-size: .8rem; color: var(--cp-muted); }
#cp-presupuesto .cp-sp-text strong { color: var(--cp-heading); }
#cp-presupuesto .cp-stars { color: #f5a623; font-size: .85rem; letter-spacing: 1px; }

/* ── DISCLAIMER ── */
#cp-presupuesto .cp-disclaimer { font-size: .75rem; color: var(--cp-muted); text-align: center; padding: 16px 0 0; }

/* ── MOBILE ── */
@media (max-width: 580px) {
    #cp-presupuesto .cp-product-icon { font-size: 1.4rem; }
    #cp-presupuesto .cp-product-name { font-size: .72rem; }
    #cp-presupuesto .cp-lead-form-row { grid-template-columns: 1fr; }
    #cp-presupuesto .cp-card { padding: 20px; }
    #cp-presupuesto .cp-stepper { max-width: 100%; }
    #cp-presupuesto .cp-trust-bar { gap: 14px; }
}

/* ============================================================
   AJUSTES SOLO EN LA PÁGINA DEL CONFIGURADOR
   (esta hoja de estilos SOLO se carga en la página que tiene
    el shortcode, así que estas reglas no afectan al resto del sitio)
   ============================================================ */
@media (max-width: 600px) {
    /* 1) Ocultar en móvil los botones flotantes que tapan la barra
          de estimación. Cubre los plugins más habituales de
          WhatsApp y de traductor de idioma. Si alguno persiste,
          dime su clase exacta (clic derecho → Inspeccionar) y lo añado. */
    .joinchat, .joinchat__button, #joinchat,
    .ht-ctc, .ht-ctc-chat, [class*="chaty"], #chaty-widget,
    .wp-whatsapp-chat, .whatsapp-chat-widget, .wcp-wrapper,
    .gtranslate_wrapper, #gt_float_wrapper, .gt_float_switcher,
    .gtranslate_switcher, [class*="gt_float"], [id*="gt_float"] {
        display: none !important;
    }

    /* 2) Red de seguridad: aunque algún botón siguiera visible, el
          contenido de la barra de estimación queda centrado y libre
          de las esquinas, para que nunca tape el importe. */
    #cp-presupuesto .cp-sticky-bar {
        padding-left: 60px;
        padding-right: 60px;
        z-index: 99999;
    }
}