/*
 * MiAuto MX – Cotizador de Seguros
 * CSS Mobile-first · Color principal #ff6a00
 */

/* =========================================================
   VARIABLES
========================================================= */
:root {
    --ma-orange     : #ff6a00;
    --ma-orange-d   : #e05a00;
    --ma-orange-l   : #fff3ec;
    --ma-green      : #28a745;
    --ma-green-wa   : #25d366;
    --ma-green-wa-d : #1da851;
    --ma-dark       : #1a1a2e;
    --ma-gray       : #6c757d;
    --ma-light      : #f8f9fa;
    --ma-border     : #dee2e6;
    --ma-white      : #ffffff;
    --ma-shadow     : 0 4px 20px rgba(0,0,0,.10);
    --ma-shadow-lg  : 0 8px 40px rgba(0,0,0,.15);
    --ma-radius     : 12px;
    --ma-font       : -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* =========================================================
   RESET / BASE
========================================================= */
.miauto-wrap *,
.miauto-wrap *::before,
.miauto-wrap *::after {
    box-sizing: border-box;
}

.miauto-wrap {
    font-family : var(--ma-font);
    color       : var(--ma-dark);
    max-width   : 780px;
    margin      : 0 auto;
    padding     : 16px;
}

.miauto-hidden { display: none !important; }

/* =========================================================
   HEADER
========================================================= */
.miauto-header {
    text-align  : center;
    padding     : 32px 16px 24px;
    background  : linear-gradient(135deg, var(--ma-orange) 0%, #ff9500 100%);
    border-radius: var(--ma-radius) var(--ma-radius) 0 0;
    color       : var(--ma-white);
}

.miauto-header-badge {
    display         : inline-block;
    background      : rgba(255,255,255,.25);
    color           : #fff;
    font-size       : .8rem;
    font-weight     : 700;
    padding         : 4px 14px;
    border-radius   : 20px;
    margin-bottom   : 12px;
    letter-spacing  : .5px;
}

.miauto-title {
    font-size   : 1.8rem;
    font-weight : 800;
    margin      : 0 0 8px;
    line-height : 1.2;
}

.miauto-subtitle {
    font-size   : 1rem;
    opacity     : .9;
    margin      : 0 0 6px;
}

.miauto-social-proof {
    font-size   : .85rem;
    opacity     : .85;
    margin      : 0;
}

/* =========================================================
   PROGRESS BAR
========================================================= */
.miauto-progress {
    background  : var(--ma-white);
    padding     : 20px 24px 16px;
    border-left : 1px solid var(--ma-border);
    border-right: 1px solid var(--ma-border);
}

.miauto-progress-steps {
    display         : flex;
    align-items     : center;
    justify-content : center;
    gap             : 0;
    margin-bottom   : 8px;
}

.miauto-step-dot {
    width           : 32px;
    height          : 32px;
    border-radius   : 50%;
    background      : var(--ma-border);
    color           : var(--ma-gray);
    display         : flex;
    align-items     : center;
    justify-content : center;
    font-weight     : 700;
    font-size       : .85rem;
    transition      : all .3s;
    flex-shrink     : 0;
}

.miauto-step-dot.active {
    background  : var(--ma-orange);
    color       : #fff;
    box-shadow  : 0 0 0 4px rgba(255,106,0,.2);
}

.miauto-step-dot.done {
    background  : var(--ma-green);
    color       : #fff;
}

.miauto-step-line {
    flex        : 1;
    height      : 3px;
    background  : var(--ma-border);
    max-width   : 80px;
}

.miauto-progress-labels {
    display         : flex;
    justify-content : space-around;
    font-size       : .75rem;
    color           : var(--ma-gray);
}

/* =========================================================
   FORM PASOS
========================================================= */
.miauto-paso {
    display     : none;
    background  : var(--ma-white);
    padding     : 28px 24px;
    border-left : 1px solid var(--ma-border);
    border-right: 1px solid var(--ma-border);
    border-bottom: 1px solid var(--ma-border);
    border-radius: 0 0 var(--ma-radius) var(--ma-radius);
}

.miauto-paso.active { display: block; }

.miauto-paso-title {
    font-size   : 1.25rem;
    font-weight : 700;
    margin      : 0 0 24px;
    color       : var(--ma-dark);
}

/* Grupos de campo */
.miauto-field-group {
    margin-bottom: 18px;
}

.miauto-label {
    display     : block;
    font-weight : 600;
    font-size   : .9rem;
    margin-bottom: 6px;
    color       : var(--ma-dark);
}

.miauto-required { color: var(--ma-orange); }
.miauto-optional { color: var(--ma-gray); font-weight: 400; font-size: .8rem; }

/* Inputs / Selects */
.miauto-input {
    width         : 100%;
    padding       : 12px 14px;
    border        : 2px solid var(--ma-border);
    border-radius : 8px;
    font-size     : 1rem;
    font-family   : var(--ma-font);
    color         : var(--ma-dark);
    background    : var(--ma-white);
    transition    : border-color .2s, box-shadow .2s;
    appearance    : auto;
}

.miauto-input:focus {
    outline       : none;
    border-color  : var(--ma-orange);
    box-shadow    : 0 0 0 3px rgba(255,106,0,.15);
}

.miauto-input.has-error {
    border-color  : #dc3545;
}

.miauto-input:disabled {
    background    : #f5f5f5;
    cursor        : not-allowed;
    color         : var(--ma-gray);
}

/* Input con prefijo $ */
.miauto-input-prefix-wrap {
    position      : relative;
    display       : flex;
    align-items   : center;
}

.miauto-prefix {
    position      : absolute;
    left          : 14px;
    font-weight   : 600;
    color         : var(--ma-gray);
    font-size     : 1rem;
    pointer-events: none;
}

.miauto-input.with-prefix {
    padding-left  : 28px;
}

.miauto-error {
    display     : block;
    color       : #dc3545;
    font-size   : .8rem;
    margin-top  : 4px;
    min-height  : 18px;
}

.miauto-hint {
    font-size   : .8rem;
    color       : var(--ma-gray);
    margin      : 6px 0 0;
}

.miauto-hint a { color: var(--ma-orange); }

/* =========================================================
   RADIO CARDS
========================================================= */
.miauto-radio-group {
    display         : flex;
    flex-direction  : column;
    gap             : 10px;
}

.miauto-radio-card {
    display         : flex;
    align-items     : flex-start;
    gap             : 12px;
    padding         : 14px 16px;
    border          : 2px solid var(--ma-border);
    border-radius   : 10px;
    cursor          : pointer;
    transition      : border-color .2s, background .2s;
}

.miauto-radio-card:hover {
    border-color    : var(--ma-orange);
    background      : var(--ma-orange-l);
}

.miauto-radio-card input[type="radio"] {
    margin-top      : 3px;
    accent-color    : var(--ma-orange);
    flex-shrink     : 0;
}

.miauto-radio-card input[type="radio"]:checked + .miauto-radio-content {
    color           : var(--ma-orange-d);
}

.miauto-radio-card:has(input:checked) {
    border-color    : var(--ma-orange);
    background      : var(--ma-orange-l);
}

.miauto-radio-content strong {
    display         : block;
    font-size       : .95rem;
}

.miauto-radio-content span {
    font-size       : .82rem;
    color           : var(--ma-gray);
}

/* =========================================================
   BOTONES
========================================================= */
.miauto-btn {
    display         : inline-flex;
    align-items     : center;
    justify-content : center;
    gap             : 6px;
    padding         : 14px 28px;
    border          : none;
    border-radius   : 8px;
    font-size       : 1rem;
    font-weight     : 700;
    cursor          : pointer;
    text-decoration : none;
    transition      : background .2s, transform .1s, box-shadow .2s;
    font-family     : var(--ma-font);
}

.miauto-btn:active { transform: scale(.97); }

/* Primario / siguiente */
.miauto-btn-next,
.miauto-btn-submit {
    background  : var(--ma-orange);
    color       : #fff;
    width       : 100%;
    margin-top  : 8px;
    font-size   : 1.05rem;
    box-shadow  : 0 4px 14px rgba(255,106,0,.35);
}

.miauto-btn-next:hover,
.miauto-btn-submit:hover {
    background  : var(--ma-orange-d);
    box-shadow  : 0 6px 20px rgba(255,106,0,.45);
}

.miauto-btn-submit:disabled {
    opacity         : .7;
    cursor          : not-allowed;
    transform       : none;
}

/* Atrás */
.miauto-btn-back {
    background  : var(--ma-light);
    color       : var(--ma-gray);
    border      : 2px solid var(--ma-border);
}

.miauto-btn-back:hover {
    background  : var(--ma-border);
    color       : var(--ma-dark);
}

/* WhatsApp */
.miauto-btn-wa {
    background  : var(--ma-green-wa);
    color       : #fff;
    width       : 100%;
    margin-bottom: 10px;
    font-size   : 1.05rem;
    box-shadow  : 0 4px 14px rgba(37,211,102,.35);
}

.miauto-btn-wa:hover {
    background  : var(--ma-green-wa-d);
}

.miauto-btn-wa-alt {
    background  : #fff;
    color       : var(--ma-green-wa-d);
    border      : 2px solid var(--ma-green-wa);
}

.miauto-btn-wa-alt:hover {
    background  : #f0fff5;
}

/* Plan individual */
.miauto-btn-plan {
    background  : var(--ma-orange);
    color       : #fff;
    width       : 100%;
    margin-top  : 16px;
    font-size   : .95rem;
}

.miauto-btn-plan:hover { background: var(--ma-orange-d); }

/* Outline */
.miauto-btn-outline {
    background  : transparent;
    color       : var(--ma-orange);
    border      : 2px solid var(--ma-orange);
}

.miauto-btn-outline:hover {
    background  : var(--ma-orange-l);
}

.miauto-btn-row {
    display     : flex;
    gap         : 12px;
    margin-top  : 8px;
}

.miauto-btn-row .miauto-btn-back { width: auto; flex: 0 0 auto; }
.miauto-btn-row .miauto-btn-next { flex: 1; }

/* Privacy */
.miauto-privacy {
    font-size   : .8rem;
    color       : var(--ma-gray);
    text-align  : center;
    margin      : 4px 0 16px;
}

/* =========================================================
   RESULTADOS
========================================================= */
.miauto-results {
    margin-top  : 0;
}

/* Texto amigable */
.miauto-friendly-box {
    background      : var(--ma-orange-l);
    border-left     : 4px solid var(--ma-orange);
    padding         : 20px 24px;
    border-radius   : 0 0 0 0;
    margin-bottom   : 0;
}

.miauto-friendly-main {
    font-size   : 1.1rem;
    font-weight : 600;
    margin      : 0 0 8px;
    white-space : pre-line;
}

.miauto-segmento {
    font-size   : .9rem;
    color       : var(--ma-gray);
    margin      : 4px 0;
    text-transform: capitalize;
}

.miauto-source {
    font-size   : .8rem;
    color       : var(--ma-gray);
    margin      : 4px 0 0;
}

.miauto-social-count {
    font-size   : .85rem;
    font-weight : 700;
    color       : var(--ma-orange-d);
    margin      : 8px 0 0;
}

/* AdSense */
.miauto-adsense {
    padding     : 16px 0;
    text-align  : center;
    overflow    : hidden;
}

/* Planes */
.miauto-plans-title {
    font-size   : 1.4rem;
    font-weight : 800;
    text-align  : center;
    margin      : 28px 0 4px;
}

.miauto-plans-subtitle {
    text-align  : center;
    color       : var(--ma-gray);
    font-size   : .9rem;
    margin      : 0 0 20px;
}

.miauto-plans-grid {
    display     : grid;
    gap         : 16px;
    grid-template-columns: 1fr;
}

/* Plan card */
.miauto-plan-card {
    position        : relative;
    background      : var(--ma-white);
    border          : 2px solid var(--ma-border);
    border-radius   : var(--ma-radius);
    padding         : 24px 20px 20px;
    box-shadow      : var(--ma-shadow);
    transition      : box-shadow .2s, transform .2s;
}

.miauto-plan-card:hover {
    box-shadow  : var(--ma-shadow-lg);
    transform   : translateY(-2px);
}

.miauto-plan-featured {
    border-color    : var(--ma-orange);
    box-shadow      : 0 6px 30px rgba(255,106,0,.2);
}

.miauto-plan-badge {
    position        : absolute;
    top             : -13px;
    left            : 50%;
    transform       : translateX(-50%);
    background      : var(--ma-orange);
    color           : #fff;
    font-size       : .78rem;
    font-weight     : 700;
    padding         : 4px 16px;
    border-radius   : 20px;
    white-space     : nowrap;
}

.miauto-plan-header {
    text-align  : center;
    margin-bottom: 16px;
}

.miauto-plan-icon {
    font-size   : 2rem;
    display     : block;
    margin-bottom: 6px;
}

.miauto-plan-name {
    font-size   : 1.2rem;
    font-weight : 800;
    margin      : 0 0 4px;
}

.miauto-plan-sub {
    font-size   : .85rem;
    color       : var(--ma-gray);
    margin      : 0;
}

.miauto-plan-price {
    text-align  : center;
    margin-bottom: 8px;
}

.miauto-plan-mensual {
    display     : block;
    font-size   : 1.9rem;
    font-weight : 800;
    color       : var(--ma-orange);
    line-height : 1.1;
}

.miauto-plan-anual {
    display     : block;
    font-size   : .85rem;
    color       : var(--ma-gray);
    margin-top  : 2px;
}

.miauto-plan-badge-desde {
    text-align  : center;
    font-size   : .8rem;
    font-weight : 700;
    color       : var(--ma-orange-d);
    background  : var(--ma-orange-l);
    padding     : 4px 12px;
    border-radius: 6px;
    margin-bottom: 16px;
}

.miauto-plan-cobs {
    list-style  : none;
    padding     : 0;
    margin      : 0;
    font-size   : .88rem;
}

.miauto-plan-cobs li {
    padding     : 5px 0;
    border-bottom: 1px solid var(--ma-border);
    display     : flex;
    align-items : flex-start;
    gap         : 6px;
}

.miauto-plan-cobs li::before {
    content     : '✓';
    color       : var(--ma-green);
    font-weight : 700;
    flex-shrink : 0;
}

.miauto-plan-cobs li:last-child { border-bottom: none; }

/* WhatsApp CTA */
.miauto-whatsapp-cta {
    background  : #f0fff5;
    border      : 2px solid var(--ma-green-wa);
    border-radius: var(--ma-radius);
    padding     : 24px 20px;
    text-align  : center;
    margin      : 24px 0;
}

.miauto-wa-label {
    font-size   : 1.05rem;
    font-weight : 600;
    margin      : 0 0 16px;
}

.miauto-wa-note {
    font-size   : .82rem;
    color       : var(--ma-gray);
    margin      : 8px 0 0;
}

/* Aseguradoras */
.miauto-aseguradoras {
    margin      : 28px 0;
}

.miauto-aseguradoras h3 {
    font-size   : 1.1rem;
    font-weight : 700;
    margin      : 0 0 16px;
    text-align  : center;
}

.miauto-aseguradoras-grid {
    display         : flex;
    flex-wrap       : wrap;
    gap             : 10px;
    justify-content : center;
}

.miauto-aseg-card {
    display         : inline-block;
    padding         : 10px 18px;
    border          : 2px solid var(--ma-border);
    border-radius   : 8px;
    font-size       : .88rem;
    font-weight     : 600;
    color           : var(--ma-dark);
    text-decoration : none;
    transition      : border-color .2s, background .2s;
}

.miauto-aseg-card:hover {
    border-color    : var(--ma-orange);
    background      : var(--ma-orange-l);
    color           : var(--ma-orange-d);
}

/* Recotizar */
.miauto-recotizar {
    text-align  : center;
    margin      : 24px 0;
}

/* Alerta de error */
.miauto-alert {
    background  : #fff3cd;
    border      : 1px solid #ffc107;
    border-radius: 8px;
    padding     : 14px 18px;
    margin-top  : 16px;
    font-size   : .9rem;
    color       : #856404;
}

/* =========================================================
   DESKTOP
========================================================= */
@media (min-width: 600px) {
    .miauto-plans-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .miauto-radio-group {
        flex-direction  : row;
    }

    .miauto-radio-card { flex: 1; }

    .miauto-title { font-size: 2.2rem; }
}

@media (min-width: 780px) {
    .miauto-wrap { padding: 0; }
    .miauto-paso { padding: 36px 40px; }
    .miauto-header { padding: 40px 40px 28px; }
    .miauto-progress { padding: 24px 40px 16px; }
}