/* ============================================================
   Guía Subaru México - estilos propios de /guia-subaru-mexico/
   Depende de las variables de css/style.css (--subaru-*).
   ============================================================ */
body { background: #fff; }

.guia-hero { background: linear-gradient(135deg, var(--subaru-blue-dark), var(--subaru-blue)); color: #fff; padding: 6.5rem 0 3rem; }
.guia-hero h1 { font-weight: 800; font-size: clamp(1.6rem, 4vw, 2.6rem); }
.guia-hero p { color: rgba(255,255,255,.9); max-width: 70ch; }
.guia-hero .badge-guia { display: inline-block; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28); border-radius: 999px; padding: .3rem .85rem; font-size: .8rem; font-weight: 600; }

.guia-datos { background: #f5f7fb; border: 1px solid #e3e8f2; border-radius: 14px; padding: 1.5rem; }
.guia-datos h2 { font-size: 1.15rem; font-weight: 800; color: var(--subaru-blue); }
.guia-datos dt { font-weight: 700; font-size: .82rem; text-transform: uppercase; letter-spacing: .03em; color: #5a6478; margin-top: .85rem; }
.guia-datos dd { margin: .15rem 0 0; font-size: .95rem; }

.guia-toc { background: #fff; border: 1px solid #e3e8f2; border-radius: 14px; padding: 1.25rem 1.5rem; }
.guia-toc > ul { list-style: none; padding-left: 0; margin: 0; }
.guia-toc .toc-group > a { font-weight: 700; color: var(--subaru-blue); text-decoration: none; display: block; margin-top: .9rem; }
.guia-toc .toc-group > a:hover { text-decoration: underline; }
.guia-toc .toc-group ul { list-style: none; padding-left: .9rem; margin: .35rem 0 0; border-left: 2px solid #e3e8f2; }
.guia-toc .toc-group ul li { margin: .2rem 0; }
.guia-toc .toc-group ul a { color: #3b4457; text-decoration: none; font-size: .9rem; }
.guia-toc .toc-group ul a:hover { color: var(--subaru-blue); text-decoration: underline; }

/* scroll-margin: el navbar es fixed y taparia el titulo al saltar a un ancla */
.guia-grupo { margin-top: 3rem; scroll-margin-top: 90px; }
.guia-grupo-title { font-weight: 800; font-size: clamp(1.3rem, 2.6vw, 1.8rem); color: #111; padding-bottom: .6rem; border-bottom: 3px solid var(--subaru-blue); }
.guia-qa { margin-top: 2.25rem; scroll-margin-top: 90px; }
.guia-q { font-weight: 700; font-size: clamp(1.05rem, 2vw, 1.3rem); color: var(--subaru-blue-dark); }
.guia-qa p { font-size: 1rem; line-height: 1.75; color: #2b3242; }

.guia-quick { background: #eef3ff; border-left: 4px solid var(--subaru-accent); border-radius: 0 10px 10px 0; padding: .9rem 1.1rem; margin: .75rem 0 1.1rem; }
.guia-quick-label { display: block; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--subaru-blue); margin-bottom: .3rem; }
.guia-quick p { margin: 0; font-weight: 600; color: #16233d; }
.guia-resumen { background: #f7f8fa; border-radius: 10px; padding: .8rem 1.05rem; font-size: .95rem !important; color: #3b4457 !important; }

.guia-cta { background: var(--subaru-blue-dark); color: #fff; border-radius: 16px; padding: 2rem; }
.guia-cta h2 { font-weight: 800; font-size: 1.5rem; }

.guia-suc { border: 1px solid #e3e8f2; border-radius: 12px; padding: 1rem 1.15rem; height: 100%; }
.guia-suc h3 { font-size: 1rem; font-weight: 700; color: var(--subaru-blue); margin-bottom: .35rem; }
.guia-suc p { font-size: .9rem; color: #4a5468; margin: 0; }

@media (max-width: 991.98px) { .guia-hero { padding-top: 5rem; } }