/* Calculadora de vehículo eléctrico -- landing nueva e independiente de
   landing.css (no se carga junto a ella, ver calculadora_vehiculo.html).
   El HTML exportado desde Figma (dev mode, 2026-09-22) traía su propio rosa
   (#ea0383) y su propia escala de grises/azules/verdes, distinta a la del
   resto del sitio -- pedido explícito del negocio (2026-09-23): "dejar los
   rosas que ya tenemos" y adaptar el resto de tonos a los colores del sitio
   en vez de los del archivo de Figma. Los nombres de variable (--cv-primary-500,
   etc.) se mantienen tal cual del export para no tener que tocar cada regla
   de abajo -- lo que cambió es SOLO el valor hexadecimal, tomado de
   static/css/landing.css (rosa/azul) o de los verdes de "ahorro" ya usados
   en landing.html (.stat-card.saving, .case-box.saving, .acumulado-*),
   que son el verde real del sitio aunque no estén en su :root con nombre. */
:root {
    --cv-primary-500: #ff0f64;   /* = --pink-500/600 de landing.css */
    --cv-primary-100: #ffe2e7;   /* = --pink-100 de landing.css */
    --cv-information-100: #edf4ff;
    --cv-information-200: #dde9fd; /* = --blue-100 de landing.css */
    --cv-information-700: #1e5fbf; /* = --blue-600 de landing.css */
    --cv-neutral-100: #f4f5f7;
    --cv-neutral-150: rgba(0, 0, 0, 0.2); /* = --gray-border de landing.css (bordes de tarjeta) */
    --cv-neutral-200: #d1d5db;
    --cv-neutral-300: #b9bfca;
    --cv-neutral-400: #a2aab8;
    --cv-neutral-700: #767676;  /* = --gray-700 de landing.css */
    --cv-neutral-800: #383c42;
    --cv-success-200: rgba(140, 212, 128, 0.35); /* mismo verde de .stat-card.saving/.congrats-banner */
    --cv-success-300: rgba(140, 212, 128, 0.35);
    --cv-success-400: rgba(140, 212, 128, 0.6);
    --cv-success-800: #3c942d;  /* = .case-box.saving .case-title de landing.css */
    --cv-success-950: #2f8a3d;  /* = .acumulado-stat de landing.css */
    --cv-warning-100: rgba(246, 149, 34, 0.12); /* tinte pálido de --orange-end de landing.css */
    --cv-white: #ffffff;
    --cv-black: #000000;
}

* { box-sizing: border-box; }

/* calculadora.css solo se carga en calculadora_vehiculo.html (ver el
   template) -- fijar el fondo del body acá no pisa landing.html, que
   nunca incluye esta hoja. */
body {
    margin: 0;
    background: var(--cv-information-100);
    color: var(--cv-black);
    font-family: 'Inter', Arial, sans-serif;
}

.cv-page,
.cv-header-top,
.cv-intro,
.cv-compare-row,
.cv-comparison-section,
.cv-why-section {
    width: 100%;
}

.cv-page {
    max-width: 1440px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding-bottom: 40px;
}

