@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600;800;900&family=Inter:wght@300;400;600;700;800;900&display=swap');

:root{
  --bg:#04040a;
  --panel:#0b0b14;
  --gold:#ffcd38;
  --gold2:#e2b35a;
  --gold3:#cfa24a;
  --goldSoft: rgba(255,205,56,.16);
  --goldLine: rgba(255,205,56,.22);
  --red:#ff2a2a;
  --redSoft: rgba(255,42,42,.14);
  --text:#ffffff;
  --muted: rgba(255,255,255,.72);
  --shadow: 0 28px 80px rgba(0,0,0,.65);
  --shadow2: 0 18px 60px rgba(0,0,0,.45);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:
    radial-gradient(1400px 700px at 50% -10%, rgba(255,42,42,.18), transparent 60%),
    radial-gradient(1200px 650px at 50% 35%, rgba(255,205,56,.10), transparent 55%),
    radial-gradient(800px 500px at 80% 75%, rgba(255,42,42,.10), transparent 60%),
    linear-gradient(180deg, #04040a, #020208 60%, #04040a);
  overflow-x:hidden;
}

/* Partículas / brasas */
body:before{
  content:"";
  position:fixed; inset:-200px;
  pointer-events:none;
  background:
    radial-gradient(circle at 12% 22%, rgba(255,42,42,.18) 0 2px, transparent 3px),
    radial-gradient(circle at 18% 72%, rgba(255,205,56,.14) 0 2px, transparent 3px),
    radial-gradient(circle at 70% 28%, rgba(255,42,42,.16) 0 1px, transparent 2px),
    radial-gradient(circle at 84% 66%, rgba(255,205,56,.12) 0 2px, transparent 3px),
    radial-gradient(circle at 56% 50%, rgba(255,42,42,.12) 0 1px, transparent 2px),
    radial-gradient(circle at 35% 40%, rgba(255,205,56,.10) 0 1px, transparent 2px);
  opacity:.55;
  filter: blur(.2px);
  animation: drift 14s ease-in-out infinite alternate;
}
@keyframes drift{from{transform:translate(-10px,-6px)}to{transform:translate(10px,6px)}}

a{color:inherit;text-decoration:none}
.container{max-width:1160px;margin:0 auto;padding:22px}

/* NAV */
.nav{
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 0;
}
.brand{display:flex;align-items:center;gap:12px}
.brand .dot{
  width:10px;height:10px;border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 26px rgba(255,205,56,.55);
}
.brand .name{
  font-weight:900; letter-spacing:1px; text-transform:uppercase;
}
.navlinks{display:flex;gap:18px;align-items:center}
.navlinks a{opacity:.84;font-weight:800;letter-spacing:.2px}
.navlinks a:hover{opacity:1;color:#ffe8b0}

/* Separador ornamental (como el mockup) */
.hr-orn{
  position:relative;
  height:1px;
  margin:34px 0 26px;
  background: linear-gradient(90deg, transparent, rgba(255,205,56,.22), transparent);
}
.hr-orn:before{
  content:"";
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%) rotate(45deg);
  width:14px;height:14px;
  background: radial-gradient(circle, rgba(255,205,56,.35), rgba(255,205,56,.10) 55%, transparent 70%);
  border:1px solid rgba(255,205,56,.20);
  box-shadow:0 0 26px rgba(255,205,56,.12), 0 0 18px rgba(255,42,42,.10);
  border-radius:4px;
}

/* HERO (ajustado a pantalla + responsive real) */
.hero{
  position:relative;
  margin-top:12px;
  border-radius:22px;
  overflow:hidden;
  box-shadow: var(--shadow);
  border:1px solid rgba(255,205,56,.22);
  background: linear-gradient(180deg, rgba(10,10,18,.78), rgba(4,4,10,.62));

  /* ✅ Ajuste pantalla */
  min-height: calc(100vh - 110px); /* resta el nav */
  display:flex;
  align-items:center;
  justify-content:center;
  padding: clamp(26px, 4vw, 64px) clamp(14px, 3vw, 22px);
}

.hero-bg{
  position:absolute; inset:0;
  background-size:cover;
  background-position:center;
  opacity:.25;
  filter: saturate(1.2) contrast(1.06);
  transform: scale(1.03);
}

.hero:after{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(closest-side at 50% 15%, rgba(255,42,42,.18), transparent 65%),
    radial-gradient(closest-side at 50% 95%, rgba(255,205,56,.14), transparent 70%),
    linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.72));
  pointer-events:none;
  opacity:.95;
}

