/* ==========================================================================
   NORBEX — Tema claro
   --------------------------------------------------------------------------
   Se carga DESPUES de estilos.css y solo sobrescribe lo necesario, asi que
   comparte estructura, tipografias y comportamiento con el tema oscuro.

   Se activa con ?tema=claro

   Criterio:
   - El fondo pasa a blanco roto y el texto a azul noche.
   - El volumen ya no viene de la luz sino de sombras suaves y bordes finos:
     un resplandor cian sobre blanco no se lee, se ve sucio.
   - El cian puro (#00D4FF) no tiene contraste suficiente sobre blanco, asi que
     para texto y acentos se usa un cian oscurecido.
   - La consola del diagrama se mantiene oscura: es un instrumento, y sobre un
     fondo claro funciona como pieza de contraste.
   ========================================================================== */

:root{
  --claro-fondo:#EAF1F9;
  --claro-superficie:#FFFFFF;
  --claro-superficie-alt:#F7FAFE;
  --claro-borde:#AFC8DE;
  --claro-borde-fuerte:#9CBAD6;
  --claro-tinta:#0B1F3B;
  --claro-texto:#41556E;
  --claro-tenue:#5A6E85;
  --cian-texto:#0081A1;   /* cian oscurecido: el #00D4FF no se lee sobre blanco */
  --sombra:0 1px 2px rgba(11,31,59,.08),0 14px 34px -16px rgba(11,31,59,.28);
  --sombra-alta:0 2px 4px rgba(11,31,59,.10),0 30px 64px -26px rgba(11,31,59,.40);
}

