/* =========================================================
   E-NOX · SISTEMA WEB
   SitioSimple / DonWeb
   Base clara + Mobile First
   ========================================================= */


/* =========================================================
   VARIABLES
   ========================================================= */

:root {
  --enox-black: #050810;
  --enox-night: #07152E;
  --enox-blue: #086BFF;
  --enox-white: #FFFFFF;

  --enox-text: #111111;
  --enox-text-secondary: #555555;
  --enox-border: #E8E8E8;
  --enox-surface: #F6F7F9;

  --enox-radius: 12px;
}


/* =========================================================
   BASE
   ========================================================= */

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--enox-white);
  color: var(--enox-text);
  font-family: Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  max-width: 100%;
  height: auto;
}


/* =========================================================
   TIPOGRAFÍA GENERAL
   ========================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--enox-text);
  margin-top: 0;
}

h1 {
  font-size: 44px;
  line-height: 1.05;
  letter-spacing: -1.2px;
  font-weight: 800;
}

h2 {
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: -0.6px;
  font-weight: 800;
}

h3 {
  font-weight: 800;
}

p {
  color: var(--enox-text-secondary);
  line-height: 1.5;
}


/* =========================================================
   LINKS
   ========================================================= */

a {
  transition: color 0.2s ease;
}

a:hover {
  color: var(--enox-blue);
}


/* =========================================================
   HEADER DESKTOP
   ========================================================= */

header,
.site-header {
  background: var(--enox-white);
}

/* El nombre duplicado se oculta por JS en Body.
   Esta regla queda como respaldo. */
#ss-logo h3 {
  display: none !important;
}

/* Navegación central */
#ss-column-2 a {
  color: var(--enox-text);
}

#ss-column-2 a:hover {
  color: var(--enox-blue);
}


/* =========================================================
   BOTONES
   ========================================================= */

button,
.btn,
.button,
a.btn,
a.button,
input[type="submit"] {
  border: none !important;
  border-radius: var(--enox-radius) !important;

  background: var(--enox-text) !important;
  color: var(--enox-white) !important;

  font-weight: 700 !important;

  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
}

/* Forzar blanco también en elementos internos */
button *,
.btn *,
.button *,
a.btn *,
a.button * {
  color: var(--enox-white) !important;
}

button:hover,
.btn:hover,
.button:hover,
a.btn:hover,
a.button:hover,
input[type="submit"]:hover {
  background: var(--enox-night) !important;
  color: var(--enox-white) !important;
  transform: translateY(-1px);
}


/* =========================================================
   PRODUCTOS
   ========================================================= */

.product,
.product-card,
.catalog-item {
  background: var(--enox-white);
  border: 1px solid var(--enox-border);
  border-radius: 14px;
  overflow: hidden;
}

.product img,
.product-card img,
.catalog-item img {
  object-fit: contain;
}


/* =========================================================
   SECCIONES AUXILIARES
   ========================================================= */

.enox-surface {
  background: var(--enox-surface);
}

.enox-dark {
  background: linear-gradient(
    135deg,
    var(--enox-black) 0%,
    var(--enox-night) 100%
  );

  color: var(--enox-white);
}

.enox-dark h1,
.enox-dark h2,
.enox-dark h3,
.enox-dark h4,
.enox-dark p,
.enox-dark span {
  color: var(--enox-white);
}

.enox-blue {
  color: var(--enox-blue);
}


/* =========================================================
   FOOTER
   ========================================================= */

footer,
.site-footer {
  background: var(--enox-black);
  color: var(--enox-white);
}

footer a,
footer p,
footer span,
footer li {
  color: var(--enox-white);
}

footer a:hover {
  color: var(--enox-blue);
}


/* =========================================================
   WHATSAPP
   ========================================================= */

a[href*="wa.me"],
a[href*="whatsapp"] {
  color: #ffffff;
}


/* =========================================================
   TABLET / MOBILE
   ========================================================= */

@media (max-width: 768px) {

  /* ---------- HEADER ---------- */

  header,
  .site-header {
    min-height: auto !important;
  }

  /* Las tres columnas del header */
  #ss-column-1,
  #ss-column-2,
  #ss-column-3 {
    min-height: auto !important;
  }


  /* ---------- TÍTULOS ---------- */

  h1 {
    font-size: 46px !important;
    line-height: 1.04 !important;
    letter-spacing: -1px !important;
  }

  h2 {
    font-size: 32px !important;
    line-height: 1.08 !important;
    letter-spacing: -0.5px !important;
  }

  h3 {
    line-height: 1.15;
  }


  /* ---------- TEXTO ---------- */

  p {
    font-size: 16px;
    line-height: 1.45;
  }


  /* ---------- BOTONES ---------- */

  button,
  .btn,
  .button,
  a.btn,
  a.button,
  input[type="submit"] {
    color: #ffffff !important;
  }

  button *,
  .btn *,
  .button *,
  a.btn *,
  a.button * {
    color: #ffffff !important;
  }


  /* ---------- ESPACIADO GENERAL ---------- */

  main {
    overflow-x: hidden;
  }

}


/* =========================================================
   MOBILE ESTÁNDAR
   ========================================================= */

@media (max-width: 480px) {

  h1 {
    font-size: 44px !important;
    line-height: 1.03 !important;
  }

  h2 {
    font-size: 31px !important;
  }

  p {
    font-size: 16px;
  }

  /* Botones más cómodos en touch */
  button,
  .btn,
  .button,
  a.btn,
  a.button,
  input[type="submit"] {
    min-height: 48px;
    padding: 12px 20px !important;
  }

}


/* =========================================================
   MOBILE PEQUEÑO
   ========================================================= */

@media (max-width: 390px) {

  h1 {
    font-size: 40px !important;
  }

  h2 {
    font-size: 29px !important;
  }

}