/* Contenido centrado */
.hero-inner{
  position:relative;
  z-index:2;
  max-width:900px;
  margin:0 auto;
  text-align:center;
}

/* ✅ Logo principal (centrado, responsive) */
.hero-logo{
  display:flex;
  justify-content:center;
  margin: 0 0 clamp(10px, 1.6vw, 18px);
}
.hero-logo img{
  width: clamp(140px, 18vw, 240px);
  height:auto;
  display:block;
  filter: drop-shadow(0 18px 55px rgba(0,0,0,.65)) drop-shadow(0 0 22px rgba(255,205,56,.20));
}

.badge{
  display:inline-flex;align-items:center;justify-content:center;
  padding:8px 14px;border-radius:999px;
  border:1px solid rgba(255,205,56,.30);
  background: rgba(255,205,56,.10);
  color:var(--gold);
  font-size:12px;font-weight:900;letter-spacing:.8px;
  box-shadow: 0 0 22px rgba(255,205,56,.10);
  margin-top: 4px;
}

.h1{
  font-family: Cinzel, serif;
  font-weight:900;
  letter-spacing:1.4px;
  text-transform:uppercase;
  font-size: clamp(28px, 4.4vw, 64px);
  line-height:1.06;
  margin:12px 0 10px;
  color:#ffe8b0;
  text-shadow:0 0 34px rgba(255,205,56,.14), 0 0 16px rgba(255,42,42,.10);
}
.p{
  margin:0 auto 22px;
  max-width:820px;
  color:rgba(255,255,255,.78);
  font-size: clamp(14px, 1.4vw, 18px);
  line-height:1.75;
}

/* Botones “oro viejo” */
.btn{
  display:inline-flex;gap:10px;align-items:center;justify-content:center;
  padding:12px 18px;border-radius:12px;
  border:1px solid rgba(255,205,56,.28);
  background: rgba(255,205,56,.10);
  color: var(--gold);
  font-weight:900;
  letter-spacing:.6px;
  box-shadow: 0 0 18px rgba(255,205,56,.06);
}
.btn:hover{background:rgba(255,205,56,.16)}
.btn-solid{
  background: linear-gradient(180deg, #ffd96a, #ffcd38);
  color:#000;
  border:0;
  box-shadow: 0 18px 40px rgba(255,205,56,.16);
}
.btn-solid:hover{filter:brightness(1.03)}
.btn-frame{
  background: rgba(0,0,0,.20);
  border:1px solid rgba(255,205,56,.30);
  color:#ffe8b0;
}

/* Secciones */
.section{padding:36px 0}
.section-title{
  font-family: Cinzel, serif;
  text-transform:uppercase;
  letter-spacing:1.2px;
  color:#ffe8b0;
  font-weight:900;
  margin:0 0 14px;
  text-align:center;
  text-shadow:0 0 20px rgba(255,205,56,.08);
}
.section-sub{
  text-align:center;
  color:rgba(255,255,255,.72);
  max-width:860px;
  margin:0 auto 18px;
  line-height:1.75;
}

/* Panel / caja */
.panel{
  border:1px solid rgba(255,205,56,.14);
  background: rgba(10,10,18,.60);
  border-radius:18px;
  padding:18px;
  box-shadow: var(--shadow2);
}

/* ECOSISTEMA “SIGILOS” */
.sigil-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap:16px;
  align-items:stretch;
  margin-top:10px;
}
@media(max-width:980px){ .sigil-grid{grid-template-columns: repeat(2, minmax(160px, 1fr));} }
@media(max-width:520px){ .sigil-grid{grid-template-columns: 1fr; } }

.sigil{
  position:relative;
  border-radius:18px;
  padding:18px 14px 16px;
  border:1px solid rgba(255,205,56,.14);
  background: linear-gradient(180deg, rgba(10,10,18,.70), rgba(6,6,12,.80));
  box-shadow: var(--shadow2);
  overflow:hidden;
  text-align:center;
  transition: transform .16s ease, border-color .16s ease, filter .16s ease;
}
.sigil:hover{transform:translateY(-2px); border-color: rgba(255,205,56,.26); filter:brightness(1.02);}

