/* ==========================================================================
   BLOOM — COMPONENTES
   Todo el color y la tipografía sale de tokens.css. Aquí no hay ni un hex.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bl-bg);
  color: var(--bl-text);
  font-family: var(--bl-font-body);
  font-size: var(--bl-fs-body);
  font-weight: 300;
  line-height: var(--bl-lh-body);
  -webkit-font-smoothing: antialiased;
}

img, picture, svg { max-width: 100%; display: block; }
img { height: auto; }

h1, h2, h3 {
  font-family: var(--bl-font-display);
  font-weight: 400;
  color: var(--bl-heading);
  line-height: var(--bl-lh-display);
  letter-spacing: var(--bl-track-display);
  text-wrap: balance;
  margin: 0 0 .5em;
}
h1 { font-size: var(--bl-fs-h1); }
h2 { font-size: var(--bl-fs-h2); }
h3 { font-size: var(--bl-fs-h3); }
h1 em, h2 em { font-style: italic; color: var(--bl-rosa); }

p { margin: 0 0 1rem; max-width: var(--bl-max-text); }
a { color: var(--bl-accent); text-underline-offset: .18em; }

:focus-visible { outline: 2px solid var(--bl-accent); outline-offset: 3px; border-radius: var(--bl-radius); }

.bl-saltar {
  position: absolute; left: -9999px;
  background: var(--bl-surface); color: var(--bl-accent);
  padding: .75rem 1rem; z-index: 100;
}
.bl-saltar:focus { left: 1rem; top: 1rem; }

.bl-eyebrow {
  font-size: var(--bl-fs-eyebrow);
  letter-spacing: var(--bl-track-eyebrow);
  text-transform: uppercase;
  color: var(--bl-text-soft);
  margin: 0 0 .9rem;
}
.bl-lead { font-size: var(--bl-fs-lead); color: var(--bl-text-soft); }
.bl-suave { color: var(--bl-text-soft); }

/* ── Logotipo ───────────────────────────────────────────────────────────── */
.bl-logo { display: inline-flex; flex-direction: column; align-items: center; gap: .18em; text-decoration: none; }
.bl-logo__marca {
  display: flex; align-items: center; gap: .16em;
  font-family: var(--bl-font-display);
  font-size: 1.6rem; font-weight: 400;
  letter-spacing: .16em;
  color: var(--bl-heading);
  line-height: 1;
}
.bl-logo__flor { display: inline-flex; width: 1.5em; margin: 0 .04em; color: var(--bl-rosa); }
.bl-logo__svg { width: 100%; height: auto; }
.bl-logo__sub {
  font-family: var(--bl-font-display);
  font-size: .5rem; letter-spacing: .34em; text-transform: uppercase;
  color: var(--bl-text-soft);
}
.bl-logo--claro .bl-logo__marca, .bl-logo--claro .bl-logo__sub { color: var(--bl-arena); }
.bl-logo--claro .bl-logo__flor { color: var(--bl-arena); }

/* ── Botones ────────────────────────────────────────────────────────────── */
.bl-boton {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bl-profundo); color: var(--bl-blanco);
  font-family: var(--bl-font-body); font-size: .9375rem; font-weight: 400;
  letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
  padding: .85rem 1.5rem; border: 1px solid var(--bl-profundo);
  border-radius: var(--bl-radius);
  transition: background .18s ease, color .18s ease;
}
.bl-boton:hover { background: var(--bl-hondo); border-color: var(--bl-hondo); }
.bl-boton--grande { padding: 1.05rem 2rem; font-size: 1rem; }
.bl-boton--peq { padding: .55rem 1rem; font-size: .8125rem; }
.bl-boton--ancho { width: 100%; }
.bl-boton--linea { background: transparent; color: var(--bl-heading); border-color: var(--bl-border); }
.bl-boton--linea:hover { background: var(--bl-profundo); color: var(--bl-blanco); border-color: var(--bl-profundo); }
.bl-enlace-wa { font-size: var(--bl-fs-small); color: var(--bl-text-soft); }

