/* ============================================================
   Las Pirámides Resort — Website (Phase 1)
   Built from the "Las Pirámides Design System" (read-only source of truth).
   Gold #AE732A (pyramids) · Blue #0071AB (water) · parchment surface ·
   Cinzel display · Cabin body · Cormorant Garamond leads · Lucide icons.
   Spanish-first · mobile-first · no build step.
   ============================================================ */

/* ============================================================
   1. TOKENS  (mirrored from the design system /tokens)
   ============================================================ */
:root {
  /* Inca Gold — the pyramids (primary) */
  --gold-50:#F8EFDD; --gold-100:#F0DCBB; --gold-200:#E3C28C; --gold-300:#D4A75E;
  --gold-400:#C28F3F; --gold-500:#AE732A; --gold-600:#946023; --gold-700:#774C1C;
  --gold-800:#573817; --gold-900:#3C2710;
  /* Intel Blue — the water (secondary) */
  --blue-50:#E2F0F8; --blue-100:#BBDCEE; --blue-200:#82C0E0; --blue-300:#41A1D1;
  --blue-400:#1587BF; --blue-500:#0071AB; --blue-600:#005E8F; --blue-700:#004B73;
  --blue-800:#003957; --blue-900:#00283E;
  /* Parchment / papyrus surfaces */
  --parchment-0:#FFFFFF; --parchment-50:#FAF6EE; --parchment-100:#F4EDE0;
  --parchment-200:#EFE8DC; --parchment-300:#E4DAC6; --parchment-400:#D6C8AD;
  --parchment-500:#C3B189;
  /* Warm ink — text */
  --ink-300:#9C9079; --ink-400:#7A6F5A; --ink-500:#5E5440; --ink-600:#463E2E;
  --ink-700:#342E22; --ink-800:#2A2419; --ink-900:#1C1810;
  /* Status — warm/earthen */
  --oasis-100:#D7EADF; --oasis-500:#2E7D5B; --oasis-700:#1E5A40;
  --sun-100:#FBEAC4; --sun-500:#E0A12B; --sun-700:#9C6D14;
  --clay-100:#F3D9CF; --clay-500:#B5462E; --clay-700:#802C1A;

  /* Semantic */
  --color-primary:var(--gold-500); --color-primary-hover:var(--gold-600); --color-primary-active:var(--gold-700);
  --color-secondary:var(--blue-500); --color-secondary-hover:var(--blue-600); --color-secondary-active:var(--blue-700);
  --surface-page:var(--parchment-200); --surface-raised:var(--parchment-50);
  --surface-card:var(--parchment-0); --surface-sunken:var(--parchment-100); --surface-inverse:var(--ink-800);
  --text-strong:var(--ink-900); --text-body:var(--ink-700); --text-muted:var(--ink-400);
  --text-on-gold:var(--parchment-50); --text-on-blue:var(--parchment-0); --text-on-dark:var(--parchment-100);
  --text-link:var(--blue-600); --text-brand:var(--gold-600);
  --border-subtle:var(--parchment-300); --border-default:var(--parchment-400);
  --border-strong:var(--gold-300); --border-focus:var(--blue-400);
  --color-success:var(--oasis-500); --color-warning:var(--sun-500); --color-danger:var(--clay-500);

  /* Type */
  --font-display:'Cinzel','Trajan Pro','Times New Roman',serif;
  --font-serif:'Cormorant Garamond','Iowan Old Style',Georgia,serif;
  --font-sans:'Cabin','Skia','Avenir Next',system-ui,-apple-system,'Segoe UI',sans-serif;
  --text-xs:.75rem; --text-sm:.875rem; --text-base:1rem; --text-md:1.125rem; --text-lg:1.25rem;
  --text-xl:1.5rem; --text-2xl:1.875rem; --text-3xl:2.25rem; --text-4xl:3rem; --text-5xl:3.75rem; --text-6xl:4.75rem;
  --weight-regular:400; --weight-medium:500; --weight-semibold:600; --weight-bold:700; --weight-display:700;
  --leading-tight:1.08; --leading-snug:1.25; --leading-normal:1.55; --leading-relaxed:1.7;
  --tracking-wide:.04em; --tracking-wider:.12em; --tracking-widest:.22em;

  /* Spacing / layout */
  --container-xl:1320px; --container-lg:1100px; --container-md:840px;
  --radius-sm:8px; --radius-md:12px; --radius-lg:18px; --radius-xl:26px; --radius-2xl:36px; --radius-pill:999px; --radius-round:50%;
  --shadow-xs:0 1px 2px rgba(60,39,16,.08); --shadow-sm:0 2px 6px rgba(60,39,16,.10);
  --shadow-md:0 6px 16px rgba(60,39,16,.12); --shadow-lg:0 14px 32px rgba(60,39,16,.16);
  --shadow-xl:0 24px 60px rgba(60,39,16,.20);
  --shadow-gold:0 10px 28px rgba(174,115,42,.30); --shadow-blue:0 10px 28px rgba(0,113,171,.28);
  --ring-focus:0 0 0 3px rgba(0,113,171,.35);
  --ease-out:cubic-bezier(.22,1,.36,1); --ease-bounce:cubic-bezier(.34,1.56,.64,1);
  --dur-fast:140ms; --dur-base:220ms;
}

