/* ============================================================
   FUNDAMENTOS
   ============================================================
   Los valores de aquí abajo son el vocabulario de toda la interfaz. Antes cada
   bloque inventaba el suyo: convivían quince tamaños de letra entre 0.6rem y
   1rem, y el 40% del texto quedaba por debajo de 12px —ilegible en el celular
   de un cliente y cansado en la pantalla de un asesor que pasa el día aquí.

   ESCALA TIPOGRÁFICA
   Siete pasos y ninguno por debajo de 12px. Que sean pocos es la gracia: si
   dos textos tienen jerarquía distinta se nota, y si tienen la misma se ven
   iguales de verdad.

   COLOR
   Negro, blancos y grises. El verde NO es decoración: aparece solo donde hay
   un ahorro o algo incluido sin costo, que es el único argumento de venta del
   prepagado. Si el verde se usa para adornar, deja de significar dinero.

   TOQUE
   44px es el mínimo con el que un dedo acierta. Se aplica solo en pantallas
   táctiles: en escritorio con ratón esos mismos controles pueden ser más
   compactos y aprovechar mejor el alto.
   ============================================================ */
:root {
    /* Tipografía: ningún paso por debajo de 12px */
    --txt-micro: 0.75rem;    /* 12px · etiquetas en mayúscula, notas al pie */
    --txt-mini:  0.8125rem;  /* 13px · texto secundario, chips */
    --txt-sm:    0.875rem;   /* 14px · cuerpo pequeño, botones */
    --txt-base:  0.9375rem;  /* 15px · cuerpo */
    --txt-md:    1.125rem;   /* 18px · subtítulos */
    --txt-lg:    1.5rem;     /* 24px · títulos de bloque */
    --txt-xl:    2rem;       /* 32px · cifras protagonistas */

    /* Color */
    --tinta:        #0a0a0a;
    --tinta-media:  #4b5159;
    --tinta-suave:  #6b7280;
    --tinta-tenue:  #9aa1ab;
    --papel:        #ffffff;
    --papel-hueso:  #f7f8fa;
    --fondo:        #f4f5f7;
    --borde:        #e7e9ed;
    --borde-fuerte: #d8dce2;
    --verde:        #00a344;      /* solo ahorro y "incluido" */
    --verde-tenue:  #e6f8ee;
    --rojo:         #d32f2f;

    /* Ritmo vertical y formas */
    --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
    --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
    --radio-sm: 10px;
    --radio:    14px;
    --radio-lg: 20px;

    /* Espaciado de letras para las etiquetas en mayúscula */
    --track: 0.06em;
}

