/* ========================================================================
   CAROLINA KRAMPITZ — EDITORIAL POLISH
   Capa final y acotada para el portal inmobiliario / estudio juridico.
   Branding: blanco + negro editorial + rojo #E10600.
   ======================================================================== */

:root {
  --ck-red: #e10600;
  --ck-red-hover: #bd0500;
  --ck-red-deep: #8e1117;
  --ck-ink: #111111;
  --ck-muted: #66615e;
  --ck-paper: #ffffff;
  --ck-soft: #faf9f7;
  --ck-line: rgba(17, 17, 17, 0.11);
  --ck-serif: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
  --ck-sans: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
}

body.carolina-app {
  background: var(--ck-paper) !important;
  color: var(--ck-ink) !important;
  font-family: var(--ck-sans) !important;
}

.carolina-app .ck-page,
.carolina-app .ck-page .bg-white {
  background-color: var(--ck-paper) !important;
}

.carolina-app .ck-page :where(h1, h2, .ck-serif, .ck-serif-display, .ck-hero-title, .ck-section-title) {
  font-family: var(--ck-serif) !important;
  font-weight: 400 !important;
  letter-spacing: -0.035em !important;
}

.carolina-app .ck-page :where(h3, h4, h5, h6) {
  color: var(--ck-ink) !important;
}

.carolina-app .ck-page .ck-eyebrow {
  color: var(--ck-red) !important;
  font-family: var(--ck-sans) !important;
  font-size: 0.72rem;
  letter-spacing: 0.22em !important;
}

.carolina-app .ck-page .ck-section-title {
  color: var(--ck-ink) !important;
  font-size: clamp(2.35rem, 4vw, 4.4rem);
  line-height: 1.03;
}

.carolina-app .ck-page .ck-line-accent,
.carolina-app .ck-page .ck-line-accent-left {
  background: var(--ck-red) !important;
}

.carolina-app .ck-page .ck-field-input,
.carolina-app .ck-page input,
.carolina-app .ck-page select,
.carolina-app .ck-page textarea {
  border-radius: 5px !important;
  border-color: var(--ck-line) !important;
  background: #fff !important;
  color: var(--ck-ink) !important;
}

.carolina-app .ck-page input:focus,
.carolina-app .ck-page select:focus,
.carolina-app .ck-page textarea:focus {
  border-color: var(--ck-red) !important;
  box-shadow: 0 0 0 3px rgba(225, 6, 0, 0.09) !important;
}

/* Header ---------------------------------------------------------------- */
.ck-header-sticky {
  background: rgba(255, 255, 255, 0.96) !important;
  border-bottom-color: rgba(17, 17, 17, 0.09) !important;
}

.ck-header-inner {
  min-height: 82px;
}

.ck-brand-logo-img {
  height: 52px;
  max-width: 205px;
}

.ck-nav-link {
  color: #252321 !important;
  font-size: 0.84rem;
}

.ck-nav-whatsapp {
  border-color: rgba(225, 6, 0, 0.28) !important;
  background: #fff !important;
  color: #9f120f !important;
}

.ck-nav-whatsapp i {
  color: var(--ck-red) !important;
}

.ck-nav-whatsapp:hover {
  border-color: var(--ck-red) !important;
  background: rgba(225, 6, 0, 0.05) !important;
  color: var(--ck-red) !important;
}

