:root {
  color-scheme: light;
  --background: #f5f6fa;
  --foreground: #111318;
  --primary: #056cf2;
  --secondary: #001b43;
  font-family: "Montserrat", "Segoe UI", Arial, sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { background: var(--background); }
body { margin: 0; color: var(--foreground); }
a { color: inherit; }
::selection { background: #056cf2; color: white; }

.page-shell {
  min-height: 100svh;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  overflow: clip;
  background: linear-gradient(120deg, #fff 0%, #fff 47%, #f5f6fa 47.1%, #f5f6fa 100%);
}

.page-shell::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 0 0 auto;
  width: 30%;
  opacity: .32;
  background-image: repeating-linear-gradient(90deg, #001b430b 0 1px, transparent 1px 5px), repeating-linear-gradient(0deg, #001b430b 0 1px, transparent 1px 5px);
  mask-image: linear-gradient(90deg, transparent, black);
  pointer-events: none;
}

.main-content, .header-inner, .site-footer span {
  width: min(calc(100% - 5rem), 62rem);
  margin-inline: auto;
}

.site-header {
  width: 100%;
  padding-block: 1.4rem;
  border-bottom: 3px solid var(--primary);
  background: #0d1016;
}

.header-inner { display: flex; align-items: center; }
.brand { display: block; outline-offset: 6px; }
.brand img { display: block; width: 200px; height: auto; }

.main-content {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
  gap: 4rem;
  flex: 1;
  padding-block: 5rem 6rem;
}

.intro { padding-bottom: .5rem; }
.intro::before { content: ""; display: block; width: 2.5rem; height: 4px; background: var(--primary); margin-bottom: 1.7rem; }
h1 { margin: 0; font-size: clamp(2.5rem, 4.4vw, 3.4rem); font-weight: 750; line-height: 1.09; letter-spacing: -.055em; }
.lead { max-width: 28rem; margin: 1.5rem 0 0; font-size: 1.15rem; line-height: 1.65; color: #59616d; text-wrap: pretty; }
.actions { display: grid; gap: 1rem; }

.action-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding: 1.65rem 1.5rem;
  border-radius: 1rem;
  min-height: 7.75rem;
  text-decoration: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform 220ms ease, box-shadow 220ms ease, background-color 220ms ease, filter 180ms ease;
  animation: arrive 550ms cubic-bezier(.2,.7,.2,1) backwards;
}

.action-whatsapp { background: var(--primary); color: #fff; border: 1px solid var(--primary); box-shadow: 0 12px 30px #056cf220; }
.action-site { color: #fff; background: linear-gradient(135deg, #001b43 0%, #022873 100%); border: 1px solid #123d78; box-shadow: 0 12px 28px #001b431c; animation-delay: 90ms; }
.action-icon { display: flex; align-items: center; justify-content: center; }
.action-icon svg { width: 1.85rem; height: 1.85rem; stroke-linecap: round; stroke-linejoin: round; }
.action-site .action-icon svg { stroke-width: 1.7; }
.action-copy { display: grid; gap: .5rem; }
.action-copy strong { font-size: 1.1rem; font-weight: 650; letter-spacing: -.02em; line-height: 1.3; }
.action-copy small { font-size: .875rem; line-height: 1.55; }
.action-whatsapp .action-copy small { color: #fff; }
.action-site .action-copy small { color: #d8e4f4; }
.arrow { width: 1.2rem; height: 1.2rem; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform 220ms ease; }

.site-footer { width: 100%; padding-block: 1.35rem; background: #0d1016; color: #b8c0cc; font-size: .8125rem; line-height: 1.6; }
.site-footer span { display: block; }
.action-card:focus-visible, .brand:focus-visible { outline: 3px solid #001b43; outline-offset: 5px; }

@media (hover: hover) {
  .action-card:hover { transform: translateY(-3px); }
  .action-whatsapp:hover { background: #005cdb; box-shadow: 0 14px 32px #056cf22b; }
  .action-site:hover { background: linear-gradient(135deg, #001633 0%, #032f87 100%); box-shadow: 0 14px 32px #001b4326; }
  .action-card:hover .arrow { transform: translate(2px,-2px); }
}

.action-card:active { transform: scale(.975); filter: brightness(.93); }
@keyframes arrive { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }

@media (max-width: 900px) {
  .main-content { gap: 2rem; }
  h1 { font-size: 2.55rem; }
  .action-card { padding: 1.4rem 1.1rem; gap: .8rem; }
}

@media (max-width: 740px) {
  .page-shell { background: linear-gradient(155deg, #fff 0 48%, #f5f6fa 48.1% 100%); }
  .page-shell::before { width: 55%; }
  .header-inner, .main-content, .site-footer span { width: min(calc(100% - 3rem), 29rem); }
  .site-header { padding-block: 1.15rem; }
  .brand img { width: 165px; }
  .main-content { display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 2.2rem; padding-block: 2.8rem 3rem; }
  .intro { padding: 0; }
  .intro::before { margin-bottom: 1.15rem; width: 2rem; height: 3px; }
  h1 { font-size: clamp(2rem, 8.8vw, 2.75rem); letter-spacing: -.05em; }
  .lead { font-size: 1rem; line-height: 1.6; max-width: 21rem; margin-top: 1rem; }
  .actions { gap: .85rem; }
  .action-card { min-height: 6.5rem; padding: 1.25rem 1.1rem; gap: .8rem; border-radius: .85rem; }
  .action-copy strong { font-size: 1.0625rem; }
  .action-icon svg { width: 1.7rem; height: 1.7rem; }
  .site-footer { font-size: .75rem; padding-block: 1.15rem; }
}

@media (max-width: 360px) {
  .header-inner, .main-content, .site-footer span { width: calc(100% - 2rem); }
  .main-content { padding-block: 2rem; gap: 1.75rem; }
  .action-card { gap: .6rem; padding-inline: .9rem; }
  .arrow { width: 1rem; }
  .action-copy strong { font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}