/* ==============================
  0) VARIABLES + BASE (ÚNICO BLOQUE)
============================== */
:root{
  --bg-1:#14051f;
  --bg-2:#050816;

  --neon-cyan:#27F5FF;
  --neon-cyan-2:#00C2FF;

  --pink:#ff6bd5;
  --pink-2:#ff9dff;

  --violet-deep:#2A0B3D;
  --violet-deep-2:#14051F;

  --text:#fdf7ff;
  --text-2:#e6f7ff;

  --card: rgba(16, 5, 30, 0.92);
  --card-2: rgba(23, 8, 44, 0.92);

  --border: rgba(255,255,255,.10);
  --border-2: rgba(255,255,255,.18);

  --radius: 18px;

  /* Fondo overlay (imagen) */
  --bg-overlay: url("img/bg-overlay.png");
  --bg-overlay-opacity: .22;

  /* Gradiente principal (tema claro base) */
  --bg-grad:
    radial-gradient(circle at 18% 22%, rgba(255, 130, 255, .20) 0, transparent 48%),
    radial-gradient(circle at 80% 20%, rgba(0, 255, 240, .16) 0, transparent 48%),
    radial-gradient(circle at 20% 85%, rgba(168, 120, 255, .18) 0, transparent 55%),
    linear-gradient(180deg, #0a0513 0%, #14051f 50%, #050816 100%);

  /* Header grad por defecto */
  --header-grad: linear-gradient(90deg,
    #14051F 0%,
    #2A0B3D 55%,
    rgba(39,245,255,.85) 100%
  );
}

/* ==============================
  1) RESET + BODY + OVERLAY
============================== */
*{ box-sizing:border-box; }

body{
  margin:0;
  min-height:100vh;
  font-family:"Kanit", sans-serif;
  color: var(--text);
  background: var(--bg-grad);
  position: relative;
}

/* overlay semitransparente */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: var(--bg-overlay);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: var(--bg-overlay-opacity);
  mix-blend-mode: screen;
}

/* ==============================
  2) TEMA OSCURO (variables)
============================== */
body.tema-dark{
  color: var(--text-2);

  --bg-grad:
    radial-gradient(circle at 14% 20%, rgba(255, 0, 255, .18) 0, transparent 50%),
    radial-gradient(circle at 85% 18%, rgba(0, 255, 170, .14) 0, transparent 48%),
    radial-gradient(circle at 25% 85%, rgba(120, 160, 255, .18) 0, transparent 55%),
    linear-gradient(180deg, #030512 0%, #061a2b 55%, #050816 100%);

  --header-grad: linear-gradient(90deg ,
    #050816 0%,
    #061a2b 55%,
    rgba(0,255,170,.70) 100%
  );
}

/* Glow sutil general */
.main-nav, .badge-body, .pricing-config, .pricing-table-demo, .miniGameCard, .contact-form, .news-card{
  box-shadow:
    0 18px 50px rgba(0,0,0,.55),
    0 0 30px rgba(255,107,213,.08),
    0 0 28px rgba(39,245,255,.07);
}

/* ==============================
  3) BOTÓN CAMBIO DE TEMA (#btnTema) - solo icono + tooltip
============================== */
#btnTema{
  position:fixed;
  top:15px;
  right:15px;
  z-index:2000;

  width:48px;
  height:48px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.20);

  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;

  /* neon distinto (verde/menta) */
  background: radial-gradient(circle at 30% 30%, #ffffff 0%, #00ffa6 35%, #00c2ff 70%, rgba(0,0,0,0) 100%);
  box-shadow:
    0 0 16px rgba(0,255,166,.45),
    0 0 34px rgba(0,194,255,.25);

  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}

#btnTema .icon{
  font-size: 1.25rem;
  filter: drop-shadow(0 0 8px rgba(0,255,166,.45));
}

#btnTema:hover{
  transform: translateY(-1px) scale(1.03);
  box-shadow:
    0 0 18px rgba(255,107,213,.35),
    0 0 40px rgba(39,245,255,.28);
  filter: saturate(1.25);
}

/* Tooltip (etiqueta) */
#btnTema::after{
  content: attr(data-tip);
  position:absolute;
  right: 58px;
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  opacity:0;

  background: rgba(8, 10, 25, .80);
  border: 1px solid rgba(255,255,255,.18);
  color:#fff;

  padding: .32rem .55rem;
  border-radius: 10px;
  font-size: .78rem;
  letter-spacing: .02em;
  white-space: nowrap;

  box-shadow: 0 0 18px rgba(39,245,255,.18);
  transition: opacity .18s ease, transform .18s ease, border-color .18s ease;
}

