/* =====================================================================
   DigitalFixOnline — estilos
   Dirección: panel de diagnóstico. Base oscura de instrumento,
   acento ámbar (fósforo de terminal), tipografía IBM Plex.
   ===================================================================== */

:root{
  --fondo:      #0A1017;
  --sup:        #111B25;
  --sup-2:      #16232F;
  --borde:      #22323F;
  --borde-2:    #2C4050;

  --txt:        #E4EDF4;
  --txt-2:      #8FA3B4;
  --txt-3:      #5E7386;

  --ambar:      #F0A93B;
  --ambar-osc:  #B87A1E;
  --ambar-sua:  rgba(240,169,59,.12);

  --wa:         #21A45F;
  --wa-osc:     #178048;

  --rojo:       #E4674C;
  --rojo-sua:   rgba(228,103,76,.12);
  --ok:         #4FCB8A;

  --r:          10px;
  --display:    "Sora", system-ui, sans-serif;
  --cuerpo:     "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --mono:       "IBM Plex Mono", ui-monospace, monospace;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation:none !important; transition-duration:.01ms !important; }
}

body{
  margin:0;
  background:var(--fondo);
  color:var(--txt);
  font-family:var(--cuerpo);
  font-size:1.0625rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

svg{ max-width:100%; }
a{ color:var(--ambar); }

:focus-visible{
  outline:2px solid var(--ambar);
  outline-offset:3px;
  border-radius:3px;
}

.saltar{ position:absolute; left:-9999px; background:var(--ambar); color:#0A1017;
         padding:.75rem 1.25rem; z-index:99; font-weight:600; }
.saltar:focus{ left:1rem; top:1rem; }

.envoltura{ width:min(1180px, 100% - 2.5rem); margin-inline:auto; }
.envoltura--angosta{ width:min(700px, 100% - 2.5rem); }

/* ---------- Tipos de utilidad ---------- */
.mono-ojal{
  font-family:var(--mono); font-size:.78rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--txt-3); margin:0 0 1rem;
  display:flex; align-items:center; gap:.55rem;
}
.mono-ojal--ambar{ color:var(--ambar-osc); }
.mono-ojal--rojo{  color:var(--rojo); }

.led{
  width:.5rem; height:.5rem; border-radius:50%;
  background:var(--ok); flex:none;
  box-shadow:0 0 0 3px rgba(79,203,138,.16);
  animation:latido 2.6s ease-in-out infinite;
}
@keyframes latido{ 0%,100%{opacity:1} 50%{opacity:.35} }

/* ---------- Barra ---------- */
.barra{
  background:rgba(10,16,23,.9);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--borde);
  position:sticky; top:0; z-index:40;
}
.barra__fila{ display:flex; align-items:center; gap:1.5rem; padding:.9rem 0; }

.marca{
  display:flex; align-items:center; gap:.6rem;
  text-decoration:none; color:var(--txt);
  font-family:var(--display); font-weight:800;
  font-size:1.1rem; letter-spacing:-.02em; margin-right:auto;
}
.marca__txt span{ color:var(--ambar); }
.marca__led{
  width:.6rem; height:.6rem; border-radius:2px;
  background:var(--ambar); flex:none;
  box-shadow:0 0 10px rgba(240,169,59,.7);
}

.nav{ display:none; gap:1.6rem; }
.nav a{
  font-family:var(--mono); font-size:.82rem; letter-spacing:.04em;
  color:var(--txt-2); text-decoration:none;
}
.nav a:hover{ color:var(--ambar); }

.barra__wa{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--mono); font-weight:500; font-size:.9rem;
  color:var(--txt); text-decoration:none;
  border:1px solid var(--borde-2); border-radius:100px;
  padding:.5rem 1rem; white-space:nowrap;
}
.barra__wa:hover{ border-color:var(--wa); color:var(--wa); }
.barra__wa span{ display:none; }

/* ---------- Portada ---------- */
.portada{
  padding:3.5rem 0 4rem;
  background:
    radial-gradient(900px 420px at 78% 0%, rgba(240,169,59,.09), transparent 60%),
    radial-gradient(700px 400px at 0% 20%, rgba(33,164,95,.07), transparent 60%),
    var(--fondo);
  border-bottom:1px solid var(--borde);
}
.portada__rejilla{ display:grid; gap:3rem; }

.portada__h1{
  font-family:var(--display); font-weight:800;
  font-size:clamp(2rem, 5.6vw, 3.4rem);
  line-height:1.08; letter-spacing:-.035em;
  margin:0 0 1.25rem; max-width:18ch;
}
.portada__h1 em{ font-style:normal; color:var(--ambar); }