.sigil:before{
  content:"";
  position:absolute; inset:-2px;
  background:
    radial-gradient(520px 260px at 20% 10%, rgba(255,42,42,.16), transparent 60%),
    radial-gradient(520px 260px at 80% 90%, rgba(255,205,56,.14), transparent 60%);
  opacity:.75; pointer-events:none;
}
.sigil > *{position:relative; z-index:2;}

.sigil .circle{
  width:112px;height:112px;
  margin:0 auto 12px;
  border-radius:999px;
  border:1px solid rgba(255,205,56,.22);
  background:
    radial-gradient(circle at 50% 40%, rgba(255,205,56,.12), rgba(0,0,0,.35) 60%),
    radial-gradient(circle at 50% 90%, rgba(255,42,42,.10), transparent 60%);
  box-shadow: 0 0 28px rgba(255,205,56,.10), 0 0 22px rgba(255,42,42,.10);
  display:flex;align-items:center;justify-content:center;
  position:relative;
}
.sigil .circle:before{
  content:"";
  position:absolute; inset:10px;
  border-radius:999px;
  border:1px dashed rgba(255,205,56,.22);
  opacity:.85;
}
.sigil .icon{
  font-family: Cinzel, serif;
  font-weight:900;
  letter-spacing:.8px;
  color:#ffe8b0;
  font-size:18px;
  text-shadow:0 0 18px rgba(255,205,56,.10);
}

.sigil h3{
  margin:0 0 6px;
  font-family:Cinzel, serif;
  text-transform:uppercase;
  letter-spacing:1px;
  font-weight:900;
}
.sigil p{
  margin:0;
  color:rgba(255,255,255,.68);
  line-height:1.55;
  font-size:13px;
}

/* EN VIVO (marco tipo “pantalla”) */
.live-wrap{
  display:grid;
  grid-template-columns: 1.25fr .75fr;
  gap:16px;
  align-items:start;
}
@media(max-width:980px){ .live-wrap{grid-template-columns:1fr} }

.frame{
  border:1px solid rgba(255,205,56,.16);
  border-radius:18px;
  background: rgba(10,10,18,.62);
  box-shadow: var(--shadow2);
  overflow:hidden;
  position:relative;
}
.frame:before{
  content:"";
  position:absolute; inset:-2px;
  background:
    radial-gradient(520px 260px at 20% 10%, rgba(255,42,42,.14), transparent 60%),
    radial-gradient(520px 260px at 80% 90%, rgba(255,205,56,.12), transparent 60%);
  opacity:.7; pointer-events:none;
}
.frame > *{position:relative; z-index:2}

.frame-head{
  padding:12px 14px;
  border-bottom:1px solid rgba(255,205,56,.12);
  display:flex;justify-content:space-between;align-items:center;gap:10px;
}
.pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 10px;border-radius:999px;
  border:1px solid rgba(255,205,56,.22);
  background: rgba(255,205,56,.08);
  color: var(--gold);
  font-size:12px;font-weight:900;letter-spacing:.6px;
}
.pill.red{
  border-color: rgba(255,42,42,.22);
  background: rgba(255,42,42,.10);
  color:#ffb2b2;
}

.frame-body{padding:14px}
iframe{width:100%; border:0; border-radius:14px; height:340px}
@media(max-width:520px){ iframe{height:240px} }

.program-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:12px;
}
@media(max-width:980px){ .program-grid{grid-template-columns: repeat(2, minmax(0, 1fr));} }
@media(max-width:520px){ .program-grid{grid-template-columns: 1fr; } }

.program-card{
  border:1px solid rgba(255,205,56,.14);
  border-radius:16px;
  background: linear-gradient(180deg, rgba(10,10,18,.70), rgba(6,6,12,.82));
  padding:14px;
  box-shadow: 0 14px 40px rgba(0,0,0,.35);
}
.program-card .tag{
  display:inline-flex;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,205,56,.18);
  background: rgba(255,205,56,.08);
  color: var(--gold);
  font-size:11px;
  font-weight:900;
  letter-spacing:.6px;
  margin-bottom:10px;
}
.program-card h3{
  margin:0 0 8px;
  font-family:Cinzel, serif;
  text-transform:uppercase;
  letter-spacing:1px;
  font-weight:900;
  font-size:16px;
}
.program-card p{margin:0;color:rgba(255,255,255,.68);line-height:1.55;font-size:13px}

/* CTA final */
.cta{
  text-align:center;
  padding:40px 0 10px;
}
.cta h2{
  font-family:Cinzel, serif;
  text-transform:uppercase;
  letter-spacing:1.2px;
  margin:0 0 14px;
  color:#ffe8b0;
}
.cta .sub{
  color:rgba(255,255,255,.72);
  max-width:820px;
  margin:0 auto 16px;
  line-height:1.75;
}