#btnTema:hover::after{
  opacity:1;
  transform: translateY(-50%) translateX(0px);
  border-color: rgba(39,245,255,.32);
}

/* tooltip cambia color según tema (detalle visual) */
body.tema-dark #btnTema::after{
  box-shadow: 0 0 18px rgba(255,107,213,.18);
  border-color: rgba(255,107,213,.28);
}
#btnTema::before{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:50%;
  background: radial-gradient(circle, rgba(39,245,255,.25), transparent 60%);
  z-index:-1;
}
/* ===== FIX: que el botón del balde resalte siempre ===== */
#btnTema{
  /* backplate oscuro para contraste */
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.95) 0%, rgba(0,255,166,0.95) 32%, rgba(0,194,255,0.85) 68%, rgba(0,0,0,0) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0.55));

  /* contorno doble */
  border: 1px solid rgba(255,255,255,0.55);
  outline: 2px solid rgba(39,245,255,0.65);
  outline-offset: 2px;

  /* aro extra glow */
  box-shadow:
    0 0 0 3px rgba(0,0,0,0.35),
    0 0 18px rgba(39,245,255,.55),
    0 0 42px rgba(0,255,166,.30),
    0 18px 40px rgba(0,0,0,.45);
}

#btnTema .icon{
  font-size: 1.35rem;
  /* sombra para que el ícono se lea */
  filter:
    drop-shadow(0 0 10px rgba(0,255,166,.55))
    drop-shadow(0 0 6px rgba(0,0,0,.55));
}

/* Hover: cambia “aro” y da más punch */
#btnTema:hover{
  outline-color: rgba(255,107,213,0.70);
  box-shadow:
    0 0 0 3px rgba(0,0,0,0.45),
    0 0 18px rgba(255,107,213,.42),
    0 0 46px rgba(39,245,255,.35),
    0 22px 50px rgba(0,0,0,.55);
}

/* Active (click) */
#btnTema:active{
  transform: translateY(0px) scale(0.98);
}
@media (max-width: 768px){
  #btnTema{ width:46px; height:46px; }
}

/* ==============================
  4) LOGO STICKER
============================== */
.logo-sticker{
  position: fixed;
  top: 10px;
  left: 10px;
  width: 115px;
  z-index: 2100;
  filter: drop-shadow(0 0 10px rgba(255, 107, 213, 0.55));
  transition: transform .25s ease, opacity .25s ease;
}
.logo-sticker:hover{ transform: rotate(-3deg) scale(1.04); }

@media (max-width: 768px){
  .logo-sticker{
    top: 8px;
    left: 8px;
    width: 90px;
  }
}

/* ==============================
  5) HEADER + NAV
============================== */
.top-bar{
  padding: 3.4rem 1rem 1.1rem;
  text-align:center;
  background: var(--header-grad);
  box-shadow: 0 4px 20px rgba(0,0,0,.5);
}

.top-head h1{
  margin:0;
  font-size:2.6rem;
  color:#fff;
  text-shadow: 0 0 18px rgba(39,245,255,.25);
}
.top-sub{
  margin:.45rem 0 0;
  font-size:1rem;
  color:#eafcff;
  opacity:.9;
}

.main-nav{
  position: sticky;
  top: 10px;
  z-index: 999;

  max-width: 1200px;
  margin: 1rem auto 0;
  width: calc(100% - 24px);

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;

  padding:.65rem .9rem;
  border-radius:14px;

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  background: rgba(8, 10, 25, .35);
  border: 1px solid var(--border);
}

.nav-logo{
  font-weight:800;
  letter-spacing:.3px;
  color:#fff;
  text-decoration:none;
  font-size:.95rem;
  opacity:.95;
}

