/* Página «Me interesa»: la tarjeta del producto elegido arriba y el formulario abajo en un recuadro negro, sobre fondo blanco (fundador, 2026-10-27). Usa los tokens de estilo.css. */

.interesa { background: var(--blanco); color: var(--tinta); }

/* Título de cada producto: el cruce de la portada (cintas.js), con formas y título propios; más bajo que el de la portada */
.ip-titulo { padding-top: clamp(8px, 2vw, 24px); }
.ip-titulo .cruce { --u: clamp(48px, 6vw, 84px); }
.ip-titulo .cruce__titulo { font-size: clamp(2rem, 4.6vw, 3.75rem); font-weight: 400; letter-spacing: -.015em; line-height: 1.05; color: var(--tinta); }

/* Producto: la misma tarjeta horizontal de la portada, a un solo ancho (920 px: tarjeta, ruta y formulario comparten borde) */
.ip { padding: clamp(8px, 2vw, 24px) var(--gutter) clamp(48px, 7vw, 96px); }
.ip__caja { max-width: 920px; margin: 0 auto; }
.ip .producto { width: 100%; margin: 0; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); }
#diag { --fondo: var(--marino); } /* tarjeta del diagnóstico: marino, el azul profundo del sitio */
.ip .producto[hidden] { display: none; } /* la tarjeta es grid y le ganaba a hidden */
.ip .producto h2 { grid-area: 1 / 2; font-size: clamp(1.25rem, 1.7vw, 1.625rem); font-weight: 400; letter-spacing: -.015em; line-height: 1.1; color: var(--blanco); }

/* Datos del producto, reducidos, en la columna del texto (bajo la línea) para no dejar vacío: entregables en celdas dibujadas y duración en barra sobre escala (el azul claro es lo que recibe el cliente) */
.datos { grid-area: 3 / 2; align-self: end; display: grid; gap: 18px; margin-top: 20px; }
.datos__titulo { margin-bottom: 8px; font-size: .9375rem; font-weight: 500; color: var(--blanco); }
.datos__entregables { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.datos__entregables li { padding: 9px 11px; font-size: .8125rem; font-weight: 300; line-height: 1.3; color: var(--blanco); border: 1px solid var(--resalta); border-radius: 2px; }
@media (max-width: 700px) { .ip .producto { grid-template-columns: minmax(0, 1fr); } .ip .producto > h2, .ip .producto > .producto__esquema, .ip .producto > .producto__linea, .ip .producto > .datos { grid-area: auto; } .ip .producto__esquema { margin: 18px 0; } .datos { margin-top: 18px; } }

/* Ruta de trabajo: una línea con un nodo por etapa, sin tarjetas; cada etapa dice qué se hace y qué recibes (celda azul). La etapa de esta página va en azul y con el punto más grande (.ruta__actual): en «Me interesa» es la primera conversación, que abre el formulario de abajo */
.ip-ruta { --g: clamp(12px, 1.6vw, 20px); max-width: calc(920px + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter) clamp(48px, 7vw, 88px); }
.ip-ruta h2 { margin-bottom: clamp(24px, 3vw, 36px); font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 400; letter-spacing: -.015em; line-height: 1.1; color: var(--tinta); }
.ruta { list-style: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: var(--g); }
.ruta li { position: relative; padding-top: 38px; }
.ruta li::before { content: ""; position: absolute; top: 4px; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--tinta); }
.ruta li:not(:last-child)::after { content: ""; position: absolute; top: 9px; left: 12px; right: calc(var(--g) * -1); height: 2px; background: var(--tinta); }
.ruta .ruta__actual::before { top: 0; width: 20px; height: 20px; background: var(--azul-institucional); } /* el punto de partida, más grande: es el que lleva al formulario */
.ruta .ruta__actual:not(:last-child)::after { left: 20px; }
.ruta .ruta__actual h3 { color: var(--azul-institucional); }
.ruta h3 { font-size: 1rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; color: var(--tinta); }
.ruta p { margin-top: 6px; font-size: .875rem; line-height: 1.45; color: var(--texto); }
.ruta .ruta__sale { margin-top: 12px; padding: 8px 10px; font-size: .8125rem; font-weight: 600; line-height: 1.35; color: var(--azul-institucional); border: 1px solid var(--azul-institucional); border-radius: 2px; }
.ruta .ruta__acredita { margin-top: 8px; padding: 10px; font-size: .8125rem; font-weight: 600; line-height: 1.35; color: var(--blanco); background: var(--azul-institucional); border-radius: 2px; }
/* Entrada: la línea se traza de un punto al siguiente a velocidad constante (90 ms por tramo, lineal, como una línea que se dibuja); cada punto aparece cuando la línea llega
   y su texto se funde detrás, sin deslizarse. Todo termina en menos de 1 s. Sin JS o con movimiento reducido queda todo en su sitio (cintas.js pone .visto). */
.ruta li:nth-child(2) { --i: 1; } .ruta li:nth-child(3) { --i: 2; } .ruta li:nth-child(4) { --i: 3; } .ruta li:nth-child(5) { --i: 4; } .ruta li:nth-child(6) { --i: 5; }
.ruta li::before { transition: scale .3s cubic-bezier(.16, 1, .3, 1) calc(var(--i, 0) * 90ms); }
.ruta li::after { transform-origin: left center; transition: scale 90ms linear calc(var(--i, 0) * 90ms); }
.ruta li > * { transition: opacity .4s ease-out calc(var(--i, 0) * 90ms + 60ms); }
.con-cintas .ruta:not(.visto) li::before { scale: 0; }
.con-cintas .ruta:not(.visto) li::after { scale: 0 1; }
.con-cintas .ruta:not(.visto) li > * { opacity: 0; }
@media (max-width: 760px) {
  .ruta li::after { transform-origin: center top; }
  .con-cintas .ruta:not(.visto) li::after { scale: 1 0; }
  .ruta { grid-template-columns: minmax(0, 1fr); }
  .ruta li { padding: 0 0 24px 32px; }
  .ruta li::before { top: 3px; }
  .ruta li:not(:last-child)::after { top: 15px; bottom: -3px; left: 5px; right: auto; width: 2px; height: auto; }
  .ruta .ruta__actual::before { top: -1px; left: -4px; }
  .ruta .ruta__actual:not(:last-child)::after { top: 19px; left: 5px; }
}

/* Contáctanos: título del formulario, sin animación (fundador, 2026-10-27) */
.interesa .dx-form__cabeza h2 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 400; letter-spacing: -.015em; line-height: 1.05; }

/* Adjuntos: botón propio en español en lugar del nativo («Choose Files»); el selector real queda oculto pero con foco */
.interesa #material { position: relative; }

/* Formulario: recuadro negro del ancho de la tarjeta */
.interesa .dx-form { width: calc(100% - 2 * var(--gutter)); max-width: 920px; margin: 0 auto clamp(64px, 9vw, 120px);
  padding: clamp(32px, 5vw, 64px) clamp(20px, 5vw, 64px); background: var(--grafito); color: #c9cacf; border-radius: 2px; }