:root{
  --ink:#111;
  --muted:#6a6a6a;
  --rule:#e6e6e6;
  --bg:#ffffff;
  --container:1120px;

  --serif:"Libre Baskerville", serif;
  --sans:"Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; background:var(--bg); color:var(--ink); }
a{ color:inherit; text-decoration:none; }

.container{
  width:min(var(--container), calc(100% - 32px));
  margin:0 auto;
}

/* =========================
   TOPBAR
========================= */
.topbar{
  border-bottom:1px solid var(--rule);
  background:#fff;
}
.topbar__inner{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:12px;
  align-items:center;
  padding:14px 0;
}
.topbar__date{
  font:400 14px/1.2 var(--sans);
  color:var(--muted);
}

.brand{ text-align:center; }
.brand__title{
  font:700 44px/1 var(--serif);
  letter-spacing:.5px;
}
.brand__tagline{
  margin-top:6px;
  font:400 14px/1.2 var(--serif);
  color:var(--muted);
}
.brand__tagline--em{
  font-style:italic;
  color:var(--ink);
}

.social{
  display:flex;
  justify-content:flex-end;
  gap:10px;
}
.social__btn{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border:1px solid var(--rule);
  border-radius:999px;
}
.social__btn svg{
  width:18px;
  height:18px;
  fill:var(--ink);
}

/* =========================
   MENÚ
========================= */
.menu{
  border-bottom:1px solid var(--rule);
  background:#fff;
}
.menu__nav{
  display:flex;
  flex-wrap:wrap;
  gap:18px;
  justify-content:center;
  padding:10px 0;
}
.menu__nav a{
  font:600 12px/1 var(--sans);
  letter-spacing:.4px;
  color:#1a1a1a;
  padding:6px 0;
  position:relative;
}
.menu__nav a:hover{ color:#000; }
.menu__nav a::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-2px;
  height:2px;
  background:transparent;
}
.menu__nav a:hover::after{ background:#000; }

/* =========================
   MAIN / GRID
========================= */
.main{ padding:18px 0 30px; }

.grid{
  display:grid;
  grid-template-columns:2.2fr 1fr;
  gap:22px;
  align-items:start;
}

.card{ background:#fff; }
.card--lead .media{ height:420px; }

.media{
  width:100%;
  height:170px;
  border:1px solid var(--rule);
  border-radius:4px;
  overflow:hidden;
  background-size:cover;
  background-position:center;
}

.headline{
  margin:12px 0 0;
  font:700 20px/1.25 var(--serif);
}
.headline--lead{
  margin-top:16px;
  font-size:44px;
  line-height:1.06;
}

.rail__title{
  font:700 14px/1.2 var(--sans);
  color:var(--muted);
  margin:2px 0 10px;
  text-align:center;
}
.rail__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
.rail .headline{
  font-size:18px;
  line-height:1.2;
}

/* =========================
   FOOTER
========================= */
.footer{
  border-top:1px solid var(--rule);
  padding:16px 0;
}
.footer__inner{
  display:flex;
  justify-content:space-between;
  gap:10px;
  font:400 13px/1.2 var(--sans);
  color:var(--muted);
}
.footer__muted{ color:var(--muted); }

/* =========================
   MEDIA IMG
========================= */
.media-img{
  width:100%;
  height:auto;
  border-radius:4px;
  border:1px solid var(--rule);
}

/* =========================
   VIDEOS
========================= */
.videos-title{
  font-family:var(--serif);
  font-size:20px;
  letter-spacing:.08em;
  margin:30px 0 20px;
  text-transform:uppercase;
}

.videos-stack{
  display:flex;
  flex-direction:column;
  gap:28px;
  margin-bottom:40px;
}

.video-card{
  border:1px solid var(--rule);
  border-radius:10px;
  overflow:hidden;
  background:#fff;
}

.video-card__header{
  padding:14px 18px;
  font-family:var(--serif);
  font-size:24px;
  font-weight:700;
  color:#fff;
  background:linear-gradient(180deg,#1a5a96,#0f3a63);
}

.video-card__body{
  padding:16px;
  background:#fafafa;
}

/* Google Drive iframe limpio */
.video-wrap{
  position:relative;
  width:100%;
  aspect-ratio:16 / 9;
  background:transparent;
  border-radius:12px;
  overflow:visible; /* no recorta controles */
}

.video-wrap iframe{
  width:100%;
  height:100%;
  border:0;
  border-radius:12px;
  display:block;
}

/* Fullscreen */
.video-wrap:fullscreen{ background:#000; }
.video-wrap:-webkit-full-screen{ background:#000; }

/* =========================
   RESPONSIVE
========================= */
@media (max-width:1024px){
  .videos-title{ font-size:30px; letter-spacing:.05em; }
  .video-card__header{ font-size:20px; }
  .container{ width:min(var(--container), calc(100% - 40px)); }
}

@media (max-width:980px){
  .topbar__inner{ grid-template-columns:1fr; text-align:center; }
  .social{ justify-content:center; }
  .grid{ grid-template-columns:1fr; }
  .rail__grid{ grid-template-columns:1fr 1fr; }
  .card--lead .media{ height:320px; }
  .headline--lead{ font-size:34px; }
}

@media (max-width:768px){
  .brand__title{ font-size:30px; }
  .brand__tagline{ font-size:13px; }

  .menu__nav{ gap:10px 14px; }
  .menu__nav a{ font-size:13px; padding:6px 4px; }

  .videos-title{
    font-size:24px;
    margin:20px 0 16px;
    text-align:center;
  }

  .videos-stack{ gap:22px; }
  .video-card{ border-radius:8px; }

  .video-card__header{
    font-size:18px;
    padding:12px 14px;
    text-align:center;
  }
  .video-card__body{ padding:12px; }
}

@media (max-width:560px){
  .rail__grid{ grid-template-columns:1fr; }
  .brand__title{ font-size:36px; }
  .headline--lead{ font-size:30px; }
  .footer__inner{
    flex-direction:column;
    align-items:center;
    text-align:center;
  }
}

@media (max-width:480px){
  .videos-title{ font-size:22px; }
  .video-card__header{ font-size:16px; }
  .menu__nav a{ font-size:12px; }
}

/* =========================
   MENOS ESPACIO ARRIBA (MÓVIL)
========================= */
@media (max-width: 768px){

  /* Menú más compacto */
  .menu{
    padding-bottom: 6px !important;
  }

  .menu__nav{
    row-gap: 6px;
  }

  /* Quita espacio extra antes del contenido */
  main.container{
    margin-top: 8px !important;
    padding-top: 0 !important;
  }

  /* Título VIDEOS más arriba */
  .videos-title{
    margin-top: 10px !important;
    margin-bottom: 12px !important;
    font-size: 26px;
    letter-spacing: .04em;
  }
}