/* Home / selector de portales ------------------------------------------ */
.ck-home-page {
  min-height: auto !important;
  overflow: hidden;
  background:
    radial-gradient(circle at 8% 24%, rgba(225, 6, 0, 0.035), transparent 20rem),
    linear-gradient(#fff, #fff) !important;
}

.ck-home-portal {
  position: relative;
  padding: clamp(3rem, 5vw, 5.25rem) 0 clamp(4rem, 6vw, 6rem);
}

.ck-home-portal::before,
.ck-home-portal::after {
  content: '';
  position: absolute;
  top: 7.5rem;
  width: 17rem;
  height: 9rem;
  border-top: 1px solid rgba(225, 6, 0, 0.13);
  border-radius: 50%;
  pointer-events: none;
}

.ck-home-portal::before { left: -8rem; transform: rotate(18deg); }
.ck-home-portal::after { right: -8rem; transform: rotate(-18deg); }

.ck-home-intro {
  position: relative;
  z-index: 1;
  max-width: 1080px;
  margin: 0 auto clamp(2rem, 4vw, 3.25rem);
  text-align: center;
}

.ck-home-kicker {
  display: block;
  margin-bottom: 0.7rem;
  color: var(--ck-red);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.ck-home-title {
  margin: 0;
  color: var(--ck-ink) !important;
  font-size: clamp(2.8rem, 4.6vw, 4.5rem) !important;
  line-height: 0.98 !important;
}

.ck-home-lead {
  margin: 1rem auto 0;
  max-width: 680px;
  color: #5f5b58;
  font-size: clamp(0.95rem, 1.4vw, 1.1rem);
}

.ck-portal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  max-width: 1370px;
  margin-inline: auto;
}

.ck-home-page .ck-portal-card-premium {
  height: min(57vw, 590px);
  min-height: 510px;
  padding: clamp(2rem, 3.3vw, 3.3rem);
  border-radius: 9px;
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 18px 42px rgba(17, 17, 17, 0.12);
}

.ck-home-page .ck-portal-card-premium::before {
  background: linear-gradient(180deg, rgba(9, 9, 9, 0.04) 22%, rgba(9, 9, 9, 0.9) 100%);
}

.ck-portal-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: #ffb0ad;
  font-size: 0.69rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.ck-portal-kicker::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--ck-red);
}

.ck-home-page .ck-portal-card-premium h2 {
  margin: 0.55rem 0 0.55rem;
  font-size: clamp(2.5rem, 4.3vw, 4.4rem) !important;
  line-height: 0.98 !important;
}

.ck-portal-description {
  max-width: 31rem;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.98rem;
  line-height: 1.6;
}

.ck-portal-services {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 1rem;
  color: rgba(255, 255, 255, 0.76);
  font-size: 0.78rem;
}

.ck-portal-action {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.45rem;
  padding: 0.9rem 1.35rem;
  border-radius: 5px;
  background: var(--ck-red);
  color: #fff;
  font-size: 0.86rem;
  font-weight: 700;
  transition: transform 0.2s ease, background 0.2s ease;
}

.ck-portal-card-premium:hover .ck-portal-action {
  transform: translateX(4px);
  background: var(--ck-red-hover);
}

.ck-home-page .ck-attribute-capsule,
.ck-legal-page .ck-attribute-capsule {
  position: relative;
  z-index: 3;
  max-width: 1010px;
  margin-top: -28px;
  padding: 1.25rem 2.25rem;
  border-radius: 8px;
  box-shadow: 0 16px 34px rgba(17, 17, 17, 0.12);
}

/* Propiedades ----------------------------------------------------------- */
.ck-property-hero-section {
  padding: clamp(1.5rem, 3vw, 2.75rem) 0 0;
  background: #fff;
}

.ck-property-hero-shell {
  display: grid;
  grid-template-columns: minmax(390px, 0.95fr) minmax(0, 1.25fr);
  min-height: 430px;
  overflow: hidden;
  border: 1px solid var(--ck-line);
  border-radius: 8px;
  background: #fff;
}

.ck-property-hero-copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2.3rem, 4.5vw, 4.5rem);
  min-width: 0;
}

.ck-property-hero-copy::before {
  content: '';
  position: absolute;
  top: 18%;
  bottom: 18%;
  left: clamp(1rem, 2vw, 2rem);
  width: 1px;
  background: rgba(225, 6, 0, 0.27);
}

.ck-property-hero-copy h1 {
  margin: 0.35rem 0 1rem;
  color: var(--ck-ink) !important;
  font-size: clamp(3rem, 4.25vw, 4.3rem) !important;
  line-height: 0.98 !important;
}

.ck-property-hero-copy p {
  max-width: 31rem;
  color: #5e5a57;
  font-size: 1rem;
  line-height: 1.65;
}

.ck-property-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem 1.25rem;
  margin-top: 1.35rem;
  color: #383532;
  font-size: 0.76rem;
  font-weight: 600;
}

.ck-property-proof span {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
}

.ck-property-proof i { color: var(--ck-red); }

.ck-property-hero-media {
  position: relative;
  min-height: 430px;
  background-position: center;
  background-size: cover;
}

.ck-property-hero-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0.08) 25%, transparent 48%);
}

