/* =========================================================
   ESTILOS.CSS - DEPURADO
   Parroquia San Francisco de Asís - Dapa

   Contiene únicamente estilos globales compartidos:
   - Variables y reset
   - Contenedor general
   - Topbar
   - Header / navegación
   - Footer compacto
   - Botón volver arriba
   - Responsive global
========================================================= */


/* =========================================================
   VARIABLES
========================================================= */

:root {
  --vino: #6f1d2e;
  --vino-oscuro: #4d121f;
  --vino-claro: #8c2c43;

  --dorado: #c6a15b;
  --dorado-claro: #e0c992;

  --cafe-franciscano: #6b4b3b;
  --cafe-franciscano-claro: #80604f;

  --blanco: #ffffff;
  --marfil: #f8f5ef;
  --gris-claro: #efefef;

  --oscuro: #222222;
  --gris: #6e6e6e;

  --borde: rgba(0, 0, 0, 0.08);

  --sombra:
    0 15px 45px
    rgba(0, 0, 0, 0.1);

  --radio: 20px;

  --titulo:
    "Playfair Display",
    Georgia,
    serif;

  --texto:
    "Inter",
    Arial,
    sans-serif;
}


/* =========================================================
   RESET / BASE
========================================================= */

* {
  margin: 0;
  padding: 0;

  box-sizing: border-box;
}


html {
  scroll-behavior: smooth;
}


body {
  font-family:
    var(--texto);

  color:
    var(--oscuro);

  background:
    var(--blanco);

  line-height: 1.6;

  overflow-x: hidden;
}


a {
  color: inherit;

  text-decoration: none;
}


img {
  display: block;

  max-width: 100%;
}


ul {
  list-style: none;
}


.contenedor {
  width:
    min(
      92%,
      1240px
    );

  margin:
    0 auto;
}


/* =========================================================
   HEADER GLOBAL / STICKY
========================================================= */

#site-header {
  position: sticky;

  top: 0;

  z-index: 1200;

  width: 100%;
}


/* =========================================================
   TOPBAR
========================================================= */

.topbar {
  position: relative;

  z-index: 2;

  overflow: hidden;

  border-bottom:
    1px solid
    rgba(224, 201, 146, 0.30);

  background:

    radial-gradient(
      circle at 15% 0%,
      rgba(224, 201, 146, 0.13),
      transparent 28%
    ),

    linear-gradient(
      100deg,
      #5b3b30 0%,
      var(--cafe-franciscano) 48%,
      #5b2633 100%
    );

  color:
    rgba(255, 255, 255, 0.94);

  font-size:
    0.74rem;

  box-shadow:
    0 4px 16px
    rgba(55, 31, 25, 0.11);
}


.topbar::after {
  content: "";

  position: absolute;

  left: 0;
  right: 0;
  bottom: 0;

  height:
    1px;

  pointer-events:
    none;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(224, 201, 146, 0.75),
      transparent
    );
}


.topbar-contenido {
  min-height:
    44px;

  padding:
    5px 0;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    14px;
}


.topbar-izquierda,
.topbar-derecha {
  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  min-width:
    0;
}


.topbar-izquierda {
  flex:
    1 1 auto;
}


.topbar-derecha {
  flex:
    0 0 auto;

  justify-content:
    flex-end;
}


.topbar-item,
.topbar-social {
  min-height:
    32px;

  padding:
    5px 10px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    7px;

  border:
    1px solid
    rgba(255, 255, 255, 0.10);

  border-radius:
    999px;

  background:
    rgba(255, 255, 255, 0.055);

  color:
    rgba(255, 255, 255, 0.95);

  white-space:
    nowrap;

  line-height:
    1.2;

  transition:
    color 0.22s ease,
    background 0.22s ease,
    border-color 0.22s ease,
    transform 0.22s ease,
    box-shadow 0.22s ease;
}