/* --- Fondo ---------------------------------------------------------------- */
body{
  background:var(--claro-fondo);
  color:var(--claro-texto);
}
body::before{
  /* La misma reticula que el tema oscuro, en tinta azul noche y con los nodos
     en el azul de marca. En claro hay que contenerse mas: sobre fondo blanco
     unas lineas oscuras pesan mucho mas que unas claras sobre fondo negro. */
  background-image:
    radial-gradient(circle at center,rgba(37,99,235,.5) 1.7px,rgba(37,99,235,.13) 4.5px,transparent 9px),
    radial-gradient(circle at center,rgba(37,99,235,.38) 1.5px,rgba(37,99,235,.09) 4px,transparent 8px),
    linear-gradient(rgba(11,31,59,.075) 1px,transparent 1px),
    linear-gradient(90deg,rgba(11,31,59,.075) 1px,transparent 1px),
    linear-gradient(rgba(11,31,59,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(11,31,59,.028) 1px,transparent 1px);
  background-size:
    204px 204px,
    340px 340px,
    68px 68px,
    68px 68px,
    17px 17px,
    17px 17px;
  background-position:
    -68px -102px,
    0px 34px,
    34px 0,
    34px 0,
    34px 0,
    34px 0;
}
body::after{
  background:
    radial-gradient(820px 560px at 78% 3%,rgba(37,99,235,.13),rgba(37,99,235,0) 62%),
    radial-gradient(980px 680px at 8% 86%,rgba(0,137,171,.11),rgba(0,137,171,0) 66%),
    radial-gradient(720px 520px at 52% 44%,rgba(37,99,235,.045),rgba(37,99,235,0) 72%);
}

h1,h2,h3,h4{color:var(--claro-tinta)}

/* --- Etiquetas ------------------------------------------------------------ */
.kicker,.eyebrow{color:var(--cian-texto)}
.kicker::before,.eyebrow::before{background:var(--cian-texto);box-shadow:none}
.kicker i{background:var(--cian-texto);box-shadow:none}

/* --- Cabecera ------------------------------------------------------------- */
.header{
  background:rgba(255,255,255,.92);
  border-bottom:1px solid var(--claro-borde);
}
.header nav a{color:var(--claro-texto)}
.header nav a:not(.nav-cta):hover{color:var(--azul)}
.menu{color:var(--claro-tinta);border-color:var(--claro-borde-fuerte)}
.cambio-tema{border-color:var(--claro-borde-fuerte);color:var(--claro-texto)}
.cambio-tema:hover{border-color:var(--azul);color:var(--azul);background:rgba(37,99,235,.07)}
/* Dos clases en el selector: con '.nav-cta' a secas perdia contra
   '.header nav a' y el texto del boton se quedaba del color de los enlaces. */
.header nav a.nav-cta{
  background:var(--noche);color:#fff;
  box-shadow:0 1px 2px rgba(11,31,59,.12),0 12px 28px -14px rgba(11,31,59,.5);
}
.header nav a.nav-cta:hover{box-shadow:0 1px 2px rgba(11,31,59,.16),0 18px 36px -14px rgba(11,31,59,.6);color:#fff}

/* --- Portada -------------------------------------------------------------- */
.hero-copy h1{color:var(--claro-tinta)}
.hero-copy h1 span{
  background:linear-gradient(96deg,#0089AB 0%,var(--azul) 68%,#1B4FD8 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:none;
}
.hero-copy > p{color:var(--claro-texto)}
.outcomes{color:var(--claro-tenue)}
.outcomes span::first-letter{color:var(--cian-texto)}

.button.primary{
  background:var(--noche);color:#fff;
  box-shadow:0 1px 2px rgba(11,31,59,.12),0 14px 32px -14px rgba(11,31,59,.55);
}
.button.primary:hover{box-shadow:0 1px 2px rgba(11,31,59,.16),0 20px 42px -14px rgba(11,31,59,.65)}
.button.secondary,.button.outline{
  border:1px solid var(--claro-borde-fuerte);color:var(--claro-tinta);background:#fff;
}
.button.secondary:hover,.button.outline:hover{
  border-color:var(--azul);background:rgba(37,99,235,.06);
}

/* --- Barra de señal ------------------------------------------------------- */
.signal-bar{background:#fff;border-color:var(--claro-borde)}
.signal-bar .wrap{color:var(--claro-tenue)}
.signal-bar i{background:var(--azul);box-shadow:none}

/* --- Secciones ------------------------------------------------------------ */
.split-head p,.section-title p{color:var(--claro-tenue)}

/* Retos */
.problem-grid article{
  background:var(--claro-superficie);
  border:1px solid var(--claro-borde);
  box-shadow:var(--sombra);
}
.problem-grid article:hover{box-shadow:var(--sombra-alta);border-color:var(--claro-borde-fuerte)}
.problem-grid article > span{color:var(--cian-texto)}
.problem-grid h3{color:var(--claro-tinta)}
.problem-grid p{color:var(--claro-texto)}
.problem-grid .answer{
  background:linear-gradient(160deg,#EAF3FF,#DCE9FF 60%,#F5F9FF);
  border-color:#BBD4F7;
}
.problem-grid .answer h3{color:var(--claro-tinta)}

/* Soluciones */
.service-list{background:var(--claro-borde);border-color:var(--claro-borde);box-shadow:var(--sombra)}
.service-list article{background:var(--claro-superficie)}
.service-list article:hover{background:var(--claro-superficie-alt)}
.service-num{color:var(--cian-texto)}
.service-list h3{color:var(--claro-tinta)}
.service-list p{color:var(--claro-texto)}
.service-list ul li{background:#F1F6FC;border-color:var(--claro-borde);color:var(--claro-tenue)}
.service-list article > b{color:var(--azul)}

/* Capacidades */
.capability-map article{
  background:var(--claro-superficie);
  border:1px solid var(--claro-borde);
  box-shadow:var(--sombra);
}
.capability-map article:hover{box-shadow:var(--sombra-alta)}
.capability-map article > span{
  background:#EAF3FF;border-color:#BBD4F7;color:var(--azul);
}
.capability-map small{color:var(--claro-tenue)}
.capability-map h3{color:var(--claro-tinta)}
.capability-map p{color:var(--claro-texto)}
.connector{color:var(--azul)}

.objectives{border-color:var(--claro-borde);box-shadow:var(--sombra);background:#fff}
.objectives > div{background:#fff}
.objectives > div + div{border-color:var(--claro-borde)}
.objectives strong{background:#F1F6FC;color:var(--claro-tinta)}
.objectives span{border-color:var(--claro-borde);color:var(--claro-texto)}
.objectives > div:last-child span{color:var(--azul)}

/* Aplicaciones: se mantiene como banda oscura para dar ritmo a la pagina */
.cases{
  background:linear-gradient(180deg,#0B1F3B,#0A1A31);
  border-color:transparent;
}
.cases .eyebrow,.cases .eyebrow.light{color:#7FE7FA}
.cases .eyebrow::before{background:#7FE7FA;box-shadow:none}
.cases-layout h2{color:#fff}
.cases-layout .sticky > p{color:#A7BDD6}
.cases .button.outline{border-color:rgba(255,255,255,.28);color:#EAF2FB;background:transparent}
.cases .button.outline:hover{border-color:#7FE7FA;background:rgba(127,231,250,.1)}
.case-cards article{
  background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:none;
}
.case-cards article:hover{border-color:rgba(127,231,250,.5);box-shadow:0 30px 70px -30px rgba(0,0,0,.6)}
.case-cards article > span{color:#7FE7FA}
.case-cards h3{color:#fff}
.case-cards p{color:#A7BDD6}
.case-cards article > div{color:#93AAC4;border-color:rgba(255,255,255,.1)}
.case-cards article > div b{color:#6E88A6}

/* Proceso */
.process-grid{background:var(--claro-borde);border-color:var(--claro-borde);box-shadow:var(--sombra)}
.process-grid article{background:var(--claro-superficie)}
.process-grid h3{color:var(--claro-tinta)}
.process-grid p{color:var(--claro-texto)}
.principle{
  background:linear-gradient(150deg,#EAF3FF,#FFFFFF);
  border:1px solid #BBD4F7;
}
.principle strong{color:var(--claro-tinta)}
.principle p{color:var(--claro-texto)}

/* Preguntas */
.faq-layout h2{color:var(--claro-tinta)}
.accordions details{
  background:var(--claro-superficie);
  border:1px solid var(--claro-borde);
  box-shadow:var(--sombra);
}
.accordions details[open]{border-color:#BBD4F7}
.accordions summary{color:var(--claro-tinta)}
.accordions summary b{color:var(--azul)}
.accordions details p{color:var(--claro-texto)}

/* Contacto y formulario */
.contact{
  background:linear-gradient(180deg,#FFFFFF,#EEF4FB);
  border-top:1px solid var(--claro-borde);
}
.contact-grid h2{color:var(--claro-tinta)}
.contact-grid > div > p{color:var(--claro-texto)}
.contact-points span{background:#EAF3FF;border-color:#BBD4F7;color:var(--azul)}
#proposal-form{
  background:#fff;
  border:1px solid var(--claro-borde);
  box-shadow:var(--sombra-alta);
}
#proposal-form label{color:var(--claro-tenue)}
#proposal-form input,#proposal-form textarea{
  background:#F7FAFE;border-color:var(--claro-borde);color:var(--claro-tinta);
}
#proposal-form input::placeholder,#proposal-form textarea::placeholder{color:#9AACC0}
#proposal-form input:focus,#proposal-form textarea:focus{
  border-color:var(--azul);box-shadow:0 0 0 3px rgba(37,99,235,.14);
}
#form-status{color:var(--claro-tenue)}
#form-status[data-estado="ok"]{color:#1F8A5B}
#form-status[data-estado="error"]{color:#C0392B}

/* --- Pie ------------------------------------------------------------------ */
footer{background:#fff;border-top:1px solid var(--claro-borde)}
footer .wrap{color:var(--claro-tenue)}
footer a{color:var(--claro-texto)}
footer a:hover{color:var(--azul)}

/* --- Menú desplegable en pantallas estrechas ------------------------------
   El tema oscuro le pone fondo azul noche. Sin esta regla, al abrir el menú
   en móvil aparecía una franja negra sobre la página blanca. */
@media(max-width:720px){
  .header nav{
    background:rgba(255,255,255,.99);
    border-bottom:1px solid var(--claro-borde);
    box-shadow:0 24px 48px -24px rgba(11,31,59,.28);
  }
  .header nav a:not(.nav-cta){color:var(--claro-tinta)}
  .header nav a:not(.nav-cta):hover{color:var(--azul)}
}

/* --- Detalles que dependen del brillo ------------------------------------ */
/* El destello del logotipo.
   ----------------------------------------------------------------------
   Aqui hubo un error de criterio: se puso un barrido AZUL para no manchar el
   fondo blanco. Pero el logotipo del tema claro ya es azul, asi que azul sobre
   azul no se veia: la animacion pasaba desapercibida.

   El miedo a manchar el fondo no tenia fundamento: la mascara del logotipo
   (--mascara-logo) recorta el destello a la forma de las letras y la cinta, de
   modo que NUNCA puede salir del logotipo. Por eso se puede usar blanco.

   Y el blanco es lo que funciona aqui: el wordmark del logotipo a color es
   azul noche, asi que un barrido claro se lee perfectamente encima. */
.logo::after{
  background-image:linear-gradient(100deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.42) 40%,
    rgba(255,255,255,.78) 50%,
    rgba(255,255,255,.42) 60%,
    rgba(255,255,255,0) 100%);
}

/* --- Galería de ejemplos --------------------------------------------------
   El marco pasa a superficie clara y el volumen lo dan sombras, no luz. Las
   PANTALLAS se quedan oscuras a propósito: son instrumentos, y sobre blanco
   funcionan como pieza de contraste, igual que la consola del diagrama. */
.galeria-marco{
  background:var(--claro-superficie);
  border:1px solid var(--claro-borde);
  box-shadow:var(--sombra-alta);
}
.galeria-cabecera{color:var(--claro-tenue);border-color:var(--claro-borde)}
.galeria-cabecera em{color:#1F8A5B}
.galeria-cabecera em::before{background:#1F8A5B;box-shadow:0 0 8px rgba(31,138,91,.5)}
.galeria-texto > span{color:var(--cian-texto)}
.galeria-texto h3{color:var(--claro-tinta)}
.galeria-texto p{color:var(--claro-texto)}
.galeria-texto ul li{
  background:#EAF3FF;border-color:#BBD4F7;color:var(--azul);
}
.galeria-pie{border-color:var(--claro-borde)}
.galeria-puntos button{background:var(--claro-borde-fuerte);box-shadow:none}
.galeria-puntos button:hover{background:#A9BDD4}
.galeria-puntos button[aria-current="true"]{
  background:linear-gradient(96deg,var(--cian-texto),var(--azul));
  box-shadow:0 0 12px -2px rgba(0,137,171,.6);
}
.galeria-puntos button:focus-visible{outline-color:var(--azul)}
/* El boton de pausa del diagrama vive sobre la consola oscura; el de la
   galeria vive sobre el marco claro, asi que necesita su propio contraste. */
.galeria-pie .demo-toggle{border-color:var(--claro-borde-fuerte);color:var(--cian-texto)}
.galeria-pie .demo-toggle:hover:not(:disabled){border-color:var(--azul);color:var(--azul)}
.galeria-pie .demo-toggle[aria-pressed="true"]{background:rgba(37,99,235,.1);color:var(--azul)}

/* --- Llamada final del Inicio ---------------------------------------------
   La caja llevaba el fondo azul noche pensado para el tema oscuro, pero el
   titular hereda la tinta oscura del tema claro: quedaba texto oscuro sobre
   fondo oscuro y no se leia. Aqui pasa a superficie clara con sombra, que es
   el criterio del tema claro: el volumen lo dan las sombras, no la luz. */
.llamada-caja{
  background:var(--claro-superficie);
  border:1px solid var(--claro-borde);
  box-shadow:var(--sombra-alta);
}
.llamada-caja h2{color:var(--claro-tinta)}
.llamada-caja p{color:var(--claro-texto)}

/* --- Historia -------------------------------------------------------------
   La negrita del texto va en blanco sobre fondo oscuro, que sobre blanco no se
   ve. Aqui recupera la tinta. El ano no necesita nada: se pinta con el
   degradado recortado a las letras y se lee en los dos temas. */
.historia-texto strong{color:var(--claro-tinta)}

/* --- Pagina Nosotros -------------------------------------------------------
   El tema claro de este sitio no redefine --texto, asi que cada regla que use
   esa variable necesita su pareja aqui. Sin esto el texto sale gris claro
   sobre blanco, que es justo el fallo que se repite.

   El bloque de la alianza NO se toca: va sobre azul noche en los dos temas,
   porque el logotipo de TrustX es blanco y sobre blanco no se veria. */
.page-head p,.quienes-texto p,.proposito-caja p{color:var(--claro-texto)}
.proposito-caja{
  background:linear-gradient(140deg,rgba(0,137,171,.06),rgba(37,99,235,.07));
  border-color:var(--claro-borde);
  border-left-color:var(--cian-texto);
}
.guia-grid > div{background:var(--claro-superficie);border-color:var(--claro-borde)}
.guia-grid strong{color:var(--claro-tinta)}
.guia-grid span{color:var(--claro-tenue)}