:root{
  --night:#062f2c;
  --deep:#073d38;
  --glass:rgba(255,250,241,.78);
  --glass-dark:rgba(5,43,40,.74);
  --hairline:rgba(255,255,255,.28);
  --premium-shadow:0 30px 90px rgba(4,45,41,.20);
}
body{
  background:
    radial-gradient(circle at 86% 8%,rgba(232,93,63,.12),transparent 30rem),
    radial-gradient(circle at 8% 40%,rgba(9,107,98,.13),transparent 34rem),
    #f6f0e6;
  overflow-x:hidden;
}
body:before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;opacity:.22;
  background-image:linear-gradient(rgba(255,255,255,.4) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.4) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:linear-gradient(to bottom,#000,transparent 75%);
}
header{
  top:.75rem;border:1px solid rgba(255,255,255,.72);border-radius:20px;
  width:min(calc(100% - 2rem),calc(var(--max) + 2rem));margin-inline:auto;
  padding:.65rem 1rem;background:rgba(255,250,241,.76);box-shadow:0 10px 45px rgba(3,49,45,.12);
  backdrop-filter:blur(20px) saturate(150%);
}
header nav a{position:relative}
header nav a:after{content:"";position:absolute;height:2px;left:0;right:100%;bottom:-.45rem;background:var(--coral);transition:right .25s ease}
header nav a:hover:after{right:0}
.hero{
  width:min(calc(100% - 2rem),1400px);max-width:none;min-height:720px;margin-top:1rem;
  padding:clamp(2rem,7vw,6.5rem);position:relative;isolation:isolate;overflow:hidden;
  border-radius:36px;color:#fff;box-shadow:var(--premium-shadow);grid-template-columns:1.15fr .7fr;
  background:linear-gradient(90deg,rgba(4,35,34,.88) 0%,rgba(4,35,34,.64) 45%,rgba(4,35,34,.12) 100%),url("mexico-coast.jpg") center/cover;
}
.hero:after{content:"";position:absolute;inset:0;z-index:-1;border:1px solid rgba(255,255,255,.28);border-radius:inherit;box-shadow:inset 0 0 90px rgba(4,35,34,.17)}
.hero>div:first-child{padding:clamp(1.2rem,3vw,2.5rem);border:1px solid var(--hairline);border-radius:28px;background:rgba(3,37,35,.34);backdrop-filter:blur(13px);box-shadow:0 24px 70px rgba(0,0,0,.16)}
.hero .kicker,.hero .lead{color:#fff}.hero h1{font-size:clamp(3.8rem,8vw,8rem);text-shadow:0 10px 40px rgba(0,0,0,.2)}
.byline{display:inline-flex;margin:.5rem 0 0;padding:.5rem .8rem;border:1px solid rgba(255,255,255,.28);border-radius:999px;background:rgba(255,255,255,.1);font-size:.78rem;font-weight:700;letter-spacing:.03em;color:rgba(255,255,255,.9)}
.hero-logo{max-width:410px;filter:drop-shadow(0 30px 40px rgba(1,26,24,.45));transform:rotate(1.5deg);transition:transform .4s ease}
.hero:hover .hero-logo{transform:rotate(0) translateY(-6px)}
.hero .button{box-shadow:0 12px 30px rgba(232,93,63,.38);transition:transform .2s,box-shadow .2s}
.hero .button:hover{transform:translateY(-3px);box-shadow:0 18px 35px rgba(232,93,63,.48)}
.hero .text-link{text-decoration-color:rgba(255,255,255,.45)}
.stories{border:0;padding-block:6rem;display:grid;gap:2rem}
.story{
  position:relative;isolation:isolate;overflow:hidden;min-height:390px;padding:clamp(2rem,6vw,5rem);
  grid-template-columns:80px minmax(0,640px);align-content:end;border:0;border-radius:30px;color:#fff;
  background-position:center;background-size:cover;box-shadow:var(--premium-shadow);
}
.story:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(3,42,39,.92),rgba(3,42,39,.58) 58%,rgba(3,42,39,.15))}
.story:after{content:"";position:absolute;inset:0;z-index:-1;border:1px solid var(--hairline);border-radius:inherit}
.story:nth-child(3n+1){background-image:url("mexico-pyramid.jpg")}
.story:nth-child(3n+2){background-image:url("mexico-coast.jpg");background-position:center 58%}
.story:nth-child(3n){background-image:url("mexico-colonial.jpg")}
.story:nth-child(even){margin-left:clamp(0px,7vw,90px);grid-template-columns:80px minmax(0,640px)}
.story h2{font-size:clamp(2.4rem,5vw,4.6rem);text-shadow:0 8px 24px rgba(0,0,0,.2)}
.story p{color:rgba(255,255,255,.9);font-size:1.08rem}.story .num{color:#ffd685;font-weight:800}
.featured{
  width:min(calc(100% - 2rem),1400px);max-width:none;padding:clamp(3rem,7vw,7rem);border-radius:36px;color:#fff;
  background:linear-gradient(110deg,rgba(4,40,37,.96),rgba(4,40,37,.67)),url("mexico-pyramid.jpg") center/cover;
  box-shadow:var(--premium-shadow);
}
.featured .kicker{color:#ffd685}.featured>div:first-child{max-width:720px}
.featured .grid{grid-template-columns:repeat(2,1fr)}
.featured .card{background:rgba(255,250,241,.78);border:1px solid rgba(255,255,255,.6);backdrop-filter:blur(18px) saturate(130%);color:var(--ink);box-shadow:0 18px 55px rgba(0,0,0,.16)}
.featured .card:nth-child(2n){background:rgba(255,255,255,.88)}
.featured .card:hover{transform:translateY(-7px) scale(1.01)}
.newsletter,.observatory{position:relative;isolation:isolate;overflow:hidden;box-shadow:var(--premium-shadow);border:1px solid rgba(255,255,255,.35)}
.newsletter{background:linear-gradient(110deg,rgba(4,55,51,.94),rgba(4,55,51,.63)),url("mexico-coast.jpg") center/cover}
.newsletter:after,.observatory:after{content:"";position:absolute;inset:0;z-index:-1;backdrop-filter:blur(2px)}
.newsletter button{border:1px solid rgba(255,255,255,.45);background:rgba(232,93,63,.84);backdrop-filter:blur(12px)}
.observatory{color:#fff;background:linear-gradient(100deg,rgba(104,55,16,.88),rgba(173,83,35,.57)),url("mexico-colonial.jpg") center 58%/cover}
.observatory .kicker{color:#ffe0a0}.observatory a{display:inline-block;margin-top:1rem;padding:.72rem 1rem;border-radius:999px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.34);backdrop-filter:blur(12px)}
footer{margin-top:6rem;padding:3rem max(1rem,calc((100% - var(--max))/2));width:100%;max-width:none;background:var(--night);border:0;color:#fff}
footer .brand small,footer p{color:rgba(255,255,255,.72)}
@media(max-width:900px){
  header{top:.4rem;width:calc(100% - 1rem)}header nav{background:rgba(255,250,241,.94);backdrop-filter:blur(18px)}
  .hero{min-height:auto;padding:1rem;border-radius:26px;grid-template-columns:1fr;background-position:64% center}
  .hero>div:first-child{padding:1.35rem}.hero h1{font-size:clamp(3.2rem,15vw,5.5rem)}.hero-logo{max-width:290px}
  .hero .actions{align-items:flex-start;flex-direction:column}.stories{padding-block:3rem;gap:1rem}
  .story,.story:nth-child(even){min-height:430px;margin-left:0;padding:1.6rem;grid-template-columns:42px 1fr;background-position:center}
  .featured{padding:2rem 1rem;border-radius:26px}.featured .grid{grid-template-columns:1fr}
  .newsletter,.observatory{margin-block:2rem;padding:2rem 1.4rem;border-radius:24px}
}
@media(prefers-reduced-motion:reduce){.hero-logo{transform:none!important}}