a.topbar-item:hover,
.topbar-social:hover {
  color:
    #ffffff;

  border-color:
    rgba(224, 201, 146, 0.42);

  background:
    rgba(255, 255, 255, 0.10);

  box-shadow:
    0 5px 14px
    rgba(31, 16, 13, 0.10);

  transform:
    translateY(-1px);
}


.topbar-item svg {
  width:
    15px;

  height:
    15px;

  flex:
    0 0 auto;

  color:
    var(--dorado-claro);

  stroke:
    var(--dorado-claro);
}


.topbar-social svg {
  width:
    15px;

  height:
    15px;

  flex:
    0 0 auto;
}


.topbar-social--facebook,
.topbar-social--instagram {
  color:
    rgba(255, 255, 255, 0.95);
}


.topbar-social--instagram svg {
  fill:
    none;
}


.topbar-social--whatsapp {
  border-color:
    rgba(122, 220, 149, 0.22);

  background:
    rgba(37, 211, 102, 0.10);

  color:
    #effff3;
}


.topbar-social--whatsapp:hover {
  border-color:
    rgba(122, 220, 149, 0.48);

  background:
    rgba(37, 211, 102, 0.18);

  color:
    #ffffff;
}


.topbar-texto--mobile {
  display:
    none;
}


.topbar-ubicacion {
  cursor:
    pointer;
}


a.topbar-ubicacion {
  color:
    rgba(255, 255, 255, 0.95);
}


a.topbar-ubicacion:focus-visible,
.topbar-email:focus-visible,
.topbar-social:focus-visible {
  outline:
    2px solid
    rgba(224, 201, 146, 0.75);

  outline-offset:
    2px;
}


/* =========================================================
   HEADER PRINCIPAL
========================================================= */

.header {
  position:
    relative;

  z-index:
    1;

  background:
    rgba(255, 255, 255, 0.985);

  border-bottom:
    1px solid
    var(--borde);

  backdrop-filter:
    blur(12px);

  transition:
    box-shadow 0.25s ease,
    background 0.25s ease;
}


.header.scrolled {
  background:
    rgba(255, 255, 255, 0.97);

  box-shadow:
    0 10px 30px
    rgba(35, 18, 22, 0.11);
}


.header-contenido {
  min-height:
    82px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    22px;
}


/* =========================================================
   MARCA
========================================================= */

.marca {
  display:
    flex;

  align-items:
    center;

  gap:
    13px;

  flex-shrink:
    0;
}


.marca-logo {
  width:
    50px;

  height:
    50px;

  display:
    grid;

  place-items:
    center;

  border:
    2px solid
    var(--dorado);

  border-radius:
    50%;

  background:
    var(--vino);

  color:
    var(--dorado-claro);

  font-family:
    var(--titulo);

  font-weight:
    700;
}


.marca-logo-header {
  width:
    60px;

  height:
    60px;

  padding:
    4px;

  overflow:
    hidden;

  border:
    1px solid
    rgba(111, 29, 46, 0.10);

  border-radius:
    16px;

  background:
    #ffffff;

  box-shadow:
    0 7px 20px
    rgba(57, 27, 34, 0.08);
}


.marca-logo-header img {
  width:
    100%;

  height:
    100%;

  object-fit:
    contain;

  object-position:
    center;

  border-radius:
    12px;
}


.marca-texto {
  display:
    flex;

  flex-direction:
    column;
}


.marca-titulo {
  color:
    var(--vino-oscuro);

  font-family:
    var(--titulo);

  font-size:
    1.08rem;

  font-weight:
    700;

  line-height:
    1.1;
}


.marca-subtitulo {
  margin-top:
    5px;

  color:
    #786d68;

  font-size:
    0.62rem;

  font-weight:
    700;

  text-transform:
    uppercase;

  letter-spacing:
    0.19em;
}


/* =========================================================
   MENÚ PRINCIPAL
========================================================= */

.menu {
  display:
    flex;

  align-items:
    center;

  gap:
    clamp(
      8px,
      0.9vw,
      15px
    );
}


