/* ===========================================================
   México Turismo — hoja de estilos compartida
   =========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;0,9..144,700;0,9..144,900;1,9..144,500;1,9..144,600&family=Poppins:wght@300;400;500;600;700;800&family=Caveat:wght@600;700&display=swap');

:root{
  --terracota:#FF5A36;
  --terracota-dark:#C23B18;
  --turquesa:#00C2CC;
  --turquesa-dark:#046E77;
  --rosa:#F2007D;
  --rosa-dark:#A4005A;
  --verde:#12934F;
  --verde-dark:#0B6236;
  --dorado:#FFAE00;
  --dorado-dark:#B87700;
  --dorado-light:#FFD666;

  --bg:#FFF8EF;
  --bg-alt:#FDECD3;
  --ink:#25150E;
  --ink-soft:#4A3324;
  --card:#FFFFFF;
  --border:rgba(255,90,54,0.16);

  --radius-lg:28px;
  --radius-md:18px;
  --radius-sm:12px;

  --shadow-sm:0 4px 16px rgba(194,59,24,0.10);
  --shadow-md:0 14px 34px rgba(194,59,24,0.16);
  --shadow-lg:0 26px 64px rgba(194,59,24,0.22);

  --grad-sunset:linear-gradient(135deg,#F2007D 0%,#FF5A36 45%,#FFAE00 100%);
  --grad-ocean:linear-gradient(135deg,#046E77 0%,#00C2CC 55%,#8CFCEA 100%);
  --grad-jungle:linear-gradient(135deg,#0A5C34 0%,#12934F 55%,#9BE66B 100%);
  --grad-dusk:linear-gradient(135deg,#3B0B3D 0%,#C2126B 55%,#FF7A00 100%);
  --grad-gold:linear-gradient(135deg,#B87700 0%,#FFAE00 55%,#FFE28A 100%);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:'Poppins',sans-serif;
  background:
    radial-gradient(circle at 6% 4%, rgba(242,0,125,.09), transparent 32%),
    radial-gradient(circle at 96% 12%, rgba(0,194,204,.09), transparent 30%),
    radial-gradient(circle at 90% 92%, rgba(255,174,0,.10), transparent 34%),
    radial-gradient(circle at 8% 96%, rgba(18,147,79,.08), transparent 32%),
    var(--bg);
  color:var(--ink);
  line-height:1.75;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  position:relative;
}
/* textura punteada estilo "mapa de ruta" en toda la página */
body::before{
  content:'';
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:radial-gradient(circle, rgba(37,21,14,0.07) 1.3px, transparent 1.3px);
  background-size:24px 24px;
}
header,section,footer{ position:relative; z-index:1; }

h1,h2,h3,h4,.display{
  font-family:'Fraunces',serif;
  line-height:1.08;
  margin:0 0 .5em;
  font-weight:700;
  letter-spacing:-0.01em;
}
h2{ font-weight:750; }
p{ margin:0 0 1em; color:var(--ink-soft); }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
ul{ margin:0; padding:0; list-style:none; }
section{ position:relative; padding:96px 0; }
.container{ width:min(1180px, 92%); margin:0 inline auto; margin-inline:auto; }

