/* ═══════════════════════════════════════════════════════════
   APEXFUSION LABS — portada 3 (30-oct-2026)
   La agencia vende soluciones: «¿qué negocio tiene?» lleva a lo
   que le construimos, con el producto que ya lo demuestra.
   Se carga después de portada-v2.css.
   ═══════════════════════════════════════════════════════════ */

/* ── portada: más productos en la fila de marcas ── */
.h2-marcas { gap: 8px; }
.h2-marcas a { padding: 7px 13px; font-size: .84rem; }

/* ── soluciones por tipo de negocio ── */
.soluciones { padding-top: 100px; }
.sol-caja { display: grid; grid-template-columns: 300px 1fr; gap: 22px; margin-top: 40px; }
.sol-tabs { display: flex; flex-direction: column; gap: 8px; }
.sol-tab { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--borde); background: rgba(255, 255, 255, .02); color: var(--texto-2); font: inherit; font-size: .95rem; font-weight: 500; text-align: left; cursor: pointer; transition: border-color .2s, background .2s, color .2s; }
.sol-tab:hover { border-color: var(--borde-fuerte); color: var(--texto); }
.sol-tab[aria-selected="true"] { border-color: color-mix(in srgb, var(--c) 60%, transparent); background: color-mix(in srgb, var(--c) 10%, transparent); color: var(--texto); }
.sol-tab i { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; font-style: normal; font-size: 1rem; background: color-mix(in srgb, var(--c) 16%, transparent); }
.sol-panel { position: relative; padding: 40px; border-radius: 24px; border: 1px solid var(--borde); background: radial-gradient(700px 320px at 100% 0%, color-mix(in srgb, var(--c) 14%, transparent), transparent 65%), var(--superficie); overflow: hidden; }
.sol-panel[hidden] { display: none; }
.sol-panel::before { content: ''; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, transparent, var(--c), transparent); opacity: .6; }
.sol-panel h3 { font-family: var(--serif); font-size: clamp(1.6rem, 2.8vw, 2.2rem); line-height: 1.15; letter-spacing: -.02em; text-wrap: balance; }
.sol-panel h3 em { font-style: italic; color: var(--c); }
.sol-dolor { margin-top: 14px; color: var(--texto-2); font-size: 1.02rem; }
.sol-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-top: 26px; }
.sol-cols h4 { margin: 0 0 10px; font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: var(--c); font-weight: 600; }
.sol-cols ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.sol-cols li { position: relative; padding-left: 24px; color: var(--texto-2); font-size: .95rem; line-height: 1.5; }
.sol-cols li::before { content: ''; position: absolute; left: 0; top: .45em; width: 13px; height: 7px; border-left: 2px solid var(--c); border-bottom: 2px solid var(--c); transform: rotate(-45deg); }
.sol-prueba { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--borde); }
.sol-prueba p { margin: 0; flex: 1 1 260px; color: var(--texto-2); font-size: .93rem; }
.sol-prueba p b { color: var(--texto); }