.menu a {
  position:
    relative;

  padding:
    30px 0;

  color:
    #333333;

  font-size:
    0.81rem;

  font-weight:
    600;

  white-space:
    nowrap;

  transition:
    color 0.22s ease;
}


.menu a::after {
  content:
    "";

  position:
    absolute;

  left:
    0;

  right:
    0;

  bottom:
    19px;

  height:
    2px;

  border-radius:
    999px;

  background:
    linear-gradient(
      90deg,
      var(--dorado),
      var(--vino)
    );

  transform:
    scaleX(0);

  transform-origin:
    center;

  transition:
    transform 0.25s ease;
}


.menu a:hover,
.menu a.activo {
  color:
    var(--vino);
}


.menu a:hover::after,
.menu a.activo::after {
  transform:
    scaleX(1);
}


/* =========================================================
   BOTÓN DONACIONES DEL MENÚ
========================================================= */

.menu a.menu-donaciones {
  min-height:
    42px;

  margin-left:
    2px;

  padding:
    0 16px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    7px;

  border:
    1px solid
    rgba(111, 29, 46, 0.16);

  border-radius:
    999px;

  background:
    linear-gradient(
      135deg,
      #eedaa4 0%,
      var(--dorado-claro) 45%,
      var(--dorado) 100%
    );

  color:
    var(--vino-oscuro);

  font-weight:
    800;

  box-shadow:
    0 8px 20px
    rgba(128, 91, 38, 0.18);

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    filter 0.25s ease;
}


.menu a.menu-donaciones::after {
  display:
    none;
}


.menu a.menu-donaciones:hover,
.menu a.menu-donaciones.activo {
  color:
    var(--vino-oscuro);

  transform:
    translateY(-2px);

  filter:
    saturate(1.06);

  box-shadow:
    0 12px 28px
    rgba(128, 91, 38, 0.26);
}


.menu-donaciones-icono {
  font-size:
    1.05rem;

  line-height:
    1;

  transform:
    translateY(-1px);
}


/* =========================================================
   BOTÓN MENÚ MÓVIL
========================================================= */

.boton-menu {
  display:
    none;

  width:
    45px;

  height:
    45px;

  border:
    0;

  background:
    transparent;

  cursor:
    pointer;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap:
    5px;
}


.boton-menu span {
  width:
    25px;

  height:
    2px;

  background:
    var(--vino);

  transition:
    transform 0.25s ease,
    opacity 0.25s ease;
}


.boton-menu:focus-visible {
  outline:
    2px solid
    rgba(111, 29, 46, 0.35);

  outline-offset:
    3px;

  border-radius:
    10px;
}


/* =========================================================
   FOOTER BASE
========================================================= */

.footer {
  position:
    relative;

  padding:
    0;

  background:
    var(--cafe-franciscano);

  color:
    rgba(255, 255, 255, 0.82);

  border-top:
    1px solid
    rgba(255, 255, 255, 0.07);
}


.footer-grid {
  position:
    relative;

  display:
    grid;
}


.footer-marca {
  display:
    inline-flex;

  align-items:
    center;
}


.footer-logo-real {
  flex-shrink:
    0;

  overflow:
    hidden;

  background:
    rgba(255, 255, 255, 0.96);

  border:
    1px solid
    rgba(255, 255, 255, 0.22);

  box-shadow:
    0 10px 25px
    rgba(45, 29, 23, 0.13);
}


.footer-logo-real img {
  width:
    100%;

  height:
    100%;

  object-fit:
    contain;

  object-position:
    center;
}


.footer-marca-texto {
  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;
}


.footer-marca-texto strong {
  color:
    #ffffff;

  font-family:
    var(--titulo);

  font-weight:
    600;
}


.footer-marca-texto span {
  color:
    var(--dorado-claro);

  font-weight:
    700;

  text-transform:
    uppercase;
}


.footer-bloque h3 {
  color:
    var(--dorado-claro);

  font-family:
    var(--titulo);

  font-weight:
    600;
}


.footer-enlaces {
  display:
    grid;
}


