/* ==========================================================================
   STARSOFT — Cotización
   ========================================================================== */

.cotizacion-hero {
    padding: var(--section-padding-y-sm) 0 2.5rem;
    background: linear-gradient(180deg, #fbf9f5 0%, var(--starsoft-white) 320px);
}

.cotizacion-page {
    max-width: 900px;
    margin-inline: auto;
}

/* ---- Encabezado ---- */
.cotizacion-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.9rem 0.45rem 0.6rem;
    border-radius: 999px;
    background: rgba(217, 149, 40, 0.1);
    color: var(--starsoft-gold-dark);
    font-size: 0.82rem;
    font-weight: 600;
    margin-bottom: 0.8rem;
}
.cotizacion-badge svg {
    flex-shrink: 0;
}

.cotizacion-heading {
    font-size: clamp(1.6rem, 2.6vw, 2.2rem);
    line-height: 1.15;
    margin-bottom: 0.6rem;
}

.cotizacion-lead {
    max-width: 52ch;
    margin-bottom: 1.4rem;
    font-size: 1.02rem;
}

/* ---- Encabezados de paso ("1. Tus datos ───") ---- */
.cotizacion-step {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0.2rem 0 1rem;
}
.cotizacion-step:not(:first-child) {
    margin-top: 1.4rem;
}
.cotizacion-step__number {
    color: var(--starsoft-gold-dark);
    font-weight: 700;
    font-size: 1.05rem;
}
.cotizacion-step__title {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--starsoft-dark-blue);
    white-space: nowrap;
}
.cotizacion-step__line {
    flex: 1;
    height: 1px;
    background: var(--starsoft-border);
}

/* ---- Formulario ---- */
.cotizacion-form {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.1rem;
}
.form-row--phone-email {
    grid-template-columns: 0.75fr 1.25fr;
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
.form-field label,
.form-field__label-icon {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--starsoft-dark-blue);
}
.form-field label svg,
.form-field__label-icon svg {
    color: var(--starsoft-gold-dark);
    flex-shrink: 0;
}
.form-field label [aria-hidden="true"] {
    color: var(--starsoft-red);
}
.form-field__hint {
    font-size: 0.85rem;
    color: var(--starsoft-gray);
    margin-top: -0.25rem;
}
.form-field__hint--ruc:empty {
    display: none;
}
.form-field__hint--ruc.is-success {
    color: var(--starsoft-green);
}
.form-field__hint--ruc.is-error {
    color: var(--starsoft-red);
}

.cotizacion-form input[type="text"],
.cotizacion-form input[type="email"],
.cotizacion-form input[type="tel"],
.cotizacion-form select {
    width: 100%;
    border: 1.5px solid var(--starsoft-border);
    border-radius: var(--radius-sm);
    background: var(--starsoft-white);
    padding: 0.75rem 0.9rem;
    font-family: var(--font-sans);
    font-size: 0.96rem;
    color: var(--starsoft-text);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.cotizacion-form input::placeholder {
    color: #9a9a9a;
}
.cotizacion-form input:focus,
.cotizacion-form select:focus {
    outline: none;
    border-color: var(--starsoft-gold);
    box-shadow: 0 0 0 4px rgba(217, 149, 40, 0.14);
}

.input-icon {
    position: relative;
    display: flex;
    align-items: center;
}
.input-icon svg {
    position: absolute;
    left: 0.85rem;
    color: var(--starsoft-gray);
    pointer-events: none;
}
.input-icon input {
    padding-left: 2.5rem !important;
}
.input-icon .ruc-check {
    position: absolute;
    left: auto;
    right: 0.85rem;
    color: var(--starsoft-green);
    pointer-events: none;
    display: none;
}
.input-icon .ruc-check.is-visible {
    display: block;
}
#f-ruc {
    padding-right: 2.4rem !important;
}

