/* ===== CABECERA DE PÁGINA (mismas medidas y tipografía que los banners de Sugerencias, FAQ…) ===== */
.page-hero{position:relative;isolation:isolate;padding:140px 20px clamp(120px,15vw,180px);text-align:center;color:#fff;animation:rise .7s ease both}
.page-hero h1{font-family:var(--font-title);font-weight:800;font-size:clamp(34px,8.5vw,64px);line-height:1.08;text-shadow:0 4px 18px rgba(0,0,0,.5)}
.page-hero h1 span{color:var(--blue);text-shadow:0 0 28px rgba(92,168,255,.55),0 4px 18px rgba(0,0,0,.5)}   /* "&" en el azul de la web (--blue = #5ca8ff, el mismo de Sugerencias) */
.page-hero p{color:#d5daf0;max-width:680px;margin:14px auto 0;font-size:clamp(15px,3.6vw,18px)}

/* ===== LAYOUT ===== */
.blog-wrap{width:100%;max-width:1200px;margin:0 auto;display:flex;flex-direction:column;gap:22px}
.blog-grid{display:grid;grid-template-columns:1fr;gap:20px}

/* ===== FILTROS (dentro del hero: mismo "cristal oscuro" del buscador de FAQ y las píldoras de Términos) ===== */
.filters{
  position:relative;display:flex;flex-wrap:wrap;justify-content:center;gap:4px;
  width:fit-content;max-width:100%;margin:28px auto 0;padding:6px;
  background:rgba(16,18,30,.72);border:1px solid var(--line);border-radius:22px;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 10px 30px rgba(0,0,0,.3);
}
.chip{
  padding:10px 18px;border-radius:999px;font:inherit;font-size:13px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;
  color:var(--muted);background:transparent;transition:color .2s,background .2s,box-shadow .2s;
}
.chip:hover{color:#fff;background:rgba(255,255,255,.08)}
.chip.active{background:var(--blue);color:#06101f;box-shadow:0 6px 20px rgba(92,168,255,.35)}   /* igual que .ip-pill */
.chip:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media(max-width:519px){.filters{width:100%;max-width:400px}.chip{flex:1 1 auto;padding:10px 14px}}   /* móvil: filas 3+2 que se reparten el ancho */
@media(min-width:520px){.filters{border-radius:999px}}

/* ===== TARJETAS (banner de fondo + overlay oscuro) ===== */
.post{
  --accent:#5ca8ff;
  position:relative;isolation:isolate;overflow:hidden;
  min-height:320px;display:flex;flex-direction:column;justify-content:space-between;
  padding:20px;border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.14);box-shadow:0 12px 30px rgba(16,24,56,.2);   /* sombra suave: la tarjeta ahora está sobre fondo blanco */
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s;
}
/* Imagen de fondo (zoom suave al pasar el mouse) */
.post::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:var(--img) center/cover no-repeat;
  transition:transform .6s ease;
}
/* Overlay: gradiente oscuro de abajo hacia arriba para que el texto resalte */
.post::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(to top,rgba(8,9,18,.97) 8%,rgba(8,9,18,.72) 48%,rgba(8,9,18,.22) 100%),
    linear-gradient(120deg,color-mix(in srgb,var(--accent) 22%,transparent),transparent 55%);
}
.post:hover,.post:focus-within{
  transform:translateY(-5px);border-color:var(--accent);
  box-shadow:0 18px 40px rgba(16,24,56,.3),0 0 28px color-mix(in srgb,var(--accent) 30%,transparent);
}
.post:hover::before{transform:scale(1.07)}
.post[hidden]{display:none}

/* Fila superior: categoría + indicador */
.post-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.badge{background:var(--accent);color:#07080f;font-size:11px;font-weight:800;letter-spacing:1.2px;padding:6px 13px;border-radius:999px;box-shadow:0 4px 14px color-mix(in srgb,var(--accent) 45%,transparent)}
.indicator{font-size:11px;font-weight:700;letter-spacing:1px;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.14);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#fff}

/* Pastilla de estado dinámica (● Activo / ● Inactivo) */
.status{
  --ok:#1ed760; --off:#ff8a4c; --state:var(--ok);
  display:inline-flex;align-items:center;gap:7px;
  background:rgba(8,9,18,.62);color:var(--state);
  border:1px solid color-mix(in srgb,var(--state) 40%,transparent);
  transition:color .25s,border-color .25s;
}
.status .dot{
  width:8px;height:8px;border-radius:50%;background:var(--state);
  box-shadow:0 0 8px var(--state);transition:background .25s;
}
.status.is-inactive{--state:var(--off)}

/* Cuerpo: fecha, título, descripción y botón */
.post-body{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.post time,.post .kicker{font-size:12px;font-weight:700;letter-spacing:1.2px;color:var(--accent)}
.post h3{font-size:clamp(22px,5vw,28px);line-height:1.15;font-weight:800;letter-spacing:-.4px;text-shadow:0 2px 10px rgba(0,0,0,.55)}
.post p{font-size:14.5px;font-weight:500;color:#d6d9ee;max-width:46ch}
.post-btn{
  margin-top:6px;background:var(--accent);color:#07080f;font:inherit;font-weight:700;font-size:14px;
  padding:11px 20px;border-radius:12px;transition:.25s;cursor:pointer;border:0;display:inline-block;
}
.post-btn:hover{transform:translateY(-2px);filter:brightness(1.1)}
/* Toda la tarjeta es clicable (el botón/enlace se extiende a la tarjeta) */
.post-btn::before{content:"";position:absolute;inset:0;border-radius:inherit}
.post-btn:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* Tarjeta destacada (ancha) */
.featured{min-height:380px}
.featured h3{font-size:clamp(26px,6vw,40px)}
.featured p{font-size:15.5px;max-width:56ch}

/* Colores e imágenes por categoría */
.pvp  {--accent:#ff8a4c;--img:url("../img/blog-fullpvp.jpg");background:linear-gradient(135deg,#8a3a1c,#4a1410)}
.staff{--accent:#4cc9f0;--img:url("../img/blog-staff.jpg");background:linear-gradient(135deg,#14506a,#0a2230)}
.media{--accent:#e45cff;--img:url("../img/blog-media.jpg");background:linear-gradient(135deg,#6a2a9a,#7a1f55)}
.sale {--accent:#ffc933;--img:url("../img/blog-oferta.jpg");background:linear-gradient(135deg,#8a6a10,#4a3800)}

.empty{text-align:center;color:#5a6582;padding:30px 0}

/* ===== TABLET ===== */
@media(min-width:760px){
  .blog-grid{grid-template-columns:1fr 1fr}
  .featured{grid-column:1/-1;min-height:420px;padding:30px}
  .post{padding:26px}
}
/* ===== DESKTOP ===== */
@media(min-width:1040px){
  .blog-grid{grid-template-columns:repeat(3,1fr)}
  .post{min-height:340px}
  .featured{min-height:440px;padding:36px}
}
/* Al filtrar, la tarjeta destacada vuelve a tamaño normal */
.blog-grid.filtered .featured{grid-column:auto;min-height:340px;padding:20px}
.blog-grid.filtered .featured h3{font-size:clamp(22px,5vw,28px)}
@media(min-width:760px){.blog-grid.filtered .post{padding:26px}}
/* ===== NOTICIAS (desde Supabase) ===== */
.blog-wrap{transition:opacity .25s ease}
.blog-wrap[aria-busy="true"]{opacity:0}
.post.dyn{background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 42%,#05060d),#0a0b12)}

/* Carrusel: con 1 sola noticia no hay flechas ni puntos */
.news-stage{position:relative}
.news-viewport{overflow:hidden;border-radius:var(--radius)}
.news-track{display:flex;transition:transform .6s cubic-bezier(.22,.8,.3,1)}
.news-track>.post{flex:0 0 100%;min-width:0}
.news .post:hover,.news .post:focus-within{transform:none}
.news-arrow{
  position:absolute;top:50%;translate:0 -50%;z-index:3;display:grid;place-items:center;
  width:44px;height:44px;padding:0;border-radius:50%;color:#fff;
  background:rgba(8,9,18,.62);border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:background .2s,color .2s,border-color .2s;
}
.news-arrow[hidden]{display:none}
.news-arrow:hover{background:var(--blue);border-color:var(--blue);color:#06101f}
.news-arrow:focus-visible{outline:2px solid #fff;outline-offset:3px}
.news-arrow.prev{left:14px}
.news-arrow.next{right:14px}
.news-arrow svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.news-dots{display:flex;justify-content:center;align-items:center;gap:9px;margin-top:14px}
.news-dots[hidden]{display:none}
.news-dots button{position:relative;width:10px;height:10px;padding:0;border:0;border-radius:999px;background:rgba(15,20,36,.2);transition:width .3s,background .3s}
.news-dots button::before{content:"";position:absolute;inset:-9px}
.news-dots button:hover{background:rgba(15,20,36,.4)}
.news-dots button[aria-current="true"]{width:28px;background:var(--blue)}
.news-dots button:focus-visible{outline:2px solid #0f1424;outline-offset:3px}
@media(max-width:759px){.news-arrow{width:38px;height:38px}.news-arrow.prev{left:8px}.news-arrow.next{right:8px}}
@media(prefers-reduced-motion:reduce){.news-track{transition:none}}

/* ===== OLA divisoria (igual que Inicio y Sugerencias): dos capas · quieta en PC, con movimiento en móvil ===== */
.bl-wave {
  position: absolute;
  left: 0; right: 0; bottom: -1px;          /* -1px: sin línea entre la ola y la sección clara */
  height: clamp(70px, 10vw, 120px);
  overflow: hidden;
  pointer-events: none;
}
.bl-wave svg {
  position: absolute;
  bottom: 0; left: 0;
  display: block;
  width: 200%; height: 100%;                /* el dibujo se repite 2 veces: -50% encaja sin saltos */
}
.bl-wave .back  { fill: rgba(255, 255, 255, .45); }
.bl-wave .front { fill: #fff; }
@media (max-width: 759px) {                /* movimiento SOLO en móvil */
  .bl-wave svg { animation: blDrift 16s linear infinite; }
  .bl-wave .back { animation-duration: 26s; animation-direction: reverse; }
}
@keyframes blDrift { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .bl-wave svg { animation: none; } }

/* ===== SECCIÓN CLARA (fondo blanco continuo hasta el pie) ===== */
.bl-light{background:#fff;color:#0f1424;padding:20px 14px 50px}
.bl-light .post{color:var(--text)}   /* las tarjetas siguen siendo oscuras: su texto no hereda el color de la sección blanca */
@media(min-width:760px){.bl-light{padding:30px 20px 60px}}

/* ===== PIE: fondo blanco continuo y, por encima, la caja oscura del footer ===== */
.bl-foot{display:flow-root;padding:10px 14px 34px;background:#fff}
.bl-foot footer{margin:0 auto;background:#10121e;border-color:rgba(255,255,255,.08);box-shadow:0 18px 44px rgba(16,24,56,.28)}
.bl-foot .footer-links{flex-wrap:wrap;justify-content:center;gap:8px 20px}