.guia-hero { background: #e8f9fc; border-radius: 18px; padding: 2rem; margin-bottom: 3rem; }
.guia-hero h1 { font-size: clamp(1.8rem, 3.5vw, 2.8rem); letter-spacing: -1.4px; line-height: 1.12; }
.guia-intro { color: #52616a; max-width: 580px; margin: 1.5rem 0; }
.guia-imagen { width: 100%; height: 300px; object-fit: cover; border-radius: 16px; }
.guia-seccion { margin: 3rem 0; scroll-margin-top: 100px; }
.guia-seccion h2 { font-size: clamp(1.35rem, 2.5vw, 1.8rem); }
.guia-paso { padding: 1.5rem; border: 1px solid #dfe6e7; border-radius: 16px; background: #fff; }
.guia-paso h3 { font-size: 1.1rem; margin: 1rem 0; }
.guia-paso p { color: #60717a; margin-bottom: 0; line-height: 1.7; }
.guia-numero { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; color: #102a34; background: #e8f9fc; font-weight: 800; }
.guia-paso-marca .guia-numero { background: #fff0e9; }
.guia-icono { color: #075e70; font-size: 1.5rem; margin-bottom: 1rem; }
.guia-ejemplo { border: 1px solid #dfe6e7; border-radius: 16px; overflow: hidden; background: #fff; }
.guia-ejemplo img { width: 100%; height: 180px; object-fit: cover; }
.guia-ejemplo p { color: #60717a; }
@media (max-width: 576px) { .guia-hero { padding: 1.25rem; margin-bottom: 2rem; } .guia-imagen { height: 210px; } }