/*
 Theme Name: F5
 Template: hello-elementor
 Description: Tema hijo "F5" para Hello Elementor
 Author: Tu Nombre
 Version: 1.0.0
 Text Domain: f5
*/

/* F5: neutralizar distorsión cuando viene sizes de WP */
.f5-inline img[sizes]{
  width:100% !important;
  max-width:100% !important;
  height:auto !important;
}

/* Forzamos el bloque publicitario dentro del contenido */
/* Bloque de publicidad incrustado */
/* Bloque de publicidad incrustado */
.ia-ad-inline {
  display: inline-block !important;
  float: right !important;
  width: 280px !important;
  max-width: 280px !important;
  margin: 0 0 16px 24px !important;

  /*background: #fff;                  /* caja blanca SIEMPRE */
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);

  text-align: center;
  box-sizing: border-box;
  font-size: 12px;                   /* opcional: texto chico */
}

/* En móviles: centrado y ancho casi completo */
@media (max-width: 768px) {
  .ia-ad-inline {
    float: none !important;
    display: block !important;
    width: 90% !important;
    max-width: 90% !important;
    margin: 16px auto !important;
    /*background: #fff;                /* reforzamos en móvil */
  }
}

/* Etiqueta opcional arriba de los ads */
.ia-ad-inline::before {
  /*content: "Publicidad";*/
  display: block;
  font-size: 11px;
  font-weight: bold;
  color: #999;
  text-transform: uppercase;
  margin-bottom: 6px;
}

/* ==========================
   GRID DE NOTICIAS (HK)
   ========================== */
.hk-grid {
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(3, 1fr);
  margin: 0 auto;
  max-width: 1280px;
  padding: 10px;
}

@media (max-width: 1024px) {
  .hk-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .hk-grid {
    grid-template-columns: 1fr;
    padding: 0 12px;
  }
}

/* ===== HK GRID · ajustes por breakpoints personalizados ===== */
/* Desktop y superiores: 3 columnas (ya es el default) */
.hk-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Tablet Portrait (up to 1024px): mantener 3 columnas */
@media (max-width: 1024px) {
  .hk-grid {
    grid-template-columns: repeat(3, 1fr) !important; /* override */
  }
}

/* Mobile Landscape (up to 880px): 1 columna */
@media (max-width: 880px) {
  .hk-grid {
    grid-template-columns: 1fr !important; /* override */
  }
}


/* ====== TARJETAS ====== */
.hk-card {
  background: transparent;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.25);
  transition: transform .25s ease, box-shadow .25s ease;
}

.hk-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 18px rgba(0,0,0,0.35);
}

.hk-card__link {
  display: block;
  color: inherit;
  text-decoration: none;
}

/* Imagen */
.hk-card__thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
  border-radius: 14px 14px 0 0;
}

.hk-card__thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  max-width: none;
}

/* Fix Safari/iPhone */
@supports (-webkit-touch-callout: none) {
  .hk-card__thumb img {
    width: 100% !important;
    height: 100% !important;
  }
}

/* Contenido */
.hk-card__body {
  padding: 12px 14px 16px;
}

.hk-card__cat {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #bbb;
  margin-bottom: 6px;
}

.hk-card__title {
  font-size: 1.05rem;
  line-height: 1.25;
  font-weight: 600;
  color: #fff;
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ===== Ajustes visuales adicionales ===== */

/* Texto general */
.hk-card__title {
  font-size: 1.1rem;       /* tamaño base de la fuente */
  font-weight: 700;        /* grosor */
  line-height: 1.3;
  color: #fff;             /* texto blanco */
}

.hk-card__cat {
  font-size: 0.8rem;
  font-weight: 600;
  color: #ccc;
}

/* Borde blanco alrededor de la imagen */
.hk-card__thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
  border-radius: 14px;
  border: 3px solid #fff;   /* borde blanco visible */
}

