/* Home del rediseño (render «01-home» de Álvaro, 18/10/2026; D-61). Piezas comunes en sitio.css. */

/* Héroe */
.home-heroe { padding: 64px 0 72px; }
.home-heroe-rejilla { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 48px; align-items: center; }
.home-heroe-texto { display: grid; gap: 20px; justify-items: start; }
.home-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 4px; }
.home-nota { margin-top: -6px; }
.home-lectura { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; font-weight: 600; }
.home-lectura svg { width: 18px; height: 18px; color: var(--color-brand); }
.home-heroe-figura { display: grid; gap: 10px; justify-items: end; min-width: 0; }
.home-ventana { width: 100%; height: 470px; display: flex; overflow: hidden; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 16px; box-shadow: 0 24px 60px rgb(22 52 47 / 14%); }
.home-ventana-menu { flex: 0 0 150px; display: flex; flex-direction: column; gap: 6px; padding: 16px 12px; border-right: 1px solid var(--color-line); font-size: 11.5px; font-weight: 600; color: var(--color-muted); }
.home-ventana-menu img { height: 20px; width: auto; align-self: flex-start; margin: 0 0 14px 4px; }
.home-ventana-menu > span { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 8px; }
.home-ventana-menu > span > span { width: 6px; height: 6px; border-radius: 50%; background: #c7d9d4; }
.home-ventana-menu > .activo { background: var(--color-info-bg); color: var(--color-brand); }
.home-ventana-menu > .activo > span { background: var(--color-brand); }
.home-ventana-menu > .hueco { flex: 1; padding: 0; }
.home-ventana-cuerpo { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; background: var(--color-background); }
.home-ventana-barra { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--color-line); background: var(--color-surface); font-size: 12px; color: var(--color-muted); }
.home-ventana-barra strong { font-size: 13px; font-weight: 800; color: var(--color-text); }
.home-ventana-barra > span { display: inline-flex; gap: 8px; }
.home-ventana-barra > span > span { border: 1px solid var(--color-border); border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
.home-ventana-captura { position: relative; flex: 1 1 0; min-height: 0; overflow: hidden; padding: 12px 14px 0; }
.home-ventana-captura img { display: block; width: 100%; height: auto; border-radius: 10px 10px 0 0; }
.home-ventana-captura::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 70px; background: linear-gradient(to bottom, rgb(245 249 248 / 0%), var(--color-background)); }

/* Compatibilidad */
.home-compatible { border-bottom: 1px solid var(--color-line); }
.home-compatible-lista { list-style: none; margin: 0 auto; padding-block: 22px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 32px; font-size: 15px; font-weight: 700; }
.home-compatible-lista li { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.home-compatible-lista svg { width: 22px; height: 22px; color: var(--color-brand); flex: none; }
.home-compatible-lista span { font-weight: 600; color: var(--color-muted); }

/* Bloques de dos columnas */
.home-dos { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 56px 64px; align-items: start; }
.home-columna-titulo { display: grid; gap: 14px; align-content: start; justify-items: start; }
.home-ventajas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 40px; }
.home-ventajas li { display: flex; gap: 16px; align-items: flex-start; }
.home-ventajas li > div { display: grid; gap: 6px; }

