/* Servicio Financiero · Identidad visual integrada · 1.1
   La estructura, los contactos y las cuatro escenas permanecen sin cambios.
   Se reutiliza el data-scene del navegador de escenas: no agrega JavaScript. */

.site-brand {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: clamp(190px, 15.5vw, 246px);
  aspect-ratio: 865 / 246;
  min-width: 0;
  max-width: calc(100vw - 100px);
  filter: drop-shadow(0 0 8px rgba(32, 190, 230, .09))
          drop-shadow(0 0 1px rgba(231, 198, 117, .15));
  transition: filter 300ms ease;
}
.site-brand:hover,
.site-brand:focus-visible {
  filter: drop-shadow(0 0 10px rgba(47, 198, 230, .22));
}
.site-brand__complete {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 1;
  visibility: visible;
  transition: opacity 250ms ease, visibility 250ms ease;
}
.site-brand__symbol {
  position: absolute;
  left: 0;
  top: 50%;
  width: 45px;
  height: 51px;
  object-fit: contain;
  transform: translateY(-50%);
  opacity: 0;
  visibility: hidden;
  transition: opacity 250ms ease, visibility 250ms ease;
}
body[data-scene="1"] .site-brand__complete,
body[data-scene="2"] .site-brand__complete {
  opacity: 0;
  visibility: hidden;
}
body[data-scene="1"] .site-brand__symbol,
body[data-scene="2"] .site-brand__symbol {
  opacity: .52;
  visibility: visible;
}
body[data-scene="1"] .site-brand:hover .site-brand__symbol,
body[data-scene="2"] .site-brand:hover .site-brand__symbol,
.site-brand:focus-visible .site-brand__symbol {
  opacity: .95;
}
/* El cierre ya tiene una firma propia. No duplicar la marca arriba. */
body[data-scene="3"] .site-brand,
body[data-scene="3"] .site-brand > img {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.closing-brand {
  width: 170px;
  max-width: 55%;
  margin: 18px auto 0;
}
.closing-brand a {
  display: block;
  border-radius: 3px;
}
.closing-brand img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 0 8px rgba(32, 190, 230, .10));
}
/* Reserva espacio seguro para el logo centrado sin aumentar el ancho
   de la página ni alterar los botones de WhatsApp/Telegram. */
@media (max-width: 760px) {
  .site-header {
    justify-content: center;
    height: calc(91px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    padding-inline: 20px;
  }
  .site-brand {
    width: clamp(176px, 51vw, 216px);
    max-width: calc(100vw - 110px);
  }
  .mobile-step {
    position: absolute;
    right: max(16px, env(safe-area-inset-right, 0px));
    top: calc(40px + env(safe-area-inset-top, 0px));
    font-size: 8px;
    letter-spacing: .10em;
  }
  .scene--hero {
    padding-top: calc(116px + env(safe-area-inset-top, 0px));
  }
  body[data-scene="1"] .site-brand,
  body[data-scene="2"] .site-brand,
  body[data-scene="1"] .site-brand > img,
  body[data-scene="2"] .site-brand > img {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  .closing-brand {
    width: 162px;
    max-width: 64%;
    margin-top: 17px;
  }
}
@media (min-width: 761px) and (max-height: 820px) {
  .closing-brand { width: 148px; margin-top: 12px; }
  .final-layout .brand-signature { margin-top: 22px; }
  .scene--contact { padding-top: 98px; padding-bottom: 82px; }
}
@media (orientation: landscape) and (max-height: 500px) {
  .site-header { height: 76px; }
  .site-brand { width: 180px; }
  .mobile-step { top: 34px; }
  .scene--hero { padding-top: 104px; }
}
@media (prefers-reduced-motion: reduce) {
  .site-brand, .site-brand > img { transition: none; }
}