::selection{ background:var(--rosa); color:#fff; }
::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-track{ background:var(--bg-alt); }
::-webkit-scrollbar-thumb{ background:var(--grad-sunset); border-radius:10px; border:2px solid var(--bg-alt); }
:focus-visible{ outline:3px solid var(--dorado); outline-offset:2px; }

.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-family:'Caveat',cursive; font-size:1.4rem; font-weight:700;
  letter-spacing:.01em; color:var(--rosa-dark);
  margin-bottom:10px; transform:rotate(-2deg);
}
.eyebrow::before{ content:'✦'; font-family:'Poppins',sans-serif; font-size:.7rem; color:var(--dorado-dark); }
.hero .eyebrow, .page-hero .eyebrow{ color:var(--dorado-light); text-shadow:0 2px 10px rgba(0,0,0,.25); }
.hero .eyebrow::before, .page-hero .eyebrow::before{ color:#fff; }

/* subrayado "ruta punteada" bajo los títulos de sección */
.section-head h2::after{
  content:'';
  display:block; width:96px; height:12px; margin-top:16px;
  background-image:radial-gradient(circle at 5px 5px, var(--dorado) 3px, transparent 3.4px);
  background-size:16px 12px; background-repeat:repeat-x;
}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 28px; border-radius:100px; font-weight:600; font-size:.95rem;
  border:2px solid transparent; cursor:pointer; transition:.3s ease; white-space:nowrap;
}
.btn-primary{ background:var(--grad-sunset); color:#fff; box-shadow:var(--shadow-sm); }
.btn-primary:hover{ transform:translateY(-3px) scale(1.02); box-shadow:var(--shadow-md); }
.btn-outline{ border-color:var(--ink); color:var(--ink); background:transparent; }
.btn-outline:hover{ background:var(--grad-sunset); border-color:transparent; color:#fff; transform:translateY(-3px); }
.btn-light{ background:#fff; color:var(--ink); }
.btn-light:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }

/* ---------- Header / Nav ---------- */
header.site-header{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  padding:18px 0; transition:.35s ease;
}
header.site-header.scrolled{
  background:rgba(255,248,239,.9); backdrop-filter:blur(14px);
  box-shadow:0 2px 24px rgba(37,21,14,.1); padding:12px 0;
  border-bottom:1px solid var(--border);
}
.nav-inner{ display:flex; align-items:center; justify-content:space-between; width:min(1180px,92%); margin:0 auto; }
.logo{ display:flex; align-items:center; gap:10px; font-family:'Fraunces',serif; font-weight:800; font-size:1.35rem; }
.logo span.dot{ width:11px; height:11px; border-radius:50%; background:var(--grad-sunset); display:inline-block; animation:pulse-dot 2.4s ease-in-out infinite; }
@keyframes pulse-dot{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.35); } }
nav.main-nav ul{ display:flex; gap:6px; align-items:center; }
nav.main-nav a{
  padding:10px 16px; border-radius:100px; font-size:.92rem; font-weight:600; color:var(--ink);
  transition:.25s;
}
nav.main-nav a:hover, nav.main-nav a.active{ background:var(--grad-sunset); color:#fff; }
.nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:8px; z-index:1100; }
.nav-toggle span{ width:26px; height:2.5px; background:var(--ink); border-radius:2px; transition:.3s; }