.footer-enlaces a {
  width:
    fit-content;

  color:
    rgba(255, 255, 255, 0.74);

  transition:
    color 0.2s ease,
    transform 0.2s ease;
}


.footer-enlaces a:hover {
  color:
    #ffffff;

  transform:
    translateX(3px);
}


/* =========================================================
   UBICACIÓN FOOTER
========================================================= */

.footer-ubicacion--enlace {
  width:
    fit-content;

  max-width:
    100%;

  display:
    inline-flex;

  align-items:
    center;

  border:
    1px solid
    rgba(255, 255, 255, 0.10);

  background:
    rgba(255, 255, 255, 0.04);

  color:
    rgba(255, 255, 255, 0.74);

  transition:
    color 0.22s ease,
    background 0.22s ease,
    border-color 0.22s ease,
    transform 0.22s ease;
}


.footer-ubicacion--enlace svg {
  flex:
    0 0 auto;

  color:
    var(--dorado-claro);

  stroke:
    currentColor;
}


/* =========================================================
   REDES FOOTER
========================================================= */

.footer-sociales {
  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;
}


.footer-social {
  display:
    grid;

  place-items:
    center;

  border:
    1px solid
    rgba(255, 255, 255, 0.16);

  border-radius:
    50%;

  background:
    rgba(255, 255, 255, 0.06);

  color:
    #ffffff;

  transition:
    transform 0.22s ease,
    background 0.22s ease,
    color 0.22s ease,
    border-color 0.22s ease;
}


.footer-social--whatsapp {
  border-color:
    rgba(93, 218, 139, 0.22);

  background:
    rgba(37, 211, 102, 0.09);

  color:
    #f2fff6;
}


.footer-social--instagram svg {
  fill:
    none;
}


.footer-ubicacion--enlace:focus-visible,
.footer-social:focus-visible,
.footer-politica-link:focus-visible {
  outline:
    2px solid
    rgba(224, 201, 146, 0.65);

  outline-offset:
    3px;
}


/* =========================================================
   FOOTER ULTRA COMPACTO
========================================================= */

.footer--compacto {
  padding:
    0 !important;
}


.footer-grid--compacto {
  padding:
    16px 0 12px !important;

  grid-template-columns:
    minmax(240px, 1.2fr)
    minmax(130px, 0.55fr)
    minmax(210px, 0.75fr) !important;

  align-items:
    center !important;

  gap:
    18px !important;
}


.footer-identidad--compacta {
  max-width:
    330px !important;
}


.footer-identidad--compacta
.footer-marca {
  gap:
    10px !important;
}


.footer-identidad--compacta
.footer-logo-real {
  width:
    50px !important;

  height:
    50px !important;

  padding:
    3px !important;

  border-radius:
    11px !important;
}


.footer-identidad--compacta
.footer-logo-real img {
  border-radius:
    8px !important;
}


.footer-identidad--compacta
.footer-marca-texto strong {
  font-size:
    0.92rem !important;

  line-height:
    1.05 !important;
}


.footer-identidad--compacta
.footer-marca-texto span {
  margin-top:
    2px !important;

  font-size:
    0.50rem !important;

  letter-spacing:
    0.12em !important;
}


.footer-bloque--compacto h3,
.footer-conecta--compacto h3 {
  margin:
    0 0 6px !important;

  font-size:
    0.82rem !important;

  line-height:
    1.1 !important;
}


.footer-enlaces--compactos {
  gap:
    2px !important;
}


.footer-enlaces--compactos a {
  font-size:
    0.67rem !important;

  line-height:
    1.35 !important;
}


.footer-conecta--compacto
.footer-ubicacion--enlace {
  margin:
    0 !important;

  padding:
    4px 7px !important;

  gap:
    5px !important;

  border-radius:
    8px !important;

  font-size:
    0.65rem !important;

  line-height:
    1.2 !important;
}


.footer-conecta--compacto
.footer-ubicacion--enlace svg {
  width:
    13px !important;

  height:
    13px !important;
}


