/* ============================================================
   JMREY · Comparativa — section styles
   Pixel-faithful to the reference: two cards side by side,
   left = ivory market card, right = white JMREY card w/ navy
   outline + gold underline + sello watermark.
   ============================================================ */

.comp {
  position: relative;
  background: #FDF7F2;
  padding: clamp(20px, 2.6vw, 40px) clamp(20px, 5vw, 80px) clamp(28px, 3.4vw, 56px);
  overflow: hidden;
  height: 100svh;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

/* Architectural backdrop floats behind the right half. */
.comp-bg {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 55%;
  object-fit: cover;
  object-position: right top;
  pointer-events: none;
  z-index: 0;
}
.comp > *:not(.comp-bg) { position: relative; z-index: 1; }

/* ===== HEAD ===== */
.comp-head {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto clamp(18px, 2.4vw, 32px);
  flex: 0 0 auto;
}
.comp-eyebrow {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: clamp(11px, 1vw, 13px);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}
.comp-eyebrow-rule {
  width: 34px;
  height: 1.5px;
  background: var(--accent);
  border: 0;
  margin: 8px 0 14px;
}
.comp-title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(24px, 3.4vw, 46px);
  line-height: 1.04;
  letter-spacing: -0.015em;
  color: var(--jmrey-navy-900);
  margin: 0 0 12px;
  max-width: none;
  white-space: nowrap;
}
.comp-title-rule {
  width: 34px;
  height: 1.5px;
  background: var(--accent);
  border: 0;
  margin: 0;
}

/* ===== CARDS LAYOUT ===== */
.comp-cards {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(18px, 2.4vw, 36px);
  align-items: stretch;
  flex: 1 1 auto;
  min-height: 0;
}

.comp-card {
  position: relative;
  border-radius: 8px;
  padding: clamp(14px, 1.6vw, 22px) clamp(18px, 2.2vw, 30px) clamp(14px, 1.8vw, 24px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.comp-card .comp-rows { flex: 1 1 auto; }

/* LEFT — market */
.comp-card--market {
  background: #FFFFFF;
  border: 1px solid #EDE6D6;
}
.comp-card--market .comp-head-icon { /* keep gray rendering */ }
.comp-card--market .comp-head-label { color: #A39C8C; }
.comp-card--market .comp-row-title { color: var(--jmrey-ink-700); }

/* RIGHT — JMREY */
.comp-card--jmrey {
  background: #FFFFFF;
  border: 1.5px solid var(--jmrey-navy-900);
  border-bottom: 4px solid var(--accent);
}
.comp-card--jmrey .comp-head-label { color: var(--jmrey-navy-900); }
.comp-card--jmrey .comp-row-title  { color: var(--jmrey-navy-900); }

.comp-watermark {
  position: absolute;
  top: -18px;
  right: -28px;
  width: clamp(160px, 18vw, 240px);
  height: auto;
  opacity: 0.65;
  pointer-events: none;
  z-index: 0;
}
.comp-card--jmrey > *:not(.comp-watermark) { position: relative; z-index: 1; }

/* ===== CARD HEAD ===== */
.comp-card-head {
  display: grid;
  grid-template-columns: clamp(44px, 4.3vw, 58px) 1fr;
  gap: clamp(12px, 1.3vw, 18px);
  align-items: center;
  padding-bottom: clamp(8px, 0.9vw, 12px);
  margin-bottom: clamp(2px, 0.4vw, 6px);
}
.comp-head-icon {
  width: clamp(44px, 4.3vw, 58px);
  height: clamp(44px, 4.3vw, 58px);
  display: block;
}
.comp-head-label {
  font-family: var(--font-sans);
  font-size: clamp(12.5px, 1.15vw, 15px);
  font-weight: 700;
  letter-spacing: 0.20em;
  text-transform: uppercase;
}

/* ===== ROWS ===== */
.comp-rows {
  display: flex;
  flex-direction: column;
}
.comp-row {
  display: grid;
  grid-template-columns: clamp(44px, 4.3vw, 58px) 1px 1fr;
  gap: clamp(12px, 1.3vw, 18px);
  align-items: center;
  padding: clamp(8px, 0.9vw, 12px) 0;
  border-bottom: 1px solid rgba(217, 207, 185, 0.55);
}
.comp-card--jmrey .comp-row {
  border-bottom-color: rgba(14, 31, 61, 0.08);
}
.comp-rows > .comp-row:last-child { border-bottom: 0; }

.comp-row-icon {
  width: clamp(44px, 4.3vw, 58px);
  height: clamp(44px, 4.3vw, 58px);
  display: block;
}
.comp-row-divider {
  width: 1px;
  align-self: stretch;
  background: rgba(182, 136, 74, 0.45);
  margin: 6px 0;
}
.comp-row-text { min-width: 0; }
.comp-row-title {
  font-family: var(--font-sans);
  font-size: clamp(14px, 1.35vw, 17px);
  font-weight: 700;
  letter-spacing: 0.005em;
  line-height: 1.2;
  margin: 0 0 6px;
}
.comp-row-body {
  font-family: var(--font-sans);
  font-size: clamp(12px, 1.1vw, 13.5px);
  color: var(--jmrey-navy-800);
  line-height: 1.45;
  margin: 0;
}
.comp-card--market .comp-row-body { color: var(--jmrey-ink-500); }

/* ===== RESPONSIVE ===== */
@media (min-width: 541px) and (max-width: 1099px) {
  .comp {
    justify-content: center;
  }

  .comp-cards {
    flex: 0 0 auto;
    align-items: start;
  }

  .comp-card .comp-rows {
    flex: 0 0 auto;
  }
}

@media (max-width: 820px) {
  .comp {
    height: auto;
    min-height: 0;
    display: block;
    overflow-x: hidden;
  }
  .comp-bg { width: 100%; opacity: 0.4; }
  .comp-cards { grid-template-columns: 1fr; gap: 18px; }
  .comp-title {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: break-word;
  }
}
@media (max-width: 540px) {
  .comp-title { font-size: 26px; }
  .comp-row { grid-template-columns: 48px 1px 1fr; gap: 14px; }
  .comp-row-icon, .comp-head-icon { width: 48px; height: 48px; }
}