/* Showcase hubs, the main site and the phone preview. Shared by every site: edit it here and run
   npm run brand. Colours come from brand.css (generated from brand.json), loaded before this file. */

:root {
  --radius: 22px;
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
}

body {
  font-family: "Bricolage Grotesque", sans-serif;
  background: var(--paper);
  color: var(--ink);
}

.hub-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 20px;
  padding-bottom: 20px;
}

.brand {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.brand-name {
  display: grid;
  font-weight: 800;
  font-size: 15px;
  line-height: 0.92;
  letter-spacing: -0.02em;
  color: var(--green);
}

.brand-name b {
  color: var(--accent-ink);
}

.brand img {
  width: 44px;
  height: 44px;
}

.hub-nav ul {
  display: flex;
  gap: 4px;
  font-weight: 600;
}

.hub-nav ul a {
  display: inline-flex;
  padding: 10px 16px;
  border-radius: 999px;
  text-decoration: none;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 52px;
  padding: 0 24px;
  border-radius: 14px;
  font:
    700 16px "Bricolage Grotesque",
    sans-serif;
  text-decoration: none;
  cursor: pointer;
  border: 0;
  transition: transform 0.15s var(--ease);
}

.btn:active {
  transform: scale(0.97);
}

.btn-a {
  background: var(--accent);
  color: var(--on-accent);
}

.btn-g {
  background: var(--green);
  color: #fff;
}

.btn-b {
  background: var(--white);
  border: 1.5px solid var(--line);
  color: var(--ink);
}

.btn-sm {
  height: 42px;
  padding: 0 16px;
  font-size: 15px;
  border-radius: 12px;
}

.hub-hero {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  padding-top: clamp(32px, 6vw, 80px);
  padding-bottom: clamp(48px, 8vw, 110px);
}

.hub-hero h1 {
  font-size: clamp(48px, 7.2vw, 100px);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.045em;
}

.hub-hero h1 em {
  font-style: normal;
  color: var(--green);
}

.hub-hero p {
  margin-top: 22px;
  max-width: 44ch;
  font-size: clamp(18px, 1.6vw, 21px);
  line-height: 1.5;
  color: var(--muted);
}

.hub-hero .ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.fan {
  position: relative;
  height: min(560px, 62vw);
}

.fan img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 42%;
  aspect-ratio: 390 / 844;
  object-fit: cover;
  object-position: top;
  border-radius: 28px;
  border: 7px solid #111;
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.45);
  translate: -50% -50%;
}

.fan img:nth-child(1) {
  rotate: -12deg;
  translate: -105% -46%;
}

.fan img:nth-child(3) {
  rotate: 12deg;
  translate: 5% -46%;
}

.fan img:nth-child(2) {
  z-index: 2;
}

.sec {
  padding-top: clamp(56px, 8vw, 100px);
}

