/* ==========================================================================
   bb2026 — PAGINA DE SERVICIO / CASCARA Y HERO.

   Namespace .bb-svc-page (body) y .bb-shero. No toca la portada, ni la
   cabecera, ni el pie, ni el menu, ni el cursor, ni ningun z-index
   existente. Las tres hojas del servicio se reparten asi:

     service.css          cascara de pagina + hero + intro
     service-blocks.css   bloques de texto, zonas, incluye, FAQ, otros
     service-gallery.css  rejilla de galeria + lightbox

   JERARQUIA DE CAPAS QUE YA EXISTE (no se rompe): overlay de menu 300,
   barra 400, salto al contenido 999, cursor 1200, cortina 1500. El
   lightbox se mete en el rango 500+ reservado para dialogos, que queda
   libre entre la barra y el cursor (ver service-gallery.css).
   ========================================================================== */

/* --------------------------------------------------------------------------
   CASCARA DE PAGINA
   -------------------------------------------------------------------------- */

/* Fondo de carga en BLANCO puro, igual que la portada: es lo que se ve
   debajo de la cortina y detras del hero mientras la persiana baja. El
   papel calido se percibia como gris. home-curtain.css hace lo mismo con
   body.home; aqui la clase es la del servicio. */
body.bb-svc-page { background: var(--bb-load-bg); }

/* header.php reserva el alto de la barra fija en todas las paginas que no
   son la portada (.bb-main--offset). Aqui el hero va A SANGRE desde
   arriba, asi que ese hueco se anula. Se hace por CSS —con la clase del
   body, que gana en especificidad— y NO tocando header.php. */
body.bb-svc-page .bb-main--offset { padding-top: 0; }

/* --------------------------------------------------------------------------
   HERO A SANGRE
   -------------------------------------------------------------------------- */
.bb-shero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  /* Respaldo mientras la foto carga: la tinta del sistema. */
  background: var(--bb-ink);
}

/* EL MARCO es quien lleva el recorte de la persiana. La foto y el velo
   van los dos DENTRO, en absoluto: asi el velo se revela con la foto y
   no se pinta entero sobre el blanco de carga (que es lo que producia el
   "lavado gris" en la portada). Sin aspect-ratio y con la imagen tambien
   absoluta: nunca imagen en flujo con height:100%. */
.bb-shero__frame {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.bb-shero__img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.86;
}
/* EL VELO LLEVA DOS CAPAS, y las dos hacen falta:
   1. la ASCENDENTE de siempre, que oscurece la mitad baja para que se lea
      el h1;
   2. una DESCENDENTE nueva en la franja superior, para que el logotipo y el
      menu se lean sobre CUALQUIER fotografia. Sin ella, un hero con cielo
      blanco arriba deja el logo claro invisible: la capa 1 solo aporta 0,42
      de tinta en el borde de arriba y eso no basta.

   ARITMETICA DEL PEOR CASO IMAGINABLE (zona de foto blanco puro, sRGB 255):
     foto  : la imagen va al 86% sobre el fondo tinta #1C1B19
             -> 0,86*255 + 0,14*28 = 223,2
     capa 1: 0,42 de tinta        -> 0,42*28 + 0,58*223,2 = 141,2
     capa 2: 0,40 de tinta        -> 0,40*28 + 0,60*141,2 =  95,9
     luminancia relativa de gris 95,9 = 0,1167
     texto/logo claros = --bb-paper #F7F5F2, luminancia 0,8982
     contraste = (0,8982+0,05) / (0,1167+0,05) = 5,69:1  -> cumple 4,5:1
   El minimo teorico para 4,5:1 seria 0,262 de tinta; se usa 0,40 para
   dejar margen y aguantar tambien un blanco con brillo especular.

   La capa 2 muere a 220px, por debajo de la barra mas alta (88px en
   escritorio) con holgura, asi que no lava la fotografia ni toca el h1. */
.bb-shero__veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to bottom,
      rgba(28, 27, 25, 0.40) 0,
      rgba(28, 27, 25, 0) 220px
    ),
    linear-gradient(
      to top,
      rgba(28, 27, 25, 0.78) 0%,
      rgba(28, 27, 25, 0.20) 58%,
      rgba(28, 27, 25, 0.42) 100%
    );
}

