/* =================== HERO SCOPED =================== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;700;800;900&display=swap');

.dw-hero{
  --dw-bg:#8b1010; 
	--dw-fg:#eaf7f7; 
	--dw-accent:#ffb400;
  background: var(--dw-bg) !important;
  color: var(--dw-fg) !important;
  font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;

  /* ancho completo */
  width: 100vw !important;
  margin-left: 50% !important;
  transform: translateX(-50%) !important;
}
.dw-hero .dw-hero__inner{
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: clamp(28px, 6vw, 72px) clamp(20px, 4vw, 32px) !important;
  display: grid !important;
  grid-template-columns: 1.05fr 1fr !important;
  gap: clamp(20px, 3vw, 48px) !important;
  align-items: center !important;
}

/* -------- Título ------------ */
.dw-hero .dw-hero__h1{
  line-height: 1.05 !important;
  font-weight: 900 !important;
  font-size: clamp(34px, 5vw, 72px) !important;
  margin: 0 !important;
  color: rgba(234,247,247,.9) !important;
}
.dw-hero .dw-hero__line{ display:block !important; margin: 8px 0 !important; }
.dw-hero .dw-hero__badge-line{ display:block !important; margin: 10px 0 !important; }
.dw-hero .dw-hero__badge{
  display:inline-block !important; background: var(--dw-accent) !important; color:#1a1a1a !important;
  padding: clamp(10px,1.2vw,14px) clamp(14px,1.6vw,18px) !important; border-radius: 10px !important; font-weight: 900 !important;
  box-shadow: 0 6px 0 rgba(0,0,0,.15) inset !important;
}

/* -------- Slider ------------ */
.dw-hero .dw-hero__slider{
  position: relative !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background: #8b1010 !important;
  min-height: 360px !important;   /* base estable en desktop */
}
.dw-hero .dw-hero__track{
  display: grid !important;
  grid-auto-flow: column !important;
  grid-auto-columns: 100% !important;
  transition: transform .5s ease !important;
  height: 100% !important;
}
.dw-hero .dw-slide{ position: relative !important; height: 100% !important; }
.dw-hero .dw-slide__link{ display:block !important; height:100% !important; position:relative !important; color:inherit !important; text-decoration:none !important; }

/* Imagen con opacidad */
.dw-hero .dw-slide__img{
  width: 100% !important; height: 100% !important; object-fit: cover !important;
  opacity: .78 !important; display:block !important; z-index: 1 !important;
}

/* -------- CAPTION SIEMPRE CENTRADO --------
   Usamos overlay a pantalla completa: NADA de top:50%/left:50%;
   Esto evita desplazamientos raros por estilos del tema.
------------------------------------------------ */
.dw-hero .dw-slide__caption{
  position: absolute !important;
  inset: 0 !important;                 /* ocupa todo el slide */
  display: grid !important;
  place-items: center !important;      /* centro perfecto */
  text-align: center !important;
  color: #fff !important;
  background: transparent !important;
  padding: 0 20px !important;
  margin: 0 !important;
  z-index: 2 !important;
  pointer-events: none !important;     /* el <a> sigue clickeable */
  text-shadow: 0 2px 6px rgba(0,0,0,.65) !important;
}
.dw-hero .dw-slide__num{
  display: inline !important; margin-right: 8px !important;
  font-weight: 900 !important; color:#fff !important;
  font-size: clamp(18px, 2.2vw, 28px) !important; line-height:1.1 !important;
}
.dw-hero .dw-slide__title{
  display: inline !important; margin:0 !important; color:#fff !important;
  font-weight: 800 !important; font-size: clamp(18px, 2.2vw, 28px) !important; letter-spacing:.2px !important;
}

/* -------- Controles & Dots -------- */
.dw-hero .dw-ctrl{
  position: absolute !important; top: 50% !important; transform: translateY(-50%) !important;
  width: 44px !important; height: 44px !important; border-radius: 999px !important;
  border: 0 !important; background: rgba(0,0,0,.45) !important; color:#fff !important;
  display: grid !important; place-items: center !important; cursor: pointer !important; z-index: 3 !important;
}
.dw-hero .dw-ctrl:hover{ background: rgba(0,0,0,.65) !important; }
.dw-hero .dw-ctrl--prev{ left: 10px !important; }
.dw-hero .dw-ctrl--next{ right: 10px !important; }
.dw-hero .dw-ctrl__chev{ font-size: 28px !important; line-height: 1 !important; transform: translateY(-1px) !important; }

.dw-hero .dw-dots{
  position: absolute !important; left: 50% !important; bottom: 12px !important;
  transform: translateX(-50%) !important; display:flex !important; gap:8px !important; z-index:3 !important;
}
.dw-hero .dw-dot{ width:10px !important; height:10px !important; border-radius:999px !important; background:rgba(255,255,255,.45) !important; border:0 !important; }
.dw-hero .dw-dot[aria-selected="true"]{ background: var(--dw-accent) !important; }

