:root {
  --ink: #172d35;
  --muted: #5c7074;
  --teal: #116b6b;
  --teal-dark: #0b5052;
  --canvas: #f7f5ef;
  --line: #dce5e1;
  --peach: #f8dfc7;
}

html { scroll-behavior: smooth; }
body { color: var(--ink); }
*:focus-visible { outline: 3px solid #e29b5f; outline-offset: 3px; }
.skip-link { position: absolute; left: 1rem; top: -5rem; z-index: 100; padding: .75rem 1rem; background: #fff; color: var(--teal-dark); border-radius: .75rem; }
.skip-link:focus { top: 1rem; }
.site-canvas { background: var(--canvas); }
.site-nav { background: rgba(247, 245, 239, .96); border-bottom: 1px solid var(--line); backdrop-filter: blur(16px); }
.brand-mark { display: inline-flex; align-items: center; gap: .65rem; color: var(--ink); font-weight: 800; letter-spacing: -.055em; }
.brand-mark::before { content: ''; display: block; width: 1.75rem; height: 1.75rem; border: .5rem solid var(--teal); border-radius: .65rem .65rem .65rem .2rem; transform: rotate(-12deg); }
.eyebrow { color: var(--teal); font-size: .76rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.display-title { color: var(--ink); font-weight: 800; letter-spacing: -.065em; line-height: 1.05; }
.body-lead { color: var(--muted); line-height: 1.7; }
.action-primary { display: inline-flex; justify-content: center; align-items: center; gap: .6rem; min-height: 3rem; padding: .75rem 1.4rem; background: var(--teal); color: #fff; border-radius: .85rem; font-weight: 700; transition: background .2s, transform .2s; }
.action-primary:hover { background: var(--teal-dark); transform: translateY(-2px); }
.action-secondary { display: inline-flex; justify-content: center; align-items: center; gap: .5rem; min-height: 3rem; padding: .75rem 1.4rem; background: #fff; color: var(--ink); border: 1px solid #cbd9d3; border-radius: .85rem; font-weight: 700; transition: border-color .2s, transform .2s; }
.action-secondary:hover { border-color: var(--teal); transform: translateY(-2px); }
.surface-card { background: #fff; border: 1px solid var(--line); border-radius: 1.4rem; box-shadow: 0 16px 45px rgba(25, 52, 54, .055); }
.marketing-hero { position: relative; overflow: hidden; border-radius: 2rem; background: radial-gradient(circle at 86% 15%, #e3eee8 0, transparent 38%), linear-gradient(135deg, #fffdf9 0%, #f1f3e8 100%); border: 1px solid var(--line); }
.marketing-hero::after { content: ''; position: absolute; width: 15rem; height: 15rem; right: -6rem; bottom: -8rem; border-radius: 50%; background: var(--peach); opacity: .65; }
.preview-shell { background: #fff; border: 1px solid #d4e1dd; border-radius: 1.3rem; box-shadow: 0 30px 70px rgba(17, 74, 71, .14); }
.preview-bar { background: #f5f8f5; border-bottom: 1px solid var(--line); }
.preview-line { height: .65rem; border-radius: 999px; background: #e2ebe7; }
.preview-line.short { width: 55%; }
.preview-slot { border: 1px solid #cbdcd4; border-radius: .55rem; padding: .45rem .65rem; text-align: center; font-size: .85rem; }
.preview-slot.selected { background: var(--teal); color: white; border-color: var(--teal); }
.product-preview { max-width: 100%; }
.product-preview-label { display: block; margin-bottom: .35rem; color: #4b5563; font-size: .7rem; font-weight: 700; }
.product-preview-label small { color: #6b7280; font-size: .65rem; font-weight: 400; }
.product-preview-field { display: flex; min-height: 2.5rem; align-items: center; justify-content: space-between; gap: .4rem; padding: .55rem .7rem; border: 1px solid #cbd9d3; border-radius: .7rem; background: #fcfdfa; color: #374151; font-size: .76rem; line-height: 1.3; }
.section-head { max-width: 42rem; }
.section-head h2 { font-size: clamp(2rem, 3.4vw, 3.25rem); font-weight: 800; letter-spacing: -.055em; line-height: 1.13; }
.benefit-number { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: .85rem; background: #e4f0e9; color: var(--teal-dark); font-weight: 800; }
.booking-page { background: radial-gradient(circle at top right, #e8f1e9, transparent 35%), var(--canvas); }
.booking-step { display: flex; align-items: center; gap: .7rem; margin-bottom: 1.25rem; }
.booking-step-number { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 2rem; height: 2rem; border-radius: 50%; background: var(--teal); color: #fff; font-size: .85rem; font-weight: 800; }
.booking-step-title { color: var(--ink); font-size: 1.15rem; font-weight: 800; }
.booking-panel { background: #fff; border: 1px solid var(--line); border-radius: 1.35rem; padding: 1.25rem; }
.booking-field { background: #fcfdfa !important; border-color: #cbd9d3 !important; min-height: 3.2rem; }
.booking-field:focus { border-color: var(--teal) !important; box-shadow: 0 0 0 3px rgba(17, 107, 107, .14); }
.dashboard-canvas { background: #f5f7f4; }
.dashboard-sidebar { background: #fff; border-right: 1px solid var(--line); }
.dashboard-overlay[hidden] { display: none !important; }
@media (max-width: 1023px) {
  .dashboard-sidebar { transform: translateX(-100%); }
  .dashboard-sidebar.is-open { transform: translateX(0); }
}
.dashboard-sidebar nav a { min-height: 2.7rem; }
.dashboard-sidebar nav a:hover { background: #edf4ef; }
.dashboard-stat { border: 1px solid var(--line); border-radius: 1.2rem; box-shadow: 0 8px 24px rgba(25, 52, 54, .04); }
.dashboard-stat h3 { letter-spacing: -.05em; }
@media (max-width: 640px) {
  .marketing-hero { border-radius: 1.25rem; }
  .booking-panel { padding: 1rem; }
  .dashboard-sidebar { padding-bottom: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .action-primary, .action-secondary { transition: none; }
  .action-primary:hover, .action-secondary:hover { transform: none; }
}
.contact-whatsapp { background: #1f8f4e; }
.contact-whatsapp:hover { background: #17723e; }
.whatsapp-float { position: fixed; right: 1rem; bottom: 1rem; z-index: 60; display: inline-flex; align-items: center; gap: .5rem; padding: .8rem 1.1rem; border-radius: 999px; background: #1f8f4e; color: #fff; font-weight: 700; box-shadow: 0 12px 30px rgba(20, 70, 45, .3); transition: background .2s, transform .2s; }
.whatsapp-float:hover { background: #17723e; transform: translateY(-2px); }
@media (max-width: 640px) { .whatsapp-float span { display: none; } .whatsapp-float { padding: .9rem; } }
@media (prefers-reduced-motion: reduce) { .whatsapp-float, .whatsapp-float:hover { transition: none; transform: none; } }
.faq-item summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem; font-weight: 700; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; color: var(--teal); font-size: 1.25rem; line-height: 1; }
.faq-item[open] summary::after { content: '−'; }
.cookie-consent { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 70; display: flex; flex-direction: column; gap: 1rem; max-width: 56rem; margin: 0 auto; padding: 1.25rem; background: #fff; border: 1px solid var(--line); border-radius: 1.25rem; box-shadow: 0 20px 50px rgba(25, 52, 54, .18); }
.cookie-consent[hidden] { display: none; }
@media (min-width: 768px) { .cookie-consent { flex-direction: row; align-items: center; justify-content: space-between; } }
.billing-toggle { display: inline-flex; gap: .25rem; padding: .3rem; background: #fff; border: 1px solid var(--line); border-radius: 999px; }
.billing-toggle button { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.6rem; padding: .5rem 1.15rem; border-radius: 999px; font-weight: 700; color: var(--muted); }
.billing-toggle button[aria-pressed="true"] { background: var(--teal); color: #fff; }
.billing-badge { padding: .1rem .5rem; border-radius: 999px; background: var(--peach); color: #7a3d12; font-size: .72rem; font-weight: 800; }
.compare-wrap { overflow-x: auto; }
.compare-table { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: .9rem; }
.compare-table th, .compare-table td { padding: .9rem 1rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.compare-table tbody tr:last-child th, .compare-table tbody tr:last-child td { border-bottom: 0; }
.compare-table thead th { font-size: .8rem; font-weight: 800; color: var(--muted); }
.compare-table tbody th { font-weight: 700; color: var(--ink); }
.compare-table .compare-us { color: var(--teal); }
.compare-table td:last-child { background: #f1f7f4; }
.compare-yes { color: var(--teal-dark); font-weight: 700; }
.compare-no { color: #9a5b5b; }
.compare-maybe { color: var(--muted); }