/* =========================
   Variables y base
   ========================= */
:root{
  --gold:#c9a64c;
  --text:#1a1a1a;
  --text-invert:#ffffff;
  --card-bg:#ffffff;
  --card-border:#ececec;
  --shadow-sm:0 8px 20px rgba(0,0,0,.06);
  --shadow-md:0 12px 28px rgba(0,0,0,.12);
}

*{box-sizing:border-box}
html,body{height:100%}

.comunicacion-body{
  margin-top:100px;                 /* deja espacio para el header global */
  background:#0e0e0e;               /* color base oscuro */
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,"Noto Sans";
  color:var(--text);
  position:relative;
  overflow-x:hidden;
}

/* =========================
   Fondo partido (siempre detrás)
   ========================= */
.split-bg{
  position:fixed;
  inset:0;
  z-index:-2;                       /* detrás de todo el contenido */
}
.split-bg::before,
.split-bg::after{
  content:"";
  position:fixed;
  top:0;
  height:100vh;
  width:50vw;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  pointer-events:none;
}

/* Izquierda (textura neutra) con velo */
.split-bg::before{
  left:0;
  background-image:
    linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.55)),
    url('https://images.unsplash.com/photo-1501139083538-0139583c060f?q=80&w=1920&auto=format&fit=crop');
}

/* Derecha (Dubái/EAU) con velo más marcado */
.split-bg::after{
  right:0;
  background-image:
    linear-gradient(rgba(0,0,0,.62),rgba(0,0,0,.62)),
    url('https://images.unsplash.com/photo-1512453979798-5ea266f8880c?q=80&w=1920&auto=format&fit=crop');
}

/* =========================
   Layout del contenido
   ========================= */
.page{
  position:relative;
  z-index:0;                        /* por encima del fondo */
  max-width:1200px;
  margin:0 auto;
  padding:2rem 1rem 3rem;
  display:flex;
  flex-direction:column;
  gap:2.5rem;
}

@media (max-width: 480px){
  .panel{padding:1.1rem;}
  .link-card{padding:.6rem 1rem;} /* Padding proporcionalmente reducido para móvil */
  .video-placeholder{height:140px;}
}

/* Título principal */
.page-header{
  text-align:center;
}
.page-header h1{
  color:var(--text-invert);
  font-weight:800;
  letter-spacing:.4px;
  text-shadow:0 2px 12px rgba(0,0,0,.55);
  font-size:clamp(2rem,3.5vw,3.2rem);
  margin:0;
}

/* =========================
   Noticias (dos columnas)
   ========================= */
.news-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2rem;
}

/* Panel con efecto glass/white para legibilidad */
.panel{
  /* background:rgba(255,255,255,.9); */
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  border:1px solid rgba(255,255,255,.55);
  border-radius:18px;
  box-shadow:var(--shadow-md);
  padding:1.6rem;
}

.panel-title{
  color:var(--gold);
  text-align:center;
  font-weight:800;
  font-size:1.35rem;
  margin:0 0 1.1rem 0;
  letter-spacing:.3px;
}

/* Lista de enlaces en cards */
.links{
  display:grid;
  gap:.9rem;
}

.link-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  text-decoration:none;
  background:var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:12px;
  padding:.75rem 1rem; /* Reducido el padding vertical de 1rem a 0.75rem */
  color:#2a2a2a;
  box-shadow:var(--shadow-sm);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.link-card::after{
  content:"›";
  font-size:1.2rem;
  opacity:.55;
}
.link-card span{
  font-weight:600;
}
.link-card:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 30px rgba(0,0,0,.12);
  border-color:#eadca7;
}

/* =========================
   Videos (dos columnas)
   ========================= */
.videos-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2rem;
}

.video-list{
  display:grid;
  gap:1rem;
}

.video-card{
  background:var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:12px;
  padding:1rem;
  box-shadow:var(--shadow-sm);
  transition:transform .18s ease, box-shadow .18s ease;
}
.video-card:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 30px rgba(0,0,0,.12);
}
.video-card h3{
  margin:.1rem 0 .6rem;
  font-size:1rem;
  font-weight:700;
  color:#2a2a2a;
}

.video-placeholder{
  height:160px;
  border-radius:10px;
  background:linear-gradient(180deg,#f5f5f5,#e9e9e9);
  display:flex;align-items:center;justify-content:center;
  color:#6a6a6a;
  font-weight:600;
}

/* =========================
   Responsive
   ========================= */
@media (max-width: 992px){
  .news-grid,.videos-grid{gap:1.5rem;}
}

@media (max-width: 768px){
  .news-grid, .videos-grid{grid-template-columns:1fr;}

  /* En móvil usamos solo el fondo derecho a ancho completo
     para simplificar y mantener contraste */
  .split-bg::before{display:none;}
  .split-bg::after{left:0; width:100vw;}
}

/* =========================
   Footer - Específico para página comunicación
   ========================= */
.comunicacion-body .footer {
  background: #0e0e0e; /* Fondo negro oscuro igual al resto */
  color: #ffffff;
  padding: 50px 0 0; /* Usar el mismo padding que el footer general */
  position: relative;
  z-index: 1;
  border-top: none;
}