/* ==========================================================================
   Lavado de cara de las páginas de servicios (16/10/2026) · overfuture-ops
   Se carga después de design-system.css (includes/design.php) y SOLO actúa dentro de las secciones marcadas con .of-svr
   (cabecera aparte, que es la sección existente). Reutiliza los componentes de la 1050 y de la plantilla de landing
   (barra de confianza, tarjeta del formulario, tarjetas en línea): aquí van las reglas que en la 1050 estaban en módulos
   de código de la propia página, sin Poppins (G22) y sin estilos del botón de envío (los pone el sistema: .of-btn-primary).
   ========================================================================== */

/* --- Barra de confianza (igual que la 1050) --- */
.of-svr.of-trust-section { position: relative; z-index: 10; }
.of-svr .of-trust::after { display: none !important; }
.of-svr .of-trust .of-trust-item { margin: 0 !important; }
.of-svr .of-trust .of-trust-item .et_pb_blurb_content { display: flex; align-items: center; justify-content: center; gap: 12px; max-width: none; text-align: left; }
.of-svr .of-trust .of-trust-item .et_pb_main_blurb_image { margin: 0 !important; width: auto !important; display: block; }
.of-svr .of-trust .of-trust-item .et_pb_blurb_container { padding: 0 !important; display: block; }
.of-svr .of-trust .of-trust-item .et_pb_blurb_description p { margin: 0; padding: 0; white-space: nowrap; font-family: var(--of-font-head, 'Roboto', sans-serif); }
@media (max-width: 980px) {
	.of-svr .of-trust { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 12px; }
	.of-svr .of-trust > .et_pb_column { width: auto !important; margin: 0 !important; }
	.of-svr .of-trust .of-trust-item .et_pb_blurb_content { justify-content: flex-start; }
}
@media (max-width: 600px) {
	.of-svr .of-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.of-svr .of-trust > .et_pb_column:last-child { grid-column: 1 / -1; }
	.of-svr .of-trust .of-trust-item .et_pb_blurb_description p { white-space: normal; font-size: 15px; }
}

