/* === CONTENEDOR DE LA TARJETA === */ .tarjeta-horario-dacapo { background-color: rgba(20, 20, 20, 0.85); /* Fondo oscuro semitransparente */ width: 90%; /* Ocupa casi todo el ancho de su contenedor padre */ margin: 5% auto; /* Centrado automático con margen superior e inferior */ padding: 8%; /* Relleno interno fluido */ border-radius: 4%; /* Esquinas suavemente redondeadas */ box-sizing: border-box; box-shadow: 0 4% 8% rgba(0, 0, 0, 0.5); /* Sombra suave escalable */ border-top: thick solid #f6931d; /* Acento naranja en la parte superior */ font-family: 'Montserrat', sans-serif; } /* === TÍTULO === */ .tarjeta-horario-dacapo h3 { text-align: center; color: #fff691; /* Tono dorado/crema */ font-size: 140%; /* Texto escalable */ text-transform: uppercase; font-weight: 800; margin-top: 0; margin-bottom: 8%; letter-spacing: 0.1em; } /* === FILAS DE LOS DÍAS === */ .fila-dia { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 3% 0; border-bottom: thin solid rgba(255, 246, 145, 0.15); /* Línea separadora sutil */ font-size: 105%; /* Letra ligeramente mayor a la base */ transition: background-color 0.3s ease; } /* Quitar la línea inferior al último día */ .fila-dia:last-child { border-bottom: none; padding-bottom: 0; } /* Efecto al pasar el ratón (Hover) */ .fila-dia:hover { background-color: rgba(246, 147, 29, 0.1); /* Brillo naranja muy suave */ padding-left: 2%; /* Pequeño desplazamiento interactivo */ padding-right: 2%; border-radius: 2%; } /* === ESTILOS DEL TEXTO (DÍAS Y HORAS) === */ .nombre-dia { width: 30%; /* El día ocupa una tercera parte */ font-weight: 700; color: #f6931d; /* Naranja corporativo */ } .horas-dia { width: 65%; /* Las horas ocupan el resto */ text-align: right; color: #ffffff; /* Blanco puro para máxima legibilidad */ font-weight: 500; } /* Destacar los fines de semana con un color distinto */ .fila-dia.finde .nombre-dia { color: #fff691; /* Dorado para viernes, sábado y domingo */ } /* Ajustes específicos para móviles */ @media (max-width: 600px) { .tarjeta-horario-dacapo { width: 100%; /* En móvil ocupa todo el ancho disponible */ padding: 10%; } .nombre-dia { width: 35%; } .horas-dia { width: 60%; font-size: 95%; /* Reducimos un pelín la letra de las horas en móvil */ } }