/* =====================================================
   KIMÜN INDUSTRIAL — Sistema de diseño (v2)
   Paleta alineada a la identidad real de marca:
   naranjo + azul + amarillo sobre fondo claro
   ===================================================== */

:root {
  /* Color de marca */
  --color-fondo: #ffffff;
  --color-fondo-alt: #eef1f6;      /* gris azulado suave para alternar secciones */
  --color-texto: #182533;          /* azul-negro para títulos y texto principal */
  --color-texto-suave: #5c6773;    /* gris azulado para texto secundario */

  --color-naranjo: #f2871f;        /* naranjo principal de marca */
  --color-naranjo-hover: #d9740f;
  --color-naranjo-suave: #fdece0;  /* fondo suave para tarjetas/badges */

  --color-azul: #1b4f91;           /* azul principal de marca */
  --color-azul-hover: #163f74;
  --color-azul-claro: #2e86d8;

  --color-amarillo: #f7c331;       /* amarillo de acento (gradiente del logo) */

  --color-borde: #e3e6ea;

  /* Tipografía */
  --font-display: 'Oswald', 'Arial Narrow', sans-serif;
  --font-cuerpo: 'Inter', -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;

  /* Layout */
  --radio-borde: 6px;
  --max-ancho: 1180px;
  --espacio-seccion: 5.5rem;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--color-fondo);
  color: var(--color-texto);
  font-family: var(--font-cuerpo);
  font-size: 16px;
  line-height: 1.6;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 1rem;
  color: var(--color-texto);
}

h1 { font-size: clamp(2.4rem, 5vw, 4rem); }
h2 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); }
h3 { font-size: 1.3rem; }

p { margin: 0 0 1rem; color: var(--color-texto-suave); }

a { color: var(--color-naranjo); text-decoration: none; }
a:hover { color: var(--color-naranjo-hover); }

.contenedor {
  max-width: var(--max-ancho);
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ---------- Barra de acento (firma visual, como en el portafolio) ---------- */
.barra-acento {
  width: 64px;
  height: 5px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--color-naranjo), var(--color-amarillo));
  margin-bottom: 1.2rem;
}

/* Divisor ancho entre secciones grandes, con el gradiente de marca */
.cordon-soldadura {
  width: 100%;
  height: 6px;
  background: linear-gradient(90deg, var(--color-azul), var(--color-naranjo), var(--color-amarillo));
}

/* ---------- Header / navegación ---------- */
.sitio-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--color-borde);
}

.nav-barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.7rem 0;
}

.logo {
  font-family: var(--font-display);
  font-size: 1.4rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-texto);
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}
.logo span { color: var(--color-naranjo); }

.nav-links {
  display: flex;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  color: var(--color-texto-suave);
  font-size: 0.92rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 500;
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s, color 0.2s;
}
.nav-links a:hover,
.nav-links a.activo {
  color: var(--color-texto);
  border-bottom-color: var(--color-naranjo);
}

.nav-carrito {
  display: flex;
  align-items: center;
  gap: 1.4rem;
}

.badge-carrito {
  background: var(--color-naranjo);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  padding: 0.15rem 0.5rem;
  border-radius: 50%;
}

/* ---------- Botones ---------- */
.btn {
  display: inline-block;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.9rem;
  padding: 0.85rem 1.8rem;
  border-radius: var(--radio-borde);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.btn:hover { transform: translateY(-1px); }

.btn-primario {
  background: var(--color-naranjo);
  color: #fff;
  box-shadow: 0 4px 14px rgba(242, 135, 31, 0.3);
}
.btn-primario:hover { background: var(--color-naranjo-hover); color: #fff; }

.btn-secundario {
  background: transparent;
  border-color: var(--color-azul);
  color: var(--color-azul);
}
.btn-secundario:hover { background: var(--color-azul); color: #fff; }

.btn-amarillo {
  background: var(--color-amarillo);
  color: var(--color-texto);
}

/* ---------- Hero ---------- */
.hero {
  padding: 6rem 0 4.5rem;
  background:
    radial-gradient(ellipse at 88% -15%, rgba(242, 135, 31, 0.22), transparent 50%),
    radial-gradient(ellipse at -15% 115%, rgba(27, 79, 145, 0.16), transparent 50%),
    var(--color-fondo);
}

.hero-eyebrow {
  font-family: var(--font-mono);
  color: var(--color-azul);
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.15em;
  margin-bottom: 1rem;
}

.hero h1 { max-width: 780px; }
.hero p.hero-sub {
  max-width: 560px;
  font-size: 1.15rem;
  margin-bottom: 2rem;
}

/* ---------- Secciones generales ---------- */
section { padding: var(--espacio-seccion) 0; }
section:nth-of-type(even) { background: var(--color-fondo-alt); }

.seccion-titulo { margin-bottom: 3rem; }
.seccion-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--color-naranjo);
  text-transform: uppercase;
  letter-spacing: 0.15em;
}

/* ---------- Grid de servicios ---------- */
.grid-servicios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
}

.tarjeta-servicio {
  background: #fff;
  border: 1px solid var(--color-borde);
  border-top: 3px solid var(--color-naranjo);
  border-radius: var(--radio-borde);
  padding: 2.2rem 1.8rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.tarjeta-servicio:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(24, 37, 51, 0.08);
}

.tarjeta-servicio .icono {
  width: 40px; height: 40px;
  color: var(--color-azul);
  margin-bottom: 1.2rem;
}

/* ---------- Grid de productos / tienda ---------- */
.grid-productos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.8rem;
}

.tarjeta-producto {
  background: #fff;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-borde);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s ease;
}
.tarjeta-producto:hover { box-shadow: 0 10px 24px rgba(24, 37, 51, 0.08); }