.sec h2 {
  font-size: clamp(36px, 5vw, 60px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
}

.sec .lead {
  margin-top: 12px;
  max-width: 52ch;
  font-size: 19px;
  color: var(--muted);
}

.filters {
  display: flex;
  gap: 8px;
  margin: 28px 0 24px;
  overflow-x: auto;
  scrollbar-width: none;
}

.filters button {
  flex: none;
  height: 44px;
  padding: 0 18px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  color: var(--ink);
  font:
    600 15px "Bricolage Grotesque",
    sans-serif;
  cursor: pointer;
}

.filters button[aria-pressed="true"] {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 22px;
}

.card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.card[hidden] {
  display: none;
}

.shot {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10.5;
  overflow: hidden;
  background: var(--green-soft);
}

.shot .d {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  transition: scale 0.8s var(--ease);
}

.shot .m {
  position: absolute;
  right: 14px;
  bottom: -26px;
  width: 23%;
  aspect-ratio: 390 / 844;
  object-fit: cover;
  object-position: top;
  border-radius: 14px;
  border: 4px solid #111;
  box-shadow: 0 14px 30px -10px rgba(0, 0, 0, 0.5);
  transition: translate 0.6s var(--ease);
}

@media (hover: hover) and (pointer: fine) {
  .card:hover .shot .d {
    scale: 1.03;
  }

  .card:hover .shot .m {
    translate: 0 -16px;
  }

  .hub-nav ul a:hover {
    background: var(--white);
  }
}

.card-body {
  display: grid;
  gap: 4px;
  padding: 18px 20px 20px;
}

.card-body small {
  font-weight: 600;
  color: var(--green);
}

.card-body h3 {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.card-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

/* What's included: an uneven grid. The first point (the one that matters most) is wide and green,
   the last is wide in the accent colour, the rest are white. Emphasis comes from type and the brand marker. */
.features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 32px;
}

.feature {
  display: grid;
  align-content: space-between;
  gap: 18px;
  min-height: 220px;
  padding: clamp(22px, 2.4vw, 32px);
  border-radius: var(--radius);
  border: 1.5px solid var(--line);
  background: var(--white);
}

.feature:first-child,
.feature:last-child {
  grid-column: span 2;
}

.feature:first-child {
  border-color: var(--green);
  background: var(--green);
  color: var(--paper);
}

.feature:last-child {
  border-color: var(--accent);
  background: var(--accent);
}

.feature:last-child h3 {
  color: var(--on-accent);
}

.feature h3 {
  max-width: 16ch;
  color: var(--green);
  font-size: clamp(26px, 2.6vw, 34px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.02;
  text-wrap: balance;
}

.feature:first-child h3 {
  max-width: 14ch;
  color: #fff;
  font-size: clamp(34px, 4vw, 52px);
}

.feature h3 em {
  font-style: normal;
  white-space: nowrap;
  background: linear-gradient(transparent 58%, var(--accent) 58%, var(--accent) 92%, transparent 92%);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.feature:first-child h3 em {
  background: none;
  color: var(--accent);
}

.feature:last-child h3 em {
  background: linear-gradient(transparent 58%, var(--paper) 58%, var(--paper) 92%, transparent 92%);
}

.feature p {
  max-width: 42ch;
  color: var(--muted);
  line-height: 1.5;
}

.feature:first-child p {
  color: var(--on-green);
  font-size: 18px;
}

.feature:last-child p {
  color: var(--on-accent);
}

/* Demos are examples: say it on every screenshot and once in words. */
.shot::after {
  content: "Ejemplo personalizable";
  position: absolute;
  left: 12px;
  top: 12px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(28, 25, 23, 0.82);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
}

.custom-note {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  align-items: baseline;
  margin-top: 18px;
  padding: 14px 18px;
  border-radius: 14px;
  background: var(--green-soft);
  color: var(--green);
  font-size: 17px;
  line-height: 1.45;
  max-width: 820px;
}

.custom-note b {
  font-weight: 800;
}

.contact {
  margin-top: clamp(56px, 8vw, 100px);
  background: var(--green);
  color: var(--paper);
  padding-top: clamp(56px, 8vw, 96px);
  padding-bottom: clamp(56px, 8vw, 96px);
}

.contact h2 {
  font-size: clamp(40px, 6vw, 76px);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 0.95;
}

.contact p {
  margin-top: 14px;
  max-width: 48ch;
  font-size: 19px;
  color: var(--on-green);
}

.contact .ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.contact .btn-b {
  background: transparent;
  color: var(--paper);
  border-color: var(--green-line);
}

.hub-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  padding-top: 28px;
  padding-bottom: 40px;
  color: var(--muted);
}

.hub-footer a {
  color: var(--green);
  font-weight: 700;
  text-decoration: none;
}

.hub-footer a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

@media (max-width: 820px) {
  .hub-nav ul {
    display: none;
  }

  .features {
    grid-template-columns: 1fr 1fr;
  }

  .feature {
    min-height: 0;
  }

  .hub-hero {
    grid-template-columns: 1fr;
  }

  .fan {
    height: 108vw;
  }
}

/* Pricing: one-off setup on the left, yearly maintenance and options on the right. */
.pricing {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 16px;
  margin-top: 32px;
  align-items: start;
}

.plan {
  background: var(--white);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(22px, 3vw, 34px);
}

.plan.main {
  border: 2px solid var(--green);
}

.plan .tag {
  font-weight: 700;
  font-size: 15px;
  color: var(--accent-ink);
}

.price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-top: 4px;
}

.price b {
  font-size: clamp(56px, 7vw, 84px);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1;
  color: var(--green);
}

.plan:not(.main) .price b {
  font-size: clamp(40px, 4.5vw, 52px);
}

.price span {
  font-weight: 600;
  color: var(--muted);
}

.plan .hl {
  margin-top: 10px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.incl {
  display: grid;
  gap: 12px;
  margin-top: 22px;
}

.incl li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  line-height: 1.45;
}

.incl li::before {
  content: "";
  width: 22px;
  height: 22px;
  border-radius: 50%;
  translate: 0 1px;
  background: var(--accent)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f5c3f' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")
    center / 13px no-repeat;
}

.incl small {
  display: block;
  color: var(--muted);
  font-size: 15px;
}

.compare {
  margin-top: 18px;
  padding: 12px 16px;
  border-radius: 14px;
  background: var(--green-soft);
  color: var(--green);
  font-weight: 600;
  line-height: 1.4;
}

.plan .ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-top: 24px;
}

.plan .note {
  color: var(--muted);
  font-size: 15px;
}

.plans-side {
  display: grid;
  gap: 16px;
}

.plan h3 {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--green);
}

.plan p {
  margin-top: 8px;
  color: var(--muted);
  line-height: 1.5;
}

.plan p b {
  color: var(--ink);
}

.plan .compare {
  color: var(--green);
}

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

/* On a phone the demo is the best preview, so only "Ver web" makes sense. */
@media (max-width: 560px) {
  .card-actions .btn-b {
    display: none;
  }

  .features {
    grid-template-columns: 1fr;
  }

  .feature:first-child,
  .feature:last-child {
    grid-column: auto;
  }
}

/* ── Phone preview ───────────────────────────────────────────────── */
.preview {
  min-height: 100vh;
  background: #18181b;
  color: #fff;
  display: grid;
  grid-template-rows: auto 1fr;
}

.pv-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
}

.pv-bar a {
  color: #fff;
}

.pv-title {
  font-weight: 800;
  font-size: 18px;
}

.pv-seg {
  display: flex;
  background: #27272a;
  border-radius: 12px;
  padding: 4px;
}

.pv-seg button {
  border: 0;
  background: transparent;
  color: #d4d4d8;
  font:
    600 14px "Bricolage Grotesque",
    sans-serif;
  padding: 8px 14px;
  border-radius: 9px;
  cursor: pointer;
}

.pv-seg button[aria-pressed="true"] {
  background: #fff;
  color: #18181b;
}

.pv-stage {
  display: grid;
  place-items: center;
  padding: 8px 0 28px;
}

.pv-phone {
  padding: 12px;
  border-radius: 54px;
  background: #0b0b0d;
  box-shadow:
    inset 0 0 0 2px #2b2b30,
    0 40px 80px -30px rgba(0, 0, 0, 0.8);
}

.pv-screen {
  position: relative;
  overflow: hidden;
  border-radius: 42px;
  background: #fff;
}

.pv-screen iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 390px;
  height: 844px;
  border: 0;
  transform-origin: 0 0;
}