/* Estilos para body y html */
body, html {
    margin: 0; /* Elimina márgenes por defecto */
    padding: 0; /* Elimina padding por defecto */
    width: 100%; /* Asegura que ocupen todo el ancho */
    overflow-x: hidden; /* Evita el desplazamiento horizontal */
}

/* Estilos para el menú de navegación */
nav {
    background-color: blue; /* Fondo azul */
    margin: 0; /* Sin márgenes */
    border: none; /* Asegúrate de que no haya borde */
    display: flex;
    justify-content: space-between; /* Distribuye los elementos al extremo izquierdo y derecho */
    align-items: center; /* Alinea verticalmente los elementos */
    padding: 15px; /* Ajusta según necesites */

}

.menu {
    list-style-type: none;
    padding: 0;
    margin: 0; /* Asegúrate de que también aquí no haya márgenes */
}

.menu li {
    position: relative;
}

/* Estilos para el header */
header {
    background-color: transparent; /* Cambiar a transparente */
    color: white; /* Si decides mantenerlo */
    padding: 0; /* Sin padding */
    margin: 0; /* Sin márgenes */
    text-align: center; /* Centra el contenido si lo mantienes */
}

/* Estilo para el H1 dentro del header */
header h1 {
    margin: 0; /* Eliminar márgenes del H1 en el header */
}

/* Estilos y tamaño para los enlaces en el header */
header nav a {
    color: white; /* Color blanco para que el texto del enlace sea visible */
    text-decoration: none; /* Sin subrayado */
    font-weight: bold; /* Texto en negrita */
    font-size: 17px; /* Ajusta el tamaño de la fuente aquí */
}

header nav a:hover {
    text-decoration: underline; /* Subraya el enlace cuando el mouse pasa sobre él */
}
.menu li a,
.submenu li a {
    display: block;
    color: white; /* Mantiene el texto del menú principal en blanco */
    text-align: center;
    padding: 14px 20px;
    text-decoration: none;
    transition: background-color 0.3s;
    font-family: 'Nunito', sans-serif; /* Usa Nunito */
    font-weight: 700; /* Aplica negrita */
    
}

.menu li a:hover,
.submenu li a:hover {
    background-color: #111; /* Cambia este color al pasar el ratón, si lo prefieres diferente */
}

/* Estilos para el submenú */
.submenu {
    display: none;
    position: absolute;
    background-color: #444;
    min-width: 160px;
    list-style-type: none;
    padding: 0;
    margin: 0;
    z-index: 1000;
}

.menu li:hover .submenu {
    display: block;
}

/* Estilos para el hero */
.hero {
    background-image: url('../imagenes/Banner-Definitivo-Trámites-a-Distancia.webp');
    background-size: cover; /* Cubre toda el área del héroe */
    background-position: center; /* Centra la imagen */
    background-repeat: no-repeat; /* No repetir la imagen */
    margin: 0; /* Elimina márgenes */
    padding: 20px; /* Asegúrate de eliminar padding, si hay */
}

.hero-text {
    color: white; /* Color del texto */
    font-family: 'Nunito', sans-serif; /* Fuente utilizada */
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.8); /* Sombra del texto */
    text-align: left; /* Alineación a la izquierda */
    margin: 0; /* Asegura que no tenga margen */
    padding: 0; /* Asegura que no tenga padding */
}

.hero-text h1 {
    margin: 0;
    font-size: 50px; /* Tamaño del H1 */
    color: white; /* Asegura que el H1 sea blanco */
    font-family: 'Nunito', sans-serif; /* Aplica Nunito específicamente */
}

.hero-text p {
    margin-top: 10px; /* Espacio entre título y lema */
    font-size: 30px; /* Tamaño del lema */
    color: white; /* Asegura que el lema también sea blanco */
    font-family: 'Nunito', sans-serif; /* Aplica Nunito también aquí */
}

.hero-text p strong,
.hero-text p em,
.hero-text p strong em {
    color: white; /* Esto asegura que más allá de las reglas globales, la negrita/cursiva se mantengan en blanco */
}

/* Estilo para el contenedor principal */
.container {
    display: flex; /* Activar flexbox */
    flex-direction: column; /* Apilar elementos verticalmente */
    width: 100%; /* Cambiado a 100% para ocupar todo el ancho */
    max-width: 1200px; /* Ancho máximo */
    margin: 0 auto; /* Mantiene el centrado */
    padding: 0 15px; /* Espaciado interno */
    text-align: left; /* Asegura que el texto esté alineado a la izquierda */
    box-sizing: border-box; /* Incluir padding y borde en el ancho total */
}

