/* ============================================================
   AÑADIDOS DEL BUILD — lo que el concepto no llegó a escribir
   porque allí no había fotos por página. Todo lo demás en
   assets/css/ viene del concepto tal cual.
   ============================================================ */

/* --- Foto en la cabecera de página interna ---
   El concepto abría las internas con una banda de gradientes (.phead::before)
   porque la foto por página estaba prevista pero sin hacer. Cuando hay foto,
   se pinta encima del gradiente y se le echa el mismo velo de dos capas que
   al hero: el texto va claro y necesita cama oscura por la izquierda.
   Va a sangre, sin radio ni inset — el gutter del .wrap es el único inset. */
.phead-media{
  position:absolute;inset:0;z-index:-2;
  background-size:cover;background-position:center;background-repeat:no-repeat;
}
.phead-media::after{
  content:"";position:absolute;inset:0;
  /* Sin remate aquí: el remate va en .phead::after, acotado a los 96px de
     padding libre. En porcentaje empezaba al 62% de la altura y aclaraba la
     zona del texto de apoyo — medido sobre el píxel real, el `lede` de About
     caía a 1.31:1. Mismo error que ya se corrigió en el hero. */
  background:
    /* Cama oscura por la izquierda, donde se apoya el titular. */
    linear-gradient(to right, rgba(8,8,10,.92) 0%, rgba(8,8,10,.80) 34%, rgba(8,8,10,.46) 62%, rgba(8,8,10,.34) 100%),
    /* Oscurecido general para que el texto claro tenga contraste. */
    linear-gradient(to bottom, rgba(8,8,10,.72) 0%, rgba(8,8,10,.30) 34%, rgba(8,8,10,.44) 64%, rgba(8,8,10,.52) 100%);
}

/* Con foto sobra la retícula del ::after, que se pensó para la losa plana. */
.phead:has(.phead-media)::after{display:none}


@media (max-width:640px){
  /* En vertical la foto se lee peor y el texto ocupa casi todo:
     más velo para que el titular no compita con la imagen. */
  .phead-media::after{
    background:linear-gradient(to bottom, rgba(8,8,10,.78) 0%, rgba(8,8,10,.62) 40%, rgba(8,8,10,.66) 100%);
  }
}

/* --- Fundido de la foto del hero entre mensajes ---
   La capa de fundido es una copia de .frame-media que se cruza por encima.
   Solo se activa cuando la imagen ya está descargada (ver hero/view.js): si
   se cambiara el background directamente, el hueco quedaría negro mientras
   carga y el titular se apoyaría un instante sobre nada. */
.frame-media--fade{
  /* Va dentro de .frame-media, así que inset:0 es la zona de la foto tanto
     en escritorio como en móvil, donde el hero se parte y la foto pasa a
     ocupar solo la parte de arriba. width/aspect-ratio se resetean porque
     bajo 640px .frame-media los redefine y aquí no deben aplicarse. */
  position:absolute;
  inset:0;
  width:auto;
  aspect-ratio:auto;
  opacity:0;
  transition:opacity .9s var(--ease);
  pointer-events:none;
}
.frame-media--fade.is-in{opacity:1}

@media (prefers-reduced-motion:reduce){
  /* Sin cruce: el cambio es instantáneo, que es lo que pide la preferencia. */
  .frame-media--fade{transition:none}
}

/* --- Respiro tras la cabecera de página ---
   Los bloques `photo` y `service-blocks` son .wrap pelados, sin padding
   propio: pegados a la cabecera la foto arranca justo donde acaba la banda
   y parece montada sobre ella. Las secciones .sec ya traen su padding y no
   necesitan esto. */
.phead + .wp-block-instamove-photo,
.phead + .wp-block-instamove-service-blocks{
  margin-top:var(--sec);
}

/* --- Borde inferior de las bandas oscuras: corte recto ---
   Se probó desvanecerlas contra la página y no funciona. El hero deja 44px de
   padding libre y la cabecera 88px, y en tan poco recorrido el paso de negro
   a papel se ve como una franja gris sucia, no como un fundido. Alargarlo
   hasta que quede limpio se come el contraste del texto que tiene encima —las
   etiquetas de las cifras, el texto de apoyo de la cabecera—. Un corte recto
   es lo que hace cualquier hero con foto de fondo y queda nítido en los dos
   temas. Probadas las tres opciones y decidido con Sebas el 28 ago 2026.

   Lo que sí hacía falta era AIRE entre la banda y lo que viene debajo, y eso
   lo da la regla `.phead + …{margin-top}` de arriba, no el desvanecido. */


/* --- Saltos a una sección concreta ---
   La cabecera flota (sticky, top 14px) y taparía el titular al aterrizar en
   un ancla. `scroll-margin-top` reserva ese espacio, y el desplazamiento es
   suave salvo que el visitante haya pedido menos movimiento. */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}
.svc[id],
[id="quote"]{
  scroll-margin-top:120px;
}
@media (max-width:640px){
  /* En móvil la cabecera es más baja y no lleva la cápsula de navegación. */
  .svc[id],
  [id="quote"]{scroll-margin-top:84px}
}