/* HEADER */
.cv-header {
    background: var(--cv-primary-500);
    width: 100%;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

/* grid en vez de flex: con solo 2 hijos (logo, nav), la 3ra columna (1fr)
   queda vacía y actúa de contrapeso -- el menú (columna del medio, auto)
   queda centrado en la franja sin necesidad de un spacer extra en el HTML.
   Mismo truco que .site-header-top de landing.css -- pedido explícito del
   negocio (2026-09-23): el 4to ítem del menú no debía quedar pegado a la
   derecha (ver justify-content:space-between anterior). */
.cv-header-top {
    max-width: 1440px;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 0 128px;
}

.cv-logo img { height: 41px; }

.cv-menu ul {
    display: flex;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.cv-menu a {
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    padding: 8px 12px;
    border-radius: 26px;
}

.cv-menu a:hover { background: rgba(255, 255, 255, 0.15); }

/* INTRO */
.cv-intro {
    background: var(--cv-white);
    border: 1px solid var(--cv-neutral-150);
    border-radius: 8px;
    max-width: 1184px;
    padding: 28px 48px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 12px;
    justify-content: center;
    min-height: 184px;
}

.cv-intro h1 {
    margin: 0;
    font-size: 40px;
    font-weight: 700;
    letter-spacing: -0.4px;
    color: var(--cv-primary-500);
}

.cv-intro h1 span { color: var(--cv-black); }

.cv-intro p {
    margin: 0;
    max-width: 692px;
    font-size: 16px;
    line-height: 20px;
    color: var(--cv-neutral-700);
}

.cv-intro-img {
    position: absolute;
    right: 32px;
    top: 50%;
    transform: translateY(-50%);
    width: 340px;
    height: auto;
    pointer-events: none;
}

/* COMPARISON CARDS */
.cv-compare-row {
    display: flex;
    gap: 12px;
    max-width: 1184px;
}

.cv-card {
    background: var(--cv-white);
    border: 1px solid var(--cv-neutral-150);
    border-radius: 8px;
    padding: 28px 48px;
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.cv-card-top {
    background: var(--cv-primary-100);
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 24px;
}

.cv-card-top img { width: 56px; height: 56px; flex-shrink: 0; }

.cv-card-top h2 {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    color: var(--cv-primary-500);
    letter-spacing: -0.4px;
}

.cv-card-top p { margin: 4px 0 0; font-size: 14px; color: var(--cv-neutral-800); }

.cv-field-block { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.cv-field-block label { font-size: 16px; font-weight: 700; color: var(--cv-black); }

.cv-field {
    background: var(--cv-white);
    border: 1px solid var(--cv-neutral-200);
    border-radius: 8px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 16px;
    font-size: 16px;
    gap: 8px;
}

.cv-field input {
    border: none;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: 16px;
    width: 100%;
    color: var(--cv-black);
    padding: 0;
}

.cv-field input:focus-visible { outline: 2px solid var(--cv-primary-500); border-radius: 4px; }

.cv-field.cv-readonly { background: var(--cv-neutral-100); }
.cv-unit { color: var(--cv-neutral-300); white-space: nowrap; }
.cv-value-bold { font-weight: 700; }

.cv-field-note { font-size: 14px; color: var(--cv-neutral-700); margin: 0; line-height: 1.35; }

.cv-row-field { display: flex; align-items: center; gap: 8px; width: 100%; }
.cv-row-field label { flex: 1; font-size: 16px; font-weight: 700; color: var(--cv-black); }
.cv-row-field .cv-field { flex: 1; }

.cv-select {
    flex: 1;
    height: 44px;
    border: 1px solid var(--cv-neutral-200);
    border-radius: 8px;
    padding: 4px 16px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    color: var(--cv-primary-500);
    background: var(--cv-white);
    cursor: pointer;
}

.cv-select:focus-visible { outline: 2px solid var(--cv-primary-500); }

.cv-alert {
    background: var(--cv-information-200);
    border-radius: 8px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 16px 20px;
}

.cv-alert.cv-warning { background: var(--cv-warning-100); }

.cv-icon-circle {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--cv-information-700);
    color: var(--cv-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
}

.cv-alert.cv-warning .cv-icon-circle { background: var(--cv-neutral-700); }

.cv-alert p { margin: 0; font-size: 14px; color: var(--cv-information-700); line-height: 1.35; }
.cv-alert.cv-warning p { color: var(--cv-neutral-800); }
.cv-alert p b { font-weight: 700; }

hr.cv-divider { border: none; border-top: 1px solid var(--cv-neutral-150); width: 100%; margin: 0; }

.cv-details-title { font-size: 18px; font-weight: 700; color: var(--cv-neutral-700); padding: 8px 0; }
.cv-details-row { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; min-height: 32px; }
.cv-details-row span:first-child { font-size: 15px; color: var(--cv-neutral-700); }
.cv-details-row span:last-child { font-size: 18px; font-weight: 700; color: var(--cv-black); }

.cv-total-box {
    background: var(--cv-success-200);
    border: 1px solid var(--cv-success-400);
    border-radius: 8px;
    padding: 20px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 96px;
}

.cv-total-label { font-size: 18px; font-weight: 600; color: var(--cv-success-800); }
.cv-total-sub { font-size: 14px; font-weight: 400; color: var(--cv-success-800); margin-top: 6px; }
.cv-total-amount { font-size: 26px; font-weight: 700; color: var(--cv-success-950); text-align: right; white-space: nowrap; }

/* TU COMPARACIÓN */
.cv-comparison-section {
    background: var(--cv-white);
    border: 1px solid var(--cv-neutral-150);
    border-radius: 8px;
    max-width: 1184px;
    padding: 28px 48px;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.cv-head { display: flex; flex-direction: column; gap: 8px; }
.cv-head h2 { margin: 0; font-size: 32px; font-weight: 700; color: var(--cv-primary-500); }
.cv-head p { margin: 0; font-size: 16px; color: var(--cv-neutral-700); }

.cv-summary-cards { display: flex; gap: 12px; }

.cv-summary-card {
    flex: 1;
    border: 1px solid var(--cv-neutral-200);
    border-radius: 8px;
    padding: 20px 16px;
    display: flex;
    gap: 16px;
    align-items: flex-start;
    min-height: 120px;
}

.cv-summary-card.cv-electric { background: var(--cv-white); }
.cv-summary-card.cv-gas { background: var(--cv-neutral-100); }
.cv-summary-card.cv-saving { background: var(--cv-success-300); border-color: var(--cv-success-300); }
.cv-summary-card img { width: 48px; height: 48px; flex-shrink: 0; }
.cv-summary-title { font-size: 16px; font-weight: 700; color: var(--cv-neutral-800); }
.cv-summary-amount { font-size: 30px; font-weight: 700; color: var(--cv-black); margin: 10px 0; letter-spacing: -0.4px; }
.cv-summary-card.cv-saving .cv-summary-amount { color: var(--cv-success-950); }
.cv-summary-caption { font-size: 14px; color: var(--cv-neutral-800); }

.cv-bars { display: flex; flex-direction: column; gap: 12px; }
.cv-bar-row { display: flex; align-items: center; gap: 12px; }
.cv-bar-label { width: 150px; font-size: 14px; color: var(--cv-neutral-700); flex-shrink: 0; }
.cv-bar-track { flex: 1; height: 16px; border-radius: 2px; background: var(--cv-neutral-400); overflow: hidden; }
.cv-bar-fill { height: 100%; background: var(--cv-neutral-700); border-radius: 2px; transition: width .2s ease; }
.cv-bar-fill.cv-electric { background: var(--cv-primary-500); }
.cv-bar-value { width: 100px; font-size: 14px; font-weight: 700; color: var(--cv-neutral-700); text-align: right; flex-shrink: 0; }

/* WHY SECTION */
.cv-why-section {
    background: var(--cv-white);
    border: 1px solid var(--cv-neutral-150);
    border-radius: 8px;
    max-width: 1184px;
    padding: 28px 48px;
    display: flex;
    flex-direction: column;
    gap: 28px;
    align-items: center;
}

.cv-why-top { width: 100%; display: flex; align-items: center; gap: 24px; }
.cv-why-text { flex: 1; max-width: 524px; display: flex; flex-direction: column; gap: 12px; }
.cv-why-text h2 { margin: 0; font-size: 32px; font-weight: 700; }
.cv-why-text h2 .cv-pink { color: var(--cv-primary-500); }
.cv-why-text p { margin: 0; font-size: 16px; color: var(--cv-neutral-700); }

.cv-why-image {
    flex: 1;
    height: 212px;
    min-width: 0;
    overflow: hidden;
    border-radius: 8px;
}

.cv-why-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cv-tips-row { display: flex; gap: 12px; width: 100%; }
.cv-tip {
    background: var(--cv-white);
    border: 1px solid var(--cv-neutral-100);
    border-radius: 8px;
    padding: 16px 20px;
    display: flex;
    gap: 16px;
    flex: 1;
}

.cv-tip-number {
    background: var(--cv-primary-500);
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    flex-shrink: 0;
}

.cv-tip-content h3 { margin: 0 0 6px; font-size: 16px; font-weight: 700; color: var(--cv-black); }
.cv-tip-content p { margin: 0; font-size: 14px; color: var(--cv-neutral-700); line-height: 1.35; }

.cv-cta-button {
    background: var(--cv-primary-500);
    border: 1px solid var(--cv-primary-500);
    border-radius: 4px;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    padding: 12px 48px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.cv-cta-button:hover { background: #c8036f; border-color: #c8036f; }

@media (max-width: 1100px) {
    .cv-header-top { padding: 0 24px; }
    .cv-intro, .cv-compare-row, .cv-comparison-section, .cv-why-section {
        width: calc(100% - 48px);
        padding: 24px;
    }
    .cv-compare-row { flex-direction: column; }
    .cv-summary-cards { flex-direction: column; }
    .cv-tips-row { flex-direction: column; }
    .cv-why-top { flex-direction: column; }
    .cv-why-image { width: 100%; height: 180px; }
    .cv-intro-img { display: none; }
    .cv-total-box { flex-direction: column; align-items: flex-start; gap: 8px; }
    .cv-total-amount { text-align: left; }
}

@media (max-width: 600px) {
    .cv-menu a { font-size: 10px; padding: 6px 8px; }
    .cv-intro h1 { font-size: 28px; }
    .cv-card { padding: 20px; }
    .cv-comparison-section, .cv-why-section { padding: 20px; }
    .cv-head h2, .cv-why-text h2 { font-size: 26px; }
    .cv-bar-label { width: 110px; font-size: 12px; }
    .cv-bar-value { width: 80px; font-size: 12px; }
}

/* Botón flotante a la landing de la meta: pegado al borde derecho, siempre visible. */
.cv-float {
    position: fixed;
    right: 0;
    top: 75%;
    transform: translateY(-50%);
    z-index: 900;
    display: block;
    line-height: 0;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.18));
    transition: transform 0.15s ease;
}

.cv-float img {
    display: block;
    width: 65px;
    height: auto;
}

.cv-float:hover {
    transform: translateY(-50%) translateX(-4px);
}

@media (max-width: 767px) {
    .cv-float img {
        width: 44px;
    }
}