/* ========== Tema Light: blanco, azul logo #1e2834, terracota Rosarito ========== */

:root {
  --bg: #ffffff;
  --surface: #faf8f6;
  --surface-2: #f5f2ef;
  --card: rgba(30, 40, 52, 0.04);
  --card-2: rgba(30, 40, 52, 0.06);
  --stroke: rgba(30, 40, 52, 0.12);
  --text: #1e2834;
  --muted: #5c6572;

  --logo-blue: #1e2834;
  --terracotta: #1e4a66;
  --terracotta-light: #6a9de0;
  --terracotta-bg: #f5ebe6;
  --sand: #d4c4b0;
  --sage: #7a9072;
  --olive: #4a5d3d;

  --shadow: 0 18px 50px rgba(30, 40, 52, 0.12);
  --shadow-soft: 0 10px 30px rgba(30, 40, 52, 0.08);
}

body {
  color: var(--text);
  background:
    radial-gradient(900px 520px at 20% -10%, rgba(232, 229, 224, 0.9), transparent 70%),
    radial-gradient(900px 520px at 90% 10%, rgba(245, 235, 230, 0.7), transparent 70%),
    linear-gradient(180deg, #ffffff 0%, #faf8f6 60%, #f5f2ef 100%);
}

strong {
  color: #1e2834;
}

/* Header */
.header {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(30, 40, 52, 0.1);
}

.brand__mark {
  background: linear-gradient(135deg, var(--terracotta-bg), rgba(30, 40, 52, 0.08));
  border: 1px solid rgba(30, 40, 52, 0.1);
}

.brand__subtitle {
  color: var(--muted);
}

.nav {
  background: rgba(30, 40, 52, 0.04);
  border: 1px solid rgba(30, 40, 52, 0.1);
}

.nav__link {
  color: var(--text);
}

.nav__link:hover {
  background: rgba(30, 40, 52, 0.08);
  color: var(--logo-blue);
}

.btn {
  border: 1px solid rgba(30, 40, 52, 0.14);
  background: rgba(30, 40, 52, 0.04);
  color: var(--text);
}

.btn:hover {
  background: rgba(30, 40, 52, 0.08);
  border-color: rgba(30, 40, 52, 0.2);
  box-shadow: var(--shadow-soft);
}

.btn--primary {
  background: linear-gradient(135deg, var(--terracotta), var(--terracotta-light));
  border-color: rgba(168, 92, 60, 0.4);
  color: #fff;
}

.btn--primary:hover {
  background: linear-gradient(135deg, #984a2e, var(--terracotta));
  border-color: var(--terracotta);
  color: #fff;
}

.btn--ghost {
  background: rgba(30, 40, 52, 0.04);
  border-color: rgba(30, 40, 52, 0.12);
}

/* Hero: overlay más claro para que el texto oscuro se lea bien */
.hero__bg {
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.35), rgba(245, 235, 230, 0.25)),
    radial-gradient(1000px 650px at 20% 20%, rgba(255, 255, 255, 0.2), transparent 55%),
    url("/imgs/portada.webp");
}

.hero__shade {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.45) 0%, rgba(250, 248, 246, 0.75) 52%, rgba(255, 255, 255, 0.92) 100%),
    radial-gradient(900px 600px at 30% 20%, rgba(0, 0, 0, 0.08), transparent 60%);
}

.pill {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(30, 40, 52, 0.12);
  color: var(--text);
}

.pill__dot {
  background: linear-gradient(135deg, var(--terracotta), var(--terracotta-light));
  box-shadow: 0 0 0 4px rgba(168, 92, 60, 0.2);
}

.hero__title {
  color: var(--logo-blue);
}

.hero__subtitle {
  color: rgba(30, 40, 52, 0.82);
}

.trust__item {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(30, 40, 52, 0.1);
}

.trust__kpi {
  color: var(--logo-blue);
}

.trust__label {
  color: var(--muted);
}

/* Sections */
.section--sand {
  background:
    radial-gradient(900px 520px at 15% 0%, rgba(245, 235, 230, 0.5), transparent 55%),
    radial-gradient(900px 520px at 85% 15%, rgba(232, 240, 248, 0.35), transparent 58%),
    #faf8f6;
  border-top: 1px solid rgba(30, 40, 52, 0.08);
  border-bottom: 1px solid rgba(30, 40, 52, 0.08);
}

