/* ============================================================
   CCTVISION SPA — Hoja de estilos
   Paleta derivada del logo: azul #0080FE, acero, azul marino.
   ============================================================ */

:root{
  --azul:        #0080FE;   /* azul del logo */
  --azul-oscuro: #0063C7;
  --marino:      #0B1626;   /* fondo oscuro principal */
  --marino-2:    #12233B;   /* superficies sobre el marino */
  --acero:       #93A2B4;   /* gris del logo */
  --linea:       #24364F;   /* bordes en zonas oscuras */
  --claro:       #F4F6F9;   /* fondo de secciones claras */
  --blanco:      #FFFFFF;
  --tinta:       #17283C;   /* texto sobre fondo claro */
  --tinta-suave: #4B5D72;
  --ok:          #37D67A;

  --fuente:      "Barlow", system-ui, sans-serif;
  --titulos:     "Barlow Semi Condensed", "Barlow", sans-serif;
  --mono:        "IBM Plex Mono", monospace;
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  font-family:var(--fuente);
  color:var(--tinta);
  background:var(--blanco);
  line-height:1.6;
  font-size:16px;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }

.contenedor{
  width:min(1120px, 92%);
  margin:0 auto;
}

/* ---------- Tipografía base ---------- */
h1,h2,h3{
  font-family:var(--titulos);
  line-height:1.15;
  letter-spacing:-0.01em;
}
h1{ font-size:clamp(2.1rem, 4.5vw, 3.3rem); font-weight:700; }
h2{ font-size:clamp(1.6rem, 3vw, 2.2rem); font-weight:700; margin-bottom:.6rem; }
h3{ font-size:1.15rem; font-weight:600; }

/* Etiqueta tipo rótulo técnico */
.etiqueta{
  font-family:var(--mono);
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--azul);
  margin-bottom:.9rem;
}
.etiqueta--oscura{ color:var(--azul-oscuro); }

/* ---------- Barra superior ---------- */
.topbar{
  position:sticky; top:0; z-index:50;
  background:var(--marino);
  border-bottom:1px solid var(--linea);
}
.topbar__inner{
  display:flex; align-items:center; gap:2rem;
  padding:.8rem 0;
}
.marca{
  display:flex; align-items:center; gap:.6rem;
  text-decoration:none;
}
.marca__logo{ width:44px; height:44px; }
.marca__texto{
  font-family:var(--titulos);
  font-size:1.25rem; font-weight:600;
  color:var(--acero); letter-spacing:.02em;
}
.marca__texto b{ color:var(--azul); font-weight:700; }

.nav{ display:flex; gap:1.6rem; margin-left:auto; }
.nav a{
  color:#C7D2DE; text-decoration:none; font-size:.95rem; font-weight:500;
  padding:.3rem 0; border-bottom:2px solid transparent;
  transition:color .2s, border-color .2s;
}
.nav a:hover{ color:var(--blanco); border-color:var(--azul); }

.topbar__fono{
  font-family:var(--mono); font-size:.85rem;
  color:var(--blanco); text-decoration:none;
  border:1px solid var(--linea); border-radius:4px;
  padding:.45rem .8rem;
  transition:border-color .2s, background .2s;
}
.topbar__fono:hover{ border-color:var(--azul); background:var(--marino-2); }

/* Botón hamburguesa (móvil) */
.nav-toggle{
  display:none; background:none; border:0; cursor:pointer;
  flex-direction:column; gap:5px; padding:.4rem;
}
.nav-toggle span{
  display:block; width:24px; height:2px; background:#C7D2DE;
}

/* ---------- Portada ---------- */
.hero{
  background:var(--marino);
  color:var(--blanco);
  /* Trama sutil de líneas, evoca plano técnico sin recargar */
  background-image:
    linear-gradient(var(--linea) 1px, transparent 1px),
    linear-gradient(90deg, var(--linea) 1px, transparent 1px);
  background-size:56px 56px;
  background-position:center;
  padding:5.5rem 0 5rem;
}
.hero__grid{
  display:grid; grid-template-columns:1.15fr .85fr;
  gap:3.5rem; align-items:center;
}
.hero__bajada{
  color:#B9C6D4; font-size:1.08rem; max-width:34rem;
  margin-top:1rem;
}
.hero__acciones{ display:flex; gap:1rem; margin-top:2rem; flex-wrap:wrap; }

