/* =====================================================================
   PRESUPUESTADOR CORTINAS DE CRISTAL — Reskin
   Extiende styles.css. Tokens compartidos por variables :root.
   La CARD blanca es la única superficie con sombra permitida en todo el sitio.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Sección wrapper (banda sand-light bajo el hero)
   --------------------------------------------------------------------- */
.pres-embed {
    background: var(--sand-light);
    padding: var(--section-y) 0;
    border-radius: 0;
}

@media (max-width: 767px) {
    .pres-embed { padding: var(--section-y-mobile) 0; }
}

.pres-hero {
    padding: 0 0 64px 0;
}
.pres-hero h1,
.pres-hero h2 {
    font-family: var(--font-sans);
    font-size: clamp(28px, 3.5vw, 38px);
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: var(--ink);
    margin: 0 0 16px 0;
    max-width: 22ch;
}

.pres-hero__subtitle {
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.6;
    color: var(--ink-70);
    margin: 0 0 24px 0;
    max-width: 62ch;
}
.pres-hero__subtitle strong { color: var(--ink); font-weight: 500; }

.pres-hero__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.pres-hero__badges span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--petrol);
    font-family: var(--font-sans);
}
.pres-hero__badges span::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--petrol);
}

/* Página dedicada (/es/presupuesto/) */
.pres-main .pres-hero {
    padding: 64px 0 48px 0;
}

.pres-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
        "card1 card2"
        "result result"
        "lead   lead"
        "success success";
    gap: 32px;
    align-items: start;
}

.pres-container > .pres-card:nth-of-type(1) { grid-area: card1; }
.pres-container > .pres-card:nth-of-type(2) { grid-area: card2; }
.pres-container > .pres-result { grid-area: result; }
.pres-container > .pres-lead { grid-area: lead; }
.pres-container > .pres-success { grid-area: success; }

@media (max-width: 900px) {
    .pres-container {
        grid-template-columns: 1fr;
        grid-template-areas:
            "card1"
            "card2"
            "result"
            "lead"
            "success";
    }
}

/* ---------------------------------------------------------------------
   Card blanca principal (la ÚNICA con sombra permitida en el sitio)
   --------------------------------------------------------------------- */
.pres-card {
    background: var(--pure-white);
    border: var(--border-hair);
    border-radius: var(--radius-card);
    padding: 32px;
    box-shadow:
        0 24px 48px -12px rgba(20, 24, 26, 0.07),
        0 4px 12px -2px rgba(20, 24, 26, 0.03);
}

@media (max-width: 767px) {
    .pres-card { padding: 24px 20px; }
}

/* ---------------------------------------------------------------------
   Campo genérico (label + help + input)
   --------------------------------------------------------------------- */
.pres-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 24px;
}
.pres-field:last-child { margin-bottom: 0; }

.pres-field > label,
.pres-field > .pres-corner__label {
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--ink);
    text-transform: none;
}

.pres-field .req { color: var(--petrol); }

.pres-help {
    font-size: 12px;
    color: var(--ink-55);
    margin: 0 0 6px 0;
    line-height: 1.5;
    max-width: 60ch;
}

.pres-input {
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--ink);
    background: var(--pure-white);
    border: var(--border-hair);
    border-radius: var(--radius-btn);
    padding: 11px 14px;
    transition: border-color 160ms ease;
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
}
.pres-input:focus {
    border-color: var(--petrol);
    border-width: 1.5px;
    outline: none;
    padding: 10.5px 13.5px;
}

.pres-input--sm {
    max-width: 180px;
    font-variant-numeric: tabular-nums;
}

select.pres-input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2314181A' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 8 10 12 14 8'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 40px;
}

.pres-input-with-suffix {
    position: relative;
    display: flex;
    align-items: center;
}
.pres-input-with-suffix .pres-input {
    padding-right: 40px;
    font-variant-numeric: tabular-nums;
}
.pres-input-with-suffix .suffix {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    color: var(--ink-55);
    font-family: var(--font-body);
    pointer-events: none;
    letter-spacing: 0.02em;
}

.pres-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.pres-grid-2 .pres-field { margin-bottom: 0; }

@media (max-width: 599px) {
    .pres-grid-2 { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------
   Selector visual de formas (shape-cards)
   --------------------------------------------------------------------- */
.pres-shapes {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-top: 12px;
}

.shape-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 12px 10px;
    background: var(--pure-white);
    border: var(--border-hair);
    border-radius: var(--radius-btn);
    color: var(--ink);
    transition: border-color 160ms ease, background 160ms ease;
    text-align: left;
    cursor: pointer;
}
.shape-card:hover { border-color: var(--ink); }
.shape-card.active {
    border-color: var(--petrol);
    border-width: 1.5px;
    padding: 11.5px 9.5px;
    background: var(--sand-light);
}

.shape-card__label {
    font-family: var(--font-sans);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-55);
    font-weight: 500;
}
.shape-card.active .shape-card__label { color: var(--petrol); }