/* ---- Teléfono ---- */
.phone-field {
    position: relative;
    display: flex;
    align-items: stretch;
    border: 1.5px solid var(--starsoft-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--starsoft-white);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.phone-field:focus-within {
    border-color: var(--starsoft-gold);
    box-shadow: 0 0 0 4px rgba(217, 149, 40, 0.14);
}
.phone-field__prefix {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0 0.9rem;
    background: var(--starsoft-light-gray);
    color: var(--starsoft-text);
    font-weight: 600;
    font-size: 0.92rem;
    border-right: 1.5px solid var(--starsoft-border);
    white-space: nowrap;
}
.phone-field__country {
    color: var(--starsoft-gold-dark);
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.03em;
}
.phone-field__input {
    flex: 1;
}
.phone-field__input input {
    border: none !important;
    border-radius: 0 !important;
    width: 100%;
}
.phone-field__input input:focus {
    box-shadow: none !important;
}

/* ---- Select con ícono: ¿Qué solución te interesa? ---- */
.select-field {
    position: relative;
    display: flex;
    align-items: center;
}
.select-field select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-left: 0.9rem !important;
    padding-right: 2.6rem !important;
    border-color: var(--starsoft-gold) !important;
    background: rgba(217, 149, 40, 0.06);
}
.select-field select option {
    color: var(--starsoft-text, #1c1c1c);
    background: var(--starsoft-white);
}
.select-field select option:checked,
.select-field select option:hover,
.select-field select option:focus,
.select-field select option:active {
    background: var(--starsoft-gold) !important;
    color: var(--starsoft-white) !important;
}
.select-field__chevron {
    position: absolute;
    right: 0.9rem;
    color: var(--starsoft-gold-dark);
    pointer-events: none;
    transition: transform var(--transition-fast);
}
.select-field.is-open .select-field__chevron {
    transform: rotate(180deg);
}

/* Botón + lista propios (el navegador no permite pintar de dorado el hover
   de las <option> nativas de forma consistente, así que reemplazamos el
   desplegable por uno propio con la misma línea gráfica del select). */
.select-field__toggle {
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    border: 1.5px solid var(--starsoft-border);
    border-radius: var(--radius-sm);
    background: rgba(217, 149, 40, 0.06);
    border-color: var(--starsoft-gold);
    padding: 0.75rem 2.6rem 0.75rem 0.9rem;
    font-family: var(--font-sans);
    font-size: 0.96rem;
    color: var(--starsoft-text);
    text-align: left;
    cursor: pointer;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.select-field__toggle.is-placeholder {
    color: #9a9a9a;
}
.select-field__toggle:focus,
.select-field.is-open .select-field__toggle {
    outline: none;
    border-color: var(--starsoft-gold);
    box-shadow: 0 0 0 4px rgba(217, 149, 40, 0.14);
}
.select-field__panel {
    position: absolute;
    top: calc(100% + 0.4rem);
    left: 0;
    right: 0;
    z-index: 20;
    margin: 0;
    padding: 0.4rem;
    list-style: none;
    background: var(--starsoft-white);
    border: 1.5px solid var(--starsoft-border);
    border-radius: var(--radius-sm);
    box-shadow: 0 12px 28px rgba(8, 8, 46, 0.12);
    max-height: 16rem;
    overflow-y: auto;
}
.select-field__option {
    padding: 0.65rem 0.8rem;
    border-radius: calc(var(--radius-sm) - 4px);
    font-size: 0.96rem;
    font-weight: 500;
    color: var(--starsoft-text);
    cursor: pointer;
}
/* Marca la opción ya elegida (al reabrir el menú) con un tono suave, sin
   competir con el dorado sólido del hover/foco: así nunca se ven dos
   opciones "iluminadas" a la vez. */
.select-field__option.is-active {
    background: rgba(217, 149, 40, 0.12);
    color: var(--starsoft-gold-dark);
    font-weight: 700;
}
.select-field__option:hover,
.select-field__option:focus {
    outline: none;
    background: var(--starsoft-gold);
    color: var(--starsoft-white);
}

/* ---- Módulos: licencias por número, según la solución elegida ---- */
.licencias-panel {
    margin-top: 0.9rem;
}
.licencias-panel__title {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--starsoft-dark-blue);
    margin: 0 0 0.7rem;
}
.licencias-panel__title:not(:first-child) {
    margin-top: 1.3rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--starsoft-border);
}
.licencias-panel__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 1.5rem;
}
.licencias-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--starsoft-border);
    cursor: default;
}
.licencias-row span {
    font-size: 0.9rem;
    color: var(--starsoft-text);
}
.licencias-row input {
    width: 6rem;
    flex-shrink: 0;
    border: 1.5px solid var(--starsoft-border);
    border-radius: var(--radius-sm);
    background: var(--starsoft-white);
    padding: 0.5rem 0.7rem;
    font-family: var(--font-sans);
    font-size: 0.92rem;
    color: var(--starsoft-text);
    text-align: center;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    appearance: textfield;
    -moz-appearance: textfield;
}
.licencias-row input[type="number"]::-webkit-outer-spin-button,
.licencias-row input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.licencias-row--text input {
    width: 100%;
    max-width: 16rem;
    text-align: left;
}
.licencias-row input:focus {
    outline: none;
    border-color: var(--starsoft-gold);
    box-shadow: 0 0 0 4px rgba(217, 149, 40, 0.14);
}