/* Footer */
.footer{
  margin-top:44px;
  border-top:1px solid rgba(255,205,56,.10);
  padding:24px 0;
  color:rgba(255,255,255,.7);
  font-size:13px;
  text-align:center;
}

/* ✅ Ajustes extra para pantallas bajas y móvil */
@media (max-height: 760px){
  .hero{ min-height: calc(100vh - 80px); }
  .hero-inner{ transform: translateY(-6px); }
}

@media (max-width: 520px){
  .container{ padding:16px; }

  .nav{
    gap:10px;
    flex-wrap:wrap;
  }
  .navlinks{
    width:100%;
    justify-content:space-between;
    gap:10px;
  }
  .btn{ width:100%; }
}

/* ================================
   POSTER LOOK (RM STUDIOS)
   Pégalo al FINAL del CSS
================================ */

/* Fondo con textura real (si existe), encima tus gradientes */
body{
  background:
    radial-gradient(1400px 700px at 50% -10%, rgba(255,42,42,.18), transparent 60%),
    radial-gradient(1200px 650px at 50% 35%, rgba(255,205,56,.10), transparent 55%),
    radial-gradient(800px 500px at 80% 75%, rgba(255,42,42,.10), transparent 60%),
    linear-gradient(180deg, #04040a, #020208 60%, #04040a);
}

body::after{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events:none;
  z-index: 0;
  background-image: url("/assets/img/embers-bg.png");
  background-size: cover;
  background-position: center;
  opacity: .26;                 /* 🔥 sube a .35 si tu textura es oscura */
  filter: saturate(1.1) contrast(1.08);
  mix-blend-mode: screen;       /* da vibe “brasas” */
}

/* Asegura que todo el contenido esté por encima */
.container{ position: relative; z-index: 2; }

/* NAV más “poster” */
.nav{
  padding: 10px 0 18px;
}
.navlinks a{
  opacity:.78;
}
.navlinks a:hover{
  opacity:1;
  color:#ffe8b0;
  text-shadow: 0 0 18px rgba(255,205,56,.14);
}

/* HERO como “póster” (marco, líneas, ornamentos) */
.hero{
  min-height: auto; /* quitamos full viewport para que parezca poster */
  padding: clamp(34px, 5vw, 62px) clamp(16px, 3vw, 24px);
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(1px);
  border: 1px solid rgba(255,205,56,.20);
  box-shadow: 0 40px 120px rgba(0,0,0,.75);
}

.hero:before{
  content:"";
  position:absolute;
  inset: 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,205,56,.10);
  box-shadow:
    inset 0 0 0 1px rgba(255,205,56,.06),
    0 0 40px rgba(255,205,56,.06);
  pointer-events:none;
  z-index: 1;
}

.hero:after{
  opacity: .85; /* un poco menos “neblina” para que se vea el fondo */
}

/* Logo protagonista arriba, como portada */
.hero-logo{ margin: 0 0 14px; }
.hero-logo img{
  width: clamp(180px, 20vw, 360px);
  filter:
    drop-shadow(0 22px 70px rgba(0,0,0,.75))
    drop-shadow(0 0 26px rgba(255,205,56,.20));
}

/* Badge más pequeño y más “placa” */
.badge{
  margin-top: 6px;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,205,56,.22);
}

/* Tipografía + peso tipo poster */
.h1{
  font-size: clamp(34px, 4.7vw, 78px);
  letter-spacing: 1.6px;
  line-height: 1.02;
  margin: 16px 0 12px;
  text-shadow:
    0 0 42px rgba(255,205,56,.12),
    0 0 18px rgba(255,42,42,.12),
    0 14px 60px rgba(0,0,0,.55);
}

.p{
  max-width: 740px;
  font-size: clamp(13px, 1.25vw, 16px);
  opacity: .92;
  margin-bottom: 22px;
}

/* Botones más “placa” */
.btn{
  border-radius: 10px;
  padding: 12px 20px;
}
.btn-solid{
  box-shadow: 0 22px 60px rgba(255,205,56,.18);
}
.btn-frame{
  background: rgba(0,0,0,.35);
}

