/* Dirección B · Entrada por necesidades: orientar por situación desde la primera pantalla. */
body.dir-b {
  --bg: #EEF1F1;
  --bg-alt: #E2E8E8;
  --header-bg: #EEF1F1;
  --font-body: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-head: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --head-weight: 800;
  --head-track: -.03em;
  --muted: #43494A;
  --radius: 6px;
}
.dir-b .platform-link { border: 1.5px solid var(--ink); }
.dir-b .platform-link:hover { background: var(--ink); color: #fff; }

.seccion { padding: 72px 0; }
@media (min-width: 960px) { .seccion { padding: 104px 0; } }
.cabecera { display: grid; gap: 12px; max-width: 820px; margin-bottom: 40px; }
.cabecera p { font-size: 1.125rem; color: var(--muted); }
.cabecera h2, .metodo h2, .plataforma h2, .diagnostico h2, .contacto h2, .nosotros h2 { font-size: clamp(2rem, 3.6vw, 3rem); }

/* Presentación inicial y selector */
.hero { padding: 36px 0 0; }
.hero-grid { display: grid; gap: 36px; }
.hero h1 { font-size: clamp(2.4rem, 4.8vw, 4.1rem); line-height: 1.02; letter-spacing: -.035em; }
.lead { max-width: 44ch; margin: 20px 0 28px; color: var(--muted); font-size: clamp(1.15rem, 1.6vw, 1.375rem); line-height: 1.45; }
.ayuda { padding: 24px; border-top: 6px solid var(--teal); border-radius: 8px; background: #fff; }
.ayuda-titulo { margin-bottom: 18px; font-size: 1.625rem; }
.sel-label { display: block; margin-bottom: 8px; font-weight: 700; }
.sel-wrap { position: relative; }
.sel-wrap select {
  width: 100%; min-height: 56px; padding: 12px 46px 12px 14px; appearance: none;
  border: 2px solid var(--ink); border-radius: var(--radius); background: #fff; color: var(--ink); font: 600 1.0625rem/1.3 var(--font-body);
}
.sel-wrap::after {
  content: ""; position: absolute; right: 18px; top: 50%; width: 10px; height: 10px; pointer-events: none;
  border-right: 2.5px solid var(--ink); border-bottom: 2.5px solid var(--ink); transform: translateY(-70%) rotate(45deg);
}
.sel-resultado { display: grid; gap: 10px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.res-servicio { margin: 0; font-size: 1.25rem; font-weight: 800; line-height: 1.25; }
.res-servicio a { color: var(--teal-ui); }
.res-texto { margin: 0; color: var(--muted); }
.res-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 4px 0 0; }
.res-nota { font-size: .875rem; color: var(--muted); }
.hero-foto { margin-top: 44px; }
.hero-foto img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 40%; border-radius: 8px 8px 0 0; }
@media (min-width: 960px) {
  .hero { padding: 72px 0 0; }
  .hero-grid { grid-template-columns: 1.25fr 1fr; gap: 64px; align-items: start; }
  .ayuda { padding: 32px; }
  .hero-foto { margin-top: 64px; }
  .hero-foto img { aspect-ratio: 21 / 8; }
}

/* Clientes, en franja blanca pegada a la foto */
.clientes { background: #fff; }
.clientes-inner { display: grid; gap: 18px; padding-top: 28px; padding-bottom: 32px; }
.clientes h2 { font: 700 .9375rem/1.3 var(--font-body); letter-spacing: 0; color: var(--muted); }
@media (min-width: 1080px) {
  .clientes-inner { grid-template-columns: auto 1fr; gap: 48px; align-items: center; }
  .clientes-logos { justify-content: space-between; }
}

/* Tabla de soluciones: en móvil, cada fila es un bloque */
.tabla-soluciones { width: 100%; border-collapse: collapse; overflow: hidden; border-radius: 8px; background: #fff; }
.tabla-soluciones thead { display: none; }
.tabla-soluciones tr { display: block; padding: 20px; border-bottom: 1px solid var(--line); transition: background-color .4s; }
.tabla-soluciones th[scope="row"] { display: block; margin-bottom: 10px; text-align: left; }
.tabla-soluciones th a { color: var(--ink); font: 800 1.3rem/1.2 var(--font-head); letter-spacing: -.02em; text-decoration: none; }
.tabla-soluciones th a:hover { color: var(--teal-ui); }
.tabla-soluciones td { display: block; padding: 6px 0; }
.tabla-soluciones td::before { content: attr(data-label); display: block; color: var(--teal-ui); font-size: .8125rem; font-weight: 700; }
.tabla-soluciones .is-recomendada, .tabla-soluciones .is-destacada { background: #E1F2F2; }
.tabla-soluciones .is-recomendada > th { box-shadow: inset 6px 0 0 var(--teal); }
@media (min-width: 960px) {
  .tabla-soluciones { table-layout: fixed; }
  .tabla-soluciones thead th:first-child { width: 25%; }
  .tabla-soluciones thead { display: table-header-group; }
  .tabla-soluciones tr { display: table-row; padding: 0; }
  .tabla-soluciones th, .tabla-soluciones td { display: table-cell; padding: 24px 20px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
  .tabla-soluciones thead th { padding: 14px 20px; background: var(--ink); color: #fff; font-size: .9375rem; font-weight: 700; }
  .tabla-soluciones th[scope="row"] { display: table-cell; margin: 0; }
  .tabla-soluciones td::before { display: none; }
  .tabla-soluciones tbody tr:last-child > * { border-bottom: 0; }
}
.no-se { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-top: 24px; font-size: 1.0625rem; }

/* Método */
.metodo { background: var(--bg-alt); }
.metodo-grid { display: grid; gap: 40px; }
.metodo-foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; }
.metodo-intro { margin: 16px 0 28px; color: var(--muted); font-size: 1.25rem; }
.pasos li { display: grid; grid-template-columns: 48px 1fr; gap: 16px; padding: 16px 0; border-top: 1px solid var(--line); }
.paso-num { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--teal-ui); color: #fff; font-weight: 800; }
.pasos h3 { margin-bottom: 2px; font-size: 1.25rem; letter-spacing: -.01em; }
.pasos p { margin: 0; color: var(--muted); }
@media (min-width: 960px) {
  .metodo-grid { grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
  .metodo-foto img { aspect-ratio: 4 / 5; object-position: 35% 50%; }
}

/* Plataforma, en banda teal de interfaz */
.plataforma { padding: 72px 0; background: var(--teal-ui); color: #fff; --focus: #fff; --link: #fff; }
.plataforma-grid { display: grid; gap: 40px; }
.plataforma-lead { margin: 16px 0 24px; font-size: clamp(1.3rem, 2vw, 1.6rem); line-height: 1.35; }
.plataforma-lista { margin-bottom: 28px; }
.plataforma-lista li { padding: 12px 0; border-top: 1px solid rgba(255, 255, 255, .35); }
.link-claro { color: #fff; }
.plataforma-captura img { padding: 6px; border-radius: 10px; background: #fff; }
.plataforma-captura figcaption { margin-top: 10px; color: #E3F4F4; font-size: .875rem; }
.ya-cliente { margin-top: 24px; font-size: .9375rem; }
.ya-cliente a { color: #fff; font-weight: 700; }
@media (min-width: 960px) {
  .plataforma { padding: 104px 0; }
  .plataforma-grid { grid-template-columns: 1fr 1.15fr; gap: 64px; align-items: center; }
}

/* Diagnóstico Express */
.diagnostico { padding: 72px 0; background: var(--ink); color: #fff; --focus: var(--yellow); }
.diagnostico-grid { display: grid; gap: 32px; }
.diagnostico h2 + p { max-width: 32ch; margin-top: 16px; font-size: 1.3rem; line-height: 1.4; }
.diagnostico-sub { color: #CFCACC; }
.diagnostico-form { padding: 24px; border-radius: 8px; background: #fff; color: var(--ink); --focus: var(--teal-ui); }
@media (min-width: 960px) {
  .diagnostico { padding: 104px 0; }
  .diagnostico-grid { grid-template-columns: 1fr 1.2fr; gap: 72px; align-items: start; }
  .diagnostico-form { padding: 36px; }
}

/* Casos */
.casos-grid { display: grid; gap: 20px; margin-bottom: 32px; }
.caso { display: grid; gap: 18px; align-content: start; padding: 28px; border-radius: 8px; background: #fff; }
.caso img { justify-self: start; width: auto; }
.caso p { margin: 0; font-size: 1.1875rem; font-weight: 600; line-height: 1.4; }
.caso footer { color: var(--muted); font-size: .9375rem; }
.caso footer strong { color: var(--ink); }
@media (min-width: 900px) { .casos-grid { grid-template-columns: repeat(3, 1fr); } }

/* Nosotros y recursos */
.nosotros { background: var(--bg-alt); }
.nosotros-grid { display: grid; gap: 56px; }
.nosotros-bloque h2 { margin-bottom: 24px; }
.persona { display: grid; grid-template-columns: 112px 1fr; gap: 20px; align-items: start; }
.persona img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 6px; }
.persona p { color: var(--muted); }
.persona p:first-child { color: var(--ink); font-size: 1.1875rem; }
.recursos-lista li { display: grid; gap: 8px; padding: 20px 0; border-top: 1px solid var(--line); }
.recursos-lista h3 { font-size: 1.375rem; }
.recursos-lista p { margin: 0; color: var(--muted); }
@media (min-width: 600px) { .persona { grid-template-columns: 176px 1fr; gap: 28px; } }
@media (min-width: 960px) { .nosotros-grid { grid-template-columns: 1fr 1fr; gap: 72px; } }

/* Contacto con agenda integrada */
.contacto-grid { display: grid; gap: 36px; }
.contacto h2 + p { max-width: 30ch; margin-top: 16px; font-size: 1.25rem; }
.contacto-directo { display: grid; gap: 6px; margin-top: 24px; }
.contacto-directo a { color: var(--teal-ui); font-size: 1.125rem; font-weight: 700; }
.contacto-panel { padding: 20px; border-radius: 8px; background: #fff; }
.pestanas { display: flex; gap: 4px; margin-bottom: 20px; border-bottom: 1px solid var(--line); }
.pestanas button {
  min-height: 48px; margin-bottom: -1px; padding: 10px 14px; border: 0; border-bottom: 3px solid transparent;
  background: none; color: var(--muted); font-weight: 700; cursor: pointer;
}
.pestanas button[aria-selected="true"] { border-bottom-color: var(--teal); color: var(--ink); }
@media (min-width: 960px) {
  .contacto-grid { grid-template-columns: 1fr 1.45fr; gap: 72px; align-items: start; }
  .contacto-panel { padding: 32px; }
}