/* ── Cabecera y mega menú ───────────────────────────────────────────────── */
.bl-header { position: sticky; top: 0; z-index: 50; background: var(--bl-bg); border-bottom: var(--bl-line); }
.bl-header__barra {
  max-width: var(--bl-max); margin: 0 auto;
  padding: .85rem var(--bl-gutter);
  display: flex; align-items: center; gap: var(--bl-gap);
}
.bl-header__logo { text-decoration: none; margin-right: auto; }
.bl-nav__lista { display: flex; gap: .35rem; list-style: none; margin: 0; padding: 0; }
.bl-nav__item { position: static; }
.bl-nav__enlace {
  display: inline-flex; align-items: center; gap: .35rem;
  background: none; border: 0; cursor: pointer;
  font-family: var(--bl-font-body); font-size: .9375rem; color: var(--bl-text);
  letter-spacing: .04em; text-decoration: none;
  padding: .6rem .8rem;
}
.bl-nav__enlace:hover { color: var(--bl-accent); }
.bl-nav__chevron { width: .7rem; transition: transform .18s ease; }
.bl-nav__disparador[aria-expanded="true"] .bl-nav__chevron { transform: rotate(180deg); }

/* Puente invisible sobre el hueco entre el botón y el panel: sin él, el puntero
   pasa por tierra de nadie de camino a una opción y el menú se cierra solo. */
.bl-nav__item--mega::after {
  content: ""; position: absolute; left: 0; right: 0;
  top: calc(100% - 1.4rem); height: 1.4rem;
}
.bl-nav__item--mega { position: static; }
.bl-nav__item--mega:not(:hover)::after { display: none; }
.bl-mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--bl-surface); border-bottom: var(--bl-line);
  box-shadow: var(--bl-shadow);
}
.bl-mega[hidden] { display: none; }
.bl-mega__interior {
  max-width: var(--bl-max); margin: 0 auto;
  padding: 2rem var(--bl-gutter) 1.5rem;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem;
}
.bl-mega__titulo {
  display: flex; align-items: baseline; gap: .5rem;
  font-family: var(--bl-font-display); font-size: 1.125rem;
  color: var(--bl-heading); text-decoration: none;
}
.bl-mega__cuenta {
  font-family: var(--bl-font-body); font-size: .6875rem;
  color: var(--bl-text-soft); border: 1px solid var(--bl-border);
  border-radius: 999px; padding: .05rem .4rem;
}
.bl-mega__sumario { font-size: .8125rem; color: var(--bl-text-soft); margin: .3rem 0 .8rem; }
.bl-mega__lista { list-style: none; margin: 0; padding: 0; border-top: var(--bl-line); }
.bl-mega__lista a {
  display: flex; justify-content: space-between; gap: 1rem; align-items: baseline;
  padding: .45rem 0; border-bottom: var(--bl-line);
  font-size: .875rem; color: var(--bl-text); text-decoration: none;
}
.bl-mega__lista a:hover { color: var(--bl-accent); }
.bl-mega__nombre { flex: 1; }
.bl-mega__precio {
  font-variant-numeric: tabular-nums; font-size: .8125rem;
  color: var(--bl-text-soft); white-space: nowrap;
}
.bl-mega__pie {
  border-top: var(--bl-line); background: var(--bl-bg);
  padding: .9rem var(--bl-gutter);
}
.bl-mega__pie > span { font-size: .8125rem; color: var(--bl-text-soft); }
.bl-mega__pie {
  max-width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap;
}

/* ── Menú móvil ─────────────────────────────────────────────────────────── */
.bl-menu-movil {
  display: none; flex-direction: column; gap: 4px;
  background: none; border: 0; cursor: pointer; padding: .5rem;
}
.bl-menu-movil span { display: block; width: 22px; height: 1.5px; background: var(--bl-text); }
.bl-movil { display: none; }
.bl-movil[hidden] { display: none !important; }
.bl-movil__grupo { border-bottom: var(--bl-line); }
.bl-movil__grupo summary {
  display: flex; align-items: center; gap: .5rem;
  padding: .9rem var(--bl-gutter); cursor: pointer;
  font-family: var(--bl-font-display); font-size: 1.0625rem; color: var(--bl-heading);
}
.bl-movil__grupo ul, .bl-movil__sueltos { list-style: none; margin: 0; padding: 0 var(--bl-gutter) .8rem; }
.bl-movil__grupo a, .bl-movil__sueltos a {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .5rem 0; font-size: .9375rem; color: var(--bl-text); text-decoration: none;
}
.bl-movil__sueltos { padding-top: .8rem; border-bottom: var(--bl-line); }
.bl-movil .bl-boton { margin: 1rem var(--bl-gutter) 1.5rem; width: calc(100% - var(--bl-gutter) * 2); }

@media (max-width: 900px) {
  .bl-nav, .bl-header__cta { display: none; }
  .bl-menu-movil { display: flex; }
  .bl-movil:not([hidden]) { display: block; border-top: var(--bl-line); }
}