.ck-properties-page .ck-search-floating {
  position: relative;
  z-index: 4;
  width: min(1120px, calc(100% - 3rem));
  margin: -58px auto 0;
  padding: 1.35rem 1.5rem;
  border-radius: 8px;
  box-shadow: 0 18px 45px rgba(17, 17, 17, 0.13);
}

.ck-properties-page .ck-section {
  padding-block: clamp(4.5rem, 7vw, 7rem);
}

.ck-properties-page .ck-listing-card {
  border-radius: 7px;
  box-shadow: 0 8px 24px rgba(17, 17, 17, 0.055);
}

.ck-properties-page .ck-listing-title,
.ck-properties-page .ck-listing-price {
  font-family: var(--ck-serif) !important;
  letter-spacing: -0.02em !important;
}

/* Estudio juridico ------------------------------------------------------ */
.ck-legal-hero-section {
  padding: clamp(1.5rem, 3vw, 2.75rem) 0 clamp(2rem, 4vw, 3.5rem);
  background: #fff;
}

.ck-legal-hero-shell {
  display: grid;
  grid-template-columns: minmax(430px, 0.95fr) minmax(0, 1.15fr);
  min-height: 540px;
  overflow: hidden;
  border-radius: 8px;
  background: #111;
  box-shadow: 0 18px 44px rgba(17, 17, 17, 0.14);
}

.ck-legal-hero-copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2.5rem, 5vw, 5rem);
  min-width: 0;
  color: #fff;
}

.ck-legal-hero-copy::after {
  content: '';
  position: absolute;
  right: -100px;
  top: 0;
  width: 180px;
  height: 100%;
  background: linear-gradient(90deg, #111 0%, transparent 100%);
  pointer-events: none;
}

.ck-legal-hero-copy .ck-eyebrow { color: #ff6a65 !important; }

.ck-legal-hero-copy h1 {
  position: relative;
  z-index: 1;
  margin: 0.45rem 0 1.2rem;
  color: #fff !important;
  font-size: clamp(3rem, 4vw, 4.15rem) !important;
  line-height: 1.01 !important;
  overflow-wrap: break-word;
}

.ck-legal-hero-copy p {
  position: relative;
  z-index: 1;
  max-width: 34rem;
  color: rgba(255, 255, 255, 0.76);
  font-size: 1rem;
  line-height: 1.65;
}

.ck-legal-hero-actions {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem 1.25rem;
  margin-top: 1.65rem;
}

.ck-legal-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(225, 6, 0, 0.7);
  color: #fff !important;
  font-size: 0.85rem;
  font-weight: 600;
}

.ck-legal-hero-media {
  min-height: 540px;
  background-position: center;
  background-size: cover;
}

.ck-legal-page .ck-section {
  padding-block: clamp(5rem, 7vw, 7.5rem);
}

.ck-legal-page .ck-stagger-card {
  border-radius: 7px;
  border-color: var(--ck-line);
  box-shadow: 0 12px 30px rgba(17, 17, 17, 0.065);
}

.ck-legal-page .ck-stagger-card h3 {
  font-family: var(--ck-serif) !important;
  font-size: 1.45rem;
  font-weight: 500 !important;
  letter-spacing: -0.025em !important;
}

.ck-legal-page .ck-philosophy-red-side {
  background: linear-gradient(135deg, var(--ck-red-deep), var(--ck-red)) !important;
}

/* Footer and global red WhatsApp --------------------------------------- */
.carolina-app footer {
  background: #fff !important;
  color: #3f3b38 !important;
}

.ck-whatsapp-fab {
  background: var(--ck-red) !important;
  box-shadow: 0 8px 24px rgba(225, 6, 0, 0.28) !important;
  animation-name: none !important;
}

.ck-whatsapp-fab:hover { background: var(--ck-red-hover) !important; }

.ck-instagram-fab {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%) !important;
  color: #fff !important;
}

/* Shared UX foundations ------------------------------------------------ */
body.carolina-app :where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid rgba(225, 6, 0, 0.48) !important;
  outline-offset: 3px !important;
}

.carolina-app :where(button, input, select, textarea) { font: inherit; }

.ck-standard-page { padding: clamp(1.5rem, 3vw, 3rem) 0 clamp(4.5rem, 7vw, 7rem); }

