/* guía «¿qué te conviene?» */
.guia-viv { position: relative; padding: clamp(32px, 5vw, 64px) clamp(16px, 4vw, 48px); }
.guia-viv__form { max-width: 1040px; margin: 0 auto; padding: clamp(20px, 3vw, 36px); border-radius: 28px; background: var(--tinta); color: var(--papel); }
.guia-viv__cab h2 { margin: 0 0 6px; color: var(--papel); }
.guia-viv__cab p { margin: 0 0 20px; opacity: .85; }
.guia-viv__campos { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: end; }
.guia-viv__campo { display: grid; gap: 6px; font-weight: 600; font-size: .95rem; }
.guia-viv__campo select { width: 100%; min-height: 48px; padding: 0 46px 0 20px; border: 1.5px solid transparent; border-radius: 999px; background-color: #fff; color: var(--tinta); font: inherit; font-weight: 400; }
.guia-viv__campo select.falta { border-color: #ffb4a8; }
.guia-viv .boton--fuerte { min-height: 48px; background: #fff; color: var(--rojo-fuerte); }
.guia-viv .boton--fuerte:hover { background: var(--papel-2); }
.guia-viv__res { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .22); }
.guia-viv__res span { flex: 1 1 280px; }
.guia-viv__res .boton--fuerte { background: #fff; color: var(--rojo-fuerte); }
/* flechitas animadas que apuntan a la guía */
.guia-viv__flecha { display: none; justify-content: center; color: var(--acento2, #B04830); pointer-events: none; }
.guia-viv__flecha--arriba, .guia-viv__flecha--abajo { display: flex; margin: 0 auto 8px; }
.guia-viv__flecha--abajo { margin: 8px auto 0; transform: rotate(180deg); }
.guia-viv__flecha svg { animation: flechita 1.5s ease-in-out infinite; }
.guia-viv__flecha--abajo svg { animation-name: flechita; }
@keyframes flechita { 0%, 100% { transform: translateY(-4px); opacity: .55; } 50% { transform: translateY(5px); opacity: 1; } }
@media (min-width: 1180px) {
  .guia-viv__flecha--arriba, .guia-viv__flecha--abajo { display: none; }
  .guia-viv__flecha--izq, .guia-viv__flecha--der { display: flex; position: absolute; top: 50%; margin-top: -21px; }
  .guia-viv__flecha--izq { left: clamp(16px, 3vw, 64px); transform: rotate(-90deg); }
  .guia-viv__flecha--der { right: clamp(16px, 3vw, 64px); transform: rotate(90deg); }
}
@media (prefers-reduced-motion: reduce) { .guia-viv__flecha svg { animation: none; } }
@media (max-width: 760px) { .guia-viv__campos { grid-template-columns: 1fr; } .guia-viv .boton--fuerte { width: 100%; } }