/* ── Migas ──────────────────────────────────────────────────────────────── */
.bl-migas { max-width: var(--bl-max); margin: 0 auto; padding: 1.2rem var(--bl-gutter) 0; }
.bl-migas ol { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; font-size: .8125rem; }
.bl-migas li + li::before { content: "·"; margin-right: .5rem; color: var(--bl-text-soft); }
.bl-migas a { color: var(--bl-text-soft); }
.bl-migas [aria-current] { color: var(--bl-text); }

/* ── Secciones ──────────────────────────────────────────────────────────── */
/* UN solo contenedor para toda la web: mismo ancho y mismo margen lateral en
   todas las páginas. Lo que va dentro NO vuelve a fijar su ancho — cuando dos
   elementos ponen el suyo, se descuadran entre sí: era lo que hacía que en
   la página de familia el título fuese centrado y la rejilla saliese a sangre. */
.bl-seccion { max-width: var(--bl-max); margin-inline: auto; padding: var(--bl-section-y) var(--bl-gutter); }
.bl-seccion--oscura {
  max-width: none; background: var(--bl-profundo); color: var(--bl-arena);
}
.bl-seccion--oscura h2, .bl-seccion--oscura h3 { color: var(--bl-blanco); }
.bl-seccion--oscura .bl-eyebrow, .bl-seccion--oscura .bl-lead { color: var(--bl-arena); }
.bl-seccion--oscura .bl-boton--linea { color: var(--bl-blanco); border-color: var(--bl-arena); }
.bl-seccion--oscura .bl-boton--linea:hover { background: var(--bl-arena); color: var(--bl-profundo); }

/* Cabecera de página. Lleva su propio margen lateral para poder ir suelta bajo
   <main>; dentro de .bl-seccion se lo quita, porque el contenedor ya lo pone y
   si no se sumarían los dos. */
.bl-cabecera-seccion { max-width: var(--bl-max); margin-inline: auto; padding: 2rem var(--bl-gutter) 1.5rem; }
.bl-seccion > .bl-cabecera-seccion { max-width: none; padding-inline: 0; padding-top: 0; }
.bl-migas + .bl-cabecera-seccion,
.bl-migas + .bl-seccion { padding-top: 1rem; }

/* ── Hero ───────────────────────────────────────────────────────────────── */
.bl-hero {
  max-width: var(--bl-max); margin: 0 auto;
  padding: clamp(2rem, 6vw, 4.5rem) var(--bl-gutter) 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.bl-hero h1 { margin-bottom: .35em; }
.bl-hero__acciones { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; margin: 1.8rem 0 1.5rem; }
.bl-hero__foto picture { display: block; aspect-ratio: 4 / 5; overflow: hidden; }
.bl-hero__foto img { width: 100%; height: 100%; object-fit: cover; }
.bl-prueba { font-size: var(--bl-fs-small); color: var(--bl-text-soft); display: flex; gap: .5rem; align-items: baseline; }
.bl-prueba strong { font-family: var(--bl-font-display); font-size: 1.5rem; color: var(--bl-rosa); font-weight: 500; }

@media (max-width: 860px) { .bl-hero { grid-template-columns: 1fr; } }

/* ── Rejillas de tarjetas ───────────────────────────────────────────────── */
.bl-rejilla {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: var(--bl-gap);
}
.bl-rejilla--3 { grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.bl-tarjeta a { display: flex; flex-direction: column; text-decoration: none; color: inherit; height: 100%; }
.bl-tarjeta picture { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.bl-tarjeta img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--bl-radius-img); }
.bl-tarjeta__meta { margin-top: auto; padding-top: .4rem; }
.bl-tarjeta h2, .bl-tarjeta h3 { font-size: 1.125rem; margin: .8rem 0 .3rem; }
.bl-tarjeta a:hover h2, .bl-tarjeta a:hover h3 { color: var(--bl-hondo); }
.bl-tarjeta__desc { font-size: .875rem; color: var(--bl-text-soft); margin: 0 0 .5rem; }
.bl-tarjeta__meta { display: flex; gap: .8rem; align-items: baseline; font-size: .8125rem; color: var(--bl-text-soft); margin: 0; }
.bl-tarjeta__precio { font-variant-numeric: tabular-nums; color: var(--bl-accent); font-size: .9375rem; }

/* ── Familias en portada ────────────────────────────────────────────────── */
.bl-familias {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--bl-gap);
}
.bl-familias { align-items: start; }
.bl-familia a { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; }
.bl-familia__foto { aspect-ratio: 3 / 4; overflow: hidden; }
.bl-familia__foto img, .bl-familia__foto picture { width: 100%; height: 100%; object-fit: cover; }
/* El hueco sin foto toma el ratio de su contenedor, no uno propio: si no, la
   tarjeta sin foto queda más baja y la fila entera se descuadra. */
