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

/* ── TOKENS ── */
:root {
  --hdr: rgba(194,223,241,.55);
  --hdr-h: #adccdf;
  --tr: .45s cubic-bezier(.4,0,.2,1);
  --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;
  --hdr:       rgba(7,19,30,.6);
  --hdr-text:  #dff0fb;
  --hdr-text2: #6aa3bb;
}
/* ── 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;
}

/* ══════════════════════════════════════════
   TOPBAR
══════════════════════════════════════════ */
.topbar {
  position:fixed; top:0; left:0; right:0; z-index:310;
  background:linear-gradient(90deg,var(--accent),var(--acc2));
  height:36px;
  display:flex; align-items:center; justify-content:center;
  padding:0 1.2rem;
  transition:transform .3s ease, background var(--tr);
}
.topbar.hidden { transform:translateY(-100%); }
.topbar-inner {
  max-width:1100px; width:100%;
  display:flex; align-items:center; justify-content:space-between;
}
.topbar-info {
  display:flex; align-items:center; gap:.5rem;
  font-size:.72rem; font-weight:600; color:#fff;
  letter-spacing:.03em; white-space:nowrap;
}
.topbar-info .tb-dot {
  width:6px; height:6px; border-radius:50%;
  background:#fff; animation:blink 1.8s ease-in-out infinite;
  flex-shrink:0;
}
.topbar-info span.tb-sep {
  opacity:.45; font-weight:300; margin:0 .15rem;
}
.topbar-right {
  display:flex; align-items:center; gap:.6rem;
}
/* Variante del theme-pill para topbar */
.topbar .theme-pill {
  background:rgba(255,255,255,.18);
  border-color:rgba(255,255,255,.3);
  color:#fff; padding:3px 10px; font-size:.66rem;
}
.topbar .theme-pill:hover {
  background:rgba(255,255,255,.32);
  color:#fff;
}
/* Lang switcher en topbar */
.topbar .lang-switcher { font-size:.7rem; }
@media(max-width:480px) {
  .topbar-info .tb-hide-mobile { display:none; }
}

/* ══════════════════════════════════════════
   HEADER
══════════════════════════════════════════ */
header {
  position:fixed; top:36px; left:0; right:0; z-index:300;
  background:var(--hdr);
  backdrop-filter:blur(20px) saturate(1.4);
  -webkit-backdrop-filter:blur(20px) saturate(1.4);
  border-bottom:1px solid rgba(255,255,255,.2);
  box-shadow:0 1px 12px rgba(0,0,0,.06);
  transition:box-shadow .3s, top .3s ease, background var(--tr);
}
header.scrolled { box-shadow:0 4px 24px rgba(10,40,70,.15); }
header.topbar-hidden { top:0; }
[data-theme="dark"] header {
  border-bottom-color:rgba(56,182,232,.12);
  box-shadow:0 1px 12px rgba(0,0,0,.2);
}
[data-theme="dark"] header.scrolled { box-shadow:0 4px 24px rgba(0,0,0,.4); }

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

/* Logo */
.logo-mark { display:flex; align-items:center; gap:.6rem; text-decoration:none; }
.logo-mark img { height:75px; 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:1.2rem;
  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:116px 0 0 0; z-index:299;
  background:var(--hdr);
  backdrop-filter:blur(24px) saturate(1.3);
  -webkit-backdrop-filter:blur(24px) saturate(1.3);
  border-left:1px solid rgba(255,255,255,.15);
  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;
}
.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(--hdr-text); opacity:.7;
  transition:opacity .2s, transform .2s;
}
.drawer a:hover { opacity:1; transform:translateX(4px); }
[data-theme="dark"] .drawer { border-left-color:rgba(56,182,232,.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:8rem 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); }