/* --------------------------------------------------------------------------
   ENTRADA DEL HERO — persiana vertical DESCENDENTE, en CSS puro.

   Va en CSS y no en JS porque el estado inicial tiene que estar aplicado
   ANTES del primer pintado; si lo pusiera el JS se veria la foto un
   fotograma antes de colapsar. Misma direccion y mismos tokens que la
   portada (--bb-delay-hero, --bb-dur-blind, --bb-ease-blind).

   ############ TRAMPA PAGADA: LOS DOS EXTREMOS, 4 COMPONENTES ###########
   Un inset() de 4 componentes NO interpola contra uno de 1: el navegador
   serializa inset(0% 0% 100% 0%) con tres o cuatro piezas e inset(0) con
   una, y con estructuras distintas la animacion se queda CLAVADA en el
   valor inicial y salta al final. Por eso los dos fotogramas de abajo
   llevan los CUATRO lados explicitos y todos en % .
   #######################################################################

   'both' es obligatorio: durante el retardo (mientras pasa la cortina
   blanca) el elemento tiene que estar ya en el estado 'from'.

   Todo el bloque vive dentro de prefers-reduced-motion: no-preference,
   asi que con movimiento reducido no hay recorte NINGUNO y el hero se ve
   directamente. Si estuviera fuera, el retardo dejaria la foto oculta
   medio segundo incluso con las animaciones neutralizadas. */
@media (prefers-reduced-motion: no-preference) {

  .bb-shero__frame {
    animation: bb-shero-open var(--bb-dur-blind) var(--bb-ease-blind) var(--bb-delay-hero) both;
  }

  .bb-shero__in,
  .bb-shero__scroll {
    animation: bb-shero-rise 0.9s var(--bb-ease) calc(var(--bb-delay-hero) + 0.5s) both;
  }

  /* Ken Burns: se reutilizan los @keyframes bb-ken de home-kenburns.css
     (12s, curva simetrica, alternate), que es el valor aprobado. No se
     redefine la aritmetica: esta documentada en esa hoja. */
  .bb-shero__img {
    animation: bb-ken 12s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
  }
}

@keyframes bb-shero-open {
  from { clip-path: inset(0% 0% 100% 0%); }
  to   { clip-path: inset(0% 0% 0% 0%); }
}
@keyframes bb-shero-rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --------------------------------------------------------------------------
   CONTENIDO DEL HERO
   -------------------------------------------------------------------------- */
.bb-shero__in {
  position: relative;
  z-index: 2;
  width: 100%;
  /* Arriba se deja pasar la barra fija; abajo, aire hasta la senial. */
  padding-block: calc(var(--bb-bar-h) + var(--bb-s5)) var(--bb-s5);
}
.bb-shero__label {
  color: var(--bb-paper);
  opacity: 0.78;
  margin: 0 0 var(--bb-s2);
}
.bb-shero__title {
  color: var(--bb-paper);
  max-width: 22ch;
}

/* Senial de bajar: enlace real al primer bloque, alineado al margen. */
.bb-shero__scroll {
  position: relative;
  z-index: 2;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: var(--bb-s2);
  margin: 0 0 var(--bb-s4) var(--bb-gutter);
  color: var(--bb-paper);
  font-family: var(--bb-font-display);
  font-weight: 500;
  font-size: var(--bb-size-label);
  text-transform: uppercase;
  letter-spacing: var(--bb-track-label);
}
.bb-shero__scroll-rail {
  position: relative;
  display: block;
  width: 1px;
  height: 56px;
  overflow: hidden;
  background: rgba(247, 245, 242, 0.28);
}
.bb-shero__scroll-line {
  position: absolute;
  inset: 0;
  background: var(--bb-paper);
  transform-origin: top;
}
@media (prefers-reduced-motion: no-preference) {
  .bb-shero__scroll-line {
    animation: bb-shero-run 2.4s var(--bb-ease) infinite;
  }
}
@keyframes bb-shero-run {
  from { transform: translateY(-100%); }
  to   { transform: translateY(250%); }
}
.bb-shero__scroll:focus-visible { outline-color: var(--bb-paper); }

/* La caja-etiqueta firma se ancla dentro del margen: el hero recorta.
   Mismo ajuste que hacen layout.css y home-hero.css para sus heroes. */
.bb-shero .bb-tag--br {
  right: var(--bb-gutter);
  bottom: 0;
  transform: none;
  z-index: 3;
}

@media (max-width: 767px) {
  /* En movil la senial de bajar y la caja-etiqueta se pelean por la
     esquina: se retira la senial, que es el elemento redundante (el
     scroll natural ya existe). */
  .bb-shero__scroll { display: none; }
  .bb-shero__title { max-width: none; }
}

/* --------------------------------------------------------------------------
   INTRO — composicion asimetrica
   La frase lirica manda en la columna izquierda y los parrafos caen a la
   derecha, escalonados. En movil se apilan.
   -------------------------------------------------------------------------- */
.bb-sintro {
  background: var(--bb-paper);
  padding-block: var(--bb-s5);
}
.bb-sintro__grid {
  display: grid;
  /* minmax(0, 1fr) y no 1fr: una pista '1fr' es minmax(auto, 1fr) y se
     mide por contenido, lo que rompe cualquier caja con aspect-ratio o
     texto largo dentro. Regla general de este proyecto. */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--bb-s4);
}
.bb-sintro__lyric { margin: 0; }
.bb-sintro__p { margin: 0 0 var(--bb-s3); }
.bb-sintro__p:last-child { margin-bottom: 0; }

