/* ===== Jet Ski Tabarca — design tokens (paleta lowcostjetski.com) ===== */
:root {
  --color-primary: #FF5E36;
  --color-primary-dark: #E04B26;
  --color-accent: #FFCE00;
  --color-ink: #4A154B;
  --color-dark-gray: #333333;
  --color-mid-gray: #666666;
  --color-surface: #F5F5F5;
  --color-white: #FFFFFF;
  --color-text: var(--color-ink);
  --color-text-muted: var(--color-mid-gray);
  --color-border: #E0E0E0;
  --font-display: 'Space Grotesk', 'Arial Narrow', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --radius: 16px;
  --shadow-primary: 0 12px 28px rgba(255, 94, 54, 0.32);
  --shadow-lg: 0 20px 45px rgba(0,0,0,0.16);
  --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-6: 1.5rem;
  --space-8: 2rem; --space-12: 3rem; --space-16: 4rem;
  --header-height: 78px;
}
@font-face { font-family:'Inter'; src:url('inter-variable.woff2') format('woff2'); font-weight:300 800; font-display:swap; }
@font-face { font-family:'Space Grotesk'; src:url('space-grotesk-variable.woff2') format('woff2'); font-weight:400 700; font-display:swap; }

* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body { font-family:var(--font-body); color:var(--color-text); background:var(--color-white); line-height:1.6; -webkit-font-smoothing:antialiased; }
body:not(.has-hero) { padding-top: var(--header-height); }
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
h1,h2,h3,h4 { font-family:var(--font-display); line-height:1.15; color:var(--color-ink); }
h1 { font-size:clamp(2.2rem, 5vw, 3.4rem); }
h2 { font-size:clamp(1.7rem, 3.4vw, 2.4rem); margin-bottom:var(--space-4); }
h3 { font-size:1.25rem; margin-bottom:var(--space-2); }
p { margin-bottom:var(--space-4); color:var(--color-text); }
.container { max-width:1180px; margin-inline:auto; padding-inline:var(--space-6); }
.section { padding-block:var(--space-16); }
.u-text-center { text-align:center; }
.section-heading { max-width:60ch; margin-inline:auto; text-align:center; margin-bottom:var(--space-12); }
.section-heading p { color:var(--color-text-muted); font-size:1.1rem; }
.section--surface { background:var(--color-surface); }

/* Buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:0.5rem; padding:0.85rem 1.8rem; border-radius:999px; font-family:var(--font-display); font-weight:700; font-size:1rem; border:2px solid transparent; cursor:pointer; transition:all .2s ease; }
.btn--primary { background:var(--color-primary); color:var(--color-white); box-shadow:var(--shadow-primary); }
.btn--primary:hover { background:var(--color-primary-dark); }
.btn--secondary { background:var(--color-white); color:var(--color-primary); border-color:var(--color-primary); }
.btn--secondary:hover { background:var(--color-surface); }
.btn--on-dark { background:rgba(255,255,255,0.12); color:var(--color-white); border-color:rgba(255,255,255,0.5); backdrop-filter:blur(4px); }
.btn--on-dark:hover { background:rgba(255,255,255,0.22); }
.btn--lg { padding:1.1rem 2.3rem; font-size:1.05rem; }
.btn-group { display:flex; gap:1rem; flex-wrap:wrap; }

/* Header */
.site-header { position:fixed; inset-inline:0; top:0; z-index:100; height:var(--header-height); background:rgba(30,30,30,0.92); backdrop-filter:blur(8px); }
.site-header .container { height:100%; display:flex; align-items:center; justify-content:space-between; gap:var(--space-6); }
.brand { display:flex; align-items:center; gap:0.6rem; color:var(--color-white); }
.brand img { height:46px; width:auto; }
.brand strong { font-family:var(--font-display); font-size:1.15rem; }
.site-nav { display:flex; gap:var(--space-6); }
.site-nav a { color:rgba(255,255,255,0.85); font-weight:500; }
.site-nav a:hover { color:var(--color-white); }
.header-cta { white-space:nowrap; }
@media (max-width: 860px) { .site-nav { display:none; } }

/* Hero */
.hero { position:relative; min-height:100svh; display:flex; align-items:flex-end; color:var(--color-white); overflow:hidden; }
.hero__bg { position:absolute; inset:0; background-size:cover; background-position:center; }
.hero__bg::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,20,20,0.35) 0%, rgba(20,20,20,0.55) 55%, rgba(20,20,20,0.85) 100%); }
.hero__content { position:relative; z-index:2; padding-block:calc(var(--header-height) + var(--space-8)) var(--space-12); width:100%; }
.hero__eyebrow { display:inline-block; background:var(--color-primary); color:var(--color-white); font-family:var(--font-display); font-size:0.8rem; letter-spacing:0.08em; text-transform:uppercase; padding:0.4rem 1rem; border-radius:999px; margin-bottom:var(--space-4); }
.hero h1 { color:var(--color-white); max-width:20ch; }
.hero p.lede { color:rgba(255,255,255,0.9); max-width:56ch; font-size:1.15rem; margin-top:var(--space-4); }
.hero .btn-group { margin-top:var(--space-8); }
.quickfacts { display:flex; flex-wrap:wrap; gap:var(--space-3); margin-top:var(--space-6); }
.quickfacts span { background:rgba(255,255,255,0.14); border:1px solid rgba(255,255,255,0.35); color:var(--color-white); font-size:0.9rem; padding:0.5rem 1rem; border-radius:999px; }

