/* Ideas Web 2026 — portada reorganizada (vista previa).
   Se carga DESPUÉS de iw-home.css: solo agrega la franja de contacto intermedia y,
   en celulares, pasa los grupos de tarjetas a carruseles deslizables para acortar la página
   sin quitar texto, títulos ni enlaces. */

/* ---------- Franja de contacto a mitad de página ---------- */
.h-midcta { padding: 0 0 clamp(70px, 9vw, 120px); }
.h-midcta__box { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 28px 48px; padding: clamp(28px, 4vw, 48px); border: 1px solid var(--iw-line-2); border-radius: 26px; background: linear-gradient(120deg, rgba(247, 59, 32, .14), rgba(247, 59, 32, 0) 60%), var(--iw-surface); }
.h-midcta__t { margin: 0 0 8px; font-size: clamp(28px, 3.4vw, 46px); line-height: 1.02; letter-spacing: -.045em; font-weight: 600; color: var(--iw-text); }
.h-midcta__p { margin: 0; max-width: 52ch; color: var(--iw-muted); font-size: 16px; }
.h-midcta__btns { display: flex; flex-wrap: wrap; gap: 12px; }
#testimonials + .review-modal + .h-midcta, #testimonials + .h-midcta { margin-top: 0; }

@media (max-width: 860px) {
  .h-midcta__box { grid-template-columns: 1fr; }
  .h-midcta__btns .iw-btn { width: 100%; justify-content: center; }

  /* Menos aire entre secciones en el celular */
  .h-sec { padding: 72px 0; }
  .h-head { margin-bottom: 32px; }

  /* ---------- Carruseles: cada grupo de tarjetas ocupa una sola franja ---------- */
  .h-cards3, .h-pfs, .h-posts, .h-benefits, .h-method--4, .h-stats {
    display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84%;
    gap: 14px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    margin-left: calc(var(--iw-gutter) * -1); margin-right: calc(var(--iw-gutter) * -1);
    padding: 4px var(--iw-gutter) 14px; scroll-padding-left: var(--iw-gutter);
    scrollbar-width: none; border: 0; border-radius: 0; background: none;
  }
  .h-cards3::-webkit-scrollbar, .h-pfs::-webkit-scrollbar, .h-posts::-webkit-scrollbar,
  .h-benefits::-webkit-scrollbar, .h-method--4::-webkit-scrollbar, .h-stats::-webkit-scrollbar { display: none; }
  .h-cards3 > *, .h-pfs > *, .h-posts > *, .h-benefits > *, .h-method--4 > *, .h-stats > * { scroll-snap-align: start; }

  /* Las tarjetas fuera de pantalla no llegan a "aparecer" con el scroll vertical: se muestran ya */
  .iw-js .h-cards3 .rv, .iw-js .h-pfs .rv, .iw-js .h-posts .rv, .iw-js .h-benefits .rv, .iw-js .h-method--4 .rv { opacity: 1; transform: none; }

  /* Ajustes para que cada tipo de tarjeta funcione como tarjeta dentro del carrusel */
  .h-pf { min-height: 300px; }
  .h-bn, .h-step, .h-stat { margin: 0; padding: 24px 22px; border: 1px solid var(--iw-line); border-radius: 22px; background: var(--iw-surface); }
  .h-bn { border-right: 1px solid var(--iw-line); }
  .h-bn h3 { margin-top: 12px; }
  .h-step { padding-bottom: 26px; }
  .h-step__dot { display: none; }
  .h-stat { min-height: 0; gap: 16px; }
  .h-stats--after { margin-top: 28px; }
  .h-post { padding-bottom: 6px; }
  .h-post__img img { aspect-ratio: 16 / 9; object-fit: cover; }
  /* Guías del blog y chips de especialidades: carrusel de 3 filas en vez de una lista larga */
  .h-res, .h-chips {
    display: grid; grid-template-columns: none; grid-template-rows: repeat(3, auto); grid-auto-flow: column;
    grid-auto-columns: 78%; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-left: calc(var(--iw-gutter) * -1); margin-right: calc(var(--iw-gutter) * -1); padding: 2px var(--iw-gutter) 10px;
    scroll-padding-left: var(--iw-gutter);
  }
  .h-res::-webkit-scrollbar, .h-chips::-webkit-scrollbar { display: none; }
  .h-res > *, .h-chips > * { scroll-snap-align: start; }
  .iw-js .h-res.rv, .iw-js .h-chips.rv { opacity: 1; transform: none; }

  /* La terminal animada del bloque GEO es decorativa: en el celular solo suma alto */
  .h-feature .h-term { display: none; }

  /* Pista de que se puede deslizar */
  .h-cards3::after, .h-pfs::after, .h-posts::after, .h-benefits::after, .h-method--4::after, .h-stats::after { content: ""; width: 1px; }
}