/* ============================================================
   2. BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:var(--font-sans); font-size:var(--text-base);
  line-height:var(--leading-normal); color:var(--text-body);
  background-color:var(--surface-page);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{font-family:var(--font-display); color:var(--text-strong); line-height:var(--leading-tight); font-weight:var(--weight-display); margin:0 0 var(--space-4,1rem)}
img{max-width:100%; display:block}
a{color:var(--text-link); text-decoration-thickness:1px; text-underline-offset:2px}
:focus-visible{outline:none; box-shadow:var(--ring-focus); border-radius:var(--radius-sm)}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0}

/* Surfaces & utilities */
.lp-papyrus{background-color:var(--parchment-200); background-image:url('../assets/brand/parchment-texture.jpg'); background-size:720px; background-blend-mode:multiply}
.surface-card{background:var(--surface-card)}
.surface-sunken{background:var(--surface-sunken)}
.eyebrow{font-family:var(--font-sans); font-size:var(--text-sm); font-weight:var(--weight-bold); letter-spacing:var(--tracking-wider); text-transform:uppercase; color:var(--text-brand); margin:0 0 12px}
.eyebrow--on-dark{color:var(--gold-300)}
.lead{font-family:var(--font-serif); font-style:italic; font-size:var(--text-xl); line-height:1.4; color:var(--ink-600)}

/* Layout */
.container{width:100%; max-width:var(--container-xl); margin:0 auto; padding-inline:20px}
.container--narrow{max-width:var(--container-md)}
.container--mid{max-width:var(--container-lg)}
.section{padding-block:clamp(48px,8vw,84px)}
.section--tight{padding-block:clamp(36px,6vw,56px)}
.section-head{max-width:680px; margin-bottom:32px}
.section-head h2{font-size:clamp(var(--text-2xl),5vw,var(--text-4xl)); text-transform:uppercase; letter-spacing:var(--tracking-wide)}
.section-head p{font-size:var(--text-md); color:var(--text-body); margin:8px 0 0}
.text-center{text-align:center}
.text-center.section-head{margin-inline:auto}

/* warm photo grade (design system: saturate 1.08 · contrast 1.03 · brightness 1.02) */
.img-graded{filter:saturate(1.08) contrast(1.03) brightness(1.02)}

/* ============================================================
   3. BUTTONS
   ============================================================ */
