/* ==========================================================================
   bb2026 — PORTADA / 8. CTA FINAL como BANNER.

   Salio de home-blocks.css: ese fichero ya rozaba las 300 lineas y el
   banner (fondo, velo, entrada y tipografia sobre foto) pide bloque
   propio. Aqui vive el bloque 8 y nada mas.

   Namespace .bb-hcta. No toca header, footer ni nav.
   ========================================================================== */

.bb-hcta {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 70svh;
  padding-block: var(--bb-s6);
  overflow: hidden;
  /* Color de respaldo mientras la foto carga o si no hubiera imagen: la
     tinta del sistema, nunca el verde (el verde deja de ser el fondo de
     esta seccion). */
  background: var(--bb-ink);
}

/* --- Fondo: marco + foto + velo ---
   El marco esta en posicion absoluta y llena la seccion, asi que NO tiene
   aspect-ratio y la imagen va tambien absoluta: se cumple la regla del
   marco (nunca imagen en flujo con height:100% dentro de una pista 1fr).
   La foto y el velo van los dos DENTRO del marco para que la persiana
   (clip-path sobre el marco) revele las dos a la vez. */
.bb-hcta__frame {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.bb-hcta__img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* VELO NEGRO. Plano al 68% + un degradado que solo AÑADE oscuridad hacia
   abajo, nunca resta: el minimo garantizado en toda la superficie es el
   68% plano, y de ahi sale el 7,2:1 medido en la cabecera de cta.php. */
.bb-hcta__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 62%),
    rgba(0, 0, 0, 0.68);
}

/* --- Contenido --- */
.bb-hcta__in {
  position: relative;
  z-index: 1;
  max-width: 900px;
  color: var(--bb-paper);
}
/* Sin .bb-bg-accent ya no hay regla global que pinte los hijos: se
   declara aqui, que es donde se ve. */
.bb-hcta__in a,
.bb-hcta__title,
.bb-hcta__lines,
.bb-hcta__meta { color: var(--bb-paper); }

/* Filete decorativo: da arranque al bloque sin meter copy nuevo. */
.bb-hcta__rule {
  display: block;
  width: 64px;
  height: 1px;
  margin-bottom: var(--bb-s3);
  background: var(--bb-paper);
  opacity: 0.55;
}

.bb-hcta__title { margin: 0 0 var(--bb-s4); }
.bb-hcta__lines {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--bb-s1);
  font-family: var(--bb-font-body);
  font-size: clamp(1.0625rem, 1.6vw, 1.375rem);
  line-height: 1.6;
}
.bb-hcta__mail, .bb-hcta__tel { font-weight: 600; }

/* --- Boton principal ---
   Variante .bb-btn--light del sistema (borde y texto en papel sobre
   fondo oscuro). Aqui solo se asegura el AREA DE PULSACION: con los
   16px/24px de relleno de .bb-btn el alto queda justo en el limite, asi
   que se fija un minimo de 48px y un relleno lateral mas holgado.

   CONTRASTE (medido, WCAG 2.1): texto y borde papel #F7F5F2 (luminancia
   relativa 0,9148) sobre el velo negro al 68%; en el peor caso
   imaginable —una zona de foto blanca pura— el fondo compuesto queda en
   sRGB 0,32, luminancia 0,0836, y el contraste sale 7,2:1. AA pide
   4,5:1 para texto y 3:1 para el borde. En hover y en foco se invierte:
   tinta #1C1B19 (luminancia 0,0117) sobre papel -> 15,6:1. */
.bb-hcta__actions { margin: var(--bb-s4) 0 0; }
.bb-hcta__btn {
  min-height: 48px;
  padding-inline: var(--bb-s4);
  justify-content: center;
}
/* El foco global es verde acento (#2E4A42), que sobre el velo negro se
   ve poco. Aqui el anillo va en papel: 7,2:1 contra el peor fondo, muy
   por encima del 3:1 que pide el criterio de elementos no textuales. */
.bb-hcta__btn:focus-visible {
  outline-color: var(--bb-paper);
}
.bb-hcta__meta {
  margin: var(--bb-s5) 0 0;
  font-family: var(--bb-font-display);
  font-weight: 500;
  font-size: var(--bb-size-label);
  text-transform: uppercase;
  letter-spacing: 0.28em;
  line-height: 1.8;
  opacity: 0.82;
}
.bb-hcta__sep { padding-inline: var(--bb-s1); opacity: 0.6; }

@media (min-width: 768px) {
  .bb-hcta {
    min-height: 78svh;
    padding-block: var(--bb-s7);
  }
}