.shape-card__viz {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 24px;
}
.shape-card__viz .dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    background: var(--sand-light);
    border: var(--border-hair);
    border-radius: var(--radius-chip);
    font-size: 11px;
    font-weight: 600;
    color: var(--ink);
    font-family: var(--font-sans);
}
.shape-card.active .shape-card__viz .dot {
    background: var(--pure-white);
    border-color: var(--petrol);
    color: var(--petrol);
}
.shape-card__viz .dot.sm { min-width: 18px; height: 18px; font-size: 10px; }
.shape-card__viz .dot.xs { min-width: 16px; height: 16px; font-size: 10px; padding: 0 4px; }

.shape-card__caption {
    font-size: 11px;
    color: var(--ink-55);
    line-height: 1.3;
}
.shape-card.active .shape-card__caption { color: var(--ink); }

@media (max-width: 599px) {
    .pres-shapes { grid-template-columns: repeat(2, 1fr); }
}

/* Pills numéricos alternativos */
.pres-pills {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}

.num-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--pure-white);
    border: var(--border-hair);
    border-radius: var(--radius-btn);
    color: var(--ink);
    font-size: 13px;
    font-weight: 600;
    font-family: var(--font-sans);
    transition: border-color 160ms ease, background 160ms ease;
    cursor: pointer;
}
.num-pill:hover { border-color: var(--ink); }
.num-pill.active {
    background: var(--petrol);
    color: var(--pure-white);
    border-color: var(--petrol);
}

.pres-pills__hint {
    font-size: 12px;
    color: var(--ink-55);
    line-height: 1.4;
}
.pres-pills__hint a {
    color: var(--petrol);
    border-bottom: 1px solid var(--hairline);
}

/* ---------------------------------------------------------------------
   Sides dinámicos y esquinas (renderizados por JS)
   --------------------------------------------------------------------- */
.pres-sides {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 20px 0;
    padding-top: 20px;
    border-top: var(--border-hair);
}

.pres-side {
    margin-bottom: 0;
}

.pres-corner {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px;
    background: var(--sand-light);
    border: var(--border-hair);
    border-radius: var(--radius-btn);
}

.pres-corner__label {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--petrol);
    text-transform: uppercase;
}

/* ---------------------------------------------------------------------
   Checkbox estilizado (estores)
   --------------------------------------------------------------------- */
.pres-check {
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: 12px;
    align-items: start;
    padding: 16px;
    background: var(--sand-light);
    border: var(--border-hair);
    border-radius: var(--radius-btn);
    cursor: pointer;
    margin-bottom: 24px;
}
.pres-check input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--petrol);
    cursor: pointer;
}
.pres-check div { display: flex; flex-direction: column; gap: 4px; }
.pres-check strong {
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
}
.pres-check span {
    font-size: 12px;
    color: var(--ink-70);
    line-height: 1.5;
    max-width: 55ch;
}

/* ---------------------------------------------------------------------
   Botones del presupuestador
   --------------------------------------------------------------------- */
.pres-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    padding: 14px 22px;
    border-radius: var(--radius-btn);
    border: 1px solid transparent;
    transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
    text-decoration: none;
    cursor: pointer;
    letter-spacing: -0.005em;
    width: 100%;
}

.pres-btn--primary {
    background: var(--petrol);
    color: var(--pure-white);
    border-color: var(--petrol);
}
.pres-btn--primary:hover {
    background: var(--petrol-hover);
    border-color: var(--petrol-hover);
    color: var(--pure-white);
}

.pres-btn--cta {
    background: var(--petrol);
    color: var(--pure-white);
    border-color: var(--petrol);
    padding: 16px 24px;
    font-size: 15px;
    font-weight: 600;
}
.pres-btn--cta:hover { background: var(--petrol-hover); color: var(--pure-white); }

.pres-btn--ghost {
    background: transparent;
    color: var(--ink);
    border-color: var(--ink);
}
.pres-btn--ghost:hover {
    background: rgba(201, 187, 168, 0.15);
    color: var(--ink);
}

.pres-btn.loading {
    opacity: 0.6;
    pointer-events: none;
    position: relative;
}
.pres-btn.loading::after {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-left: 10px;
    border: 1.5px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: pres-spin 700ms linear infinite;
}
@keyframes pres-spin {
    to { transform: rotate(360deg); }
}

/* ---------------------------------------------------------------------
   Bloque de resultado
   --------------------------------------------------------------------- */
.pres-result {
    background: var(--pure-white);
    border: var(--border-hair);
    border-radius: var(--radius-card);
    padding: 32px;
    box-shadow:
        0 24px 48px -12px rgba(20, 24, 26, 0.07),
        0 4px 12px -2px rgba(20, 24, 26, 0.03);
}

@media (max-width: 767px) {
    .pres-result { padding: 24px 20px; }
}

.pres-result__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 20px;
    border-bottom: var(--border-hair);
    margin-bottom: 20px;
}

.pres-result__label {
    display: block;
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-55);
    margin-bottom: 6px;
}

.pres-result__range {
    font-family: var(--font-sans);
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--ink);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.pres-result__badge {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    font-size: 12px;
    color: var(--ink-70);
    text-align: right;
}
.pres-result__badge p {
    margin: 0;
    font-size: 11px;
    color: var(--ink-55);
    max-width: 24ch;
}

