/* ============================================================
   COTIZADOR MIELICANDOUR — CSS CORREGIDO
   Todos los estilos están contenidos dentro de .cot-wrapper
   para no afectar otros componentes del sitio.
   ============================================================ */

:root {
    --cot-negro:    #0e0e0e;
    --cot-gris:     #f5f5f3;
    --cot-borde:    #e0e0e0;
    --cot-texto:    #1a1a1a;
    --cot-muted:    #666;
    --cot-acento:   #1a1a1a;
    --cot-verde-wa: #25D366;
    --cot-radio:    12px;
}

/* Reset SOLO dentro del cotizador */
.cot-wrapper *,
.cot-wrapper *::before,
.cot-wrapper *::after {
    box-sizing: border-box;
}

/* ── CONTENEDOR PRINCIPAL ── */
.cot-wrapper {
    max-width:   760px;
    margin:      0 auto;
    padding:     40px 24px 80px;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    color:       var(--cot-texto);
}

/* ── PASOS ── */
.cot-wrapper .cot-step        { display: none; }
.cot-wrapper .cot-step.active { display: block; }

.cot-wrapper .cot-step-header { margin-bottom: 28px; }

.cot-wrapper .cot-paso {
    font-size:      11px;
    color:          var(--cot-muted);
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom:  6px;
}

.cot-wrapper .cot-titulo {
    font-size:    26px;
    font-weight:  500;
    margin-bottom: 6px;
}

.cot-wrapper .cot-sub {
    font-size: 14px;
    color:     var(--cot-muted);
}

/* ── PASO 1: TIPOS ── */
.cot-wrapper .cot-tipo-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap:                   14px;
    margin-top:            8px;
}

.cot-wrapper .cot-tipo-card {
    background:    #fff;
    border:        1px solid var(--cot-borde);
    border-radius: var(--cot-radio);
    padding:       24px 20px;
    cursor:        pointer;
    transition:    border-color 0.15s, background 0.15s;
    text-align:    center;
}