.nav-links{
  display:flex;
  gap:.9rem;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.nav-links a{
  text-decoration:none;
  font-size:.9rem;
  color:#fff;
  padding:.35rem .6rem;
  border-radius:999px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  opacity:.92;
}
.nav-links a:hover{
  background: rgba(39,245,255,.10);
  border-color: rgba(39,245,255,.25);
  box-shadow: 0 0 14px rgba(39,245,255,.18);
}

.nav-toggle{
  display:none;
  padding:.45rem .75rem;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color:#fff;
  cursor:pointer;
}

/* Mobile nav (corregido) */
@media (max-width: 720px){
  .nav-toggle{ display:block; }

  .nav-links{
    display:none;
    width:100%;
    margin-top:.6rem;
    padding:.6rem;
    border-radius:12px;
    background: rgba(8, 10, 25, .55);
    border: 1px solid rgba(255,255,255,.10);

    flex-direction:column;
    gap:.55rem;
  }
  .nav-links.is-open{ display:flex; }
  .nav-links a{ width:100%; text-align:center; }
}

/* ==============================
  6) BURBUJA MANIFIESTO + POPUP
============================== */
/* Burbuja Manifiesto (más pequeña) */
.manifest-bubble{
  position:fixed;
  width:88px;
  height:88px;
  border-radius:50%;
  background: radial-gradient(circle, rgba(255,255,255,0.9), rgba(255,255,255,0.32));
  backdrop-filter: blur(6px);
  box-shadow: 0 0 16px rgba(255,255,255,0.35);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:1500;
  user-select:none;
}
.bubble-icon{ font-size:1.15rem; }
.bubble-text{
  font-size:.78rem;
  color:#5a257a;
  margin-top:.15rem;
}

/* Burbuja aún más compacta en móvil */
@media (max-width: 520px){
  .manifest-bubble{
    width:74px;
    height:74px;
  }
  .bubble-text{ font-size:.72rem; }
}


.popup-overlay{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.7);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:1900;
}

.popup-note{
  background:#fffaf4;
  max-width:480px;
  width: calc(100% - 32px);
  padding:2rem;
  border-radius:16px;
  position:relative;
  box-shadow: 0 12px 28px rgba(0,0,0,.5);
  border:2px solid #ffbf99;
}