.section--olive {
  background:
    radial-gradient(900px 520px at 10% 10%, rgba(245, 235, 230, 0.6), transparent 56%),
    radial-gradient(900px 520px at 90% 30%, rgba(212, 196, 176, 0.4), transparent 60%),
    linear-gradient(180deg, #f5f2ef 0%, #f0ebe6 100%);
  border-top: 1px solid rgba(30, 40, 52, 0.08);
  border-bottom: 1px solid rgba(30, 40, 52, 0.08);
}

.section__title {
  color: var(--logo-blue);
}

.section__lead {
  color: rgba(30, 40, 52, 0.78);
}

.section__title--light {
  color: var(--logo-blue);
}

.section__lead--light {
  color: rgba(30, 40, 52, 0.75);
}

/* Cards */
.card {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(30, 40, 52, 0.1);
}

.card--soft {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(30, 40, 52, 0.08);
}

.card--path {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(30, 40, 52, 0.12);
  box-shadow: var(--shadow-soft);
}

.card__title {
  color: var(--logo-blue);
}

.card__text {
  color: rgba(30, 40, 52, 0.78);
}

.muted {
  color: var(--muted);
}

.icon-list__item {
  color: rgba(30, 40, 52, 0.82);
}

.icon {
  background: rgba(30, 40, 52, 0.06);
  border: 1px solid rgba(30, 40, 52, 0.1);
}

.icon::before {
  background: linear-gradient(135deg, var(--terracotta-bg), rgba(30, 40, 52, 0.08));
}

.icon--kite::after,
.icon--horse::after,
.icon--bike::after {
  /*background: var(--logo-blue);*/
  opacity: 0.75;
}

/* Carrusel */
.carousel {
  border: 1px solid rgba(30, 40, 52, 0.1);
  background: rgba(255, 255, 255, 0.6);
}

.carousel__track {
  scrollbar-color: rgba(30, 40, 52, 0.25) transparent;
}

.carousel__track::-webkit-scrollbar-thumb {
  background: rgba(30, 40, 52, 0.25);
}

.slide {
  border: 1px solid rgba(30, 40, 52, 0.1);
  background: rgba(255, 255, 255, 0.9);
}

.slide__cap {
  color: rgba(30, 40, 52, 0.78);
}

.carousel__hint {
  color: var(--muted);
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(30, 40, 52, 0.12);
}

/* Map */
.map {
  border: 1px solid rgba(30, 40, 52, 0.1);
  background: rgba(255, 255, 255, 0.7);
}

.map__media {
  background:
    linear-gradient(135deg, var(--terracotta-bg), rgba(30, 40, 52, 0.06)),
    repeating-linear-gradient(45deg, rgba(30, 40, 52, 0.04) 0 12px, rgba(30, 40, 52, 0.02) 12px 24px);
}

.map__media::after {
  color: var(--muted);
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(30, 40, 52, 0.1);
}

.map__title {
  color: var(--logo-blue);
}

.map__text {
  color: rgba(30, 40, 52, 0.78);
}

.tag {
  border: 1px solid rgba(30, 40, 52, 0.12);
  background: rgba(255, 255, 255, 0.8);
  color: var(--text);
}

.tag::before {
  background: var(--muted);
}

.tag--ok::before {
  background: var(--sage);
}

.tag--hold::before {
  background: var(--sand);
}

.tag--sold::before {
  background: var(--terracotta);
}

/* Pricing */
.pricing__table {
  border: 1px solid rgba(30, 40, 52, 0.1);
  background: rgba(255, 255, 255, 0.9);
}

.pricing__row {
  border-top: 1px solid rgba(30, 40, 52, 0.08);
}

.pricing__row--head {
  background: var(--terracotta-bg);
}

.pricing__cell {
  color: rgba(30, 40, 52, 0.82);
}

.pricing__row--head .pricing__cell {
  color: var(--logo-blue);
}

.pricing__row .pricing__cell:first-child {
  border-right: 1px solid rgba(30, 40, 52, 0.08);
}

.note {
  background:
    radial-gradient(700px 420px at 20% 10%, var(--terracotta-bg), transparent 60%),
    rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(30, 40, 52, 0.1);
}

.note__title {
  color: var(--logo-blue);
}

.note__text {
  color: rgba(30, 40, 52, 0.78);
}

.note__fine {
  color: var(--muted);
}

.check {
  color: rgba(30, 40, 52, 0.82);
}

.check li::before {
  background: linear-gradient(135deg, var(--terracotta), var(--terracotta-light));
  border: 1px solid rgba(30, 40, 52, 0.12);
}

/* Form */
.form {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(30, 40, 52, 0.1);
}

.field__label {
  color: rgba(30, 40, 52, 0.78);
}

.field__input {
  border: 1px solid rgba(30, 40, 52, 0.14);
  background: #fff;
  color: var(--text);
}

.field__input::placeholder {
  color: var(--muted);
}

.field__input:focus {
  border-color: var(--terracotta);
  box-shadow: 0 0 0 4px rgba(168, 92, 60, 0.15);
}

.divider {
  background: rgba(30, 40, 52, 0.1);
}

/* Footer */
.footer {
  border-top: 1px solid rgba(30, 40, 52, 0.1);
  background: rgba(245, 242, 239, 0.9);
}

.brand--footer .brand__subtitle {
  color: var(--muted);
}

.footer__link {
  border: 1px solid rgba(30, 40, 52, 0.1);
  background: rgba(255, 255, 255, 0.7);
  color: var(--text);
}

.footer__link:hover {
  background: rgba(255, 255, 255, 0.95);
  color: var(--logo-blue);
}

.footer__fine {
  color: var(--muted);
}

/* Botón flotante WhatsApp: terracota */
.wa-float {
  background: linear-gradient(135deg, var(--terracotta), var(--terracotta-light));
  color: #fff;
  border: 1px solid rgba(168, 92, 60, 0.4);
  box-shadow: var(--shadow);
}

.wa-float__icon::after {
  background: rgba(255, 255, 255, 0.95);
}