:root {
  --color1: #080B18;
  --color2: #E8ECFA;
  --nexo-bg: #080B18;
  --nexo-panel: #151B35;
  --nexo-violet: #8B5CF6;
  --nexo-aqua: #35D6C8;
  --nexo-amber: #FFC857;
  --nexo-muted: #929BB8;
}

html, body {
  min-height: 100%;
  background: var(--nexo-bg) !important;
  color: var(--color2) !important;
}

body {
  background-image:
    radial-gradient(ellipse at 15% 0%, rgba(139,92,246,.18), transparent 42%),
    radial-gradient(ellipse at 90% 15%, rgba(53,214,200,.10), transparent 35%),
    linear-gradient(145deg, #080B18, #10152B 65%, #080B18) !important;
  background-attachment: fixed;
}

#procesos {
  min-height: 100vh;
}

#procesos section {
  color: var(--color2);
}

#procesos h1 {
  color: #fff;
  font-size: clamp(1.5rem, 3vw, 2.3rem);
  letter-spacing: -.04em;
}

#procesos .w-70 {
  width: min(1120px, 92%) !important;
}

#procesos .grid-2 {
  gap: 24px;
}

#procesos .form-group {
  color: #DCE3FA;
}

#procesos input,
#procesos textarea {
  background: rgba(21,27,53,.88) !important;
  color: #fff !important;
  border: 1px solid rgba(139,92,246,.35) !important;
  border-radius: 10px;
  padding: 12px 14px;
  outline: none;
}

#procesos input:focus,
#procesos textarea:focus {
  border-color: var(--nexo-aqua) !important;
  box-shadow: 0 0 0 3px rgba(53,214,200,.12);
}

#procesos .form-button button {
  width: auto;
  min-width: 120px;
  padding: 0 20px;
  border: 1px solid rgba(139,92,246,.55);
  border-radius: 10px;
  background: linear-gradient(110deg, #7543D8, #8B5CF6);
  color: #fff;
  font-weight: 700;
  transition: .2s ease;
}

#procesos .form-button button:hover {
  background: linear-gradient(110deg, #35BFB5, #35D6C8);
  color: #08111D;
  transform: translateY(-1px);
}

#procesos iframe {
  max-width: 100%;
  border: 1px solid rgba(139,92,246,.3);
  background: #10152B;
}

#procesos .img-footer {
  color: var(--nexo-muted);
}

@media (max-width: 760px) {
  #procesos .grid-2 {
    grid-template-columns: 1fr;
  }

  #procesos .w-70 {
    width: 92% !important;
  }

  #procesos iframe {
    width: 100%;
    height: 240px;
  }
}