/* ===== RESET Y BASE ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--fondo);
    color: var(--tinta);
    /* Sin esto los pesos finos se ven sucios en Windows, que es donde
       trabajan todos los asesores. */
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* ===== HEADER ===== */
.header {
    background: rgba(0,0,0,0.95);
    backdrop-filter: blur(6px);
    border-bottom: none;
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-content {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 12px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav {
    display: flex;
    gap: 50px;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.nav a {
    position: relative;
    padding: 8px 0;
    color: rgba(255,255,255,0.65);
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.25s ease;
    text-decoration: none;
}

.nav a:hover {
    color: #fff;
}

.nav a.active {
    color: #fff;
    font-weight: 600;
}

.nav-icon {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.6;
    opacity: 0.9;
}

.nav a.active::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 100%;
    height: 2px;
    background: #00C853;
    border-radius: 2px;
}

.brand {
    display: flex;
    align-items: center;
}

.logo-kia {
    height: 32px;
    object-fit: contain;
    display: block;
}

/* ===== SECTIONS ===== */
.section {
    display: none;
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding: 40px 30px;
}

.section.active {
    display: block;
}

/* ===== HERO ===== */
.hero {
    padding: 80px 20px;
    text-align: center;
}

.hero h1 {
    font-size: 2.3rem;
    margin-bottom: 10px;
}

.hero p {
    color: #666;
    margin-bottom: 30px;
}

/* ===== BOTONES ===== */
.btn {
    padding: 12px 20px;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 500;
}

.btn-primary {
    background: #111;
    color: #fff;
}

.btn-primary:hover:not(:disabled) {
    background: #333;
}

.btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.lead-form .btn-primary {
    width: 100%;              /* 🔥 ocupa todo el ancho */
    padding: 14px 16px;       /* 🔥 más alto */
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;                /* 🔥 espacio icono-texto */
    border-radius: 12px;
}

.btn-secondary {
    background: #f0f0f0;
    color: #333;
}

.btn-secondary:hover {
    background: #e0e0e0;
}

/* ===== MEJORAS PARA EL BOTÓN DE PDF ===== */
.btn-loader {
    width: 18px;
    height: 18px;
    border: 2px solid currentColor;
    border-top: 2px solid transparent;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    display: inline-block;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.btn.loading {
    opacity: 0.85;
    cursor: wait;
    pointer-events: none;
    transform: scale(0.99);
}

.btn.loading .btn-text {
    opacity: 0.7;
}

.btn.loading .btn-icon {
    opacity: 0.7;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ===== STEPS ===== */
.step {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.step-number {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #000;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

.step-number.active {
    background: #00c853;
}

.step-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: #333;
}

/* ===== LAYOUT PRINCIPAL COTIZADOR ===== */
.container {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 25px;
    align-items: start;
}

.panel {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 20px;
    padding: 25px;
    position: sticky;
    top: 90px;
}

.resultado {
    background: transparent;
    border: none;
    padding: 0;
}

/* ===== TITULOS ===== */
h3 {
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 12px;
    color: #444;
}

/* ===== INPUTS & SELECTS ===== */
select, input {
    width: 100%;
    margin-bottom: 12px;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid #ddd;
    background: #fff;
    font-size: 0.9rem;
}

select:focus, input:focus {
    outline: none;
    border-color: #000;
}

/* ===== CICLOS (la escalera de kilometrajes) =====
   Son veinte casillas y casi siempre solo una o dos se pueden pulsar. Antes
   las deshabilitadas eran botones idénticos al 40% de opacidad: media pantalla
   de cajas grises que parecían rotas y competían por la atención con las dos
   que sí importaban.

   Ahora se leen como una escalera. La deshabilitada pierde el borde y el
   fondo: deja de ser un botón y pasa a ser el camino que viene. La disponible
   es la única con borde marcado. La elegida es negra. Así, de un vistazo, el
   asesor ve dónde está y qué puede añadir. */
.ciclos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-bottom: var(--sp-5);
}

.ciclo-btn {
    padding: 11px 6px;
    border-radius: var(--radio-sm);
    border: 1px solid var(--borde-fuerte);
    background: var(--papel);
    color: var(--tinta);
    cursor: pointer;
    font-family: inherit;
    font-size: var(--txt-mini);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1.25;
    transition: border-color .18s ease, background .18s ease, color .18s ease;
}

.ciclo-btn:hover:not(:disabled):not(.active) {
    border-color: var(--tinta);
    background: var(--papel-hueso);
}

.ciclo-btn.active {
    background: var(--tinta);
    color: var(--papel);
    border-color: var(--tinta);
}

/* El camino que todavía no se puede tomar: presente, pero callado. */
.ciclo-btn:disabled {
    opacity: 1;
    border-color: transparent;
    background: transparent;
    color: var(--tinta-tenue);
    font-weight: 500;
    cursor: default;
}

/* La siguiente casilla disponible se insinúa, para que se vea que el plan
   puede seguir creciendo: es la palanca que sube el ahorro del 20% al 30%. */
.ciclo-btn:not(:disabled):not(.active) {
    border-color: var(--borde-fuerte);
    box-shadow: inset 0 0 0 1px transparent;
}

/* ===== ESTADOS VACÍOS ===== */
.empty-state {
    text-align: center;
    padding: 60px 20px;
    background: #fff;
    border-radius: 20px;
    border: 1px solid #eee;
}

.empty-state-title {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 8px;
}

.empty-state-subtitle {
    color: #777;
}

/* ===== LAYOUTS PRINCIPALES ===== */
.layout-superior {
    margin-bottom: 25px;
}

.layout-costos-form {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 30px;
    align-items: start;
}

.resultado-main {
    display: block;
}

/* ===== BLOQUE MODELO INFO V2 ===== */
.modelo-info-v2 {
    display: grid;
    grid-template-columns: 260px 1fr 1px 280px;
    gap: 30px;
    margin-bottom: 25px;
    align-items: center;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 20px;
    padding: 25px;
    width: 100%;
    box-sizing: border-box;
}

.modelo-left {
    text-align: center;
}

.modelo-imagen {
    width: 100%;
    max-height: 150px;
    object-fit: contain;
    border-radius: 12px;
}

.modelo-imagen.placeholder {
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.5rem;
    color: #ccc;
    min-height: 120px;
}

.modelo-nombre {
    margin-top: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #333;
}

.modelo-center {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.modelo-title {
    font-size: 1.2rem;
    font-weight: 700;
}

.modelo-subtitle {
    font-size: 0.85rem;
    color: #777;
}

.modelo-features {
    margin-top: 10px;
    padding-left: 18px;
    font-size: 0.85rem;
    color: #555;
}

.modelo-features li {
    margin-bottom: 4px;
}

.modelo-right {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-left: 10px;
}

.modelo-beneficio {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 0.8rem;
}

.modelo-beneficio strong {
    display: block;
    font-size: 0.85rem;
}

/* ===== BLOQUE DE COSTOS DINÁMICO ===== */
.costos-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 30px;
    border-radius: 20px;
    transition: all 0.3s ease;
    margin-bottom: 20px;
}

.costos-box.normal {
    background: #fff;
    border: 1px solid #eee;
}

.costos-box.dark {
    background: #000;
    color: #fff;
}

.costos-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Columna de ahorro */
.ahorro-col {
    flex: 0.7;      
    max-width: 210px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 4px;
    padding: 0 8px;
    transform: translateY(-4px); /* 🔥 sube un poco todo */
}

.icon-ahorro {
    width: 56px;
    height: 56px;
    font-size: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1.5px solid #00e676;
    background: transparent;
    margin-bottom: 4px;
}

.ahorro-label {
    font-size: var(--txt-micro);
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.7;
    margin: 0;
}

.ahorro-valor {
    font-size: 1.8rem;
    font-weight: 700;
    color: #00e676;
    line-height: 1.1;
    margin: 2px 0;
}

.ahorro-extra {
    font-size: 1rem;
    font-weight: 700;
    margin: 2px 0;
}

.ahorro-extra .porcentaje {
    color: #00e676;
}

.ahorro-extra .texto {
    color: #fff;
    font-size: 0.75rem;
    font-weight: 400;
}

.km {
    font-size: 0.75rem;
    margin-top: 5px;
    color: #00e676;
}

.km-strong {
    font-size: 0.85rem;
    font-weight: 600;
    color: #00e676;
    margin-top: 2px;
}

.ahorro-sub {
    font-size: var(--txt-micro);
    opacity: 0.8;
    margin-top: 4px;
}

/* Columna central */
.center-col {
    flex: 2;
    min-width: 0;
}

.center-col .fila {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.costos-box.normal .center-col .fila {
    border-bottom: 1px solid #eee;
}

.costos-box.normal .center-col .header-row {
    border-bottom: 1px solid #ddd;
}

.center-col .label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.8rem;
    opacity: 0.85;
}

.center-col .icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.center-col .icon svg {
    width: 100%;
    height: 100%;
    stroke: #ccc;
    stroke-width: 1.6;
    fill: none;
}

.center-col .col-regular {
    text-align: center;
    font-size: 0.95rem;
}

.center-col .col-prepago {
    text-align: center;
    font-size: 1rem;
    font-weight: 700;
    color: #00e676;
}

.center-col .col-regular,
.center-col .col-prepago {
    line-height: 1.2;
}

.center-col .header-row {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    align-items: center;
    margin-bottom: 6px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,0.2);
}



.center-col .header-row .col-regular,
.center-col .header-row .col-prepago {
    font-size: var(--txt-micro);
    text-transform: uppercase;
    opacity: 0.7;
	text-align: center;
}

.center-col .fila.total {
    border-top: 1px solid rgba(255,255,255,0.25);
    border-bottom: none;
    margin-top: 6px;
    padding-top: 12px;
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
}

.center-col .fila.total .label {
    font-weight: 700;
    color: #00e676;
}

.center-col .fila.total .col-regular {
    font-weight: 700;
    font-size: 1.05rem;
}

.center-col .fila.total .col-prepago {
    font-size: 1.3rem;
}

.center-col .fila span {
    white-space: nowrap;
    font-size: 0.8rem;
    opacity: 0.85;
}

.center-col .fila strong {
    font-size: 0.95rem;
}

.precio-final strong {
    font-size: 1.4rem !important;
}

.ahorro-mini strong,
.descuento strong {
    color: #00e676;
}

/* ===== TABLA COMPARATIVA PREPAGO ===== */
.costos-col.comparativa {
    width: 100%;
    min-width: 320px;
}

.comp-header {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    padding-bottom: 10px;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.15);
}

.comp-header .col-title {
    text-align: center;
    font-size: var(--txt-micro);
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.7;
}

.comp-header .col-title:first-child {
    text-align: left;
}

.comp-header .col-title.highlight {
    color: #00e676;
    opacity: 1;
    font-weight: 600;
}

.comp-row {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr 0.8fr;
    gap: 6px;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.comp-row .label {
    text-align: left;
    font-size: 0.80rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.comp-row .label .icon {
    width: 16px;
    height: 16px;
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.7;
}

.comp-row .label .icon.tool {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white' stroke-width='1.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M11.42 15.17L17.25 9.34 14.66 6.75 8.83 12.58 11.42 15.17ZM12 12L14.66 9.34M14.66 9.34L10.12 4.8M15.5 8.5L12 5'/%3E%3C/svg%3E");
}

.comp-row .label .icon.plus {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white' stroke-width='1.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 4v16m8-8H4'/%3E%3C/svg%3E");
}

.comp-row .label .icon.calc {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white' stroke-width='1.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z'/%3E%3C/svg%3E");
}

.comp-row .value {
    text-align: center;
    font-size: 0.85rem;
}

.comp-row .value.highlight {
    text-align: center;
    font-size: 0.95rem;
    font-weight: 700;
    color: #00e676;
}

.comp-row.total {
    border-top: 1px solid rgba(255,255,255,0.25);
    border-bottom: none;
    margin-top: 6px;
    padding-top: 12px;
}

.comp-row.total .label {
    font-weight: 700;
    color: #00e676;
}

.comp-row.total .value {
    font-weight: 700;
    font-size: 1rem;
}

.comp-row.total .value.highlight {
    font-size: 1.15rem;
}

/* Modo normal (sin prepago) - mantener el estilo simple */
.costos-col.center-col.simple {
    min-width: 200px;
}

.costos-col.center-col.simple .fila {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}

.costos-col.center-col.simple .fila:last-child {
    border-bottom: none;
}

.costos-col.center-col.simple .fila span {
    font-size: 0.9rem;
}

.costos-col.center-col.simple .fila strong {
    font-size: 1rem;
}

.costos-col.center-col.simple .precio-final strong {
    font-size: 1.4rem !important;
}

/* Columna derecha */
.right-col {
    flex: 0.5;
    text-align: right;
    min-width: 90px;
    padding-right: 10px;
}


.mensual {
    font-size: 1.8rem;
    font-weight: 700;
}

.detalle {
    font-size: 0.75rem;
    opacity: 0.7;
	white-space: nowrap;
}


/* ===== DIVISORES (CORREGIDOS) ===== */
.divider-vertical {
    flex: 0 0 1px;
    width: 1px;
    height: 165px;
    background: rgba(255,255,255,0.35);
    align-self: center;
}

.costos-box.normal .divider-vertical {
    background: #e0e0e0;
}

.modelo-info-v2 .divider-vertical {
    height: 100px;
    background: #e0e0e0;
}

.modelo-info-v2 .divider-vertical:last-child {
    display: none;
}

/* Divisores suaves */
.divider-soft {
    width: 100%;
    height: 1px;
    background: rgba(0,0,0,0.08);
    margin: 10px 0;
}

.divider-soft.small {
    margin: 5px 0 10px 0;
    opacity: 0.6;
}

/* ===== CHECK STYLE ===== */
.modelo-features.check-style {
    list-style: none;
    padding-left: 0;
}

.modelo-features.check-style li {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.check-icon {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #00c853;
    position: relative;
    flex-shrink: 0;
}

.check-icon::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 2px;
    width: 5px;
    height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* ===== ICONOS PROFESIONALES ===== */
.icon-pro {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.icon-pro svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: #111;
    stroke-width: 1.5;
}

.costos-box.dark .icon-pro svg {
    stroke: #fff;
}

/* ===== PLAZOS ===== */
.plazos {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.plazos button {
    flex: 1;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid #ddd;
    background: #f5f5f5;
    cursor: pointer;
    font-size: 0.8rem;
    transition: all 0.2s ease;
}

.plazos button:hover {
    background: #e0e0e0;
}

.plazos button.active {
    background: #111;
    color: #fff;
    border-color: #111;
}

/* ===== ADICIONALES ===== */
.adicionales-card {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 20px;
}

.adicionales-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: #111; /* 🔥 negro como pediste */
    margin-bottom: 10px;
    font-size: 0.9rem;
}

.adicionales-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.adicional-tag {
    color: #00c853;
    background: #e8f5e9;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
}

.adicionales-icon {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.adicionales-icon svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: #111;
    stroke-width: 1.6;   /* 🔥 baja un poco para que se vea fino */
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ===== TABLAS ===== */
.tabla-container {
    width: 100%;
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

th {
    text-align: left;
    padding: 12px;
    background: #f5f5f5;
    font-weight: 600;
    color: #666;
}

td {
    padding: 12px;
    border-bottom: 1px solid #eee;
}

.repuestos-tabla code {
    font-size: var(--txt-micro);
    background: #f0f0f0;
    padding: 2px 4px;
    border-radius: 4px;
}

/* ===== BOTONES TABLA ===== */
.btn-detalle, .btn-operacion {
    background: #555;
    color: #fff;
    border: none;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: var(--txt-micro);
    cursor: pointer;
    transition: background 0.2s ease;
}

.btn-detalle:hover, .btn-operacion:hover {
    background: #333;
}

/* ===== DETALLES EXPANDIBLES ===== */
.detail-row {
    display: none;
    background: #f8f9fa;
}

.detail-row.active {
    display: table-row;
}

.detail-content {
    padding: 15px;
}

.detail-title {
    font-weight: 600;
    margin-bottom: 10px;
    color: #1e3c72;
}

/* ===== OPERACIONES LIST ===== */
.operaciones-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.operacion-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 10px;
    background: #fff;
    transition: background 0.2s ease;
}

.operacion-item:hover {
    background: #f0f0f0;
}

.operacion-icon {
    width: 22px;
    height: 22px;
    object-fit: contain;
    flex-shrink: 0;
}

.operacion-item span {
    font-size: 0.85rem;
}

/* ===== FORMULARIO ===== */
.lead-form {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 20px;
    padding: 25px;
    position: sticky;
    top: 100px;
}

.lead-form h3 {
    font-size: 1.1rem;
    margin-bottom: 5px;
    color: #111;
}

.lead-sub {
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 18px;
}

.form-group label {
    font-size: 0.75rem;
    margin-bottom: 4px;
    color: #555;
    font-weight: 500;
}

.form-group input,
.form-group select {
    padding: 10px;
    border-radius: 10px;
    border: 1px solid #ddd;
    font-size: 0.85rem;
    margin-bottom: 0;
}

.checkbox {
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 20px 0 25px 0;
    color: #555;
    cursor: pointer;
}

.checkbox input {
    width: auto;
    margin: 0;
}

.secure-text {
    margin-top: 15px;
    font-size: var(--txt-micro);
    color: #888;
    text-align: center;
}

/* ===== MATRIZ DE OPERACIONES ===== */
.matriz-wrapper {
    overflow-x: auto;
    max-height: 70vh;
    border-radius: 16px;
    border: 1px solid #eee;
}

.matriz-operaciones {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
    min-width: 600px;
}

.matriz-operaciones th {
    background: #000;
    color: white;
    padding: 12px;
    text-align: center;
    font-weight: 600;
}

.matriz-operaciones td {
    padding: 12px 8px;
    border-bottom: 1px solid #eee;
}

.matriz-operaciones td:not(:first-child) {
    text-align: center;
}

.matriz-operaciones th:first-child,
.matriz-operaciones td:first-child {
    position: sticky;
    left: 0;
    background: #fff;
    z-index: 4;
}

.matriz-operaciones th:first-child {
    background: #000;
    color: #fff;
    z-index: 6;
}

.matriz-operaciones thead th {
    position: sticky;
    top: 0;
    z-index: 5;
    background: #000;
}

.matriz-operaciones tbody tr:hover {
    background: #fafafa;
}

.op-cell {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 280px;
}

.op-icon {
    width: 28px;
    height: 28px;
    object-fit: contain;
    flex-shrink: 0;
}

.op-nombre {
    text-align: left;
    line-height: 1.3;
}

.check-mark {
    color: #00c853;
    font-weight: bold;
    font-size: 1.2rem;
}

.total-row {
    background: #f5f5f5;
    font-weight: bold;
}

.total-cell {
    color: #1e3c72;
    font-size: 0.85rem;
}

/* ===== INFO BOX ===== */
.info-box {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 12px;
    font-size: 0.75rem;
    color: #666;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    margin-top: 15px;
    background: #fafafa;
}

.info-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #f1f3f5;
}

.info-icon svg {
    width: 14px;
    height: 14px;
    fill: #495057;
    stroke: none;
}

/* ===== MENSAJE TEMPORAL ===== */
.mensaje-temporal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #1e3c72;
    color: white;
    padding: 15px 25px;
    border-radius: 12px;
    font-size: 0.9rem;
    z-index: 1000;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
    animation: fadeOut 2s ease-in-out forwards;
    white-space: nowrap;
}

@keyframes fadeOut {
    0% { opacity: 1; }
    70% { opacity: 1; }
    100% { opacity: 0; visibility: hidden; }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
    .layout-costos-form {
        grid-template-columns: 1fr;
        gap: 25px;
    }
    
    .modelo-info-v2 {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 20px;
    }
    
    .modelo-info-v2 .divider-vertical {
        display: none;
    }
    
    .modelo-right {
        align-items: center;
        padding-left: 0;
    }
    
    .modelo-features {
        text-align: left;
        display: inline-block;
    }
    
    .lead-form {
        position: static;
    }
}

@media (max-width: 900px) {
    .container {
        grid-template-columns: 1fr;
    }
    
    .panel {
        position: static;
    }
    
    .header-content {
        flex-direction: column;
        gap: 15px;
        padding: 12px 20px;
    }
    
    .nav {
        gap: 25px;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .hero h1 {
        font-size: 1.8rem;
    }
    
    .costos-box {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }
    
    .ahorro-col {
        flex-direction: column;
        text-align: center;
    }
    
    .center-col .fila {
        justify-content: center;
        gap: 20px;
        flex-wrap: wrap;
    }
    
    .right-col {
        text-align: center;
    }
    
    .divider-vertical {
        display: none;
    }
    
    .ciclos-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .plazos button {
        font-size: var(--txt-micro);
        padding: 8px;
    }

	.center-col .fila {
		grid-template-columns: 1fr;
		text-align: center;
		gap: 6px;
	}

	.center-col .label {
		justify-content: center;
	}

}

@media (max-width: 600px) {
    .ciclos-grid {
        grid-template-columns: 1fr;
    }
    
    .section {
        padding: 20px 15px;
    }
    
    .modelo-info-v2 {
        padding: 20px;
    }
    
    .operacion-item {
        flex-wrap: wrap;
    }
}

/* Ajuste para pantallas intermedias (laptops, zoom ligero) */
@media (max-width: 1700px) {
    .center-col {
        flex: 1.4;
        min-width: 0 !important;
    }

    .ahorro-col {
        flex: 0.6;
        max-width: 180px;
    }

    .right-col {
        flex: 0.4;
        min-width: 80px;
    }

    .costos-col.comparativa {
        min-width: 0 !important;
    }

    .center-col .label {
        font-size: 0.75rem;
    }

    .center-col .col-regular,
    .center-col .col-prepago {
        font-size: 0.85rem;
    }

    .comp-row .value {
        font-size: 0.78rem;
    }

    .comp-row .value.highlight {
        font-size: 0.85rem;
    }

    .comp-row {
		grid-template-columns: 1.1fr 0.9fr 0.9fr;
        padding: 4px 0;
        gap: 4px;
    }

    .right-col .mensual {
        font-size: 1.4rem;
    }

    .right-col .detalle {
        font-size: var(--txt-micro);
        white-space: normal;
        line-height: 1.2;
    }

    /* Ajustar divisores verticales para que sigan proporcionales */
    .divider-vertical {
        height: 145px;
    }
}

/* Para pantallas muy grandes (tu vista normal) no se aplica ningún cambio */

.matrix-title {
    font-weight: 600;
    margin-bottom: 12px;
    font-size: 0.9rem;
}

/* 🔥 CONTENEDOR: scroll SOLO aquí */
.matrix-container {
    width: 100%;
    overflow-x: auto;
    display: block;

    /* 🔥 esto lo ancla visualmente */
    border-radius: 12px;
    background: #fff;
}

/* 🔥 TABLA FLEXIBLE SIN ROMPER LAYOUT */
.matrix-table {
    display: block;
    width: max-content;
    text-align: center;
}

/* 🔥 FILAS */
.matrix-row {
    display: flex;
    width: 100%;
    border-bottom: 1px solid #eee;
}

/* 🔥 HEADER */
.matrix-row.header {
    background: #fff;
    border-bottom: 1px solid #ddd;
}

/* 🔥 CELDAS BASE */
.matrix-cell {
    padding: 6px 8px;
    font-size: 0.75rem;
    border-right: 1px solid #eee;
    flex: 0 0 auto; /* 🔥 CLAVE: evita desalineación */
}

/* 🔥 LIMPIA BORDE FINAL */
.matrix-row .matrix-cell:last-child {
    border-right: none;
}

/* 🔥 COLUMNA OPERACIÓN (FIJA) */
.matrix-cell.op {
    width: 220px;
    min-width: 220px;
    flex: 0 0 220px; /* 🔥 mismo valor en todo */
    display: flex;
    align-items: center;
    gap: 6px;
    text-align: left;
}

/* 🔥 COLUMNAS DE KM (FIJAS Y ALINEADAS) */
.matrix-cell.ciclo {
    width: 140px;
    min-width: 140px;
    text-align: center;
    font-weight: 500;
    color: #444;
}

/* 🔥 CHECKS */
.matrix-cell.check {
    width: 140px; /* 🔥 MISMO ancho que header */
    min-width: 140px;
    text-align: center;
    border-radius: 6px;
}

.matrix-cell.check.on {
    color: #16a34a;
    font-weight: bold;
}

/* 🔥 ICONOS */
.matrix-container .op-icon {
    width: 14px;
    height: 14px;
    object-fit: contain;
    flex-shrink: 0;
}

/* 🔥 TEXTO OPERACIÓN */
.matrix-container .op-nombre {
    line-height: 1.2;
}

.costos-wrapper {
    min-width: 0; /* 🔥 CRÍTICO */
}

.matrix-row.total-row {
    border-top: 2px solid #ddd;
    background: #fafafa;
}

.matrix-cell.total {
    width: 140px;
    min-width: 140px;
    text-align: center;
    font-weight: 700;
    color: #000;
}

.btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-icon svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    transform: scale(0.9);
}

/* ===== TARJETA DE MATRIZ (CORRECCIÓN) ===== */
.matrix-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 20px;
    padding: 20px;
    margin-top: 20px;
    overflow: hidden;
}

.matrix-card .matrix-title {
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid #eee;
}

.matrix-card .matrix-container {
    position: sticky;
    top: 0;
    z-index: 2;
    margin: 0 -20px -20px -20px;
    width: calc(100% + 40px);
    border-radius: 0 0 20px 20px;
}

/* ===== FORMULARIO CON CAMPOS DE AGENCIA ===== */
.lead-form .form-group select[disabled] {
    background: #f5f5f5;
    cursor: not-allowed;
}

.lead-form .form-group select:not([disabled]) {
    background: #fff;
}

@media print {

    .pdf-page-break {
        page-break-before: always;
        break-before: page;
    }

    .pdf-horizontal {
        width: 100%;
        overflow: visible;
    }

}

/* ===== TÍTULO DE SECCIÓN ===== */
.section-title {
    text-align: center;
    margin: 0 0 15px 0; /* 🔥 control total del espacio */
    padding-bottom: 6px;
    border-bottom: 1px solid #e5e5e5; /* 🔥 más elegante */
    display: block; /* 🔥 mejor que inline-block */
    width: 100%;
}

#cotizador.section {
    padding-top: 15px; /* 🔥 acerca al header */
}

.section-title h2 {
    font-size: 1.6rem;
    font-weight: 700;
    color: #111;
    letter-spacing: 1px;
    margin: 0;
    text-transform: uppercase;
}

@media (max-width: 768px) {
    .section-title h2 {
        font-size: 1.2rem;
    }
    
    .section-title {
        margin-bottom: 10px;
		padding-bottom: 8px;
    }
}

/* ===== INFO DE PLAZOS ===== */
.plazos-info {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    margin-bottom: 8px;
    padding: 4px 0;
}

.plazos-asterisco {
    color: #333;
    font-weight: bold;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.plazos-texto {
    font-size: var(--txt-micro);
    color: #333;
    font-weight: 500;
    line-height: 1.3;
}

.costos-box.dark ~ .plazos-info .plazos-texto {
    color: #333;
}

/* ===== FOOTER MINIMALISTA ===== */
.cotizador-footer {
    margin-top: 40px;
    padding-top: 12px;
    border-top: 1px solid #e5e5e5;
    text-align: center;
}

/* Línea principal */
.footer-vigencia {
    margin-bottom: 4px;
}

/* Texto principal */
.vigencia-texto {
    font-size: 0.75rem;
    color: #666;
    font-weight: 400;
}

/* Resaltado sutil */
.vigencia-texto strong {
    color: #111;
    font-weight: 600;
}

/* Nota secundaria */
.footer-nota {
    font-size: var(--txt-micro);
    color: #999;
}

/* Responsive */
@media (max-width: 768px) {
    .cotizador-footer {
        margin-top: 30px;
        padding-top: 10px;
    }

    .vigencia-texto {
        font-size: var(--txt-micro);
    }

    .footer-nota {
        font-size: var(--txt-micro);
    }
}

.vigencia-icon {
    display: inline-flex;
    align-items: center;
    color: #888; /* gris elegante */
}

/* ============================================================
   ===== VALIDACIÓN DE CÉDULA / RUC =====
   Feedback visual del campo de identificación (index y cliente).
   ============================================================ */

.id-hint {
    display: block;
    margin-top: 6px;
    font-size: var(--txt-mini);
    color: #8a8a8a;
    min-height: 15px;
    line-height: 1.3;
}

.id-hint-ok    { color: #00A344; font-weight: 600; }
.id-hint-error { color: #D32F2F; font-weight: 600; }

.lead-form input.id-ok {
    border-color: #00A344 !important;
    background: #f5fdf8;
}

.lead-form input.id-error {
    border-color: #D32F2F !important;
    background: #fff7f7;
}


/* ============================================================
   ===== HOME / INICIO =====
   Todo lleva prefijo .hm- para no chocar con el cotizador.
   ============================================================ */

#home.section {
    padding-top: 18px;
    padding-bottom: 60px;
}

/* ---------- HERO ---------- */
.hm-hero {
    position: relative;
    display: grid;
    grid-template-columns: 1.02fr 1fr;
    align-items: center;
    gap: 30px;
    padding: 54px 56px;
    border-radius: 28px;
    background: radial-gradient(120% 130% at 82% 40%, #ffffff 0%, #f4f5f7 46%, #eceef1 100%);
    border: 1px solid #e6e8ec;
    overflow: hidden;
}

.hm-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: var(--txt-mini);
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: #5c6470;
    background: rgba(255,255,255,0.85);
    border: 1px solid #e2e5ea;
    padding: 7px 14px;
    border-radius: 999px;
}

.hm-eyebrow-punto {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #00C853;
    box-shadow: 0 0 0 3px rgba(0,200,83,0.18);
}

.hm-titulo {
    margin: 22px 0 0;
    font-size: clamp(2.1rem, 4.1vw, 3.5rem);
    line-height: 1.06;
    letter-spacing: -0.032em;
    font-weight: 800;
    color: #0a0a0a;
}

.hm-titulo-acento {
    color: #6b7280;
    font-weight: 300;
}

.hm-sub {
    margin: 20px 0 0;
    max-width: 480px;
    font-size: 1.02rem;
    line-height: 1.6;
    color: #5b6270;
}

.hm-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}

.hm-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 14px 24px;
    border-radius: 12px;
    border: 1px solid transparent;
    font-size: 0.93rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.hm-btn svg { transition: transform 0.18s ease; }
.hm-btn:hover svg { transform: translateX(3px); }

.hm-btn-primario {
    background: #0a0a0a;
    color: #fff;
    box-shadow: 0 8px 20px rgba(0,0,0,0.16);
}

.hm-btn-primario:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(0,0,0,0.24);
}

.hm-btn-fantasma {
    background: rgba(255,255,255,0.7);
    color: #1c1f24;
    border-color: #d8dce2;
}

.hm-btn-fantasma:hover {
    background: #fff;
    border-color: #b9bfc8;
    transform: translateY(-2px);
}

.hm-btn-grande {
    padding: 16px 32px;
    font-size: 1rem;
}

/* ---------- CIFRAS ---------- */
.hm-cifras {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-top: 40px;
    flex-wrap: wrap;
}

.hm-cifra {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hm-cifra strong {
    font-size: 1.55rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #0a0a0a;
    line-height: 1;
}

.hm-cifra span {
    font-size: var(--txt-mini);
    color: #737a86;
}

.hm-cifra-sep {
    width: 1px;
    height: 30px;
    background: #d9dde3;
}

/* ---------- VISUAL DEL HERO ---------- */
.hm-hero-visual {
    position: relative;
    min-height: 340px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hm-hero-glow {
    position: absolute;
    width: 92%;
    height: 78%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0,200,83,0.10) 0%, rgba(0,200,83,0.03) 42%, rgba(0,0,0,0) 70%);
    filter: blur(6px);
}

.hm-hero-marca {
    position: absolute;
    top: 42%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: clamp(6rem, 13vw, 11rem);
    font-weight: 900;
    letter-spacing: -0.06em;
    color: rgba(10,10,10,0.045);
    user-select: none;
    pointer-events: none;
    line-height: 1;
}

.hm-hero-auto {
    position: relative;
    z-index: 2;
    max-width: 100%;
    max-height: 320px;
    object-fit: contain;
    /* Los renders del catálogo traen fondo blanco: multiply lo funde con el
       degradado claro del hero y el vehículo queda visualmente recortado. */
    mix-blend-mode: multiply;
    opacity: 1;
    transition: opacity 0.26s ease;
    filter: drop-shadow(0 18px 26px rgba(0,0,0,0.13));
}

.hm-hero-sombra {
    position: absolute;
    bottom: 16%;
    left: 50%;
    transform: translateX(-50%);
    width: 62%;
    height: 22px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(0,0,0,0.16) 0%, rgba(0,0,0,0) 72%);
    z-index: 1;
}

.hm-hero-etiqueta {
    position: absolute;
    bottom: 4px;
    left: 4px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 10px 16px;
    border-radius: 12px;
    background: rgba(255,255,255,0.9);
    backdrop-filter: blur(8px);
    border: 1px solid #e4e7eb;
    box-shadow: 0 6px 18px rgba(0,0,0,0.07);
}

.hm-hero-etiqueta-nombre {
    font-size: 0.9rem;
    font-weight: 700;
    color: #0a0a0a;
    letter-spacing: -0.01em;
}

.hm-hero-etiqueta-cat {
    font-size: var(--txt-micro);
    color: #7b828e;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

/* ---------- BENEFICIOS (BANDA OSCURA) ---------- */
.hm-beneficios {
    margin-top: 22px;
    padding: 54px 50px;
    border-radius: 28px;
    background: linear-gradient(150deg, #121417 0%, #0a0b0d 62%, #0e1418 100%);
    color: #fff;
    position: relative;
    overflow: hidden;
}

.hm-beneficios::after {
    content: "";
    position: absolute;
    top: -55%;
    right: -12%;
    width: 480px;
    height: 480px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0,200,83,0.16) 0%, rgba(0,0,0,0) 68%);
    pointer-events: none;
}

.hm-beneficios-head h2 {
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    font-weight: 700;
    letter-spacing: -0.022em;
}

.hm-beneficios-head p {
    margin-top: 8px;
    color: rgba(255,255,255,0.58);
    font-size: 0.93rem;
}

.hm-beneficios-grid {
    position: relative;
    z-index: 1;
    margin-top: 38px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.hm-beneficio {
    padding: 26px 22px;
    border-radius: 18px;
    background: rgba(255,255,255,0.045);
    border: 1px solid rgba(255,255,255,0.09);
    transition: background 0.22s ease, transform 0.22s ease, border-color 0.22s ease;
}

.hm-beneficio:hover {
    background: rgba(255,255,255,0.075);
    border-color: rgba(0,200,83,0.35);
    transform: translateY(-3px);
}

.hm-beneficio-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(0,200,83,0.13);
    color: #00E464;
    margin-bottom: 16px;
}

.hm-beneficio-icon svg { width: 21px; height: 21px; }

.hm-beneficio h3 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 7px;
    letter-spacing: -0.012em;
}