.tarjeta-producto .img-wrap {
  aspect-ratio: 4 / 3;
  background-color: var(--color-fondo-alt);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.tarjeta-producto img { width: 100%; height: 100%; object-fit: cover; }

.tarjeta-producto .info { padding: 1.2rem 1.3rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
.tarjeta-producto h3 { font-size: 1.05rem; margin-bottom: 0.4rem; }
.tarjeta-producto .sku {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--color-texto-suave);
  margin-bottom: 0.6rem;
}
.tarjeta-producto .precio {
  font-family: var(--font-mono);
  font-size: 1.3rem;
  color: var(--color-azul);
  margin: 0.4rem 0 1rem;
  font-weight: 600;
}
.tarjeta-producto .precio .antes {
  font-size: 0.9rem;
  color: var(--color-texto-suave);
  text-decoration: line-through;
  margin-right: 0.5rem;
}

/* ---------- Formularios (sitio público) ---------- */
.form-grupo { margin-bottom: 1.3rem; }
.form-grupo label {
  display: block;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-texto-suave);
  margin-bottom: 0.4rem;
}
.form-grupo input,
.form-grupo textarea,
.form-grupo select {
  width: 100%;
  background: #fff;
  border: 1px solid var(--color-borde);
  color: var(--color-texto);
  padding: 0.75rem 0.9rem;
  border-radius: var(--radio-borde);
  font-family: var(--font-cuerpo);
  font-size: 0.95rem;
}
.form-grupo input:focus,
.form-grupo textarea:focus,
.form-grupo select:focus {
  outline: none;
  border-color: var(--color-naranjo);
  box-shadow: 0 0 0 3px var(--color-naranjo-suave);
}

/* ---------- Footer ---------- */
.sitio-footer {
  background: var(--color-texto);
  color: #cbd3db;
  padding: 3.5rem 0 2rem;
  margin-top: var(--espacio-seccion);
}
.sitio-footer .logo { color: #fff; }
.sitio-footer h4 { color: #fff; }
.sitio-footer .contenedor {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2rem;
}
.sitio-footer p, .sitio-footer a { color: #cbd3db; }
.sitio-footer a:hover { color: var(--color-amarillo); }
.footer-copy {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: #8996a3;
  margin-top: 2rem;
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 1.5rem;
}

/* ---------- Utilidades ---------- */
.texto-centro { text-align: center; }
.mt-0 { margin-top: 0; }
.flex { display: flex; }
.gap-1 { gap: 1rem; }
.alerta {
  padding: 1rem 1.2rem;
  border-left: 3px solid var(--color-naranjo);
  background: var(--color-naranjo-suave);
  color: var(--color-texto);
  border-radius: 4px;
  margin-bottom: 1.5rem;
  font-size: 0.92rem;
}
.alerta.exito { border-color: #2e8b57; background: #e8f5ec; }

/* ---------- Responsive ---------- */
@media (max-width: 780px) {
  .nav-links { display: none; }
  .hero { padding: 4rem 0 2.5rem; }
  :root { --espacio-seccion: 3.5rem; }
}

/* ---------- Panel Admin (fondo claro, funcional) ---------- */
.admin-body {
  background: #f4f2ee;
  color: #24211d;
  font-family: var(--font-cuerpo);
  margin: 0;
}
.admin-shell { display: flex; min-height: 100vh; }
.admin-sidebar {
  width: 230px;
  background: var(--color-texto);
  color: #cbd3db;
  padding: 1.5rem 1rem;
  flex-shrink: 0;
}
.admin-sidebar .logo { margin-bottom: 2rem; padding: 0 0.5rem; color: #fff; }
.admin-sidebar nav a {
  display: block;
  color: #b7c0ca;
  padding: 0.65rem 0.8rem;
  border-radius: 4px;
  font-size: 0.92rem;
  margin-bottom: 0.2rem;
}
.admin-sidebar nav a:hover,
.admin-sidebar nav a.activo {
  background: rgba(242,135,31,0.18);
  color: #fff;
}
.admin-main { flex: 1; padding: 2rem 2.5rem; }
.admin-topbar {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 2rem;
}
.admin-card {
  background: #fff;
  border: 1px solid #e4e0d8;
  border-radius: 6px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}
.admin-tabla { width: 100%; border-collapse: collapse; }
.admin-tabla th, .admin-tabla td {
  text-align: left;
  padding: 0.7rem 0.8rem;
  border-bottom: 1px solid #eee;
  font-size: 0.92rem;
}
.admin-tabla th {
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  color: #7a756a;
}
.admin-login-shell {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-texto);
}
.admin-login-card {
  background: #fff;
  padding: 2.5rem;
  width: 100%;
  max-width: 380px;
  border-top: 4px solid var(--color-naranjo);
  border-radius: 8px;
}
.admin-login-card .logo { color: var(--color-texto); }

/* Formularios dentro del panel admin: fondo claro, texto oscuro, buen contraste */
.admin-body .form-grupo label {
  color: #6b6355;
}
.admin-body .form-grupo input,
.admin-body .form-grupo textarea,
.admin-body .form-grupo select {
  background: #fbfaf7;
  border: 1px solid #d8d3c8;
  color: #24211d;
}
.admin-body .form-grupo input:focus,
.admin-body .form-grupo textarea:focus,
.admin-body .form-grupo select:focus {
  border-color: var(--color-naranjo);
  background: #fff;
  box-shadow: none;
}
.admin-body .form-grupo input::placeholder,
.admin-body .form-grupo textarea::placeholder {
  color: #a8a196;
}

.logo-img { height: 62px; width: auto; display: block; }
.admin-sidebar .logo-img { height: 50px; }
.sitio-footer .logo-img { height: 70px; }
.admin-login-card .logo-img { height: 58px; }