/* Separadores más “ornamento” */
.hr-orn{
  margin: 28px 0 22px;
  opacity: .9;
}
.hr-orn:before{
  width: 16px;
  height: 16px;
  box-shadow:
    0 0 34px rgba(255,205,56,.10),
    0 0 24px rgba(255,42,42,.12);
}

/* Secciones: más “poster” (menos aire) */
.section{ padding: 26px 0; }
.section-title{
  margin-bottom: 10px;
}
.section-sub{
  margin-bottom: 14px;
}

/* Tarjetas Ecosistema: más “sigilo circular” */
.sigil{
  background: rgba(0,0,0,.35);
  border:1px solid rgba(255,205,56,.12);
}
.sigil .circle{
  width: 120px;
  height: 120px;
}
.sigil h3{
  margin-top: 2px;
}

/* Responsive: que la portada “entre” mejor */
@media (max-width: 520px){
  .hero{ padding: 28px 14px; }
  .hero-logo img{ width: min(78vw, 320px); }
  .h1{ font-size: 34px; }
  .btn{ width: 100%; }
}

/* ===== Página tipo WIKI (Sobre mí) ===== */
.wiki{
  margin-top: 10px;
}

.wiki-head{
  position:relative;
  border-radius:22px;
  overflow:hidden;
  border:1px solid rgba(255,205,56,.18);
  background: rgba(0,0,0,.32);
  box-shadow: var(--shadow);
  padding: clamp(18px, 3vw, 26px);
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:18px;
  align-items:center;
}

.wiki-title .badge{
  margin-bottom: 10px;
}

.wiki-h1{
  font-family: Cinzel, serif;
  text-transform:uppercase;
  letter-spacing:1.4px;
  color:#ffe8b0;
  margin: 0 0 6px;
  font-size: clamp(28px, 3.8vw, 54px);
  text-shadow:0 0 34px rgba(255,205,56,.12), 0 0 18px rgba(255,42,42,.12);
}

.wiki-sub{
  margin:0;
  color: rgba(255,255,255,.74);
  line-height:1.7;
  max-width: 720px;
}

.wiki-photo{
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(255,205,56,.14);
  background: rgba(0,0,0,.25);
  aspect-ratio: 1 / 1;
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
}

.wiki-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter: contrast(1.05) saturate(1.05);
}

/* cuerpo */
.wiki-body{
  display:grid;
  grid-template-columns: 1.4fr .6fr;
  gap:16px;
  margin-top:16px;
}

.wiki-panel{
  border:1px solid rgba(255,205,56,.14);
  background: rgba(10,10,18,.60);
  border-radius:18px;
  padding:18px;
  box-shadow: var(--shadow2);
}

.wiki-h2{
  font-family:Cinzel, serif;
  text-transform:uppercase;
  letter-spacing:1.1px;
  margin: 0 0 12px;
  color:#ffe8b0;
}

.wiki-text{
  color: rgba(255,255,255,.78);
  line-height:1.9;
  font-size: 14px;
}

.wiki-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:12px;
}

.wiki-card{
  border:1px solid rgba(255,205,56,.14);
  border-radius:16px;
  background: linear-gradient(180deg, rgba(10,10,18,.70), rgba(6,6,12,.82));
  padding:14px;
  box-shadow: 0 14px 40px rgba(0,0,0,.35);
}

.wiki-card .tag{
  display:inline-flex;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,205,56,.18);
  background: rgba(255,205,56,.08);
  color: var(--gold);
  font-size:11px;
  font-weight:900;
  letter-spacing:.6px;
  margin-bottom:10px;
}

.wiki-card h3{
  margin:0 0 8px;
  font-family:Cinzel, serif;
  text-transform:uppercase;
  letter-spacing:1px;
  font-weight:900;
  font-size:16px;
}

.wiki-card p{
  margin:0;
  color:rgba(255,255,255,.68);
  line-height:1.55;
  font-size:13px;
}

.wiki-links{
  margin-top:14px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

/* ficha rápida */
.wiki-facts{
  display:grid;
  gap:10px;
}
.fact{
  display:flex;
  justify-content:space-between;
  gap:10px;
  border-bottom:1px solid rgba(255,205,56,.10);
  padding-bottom:10px;
}
.fact span{
  color: rgba(255,255,255,.66);
}
.fact b{
  color:#ffe8b0;
}

/* responsive */
@media(max-width:980px){
  .wiki-head{ grid-template-columns: 1fr; }
  .wiki-body{ grid-template-columns: 1fr; }
  .wiki-grid{ grid-template-columns: 1fr; }
}
@media(max-width:520px){
  .wiki-links .btn{ width:100%; }
}
/* =========================
   ADMIN FORMS (RM STUDIOS)
   ========================= */
.admin-wrap{max-width:980px;margin:0 auto}
.admin-panel{padding:22px}

.admin-success{
  color:#7CFFB2;
  font-weight:800;
  margin:0 0 12px;
}
.admin-error{
  color:#ff6b6b;
  font-weight:800;
  margin:0 0 12px;
}

.admin-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
  align-items:start;
}
@media(max-width:900px){ .admin-grid{grid-template-columns:1fr;} }

