/* ==========================================================================
   ALEXANDRIA - LAS NOTICIAS SON UNA TABERNA
   ==========================================================================
   Solo se carga en la pagina de noticias.
   Tema: TABERNA DE LA ALIANZA (madera, ámbar, luz de vela)

   Los colores estan sacados de la miniatura del video del usuario:
      color medio   #735930
      dominantes    #604020  #a06020  #c08020  #e0a020
   ========================================================================== */

:root {
  --taberna:       #e0a020;
  --taberna-claro: #ffd88a;
  --taberna-osc:   #8a5a18;
  --madera:        #40281a;
}

/* ------------------- EL VIDEO DE FONDO ------------------- */
.noti-video-fondo {
  position: fixed; inset: 0; z-index: -3; overflow: hidden; background: #0d0805;
}
.noti-video-fondo iframe,
.noti-video-fondo video,
.noti-video-fondo .yt-caja,
.noti-video-fondo .yt-caja iframe {
  position: absolute;
  top: 50%; left: 50%;
  width: 177.78vh;
  height: 56.25vw;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%) scale(1.08);
  border: 0;
  pointer-events: none !important;
  filter: brightness(1.18) saturate(1.20) contrast(1.05);
}
.noti-video-velo {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 45%, rgba(224,160,32,.07), transparent 62%),
    linear-gradient(180deg,
      rgba(13,8,5,.30) 0%,
      rgba(13,8,5,.40) 42%,
      rgba(13,8,5,.66) 76%,
      rgba(13,8,5,.88) 100%);
}

/* ------------------- LOS COLORES: TABERNA ------------------- */
body { background: transparent !important; }
body::before, body::after { display: none !important; }