.btn{
  --btn-bg:var(--gold-500); --btn-fg:var(--text-on-gold); --btn-bd:transparent;
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--font-sans); font-weight:var(--weight-bold); font-size:var(--text-base);
  line-height:1; text-decoration:none; cursor:pointer; white-space:nowrap;
  padding:14px 22px; border-radius:var(--radius-pill);
  background:var(--btn-bg); color:var(--btn-fg); border:1.5px solid var(--btn-bd);
  transition:transform var(--dur-fast) var(--ease-out), background var(--dur-fast), box-shadow var(--dur-base);
}
.btn:hover{transform:translateY(-1px); filter:brightness(1.06)}
.btn:active{transform:translateY(1px) scale(.98)}
.btn .lucide{width:19px;height:19px}
.btn--primary{--btn-bg:var(--gold-500); --btn-fg:var(--text-on-gold); box-shadow:var(--shadow-gold)}
.btn--primary:hover{--btn-bg:var(--gold-600)}
.btn--secondary{--btn-bg:var(--blue-500); --btn-fg:var(--text-on-blue); box-shadow:var(--shadow-blue)}
.btn--secondary:hover{--btn-bg:var(--blue-600)}
.btn--outline{--btn-bg:transparent; --btn-fg:var(--gold-700); --btn-bd:var(--gold-400)}
.btn--outline:hover{--btn-bg:var(--gold-50); filter:none}
.btn--ghost{--btn-bg:transparent; --btn-fg:var(--gold-700); --btn-bd:transparent; padding-inline:12px}
.btn--ghost:hover{--btn-bg:var(--gold-50); filter:none}
.btn--on-dark{--btn-fg:var(--ink-900)}
.btn--whatsapp{--btn-bg:var(--gold-500); --btn-fg:var(--text-on-gold); box-shadow:var(--shadow-gold)}
.btn--whatsapp:hover{--btn-bg:var(--gold-600)}
.btn--lg{font-size:var(--text-md); padding:16px 28px}
.btn--sm{font-size:var(--text-sm); padding:10px 16px}
.btn--block{display:flex; width:100%}

/* ============================================================
   4. HEADER / NAV
   ============================================================ */
.site-header{position:sticky; top:0; z-index:100; background:rgba(250,246,238,.88); backdrop-filter:blur(10px); border-bottom:1px solid var(--border-subtle)}
.site-header__inner{display:flex; align-items:center; gap:18px; padding:12px 20px; max-width:var(--container-xl); margin:0 auto}
.site-header__logo{display:inline-flex; align-items:center; flex:none}
.site-header__logo img{height:46px; width:auto}
.site-nav{display:flex; align-items:center; gap:2px; margin-left:6px; flex-wrap:wrap}
.site-nav a{font-family:var(--font-sans); font-size:14.5px; font-weight:var(--weight-semibold); text-decoration:none; color:var(--ink-500); padding:8px 12px; border-radius:var(--radius-pill); transition:color var(--dur-fast), background var(--dur-fast)}
.site-nav a:hover{color:var(--gold-700); background:var(--gold-50)}
.site-nav a.is-active{color:var(--gold-700)}
.site-nav .nav-extra{display:none} /* secondary links: mobile menu only */
.site-header__cta{margin-left:auto; display:flex; align-items:center; gap:10px}
.nav-toggle{display:none; margin-left:auto; background:transparent; border:1.5px solid var(--border-default); border-radius:var(--radius-pill); padding:9px 11px; cursor:pointer; color:var(--ink-700)}
.nav-toggle .lucide{width:22px;height:22px; display:block}

/* ============================================================
   5. HERO
   ============================================================ */