.bl-familia__foto .bl-sinfoto { aspect-ratio: auto; height: 100%; }
.bl-familia h3 { margin: .9rem 0 .3rem; }
.bl-familia p { font-size: .875rem; color: var(--bl-text-soft); margin: 0 0 .4rem; }
.bl-familia__cuenta { font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--bl-hondo); }
.bl-familia a:hover h3 { color: var(--bl-hondo); }

/* ── Página de servicio ─────────────────────────────────────────────────── */
.bl-servicio { max-width: var(--bl-max); margin: 0 auto; padding: 1.5rem var(--bl-gutter) var(--bl-section-y); }
.bl-servicio__cabecera { display: grid; grid-template-columns: 1fr 44%; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.bl-servicio__foto picture { display: block; aspect-ratio: 1 / 1; overflow: hidden; }
.bl-servicio__foto img { width: 100%; height: 100%; object-fit: cover; }
.bl-ficha { display: flex; flex-wrap: wrap; gap: 1.8rem; margin: 1.5rem 0; padding: 1.1rem 0; border-top: var(--bl-line); border-bottom: var(--bl-line); }
.bl-ficha div { display: flex; flex-direction: column; gap: .15rem; }
.bl-ficha dt { font-size: var(--bl-fs-eyebrow); letter-spacing: var(--bl-track-eyebrow); text-transform: uppercase; color: var(--bl-text-soft); }
.bl-ficha dd { margin: 0; font-size: 1rem; }
.bl-ficha__precio { font-family: var(--bl-font-display); font-size: var(--bl-fs-precio); color: var(--bl-heading); font-variant-numeric: tabular-nums; line-height: 1.1; }
.bl-servicio__acciones { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; margin-top: 1.8rem; }
.bl-relacionados { max-width: var(--bl-max); margin: 0 auto; padding: 0 var(--bl-gutter) var(--bl-section-y); }
.bl-relacionados h2 { font-size: var(--bl-fs-h3); margin-bottom: 1.2rem; }

@media (max-width: 860px) { .bl-servicio__cabecera { grid-template-columns: 1fr; } }

/* Hueco cuando aún no hay foto de ese tratamiento: se ve deliberado, no roto. */
.bl-sinfoto {
  display: grid; place-items: center;
  aspect-ratio: 4 / 3; background: var(--bl-arena);
  color: var(--bl-hondo);
}
.bl-sinfoto--peq { aspect-ratio: 4 / 3; }
.bl-sinfoto__flor { width: 38%; max-width: 7rem; opacity: .55; }

/* ── Verónica ───────────────────────────────────────────────────────────── */
.bl-vero {
  max-width: var(--bl-max); margin: 0 auto; padding: 0 var(--bl-gutter);
  display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: center;
}
.bl-vero__lema { font-family: var(--bl-font-display); font-style: italic; font-size: 1.25rem; color: var(--bl-blanco); margin: 1.2rem 0 1.8rem; }
/* El mismo lema, en /nosotras, cae sobre fondo CREMA: ahi el blanco de arriba da
   1,08:1 — invisible. Hasta el 29-08 lo tapaba un accidente: la vista traia un
   color en linea apuntando al token TERRACOTA, que desaparecio al pasar la marca
   a rosa; con la variable ausente la declaracion queda invalida y el color CAE AL
   HEREDADO (la tinta), asi que se leia de milagro. Con el acento: 5,66:1.
   (Escrito sin la sintaxis var(...) a proposito: el chequeo de tokens huerfanos
   lee tambien los comentarios y se delataba a si mismo.) */
.bl-vero__lema--claro { color: var(--bl-accent); }
.bl-vero__flor { width: min(16rem, 30vw); color: var(--bl-rosa); opacity: .5; }
@media (max-width: 760px) { .bl-vero { grid-template-columns: 1fr; } .bl-vero__flor { display: none; } }

/* ── Dónde estamos ──────────────────────────────────────────────────────── */
.bl-donde { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); }
.bl-donde address { font-style: normal; margin-bottom: .8rem; }
.bl-donde__h { font-size: var(--bl-fs-h3); }
.bl-horario { list-style: none; margin: 0; padding: 0; }
.bl-horario li { display: flex; justify-content: space-between; gap: 1rem; padding: .4rem 0; border-bottom: var(--bl-line); font-size: .875rem; }
.bl-horario--grande li { font-size: 1rem; padding: .7rem 0; }
@media (max-width: 760px) { .bl-donde { grid-template-columns: 1fr; } }

