/* ============================================================
   PORTADA · secciones bajo los productos (2026-10-04)
   Módulos, por qué IANALITICS, precios, testimonios, preguntas frecuentes,
   recursos y cierre: todo lo que queda bajo el pliegue. Se enlaza al final del
   <body> (como chat-ia.css): enlazada antes de estas secciones, los scripts del
   final esperaban a que llegara y su trabajo inicial caía después del primer
   pintado (Lighthouse: +0,1-0,2 s de LCP y TBT). Lo que se ve al cargar (héroe,
   franja de logos y tarjetas de producto) tiene sus estilos incrustados
   (scripts/portada.css). Estos elementos arrancan invisibles (mk-fadeup) hasta
   que motion.js los revela, así que no se ven sin estilo.
   ============================================================ */

.hm-cabeza { max-width: 62ch; margin-bottom: clamp(1.4rem, 3vw, 2rem); }
.hm-cabeza h2 { font-size: clamp(1.6rem, 3.6vw, 2.4rem); margin: 0 0 .6rem; }
.hm-cabeza p { margin: 0; color: var(--muted); }
.hm-cabeza.centro { margin-left: auto; margin-right: auto; text-align: center; }

/* Ícono en baldosa con el degradado de marca (mismo lenguaje que los recursos). */
/* El dibujo es una máscara SVG (en este archivo, no en el HTML: así la portada
   cabe en el primer viaje de red) pintada de blanco. */