@media (min-width: 768px) {
  .bb-sintro { padding-block: var(--bb-s6); }
  .bb-sintro__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: var(--bb-s5);
    align-items: start;
  }
  /* El desnivel es lo que rompe la simetria: el texto arranca mas abajo
     que la frase, no a la misma altura. */
  .bb-sintro__text { padding-top: var(--bb-s4); }
}

/* ==================================================================
   SERVICIOS NUEVOS — palabra de marca, tira en bucle y bandas de foto

   Solo lo usan /fotografia-mascotas-pontevedra/ y
   /book-fotografico-pontevedra/: las reglas cuelgan de clases que las
   otras seis paginas no imprimen, asi que anadirlas aqui no cambia
   nada de lo aprobado.
   ================================================================== */

/* ------------------------------------------------------------------
   1. PALABRA DE MARCA EN EL HERO

   "Huellas" / "Books" en grande, y debajo el h1 con la palabra clave.
   Va en Jost 300 con mucho interletrado negativo para que lea como un
   logotipo y no como un titular mas. El h1 baja a display-m: si los dos
   fueran enormes competirian y no se sabria cual es el titulo.
   ------------------------------------------------------------------ */

.bb-shero__word {
	margin: 0 0 .12em;
	font-family: var( --bb-font-display );
	font-weight: 300;
	font-size: clamp( 3.5rem, 13vw, 11rem );
	line-height: .86;
	letter-spacing: -.035em;
	color: var( --bb-paper );
	/* El hero lleva velo, pero una foto clara puede comerse el trazo
	   fino de Jost 300. Una sombra muy abierta y muy suave sostiene el
	   contraste sin que se vea como "texto con sombra". */
	text-shadow: 0 2px 40px rgba( 28, 27, 25, .45 );
}

.bb-shero__title {
	max-width: 22ch;
}


/* ------------------------------------------------------------------
   2. TIRA EN BUCLE SOBRE LA FOTO

   El carril lleva el texto CUATRO veces y se desplaza exactamente la
   mitad de su ancho: al llegar, la segunda mitad esta donde estaba la
   primera y el salto no se ve. Por eso el -50% no es un numero
   cualquiera y no se puede tocar sin cambiar tambien las repeticiones.

   Va en CSS, sin JavaScript: es una animacion continua que no depende
   del scroll ni de nada que haya que medir.
   ------------------------------------------------------------------ */