/* --- Tarjetas con icono en línea (columna del formulario y rejillas) --- */
.of-svr .of-card { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.of-svr .of-card .et_pb_blurb_content { text-align: left; }
.of-svr .of-card .et_pb_blurb_description p { padding-bottom: 0; }
.of-svr .of-card .et_pb_module_header { padding-bottom: 6px; }
.of-svr .of-card--inline .et_pb_blurb_content { display: flex; align-items: flex-start; gap: 16px; max-width: none; }
.of-svr .of-card--inline .et_pb_main_blurb_image { margin: 0 !important; width: auto !important; display: block; flex: 0 0 auto; }
.of-svr .of-card--inline .et_pb_blurb_container { padding-left: 0 !important; display: block; }
/* títulos de tarjeta que en el original van en mayúsculas («PRODUCTIVIDAD», «contenido PERSONALIZABLE»…): se muestran todos igual */
.of-svr .of-svr-caps .et_pb_module_header, .of-svr .of-aside-card .et_pb_module_header { text-transform: uppercase; letter-spacing: .04em; }
body #page-container #main-content .of-svr .of-svr-caps .et_pb_module_header,
body #page-container #main-content .of-svr .of-aside-card .et_pb_module_header { font-size: 16px !important; line-height: 1.35 !important; }
/* tarjetas sobre la banda oscura */
.of-svr.of-dark .of-card .et_pb_module_header, .of-svr.of-dark .of-card .et_pb_module_header span { color: #ffffff !important; }
.of-svr.of-dark .of-card .et_pb_blurb_description, .of-svr.of-dark .of-card .et_pb_blurb_description p { color: #ddd7ee !important; }
.of-svr.of-dark .of-card .et_pb_blurb_description strong { color: #ffffff; }
.of-svr.of-dark .of-svr-footnote p { color: rgba(255, 255, 255, .72) !important; font-size: 13px !important; line-height: 1.6 !important; margin: 8px 0 0; }
.of-svr .of-svr-footnote p { font-size: 13px; line-height: 1.6; }
.of-svr .of-row--note { padding-top: 8px !important; }
@media (prefers-reduced-motion: reduce) { .of-svr .of-card { transition: none !important; } }

/* --- Tarjeta del formulario (CF7 «Contacto general») --- */
.of-svr .of-lead-card { scroll-margin-top: 130px; }
.of-svr .of-lead-card .of-form-title { margin: 0 0 4px; padding: 0; font-family: var(--of-font-head, 'Roboto', sans-serif); font-weight: 700; font-size: 26px; line-height: 1.2; color: #241d35; }
.of-svr .of-lead-card .of-form-sub { margin: 0 0 22px; padding: 0; font-size: 16px; line-height: 1.5; color: #5b5470; }
.of-svr .of-cf7-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
.of-svr .of-cf7-grid p { margin: 0; padding: 0; }
.of-svr .of-cf7-grid br { display: none; }
.of-svr .of-cf7-grid .of-field { min-width: 0; margin: 0; }
.of-svr .of-cf7-grid .of-field--full { grid-column: 1 / -1; }
.of-svr .of-cf7-grid .of-field label { display: block; margin: 0 0 6px; padding: 0; font-size: 15px; font-weight: 600; line-height: 1.35; color: #241d35; }
.of-svr .of-cf7-grid .of-req { color: #b4235a; }
.of-svr .of-cf7-grid .of-opt { font-weight: 400; color: #5b5470; }
.of-svr .of-lead-card .wpcf7 :is(.wpcf7-text, .wpcf7-email, .wpcf7-tel, .wpcf7-select, .wpcf7-textarea) { display: block; width: 100%; min-height: 52px; margin: 0; padding: 12px 14px; box-sizing: border-box; font-family: inherit; font-size: 16px; line-height: 1.4; color: #241d35; background: #ffffff; border: 1.5px solid #8a80a8; border-radius: 10px; box-shadow: none; transition: border-color .15s ease, box-shadow .15s ease; }
.of-svr .of-lead-card .wpcf7 .wpcf7-textarea { min-height: 120px; height: 120px; resize: vertical; }
.of-svr .of-lead-card .wpcf7 .wpcf7-select { cursor: pointer; }
.of-svr .of-lead-card .wpcf7 .wpcf7-form-control::placeholder { color: #6b6480; opacity: 1; }
.of-svr .of-lead-card .wpcf7 .wpcf7-form-control:hover { border-color: #6849c5; }
.of-svr .of-lead-card .wpcf7 :is(.wpcf7-text, .wpcf7-email, .wpcf7-tel, .wpcf7-select, .wpcf7-textarea):focus { outline: 3px solid #6849c5; outline-offset: 2px; border-color: #6849c5; }
.of-svr .of-lead-card .wpcf7 .wpcf7-form-control.wpcf7-not-valid { border-color: #c62828; background: #fff8f8; }
.of-svr .of-lead-card .wpcf7 .wpcf7-not-valid-tip { display: block; margin: 6px 0 0; font-size: 14px; font-weight: 600; line-height: 1.4; color: #c62828; }
.of-svr .of-accept .wpcf7-list-item { margin: 0; }
.of-svr .of-accept .wpcf7-list-item label { display: flex; align-items: flex-start; gap: 10px; margin: 0; font-size: 15px; font-weight: 400; line-height: 1.5; color: #4a4458; cursor: pointer; border-radius: 6px; }
.of-svr .of-accept .wpcf7-list-item input { flex: 0 0 auto; width: 20px; height: 20px; margin: 1px 0 0; accent-color: #6849c5; }
.of-svr .of-accept a { color: #6849c5; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.of-svr .of-submit { position: relative; }
.of-svr .of-lead-card .wpcf7 .wpcf7-submit.of-btn-primary { display: block; width: 100%; margin: 4px 0 0; }
.of-svr .of-submit .wpcf7-spinner { position: absolute; top: 20px; right: 18px; margin: 0; }
.of-svr .of-lead-card .wpcf7 form .wpcf7-response-output { margin: 16px 0 0; padding: 14px 16px; font-size: 15px; font-weight: 600; line-height: 1.5; border: 2px solid; border-radius: 10px; }
.of-svr .of-lead-card .wpcf7 form.sent .wpcf7-response-output { color: #14532d; background: #e9f6ee; border-color: #1e7a4f; }
.of-svr .of-lead-card .wpcf7 form:is(.invalid, .unaccepted) .wpcf7-response-output { color: #8e1b1b; background: #fff4f4; border-color: #c62828; }
.of-svr .of-lead-card .wpcf7 form:is(.failed, .aborted, .spam) .wpcf7-response-output { color: #7c2d12; background: #fff7ed; border-color: #b45309; }
.of-svr .of-form-alt-aside .of-form-alt { margin: 24px 0 0; padding: 16px 0 0; border-top: 1px solid #e4def4; font-size: 16px; line-height: 1.6; color: #4a4458; }
@media (max-width: 600px) { .of-svr .of-cf7-grid { grid-template-columns: 1fr; } }

/* --- Ilustración (PNG transparente del material original): sin recorte ni sombra --- */
.of-svr .of-figure.of-figure--ilustracion img { aspect-ratio: auto; object-fit: contain; box-shadow: none; border-radius: 0; }

/* --- Tarjetas con imagen arriba («posibilidades» con su captura original) --- */
.of-svr .of-row--icards { display: flex; flex-wrap: wrap; }
.of-svr .of-row--icards::after { display: none !important; }
.of-svr .of-row--icards > .et_pb_column { display: flex; flex-direction: column; }
.of-svr .of-row--icards .et_pb_text.of-svr-icard-col { flex: 1 1 auto; margin-bottom: 0 !important; }
.of-svr .of-row--icards .of-svr-icard-col .et_pb_text_inner { height: 100%; }
.of-svr .of-svr-icard { height: 100%; display: flex; flex-direction: column; background: #ffffff; border: 1px solid #e4def4; border-radius: 16px; overflow: hidden; box-shadow: 0 14px 38px -12px rgba(39, 25, 76, .12); }
.of-svr .of-svr-icard__media { margin: 0; }
.of-svr .of-svr-icard__media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.of-svr .of-svr-icard__body { padding: 20px 22px 24px; }
.of-svr .of-svr-icard__body h3 { margin: 0 0 8px !important; padding: 0 !important; font-family: var(--of-font-head, 'Roboto', sans-serif); font-weight: 700; font-size: 20px !important; line-height: 1.3 !important; color: #241d35; }
.of-svr .of-svr-icard__body p { margin: 0 0 10px; padding: 0; font-size: 15px; line-height: 1.7; color: #5b5470; }
.of-svr .of-svr-icard__body p:last-child { margin-bottom: 0; }
.of-svr .of-row--icards + .of-row--icards { margin-top: 0 !important; }
@media (min-width: 981px) { .of-svr .of-row--icards { padding-bottom: 24px !important; } }
@media (max-width: 980px) { .of-svr .of-row--icards > .et_pb_column { margin-bottom: 16px !important; } }

/* --- Árbol de enlaces del sistema (fila .of-arbol con [of_tambien_en]) dentro de la última sección: separado de los relacionados --- */
.of-svr .et_pb_row.of-arbol { padding-top: 0 !important; }
.of-svr .of-arbol .et_pb_text_inner { border-top: 1px solid #e4def4; padding-top: 40px; }
.of-svr .of-arbol h2 { margin-top: 0 !important; }

/* --- CTA final: el botón existente como secundario bajo el primario --- */
.of-cta-band .of-svr-cta2 { margin-top: 16px !important; }

/* --- Caja inyectada «Capacidades relacionadas» (plugin de Codex, R10): en móvil no puede medir el 100 % más sus márgenes de 16 px
   (en producción lo tapaba un overflow-x:hidden del body; aquí se corrige en origen para que no desborde) --- */
@media (max-width: 980px) {
	body:has(.of-svr) #page-container .of-bridge-section aside.codex-cluster-bridge { width: auto !important; }
}
/* --- Iconos de las tarjetas sobre fondo oscuro: lila claro legible --- */
body #page-container #main-content .of-svr.of-dark .of-card .et-pb-icon, body.et-db #page-container #et-boc .et-l .of-svr.of-dark .of-card .et-pb-icon { color: #c9b8ff !important; }
/* contacto directo dentro de la tarjeta del formulario (como la 1050) */
.of-svr .of-lead-card .of-form-alt { margin: 20px 0 0; padding: 14px 0 0; font-size: 16px; line-height: 1.5; text-align: center; color: #4a4458; border-top: 1px solid #e4def4; }