:root {
    --primary-color: #FF8C00; /* Naranja original */
    --primary-darker: #D97300; /* Naranja oscuro para contraste */
    --secondary-color: #FFD700; /* Amarillo original */
    --secondary-darker: #E0B800; /* Amarillo oscuro para contraste */
    --accent-color: #FF1493; /* Fucsia */
    --text-color: #333;
    --bg-color: #FFF8E1; /* Crema claro */
    --dark-green: #1A681A; /* Verde oscuro para contraste */
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: var(--text-color);
    background-color: var(--bg-color);
}

.navbar {
    background-color: #ffffff !important;
    border-bottom: 3px solid var(--primary-color);
}

.navbar-brand img {
    transition: transform 0.3s ease;
}

.navbar-brand img:hover {
    transform: scale(1.1);
}

.nav-link {
    color: var(--dark-green) !important;
    font-weight: bold;
    position: relative;
    transition: color 0.3s;
}

.nav-link:hover, .nav-link.active, .nav-link:focus-visible {
    color: var(--primary-darker) !important;
    outline: none; /* Quitamos el outline por defecto para usar el nuestro */
}

.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--accent-color);
    transition: width 0.3s;
}

.nav-link:hover::after, .nav-link.active::after, .nav-link:focus-visible::after {
    width: 100%;
}

.carousel-item img {
    height: 60vh;
    object-fit: cover;
    filter: brightness(0.7);
}

.carousel-caption {
    background: rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    padding: 20px;
    /* Sombra para garantizar la legibilidad sobre cualquier imagen */
    text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
}
/* Ajustes para que el texto del carrusel se vea bien en móviles */
@media (max-width: 767px) {
    .carousel-caption {
        padding: 10px;
        bottom: 10px; /* Sube un poco el texto para que no quede tan abajo */
    }
    .carousel-caption h5 {
        font-size: 1.1rem; /* Reduce el tamaño del título */
    }
}

.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    transition: background-color 0.3s, transform 0.3s;
}

.btn-primary:hover, .btn-primary:focus-visible {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    transform: translateY(-2px);
    outline: 2px solid var(--accent-color); /* Añadimos un outline visible */
}

.btn-outline-warning {
    color: var(--secondary-darker);
    border-color: var(--secondary-darker);
}

.btn-outline-warning:hover, .btn-outline-warning:focus-visible {
    color: #fff;
    background-color: var(--secondary-darker);
    outline: 2px solid var(--secondary-darker);
}

/* Botón de color fucsia (accent) */
.btn-accent {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    color: white;
    transition: background-color 0.3s, transform 0.3s;
}

.btn-accent:hover, .btn-accent:focus-visible {
    background-color: #d11281; /* Un fucsia un poco más oscuro */
    border-color: #d11281;
    transform: translateY(-2px);
    outline: 2px solid #d11281;
}

footer {
    background: linear-gradient(to right, var(--dark-green), #165916);
}

footer .text-white {
    transition: color 0.3s;
}

footer a.text-white:hover, footer a.text-white:focus-visible {
    color: #ffffff !important; /* Mantenemos el blanco en hover para máxima legibilidad */
    text-decoration: underline; /* Subrayado para indicar foco */
}

/* Estilos para el banner de cookies */
#cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;  
  background-color: var(--dark-green);
  color: white;
  border-top: 2px solid var(--secondary-color);
  text-align: center;
  padding: 15px;
  z-index: 1050;
  font-size: 14px;
  display: none; /* oculto por defecto hasta que main.js lo muestre */
}

.cookie-text a {
  margin-left: 5px;
}

#cookie-banner a {
  color: var(--secondary-darker);
  text-decoration: underline;
}

.cookie-buttons {
  margin-top: 10px;
}

.cookie-btn {
  background-color: var(--primary-color);
  color: white;
  border: none;
  padding: 8px 20px;
  margin: 0 5px;
  cursor: pointer;
  border-radius: 5px;
  transition: background-color 0.3s;
}

.cookie-btn:hover, .cookie-btn:focus-visible {
  background-color: #FF4500;
  outline: 2px solid white;
  outline-offset: 2px;
}

/* Estilo de foco para el selector de idioma */
.dropdown-toggle:focus-visible {
    box-shadow: 0 0 0 0.25rem var(--primary-darker);
}


/* Estilos para la página Sobre Nosotros */
.team-img {
    border-radius: 50%;
    border: 5px solid var(--secondary-color);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* Estilos para la página de Servicios */
.service-card {
    border: none;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    transition: transform 0.3s;
}

.service-card:hover {
    transform: translateY(-10px);
}

.service-card .card-body {
    background-color: white;
}

.service-card .card-title {
    color: var(--primary-darker);
}

/* Estilos para la página de Contacto */
#map {
    height: 400px;
    border-radius: 15px;
    border: 3px solid var(--primary-color);
}

/* Estilos para la página de Galería */
.gallery-img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.gallery-img:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 16px rgba(0,0,0,0.25);
}

/* Aumenta el área táctil de los iconos de redes sociales */
.social-icon {
    display: inline-block;
    padding: 0.5rem; /* 8px de padding alrededor del icono */
    line-height: 1; /* Asegura que el padding no cree espacio extra vertical */
}