/* Justificación para el texto y tamaño contenido común dentro del contenedor */
.container p,
.container ul,
.container ol {
    text-align: justify; /* Justifica el texto */
    margin: 10px 0; /* Margen para separación superior e inferior */
    font-size: 16px; /* Añadir aquí para ajustar el tamaño de la fuente */
}

/* Ajustes para los encabezados */
h1,
h2,
h3 {
    color: blue; /* Color azul para los encabezados */
    font-family: Arial, sans-serif;
    margin: 10px 0; /* Margen superior e inferior */
    text-align: left; /* Alinea los encabezados a la izquierda */
}

h1 {
    font-size: 24px; /* Tamaño para h1 */
}

h2 {
    font-size: 20px; /* Tamaño para h2 */
}

h3 {
    font-size: 18px; /* Tamaño para h3 */
}

/* Estilos específicos para el blog */
.blog-header h1,
.blog-header h2 {
    font-family: 'Nunito', sans-serif; /* Aplica Nunito a los títulos del blog */
    text-align: center; /* Centra los títulos */
    color: blue; /* Color azul como en el resto de la web */
}

.blog-blockquote {
    font-family: 'Nunito', sans-serif; /* Mantiene la fuente Nunito */
    font-size: 18px;
    text-align: center; /* Centra las citas */
    margin: 20px 0;
    color: #228B22; /* Verde fuerte */
    font-weight: bold; /* Negrita para mejor legibilidad */
}

.blog-header p {
    text-align: justify; /* Justifica el texto de los párrafos */

}

/* Estilo para las tablas */
.table-responsive {
    overflow-x: auto;  /* Permitir desplazamiento horizontal */
    -webkit-overflow-scrolling: touch; /* Desplazamiento suave en dispositivos táctiles */
}

table {
    width: 100%; /* Asegura que la tabla use todo el ancho disponible */
    border-collapse: collapse; /* Une los bordes de la tabla */
    margin: 0; /* Cambia el margen a cero */
    min-width: 300px; /* Añade un ancho mínimo para mantener legibilidad */
}

th, td {
    border: 1px solid #ddd; /* Borde de las celdas */
    padding: 10px; /* Espaciado interno en celdas */
    text-align: left; /* Alineación a la izquierda del texto */
}

th {
    background-color: #f0f0f0; /* Color del fondo del encabezado */
    color: #333; /* Color del texto del encabezado */
}

tr:nth-child(even) {
    background-color: #f9f9f9; /* Color de fondo para filas pares */
}

tr:hover {
    background-color: #f1f1f1; /* Resaltado en fila al pasar el mouse */
}

/* Estilos para las negritas */
strong {
    color: blue; /* Color azul para el texto en negrita */
}

/* Estilos para los enlaces */
a {
    color: blue; /* Color azul para los enlaces */
    text-decoration: none; /* Quita el subrayado predeterminado de los enlaces */
}

a:hover {
    text-decoration: underline; /* Subraya el enlace cuando el mouse pasa sobre él */
}

strong a {
    color: green; /* Cambia el color de los enlaces dentro de negritas a verde */
    text-decoration: underline; /* Siempre subrayados para mayor visibilidad */
}

/* También puedes definir un cambio de color al pasar el mouse si prefieres */
strong a:hover {
    color: darkgreen; /* Cambia el color al pasar el mouse */
}