/* Ticket / price card */
.ticket-card { background:var(--color-white); border:1px solid var(--color-border); border-radius:var(--radius); box-shadow:var(--shadow-lg); overflow:hidden; max-width:520px; margin-inline:auto; }
.ticket-card__body { padding:var(--space-8); }
.ticket-card__name { font-size:1.4rem; }
.ticket-card__price { font-family:var(--font-display); font-size:2.6rem; color:var(--color-primary); margin:var(--space-2) 0; }
.ticket-card__price small { font-family:var(--font-body); font-size:1rem; color:var(--color-text-muted); font-weight:400; }
.ticket-card__includes { list-style:none; margin:var(--space-4) 0; display:flex; flex-direction:column; gap:0.5rem; }
.ticket-card__includes li { padding-left:1.6rem; position:relative; font-size:0.95rem; }
.ticket-card__includes li::before { content:"✓"; position:absolute; left:0; color:var(--color-primary); font-weight:700; }
.booking-widget-wrapper { margin-top:var(--space-6); }

/* Feature grid */
.feature-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:var(--space-6); }
.feature-card { background:var(--color-white); border:1px solid var(--color-border); border-radius:var(--radius); padding:var(--space-6); }
.feature-card__icon { width:52px; height:52px; border-radius:50%; background:rgba(255,94,54,0.12); display:flex; align-items:center; justify-content:center; margin-bottom:var(--space-3); color:var(--color-primary); }

/* Two column content */
.split { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-12); align-items:center; }
.split img { border-radius:var(--radius); box-shadow:var(--shadow-lg); }
@media (max-width: 860px) { .split { grid-template-columns:1fr; } }

/* FAQ */
.faq-item { border-bottom:1px solid var(--color-border); padding-block:var(--space-4); }
.faq-item__q { display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-family:var(--font-display); font-weight:600; gap:var(--space-4); }
.faq-item__a { max-height:0; overflow:hidden; transition:max-height .25s ease; color:var(--color-text-muted); }
.faq-item[data-open="true"] .faq-item__a { max-height:400px; padding-top:var(--space-3); }
.faq-item[data-open="true"] .faq-item__q .chev { transform:rotate(180deg); }
.chev { transition:transform .2s ease; }

/* Reviews */
.review-card { background:var(--color-white); border:1px solid var(--color-border); border-radius:var(--radius); padding:var(--space-6); }
.review-card__stars { color:var(--color-accent); font-size:1.1rem; margin-bottom:var(--space-2); }

/* Footer */
.site-footer { background:var(--color-ink); color:rgba(255,255,255,0.75); padding-block:var(--space-16) var(--space-8); }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:var(--space-8); margin-bottom:var(--space-8); }
.footer-grid h4 { color:var(--color-white); font-size:1rem; margin-bottom:var(--space-3); }
.footer-grid ul { list-style:none; display:flex; flex-direction:column; gap:0.5rem; }
.footer-grid a:hover { color:var(--color-white); }
.footer-legal { border-top:1px solid rgba(255,255,255,0.15); padding-top:var(--space-6); font-size:0.85rem; text-align:center; }
@media (max-width: 860px) { .footer-grid { grid-template-columns:1fr 1fr; } }

/* FAB buttons */
.whatsapp-fab { position:fixed; bottom:var(--space-6); right:var(--space-6); z-index:150; background:#25D366; color:var(--color-white); width:58px; height:58px; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-lg); }
.booking-fab { position:fixed; bottom:var(--space-6); left:var(--space-6); z-index:150; background:var(--color-primary); color:var(--color-white); height:48px; padding-inline:1.2rem; border-radius:999px; display:inline-flex; align-items:center; font-family:var(--font-display); font-weight:700; font-size:0.9rem; box-shadow:var(--shadow-lg); }

/* Page hero (non-home pages) */
.page-hero { background:var(--color-ink); color:var(--color-white); padding-block:var(--space-16) var(--space-12); text-align:center; }
.page-hero h1 { color:var(--color-white); }
.page-hero p { color:rgba(255,255,255,0.85); max-width:55ch; margin-inline:auto; }

.legal-content h2 { margin-top:var(--space-8); }
.legal-content p, .legal-content li { color:var(--color-text-muted); }