.footer-conecta--compacto
.footer-sociales {
  margin-top:
    7px !important;

  gap:
    6px !important;
}


.footer-conecta--compacto
.footer-social {
  width:
    28px !important;

  height:
    28px !important;

  border-width:
    1px !important;
}


.footer-conecta--compacto
.footer-social svg {
  width:
    13px !important;

  height:
    13px !important;
}


/* =========================================================
   OCULTAR ESTRUCTURAS ANTERIORES DEL FOOTER
========================================================= */

.footer--compacto .footer-frase,
.footer--compacto .footer-whatsapp-enlace,
.footer--compacto .footer-legal-aviso,
.footer--compacto .footer-legal-enlaces,
.footer--compacto .footer-inferior {
  display:
    none !important;
}


/* =========================================================
   FRANJA LEGAL COMPACTA
========================================================= */

.footer-legal--compacto {
  margin:
    0 !important;

  padding:
    0 !important;

  border-top:
    1px solid
    rgba(255, 255, 255, 0.08) !important;

  background:
    rgba(36, 22, 18, 0.08) !important;
}


.footer-legal--compacto::before {
  display:
    none !important;
}


.footer-legal-contenido--compacto {
  min-height:
    34px !important;

  padding:
    6px 0 !important;

  display:
    flex !important;

  flex-direction:
    row !important;

  align-items:
    center !important;

  justify-content:
    space-between !important;

  gap:
    14px !important;
}


.footer-politica-link {
  color:
    rgba(255, 255, 255, 0.72);

  font-size:
    0.60rem !important;

  font-weight:
    600;

  line-height:
    1.2;

  white-space:
    nowrap;

  transition:
    color 0.2s ease;
}


.footer-politica-link:hover {
  color:
    var(--dorado-claro);
}


.footer-copyright {
  margin:
    0 !important;

  color:
    rgba(255, 255, 255, 0.48);

  font-size:
    0.57rem !important;

  line-height:
    1.25 !important;

  text-align:
    right;
}


.footer-copyright span {
  display:
    inline;
}


/* =========================================================
   HOVER FOOTER
========================================================= */

@media (hover: hover) and (pointer: fine) {

  .footer-ubicacion--enlace:hover {
    color:
      #ffffff;

    background:
      rgba(255, 255, 255, 0.08);

    border-color:
      rgba(224, 201, 146, 0.30);

    transform:
      translateY(-2px);
  }


  .footer-social:hover {
    transform:
      translateY(-2px);

    background:
      var(--dorado);

    border-color:
      var(--dorado);

    color:
      #38281f;
  }


  .footer-social--whatsapp:hover {
    background:
      #25d366;

    border-color:
      #25d366;

    color:
      #ffffff;
  }

}


/* =========================================================
   BOTÓN GLOBAL VOLVER ARRIBA
========================================================= */

.volver-arriba {
  position:
    fixed;

  z-index:
    1100;

  right:
    22px;

  bottom:
    22px;

  width:
    58px;

  height:
    58px;

  padding:
    0;

  display:
    grid;

  place-items:
    center;

  border:
    2px solid
    rgba(224, 201, 146, 0.85);

  border-radius:
    50%;

  background:

    radial-gradient(
      circle at 35% 28%,
      rgba(255, 255, 255, 0.14),
      transparent 35%
    ),

    linear-gradient(
      145deg,
      var(--vino),
      var(--vino-oscuro)
    );

  color:
    #ffffff;

  cursor:
    pointer;

  opacity:
    0;

  visibility:
    hidden;

  pointer-events:
    none;

  transform:
    translateY(18px)
    scale(0.88);

  box-shadow:

    0 0 0 5px
    rgba(198, 161, 91, 0.10),

    0 16px 34px
    rgba(54, 15, 25, 0.26);

  transition:
    opacity 0.28s ease,
    visibility 0.28s ease,
    transform 0.28s ease,
    box-shadow 0.28s ease;
}