/* ── Pie ────────────────────────────────────────────────────────────────── */
.bl-footer { background: var(--bl-profundo); color: var(--bl-arena); margin-top: var(--bl-section-y); }
.bl-footer a { color: var(--bl-arena); text-decoration: none; }
.bl-footer a:hover { text-decoration: underline; }
.bl-footer__interior {
  max-width: var(--bl-max); margin: 0 auto; padding: var(--bl-section-y) var(--bl-gutter) 2.5rem;
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem;
}
.bl-footer h2 { font-size: .8125rem; letter-spacing: var(--bl-track-eyebrow); text-transform: uppercase; color: var(--bl-blanco); font-family: var(--bl-font-body); margin-bottom: .9rem; }
.bl-footer ul { list-style: none; margin: 0; padding: 0; }
.bl-footer__col li { padding: .3rem 0; font-size: .9375rem; }
.bl-footer__dir { font-size: .9375rem; margin: 1.2rem 0 .6rem; }
.bl-footer__detalle { color: var(--bl-arena); font-size: .8125rem; }
.bl-footer .bl-horario li { border-bottom-color: rgba(255, 255, 255, .12); }
.bl-footer__legal {
  border-top: 1px solid rgba(255, 255, 255, .12);
  max-width: var(--bl-max); margin: 0 auto; padding: 1.2rem var(--bl-gutter) 2rem;
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-size: .8125rem;
}
.bl-footer__legal ul { display: flex; gap: 1.2rem; }
.bl-footer__legal p { margin: 0; }
@media (max-width: 860px) { .bl-footer__interior { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .bl-footer__interior { grid-template-columns: 1fr; } }

/* ── Preguntas frecuentes ───────────────────────────────────────────────── */
.bl-faq { max-width: var(--bl-max); margin: 0 auto; padding: 0 var(--bl-gutter) var(--bl-section-y); }
.bl-faq--seccion { padding-top: var(--bl-section-y); }
.bl-faq > h2 { font-size: var(--bl-fs-h3); margin-bottom: 1.2rem; }
.bl-faq__lista { max-width: 62rem; border-top: var(--bl-line); }
.bl-faq__item { border-bottom: var(--bl-line); }
.bl-faq__item summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: flex-start; gap: .9rem;
  padding: 1rem 0;
  font-family: var(--bl-font-display); font-size: 1.0625rem; color: var(--bl-heading);
}
.bl-faq__item summary::-webkit-details-marker { display: none; }
/* El signo lo pone el CSS y no el marcado: dentro de <summary> también lo leería
   el lector de pantalla, y «más laminado de cejas cuánto dura» no es una pregunta. */
.bl-faq__item summary::before {
  content: "+"; flex: none; width: 1rem;
  font-family: var(--bl-font-body); color: var(--bl-hondo); font-size: 1.1rem; line-height: 1.4;
}
.bl-faq__item[open] summary::before { content: "–"; }
.bl-faq__item summary:hover { color: var(--bl-hondo); }
.bl-faq__r { padding: 0 0 1.1rem 1.9rem; }
.bl-faq__r p { margin: 0; color: var(--bl-text-soft); max-width: 60ch; }
.bl-faq__pie { margin-top: 1.4rem; font-size: var(--bl-fs-small); color: var(--bl-text-soft); }

/* ── Reseñas ────────────────────────────────────────────────────────────── */
.bl-resenas { max-width: var(--bl-max); margin: 0 auto; padding: 0 var(--bl-gutter) var(--bl-section-y); }
.bl-resenas__cab { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.bl-resenas__cab h2 { font-size: var(--bl-fs-h3); margin-bottom: .6rem; }
.bl-resenas__aval { font-size: var(--bl-fs-small); color: var(--bl-text-soft); }
.bl-resenas__aval strong { font-family: var(--bl-font-display); font-size: 1.25rem; color: var(--bl-hondo); font-weight: 500; }
.bl-resenas__lista {
  list-style: none; margin: 1rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--bl-gap);
}
.bl-resena {
  background: var(--bl-surface); border: var(--bl-line); border-radius: var(--bl-radius);
  padding: 1.3rem 1.4rem 1.1rem; display: flex; flex-direction: column;
}
.bl-resena__nota { color: var(--bl-hondo); letter-spacing: .12em; margin: 0 0 .6rem; font-size: .875rem; }
.bl-resena blockquote {
  margin: 0 0 1rem; font-family: var(--bl-font-display); font-size: 1.0625rem;
  line-height: 1.5; color: var(--bl-text);
}
.bl-resena__pie {
  margin: auto 0 0; padding-top: .8rem; border-top: var(--bl-line);
  display: flex; justify-content: space-between; gap: .8rem;
  font-size: .8125rem; color: var(--bl-text-soft);
}

