/* Add your custom styles here */

/* ============================================================
   CRITERIO UNO — estilos de soporte para el Theme Builder (Xpro)
   y los widgets nativos de Elementor. Complementa (no sustituye)
   los controles de estilo del propio editor visual.
   ============================================================ */

:root {
  --c1-ink: #102A43;
  --c1-cream: #F6F3EC;
  --c1-cobalt: #2357D9;
  --c1-teal: #0F766E;
  --c1-slate: #52606D;
  --c1-white: #FFFFFF;
  --c1-ink-12: rgba(16,42,67,.12);
  --c1-ink-20: rgba(16,42,67,.2);
  --c1-cream-16: rgba(246,243,236,.16);
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

body { background: var(--c1-cream); }

a { transition: color 200ms ease, background-color 200ms ease, border-color 200ms ease; }

:focus-visible { outline: 2px solid var(--c1-cobalt); outline-offset: 3px; }

/* ---- Saltar al contenido ---- */
.c1-skip-link {
  position: absolute; top: -48px; left: 16px; z-index: 10000;
  background: var(--c1-ink); color: var(--c1-cream);
  padding: 12px 20px; border-radius: 11px; font-weight: 600; text-decoration: none;
  transition: top 200ms ease;
}
.c1-skip-link:focus { top: 16px; }

/* ============================================================
   HEADER
   ============================================================ */
.c1-header { position: sticky; top: 0; z-index: 500; transition: box-shadow 200ms ease, border-color 200ms ease; border-bottom: 1px solid transparent; }
.c1-header.is-scrolled { border-bottom-color: var(--c1-ink-12); box-shadow: 0 1px 2px rgba(16,42,67,.06); }

.c1-brand { font-family: 'IBM Plex Sans', sans-serif !important; font-weight: 600 !important; color: var(--c1-ink) !important; text-decoration: none !important; font-size: 1.25rem !important; }

.c1-nav { display: none; }
@media (min-width: 1025px) {
  .c1-nav { display: flex; align-items: center; gap: 32px; list-style: none; margin: 0; padding: 0; }
  .c1-nav a {
    position: relative; display: inline-flex; align-items: center; height: 80px;
    font-family: 'Inter', sans-serif; font-weight: 500; font-size: .9375rem;
    color: var(--c1-ink); text-decoration: none;
  }
  .c1-nav a::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 22px; height: 2px;
    background: var(--c1-cobalt); transform: scaleX(0); transition: transform 200ms ease;
  }
  .c1-nav a:hover::after, .c1-nav a.is-active::after { transform: scaleX(1); }
  .c1-nav a.is-active { color: var(--c1-cobalt); }
}

.c1-header-cta { display: none; }
@media (min-width: 1025px) { .c1-header-cta { display: inline-flex !important; } }

/* Menú móvil: técnica CSS-only con checkbox oculto (sin JS) */
.c1-burger { display: inline-flex; }
@media (min-width: 1025px) { .c1-burger { display: none !important; } }

.c1-burger-label {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border: 1px solid var(--c1-ink-20); border-radius: 11px;
  cursor: pointer; background: transparent; padding: 0;
}
.c1-burger-label svg { width: 22px; height: 22px; pointer-events: none; }
.c1-burger-icon-close { display: none; }

.c1-mobile-panel {
  position: fixed; inset: 0; z-index: 999; background: var(--c1-cream);
  flex-direction: column; padding: 16px 24px 32px;
  transform: translateY(-8px); opacity: 0; pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease;
  display: none;
}
.c1-mobile-panel.is-open { display: flex; opacity: 1; pointer-events: auto; transform: translateY(0); }

#c1-menu-btn[aria-expanded="true"] .c1-burger-icon-open { display: none; }
#c1-menu-btn[aria-expanded="true"] .c1-burger-icon-close { display: block; }

body.c1-menu-open { overflow: hidden; }

