/* ==========================================================
   HOME · PUENTE A PARA FAMILIAS
   Cargar despues de assets/css/styles.css
   ========================================================== */

.families-bridge{
  position:relative;
  overflow:hidden;
  padding:78px 0;
  background:linear-gradient(180deg,#fff 0%,#F4F9FF 100%);
}

.families-bridge::before{
  content:"";
  position:absolute;
  left:-90px;
  bottom:-150px;
  width:330px;
  height:330px;
  border:3px dashed #D9EAF9;
  border-radius:50%;
  opacity:.65;
}

.families-bridge-inner{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(340px,.9fr) minmax(0,1.1fr);
  gap:84px;
  align-items:center;
}

.families-bridge-copy{max-width:540px}

.families-bridge-copy h2{
  margin:0 0 18px;
  color:var(--ink);
  font-size:clamp(2.55rem,3.7vw,3.8rem);
  line-height:.95;
  letter-spacing:-.045em;
}

.families-bridge-copy h2 span{display:block;color:var(--blue-bright)}
.families-bridge-copy p{max-width:520px;margin:0 0 24px;color:#53698E;font-size:1rem;line-height:1.62}

.families-bridge-points{
  position:relative;
  display:grid;
  gap:4px;
}

.families-bridge-points::before{
  content:"";
  position:absolute;
  top:45px;
  bottom:45px;
  left:30px;
  width:2px;
  background:#D9E8F7;
}

.family-bridge-point{
  position:relative;
  display:grid;
  grid-template-columns:62px 1fr;
  gap:18px;
  align-items:center;
  padding:18px 0;
}

.family-bridge-icon{
  position:relative;
  z-index:1;
  width:60px;
  height:60px;
  display:grid;
  place-items:center;
  border:6px solid #F7FBFF;
  border-radius:20px;
  color:#176ED6;
  background:#E6F2FF;
  box-shadow:0 10px 22px rgba(24,53,108,.09);
}

.family-bridge-point:nth-child(2) .family-bridge-icon{color:#A87600;background:#FFF1B9}
.family-bridge-point:nth-child(3) .family-bridge-icon{color:#0A855A;background:#DCF4E8}

.family-bridge-icon svg{
  width:27px;
  height:27px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.family-bridge-point h3{margin:0 0 4px;color:var(--ink);font-size:1.02rem;line-height:1.15}
.family-bridge-point p{margin:0;max-width:460px;color:#607398;font-size:.86rem;line-height:1.45}

@media(max-width:1050px){
  .families-bridge-inner{grid-template-columns:1fr;gap:38px}
  .families-bridge-copy{max-width:720px}
  .families-bridge-copy p{max-width:650px}
  .families-bridge-points{max-width:720px}
}

@media(max-width:720px){
  .families-bridge{padding:58px 0}
  .families-bridge-inner{gap:30px}
  .families-bridge-copy h2{font-size:clamp(2.35rem,10vw,3rem)}
  .families-bridge-copy h2 span{display:inline}
  .family-bridge-point{grid-template-columns:56px 1fr;gap:14px}
  .family-bridge-icon{width:54px;height:54px;border-radius:18px}
  .families-bridge-points::before{left:27px}
}

/* ==========================================================
   HOME · MOBILE 2026 · CTA DESPUES DE LA LECTURA
   Reordena solo en mobile, sin duplicar enlaces ni tocar el HTML.
   ========================================================== */
@media (max-width:720px){
  /* 1) SECCIONES: copy -> cuatro secciones -> CTA */
  .sections-html-collage-inner{
    display:flex !important;
    flex-direction:column !important;
    gap:0 !important;
  }

  .sections-html-copy{
    display:contents !important;
  }

  .sections-html-copy .eyebrow{order:1;align-self:flex-start}
  .sections-html-copy h2{order:2;width:100%}
  .sections-html-stroke{order:3}
  .sections-html-copy p{order:4;width:100%}
  .sections-collage-stage{order:5;width:100%;margin-top:4px !important}
  .sections-html-copy .btn{
    order:6;
    width:100% !important;
    min-height:48px !important;
    margin-top:22px !important;
    align-self:stretch !important;
    justify-content:center !important;
    font-size:.92rem !important;
  }

  /* 2) MOMENTOS: titulo -> galeria -> Ver galeria */
  .moments-gallery-inner{
    display:flex !important;
    flex-direction:column !important;
  }

  .moments-heading-row{
    display:contents !important;
  }

  .moments-heading-row > div{
    order:1;
    width:100%;
    margin-bottom:24px;
  }

  .moments-grid{
    order:2;
    width:100%;
  }

  .moments-heading-row > .text-link{
    order:3;
    align-self:flex-start;
    margin-top:20px;
    min-height:44px;
    display:inline-flex;
    align-items:center;
  }

  /* 3) FAMILIAS: intro -> puntos -> CTA */
  .families-bridge-inner{
    display:flex !important;
    flex-direction:column !important;
    gap:0 !important;
  }

  .families-bridge-copy{
    display:contents !important;
  }

  .families-bridge-copy .eyebrow{order:1;align-self:flex-start}
  .families-bridge-copy h2{order:2;width:100%}
  .families-bridge-copy > p{order:3;width:100%;margin-bottom:0 !important}
  .families-bridge-points{order:4;width:100%;margin-top:26px}
  .families-bridge-link{
    order:5;
    align-self:flex-start;
    margin-top:20px !important;
    min-height:44px;
    display:inline-flex;
    align-items:center;
  }
}