/* NEXO EMBED DASHBOARD */
.nexo-shell{display:flex;min-height:100vh;color:#e8ecfa}
.nexo-sidebar{width:250px;flex-shrink:0;padding:28px 17px;background:rgba(10,14,32,.94);border-right:1px solid rgba(139,92,246,.2);display:flex;flex-direction:column;gap:28px}
.nexo-brand{font-size:25px;font-weight:800;letter-spacing:-1px;color:#fff;padding:5px 12px}
.nexo-brand span{color:#8B5CF6}
.nexo-subtitle{font-size:10px;color:#929bb8;letter-spacing:2px;padding:0 12px}
.nexo-nav{display:flex;flex-direction:column;gap:7px}
.nexo-nav button{width:100%;text-align:left;padding:12px 14px;background:transparent;border:1px solid transparent;border-radius:10px;color:#aeb8d4;cursor:pointer;font-size:13px}
.nexo-nav button:hover,.nexo-nav button.active{background:rgba(139,92,246,.15);border-color:rgba(139,92,246,.3);color:#fff}
.nexo-sidebar-footer{margin-top:auto;color:#929bb8;font-size:11px;padding:12px}
.nexo-main{flex:1;min-width:0;padding:35px clamp(18px,4vw,55px)}
.nexo-topbar{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:30px}
.nexo-eyebrow{font-size:11px;letter-spacing:2px;color:#35D6C8;text-transform:uppercase}
.nexo-heading{font-size:28px;font-weight:750;color:#fff;margin:8px 0}
.nexo-muted{color:#929bb8;font-size:13px;line-height:1.6}
.nexo-card{background:linear-gradient(145deg,rgba(25,32,62,.94),rgba(16,22,44,.94));border:1px solid rgba(139,92,246,.2);border-radius:16px;padding:23px;min-width:0;box-shadow:0 12px 35px rgba(0,0,0,.12)}
.nexo-card h3{margin:0 0 14px;color:#fff;font-size:16px}
.nexo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.nexo-grid .wide{grid-column:1/-1}
.nexo-field{display:flex;flex-direction:column;gap:8px;margin:15px 0;color:#cbd3e9;font-size:12px}
.nexo-field input,.nexo-field textarea{width:100%;box-sizing:border-box;background:#0b1126!important;color:#fff!important;border:1px solid #303b61!important;border-radius:9px;padding:12px}
.nexo-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:17px}
.nexo-btn{border:0;border-radius:9px;padding:12px 17px;background:#8B5CF6;color:#fff;font-weight:700;cursor:pointer}
.nexo-btn.secondary{background:#222d4c;border:1px solid #39476c}
.nexo-status{font-size:12px;color:#35D6C8;min-height:18px;margin-top:12px}
.nexo-preview{display:block;width:100%;height:auto;aspect-ratio:16 / 9;border:1px solid #303b61;border-radius:12px;background:#080B18}
.nexo-section{display:none}
.nexo-section.active{display:block}
.nexo-logout{border:1px solid rgba(255,255,255,.13);background:transparent;color:#cbd3e9;border-radius:9px;padding:10px 13px;cursor:pointer}
.nexo-pill{display:inline-block;padding:6px 10px;border-radius:20px;background:rgba(53,214,200,.1);color:#35D6C8;font-size:11px}
.nexo-empty{padding:25px;border:1px dashed #39476c;border-radius:12px;color:#929bb8;font-size:13px;line-height:1.7}
@media(max-width:850px){
 .nexo-shell{display:block}
 .nexo-sidebar{width:auto;padding:15px;gap:12px;border-right:0;border-bottom:1px solid rgba(139,92,246,.2)}
 .nexo-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
 .nexo-sidebar-footer{display:none}
 .nexo-main{padding:23px 16px}
}
@media(max-width:560px){
 .nexo-grid{grid-template-columns:1fr}
 .nexo-grid .wide{grid-column:auto}
 .nexo-topbar{align-items:flex-start}
 .nexo-heading{font-size:23px}
 .nexo-preview{height:auto;aspect-ratio:16 / 9}
}


/* NEXO EMBED — TIPOGRAFÍA Y TEMAS */
.nexo-shell {
  font-family: 'Inter', sans-serif;
  transition: background-color .25s ease, color .25s ease;
}
.nexo-shell h1, .nexo-shell h2, .nexo-shell h3,
.nexo-brand, .nexo-heading {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
}
.nexo-heading { font-weight: 700; letter-spacing: -.035em; }
.nexo-card h3 { font-weight: 700; letter-spacing: -.02em; }
.nexo-top-actions { display:flex; align-items:center; gap:10px; }
.nexo-theme-toggle {
  border:1px solid rgba(139,92,246,.35);
  background:rgba(139,92,246,.10);
  color:#dcd5ff;
  border-radius:9px;
  padding:10px 13px;
  font:600 12px 'Inter',sans-serif;
  cursor:pointer;
  transition:all .2s ease;
}
.nexo-theme-toggle:hover { transform:translateY(-1px); border-color:#8B5CF6; }
.nexo-shell[data-theme="light"] {
  color:#17213B;
  background:#F3F5FB;
}
.nexo-shell[data-theme="light"] .nexo-sidebar {
  background:rgba(255,255,255,.96);
  border-color:#E4E7F1;
  box-shadow:4px 0 24px rgba(27,39,75,.04);
}
.nexo-shell[data-theme="light"] .nexo-brand { color:#17213B; }
.nexo-shell[data-theme="light"] .nexo-subtitle,
.nexo-shell[data-theme="light"] .nexo-sidebar-footer { color:#78829B; }
.nexo-shell[data-theme="light"] .nexo-nav button { color:#596580; }
.nexo-shell[data-theme="light"] .nexo-nav button:hover,
.nexo-shell[data-theme="light"] .nexo-nav button.active {
  color:#6941C6;
  background:#F0EBFF;
  border-color:#DDD1FF;
}
.nexo-shell[data-theme="light"] .nexo-heading,
.nexo-shell[data-theme="light"] .nexo-card h3 { color:#17213B; }
.nexo-shell[data-theme="light"] .nexo-muted { color:#68748E; }
.nexo-shell[data-theme="light"] .nexo-card {
  background:linear-gradient(145deg,#FFFFFF,#FAFBFF);
  border-color:#E5E8F2;
  box-shadow:0 10px 28px rgba(35,48,83,.06);
}
.nexo-shell[data-theme="light"] .nexo-field { color:#45516C; }
.nexo-shell[data-theme="light"] .nexo-field input,
.nexo-shell[data-theme="light"] .nexo-field textarea {
  background:#FFFFFF !important;
  color:#17213B !important;
  border-color:#D9DEEA !important;
}
.nexo-shell[data-theme="light"] .nexo-btn.secondary {
  background:#EEF0F8;
  color:#394563;
  border-color:#D9DEEA;
}
.nexo-shell[data-theme="light"] .nexo-logout {
  color:#46516B;
  border-color:#D9DEEA;
}
.nexo-shell[data-theme="light"] .nexo-theme-toggle {
  color:#6941C6;
  background:#F0EBFF;
  border-color:#DDD1FF;
}
.nexo-shell[data-theme="light"] .nexo-empty {
  color:#68748E;
  border-color:#CBD2E2;
}
.nexo-shell[data-theme="light"] .nexo-preview {
  background:#E9EDF6;
  border-color:#D9DEEA;
}
.nexo-shell[data-theme="light"] .nexo-pill {
  background:#E4F8F5;
  color:#087F75;
}
@media(max-width:850px) {
  .nexo-top-actions { flex-wrap:wrap; justify-content:flex-end; }
}


/* Créditos siempre visibles, también en móviles */
.nexo-sidebar-footer {
  display:block !important;
  line-height:1.8;
  padding:14px 12px;
  border-top:1px solid rgba(139,92,246,.16);
}
.nexo-sidebar-footer strong {
  color:#35D6C8;
  font-weight:700;
}
.nexo-top-actions {
  display:flex;
  align-items:center;
  gap:10px;
}

/* NEXO EMBED — LOGOTIPO DE LA PLATAFORMA (branding etapa 1) */
.nexo-brand-block .nexo-brand { padding: 4px 12px; line-height: 0; }
.nexo-brand-logo {
  display: block;
  width: 100%;
  max-width: 200px;
  height: auto;
  aspect-ratio: 934 / 300;
  object-fit: contain;
}
.nexo-brand-block .nexo-brand-text { display: none; color: inherit; line-height: normal; }
.nexo-brand-block .nexo-subtitle { display: none; }
.nexo-brand-block.is-fallback .nexo-brand { line-height: normal; }
.nexo-brand-block.is-fallback .nexo-brand-logo { display: none; }
.nexo-brand-block.is-fallback .nexo-brand-text { display: inline; }
.nexo-brand-block.is-fallback .nexo-subtitle { display: block; }
@media (max-width: 850px) { .nexo-brand-logo { max-width: 170px; } }
@media (max-width: 560px) { .nexo-brand-logo { max-width: 150px; } }
/* Placa neutra clara detrás del logotipo, solo en tema oscuro (el PNG no se modifica) */
.nexo-shell:not([data-theme="light"]) .nexo-brand-block:not(.is-fallback) .nexo-brand {
  width: fit-content; padding: 10px 14px; border-radius: 12px; background: rgba(255,255,255,.96);
}