/* ============================================
   PROTEKIP - variables
   ============================================ */

:root {
  --seif-black: #0A0A0A;
  --seif-red: #E30613;
  --seif-red-hover: #B80510;
  --seif-card: #1A1A1A;
  --seif-card-hover: #252525;
  --seif-border: #2A2A2A;
  --seif-white: #FFFFFF;
  --seif-gray: #999999;
  --seif-gray-muted: #666666;
  --font-heading: 'Barlow Condensed', sans-serif;
  --font-body: 'Inter', sans-serif;
}


/* ============================================
   PROTEKIP - Tipografía responsive
   Escala el tamaño base según el ancho de pantalla.
   Todos los valores en `rem` del sitio se ajustan
   automáticamente sin tocar cada elemento.
     - Hasta ~1390px:  16px  (base normal)
     - A 1600px:       ~17.6px
     - A 1920px:       ~21px
     - Máximo:         22px
   ============================================ */
html {
  font-size: clamp(16px, 1.1vw, 22px);
}

/* ============================================
   PROTEKIP - base
   ============================================ */
/* Body */
body {
  background: radial-gradient(ellipse at 50% 20%, #1e1e1e 0%, #0e0e0e 50%, #080808 100%) fixed !important;
  background-color: #0a0a0a !important;
  color: var(--seif-white) !important;
  font-family: var(--font-body) !important;
}

body h1, body h2, body h3,
body h4, body h5, body h6,
body .h1, body .h2, body .h3 {
  font-family: var(--font-heading) !important;
  font-weight: 700 !important;
  color: var(--seif-white) !important;
  text-transform: uppercase;
  letter-spacing: 1px;
}

body a {
  color: var(--seif-white);
  transition: color 0.2s;
}

body a:hover {
  color: var(--seif-red);
  text-decoration: none;
}

/* Buttons */
body .btn-primary,
body .js-addtocart,
body .js-prod-submit-form {
  background-color: var(--seif-red) !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 12px 28px !important;
  font-family: var(--font-heading) !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--seif-white) !important;
  transition: all 0.2s;
}

body .btn-primary:hover,
body .js-addtocart:hover,
body .js-prod-submit-form:hover {
  background-color: var(--seif-red-hover) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(227, 6, 19, 0.4) !important;
}

body .btn-secondary,
body .btn-default {
  background-color: transparent !important;
  border: 2px solid var(--seif-border) !important;
  border-radius: 6px !important;
  color: var(--seif-white) !important;
  font-family: var(--font-heading) !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  transition: all 0.2s;
}

body .btn-secondary:hover,
body .btn-default:hover {
  border-color: var(--seif-red) !important;
  color: var(--seif-red) !important;
}

/* Forms */
body input[type="text"],
body input[type="email"],
body input[type="password"],
body input[type="number"],
body input[type="tel"],
body select,
body textarea,
body .form-control {
  background-color: var(--seif-card) !important;
  border: 1px solid var(--seif-border) !important;
  border-radius: 6px !important;
  color: var(--seif-white) !important;
  padding: 12px 16px !important;
  font-family: var(--font-body) !important;
}

body input:focus,
body select:focus,
body textarea:focus,
body .form-control:focus {
  border-color: var(--seif-red) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(227, 6, 19, 0.15) !important;
}

body input::placeholder,
body textarea::placeholder {
  color: var(--seif-gray-muted) !important;
}

/* Breadcrumbs */
body .breadcrumb {
  background-color: transparent !important;
  padding: 16px 0;
}

body .breadcrumb a,
body .breadcrumb-item {
  color: var(--seif-gray) !important;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

body .breadcrumb a:hover {
  color: var(--seif-red) !important;
}

body .breadcrumb-item.active {
  color: var(--seif-white) !important;
}

/* Modal / Cart panel */
body .modal-content,
body .cart-panel,
body .js-cart-panel {
  background-color: var(--seif-card) !important;
  border: 1px solid var(--seif-border) !important;
  color: var(--seif-white) !important;
}

body .modal-header,
body .modal-footer {
  border-color: var(--seif-border) !important;
}

/* ============================================
   PROTEKIP - Login page
   ============================================ */

.protekip-login-section {
  padding: 80px 0;
  min-height: 60vh;
  display: flex;
  align-items: center;
}

.protekip-login-card {
  background: #1c1c1c;
  border: 1px solid var(--seif-border);
  border-radius: 8px;
  padding: 48px;
  max-width: 480px;
  margin: 0 auto;
  width: 100%;
}

.protekip-login-title {
  font-family: var(--font-heading) !important;
  font-weight: 700 !important;
  font-size: 1.8rem !important;
  text-transform: uppercase !important;
  color: var(--seif-white) !important;
  border-left: 5px solid var(--seif-red) !important;
  padding-left: 16px !important;
  margin-bottom: 32px !important;
}

@media (max-width: 576px) {
  .protekip-login-card {
    padding: 32px 24px;
  }
}

/* ============================================
   PROTEKIP - Layout full-width
   Sobreescribe el max-width de Bootstrap para
   que el contenido use todo el ancho disponible
   ============================================ */

.container {
  max-width: 100% !important;
  padding-right: 80px !important;
  padding-left: 80px !important;
}

@media (max-width: 992px) {
  .container {
    padding-right: 32px !important;
    padding-left: 32px !important;
  }
}

@media (max-width: 576px) {
  .container {
    padding-right: 20px !important;
    padding-left: 20px !important;
  }

  /* Resetea los márgenes negativos de Bootstrap .row para que
     el padding del container cree un margen real en mobile */
  .container .row {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
}