.portada__bajada{
  font-size:1.12rem; color:var(--txt-2);
  max-width:52ch; margin:0 0 2rem;
}

.acciones{ display:flex; flex-wrap:wrap; gap:.85rem; margin-bottom:2.5rem; }

.metricas{
  display:flex; flex-wrap:wrap; gap:1.5rem 2.5rem; margin:0;
  border-top:1px solid var(--borde); padding-top:1.5rem;
}
.metricas div{ margin:0; }
.metricas dt{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--txt-3); margin-bottom:.25rem;
}
.metricas dd{
  margin:0; font-family:var(--display); font-weight:700;
  font-size:1.2rem; color:var(--txt);
}

/* ---------- Panel de diagnóstico ---------- */
.panel{
  background:var(--sup);
  border:1px solid var(--borde-2);
  border-radius:var(--r);
  overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.45);
  align-self:start;
}
.panel__barra{
  display:flex; align-items:center; gap:.45rem;
  padding:.7rem .9rem;
  background:var(--sup-2);
  border-bottom:1px solid var(--borde);
}
.panel__punto{
  width:.6rem; height:.6rem; border-radius:50%;
  background:var(--borde-2); flex:none;
}
.panel__titulo{
  font-family:var(--mono); font-size:.75rem;
  color:var(--txt-3); margin-left:.5rem;
}
.panel__cuerpo{ padding:1.1rem 1.1rem 1.3rem; }
.panel__cuerpo p{
  font-family:var(--mono); font-size:.83rem; line-height:1.85;
  margin:0; color:var(--txt-2); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}
.panel__cuerpo .ok{ color:var(--ok); }
.panel__cuerpo .alerta{ color:var(--ambar); }
.panel__cuerpo .mal{ color:var(--rojo); }
.panel__cuerpo .tenue{ color:var(--txt-3); }

.panel__linea{
  margin-top:.9rem !important;
  padding-top:.9rem;
  border-top:1px solid var(--borde);
  color:var(--ok) !important;
}
.prompt{ color:var(--ambar); }
.cursor{
  display:inline-block; width:.55em; height:1em;
  background:var(--ambar); margin-left:.35em;
  vertical-align:-.15em;
  animation:parpadeo 1.1s steps(2, start) infinite;
}
@keyframes parpadeo{ 0%,100%{opacity:1} 50%{opacity:0} }

/* ---------- Botones ---------- */
.boton{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-family:var(--display); font-weight:700; font-size:1rem;
  padding:.95rem 1.5rem; min-height:54px;
  border-radius:var(--r); border:1px solid transparent;
  text-decoration:none; cursor:pointer;
  transition:transform .12s ease, background .16s ease, border-color .16s ease;
}
.boton:active{ transform:translateY(1px); }

