/* ═══ CONTACTO ═══
   La página se arma con el mismo idioma que las de servicio: encabezado con
   foto y velo, secciones claras con aire, una franja animada que corta la
   lectura y un cierre verde con la acción principal. Antes era un solo bloque
   verde oscuro con todo adentro, y al lado del resto del sitio se veía como
   de otra casa. */

/* ══ 1 · ENCABEZADO ══ */
.contacto-hero{
  position:relative;overflow:hidden;
  background:var(--verde-oscuro);color:#fff;
  /* El margen de arriba tiene que dejar pasar la barra fija, pero en una
     pantalla baja —un celular acostado— 150 px se comen media pantalla: por
     eso crece con el alto y no solo con el ancho. */
  padding:clamp(92px, 16vh, 150px) var(--margen-lateral) clamp(52px, 9vw, 96px);
}
.contacto-hero-fondo{position:absolute;inset:0;z-index:0;display:block}
.contacto-hero-fondo img{
  width:100%;height:100%;object-fit:cover;object-position:center 58%;
}
/* La foto trae cielo y camisas claras. Medido sobre el peor píxel bajo el
   texto, con este velo el párrafo queda por encima del mínimo legible. */
.contacto-hero-velo{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(
    100deg,
    rgba(12,43,25,.9) 0%,
    rgba(12,43,25,.84) 45%,
    rgba(12,43,25,.74) 78%,
    rgba(12,43,25,.7) 100%
  );
}
.contacto-hero-content{
  position:relative;z-index:2;
  max-width:var(--ancho-contenido);margin-inline:auto;
}
.contacto-hero .section-eyebrow{color:var(--verde-claro)}
.contacto-hero h1{
  font-family:'Montserrat',sans-serif;
  font-size:clamp(2.25rem, 5.2vw, 3.75rem);
  line-height:1.05;font-weight:900;letter-spacing:-.02em;
}
.contacto-hero h1 span{color:#fff;text-decoration:underline;text-decoration-color:var(--verde-agricola);text-decoration-thickness:.08em;text-underline-offset:.12em}
.contacto-hero-sub{
  margin-top:18px;max-width:34rem;
  color:#fff;font-size:1rem;
}
.contacto-acciones{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.contacto-acciones--centradas{justify-content:center}
.btn-icono{display:inline-flex;width:18px;height:18px}
.btn-icono svg{width:100%;height:100%}
/* El botón de contorno vive sobre verde oscuro en esta página: el borde y la
   letra van en blanco, que sobre ese fondo es lo único que se lee. */
.btn-secondary--claro{color:#fff;border-color:rgba(255,255,255,.6)}
.btn-secondary--claro:hover{background:#fff;color:var(--verde-oscuro);border-color:#fff}

/* En el celular más angosto —320 px— el titular a 38 px y el párrafo a 17
   se comían la pantalla entera antes de que se viera un botón. Y los botones
   a lo ancho, uno debajo del otro: a ese ancho, a medias y centrados, quedan
   saltones y con menos sitio para el dedo. */
@media (max-width:420px){
  .contacto-hero h1{font-size:2.0625rem}
  .contacto-hero-sub{font-size:0.9375rem}
  .contacto-acciones .btn-primary,
  .contacto-acciones .btn-secondary{width:100%;justify-content:center}
}

/* ══ 2 · SECCIONES ══ */
.contacto-seccion{padding:var(--ritmo-seccion) var(--margen-lateral)}
.contacto-seccion--gris{background:var(--gris-claro)}
.bloque-titulo{max-width:40rem;margin-bottom:clamp(28px, 4vw, 44px)}
.bloque-titulo .section-h2{margin-bottom:0}
.bloque-titulo-sub,
.sedes-cobertura{
  margin-top:14px;color:var(--gris-texto);font-size:0.9375rem;line-height:1.7;
}

/* ══ 3 · CANALES ══ */
.canales{display:grid;grid-template-columns:1fr;gap:clamp(14px, 2.2vw, 22px)}
/* Tres escalones y no uno: en la tableta las tarjetas a una columna quedaban
   de 676 px de ancho con cuatro líneas de texto, que es una franja, no una
   tarjeta. Las redes van siempre a lo ancho —en un tercio de fila los
   enlaces se apretaban en varios renglones—. */
@media (min-width:620px){
  .canales{grid-template-columns:1fr 1fr}
  .canal--redes{grid-column:1 / -1}
  .canal--redes .canal-extra{max-width:34rem}
}
@media (min-width:860px){
  /* La de WhatsApp lleva dos números y una línea más: pide algo más de sitio. */
  .canales{grid-template-columns:1.15fr 1fr}
}
.canal{
  display:flex;flex-direction:column;gap:10px;
  background:#fff;
  border:1px solid var(--line);border-top:5px solid var(--verde-agricola);
  border-radius:16px;padding:30px 26px;
  text-decoration:none;color:inherit;
  transition:transform .25s, box-shadow .25s;
}
a.canal:hover{transform:translateY(-6px);box-shadow:0 30px 60px -28px rgba(12,43,25,.3)}
.canal-icono{
  width:52px;height:52px;border-radius:14px;
  display:grid;place-items:center;
  background:var(--verde-claro-fondo, rgba(77,149,74,.12));
  color:var(--verde-texto);margin-bottom:8px;
}
.canal-icono svg{width:26px;height:26px}
.canal-lbl{
  font-size:0.6875rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gris-texto);font-weight:800;
}
.canal-val{
  font-family:'Montserrat',sans-serif;
  font-size:1.0625rem;font-weight:800;color:var(--verde-oscuro);
  word-break:break-word;
}
.canal-val--chico{font-size:0.9375rem}
.canal-extra{font-size:0.8125rem;color:var(--gris-texto);line-height:1.6}
.canal-ir{
  margin-top:auto;padding-top:16px;
  color:var(--verde-texto);
  font-size:0.75rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
}

/* Las redes van dentro de su tarjeta, cada una con su propio enlace: por eso
   esa tarjeta no es un enlace entero como las otras dos. */
.redes{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.red{
  display:inline-flex;align-items:center;gap:8px;
  min-height:44px;padding:10px 16px;border-radius:12px;
  border:1px solid var(--line);background:#fff;
  text-decoration:none;color:var(--verde-oscuro);
  font-size:0.8125rem;font-weight:800;
  transition:background .2s, border-color .2s, transform .2s;
}
.red-icono{display:inline-flex;width:18px;height:18px;color:var(--verde-texto)}
.red-icono svg{width:100%;height:100%}
.red:hover{
  background:rgba(77,149,74,.1);
  border-color:var(--verde-agricola);
  transform:translateY(-2px);
}

/* ══ 4 · FRANJA DE LA RUTA ══
   Un pin por sede, puestos por la vista sobre el trazo. Mismo idioma que las
   franjas de los servicios: la misma retícula, los mismos verdes y un bucle
   que empieza y termina igual. 11 s, que no es múltiplo de ninguna otra. */
.franja-ruta{background:var(--verde-oscuro);overflow:hidden;line-height:0}
/* El dibujo se recorta por los lados para llenar el ancho: en el celular se
   ve el tramo del medio con su pin, y en escritorio la ruta entera. El alto
   crece con el ancho pero se para a los 190 px. */
.franja-ruta svg{width:100%;height:clamp(150px, 16vw, 190px);display:block}
.ruta-reticula{animation:rutaReticula 9s linear infinite}
@keyframes rutaReticula{to{transform:translateX(-70px)}}

.ruta-trazo{stroke-dasharray:1;animation:rutaTrazar 11s ease-in-out infinite}
@keyframes rutaTrazar{
  0%  {stroke-dashoffset:1}
  26% {stroke-dashoffset:0}
  88% {stroke-dashoffset:0}
  100%{stroke-dashoffset:1}
}

.ruta-pin{
  transform-box:fill-box;transform-origin:center bottom;
  opacity:0;animation:rutaPin 11s ease-out infinite;
}
.ruta-pin:nth-child(1){animation-delay:1.1s}
.ruta-pin:nth-child(2){animation-delay:2.1s}
.ruta-pin:nth-child(3){animation-delay:3.1s}
.ruta-pin:nth-child(4){animation-delay:4.1s}
.ruta-pin:nth-child(5){animation-delay:5.1s}
.ruta-pin:nth-child(6){animation-delay:6.1s}
@keyframes rutaPin{
  0%      {opacity:0;transform:translateY(-26px) scale(.7)}
  6%      {opacity:1;transform:translateY(0) scale(1.12)}
  10%,78% {opacity:1;transform:translateY(0) scale(1)}
  86%,100%{opacity:0;transform:translateY(-26px) scale(.7)}
}

.ruta-onda{
  transform-box:fill-box;transform-origin:center;
  animation:rutaOnda 2.6s ease-out infinite;
}
.ruta-onda:nth-child(2){animation-delay:.8s}
.ruta-onda:nth-child(3){animation-delay:1.6s}
.ruta-onda:nth-child(4){animation-delay:2.4s}
@keyframes rutaOnda{
  0%  {opacity:.55;transform:scale(.4)}
  100%{opacity:0;transform:scale(1.9)}
}

.ruta-rotulo{opacity:0;animation:rutaRotulo 11s ease-out infinite}
.ruta-rotulo:nth-child(1){animation-delay:1.4s}
.ruta-rotulo:nth-child(2){animation-delay:2.4s}
.ruta-rotulo:nth-child(3){animation-delay:3.4s}
.ruta-rotulo:nth-child(4){animation-delay:4.4s}
.ruta-rotulo:nth-child(5){animation-delay:5.4s}
.ruta-rotulo:nth-child(6){animation-delay:6.4s}
@keyframes rutaRotulo{
  0%,2%   {opacity:0}
  8%,78%  {opacity:.85}
  86%,100%{opacity:0}
}

/* Con el movimiento desactivado, la franja se muestra hecha: el trazo
   completo y los pines puestos, que es como queda el mapa. */
@media (prefers-reduced-motion: reduce){
  .ruta-trazo{stroke-dashoffset:0}
  .ruta-pin,.ruta-rotulo{opacity:1}
  .ruta-onda{opacity:0}
}

/* ══ 5 · SEDES ══ */
.sedes-grid{display:grid;grid-template-columns:1fr;gap:clamp(14px, 2.2vw, 22px)}
@media (min-width:560px){
  .sedes-grid{grid-template-columns:repeat(2, 1fr)}
  /* Si son impares, la última cierra la fila a lo ancho en vez de quedarse
     sola a media fila. Vale para tres sedes y para las que vengan. */
  .sedes-grid .sede-card:last-child:nth-child(odd){grid-column:1 / -1}
}
@media (min-width:900px){
  .sedes-grid{grid-template-columns:repeat(3, 1fr)}
  .sedes-grid .sede-card:last-child:nth-child(odd){grid-column:auto}
}
.sede-card{
  background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:28px 24px;
}
.sede-icon{
  width:44px;height:44px;border-radius:12px;
  display:grid;place-items:center;
  background:rgba(77,149,74,.12);color:var(--verde-texto);
  margin-bottom:12px;
}
.sede-icon svg{width:22px;height:22px}
.sede-ciudad{
  font-family:'Montserrat',sans-serif;
  font-size:1.125rem;font-weight:800;color:var(--verde-oscuro);
}
.sede-region{font-size:0.8125rem;color:var(--gris-texto);margin-top:2px}
.sede-nota{
  margin-top:10px;
  font-size:0.6875rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--verde-texto);font-weight:800;
}
.sedes-cobertura{
  margin-top:clamp(22px, 3vw, 34px);padding-top:22px;
  border-top:1px solid var(--line);
  max-width:46rem;
}
.sedes-cobertura strong{color:var(--verde-texto)}

/* ══ 6 · QUÉ PASA DESPUÉS ══ */
.contacto-pasos{display:grid;grid-template-columns:1fr;gap:clamp(16px, 2.4vw, 26px)}
@media (min-width:560px){
  .contacto-pasos{grid-template-columns:repeat(2, 1fr)}
  .contacto-paso:last-child:nth-child(odd){grid-column:1 / -1}
}
@media (min-width:900px){
  .contacto-pasos{grid-template-columns:repeat(3, 1fr)}
  .contacto-paso:last-child:nth-child(odd){grid-column:auto}
}
.contacto-paso{
  background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:28px 24px;
}
.contacto-paso-num{
  width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--verde-oscuro);color:#fff;
  font-family:'Montserrat',sans-serif;font-weight:800;
  margin-bottom:16px;
}
.contacto-paso h3{
  font-family:'Montserrat',sans-serif;
  font-size:1.0625rem;font-weight:800;color:var(--verde-oscuro);
  margin-bottom:8px;
}
.contacto-paso p{font-size:0.875rem;color:var(--gris-texto);line-height:1.7}

/* ══ 7 · CIERRE ══ */
.contacto-cierre{
  position:relative;overflow:hidden;
  background:var(--verde-oscuro);color:#fff;text-align:center;
  padding:var(--ritmo-seccion) var(--margen-lateral);
}
.contacto-cierre-franja{
  position:absolute;bottom:-120px;right:-180px;
  width:700px;height:200px;
  background:var(--verde-agricola);
  transform:rotate(-25deg);opacity:.25;
  pointer-events:none;
}
.contacto-cierre .section-h2{color:#fff;margin-bottom:14px}
.contacto-cierre .section-h2 span{color:var(--verde-claro)}
.contacto-cierre-sub{
  color:rgba(255,255,255,.88);max-width:34rem;
  margin:0 auto 26px;font-size:0.9375rem;
}