.popup-note::before{
  content:"";
  position:absolute;
  top:-18px;
  left:30%;
  width:40%;
  height:20px;
  background: repeating-linear-gradient(135deg, var(--pink), var(--pink) 8px, #ffd1f4 8px, #ffd1f4 16px);
  border-radius:4px;
}

.popup-note h2{ margin-top:0; color:#b5507f; }
#textoManifesto{ font-style:italic; line-height:1.7; color:#333; }
#textoManifesto strong{ color:#bf3b88; }

.popup-actions{ margin-top:1rem; text-align:right; }
.popup-actions button{
  background: var(--pink);
  border:none;
  padding:.6rem 1.2rem;
  border-radius:999px;
  color:#fff;
  cursor:pointer;
}

.popup-close{
  position:absolute;
  top:10px;
  right:10px;
  border:none;
  background:transparent;
  font-size:1.2rem;
  cursor:pointer;
}

body.tema-dark .popup-note{
  background: #05081a;
  border-color: var(--neon-cyan);
}
body.tema-dark #textoManifesto{ color: var(--text-2); }
body.tema-dark #textoManifesto strong{ color: var(--neon-cyan); }

/* ==============================
  7) TITULOS DE SECCIÓN
============================== */
.sectionTitle{
  text-align:center;
  color:#ffb6ff;
  font-size:2rem;
  margin: 0 0 8px;
  letter-spacing:.5px;
}
.sectionSub{
  text-align:center;
  opacity:.85;
  margin: 0 0 18px;
}

/* ==============================
  8) ABOUT
============================== */
.about-section{
  padding: 3rem 1rem 2rem;
  display:flex;
  justify-content:center;
}

.about-badge{ position:relative; max-width:820px; }
.badge-strings::before,
.badge-strings::after{
  content:"";
  position:absolute;
  top:-40px;
  width:2px;
  height:40px;
  background:#fdf7ff;
}
.badge-strings::before{ left:25%; }
.badge-strings::after{ right:25%; }

.badge-body{
  background: rgba(20, 11, 35, 0.95);
  border-radius:24px;
  padding:1.8rem;
  box-shadow: 0 14px 30px rgba(0,0,0,.7);
  display:flex;
  gap:1.5rem;
  align-items:center;
}

.badge-photo img{
  width:180px;
  height:180px;
  border-radius:20px;
  object-fit:cover;
  box-shadow: 0 0 18px rgba(255,255,255,.12);
}

.badge-text h2{
  margin:0;
  color:#ff9fee;
  font-size:1.8rem;
  text-align:left;
}
.badge-alias{
  margin:.4rem 0 .8rem;
  color:#e0c3ff;
  font-size:.95rem;
}
.badge-text p{ margin:.2rem 0; font-size:.98rem; color:#fce9ff; }
.badge-tech{ color:#a5c1ff; font-size:.9rem; }

body.tema-dark .badge-body{ background: rgba(5, 8, 30, 0.96); }

@media (max-width: 768px){
  .badge-body{ flex-direction:column; text-align:center; }
  .badge-text h2{ text-align:center; }
}

/* ==============================
  9) SERVICIOS
============================== */
.pricing-section{ padding: 2.5rem 1rem; }
.pricing-section h2{ text-align:center; color:#ffb6ff; }

.pricing-intro{
  text-align:center;
  font-size:.95rem;
  max-width:620px;
  margin:.5rem auto 2rem;
  color:#f9e6ff;
}

.pricing-grid{
  max-width:1080px;
  margin:0 auto;
  display:grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap:1.8rem;
}

.pricing-config{
  background: var(--card);
  border-radius:20px;
  padding:1.6rem;
  border:1px solid var(--border);
}
.pricing-config h3{ margin-top:0; color:#ff9fee; }

.config-item{ display:block; margin-bottom:.6rem; font-size:.95rem; }
.config-item input{ margin-right:.4rem; }

.pricing-result{
  margin-top:1.2rem;
  padding:1rem;
  border-radius:16px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
}
.pricing-number{
  font-size:1.7rem;
  font-weight:700;
  color:#00ffa6;
}

.pricing-table-demo{
  background: var(--card-2);
  border-radius:20px;
  padding:1.6rem;
  border:1px solid var(--border);
}
.pricing-table-demo h3{ margin-top:0; color:#ffb6ff; }

.pricing-table-demo table{
  width:100%;
  border-collapse:collapse;
  font-size:.9rem;
  margin-bottom:1rem;
}
.pricing-table-demo th,
.pricing-table-demo td{
  border-bottom: 1px solid rgba(255,255,255,.10);
  padding:.5rem;
}

.demo-title{ font-size:.9rem; margin-bottom:.5rem; }

.demo-page{
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.2);
}
.demo-header,
.demo-footer{
  padding:.4rem;
  text-align:center;
  font-size:.8rem;
  background: rgba(255,255,255,.1);
}
.demo-body{ display:grid; grid-template-columns: 2fr 1fr; }
.demo-block{ padding:.6rem; font-size:.8rem; }
.demo-main{ background: rgba(255,255,255,.04); }
.demo-side{ background: rgba(255,255,255,.08); }

@media (max-width: 900px){
  .pricing-grid{ grid-template-columns: 1fr; }
}

/* ==============================
  10) GALERÍA + MODAL
============================== */
.gallery-section{ padding: 2.5rem 1rem; }
.gallery-section h2{ text-align:center; color:#ffb6ff; }
.gallery-intro{
  text-align:center;
  font-size:.9rem;
  color:#f9e6ff;
  margin-bottom:1.5rem;
}

.gallery-grid{
  max-width:980px;
  margin:0 auto;
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap:1.2rem;
}

.file-card{
  position:relative;
  background:#1e0d33;
  border-radius:16px;
  padding:.7rem .7rem .9rem;
  box-shadow: 0 10px 24px rgba(0,0,0,.75);
  cursor:pointer;
  transition: transform .2s ease, box-shadow .2s ease;
}
.file-card::before{
  content:"";
  position:absolute;
  inset: 6px 6px auto auto;
  height:6px;
  border-radius:999px;
  background: linear-gradient(90deg, #ffb6ff, #00f0ff);
  opacity:.6;
}
.file-card:hover{
  transform: translateY(-6px) rotate(-1deg);
  box-shadow: 0 14px 30px rgba(0,0,0,.9);
}
.file-tab{
  width:40%;
  height:10px;
  border-radius:10px 10px 0 0;
  background: linear-gradient(90deg, var(--pink), #b36bff);
  margin-bottom:.4rem;
}
.file-title{
  margin:.5rem 0 0;
  font-size:.85rem;
  color:#ffe9ff;
  text-align:center;
}
.gallery-thumb{
  width:100%;
  border-radius:10px;
  object-fit:cover;
}

.gallery-modal{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.85);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:1800;
}
.gallery-modal-content{ position:relative; max-width:90%; max-height:90%; }
.gallery-modal-content img{
  max-width:100%;
  max-height:90vh;
  border-radius:16px;
}
.gallery-close{
  position:absolute;
  top:-40px;
  right:0;
  border:none;
  background:transparent;
  color:#fff;
  font-size:1.6rem;
  cursor:pointer;
}

/* Galería móvil: 2 columnas */
@media (max-width: 520px){
  .gallery-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .file-card{
    padding: 8px;
    border-radius: 14px;
    box-shadow: 0 10px 22px rgba(0,0,0,.55);
  }
  .file-tab{ height: 8px; margin-bottom: 6px; }
  .file-title{ font-size: .72rem; margin-top: 6px; line-height: 1.1; }
}
@media (max-width: 360px){
  .gallery-grid{ gap: 8px; }
  .file-title{ font-size: .68rem; }
}

/* ==============================
  11) FLUJO CREATIVO
============================== */
.film-section{ padding: 2.5rem 1rem 2rem; }
.film-section h2{ text-align:center; color:#ffb6ff; }
.film-intro{
  text-align:center;
  font-size:.9rem;
  color:#f9e6ff;
  margin-bottom:1.2rem;
}

.film-slide-wrapper{
  max-width:900px;
  margin:0 auto;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.25);
}
.film-slide-wrapper img{
  width:100%;
  height:420px;
  object-fit:cover;
  display:block;
  animation: slide-fade .8s ease-in-out;
}
@keyframes slide-fade{
  from{ opacity:.5; transform: scale(1.01); }
  to{ opacity:1; transform: scale(1); }
}
@media (max-width: 768px){
  .film-slide-wrapper img{ height:260px; }
}

/* ==============================
  12) MINI GAME
============================== */
.miniGameSection{ padding: 60px 16px; }

.miniGameCard{
  max-width: 980px;
  margin: 0 auto;
  padding: 18px;
  background: rgba(10, 12, 24, 0.35);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.miniGameTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 10px 6px 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.miniStat{ font-weight:700; opacity:.92; }
.miniBtn{
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
  color:#fff;
  padding: 10px 14px;
  border-radius: 999px;
  cursor:pointer;
  transition:.2s ease;
}
.miniBtn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); }

.gameArea{
  position: relative;
  margin-top: 16px;
  height: 320px;
  border-radius: 16px;
  border: 1px dashed rgba(37,245,255,.35);
  background:
    radial-gradient(600px 280px at 20% 40%, rgba(37,245,255,.14), transparent 60%),
    radial-gradient(520px 240px at 80% 30%, rgba(255,99,214,.12), transparent 60%),
    rgba(0,0,0,.20);
  overflow:hidden;
}

/* Orbe */
.orb{
  position:absolute;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.25);
  background: radial-gradient(circle at 30% 30%, #ffffff, var(--neon-cyan) 35%, rgba(37,245,255,.15) 70%);
  box-shadow: 0 0 18px rgba(37,245,255,.55), 0 0 40px rgba(37,245,255,.25);
  cursor:pointer;
  transition: transform .08s ease;
}
.orb:active{ transform: scale(.96); }

.miniHint{ margin-top: 12px; opacity:.8; font-size:.95rem; }

@media (max-width: 640px){
  .miniGameTop{ flex-wrap: wrap; justify-content: center; }
  .gameArea{ height: 260px; }
}

/* ==============================
  13) CONTACTO + REDES
============================== */
.contact-section{ padding: 2.5rem 1rem 3rem; }

.contact-layout{
  max-width: 1100px;
  margin: 0 auto;
  display:grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 1.2rem;
  align-items: start;
}

.left-sub{ margin: .2rem 0 1rem; opacity: .9; }

.form-head{ margin-bottom:.75rem; padding:.2rem .2rem 0; }
.right-title{ margin:0; color:#ffb6ff; font-size:1.35rem; }
.right-sub{ margin:.25rem 0 0; opacity:.9; font-size:.92rem; }

.news-grid.compact{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:.75rem;
}

.news-card{
  position:relative;
  border-radius:18px;
  padding: 1.05rem;
  background: rgba(18, 7, 40, 0.92);
  border: 1px solid rgba(255,182,255,0.18);
  overflow:hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}
.news-card.mini{
  padding: .7rem .75rem;
  border-radius: 14px;
  min-height: 110px;
  display:grid;
  align-content:start;
}

.news-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.7rem;
  margin-bottom:.35rem;
}
.news-badge{
  font-size:.66rem;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:.26rem .52rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
}
.news-handle{ font-size:.75rem; opacity:.85; }

.news-text{
  margin:.15rem 0 .55rem;
  font-size:.82rem;
  line-height:1.25;
  opacity:.92;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

.news-actions{ display:flex; gap:.45rem; align-items:center; }

.news-cta{
  text-decoration:none;
  padding:.38rem .65rem;
  border-radius:999px;
  background: linear-gradient(90deg, var(--pink), var(--pink-2));
  color:#fff;
  font-weight:800;
  font-size:.8rem;
  box-shadow: 0 10px 22px rgba(255,107,213,0.32);
}
body.tema-dark .news-cta{
  background: linear-gradient(90deg, var(--neon-cyan), #00ffa6);
  box-shadow: 0 10px 22px rgba(0,240,255,0.22);
}

.news-ghost{
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.06);
  color:#fff;
  padding:.38rem .65rem;
  border-radius:999px;
  cursor:pointer;
  font-size:.8rem;
}

.ghost-card{
  background: rgba(10, 6, 18, 0.35);
  border: 1px solid rgba(255,255,255,0.10);
  opacity: .58;
}
.ghost-card:hover{
  opacity: 1;
  transform: translateY(-3px);
  background: rgba(10, 6, 18, 0.70);
}

.contact-form{
  max-width: 520px;
  margin: 0;
  background: rgba(10, 5, 25, 0.9);
  border-radius: 20px;
  padding: 1.5rem 1.8rem;
  border: 1px solid rgba(255, 182, 255, 0.35);
  display:flex;
  flex-direction:column;
  gap:1rem;
}

.contact-row{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:.8rem;
}

.field{ display:flex; flex-direction:column; gap:.25rem; }

.field label{
  font-size:.8rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#f3d9ff;
}

.contact-form input,
.contact-form select,
.contact-form textarea{
  border-radius:10px;
  border:none;
  padding:.6rem .75rem;
  font-family:inherit;
  font-size:.95rem;
  background:#20113a;
  color:#fff;
}
.contact-form textarea{ resize:vertical; min-height:120px; }

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{
  outline:2px solid var(--pink);
}

.captcha-line{
  display:flex;
  align-items:center;
  gap:.4rem;
  font-size:.8rem;
  color:#f9e6ff;
}

.contact-form button{
  align-self:flex-end;
  background: linear-gradient(90deg, var(--pink), var(--pink-2));
  border:none;
  color:#fff;
  padding:.7rem 1.4rem;
  border-radius:999px;
  cursor:pointer;
  font-weight:600;
  margin-top:.4rem;
  box-shadow: 0 8px 20px rgba(255,107,213,.6);
}
body.tema-dark .contact-form button{
  background: linear-gradient(90deg, var(--neon-cyan), #00ffa6);
  box-shadow: 0 8px 20px rgba(0,240,255,.25);
}

/* responsive contacto */
@media (max-width: 980px){
  .contact-layout{ grid-template-columns: 1fr; }
  .news-grid.compact{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px){
  .contact-row{ grid-template-columns: 1fr; }
}
@media (max-width: 520px){
  .news-grid.compact{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem;
  }

  .news-card.mini{
    padding: .6rem .6rem;
    min-height: 96px;
    border-radius: 13px;
  }

  .news-badge{
    font-size: .62rem;
    padding: .22rem .45rem;
  }

  .news-handle{ font-size: .70rem; }
  .news-text{ font-size: .76rem; -webkit-line-clamp: 2; line-clamp: 2; }

  .news-cta,
  .news-ghost{
    font-size: .76rem;
    padding: .32rem .55rem;
  }
}

/* ultra pequeño: sigue 2 columnas pero más compacto */
@media (max-width: 360px){
  .news-grid.compact{ gap: .45rem; }
  .news-card.mini{ min-height: 92px; }
  .news-text{ -webkit-line-clamp: 2; line-clamp: 2; }
}


/* ==============================
  14) FOOTER
============================== */
.footer{
  padding: 1.8rem 1.2rem 1.2rem;
  border-top: 1px solid rgba(255,255,255,.12);
  font-size:.85rem;
  color:#f5e3ff;
}
.footer-inner{
  max-width:980px;
  margin:0 auto .5rem;
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  align-items:center;
  justify-content:space-between;
}
.footer-brand{ display:flex; flex-direction:column; }
.footer-logo-text{ font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.footer-tagline{ font-size:.75rem; opacity:.8; }

.footer-menu{
  display:flex;
  flex-wrap:wrap;
  gap:.7rem;
  justify-content:center;
}
.footer-menu a,
.footer-social a{
  text-decoration:none;
  color:#ffe2ff;
  font-size:.8rem;
}
.footer-menu a:hover,
.footer-social a:hover{ color: var(--neon-cyan); }

.footer-social{
  display:flex;
  gap:.7rem;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.footer-copy{ text-align:center; opacity:.7; }

@media (max-width: 768px){
  .footer-inner{ flex-direction:column; align-items:center; }
}