/* Media queries para dispositivos móviles */
@media screen and (max-width: 768px) {
    body {
        font-size: 14px !important; /* Tamaño mínimo de fuente en dispositivos móviles */
    }

    h1 {
        font-size: 20px !important; /* Aumentar tamaño de h1 en móviles */
    }

    h2 {
        font-size: 18px !important; /* Aumentar tamaño de h2 en móviles */
    }

    h3 {
        font-size: 16px !important; /* Aumentar tamaño de h3 en móviles */
    }

    /* Ajustes para h1 y p en el hero */
    .hero-text h1 {
        font-size: 28px !important; /* Ajustar el tamaño de h1 para móvil */
    }

    .hero-text p {
        font-size: 20px !important; /* Ajustar el tamaño del lema para móvil */
    }

    .container {
        padding: 0 20px; /* Aumentar el espaciado a los lados para mayor margen */
        width: 100%; /* Asegura que el contenedor ocupe todo el ancho disponible */
        max-width: 100%; /* Evita que el contenedor exceda el ancho de la pantalla */
        box-sizing: border-box; /* Asegura que el padding esté incluido en el ancho total */
    }

    img {
        max-width: 100%; /* Asegura que las imágenes se escalen correctamente */
        height: auto; /* Mantiene la proporción de las imágenes */
        display: block; /* Asegura que las imágenes se comporten correctamente en bloques */
        margin: 0 auto; /* Centra la imagen en su contenedor */
    }

    button {
        width: auto; /* Asegura que los botones se ajusten al contenido */
        max-width: 100%; /* Asegura que no excedan el ancho del contenedor */
        padding: 10px; /* Espaciado interno para botones */
        margin: 5px; /* Espaciado entre botones */
        font-size: 14px; /* Tamaño de fuente de los botones */
    }

    footer {
        padding: 10px 0; /* Cambiar padding a 10px en móviles */
        text-align: center; /* Centrar el contenido */
    }
}

/* Ajuste para dispositivos muy pequeños */
@media screen and (max-width: 480px) {
    body {
        font-size: 14px !important; /* Recuerda mantener un tamaño de fuente mínimo */
    }

    h1 {
        font-size: 20px !important; /* Tamaño ajustado para h1 */
    }

    h2 {
        font-size: 18px !important; /* Tamaño ajustado para h2 */
    }

    h3 {
        font-size: 16px !important; /* Tamaño ajustado para h3 */
    }

    /* Ajustes para h1 y p en el hero */
    .hero-text h1 {
        font-size: 26px !important; /* Ajustar el tamaño de h1 para pantallas más pequeñas */
    }

    .hero-text p {
        font-size: 18px !important; /* Ajustar el tamaño del lema para pantallas más pequeñas */
    }

    .container {
        padding: 0 15px; /* Mantener un espaciado adecuado en pantallas más pequeñas */
        width: 100%; /* Asegura que ocupe todo el ancho disponible */
        max-width: 100%; /* Mantener dentro de la pantalla */
    }

    button {
        font-size: 12px; /* Ajustar el tamaño de fuente de los botones en pantallas pequeñas */
    }
}

/* Media Queries para Ajustes en Móviles */
@media screen and (max-width: 768px) {
    .video-container {
        padding-bottom: 75%; /* Ajusta la relación de aspecto si es necesario */
    }
}

@media screen and (max-width: 480px) {
    .video-container {
        padding-bottom: 85%; /* Ajusta la relación de aspecto para pantallas pequeñas */
    }
}
    /* Ajustes para la sección de Newsletter */
    .newsletter-section {
        margin-top: 30px; /* Menos margen en móviles para mayor cercanía */
        padding: 10px; /* Ajustar padding para un diseño compacto */
    }
    
    @media (max-width: 768px) {
    table {
        width: 100%; /* Asegura uso total del ancho disponible */
        min-width: auto; /* Permite que la tabla se ajuste a su contenido */
    }

    th, td {
        padding: 5px; /* Reduce el padding en pantallas pequeñas */
    }
}


/* Ajuste global para todas las imágenes */
img {
    max-width: 800px; /* Limita el ancho a 800px */
    width: 100%; /* La imagen ocupará todo el ancho del contenedor si es más pequeño que 800px */
    height: auto; /* La altura se ajustará automáticamente para mantener la proporción */
    display: block;
    margin: 0 auto; /* Centra la imagen horizontalmente en su contenedor */
}

/* Nuevos estilos para el área de juego y la pelota */
#gameArea {
    width: 100%; /* Para que el área se adapte al espacio disponible */
    max-width: 600px;
    height: 200px;
    border: 2px solid black;
    position: relative;
    margin: 20px auto;
    background-color: #f0f0f0;
    overflow: hidden; /* Evita que el contenido salga fuera del contenedor */
}

#ball {
    width: 40px;
    height: 40px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    top: 80px; /* Centra verticalmente */
    left: 0;
    z-index: 1; /* Asegura que la pelota está detrás del muro */
}

#wall {
    width: 80px; /* Tamaño del muro */
    height: 100%; /* Debe coincidir con la altura del área de juego */
    background-color: blue;
    position: absolute;
    left: calc(50% - 40px); /* Coloca el muro en el medio del área de juego */
    z-index: 2; /* Asegura que el muro está delante de la pelota */
}

