/* bloques/contacto — texto y datos a un lado, formulario en tarjeta al otro.
   Los campos son los de .formulario (veridika.css): etiquetas en mono y
   línea inferior. La tarjeta nunca es blanca: beige más oscuro que el fondo. */

.bl-ct-rejilla { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px clamp(32px, 5vw, 80px); align-items: start; }

.bl-ct-texto { display: flex; flex-direction: column; gap: 22px; }
.bl-ct-texto .bl-cab { margin-bottom: 0; }

/* Formulario que hace de cabecera de la página (título H1: Desarrollo a
   medida, Auditoría, Contacto): mismos tamaños que el hero (hero-carrusel)
   y la rejilla mitad y mitad para que el titular tenga sitio. */
.bl-ct--cabecera .bl-cab-titulo { font-size: clamp(42px, 5.6vw, 78px); line-height: 1.02; letter-spacing: -.025em; }
.bl-ct--cabecera .bl-cab-texto { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.55; max-width: 32em; }
@media (min-width: 861px) {
    .bl-ct--cabecera .bl-ct-rejilla { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

.bl-ct-extra { font-size: 16.5px; line-height: 1.6; color: var(--vk-texto-2, #5f5c58); }
.bl-ct-extra p { margin: 0 0 .8em; }
.bl-ct-extra > :last-child { margin-bottom: 0; }
.bl-ct-extra a { color: var(--vk-texto, #262524); font-weight: 500; }
.bl-tema-oscuro .bl-ct-extra { color: rgba(255, 255, 255, .72); }
.bl-tema-oscuro .bl-ct-extra a { color: #fff; }

.bl-ct-datos { list-style: none; margin: 6px 0 0; padding: 0; border-top: 1px solid var(--vk-linea, rgba(38, 37, 36, .14)); }
.bl-ct-datos li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; padding: 14px 0; border-bottom: 1px solid var(--vk-linea, rgba(38, 37, 36, .14)); }
.bl-ct-dato-etq { flex: 0 0 84px; font-family: var(--fuente-mono, ui-monospace, monospace); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--vk-texto-2, #5f5c58); }
.bl-ct-datos a { font-weight: 500; font-size: clamp(18px, 1.6vw, 21px); line-height: 1.3; text-decoration: none; overflow-wrap: anywhere; }
.bl-ct-datos a:hover { text-decoration: underline; text-decoration-color: var(--vk-amarillo, #dfbe2d); }
.bl-tema-oscuro .bl-ct-datos, .bl-tema-oscuro .bl-ct-datos li { border-color: rgba(255, 255, 255, .16); }
.bl-tema-oscuro .bl-ct-dato-etq { color: rgba(255, 255, 255, .62); }

.bl-ct-tarjeta { padding: clamp(24px, 3.2vw, 44px); background: var(--vk-crema-2, #efe9e1); color: var(--vk-texto, #262524); }
.bl-tema-oscuro .bl-ct-tarjeta { color: var(--vk-texto, #262524); }

/* Captcha y botón en la misma fila; el botón, a la derecha */
.bl-ct-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.bl-ct-pie .boton { margin-left: auto; }

@media (max-width: 860px) {
    .bl-ct-rejilla { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
    .bl-ct-pie .boton { width: 100%; margin-left: 0; }
}

.bl-ct-form-titulo { margin: 0 0 22px; font-size: clamp(22px, 2vw, 28px); font-weight: 500; line-height: 1.15; }
.bl-ct-nota { margin: 0; font-size: 14px; color: var(--vk-texto-2, #5f5c58); }
.bl-ct-form select, .bl-ct-form input[type="url"], .bl-ct-form input[type="number"] { width: 100%; }

/* Lista con marca en el texto adicional (formularios que hacen de cabecera). */
.bl-ct-extra ul { list-style: none; margin: 0 0 1em; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.bl-ct-extra li { position: relative; padding-left: 28px; color: var(--vk-texto, #262524); }
.bl-ct-extra li::before { content: ""; position: absolute; left: 2px; top: .42em; width: 13px; height: 7px; border-left: 2px solid var(--vk-amarillo-2, #cdac1f); border-bottom: 2px solid var(--vk-amarillo-2, #cdac1f); transform: rotate(-45deg); }
.bl-tema-oscuro .bl-ct-extra li { color: #fff; }
.bl-ct-extra strong { color: var(--vk-texto, #262524); font-weight: 600; }