.c1-mobile-panel-top { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.c1-mobile-nav { display: flex; flex-direction: column; margin-top: 24px; }
.c1-mobile-nav a {
  display: flex; align-items: center; min-height: 56px;
  font-family: 'IBM Plex Sans', sans-serif; font-weight: 500; font-size: 1.25rem;
  color: var(--c1-ink); text-decoration: none; border-bottom: 1px solid var(--c1-ink-12);
}
.c1-mobile-cta { margin-top: 24px; }
.c1-mobile-cta .elementor-button { width: 100%; justify-content: center; }

@media (min-width: 1025px) { .c1-mobile-panel { display: none; } }

/* ============================================================
   BOTONES (refuerzo sobre el widget Button nativo)
   ============================================================ */
.c1-btn-primary .elementor-button, .elementor-button.c1-btn-primary {
  background: var(--c1-cobalt) !important; color: #fff !important; border-radius: 11px !important;
  font-family: 'Inter', sans-serif !important; font-weight: 600 !important; box-shadow: none !important;
}
.c1-btn-primary .elementor-button:hover, .elementor-button.c1-btn-primary:hover { background: #1c47b3 !important; }

.c1-btn-secondary .elementor-button, .elementor-button.c1-btn-secondary {
  background: transparent !important; color: var(--c1-ink) !important; border: 1px solid var(--c1-ink-20) !important;
  border-radius: 11px !important; font-family: 'Inter', sans-serif !important; font-weight: 600 !important; box-shadow: none !important;
}
.c1-btn-secondary .elementor-button:hover, .elementor-button.c1-btn-secondary:hover { background: rgba(16,42,67,.04) !important; }

.c1-section-ink .c1-btn-secondary .elementor-button,
.c1-section-ink .elementor-button.c1-btn-secondary { color: #fff !important; border-color: var(--c1-cream-16) !important; }

/* ============================================================
   ETIQUETAS DE SECCIÓN / EYEBROWS
   ============================================================ */
.c1-eyebrow {
  font-family: 'IBM Plex Sans', sans-serif !important; font-weight: 600 !important;
  font-size: .8125rem !important; letter-spacing: .08em !important; text-transform: uppercase !important;
  color: var(--c1-cobalt) !important;
}
.c1-section-ink .c1-eyebrow { color: var(--c1-cream) !important; opacity: .85; }

/* ============================================================
   TARJETAS
   ============================================================ */
.c1-card {
  background: #fff; border: 1px solid var(--c1-ink-12); border-radius: 16px;
  box-shadow: 0 4px 16px rgba(16,42,67,.08);
}
.c1-card-inverse { background: rgba(246,243,236,.06); border: 1px solid var(--c1-cream-16); border-radius: 16px; }

.c1-badge {
  display: inline-flex; align-items: center; font-family: 'Inter', sans-serif; font-weight: 600;
  font-size: .6875rem; letter-spacing: .04em; text-transform: uppercase; color: #fff;
  background: var(--c1-teal); border-radius: 999px; padding: 4px 10px;
}

.c1-check-item { display: flex; align-items: flex-start; gap: 10px; }
.c1-check-item svg { flex-shrink: 0; color: var(--c1-teal); margin-top: 3px; width: 16px; height: 16px; }

/* ============================================================
   ACORDEÓN (widget nativo Elementor) — refuerzo visual
   ============================================================ */
.c1-faq .elementor-accordion-item { border-bottom: 1px solid var(--c1-ink-12); }
.c1-faq .elementor-tab-title { font-family: 'IBM Plex Sans', sans-serif !important; font-weight: 600 !important; color: var(--c1-ink) !important; }
.c1-faq .elementor-tab-content { color: var(--c1-slate) !important; }
.c1-faq .elementor-accordion-icon { color: var(--c1-cobalt) !important; }

/* ============================================================
   FORMULARIO (JetFormBuilder)
   ============================================================ */
.c1-form-card { background: #fff; border-radius: 18px; box-shadow: 0 4px 16px rgba(16,42,67,.08); padding: 32px; }
.c1-form-card .jet-form-builder__field,
.c1-form-card select,
.c1-form-card textarea,
.c1-form-card input[type="text"],
.c1-form-card input[type="email"],
.c1-form-card input[type="tel"] {
  border-radius: 11px !important; border: 1px solid var(--c1-ink-20) !important; min-height: 46px;
}
.c1-form-card .jet-form-builder__field-label,
.c1-form-card .jet-form-builder__label,
.c1-form-card .jet-form-builder__label-text {
  font-family: 'Inter', sans-serif !important; font-weight: 600 !important; color: var(--c1-ink) !important;
}
.c1-form-card .jet-form-builder__required { color: var(--c1-teal) !important; }
.c1-form-card .jet-form-builder__desc { font-family: 'Inter', sans-serif !important; color: var(--c1-slate) !important; }
.c1-form-card button[type="submit"], .c1-form-card .jet-form-builder__submit-wrap button {
  background: var(--c1-cobalt) !important; color: #fff !important; border-radius: 11px !important; font-weight: 600 !important;
  border: none !important; font-family: 'Inter', sans-serif !important;
}

/* ============================================================
   FOOTER
   ============================================================ */
.c1-footer a { color: rgba(246,243,236,.6); text-decoration: none; }
.c1-footer a:hover { color: #fff; text-decoration: underline; }

/* ============================================================
   UTILIDADES
   ============================================================ */
.c1-section-ink,
.c1-section-ink p,
.c1-section-ink li,
.c1-section-ink div,
.c1-section-ink span { color: var(--c1-cream) !important; }
.c1-section-ink h1, .c1-section-ink h2, .c1-section-ink h3, .c1-section-ink h4 { color: #fff !important; }
.c1-section-ink a:not(.elementor-button) { color: rgba(246,243,236,.75); }
.c1-section-ink a:not(.elementor-button):hover { color: #fff; }

/* ============================================================
   LISTAS (widget nativo Icon List) — texto dentro de la paleta
   ============================================================ */
.elementor-icon-list-item { color: var(--c1-ink); }

/* ============================================================
   FILAS DE TARJETAS (Container nativo en flex-direction:row)
   Elementor aplica "width:100%" por defecto a todo contenedor
   hijo (.e-con), lo que fuerza el apilado vertical en filas de
   varias columnas. Forzamos reparto equitativo del espacio.
   ============================================================ */
.c1-row > .e-con-inner > .e-con {
  flex-grow: 1 !important;
  flex-shrink: 1 !important;
  flex-basis: 0 !important;
  width: auto !important;
  max-width: 100% !important;
}
@media (max-width: 767px) {
  .c1-row > .e-con-inner > .e-con {
    flex-basis: 100% !important;
  }
}

/* ============================================================
   PÁGINA "QUÉ HACEMOS" — SECCIÓN CAPACIDADES
   Cada fila (.c1-cap-row) es un c1-row de 2 columnas: una
   columna estrecha con el número (.c1-cap-badge-col) y una
   columna de texto (.c1-cap-text-col) que ocupa el resto.
   Sobrescribimos el reparto 50/50 por defecto de .c1-row.
   El orden alternado (par/impar) ya viene resuelto en el JSON
   de Elementor (orden de los hijos), así que .c1-cap-reverse
   no necesita CSS de reordenación, solo existe como marcador.
   ============================================================ */
.c1-cap-row > .e-con-inner > .e-con.c1-cap-badge-col {
  flex: 0 0 96px !important;
  width: 96px !important;
  max-width: 96px !important;
}
.c1-cap-row > .e-con-inner > .e-con.c1-cap-text-col {
  flex: 1 1 0 !important;
  width: auto !important;
  max-width: 100% !important;
}
.c1-cap-badge {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-weight: 600 !important;
  font-size: 2.5rem !important;
  line-height: 1 !important;
}
.c1-capabilities-page .c1-cap-row {
  border-top: 1px solid var(--c1-ink-12);
}
@media (max-width: 767px) {
  .c1-cap-row > .e-con-inner > .e-con.c1-cap-badge-col,
  .c1-cap-row > .e-con-inner > .e-con.c1-cap-text-col {
    flex-basis: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .c1-cap-badge { font-size: 2rem !important; }
}

/* ============================================================
   ESTADO "ACTIVO" DEL MENÚ EN LA PÁGINA "QUÉ HACEMOS" (ID 94)
   El header es una plantilla global (Theme Builder), así que no
   podemos marcar el enlace activo en el HTML del widget sin
   afectar a todas las páginas. Lo resolvemos por CSS, acotado a
   la clase de body que WordPress añade en esa página en concreto.
   ============================================================ */
body.page-id-94 .c1-nav a[href="/servicios/"] { color: var(--c1-cobalt); }
body.page-id-94 .c1-nav a[href="/servicios/"]::after { transform: scaleX(1); }
body.page-id-94 .c1-mobile-nav a[href="/servicios/"] { color: var(--c1-cobalt); }

/* ============================================================
   PÁGINA "ORGANIZACIONES PROFESIONALES"
   ============================================================ */

/* ---- Diagrama del hero (entradas > revisión y decisión humana > resultados) ---- */
.c1-diagram { background: #fff; border: 1px solid var(--c1-ink-12); border-radius: 16px; box-shadow: 0 4px 16px rgba(16,42,67,.08); padding: 28px; }
.c1-diagram-label { font-family: 'IBM Plex Sans', sans-serif; font-weight: 600; font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--c1-slate); text-align: center; margin-bottom: 10px; }
.c1-diagram-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.c1-diagram-pill { display: inline-flex; align-items: center; font-family: 'Inter', sans-serif; font-size: .8125rem; font-weight: 500; color: var(--c1-ink); background: var(--c1-cream); border: 1px solid var(--c1-ink-12); border-radius: 999px; padding: 6px 14px; }
.c1-diagram-arrow { display: flex; justify-content: center; color: var(--c1-ink-20); margin: 10px 0; }
.c1-diagram-arrow svg { width: 20px; height: 20px; }
.c1-diagram-core { background: rgba(15,118,110,.07); border: 1px solid rgba(15,118,110,.35); border-radius: 12px; padding: 16px 20px; text-align: center; font-family: 'IBM Plex Sans', sans-serif; font-weight: 600; font-size: .9375rem; color: var(--c1-teal); margin: 12px 0; }
.c1-diagram-results .c1-diagram-pill { background: var(--c1-ink); color: #fff; border-color: var(--c1-ink); }

/* ---- Filas numeradas de una sola columna (sección "El reto") ----
   Reutilizan .c1-cap-badge/.c1-cap-badge-col/.c1-cap-text-col (misma
   apariencia visual que en la página "Qué hacemos"), sin alternar de lado. */
.c1-numbered-rows .c1-cap-row { border-top: 1px solid var(--c1-ink-12); }

/* ---- Áreas de aplicación: grid nativo de 2 columnas (container_type=grid),
   no necesita el parche de .c1-row porque los items de grid ya miden
   100% de su propia celda. ---- */
.c1-area-item h3 { font-size: 1.125rem; margin-bottom: 8px; }
.c1-area-item p { color: var(--c1-slate); font-size: .9375rem; }

/* ---- Bloque enmarcado: solución demostrable (flujo de 4 pasos) ---- */
.c1-framed { background: #fff; border: 1px solid var(--c1-ink-12); border-radius: 16px; box-shadow: 0 4px 16px rgba(16,42,67,.08); padding: 40px; }
.c1-flow { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; margin: 24px 0; }
.c1-flow-step { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 120px; }
.c1-flow-step .c1-flow-num { width: 36px; height: 36px; border-radius: 50%; background: var(--c1-cream); border: 1px solid var(--c1-ink-12); display: flex; align-items: center; justify-content: center; font-family: 'IBM Plex Sans', sans-serif; font-weight: 600; color: var(--c1-cobalt); font-size: .9375rem; margin: 0 auto; }
.c1-flow-step .c1-flow-label { font-family: 'Inter', sans-serif; font-weight: 600; font-size: .875rem; color: var(--c1-ink); text-align: center; margin-top: 6px; }
.c1-flow-arrow { color: var(--c1-ink-20); flex-shrink: 0; }
.c1-flow-arrow svg { width: 20px; height: 20px; }
@media (max-width: 700px) {
  .c1-flow { flex-direction: column; }
  .c1-flow-arrow svg { transform: rotate(90deg); }
}

/* ---- Método: 5 pasos conectados por una línea vertical ---- */
.c1-method-steps { position: relative; }
.c1-method-row { display: flex; gap: 24px; padding: 20px 0; align-items: flex-start; }
.c1-method-steps::before { content: ''; position: absolute; top: 28px; bottom: 28px; left: 27px; width: 2px; background: var(--c1-ink-12); z-index: 0; }
.c1-method-badge-col { flex: 0 0 56px !important; width: 56px !important; max-width: 56px !important; }
.c1-method-badge {
  position: relative; z-index: 1; width: 56px; height: 56px; border-radius: 50%;
  background: #fff; border: 2px solid var(--c1-cobalt); color: var(--c1-cobalt) !important;
  display: flex; align-items: center; justify-content: center;
  font-family: 'IBM Plex Sans', sans-serif; font-weight: 600; font-size: 1.125rem;
}
.c1-method-text-col { flex: 1 1 0 !important; width: auto !important; max-width: 100% !important; padding-top: 8px; }

/* ---- Aviso / nota enmarcada (sección "Encaje") ---- */
.c1-notice { display: flex; gap: 12px; background: #fff; border: 1px solid var(--c1-ink-12); border-left: 3px solid var(--c1-cobalt); border-radius: 12px; padding: 20px 24px; margin-top: 32px; }
.c1-notice svg { color: var(--c1-cobalt); flex-shrink: 0; margin-top: 2px; width: 20px; height: 20px; }
.c1-notice p { color: var(--c1-slate); font-size: .9375rem; margin: 0; }

/* ---- Hero de "Organizaciones profesionales": 2 columnas asimétricas
   (contenido más ancho que el diagrama), apiladas por debajo de 1024px ---- */
.c1-hero-row > .e-con-inner > .e-con:nth-child(1) { flex: 1.15 1 0 !important; }
.c1-hero-row > .e-con-inner > .e-con:nth-child(2) { flex: 1 1 0 !important; }
@media (max-width: 1024px) {
  .c1-hero-row > .e-con-inner { flex-direction: column; }
  .c1-hero-row > .e-con-inner > .e-con:nth-child(1),
  .c1-hero-row > .e-con-inner > .e-con:nth-child(2) {
    flex-basis: 100% !important;
  }
}

/* Centra el número dentro del círculo del método (la clase cae en el
   div contenedor del widget Heading, no en el <h3> en sí). */
.c1-method-badge .elementor-heading-title { margin: 0; line-height: 1; }

/* ============================================================
   PÁGINA "DESPACHOS TÉCNICOS"
   ============================================================ */

/* ---- Diagrama vertical del hero: entradas -> paso plano ->
   paso resaltado (revisión) -> salidas. Reutiliza .c1-diagram,
   .c1-diagram-label, .c1-diagram-row, .c1-diagram-pill,
   .c1-diagram-arrow, .c1-diagram-core (ya definidos arriba). Solo
   añade el paso intermedio "plano" (no resaltado). ---- */
.c1-diagram-step {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: #fff; border: 1px solid var(--c1-ink-12); border-radius: 12px;
  padding: 14px 18px; font-family: 'IBM Plex Sans', sans-serif; font-weight: 600;
  font-size: .9375rem; color: var(--c1-ink); margin: 12px 0; text-align: center;
}
.c1-diagram-step svg { width: 18px; height: 18px; color: var(--c1-slate); flex-shrink: 0; }
.c1-diagram-core svg { width: 18px; height: 18px; flex-shrink: 0; }

/* ---- Aplicaciones: grid abierto de 3 columnas con icono ---- */
.c1-app-icon {
  width: 42px; height: 42px; display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px; border-radius: 10px; background: rgba(15,118,110,.08); color: var(--c1-teal);
}
.c1-app-icon svg { width: 21px; height: 21px; }

/* ---- Badge "Base de trabajo" junto al eyebrow de un producto en
   definición (sin implicar oferta cerrada ni precio). ---- */
.c1-status-badge {
  display: inline-flex; align-items: center; padding: 5px 12px; margin-bottom: 16px;
  border: 1px solid rgba(15,118,110,.35); border-radius: 8px; color: var(--c1-teal);
  font-family: 'IBM Plex Sans', sans-serif; font-weight: 700; font-size: .6875rem;
  letter-spacing: .06em; text-transform: uppercase;
}

/* ---- Banda "Límites definidos" (oscura): fila de 5 columnas
   separadas por una línea vertical fina, sin tarjetas ni sombras. ---- */
.c1-limits-row > .e-con-inner > .e-con { border-left: 1px solid rgba(255,255,255,.16); padding-left: 22px !important; }
.c1-limits-row > .e-con-inner > .e-con:first-child { border-left: 0; padding-left: 0 !important; }
.c1-limit-icon { color: #5BC7BD; margin-bottom: 14px; }
.c1-limit-icon svg { width: 30px; height: 30px; }
@media (max-width: 767px) {
  .c1-limits-row > .e-con-inner > .e-con {
    border-left: 0; padding-left: 0 !important; border-top: 1px solid rgba(255,255,255,.16); padding-top: 22px !important;
  }
  .c1-limits-row > .e-con-inner > .e-con:first-child { border-top: 0; padding-top: 0 !important; }
}

/* ---- Encaje + Preguntas frecuentes: fila de 2 columnas asimétricas
   (misma técnica que .c1-hero-row, proporción distinta). ---- */
.c1-fitfaq-row > .e-con-inner > .e-con:nth-child(1) { flex: .92 1 0 !important; }
.c1-fitfaq-row > .e-con-inner > .e-con:nth-child(2) { flex: 1.08 1 0 !important; }
@media (max-width: 900px) {
  .c1-fitfaq-row > .e-con-inner { flex-direction: column; }
  .c1-fitfaq-row > .e-con-inner > .e-con:nth-child(1),
  .c1-fitfaq-row > .e-con-inner > .e-con:nth-child(2) {
    flex-basis: 100% !important;
  }
}

/* Nav activo en la página "Despachos técnicos" (ID 299). El header no
   tiene un enlace de navegación dedicado a esta vertical (el nav
   principal apunta a "Para quién", "Qué hacemos", "Soluciones",
   "Método", "Control"), así que no hay ningún href que resaltar aquí
   todavía — se deja preparado por si se añade un enlace en el futuro. */

/* ============================================================
   PÁGINA "COMUNICACIÓN PROFESIONAL" (solución)
   ============================================================ */

/* ---- Migas de pan reutilizables. Evita estilos en línea dentro del
   HTML del bloque de texto: solo estructura + clase. ---- */
.c1-breadcrumb { font-family: 'Inter', sans-serif; font-size: .875rem; color: var(--c1-slate); }
.c1-breadcrumb a { color: var(--c1-slate); text-decoration: none; }
.c1-breadcrumb a:hover { color: var(--c1-cobalt); }
.c1-breadcrumb .current { color: var(--c1-ink); }

/* ---- Línea de confianza bajo los CTA del hero. ---- */
.c1-trust-line { display: flex; align-items: center; gap: 8px; font-family: 'Inter', sans-serif; font-weight: 600; color: var(--c1-ink); }
.c1-trust-line svg { width: 18px; height: 18px; color: var(--c1-teal); flex-shrink: 0; }

/* ---- Limita el ancho de línea de un párrafo de entrada sin fijar
   tipografía en el HTML: la tipografía del texto se configura en las
   opciones del propio widget de texto (control "Typography"). ---- */
.c1-lead { max-width: 70ch; }

/* ---- Funcionamiento: flujo de 7 pasos con descripción corta.
   Reutiliza .c1-flow/.c1-flow-step/.c1-flow-arrow (misma lógica de
   ajuste de línea y columna en móvil) y añade una línea de
   descripción por paso. ---- */
.c1-flow-desc { font-family: 'Inter', sans-serif; font-size: .75rem; line-height: 1.4; color: var(--c1-slate); text-align: center; margin-top: 2px; max-width: 132px; }
.c1-flow--wide .c1-flow-step { min-width: 136px; }

/* ---- Control humano: banda oscura con grid abierto de iconos
   (variante clara de .c1-app-icon para fondo oscuro). ---- */
.c1-control-icon { width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; border-radius: 10px; background: rgba(255,255,255,.12); color: #5BC7BD; }
.c1-control-icon svg { width: 21px; height: 21px; }

/* ---- Fila numerada de una sola frase, sin título propio (sección
   "Problema"): reutiliza .c1-cap-badge-col para el número, pero la
   columna de texto solo lleva el párrafo (sin encabezado h3). ---- */
.c1-numbered-line-text p { margin: 0; }

/* ============================================================
   PÁGINA "DOCUMENTACIÓN TÉCNICA" (solución)
   ============================================================ */

/* ---- Leyenda corta bajo el paso resaltado del diagrama (p.ej.
   "Paso obligatorio"), reutiliza .c1-diagram-core ya existente. ---- */
.c1-diagram-caption {
  display: block; text-align: center; font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 700; font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--c1-teal); margin-top: -6px; margin-bottom: 4px;
}

/* ---- Funcionamiento: 6 pasos conectados por una línea horizontal
   continua (versión horizontal de .c1-method-steps), con icono en
   vez de número dentro del círculo. ---- */
.c1-hsteps { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 28px 16px; margin-top: 40px; }
.c1-hsteps::before {
  content: ''; position: absolute; top: 28px; left: 6%; right: 6%; height: 2px;
  background: rgba(15,118,110,.25); z-index: 0;
}
.c1-hstep { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; flex: 1 1 140px; max-width: 160px; gap: 10px; }
.c1-hstep-icon {
  width: 56px; height: 56px; border-radius: 50%; background: #fff; border: 2px solid var(--c1-teal);
  color: var(--c1-teal); display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.c1-hstep-icon svg { width: 22px; height: 22px; }
.c1-hstep-title { font-family: 'IBM Plex Sans', sans-serif; font-weight: 600; font-size: .9375rem; color: var(--c1-ink); }
.c1-hstep-desc { font-family: 'Inter', sans-serif; font-size: .8125rem; line-height: 1.45; color: var(--c1-slate); }
@media (max-width: 900px) { .c1-hsteps::before { display: none; } }

/* ============================================================
   MÉTODO — componentes nuevos de esta página
   ============================================================ */

/* Mapa de fases (hero) */
.c1-phase-map {
    background: #FFFFFF;
    border: 1px solid #E4E0D6;
    border-radius: 16px;
    padding: 32px;
}
.c1-diagram-label {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #829AB1;
    margin-bottom: 20px;
}
.c1-phase-map-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.c1-phase-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
    background: #F6F3EC;
    border-radius: 12px;
    padding: 18px 10px;
}
.c1-phase-node-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #2357D9;
    color: #FFFFFF;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 700;
}
.c1-phase-node-label {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #102A43;
    line-height: 1.3;
}

/* Leyenda de formas (avanzar / ajustar / detener) */
.c1-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #E4E0D6;
}
.c1-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #486581;
}
.c1-legend-item svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
.c1-legend-item.is-avanzar svg { color: #0F766E; }
.c1-legend-item.is-ajustar svg { color: #C2760C; }
.c1-legend-item.is-detener svg { color: #B42318; }

/* Fases extendidas (Sección "Seis fases") */
.c1-phase-row {
    align-items: flex-start;
}
.c1-phase-includes {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: #486581;
    margin-top: 4px;
}
.c1-phase-includes p { margin: 0; }
.c1-gate {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 12px;
    padding: 14px 16px;
    background: #F6F3EC;
    border-left: 3px solid #2357D9;
    border-radius: 8px;
}
.c1-gate svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 2px;
    color: #2357D9;
}
.c1-gate p {
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: #102A43;
}

/* Puertas de decisión — iconos en banda oscura */
.c1-decision-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.1);
    margin-bottom: 12px;
}
.c1-decision-icon svg {
    width: 24px;
    height: 24px;
    color: #FFFFFF;
}

/* Tabla de entregables — contenedor con scroll accesible */
.c1-table-scroll {
    overflow-x: auto;
    border: 1px solid #E4E0D6;
    border-radius: 12px;
}
.c1-table-scroll:focus-visible {
    outline: 2px solid #2357D9;
    outline-offset: 2px;
}
.c1-deliverables-table {
    width: 100%;
    min-width: 520px;
    border-collapse: collapse;
    font-family: 'Inter', sans-serif;
}
.c1-deliverables-table thead th {
    text-align: left;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #FFFFFF;
    background: #102A43;
    padding: 14px 20px;
}
.c1-deliverables-table tbody td {
    font-size: 15px;
    line-height: 1.5;
    color: #334E68;
    padding: 14px 20px;
    border-bottom: 1px solid #E4E0D6;
}
.c1-deliverables-table tbody tr:last-child td {
    border-bottom: none;
}
.c1-deliverables-table tbody tr:nth-child(even) {
    background: #F9F7F2;
}
.c1-deliverables-table tbody td:first-child {
    font-weight: 700;
    color: #102A43;
    white-space: nowrap;
}

/* Nota de retorno del ciclo de mantenimiento */
.c1-cycle-return {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: #829AB1;
    margin: 0;
}
.c1-cycle-return svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Responsive */
@media (max-width: 1024px) {
    .c1-phase-map-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 767px) {
    .c1-phase-map-grid {
        grid-template-columns: 1fr;
    }
    .c1-phase-row {
        flex-direction: column;
    }
    .c1-method-badge-col {
        flex-direction: row;
        justify-content: flex-start;
        margin-bottom: 8px;
    }
}

/* ============================================================
   SEGURIDAD, PRIVACIDAD Y CONTROL — componentes nuevos de esta página
   ============================================================ */

/* Matriz de control (hero) */
.c1-control-matrix {
    min-width: 480px;
}
.c1-control-matrix thead th {
    background: #102A43;
}

/* Tarjetas de capa (Organizativos / Técnicos / Humanos) */
.c1-layer-card {
    background: #FFFFFF;
    border: 1px solid #E4E0D6;
    border-radius: 16px;
}
.c1-layer-list {
    margin: 12px 0 0 0;
    padding: 0;
    list-style: none;
}
.c1-layer-list li {
    position: relative;
    padding: 8px 0 8px 24px;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: #486581;
    border-top: 1px solid #F0EDE4;
}
.c1-layer-list li:first-child {
    border-top: none;
}
.c1-layer-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 16px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #2357D9;
}

/* Tarjetas de ciclo de vida (banda oscura) */
.c1-lifecycle-card {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 16px;
    padding: 28px 24px;
}
.c1-badge-ink {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    margin-bottom: 12px;
}
.c1-lifecycle-list {
    margin: 12px 0 0 0;
    padding: 0;
    list-style: none;
}
.c1-lifecycle-list li {
    position: relative;
    padding: 6px 0 6px 20px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: #F6F3EC;
}
.c1-lifecycle-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 14px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #5BC7BD;
}

/* Responsive */
@media (max-width: 767px) {
    .c1-control-matrix {
        min-width: 460px;
    }
    .c1-hero-row {
        flex-direction: column;
    }
}

/* ============================================================
   CONTACTO — componentes nuevos de esta página
   ============================================================ */

/* Banner contextual (?interes= via JS) */
.c1-context-banner {
    display: none;
    align-items: flex-start;
    gap: 10px;
    background: #FFFFFF;
    border-left: 3px solid #2357D9;
    border-radius: 10px;
    padding: 16px 18px;
    margin-top: 20px;
}
.c1-context-banner.is-active {
    display: flex;
}
.c1-context-banner svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 1px;
    color: #2357D9;
}
.c1-context-banner .c1-context-text {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: #102A43;
    font-weight: 600;
}

/* Enlace "Ver más" en tarjetas de motivo */
.c1-card-link {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #2357D9;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.c1-card-link:hover {
    text-decoration: underline;
}

/* Tarjeta del formulario compartido: quitar sombra doble si el widget ya trae una */
.c1-form-card {
    background: #FFFFFF;
    border-radius: 16px;
    padding: 8px;
}

/* ============================================================
   NAV — submenús anidados (dropdown escritorio + acordeón móvil)
   ============================================================ */
.c1-nav-dropdown { position: relative; }
.c1-nav-dropdown summary {
  display: inline-flex; align-items: center; gap: 5px; height: 80px;
  font-family: 'Inter', sans-serif; font-weight: 500; font-size: .9375rem;
  color: var(--c1-ink); cursor: pointer; list-style: none;
}
.c1-nav-dropdown summary::-webkit-details-marker { display: none; }
.c1-nav-dropdown summary::after {
  content: ''; width: 6px; height: 6px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform 150ms ease; margin-top: -3px;
}
.c1-nav-dropdown details[open] summary::after { transform: rotate(-135deg); margin-top: 3px; }
.c1-nav-dropdown .c1-submenu {
  position: absolute; top: 100%; margin-top: 8px; left: -16px; z-index: 200;
  min-width: 260px; padding: 8px; list-style: none;
  background: var(--c1-white); border: 1px solid var(--c1-ink-12); border-radius: 12px;
  box-shadow: 0 16px 32px rgba(16,42,67,.14);
}
.c1-nav-dropdown .c1-submenu li { margin: 0; }
.c1-nav-dropdown .c1-submenu a {
  display: block; height: auto; padding: 10px 14px; border-radius: 8px;
  font-family: 'Inter', sans-serif; font-weight: 500; font-size: .875rem;
  color: #334E68; text-decoration: none;
}
.c1-nav-dropdown .c1-submenu a::after { content: none; }
.c1-nav-dropdown .c1-submenu a:hover { background: var(--c1-cream); color: var(--c1-ink); }

.c1-mobile-dropdown summary {
  display: flex; align-items: center; justify-content: space-between; min-height: 56px;
  font-family: 'IBM Plex Sans', sans-serif; font-weight: 500; font-size: 1.25rem;
  color: var(--c1-ink); border-bottom: 1px solid var(--c1-ink-12); cursor: pointer; list-style: none;
}
.c1-mobile-dropdown summary::-webkit-details-marker { display: none; }
.c1-mobile-dropdown summary::after {
  content: ''; width: 8px; height: 8px; flex-shrink: 0;
  border-right: 2px solid #829AB1; border-bottom: 2px solid #829AB1;
  transform: rotate(45deg); transition: transform 150ms ease;
}
.c1-mobile-dropdown details[open] summary::after { transform: rotate(-135deg); }
.c1-mobile-submenu { display: flex; flex-direction: column; padding-left: 16px; }
.c1-mobile-submenu a {
  min-height: 48px !important; font-size: 1.0625rem !important; color: #486581 !important;
}
/* ============================================================
   CASOS — componentes nuevos de esta página
   ============================================================ */

/* Escala de evidencia (hero) */
.c1-evidence-scale { background: #FFFFFF; border: 1px solid #E4E0D6; border-radius: 16px; padding: 28px; }
.c1-evidence-item { border: 1px solid #E4E0D6; border-radius: 12px; background: #F9F7F2; }
.c1-evidence-item .c1-phase-node-num { margin-bottom: 10px; }

/* Criterios de evidencia (grid 3+2) */
.c1-criterio-item { border-top: 2px solid #2357D9; padding-top: 16px !important; }

/* Cabecera de caso: tipo + estado + título */
.c1-eyebrow .elementor-heading-title {
  font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: #829AB1; margin: 0 0 4px;
}

/* Estado del caso: texto + icono + borde, nunca solo color */
.c1-case-status {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; margin: 4px 0 14px;
  border-radius: 8px; border: 1.5px solid;
  font-family: 'IBM Plex Sans', sans-serif; font-weight: 700; font-size: .75rem;
  letter-spacing: .05em; text-transform: uppercase;
}
.c1-case-status svg { width: 15px; height: 15px; flex-shrink: 0; }
.c1-case-status.is-live { border-color: #0F766E; color: #0F766E; background: rgba(15,118,110,.07); }
.c1-case-status.is-dev { border-color: #52606D; color: #52606D; background: rgba(82,96,109,.07); border-style: dashed; }

/* Flujo del caso: 4 pasos numerados */
.c1-case-flow { margin-top: 8px; }
.c1-flow-step { background: #FFFFFF; border: 1px solid #E4E0D6; border-radius: 12px; }
.c1-case[data-bg="dark"] .c1-flow-step { background: #F6F3EC; }

/* Tabla de comparación: reutiliza .c1-deliverables-table + .c1-table-scroll,
   solo ajusta el ancho mínimo para 6 columnas */
.c1-case-comparison { min-width: 760px; }

/* Autorización futura: grid de 3 en banda oscura */
.c1-case-permission .elementor-heading-title { line-height: 1.3; }

/* Responsive */
@media (max-width: 1024px) {
  .c1-case-flow { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 767px) {
  .c1-case-flow { grid-template-columns: 1fr !important; }
  .c1-evidence-criteria { grid-template-columns: 1fr !important; }
  .c1-measurement { grid-template-columns: 1fr !important; }
  .c1-case-permission { grid-template-columns: 1fr !important; }
}
/* ================ Quienes somos — equipo (avatares con iniciales) ================ */
.c1-team-card {
  background: #fff; border: 1px solid var(--c1-ink-12); border-radius: 16px;
  box-shadow: 0 4px 16px rgba(16,42,67,.08);
}
.c1-team-avatar {
  width: 64px; height: 64px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'IBM Plex Sans', sans-serif; font-weight: 600; font-size: 1.125rem;
  letter-spacing: .02em; color: #fff; margin-bottom: 16px;
}
.c1-team-avatar.is-a { background: var(--c1-cobalt); }
.c1-team-avatar.is-b { background: var(--c1-teal); }
.c1-team-role {
  font-family: 'Inter', sans-serif; font-weight: 600; font-size: .75rem;
  letter-spacing: .04em; text-transform: uppercase; color: var(--c1-slate);
  margin: 4px 0 12px;
}


/* ============================================================
   PÁGINAS LEGALES (Privacidad / Aviso legal / Cookies) — solo texto
   y tablas, sin diseño de marca (sin heros, tarjetas, iconos, bandas
   de color). CSS mínimo, solo para que el contenido sea legible.
   ============================================================ */
.c1-legal-page { }

.c1-legal-content { max-width: 800px; }

.c1-legal-p { margin: 0; }

.c1-legal-section { padding-top: 8px; border-top: 1px solid #E4E0D6; }
.c1-legal-content > .e-con > .c1-legal-section:first-of-type,
.c1-legal-section:first-child { border-top: none; padding-top: 0; }

.c1-legal-h2 { margin-bottom: 4px; }

.c1-legal-table-wrap { overflow-x: auto; }

table.c1-legal-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    line-height: 1.55;
    color: #334E68;
}

table.c1-legal-table th,
table.c1-legal-table td {
    border: 1px solid #E4E0D6;
    padding: 10px 12px;
    text-align: left;
    vertical-align: top;
}

table.c1-legal-table th {
    font-weight: 600;
    color: #102A43;
    background-color: #F9F7F2;
}

table.c1-legal-table em {
    color: #B42318;
    font-style: normal;
    font-weight: 600;
}

/* ===== Organizaciones profesionales v2 (borrador) — botones adicionales ===== */
.c1-btn-ghost .elementor-button, .elementor-button.c1-btn-ghost {
  background: transparent !important; color: #F6F3EC !important; border: 1.5px solid rgba(246,243,236,.5) !important; border-radius: 11px !important;
  font-family: 'Inter', sans-serif !important; font-weight: 600 !important; box-shadow: none !important;
}
.c1-btn-ghost .elementor-button:hover, .elementor-button.c1-btn-ghost:hover { background: rgba(246,243,236,.12) !important; }

.c1-btn-cta .elementor-button, .elementor-button.c1-btn-cta {
  background: #FFFFFF !important; color: var(--c1-ink, #102A43) !important; border-radius: 11px !important;
  font-family: 'Inter', sans-serif !important; font-weight: 600 !important; box-shadow: 0 10px 26px rgba(0,0,0,.18) !important;
}
.c1-btn-cta .elementor-button:hover, .elementor-button.c1-btn-cta:hover { transform: translateY(-3px); }