/* =================== RESPONSIVE =================== */
@media (max-width: 1024px){
  .dw-hero .dw-hero__inner{ grid-template-columns: 1fr !important; }
  .dw-hero .dw-hero__slider{ order: 2 !important; }
  .dw-hero .dw-hero__title{ order: 1 !important; }
}

@media (max-width: 768px){
  /* compactar hero y dar altura real al slider */
  .dw-hero .dw-hero__inner{
    padding: 28px 16px !important;
    gap: 16px !important;
  }
  .dw-hero .dw-hero__slider{
    min-height: 50vh !important;       /* alto real en móvil */
    height: 50vh !important;
    border-radius: 16px !important;
  }
  .dw-hero .dw-slide__img{ height: 100% !important; }
  .dw-hero .dw-ctrl{ width: 40px !important; height: 40px !important; }
  .dw-hero .dw-ctrl--prev{ left: 8px !important; }
  .dw-hero .dw-ctrl--next{ right: 8px !important; }
  .dw-hero .dw-dots{ bottom: 12px !important; gap: 6px !important; }
  .dw-hero .dw-dot{ width: 9px !important; height: 9px !important; }
}

@media (max-width: 600px){
  .dw-hero .dw-slide__num,
  .dw-hero .dw-slide__title{ font-size: clamp(18px, 5vw, 24px) !important; }
}

/* === CAPTION CENTRADO: número + título en la MISMA línea === */
.dw-hero .dw-slide__caption{
  position: absolute !important;
  inset: 0 !important;                  /* ocupa todo el slide */
  display: flex !important;             /* <— antes era grid */
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 0 20px !important;
  text-align: center !important;
  background: transparent !important;
  color: #fff !important;
  z-index: 2 !important;
  pointer-events: none !important;      /* el <a> sigue clickeable */
  text-shadow: 0 2px 6px rgba(0,0,0,.65) !important;
  flex-wrap: nowrap !important;         /* evita que el número salte de línea */
}

.dw-hero .dw-slide__num{
  display: inline-block !important;     /* que no se expanda como bloque */
  margin: 0 8px 0 0 !important;
  font-weight: 900 !important;
  font-size: clamp(18px, 2.2vw, 28px) !important;
  line-height: 1.1 !important;
  color: #fff !important;
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}

.dw-hero .dw-slide__title{
  display: inline-block !important;     /* fuerza inline (los temas ponen h2:block) */
  margin: 0 !important;
  font-weight: 800 !important;
  font-size: clamp(18px, 2.2vw, 28px) !important;
  letter-spacing: .2px !important;
  color: #fff !important;
  line-height: 1.15 !important;
  white-space: normal !important;       /* el texto sí puede partir en varias líneas */
}

/* Si quieres que solo la foto se atenúe (y no el texto), usa brightness: */
.dw-hero .dw-slide__img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  filter: brightness(.75) !important;   /* en lugar de opacity */
}

/* ==== Quitar espacios/linea entre header y hero ==== */

/* 1) El hero no debe tener margen superior */
.dw-hero{ margin-top: 0 !important; }

/* Algunos temas/Gutenberg añaden bloque con gap arriba del contenido */
.entry-content > .dw-hero,
.wp-block-post-content > .dw-hero,
#primary .dw-hero,
.site-content .dw-hero{
  margin-top: 0 !important;
}

/* 2) Muchos temas ponen una línea/sombra bajo el header (quítala) */
.site-header,
.header,
.main-header,
#masthead{
  border-bottom: 0 !important;
  box-shadow: none !important;
}

/* ==== Full-bleed sin “fisuras” laterales ni scroll horizontal ==== */
/* Reemplaza el truco previous (translateX) por este más estable */
.dw-hero{
  position: relative !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  width: 100vw !important;
  max-width: 100vw !important;
  transform: none !important;           /* <— evita sub-píxeles */
  overflow: hidden !important;          /* recorta 1px fantasmas por scrollbar */
}

/* Evita colapsar márgenes del primer hijo (p.e. el h1) */
.dw-hero .dw-hero__title{ padding-top: 1px !important; }
.dw-hero .dw-hero__h1{ margin-top: 0 !important; }

/* Si tu tema agrega un “gap” global entre bloques, neutralízalo en el hero */
:root{
  --wp--style--block-gap: var(--wp--style--block-gap, 0);
}
.entry-content > .dw-hero.alignfull{
  --wp--style--block-gap: 0 !important;
}

/* (Opcional) Si tu tema añade padding al contenedor del contenido justo arriba,
   compénsalo para que el hero pegue al header */
.site-content,
#content,
#primary{
  padding-top: 0 !important;   /* descomenta si ves aún un espacio arriba */
}