.admin-field{display:flex;flex-direction:column;gap:8px}
.admin-field label{
  font-weight:900;
  letter-spacing:.2px;
  color:rgba(255,255,255,.85);
}

.admin-input,
.admin-textarea{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(255,205,56,.22);
  background: rgba(0,0,0,.28);
  color:#fff;
  outline:none;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.admin-input:focus,
.admin-textarea:focus{
  border-color: rgba(255,205,56,.40);
  box-shadow: 0 0 0 3px rgba(255,205,56,.12);
}

.admin-textarea{
  min-height:260px;
  resize:vertical;
  line-height:1.7;
}

.admin-photo{
  display:grid;
  grid-template-columns: 160px 1fr;
  gap:14px;
  align-items:center;
}
@media(max-width:520px){ .admin-photo{grid-template-columns:1fr;} }

.admin-thumb{
  width:160px;height:160px;
  border-radius:16px;
  border:1px solid rgba(255,205,56,.18);
  background: rgba(0,0,0,.25);
  overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.admin-thumb img{width:100%;height:100%;object-fit:cover;display:block}

.admin-file{
  padding:12px;
  border-radius:14px;
  border:1px dashed rgba(255,205,56,.22);
  background: rgba(0,0,0,.18);
}
.admin-file small{display:block;margin-top:8px;opacity:.75}

.admin-actions{margin-top:16px;display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-start}


.about-photo{
  width:100%;
  max-width:260px; /* aquí puedes subir a 280 o 300 si quieres */
  border-radius:16px;
  border:1px solid rgba(255,205,56,.25);
  cursor:zoom-in;
  transition:transform .25s ease, box-shadow .25s ease;
}
.about-photo:hover{
  transform:scale(1.04);
  box-shadow:0 0 0 3px rgba(255,205,56,.2);
}
/* Igualar Herramientas (span) a los enlaces del menú (a) */
.navlinks .nav-trigger{
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  line-height: inherit;
  color: inherit;

  /* si tus <a> tienen el mismo padding/altura visual, esto lo iguala */
  display: inline-flex;
  align-items: center;
}

/* Copiar peso EXACTO de los <a> del menú */
.navlinks a,
.navlinks .nav-trigger{
  font-weight: 600; /* <-- si tus links usan otro, cambia este número */
}

/* Si tus <a> tienen estilo especial (text-shadow o algo), herédalo */
.navlinks .nav-trigger{
  text-shadow: inherit;
}
/* ===== FIX DEFINITIVO: Dropdown Herramientas NO debe empujar el menú ===== */

/* Asegura que el bloque del dropdown se comporte como un item del menú */
.topbar .navlinks .nav-dropdown{
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* El submenu JAMÁS debe estar en el flujo (por eso ahora te baja "Calculadora Spotify") */
.topbar .navlinks .nav-submenu{
  position: absolute !important;
  top: calc(100% + 12px) !important;
  right: 0 !important;
  left: auto !important;

  display: block !important;    /* display bloque dentro del panel */
  width: max-content !important;
  min-width: 240px !important;

  padding: 10px !important;
  margin: 0 !important;

  background: rgba(11,11,20,0.96) !important;
  border: 1px solid rgba(255,205,56,0.22) !important;
  border-radius: 14px !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.55) !important;

  /* Oculto por defecto */
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;

  transform: translateY(-6px) !important;
  transition: .18s ease !important;

  z-index: 99999 !important;
}

/* Mostrar SOLO al pasar el mouse por Herramientas */
.topbar .navlinks .nav-dropdown:hover .nav-submenu{
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}

/* Estilo del link dentro del submenu */
.topbar .navlinks .nav-submenu .nav-sublink{
  display: block !important;
  padding: 10px 12px !important;
  border-radius: 12px !important;
  text-decoration: none !important;

  color: rgba(255,255,255,0.88) !important;
  border: 1px solid rgba(255,205,56,0.10) !important;
  background: rgba(255,205,56,0.03) !important;
}

.topbar .navlinks .nav-submenu .nav-sublink:hover{
  color: #ffcd38 !important;
  border-color: rgba(255,205,56,0.32) !important;
  background: rgba(255,205,56,0.08) !important;
}

/* ===== Dropdown Herramientas: SIN hover gap (clic estable) ===== */
.navlinks .nav-dropdown{
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Trigger */
.navlinks .nav-trigger{
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;

  color: inherit;
  font: inherit;
  font-weight: 600;
  cursor: default;

  display: inline-flex;
  align-items: center;
}

.navlinks .nav-trigger::after{
  content: "▾";
  margin-left: 6px;
  font-size: .85em;
  opacity: .65;
}

/* Submenu flotante */
.navlinks .nav-submenu{
  position: absolute;
  top: 100%;            /* <- sin gap */
  right: 0;
  min-width: 260px;

  margin-top: 10px;     /* separación visual, sin romper hover */
  padding: 10px;

  background: rgba(11,11,20,0.96);
  border: 1px solid rgba(255,205,56,0.22);
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.55);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px);
  transition: .18s ease;
  z-index: 99999;
}

/* Puente invisible: evita que se cierre al mover el mouse */
.navlinks .nav-submenu::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-12px;     /* crea un puente hacia el trigger */
  height:12px;
}