.volver-arriba::before {
  content:
    "";

  position:
    absolute;

  inset:
    -6px;

  border:
    1px solid
    rgba(198, 161, 91, 0.26);

  border-radius:
    50%;

  pointer-events:
    none;
}


.volver-arriba svg {
  width:
    25px;

  height:
    25px;

  display:
    block;
}


.volver-arriba.visible {
  opacity:
    1;

  visibility:
    visible;

  pointer-events:
    auto;

  transform:
    translateY(0)
    scale(1);

  animation:
    volverArribaRebote
    2.6s ease-in-out
    infinite;
}


.volver-arriba.visible:hover {
  animation:
    none;

  transform:
    translateY(-4px)
    scale(1.05);

  box-shadow:

    0 0 0 7px
    rgba(198, 161, 91, 0.13),

    0 20px 40px
    rgba(54, 15, 25, 0.30);
}


.volver-arriba:focus-visible {
  outline:
    3px solid
    rgba(224, 201, 146, 0.55);

  outline-offset:
    4px;
}


/* =========================================================
   ANIMACIÓN VOLVER ARRIBA
========================================================= */

@keyframes volverArribaRebote {

  0%,
  72%,
  100% {
    transform:
      translateY(0)
      scale(1);
  }


  80% {
    transform:
      translateY(-8px)
      scale(1.02);
  }


  88% {
    transform:
      translateY(0)
      scale(1);
  }


  94% {
    transform:
      translateY(-4px)
      scale(1.01);
  }

}


/* =========================================================
   RESPONSIVE 1180
========================================================= */

@media (max-width: 1180px) {

  .topbar-contenido {
    gap:
      9px;
  }


  .topbar-izquierda,
  .topbar-derecha {
    gap:
      6px;
  }


  .topbar-item,
  .topbar-social {
    padding:
      5px 8px;

    font-size:
      0.69rem;
  }


  .menu {
    gap:
      8px;
  }


  .menu a {
    font-size:
      0.72rem;
  }


  .menu a.menu-donaciones {
    padding:
      0 12px;
  }

}


/* =========================================================
   RESPONSIVE 950
========================================================= */

@media (max-width: 950px) {

  .topbar {
    display:
      block;
  }


  .topbar-contenido {
    min-height:
      42px;

    padding:
      5px 0;

    flex-wrap:
      wrap;
  }


  .topbar-izquierda {
    display:
      flex;

    flex:
      1 1 auto;

    gap:
      6px;
  }


  .topbar-email {
    display:
      inline-flex;
  }


  .topbar-derecha {
    display:
      flex;

    width:
      auto;

    gap:
      5px;
  }


  .topbar-item,
  .topbar-social {
    min-height:
      30px;

    padding:
      4px 8px;
  }


  .boton-menu {
    display:
      flex;
  }


  .menu {
    position:
      absolute;

    top:
      100%;

    left:
      0;

    width:
      100%;

    max-height:
      0;

    overflow:
      hidden;

    display:
      flex;

    flex-direction:
      column;

    align-items:
      stretch;

    gap:
      0;

    background:
      var(--blanco);

    box-shadow:
      0 20px 30px
      rgba(0, 0, 0, 0.08);

    transition:
      max-height 0.35s ease;
  }


  .menu.abierto {
    max-height:
      760px;

    overflow-y:
      auto;
  }


  .menu a {
    padding:
      15px 25px;

    border-bottom:
      1px solid
      var(--borde);
  }


  .menu a::after {
    display:
      none;
  }


  .menu a.menu-donaciones {
    width:
      auto;

    min-height:
      48px;

    margin:
      10px 18px 14px;

    padding:
      0 18px;

    border:
      1px solid
      rgba(111, 29, 46, 0.16);

    border-radius:
      14px;

    justify-content:
      center;
  }


  /* FOOTER TABLET */

  .footer-grid--compacto {
    padding:
      15px 0 11px !important;

    grid-template-columns:
      1fr
      0.55fr !important;

    gap:
      14px 20px !important;
  }


  .footer-conecta--compacto {
    grid-column:
      1 / -1 !important;

    display:
      flex !important;

    align-items:
      center !important;

    gap:
      12px !important;

    padding-top:
      0 !important;
  }


  .footer-conecta--compacto h3 {
    margin:
      0 !important;
  }


  .footer-conecta--compacto
  .footer-sociales {
    margin:
      0 !important;
  }


  .footer-legal-contenido--compacto {
    flex-direction:
      row !important;

    align-items:
      center !important;
  }

}