.pres-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--petrol);
    margin-right: 4px;
    vertical-align: middle;
}

.pres-result__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    padding: 20px 0;
    border-bottom: var(--border-hair);
    margin-bottom: 20px;
}
.pres-result__grid > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.pres-result__grid span {
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-55);
    font-family: var(--font-sans);
    font-weight: 500;
}
.pres-result__grid strong {
    font-family: var(--font-sans);
    font-size: 18px;
    font-weight: 500;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}
.pres-result__grid strong.warn { color: var(--petrol); }

@media (max-width: 767px) {
    .pres-result__grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}

.pres-result__breakdown {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px 0;
    border-bottom: var(--border-hair);
    margin-bottom: 20px;
}
.pres-result__breakdown > div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    font-size: 14px;
    color: var(--ink-70);
}
.pres-result__breakdown strong {
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

/* Financiación */
.pres-financing {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 20px;
    background: var(--sand-light);
    border: var(--border-hair);
    border-radius: var(--radius-btn);
    margin-bottom: 20px;
}
.pres-financing > div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}
.pres-financing span {
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--petrol);
    font-family: var(--font-sans);
    font-weight: 600;
}
.pres-financing strong {
    font-family: var(--font-sans);
    font-size: 22px;
    font-weight: 500;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}
.pres-financing p {
    margin: 4px 0 0 0;
    font-size: 11px;
    color: var(--ink-55);
}

.pres-consent-text {
    font-size: 12px;
    color: var(--ink-55);
    line-height: 1.5;
    margin: 12px 0 0 0;
    text-align: center;
}

/* ---------------------------------------------------------------------
   Formulario de lead
   --------------------------------------------------------------------- */
.pres-lead__card h2 {
    font-family: var(--font-sans);
    font-size: 22px;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin: 0 0 8px 0;
}

.pres-lead__actions {
    display: flex;
    gap: 12px;
    margin-top: 24px;
}
.pres-lead__actions .pres-btn { width: auto; flex: 1; }

.pres-alert {
    padding: 12px 16px;
    border-radius: var(--radius-btn);
    font-size: 13px;
    margin: 12px 0;
    border: var(--border-hair);
    line-height: 1.5;
}
.pres-alert--error {
    background: #fff5f5;
    color: #8a1c1c;
    border-color: #8a1c1c;
}

@media (max-width: 599px) {
    .pres-lead__actions { flex-direction: column-reverse; }
    .pres-lead__actions .pres-btn { width: 100%; }
}

/* ---------------------------------------------------------------------
   Éxito
   --------------------------------------------------------------------- */
.pres-success .pres-card {
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pres-success__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--sand-light);
    color: var(--petrol);
    margin-bottom: 4px;
}
.pres-success__icon svg { width: 24px; height: 24px; }

.pres-success h2 {
    font-family: var(--font-sans);
    font-size: 22px;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin: 0;
}

.pres-success__actions {
    display: flex;
    gap: 12px;
    margin-top: 16px;
    flex-wrap: wrap;
}
.pres-success__actions .pres-btn { width: auto; flex: 1; min-width: 200px; }

/* ---------------------------------------------------------------------
   Página dedicada "Cómo funciona"
   --------------------------------------------------------------------- */
.pres-how {
    padding: 120px 0 0 0;
}

.pres-how h2 {
    font-family: var(--font-sans);
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin: 0 0 48px 0;
}

.pres-how__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border-top: var(--border-hair);
}
.pres-how__grid > div {
    padding: 32px 32px 32px 0;
    border-right: var(--border-hair);
}
.pres-how__grid > div:nth-child(3n) { border-right: none; padding-right: 0; }
.pres-how__grid > div:not(:nth-child(3n+1)) { padding-left: 32px; }

.pres-how__grid .step {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: 40px;
    font-weight: 300;
    color: var(--sand);
    letter-spacing: -0.03em;
    line-height: 1;
    margin-bottom: 16px;
}
.pres-how__grid h3 {
    font-family: var(--font-sans);
    font-size: 17px;
    font-weight: 500;
    color: var(--ink);
    margin: 0 0 8px 0;
}
.pres-how__grid p {
    font-size: 14px;
    color: var(--ink-70);
    line-height: 1.55;
    margin: 0;
    max-width: 48ch;
}

@media (max-width: 900px) {
    .pres-how { padding: 80px 0 0 0; }
    .pres-how__grid { grid-template-columns: 1fr; }
    .pres-how__grid > div {
        padding: 24px 0;
        border-right: none;
        border-bottom: var(--border-hair);
    }
    .pres-how__grid > div:last-child { border-bottom: none; }
}

/* ---------------------------------------------------------------------
   Estilos inline sobreescritos: el JS crea span inline con `color:#94a3b8`
   y `font-family:monospace` en pres-side/dynamicSidesContainer. Los ajustamos
   para coherencia con el sistema sin tocar el JS.
   --------------------------------------------------------------------- */
#dynamicSidesContainer .pres-side span[style] {
    color: var(--ink-55) !important;
    font-family: var(--font-sans) !important;
    font-size: 10px !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
}