/* La paleta (--plan-auto-*, .bg-cream, .text-cream, etc.) vive en main.css
   porque tambien la usa la seccion Plan Auto+ de la home. */

/* --- tamanos que no estan en la escala de Bootstrap --------------------- */
/* la escala llega a fs-1 = 40px; el diseno usa 46, 36, 22 y 14 */
.fs-46 { font-size: 46px; line-height: 46px; }
.fs-36 { font-size: 36px; line-height: 1.28; }
.fs-22 { font-size: 22px; line-height: 1; }
.fs-14 { font-size: 14px; line-height: 1.3; }

/* --- espaciado de seccion (Bootstrap solo llega a py-5 = 3rem) ---------- */
.py-6 { padding-top: 6rem !important; padding-bottom: 6rem !important; }
.pb-6 { padding-bottom: 6rem !important; }

/* --- main.css asigna "Ebro Display" a todos los encabezados; en el diseno
       solo la lleva el titular del hero (h1) ----------------------------- */
body.page-plan-auto-2026 main h2,
body.page-plan-auto-2026 main h3 {
    font-family: "Ebro", system-ui, -apple-system, sans-serif;
}

/* --- hero (misma convencion que .s700phev, .about, etc. de main.css) ---- */
.plan-auto-hero {
    min-height: 600px;
    background-image: url("/assets/img/plan-auto-2026/hero.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* en esta landing el menu va en crema, como en el diseno */
body.page-plan-auto-2026 .navbar { background-color: var(--plan-auto-cream) !important; }

/* --- imagenes ----------------------------------------------------------- */
.plan-auto-figure { height: 582px; }
.plan-auto-modelo { max-height: 183px; }

/* --- acordeon: se tematiza con las variables del propio componente ------ */
.plan-auto-faq {
    --bs-accordion-bg: transparent;
    --bs-accordion-color: var(--plan-auto-cream);
    --bs-accordion-border-color: var(--plan-auto-cream);
    --bs-accordion-border-width: 1px;
    --bs-accordion-btn-color: var(--plan-auto-cream);
    --bs-accordion-btn-bg: transparent;
    --bs-accordion-btn-padding-x: .75rem;
    --bs-accordion-btn-padding-y: 1.5rem;
    --bs-accordion-btn-focus-box-shadow: none;
    --bs-accordion-active-color: var(--plan-auto-cream);
    --bs-accordion-active-bg: transparent;
    --bs-accordion-body-padding-x: .75rem;
    --bs-accordion-body-padding-y: 0;
    --bs-accordion-btn-icon-transform: rotate(0deg);
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23F5F3EB'%3e%3cpath d='M8 1a.5.5 0 0 1 .5.5v6h6a.5.5 0 0 1 0 1h-6v6a.5.5 0 0 1-1 0v-6h-6a.5.5 0 0 1 0-1h6v-6A.5.5 0 0 1 8 1z'/%3e%3c/svg%3e");
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23F5F3EB'%3e%3cpath d='M1.5 8a.5.5 0 0 1 .5-.5h12a.5.5 0 0 1 0 1H2a.5.5 0 0 1-.5-.5z'/%3e%3c/svg%3e");
}

.plan-auto-faq .accordion-body {
    color: var(--plan-auto-cream);
    padding-bottom: 1.5rem;
}

/* ================================================== responsive ========== */
@media (max-width: 991.98px) {
    .plan-auto-figure { height: 420px; }
}

@media (max-width: 767.98px) {
    .plan-auto-hero { min-height: 420px; }
    .plan-auto-figure { height: 320px; }
    .fs-46 { font-size: 32px; line-height: 34px; }
    .fs-36 { font-size: 28px; }
    .py-6 { padding-top: 4rem !important; padding-bottom: 4rem !important; }
    .pb-6 { padding-bottom: 4rem !important; }
    .plan-auto-faq { --bs-accordion-btn-padding-y: 1rem; }
    .plan-auto-faq .fs-22 { font-size: 18px; line-height: 1.2; }
}