/* ---- Consentimiento ---- */
.consent-check {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    font-size: 0.86rem;
    color: var(--starsoft-gray);
    cursor: pointer;
}
.consent-check input {
    margin-top: 0.2rem;
    width: 1.05rem;
    height: 1.05rem;
    accent-color: var(--starsoft-blue);
    flex-shrink: 0;
}
.consent-check a {
    color: var(--starsoft-blue);
    text-decoration: underline;
}

/* ---- Envío ---- */
.cotizacion-submit {
    width: 100%;
    padding: 1rem;
    font-size: 1rem;
    font-weight: 600;
}
.cotizacion-submit svg {
    transition: transform var(--transition-fast);
}
.cotizacion-submit:hover svg {
    transform: translateX(4px);
}
.cotizacion-submit.is-loading {
    opacity: 0.75;
    pointer-events: none;
}
.cotizacion-submit.is-loading svg {
    animation: cotizacion-spin 0.8s linear infinite;
}
@keyframes cotizacion-spin {
    to {
        transform: rotate(360deg);
    }
}

.cotizacion-security {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    text-align: center;
    font-size: 0.84rem;
    color: var(--starsoft-gray);
}
.cotizacion-security svg {
    flex-shrink: 0;
    color: var(--starsoft-gold-dark);
}
/* .cotizacion-sla es texto simple (sin ícono): no lleva "display: flex" —
   si lo lleva, el navegador trata el texto suelto y el <strong> como items
   de flex independientes y la frase se parte en columnas raras en pantallas
   angostas en vez de fluir como un párrafo centrado normal. */
.cotizacion-sla {
    text-align: center;
    font-size: 0.84rem;
    color: var(--starsoft-gray);
}

.cotizacion-success {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 1.4rem;
    border-radius: var(--radius-md);
    background: rgba(7, 91, 216, 0.06);
    border: 1px solid rgba(7, 91, 216, 0.18);
    animation: cotizacion-pop-in 0.4s ease both;
}
.cotizacion-success__icon {
    flex-shrink: 0;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--starsoft-blue);
    color: var(--starsoft-white);
}
.cotizacion-success h2 {
    font-size: 1.1rem;
    margin-bottom: 0.3rem;
}
.cotizacion-success p {
    font-size: 0.92rem;
}