.home-detalle { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); align-items: center; gap: 56px; }
.home-detalle .home-columna-titulo { gap: 26px; }
.home-pasos-detalle { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.home-pasos-detalle li { display: flex; gap: 14px; align-items: flex-start; }
.home-pasos-detalle li > div { display: grid; gap: 4px; }
.home-pasos-detalle .rd-h3 { font-size: 16px; }
.home-pasos-detalle .rd-texto { font-size: 14.5px; }
.home-detalle-figura { min-width: 0; }
.home-detalle-figura .captura { margin: 0; }
.home-detalle-figura .captura-marco { border: 1px solid var(--color-border); border-radius: 16px; overflow: hidden; box-shadow: 0 16px 48px rgb(22 52 47 / 10%); background: var(--color-surface); }
.home-detalle-figura .captura img { display: block; width: 100%; height: auto; }
.home-detalle-figura figcaption { margin-top: 10px; font-size: 13px; color: var(--color-muted); }

/* IA */
.home-ia { background: var(--color-deep); padding: 72px 0; color: #fff; }
.home-ia .home-dos { grid-template-columns: minmax(0, 460px) minmax(0, 1fr); align-items: center; }
.home-ia .rd-h2 { color: #fff; }
.home-ia .rd-h2 span { color: var(--color-brand-on-dark); }
.home-ia .rd-lead { color: var(--color-deep-text); }
.home-ia-clientes { margin: 0; font-size: 14px; font-weight: 700; }
.home-ia-boton { margin-top: 6px; color: #fff; border: 1.5px solid rgb(255 255 255 / 55%); background: transparent; min-height: 48px; }
.home-ia-boton:hover { background: rgb(255 255 255 / 10%); color: #fff; }
.home-chat { margin: 0; background: var(--color-surface); color: var(--color-text); border-radius: 16px; padding: 22px; box-shadow: 0 24px 60px rgb(0 0 0 / 25%); display: grid; gap: 14px; font-size: 15px; line-height: 1.5; }
.home-chat-fila { display: flex; gap: 10px; align-items: flex-start; }
.home-chat-fila p { margin: 0; background: var(--color-background); border-radius: 14px 14px 14px 4px; padding: 12px 16px; max-width: 86%; }
.home-chat-yo { justify-content: flex-end; }
.home-chat-yo p { background: var(--color-band); border-radius: 14px 14px 4px 14px; max-width: 80%; }
.home-chat-avatar { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--color-line); color: var(--color-muted); display: inline-flex; align-items: center; justify-content: center; }
.home-chat-avatar svg { width: 16px; height: 16px; }
.home-chat-ia { background: var(--color-brand); color: #fff; }

/* Email */
.home-email { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); align-items: center; }
.home-email-ejemplo { display: flex; align-items: center; gap: 22px; min-width: 0; }
.home-email-icono { flex: none; width: 64px; height: 64px; border-radius: 50%; background: var(--color-info-bg); color: var(--color-brand); display: inline-flex; align-items: center; justify-content: center; }
.home-email-icono svg { width: 28px; height: 28px; }
.home-email-tarjeta { flex: 1 1 0; min-width: 0; margin: 0; padding: 20px 22px; display: grid; gap: 16px; }
.home-email-cabecera { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--color-muted); }
.home-email-cabecera strong { font-size: 15px; color: var(--color-text); }
.home-email-cifras { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: end; }
.home-email-cifras > div { display: grid; gap: 6px; }
.home-email-rotulo { font-size: 13px; color: var(--color-muted); }
.home-email-valor { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; }
.home-email-variacion { justify-self: start; font-size: 12px; font-weight: 700; color: var(--color-brand); background: var(--color-info-bg); border-radius: 999px; padding: 3px 8px; }
.home-email-grafico { width: 100%; height: 60px; }
.home-email-boton { display: block; text-align: center; color: #fff; background: var(--color-brand); font-weight: 700; font-size: 14px; padding: 11px 18px; border-radius: 10px; }

/* Empezar */
.home-empezar { padding: 56px 0; }
.home-empezar-fila { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 24px 48px; align-items: center; }
.home-empezar-fila h2 { margin: 0; font-size: 26px; line-height: 1.2; letter-spacing: -0.02em; font-weight: 800; }
.home-empezar-pasos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 40px; counter-reset: paso; }
.home-empezar-pasos li { display: flex; gap: 14px; align-items: flex-start; position: relative; }
.home-empezar-pasos li + li::before { content: "›"; position: absolute; left: -28px; top: 10px; color: var(--color-muted); font-size: 20px; line-height: 1; }
.home-empezar-pasos h3 { margin: 0; font-size: 15px; font-weight: 800; }
.home-empezar-pasos p { margin: 4px 0 0; font-size: 14px; color: var(--color-muted); }
.home-empezar-nota { margin: 18px 0 0 308px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--color-muted); }
.home-empezar-nota svg { width: 16px; height: 16px; flex: none; }
.home-empezar-nota a { font-weight: 700; }

/* Precios */
.home-precios { display: grid; gap: 36px; }
.home-precios-cabecera { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px; }
.home-precios-cabecera > div { max-width: 720px; display: grid; gap: 12px; }
.home-precios-cabecera .rd-h2 { font-size: clamp(1.75rem, 1.25rem + 1.8vw, 2.5rem); }
.home-precios-cabecera .rd-lead { font-size: 18px; }
.home-precios-nota { margin: 0; font-size: 14px; line-height: 1.55; color: var(--color-muted); max-width: 900px; }
.home-precios-nota strong { color: var(--color-text); }
.home-precios-nota a { font-weight: 700; }

/* Preguntas */
.home-faq { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); }
.home-faq .rd-h2 { font-size: clamp(1.625rem, 1.25rem + 1.2vw, 2rem); }

.home-final { padding: 8px 0 72px; }
.home-final .llamada-final h2 { max-width: 440px; }

/* Tablet y móvil */
@media (max-width: 1100px) {
  .home-heroe-rejilla { grid-template-columns: minmax(0, 1fr); }
  .home-heroe-figura { justify-items: stretch; }
  .home-ventana { height: auto; }
  .home-ventana-captura { flex: none; height: clamp(240px, 58vw, 440px); }
}
@media (max-width: 960px) {
  .home-dos, .home-detalle, .home-ia .home-dos, .home-email, .home-faq { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .home-email .home-columna-titulo { order: -1; }
  .home-empezar-fila { grid-template-columns: minmax(0, 1fr); }
  .home-empezar-nota { margin-left: 0; }
}
@media (max-width: 720px) {
  .home-heroe { padding: 40px 0 48px; }
  .home-ventana-menu { display: none; }
  .home-ventajas, .home-empezar-pasos { grid-template-columns: minmax(0, 1fr); }
  .home-empezar-pasos li + li::before { display: none; }
  .home-compatible-lista { justify-content: flex-start; }
  .home-compatible-lista li { padding: 6px 0; width: 100%; }
  .home-email-ejemplo { flex-direction: column; align-items: stretch; }
  .home-email-icono { display: none; }
  .home-email-cifras { grid-template-columns: minmax(0, 1fr); }
  .home-ia { padding: 56px 0; }
  .home-chat-fila p { max-width: 100%; }
}