body {
            font-family: 'Inter', sans-serif;
            background-color: #f8fafc; /* Tailwind: bg-slate-50 */
            color: #334155; /* Tailwind: text-slate-700 */
        }
        .container-padding {
            padding-left: 1.5rem;
            padding-right: 1.5rem;
        }
        @media (min-width: 640px) {
            .container-padding {
                padding-left: 2rem;
                padding-right: 2rem;
            }
        }
        /* Colores personalizados basados en tu logo para un estilo coherente */
        .text-custom-data-dark { color: #3b3b3b; } /* 'D' 'a' del logo */
        .text-custom-data-teal { color: #528b8b; } /* 'T' del logo */
        .text-custom-data-purple { color: #8e6b9e; } /* 'a' del logo */
        .text-custom-data-pink { color: #e09990; } /* Otro 'a' del logo */
        .text-custom-data-orange { color: #e66f4b; } /* Parte del icono */
        .bg-custom-data-orange { background-color: #e66f4b; }
        .border-custom-data-orange { border-color: #e66f4b; }


html, body{
    margin: 0;
    padding: 0;
}


/*social media*/

/* Reset básico */
 

.social-icons {
    display: flex;
    list-style: none;
    gap: 20px; /* Espacio entre íconos */
}

.social-icons li {
    position: relative; /* Necesario para el tooltip */
}

.social-icons a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60px;
    height: 60px;
    background-color: rgba(255, 255, 255, 0.1); /* Fondo circular semitransparente */
    border-radius: 50%; /* Hace el contenedor circular */
    text-decoration: none;
    color: white; /* Color inicial del ícono */
    font-size: 24px;
    transition: all 0.3s ease; /* Transición suave para todos los cambios */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); /* Sombra sutil */
}

/* --- EFECTOS HOVER --- */

.social-icons a:hover {
    /* Escala el círculo completo al pasar el ratón */
    transform: translateY(-5px) scale(1.1);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    /* El color de fondo se toma del atributo data-color del HTML */
    background-color: var(--hover-color, white); 
}

/* Asignamos el color del atributo data-color a la variable CSS al hacer hover */
.social-icons a:hover[data-color] {
    --hover-color: attr(data-color color);
}

/* Cambiamos el color del ícono a blanco al hacer hover sobre el círculo */
.social-icons a:hover i {
    color: white;
}

/* --- TOOLTIP CON CSS (Opcional) --- */

.social-icons a::before {
    content: attr(data-tooltip); /* Toma el texto del atributo data-tooltip */
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 14px;
    opacity: 0; /* Oculto por defecto */
    visibility: hidden;
    transition: all 0.3s ease;
    white-space: nowrap;
}

/* Triangulito del tooltip */
.social-icons a::after {
    content: '';
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

/* Mostrar el tooltip al hacer hover */
.social-icons a:hover::before,
.social-icons a:hover::after {
    opacity: 1;
    visibility: visible;
    top: -50px; /* Pequeño movimiento hacia arriba */
}
.social-icons a:hover::after {
    top: -20px;
}



/* VINCULOS */

.link-parentesis {
  text-decoration: none;
  color: #2c3e50;
  font-weight: 600;
  position: relative;
  transition: color 0.3s, margin 0.3s;
}

.link-parentesis::before,
.link-parentesis::after {
  position: absolute;
  opacity: 0;
  transition: all 0.3s;
  color: #e74c3c; /* Color de los corchetes */
}

.link-parentesis::before {
  content: '[';
  left: -10px;
  transform: translateX(10px);
}

.link-parentesis::after {
  content: ']';
  right: -10px;
  transform: translateX(-10px);
}

.link-parentesis:hover {
  color: #e74c3c;
  margin: 0 10px; /* Hace espacio para los corchetes */
}

.link-parentesis:hover::before,
.link-parentesis:hover::after {
  opacity: 1;
  transform: translateX(0);
}