/* =========================================================
   RESPONSIVE 760
========================================================= */

@media (max-width: 760px) {

  .topbar-contenido {
    flex-wrap:
      nowrap;

    gap:
      5px;
  }


  .topbar-izquierda {
    display:
      flex;

    width:
      auto;

    min-width:
      0;

    flex:
      1 1 auto;
  }


  .topbar-derecha {
    width:
      auto;

    flex:
      0 0 auto;

    justify-content:
      flex-end;
  }


  .topbar-texto--desktop {
    display:
      none;
  }


  .topbar-texto--mobile {
    display:
      inline;
  }


  .topbar-item,
  .topbar-social {
    min-height:
      30px;

    padding:
      4px 7px;

    gap:
      5px;

    font-size:
      0.67rem;
  }


  .topbar-social-texto {
    font-size:
      0.65rem;
  }


  .topbar-ubicacion {
    flex:
      0 1 auto;

    min-width:
      0;
  }

}


/* =========================================================
   RESPONSIVE FOOTER 680
========================================================= */

@media (max-width: 680px) {

  .footer-grid--compacto {
    padding:
      13px 0 10px !important;

    grid-template-columns:
      1fr !important;

    gap:
      11px !important;
  }


  .footer-identidad--compacta {
    max-width:
      100% !important;
  }


  .footer-identidad--compacta
  .footer-logo-real {
    width:
      46px !important;

    height:
      46px !important;
  }


  .footer-identidad--compacta
  .footer-marca-texto strong {
    font-size:
      0.88rem !important;
  }


  .footer-bloque--compacto {
    display:
      none !important;
  }


  .footer-conecta--compacto {
    grid-column:
      auto !important;

    display:
      flex !important;

    align-items:
      center !important;

    justify-content:
      space-between !important;

    gap:
      10px !important;
  }


  .footer-conecta--compacto h3 {
    display:
      none !important;
  }


  .footer-conecta--compacto
  .footer-ubicacion--enlace {
    font-size:
      0.63rem !important;
  }


  .footer-conecta--compacto
  .footer-sociales {
    margin:
      0 !important;

    flex-shrink:
      0;
  }


  .footer-legal-contenido--compacto {
    min-height:
      auto !important;

    padding:
      6px 0 !important;

    flex-direction:
      column !important;

    align-items:
      flex-start !important;

    gap:
      3px !important;
  }


  .footer-copyright {
    text-align:
      left !important;

    font-size:
      0.55rem !important;
  }


  .footer-politica-link {
    font-size:
      0.58rem !important;
  }

}


/* =========================================================
   RESPONSIVE WHATSAPP 600
========================================================= */

@media (max-width: 600px) {

  .topbar-social--whatsapp {
    width:
      34px;

    height:
      30px;

    min-width:
      34px;

    min-height:
      30px;

    padding:
      0;

    display:
      inline-flex;

    align-items:
      center;

    justify-content:
      center;

    border-radius:
      999px;

    flex:
      0 0 34px;
  }


  .topbar-social--whatsapp
  .topbar-social-texto {
    display:
      none !important;
  }


  .topbar-social--whatsapp svg {
    width:
      16px;

    height:
      16px;

    margin:
      0;

    flex:
      0 0 auto;
  }

}


/* =========================================================
   RESPONSIVE 560
========================================================= */