.cotizacion-error {
    padding: 1.4rem;
    border-radius: var(--radius-md);
    background: rgba(237, 28, 36, 0.06);
    border: 1px solid rgba(237, 28, 36, 0.25);
    animation: cotizacion-pop-in 0.4s ease both;
}
.cotizacion-error p {
    font-size: 0.92rem;
    color: var(--starsoft-red);
}

@keyframes cotizacion-pop-in {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ==========================================================================
   Franja del asesor (debajo del formulario)
   ========================================================================== */
.cotizacion-advisor {
    margin-top: 2.6rem;
    padding: 1.6rem 1.8rem;
    background: var(--starsoft-white);
    border: 1px solid var(--starsoft-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
}
.cotizacion-advisor__main {
    display: flex;
    align-items: center;
    gap: 1.2rem;
}
.cotizacion-advisor__avatar {
    position: relative;
    flex-shrink: 0;
    width: 3.6rem;
    height: 3.6rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--starsoft-gold-gradient);
    color: var(--starsoft-white);
}
.cotizacion-advisor__info {
    flex: 1;
    min-width: 0;
}
.cotizacion-advisor__status {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--starsoft-gray);
    margin-bottom: 0.35rem;
}
.cotizacion-advisor__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #2ecc71;
    animation: cotizacion-status-pulse 2s ease-in-out infinite;
}
@keyframes cotizacion-status-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.55);
    }
    50% {
        box-shadow: 0 0 0 4px rgba(46, 204, 113, 0);
    }
}
.cotizacion-advisor__info h2 {
    font-size: 1.08rem;
    margin-bottom: 0.2rem;
}
.cotizacion-advisor__info p {
    font-size: 0.9rem;
    margin: 0;
}
.cotizacion-advisor__actions {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.cotizacion-advisor__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.65rem 1.1rem;
    border: 1.5px solid var(--starsoft-border);
    border-radius: 8px;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--starsoft-dark-blue);
    white-space: nowrap;
    transition: border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
}
.cotizacion-advisor__btn:hover {
    border-color: var(--starsoft-gold);
    background: rgba(217, 149, 40, 0.06);
    transform: translateY(-1px);
}
.cotizacion-advisor__btn--whatsapp {
    padding: 0.95rem 1.8rem;
    font-size: 1rem;
    border-color: #25D366;
    background: rgba(37, 211, 102, 0.08);
    animation: cotizacion-whatsapp-pulse 2.2s ease-in-out infinite;
}
.cotizacion-advisor__btn--whatsapp:hover {
    border-color: #25D366;
    background: rgba(37, 211, 102, 0.16);
    animation-play-state: paused;
}
@keyframes cotizacion-whatsapp-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.4);
    }
    50% {
        box-shadow: 0 0 0 9px rgba(37, 211, 102, 0);
    }
}
@media (prefers-reduced-motion: reduce) {
    .cotizacion-advisor__btn--whatsapp {
        animation: none;
    }
}

.cotizacion-advisor__trust {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.4rem;
    padding-top: 1.3rem;
    border-top: 1px solid var(--starsoft-border);
}
.cotizacion-advisor__trust-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex: 1;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--starsoft-dark-blue);
}
.cotizacion-advisor__trust-item svg {
    flex-shrink: 0;
    color: var(--starsoft-gold-dark);
}

/* ---- Responsive ---- */
@media (max-width: 767px) {
    .form-row {
        grid-template-columns: 1fr;
    }
    .licencias-panel__grid {
        grid-template-columns: 1fr;
    }
    .cotizacion-advisor__main {
        flex-direction: column;
        text-align: center;
    }
    .cotizacion-advisor__status {
        justify-content: center;
    }
    .cotizacion-advisor__actions {
        width: 100%;
        flex-direction: row;
    }
    .cotizacion-advisor__actions .cotizacion-advisor__btn {
        flex: 1;
    }
    .cotizacion-advisor__trust {
        flex-direction: column;
        gap: 0.8rem;
    }
}

@media (max-width: 480px) {
    .cotizacion-advisor__actions {
        flex-direction: column;
    }
}