:root {
  --brand-navy: #061a3a;
  --brand-navy-soft: #102b52;
  --brand-teal: #00a89c;
  --brand-teal-dark: #008d84;
  --brand-teal-soft: #e7f8f6;
}
.logo > span,
.brand > b,
.brand-mark {
  background: transparent url("/assets/logo-mark.png") center/contain no-repeat !important;
  color: transparent !important;
  border-radius: 0 !important;
  font-size: 0 !important;
}
.logo > span {
  width: 44px !important;
  height: 44px !important;
}
.brand > b,
.brand-mark {
  width: 42px !important;
  height: 42px !important;
  flex: 0 0 42px;
}
.logo b,
.brand span {
  color: var(--brand-navy);
}
body:has(.site-header) {
  --purple: var(--brand-teal);
  --ink: var(--brand-navy);
  --soft: var(--brand-teal-soft);
}
.site-header .login:hover,
.site-header nav a:hover {
  color: var(--brand-teal-dark);
}
.site-header {
  border-bottom-color: #dfeae9;
  box-shadow: 0 5px 22px rgba(6, 26, 58, 0.04);
}
.site-header .brand span,
footer .brand span {
  font-size: 0;
}
.site-header .brand span:after,
footer .brand span:after {
  content: "reserva en un clic";
  font-size: 14px;
  color: var(--brand-navy);
}
.hero {
  background:
    radial-gradient(circle at 75% 20%, #dff8f5, transparent 35%),
    linear-gradient(180deg, #fbfefd, #f3f8f8);
}
.hero-card {
  border-color: #cfe5e2;
  box-shadow: 0 30px 70px rgba(6, 26, 58, 0.14);
}
.hero h1 em,
.tag,
.feature-grid i {
  color: var(--brand-teal-dark);
}
.button,
.dates b,
.mock-head > b {
  background: var(--brand-teal);
}
.tree-row.holding,
.cta {
  background: var(--brand-navy);
}
.access-explainer {
  padding: 100px max(24px, calc((100% - 1120px) / 2));
  background: #fff;
}
.access-intro {
  max-width: 720px;
  margin-bottom: 45px;
}
.access-intro h2 {
  font: 800 clamp(32px, 4vw, 48px) / 1.12 Manrope;
  letter-spacing: -0.045em;
  margin: 15px 0;
}
.access-intro p {
  color: #667085;
  font-size: 16px;
  line-height: 1.7;
}
.access-flow {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.access-card {
  display: grid;
  grid-template-columns: 46px 1fr auto;
  align-items: start;
  gap: 15px;
  padding: 22px;
  border: 1px solid #d8e7e5;
  border-radius: 15px;
  background: #fbfefd;
  transition: 0.2s;
}
.access-card:hover {
  transform: translateY(-2px);
  border-color: #7bcfc8;
  box-shadow: 0 16px 35px rgba(6, 26, 58, 0.07);
}
.access-card > span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: var(--brand-teal-soft);
  color: var(--brand-teal-dark);
  font-weight: 800;
  font-size: 12px;
}
.access-card h3 {
  font: 700 17px Manrope;
  margin: 0 0 7px;
  color: var(--brand-navy);
}
.access-card p {
  margin: 0;
  color: #667085;
  font-size: 13px;
  line-height: 1.6;
}
.access-card > b {
  align-self: center;
  padding: 6px 9px;
  border-radius: 20px;
  background: #edf4f4;
  color: #47615f;
  font-size: 10px;
  white-space: nowrap;
}
.access-card.platform {
  grid-column: 1/-1;
  background: linear-gradient(110deg, var(--brand-navy), #0c365e);
  border: 0;
}
.access-card.platform > span {
  background: var(--brand-teal);
  color: #fff;
}
.access-card.platform h3 {
  color: #fff;
}
.access-card.platform p {
  color: #c7d6e3;
}
.access-card.platform > b {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}
.access-note {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 20px;
  padding: 17px 20px;
  border-left: 4px solid var(--brand-teal);
  background: var(--brand-teal-soft);
  border-radius: 0 10px 10px 0;
  color: #45615f;
}
.access-note strong {
  color: var(--brand-navy);
  white-space: nowrap;
}
.access-note span {
  font-size: 13px;
}
@media (max-width: 800px) {
  .access-explainer {
    padding-block: 70px;
  }
  .access-flow {
    grid-template-columns: 1fr;
  }
  .access-card.platform {
    grid-column: auto;
  }
  .access-card {
    grid-template-columns: 42px 1fr;
  }
  .access-card > b {
    grid-column: 2;
  }
  .access-note {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }
}
@media (max-width: 480px) {
  .access-card {
    padding: 17px;
  }
  .access-note strong {
    white-space: normal;
  }
}
.logos {
  background: #fbfefd;
}
.logos p,
.features > .tag,
.structure > div > .tag {
  color: var(--brand-teal-dark);
}
.feature-grid article {
  border-color: #d9e9e7;
  box-shadow: 0 10px 32px rgba(6, 26, 58, 0.04);
}
.feature-grid i {
  background: var(--brand-teal-soft);
}
.structure {
  background:
    radial-gradient(
      circle at 82% 25%,
      rgba(0, 168, 156, 0.12),
      transparent 25%
    ),
    linear-gradient(135deg, #f7fbfb, #edf8f6);
}
.tree-card {
  border-color: #cfe3e0;
  box-shadow: 0 22px 55px rgba(6, 26, 58, 0.09);
}
.tree-row {
  border-color: #d5e6e4;
}
.branch {
  border-left-color: var(--brand-teal) !important;
}
.cta {
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    120deg,
    var(--brand-navy) 0%,
    #0a3158 70%,
    #006f6a 145%
  );
}
.cta::before {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  right: -230px;
  top: -270px;
  background: rgba(0, 168, 156, 0.22);
}
.cta > * {
  position: relative;
}
.cta > span {
  color: #74ded5;
}
.cta p {
  color: #c9dcdf;
}
.button.light {
  color: var(--brand-navy);
}
body:has(#login-form) {
  --p: var(--brand-teal);
  --ink: var(--brand-navy);
}
body:has(#login-form) > aside {
  background: linear-gradient(
    145deg,
    var(--brand-navy),
    var(--brand-navy-soft) 60%,
    var(--brand-teal-dark)
  );
}
body:has(a.logo[href="/admin"]) {
  --purple: var(--brand-teal);
  --ink: var(--brand-navy);
  --bg: #f5f8f8;
}
body:has(a.logo[href="/admin"]) nav > a.active {
  background: var(--brand-teal-soft);
  color: var(--brand-teal-dark);
}
body:has(a.logo[href="/admin"]) nav > a em,
.plan {
  background: var(--brand-teal-soft);
  color: var(--brand-teal-dark);
}
.actions .primary,
.detail-save,
.detail-action,
.modal-actions .save {
  background: var(--brand-teal) !important;
  border-color: var(--brand-teal) !important;
}
.detail-back,
.detail-tabs button.active {
  color: var(--brand-teal-dark);
}
.detail-tabs button.active {
  border-bottom-color: var(--brand-teal);
}
.chart .line {
  stroke: var(--brand-teal);
}
body:has(a.brand[href="/panel"]) > aside {
  background: var(--brand-navy);
}
body:has(a.brand[href="/panel"]) nav button:hover,
body:has(a.brand[href="/panel"]) nav button.active,
body:has(a.brand[href="/panel"]) .button,
body:has(a.brand[href="/panel"]) button.primary {
  background: var(--brand-teal);
}
body:has(a.brand[href="/panel"]) .public-url {
  background: var(--brand-teal-soft);
  color: var(--brand-teal-dark);
}
body:has(a.brand[href="/panel"]) .brand span {
  color: #fff;
}
.topbar .brand-mark {
  width: 40px !important;
  height: 40px !important;
}
.topbar .brand > span:last-child {
  color: var(--brand-navy);
}
@media (max-width: 700px) {
  .logo > span {
    width: 36px !important;
    height: 36px !important;
  }
}
@media (max-width: 800px) {
  .site-header .login {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 0 10px;
    color: var(--brand-navy);
  }
}
@media (max-width: 520px) {
  .site-header {
    padding-inline: 14px;
  }
  .site-header > div .button.small {
    display: none;
  }
  .site-header > div {
    gap: 6px;
  }
}