/* =====================================================
   OnceInicial.co - Estilos principales (VERSIÓN DEPURADA)
   Paleta: Rojo pasional (#d62828), Fondo claro (#ffffff), Texto (#111)
   Tipografía: System UI stack
   ===================================================== */
:root{
  --primary:#d62828;
  --text:#111;
  --bg:#fff;
  --muted:#f6f6f6;
  --border:#e9e9e9;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Helvetica Neue",Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:1200px;margin:0 auto;padding:0 16px}

/* Header */
.header{border-bottom:4px solid var(--primary);background:#111;color:#fff;position:sticky;top:0;z-index:10}
.header .bar{display:flex;align-items:center;gap:16px;padding:10px 0}
.logo{display:flex;align-items:center;gap:12px}
.logo img{height:36px}
.brand{font-weight:800;font-size:20px;letter-spacing:0.5px}
.nav{margin-left:auto;display:flex;gap:14px;flex-wrap:wrap}
.nav a{padding:6px 10px;border-radius:6px}
.nav a:hover{background:#222}
.cta{background:var(--primary);color:#fff;padding:6px 10px;border-radius:6px;font-weight:700}

/* Main layout */
.main{display:grid;grid-template-columns: 1fr 320px;gap:24px;margin:16px 0}
.hero{border-bottom:1px solid var(--border);padding-bottom:8px}
.badge{display:inline-block;background:var(--primary);color:#fff;font-weight:700;padding:4px 10px;border-radius:999px;font-size:12px;letter-spacing:.4px}
.hero h1{margin:8px 0 6px 0;font-size:28px}
.meta{color:#666;font-size:14px}

.grid{display:grid;grid-template-columns: repeat(3, 1fr); gap:16px;margin-top:12px}
.card{border:1px solid var(--border);border-radius:10px;overflow:hidden;background:#fff;display:flex;flex-direction:column;transition:transform .12s ease}
.card:hover{transform:translateY(-2px)}
.card img{width:100%;height:160px;object-fit:cover}
.card .pad{padding:12px}
.card h3{margin:6px 0 8px 0}

/* Sidebar */
.sidebar{display:flex;flex-direction:column;gap:16px}
.sticky{position:sticky;top:72px}

/* Video */
.video-block{margin:20px 0;border-top:4px solid var(--primary);padding-top:12px}
.video-frame{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;border-radius:10px;border:1px solid var(--border);background:#000}
.video-frame iframe{position:absolute;top:0;left:0;width:100%;height:100%}

/* Footer */
.footer{margin-top:32px;border-top:1px solid var(--border);padding:24px 0;color:#666;font-size:14px;background:#fafafa}
.footer h4{margin:0 0 8px 0;color:#111}
.footer .cols{display:grid;grid-template-columns: repeat(3,1fr);gap:16px}
.footer small{color:#888}

/* Utility */
ul{margin:0;padding-left:18px}
.placeholder{font-size:14px}

/* Responsive */
@media (max-width: 992px){
  .main{grid-template-columns: 1fr}
  .grid{grid-template-columns: repeat(2,1fr)}
  .sticky{position:static}
}
@media (max-width: 640px){
  .grid{grid-template-columns: 1fr}
  .nav{display:none}
  .brand{font-size:18px}
  .ad-top{min-height:100px}
}

/* ===== Ads: versión limpia, sin marcos ni fondos ===== */
.ad-top,
.ad-side {
  border: none !important;
  background: transparent !important;
  padding: 0;
  margin: 16px auto;
  max-width: 100%;
  box-sizing: border-box;
  display: block;
  border-radius: 0;
  min-height: 0;
}

/* El iframe del ad ocupa todo el contenedor disponible */
.ad-top iframe,
.ad-side iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  margin: 0 auto;
}

/* Tamaños sugeridos de contenedor */
#ad-top-728x90 { width: 728px; height: 90px; }
#ad-side-300x250 { width: 300px; height: 250px; }
#ad-side-160x600 { width: 160px; height: 600px; }

/* Centrado en móviles: si no cabe, que no desborde */
@media (max-width: 768px){
  #ad-top-728x90 { width: 100%; height: 90px; }
  #ad-side-160x600,
  #ad-side-300x250 { margin-left: auto; margin-right: auto; }
}

/* Placeholder: solo visible cuando el contenedor está vacío */
.placeholder { 
  color: #888; 
  font-size: 14px; 
  text-align: center; 
}

/* Si el contenedor ya tiene un iframe del ad, oculta el placeholder */
.ad-top:has(iframe) .placeholder,
.ad-side:has(iframe) .placeholder {
  display: none;
}

/* ===== Video Ad Out-Stream ===== */
#ad-video-outstream {
  position: relative;
  width: 100%;
  max-width: 640px;
  margin: 16px auto;
  padding-bottom: 56.25%; /* relación 16:9 */
  background: #000;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border);
}

#ad-video-outstream iframe,
#ad-video-outstream video {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

#ad-video-outstream .placeholder {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  color: #ccc;
  font-size: 14px;
  text-align: center;
}