.contact-info-block { margin-top:1.5rem; }
.contact-info-block p { font-size:1rem; color:var(--text-muted); line-height:2; }
.contact-info-block a { color:var(--green-dark); text-decoration:none; }
@media (min-width:601px){
.contact-info-block a:hover { text-decoration:underline; }
}

.contact-info-label { font-size:.72rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--green); display:block; margin-top:1.25rem; margin-bottom:.25rem; }
/* El mapa ocupa solo la fila de los datos, así que su alto es exactamente el de
   ese bloque: ni el título ni los botones cuentan. */
.hero-botones { display:flex; gap:1rem; flex-wrap:wrap; margin-top:2.5rem; }

@media(min-width:901px) and (max-width:1440px){ #content > section:not(#hero):not(.vista-fondo)#formulario { padding-top:20px !important; } }
@media(min-width:901px) and (max-width:1440px){ #content .hero-botones { margin-top:11px !important; } }
#formulario .form-group { gap:1rem; }
#formulario form .form-group:last-of-type { margin-bottom:0; }
/* Ritmo del cierre del formulario, igual que en Hazte socio:
   check RGPD -> nota legal (adicional a la politica) -> captcha -> boton (con aire abajo) */
#formulario .form-captcha { margin-top:1.75rem; }
#formulario .form-submit-area { text-align:center; margin-top:2rem; padding-bottom:40px; }
#formulario .form-ko { font-size:.9rem; color:#b23b3b; line-height:1.6; margin-top:1.25rem; }
#formulario .form-ko a { color:#b23b3b; }
/* la ultima seccion cierra con mas aire antes del footer */

.section-header .body-text { max-width:46rem; margin-left:auto; margin-right:auto; }
.contacto-grid { display:grid; grid-template-columns:1fr 1fr; column-gap:4rem; align-items:start; }
.cg-cabecera { grid-column:1; grid-row:1; }
.contacto-grid .contact-info-block { grid-column:1; grid-row:2; }
.cg-botones { grid-column:1; grid-row:3; display:flex; gap:1rem; flex-wrap:wrap; margin-top:1.5rem; }
.cg-mapa { grid-column:2; grid-row:2; display:flex; align-self:stretch; margin-top:1.5rem; }
@media(max-width:900px){
  .contacto-grid { grid-template-columns:1fr; }
  .cg-cabecera, .contacto-grid .contact-info-block, .cg-botones, .cg-mapa { grid-column:1; grid-row:auto; }
  .cg-mapa { margin-top:2.5rem; }
}
.map-placeholder { border-radius:1.25rem; flex:1; height:100%; overflow:hidden; }
.map-placeholder iframe { display:block; }

/* Escritorio: la ultima seccion de esta pagina madre cierra con 240px. */
@media(min-width:1441px){
  #content > section:not(#hero):not(.vista-fondo):has(+ section.vista-fondo) { padding-bottom:120px !important; }
  #content > section:not(#hero):not(.vista-fondo):last-of-type { padding-bottom:240px !important; }
}

/* Consentimientos del formulario: mismo estilo que el de socios. */
#formulario .form-check { display:flex; align-items:flex-start; gap:.6rem; font-size:1rem; color:var(--text-muted); line-height:1.55; cursor:pointer; margin-bottom:.65rem; }
#formulario .form-check input { accent-color:var(--green); width:1rem; height:1rem; flex-shrink:0; margin-top:.15rem; }
#formulario .form-check a { color:var(--green); }
#formulario .form-check:first-of-type { margin-top:32px; }   /* 24px mas de aire tras el mensaje */
#formulario .form-nota { font-size:10px; font-style:italic; color:var(--text-muted); line-height:1.6; margin-top:.5rem; }
#formulario .form-nota a { color:var(--green-dark); }

/* Movil: mismos criterios que en el resto de la web. */
@media(max-width:600px){
  /* .hero-botones traia su propio margin-top:2.5rem (linea 11), que se sumaba
     al margin-bottom:2.5rem de .hero-sub -los margenes no colapsan dentro de
     un flex en columna- y dejaba 80px de hueco en vez de los 40px que tiene
     el resto de heros del sitio (donde el CTA no anade margen propio). Se
     anula aqui, solo en movil, para igualar la distancia a la home. */
  .hero-botones{ margin-top:0; }
  /* El mapa mantiene el mismo padding lateral que el resto de secciones (28px del
     contenedor); antes iba a sangre, pero se pidio igualarlo al resto. */
  #content .cg-mapa{
    height:440px !important;
  }
  #content .cg-mapa > *{ height:100%; }

  /* El boton de WhatsApp sobra en movil: ya esta el flotante de la esquina inferior
     derecha, al que ademas remite el texto del formulario. Se oculta, no se borra del
     HTML, porque en escritorio se mantiene. */
  #content a.btn-outline[href*="wa.me"]{ display:none; }

  /* Cabecera de seccion a 56px de su contenido, como en el resto de la web (los 20px
     son solo cuando lo que sigue es un parrafo). El bloque siguiente traia 24px propios
     que no colapsan con este margen, asi que se anulan para no sumar 80. */
  #content .cg-cabecera{ margin-bottom:20px; }
  #content .cg-cabecera + *{ margin-top:0 !important; }

  /* Formulario con los mismos ajustes que el de Hazte socio: la etiqueta pegada a su
     campo y menos radio para que los campos no parezcan capsulas. */
  #formulario .form-group{ gap:.35rem; margin-bottom:16px; }
  #formulario .form-group input,
  #formulario .form-group select,
  #formulario .form-group textarea{ border-radius:10px; }

  /* 60px mas de aire por arriba y por abajo del boton de llamada. */
  #content .cg-botones{ margin-top:84px; }
  #content .cg-mapa{ margin-top:100px; }

  /* Nota legal del formulario, igual que la de Hazte socio. */
  #content .form-nota{ font-size:10px; }

  /* Rotulos de los datos de contacto al mismo tamano que los tags de seccion. */
  #content .contact-info-label{ font-size:11px; }
}

/* Card de confirmacion de envio: sustituye la pagina "Thank you" de Netlify.
   Aparece sobre la pagina, sin redirigir. Se cierra con la X, al hacer clic fuera,
   o sola a los 6 s si no se cierra a mano. */
.form-ok { position:fixed; inset:0; z-index:2000; display:flex; align-items:center; justify-content:center; padding:1.5rem; background:rgba(30,50,48,.25); -webkit-backdrop-filter:blur(8px) saturate(140%); backdrop-filter:blur(8px) saturate(140%); opacity:0; transition:opacity .45s ease; }
.form-ok[hidden] { display:none; }
.form-ok.is-visible { opacity:1; }
.form-ok-card { position:relative; max-width:24rem; width:100%; padding:2.75rem 2.5rem; text-align:center; border-radius:1.75rem; background:rgba(255,255,255,.55); -webkit-backdrop-filter:blur(30px) saturate(200%); backdrop-filter:blur(30px) saturate(200%); border:1px solid rgba(255,255,255,.65); box-shadow:0 1px 3px rgba(0,0,0,.05), 0 10px 15px rgba(0,0,0,.06), 0 30px 45px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.6); transform:translateY(10px) scale(.98); transition:transform .45s cubic-bezier(.2,.7,.2,1); }
.form-ok.is-visible .form-ok-card { transform:none; }
.form-ok-x { position:absolute; top:.85rem; right:.85rem; width:2rem; height:2rem; display:flex; align-items:center; justify-content:center; padding:0; border:0; border-radius:50%; background:transparent; color:var(--text-muted); cursor:pointer; transition:background .2s, color .2s; }
.form-ok-x svg { width:1.05rem; height:1.05rem; }
.form-ok-x:hover { background:rgba(0,0,0,.06); color:var(--text); }
.form-ok-check { width:3rem; height:3rem; margin:0 auto 1.25rem; display:block; color:var(--green); }
.form-ok-card h3 { font-family:var(--title); font-weight:300; font-size:1.9rem; color:var(--green-dark); margin:0 0 .5rem; }
.form-ok-card p { font-size:1.05rem; line-height:1.6; color:var(--text-muted); margin:0; }
@media (prefers-reduced-motion:reduce) { .form-ok, .form-ok-card { transition:none; } }