.boton--wa{ background:var(--wa); color:#fff; }
.boton--wa:hover{ background:var(--wa-osc); }

.boton--ambar{ background:var(--ambar); color:#0A1017; margin-top:2.25rem; }
.boton--ambar:hover{ background:#FFC163; }

.boton--linea{
  background:transparent; color:var(--txt);
  border-color:var(--borde-2);
}
.boton--linea:hover{ border-color:var(--ambar); color:var(--ambar); }

.boton--ancho{ width:100%; margin-bottom:2rem; }

.boton--enviar{
  width:100%; background:var(--ambar); color:#0A1017; border:none;
  font-size:1.05rem;
}
.boton--enviar:hover{ background:#FFC163; }

.ico-wa{ width:1.35em; height:1.35em; fill:currentColor; flex:none; }

/* ---------- Secciones ---------- */
.seccion{ padding:4.5rem 0; border-bottom:1px solid var(--borde); }
.seccion--panel{ background:var(--sup); }
.seccion--dev{
  background:
    radial-gradient(700px 380px at 90% 10%, rgba(240,169,59,.07), transparent 60%),
    var(--sup);
}

.titulo{
  font-family:var(--display); font-weight:700;
  font-size:clamp(1.65rem, 4vw, 2.5rem);
  line-height:1.14; letter-spacing:-.03em;
  margin:0 0 .75rem; max-width:20ch;
}
.titulo--claro{ color:#fff; }

.entradilla{
  font-size:1.08rem; color:var(--txt-2);
  max-width:58ch; margin:0 0 2.75rem;
}
.entradilla--claro{ color:#B6C7D4; }
.entradilla strong{ color:#fff; }

.nota{ color:var(--txt-3); font-size:.98rem; max-width:62ch; }

/* ---------- Tarjetas ---------- */
.rejilla{
  display:grid; gap:1rem;
  grid-template-columns:repeat(auto-fit, minmax(262px, 1fr));
}
.tarjeta{
  background:var(--sup);
  border:1px solid var(--borde);
  border-radius:var(--r);
  padding:1.6rem 1.4rem;
  transition:border-color .18s ease, transform .18s ease;
}
.tarjeta:hover{ border-color:var(--borde-2); transform:translateY(-2px); }

.codigo{
  display:inline-block;
  font-family:var(--mono); font-size:.7rem; font-weight:500;
  letter-spacing:.12em; color:var(--txt-3);
  border:1px solid var(--borde); border-radius:4px;
  padding:.15rem .45rem; margin-bottom:.9rem;
}
.tarjeta h3{
  font-family:var(--display); font-weight:600;
  font-size:1.15rem; margin:0 0 .5rem; letter-spacing:-.015em;
}
.tarjeta p{ margin:0; color:var(--txt-2); font-size:.98rem; }

.rejilla--dev .tarjeta{ background:var(--sup-2); }
.tarjeta--dev .codigo{ color:var(--ambar-osc); border-color:rgba(240,169,59,.3); }
.tarjeta--dev:hover{ border-color:var(--ambar-osc); }

/* ---------- Stack ---------- */
.stack{ margin-top:2.5rem; border-top:1px solid var(--borde); padding-top:1.75rem; }
.stack__rotulo{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--txt-3); margin:0 0 .9rem;
}
.stack__lista{
  list-style:none; padding:0; margin:0;
  display:flex; flex-wrap:wrap; gap:.5rem;
}
.stack__lista li{
  font-family:var(--mono); font-size:.82rem;
  color:var(--txt-2);
  border:1px solid var(--borde-2); border-radius:100px;
  padding:.35rem .85rem;
}

/* ---------- Pasos ---------- */
.pasos{ list-style:none; padding:0; margin:0; display:grid; gap:1.75rem; }
.paso{ display:flex; gap:1.25rem; align-items:flex-start; }
.paso__num{
  flex:none; font-family:var(--mono); font-weight:600; font-size:.95rem;
  color:var(--ambar);
  border:1px solid var(--borde-2); border-radius:8px;
  width:3rem; height:3rem; display:grid; place-items:center;
  background:var(--sup);
}
.paso h3{
  font-family:var(--display); font-weight:600;
  font-size:1.2rem; margin:.4rem 0 .4rem; letter-spacing:-.015em;
}
.paso p{ margin:0; color:var(--txt-2); max-width:62ch; }

/* ---------- Seguridad ---------- */
.confianza{
  padding:5rem 0;
  background:
    linear-gradient(180deg, rgba(228,103,76,.05), transparent 40%),
    #070C11;
  border-bottom:1px solid var(--borde);
}
.nunca{ list-style:none; padding:0; margin:0 0 2.25rem; display:grid; gap:.7rem; }
.nunca li{
  display:flex; gap:1rem; align-items:flex-start;
  background:var(--rojo-sua);
  border:1px solid rgba(228,103,76,.22);
  border-left:3px solid var(--rojo);
  border-radius:0 8px 8px 0;
  padding:1rem 1.2rem;
  font-size:1rem; color:#D9E4EC;
  max-width:66ch;
}
.nunca__n{
  font-family:var(--mono); font-size:.78rem; font-weight:600;
  color:var(--rojo); flex:none; padding-top:.22rem;
}
.confianza__cierre{
  border-top:1px solid var(--borde);
  padding-top:1.5rem; margin:0; max-width:62ch;
  color:var(--txt-2);
}

/* ---------- Límites ---------- */
.limites{
  display:grid; gap:0 3rem;
  grid-template-columns:repeat(auto-fit, minmax(250px,1fr));
  margin-bottom:1.75rem;
}
.limites ul{ list-style:none; padding:0; margin:0; }
.limites li{
  display:flex; gap:.8rem; align-items:center;
  padding:.75rem 0; border-bottom:1px solid var(--borde);
  color:var(--txt-2); font-size:.98rem;
}
.limites li::before{
  content:"×"; color:var(--rojo); font-family:var(--mono);
  font-weight:600; flex:none;
}

/* ---------- Precio ---------- */
.precio{
  background:var(--sup-2); border:1px solid var(--borde);
  border-radius:var(--r); overflow:hidden; margin-bottom:1.25rem;
}
.precio__fila{
  display:flex; justify-content:space-between; align-items:center;
  gap:1rem; padding:1.1rem 1.35rem;
  border-bottom:1px solid var(--borde);
}
.precio__fila:last-child{ border-bottom:none; }
.precio__fila span{ color:var(--txt-2); }
.precio__fila strong{
  font-family:var(--mono); font-weight:600;
  color:var(--ambar); text-align:right; font-size:.98rem;
}

/* ---------- Avisos ---------- */
.aviso{
  border-radius:var(--r); padding:1.05rem 1.25rem; margin-bottom:1.75rem;
  font-size:1rem;
}
.aviso ul{ margin:.5rem 0 0; padding-left:1.2rem; }
.aviso--bien{ background:rgba(79,203,138,.1); border:1px solid rgba(79,203,138,.35); }
.aviso--mal{  background:var(--rojo-sua);     border:1px solid rgba(228,103,76,.4); }

/* ---------- Formulario ---------- */
.forma{ display:grid; gap:1.4rem; }

.tipos{
  border:1px solid var(--borde); border-radius:var(--r);
  padding:1.1rem 1.25rem; margin:0;
  display:grid; gap:.7rem;
}
.tipos legend{
  font-family:var(--mono); font-size:.75rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--txt-3); padding:0 .4rem;
}
.tipo{ display:flex; align-items:center; gap:.7rem; cursor:pointer; }
.tipo input{ width:1.15rem; height:1.15rem; accent-color:var(--ambar); flex:none; }
.tipo span{ font-size:1rem; }

.campo{ display:grid; gap:.45rem; }
.campo label{ font-family:var(--display); font-weight:600; font-size:1rem; }
.opcional{ font-weight:400; color:var(--txt-3); }
.ayuda{ font-size:.9rem; color:var(--txt-3); }

.campo input,
.campo textarea{
  font-family:var(--cuerpo); font-size:1.02rem;
  padding:.9rem 1rem; width:100%;
  border:1px solid var(--borde-2); border-radius:8px;
  background:var(--sup); color:var(--txt);
}
.campo input::placeholder,
.campo textarea::placeholder{ color:var(--txt-3); }
.campo input:focus,
.campo textarea:focus{ border-color:var(--ambar); outline:none; }
.campo textarea{ resize:vertical; min-height:130px; }
.campo--suma input{ max-width:150px; }

.trampa{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* ---------- Pie ---------- */
.pie{ background:#070C11; padding:3rem 0 6.5rem; font-size:.96rem; color:var(--txt-2); }
.pie__rejilla{ display:grid; gap:2rem; padding-bottom:2rem; border-bottom:1px solid var(--borde); }
.pie__marca{
  font-family:var(--display); font-weight:800; font-size:1.2rem;
  color:var(--txt); margin:0 0 .4rem;
}
.pie__marca span{ color:var(--ambar); }
.pie__lema{ margin:0; color:var(--txt-3); }
.pie__datos p{ margin:0 0 .5rem; }
.pie__rotulo{
  display:inline-block; min-width:6.5rem;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--txt-3);
}
.pie__datos a{ color:var(--ambar); text-decoration:none; }
.pie__datos a:hover{ text-decoration:underline; }
.pie__legal{ margin:1.5rem 0 0; font-size:.85rem; color:var(--txt-3); }

/* ---------- Flotante ---------- */
.flotante{
  position:fixed; right:1rem; bottom:1rem; z-index:50;
  display:inline-flex; align-items:center; gap:.55rem;
  background:var(--wa); color:#fff;
  font-family:var(--display); font-weight:700; font-size:.98rem;
  padding:.85rem 1.25rem; border-radius:100px;
  text-decoration:none;
  box-shadow:0 10px 30px rgba(33,164,95,.35);
}
.flotante svg{ width:1.4rem; height:1.4rem; fill:currentColor; }
.flotante:hover{ background:var(--wa-osc); }

/* =====================================================================
   ADAPTACIÓN A PANTALLAS GRANDES
   ===================================================================== */
@media (min-width:560px){
  .barra__wa span{ display:inline; }
}

@media (min-width:900px){
  .nav{ display:flex; }
  .portada{ padding:5.5rem 0 5rem; }
  .portada__rejilla{ grid-template-columns:1.05fr .95fr; align-items:center; gap:4rem; }
  .pie__rejilla{ grid-template-columns:1fr 1fr; }
}

@media (max-width:420px){
  .flotante span{ display:none; }
  .flotante{ padding:.95rem; }
  .panel__cuerpo p{ font-size:.76rem; }
}

/* =====================================================================
   AÑADIDOS: sección de seguridad, selector de idioma
   ===================================================================== */

:root{
  --acero:     #63A8CE;
  --acero-osc: #3E7FA3;
  --acero-sua: rgba(99,168,206,.12);
}

/* ---------- Selector de idioma ---------- */
.idioma{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-weight:600; font-size:.78rem;
  letter-spacing:.08em;
  color:var(--txt-2); text-decoration:none;
  border:1px solid var(--borde-2); border-radius:6px;
  min-width:2.6rem; height:2.2rem; padding:0 .5rem;
  transition:border-color .16s ease, color .16s ease;
}
.idioma:hover{ border-color:var(--ambar); color:var(--ambar); }

/* ---------- Sección de seguridad ---------- */
.seccion--sec{
  background:
    radial-gradient(720px 400px at 8% 8%, rgba(99,168,206,.08), transparent 62%),
    var(--fondo);
}
.mono-ojal--acero{ color:var(--acero-osc); }

.rejilla--sec .tarjeta{ background:var(--sup); }
.tarjeta--sec .codigo{
  color:var(--acero);
  border-color:rgba(99,168,206,.32);
}
.tarjeta--sec:hover{ border-color:var(--acero-osc); }

.boton--acero{ background:var(--acero); color:#08131B; margin-top:2.25rem; }
.boton--acero:hover{ background:#8AC4E4; }

.nota--marco{
  margin-top:2rem;
  border:1px dashed var(--borde-2);
  border-left:3px solid var(--acero);
  border-radius:0 8px 8px 0;
  padding:1rem 1.2rem;
  background:var(--acero-sua);
  color:var(--txt-2);
}

/* La barra ahora lleva un elemento más: apretamos el espaciado en móvil */
@media (max-width:560px){
  .barra__fila{ gap:.6rem; }
  .barra__wa{ padding:.5rem .75rem; }
}

/* ---------- Cabecera de la sección de seguridad con imagen ---------- */
.sec-cabecera{ display:grid; gap:2rem; margin-bottom:2.75rem; }

.sec-cabecera__texto .titulo{ margin-bottom:.75rem; }
.entradilla--sinaire{ margin-bottom:0; }

.sec-foto{
  margin:0;
  border:1px solid var(--borde-2);
  border-radius:var(--r);
  overflow:hidden;
  background:var(--sup);
  align-self:start;
}
.sec-foto img{
  display:block; width:100%; height:auto;
  aspect-ratio:16/9; object-fit:cover;
}

@media (min-width:900px){
  .sec-cabecera{
    grid-template-columns:1fr 1fr;
    gap:3rem;
    align-items:center;
  }
}

/* ---------- Sección de cámaras y hogar ---------- */
:root{
  --coral:     #E08256;
  --coral-osc: #B35A32;
  --coral-sua: rgba(224,130,86,.12);
}

.seccion--cam{
  background:
    radial-gradient(760px 400px at 92% 12%, rgba(224,130,86,.08), transparent 62%),
    var(--sup);
}
.mono-ojal--coral{ color:var(--coral-osc); }

.rejilla--cam .tarjeta{ background:var(--sup-2); }
.tarjeta--cam .codigo{ color:var(--coral); border-color:rgba(224,130,86,.32); }
.tarjeta--cam:hover{ border-color:var(--coral-osc); }

.boton--coral{ background:var(--coral); color:#1A0D06; margin-top:2.25rem; }
.boton--coral:hover{ background:#F09E77; }

.nota--coral{ border-left-color:var(--coral); background:var(--coral-sua); }

/* Dos modalidades: en sitio vs a distancia */
.modos{
  display:grid; gap:.85rem;
  margin:0 0 2.5rem;
}
.modo{
  border:1px solid var(--borde);
  border-left:3px solid var(--borde-2);
  border-radius:0 8px 8px 0;
  padding:.9rem 1.15rem;
  background:var(--sup);
}
.modo--sitio{ border-left-color:var(--coral); }
.modo__rotulo{
  display:block;
  font-family:var(--mono); font-size:.7rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--txt-3); margin-bottom:.3rem;
}
.modo__valor{ display:block; color:var(--txt); font-size:1rem; }

@media (min-width:720px){
  .modos{ grid-template-columns:1fr 1fr; gap:1rem; }
}