/* ── Bandeja: conversación de WhatsApp hecha en la página ── */
.wa-demo { background: #0b141a; }
.wa-cab { display: flex; align-items: center; gap: 11px; padding: 11px 16px; background: #1f2c34; }
.wa-cab span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #25d366; color: #0b141a; font-weight: 700; font-size: .85rem; }
.wa-cab b { display: block; font-size: .9rem; color: #e9edef; }
.wa-cab small { color: #8696a0; font-size: .74rem; }
.wa-chat { display: flex; flex-direction: column; gap: 8px; padding: 18px 16px 20px; min-height: 330px; background: radial-gradient(400px 200px at 80% 0%, rgba(37, 211, 102, .06), transparent 70%), #0b141a; }
.wa-m { max-width: 78%; padding: 8px 12px 6px; border-radius: 10px; font-size: .86rem; line-height: 1.45; color: #e9edef; }
.wa-m small { display: block; text-align: right; margin-top: 2px; font-size: .66rem; color: #8696a0; }
.wa-m.cliente { align-self: flex-end; background: #005c4b; border-top-right-radius: 3px; }
.wa-m.negocio { align-self: flex-start; background: #1f2c34; border-top-left-radius: 3px; }
.wa-m.negocio b { color: #25d366; font-weight: 600; }
.wa-dia { align-self: center; padding: 3px 10px; border-radius: 7px; background: #1f2c34; color: #8696a0; font-size: .7rem; }

/* ── Growth: centro de mando hecho en la página ── */
.gr-demo { padding: 18px; background: radial-gradient(500px 220px at 0% 0%, rgba(52, 211, 153, .12), transparent 70%), #0b0f19; }
.gr-aviso { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 14px; background: linear-gradient(135deg, rgba(214, 181, 109, .18), rgba(214, 181, 109, .06)); border: 1px solid rgba(214, 181, 109, .3); }
.gr-aviso > b { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 12px; background: var(--oro); color: #1a1408; font-family: var(--serif); font-size: 1.4rem; }
.gr-aviso div b { display: block; font-size: .92rem; }
.gr-aviso small { color: var(--texto-2); font-size: .76rem; line-height: 1.35; display: block; }
.gr-lista { display: grid; gap: 8px; margin-top: 14px; }
.gr-item { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--borde); background: rgba(255, 255, 255, .025); }
.gr-item > i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; font-style: normal; background: rgba(52, 211, 153, .14); font-size: .95rem; }
.gr-item b { display: block; font-size: .84rem; font-weight: 600; }
.gr-item small { color: var(--texto-3); font-size: .74rem; line-height: 1.3; display: block; }
.gr-item em { font-style: normal; font-size: .7rem; font-weight: 600; padding: 4px 9px; border-radius: 999px; background: rgba(214, 181, 109, .14); color: var(--oro-1); white-space: nowrap; }
.gr-item em.listo { background: rgba(62, 207, 142, .14); color: var(--verde); }

/* ── casos: sistemas creados para otros negocios ── */
.casos-v3 { padding-top: 40px; }
.casos-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 40px; }
.caso3 { display: flex; flex-direction: column; border-radius: 22px; border: 1px solid var(--borde); background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .01)); overflow: hidden; transition: transform .3s, border-color .3s; }
.caso3:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--c) 45%, transparent); }
.caso3-img { aspect-ratio: 16 / 10; overflow: hidden; border-bottom: 1px solid var(--borde); background: #0a0d16; }
.caso3-img img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.caso3-img.sala-mini { display: grid; padding: 12px; }
.caso3-img.sala-mini .sala-grilla { gap: 7px; }
.caso3-img.sala-mini .sala-video span { width: 40px; height: 40px; font-size: .8rem; }
.caso3-cuerpo { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 24px; }
.caso3-cuerpo .cap-marca { font-size: .72rem; }
.caso3 h3 { font-size: 1.15rem; }
.caso3 p { margin: 0; color: var(--texto-2); font-size: .94rem; }
.caso3 a.caso3-mas { margin-top: auto; padding-top: 6px; color: var(--c); font-weight: 600; font-size: .92rem; }

/* ── celular y tableta ── */
@media (max-width: 980px) {
  .sol-caja { grid-template-columns: 1fr; }
  .sol-tabs { flex-direction: row; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
  .sol-tab { flex: none; width: auto; padding: 10px 14px; }
  .casos-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .sol-panel { padding: 28px 20px; }
  .sol-cols { grid-template-columns: 1fr; gap: 20px; }
  .sol-prueba .btn { width: 100%; }
  .casos-grid { grid-template-columns: 1fr; }
  .wa-chat { min-height: 0; }
  .gr-item { grid-template-columns: 30px 1fr; }
  .gr-item em { grid-column: 2; justify-self: start; }
}