/* /conecta-tu-ia: cómo conectar un asistente de IA con Cartelera. Reusa el hero de las páginas de aterrizaje (portada-v3.css +
   aterrizaje.css) y cambia la caja de la idea por la caja del conector: la dirección para copiar y los pasos de cada app en
   pestañas. Va después de estilo.css, portada-v3.css y aterrizaje.css. Móvil primero; nada se sale a lo ancho. */

.conecta-hero .hero-titulo .texto-oro { font-size: 1.18em; }
.conector-caja { display: grid; gap: 12px; padding: 14px; }
.conector-etiqueta { color: var(--suave); font-weight: 700; font-size: .86rem; letter-spacing: .02em; padding-left: 4px; }
.conector-url { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 10px 10px 14px; border-radius: 10px; background: var(--fondo); border: 1px solid rgb(var(--acento-rgb) / .35); }
/* La dirección cabe entera en un renglón (17em > sus 27 letras); si junto al botón no cabe, el botón baja. */
.conector-url code { flex: 1 1 17em; min-width: 0; font-family: var(--mono); font-size: clamp(.92rem, 2.6vw, 1.08rem); color: var(--ambar-2); overflow-wrap: anywhere; user-select: all; }
.conector-url .boton { margin-left: auto; }

/* Pestañas de las apps (si no caben, la tira se recorre de lado y se desvanece en la orilla que sigue: conecta-tu-ia.js) */
.conector-apps { position: relative; display: flex; gap: 2px; padding: 4px; border-radius: 577px / 1000px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .07); overflow-x: auto; scrollbar-width: none; }
.conector-apps::-webkit-scrollbar { display: none; }
.conector-apps[data-desborda]:not([data-fin]) { mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); }
.conector-apps button {
	flex: none; padding: 8px 14px; border: 0; border-radius: 577px / 1000px; background: none; cursor: pointer;
	color: var(--suave); font-weight: 700; font-size: .9rem; white-space: nowrap; transition: background .15s ease, color .15s ease;
}
.conector-apps button:hover { color: var(--texto); }
.conector-apps button[aria-selected="true"] { background: var(--texto); color: #111; }
.conector-apps button:focus-visible { outline: 2px solid var(--ambar); outline-offset: 2px; }

.conector-pasos { padding: 4px 6px 2px; min-width: 0; }
.conector-pasos:focus-visible { outline: 2px solid var(--ambar); outline-offset: 4px; border-radius: 8px; }
.conector-pasos ol { margin: 0; padding: 0; list-style: none; counter-reset: paso; display: grid; gap: 10px; }
.conector-pasos li { counter-increment: paso; position: relative; padding-left: 36px; color: #e2dbcf; font-size: .95rem; line-height: 1.5; min-width: 0; }
.conector-pasos li::before {
	content: counter(paso); position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 25% / 50%;
	display: grid; place-items: center; background: var(--oro); color: var(--sobre-acento); font-weight: 800; font-size: .78rem;
}
.conector-pasos strong { color: var(--texto); }
.conector-pasos code { font-family: var(--mono); font-size: .84em; padding: 1px 6px; border-radius: 6px; background: var(--panel-2); border: 1px solid var(--borde-suave); overflow-wrap: anywhere; }
.conector-pasos .nota { margin: 12px 0 0; padding-left: 36px; }
.conector-comando { margin: 8px 0; white-space: pre-wrap; overflow-x: auto; }
.conector-comando code { padding: 0; border: 0; background: none; font-size: inherit; }
.conector-pasos li .boton { margin-top: 2px; }
.conector-estado { margin: 0; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--borde-ambar); background: var(--acento-fondo); color: var(--ambar-2); font-size: .88rem; }

.bloque-at code { font-family: var(--mono); font-size: .86em; }
#paquetes-lista { margin-top: -2px; }
@media (max-width: 980px) { .conector-caja { order: 6; } }