/* 
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 redes_s.CSS -----------------------------------------
   ------------------------------------------------------------------------------------------------------------- */

/* TITULO REDES SOCIALES */

  /* Contendor general de las 3 redes sociales */
  .botones_sociales{
    display: flex;  /* Los botones mas flexible */
    gap: 20px;  /* Separacion entre si */
    justify-content: center;  /* Centrado los iconos */
  }

  /* Diseño de los botones */
  .boton_social{
    width: 44px;  /* Altura */
    height: 44px; /* Ancho */
    display: inline-flex; /* Se inclinan los iconos */
    align-items: center;  /* Se centran los iconos verticalemnte */
    justify-content: center;  /* Se centran los iconos horizontalmente */
    border-radius: 50%; /* Forma de circulo */
    background: #fff; /* fondo del boton */
    color: #232323; /* Para SVGs con currentColor */
    box-shadow: 0 2px 8px rgba(0,0,0,0.10); /* Sombra al rededor del boton */
    transition: background .2s, transform .2s, box-shadow .2s;  /* Se deja animacion de hover */
    cursor: pointer;  /* Se cambia el cursor del mouse */
  }

  /* Animacion de tipico hover */
  .boton_social:hover{
    transform: translateY(-2px);  /* Sube arriba con mi mouse */
    box-shadow: 0 6px 16px rgba(0,0,0,0.14);  /* Se deja una sombrea al rededor del boton mas grande */
  }


  /* ESTILO PARA TABLET Y PC */
  @media (min-width: 1025px){

    /* Estilo flotante en modo escritorio y tablet */
    .botones_sociales.flotante{
      position: fixed;  /* Para poder moverlo libremente */
      top: 40%; /* Lo posicionamos */
      right: 16px;  /* lo dejamos a la izquierda */
      flex-direction: column; /* Estilo columna las 3 redes */
      gap: 16px;  /* Mas espacio entre si */
      padding: 8px 6px; /* Le damos espacio exterior para ellos */
    }

    /* Estilo de los botones sociales flotantes */
    .botones_sociales.flotante .boton_social:hover{
      transform: translateY(-6px) scale(1.06);  /* Le pasamos el mouse y sube y se agranda */
      box-shadow: 0 10px 24px rgba(0,0,0,0.18); /* Le añadimos un estilo sombre al rededor */
    }

    /* Decidimos el tamaño de la imagen adentro de boton facebook */
    .boton_social[title="Facebook"] svg{
      width: 30px;  /* Ancho */
      height: 30px; /* Alto */
    }

    /* LinkedIn circulo blanco */
    .boton_social.linkedin{
      background: #0077B5;  /* Fondo de color azul */
      border: 2px solid #ffffff;  /* Borde exterior */
      color: #ffffff; /* para SVG con currentColor */
    }

    /* Decidimos el tamaño de la imagen adentro de boton linkeding */
    .boton_social.linkedin svg{
      width: 24px;  /* Ancho */
      height: 24px; /* Alto */
    }

    /* Decidimos el tamaño de la imagen adentro de boton facebook */
    .boton_social[title="Correo"] svg{
      width: 30px;  /* Ancho */
      height: 30px; /* Alto */
    }
  }

  /* ESTILO PARA TELEFONOS */
  @media (max-width: 1024px){
    
    /* Botones más grandes, fondo azul, íconos blancos */
    .boton_social{
      width: 60px;  /* Ancho */
      height: 60px; /* Alto */
      border: none; /* Le quitamos el borde */
      background: #007bff;  /* Fondo de color azul */
      color: #fff;  /* Letras blanca */
      box-shadow: 0 3px 12px rgba(0,0,0,0.15); /* Diseño de los botones con sombras al rededor */
      transition: transform 0.25s, box-shadow 0.25s;  /* Transicion cuando pasa el mouse */
    }

    /* Animacion al pasar el mouse */
    .boton_social:hover{
      transform: translateY(-3px);  /* Se mueve hacia arriba */
      box-shadow: 0 10px 22px rgba(0,0,0,0.25); /* Se crea la sombra al rededor  */
    }

    /* Iconos más grandes y forzar blanco dentro del SVG */
    .boton_social svg{
      width: 37px; /* Ancho */
      height: 37px; /* Alto */
    }

    /* Iconos blancos por defecto sin tocar strokes */
    .boton_social svg path,
    .boton_social svg circle{
      fill: #ffffff !important; /* Color de los iconos adentro blanco */
    }

    /* Facebook trae el azul embebido → forzar blanco */
    .boton_social[title="Facebook"] svg path{
      fill: #ffffff !important; /* Color de los iconos adentro blanco */  
    }

    /* Le damos forma y diseño al correo */
    .boton_social[title="Correo"] svg rect{
      fill: none !important;  /* Ningun color adentro del icono */
      stroke: #ffffff !important; /* Color del icono */
      stroke-width: 2;  /* Lo grueso de la linea */
    }
  }

/* -------------------------------------------------------------------------------------------------------------
   -------------------------------------- FIN ITred Spa redes_s.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 
*/