:root {
     --primary-color: #2563eb;
     --facebook-color: #1877f2;
     --mail-color: #ea4335;
     --phone-color: #34a853;
     --text-white: #ffffff;
 }

 body {
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     height: 2000px;
     /* Solo para permitir scroll y ver el efecto flotante */
 }

 /* Contenedor Principal */
 .ctc-container {
     position: fixed;
     bottom: 30px;
     left: 30px;
     z-index: 1000;
     display: flex;
     flex-direction: column-reverse;
     align-items: center;
 }

 /* Tooltip / Alertita "Contact us" */
 .ctc-alert {
     position: absolute;
     left: 70px;
     bottom: 15px;
     background: #ffbb00;
     color: white;
     padding: 5px 12px;
     border-radius: 8px;
     font-size: 14px;
     white-space: nowrap;
     opacity: 1;
     transition: opacity 0.3s;
     pointer-events: none;
 }

 .ctc-alert::before {
     content: "";
     position: absolute;
     left: -5px;
     top: 50%;
     transform: translateY(-50%);
     border-top: 5px solid transparent;
     border-bottom: 5px solid transparent;
     border-right: 5px solid #ffbb00;
 }

 /* Botón Principal */
 .ctc-main-btn {
     width: 60px;
     height: 60px;
     border-radius: 50%;
     background-color: var(--primary-color);
     color: white;
     border: none;
     cursor: pointer;
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 24px;
     transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }

 .ctc-main-btn.active {
     transform: rotate(45deg);
     background-color: #ffbb00;
 }

 /* Botones Secundarios (Ocultos por defecto) */
 .ctc-sub-buttons {
     display: flex;
     flex-direction: column;
     gap: 15px;
     margin-bottom: 20px;
     opacity: 0;
     pointer-events: none;
     transform: translateY(20px);
     transition: all 0.3s ease;
 }

 .ctc-sub-buttons.show {
     opacity: 1;
     pointer-events: auto;
     transform: translateY(0);
 }

 .ctc-btn {
     width: 50px;
     height: 50px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     color: white;
     text-decoration: none;
     font-size: 20px;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
     transition: transform 0.2s;
 }

 .ctc-btn:hover {
     transform: scale(1.1);
 }

 /* Colores específicos */
 .btn-phone {
     background-color: var(--phone-color);
 }

 .btn-fb {
     background-color: var(--facebook-color);
 }

 .btn-mail {
     background-color: var(--mail-color);
 }

 .btn-google {
     background: #ffffff;
     color: #4285F4;
 }

 .btn-ins {
     background-color: pink;
 }

 /* Ocultar la alertita cuando el menú está abierto */
 .hide-alert {
     opacity: 0 !important;
 }