/* assets/css/layout.css */

/* =========================================
   HEADER / NAV FIJO (revisado)
   ========================================= */

/* dejamos reserva arriba para que el contenido
   no quede tapado por el header fijo */
body{
  padding-top:56px; /* ajusta si lo ves muy grande/pequeño */
}

/* header siempre visible */
header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:9999;
  background:rgba(11,15,20,.82);
  backdrop-filter:saturate(160%) blur(8px);
  border-bottom:1px solid var(--line);
  /* importantísimo: aunque alguna clase vieja
     intente aplicar transform, la anulamos */
  transform:none !important;
}

/* anula cualquier clase "nav-hidden" que
   todavía pueda estar aplicándose desde JS viejo */
header.nav-hidden{
  transform:none !important;
}

.nav{
  max-width:1200px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:.6rem 1rem;
  min-height:56px; /* altura estable para el padding-top del body */
}

/* Marca NOVOWIT (logo2.png con texto integrado) */
/* Marca NOVOWIT (logo2.png con texto integrado mejor legible) */
.brand{
  display:flex;
  align-items:center;
  text-decoration:none;
  line-height:1;
  color:var(--text);
  /* opcional: que el cursor al pasar por el logo sea "pointer" también */
  cursor:pointer;
}

.brand img{
  display:block;
  height:74px;           /* antes 56px. Menos escala = más nitidez */
  width:auto;
  object-fit:contain;

  /* quitamos el glow verde y subimos claridad + contraste para leer texto */
  filter:
    brightness(1.28)
    contrast(1.25)
    saturate(1.1)
    drop-shadow(0 0 2px rgba(255,255,255,.45))   /* halo claro fino alrededor del texto */
    drop-shadow(0 2px 4px rgba(0,0,0,.9));       /* sombra sutil hacia abajo */

  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

/* Menú desktop */
nav ul{
  display:flex;
  gap:1rem;
  list-style:none;
  margin:0;
  padding:0;
}

nav a{
  padding:.4rem .6rem;
  border-radius:.5rem;
  border:1px solid transparent;
  color:var(--text);
  font-size:.9rem;
  text-decoration:none;
  line-height:1.2;
  position:relative;
  transition:all .18s ease;
}

/* Hover/focus: sin subrayado, borde suave + fondo tenue */
nav a:hover,
nav a:focus{
  background:#111826;
  border-color:var(--acc2);
  text-decoration:none;
  box-shadow:0 8px 24px rgba(0,0,0,.8);
  outline:none;
}

#nav-toggle{
  display:none;
}

/* Burger (solo visible en móvil) */
.burger{
  display:none;
  cursor:pointer;
  border:1px solid var(--line);
  padding:.4rem .5rem;
  border-radius:.5rem;
  background:#0B1220;
  color:var(--text);
}
.burger:focus{
  outline:2px solid var(--acc2);
  outline-offset:2px;
}

/* Responsive nav en móvil */
@media (max-width:900px){
  nav ul{
    display:none;
    position:absolute;
    right:1rem;
    top:60px;
    background:#0B1220;
    border:1px solid var(--line);
    border-radius:.75rem;
    padding:.5rem;
    flex-direction:column;
    min-width:230px;
    box-shadow:0 28px 64px rgba(0,0,0,.9);
  }

  #nav-toggle:checked ~ nav ul{
    display:flex;
  }

  nav a{
    width:100%;
    border:1px solid transparent;
    font-size:.95rem;
    padding:.6rem .75rem;
    border-radius:.5rem;
  }

  .burger{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    line-height:0;
  }
}


