.contact-page,
.support-page {
  --ec-blue: #173574;
  --ec-blue-deep: #101f4f;
  --ec-purple: #7042a4;
  --ec-pink: #c94f9f;
  --ec-surface: #f4f7ff;
  min-height: 100vh;
  color: var(--ec-blue);
  background: var(--ec-surface);
}

.contact-page .interior-header,
.support-page .interior-header {
  height: 102px;
  min-height: 102px;
  padding: 9px clamp(28px, 4.2vw, 68px);
  display: grid;
  grid-template-columns: minmax(280px, 1fr) auto;
  align-items: center;
  gap: 32px;
  background: linear-gradient(90deg, #adb8dc 0%, #6673a7 45%, #26376f 100%);
}
.contact-page .interior-header .official-logo,
.support-page .interior-header .official-logo {
  width: 300px;
  height: 80px;
  display: block;
  position: relative;
  overflow: hidden;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: none !important;
}
.contact-page .interior-header .official-logo img,
.support-page .interior-header .official-logo img {
  width: 177.5%;
  max-width: none;
  height: auto;
  position: absolute;
  left: -26.2%;
  top: -160.4%;
  display: block;
  object-fit: initial;
  background: transparent !important;
  filter: none !important;
}
.contact-page .interior-nav,
.support-page .interior-nav { display: flex; gap: clamp(12px, 1.35vw, 24px); }
.contact-page .interior-nav a,
.support-page .interior-nav a { color: #fff; font: 700 12px "Open Sans", sans-serif; white-space: nowrap; }
.contact-page .interior-nav a:hover,
.contact-page .interior-nav a.active,
.support-page .interior-nav a:hover,
.support-page .interior-nav a.active { color: #ffd5f1; }

.connection-hero,
.support-hero {
  min-height: 420px;
  padding: clamp(70px, 8vw, 120px) clamp(28px, 9vw, 150px);
  display: flex;
  align-items: center;
  color: #fff;
  background:
    radial-gradient(circle at 78% 22%, rgba(218, 103, 186, .38), transparent 30%),
    radial-gradient(circle at 13% 88%, rgba(119, 134, 207, .42), transparent 35%),
    linear-gradient(135deg, #101f4f 0%, #314b91 56%, #6d429f 100%);
}
.support-hero {
  min-height: 520px;
  background-image:
    linear-gradient(90deg, rgba(7, 16, 34, .88) 0%, rgba(8, 18, 38, .68) 40%, rgba(8, 18, 38, .22) 69%, rgba(8, 18, 38, .06) 100%),
    url("apoya-hero-biblia-arbol.jpeg");
  background-size: cover;
  background-position: center 60%;
  background-repeat: no-repeat;
}
.contact-page .connection-hero {
  min-height: 460px;
  background-image:
    linear-gradient(90deg, rgba(19, 34, 68, .92) 0%, rgba(25, 42, 81, .74) 38%, rgba(25, 42, 81, .18) 67%, rgba(25, 42, 81, .04) 100%),
    url("contacto-hero-comunidad.jpeg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.contact-page .connection-hero > div { max-width: 760px; }
.support-hero-copy { max-width: 720px; }
.connection-hero > div,
.support-hero-copy { max-width: 900px; }
.connection-kicker { margin: 0 0 14px; color: #f3b5df; font: 800 11px "Open Sans", sans-serif; letter-spacing: .18em; text-transform: uppercase; }
.connection-hero h1,
.support-hero h1 { margin: 0 0 22px; font: 600 clamp(56px, 7vw, 96px)/1 "Playfair Display", serif; letter-spacing: -.045em; }
.connection-hero h1::after,
.support-hero h1::after { content: ""; width: 88px; margin-top: 22px; display: block; border-bottom: 3px solid #ef87c9; }
.connection-hero p:last-child,
.support-hero p:last-child { max-width: 800px; margin: 0; color: #f7f6ff; font: 500 clamp(17px, 1.45vw, 21px)/1.75 "Merriweather", serif; }

.connection-options,
.support-content { padding: clamp(62px, 7vw, 104px) clamp(24px, 7vw, 116px); }
.connection-heading,
.support-intro { max-width: 900px; margin: 0 auto 46px; text-align: center; }
.connection-heading h2,
.support-intro h2 { margin: 0; color: var(--ec-blue); font: 600 clamp(38px, 4vw, 60px)/1.12 "Playfair Display", serif; }
.support-intro > p:last-child { color: #465383; font: 400 16px/1.8 "Merriweather", serif; }
.support-giving-choice { max-width: 900px; margin: 0 auto; }
.support-giving-visual {
  width: 100%;
  height: clamp(260px, 31vw, 420px);
  margin: 0 0 26px;
  overflow: hidden;
  background: #17243e;
  border: 1px solid rgba(63,78,139,.16);
  border-radius: 24px;
  box-shadow: 0 20px 50px rgba(38,48,101,.12);
}
.support-giving-visual img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center 58%; }
.connection-grid,
.support-options { max-width: 1260px; margin: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.connection-card,
.support-options article { min-height: 330px; padding: clamp(28px, 3vw, 42px); display: flex; flex-direction: column; align-items: flex-start; background: rgba(255,255,255,.9); border: 1px solid rgba(63,78,139,.16); border-radius: 24px; box-shadow: 0 20px 50px rgba(38,48,101,.08); }
.connection-card.featured { background: linear-gradient(145deg, #fff7fd, #f2f1ff); border-color: rgba(190,69,153,.24); }
.contact-page .connection-card { min-height: 350px; padding: 24px; }
.connection-card-image {
  width: 100%;
  height: 112px;
  display: block;
  margin: 0 0 20px;
  object-fit: cover;
  object-position: center;
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(39,53,103,.16);
}
.contact-page .connection-card:nth-child(1) .connection-card-image { object-position: center 58%; }
.contact-page .connection-card:nth-child(2) .connection-card-image { object-position: center 48%; }
.contact-page .connection-card:nth-child(3) .connection-card-image { object-position: center 50%; }
.contact-page .connection-card h3 { font-size: clamp(24px, 1.9vw, 30px); }
.contact-page .connection-card.featured h3 { white-space: nowrap; font-size: clamp(22px, 1.75vw, 28px); }
.connection-icon,
.support-options article > span { width: 54px; height: 54px; display: grid; place-items: center; margin-bottom: 22px; color: #fff; background: linear-gradient(145deg, var(--ec-purple), var(--ec-pink)); border-radius: 50%; font: 700 24px "Open Sans", sans-serif; box-shadow: 0 11px 26px rgba(92,57,150,.2); }
.connection-card h3,
.support-options h3 { margin: 0 0 12px; color: var(--ec-blue); font: 600 clamp(26px, 2.2vw, 34px)/1.16 "Playfair Display", serif; }
.connection-card p,
.support-options p { margin: 0 0 24px; color: #505b86; font: 500 15px/1.7 "Open Sans", sans-serif; }
.connection-button,
.support-options button { margin-top: auto; padding: 13px 21px; color: #fff; background: linear-gradient(105deg, #67439e, #b44399); border: 0; border-radius: 999px; font: 800 13px "Open Sans", sans-serif; cursor: pointer; box-shadow: 0 11px 24px rgba(84,53,142,.2); }
.connection-button:hover,
.connection-button:focus-visible { transform: translateY(-2px); filter: brightness(1.06); }
.connection-email { margin: 38px 0 0; color: #465383; text-align: center; font: 600 15px "Open Sans", sans-serif; }
.connection-email a { color: var(--ec-purple); font-weight: 800; }

/* Grupo de Vida vive ahora como una experiencia completa dentro de Contáctanos. */
.contact-page .visit-dialog { width: min(1040px, calc(100vw - 32px)); overflow-x: hidden; overflow-y: auto; }
.contact-page .visit-dialog-form { padding: 0; overflow: hidden; background: #f7f7fd; }
.contact-page .visit-dialog .life-dialog-close { z-index: 5; top: 18px; right: 20px; }
.visit-dialog-showcase { min-height: 330px; display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(350px, .82fr); background: #fff; }
.visit-dialog-showcase > * { min-width: 0; }
.visit-dialog-photo { min-height: 330px; background-color: #26376f; background-image: url("grupo-de-vida-hero-juan-5-39-v2.png"); background-position: left center; background-size: cover; background-repeat: no-repeat; }
.visit-dialog-welcome { padding: 46px 42px 38px; display: flex; flex-direction: column; justify-content: center; background: radial-gradient(circle at 100% 0, rgba(196,82,166,.14), transparent 38%), linear-gradient(145deg,#fff,#f4f1fb); }
.visit-dialog-invitation { margin: 0 0 6px; color: #7447a4 !important; font: italic 600 29px/1.05 "Playfair Display",serif !important; }
.visit-dialog-welcome .life-dialog-kicker { margin-bottom: 7px; }
.visit-dialog-welcome h2 { width: 100%; margin: 0 0 12px; font-size: clamp(38px,4vw,52px); line-height: 1.02; letter-spacing: -.035em; white-space: nowrap; }
.visit-dialog-method { margin: 0 0 18px !important; padding-bottom: 11px; color: #8f3f8b !important; border-bottom: 2px solid rgba(122,73,164,.28); font: 800 11px/1.4 "Open Sans",sans-serif !important; letter-spacing: .1em; text-transform: uppercase; }
.visit-dialog-welcome > p:not(.visit-dialog-invitation):not(.life-dialog-kicker):not(.visit-dialog-method):not(.visit-dialog-message) { margin: 0; font: 500 14px/1.65 "Open Sans",sans-serif; }
.visit-dialog-message { margin: 16px 0 0 !important; color: #173574 !important; font: italic 600 14px/1.55 "Merriweather",serif !important; }
.visit-dialog-content { padding: 34px clamp(28px,5vw,54px) 48px; }
.visit-dialog-verse { margin: 0 0 24px; padding: 23px 26px; color: #edf2ff; background: linear-gradient(125deg,#26376f,#4d5790 62%,#694994); border-radius: 18px; box-shadow: 0 14px 34px rgba(29,43,96,.15); }
.visit-dialog-verse > p { margin: 0 0 9px; color: #f1b4dc !important; font: 800 var(--life-verse-label-size,11px)/1.3 "Open Sans",sans-serif !important; letter-spacing: .14em; text-transform: uppercase; }
.visit-dialog-verse blockquote { margin: 0; color: var(--life-verse-text-color,#dce6ff); font: italic 500 var(--life-verse-text-size,18px)/1.55 "Merriweather",serif; }
.visit-dialog-verse cite { margin-top: 10px; display: block; color: #f1b4dc; font: 800 var(--life-verse-reference-size,10px)/1.3 "Open Sans",sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.visit-dialog-meeting { margin: 0 0 24px; display: grid; grid-template-columns: 1.45fr .72fr 1fr; gap: 12px; }
.visit-dialog-meeting article { min-height: 92px; padding: 17px 19px; display: flex; flex-direction: column; justify-content: center; background: #fff; border: 1px solid rgba(63,78,139,.16); border-radius: 15px; box-shadow: 0 9px 22px rgba(38,48,101,.06); }
.visit-dialog-meeting span { margin-bottom: 7px; color: #a44091; font: 800 9px/1.2 "Open Sans",sans-serif; letter-spacing: .11em; text-transform: uppercase; }
.visit-dialog-meeting strong { color: #173574; font: 700 17px/1.35 "Merriweather",serif; }
.visit-dialog-safety { margin: 0 0 8px; padding: 17px 19px; display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 12px; color: #465383; background: #eef2fb; border-left: 4px solid #a7469a; border-radius: 0 13px 13px 0; }
.visit-dialog-safety strong { color: #173574; white-space: nowrap; font: 800 12px/1.55 "Open Sans",sans-serif; }
.visit-dialog-safety p { margin: 0; font-size: 13px; line-height: 1.6; }

.support-options { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 900px; }
.support-options article { min-height: 300px; }
.support-button {
  margin-top: auto;
  padding: 13px 21px;
  color: #fff;
  background: linear-gradient(105deg, #67439e, #b44399);
  border-radius: 999px;
  font: 800 13px "Open Sans", sans-serif;
  box-shadow: 0 11px 24px rgba(84,53,142,.2);
  transition: transform .2s ease, filter .2s ease;
}
.support-button:hover,
.support-button:focus-visible { color: #fff; transform: translateY(-2px); filter: brightness(1.06); }
.support-monthly-options { width: 100%; margin-top: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.support-monthly-options a {
  min-height: 54px;
  padding: 9px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, #465ca6, #7645a7);
  border-radius: 14px;
  font: 800 17px/1.1 "Open Sans", sans-serif;
  box-shadow: 0 9px 20px rgba(55,65,133,.16);
  transition: transform .2s ease, filter .2s ease;
}
.support-monthly-options a:hover,
.support-monthly-options a:focus-visible { color: #fff; transform: translateY(-2px); filter: brightness(1.08); }
.support-monthly-options small { margin-top: 4px; font: 700 9px/1 "Open Sans", sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.support-disclosure { max-width: 1040px; margin: 44px auto 0; padding: clamp(28px, 4vw, 48px); background: #fff; border: 1px solid rgba(63,78,139,.16); border-radius: 22px; box-shadow: 0 18px 46px rgba(38,48,101,.06); }
.support-disclosure h2 { margin-top: 0; color: var(--ec-blue); font: 600 32px "Playfair Display", serif; }
.support-disclosure li,
.support-disclosure p { color: #465383; font: 500 15px/1.75 "Open Sans", sans-serif; }

.contact-page .interior-footer,
.support-page .interior-footer {
  min-height: 82px;
  margin: 0;
  padding: 20px clamp(28px,5vw,70px);
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  color: #1f326f;
  background: #d8dced;
  border-top: 2px solid rgba(102,115,167,.42);
  font: 650 13px/1.5 "Open Sans",sans-serif;
  letter-spacing: normal;
}
.contact-page .interior-footer p,
.support-page .interior-footer p { margin: 0; color: #1f326f; }
.contact-page .interior-footer a,
.support-page .interior-footer a { color: #1f326f; font-weight: 750; }
.contact-page .interior-footer a:hover,
.contact-page .interior-footer a:focus-visible,
.support-page .interior-footer a:hover,
.support-page .interior-footer a:focus-visible { color: #9a357e; }
.contact-page .interior-footer .permanent-visitor-count span,
.support-page .interior-footer .permanent-visitor-count span { color: #9a357e; }

@media (max-width: 1100px) {
  .contact-page .interior-header,
  .support-page .interior-header { grid-template-columns: 1fr; height: auto; padding: 8px 18px 13px; gap: 4px; }
  .contact-page .interior-header .official-logo,
  .support-page .interior-header .official-logo { width: 250px; height: 66px; }
  .contact-page .interior-nav,
  .support-page .interior-nav { width: 100%; overflow-x: auto; justify-content: flex-start; padding: 4px 0; scrollbar-width: none; }
  .contact-page .interior-nav::-webkit-scrollbar,
  .support-page .interior-nav::-webkit-scrollbar { display: none; }
}
@media (max-width: 820px) {
  .connection-grid { grid-template-columns: 1fr; }
  .support-options { grid-template-columns: 1fr; }
  .support-monthly-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .connection-card { min-height: 270px; }
  .visit-dialog-showcase { grid-template-columns: 1fr; }
  .visit-dialog-photo { min-height: 245px; }
  .visit-dialog-welcome { padding: 34px 28px 30px; }
  .visit-dialog-welcome h2 { font-size: clamp(40px,9vw,52px); white-space: normal; }
  .visit-dialog-meeting { grid-template-columns: 1fr; }
  .visit-dialog-safety { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .contact-page .interior-nav,
  .support-page .interior-nav { gap: 14px; }
  .contact-page .interior-nav a,
  .support-page .interior-nav a { font-size: 9px; }
  .connection-hero,
  .support-hero { min-height: 460px; padding: 70px 22px; }
  .connection-hero h1,
  .support-hero h1 { font-size: 52px; }
  .connection-options,
  .support-content { padding-left: 17px; padding-right: 17px; }
  .contact-page .visit-dialog { width: calc(100vw - 18px); }
  .visit-dialog-photo { min-height: 205px; }
  .visit-dialog-welcome { padding: 28px 20px 25px; }
  .visit-dialog-welcome h2 { font-size: 42px; white-space: normal; }
  .visit-dialog-content { padding: 25px 20px 36px; }
  .visit-dialog-verse { padding: 19px 18px; }
  .support-giving-visual { height: 280px; border-radius: 18px; }
  .contact-page .interior-footer,
  .support-page .interior-footer { min-height: 120px; padding: 18px; flex-wrap: wrap; justify-content: center; text-align: center; font-size: 11px; }
}


/* Móvil V2: imagen arriba + barra azul con texto debajo, siguiendo Las Escrituras */
@media (max-width:560px){
  .contact-page .connection-hero,
  .support-page .support-hero{
    min-height:auto!important;
    padding:330px 0 0!important;
    display:block!important;
    background-size:auto 330px!important;
    background-repeat:no-repeat!important;
    background-color:#1d2b58!important;
  }

  .contact-page .connection-hero{
    background-position:center top!important;
    background-image:
      linear-gradient(180deg,
        rgba(22,31,66,0) 0%,
        rgba(22,31,66,.05) 34%,
        rgba(24,34,70,.78) 50%,
        #1d2b58 67%,
        #1d2b58 100%),
      url("contacto-hero-comunidad.jpeg")!important;
  }

  .support-page .support-hero{
    background-position:center top!important;
    background-image:
      linear-gradient(180deg,
        rgba(22,31,66,0) 0%,
        rgba(22,31,66,.05) 34%,
        rgba(24,34,70,.78) 50%,
        #1d2b58 67%,
        #1d2b58 100%),
      url("apoya-hero-biblia-arbol.jpeg")!important;
  }

  .contact-page .connection-hero>div,
  .support-page .support-hero-copy{
    width:100%!important;
    max-width:none!important;
    padding:28px 22px 36px!important;
    background:#1d2b58!important;
  }

  .contact-page .connection-hero h1,
  .support-page .support-hero h1{
    font-size:52px!important;
  }

  .contact-page .connection-hero p:last-child,
  .support-page .support-hero p:last-child{
    margin-bottom:0!important;
  }
}


/* =========================================================
   EC Contact / Support mobile V4
   FOTO LIMPIA ARRIBA + BARRA AZUL REAL ABAJO.
   No hay gradiente azul encima de la fotografía.
   ========================================================= */
@media (max-width:560px){

  .contact-page .connection-hero,
  .support-page .support-hero{
    min-height:0!important;
    padding:300px 0 0!important;
    display:block!important;
    color:#fff!important;
    background-color:#1d2b58!important;
    background-repeat:no-repeat!important;
    background-size:100% 300px!important;
  }

  .contact-page .connection-hero{
    background-image:url("contacto-hero-comunidad.jpeg")!important;
    background-position:center top!important;
  }

  .support-page .support-hero{
    background-image:url("apoya-hero-biblia-arbol.jpeg")!important;
    background-position:center 57%!important;
  }

  .contact-page .connection-hero>div,
  .support-page .support-hero-copy{
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:25px 22px 30px!important;
    background:#1d2b58!important;
  }

  .contact-page .connection-kicker,
  .support-page .connection-kicker{
    margin:0 0 10px!important;
    font-size:11px!important;
    line-height:1.25!important;
  }

  .contact-page .connection-hero h1,
  .support-page .support-hero h1{
    margin:0!important;
    font-size:46px!important;
    line-height:1.02!important;
  }

  .contact-page .connection-hero h1::after,
  .support-page .support-hero h1::after{
    width:82px!important;
    margin:16px 0 18px!important;
  }

  .contact-page .connection-hero p:last-child,
  .support-page .support-hero p:last-child{
    margin:0!important;
    font-size:15px!important;
    line-height:1.5!important;
  }
}

@media (max-width:420px){
  .contact-page .connection-hero,
  .support-page .support-hero{
    padding-top:270px!important;
    background-size:100% 270px!important;
  }
}

@media (min-width:821px) {
  .contact-page .connection-hero,
  .support-page .support-hero {
    align-items:flex-end!important;
    padding-bottom:44px!important;
  }
  .contact-page .connection-hero {
    background-image:url("contacto-hero-comunidad.jpeg")!important;
  }
  .support-page .support-hero {
    background-image:url("apoya-hero-biblia-arbol.jpeg")!important;
    background-position:center 42%!important;
  }
  .contact-page .connection-hero h1,
  .contact-page .connection-hero p,
  .contact-page .connection-kicker,
  .support-page .support-hero h1,
  .support-page .support-hero p,
  .support-page .connection-kicker {
    text-shadow:0 2px 12px rgba(5,9,24,.72),0 1px 3px rgba(5,9,24,.9)!important;
  }
  .contact-page .connection-kicker,
  .contact-page .connection-heading .connection-kicker {
    color:#c94f9f!important;
    opacity:1!important;
    text-shadow:none!important;
  }
  .contact-page .connection-hero .connection-kicker {
    color:#f3b5df!important;
    opacity:1!important;
    font:800 12px "Open Sans",sans-serif!important;
    letter-spacing:.18em!important;
    text-shadow:0 2px 12px rgba(5,9,24,.72),0 1px 3px rgba(5,9,24,.9)!important;
  }
  .contact-page .connection-options { padding-top:48px!important; }
  .contact-page .connection-heading { margin-bottom:32px!important; }
  .support-page .support-content { padding-top:48px!important; }
  .support-page .support-intro .connection-kicker { color:#c94f9f!important; opacity:1!important; text-shadow:none!important; }
}


/* =========================================================
   EC Contact / Support photo fix V5
   FOTO completa y limpia arriba; barra azul comienza después.
   ========================================================= */
@media (max-width:560px){

  .contact-page .connection-hero,
  .support-page .support-hero{
    min-height:0!important;
    padding:285px 0 0!important;
    display:block!important;
    background-color:#1d2b58!important;
    background-repeat:no-repeat!important;
    background-size:100% 285px!important;
    background-position:center top!important;
  }

  .contact-page .connection-hero{
    background-image:url("contacto-hero-comunidad.jpeg")!important;
  }

  .support-page .support-hero{
    background-image:url("apoya-hero-biblia-arbol.jpeg")!important;
  }

  .contact-page .connection-hero>div,
  .support-page .support-hero-copy{
    margin:0!important;
    padding:24px 22px 30px!important;
    background:#1d2b58!important;
  }
}

@media (max-width:420px){
  .contact-page .connection-hero,
  .support-page .support-hero{
    padding-top:255px!important;
    background-size:100% 255px!important;
  }
}