.hero{position:relative; overflow:hidden}
.hero__grid{display:grid; grid-template-columns:1.05fr 1fr; gap:44px; align-items:center; padding-block:clamp(40px,6vw,72px)}
.hero__eyebrow{margin-bottom:14px}
.hero h1{font-size:clamp(2.6rem,7vw,4.2rem); text-transform:uppercase; letter-spacing:.02em; line-height:1.02; color:var(--gold-700); margin:0}
.hero__lead{max-width:460px; margin:20px 0 28px}
.hero__actions{display:flex; gap:14px; flex-wrap:wrap}
.hero__stats{display:flex; gap:28px; margin-top:34px; flex-wrap:wrap}
.hero__stat .n{font-family:var(--font-display); font-weight:700; font-size:var(--text-2xl); color:var(--blue-600)}
.hero__stat .l{font-family:var(--font-sans); font-size:12.5px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.08em}
.hero__media{position:relative; border-radius:var(--radius-2xl); overflow:hidden; box-shadow:var(--shadow-lg); aspect-ratio:5/4}
.hero__media img{width:100%; height:100%; object-fit:cover}
.hero__media::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(60,39,16,.12)),rgba(174,115,42,.10); mix-blend-mode:multiply}

/* media as full-bleed banner (interior page heroes) */
.pagehero{position:relative; min-height:clamp(240px,42vw,420px); display:flex; align-items:flex-end; overflow:hidden}
.pagehero__img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.pagehero::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(28,24,16,.10) 0%,rgba(28,24,16,.62) 100%),rgba(174,115,42,.12); mix-blend-mode:multiply}
.pagehero__inner{position:relative; z-index:1; padding-block:32px 36px; color:var(--parchment-50)}
.pagehero__inner h1{color:var(--parchment-50); font-size:clamp(2rem,6vw,3.4rem); text-transform:uppercase; letter-spacing:.02em; text-shadow:0 2px 18px rgba(0,0,0,.35)}
.pagehero__inner p{max-width:560px; color:var(--parchment-100); font-family:var(--font-serif); font-style:italic; font-size:var(--text-lg); margin:6px 0 0}
.pagehero .eyebrow{color:var(--gold-200)}

/* trust strip */
.trust{background:var(--surface-card); border-block:1px solid var(--border-subtle)}
.trust__inner{display:flex; flex-wrap:wrap; gap:10px 28px; align-items:center; justify-content:center; padding:16px 20px; font-size:var(--text-sm); font-weight:var(--weight-semibold); color:var(--ink-600)}
.trust__inner span{display:inline-flex; align-items:center; gap:8px}
.trust .lucide{width:17px;height:17px;color:var(--gold-600)}
.star{color:var(--sun-500)}

/* ============================================================
   6. CARDS / GRIDS
   ============================================================ */
.grid{display:grid; gap:24px}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--surface-card); border:1px solid var(--border-subtle); border-radius:var(--radius-xl); box-shadow:var(--shadow-sm); overflow:hidden; display:flex; flex-direction:column}
.card--interactive{transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base)}
.card--interactive:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg)}
.card__media{position:relative; aspect-ratio:16/10; overflow:hidden}
.card__media img{width:100%;height:100%;object-fit:cover; transition:transform var(--dur-base) var(--ease-out)}
.card--interactive:hover .card__media img{transform:scale(1.04)}
.card__body{padding:20px 22px; display:flex; flex-direction:column; gap:8px; flex:1}
.card__eyebrow{display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted)}
.card__eyebrow .lucide{width:17px;height:17px;color:var(--blue-600)}
.card h3{font-family:var(--font-display); font-weight:700; font-size:var(--text-xl); color:var(--text-strong); margin:0; text-transform:none; letter-spacing:0}
.card p{font-size:var(--text-sm); line-height:1.55; color:var(--text-body); margin:0}
.card__foot{margin-top:auto; padding-top:6px}

/* badges & tags */
.badge{position:absolute; top:12px; left:12px; display:inline-flex; align-items:center; gap:6px; background:var(--gold-500); color:var(--text-on-gold); font-size:12px; font-weight:700; letter-spacing:.03em; padding:5px 11px; border-radius:var(--radius-pill); box-shadow:var(--shadow-sm)}
.badge--blue{background:var(--blue-500); color:var(--text-on-blue)}
.tagrow{display:flex; gap:10px; flex-wrap:wrap}
.tag{font-family:var(--font-sans); font-size:var(--text-sm); font-weight:var(--weight-semibold); color:var(--ink-600); background:var(--surface-card); border:1.5px solid var(--border-default); border-radius:var(--radius-pill); padding:8px 16px; cursor:pointer; transition:all var(--dur-fast)}
.tag:hover{border-color:var(--gold-400); color:var(--gold-700)}
.tag.is-selected{background:var(--gold-500); border-color:var(--gold-500); color:var(--text-on-gold)}

