/* ==========================================================
   «Por qué elegirnos» y «¿Por dónde empezar?» (inicio)
   Colores corporativos: verde #003721, dorado #f7b100, negro y blanco.
   ========================================================== */
.why-sec { background: #fff; }
.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.why-card { position: relative; padding: 26px 22px 24px; border: 1px solid var(--line); border-radius: 24px; background: #fff; transition: transform .35s var(--ease), box-shadow .35s, border-color .35s; }
.why-card:hover { transform: translateY(-6px); border-color: rgba(247,177,0,.7); box-shadow: 0 30px 60px -34px rgba(20,20,20,.28); }
.why-card__ic { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 18px; border-radius: 16px; background: #003721; color: #fff; transition: background .3s, color .3s, transform .4s var(--ease); }
.why-card:hover .why-card__ic { background: #f7b100; color: #141414; transform: rotate(-6deg) scale(1.06); }
.why-card__ic svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.why-card h3 { margin: 0 0 8px; font-size: 25px; line-height: 1.05; color: var(--ink); }
.why-card p { margin: 0; font-size: 18px; line-height: 1.6; color: #6a6a64; }

.why-cta { display: flex; align-items: center; justify-content: space-between; gap: 20px 32px; flex-wrap: wrap; margin-top: 22px; padding: 22px 28px; border-radius: 24px; background: #003721; color: #fff; }
.why-cta p { margin: 0; font-size: 20px; line-height: 1.5; color: rgba(255,255,255,.9); }
.why-cta p b { color: #f7b100; font-size: 23px; margin-right: 6px; }

.route-sec { background: var(--soft); }
.route-box { max-width: 900px; margin-inline: auto; padding: clamp(22px, 4vw, 42px); border-radius: 28px; background: #fff; border: 1px solid var(--line); box-shadow: 0 30px 60px -40px rgba(20,20,20,.25); }
.route-q + .route-q { margin-top: 26px; }
.route-label { margin: 0 0 12px; font-size: 14.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #003721; }
.route-label--light { color: #f7b100; }
.route-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.route-chips button { padding: 11px 18px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--ink); font: 600 14.5px inherit; font-family: inherit; cursor: pointer; transition: background .2s, color .2s, border-color .2s, transform .2s; }
.route-chips button:hover { border-color: #003721; transform: translateY(-1px); }
.route-chips button[aria-checked="true"] { background: #003721; border-color: #003721; color: #fff; }
.route-result { margin-top: 28px; padding: 26px 28px; border-radius: 22px; background: #003721; color: #fff; animation: ruta-in .5s var(--ease); }
.route-result[hidden] { display: none; }
.route-result h3 { margin: 0 0 8px; font-size: clamp(28px, 3vw, 38px); line-height: 1; color: #fff; }
.route-result p { margin: 0 0 18px; max-width: 640px; color: rgba(255,255,255,.88); line-height: 1.6; }
@keyframes ruta-in { from { opacity: 0; transform: translateY(12px); } }

@media (max-width: 1000px) { .why-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
  .why-grid { grid-template-columns: 1fr; }
  .why-cta { padding: 20px; }
  .why-cta .btn { width: 100%; justify-content: center; }
  .route-chips button { font-size: 16.5px; padding: 10px 14px; }
}