/* Panel tipo monitor de cámaras */
.hero__panel{
  background:var(--marino-2);
  border:1px solid var(--linea);
  border-radius:8px;
  overflow:hidden;
  font-family:var(--mono);
  box-shadow:0 20px 50px rgba(0,0,0,.35);
}
.panel__cab{
  display:flex; align-items:center; gap:.6rem;
  padding:.7rem 1rem;
  border-bottom:1px solid var(--linea);
  font-size:.72rem; letter-spacing:.12em; color:var(--acero);
}
.panel__punto{
  width:8px; height:8px; border-radius:50%;
  background:var(--ok);
  animation:latido 2.4s infinite;
}
@keyframes latido{
  0%,100%{ opacity:1; } 50%{ opacity:.35; }
}
.panel__hora{ margin-left:auto; color:#C7D2DE; }
.panel__lista{ list-style:none; }
.panel__lista li{
  display:flex; justify-content:space-between; gap:1rem;
  padding:.62rem 1rem;
  font-size:.78rem; color:#C7D2DE;
  border-bottom:1px solid rgba(36,54,79,.5);
}
.panel__lista li:last-child{ border-bottom:0; }
.panel__lista .ok{ color:var(--ok); font-weight:500; }
.panel__pie{
  padding:.55rem 1rem;
  font-size:.68rem; color:var(--acero);
  border-top:1px solid var(--linea);
}

/* ---------- Botones ---------- */
.btn{
  display:inline-block;
  font-family:var(--titulos); font-weight:600; font-size:1rem;
  text-decoration:none; text-align:center;
  border-radius:5px; padding:.8rem 1.6rem;
  border:1px solid transparent;
  cursor:pointer;
  transition:background .2s, border-color .2s, transform .15s;
}
.btn:active{ transform:translateY(1px); }
.btn--primario{ background:var(--azul); color:var(--blanco); }
.btn--primario:hover{ background:var(--azul-oscuro); }
.btn--fantasma{
  border-color:var(--linea); color:#C7D2DE;
}
.btn--fantasma:hover{ border-color:var(--azul); color:var(--blanco); }
.btn--bloque{ width:100%; }

/* ---------- Secciones ---------- */
.seccion{ padding:5rem 0; }
.seccion--gris{ background:var(--claro); }
.seccion--oscura{
  background:var(--marino); color:var(--blanco);
}
.seccion__bajada{
  color:var(--tinta-suave); max-width:44rem; margin-top:.4rem;
}
.seccion--oscura .seccion__bajada{ color:#B9C6D4; }

/* ---------- Tarjetas de servicios ---------- */
.tarjetas{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:1.4rem; margin-top:2.6rem;
}
.tarjeta{
  position:relative;
  border:1px solid #DDE4EC;
  border-radius:6px;
  padding:1.6rem 1.5rem;
  background:var(--blanco);
  transition:border-color .2s, box-shadow .2s;
}
/* Marcas de encuadre en las esquinas, guiño a un visor de cámara */
.tarjeta::before,
.tarjeta::after{
  content:""; position:absolute;
  width:14px; height:14px;
  border-color:var(--azul); border-style:solid;
  opacity:0; transition:opacity .2s;
}
.tarjeta::before{ top:8px; left:8px; border-width:2px 0 0 2px; }
.tarjeta::after{ bottom:8px; right:8px; border-width:0 2px 2px 0; }
.tarjeta:hover{ border-color:#B9C9DC; box-shadow:0 10px 28px rgba(23,40,60,.08); }
.tarjeta:hover::before,
.tarjeta:hover::after{ opacity:1; }
.tarjeta h3{ margin-bottom:.5rem; color:var(--tinta); }
.tarjeta p{ color:var(--tinta-suave); font-size:.95rem; }

/* ---------- Proceso ---------- */
.proceso{
  list-style:none;
  display:grid; grid-template-columns:repeat(4, 1fr);
  gap:1.4rem; margin-top:2.6rem;
  counter-reset:paso;
}
.proceso li{
  background:var(--blanco);
  border:1px solid #DDE4EC; border-radius:6px;
  padding:1.5rem 1.4rem;
}
.proceso__num{
  font-family:var(--mono); font-size:.8rem;
  color:var(--azul);
  display:inline-block;
  border:1px solid var(--azul);
  border-radius:4px;
  padding:.15rem .55rem;
  margin-bottom:.9rem;
}
.proceso h3{ margin-bottom:.4rem; }
.proceso p{ color:var(--tinta-suave); font-size:.93rem; }

/* ---------- Ventajas ---------- */
.ventajas{
  display:grid; grid-template-columns:1fr 1fr; gap:3rem;
  align-items:start;
}
.ventajas__lista{ list-style:none; display:grid; gap:1.1rem; margin-top:.4rem; }
.ventajas__lista li{
  padding-left:1.1rem;
  border-left:3px solid var(--azul);
  color:var(--tinta-suave);
}
.ventajas__lista b{ color:var(--tinta); display:block; }

/* ---------- Formularios ---------- */
.cotiza{
  display:grid; grid-template-columns:.9fr 1.1fr; gap:3.5rem;
  align-items:start;
}
.cotiza__intro p{ color:#B9C6D4; margin-top:.6rem; }
#contacto .cotiza__intro p{ color:var(--tinta-suave); }
.cotiza__fono a{
  color:var(--blanco); font-family:var(--mono);
  font-size:1.05rem; text-decoration:none;
}
.cotiza__fono a:hover{ color:var(--azul); }

.formulario{
  background:var(--marino-2);
  border:1px solid var(--linea);
  border-radius:8px;
  padding:1.8rem;
  display:grid; gap:1.1rem;
}
.formulario label{
  display:grid; gap:.35rem;
  font-size:.88rem; font-weight:500; color:#C7D2DE;
}
.formulario input,
.formulario select,
.formulario textarea{
  font-family:var(--fuente); font-size:.95rem;
  color:var(--blanco);
  background:var(--marino);
  border:1px solid var(--linea);
  border-radius:5px;
  padding:.65rem .8rem;
  transition:border-color .2s;
}
.formulario input:focus,
.formulario select:focus,
.formulario textarea:focus{
  outline:none; border-color:var(--azul);
}
.formulario textarea{ resize:vertical; }
.campo-doble{
  display:grid; grid-template-columns:1fr 1fr; gap:1.1rem;
}

/* Variante clara (sección contacto) */
.formulario--claro{
  background:var(--claro); border-color:#DDE4EC;
}
.formulario--claro label{ color:var(--tinta); }
.formulario--claro input,
.formulario--claro select,
.formulario--claro textarea{
  background:var(--blanco); color:var(--tinta); border-color:#CBD6E2;
}

/* Campo trampa anti-spam: oculto para personas */
.hp{
  position:absolute !important;
  left:-9999px !important;
  height:0; width:0; opacity:0;
}

.formulario__estado{
  font-size:.9rem; min-height:1.2rem; margin:0;
}
.formulario__estado.exito{ color:var(--ok); }
.formulario__estado.error{ color:#FF7A7A; }

/* Datos de contacto */
.contacto__datos{
  list-style:none; margin-top:1.6rem; display:grid; gap:.9rem;
}
.contacto__datos li{
  display:grid; gap:.15rem;
  color:var(--tinta); font-weight:500;
}
.contacto__datos span{
  font-family:var(--mono); font-size:.72rem;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--tinta-suave); font-weight:400;
}
.contacto__datos a{ color:var(--azul-oscuro); text-decoration:none; }
.contacto__datos a:hover{ text-decoration:underline; }

/* ---------- Pie ---------- */
.pie{
  background:var(--marino);
  color:#B9C6D4;
  padding:3rem 0 2rem;
  border-top:1px solid var(--linea);
}
.pie__inner{ display:grid; gap:1.2rem; justify-items:start; }
.pie a{ color:#C7D2DE; text-decoration:none; }
.pie a:hover{ color:var(--blanco); }
.pie__legal{ font-size:.82rem; color:var(--acero); }

/* ---------- Accesibilidad ---------- */
:focus-visible{
  outline:2px solid var(--azul);
  outline-offset:2px;
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation:none !important; transition:none !important; }
}

/* ---------- Responsivo ---------- */
@media (max-width: 960px){
  .hero__grid{ grid-template-columns:1fr; gap:2.5rem; }
  .tarjetas{ grid-template-columns:repeat(2, 1fr); }
  .proceso{ grid-template-columns:repeat(2, 1fr); }
  .ventajas, .cotiza{ grid-template-columns:1fr; gap:2.2rem; }
}

@media (max-width: 640px){
  .seccion{ padding:3.5rem 0; }
  .hero{ padding:3.8rem 0; }
  .tarjetas, .proceso, .campo-doble{ grid-template-columns:1fr; }
  .topbar__fono{ display:none; }

  .nav-toggle{ display:flex; margin-left:auto; }
  .nav{
    display:none;
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:0;
    background:var(--marino);
    border-bottom:1px solid var(--linea);
    padding:.5rem 4%;
  }
  .nav.abierto{ display:flex; }
  .nav a{ padding:.9rem 0; border-bottom:1px solid var(--linea); }
  .nav a:last-child{ border-bottom:0; }
}