/* ============================================================
   CIBERPRO — app-v17.css
   Cargar EN ÚLTIMO LUGAR (después de app-v15.css).

   Objetivo:
   - Secciones claras (.section-light, .mini-ecosystem) → BLANCO PURO #FFFFFF
   - Tarjetas, recuadros, chips y formularios que estaban en blanco
     → CELESTE MUY CLARO (#EEF7FF), con texto oscuro legible.
   ============================================================ */

:root {
  --v17-cyan-soft:   #eef7ff;   /* celeste muy claro para tarjetas */
  --v17-cyan-soft-2: #e6f3ff;   /* variante un punto más saturada */
  --v17-cyan-line:   #d4e8fa;   /* borde celeste suave */
  --v17-ink:         #0c1c2e;   /* texto oscuro sobre celeste/blanco */
  --v17-ink-soft:    #2b4258;   /* texto secundario */
}

/* ─────────────────────────────────────────────────────────────
   1. SECCIONES CLARAS → BLANCO PURO
───────────────────────────────────────────────────────────── */
.section-light,
.mini-ecosystem.section-light {
  background: #FFFFFF !important;
  color: var(--v17-ink) !important;
  border-top: 1px solid var(--v17-cyan-line) !important;
  border-bottom: 1px solid var(--v17-cyan-line) !important;
}

/* Texto general dentro de la sección clara */
.section-light p,
.section-light li,
.section-light .eyebrow,
.section-light .section-anchor {
  color: var(--v17-ink-soft) !important;
}
.section-light h1,
.section-light h2,
.section-light h3,
.section-light h4 {
  color: var(--v17-ink) !important;
}


/* ─────────────────────────────────────────────────────────────
   2. TARJETAS / RECUADROS → CELESTE MUY CLARO
───────────────────────────────────────────────────────────── */
.section-light .card,
.section-light .service-row,
.section-light .contact-box,
.section-light .form.contact-box,
.section-light .chips a,
.mini-ecosystem .chips a {
  background: var(--v17-cyan-soft) !important;
  border: 1px solid var(--v17-cyan-line) !important;
  box-shadow: 0 14px 44px rgba(6, 21, 42, .07) !important;
}

/* Texto dentro de las tarjetas celestes */
.section-light .card h3,
.section-light .card h4,
.section-light .service-row h3,
.section-light .contact-box h2,
.section-light .contact-box h3 {
  color: var(--v17-ink) !important;
}
.section-light .card p,
.section-light .service-row p,
.section-light .contact-box p {
  color: var(--v17-ink-soft) !important;
}

/* La tarjeta destacada (strong-text) en sección clara:
   celeste un poco más saturado para diferenciar, texto oscuro */
.section-light .card.strong-text {
  background: var(--v17-cyan-soft-2) !important;
}
.section-light .card.strong-text h3 { color: var(--v17-ink) !important; }
.section-light .card.strong-text p  { color: var(--v17-ink-soft) !important; }

/* Chips (ecosistema): celeste claro con texto oscuro */
.section-light .chips a,
.mini-ecosystem .chips a {
  color: var(--v17-ink) !important;
}
.section-light .chips a:hover,
.mini-ecosystem .chips a:hover {
  background: var(--v17-cyan-soft-2) !important;
  border-color: var(--cyan) !important;
}


/* ─────────────────────────────────────────────────────────────
   3. FORMULARIO EN SECCIÓN CLARA → CELESTE CLARO + CAMPOS BLANCOS
   Antes los campos eran oscuros con texto blanco. Al pasar el
   recuadro a celeste, los campos van en blanco con texto oscuro.
───────────────────────────────────────────────────────────── */
.section-light .form input,
.section-light .form textarea,
.section-light .form select {
  background: #FFFFFF !important;
  color: var(--v17-ink) !important;
  border: 1px solid var(--v17-cyan-line) !important;
}
.section-light .form input::placeholder,
.section-light .form textarea::placeholder {
  color: #7e93a8 !important;
}
.section-light .form input:focus,
.section-light .form textarea:focus,
.section-light .form select:focus {
  border-color: var(--cyan) !important;
  box-shadow: 0 0 0 3px rgba(87, 201, 255, .18) !important;
  outline: none !important;
}
.section-light .form label {
  color: var(--v17-ink) !important;
}

/* Mensaje de estado del formulario: legible sobre celeste */
.section-light .form-msg {
  color: var(--v17-ink-soft);
}


/* ─────────────────────────────────────────────────────────────
   4. AJUSTE DE HUD/GRID EN BLANCO PURO
   Sobre blanco puro, la retícula azulada debe ser muy tenue.
───────────────────────────────────────────────────────────── */
.section-light .hud-field::before {
  opacity: .07 !important;
}
.section-light .section-hud.hud-bright {
  opacity: .14 !important;
}


/* ─────────────────────────────────────────────────────────────
   5. BOTONES SECUNDARIOS DENTRO DE SECCIÓN CLARA
───────────────────────────────────────────────────────────── */
.section-light .btn-outline {
  border-color: var(--v17-cyan-line) !important;
  background: var(--v17-cyan-soft) !important;
  color: var(--v17-ink) !important;
}
.section-light .btn-outline:hover {
  border-color: var(--cyan) !important;
  background: var(--v17-cyan-soft-2) !important;
}