/* Mostrar al hover */
.navlinks .nav-dropdown:hover .nav-submenu{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

/* Link */
.navlinks .nav-sublink{
  display: block;
  padding: 12px 14px;
  border-radius: 12px;
  text-decoration: none;

  color: rgba(255,255,255,0.88);
  border: 1px solid rgba(255,205,56,0.10);
  background: rgba(255,205,56,0.03);
  transition: .18s ease;
}

.navlinks .nav-sublink:hover{
  color: #ffcd38;
  border-color: rgba(255,205,56,0.32);
  background: rgba(255,205,56,0.08);
}

/* ===== TOPBAR: dejarlo idéntico en todas las páginas (incluida calculadora) ===== */
.topbar{
  position: sticky;
  top: 0;
  z-index: 100000;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: rgba(4,4,10,0.60);
  border-bottom: 1px solid rgba(255,205,56,0.12);
}

.topbar .topbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 18px;
  padding: 16px 0;
}

/* Marca izquierda */
.brand{
  display:flex;
  align-items:center;
  gap: 10px;
  text-decoration:none;
}

.brand-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:#ffcd38;
  box-shadow: 0 0 18px rgba(255,205,56,0.35);
  display:inline-block;
}

.brand-name{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 800;
  letter-spacing: .08em;
  color: rgba(255,255,255,0.92);
  text-transform: uppercase;
}

/* Links del menú */
.navlinks{
  display:flex;
  align-items:center;
  gap: 24px;
}

.navlinks a{
  color: rgba(255,255,255,0.80);
  text-decoration:none;
  font-weight: 600;
  transition: .18s ease;
}

.navlinks a:hover{
  color:#ffcd38;
}

/* Que el título gigante de la calculadora no se pegue al menú */
.section{
  padding-top: 38px;
}
/* =========================
   NAV RESPONSIVE (MÓVIL)
   ========================= */

