/* ============================================================
   PROPUESTA 3 — PEKORITAS!!! el portal
   Idea: el sitio es un portal de chismes/fans de 2007 sobre
   DENNA LA PORRI: portada, pestañas, muro de fotos, votación
   y módulos. Todo rosa: rosa bebé, rosa chicle, magenta.
   ============================================================ */
:root{
  --rosa:#ffd9ef;        /* fondo */
  --rosa2:#ffeaf7;       /* cajas */
  --chicle:#ff53b4;      /* medio */
  --magenta:#e0007b;     /* fuerte */
  --vino:#8c0050;        /* texto fuerte */
  --txt:#3a0024;
  --mute:#a3557f;
  --aqua:#39e0e6;
  --d:#1f9c3c; --p:#d96a00;
  --font:Verdana,Tahoma,Geneva,"DejaVu Sans",sans-serif;
  --mono:"Courier New",Courier,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;color:var(--txt);font:12px/1.5 var(--font);
  background:var(--rosa) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><rect width='40' height='40' fill='%23ffd9ef'/><path d='M10 4l1.4 3.6L15 9l-3.6 1.4L10 14l-1.4-3.6L5 9l3.6-1.4z' fill='%23ffb3e0'/><path d='M30 24l1.1 2.8L34 28l-2.9 1.2L30 32l-1.1-2.8L26 28l2.9-1.2z' fill='%23ffc2e7'/><circle cx='34' cy='8' r='1.6' fill='%23ff8ed0'/><circle cx='6' cy='30' r='1.6' fill='%23ff8ed0'/></svg>");
}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,p,dl,dd,ol,ul,figure,fieldset{margin:0}
ul,ol{padding:0;list-style:none}
fieldset{border:0;padding:0;min-width:0}
a{color:var(--magenta);text-decoration:underline;text-underline-offset:2px}
a:hover{color:#fff;background:var(--magenta)}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px dashed var(--vino);outline-offset:2px}
b,legend{font-weight:bold}
small{font-size:.8em;font-weight:normal}
em{font-style:normal}
i{font-style:normal}
.mini{font-size:10px;color:var(--mute)}
.c-d{color:var(--d)} .c-p{color:var(--p)}
.skip{position:absolute;left:-999px;top:6px;background:var(--magenta);color:#fff;padding:8px 12px;z-index:60}
.skip:focus{left:6px}

/* titular corriendo */
.tick{overflow:hidden;background:linear-gradient(180deg,#ff8ed0,var(--magenta));
  border-bottom:2px solid #fff;color:#fff;font:10px var(--mono);letter-spacing:.1em}
.tick-in{display:inline-flex;white-space:nowrap;padding:5px 0;animation:run 34s linear infinite}
.tick-in span{padding:0 22px}
@keyframes run{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.wrap{max-width:900px;margin:0 auto;background:var(--rosa2);
  border-left:3px solid var(--chicle);border-right:3px solid var(--chicle)}

/* cabecera */
.mast{display:flex;gap:10px;align-items:center;padding:10px;
  background:
   repeating-linear-gradient(90deg,rgba(255,255,255,.35) 0 6px,transparent 6px 12px),
   linear-gradient(180deg,#ff9ed8,#ff53b4 60%,#e0007b);
  border-bottom:3px solid #fff}
.mast-logo{width:78px;height:78px;flex:none;border:3px solid #fff;border-radius:50%;
  background:#fff;box-shadow:0 0 0 2px var(--vino)}
.mast-txt{min-width:0;flex:1}
.mast-eyebrow{font:9px var(--mono);color:#fff;letter-spacing:.24em}
.mast-t{font-size:clamp(28px,8.5vw,52px);line-height:.95;letter-spacing:-.02em;color:#fff;
  text-shadow:2px 2px 0 var(--vino),0 0 16px #fff}
.mast-t span{color:#fff600;text-shadow:2px 2px 0 var(--vino)}
.mast-s{font-size:11px;color:#fff;letter-spacing:.06em}
.mast-s b{background:#fff;color:var(--magenta);padding:1px 5px;border-radius:8px}
.mast-s em{color:#ffe9f6;margin:0 2px}
.mast-ready{display:none;font:9px/1.4 var(--mono);color:#fff;text-align:right;align-self:flex-start}
@media (min-width:520px){.mast-ready{display:block}}

/* pestañas */
.tabs{display:flex;gap:2px;padding:6px 6px 0;background:var(--chicle);overflow-x:auto;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;position:sticky;top:0;z-index:20}
.tabs::-webkit-scrollbar{display:none}
.tabs a{flex:none;font-size:10px;letter-spacing:.08em;color:var(--vino);background:var(--rosa2);
  padding:10px 11px;min-height:40px;display:flex;align-items:center;text-decoration:none;
  border:2px solid #fff;border-bottom:0;border-radius:9px 9px 0 0;white-space:nowrap}
.tabs a:hover,.tabs a:focus-visible{background:#fff600;color:var(--vino)}

/* rejilla */
.cols{padding:10px;display:block}
.side{margin-top:10px}

/* encabezados */
.hd{font-size:12px;letter-spacing:.12em;color:#fff;padding:5px 9px;
  background:linear-gradient(180deg,#ff77c6,var(--magenta));border:2px solid #fff;
  box-shadow:0 2px 0 var(--vino)}
.hd small{color:#ffe1f2;letter-spacing:0}
.hd-sm{font-size:10px}
.sec{margin-bottom:16px;display:grid;gap:8px}

/* nota principal */
.lead{background:#fff;border:2px solid var(--chicle);padding:8px;display:grid;gap:6px;
  box-shadow:3px 3px 0 var(--chicle)}
.lead img{width:100%;border:2px solid var(--magenta)}
.lead h3{font-size:16px;color:var(--vino);line-height:1.15}
.lead p{font-size:11px;color:var(--mute)}
.cta{display:block;text-align:center;background:var(--magenta);color:#fff;font-weight:bold;
  border:2px solid #fff;box-shadow:0 2px 0 var(--vino);padding:12px;min-height:44px;
  letter-spacing:.1em;text-decoration:none;font-size:12px;cursor:pointer;font-family:var(--font)}
.cta:hover{background:#fff600;color:var(--vino)}
.cta-sm{padding:10px;font-size:10px;align-self:center}

/* notas */
.notas li{border-bottom:1px dashed var(--chicle);background:#fff}
.notas li:nth-child(even){background:var(--rosa2)}
.notas a{display:flex;flex-wrap:wrap;gap:4px;align-items:baseline;justify-content:space-between;
  padding:10px 8px;min-height:44px;text-decoration:none;color:var(--txt);font-size:11px}
.notas a:hover{background:#fff600;color:var(--vino)}
.notas b{color:var(--magenta)}
.notas i{font-size:10px;color:var(--mute)}

/* banner */
.banner{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap;
  text-align:center;padding:12px;min-height:60px;text-decoration:none;color:#fff;
  background:repeating-linear-gradient(45deg,#ff53b4 0 10px,#e0007b 10px 20px);
  border:3px dotted #fff;box-shadow:0 0 0 2px var(--chicle)}
.banner b{font-size:14px;text-shadow:1px 1px 0 var(--vino)}
.banner span{background:#fff600;color:var(--vino);padding:4px 8px;font-size:11px;font-weight:bold}
.banner:hover{background:#fff600;color:var(--vino)}
.banner:hover b{text-shadow:none}

/* muro de fotos */
.wall{display:grid;grid-auto-flow:dense;grid-template-columns:repeat(3,1fr);gap:5px}
.wall li:nth-child(7n+1){grid-column:span 2;grid-row:span 2}
.wall button{display:block;width:100%;height:100%;padding:3px;cursor:pointer;
  background:#fff;border:2px solid var(--chicle)}
.wall button:hover,.wall button:focus-visible{border-color:#fff600;background:#fff600}
.wall img{width:100%;height:100%;aspect-ratio:1;object-fit:cover}

/* tracks */
.tracks li{border-bottom:1px dashed var(--chicle)}
.tracks a{display:grid;grid-template-columns:auto 1fr;gap:2px 8px;padding:9px 8px;min-height:44px;
  text-decoration:none;color:var(--txt);background:#fff;align-items:center}
.tracks li:nth-child(even) a{background:var(--rosa2)}
.tracks a:hover{background:#fff600}
.tracks b{font:16px var(--mono);color:var(--chicle)}
.tracks span{font-weight:bold;font-size:12px;color:var(--vino)}
.tracks i{grid-column:2;font-size:10px;color:var(--mute)}

.video{background:#fff;border:2px solid var(--chicle);padding:6px;display:grid;gap:5px}
.video a{position:relative;display:block}
.video img{width:100%;border:2px solid var(--magenta)}
.play{position:absolute;inset:0;display:grid;place-items:center;font-size:40px;color:#fff;
  text-shadow:0 0 10px var(--magenta)}
.video p{font-size:11px}

/* fichas */
.fichas{display:grid;gap:8px}
.ficha{background:#fff;border:2px solid var(--chicle);padding:8px;
  box-shadow:3px 3px 0 var(--chicle)}
.ficha h3{font-size:14px;color:var(--magenta);border-bottom:2px dotted var(--chicle);
  padding-bottom:4px;margin-bottom:5px}
.ficha.f-d h3{color:var(--d)} .ficha.f-p h3{color:var(--p)}
.ficha h3 small{color:var(--mute)}
.ficha dl{display:grid;grid-template-columns:auto 1fr;gap:3px 8px;font-size:11px}
.ficha dt{color:var(--mute);text-transform:uppercase;font-size:9px;letter-spacing:.06em;padding-top:2px}

/* votación */
.poll{background:#fff;border:2px solid var(--chicle);padding:8px;
  box-shadow:3px 3px 0 var(--chicle)}
.poll legend{font-size:12px;color:var(--vino);padding-bottom:6px}
.poll-opts{display:grid;gap:1px;margin-bottom:8px}
.poll-opts label{display:flex;gap:7px;align-items:center;padding:8px 6px;min-height:40px;
  font-size:11px;cursor:pointer;background:var(--rosa2)}
.poll-opts label:nth-child(even){background:#fff}
.poll-opts label:hover{background:#fff600}
.poll-opts input{accent-color:var(--magenta);width:16px;height:16px;flex:none}
.poll-res{background:#fff;border:2px solid var(--chicle);padding:8px;display:grid;gap:5px}
.poll-res li{font-size:10px}
.poll-res .bar{height:11px;background:var(--rosa);border:1px solid var(--chicle);margin-top:2px}
.poll-res .bar b{display:block;height:100%;background:linear-gradient(90deg,#ff8ed0,var(--magenta))}
.poll-res .me{color:var(--magenta);font-weight:bold}

/* agenda */
.ev{background:#fff;border:2px solid var(--chicle);padding:8px;display:flex;gap:10px;
  align-items:center;flex-wrap:wrap;box-shadow:3px 3px 0 var(--chicle)}
.ev-d{text-align:center;flex:none}
.ev-d b{display:block;font-size:30px;line-height:1;color:var(--magenta)}
.ev-d span{font:9px var(--mono);letter-spacing:.2em;color:var(--mute)}
.ev-n{font-size:13px;font-weight:bold;color:var(--vino)}
.ev>div{flex:1;min-width:140px}
.wide{width:100%;border:2px solid var(--chicle)}

/* módulos laterales */
.box{background:#fff;border:2px solid var(--chicle);margin-bottom:10px;
  box-shadow:3px 3px 0 var(--chicle)}
.box>*:not(.hd){padding:8px}
.box-c{text-align:center}
.online li{font-size:11px;padding:3px 0}
.online i{font-size:9px;color:var(--mute)}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#37d14a;
  box-shadow:0 0 4px #37d14a;margin-right:5px}
.dot.you{background:var(--magenta);box-shadow:0 0 4px var(--magenta)}
.prod{display:grid;gap:4px;text-align:center;text-decoration:none;color:var(--txt);font-size:11px}
.prod img{width:100%;border:2px solid var(--rosa)}
.prod b{color:var(--vino)}
.prod em{background:var(--vino);color:#fff;padding:1px 5px;font-size:9px;letter-spacing:.1em}
.blinks{display:grid;gap:5px}
.bl{font:9px var(--mono);letter-spacing:.06em;text-align:center;padding:5px 3px;color:#fff;
  border:1px solid #fff;outline:1px solid var(--chicle)}
.bl-1{background:repeating-linear-gradient(90deg,#e0007b 0 5px,#ff53b4 5px 10px)}
.bl-2{background:repeating-linear-gradient(45deg,#ff53b4 0 5px,#ff9ed8 5px 10px);color:var(--vino)}
.bl-3{background:repeating-linear-gradient(90deg,#39e0e6 0 5px,#ff53b4 5px 10px)}
.links li{border-bottom:1px dotted var(--chicle);padding:5px 0}
.links li:last-child{border:0}
.counter{display:inline-flex;gap:2px;font:16px var(--mono)}
.counter span{background:var(--vino);color:#ffe1f2;border:1px solid var(--chicle);padding:2px 5px}
.badge{display:flex;align-items:center;justify-content:center;gap:2px;width:88px;height:31px;
  margin:0 auto;text-decoration:none;font:11px var(--font);color:#fff;
  background:repeating-linear-gradient(45deg,#e0007b 0 6px,#ff53b4 6px 12px);
  border:1px solid #fff;outline:1px solid var(--vino)}
.badge i{color:#fff600}

/* pie */
.ftr{text-align:center;padding:12px 10px;border-top:3px solid #fff;
  background:linear-gradient(180deg,#ff53b4,#e0007b);color:#fff;font-size:11px}
.ftr a{color:#fff600}
.ftr .mini{color:#ffdcef}

/* visor */
.lb{position:fixed;inset:0;background:rgba(140,0,80,.88);z-index:80;
  display:flex;align-items:center;justify-content:center;padding:12px}
.lb[hidden]{display:none}
.lb-in{background:#fff;border:3px solid var(--chicle);padding:6px;max-width:520px;width:100%;
  display:grid;gap:6px;max-height:100%}
.lb-in img{width:100%;max-height:62vh;object-fit:contain;background:var(--rosa)}
.lb-cap{font:10px var(--mono);color:var(--mute);text-align:center}
.lb-ctl{display:grid;grid-template-columns:1fr 1fr 1fr;gap:5px}
.lb-ctl button{min-height:44px;font:11px var(--font);font-weight:bold;cursor:pointer;
  color:#fff;background:var(--magenta);border:2px solid #fff;box-shadow:0 2px 0 var(--vino)}
.lb-ctl button:hover{background:#fff600;color:var(--vino)}

/* escritorio: portal de dos columnas */
@media (min-width:860px){
  .cols{display:grid;grid-template-columns:1fr 236px;gap:12px}
  .side{margin-top:0}
  .fichas{grid-template-columns:1fr 1fr}
  .wall{grid-template-columns:repeat(4,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .tick-in{animation:none}
  *{transition:none!important}
}