#gameEndLine {
    width: 100px; /* Ancho modificado para cubrir el texto "STOP" */
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    background-color: red; /* Color de la línea */
    z-index: 0; /* Asegura que esta línea roja está detrás del texto "STOP" */
}

#stopText {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    writing-mode: vertical-lr; /* Texto vertical */
    font-family: Arial, sans-serif; /* Fuente Arial */
    color: white; /* Color cambiado a blanco para resaltar sobre la línea roja */
    font-size: 24px; /* Tamaño de fuente */
    font-weight: bold; /* Texto en negrita para mejor visibilidad */
    z-index: 1; /* Asegura que el texto esté encima de la línea roja */
}

#startButton, #stopButton {
    margin: 10px;
    padding: 10px 20px;
    font-size: 16px;
    display: inline-block;
}

#message {
    text-align: center;
    font-size: 18px;
    margin-top: 20px;
}

/* Estilos del footer */
footer {
    position: relative; /* Permite un mejor control de la posición */
    bottom: 0; /* Asegura que esté al final de la página */
    width: 100%; /* Asegura que ocupe todo el ancho */
    background-color: #333; /* Color de fondo */
    color: white; /* Color del texto */
    text-align: center; /* Centro de texto */
    padding: 10px 0; /* Espaciado interno - se puede ajustar según se necesite */
    font-weight: bold; /* Aumentar el grosor de la fuente */
    font-size: 14px; /* Ajustar tamaño de texto del footer */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Sombra del texto */
    z-index: 10; /* Mantiene el footer por encima de otros elementos */
    margin: 0; /* Asegúrate de eliminar márgenes en el footer */
}

/* Enlace del footer */
footer a {
    color: #fff; /* Color de enlace */
    text-decoration: none; /* Sin subrayado */
    margin: 0 10px; /* Espaciado horizontal entre enlaces */
    font-weight: bold; /* Aumentar el grosor de la fuente */
}

footer a:hover {
    color: #ddd; /* Color de enlace en hover */
}

/* Estilos para la sección de comentarios */
.comments-section {
    margin: 20px 0; /* Espaciado superior e inferior */
    padding: 15px;
    border: 1px solid #ccc; /* Bordes alrededor del contenedor */
    border-radius: 5px; /* Bordes redondeados */
}

.comments-section h2 {
    text-align: center; /* Centra el título */
}

.comments-section form {
    display: flex;
    flex-direction: column; /* Alinea los elementos verticalmente */
}

.comments-section label {
    margin: 5px 0; /* Espaciado entre etiquetas */
}

.comments-section input, 
.comments-section textarea {
    padding: 10px;
    margin-bottom: 15px; /* Espaciado inferior */
    border: 1px solid #ccc; /* Bordes de los campos */
    border-radius: 4px; /* Bordes redondeados para los campos */
}

.comments-section button {
    align-self: center; /* Centra el botón */
    padding: 10px 20px; /* Espaciado interno del botón */
    background-color: blue; /* Color de fondo del botón */
    color: white; /* Color del texto */
    border: none; /* Sin bordes */
    border-radius: 4px; /* Bordes redondeados del botón */
    cursor: pointer; /* Cambia el cursor para indicar clic */
}

/* Estilos para la sección de newsletter */
.newsletter-section {
    margin: 20px 0; /* Espaciado superior e inferior */
    padding: 15px;
    border: 1px solid #ccc; /* Bordes alrededor del contenedor */
    border-radius: 5px; /* Bordes redondeados */
}

.newsletter-section h2 {
    text-align: center; /* Centra el título */
}

.newsletter-section form {
    display: flex;
    flex-direction: column; /* Alinea los elementos verticalmente */
}

.newsletter-section label {
    margin: 5px 0; /* Espaciado entre etiquetas */
}

.newsletter-section input {
    padding: 10px;
    margin-bottom: 15px; /* Espaciado inferior */
    border: 1px solid #ccc; /* Bordes de los campos */
    border-radius: 4px; /* Bordes redondeados para los campos */
}

.newsletter-section button {
    align-self: center; /* Centra el botón */
    padding: 10px 20px; /* Espaciado interno del botón */
    background-color: blue; /* Color de fondo del botón */
    color: white; /* Color del texto */
    border: none; /* Sin bordes */
    border-radius: 4px; /* Bordes redondeados del botón */
    cursor: pointer; /* Cambia el cursor para indicar clic */
}