/* info rows (horario / ubicación / etc.) */
.inforow{display:flex; gap:16px; align-items:flex-start; background:var(--surface-card); border:1px solid var(--border-subtle); border-radius:var(--radius-xl); padding:22px 24px; box-shadow:var(--shadow-sm)}
.inforow__icon{display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px; border-radius:var(--radius-round); background:var(--gold-50); flex:none}
.inforow__icon .lucide{width:22px;height:22px;color:var(--gold-600)}
.inforow h3{font-family:var(--font-display); text-transform:uppercase; letter-spacing:.08em; font-size:14px; color:var(--text-strong); margin:0 0 5px}
.inforow p{font-size:14.5px; color:var(--text-body); margin:0; line-height:1.5}

/* feature list with icons */
.featlist{list-style:none; margin:0; padding:0; display:grid; gap:16px}
.featlist li{display:flex; gap:14px; align-items:flex-start}
.featlist .lucide{width:22px;height:22px;color:var(--blue-600); flex:none; margin-top:2px}
.featlist h3{font-size:var(--text-md); margin:0 0 2px; text-transform:none; letter-spacing:0; color:var(--text-strong); font-family:var(--font-display)}
.featlist p{margin:0; font-size:var(--text-sm); color:var(--text-body)}

/* split section (text + image) */
.split{display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center}
.split--reverse .split__media{order:-1}
.split__media{border-radius:var(--radius-2xl); overflow:hidden; box-shadow:var(--shadow-md); aspect-ratio:4/3}
.split__media img{width:100%;height:100%;object-fit:cover}

/* price table */
.pricecard{background:var(--surface-card); border:1px solid var(--border-subtle); border-radius:var(--radius-xl); box-shadow:var(--shadow-sm); overflow:hidden}
.pricecard__head{background:var(--gold-500); color:var(--text-on-gold); padding:16px 22px; font-family:var(--font-display); text-transform:uppercase; letter-spacing:.06em; font-size:var(--text-md)}
.pricecard__head--blue{background:var(--blue-500); color:var(--text-on-blue)}
.pricetable{width:100%; border-collapse:collapse}
.pricetable th,.pricetable td{text-align:left; padding:14px 22px; border-bottom:1px solid var(--border-subtle); font-size:var(--text-sm)}
.pricetable th{font-family:var(--font-sans); font-weight:700; color:var(--text-strong)}
.pricetable td:last-child{text-align:right; font-weight:700; color:var(--gold-700); white-space:nowrap}
.pricetable tr:last-child td{border-bottom:0}
.price-note{font-size:var(--text-sm); color:var(--text-muted); margin-top:12px}

/* placeholder flag (visible to Adrian, easy to find) */
.todo{display:inline-block; background:var(--sun-100); color:var(--sun-700); border:1px dashed var(--sun-500); border-radius:var(--radius-sm); padding:1px 8px; font-size:12px; font-weight:700; font-family:var(--font-sans)}

/* alerts */
.alert{display:flex; gap:12px; align-items:flex-start; border-radius:var(--radius-lg); padding:14px 18px; font-size:var(--text-sm); border:1px solid}
.alert .lucide{flex:none; width:20px;height:20px; margin-top:1px}
.alert--info{background:var(--blue-50); border-color:var(--blue-200); color:var(--blue-800)}
.alert--info .lucide{color:var(--blue-600)}
.alert--warn{background:var(--sun-100); border-color:var(--sun-500); color:var(--ink-700)}
.alert--warn .lucide{color:var(--sun-700)}
.alert--success{background:var(--oasis-100); border-color:var(--oasis-500); color:var(--oasis-700)}
.alert--success .lucide{color:var(--oasis-500)}