/* ── Barra de acciones flotante (solo móvil) ────────────────────────────── */
/* Se enciende EXACTAMENTE en el punto en que la cabecera apaga su botón de
   reservar (900px): si los dos umbrales se separan queda una franja de anchos
   con dos botones a la vez, o con ninguno. */
.bl-acciones { display: none; }

@media (max-width: 900px) {
  .bl-acciones {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    display: grid; grid-template-columns: 1fr 1fr; gap: .5rem;
    padding: .5rem .75rem;
    /* En el iPhone la franja de abajo se la queda la barra de gestos: sin esto
       los botones quedan medio tapados y a un dedo de fallar el toque. */
    padding-bottom: calc(.5rem + env(safe-area-inset-bottom, 0px));
    background: var(--bl-bg);
    border-top: var(--bl-line);
    box-shadow: var(--bl-shadow-alto);
  }
  /* Su propio tamaño, no el del botón general: «Reservar cita» en versales con
     el icono al lado no entra en la mitad de una pantalla de 320px. */
  .bl-acciones__b {
    padding: .95rem .5rem;
    font-size: .75rem; letter-spacing: .04em;
    gap: .45rem; white-space: nowrap;
  }
  /* Sin fondo propio, el botón de línea se lee como texto suelto encima de la
     barra en vez de como botón. */
  .bl-boton--linea.bl-acciones__b { background: var(--bl-surface); }
  .bl-acciones__icono { width: 1.05rem; height: 1.05rem; flex: none; }

  /* Dos veces estorba y en las dos se quita: con el menú desplegado se planta
     encima de su propio «Reservar cita», y con el teclado abierto tapa el campo
     que se está escribiendo — en /contacto, el formulario entero. */
  body.bl-menu-abierto .bl-acciones,
  body.bl-escribiendo .bl-acciones { display: none; }

  /* El hueco de la barra se lo damos al PIE, que es oscuro y llega hasta abajo.
     Con padding en el body asomaría una franja crema por debajo del pie. */
  .bl-footer__legal { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px)); }
}

@media print { .bl-acciones { display: none; } }

/* La foto de la puerta en Contacto. Ancho de columna de texto, no a sangre:
   es una foto de referencia, no una portada. */
/* El centro por dentro (/nosotras). Las dos fotos llegan YA recortadas a 3:4
   desde la tuberia, asi que aqui no hace falta `object-fit`: basta con no
   estorbar. `aspect-ratio` va igualmente puesto para que el hueco este
   reservado antes de que la imagen cargue y el pie no de un salto. */
/* Las dos rejillas de 3:4 (el centro y el equipo) comparten reglas a proposito:
   son la misma figura con distinto contenido, y duplicarlas era garantizar que
   un dia se separaran. */
.bl-local, .bl-equipo { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--bl-gap); margin: var(--bl-gap) 0 1.4rem; }
.bl-local figure, .bl-equipo__persona { margin: 0; }
.bl-local img, .bl-equipo img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; display: block; border-radius: var(--bl-radius-img); }
.bl-local figcaption { margin-top: .6rem; font-size: var(--bl-fs-small); color: var(--bl-text-soft); }

/* El nombre pegado a su foto: sin esto el h2 hereda el margen de seccion y la
   cara se separa del nombre lo mismo que de la persona de al lado. */
.bl-equipo__persona h2 { margin: .9rem 0 .1rem; }
.bl-equipo__rol { margin: 0 0 .7rem; font-size: var(--bl-fs-small); color: var(--bl-text-soft); }

.bl-fachada { margin: var(--bl-gap) 0 0; max-width: 40rem; }
.bl-fachada img { width: 100%; height: auto; display: block; border-radius: var(--bl-radius-img); }
.bl-fachada figcaption { margin-top: .6rem; font-size: var(--bl-fs-small); color: var(--bl-text-soft); }