/* ---------- Hero ---------- */
.hero{
  min-height:92vh; display:flex; align-items:center; position:relative;
  background:
    linear-gradient(135deg, rgba(59,11,61,.88) 0%, rgba(194,18,107,.78) 55%, rgba(255,122,0,.72) 100%),
    url('../img/hero-collage.png');
  background-size:cover; background-position:center;
  color:#fff; overflow:hidden; padding-top:120px;
}
.hero::before{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(circle at 15% 25%, rgba(242,0,125,.4), transparent 45%),
    radial-gradient(circle at 85% 20%, rgba(255,174,0,.35), transparent 45%),
    radial-gradient(circle at 60% 90%, rgba(0,194,204,.4), transparent 50%);
}
.hero::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:16px; z-index:1;
  background-image:radial-gradient(circle at 10px 0, transparent 9px, var(--bg) 9.5px);
  background-size:20px 16px; background-repeat:repeat-x;
}
.hero-inner{ position:relative; z-index:2; width:min(1180px,92%); margin:0 auto; }
.hero h1{ font-size:clamp(2.6rem,6vw,4.8rem); margin-bottom:.3em; text-shadow:0 4px 24px rgba(0,0,0,.25); }
.hero h1 em{ font-style:italic; background:linear-gradient(90deg,var(--dorado-light),var(--rosa) 60%,var(--turquesa)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero p.lead{ font-size:1.18rem; max-width:620px; color:rgba(255,255,255,.9); }
.hero-cta{ display:flex; gap:16px; flex-wrap:wrap; margin-top:32px; }
.hero-stats{ display:flex; gap:40px; margin-top:64px; flex-wrap:wrap; }
.hero-stats div{ position:relative; }
.hero-stats div::before{
  content:''; position:absolute; top:-14px; left:-16px; width:56px; height:56px; z-index:-1;
  background:radial-gradient(circle, rgba(255,174,0,.4), transparent 70%);
}
.hero-stats div strong{ display:block; font-family:'Fraunces',serif; font-weight:800; font-size:2.2rem; background:linear-gradient(90deg,#fff,var(--dorado-light)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-stats div span{ font-size:.8rem; color:rgba(255,255,255,.7); text-transform:uppercase; letter-spacing:.08em; }
.scroll-cue{ position:absolute; bottom:28px; left:50%; transform:translateX(-50%); z-index:2; display:flex; flex-direction:column; align-items:center; gap:8px; font-size:.72rem; letter-spacing:.15em; text-transform:uppercase; color:rgba(255,255,255,.75); }
.scroll-cue .line{ width:1px; height:34px; background:rgba(255,255,255,.55); animation:scrollcue 1.8s infinite; }
@keyframes scrollcue{ 0%{ transform:scaleY(0); transform-origin:top;} 50%{ transform:scaleY(1); transform-origin:top;} 51%{ transform-origin:bottom;} 100%{ transform:scaleY(0); transform-origin:bottom;} }

/* small page hero (interior pages) */
.page-hero{
  padding:170px 0 90px; color:#fff; position:relative; overflow:hidden;
}
.page-hero::before{
  content:''; position:absolute; inset:0; opacity:.18;
  background-image:radial-gradient(circle, rgba(255,255,255,.8) 1.4px, transparent 1.4px);
  background-size:20px 20px;
}
.page-hero::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:22px; z-index:1;
  background-image:radial-gradient(circle at 13px 0, transparent 12px, var(--bg) 12.5px);
  background-size:26px 22px; background-repeat:repeat-x;
}
.page-hero .container{ position:relative; z-index:2; }
.page-hero h1{ font-size:clamp(2.2rem,5vw,3.7rem); text-shadow:0 4px 20px rgba(0,0,0,.22); }
.page-hero p{ color:rgba(255,255,255,.9); max-width:640px; font-size:1.08rem; }
.crumbs{ font-family:'Caveat',cursive; font-size:1.15rem; font-weight:700; letter-spacing:.02em; color:var(--dorado-light); margin-bottom:14px; }
.crumbs a:hover{ text-decoration:underline; }

/* ---------- Section headings ---------- */
.section-head{ max-width:720px; margin-bottom:56px; }
.section-head h2{ font-size:clamp(1.95rem,3.6vw,2.9rem); }

/* ---------- Cards ---------- */
.grid{ display:grid; gap:28px; }
.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(--card); border-radius:var(--radius-md); overflow:hidden;
  box-shadow:var(--shadow-sm); transition:.35s ease; border:1px solid var(--border);
  position:relative;
}
.card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:4px;
  background:var(--grad-sunset); transform:scaleX(0); transform-origin:left;
  transition:transform .35s ease; z-index:3;
}
.card:hover{ transform:translateY(-8px); box-shadow:var(--shadow-lg); border-color:transparent; }
.card:hover::before{ transform:scaleX(1); }

.dest-card{ display:flex; flex-direction:column; }
.dest-card .media{
  height:210px; position:relative; display:flex; align-items:flex-end; padding:18px;
  color:#fff; overflow:hidden;
}
.dest-card .media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s ease; z-index:0; }
.dest-card:hover .media img{ transform:scale(1.09); }
.dest-card .media::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent 35%,rgba(0,0,0,.68) 100%); z-index:1; }
.dest-card .media .tag{
  position:relative; z-index:2; font-size:.72rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  background:rgba(0,0,0,.28); backdrop-filter:blur(6px); padding:6px 13px; border-radius:100px;
  border:1.5px dashed rgba(255,255,255,.75); transform:rotate(-2deg);
}
.dest-card .body{ padding:22px; flex:1; display:flex; flex-direction:column; }
.dest-card h3{ font-size:1.28rem; margin-bottom:.35em; }
.dest-card .loc{
  display:inline-flex; align-items:center; width:fit-content;
  font-size:.75rem; text-transform:uppercase; letter-spacing:.07em; color:var(--turquesa-dark); font-weight:700;
  background:rgba(0,194,204,.2); border:1px solid rgba(0,194,204,.35); padding:4px 11px; border-radius:100px; margin-bottom:12px;
}
.dest-card p{ font-size:.93rem; flex:1; }
.dest-card .meta{ display:flex; gap:8px; flex-wrap:wrap; font-size:.78rem; color:var(--ink-soft); margin-top:14px; padding-top:14px; border-top:1px dashed var(--border); }
.dest-card .meta span{ background:rgba(255,174,0,.16); border:1px solid rgba(255,174,0,.3); padding:4px 10px; border-radius:100px; font-weight:600; color:var(--terracota-dark); }