/* ============================================================
   7. FORMS
   ============================================================ */
.field{display:flex; flex-direction:column; gap:6px; margin-bottom:16px}
.field label{font-family:var(--font-sans); font-size:var(--text-sm); font-weight:700; color:var(--text-strong)}
.field input,.field select,.field textarea{
  font-family:var(--font-sans); font-size:var(--text-base); color:var(--text-strong);
  background:var(--surface-card); border:1.5px solid var(--border-default); border-radius:var(--radius-md);
  padding:12px 14px; width:100%; transition:border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--blue-400); box-shadow:var(--ring-focus)}
.field textarea{min-height:120px; resize:vertical}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:0 16px}
.form-card{background:var(--surface-card); border:1px solid var(--border-subtle); border-radius:var(--radius-2xl); box-shadow:var(--shadow-md); padding:28px}

/* contact tiles */
.contact-tiles{display:grid; grid-template-columns:repeat(2,1fr); gap:16px}
.contact-tile{display:flex; gap:14px; align-items:flex-start; background:var(--surface-card); border:1px solid var(--border-subtle); border-radius:var(--radius-xl); padding:20px; box-shadow:var(--shadow-sm); text-decoration:none; color:inherit; transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base)}
a.contact-tile:hover{transform:translateY(-3px); box-shadow:var(--shadow-md)}
.contact-tile .lucide{width:24px;height:24px;color:var(--gold-600); flex:none}
.contact-tile h3{font-size:var(--text-md); margin:0 0 2px; text-transform:none; letter-spacing:0; font-family:var(--font-display)}
.contact-tile p{margin:0; font-size:var(--text-sm); color:var(--text-body); overflow-wrap:anywhere}

/* ============================================================
   8. REVIEWS
   ============================================================ */
.review{background:var(--surface-card); border:1px solid var(--border-subtle); border-radius:var(--radius-xl); box-shadow:var(--shadow-sm); padding:24px; display:flex; flex-direction:column; gap:12px}
.review__stars{display:flex; gap:2px; color:var(--sun-500)}
.review__stars .lucide{width:18px;height:18px; fill:currentColor}
.review__text{font-family:var(--font-serif); font-style:italic; font-size:var(--text-md); color:var(--ink-700); line-height:1.5; margin:0}
.review__who{display:flex; align-items:center; gap:12px; margin-top:auto}
.review__avatar{width:40px;height:40px;border-radius:var(--radius-round); background:var(--gold-100); color:var(--gold-700); display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-family:var(--font-display)}
.review__name{font-weight:700; color:var(--text-strong); font-size:var(--text-sm)}
.review__meta{font-size:12.5px; color:var(--text-muted)}

/* ============================================================
   9. CTA BAND
   ============================================================ */
.cta-band{position:relative; overflow:hidden; background:var(--ink-800); color:var(--parchment-100)}
.cta-band__inner{position:relative; z-index:1; text-align:center; padding-block:clamp(48px,8vw,80px)}
.cta-band h2{color:var(--parchment-50); font-size:clamp(var(--text-2xl),5vw,var(--text-4xl)); text-transform:uppercase; letter-spacing:var(--tracking-wide)}
.cta-band p{max-width:560px; margin:10px auto 26px; color:var(--parchment-200); font-family:var(--font-serif); font-style:italic; font-size:var(--text-lg)}
.cta-band__mark{position:absolute; right:-40px; bottom:-30px; width:340px; max-width:46%; opacity:.10; filter:brightness(0) invert(1); z-index:0}
.cta-band__actions{display:flex; gap:14px; justify-content:center; flex-wrap:wrap}

/* ============================================================
   10. FOOTER
   ============================================================ */
