/* ==========================================================================
   bb2026 — PAGINA DE SERVICIO / BLOQUES DE CONTENIDO.

   Bloques editoriales, zonas (SEO local), "que incluye", preguntas
   frecuentes, otros servicios y los ajustes finos del banner de cierre.

   El banner de cierre NO se reestiliza: reutiliza .bb-hcta y su hoja
   (home-cta.css), que es el patron aprobado en la portada. Aqui solo van
   las dos o tres diferencias propias del servicio, al final.
   ========================================================================== */

/* --------------------------------------------------------------------------
   BLOQUE EDITORIAL (pieza compartida .bb-sblock)
   Composicion escalonada: el titulo no comparte columna con el texto.
   -------------------------------------------------------------------------- */
.bb-ssections { padding-block: var(--bb-s5); }
.bb-ssections--how { background: var(--bb-white); }
.bb-ssections--after { background: var(--bb-paper); }

.bb-sblock + .bb-sblock { margin-top: var(--bb-s5); }
.bb-sblock__title { margin: 0 0 var(--bb-s3); }
.bb-sblock__prose > p { margin: 0 0 var(--bb-s3); }
.bb-sblock__prose > p:last-child { margin-bottom: 0; }
.bb-sblock__prose--after { margin-top: var(--bb-s3); }

@media (min-width: 900px) {
  .bb-ssections { padding-block: var(--bb-s6); }
  .bb-sblock + .bb-sblock { margin-top: var(--bb-s6); }
  /* Titulo a la izquierda, cuerpo a la derecha en columna de lectura. */
  .bb-sblock--editorial {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    column-gap: var(--bb-s5);
    align-items: start;
  }
  .bb-sblock--editorial .bb-sblock__title {
    grid-column: 1;
    grid-row: 1;
    margin-bottom: 0;
    position: sticky;
    top: calc(var(--bb-bar-h) + var(--bb-s3));
  }
  .bb-sblock--editorial .bb-sblock__prose,
  .bb-sblock--editorial .bb-slist { grid-column: 2; }
}

/* --------------------------------------------------------------------------
   LISTA DE COPY (.bb-slist)
   Sin viniietas de navegador: filete fino a la izquierda, que es el
   recurso del sistema (ver .bb-rule en components.css).
   -------------------------------------------------------------------------- */
.bb-slist {
  list-style: none;
  margin: var(--bb-s3) 0 0;
  padding: 0;
}
.bb-slist__item {
  position: relative;
  padding-left: var(--bb-s3);
  margin-bottom: var(--bb-s2);
}
.bb-slist__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.85em;
  width: 12px;
  height: 1px;
  background: var(--bb-ink);
  opacity: 0.35;
}
.bb-slist__item:last-child { margin-bottom: 0; }
.bb-slist__name { color: var(--bb-ink); font-weight: 600; }

/* --------------------------------------------------------------------------
   ZONAS — SEO local
   -------------------------------------------------------------------------- */
.bb-swhere {
  background: var(--bb-paper);
  padding-block: var(--bb-s5);
}
@media (min-width: 900px) {
  .bb-swhere { padding-block: var(--bb-s6); }
  /* Aqui la lista SI va a dos columnas: es un mapa de cobertura y en una
     sola columna se lee como un parrafo interminable. */
  .bb-sblock--where .bb-slist {
    columns: 2;
    column-gap: var(--bb-s5);
  }
  /* break-inside evita que una zona se corte por la mitad al cambiar de
     columna, que es el defecto tipico de las listas en 'columns'. */
  .bb-sblock--where .bb-slist__item { break-inside: avoid; }
}

/* --------------------------------------------------------------------------
   QUE INCLUYE — rejilla de tarjetas numeradas
   -------------------------------------------------------------------------- */
.bb-sinc {
  background: var(--bb-white);
  padding-block: var(--bb-s5);
}
.bb-sinc__title { margin: 0 0 var(--bb-s3); }
.bb-sinc__lead > p { margin: 0 0 var(--bb-s3); }
.bb-sinc__grid {
  list-style: none;
  margin: var(--bb-s4) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--bb-s3);
}
.bb-sinc__cell {
  display: flex;
  gap: var(--bb-s2);
  padding: var(--bb-s3);
  background: var(--bb-paper);
}
.bb-sinc__num {
  flex: 0 0 auto;
  font-family: var(--bb-font-display);
  font-weight: 500;
  font-size: var(--bb-size-label);
  letter-spacing: var(--bb-track-label);
  color: var(--bb-accent);
  line-height: 1.9;
}
.bb-sinc__after { margin-top: var(--bb-s4); }
.bb-sinc__after > p { margin: 0 0 var(--bb-s2); }

