:root{
  --bg:#07070b;
  --panel: rgba(17,17,24,.60);
  --panel2: rgba(21,21,35,.55);
  --text:#f3f3f7;
  --muted:#b8b8c8;
  --line: rgba(255,255,255,.10);

  --purple:#6a02b2;
  --purple2:#7b18c8;

  --shadow: 0 18px 55px rgba(0,0,0,.62);
  --radius: 18px;

  /* glow */
  --glow: 0 0 0 1px rgba(106,2,178,.45), 0 0 22px rgba(106,2,178,.28);
  --glow-soft: 0 0 0 1px rgba(106,2,178,.25), 0 0 16px rgba(106,2,178,.18);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color: var(--text);

  background:
    radial-gradient(900px 420px at 50% -120px, rgba(106,2,178,.22), transparent 60%),
    radial-gradient(700px 380px at 18% 12%, rgba(255,255,255,.06), transparent 58%),
    radial-gradient(700px 420px at 82% 18%, rgba(123,24,200,.10), transparent 62%),
    var(--bg);
}

a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding-left:18px; }
li{ color: var(--muted); margin: 8px 0; }

.no-scroll{ overflow:hidden; }

/* ================= HEADER ================= */
.site-header{
  position: sticky;
  top:0;
  z-index: 10;
  background: rgba(7,7,11,.55);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.site-header__inner{
  max-width: 1100px;
  margin: 0 auto;
  padding: 8px 20px;
  display:flex;
  justify-content:center;
  align-items:center;
}

.brand{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  line-height: 1;
}

/* 🔥 LOGO PNG pequeño, sin deformarse, y con transparencia elegante */
.brand__logo{
  height: 35px;        /* ← reduce MÁS. Ajusta 14–18 si quieres */
  width: auto;         /* ← no deforma */
  max-width: 140px;    /* ← evita que se vaya ancho */
  display: block;

  opacity: .82;        /* ← transparencia */
  filter: drop-shadow(0 0 12px rgba(106,2,178,.16));
  transition: opacity .15s ease, filter .15s ease;
}
.brand__logo:hover{
  opacity: .95;
  filter: drop-shadow(0 0 18px rgba(106,2,178,.22));
}

/* En desktop sube apenas (para no volverlo gigante) */
@media (min-width: 860px){
  .brand__logo{ height: 18px; }
}

.brand__text{
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 14px;
}

/* ================= LAYOUT ================= */
.page{
  max-width: 1100px;
  margin: 0 auto;
  padding: 22px 18px 36px;
}

.hero{
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;

  border: 1px solid rgba(255,255,255,.10);
  background: rgba(17,17,24,.50);
  box-shadow: var(--shadow);
}

.hero__media{
  position: relative;
  height: clamp(360px, 58vh, 560px);
  background: linear-gradient(180deg, rgba(106,2,178,.14), rgba(0,0,0,.45));
}

.hero__img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: cover;
  transform: scale(1.02);
  filter: contrast(1.05) brightness(.82);
}

.hero__fallback{
  background:
    radial-gradient(800px 420px at 40% 20%, rgba(106,2,178,.25), transparent 55%),
    radial-gradient(600px 320px at 70% 60%, rgba(255,255,255,.07), transparent 60%),
    #07070b;
}

.hero__overlay{
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.78));
}

.hero__content{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction: column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding: 22px;
  gap: 14px;
}

.hero__title{
  margin: 0;
  font-size: clamp(26px, 3.2vw, 44px);
  letter-spacing: .02em;
}

.hero__subtitle{
  margin: 0;
  max-width: 760px;
  color: rgba(255,255,255,.72);
  line-height: 1.55;
  font-size: 15.5px;
}

.hero__note{
  margin: 0;
  color: rgba(255,255,255,.64);
  font-size: 12.8px;
}

/* ================= INFO CARDS ================= */
.info{
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 14px;
}
@media (min-width: 860px){
  .info{ grid-template-columns: 1fr 1fr; }
}

.info__card{
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.10);
  background: rgba(17,17,24,.52);
  padding: 16px;
  backdrop-filter: blur(10px);
}

.info__card h2{
  margin:0 0 10px;
  font-size: 16px;
  letter-spacing:.02em;
}

/* ================= BUTTONS ================= */
.btn{
  border-radius: 14px;
  padding: 12px 16px;
  font-weight: 700;
  letter-spacing: .02em;
  cursor: pointer;
  user-select: none;

  transition: transform .12s ease, opacity .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease, color .12s ease;
}

.btn:active{ transform: scale(.98); }

/* ✅ BOTÓN PRINCIPAL: outline morado iluminado, fondo negro, letras moradas */
.btn--primary{
  background: rgba(0,0,0,.55);
  color: rgba(123,24,200,.95);
  border: 1px solid rgba(106,2,178,.72);
  box-shadow: var(--glow-soft);
}

.btn--primary:hover{
  box-shadow: var(--glow);
  border-color: rgba(106,2,178,.92);
  color: rgba(195,140,255,.95);
}

.btn--ghost{
  background: transparent;
  color: rgba(255,255,255,.82);
  border: 1px solid rgba(255,255,255,.14);
}

.btn--ghost:hover{
  background: rgba(255,255,255,.06);
}

.iconbtn{
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.92);
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
}
.iconbtn:hover{
  background: rgba(255,255,255,.07);
  border-color: rgba(106,2,178,.55);
}

/* ================= FOOTER ================= */
.site-footer{
  border-top: 1px solid rgba(255,255,255,.08);
  background: rgba(7,7,11,.55);
  backdrop-filter: blur(12px);
}

.site-footer__inner{
  max-width: 1100px;
  margin: 0 auto;
  padding: 18px;
  display:flex;
  justify-content:center;
  align-items:center;
}

.footer-mail{
  color: rgba(255,255,255,.74);
  font-size: 13.5px;
  letter-spacing:.02em;
}
.footer-mail:hover{
  color: rgba(255,255,255,.95);
}