/* Dirección D · Cinética (2/2): soluciones, método horizontal, plataforma, casos, equipo, contacto y pie. */
.d-lead { margin: 20px 0; font-size: clamp(1.25rem, 1.9vw, 1.6rem); line-height: 1.4; }

/* Soluciones: filas gigantes con vista previa al pasar el ratón */
.d-soluciones { padding: 96px 0; }
.d-cabecera { display: grid; gap: 20px; margin-bottom: 48px; }
.d-cabecera h2 { font-size: clamp(2.8rem, 6.4vw, 6.4rem); line-height: .92; }
.d-cabecera p { max-width: 46ch; color: var(--muted); font-size: 1.125rem; }
@media (min-width: 960px) { .d-cabecera { grid-template-columns: 1.4fr 1fr; gap: 64px; align-items: end; } }
.d-lista { border-top: 2px solid var(--ink); }
.d-lista li { border-bottom: 1px solid var(--line-strong); }
.d-lista a {
  position: relative; isolation: isolate; display: grid; grid-template-columns: 40px 1fr 32px; gap: 6px 14px; align-items: baseline;
  padding: 22px 0; color: inherit; text-decoration: none; transition: color .35s;
}
.d-lista a::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ink); transform: scaleY(0); transform-origin: 50% 100%; transition: transform .55s var(--ease); }
.d-lista a:hover, .d-lista a:focus-visible { color: #fff; }
.d-lista a:hover::before, .d-lista a:focus-visible::before { transform: scaleY(1); }
.d-lista .is-destacada a::before { transform: scaleY(1); background: var(--teal); }
.d-lista .num { grid-area: 1 / 1; color: var(--teal-ui); font-weight: 700; font-size: .9375rem; transition: color .35s; }
.d-lista a:hover .num { color: var(--teal-light); }
.d-lista-nombre { grid-area: 1 / 2; font-size: clamp(1.9rem, 4.6vw, 4.6rem); line-height: .95; transition: transform .55s var(--ease); }
.d-lista a:hover .d-lista-nombre { transform: translateX(14px); }
.d-lista-desc { grid-area: 2 / 2; max-width: 52ch; color: var(--muted); transition: color .35s; }
.d-lista a:hover .d-lista-desc, .d-lista a:focus-visible .d-lista-desc { color: #D6D2D4; }
.d-lista-flecha { grid-area: 1 / 3; font-size: 1.75rem; transition: transform .35s var(--ease); }
.d-lista a:hover .d-lista-flecha { transform: translateX(-6px) rotate(-45deg); }
@media (min-width: 1080px) {
  .d-lista a { grid-template-columns: 72px minmax(0, 1.6fr) minmax(0, 1fr) 48px; gap: 0 32px; align-items: center; padding: 30px 20px; }
  .d-lista-desc { grid-area: 1 / 3; }
  .d-lista-flecha { grid-area: 1 / 4; }
}
.d-no-se { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 32px; padding: 26px 0; border-bottom: 2px solid var(--ink); }
.d-no-se p { margin: 0; font-size: 1.125rem; }

/* Método: en ordenador se recorre en horizontal mientras se baja */
.d-metodo { background: var(--ink); color: #fff; --focus: var(--yellow); }
.d-metodo-sticky { padding: 88px 0; }
.d-metodo-pista { display: grid; gap: 56px; padding: 0 var(--gutter); }
.d-metodo-intro h2 { font-size: clamp(3rem, 7vw, 7rem); line-height: .9; margin-bottom: 20px; }
.d-metodo-intro p { max-width: 26ch; color: #D6D2D4; font-size: 1.375rem; }
.d-sigue { display: none; color: var(--teal-light) !important; font-weight: 700; font-size: 1rem !important; }
.d-panel { display: grid; gap: 20px; align-content: start; }
.d-panel .d-panel-num { margin: 0; font: 800 clamp(5rem, 12vw, 13rem)/.8 var(--font-head); font-stretch: var(--cond); color: transparent; -webkit-text-stroke: 2px var(--teal-light); }
.d-panel h3 { margin-bottom: 12px; font-size: clamp(2.2rem, 3.8vw, 4rem); }
.d-panel p { max-width: 36ch; color: #D6D2D4; font-size: 1.1875rem; }
.d-panel img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; }
.d-panel .d-panel-captura { object-fit: contain; object-position: top; background: #fff; padding: 10px; }
@media (min-width: 900px) {
  .d-metodo:not(.es-horizontal) .d-panel { grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; }
}
.d-metodo.es-horizontal .d-metodo-sticky { position: sticky; top: 0; display: flex; align-items: center; height: 100vh; overflow: hidden; padding: 0; }
.d-metodo.es-horizontal .d-metodo-pista {
  display: flex; align-items: center; gap: 5vw; padding: 0 6vw; will-change: transform;
  transform: translate3d(calc(var(--p, 0) * var(--dist, 0) * -1px), 0, 0);
}
.d-metodo.es-horizontal .d-metodo-intro { flex: 0 0 34vw; }
.d-metodo.es-horizontal .d-sigue { display: block; }
.d-metodo.es-horizontal .d-panel { flex: 0 0 min(78vw, 1180px); grid-template-columns: auto minmax(0, .9fr) minmax(0, 1.25fr); gap: 40px; align-items: center; }
.d-metodo.es-horizontal .d-panel img { max-height: 64vh; }

/* Plataforma contada paso a paso */
.d-plataforma { padding: 96px 0; background: var(--bg-alt); }
.d-plataforma-grid { display: grid; gap: 32px; }
.d-plataforma h2 { font-size: clamp(2.8rem, 6vw, 6rem); line-height: .92; }
.d-pantalla-col { display: none; }
.d-pantalla-marco { position: relative; aspect-ratio: 16 / 9.4; padding: 14px; border-radius: 16px; background: var(--ink); }
.d-pantalla-marco img {
  position: absolute; inset: 14px; width: calc(100% - 28px); height: calc(100% - 28px); border-radius: 6px;
  object-fit: cover; object-position: top left; opacity: 0; transform: scale(1.04); transition: opacity .6s, transform .9s var(--ease);
}
.d-plataforma-grid:not([data-activo]) [data-pantalla="0"], [data-activo="0"] [data-pantalla="0"], [data-activo="1"] [data-pantalla="1"],
[data-activo="2"] [data-pantalla="2"], [data-activo="3"] [data-pantalla="3"] { opacity: 1; transform: none; }
.d-pantalla-nota { margin-top: 12px; color: var(--muted); font-size: .875rem; }
.d-paso { padding: 28px 0; border-top: 1px solid var(--line-strong); }
.d-paso h3 { margin-bottom: 10px; font-size: clamp(2.2rem, 3.6vw, 3.4rem); line-height: .95; }
.d-paso p:not(.num) { max-width: 44ch; font-size: 1.125rem; }
.d-paso .num { margin-bottom: 8px; color: var(--teal-ui); font-weight: 700; }
.solo-movil { margin-top: 16px; border-radius: 10px; border: 1px solid var(--line); }
.d-plataforma-acciones { margin-top: 32px; }
.ya-cliente { margin-top: 20px; font-size: .9375rem; }
.ya-cliente a { color: var(--teal-ui); font-weight: 700; }
@media (min-width: 960px) {
  .d-plataforma-grid { grid-template-columns: 1.25fr 1fr; gap: 72px; }
  .d-pantalla-col { display: block; }
  .d-pantalla { position: sticky; top: 16vh; }
  .solo-movil { display: none; }
  .d-paso { display: flex; flex-direction: column; justify-content: center; min-height: 60vh; }
  .con-movimiento .d-paso { opacity: .35; transition: opacity .5s; }
  .con-movimiento .d-paso.is-activo { opacity: 1; }
}

/* Casos: tarjetas a distintas velocidades */
.d-casos { overflow: hidden; padding: 112px 0; background: var(--ink); color: #fff; --focus: var(--yellow); }
.d-casos h2 { margin-bottom: 56px; font-size: clamp(2.8rem, 6.4vw, 6.4rem); line-height: .92; }
.d-casos-grid { display: grid; gap: 24px; margin-bottom: 48px; }
.d-cita { display: grid; gap: 18px; align-content: start; padding: 32px; border-radius: 18px; background: #F7F5F1; color: var(--ink); }
.d-cita img { justify-self: start; width: auto; }
.d-cita p { margin: 0; font-size: 1.25rem; font-weight: 600; line-height: 1.35; }
.d-cita-grande p { font: 800 clamp(2.2rem, 3.8vw, 3.6rem)/.98 var(--font-head); font-stretch: var(--cond); letter-spacing: -.02em; }
.d-cita footer { color: var(--muted); font-size: .9375rem; }
.d-cita footer strong { color: var(--ink); }
.link-claro { color: var(--teal-light); }
@media (min-width: 960px) {
  .d-casos-grid { grid-template-columns: 1.3fr 1fr 1fr; align-items: start; }
  .d-cita:nth-child(2) { margin-top: 140px; }
  .d-cita:nth-child(3) { margin-top: 48px; }
}

/* Equipo y libro */
.d-equipo { padding: 112px 0; }
.d-equipo-grid { display: grid; gap: 40px; }
.d-retrato { max-width: 520px; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 18px; }
.d-retrato img { width: 100%; height: 118%; margin-top: -9%; object-fit: cover; object-position: 50% 15%; }
.d-equipo h2 { font-size: clamp(2.8rem, 5.6vw, 5.6rem); line-height: .92; }
.d-equipo-grid > div > p:not(.d-lead) { max-width: 52ch; color: var(--muted); }
.d-libro { margin-top: 48px; padding-top: 28px; border-top: 2px solid var(--ink); }
.d-libro h3 { margin-bottom: 8px; font-size: clamp(1.8rem, 2.8vw, 2.6rem); font-stretch: var(--cond); }
.d-libro p { max-width: 48ch; color: var(--muted); }
@media (min-width: 960px) { .d-equipo-grid { grid-template-columns: 1fr 1.1fr; gap: 88px; align-items: center; } }

/* Contacto */
.d-contacto { padding: 96px 0 120px; background: var(--teal); color: #fff; --focus: #fff; }
.d-contacto h2 { margin-bottom: 48px; font-size: clamp(3.2rem, 11vw, 11rem); line-height: .88; }
.d-contacto-grid { display: grid; gap: 40px; }
.d-contacto-texto > p { max-width: 24ch; font-size: 1.5rem; line-height: 1.35; }
.d-contacto .contacto-directo { display: grid; gap: 6px; margin: 28px 0 36px; }
.d-contacto .contacto-directo a { color: #fff; font-size: 1.25rem; font-weight: 700; }
.boton-circulo {
  display: grid; place-items: center; width: 168px; height: 168px; padding: 24px; border: 0; border-radius: 50%;
  background: var(--ink); color: #fff; font-weight: 800; font-size: 1.125rem; line-height: 1.15; text-align: center; cursor: pointer;
}
.boton-circulo:hover { background: #000; }
.d-form { padding: 28px; border-radius: 18px; background: #fff; color: var(--ink); --focus: var(--teal-ui); }
@media (min-width: 960px) { .d-contacto-grid { grid-template-columns: 1fr 1.25fr; gap: 72px; align-items: start; } .d-form { padding: 40px; } }

/* Pie que se descubre debajo de la página */
.d-pie-logo { padding-top: 8px; padding-bottom: 28px; }
.d-pie-logo img { width: 100%; }
@media (min-width: 960px) {
  .dir-d main { position: relative; z-index: 1; background: var(--bg); }
  .dir-d .d-pie { position: sticky; bottom: 0; z-index: 0; }
}
