/* ========================================================================
   Brahma Incubator — Premium Stylesheet
   Gallinas Brahma Boyacá · v1.0.0
   ======================================================================== */

/* Google Font */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@600&family=Montserrat:wght@300;400;500;600;700&display=swap');

:root {
  --bi-font: 'Montserrat', sans-serif;
  --bi-font-heading: 'Cormorant Garamond', serif;

  /* Palette - Dark Premium */
  --bi-bg-deep:        #13100c;
  --bi-bg-card:        rgba(42, 32, 22, 0.65);
  --bi-bg-card-hover:  rgba(55, 40, 28, 0.75);
  --bi-border:         rgba(212, 168, 83, 0.20);
  --bi-primary:        #d4a853; /* Brahma Gold */
  --bi-primary-hover:  #e8b965;
  --bi-text:           #f5ecd8;
  --bi-text-muted:     rgba(245, 236, 216, 0.6);
  --bi-accent-blue:    #4fc3f7; /* For humidity */
  --bi-accent-red:     #e57373; /* For temp alerts */
  
  --bi-radius:         16px;
  --bi-radius-sm:      10px;
  --bi-gap:            20px;
  --bi-transition:     all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.bi-wrapper {
  font-family: var(--bi-font);
  max-width: 900px;
  margin: 40px auto;
  background: radial-gradient(ellipse at top, #1a1410 0%, var(--bi-bg-deep) 100%);
  border: 1px solid var(--bi-border);
  border-radius: var(--bi-radius);
  color: var(--bi-text);
  padding: 2rem;
  box-sizing: border-box;
}

.bi-wrapper * {
  box-sizing: border-box;
}

/* Header */
.bi-header {
  text-align: center;
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--bi-border);
}

.bi-header h2 {
  font-family: var(--bi-font-heading);
  color: var(--bi-primary);
  font-size: 2.2rem;
  margin: 0 0 0.5rem 0;
}

.bi-location {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 0, 0, 0.3);
  padding: 8px 16px;
  border-radius: 50px;
  font-size: 0.9rem;
  color: var(--bi-text-muted);
}

/* Grid Layout */
.bi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--bi-gap);
}

@media (max-width: 768px) {
  .bi-grid {
    grid-template-columns: 1fr;
  }
}

/* Cards */
.bi-card {
  background: var(--bi-bg-card);
  border: 1px solid var(--bi-border);
  border-radius: var(--bi-radius-sm);
  padding: 1.5rem;
}

.bi-card h3 {
  font-family: var(--bi-font-heading);
  color: var(--bi-primary);
  font-size: 1.4rem;
  margin: 0 0 1rem 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Parameters */
.bi-param {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px dashed rgba(255,255,255,0.1);
}
.bi-param:last-child { border-bottom: none; }

.bi-param-label { color: var(--bi-text-muted); }
.bi-param-value { font-weight: 600; font-size: 1.1rem; }
.bi-val-temp { color: var(--bi-accent-red); }
.bi-val-hum { color: var(--bi-accent-blue); }

/* Buttons */
.bi-btn {
  display: inline-block;
  background: var(--bi-primary);
  color: var(--bi-bg-deep);
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--bi-transition);
  text-align: center;
  width: 100%;
}
.bi-btn:hover { background: var(--bi-primary-hover); transform: translateY(-2px); }

.bi-btn-wpp {
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
  color: #fff !important;
  border-radius: 50px;
  margin-top: 15px;
}
.bi-btn-wpp:hover {
  background: linear-gradient(135deg, #28E16D 0%, #149F8E 100%);
}