/* Estilos para mejorar la accesibilidad */

/* Clase auxiliar para elementos visualmente ocultos pero accesibles para lectores de pantalla */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* Mejoras de foco para todos los elementos interactivos */
a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus,
.tab:focus {
    outline: 2px solid var(--color-secondary);
    outline-offset: 2px;
}

/* Asegurar alto contraste para el texto */
.sobre-mi-texto p,
.contacto-form label,
.section-header h2 {
    color: #222; /* Asegurar suficiente contraste */
}

/* Estilos específicos para las tarjetas de servicios con accesibilidad mejorada */
.servicio-card-accesible {
    background-color: rgba(20, 40, 22, 0.9); /* Fondo ligeramente más oscuro para mejor contraste */
    border: 1px solid rgba(178, 141, 81, 0.4); /* Borde dorado sutil */
}

.servicio-card-accesible p {
    color: #ffffff; /* Color blanco puro para máximo contraste */
    font-weight: 500; /* Peso de fuente más fuerte para mejor legibilidad */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); /* Sombra de texto mejorada */
    font-size: 1.05rem; /* Tamaño de texto ligeramente mayor */
    line-height: 1.6; /* Mejor espaciado entre líneas para legibilidad */
    margin-bottom: 25px; /* Más espacio antes del botón */
}

.servicio-card-accesible h3 {
    color: #b28d51; /* Color dorado específico para los títulos */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); /* Sombra para mejor contraste */
    font-size: 1.6rem; /* Tamaño ligeramente mayor */
    margin-bottom: 18px; /* Más espacio después del título */
}

/* Mejorar contraste de botones en las tarjetas de servicio */
.servicio-card-accesible .btn-secondary {
    border: 2px solid #b28d51; /* Borde dorado explícito */
    color: #b28d51; /* Color de texto dorado */
    font-weight: 600; /* Texto más grueso */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Sombra sutil */
    padding: 10px 20px; /* Padding ligeramente mayor */
}

.servicio-card-accesible .btn-secondary:hover {
    background-color: #b28d51;
    color: #1a2c1b; /* Color oscuro para máximo contraste */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Sombra aumentada en hover */
}

/* Mejorar los iconos en las tarjetas de servicios */
.servicio-card-accesible .servicio-icon {
    font-size: 2.8rem; /* Icono más grande */
    margin-bottom: 25px; /* Más espacio debajo del icono */
    color: #d4af7a; /* Dorado más brillante para los iconos */
    text-shadow: 0 2px 8px rgba(178, 141, 81, 0.4); /* Brillo sutil */
}

/* Mejorar el contraste para textos en fondos oscuros */
.hero-content h1,
.hero-content p,
footer p {
    text-shadow: 0 0 8px rgba(0, 0, 0, 0.8);
}

/* Estilos para el botón hamburguesa medieval */
.menu-medieval {
    background: transparent;
    border: 2px solid var(--color-secondary);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: none; /* Oculto por defecto */
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 0 0 10px rgba(178, 141, 81, 0.3);
    transition: all 0.3s ease;
    padding: 0;
}

.menu-medieval:hover, .menu-medieval:focus {
    transform: rotate(90deg);
    box-shadow: 0 0 15px rgba(178, 141, 81, 0.5);
}

.medieval-menu-icon {
    color: var(--color-secondary);
    font-size: 1.2rem;
}

.menu-medieval.active {
    background-color: rgba(178, 141, 81, 0.2);
    transform: rotate(90deg);
}

@media (max-width: 768px) {
    .menu-medieval {
        display: flex; /* Solo visible en pantallas pequeñas */
    }
}

/* Aumentar tamaño del texto en elementos importantes para facilitar la lectura */
body {
    font-size: 16px;
    line-height: 1.6;
}

/* Asegurar que los botones son reconocibles */
.btn-primary,
.tab {
    cursor: pointer;
}

/* Mejorar accesibilidad de tablas */
table {
    border-collapse: collapse;
    width: 100%;
}

th {
    text-align: left;
}

/* Mejoras para imágenes */
img {
    max-width: 100%;
    height: auto;
}

/* Skip link para saltar directamente al contenido principal */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--color-primary);
    color: white;
    padding: 8px;
    z-index: 100;
}

.skip-link:focus {
    top: 0;
}