.site-footer{background:var(--ink-800); color:var(--parchment-200)}
.site-footer__top{display:grid; grid-template-columns:1.3fr 2fr; gap:40px; padding-block:46px}
.site-footer__brand img{height:54px; margin-bottom:14px}
.site-footer__brand p{font-size:13.5px; line-height:1.6; color:var(--parchment-300); margin:0 0 16px; max-width:300px}
.site-footer__social{display:flex; gap:10px}
.site-footer__social a{display:inline-flex; width:38px;height:38px; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.18); border-radius:var(--radius-round); color:var(--parchment-200); transition:background var(--dur-fast), border-color var(--dur-fast)}
.site-footer__social a:hover{background:rgba(255,255,255,.10); border-color:var(--gold-300)}
.site-footer__social .lucide{width:18px;height:18px}
.site-footer__cols{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.site-footer__cols h4{font-family:var(--font-display); text-transform:uppercase; letter-spacing:.12em; font-size:13px; color:var(--gold-300); margin:0 0 12px}
.site-footer__cols a{display:block; font-size:14px; color:var(--parchment-200); text-decoration:none; padding:5px 0; opacity:.88}
.site-footer__cols a:hover{opacity:1; color:var(--gold-200)}
.site-footer__bottom{border-top:1px solid rgba(255,255,255,.12); padding-block:16px; font-size:12.5px; color:var(--parchment-400); display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap}

/* ============================================================
   11. FLOATING WHATSAPP
   ============================================================ */
.wa-float{position:fixed; right:18px; bottom:18px; z-index:90; display:inline-flex; align-items:center; gap:9px; background:var(--gold-500); color:var(--text-on-gold); font-family:var(--font-sans); font-weight:700; font-size:var(--text-sm); text-decoration:none; padding:13px 18px; border-radius:var(--radius-pill); box-shadow:var(--shadow-gold); transition:transform var(--dur-fast) var(--ease-out), filter var(--dur-fast)}
.wa-float:hover{transform:translateY(-2px); filter:brightness(1.06)}
.wa-float .lucide{width:20px;height:20px}

/* ============================================================
   12. RESPONSIVE
   ============================================================ */
@media (max-width:980px){
  .hero__grid{grid-template-columns:1fr; gap:28px}
  .hero__media{aspect-ratio:16/11; order:-1}
  .split{grid-template-columns:1fr; gap:28px}
  .split--reverse .split__media{order:0}
  .grid--3,.grid--4{grid-template-columns:repeat(2,1fr)}
  .site-footer__top{grid-template-columns:1fr; gap:28px}
}
/* nav collapses to a drawer early so links never wrap on tablets */
@media (max-width:900px){
  .nav-toggle{display:inline-flex}
  .site-nav{position:fixed; inset:70px 0 auto 0; flex-direction:column; align-items:stretch; gap:0; background:var(--surface-raised); border-bottom:1px solid var(--border-subtle); box-shadow:var(--shadow-lg); padding:8px 14px 16px; transform:translateY(-12px); opacity:0; pointer-events:none; transition:opacity var(--dur-base), transform var(--dur-base); max-height:calc(100vh - 70px); overflow:auto}
  .site-nav.is-open{transform:translateY(0); opacity:1; pointer-events:auto}
  .site-nav a{font-size:var(--text-md); padding:12px 10px; border-radius:var(--radius-md); border-bottom:1px solid var(--border-subtle)}
  .site-nav a:last-child{border-bottom:0}
  .site-nav .nav-extra{display:block}
  .site-header__cta .btn{display:none}
}
@media (max-width:760px){
  .hero__stats{gap:20px}
  .grid--2,.grid--3,.grid--4{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .contact-tiles{grid-template-columns:1fr}
  .site-footer__cols{grid-template-columns:1fr 1fr}
  .site-footer__bottom{flex-direction:column}
  .wa-float span{display:none}
  .wa-float{padding:14px; border-radius:var(--radius-round)}
}
@media (max-width:420px){
  .site-footer__cols{grid-template-columns:1fr}
  .pricetable td:last-child{white-space:normal}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important; scroll-behavior:auto!important}
}