/* ==========================================================================
   CHUBUT EXPLORERS · como-llegar.css
   Estilos de la página "Cómo llegar y contacto" (como-llegar.html)
   ========================================================================== */
.cl { padding-top: var(--alto-header); }
.cl-hero {
  min-height: 46vh;
  background-image: linear-gradient(180deg, rgba(15,25,18,.35) 0%, rgba(15,25,18,.78) 100%),
    url('../assets/images/hero-camioneta-raptor-montana-nevada-esquel.jpg');
}
.cl-bloque { padding: clamp(48px, 7vw, 80px) 24px; }
.cl-bloque--alt { background: var(--crema-2); }
.cl-wrap { max-width: 980px; margin: 0 auto; }
.cl-h2 { font-weight: 800; font-size: clamp(26px, 3.6vw, 38px); color: var(--verde-bosque); margin: 0 0 26px; }
.cl-h3 { font-weight: 800; font-size: 20px; color: var(--verde-bosque); margin: 0 0 10px; }
.cl-text { color: #3c443a; font-size: 17px; line-height: 1.65; margin: 0 0 18px; }

.cl-vias { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.cl-via { background: #fff; border-radius: 14px; padding: 26px; box-shadow: var(--sombra-card); }
.cl-via__t { font-family: var(--fuente-titulos); font-weight: 800; font-size: 20px; color: var(--verde-bosque); margin: 0 0 12px; }
.cl-via__d { color: var(--texto-suave); font-size: 15.5px; line-height: 1.6; margin: 0; }

.cl-contacto { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin: 8px 0 34px; }
.cl-card { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; text-decoration: none; background: #fff; border: 1px solid #e7e1d4; border-radius: 16px; padding: 28px 20px; box-shadow: var(--sombra-card); transition: transform .2s ease, box-shadow .2s ease; }
.cl-card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(20,40,25,.15); }
.cl-card__ic { font-size: 32px; }
.cl-card__t { font-family: var(--fuente-titulos); font-weight: 800; color: var(--verde-bosque); font-size: 18px; }
.cl-card__d { color: var(--texto-suave); font-size: 14.5px; }
.cl-zona { background: #fff; border-radius: 14px; padding: 26px; box-shadow: var(--sombra-card); margin-bottom: 30px; }
.cl-cta { text-align: center; }