.ck-standard-hero {
  display: grid;
  grid-template-columns: minmax(390px, 0.92fr) minmax(0, 1.08fr);
  min-height: 470px;
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
  overflow: hidden;
  border: 1px solid var(--ck-line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 42px rgba(17, 17, 17, 0.09);
}

.ck-standard-hero-copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2.2rem, 4.6vw, 4.75rem);
}

.ck-standard-hero-copy::before {
  content: '';
  position: absolute;
  top: 18%;
  bottom: 18%;
  left: clamp(1rem, 2vw, 2rem);
  width: 1px;
  background: rgba(225, 6, 0, 0.28);
}

.ck-standard-hero-copy h1 {
  margin: 0.55rem 0 1.1rem;
  color: var(--ck-ink) !important;
  font-size: clamp(2.8rem, 4.3vw, 4.5rem) !important;
  line-height: 0.98 !important;
}

.ck-standard-hero-copy > p {
  max-width: 34rem;
  color: var(--ck-muted);
  font-size: 1rem;
  line-height: 1.7;
}

.ck-standard-hero-copy .ck-btn-primary { align-self: flex-start; margin-top: 1.65rem; }

.ck-standard-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem 1.15rem;
  margin-top: 1.35rem;
  color: #393532;
  font-size: 0.74rem;
  font-weight: 650;
}

.ck-standard-proof span { display: inline-flex; align-items: center; gap: 0.42rem; }
.ck-standard-proof i { color: var(--ck-red); }

.ck-standard-hero-media {
  position: relative;
  min-height: 470px;
  background-position: center;
  background-size: cover;
}

.ck-standard-hero-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0.08) 25%, transparent 50%);
}

.ck-standard-hero-compact { min-height: 420px; }
.ck-standard-hero-compact .ck-standard-hero-media { min-height: 420px; }
.ck-about-hero-media { background-position: center 64%; }

.ck-standard-page :where(.rounded-2xl) { border-radius: 8px !important; }
.ck-standard-page :where(.rounded-xl) { border-radius: 6px !important; }