/* Efecto sutil al pasar el mouse */
.hk-card:hover .hk-card__thumb {
  border-color: #f5f5f5;    /* tono más suave al hover */
  transition: all 0.3s ease;
}
/* ===== FIX videos/embeds dentro del expander ===== */
.f5-inline .wp-block-embed,
.f5-inline .wp-block-embed.is-type-video,
.f5-inline .elementor-widget-video,
.f5-inline .elementor-video,
.f5-inline .elementor-widget-embed,
.f5-inline .elementor-fit-aspect-ratio,
.f5-inline .wp-video,
.f5-inline .video-wrap {
  margin: .75rem 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

/* Contenedor con relación 16:9 sin “padding hacks” */
.f5-inline .wp-block-embed__wrapper,
.f5-inline .elementor-video,
.f5-inline .elementor-widget-video .elementor-wrapper,
.f5-inline .elementor-fit-aspect-ratio,
.f5-inline .video-wrap,
.f5-inline .responsive-video {
  position: relative !important;
  aspect-ratio: 16/9 !important;
  width: 100% !important;
  height: auto !important;
  padding: 0 !important;
  overflow: hidden !important;
  max-height: 70vh !important; /* evita altura desproporcionada */
}

/* El iframe/video ocupa 100% del contenedor */
.f5-inline .wp-block-embed__wrapper iframe,
.f5-inline .elementor-video iframe,
.f5-inline .elementor-widget-video iframe,
.f5-inline .elementor-widget-video video,
.f5-inline .responsive-video iframe,
.f5-inline iframe[src*="youtube.com"],
.f5-inline iframe[src*="youtu.be"],
.f5-inline iframe[src*="vimeo.com"] {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  border: 0 !important;
  display: block !important;
  object-fit: cover !important;
}

/* Algunos temas meten padding-bottom para hacer ratio: anúlalo */
.f5-inline .wp-block-embed__wrapper[style*="padding-bottom"],
.f5-inline .elementor-fit-aspect-ratio[style*="padding-bottom"] {
  padding-bottom: 0 !important;
}

/* Figure/caption coherentes */
.f5-inline figure.wp-block-embed { margin: .75rem 0 !important; }
.f5-inline .wp-block-embed figcaption { margin-top: .5rem; opacity:.8; font-size:.9em; }

/* ===== Fix específico iack-embed ===== */
.f5-inline .iack-embed,
.f5-inline .iack-embed.iack-embed--16x9 {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: .75rem 0 !important;
  background: transparent !important;
  overflow: hidden !important;
  max-height: 70vh !important; /* limite visual */
}

/* Si usan pseudo-elementos para el hack del ratio, desactívalos */
.f5-inline .iack-embed::before,
.f5-inline .iack-embed::after { content: none !important; }

/* El media interno ocupa 100% del contenedor */
.f5-inline .iack-embed > iframe,
.f5-inline .iack-embed > video,
.f5-inline .iack-embed * > iframe,
.f5-inline .iack-embed * > video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  max-width: none !important;
  display: block !important;
  object-fit: cover !important;
}

/* Por si algún estilo insiste con padding-bottom para el ratio */
.f5-inline .iack-embed[style*="padding"],
.f5-inline .iack-embed *[style*="padding-bottom"] {
  padding-bottom: 0 !important;
}


/* ===== Fondo de video ===== */
#site-bg-video{
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  pointer-events: none;
  z-index: 0;
  filter: none; /* si querés oscurecer con filtro: brightness(.55) */
}

#site-bg-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55); /* subí/bajá 0.45–0.75 a gusto */
  pointer-events: none;
  z-index: 1;
}

/* Contenido por encima del overlay */
html, body{ background: #000 !important; } /* fallback negro si el video no carga */
.site, .elementor, .elementor-location-header, .elementor-location-single, .elementor-location-footer{
  position: relative;
  z-index: 2;
}

/* Admin bar por encima */
#wpadminbar{ position: fixed; z-index: 99999 !important; }



/* El contenido va por encima del overlay */
html, body { background: transparent !important; }
.site,
.elementor-location-header,
.elementor-location-footer,
.elementor-location-single,
.elementor {
  position: relative;
  z-index: 2;
}

/* Admin bar por encima de todo */
#wpadminbar { z-index: 99999 !important; position: fixed; }

/* ===== Imágenes fluidas en single post ===== */
.single-post .elementor img,
.single-post .entry-content img,
.single-post .wp-block-image img,
.single-post .f5-inline img {
  display: block;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  object-fit: cover;
  margin: 0 auto;
  border-radius: 0;
}

/* Si el contenedor de la imagen tiene márgenes o límites, los limpiamos */
.single-post .wp-block-image,
.single-post .elementor-widget-image,
.single-post figure {
  margin: 0 0 1.5rem 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
}

/* Evita centrados o floats heredados */
.single-post .alignleft,
.single-post .alignright,
.single-post .aligncenter {
  float: none !important;
  display: block !important;
  margin: 1.5rem 0 !important;
  text-align: center;
}