/* === El Punto de Vista Equivocado — Tema rojo === */
:root{
  --bg:#0f0f11;
  --panel:#16161a;
  --ink:#e9e9ee;
  --muted:#a2a2ab;
  --brand:#e0112b;
  --brand-2:#ff4d61;
  --ring: 0 0 0 3px rgba(224,17,43,.35);
  --radius:22px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,Helvetica,sans-serif;
  background: radial-gradient(1200px 600px at 10% -10%, rgba(224,17,43,.12), transparent 60%) fixed,
              radial-gradient(1000px 500px at 90% 0%, rgba(255,77,97,.08), transparent 60%) fixed,
              var(--bg);
  color:var(--ink);
  line-height:1.6;
}
.wrap{max-width:1100px;margin:0 auto;padding:24px}
/* Header */
.site-header{
  position:sticky;top:0;backdrop-filter:saturate(140%) blur(8px);
  background:linear-gradient(180deg, rgba(15,15,17,.9), rgba(15,15,17,.6));
  border-bottom:1px solid #222;
  z-index:10;
}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);font-weight:800}
.logo{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;box-shadow:0 8px 24px rgba(224,17,43,.35)}
.brand-text strong{color:var(--brand-2)}
.nav{margin-left:auto;display:flex;gap:12px}
.nav-link{color:var(--ink);opacity:.7;text-decoration:none;padding:8px 12px;border-radius:12px}
.nav-link:hover,.nav-link.is-active{opacity:1;background:#1e1e23}
/* Hero */
.hero .title{font-size:clamp(26px,3.2vw,42px);line-height:1.15;margin:24px 0 8px}
.subtitle{color:var(--muted);margin:0 0 18px}
.search input{
  width:100%;padding:14px 16px;border-radius:16px;border:1px solid #2a2a31;background:#121217;
  color:var(--ink);outline:none;box-shadow:none;
}
.search input:focus{border-color:var(--brand);box-shadow:var(--ring)}
/* Grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
.card{
  display:flex;flex-direction:column;gap:10px;background:linear-gradient(180deg,#15151a,#131319);
  border:1px solid #202028;border-radius:var(--radius);padding:16px;transition:transform .2s ease, box-shadow .2s ease;
}
.card:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(0,0,0,.25)}
.card .cover{aspect-ratio:16/9;border-radius:16px;object-fit:cover;border:1px solid #222}
.title-sm{margin:4px 0;font-size:18px;line-height:1.3}
.meta{color:var(--muted);font-size:14px}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tag{font-size:12px;background:#1e1e23;border:1px solid #2a2a31;padding:4px 8px;border-radius:999px}
/* Pager */
.pager{display:flex;align-items:center;justify-content:center;gap:12px;margin:28px 0}
.btn{
  appearance:none;border:none;border-radius:999px;padding:10px 14px;background:linear-gradient(135deg,var(--brand),var(--brand-2));
  color:#fff;font-weight:700;cursor:pointer;box-shadow:0 10px 24px rgba(224,17,43,.35);
}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.page-info{color:var(--muted)}
/* Article */
.article{max-width:820px;margin:0 auto}
.article .title{font-size:clamp(28px,3.5vw,48px);margin:18px 0 6px}
.article .cover{width:100%;border-radius:22px;border:1px solid #222;margin:10px 0 14px}
.content{color:#dedee6}
.content p{margin:14px 0}
.content h2{margin:22px 0 8px}
.content img{max-width:100%;border-radius:12px;border:1px solid #222}
/* Footer */
.site-footer{border-top:1px solid #222;background:#111115;color:var(--muted)}
.site-footer .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
/* Utilities */
.prose{max-width:760px;margin:0 auto}
code{background:#1b1b22;border:1px solid #2a2a31;padding:2px 6px;border-radius:6px}


.video-ad {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 320px;
  background: #000;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  z-index: 9999;
  padding: 5px;
}

.video-ad video {
  width: 100%;
  border-radius: 10px;
}

.video-ad .close-btn {
  position: absolute;
  top: 5px;
  right: 5px;
  background: rgba(0,0,0,0.6);
  border: none;
  color: white;
  font-size: 16px;
  cursor: pointer;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  line-height: 20px;
  text-align: center;
}

/* === Estilos para banners publicitarios === */
.banner-ad {
  display: block;
  text-align: center;
  margin: 2rem auto;
  padding: 1rem;
  border: 1px dashed #ccc;
  border-radius: 8px;
  font-size: 0.9rem;
  color: #666;
  background: #f9f9f9;
  max-width: 728px; /* tamaño recomendado para anuncios estándar */
  min-height: 90px; /* altura mínima */
}



.cover {
  max-width: 100%;   /* nunca será más ancha que el contenedor */
  height: auto;      /* mantiene proporción */
  display: block;    /* elimina espacios raros debajo */
  margin: 1rem auto; /* centrada con márgenes arriba/abajo */
  border-radius: 8px; /* opcional, esquinas redondeadas */
}
.ad-container {
  display: flex;
  justify-content: center; /* centra el banner */
  align-items: center;
  margin: 10px auto;
  max-width: 100%; 
  overflow: hidden; /* evita desbordes raros */
}
.ad-container iframe, 
.ad-container img {
  max-width: 100%;
  height: auto;
  display: block;
}
/* Bloque sugerencias */
.sugerencias {
  margin: 2rem 0;
  padding: 1rem;
  background: #f9f9f9;
  border-radius: 12px;
}

.sugerencias h2 {
  font-size: 1.2rem;
  margin-bottom: 1rem;
  color: #333;
  text-align: center;
}

/* Carrusel */
.sugerencias-grid {
  display: flex;
  gap: 15px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; /* suave en iOS */
  padding-bottom: 0.5rem;
}

.sugerencias-grid::-webkit-scrollbar {
  display: none; /* ocultar scrollbar */
}

/* Tarjetas */
.sugerencias-grid a {
  flex: 0 0 220px; /* ancho fijo de cada tarjeta */
  scroll-snap-align: start;
  text-decoration: none;
  color: inherit;
  border-radius: 10px;
  overflow: hidden;
  background: white;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.sugerencias-grid a:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.sugerencias-grid img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  display: block;
}

.sugerencias-grid p {
  font-size: 0.9rem;
  padding: 0.6rem;
  text-align: center;
  color: #444;
}

/* Ajustes responsivos */
@media (max-width: 600px) {
  .sugerencias-grid a {
    flex: 0 0 75%; /* ocupa casi toda la pantalla en móvil */
  }

  .sugerencias-grid img {
    height: 160px;
  }

  .sugerencias-grid p {
    font-size: 0.85rem;
  }
}