.ck-detail-whatsapp {
  border-color: rgba(225, 6, 0, 0.24) !important;
  background: rgba(225, 6, 0, 0.045) !important;
  color: #a90500 !important;
  transition: border-color 0.18s ease, background-color 0.18s ease !important;
}
.ck-detail-whatsapp:hover { border-color: var(--ck-red) !important; background: #fff !important; }

/* Legacy catalog brought into the Carolina visual system -------------- */
.catalog-page {
  --catalog-ink: #111111 !important;
  --catalog-muted: #68635f !important;
  --catalog-paper: #ffffff !important;
  --catalog-surface: #ffffff !important;
  --catalog-line: #dedad6 !important;
  --catalog-soft: #f7f6f4 !important;
  --catalog-serif: var(--ck-serif) !important;
}

.catalog-page .catalog-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0.94) 37%, rgba(255, 255, 255, 0.15) 70%);
}
.catalog-page .catalog-hero-image { object-position: center 58%; }
.catalog-page .catalog-label { border-radius: 4px; color: var(--ck-red) !important; letter-spacing: 0.16em; }
.catalog-page .catalog-hero h1 { color: var(--ck-ink) !important; letter-spacing: -0.035em !important; }
.catalog-page .catalog-hero p { color: #4f4a47; }
.catalog-page .catalog-button,
.catalog-page a.catalog-button { border-color: var(--ck-red); background: var(--ck-red); color: #fff !important; }
.catalog-page a.catalog-button:hover { background: var(--ck-red-hover); box-shadow: 0 8px 20px rgba(225, 6, 0, 0.17); }
.catalog-page a.catalog-button.is-outline { border-color: var(--ck-red); color: var(--ck-red) !important; }
.catalog-page .catalog-filter { border-radius: 5px; }
.catalog-page .catalog-filter:hover { border-color: rgba(225, 6, 0, 0.45); }
.catalog-page .catalog-filter.is-active { border-color: var(--ck-red); background: var(--ck-red); }
.catalog-page .catalog-card { border-radius: 7px; }
.catalog-page .catalog-card:hover { border-color: rgba(225, 6, 0, 0.35); box-shadow: 0 13px 35px rgba(17, 17, 17, 0.08); }
.catalog-page .catalog-conversation { background: var(--ck-ink) !important; }

/* Account access ------------------------------------------------------- */
.mateo-auth-brand-name,
.mateo-auth-title,
.mateo-auth-visual-title { font-family: var(--ck-serif) !important; font-weight: 400 !important; letter-spacing: -0.03em !important; }
.mateo-auth-mark { font-family: var(--ck-serif) !important; color: var(--ck-red) !important; }
.mateo-auth-eyebrow { color: var(--ck-red) !important; }
.mateo-auth-form-wrap { border-radius: 8px !important; }
body.carolina-app:has(.mateo-auth) .ck-whatsapp-fab,
body.carolina-app:has(.mateo-auth) .ck-floating-actions { display: none !important; }

@media (max-width: 1023px) {
  .ck-portal-grid,
  .ck-property-hero-shell,
  .ck-legal-hero-shell,
  .ck-standard-hero {
    grid-template-columns: 1fr;
  }

  .ck-home-page .ck-portal-card-premium {
    min-height: 460px;
    height: 58vw;
  }

  .ck-property-hero-media { min-height: 360px; order: -1; }
  .ck-property-hero-media::after {
    background: linear-gradient(180deg, transparent 65%, #fff 100%);
  }

  .ck-property-hero-copy::before { display: none; }

  .ck-legal-hero-copy::after {
    right: 0;
    top: auto;
    bottom: -85px;
    width: 100%;
    height: 120px;
    background: linear-gradient(180deg, #111 0%, transparent 100%);
  }

  .ck-legal-hero-media { min-height: 430px; }

  .ck-standard-hero-media { min-height: 340px; order: -1; }
  .ck-standard-hero-media::after { background: linear-gradient(180deg, transparent 62%, #fff 100%); }
  .ck-standard-hero-copy::before { display: none; }
}

@media (max-width: 767px) {
  .ck-header-inner { min-height: 70px; }
  .ck-brand-logo-img { height: 43px; max-width: 166px; }

  .ck-home-portal { padding-top: 2.4rem; }
  .ck-home-portal::before,
  .ck-home-portal::after { display: none; }

  .ck-home-title { font-size: clamp(2.45rem, 12vw, 3.6rem) !important; }
  .ck-portal-grid { gap: 14px; }

  .ck-home-page .ck-portal-card-premium {
    height: auto;
    min-height: 445px;
    padding: 1.6rem;
  }

  .ck-home-page .ck-attribute-capsule,
  .ck-legal-page .ck-attribute-capsule {
    width: calc(100% - 2rem);
    margin-top: -16px;
    padding: 1rem 1.15rem;
  }

  .ck-property-hero-shell,
  .ck-legal-hero-shell { border-radius: 6px; }

  .ck-property-hero-media { min-height: 250px; }
  .ck-property-hero-copy { padding: 2rem 1.5rem 4.25rem; }
  .ck-property-hero-copy h1 { font-size: clamp(2.6rem, 12vw, 3.6rem) !important; }

  .ck-properties-page .ck-search-floating {
    width: calc(100% - 1.5rem);
    margin-top: -38px;
    padding: 1rem;
  }

  .ck-legal-hero-copy { padding: 2.5rem 1.5rem; }
  .ck-legal-hero-copy .ck-eyebrow {
    max-width: 100%;
    font-size: 0.62rem;
    letter-spacing: 0.14em !important;
    line-height: 1.5;
    white-space: normal;
  }
  .ck-legal-hero-copy h1 { font-size: clamp(2.35rem, 10.2vw, 3rem) !important; }
  .ck-legal-hero-media { min-height: 330px; background-position: 45% center; }

  .ck-standard-page { padding-top: 1rem; }
  .ck-standard-hero { border-radius: 6px; }
  .ck-standard-hero-media,
  .ck-standard-hero-compact .ck-standard-hero-media { min-height: 245px; }
  .ck-standard-hero-copy { padding: 2rem 1.4rem 2.4rem; }
  .ck-standard-hero-copy h1 { font-size: clamp(2.4rem, 11vw, 3.25rem) !important; }

  .catalog-page .catalog-hero::after { background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.98)); }

  .ck-legal-page .ck-stagger-card-02,
  .ck-legal-page .ck-stagger-card-04 { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ck-page *,
  .ck-header-sticky * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
