/* ════════════════════════════════════════════════════════════
   BIM Forum Chile v14.32 — Responsividad mobile (correcciones)
   Newsletter · Contacto · Directorio · Grids generales
   ════════════════════════════════════════════════════════════ */

/* ── Regla base: nada se desborda horizontalmente ─────────── */
@media(max-width:820px){
  html,body{ overflow-x:clip; }
  img,svg,video{ max-width:100%; height:auto; }
}

/* ══════════ NEWSLETTER (home .nl2) — mobile ══════════ */
@media(max-width:820px){
  .nl2{
    grid-template-columns:1fr !important;
    padding:1.75rem 1.25rem !important;
    border-radius:18px !important;
    gap:1.5rem !important;
    text-align:left;
  }
  .nl2::after,.nl2__grid-bg{ display:none !important; }
  .nl2__icon{ width:44px !important; height:49px !important; margin-bottom:.85rem !important; }
  .nl2__title{ font-size:1.5rem !important; line-height:1.15 !important; }
  .nl2__p{ font-size:.92rem !important; max-width:100% !important; }
  .nl2__benefits{ gap:.6rem 1rem !important; margin-top:1.15rem !important; }
  .nl2__benefits li{ flex:1 1 100%; }
  .nl2__benefits strong{ font-size:.86rem !important; }
  .nl2__right{ padding:1.25rem !important; border-radius:14px !important; }
  .nl2__form input,.nl2__btn{ font-size:16px !important; }  /* evita zoom iOS */
  .nl2__form input{ padding:.85rem 1rem !important; }
}
@media(max-width:420px){
  .nl2{ padding:1.5rem 1rem !important; }
  .nl2__title{ font-size:1.32rem !important; }
}

/* ══════════ NEWSLETTER interno (NewsBand / .news-cta) ══════════ */
@media(max-width:820px){
  .news-cta{
    grid-template-columns:1fr !important;
    gap:1.5rem !important;
    padding:1.75rem 1.25rem !important;
    border-radius:18px !important;
  }
  .news-cta::before,.news-cta::after{ display:none !important; }
  .news-cta h2{ font-size:1.5rem !important; line-height:1.15 !important; }
  .news-cta p{ font-size:.92rem !important; }
  .news-cta__form .row{ flex-direction:column !important; gap:.65rem !important; }
  .news-cta__form input,
  .news-cta__form .btn{ width:100% !important; font-size:16px !important; }
  .news-cta .hint{ font-size:.76rem !important; }
}

/* ══════════ Header sticky — efecto profesional al bajar ══════════ */
.hdr{ transition: box-shadow .35s ease, height .3s ease; }
.hdr__row{ transition: height .3s ease; height:80px; position:relative; }
.hdr--scrolled{ box-shadow: 0 8px 30px -12px rgba(11,27,44,.18); }
.hdr--scrolled .hdr__row{ height:64px; }
.hdr__accentline{ position:absolute; left:0; right:0; bottom:-1px; height:2px; background:linear-gradient(90deg,var(--c1),var(--cta),var(--c3)); opacity:0; transform:scaleX(.4); transition:opacity .35s ease, transform .5s ease; transform-origin:center; }
.hdr--scrolled .hdr__accentline{ opacity:1; transform:scaleX(1); }
@media(prefers-reduced-motion:reduce){ .hdr,.hdr__row,.hdr__accentline{ transition:none; } }

@media(max-width:820px){
  .bmatrix-wrap{
    position:relative; margin-top:2rem !important; border-radius:14px !important;
    -webkit-overflow-scrolling:touch;
  }
  .bmatrix{ min-width:560px !important; }
  .bmatrix th,.bmatrix td{ padding:.65rem .6rem !important; font-size:.78rem !important; }
  .bmatrix th:first-child,.bmatrix td:first-child{
    min-width:150px !important; font-size:.78rem !important; line-height:1.3;
  }
  /* sombra a la derecha = pista visual de que se puede deslizar */
  .bmatrix-wrap::after{
    content:""; position:absolute; top:0; right:0; bottom:0; width:28px;
    background:linear-gradient(90deg,transparent,rgba(0,0,0,.06));
    pointer-events:none; border-radius:0 14px 14px 0;
  }
}
@media(max-width:480px){
  .bmatrix th,.bmatrix td{ padding:.55rem .45rem !important; font-size:.72rem !important; }
  .bmatrix th:first-child,.bmatrix td:first-child{ min-width:130px !important; }
}

