/* ==========================================================================
   Draft Pro — Portada del Panel General, opción 8C "Horizonte Fotográfico"
   (2026-08-17). Reemplaza SOLO la sección .dp-hero de panel-general.css --
   el resto del Panel General (franja de capacidades, misión/visión,
   patrocinadores, cuerpo, footer) no cambia.

   Todas las clases van prefijadas .dp-hero8c-- a propósito: el diseño de
   origen (design_handoff_portada_final_8c/index.html) reutiliza nombres
   como .dp-hero/.dp-kicker/.dp-slogan/.dp-brand que YA existen en
   panel-general.css con OTRO significado (el kicker/slogan del resto de la
   página, el .dp-brand del header que esta app no usa). Copiar esos
   nombres tal cual habría chocado con esas reglas ya en uso -- ver
   Noticias, que también tiene su propio .dp-kicker con .dp-rule hijo.

   Se OMITE a propósito el bloque .dp-head/.dp-brand/.dp-badge del diseño
   original (escudo + "DRAFT PRO" + "ACCESO PÚBLICO" dentro de la tarjeta
   del hero): esta app ya muestra esa marca en su propio topbar (reutilizado
   en vez del header del paquete de diseño, misma decisión de siempre) --
   repetirla acá se vería como un segundo header apilado.

   Adaptación fluida (2026-08-17, el diseño de origen es un lienzo FIJO de
   1200×630 pensado también como imagen para compartir -- ver su propio
   README, sección "Al integrarlo"): se sigue esa misma guía -- sin
   width/height fijos, min-height en vez de height, --h8c-pad-x y el
   tamaño del titular bajan en móvil. El fondo de la foto pasa de
   `background-size:1200px auto` (ancho fijo) a `100% auto` (proporcional
   al ancho real de la tarjeta) para conservar el mismo encuadre del
   diamante a cualquier ancho, en vez de recortarlo distinto según el
   viewport -- el `background-position:center 57%` del diseño original se
   mantiene igual.
   ========================================================================== */

.dp-hero8c {
  position: relative;
  min-height: 480px;
  border-bottom: 2px solid var(--dp-ink);
  overflow: hidden;
  --h8c-green-solid: #1D5A38;
  --h8c-green-solid-hover: #174A2E;
  --h8c-text-soft: #3F4D47;
  --h8c-pad-x: 56px;
  --h8c-band-h: 196px;
}

.dp-hero8c__photo {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: var(--h8c-band-h);
  overflow: hidden;
}
.dp-hero8c__photo-sharp,
.dp-hero8c__photo-blur {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-size: 100% auto; /* proporcional al ancho real -- ver nota arriba. NO usar cover: recorta el diamante fuera del encuadre */
  background-position: center 57%;
}
.dp-hero8c__photo-sharp { filter: saturate(1.06) brightness(1.05); }
.dp-hero8c__photo-blur {
  filter: blur(22px) saturate(1.04) brightness(1.1);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 16%, rgba(0,0,0,0) 44%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 16%, rgba(0,0,0,0) 44%);
}
.dp-hero8c__photo-veil {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 64px;
  background: linear-gradient(to bottom, #fff 0%, rgba(255,255,255,.45) 55%, rgba(255,255,255,0) 100%);
}

.dp-hero8c__content {
  position: relative;
  min-height: 480px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 38px var(--h8c-pad-x) 28px;
}

.dp-hero8c__body { max-width: 1000px; padding-bottom: 44px; }
.dp-hero8c__kicker { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.dp-hero8c__kicker::before { content: ""; width: 28px; height: 3px; background: var(--dp-green); display: block; flex: 0 0 auto; }
.dp-hero8c__kicker span {
  font: 800 13px/1 "Archivo", system-ui, sans-serif;
  letter-spacing: .16em; text-transform: uppercase; color: var(--dp-green);
}
.dp-hero8c__title {
  margin: 0;
  font: 800 44px/1.02 "Archivo", system-ui, sans-serif;
  letter-spacing: -.015em;
  color: var(--dp-navy);
  text-wrap: pretty;
}
.dp-hero8c__quote {
  border-left: 4px solid var(--dp-green);
  padding-left: 14px;
  margin: 16px 0 0;
  font: 800 16px/1.25 "Archivo", system-ui, sans-serif;
  letter-spacing: .02em;
  color: var(--dp-green);
}
.dp-hero8c__lede {
  margin: 14px 0 0;
  max-width: 560px;
  font-size: 16px; line-height: 1.4;
  color: var(--h8c-text-soft);
  text-wrap: pretty;
}
.dp-hero8c__actions { display: flex; gap: 14px; margin-top: 18px; flex-wrap: wrap; }
.dp-hero8c__btn {
  font-family: "Archivo", system-ui, sans-serif;
  font-size: 13px; font-weight: 800; letter-spacing: .1em;
  text-decoration: none;
  text-transform: uppercase;
  border-radius: 0;
  cursor: pointer;
  display: inline-block;
}
.dp-panel .dp-hero8c__btn--solid { background: var(--h8c-green-solid); color: #fff; border: 0; padding: 13px 22px; }
.dp-panel .dp-hero8c__btn--solid:hover { background: var(--h8c-green-solid-hover); color: #fff; }
.dp-panel .dp-hero8c__btn--outline {
  background: rgba(255,255,255,.9);
  color: var(--dp-navy);
  border: 2px solid var(--dp-navy);
  padding: 11px 22px;
}
.dp-panel .dp-hero8c__btn--outline:hover { background: var(--dp-navy); color: #fff; }
.dp-hero8c__btn:focus-visible { outline: 2px solid var(--dp-green); outline-offset: 2px; }

/* Franja del eslogan sobre la foto (2026-08-17): ELIMINADA -- pedido real
   de la usuaria. En el lienzo fijo original (1200×630) quedaba anclada al
   borde inferior exacto de la foto por el cálculo `flex:1` del diseño de
   origen; la adaptación fluida de esta app rompió ese anclaje
   (`justify-content:center` centra el bloque completo dentro de una altura
   variable, así que la franja terminaba cayendo a mitad de la foto en vez
   del borde). Se decidió no repararla: con la cinta dinámica (que no
   existía cuando se aprobó 8C originalmente) más la cita `.dp-hero8c__quote`
   de abajo, el mismo eslogan ya aparecía 3 veces en la misma pantalla --
   quitar la franja resuelve el bug de raíz sin perder el eslogan, que
   sigue visible dos veces.

   Reglas .dp-hero8c__banner* -- SI SE VUELVE A NECESITAR: revisar antes
   este mismo comentario, no reintroducir el mismo bug de anclaje. */

@media (max-width: 1339px) {
  .dp-hero8c { --h8c-pad-x: 18px; --h8c-band-h: 150px; min-height: 420px; }
  .dp-hero8c__content { min-height: 420px; padding: 24px var(--h8c-pad-x) 20px; }
  .dp-hero8c__title { font-size: 28px; }
  .dp-hero8c__quote { font-size: 14px; }
  .dp-hero8c__lede { font-size: 14px; max-width: none; }
}