/* =========================================================================
   atmind-brand.css — WATER (At Mind SpA)
   Se carga DESPUÉS de bootstrap.min.css, Banner.css y degadation_colours.css
   a propósito: sobrescribe colores/tipografía sin tocar ni una línea de
   setTime.js (IDs, timings y estructura del demo quedan intactos).
   ========================================================================= */

:root{
  --navy:#0A192F;
  --navy-soft:#0F2138;
  --navy-line:#1C3554;
  --cyan:#0077B6;
  --cyan-bright:#00B4D8;
  --cyan-pale:#CAF0F8;
  --gray-light:#F8F9FA;
  --gray-mid:#5B6B84;
  --gray-dark:#233145;
  --white:#FFFFFF;
  --font-display:'Inter',sans-serif;
  --font-body:'Open Sans',sans-serif;
  --font-mono:'IBM Plex Mono',monospace;
}

body, html{
  font-family: var(--font-body);
  color: var(--gray-dark);
}

/* ---------- Barra de marca (header) ---------- */
.brand-strip{
  display:flex; align-items:center; justify-content:space-between;
  background: var(--navy);
  padding: 14px 20px;
}
.brand-strip a.brand-home{
  display:flex; align-items:center; gap:8px;
  color:#fff; text-decoration:none;
  font-family: var(--font-display); font-weight:800; font-size:15px; letter-spacing:-0.01em;
}
.brand-strip a.brand-home img{height:24px; width:auto; display:block;}
.brand-strip a.brand-home span.sub{
  font-family: var(--font-mono); font-weight:400; font-size:11px; color: var(--cyan-bright);
  letter-spacing:.08em; margin-left:2px;
}
.brand-strip .back-link{
  font-family: var(--font-mono); font-size:12px; color:#9FB0C7; text-decoration:none;
  letter-spacing:.04em;
}
.brand-strip .back-link:hover{color: var(--cyan-bright);}

/* ---------- Pantalla de saludo inicial ---------- */
.auto-transition{
  background: linear-gradient(135deg, var(--navy), var(--cyan));
}
.end-transition{
  background: var(--white);
}
#t-Paragraph_1{
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 44pt;
}

/* ---------- "Try our demos" ---------- */
#t-Paragraph_2{
  color: var(--navy);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 38pt;
}
#t-Paragraph_3{
  color: var(--gray-mid);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 13pt;
  line-height: 1.7;
}
#t-Paragraph_3 .lead{
  color: var(--gray-mid);
}

/* Tarjetas de video de demo — de contenedor Bootstrap plano a tarjeta con marca */
#s-Input_1 .col-lg-4{
  background: var(--white);
  border: 1px solid #E4E9F0;
  border-radius: 8px;
  padding: 16px 16px 20px;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
#s-Input_1 .col-lg-4:hover{
  border-color: var(--cyan-bright);
  transform: translateY(-4px);
  box-shadow: 0 14px 30px -18px rgba(10,25,47,0.35);
}
#s-Input_1 video{
  border-radius: 6px;
  margin-top: 0 !important;
  background: var(--navy);
}

/* Botones — sobrescribe los colores por defecto de Bootstrap (#0d6efd/#0088cc) */
.btn-primary,
.button{
  background: var(--cyan-bright) !important;
  border-color: var(--cyan-bright) !important;
  color: var(--navy) !important;
  font-family: var(--font-display);
  font-weight: 700;
  border-radius: 6px !important;
}
.btn-primary:hover,
.button:hover{
  background: var(--cyan-pale) !important;
  border-color: var(--cyan-pale) !important;
  color: var(--navy) !important;
}
.btn-outline-primary{
  color: var(--navy) !important;
  border-color: var(--navy) !important;
  font-family: var(--font-display);
  font-weight: 700;
  border-radius: 6px !important;
}
.btn-outline-primary:hover{
  background: var(--navy) !important;
  color: var(--white) !important;
}

/* ---------- Vista de resultados ---------- */
.action-button{
  background: var(--cyan-bright) !important;
  color: var(--navy) !important;
  font-family: var(--font-display);
  font-weight: 700;
  border-radius: 6px !important;
}
.action-button:hover{
  background: var(--cyan-pale) !important;
}
.divider{
  background-color: var(--navy-line) !important;
}
.output-block{
  background: var(--navy-soft) !important;
  border: 1px solid var(--navy-line);
  border-radius: 8px !important;
}
.output-block img{
  border-radius: 6px;
}
#advanceButton svg path,
#advanceButton svg use{
  fill: var(--cyan-bright) !important;
}

/* Pantalla de carga */
.loading-screen{
  background-color: var(--navy) !important;
}

/* Enlace "I want to know more!" y demás CTA de outline */
#toAction{
  font-family: var(--font-display);
}

@media (max-width: 768px){
  #t-Paragraph_1{ font-size: 30pt; }
  #t-Paragraph_2{ font-size: 24pt; }
}