@media (max-width: 560px) {

  .contenedor {
    width:
      min(
        90%,
        1240px
      );
  }


  .header-contenido {
    min-height:
      72px;
  }


  .marca-logo {
    width:
      43px;

    height:
      43px;
  }


  .marca-logo-header {
    width:
      50px;

    height:
      50px;

    border-radius:
      14px;
  }


  .marca-logo-header img {
    border-radius:
      10px;
  }


  .marca-titulo {
    font-size:
      0.9rem;
  }


  .marca-subtitulo {
    font-size:
      0.58rem;
  }


  .topbar-contenido {
    width:
      min(
        94%,
        1240px
      );

    min-height:
      40px;

    justify-content:
      space-between;
  }


  .topbar-izquierda {
    display:
      flex !important;

    width:
      auto;

    min-width:
      0;

    flex:
      1 1 auto;

    gap:
      4px;
  }


  .topbar-email {
    display:
      none !important;
  }


  .topbar-derecha {
    width:
      auto;

    gap:
      4px;

    justify-content:
      flex-end;
  }


  .topbar-item,
  .topbar-social {
    min-height:
      29px;

    padding:
      4px 6px;
  }


  .topbar-item svg,
  .topbar-social svg {
    width:
      14px;

    height:
      14px;
  }


  .topbar-social-texto {
    display:
      none;
  }


  .topbar-ubicacion {
    min-height:
      29px;

    padding:
      4px 7px;

    flex:
      0 1 auto;
  }


  .topbar-ubicacion
  .topbar-texto--desktop {
    display:
      none;
  }


  .topbar-ubicacion
  .topbar-texto--mobile {
    display:
      inline;

    font-size:
      0.64rem;
  }


  .volver-arriba {
    right:
      15px;

    bottom:
      15px;

    width:
      52px;

    height:
      52px;
  }


  .volver-arriba svg {
    width:
      23px;

    height:
      23px;
  }

}


/* =========================================================
   RESPONSIVE 420
========================================================= */

@media (max-width: 420px) {

  .footer-grid--compacto {
    padding:
      11px 0 8px !important;

    gap:
      9px !important;
  }


  .footer-identidad--compacta
  .footer-logo-real {
    width:
      42px !important;

    height:
      42px !important;
  }


  .footer-identidad--compacta
  .footer-marca-texto strong {
    font-size:
      0.82rem !important;
  }


  .footer-identidad--compacta
  .footer-marca-texto span {
    font-size:
      0.47rem !important;
  }


  .footer-conecta--compacto
  .footer-ubicacion--enlace {
    padding:
      4px 6px !important;
  }


  .footer-conecta--compacto
  .footer-social {
    width:
      27px !important;

    height:
      27px !important;
  }


  .footer-politica-link {
    font-size:
      0.56rem !important;
  }


  .footer-copyright {
    font-size:
      0.52rem !important;
  }

}


/* =========================================================
   RESPONSIVE 390
========================================================= */

@media (max-width: 390px) {

  .topbar-contenido {
    width:
      min(
        96%,
        1240px
      );

    gap:
      3px;
  }


  .topbar-izquierda,
  .topbar-derecha {
    gap:
      3px;
  }


  .topbar-item,
  .topbar-social {
    min-height:
      28px;

    padding:
      4px 5px;

    font-size:
      0.62rem;
  }


  .topbar-social--whatsapp {
    width:
      32px;

    height:
      28px;

    min-width:
      32px;

    min-height:
      28px;

    flex-basis:
      32px;
  }


  .topbar-social--whatsapp svg {
    width:
      15px;

    height:
      15px;
  }


  .topbar-ubicacion {
    padding:
      4px 5px;
  }


  .topbar-ubicacion
  .topbar-texto--mobile {
    display:
      none;
  }

}


/* =========================================================
   ACCESIBILIDAD / REDUCIR MOVIMIENTO
========================================================= */

@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior:
      auto;
  }


  .volver-arriba.visible {
    animation:
      none;
  }


  .topbar-item,
  .topbar-social,
  .menu a,
  .menu a.menu-donaciones,
  .footer-ubicacion--enlace,
  .footer-social,
  .footer-politica-link,
  .volver-arriba {
    transition:
      none !important;
  }

}