.icon-badge{
  width:54px; height:54px; border-radius:34% 66% 66% 34% / 46% 40% 60% 54%;
  display:flex; align-items:center; justify-content:center;
  font-size:1.55rem; margin-bottom:16px; box-shadow:var(--shadow-sm);
  transition:.35s ease;
}
.card:hover .icon-badge{ transform:rotate(-6deg) scale(1.05); }

/* ---------- Chips / filters ---------- */
.chip-row{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:40px; }
.chip{
  padding:9px 19px; border-radius:100px; border:1.5px solid var(--border); background:#fff;
  font-size:.85rem; font-weight:600; cursor:pointer; transition:.25s; color:var(--ink);
}
.chip:hover{ border-color:var(--terracota); color:var(--terracota-dark); }
.chip[data-filter="caribe"]{ background:rgba(0,194,204,.14); border-color:rgba(0,194,204,.4); color:var(--turquesa-dark); }
.chip[data-filter="centro"]{ background:rgba(255,90,54,.14); border-color:rgba(255,90,54,.4); color:var(--terracota-dark); }
.chip[data-filter="pacifico"]{ background:rgba(242,0,125,.12); border-color:rgba(242,0,125,.38); color:var(--rosa-dark); }
.chip[data-filter="norte"]{ background:rgba(255,174,0,.18); border-color:rgba(255,174,0,.45); color:var(--dorado-dark); }
.chip[data-filter="sur"]{ background:rgba(18,147,79,.14); border-color:rgba(18,147,79,.4); color:var(--verde-dark); }
.chip.active{ background:var(--grad-sunset); color:#fff; border-color:transparent; box-shadow:0 8px 20px rgba(242,0,125,.3); }
.chip[data-filter="todos"]::before{ content:'✨ '; }
.chip[data-filter="caribe"]::before{ content:'🏖️ '; }
.chip[data-filter="centro"]::before{ content:'🏙️ '; }
.chip[data-filter="pacifico"]::before{ content:'🌊 '; }
.chip[data-filter="norte"]::before{ content:'🏜️ '; }
.chip[data-filter="sur"]::before{ content:'🌄 '; }

/* ---------- Timeline (Tren Maya) ---------- */
.rail{ position:relative; padding-left:40px; }
.rail::before{ content:''; position:absolute; left:11px; top:6px; bottom:6px; width:3px; background:linear-gradient(180deg,var(--rosa),var(--turquesa),var(--verde),var(--dorado)); border-radius:3px; }
.rail-stop{ position:relative; padding-bottom:44px; }
.rail-stop:last-child{ padding-bottom:0; }
.rail-stop::before{ content:'🚉'; font-size:.75rem; display:flex; align-items:center; justify-content:center; position:absolute; left:-40px; top:2px; width:26px; height:26px; border-radius:50%; background:#fff; border:4px solid var(--terracota); z-index:2; box-shadow:var(--shadow-sm); }
.rail-stop h4{ font-size:1.18rem; margin-bottom:6px; }
.rail-stop .state{ display:inline-block; font-size:.73rem; font-weight:800; text-transform:uppercase; letter-spacing:.07em; color:#fff; background:var(--grad-sunset); padding:3px 12px; border-radius:100px; }
.rail-stop p{ font-size:.92rem; margin-top:8px; }

/* ---------- Table ---------- */
.table-wrap{ overflow-x:auto; border-radius:var(--radius-md); box-shadow:var(--shadow-sm); background:#fff; }
table{ width:100%; border-collapse:collapse; min-width:620px; }
th,td{ padding:16px 20px; text-align:left; font-size:.9rem; border-bottom:1px solid var(--border); }
th{ background:var(--ink); color:#fff; font-weight:600; font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; }
tr:last-child td{ border-bottom:none; }
tr:hover td{ background:var(--bg-alt); }

/* ---------- Stars ---------- */
.stars{ color:var(--dorado); font-size:.95rem; letter-spacing:2px; }
.score{
  display:inline-flex; align-items:center; gap:6px; background:var(--grad-jungle); color:#fff;
  padding:4px 10px; border-radius:8px; font-weight:700; font-size:.82rem;
}

/* ---------- Hospedaje cards ---------- */
.stay-card{ display:flex; flex-direction:column; }
.stay-card .media{ height:170px; position:relative; overflow:hidden; }
.stay-card .media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.stay-card:hover .media img{ transform:scale(1.09); }
.stay-card .body{ padding:20px; }
.stay-card .top{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; margin-bottom:8px; }
.stay-card h4{ font-size:1.08rem; margin:0; }
.price-tag{
  font-size:.76rem; font-weight:800; color:var(--terracota-dark);
  background:rgba(255,174,0,.24); border:1.5px dashed var(--dorado-dark);
  padding:4px 11px; border-radius:8px; white-space:nowrap; transform:rotate(-2deg); display:inline-block;
}

/* ---------- Accordion (gastronomia / datos) ---------- */
.accordion-item{ border-bottom:1px solid var(--border); }
.accordion-item:first-child{ border-top:1px solid var(--border); }
.accordion-head{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding:22px 4px; cursor:pointer; transition:.2s; }
.accordion-head:hover{ padding-left:8px; }
.accordion-head h4{ margin:0; font-size:1.12rem; display:flex; align-items:center; gap:14px; }
.accordion-head .plus{ font-size:1.4rem; transition:.3s; color:var(--rosa); flex-shrink:0; }
.accordion-item.open .accordion-head h4{ color:var(--rosa-dark); }
.accordion-item.open .plus{ transform:rotate(45deg); }
.accordion-body{ max-height:0; overflow:hidden; transition:max-height .4s ease; }
.accordion-item.open .accordion-body{ max-height:400px; }
.accordion-body p{ padding:0 4px 24px 62px; font-size:.95rem; }

/* ---------- Dish photo grid (gastronomía) ---------- */
.dish-card{ position:relative; border-radius:var(--radius-md); overflow:hidden; height:190px; box-shadow:var(--shadow-sm); transition:.35s ease; }
.dish-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.dish-card img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s ease; }
.dish-card:hover img{ transform:scale(1.09); }
.dish-card .cap{
  position:absolute; left:0; right:0; bottom:0; padding:14px 16px;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.78));
  color:#fff; font-weight:700; font-size:.92rem;
}

/* ---------- Banner image (Tren Maya) ---------- */
.banner-img{ width:100%; height:320px; object-fit:cover; border-radius:var(--radius-lg); box-shadow:var(--shadow-md); display:block; margin-bottom:64px; }

/* ---------- Fun facts grid ---------- */
.fact-card{ padding:28px; }
.fact-card .num{ font-family:'Fraunces',serif; font-size:2.3rem; color:var(--rosa); font-weight:800; line-height:1; margin-bottom:10px; display:block;}
.fact-card .num.emoji{ font-size:2.1rem; }
.fact-card h4{ font-size:1.05rem; margin-bottom:8px; }
.fact-card p{ font-size:.9rem; margin:0; }

/* ---------- Transport ---------- */
.transport-tab-nav{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:40px; }
.transport-panel{ display:none; }
.transport-panel.active{ display:block; animation:fadeIn .5s ease; }
@keyframes fadeIn{ from{opacity:0; transform:translateY(12px);} to{opacity:1; transform:translateY(0);} }

.step-row{ display:flex; gap:20px; align-items:flex-start; margin-bottom:30px; }
.step-num{ width:44px; height:44px; border-radius:50%; background:var(--grad-ocean); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; flex-shrink:0; box-shadow:var(--shadow-sm); font-family:'Fraunces',serif; }

/* ---------- Callout / banner ---------- */
.callout{
  border-radius:var(--radius-lg); padding:60px; color:#fff; position:relative; overflow:hidden;
}
.callout::before{ content:''; position:absolute; inset:0; background:radial-gradient(circle at 80% 20%, rgba(255,255,255,.22), transparent 55%); }
.callout .container-in{ position:relative; z-index:2; }

/* ---------- Footer ---------- */
footer{ background:var(--ink); color:rgba(255,255,255,.72); padding:70px 0 30px; border-top:5px solid; border-image:var(--grad-sunset) 1; }
footer h4{ color:#fff; font-family:'Poppins',sans-serif; font-size:1rem; margin-bottom:18px; }
footer a{ color:rgba(255,255,255,.65); font-size:.9rem; display:block; padding:5px 0; transition:.2s; }
footer a:hover{ color:var(--dorado-light); padding-left:4px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; }
.footer-bottom{ margin-top:50px; padding-top:24px; border-top:1px solid rgba(255,255,255,.1); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:.8rem; }
.footer-logo{ font-family:'Fraunces',serif; font-weight:800; font-size:1.35rem; color:#fff; margin-bottom:14px; display:block; }

/* ---------- Reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(30px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:translateY(0); }

/* ---------- misc bg helpers ---------- */
.bg-sunset{ background:var(--grad-sunset); }
.bg-ocean{ background:var(--grad-ocean); }
.bg-jungle{ background:var(--grad-jungle); }
.bg-dusk{ background:var(--grad-dusk); }
.bg-alt{ background:var(--bg-alt); background-image:radial-gradient(circle, rgba(37,21,14,0.05) 1.4px, transparent 1.4px); background-size:22px 22px; }

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .grid-3{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:760px){
  nav.main-nav{
    position:fixed; inset:0 0 0 30%; background:var(--ink); padding:120px 30px 30px;
    transform:translateX(100%); transition:.4s ease; z-index:1050;
  }
  nav.main-nav.open{ transform:translateX(0); }
  nav.main-nav ul{ flex-direction:column; align-items:flex-start; gap:4px; width:100%; }
  nav.main-nav a{ color:#fff; width:100%; padding:14px 10px; }
  nav.main-nav a:hover, nav.main-nav a.active{ background:var(--grad-sunset); }
  .nav-toggle{ display:flex; }
  .grid-4,.grid-3,.grid-2{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .hero-stats{ gap:26px; }
  .callout{ padding:40px 26px; }
  section{ padding:70px 0; }
  .accordion-body p{ padding-left:4px; }
}