.hm-beneficio p {
    font-size: 0.84rem;
    line-height: 1.55;
    color: rgba(255,255,255,0.6);
}

/* ---------- MODELOS ---------- */
.hm-modelos { margin-top: 60px; }

.hm-modelos-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 26px;
}

.hm-modelos-head h2,
.hm-pasos h2,
.hm-cierre h2 {
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    font-weight: 700;
    letter-spacing: -0.022em;
    color: #0a0a0a;
}

.hm-modelos-head p {
    margin-top: 7px;
    color: #6b7280;
    font-size: 0.92rem;
}

.hm-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: none;
    border: none;
    font-family: inherit;
    font-size: 0.87rem;
    font-weight: 600;
    color: #0a0a0a;
    cursor: pointer;
    padding: 8px 2px;
    border-bottom: 1.5px solid #0a0a0a;
    transition: gap 0.18s ease, opacity 0.18s ease;
}

.hm-link:hover { gap: 11px; opacity: 0.68; }

.hm-modelos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(228px, 1fr));
    gap: 16px;
}

.hm-modelo {
    display: flex;
    flex-direction: column;
    text-align: left;
    padding: 0 0 18px;
    background: #fff;
    border: 1px solid #e7e9ed;
    border-radius: 20px;
    cursor: pointer;
    font-family: inherit;
    overflow: hidden;
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.hm-modelo:hover {
    transform: translateY(-5px);
    border-color: #d2d6dd;
    box-shadow: 0 16px 34px rgba(0,0,0,0.10);
}

.hm-modelo-img {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 132px;
    padding: 10px 14px 0;
    background: linear-gradient(180deg, #fbfbfc 0%, #f1f2f5 100%);
}

.hm-modelo-img img {
    max-width: 100%;
    max-height: 118px;
    object-fit: contain;
    mix-blend-mode: multiply;
    transition: transform 0.3s ease;
}

.hm-modelo:hover .hm-modelo-img img { transform: scale(1.055); }

.hm-modelo-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 16px 18px 0;
}

.hm-modelo-nombre {
    font-size: 1.02rem;
    font-weight: 700;
    color: #0a0a0a;
    letter-spacing: -0.014em;
}

.hm-modelo-cat {
    font-size: var(--txt-mini);
    color: #838a95;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.hm-modelo-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 13px 18px 0;
    font-size: 0.8rem;
    font-weight: 600;
    color: #00A344;
}

/* ---------- PASOS ---------- */
.hm-pasos { margin-top: 64px; }

.hm-pasos-grid {
    margin-top: 28px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.hm-paso {
    padding: 28px 26px;
    border-radius: 20px;
    background: #fff;
    border: 1px solid #e7e9ed;
}

.hm-paso-num {
    display: block;
    font-size: 1.9rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: transparent;
    -webkit-text-stroke: 1.4px #c9ced6;
    margin-bottom: 14px;
}

.hm-paso h3 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 7px;
    color: #0a0a0a;
}

.hm-paso p {
    font-size: 0.87rem;
    line-height: 1.55;
    color: #6b7280;
}

/* ---------- CIERRE ---------- */
.hm-cierre {
    margin-top: 60px;
    padding: 58px 40px;
    border-radius: 28px;
    text-align: center;
    background: linear-gradient(140deg, #f6f7f9 0%, #eef0f3 100%);
    border: 1px solid #e6e8ec;
}

.hm-cierre p {
    margin: 10px 0 26px;
    color: #6b7280;
    font-size: 0.97rem;
}

/* ---------- ANIMACIÓN DE ENTRADA ---------- */
@keyframes hmSubir {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

.hm-hero,
.hm-beneficios,
.hm-modelos,
.hm-pasos,
.hm-cierre {
    animation: hmSubir 0.6s cubic-bezier(0.22, 0.8, 0.3, 1) both;
}

.hm-beneficios { animation-delay: 0.06s; }
.hm-modelos    { animation-delay: 0.10s; }
.hm-pasos      { animation-delay: 0.14s; }
.hm-cierre     { animation-delay: 0.18s; }

@media (prefers-reduced-motion: reduce) {
    .hm-hero, .hm-beneficios, .hm-modelos, .hm-pasos, .hm-cierre { animation: none; }
    .hm-hero-auto { transition: none; }
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1100px) {
    .hm-beneficios-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 940px) {
    .hm-hero {
        grid-template-columns: 1fr;
        padding: 40px 30px;
        gap: 16px;
    }
    .hm-hero-texto { order: 2; }
    .hm-hero-visual { order: 1; min-height: 250px; }
    .hm-hero-auto { max-height: 230px; }
    .hm-hero-etiqueta { bottom: 0; left: 0; }
    .hm-sub { max-width: none; }
    .hm-pasos-grid { grid-template-columns: 1fr; }
    .hm-beneficios { padding: 40px 28px; }
}

@media (max-width: 600px) {
    #home.section { padding-left: 16px; padding-right: 16px; }
    .hm-hero { padding: 30px 22px; border-radius: 22px; }
    .hm-beneficios { padding: 34px 22px; border-radius: 22px; }
    .hm-cierre { padding: 40px 22px; border-radius: 22px; }
    .hm-beneficios-grid { grid-template-columns: 1fr; }
    .hm-modelos-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
    .hm-modelo-img { height: 105px; }
    .hm-modelo-img img { max-height: 92px; }
    .hm-cifras { gap: 16px; margin-top: 30px; }
    .hm-cifra strong { font-size: 1.3rem; }
    .hm-btn { flex: 1 1 100%; justify-content: center; }
}


/* ============================================================
   ===== CAMPOS RESUELTOS POR EL USUARIO AUTENTICADO =====
   Asesor, concesionario y agencia ya no se digitan: salen del login.
   Se muestran como texto, no como input, para que quede claro que no
   son editables.
   ============================================================ */

.campo-fijo {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 11px 13px;
    background: #f4f5f7;
    border: 1px solid #e6e8ec;
    border-radius: 10px;
    font-size: 0.9rem;
    color: #2c3138;
    line-height: 1.35;
}

.campo-fijo-sub {
    font-size: 0.76rem;
    color: #6b7280;
}

.campo-fijo-aviso {
    font-size: var(--txt-mini);
    color: #b8860b;
    line-height: 1.4;
}

/* Los selects espejo existen solo para que el guardado y la validación
   sigan leyendo los mismos IDs de siempre. No se muestran. */
.campo-oculto {
    display: none !important;
}


/* ===== AVISOS (ni error ni éxito: el dato pasa pero conviene revisarlo) ===== */
.id-hint-aviso { color: #B8860B; font-weight: 600; }

.lead-form input.id-aviso {
    border-color: #E0A800 !important;
    background: #fffdf5;
}

/* Marca de campo no obligatorio */
.label-opcional {
    font-weight: 400;
    font-size: var(--txt-mini);
    color: #9aa1ab;
    text-transform: none;
    letter-spacing: 0;
    margin-left: 5px;
}

/* La placa y el chasis se leen mejor separados */
#placa, #chasis {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ===== ADICIONALES CON SU VALOR AL COSTADO ===== */
.adicionales-card-split {
    display: flex;
    align-items: stretch;
    gap: 0;
}

.adicionales-main {
    flex: 1 1 75%;
    min-width: 0;
}

.adicionales-valor {
    flex: 0 0 24%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding-left: 16px;
    margin-left: 16px;
    border-left: 1px dashed #b7e6c9;
    text-align: center;
}

.adicionales-valor-num {
    font-size: 1.28rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #00A344;
    line-height: 1.1;
}

.adicionales-valor-txt {
    font-size: var(--txt-micro);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #6b7280;
}

@media (max-width: 620px) {
    .adicionales-card-split { flex-direction: column; }
    .adicionales-valor {
        flex: 1 1 auto;
        flex-direction: row;
        gap: 8px;
        justify-content: flex-start;
        border-left: none;
        border-top: 1px dashed #b7e6c9;
        margin-left: 0;
        padding-left: 0;
        margin-top: 12px;
        padding-top: 12px;
    }
}

/* ============================================================
   ===== ENCABEZADO: REORDENADO =====
   Antes todo se repartía con space-between y quedaba desbalanceado:
   el logo pegado a la izquierda, el menú a la deriva y la campana
   chocando con el usuario. Ahora es logo | menú centrado | acciones.
   ============================================================ */

.header {
    background: rgba(8, 9, 11, 0.96);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.header-content {
    max-width: 1500px;
    padding: 0 28px;
    min-height: 60px;
    gap: 20px;
}

.brand { flex: 0 0 auto; }
.logo-kia { height: 26px; }

/* El menú toma el espacio libre y se centra */
.nav {
    flex: 1 1 auto;
    justify-content: center;
    gap: 4px;
}

.nav a {
    padding: 8px 15px;
    border-radius: 9px;
    font-size: 0.86rem;
    transition: color .18s ease, background .18s ease;
}

.nav a:hover { background: rgba(255,255,255,0.07); }

.nav a.active {
    color: #fff;
    background: rgba(255,255,255,0.1);
    font-weight: 600;
}

/* La barrita verde estorbaba dentro de una píldora */
.nav a.active::after { display: none; }

.nav-icon { width: 16px; height: 16px; }

/* Bloque derecho compacto */
.au-btn { margin-left: 0; }

.au-user {
    flex: 0 0 auto;
    gap: 9px;
    margin-left: 4px;
    padding-left: 14px;
    border-left: 1px solid rgba(255,255,255,0.1);
}

.au-avatar {
    width: 30px;
    height: 30px;
    font-size: var(--txt-mini);
}

.au-user-nom { font-size: .77rem; max-width: 150px; }
.au-user-rol { font-size: var(--txt-micro); }

@media (max-width: 900px) {
    .header-content { padding: 0 14px; gap: 8px; }
    .nav { gap: 0; }
    .nav a { padding: 8px 9px; font-size: .8rem; }
    .nav a span.nav-item { gap: 5px; }
    .au-user { padding-left: 8px; margin-left: 0; }
}

@media (max-width: 640px) {
    .nav .nav-icon { display: none; }
    .nav a { padding: 8px 7px; font-size: .76rem; }
}

/* ============================================================
   TOQUE Y PANTALLAS PEQUEÑAS
   ============================================================
   Va al final a propósito: son ajustes que dependen del dispositivo y tienen
   que ganarle a las reglas de arriba.

   El umbral real no es el ancho sino si hay dedo o ratón. Un asesor con un
   portátil de 1366px necesita controles compactos para que le quepa todo; un
   cliente en un celular necesita 44px o falla el toque. Por eso el tamaño
   táctil se aplica con (pointer: coarse) y no con un max-width.
   ============================================================ */

@media (hover: none), (pointer: coarse) {
    /* 44px es el mínimo con el que un dedo acierta sin pelear. */
    .nav a { min-height: 44px; padding: 10px 8px; }
    .btn, .ciclo-btn, .plazos button { min-height: 44px; }

    /* El check de términos medía 13x13: imposible de dar sin ampliar la
       página. Se agranda la casilla y se le da alto a toda la línea. */
    .checkbox { min-height: 44px; gap: 12px; }
    .checkbox input[type="checkbox"] {
        width: 22px;
        height: 22px;
        accent-color: var(--tinta);
        flex: 0 0 auto;
    }

    /* 16px evita que el navegador del celular haga zoom al enfocar el campo,
       que descoloca el formulario y desespera al cliente. */
    select, input, textarea { min-height: 44px; font-size: 16px; }
}

/* En el celular la escalera de kilometrajes cabe en cuatro columnas: con tres
   medía 1.064px de alto, más de una pantalla entera solo para elegir el
   kilometraje. */
@media (max-width: 620px) {
    .ciclos-grid { grid-template-columns: repeat(4, 1fr); gap: 5px; }
    .ciclo-btn { padding: 10px 3px; font-size: var(--txt-micro); }
}

@media (max-width: 380px) {
    .ciclos-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   CAPA 2 · EL BLOQUE DE LA DECISIÓN
   ============================================================
   Es el único sitio de toda la aplicación donde el cliente decide, y estaba
   metiendo TRES columnas en 470px: al ahorro le quedaban 123px y a la
   comparativa 145px. El argumento de venta —cuánto se ahorra— salía del mismo
   tamaño que el IVA.

   Se reordena en dos filas sin tocar el HTML, solo colocando en una rejilla lo
   que ya existe:

     fila 1   AHORRO (grande, verde)          |   CUOTA MENSUAL
     fila 2   REGULAR vs PREPAGO a todo lo ancho

   Es la misma jerarquía del PDF nuevo, a propósito: el cliente ve en pantalla
   lo que después recibe en papel y lo reconoce.

   OJO: todo va apuntado a .prepago. El cuadro de un solo mantenimiento
   (.costos-box.normal) se queda EXACTAMENTE como estaba — el producto es el
   plan prepagado, no el mantenimiento suelto.
   ============================================================ */

.costos-box.dark.prepago {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: stretch;
    gap: 0 var(--sp-6);
    padding: var(--sp-6);
    border-radius: var(--radio-lg);
    background: var(--tinta);
    margin-bottom: var(--sp-4);
}

/* Los separadores verticales existían para partir tres columnas en una fila.
   Con dos filas sobran: la línea que hace falta ahora es horizontal. */
.costos-box.dark.prepago > .divider-vertical { display: none; }

.costos-box.dark.prepago .ahorro-col {
    grid-column: 1;
    grid-row: 1;
    flex: none;
    max-width: none;
    align-items: flex-start;
    justify-content: center;
    text-align: left;
    padding: 0;
    gap: 2px;
    transform: none;
}

/* El emoji dentro de un círculo verde era el objeto más llamativo del bloque,
   y no dice nada. Fuera: que lo llamativo sea la cifra. */
.costos-box.dark.prepago .icon-ahorro { display: none; }

.costos-box.dark.prepago .ahorro-label {
    font-size: var(--txt-micro);
    text-transform: uppercase;
    letter-spacing: var(--track);
    color: var(--tinta-tenue);
    opacity: 1;
}

.costos-box.dark.prepago .ahorro-valor {
    /* Crece con la pantalla en vez de saltar por escalones. */
    font-size: clamp(2rem, 4.2vw, 2.75rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.05;
    color: var(--verde);
    font-variant-numeric: tabular-nums;
}

.costos-box.dark.prepago .ahorro-extra,
.costos-box.dark.prepago .km {
    font-size: var(--txt-mini);
    color: rgba(255, 255, 255, 0.62);
}

/* El porcentaje es el segundo argumento más fuerte después del monto: dice
   que el descuento es grande sin que el cliente tenga que dividir. Estaba a
   13px, igual que la nota del costo por kilómetro. */
.costos-box.dark.prepago .ahorro-extra {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-top: 3px;
}
.costos-box.dark.prepago .ahorro-extra .porcentaje {
    font-size: clamp(1.3rem, 2.1vw, 1.65rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--verde);
}
.costos-box.dark.prepago .ahorro-extra .texto {
    font-size: var(--txt-sm);
    color: rgba(255, 255, 255, 0.7);
}
.costos-box.dark.prepago .km { margin-top: 2px; }

/* Cuota mensual: el segundo número, separado por una línea fina */
.costos-box.dark.prepago .right-col {
    grid-column: 2;
    grid-row: 1;
    align-items: flex-end;
    justify-content: center;
    text-align: right;
    gap: 2px;
    padding-left: var(--sp-6);
    border-left: 1px solid rgba(255, 255, 255, 0.14);
}

.costos-box.dark.prepago .mensual {
    font-size: clamp(1.35rem, 2.4vw, 1.75rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: #fff;
    font-variant-numeric: tabular-nums;
}
.costos-box.dark.prepago .detalle {
    font-size: var(--txt-mini);
    color: rgba(255, 255, 255, 0.55);
}

/* ---------- Comparativa, a todo lo ancho ---------- */
.costos-box.dark.prepago .center-col.comparativa {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: var(--sp-5);
    padding-top: var(--sp-5);
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    gap: 0;
}

.costos-box.dark.prepago .comp-header,
.costos-box.dark.prepago .comp-row {
    display: grid;
    /* Las dos columnas de cifras miden lo mismo, así el ojo compara en
       vertical sin tener que buscar dónde empieza cada una. */
    grid-template-columns: 1fr minmax(88px, 0.42fr) minmax(88px, 0.42fr);
    align-items: baseline;
    gap: var(--sp-3);
    padding: 7px 0;
}

.costos-box.dark.prepago .comp-header {
    padding-bottom: var(--sp-2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.costos-box.dark.prepago .comp-header .col-title {
    font-size: var(--txt-micro);
    text-transform: uppercase;
    letter-spacing: var(--track);
    text-align: right;
    color: var(--tinta-tenue);
}
.costos-box.dark.prepago .comp-header .col-title.highlight { color: var(--verde); }

.costos-box.dark.prepago .comp-row .label {
    font-size: var(--txt-sm);
    color: rgba(255, 255, 255, 0.72);
}
.costos-box.dark.prepago .comp-row .value {
    font-size: var(--txt-sm);
    text-align: right;
    color: rgba(255, 255, 255, 0.6);
    font-variant-numeric: tabular-nums;
}
.costos-box.dark.prepago .comp-row .value.highlight {
    color: #fff;
    font-weight: 600;
}

.costos-box.dark.prepago .comp-row.total {
    margin-top: var(--sp-2);
    padding-top: var(--sp-4);
    border-top: 1px solid rgba(255, 255, 255, 0.22);
}
.costos-box.dark.prepago .comp-row.total .label {
    font-size: var(--txt-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--track);
    color: #fff;
}
.costos-box.dark.prepago .comp-row.total .value {
    font-size: var(--txt-md);
    font-weight: 600;
}
.costos-box.dark.prepago .comp-row.total .value.highlight {
    font-size: clamp(1.25rem, 2.2vw, 1.6rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #fff;
}

/* ---------- Plazos: pastillas, no botones de formulario ---------- */
.costos-box.dark.prepago ~ .plazos {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: var(--sp-4);
}
.costos-box.dark.prepago ~ .plazos button {
    flex: 1 1 auto;
    padding: 10px 14px;
    border: 1px solid var(--borde-fuerte);
    border-radius: 999px;
    background: var(--papel);
    color: var(--tinta);
    font-family: inherit;
    font-size: var(--txt-mini);
    font-weight: 600;
    cursor: pointer;
    transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.costos-box.dark.prepago ~ .plazos button:hover:not(.active) {
    border-color: var(--tinta);
    background: var(--papel-hueso);
}
.costos-box.dark.prepago ~ .plazos button.active {
    background: var(--tinta);
    border-color: var(--tinta);
    color: #fff;
}

/* ---------- Pantallas angostas ---------- */
/* Por debajo de ~560px las dos cifras de arriba ya no caben una al lado de la
   otra sin encogerse tanto que dejan de impresionar. Se apilan. */
@media (max-width: 560px) {
    .costos-box.dark.prepago {
        grid-template-columns: 1fr;
        padding: var(--sp-5);
    }
    .costos-box.dark.prepago .right-col {
        grid-column: 1;
        grid-row: 2;
        align-items: flex-start;
        text-align: left;
        padding-left: 0;
        padding-top: var(--sp-4);
        margin-top: var(--sp-4);
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, 0.14);
    }
    .costos-box.dark.prepago .center-col.comparativa { grid-row: 3; }
    .costos-box.dark.prepago .comp-header,
    .costos-box.dark.prepago .comp-row {
        grid-template-columns: 1fr minmax(72px, auto) minmax(72px, auto);
        gap: var(--sp-2);
    }
    .costos-box.dark.prepago .comp-row .label,
    .costos-box.dark.prepago .comp-row .value { font-size: var(--txt-mini); }
}

/* El check de términos con ratón medía 13px: pequeño incluso para un clic. */
.checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--tinta);
    flex: 0 0 auto;
}

/* ============================================================
   CAPA 3 · LA BANDA DEL VEHÍCULO   (revisión)
   ============================================================
   La primera versión quitó el contenido repetido, pero seguía viéndose de
   plantilla: cada respaldo llevaba su icono metido en un cuadrito gris, y esos
   cuatro cuadritos pesaban más que el nombre del auto, que es de lo que trata
   la tarjeta.

   Minimalista de verdad es quitar, no añadir:
     · Fuera los cuadritos. El icono va suelto, en trazo fino y en gris.
     · El modelo crece y manda: es el sujeto de la cotización.
     · Los cuatro respaldos bajan de tono — son respaldo, no argumento.
     · Una línea fina separa la cabecera del cuerpo. Nada más de adornos.
   ============================================================ */

.modelo-info-v2 {
    display: grid;
    grid-template-columns: minmax(240px, 0.9fr) 1.1fr;
    grid-template-areas:
        "cabecera cabecera"
        "auto     respaldos";
    align-items: center;
    gap: 0 var(--sp-7);
    background: var(--papel);
    border: 1px solid var(--borde);
    border-radius: var(--radio-lg);
    padding: var(--sp-4) var(--sp-6) var(--sp-6);
    margin-bottom: var(--sp-5);
}

/* ---------- Cabecera ---------- */
.modelo-cabecera {
    grid-area: cabecera;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    padding-bottom: var(--sp-4);
    margin-bottom: var(--sp-5);
    border-bottom: 1px solid var(--borde);
}

.modelo-etiqueta {
    font-size: var(--txt-micro);
    text-transform: uppercase;
    letter-spacing: var(--track);
    color: var(--tinta-tenue);
}

/* ---------- El auto ---------- */
.modelo-info-v2 .modelo-left {
    grid-area: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
}

.modelo-info-v2 .modelo-nombre {
    font-size: clamp(1.25rem, 2.1vw, 1.6rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.15;
    color: var(--tinta);
}

.modelo-info-v2 .modelo-imagen {
    width: 100%;
    max-width: 300px;
    height: auto;
    margin-top: var(--sp-4);
    object-fit: contain;
    /* Los renders del catálogo traen fondo blanco: multiply lo funde con la
       tarjeta en vez de dejar un rectángulo recortado. */
    mix-blend-mode: multiply;
}

.modelo-info-v2 .modelo-imagen.placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 96px;
    background: var(--papel-hueso);
    border-radius: var(--radio);
    color: var(--tinta-tenue);
    font-weight: 800;
    letter-spacing: -0.04em;
    mix-blend-mode: normal;
}

/* ---------- Los respaldos ---------- */
.modelo-info-v2 .modelo-right {
    grid-area: respaldos;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-5) var(--sp-6);
}

.modelo-info-v2 .modelo-beneficio {
    display: grid;
    grid-template-columns: 18px 1fr;
    align-items: start;
    gap: var(--sp-3);
    padding: 0;
    border: none;
    background: none;
}

/* El icono, suelto y en trazo fino. El cuadrito gris de antes convertía un
   respaldo discreto en un botón que pedía clic. */
.modelo-info-v2 .modelo-beneficio .icon-pro {
    width: 18px;
    height: 18px;
    display: block;
    background: none;
    border: none;
    border-radius: 0;
    color: var(--tinta-tenue);
    margin-top: 1px;
}
.modelo-info-v2 .modelo-beneficio .icon-pro svg {
    width: 18px;
    height: 18px;
    stroke-width: 1.4;
}

.modelo-info-v2 .modelo-beneficio strong {
    display: block;
    font-size: var(--txt-sm);
    font-weight: 600;
    color: var(--tinta);
    line-height: 1.3;
    letter-spacing: -0.005em;
}
.modelo-info-v2 .modelo-beneficio span {
    display: block;
    font-size: var(--txt-mini);
    color: var(--tinta-suave);
    line-height: 1.45;
    margin-top: 2px;
}

/* Restos del diseño anterior */
.modelo-info-v2 .modelo-center,
.modelo-info-v2 > .divider-vertical,
.modelo-info-v2 .divider-soft { display: none; }

/* ---------- Botón discreto de la cabecera ---------- */
.btn-imprimir {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
    padding: 7px 13px;
    border: 1px solid var(--borde-fuerte);
    border-radius: 999px;
    background: var(--papel);
    color: var(--tinta-suave);
    font-family: inherit;
    font-size: var(--txt-mini);
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: color .18s ease, border-color .18s ease, background .18s ease;
}
.btn-imprimir svg { width: 15px; height: 15px; flex: 0 0 auto; }
.btn-imprimir:hover:not(:disabled) {
    color: var(--tinta);
    border-color: var(--tinta);
    background: var(--papel-hueso);
}
.btn-imprimir:disabled { opacity: .55; cursor: wait; }
.btn-imprimir .btn-loader {
    width: 13px; height: 13px;
    border: 2px solid var(--borde-fuerte);
    border-top-color: var(--tinta);
    border-radius: 50%;
    animation: spin .7s linear infinite;
}

@media (max-width: 900px) {
    .modelo-info-v2 {
        grid-template-columns: 1fr;
        grid-template-areas: "cabecera" "auto" "respaldos";
        gap: 0;
        padding: var(--sp-4) var(--sp-5) var(--sp-5);
    }
    .modelo-cabecera { padding-bottom: var(--sp-3); margin-bottom: var(--sp-4); }
    .modelo-info-v2 .modelo-left { align-items: flex-start; }
    .modelo-info-v2 .modelo-imagen { max-width: 230px; align-self: center; margin-top: var(--sp-3); }
    .modelo-info-v2 .modelo-right { margin-top: var(--sp-4); }
}

/* En el celular la banda es antesala, no protagonista: el cliente viene por el
   precio. Se aprieta para que la cifra entre antes en pantalla. */
@media (max-width: 520px) {
    .modelo-info-v2 { padding: var(--sp-3) var(--sp-4) var(--sp-4); }
    .modelo-info-v2 .modelo-right { grid-template-columns: 1fr; gap: var(--sp-3); }
    .modelo-info-v2 .modelo-imagen { max-width: 170px; margin-top: var(--sp-2); }
    .modelo-info-v2 .modelo-beneficio span { margin-top: 0; }
    .btn-imprimir { padding: 8px 12px; }
}

@media (hover: none), (pointer: coarse) {
    .btn-imprimir { min-height: 40px; }
}

/* ============================================================
   CAPA 4 · LA MATRIZ DE OPERACIONES
   ============================================================
   Es la prueba de que el plan vale lo que cuesta: quince operaciones por cada
   mantenimiento. Pero estaba construida para que no se pudiera leer.

   La columna de operación medía 220px fijos y cada ciclo 140px. Con tres
   mantenimientos la tabla mide 640px dentro de un contenedor de 470: hay que
   arrastrar SIEMPRE, incluso en un monitor grande. Y al arrastrar hacia la
   derecha la columna de operación se iba con todo, así que el asesor acababa
   viendo una parrilla de vistos sin saber a qué fila correspondían.

   Dos arreglos y la tabla cambia de carácter:

     1. La columna de operación se queda fija al desplazar (sticky). Siempre
        sabes qué estás mirando.
     2. Las columnas de kilometraje bajan de 140 a 92px. "30.000 KM" y un visto
        no necesitan más, y con tres ciclos la tabla ya entra sin arrastrar.

   Más rayado alterno, que con quince filas y seis columnas es la diferencia
   entre leer una fila y perderla a medio camino.
   ============================================================ */

.matrix-card .matrix-container,
.matrix-container {
    overflow-x: auto;
    overflow-y: visible;
    border-radius: var(--radio);
    background: var(--papel);
    /* Sin esto, en móvil el arrastre se siente trabado. */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.matrix-title {
    font-size: var(--txt-micro);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--track);
    color: var(--tinta-suave);
    margin-bottom: var(--sp-3);
}

.matrix-row { border-bottom: 1px solid var(--borde); }
.matrix-row:last-child { border-bottom: none; }

/* Rayado alterno: con quince filas el ojo se pierde a mitad de camino. */
.matrix-table .matrix-row:nth-of-type(even):not(.header):not(.total-row) {
    background: #fafbfc;
}

/* COLISIÓN DE NOMBRES, no un capricho.
   La fila de cabecera de la matriz se llama class="matrix-row header", así que
   estaba cazando la regla global `.header` —la barra negra del sitio— y se
   llevaba de ahí position:sticky, z-index:100 y un backdrop-filter. Solo se
   sobrescribía el fondo, porque `.matrix-row.header` tiene más peso; lo demás
   se colaba. Hoy no se nota porque el contenedor no desplaza en vertical, pero
   es una bomba de relojería: basta con darle alto a la matriz para que la fila
   se despegue y flote por encima de media pantalla. Se anula explícitamente.

   Tampoco se pone sticky de verdad: sin alto fijo no haría nada, y en el
   celular un scroll anidado se lleva peor que el de la página. */
.matrix-row.header {
    position: static;
    z-index: auto;
    top: auto;
    backdrop-filter: none;
    background: var(--papel-hueso);
    border-bottom: 1px solid var(--borde-fuerte);
}

.matrix-cell {
    padding: 9px 10px;
    font-size: var(--txt-mini);
    border-right: 1px solid var(--borde);
    color: var(--tinta-media);
}

/* ---------- La columna que ya no se escapa ---------- */
.matrix-cell.op {
    /* 190 + 3x92 = 466 y el contenedor mide 468: el caso más común —tres
       mantenimientos— entra justo sin arrastrar. */
    width: 190px;
    min-width: 190px;
    flex: 0 0 190px;
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--papel);
    /* La sombra avisa de que hay más tabla debajo, en vez de dejar que el
       texto pase por detrás sin explicación. */
    box-shadow: 6px 0 8px -6px rgba(10, 10, 10, 0.16);
    color: var(--tinta);
}
/* La celda pegada tiene que llevarse el fondo de su fila, o al desplazar se
   ve el rayado por debajo. */
.matrix-table .matrix-row:nth-of-type(even):not(.header):not(.total-row) .matrix-cell.op {
    background: #fafbfc;
}
.matrix-row.header .matrix-cell.op {
    background: var(--papel-hueso);
    z-index: 4;
}
.matrix-row.total-row .matrix-cell.op { background: var(--papel-hueso); }

.matrix-cell.ciclo,
.matrix-cell.check,
.matrix-cell.total {
    width: 92px;
    min-width: 92px;
    flex: 0 0 92px;
}

.matrix-cell.ciclo {
    font-size: var(--txt-micro);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--tinta);
    white-space: nowrap;
}

/* El visto en verde es lo único de color de la tabla: marca lo que sí entra. */
.matrix-cell.check { color: transparent; }
.matrix-cell.check.on {
    color: var(--verde);
    font-weight: 700;
    font-size: var(--txt-sm);
}

.matrix-row.total-row {
    border-top: 1px solid var(--borde-fuerte);
    background: var(--papel-hueso);
    font-weight: 700;
}
.matrix-cell.total {
    color: var(--tinta);
    font-variant-numeric: tabular-nums;
}

.matrix-container .op-nombre { line-height: 1.3; }
.matrix-container .op-icon { width: 13px; height: 13px; opacity: .55; }

@media (max-width: 620px) {
    /* En el celular se aprieta un poco más para que quepan dos ciclos
       completos junto a la operación antes de tener que arrastrar. */
    .matrix-cell.op { width: 150px; min-width: 150px; flex: 0 0 150px; }
    .matrix-cell.ciclo,
    .matrix-cell.check,
    .matrix-cell.total { width: 78px; min-width: 78px; flex: 0 0 78px; }
    .matrix-cell { padding: 8px 6px; }
}



/* Aviso conjunto de placa/VIN: cada campo es opcional, pero uno de los dos
   hace falta para poder cruzar la cotización con el vehículo real. */
.id-hint.malo { color: var(--rojo); }

/* ============================================
   EL SIGUIENTE ESCALÓN
   Solo aparece con UN mantenimiento seleccionado, que es cuando la página no
   muestra ahorro ni comparativa. Le dice al cliente, con el número real ya
   calculado, qué gana añadiendo el siguiente servicio. El verde está permitido
   aquí porque esto es dinero: es exactamente lo que el token significa.
   ============================================ */
.siguiente-escalon {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    margin-top: var(--sp-4);
    padding: var(--sp-4);
    background: var(--verde-tenue);
    border: 1px solid rgba(0, 163, 68, 0.22);
    border-radius: var(--radio);
}

.siguiente-escalon .se-icono {
    font-size: var(--txt-md);
    line-height: 1.2;
    flex-shrink: 0;
}

.siguiente-escalon .se-titulo {
    font-size: var(--txt-base);
    font-weight: 700;
    color: var(--verde);
    margin-bottom: var(--sp-1);
}

.siguiente-escalon .se-detalle {
    font-size: var(--txt-mini);
    color: var(--tinta-media);
    line-height: 1.5;
}

.siguiente-escalon .se-detalle strong {
    color: var(--tinta);
    font-weight: 700;
}

@media (max-width: 640px) {
    .siguiente-escalon { padding: var(--sp-3); }
    .siguiente-escalon .se-titulo { font-size: var(--txt-sm); }
}