.card-custom-1 h5 a .subtitle {
    display: block;        /* Para que baje a una nueva línea */
    font-size: 1rem;     /* Un tamaño más pequeño que el título */
    font-weight: 400;      /* Menos grosor para crear contraste visual */
    text-transform: none;  /* Por si el h5 tiene mayúsculas */
    margin-top: 5px;       /* Espaciado con el texto de arriba */
    opacity: 0.8;          /* Un toque de transparencia para jerarquía */
}


.extra-content-box .inner-box li.two h5 a:link {
    color: #ffffff !important;
}


.extra-content-box .inner-box li.two h5 a:hover {
    color: #ffffff !important;
    text-decoration: underline; /* Opcional, por si quieres que se raye */
}

/* Color base de los enlaces en el footer */
.enlaces_footer ul li a {
    color: rgba(255, 255, 255, 0.8); /* Un blanco suave para que no brille tanto como el título */
    text-decoration: none;           /* Quita el subrayado por defecto */
    transition: all 0.3s ease;       /* Hace que el cambio de color sea fluido */
}

/* Color cuando pasas el mouse (Hover) */
.enlaces_footer ul li a:hover {
    color: #279646;                  /* Blanco total al pasar el mouse */
    padding-left: 5px;               /* Opcional: un pequeño desplazamiento a la derecha */
}


/* BOTONES */
/* --- CONTENEDOR PRINCIPAL --- */
#side-buttons {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 180px; /* Bloquea el espacio para que nada salte */
    align-items: flex-end; /* Ancla todo a la derecha */
    padding: 0;
    margin: 0;
}

/* --- ESTILO BASE BOTONES --- */
.btn-side {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 12px 15px;
    width: 50px; /* Estado inicial (icono solo) */
    height: 50px;
    color: white !important;
    text-decoration: none !important;
    border-radius: 30px 0 0 30px;

    /* Animación fluida de expansión */
    transition: width 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
    overflow: hidden;
    cursor: pointer;
    white-space: nowrap;
    box-sizing: border-box;

    /* Animación de entrada inicial (Staggered) */
    opacity: 0;
    transform: translateX(50px);
}

/* --- ANIMACIÓN DE ENTRADA (CLASE .is-visible) --- */
#side-buttons.is-visible .btn-side {
    opacity: 1;
    transform: translateX(0);
    transition: opacity 0.5s ease, transform 0.5s ease, width 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* Tiempos de entrada escalonados */
#side-buttons .btn-whatsapp { transition-delay: 0.1s; }
#side-buttons .btn-call     { transition-delay: 0.3s; }
#side-buttons .btn-email    { transition-delay: 0.5s; }

/* --- ESTADO HOVER (EXPANSIÓN) --- */
.btn-side:hover {
    width: 100% !important; /* Se expande solo este botón */
}

/* --- TEXTO DENTRO DEL BOTÓN --- */
.btn-side span {
    margin-left: 15px;
    opacity: 0;
    pointer-events: none;
    /* Retraso para que el texto aparezca cuando el botón ya se movió */
    transition: opacity 0.2s ease 0.2s;
}

.btn-side:hover span {
    opacity: 1 !important;
}

/* --- ICONOS (SIEMPRE VISIBLES) --- */
.btn-side i {
    font-size: 20px;
    opacity: 1 !important;
    margin: 0;
    min-width: 20px; /* Asegura que el icono no se contraiga */
}

/* --- COLORES --- */
.btn-whatsapp { background-color: #25D366; }
.btn-call     { background-color: #007bff; }
.btn-email    { background-color: #ff4757; }
/* END BOTONES */


.capitalizar{ text-transform: capitalize;}
.justificado{ text-align: justify;}


.phone-item {
  display: flex;         /* Pone el label y el wrapper en la misma línea */
  list-style: none;
  font-family: sans-serif;
}

.label {
  font-weight: bold;
  margin-right: 5px;    /* Espacio entre "Teléfonos:" y el número */
}

.numbers-wrapper {
  display: flex;
  flex-direction: column; /* Apila los números uno sobre otro */
  align-items: flex-start; /* Alinea los números a la izquierda de su propio bloque */
}

.numbers-wrapper a {
  text-decoration: none;
  color: #000; /* Ajusta al color de tu sitio */
}

/* DEVELOPED BY ----------------------- */
.brand{
	margin-top: 30px;
}
#alvatech-content{
	width: 100%;
	height: 30px;
	text-align:right;
  margin-top:30px;
}
#alvatech {
	background: url("../img/logos/alva_brand.png") no-repeat scroll right center transparent;
	display: inline-block;
	height: 30px;
	transition: all 500ms ease 0s;
	width: 125px;
}
#alvatech:hover {
	height: 30px;
	width:250px;
}
/* END DEVELOPED BY ----------------------- */