@media (min-width: 768px) {
  .bb-sinc { padding-block: var(--bb-s6); }
  .bb-sinc__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   PREGUNTAS FRECUENTES — acordeon <details> nativo
   Se estiliza el elemento nativo en vez de reconstruirlo: el navegador
   ya resuelve estado, foco y teclado, y funciona sin JS.
   -------------------------------------------------------------------------- */
.bb-sfaq {
  background: var(--bb-paper);
  padding-block: var(--bb-s5);
}
.bb-sfaq__in { max-width: 900px; }
.bb-sfaq__title { margin: 0 0 var(--bb-s4); }
.bb-sfaq__item { border-top: 1px solid var(--bb-ink-soft); }
.bb-sfaq__item:last-child { border-bottom: 1px solid var(--bb-ink-soft); }

.bb-sfaq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bb-s3);
  /* 48px de area de pulsacion garantizados con el relleno vertical. */
  padding-block: var(--bb-s3);
  cursor: pointer;
  font-family: var(--bb-font-body);
  font-weight: 600;
  font-size: var(--bb-size-body);
  line-height: 1.5;
  color: var(--bb-ink);
  /* Se retira el triangulo del navegador: la marca es la de la derecha. */
  list-style: none;
}
.bb-sfaq__q::-webkit-details-marker { display: none; }
.bb-sfaq__q:focus-visible { outline: 2px solid var(--bb-accent); outline-offset: 4px; }

/* Marca de mas / menos, hecha con dos filetes cruzados. */
.bb-sfaq__mark {
  position: relative;
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
}
.bb-sfaq__mark::before,
.bb-sfaq__mark::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 1px;
  background: var(--bb-ink);
  transition: transform 0.35s var(--bb-ease);
}
.bb-sfaq__mark::after { transform: rotate(90deg); }
/* Abierto: el filete vertical se tumba y queda un signo menos. */
.bb-sfaq__item[open] .bb-sfaq__mark::after { transform: rotate(0deg); }

.bb-sfaq__a { padding: 0 0 var(--bb-s3); }
.bb-sfaq__a > p { margin: 0; max-width: 68ch; }

@media (min-width: 768px) {
  .bb-sfaq { padding-block: var(--bb-s6); }
}

/* --------------------------------------------------------------------------
   OTROS SERVICIOS
   Rejilla de marcos con revelado en persiana ascendente (el JS pone el
   recorte en [data-bb-sclip]).
   -------------------------------------------------------------------------- */
.bb-sother {
  background: var(--bb-white);
  padding-block: var(--bb-s5);
}
.bb-sother__head { margin-bottom: var(--bb-s4); }
.bb-sother__kicker { color: var(--bb-body); }
.bb-sother__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--bb-s3);
}
.bb-sother__link {
  display: block;
  color: var(--bb-ink);
}

/* MARCO: aspect-ratio en el marco y la imagen DENTRO en absoluto. Nunca
   imagen en flujo con height:100% dentro de una pista de rejilla: '1fr'
   se mide por contenido y con el aspect-ratio del marco se produce una
   referencia circular (anchos absurdos). Por eso ademas las pistas van
   declaradas minmax(0, 1fr). */
.bb-sother__frame {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  /* Marco en BLANCO, nunca gris: es el hueco que se ve mientras la
     persiana esta cerrada y tiene que leerse como pagina. */
  background: var(--bb-frame-bg);
}
.bb-sother__img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--bb-ease);
}
/* El velo es HERMANO de la imagen pero HIJO del marco: lo recorta el
   mismo clip-path, asi que no puede pintarse entero antes que la foto. */
.bb-sother__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(28, 27, 25, 0.34) 0%, rgba(28, 27, 25, 0) 62%);
}
.bb-sother__link:hover .bb-sother__img,
.bb-sother__link:focus-visible .bb-sother__img { transform: scale(1.035); }

.bb-sother__body {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--bb-s2);
  padding-top: var(--bb-s2);
}
.bb-sother__name {
  font-family: var(--bb-font-display);
  font-weight: 700;
  font-size: 1.125rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.bb-sother__cue {
  font-family: var(--bb-font-display);
  font-weight: 500;
  font-size: var(--bb-size-label);
  text-transform: uppercase;
  letter-spacing: var(--bb-track-label);
  color: var(--bb-accent);
}

@media (min-width: 640px) {
  .bb-sother__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .bb-sother { padding-block: var(--bb-s6); }
  .bb-sother__grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--bb-s2);
  }
}

/* --------------------------------------------------------------------------
   BANNER DE CIERRE — solo los ajustes propios del servicio.
   Todo lo demas (foto, velo negro, contrastes medidos, boton) lo pone
   home-cta.css, que es el patron aprobado en la portada.
   -------------------------------------------------------------------------- */
.bb-scta .bb-hcta__lines { max-width: 62ch; }