/* =========================
   Hero
========================= */
.hero{
  max-width:1200px;
  margin:0 auto;
  padding:4.5rem 1rem 3rem;
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:2rem;
  align-items:center;
}
.hero h1{
  font-size:clamp(2rem,5vw,3rem);
  line-height:1.15;
  margin:.25rem 0 .5rem;
}
.kicker{
  color:var(--acc);
  text-transform:uppercase;
  letter-spacing:.14em;
  font-weight:700;
  font-size:.9rem;
}
.hero p{
  color:var(--muted);
  font-size:1.05rem;
}
.cta{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  margin-top:1.25rem;
}
.btn{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  border:1px solid var(--acc);
  background:var(--acc);
  color:#001411;
  padding:.7rem 1rem;
  border-radius:.6rem;
  font-weight:700;
  transition:filter .18s ease;
}
.btn:hover,
.btn:focus{
  filter:saturate(120%) brightness(1.05);
}
.btn.outline{
  background:transparent;
  color:var(--acc);
  border-color:var(--acc);
}
.badge{
  display:inline-block;
  border:1px solid var(--line);
  background:#0B1220;
  padding:.35rem .6rem;
  border-radius:.4rem;
  color:var(--muted);
  font-size:.8rem;
  margin-top:.75rem;
}
.hero-visual{
  /* Caja que contiene la imagen */
  background: radial-gradient(60% 60% at 70% 30%, rgba(0,255,194,.06), transparent 60%),
              linear-gradient(180deg,#0B1220 0%, rgba(11,18,32,0) 100%);
  border:1px solid var(--line);
  border-radius:1rem;
  padding:1rem;
  min-height:320px;

  display:flex;
  align-items:center;
  justify-content:center;

  box-shadow:
    0 32px 64px rgba(0,0,0,.8),
    0 4px 16px rgba(0,0,0,.6);
}

.hero-img{
  width:100%;
  height:auto;
  max-height:300px;
  object-fit:cover;
  border-radius:.75rem;
  border:1px solid rgba(255,255,255,.07);

  box-shadow:
    0 24px 48px rgba(0,0,0,.9),
    0 2px 4px rgba(0,0,0,.8);

  /* pequeño filtro para integrarla con el look oscuro sin lavarla */
  filter: brightness(1.05) contrast(1.05) saturate(1.03);
}

/* =========================
   Secciones genéricas
========================= */

section{scroll-margin-top:80px}
.wrap{
  max-width:1200px;
  margin:0 auto;
  padding:3rem 1rem;
}
h2{
  font-size:1.6rem;
  margin:0 0 1rem;
  color:var(--text);
}
.section-sub{
  color:var(--muted);
  margin:-.25rem 0 1.5rem;
}
.grid{
  display:grid;
  gap:1rem;
}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
@media (max-width:900px){
  .grid.cols-3,
  .grid.cols-2{
    grid-template-columns:1fr;
  }
}

/* =========================
   Tarjetas genéricas
========================= */
.card{
  background:linear-gradient(180deg,var(--card),#0B1220);
  border:1px solid var(--line);
  border-radius:.9rem;
  padding:1rem;
  box-shadow:0 12px 24px -16px rgba(0,0,0,.6);
  color:var(--text);
}
.card h3{
  margin:.2rem 0 .4rem;
  font-size:1.05rem;
  color:#fff;
}
.card p{
  color:var(--muted);
  margin:.2rem 0;
}
.meta{
  font-size:.85rem;
  color:var(--muted);
}
.chip{
  display:inline-block;
  border:1px solid var(--line);
  color:var(--muted);
  padding:.25rem .5rem;
  border-radius:999px;
  font-size:.75rem;
  margin:.25rem .25rem 0 0;
}
.list{
  padding-left:1.3rem;
  margin:.5rem 0;
}
.list li{
  margin:.25rem 0;
}
.ok::marker{
  color:var(--ok);
}
.kpi{
  display:flex;
  gap:.75rem;
  align-items:center;
  margin-top:.5rem;
  color:var(--acc2);
  font-weight:700;
}
.kpi svg{
  width:16px;
  height:16px;
}

/* =========================
   Footer
========================= */
.site-footer{
  background:#0B0F14;
  color:#fff;
  padding:3rem 1rem 4rem;
  position:relative;
  border-top:none;
}

.footer-inner{
  max-width:1200px;
  margin:0 auto;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2rem;
  color:#fff;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
}

/* Marca en footer con logo */
.footer-brand{
  display:flex;
  flex-direction:column;
  align-items:center;
  line-height:1.3;
  text-align:center;
}

/* el logo del footer */
.footer-logo{
  display:block;
  height:146px;         /* tamaño visible en footer */
  width:auto;
  object-fit:contain;

  /* mejora legibilidad del PNG sobre fondo oscuro */
  filter:
    brightness(1.25)
    contrast(1.25)
    saturate(1.1)
    drop-shadow(0 0 2px rgba(255,255,255,.4))
    drop-shadow(0 2px 4px rgba(0,0,0,.9));
}

/* tagline bajo el logo */
.footer-tagline{
  margin-top:.75rem;
  font-size:.9rem;
  color:rgba(255,255,255,.7);
  font-weight:500;
  max-width:480px;
  line-height:1.4;
}

/* Navegación secundaria en footer */
.footer-nav ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:1.5rem;
}

.footer-nav a{
  font-size:.9rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:rgba(255,255,255,.8);
  border-bottom:2px solid transparent;
  padding-bottom:.25rem;
  transition:border-color .18s ease,color .18s ease;
  text-decoration:none;
}

.footer-nav a:hover,
.footer-nav a:focus{
  color:#fff;
  border-color:#00FFC2;
  text-decoration:none;
  outline:none;
}

/* Legal */
.footer-legal{
  max-width:800px;
  display:flex;
  flex-direction:column;
  gap:.75rem;
  color:rgba(255,255,255,.7);
  font-size:.8rem;
  line-height:1.5;
  text-align:center;
}

.footer-legal p{
  margin:0;
  color:rgba(255,255,255,.7);
  line-height:1.5;
}

.footer-copy{
  color:rgba(255,255,255,.8);
  font-size:.75rem;
  line-height:1.4;
}

/* Responsive footer */
@media (max-width:480px){
  .footer-nav ul{
    gap:1rem;
  }

  .footer-nav a{
    font-size:.8rem;
    letter-spacing:.07em;
  }

  .footer-logo{
    height:50px;
  }

  .footer-tagline{
    font-size:.8rem;
    line-height:1.4;
  }

  .footer-legal{
    font-size:.75rem;
  }
}

/* título estilo retro inspirado en el ejemplo */
.retro-title {
  font-family: "Press Start 2P", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  background: none;
  border: none;
  padding: 0;
  color: #6fe0db;
  display: inline-block;
  line-height: 1.2;
  font-size: 2rem; /* antes ~1rem */
}