.cot-wrapper .cot-tipo-card:hover  { border-color: #aaa; }
.cot-wrapper .cot-tipo-card.activo { border: 2px solid var(--cot-acento); background: #f8f8f8; }

.cot-wrapper .cot-tipo-icon   { font-size: 28px; margin-bottom: 10px; }
.cot-wrapper .cot-tipo-nombre { font-size: 15px; font-weight: 500; margin-bottom: 6px; }
.cot-wrapper .cot-tipo-desc   { font-size: 12px; color: var(--cot-muted); line-height: 1.5; }

/* ── PASO 2: FILTROS ── */
.cot-wrapper .cot-filtros {
    display:       flex;
    gap:           8px;
    flex-wrap:     wrap;
    margin-bottom: 20px;
}

.cot-wrapper .cot-filtro {
    background:    none;
    border:        1px solid var(--cot-borde);
    color:         var(--cot-muted);
    padding:       6px 16px;
    border-radius: 50px;
    cursor:        pointer;
    font-size:     13px;
    transition:    all 0.15s;
    font-family:   inherit;
}

.cot-wrapper .cot-filtro:hover  { border-color: #aaa; color: var(--cot-texto); }
.cot-wrapper .cot-filtro.activo { background: var(--cot-texto); border-color: var(--cot-texto); color: #fff; }

/* ── ITEMS ── */
.cot-wrapper .cot-items {
    display:       flex;
    flex-direction: column;
    gap:           8px;
    margin-bottom: 80px;
}

.cot-wrapper .cot-item {
    background:    #fff;
    border:        1px solid var(--cot-borde);
    border-radius: 10px;
    padding:       14px 16px;
    display:       flex;
    align-items:   center;
    gap:           14px;
    cursor:        pointer;
    transition:    border-color 0.15s;
}

.cot-wrapper .cot-item:hover  { border-color: #aaa; }
.cot-wrapper .cot-item.activo { border: 2px solid var(--cot-texto); }

.cot-wrapper .cot-item-info    { flex: 1; min-width: 0; }
.cot-wrapper .cot-item-nombre  { font-size: 14px; font-weight: 500; }
.cot-wrapper .cot-item-para    { font-size: 12px; color: var(--cot-muted); margin-top: 2px; }
.cot-wrapper .cot-item-precio  { font-size: 14px; font-weight: 500; white-space: nowrap; }
.cot-wrapper .cot-item-mensual { font-size: 10px; color: var(--cot-muted); }

.cot-wrapper .cot-item-check {
    width:           22px;
    height:          22px;
    border:          1.5px solid var(--cot-borde);
    border-radius:   50%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       12px;
    flex-shrink:     0;
    transition:      all 0.15s;
}

.cot-wrapper .cot-item.activo .cot-item-check {
    background:   var(--cot-texto);
    border-color: var(--cot-texto);
    color:        #fff;
}

/* Incluye (desplegable en paquetes) */
.cot-wrapper .cot-item-incluye {
    display:    none;
    padding:    10px 0 4px;
    border-top: 1px solid #f0f0f0;
    margin-top: 8px;
}

.cot-wrapper .cot-item-incluye li {
    font-size:   12px;
    color:       var(--cot-muted);
    padding:     2px 0;
    list-style:  none;
    display:     flex;
    align-items: center;
    gap:         6px;
}

.cot-wrapper .cot-item-incluye li::before {
    content:       '';
    width:         4px;
    height:        4px;
    border-radius: 50%;
    background:    #ccc;
    flex-shrink:   0;
}

.cot-wrapper .cot-item.activo .cot-item-incluye { display: block; }

/* ── RESUMEN MINI FLOTANTE ── */
.cot-resumen-mini {
    position:       fixed;
    bottom:         24px;
    left:           50%;
    transform:      translateX(-50%);
    background:     var(--cot-texto);
    color:          #fff;
    padding:        12px 20px;
    border-radius:  50px;
    display:        flex;
    align-items:    center;
    gap:            16px;
    font-size:      14px;
    font-family:    'Helvetica Neue', Arial, sans-serif;
    z-index:        9999;
    opacity:        0;
    pointer-events: none;
    transition:     opacity 0.2s;
    white-space:    nowrap;
}

.cot-resumen-mini.visible {
    opacity:        1;
    pointer-events: all;
}

/* ── RESUMEN COMPLETO ── */
.cot-wrapper .cot-resumen-completo {
    background:    #f8f8f8;
    border:        1px solid var(--cot-borde);
    border-radius: var(--cot-radio);
    padding:       20px;
    margin-bottom: 24px;
}

.cot-wrapper .cot-res-item {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    padding:         8px 0;
    border-bottom:   1px solid var(--cot-borde);
    font-size:       14px;
}

.cot-wrapper .cot-res-item:last-of-type { border-bottom: none; }
.cot-wrapper .cot-res-item-nombre       { color: var(--cot-texto); }
.cot-wrapper .cot-res-item-precio       { font-weight: 500; white-space: nowrap; }

.cot-wrapper .cot-res-totales {
    padding-top: 12px;
    border-top:  2px solid var(--cot-texto);
    margin-top:  4px;
}

.cot-wrapper .cot-res-subtotal {
    display:         flex;
    justify-content: space-between;
    font-size:       13px;
    color:           var(--cot-muted);
    margin-bottom:   4px;
}

.cot-wrapper .cot-res-total {
    display:         flex;
    justify-content: space-between;
    font-size:       20px;
    font-weight:     500;
}

/* ── FORMULARIO ── */
.cot-wrapper .cot-form       { margin-top: 8px; }
.cot-wrapper .cot-form-titulo { font-size: 16px; font-weight: 500; margin-bottom: 16px; }

.cot-wrapper .cot-form-grid {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   12px;
    margin-bottom:         12px;
}

@media (max-width: 500px) {
    .cot-wrapper .cot-form-grid { grid-template-columns: 1fr; }
}

.cot-wrapper .cot-field {
    display:        flex;
    flex-direction: column;
    gap:            5px;
    margin-bottom:  12px;
}

.cot-wrapper .cot-field label { font-size: 12px; color: var(--cot-muted); }

.cot-wrapper .cot-field input,
.cot-wrapper .cot-field textarea {
    background:    #fff;
    border:        1px solid var(--cot-borde);
    border-radius: 8px;
    padding:       10px 14px;
    font-size:     14px;
    color:         var(--cot-texto);
    outline:       none;
    transition:    border-color 0.15s;
    width:         100%;
    font-family:   inherit;
}

.cot-wrapper .cot-field input:focus,
.cot-wrapper .cot-field textarea:focus { border-color: var(--cot-texto); }

/* ── REUNIÓN ── */
.cot-wrapper .cot-reunion      { margin-bottom: 24px; }
.cot-wrapper .cot-reunion-tipo { display: flex; flex-direction: column; gap: 10px; }

.cot-wrapper .cot-radio {
    display:     flex;
    align-items: center;
    gap:         10px;
    cursor:      pointer;
    font-size:   14px;
}

.cot-wrapper .cot-radio input { width: 16px; height: 16px; cursor: pointer; }

/* ── BOTONES ── */
.cot-wrapper .cot-btns {
    display:   flex;
    gap:       12px;
    margin-top: 24px;
    flex-wrap: wrap;
}

.cot-wrapper .cot-btn-primary {
    background:    var(--cot-texto);
    color:         #fff;
    border:        none;
    padding:       12px 24px;
    border-radius: 8px;
    font-size:     14px;
    font-weight:   500;
    cursor:        pointer;
    transition:    opacity 0.15s;
    font-family:   inherit;
}
.cot-wrapper .cot-btn-primary:hover { opacity: 0.85; }

.cot-wrapper .cot-btn-wa {
    background:      var(--cot-verde-wa);
    color:           #fff;
    border:          none;
    padding:         12px 24px;
    border-radius:   8px;
    font-size:       14px;
    font-weight:     500;
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    gap:             8px;
    transition:      opacity 0.15s;
    text-decoration: none;
    font-family:     inherit;
}
.cot-wrapper .cot-btn-wa:hover { opacity: 0.9; }

.cot-wrapper .cot-btn-email { flex: 1; }

.cot-wrapper .cot-btn-outline {
    background:    none;
    border:        1px solid var(--cot-borde);
    color:         var(--cot-texto);
    padding:       12px 24px;
    border-radius: 8px;
    font-size:     14px;
    cursor:        pointer;
    transition:    border-color 0.15s;
    font-family:   inherit;
}
.cot-wrapper .cot-btn-outline:hover { border-color: #aaa; }

/* ── AVISO ── */
.cot-wrapper .cot-aviso {
    font-size:  13px;
    color:      var(--cot-muted);
    margin-top: 12px;
    text-align: center;
}

/* ── NAVEGACIÓN ── */
.cot-wrapper .cot-nav {
    margin-top:  24px;
    padding-top: 20px;
    border-top:  1px solid var(--cot-borde);
    display:     none;
}
.cot-wrapper .cot-nav.visible { display: block; }

/* ── CONFIRMACIÓN ── */
.cot-wrapper .cot-confirmacion {
    text-align: center;
    padding:    60px 20px;
}

.cot-wrapper .cot-check {
    width:           64px;
    height:          64px;
    border-radius:   50%;
    background:      var(--cot-texto);
    color:           #fff;
    font-size:       28px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    margin:          0 auto 20px;
}

.cot-wrapper .cot-confirmacion h2 { font-size: 24px; font-weight: 500; margin-bottom: 10px; }
.cot-wrapper .cot-confirmacion p  { font-size: 14px; color: var(--cot-muted); margin-bottom: 28px; }

.cot-wrapper .cot-confirm-btns {
    display:         flex;
    gap:             12px;
    justify-content: center;
    flex-wrap:       wrap;
}