/* portada.css · Hot topic: un único lugar, degradé de color tipo Karambit Fade
   Estructura: .hot > .hot-main [.hot-head, h2, .ref?, p, .hot-foot] + .hot-img? */

/* 1. Ajustes rápidos */
:root{
  --fade:linear-gradient(135deg,#7b2ff7 0%,#d6389b 30%,#ff6a3d 58%,#ffb02e 82%,#f2e55c 100%);
  --hot-pad:34px 38px;                        /* aire interno de la caja */
  --hot-gap:14px;                             /* separación entre bloques */
  --hot-radius:22px;
  --hot-glass:rgba(255,255,255,.08);          /* fondo translúcido de las piezas */
  --hot-glass-line:rgba(255,255,255,.22);     /* borde de esas piezas */
  --hot-glass-hover:rgba(255,255,255,.14);
  --hot-travel:420px                          /* recorrido de las luces: igual en PC y celular */
}

/* 2. Caja con degradé */
.portada{margin:0 0 24px}
.hot{position:relative;isolation:isolate;overflow:hidden;display:grid;gap:28px;align-items:center;padding:var(--hot-pad);border:2px solid transparent;border-radius:var(--hot-radius);animation:rise .4s ease-out;
  background:linear-gradient(#0c0a10,#0c0a10) padding-box,var(--fade) border-box;
  box-shadow:0 0 44px -16px rgba(214,56,155,.6)}
/* Luces de color que flotan despacio dentro de la caja (movimiento muy suave, siempre activo) */
.hot::before,.hot::after{content:"";position:absolute;z-index:-1;width:max(70%,520px);aspect-ratio:1;border-radius:50%;filter:blur(60px);pointer-events:none;will-change:transform}
.hot::before{top:-45%;left:-15%;background:radial-gradient(circle,rgba(123,47,247,.55),rgba(214,56,155,.25) 55%,transparent 70%);animation:hot-drift-a 3.5s ease-in-out infinite alternate}
.hot::after{right:-20%;bottom:-55%;background:radial-gradient(circle,rgba(255,176,46,.38),rgba(255,106,61,.2) 55%,transparent 70%);animation:hot-drift-b 4.2s ease-in-out infinite alternate}
@keyframes hot-drift-a{from{transform:translate(0,0) scale(1)}to{transform:translate(var(--hot-travel),calc(var(--hot-travel) * .45)) scale(1.2)}}
@keyframes hot-drift-b{from{transform:translate(0,0) scale(1.1)}to{transform:translate(calc(var(--hot-travel) * -1),calc(var(--hot-travel) * -.4)) scale(.9)}}
.hot.has-img{grid-template-columns:1fr auto}
.hot-main{display:flex;flex-direction:column;align-items:flex-start;gap:var(--hot-gap);min-width:0}

/* 3. Cabecera: fecha + etiqueta + categoría */
.hot-head{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px}
.hot .date{background:var(--hot-glass);border:1px solid var(--hot-glass-line)}
.hot .date b{font-size:26px;background:var(--fade);-webkit-background-clip:text;background-clip:text;color:transparent}
.hot .date small{color:var(--ink);opacity:.85}
.hot-badge{background:var(--fade);color:#1a0b14;font:800 12px 'DM Sans',sans-serif;letter-spacing:.08em;text-transform:uppercase;padding:5px 12px;border-radius:999px}

/* 4. Título y descripción */
.hot h2{font-size:clamp(30px,5vw,50px);line-height:1.05;letter-spacing:-.025em;text-wrap:balance;max-width:20ch}
.hot p{margin:0;color:var(--muted);font-size:clamp(15px,4vw,17px);max-width:56ch}

/* 5. Embed de entradas o link: del tamaño de su contenido, sin fondo negro */
.hot .ref{max-width:100%;background:var(--hot-glass);border-color:var(--hot-glass-line)}
.hot .ref:hover{background:var(--hot-glass-hover);border-color:rgba(255,255,255,.45)}

/* 6. Pie: hora y lugar a la izquierda, contacto a la derecha */
.hot-foot{align-self:stretch;padding-top:6px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;margin-top:4px}
.hot-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;min-width:0}
.hot .contact{background:var(--hot-glass);border-color:var(--hot-glass-line)}
.hot .contact:hover{background:var(--hot-glass-hover);border-color:rgba(255,255,255,.45)}

/* 7. Flyer opcional (campo img del evento) */
.hot-img{width:min(300px,34vw);aspect-ratio:4/5;object-fit:cover;border-radius:16px}

/* 8. Celulares: todo a lo ancho para tocar fácil */
@media (max-width:700px){
  :root{--hot-pad:22px 20px;--hot-gap:12px}
  .hot{gap:18px}
  .hot.has-img{grid-template-columns:1fr}
  .hot-img{width:100%;order:-1}
  .hot h2{font-size:clamp(28px,8.4vw,38px)}
  .hot .ref{align-self:stretch}
  .hot-foot{flex-direction:column;align-items:stretch;gap:14px}
  .hot .contact{justify-content:center;min-height:var(--tap);font-size:15px}
}