.cabecera {
  background: linear-gradient(180deg, rgba(30,18,10,.96), rgba(16,9,4,.93)) !important;
  border-bottom: 1px solid rgba(224,160,32,.45) !important;
  box-shadow: 0 6px 30px rgba(0,0,0,.7), 0 1px 0 rgba(224,160,32,.25) !important;
}
.marca-texto strong { color: #ffc964 !important; text-shadow: 0 0 16px rgba(224,160,32,.45) !important; }
.navegacion a { color: #d9b98a !important; }
.navegacion a:hover { color: #fff !important; background: rgba(224,160,32,.14) !important; }
.navegacion a.activo { color: #ffd88a !important; text-shadow: 0 0 12px rgba(224,160,32,.5) !important; }

.boton-principal {
  background: linear-gradient(180deg, #ffe7b8 0%, #ffcf78 30%, #f0a832 62%, #c07814 100%) !important;
  border-color: #fff0cc !important; color: #2a1a04 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 0 16px rgba(224,160,32,.5), 0 6px 22px rgba(138,90,24,.45) !important;
}
.boton-secundario { border-color: rgba(224,160,32,.45) !important; color: #ffd88a !important; }
.boton-secundario:hover { background: rgba(224,160,32,.13) !important; border-color: #e0a020 !important; }

h1, h2, h3 { color: #fff4e0 !important; }
.titulo-seccion::after {
  background: linear-gradient(90deg, #e0a020, rgba(224,160,32,0)) !important;
  box-shadow: 0 0 14px rgba(224,160,32,.55) !important;
}
p { color: #ebdcc4 !important; }
.nota, .subtitulo { color: #c0a882 !important; }

/* Las tarjetas de noticias: como tablones de madera */
.tarjeta, .ventanaCuentaCaja, .grupoTemas {
  background: linear-gradient(180deg, rgba(38,24,12,.86), rgba(20,12,5,.92)) !important;
  border-color: rgba(224,160,32,.30) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 0 22px rgba(224,160,32,.10),
    0 14px 34px rgba(0,0,0,.6) !important;
}
.tarjeta::before { background: linear-gradient(90deg, transparent, #e0a020, transparent) !important; }
.tarjeta:hover {
  border-color: rgba(224,160,32,.85) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 0 30px rgba(224,160,32,.25), 0 16px 38px rgba(0,0,0,.65) !important;
}
.tarjeta::after {
  background-image:
    linear-gradient(135deg, rgba(255,231,184,.9) 0 2px, transparent 2px),
    linear-gradient(45deg,  rgba(255,231,184,.9) 0 2px, transparent 2px),
    linear-gradient(315deg, rgba(255,231,184,.9) 0 2px, transparent 2px),
    linear-gradient(225deg, rgba(255,231,184,.9) 0 2px, transparent 2px) !important;
}

/* La fecha de la noticia, en ámbar */
.noticia-fecha { color: #ffc964 !important; }

a { color: #ffb64a !important; }
a:hover { color: #ffd88a !important; }

.pie {
  background: linear-gradient(180deg, rgba(20,12,5,.92), rgba(10,6,2,.96)) !important;
  border-top: 1px solid rgba(224,160,32,.28) !important;
}
.pie h4 { color: #ffb64a !important; }
.pie a { color: #c0a882 !important; }
.pie a:hover { color: #e0a020 !important; }

.aviso { border-left-color: #e0a020 !important; background: rgba(224,160,32,.08) !important; }
code { color: #ffcf78 !important; }

h1, h2, h3, p, .nota { text-shadow: 0 2px 14px rgba(0,0,0,1), 0 0 40px rgba(0,0,0,.9) !important; }

/* ==========================================================================
   EL TITULO GRANDE, ENCIMA DEL VIDEO DE LA TABERNA
   ========================================================================== */
.noti-cabecera {
  position: relative;
  min-height: 58vh;
  display: flex;
  align-items: center;
  padding: 6rem 0 5rem;
  border-bottom: 1px solid rgba(224,160,32,.40);
  background: transparent !important;
}
.noti-cabecera .contenedor { position: relative; z-index: 2; }

.noti-cabecera h1,
.noti-cabecera .titulo-seccion {
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: clamp(3rem, 9vw, 6.5rem) !important;
  font-weight: 700 !important;
  line-height: 1.02 !important;
  letter-spacing: .01em !important;
  color: #fff6e4 !important;
  margin-bottom: 1.1rem !important;
  text-shadow:
    0 4px 26px rgba(0,0,0,1),
    0 0 70px rgba(0,0,0,.95),
    0 0 120px rgba(224,160,32,.35) !important;
}
.noti-cabecera .titulo-seccion::after {
  width: 160px !important;
  height: 4px !important;
  background: linear-gradient(90deg, #ffc964, #e0a020 45%, rgba(224,160,32,0) 100%) !important;
  box-shadow: 0 0 20px rgba(224,160,32,.7) !important;
}
.noti-cabecera p {
  font-size: 1.12rem !important;
  max-width: 660px !important;
  color: #f0e2cc !important;
  text-shadow: 0 2px 16px rgba(0,0,0,1), 0 0 50px rgba(0,0,0,.9) !important;
}

@media (max-width: 700px) {
  .noti-cabecera { min-height: 44vh; padding: 4rem 0 3rem; }
}
/* ==========================================================================
   MAS CALIDAD EN EL VIDEO
   ==========================================================================
   YouTube decide la calidad segun el tamaño del reproductor.
   Cuanto mas grande sea, mejor calidad sirve.
   Y se le quita el filtro de color, que emborronaba un poco.
   ========================================================================== */
.noti-video-fondo .yt-caja,
.noti-video-fondo .yt-caja iframe,
.noti-video-fondo iframe {
  width: 260vh !important;        /* antes 177.78vh -> mucho mas grande */
  height: 146vw !important;
  filter: brightness(1.06) saturate(1.06) contrast(1.01) !important;   /* antes 1.18 / 1.20 */
  transform: translate(-50%, -50%) scale(1.02) !important;             /* antes 1.08 */
  image-rendering: auto;
}

/* Y sin filtros raros que estropeen la imagen */
.noti-video-velo {
  backdrop-filter: none !important;
  background:
    radial-gradient(ellipse at 50% 45%, rgba(224,160,32,.04), transparent 62%),
    linear-gradient(180deg,
      rgba(13,8,5,.26) 0%,
      rgba(13,8,5,.34) 42%,
      rgba(13,8,5,.60) 76%,
      rgba(13,8,5,.84) 100%) !important;
}
/* ==========================================================================
   CALIDAD MAXIMA
   ==========================================================================
   Todo lo que se le ponia encima al video (filtros de color, escala,
   suavizados) le quitaba nitidez. Aqui se quita todo.
   ========================================================================== */

/* El video, SIN NINGUN FILTRO: tal cual lo manda YouTube */
.noti-video-fondo iframe,
.noti-video-fondo .yt-caja iframe,
.noti-video-fondo video {
  filter: none !important;
  -webkit-filter: none !important;
  transform: translate(-50%, -50%) scale(1) !important;   /* sin ampliar nada */
  image-rendering: auto !important;
  backface-visibility: hidden;
  will-change: transform;
}

/* El reproductor, lo mas grande posible (YouTube da mas calidad) */
.noti-video-fondo .yt-caja,
.noti-video-fondo .yt-caja iframe,
.noti-video-fondo iframe {
  width: 320vh !important;
  height: 180vw !important;
  min-width: 100% !important;
  min-height: 100% !important;
}

/* La capa oscura: la minima imprescindible para leer el texto */
.noti-video-velo {
  background:
    linear-gradient(180deg,
      rgba(13,8,5,.22) 0%,
      rgba(13,8,5,.30) 40%,
      rgba(13,8,5,.55) 78%,
      rgba(13,8,5,.80) 100%) !important;
  backdrop-filter: none !important;
}

/* Y el texto con sombra, sin oscurecer el video entero */
.noti-cabecera h1,
.noti-cabecera p {
  text-shadow:
    0 3px 20px rgba(0,0,0,1),
    0 0 60px rgba(0,0,0,.95),
    0 0 110px rgba(0,0,0,.85) !important;
}
/* ==========================================================================
   SIN BORROSIDAD  (esto gana a todo lo anterior)
   ==========================================================================
   EL PROBLEMA: el reproductor lo puse de 3040 x 2592 px
                -> proporcion 1,17
                -> pero el video es 16:9 (1,78)
                -> YouTube lo estiraba y se veia borroso  ✗

   LA SOLUCION: la proporcion EXACTA del video (16:9) y del tamaño justo.
                177.78vh x 56.25vw es la formula del 16:9 "a pantalla completa".
                Para una pantalla normal sale sobre 1690 x 950 px
                -> casi igual que 1080p, asi que NO hay que estirar nada  ✓
   ========================================================================== */

.noti-video-fondo .yt-caja,
.noti-video-fondo .yt-caja iframe,
.noti-video-fondo iframe {
  width: 177.78vh !important;      /* 16:9 exacto */
  height: 56.25vw !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  filter: none !important;
  -webkit-filter: none !important;
  transform: translate(-50%, -50%) scale(1.01) !important;  /* casi nada */
  image-rendering: -webkit-optimize-contrast;
  object-fit: cover;
}

/* En pantallas muy anchas, un poco mas para que cubra bien */
@media (min-aspect-ratio: 16/9) {
  .noti-video-fondo .yt-caja,
  .noti-video-fondo .yt-caja iframe,
  .noti-video-fondo iframe {
    width: 100vw !important;
    height: 56.25vw !important;
  }
}
/* En pantallas altas (movil), tambien */
@media (max-aspect-ratio: 16/9) {
  .noti-video-fondo .yt-caja,
  .noti-video-fondo .yt-caja iframe,
  .noti-video-fondo iframe {
    width: 177.78vh !important;
    height: 100vh !important;
  }
}

/* Y el velo, lo mas suave posible para que luzca la imagen */
.noti-video-velo {
  background:
    linear-gradient(180deg,
      rgba(13,8,5,.20) 0%,
      rgba(13,8,5,.26) 38%,
      rgba(13,8,5,.52) 76%,
      rgba(13,8,5,.78) 100%) !important;
}