/* ══════════ Propósito — rediseño premium (v14.38) ══════════ */
.purpose-card{
  padding:1.85rem 1.85rem 1.85rem 1.75rem !important;
  box-shadow:0 2px 10px -4px rgba(10,20,40,.06);
}
.purpose-card:hover{ box-shadow:0 20px 42px -14px rgba(10,20,40,.14) !important; }
.purpose-card__ico{
  width:58px !important; height:64px !important;
  background:linear-gradient(155deg, color-mix(in oklch, var(--pc,#0175c9) 88%, white), var(--pc,#0175c9)) !important;
  box-shadow:0 8px 20px -8px var(--pc,#0175c9), inset 0 1px 0 rgba(255,255,255,.35) !important;
}
.purpose-card h3{ font-size:1.2rem !important; letter-spacing:-.01em; }
.purpose-card p{ font-size:.9rem !important; line-height:1.6 !important; }
@media(max-width:820px){
  .purpose-card{ padding:1.5rem !important; }
}
@media(max-width:820px){
  /* caja "Grupos objetivo del Directorio": menos padding y chips a ancho completo */
  .obj-box{ margin-top:2.5rem !important; padding:1.5rem 1.25rem !important; border-radius:16px !important; }
  .obj-box h3{ font-size:1.3rem !important; }
  .obj-box p{ font-size:.92rem !important; margin-bottom:1.15rem !important; }
  .obj-row{ gap:.5rem !important; }
  .obj-chip{
    flex:1 1 100% !important; justify-content:flex-start !important;
    padding:.7rem .85rem !important; border-radius:10px !important;
  }
  .obj-chip span{ font-size:.85rem !important; line-height:1.35; }

  /* Comisiones: una columna real, sin min-width que desborde ni celdas vacías */
  .comision-band{ padding:1.25rem !important; border-radius:16px !important; }
  .comision-grid{ display:flex !important; flex-direction:column; gap:0 !important; }
  .comision-cell{
    flex:1 1 100% !important; min-width:0 !important; width:100% !important;
    padding:1rem .25rem !important;
    border-right:none !important;
    border-bottom:1px solid rgba(255,255,255,.09) !important;
  }
  .comision-cell:last-child{ border-bottom:none !important; }
  .comision-cell .t{ font-size:.95rem !important; line-height:1.3; }
  .comision-cell .c{ font-size:.78rem !important; line-height:1.45; }
}
@media(max-width:560px){
  .comision-cell{ padding:.9rem .25rem !important; }
}

/* ══════════ CONGRESO (banda con contador) — mobile ══════════ */
@media(max-width:820px){
  /* altura automática: el contenido manda, ya no se corta el título */
  .img-band--congress{ aspect-ratio:auto !important; height:auto !important; min-height:0 !important; border-radius:16px !important; }
  .img-band--congress > img{ position:absolute !important; inset:0; width:100%; height:100%; object-fit:cover; }
  /* overlay más fuerte: la foto del puente es muy clara y el texto no se leía */
  .img-band--congress::after{
    content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
    background:linear-gradient(180deg,rgba(7,15,26,.82) 0%,rgba(7,15,26,.72) 45%,rgba(7,15,26,.9) 100%);
  }
  .img-band--congress .img-band-content{
    position:relative !important; z-index:2;
    align-items:flex-start !important;
    padding:1.5rem 1.25rem !important;
    display:flex !important; flex-direction:column; gap:1rem;
  }
  .img-band--congress .img-band-content h2,
  .img-band--congress .img-band-content h3{ font-size:1.5rem !important; line-height:1.15 !important; margin:0 !important; }

  /* stats: 3 en fila apretada, sin solaparse */
  .congress-stats{ display:grid !important; grid-template-columns:repeat(3,1fr); gap:.75rem !important; margin:0 !important; width:100%; }
  .congress-stats__u strong{ font-size:1.15rem !important; }
  .congress-stats__u span{ font-size:.6rem !important; letter-spacing:.04em !important; }

  /* contador: 4 celdas parejas a todo el ancho */
  .congress-countdown{ display:grid !important; grid-template-columns:repeat(4,1fr); gap:.5rem !important; margin:0 !important; width:100%; }
  .congress-countdown__u{ width:auto !important; height:auto !important; padding:.6rem .25rem !important; }
  .congress-countdown__u .n{ font-size:1.15rem !important; }
  .congress-countdown__u .l{ font-size:.55rem !important; }

  /* CTAs apilados a ancho completo */
  .img-band--congress .img-band-content > div:last-child{ display:flex !important; flex-direction:column; gap:.6rem; width:100%; }
  .img-band--congress .btn{ width:100%; justify-content:center; }
}

/* ══════════ ABOUT (Una instancia técnica) — mobile ══════════ */
@media(max-width:900px){
  .about-grid{ grid-template-columns:1fr !important; gap:2rem !important; }
  /* la imagen va primero: da contexto visual antes del texto largo */
  .about-grid > .about-img-wrap{ order:-1; }
  .about-img-wrap img{ width:100%; height:220px; object-fit:cover; }
}
@media(max-width:820px){
  .about-grid h2{ font-size:clamp(1.85rem,7vw,2.4rem) !important; margin-bottom:1.15rem !important; }
  .about-grid p{ font-size:.95rem !important; line-height:1.7 !important; }
  /* los dos CTA a ancho completo, uno bajo otro */
  .about-grid .btn{ width:100%; justify-content:center; }
  .about-img-badge{ left:1rem !important; right:1rem !important; bottom:1rem !important; padding:.85rem 1rem !important; }
  .about-img-badge strong{ font-size:.95rem !important; }
  .about-img-badge span{ font-size:.78rem !important; }
}

/* ══════════ Matriz de beneficios — mobile: tarjetas por plan ══════════ */
.bmatrix-mobile{ display:none; }
@media(max-width:820px){
  .bmatrix-wrap{ display:none !important; }
  .bmatrix-mobile{
    display:flex; flex-direction:column; gap:1rem; margin-top:2rem;
  }
  .bmm-card{
    border-radius:16px; border:1px solid var(--ink-100); background:#fff; overflow:hidden;
  }
  .bmm-card__head{
    padding:.9rem 1.1rem; font-family:var(--f-d); font-weight:800; font-size:1.05rem; color:#fff;
  }
  .bmm-card--ind  .bmm-card__head{ background:linear-gradient(120deg,#9aa3ad,#6b7683); }
  .bmm-card--std  .bmm-card__head{ background:linear-gradient(120deg,var(--p1),var(--cta)); }
  .bmm-card--prem .bmm-card__head{ background:linear-gradient(120deg,var(--c1),var(--c2)); }
  .bmm-card--plat .bmm-card__head{ background:linear-gradient(120deg,#7098b4,#3f6d92); }
  .bmm-card ul{ list-style:none; margin:0; padding:.4rem 1.1rem .9rem; display:flex; flex-direction:column; gap:.55rem; }
  .bmm-card li{ display:flex; align-items:center; gap:.65rem; font-size:.85rem; line-height:1.35; }
  .bmm-dot{ width:9px; height:10px; clip-path:var(--hex-pointy); flex-shrink:0; background:var(--ink-200); }
  .bmm-card li.is-on{ color:var(--ink-900); }
  .bmm-card li.is-off{ color:var(--ink-300); text-decoration:line-through; }
  .bmm-card--ind  li.is-on .bmm-dot{ background:#6b7683; }
  .bmm-card--std  li.is-on .bmm-dot{ background:var(--cta); }
  .bmm-card--prem li.is-on .bmm-dot{ background:var(--c1); }
  .bmm-card--plat li.is-on .bmm-dot{ background:#3f6d92; }
}

/* ══════════ CONTACTO — mobile (clases reales del markup) ══════════ */
@media(max-width:900px){
  /* grid principal: formulario + tarjeta de info → 1 columna */
  .cx-grid{ grid-template-columns:1fr !important; gap:2rem !important; align-items:start !important; }
}
@media(max-width:820px){
  /* nombre + email lado a lado → apilados */
  .cx-row{ grid-template-columns:1fr !important; gap:.85rem !important; }

  .contact-info-card{ padding:1.5rem 1.25rem !important; border-radius:16px !important; }
  .contact-info-item{ align-items:flex-start !important; }
  /* el correo largo no debe romper la caja */
  .contact-info-item a,
  .contact-info-item div{ word-break:break-word; overflow-wrap:anywhere; min-width:0; }

  /* campos: ancho completo y 16px para que iOS no haga zoom al enfocar */
  .contact-field{ width:100% !important; font-size:16px !important; box-sizing:border-box; }

  /* botones de tema: 2 columnas apretadas → texto que no se corta */
  .cx-topics{ gap:.45rem !important; }
  .contact-topic-btn{ padding:.7rem .6rem !important; font-size:.78rem !important; gap:.4rem !important; }
}
@media(max-width:420px){
  .cx-topics{ grid-template-columns:1fr !important; }
}

/* ══════════ DIRECTORIO — pirámide en mobile ══════════ */
@media(max-width:700px){
  .dir-tier__row{ justify-content:center !important; }
}

/* ══════════ Grids genéricos que aún no colapsan ══════════ */
@media(max-width:820px){
  .purpose__inner{ grid-template-columns:1fr !important; gap:2rem !important; }
  .purpose__cards{ grid-template-columns:1fr !important; }
  .stats,.stats-row{ grid-template-columns:1fr 1fr !important; }
  .vband__grid{ grid-template-columns:1fr !important; gap:1.25rem !important; }
}
@media(max-width:520px){
  .stats,.stats-row{ grid-template-columns:1fr !important; }
}

/* Tarjetas de video: miniatura + texto con holgura en pantallas chicas */
@media(max-width:560px){
  .vitem{ gap:.8rem !important; padding:.75rem !important; }
  .vitem__thumb{ width:104px !important; flex:0 0 104px !important; }
  .vitem__title{ font-size:.9rem !important; line-height:1.3; }
  .vfeat__title{ font-size:1.15rem !important; }
  .vband__head{ flex-direction:column !important; align-items:flex-start !important; gap:1rem !important; }
}