.bb-smarquee {
	/* EN FLUJO, no en absoluto. El bloque de texto del hero tambien esta
	   anclado abajo, asi que dos elementos midiendo desde el mismo borde se
	   acaban pisando en cuanto la ventana es baja. Como hijo del flex del
	   hero, el reparto lo hace el navegador y el solape es imposible. */
	position: relative;
	z-index: 2;
	width: 100%;
	margin-top: var( --bb-s3 );
	margin-bottom: var( --bb-s2 );
	overflow: hidden;
	pointer-events: none;
	/* Se difumina en los bordes para que el texto no aparezca cortado
	   de golpe contra el borde de la pantalla. */
	-webkit-mask-image: linear-gradient( 90deg, transparent, #000 6%, #000 84%, transparent );
	mask-image: linear-gradient( 90deg, transparent, #000 6%, #000 84%, transparent );
}

.bb-smarquee__carril {
	display: flex;
	align-items: center;
	gap: var( --bb-s3 );
	width: max-content;
	animation: bb-marquee 44s linear infinite;
}

.bb-smarquee__txt,
.bb-smarquee__sep {
	font-family: var( --bb-font-display );
	font-weight: 300;
	/* En mayusculas por decision de la clienta. Se hace aqui y no en el
	   copy: asi el texto se escribe y se lee normal en el fichero, y la
	   regla vale para las ocho paginas a la vez. */
	text-transform: uppercase;
	letter-spacing: .08em;
	font-size: clamp( 1.1rem, 2.4vw, 2rem );
	letter-spacing: .04em;
	white-space: nowrap;
	/* Papel con alfa: sobre el velo del hero se mantiene por encima de
	   4,5:1, y no compite con la palabra de marca. */
	color: rgba( 247, 245, 242, .78 );
}

.bb-smarquee__sep {
	color: rgba( 247, 245, 242, .45 );
}

@keyframes bb-marquee {
	from { transform: translate3d( 0, 0, 0 ); }
	to   { transform: translate3d( -50%, 0, 0 ); }
}

/* Quien pide menos movimiento no ve una tira corriendo sin parar. */
@media ( prefers-reduced-motion: reduce ) {
	.bb-smarquee__carril {
		animation: none;
		transform: none;
	}
}

@media ( max-width: 640px ) {
	.bb-smarquee {
		margin-top: var( --bb-s2 );
	}
}

/* ------------------------------------------------------------------
   3. BANDAS CON FOTOGRAFIA

   A sangre: la seccion NO lleva .bb-wrap, asi que ocupa el ancho de su
   contenedor. NUNCA 100vw — en este proyecto ya costo una ronda: 100vw
   incluye la barra de desplazamiento y aparecen 8px de scroll
   horizontal.
   ------------------------------------------------------------------ */

.bb-sbanda {
	position: relative;
	display: flex;
	align-items: flex-end;
	overflow: clip;
	margin-block: var( --bb-s6 );
}

.bb-sbanda--fondo {
	/* Mas alta que en la primera version: la clienta la queria con mas
	   presencia, y de paso la fotografia entra en pantalla bastante antes
	   que el texto, que es lo que hace que la animacion se lea en el orden
	   correcto (primero la foto, despues las palabras). */
	min-height: clamp( 560px, 96svh, 1040px );
	padding-block: var( --bb-s6 );
}

.bb-sbanda--pantalla {
	min-height: 100svh;
}

.bb-sbanda__foto {
	position: absolute;
	inset: 0;
	z-index: 0;
}

/* La foto entra con un acercamiento muy corto, no con el desplazamiento
   vertical que trae .bb-reveal por defecto: en una imagen a sangre un salto
   de 24px se ve como un tiron. */
.bb-sbanda__foto.bb-reveal {
	transform: scale( 1.04 );
}

.bb-sbanda__foto.bb-reveal.is-in {
	transform: none;
	transition:
		opacity var( --bb-dur ) var( --bb-ease ),
		transform var( --bb-dur-reveal ) var( --bb-ease );
}

/* El estado inicial de la persiana lo pone GSAP, no el CSS: asi, sin
   JavaScript, la fotografia se ve entera desde el primer fotograma en
   vez de quedarse recortada para siempre. */
.bb-sbanda__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* El velo es lo que garantiza que el texto se lea sobre CUALQUIER
   fotografia, clara u oscura. Sin el, el blanco desaparece. */
.bb-sbanda__velo {
	position: absolute;
	inset: 0;
	background:
		linear-gradient( 180deg, rgba( 28, 27, 25, .25 ) 0%, rgba( 28, 27, 25, .72 ) 100% );
}

.bb-sbanda--der .bb-sbanda__velo {
	background:
		linear-gradient( 180deg, rgba( 46, 74, 66, .35 ) 0%, rgba( 46, 74, 66, .85 ) 100% );
}

.bb-sbanda__in {
	position: relative;
	z-index: 1;
	width: 100%;
}

.bb-sbanda__caja {
	max-width: 46ch;
}

.bb-sbanda--der .bb-sbanda__caja {
	margin-left: auto;
}

.bb-sbanda__title {
	margin: 0 0 var( --bb-s2 );
	color: var( --bb-paper );
}

/* Segunda linea del titular. Mas pequenia y en papel con alfa: acompania
   al h2 sin competir con el. */
.bb-sbanda__sub {
	margin: 0 0 var( --bb-s3 );
	font-family: var( --bb-font-display );
	font-weight: 300;
	font-size: clamp( 1.05rem, 2vw, 1.5rem );
	letter-spacing: .02em;
	color: rgba( 247, 245, 242, .82 );
}

/* Respaldo para el camino sin GSAP: la transicion de .bb-reveal es CSS, asi
   que el retardo tambien se declara aqui. Si no, en ese camino el texto
   aparecia ANTES que la fotografia. */
.bb-sbanda__title.bb-reveal.is-in { transition-delay: .5s; }
.bb-sbanda__sub.bb-reveal.is-in { transition-delay: .65s; }
.bb-sbanda__prose.bb-reveal.is-in { transition-delay: .8s; }

.bb-sbanda__prose {
	/* Papel al 86%: 10,8:1 sobre el velo. El color de cuerpo de la web
	   (#565451) aqui seria ilegible. */
	color: rgba( 247, 245, 242, .86 );
}

.bb-sbanda__prose p {
	margin: 0 0 var( --bb-s2 );
}

.bb-sbanda__prose p:last-child {
	margin-bottom: 0;
}

@media ( max-width: 640px ) {
	.bb-sbanda {
		margin-block: var( --bb-s5 );
	}

	.bb-sbanda--fondo {
		min-height: 0;
		padding-block: var( --bb-s5 );
	}

	.bb-sbanda__caja,
	.bb-sbanda--der .bb-sbanda__caja {
		max-width: none;
		margin-left: 0;
	}
}