/* ══════════════════════════════════════════
   OASIS FM — shared stylesheet
══════════════════════════════════════════ */

/* ── TOKENS ── */
:root {
  --hdr: #c2dff1;
  --hdr-h: #adccdf;
  --tr: .45s cubic-bezier(.4,0,.2,1);
  /* Header text: dark navy for contrast on light blue */
  --hdr-text:   #1a3a5c;
  --hdr-text2:  #2e5c8a;
}
[data-theme="light"] {
  --bg:        #f4f9fd;
  --surface:   rgba(255, 255, 255, 0.3);
  --surface-s: #ffffff;
  --text:      #0d2136;
  --muted:     #5a7a8f;
  --accent:    #0e7fc0;
  --acc2:      #09b8c4;
  --glow:      rgba(14,127,192,.18);
  --border:    rgba(14,127,192,.16);
  --card-sh:   0 8px 40px rgba(10,40,70,.11);
  --footer:    #e3f1fa;
  --invertido: #f4f9fd;
  --ondas: #0d2136;
}
[data-theme="dark"] {
  --bg:        #07131e;
  --surface:   rgba(8, 25, 42, 0.3);
  --surface-s: #0a1e32;
  --text:      #dff0fb;
  --muted:     #6aa3bb;
  --accent:    #38b6e8;
  --acc2:      #0cdfd0;
  --glow:      rgba(56,182,232,.2);
  --border:    rgba(56,182,232,.18);
  --card-sh:   0 8px 40px rgba(0,0,0,.45);
  --footer:    #050f18;
  --invertido: #f4f9fd;
  --ondas: #38b6e8;
}
/* ── FUENTES LOCALES ── */
@font-face {
  font-family: 'DM Sans';
  src: url('../fonts/DMSans_18pt-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('../fonts/DMSans_18pt-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('../fonts/DMSans_18pt-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('../fonts/DMSans_18pt-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Serif Display';
  src: url('../fonts/DMSerifDisplay-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Serif Display';
  src: url('../fonts/DMSerifDisplay-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* ── RESET + BASE ── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  font-family:'DM Sans',sans-serif;
  background:var(--bg);
  color:var(--text);
  transition: background-color var(--tr),color var(--tr);
  min-height:100vh;
  overflow-x:hidden;
}

/* ══════════════════════════════════════════
   HEADER
══════════════════════════════════════════ */
header {
  position:fixed; top:0; left:0; right:0; z-index:300;
  background:var(--hdr);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(255,255,255,.35);
  transition:box-shadow .3s;
}
header.scrolled { box-shadow:0 4px 24px rgba(10,40,70,.15); }

.hdr-inner {
  display:flex; align-items:center; justify-content:space-between;
  padding:0 1.2rem; height:60px;
  max-width:1100px; margin:0 auto;
}

/* Logo */
.logo-mark { display:flex; align-items:center; gap:.6rem; text-decoration:none; }
.logo-mark img { height:80px; width:auto; flex-shrink:0; }
.logo-wordmark { display:flex; flex-direction:column; line-height:1; }
.logo-wordmark .lw1 {
  font-family:'DM Serif Display',serif;
  font-size:2rem; color:var(--hdr-text); letter-spacing:-.01em;
}
.logo-wordmark .lw2 {
  font-size:.55rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--hdr-text2);
}

/* Nav links — always use --hdr-text for contrast on the light-blue header */
nav { display:flex; align-items:center; gap:1.6rem; }
nav a {
  font-size:.78rem; font-weight:600; letter-spacing:.07em;
  text-transform:uppercase; text-decoration:none;
  color:var(--hdr-text); opacity:.65;
  transition:opacity .2s;
  display:none;
}
nav a:hover, nav a.active { opacity:1; }
nav a.active { border-bottom:2px solid var(--hdr-text); padding-bottom:1px; }
@media(min-width:640px) { nav a { display:inline; } }

.hdr-right { display:flex; align-items:center; gap:.7rem; }

/* Theme pill — navy on light-blue in day, pale blue in dark */
.theme-pill {
  background: var(--bg);
  border: 1px solid rgba(68, 220, 241, 0.25);
  border-radius:99px; padding:5px 12px;
  cursor:pointer; display:flex; align-items:center; gap:5px;
  font-size:.72rem; font-weight:600; font-family:'DM Sans',sans-serif;
  color: var(--text);
  transition: background-color .2s; white-space:nowrap;
}
.theme-pill:hover { 
  background: var(--glow);
  color: var(--text);
}
[data-theme="light"] .theme-pill {
  background:rgba(223,240,251,.12);
  border-color:var(--border);
}
[data-theme="light"] .theme-pill:hover {
  background: var(--hdr);
}

/* Hamburger */
.ham {
  display:flex; flex-direction:column; gap:4px;
  cursor:pointer; padding:4px; background:none; border:none;
}
.ham span {
  display:block; width:20px; height:2px;
  background:var(--hdr-text); border-radius:2px; transition:.3s;
}
@media(min-width:640px) { .ham { display:none; } }

/* Mobile drawer */
.drawer {
  position:fixed; inset:60px 0 0 0; z-index:299;
  background:var(--bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2.5rem;
  transform:translateX(100%); transition:transform .38s cubic-bezier(.4,0,.2,1);
  overflow: visible; /* o overflow-y: auto si necesitas scroll */
}
.drawer.open { transform:translateX(0); }
.drawer a {
  font-family:'DM Serif Display',serif; font-size:2.2rem; font-style:italic;
  text-decoration:none; color:var(--text); opacity:.8; transition:opacity .2s;
}
.drawer a:hover { opacity:1; }
/* En el drawer el menú fluye normal, no absolute */
.drawer .lang-switcher {
  position: relative;
}

.drawer .lang-switcher .lang-menu {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  top: auto;
  right: auto;
}

.drawer .lang-switcher.open .lang-menu {
  transform: translateX(-50%) translateY(0);
}
.drawer-prefs {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
}
/* ══════════════════════════════════════════
   PAGE HERO (interior pages)
══════════════════════════════════════════ */
.page-hero {
  padding:5.5rem 1.4rem 4rem;
  text-align:center;
  background:linear-gradient(160deg,#c2dff1 0%,#9fcde8 55%,#7bbde0 100%);
  position:relative; overflow:hidden;
}
[data-theme="dark"] .page-hero {
  background:linear-gradient(160deg,#071827 0%,#0a2035 55%,#0c2845 100%);
}
.page-hero::after {
  content:''; position:absolute; bottom:-1px; left:0; right:0;
  height:44px; background:var(--bg);
  clip-path:ellipse(55% 100% at 50% 100%);
}
.ph-tag {
  font-size:.65rem; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:var(--accent); margin-bottom:.7rem;
}
.page-hero h1 {
  font-family:'DM Serif Display',serif;
  font-size:clamp(2rem,7vw,3.5rem);
  color:var(--text); line-height:1.1; margin-bottom:.8rem;
}
.page-hero h1 em { font-style:italic; color:var(--accent); }
.page-hero p {
  font-size:.9rem; color:var(--muted); font-weight:300;
  max-width:480px; margin:0 auto; line-height:1.7;
}

/* ══════════════════════════════════════════
   FOOTER
══════════════════════════════════════════ */
footer {
  background:var(--footer);
  border-top:1px solid var(--border);
  padding:1.8rem 1.4rem;
  transition: background-color var(--tr);
}
footer .ft-prefs {
  display: flex;
  gap: 1rem;
}

.ft-inner {
  max-width:1100px; margin:0 auto;
  display:flex; flex-direction:column; align-items:center; gap:.8rem;
  text-align:center;
}
@media(min-width:600px) {
  .ft-inner { flex-direction:row; justify-content:space-between; text-align:left; }
}
.ft-copy { font-size:.76rem; color:var(--muted); }
.ft-copy a { color:var(--accent); text-decoration:none; }
.ft-tag {
  font-family:'DM Serif Display',serif;
  font-style:italic; font-size:.88rem; color:var(--muted);
}

/* ══════════════════════════════════════════
   ANIMATIONS + REVEAL
══════════════════════════════════════════ */
@keyframes fadeDown { from{opacity:0;transform:translateY(-16px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeUp   { from{opacity:0;transform:translateY(22px)}  to{opacity:1;transform:translateY(0)} }
@keyframes bob      { 0%,100%{transform:translateY(0)} 50%{transform:translateY(7px)} }
@keyframes blink    { 0%,100%{opacity:1} 50%{opacity:.3} }

.reveal { opacity:0; transform:translateY(26px); transition:opacity .65s ease,transform .65s ease; }
.reveal.in { opacity:1; transform:translateY(0); }