/* 
Sitio Web Creado por ITred Spa.
Direccion: Guido Reni #4190
Pedro Aguirre Cerda - Santiago - Chile
contacto@itred.cl o itred.spa@gmail.com
https://www.itred.cl
Creado, Programado y Diseñado por ITred Spa.
BPPJ 
*/



/* -------------------------------------------------------------------------------------------------------------
   ------------------------------------- INICIO ITred Spa boton_subida .CSS ------------------------------------
   ------------------------------------------------------------------------------------------------------------- */

/* TITULO BOTÓN SUBIDA */

  /* clase flotando botón */
  .flotando-boton {
    position: fixed;          /* El botón se mantiene fijo en pantalla */
    bottom: 39px;             /* Distancia desde la parte inferior */
    right: 2%;             /* Distancia desde el borde derecho */
    width: 57px;              /* Ancho del botón */
    height: 57px;             /* Alto del botón */
    border-radius: 100%;      /* Lo hace circular */
    display: flex;            /* Centra el contenido del botón */
    align-items: center;      /* Centra verticalmente el ícono */
    justify-content: center;  /* Centra horizontalmente el ícono */
    cursor: pointer;          /* Cambia el cursor al pasar por encima */
    transition: transform 0.1s ease; /* Animación suave al hacer hover */
    z-index: 10;              /* Se ubica por encima del contenido */
  }

  /* clase hover sobre el botón flotante */
  .flotando-boton:hover {
    transform: scale(1.2);    /* Agranda el botón ligeramente al pasar el mouse */
  }

/*TITULO RESPONSIVO  */

  /* 🔹 Teléfonos pequeños (iPhone SE, Android compactos) */
  @media only screen and (max-width: 480px) {

    /* Modificamos el contenedor del boton */
    .flotando-boton {
      bottom: 4%;           /* Más cerca del borde inferior */
      right: 6%;            /* Más cerca del borde derecho */
      aspect-ratio: 37 / 73; /* mantiene proporción vertical */
      max-width: 100%;  /* Le damos el maximo de altura */
    }
  }


  /* 🔹 Teléfonos medianos (iPhone estándar, Android promedio) */ 
  @media only screen and (min-width: 481px) and (max-width: 767px) {

    /* Modificamos el contenedor del boton */
    .flotando-boton {
      bottom: 25px; /* Subimos el boton */
      right: 30px;  /* a la izquierda */
      width: 50px;  /* Le damos un ancho */
      height: 50px; /* Le damos una altura */
    }
  }


  /* 🔹 Tablets (iPad vertical, Android tablets) */
  @media only screen and (min-width: 768px) and (max-width: 1024px) {

    /* Modificamos el contenedor del boton */
    .flotando-boton {
      bottom: 3.6%; /* Subimos el boton */
      right: 3%;  /* a la izquierda */
      width: 72px;  /* Le damos un ancho */
      height: 72px; /* Le damos una altura */
    }

    /* cambia color del círculo del botón “go up” */
    .flotando-boton svg circle {
      fill: orange; /* Color */
    }

    /* cambia color de la flecha */
    .flotando-boton svg path {
      fill: white; /* color del triángulo */
    }

    /* si quieres agrandar el SVG dentro del botón */
    .flotando-boton svg {
      width: 34px;  /* Se agranda tamaño del svg ancho */
      height: 34px; /* Se agranda tamaño del svg alto */
    }
  }


  /* 🔹 iPad horizontal o tablets grandes / laptops pequeños */
  @media only screen and (min-width: 1024px) and (max-width: 1279px) {

    /* Modificamos el contenedor del boton */
    .flotando-boton {
      bottom: 2%; /* Subimos el boton */
      right: 3%;  /* a la izquierda */
      width: 83px;  /* Le damos un ancho */
      height: 83px; /* Le damos una altura */
    }
    
    /* cambia color del círculo del botón “go up” */
    .flotando-boton svg circle {
      fill: orange; /* Color */
    }

    /* cambia color de la flecha */
    .flotando-boton svg path {
      fill: white; /* color del triángulo */
    }

    /* si quieres agrandar el SVG dentro del botón */
    .flotando-boton svg {
      width: 40px;  /* Se agranda tamaño del svg ancho */
      height: 40px; /* Se agranda tamaño del svg alto */
    }
  }


  /* 🔹 Escritorio y pantallas grandes */
  @media only screen and (min-width: 1280px) and (max-width:1281px) {

    /* Modificamos el contenedor del boton */
    .flotando-boton {
      bottom: 4%; /* Se sube el boton */
      right: 3%; /* A la iz */
      width: 4.8%;  /* Se agranda el tamaño ancho */
      height: 7.8%; /* Se agranda el tamaño alto */
    }

    /* cambia color del círculo del botón “go up” */
    .flotando-boton svg circle {
      fill: orange; /* Color */
    }

    /* cambia color de la flecha */
    .flotando-boton svg path {
      fill: white; /* color del triángulo */
    }

    /* si quieres agrandar el SVG dentro del botón */
    .flotando-boton svg {
      width: 27px;  /* Se agranda tamaño del svg ancho */
      height: 27px; /* Se agranda tamaño del svg alto */
    }

  }



/* -------------------------------------------------------------------------------------------------------------
   -------------------------------------- FIN ITred Spa boton_subida .CSS --------------------------------------
   ------------------------------------------------------------------------------------------------------------- */




/* 
Sitio Web Creado por ITred Spa.
Direccion: Guido Reni #4190
Pedro Aguirre Cerda - Santiago - Chile
contacto@itred.cl o itred.spa@gmail.com
https://www.itred.cl
Creado, Programado y Diseñado por ITred Spa.
BPPJ 
*/