@media (max-width: 768px) {

  .topbar-inner {
    flex-wrap: wrap;
    gap: 10px;
  }

  .navlinks {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    font-size: 14px;
  }

  .navlinks a,
  .nav-trigger {
    white-space: nowrap;
  }

  /* Dropdown */
  .nav-dropdown {
    position: relative;
  }

  .nav-submenu {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 220px;
    z-index: 999;
  }
}
.nav-trigger {
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
/* =========================
   FIX DROPDOWN MÓVIL (Herramientas)
   Evita que "Calculadora..." se corte
   ========================= */

@media (max-width: 768px){

  .topbar{
    overflow: visible !important;
  }

  .nav-dropdown{
    position: relative !important;
  }

  /* Submenu: en móvil anclado a la izquierda y ancho adaptable */
  .nav-submenu{
    left: 0 !important;
    right: auto !important;

    width: min(92vw, 320px) !important;   /* ocupa casi toda la pantalla pero con límite */
    min-width: 0 !important;

    top: 100% !important;
    margin-top: 10px !important;
  }

  /* Evita cortes de texto */
  .nav-sublink{
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}
/* En móvil: abre el submenu cuando el botón tiene focus */
@media (max-width: 768px){
  .nav-dropdown:focus-within .nav-submenu{
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
  }
}

/* =========================================================
   HEADER / MENU — FIX MÓVIL (GLOBAL)
   - Sin scroll horizontal
   - Menú tipo "botón" (2 filas si hace falta)
   - Dropdown usable en móvil con tap
   ========================================================= */

@media (max-width: 768px){

  .topbar{
    position: sticky;
    top: 0;
    z-index: 9999;
    background: rgba(4,4,10,.78);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(255,205,56,.12);
  }

  .topbar .topbar-inner{
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 12px;
    padding-bottom: 10px;
  }

  .topbar .brand{
    width: 100%;
  }

  /* Menú: NO scroll. Se parte en 2 filas si hace falta */
  .topbar .navlinks{
    width: 100%;
    display: flex;
    flex-wrap: wrap;          /* clave */
    overflow: visible;        /* clave */
    gap: 10px;
    padding: 4px 0 2px;
  }

  .topbar .navlinks > a,
  .topbar .navlinks .nav-trigger{
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 10px 12px;
    border-radius: 999px;

    font-size: 14px;
    font-weight: 650;
    letter-spacing: .2px;
    text-decoration: none;

    color: rgba(255,255,255,.92);
    background: rgba(11,11,20,.70);
    border: 1px solid rgba(255,205,56,.14);
    box-shadow: 0 10px 30px rgba(0,0,0,.22);
  }

  /* Dropdown */
  .nav-dropdown{
    position: relative;
  }

  .nav-trigger{
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
  }

  /* Submenu oculto por defecto */
  .nav-submenu{
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    width: min(92vw, 320px);
    z-index: 99999;

    background: rgba(11,11,20,.95);
    border: 1px solid rgba(255,205,56,.18);
    border-radius: 16px;
    box-shadow: 0 18px 50px rgba(0,0,0,.55);

    padding: 10px;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(6px);
    transition: .16s ease;
  }

  /* Abrir con tap (focus) */
  .nav-dropdown:focus-within .nav-submenu{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }

  .nav-sublink{
    display: block;
    padding: 12px 12px;
    border-radius: 12px;
    text-decoration: none;

    color: rgba(255,255,255,.92);
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,205,56,.10);
  }
}

.nav-caret{
  display:inline-block;
  width: 10px;
  height: 10px;
  margin-left: 6px;
  border-right: 2px solid rgba(255,255,255,.75);
  border-bottom: 2px solid rgba(255,255,255,.75);
  transform: rotate(45deg) translateY(-1px);
  opacity: .85;
}
.nav-caret::before{ content:none !important; }

/* ===== NAV MÓVIL: oculto por defecto ===== */
.nav-mobile{
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 99999;
}

/* cuando está abierto */
.nav-mobile.is-open{
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 18px;
}

/* bloque interno */
.nav-mobile-card{
  width: min(520px, 92vw);
  background: rgba(10,10,18,.95);
  border: 1px solid rgba(255,205,56,.18);
  border-radius: 18px;
  padding: 14px;
}

/* si bloqueas scroll */
.no-scroll{ overflow: hidden; }
/* ❌ Ocultar botón móvil en desktop */
@media (min-width: 769px) {
  .nav-toggle {
    display: none !important;
  }
}
<style>
.rm-donate{
  margin-top: 16px;
  padding: 16px;
  border: 1px solid rgba(255,205,56,.18);
  background: rgba(0,0,0,.30);
  border-radius: 18px;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
}

.rm-donate-text{
  display:flex;
  flex-direction:column;
  gap: 6px;
}

.rm-donate-text strong{
  font-family:"Cinzel",serif;
  letter-spacing:.4px;
}

.rm-donate-text span{
  opacity:.85;
  font-size: 13px;
  line-height: 1.4;
}

.rm-donate-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 11px 16px;
  border-radius: 999px;
  text-decoration:none;
  color: #ffcd38;

  border: 1px solid rgba(255,205,56,.35);
  background: rgba(255,205,56,.10);
  white-space: nowrap;
}

.rm-donate-btn:hover{
  background: rgba(255,205,56,.14);
}

@media (max-width: 640px){
  .rm-donate{
    flex-direction:column;
    align-items:stretch;
    text-align:center;
  }
  .rm-donate-btn{
    width:100%;
  }
}

</style>