.hm-ico { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 13px; background: linear-gradient(135deg, var(--mk-primario), var(--mk-secundario)); }
.hm-ico::before { content: ""; width: 22px; height: 22px; background: #fff; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.i1 { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8l-9-5-9 5 9 5 9-5z'/%3E%3Cpath d='M3 8v8l9 5 9-5V8'/%3E%3Cpath d='M12 13v8'/%3E%3C/svg%3E"); }
.i2 { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.5'/%3E%3Ccircle cx='18' cy='20' r='1.5'/%3E%3Cpath d='M2 3h3l2.6 12.4a1.5 1.5 0 0 0 1.5 1.1h8.8a1.5 1.5 0 0 0 1.5-1.1L21 7H6'/%3E%3C/svg%3E"); }
.i3 { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7V5a2 2 0 0 1 2-2h2M17 3h2a2 2 0 0 1 2 2v2M21 17v2a2 2 0 0 1-2 2h-2M7 21H5a2 2 0 0 1-2-2v-2'/%3E%3Cpath d='M7 8v8M10 8v8M13 8v8M17 8v8'/%3E%3C/svg%3E"); }
.i4 { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h11a3 3 0 0 1 3 3v13H7a3 3 0 0 1-3-3z'/%3E%3Cpath d='M8 8h6M8 12h6'/%3E%3C/svg%3E"); }
.i5 { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2h9l5 5v15H6z'/%3E%3Cpath d='M15 2v5h5'/%3E%3Cpath d='M9 14l2 2 4-4'/%3E%3C/svg%3E"); }
.i6 { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20V10M10 20V4M16 20v-7M22 20H2'/%3E%3C/svg%3E"); }
.i7 { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.8 4.7 4.7 1.8-4.7 1.8L12 16l-1.8-4.7-4.7-1.8 4.7-1.8z'/%3E%3Cpath d='M19 15l.8 2.2L22 18l-2.2.8L19 21l-.8-2.2L16 18l2.2-.8z'/%3E%3C/svg%3E"); }
.i8 { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20a6.5 6.5 0 0 1 13 0'/%3E%3Cpath d='M16 4.5a3.5 3.5 0 0 1 0 7M18 14.5a6.5 6.5 0 0 1 3.5 5.5'/%3E%3C/svg%3E"); }
.i9 { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6z'/%3E%3Cpath d='M8.5 12l2.5 2.5 4.5-4.5'/%3E%3C/svg%3E"); }
.i10 { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 18h10a4 4 0 0 0 .5-8 6 6 0 0 0-11.5 1.5A3.5 3.5 0 0 0 7 18z'/%3E%3C/svg%3E"); }
.i11 { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17l6-6 4 4 8-8'/%3E%3Cpath d='M15 7h6v6'/%3E%3C/svg%3E"); }
.i12 { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10' width='16' height='11' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E"); }

/* ---------- Módulos de la plataforma ---------- */
.hm-mod-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(235px, 1fr)); }
.hm-mod { display: flex; flex-direction: column; gap: .7rem; padding: 1.4rem 1.3rem 1.2rem; border: 1px solid #e6e8f2; border-radius: 18px; background: #fff; color: var(--mk-texto); text-decoration: none;
  transition: transform .25s cubic-bezier(.22, 1, .36, 1), box-shadow .25s, border-color .25s; }
.hm-mod:hover { transform: translateY(-4px); border-color: var(--mk-secundario); box-shadow: 0 22px 44px -18px color-mix(in srgb, var(--mk-primario) 30%, transparent); }
.hm-mod h3 { margin: .2rem 0 0; }
.hm-mod p { flex: 1; margin: 0; color: var(--muted); font-size: .88rem; line-height: 1.55; }
.hm-ver { color: var(--mk-secundario-texto); font-size: .84rem; font-weight: 700; }
.hm-acciones { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem; }
/* Celular: las 8 tarjetas apiladas sumaban ~1.500 px. En dos columnas, solo
   ícono, título y enlace (la descripción sigue en el HTML y en escritorio). */
@media (max-width: 560px) {
  .hm-mod-grid { grid-template-columns: 1fr 1fr; gap: .7rem; }
  .hm-mod { gap: .5rem; padding: 1rem .9rem .9rem; border-radius: 14px; }
  .hm-mod .hm-ico { width: 36px; height: 36px; border-radius: 11px; }
  .hm-mod .hm-ico::before { width: 19px; height: 19px; }
  .hm-mod h3 { flex: 1; font-size: .9rem; line-height: 1.3; }
  .hm-mod p { display: none; }
  .hm-ver { font-size: .78rem; }
}

/* ---------- Por qué IANALITICS ---------- */
.hm-pilares { display: grid; gap: 1.6rem 1.4rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.hm-pilar { display: flex; flex-direction: column; gap: .6rem; }
.hm-pilar h3 { margin: .3rem 0 0; }
.hm-pilar p { margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.55; }
.hm-nosotros { display: grid; gap: 1.4rem 2.4rem; align-items: center; margin-top: clamp(2rem, 4vw, 3rem); padding: clamp(1.6rem, 4vw, 2.4rem); border-radius: 24px; background: var(--light-band); }
@media (min-width: 860px) { .hm-nosotros { grid-template-columns: minmax(0, 1.5fr) minmax(0, .8fr); } }
.hm-nosotros h3 { font-size: clamp(1.25rem, 2.4vw, 1.6rem); margin: 0 0 .7rem; }
.hm-nosotros p { margin: 0 0 1rem; color: var(--muted); }
.hm-nosotros .link { font-weight: 700; color: var(--mk-secundario-texto); }
.hm-sello { display: flex; flex-direction: column; gap: .7rem; padding: 1.2rem 1.3rem; border-radius: 18px; background: #fff; border: 1px solid #e6e8f2; }
.hm-sello img { display: block; width: 100%; max-width: 220px; height: auto; }
.hm-sello b { font-size: .98rem; line-height: 1.35; color: var(--mk-texto); }
.hm-sello span { color: var(--muted); font-size: .84rem; }

/* ---------- Testimonios ---------- */
.hm-testimonios .testimonial-card { display: flex; flex-direction: column; text-align: left; }
/* Los logos recortados de la franja "Confían en nosotros", a color. */
.hm-testimonios .testimonial-card img { width: auto; max-width: 160px; height: 38px; object-fit: contain; object-position: left center; margin: 0 0 .7rem; }
.hm-testimonios .tquote { flex: 1; margin-top: .4rem; }

/* ---------- Preguntas frecuentes ---------- */
.hm-faq .faq-list { margin: 0 auto; }
.hm-faq .hm-todas { display: block; margin: 1.4rem auto 0; max-width: 860px; font-weight: 700; color: var(--mk-secundario-texto); }

/* ---------- Recursos: franja compacta (las tarjetas pesaban ~0,9 KB comprimidos) ---------- */
.hm-recursos { padding-top: 0 !important; }
.hm-recursos .wrap { padding: clamp(1.4rem, 3vw, 1.8rem) clamp(1.2rem, 3vw, 2rem); border: 1px solid #e6e8f2; border-radius: 22px; }
.hm-rec-h { font-size: clamp(1.15rem, 2.2vw, 1.4rem); margin: 0 0 1rem; }
.hm-rec-lista { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.hm-rec-lista a { display: inline-flex; align-items: center; gap: .45rem; min-height: 40px; padding: .5rem .95rem; border-radius: 999px; background: var(--light-band); color: var(--mk-texto); font-size: .88rem; font-weight: 700; text-decoration: none; transition: background .2s, color .2s; }
.hm-rec-lista a:hover { background: var(--mk-primario); color: #fff; }
.hm-rec-lista small { padding: .1rem .4rem; border-radius: 6px; background: #fff; color: var(--mk-secundario-texto); font-size: .68rem; font-weight: 800; }

/* ---------- Cierre ---------- */
.hm-cierre-sub { max-width: 52ch; margin: .2rem auto 1.4rem; color: #c7c9de; }
.hm-cierre .cta-row { justify-content: center; }
.hm-cierre .btn-solid { box-shadow: none; }
.hm-cierre-tel { margin: 1.2rem 0 0; color: #c7c9de; font-size: .92rem; }
.hm-cierre-tel a { color: #fff; font-weight: 700; text-decoration: none; white-space: nowrap; }
.hm-cierre-tel a:hover { text-decoration: underline; }
.hm-testimonios figure.testimonial-card { margin: 0; }

/* ---------- Precios ---------- */
.hm-precios { margin: 0 clamp(0px, 2vw, 1.2rem); border-radius: 32px; background: var(--light-band); }
.hm-precios .wrap { text-align: center; }
.hm-precios h2 { font-size: clamp(1.6rem, 3.6vw, 2.4rem); }
.hm-precios-sub { max-width: 56ch; margin: 0 auto 1.6rem; color: var(--muted); }
.hm-precios-planes, .hm-precios .cta-row { justify-content: center; }
.hm-precios-planes { margin-bottom: 1.8rem; }
.hm-precios-agente { margin: 1.2rem 0 0; }
.hm-precios-agente a { font-weight: 700; color: var(--mk-secundario-texto); }