/* plantillas_responsive.css */

/* ========================= */
/* 🔁 ESTILOS RESPONSIVE     */
/* ========================= */

@media screen and (max-width: 768px) {
  body {
  min-height: 100vh;  
  display: flex;  /* 🔁 cambia de flex a block */
  flex-direction: column;
  justify-content: space-between; /* Empuja footer al fondo */
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  background-image: url("/static/img/p_fondo_responsive_unificado.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-color: #e7e3da;
  box-sizing: border-box;
}


  html, body {
    background-size: auto;
    background-position: center top;
    background-attachment: scroll;
    }

  .contenedor-principal {
    width: 90%;
    max-width: 300px;
    margin: 90px auto 50px auto !important;
    padding: 20px 14px;
    background-color: rgba(255, 255, 255, 0.35);
    border-radius: 16px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  }


 .barra-superior {
    display: flex;
    align-items: center;
    gap: 6px;
    position: relative;
    margin-top: 20px;
    margin-left: 30px;     /* ✅ Control total */
    width: fit-content;
    z-index: 10;
  }


  .menu-icon {
    top: 20px !important;
    left: 20px !important;
    width: 26px !important;
    height: 26px!important;
  }

  .menu-icon img {
    width: 110%;
    height: auto;
  }


  .titulo {
    font-size: 18px;
    margin-bottom: 16px;
    text-align: center;
  }

  .lista-categorias {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .categoria {
    font-size: 13px;
    padding: 14px;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  }

  .categoria h2 {
    font-size: 14px;
    margin: 0;
    text-align: center;
  }

  .side-menu {
    width: 50vw;
    left: -50vw;
  }

  .side-menu li a {
    font-family: 'Raleway', sans-serif !important;
    font-weight: 400 !important;
    font-size: 12px;
    color: white;
    padding: 8px 0;
    text-decoration: none;
    display: block;
  }

  .side-menu li a:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
  }


  /* Footer responsive */
.footer {
  margin-top: auto; /* ✅ Esto empuja el footer al fondo real */
  width: 100% !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  justify-content: center;
  z-index: 5;
  padding: 12px 16px 8px 16px;  /* arriba, lados, abajo */
  box-sizing: border-box;
}


.footer .redes-sociales {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 50px;
  margin: 14px auto 0 auto; 
  width: 100%;
  padding: 0;
  box-sizing: border-box;
}

.footer .redes-sociales img {
  width: 18px;
  height: 18px;
  margin-bottom: 2px !important;
}

.footer .marca-registrada {
  font-size: 9px !important;
  opacity: 0.8 !important;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px !important; 
}

.redes-sociales img[src*="youtube_shorts"] {
    width: 22px;
    transform: translateY(1px);
  }

.logo-superior {
  display: none !important;
}

.logo-responsive {
  display: block !important;
  position: absolute !important;
  top: -5px !important;
  left: 50% !important;                     /* Centrado horizontal */
  transform: translateX(60%) !important;  /* Corrige el centrado */
  width: auto !important;
  height: auto !important;
  z-index: 10;
}

.logo-colibri-responsive {
  width: 210px  !important;      /* 🔽 Tamaño más pequeño del logo */
  max-width: 38vw  !important;
  height: auto;
}

/* Oculta el botón de ayuda en responsive */
.boton-ayuda {
  display: none !important;
}


body.plantillas main.categorias-container {
  position: relative;
  left: 50%;
  transform: translateX(-50%) !important;  /* Centrado absoluto */
  width: 85%;
  max-width: 325px !important;
  margin: 110px 0 40px 0 !important;
  padding: 18px 16px !important;
  border-radius: 16px !important;
  background-color: rgba(255, 255, 255, 0.35) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06) !important;
  z-index: 5;
}



  body.plantillas .btn-ver-premium {
    top: 80px !important;   /* ⬅️ Baja el botón para que no tape el logo */
    right: 20px !important; /* ⬅️ Opcional: lo acerca al borde */
    font-size: 10px !important;
    padding: 6px 14px !important;
    z-index: 9999 !important;
  }
}