/* Estilos para el menú hamburguesa */
nav {
    position: relative; /* Necesario para la posición del menú */
}

#menu-toggle {
    display: none; /* Oculta el checkbox que controla el menú */
}

.menu-icon {
    display: none; /* Oculta el botón en pantallas grandes */
    cursor: pointer; /* Cambia el cursor al pasar */
    z-index: 10; /* Asegura que esté encima de otros elementos */
}

/* Mostrar el botón de menú hamburguesa solo en pantallas pequeñas */
@media (max-width: 767px) {
    .menu-icon {
        display: flex; /* Muestra el botón en dispositivos móviles */
        align-items: center; /* Centra verticalmente el contenido */
        justify-content: center; /* Centra horizontalmente el contenido */
        width: 40px; /* Ancho fijo del botón */
        height: 40px; /* Alto fijo del botón */
        background: none; /* Sin fondo */
        border: none; /* Sin borde */
    }
}

/* Estilos para el menú desplegable */
.menu {
    display: flex;
    flex-direction: column; /* Vertical en móviles */
    justify-content: center;
    align-items: center; 
    position: absolute; /* Superpone sobre otros elementos */
    top: 124px; /* Debajo del encabezado */
    left: 0;
    right: 0;
    background-color: #444; /* Color de fondo del menú */
    margin: 0;
    opacity: 0; /* Oculto por defecto */
    visibility: hidden; /* Previene interferencia */
    transition: opacity 0.3s ease, visibility 0.3s ease; /* Suaviza la transición */
    z-index: 5; /* Mantiene el menú al frente */
}

/* Mostrar menú cuando el checkbox está marcado */
#menu-toggle:checked ~ .menu {
    opacity: 1; /* Muestra el menú */
    visibility: visible; /* Hace visible el menú */
}

/* Estilos para pantallas grandes */
@media ( min-width: 768px ) {
    .menu {
        display: flex; /* Muestra en fila en pantallas grandes */
        flex-direction: row; /* Horizontal en pantallas grandes */
        position: static; /* Coloca en el flujo normal de la página */
        opacity: 1; /* Siempre visible */
        visibility: visible; /* Siempre visible */
        background-color: transparent; /* Sin fondo */
    }

    .menu-icon {
        display: none; /* Asegura que el ícono no se muestre en pantallas grandes */
    }
}

/* Modificaciones realizadas por David 18/03/2025 */

.logo img { width:200px; }

@media (max-width: 768px) {
    nav {
        flex-direction: column; /* Apila los elementos en columna */
        align-items: center; /* Centra el logo y el menú */
        text-align: center;
    }

    .menu-icon {
        display: block; /* Mostrar el icono */
        position: absolute;
        font-size:34px;
        left: 20px; /* Fijarlo a la izquierda */
        top: 50%;
        transform: translateY(-50%);
    }

    .menu {
        flex-direction: column; /* Hace que los elementos de la lista estén en columna */
        gap: 10px;
        margin-top: 10px;
    }
}

/* Contenedor principal */
.row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* Espaciado entre columnas */
}

/* Clases de columnas */
.col-2 { flex: 0 0 calc(16.66% - 10px); }
.col-3 { flex: 0 0 calc(25% - 10px); }
.col-4 { flex: 0 0 calc(33.33% - 10px); }
.col-6 { flex: 0 0 calc(50% - 10px); }

/* Ajuste para pantallas pequeñas */
@media (max-width: 768px) {
    .col-2, .col-3, .col-4, .col-6 {
        flex: 0 0 100%; /* Las columnas ocupan todo el ancho */
    }
}

/* Tarjetas */
.card {
    border-radius: 8px;
    padding: 15px;
}

/* Imagen dentro de la tarjeta */
.card img {
    width: 100%;
    border-radius: 8px;
    margin-bottom: 10px;
}

/* Estilos del título */
.card h3 {
    color: #ffffff;
    font-size: 18px;
    margin: 10px 0;
}

/* Estilos del texto */
.card p {
    font-size: 14px;
    color: #555;
}

/* Estilos del enlace */
.card a {
    display: inline-block;
    margin-top: 10px;
    text-decoration: none;
    color: #ffffff;
    font-weight: bold;
}

.card a:hover {
    text-decoration: underline;
}