/* Permite que el documento pueda ocupar toda la altura disponible. */
html {
	min-height: 100%;
}

/* Layout vertical de toda la página; margin: 0 elimina el borde blanco del navegador. */
body {
	display: flex;
	min-height: 100vh;
	flex-direction: column;
	margin: 0;
    font-family: "Segoe UI", sans-serif;
}

/* Hace que el contenido principal crezca y empuje el footer hacia abajo en páginas cortas. */
main {
	flex: 1;
}

/* Deja espacio para la navegación fija cuando se llega a una sección por ancla. */
main > section[id] {
	scroll-margin-top: 76px;
}

/* Compensa la barra fija únicamente en la página de privacidad. */
.pagina-privacidad main {
	padding-top: 68px;
}

@media (max-width: 760px) {
	.pagina-privacidad main {
		padding-top: 60px;
	}
}

.privacidad {
	max-width: 900px;
	margin: 0 auto;
	padding: 40px 24px 56px;
	color: #333;
	line-height: 1.7;
}

.privacidad h1 {
	margin: 0 0 12px;
	color: #922149;
	font-size: clamp(2rem, 5vw, 2.75rem);
	line-height: 1.2;
}

.privacidad h2 {
	margin: 28px 0 8px;
	color: #303030;
	font-size: 1.2rem;
}

.privacidad p,
.privacidad ol {
	margin: 0 0 16px;
}

.privacidad ol {
	padding-left: 24px;
}

.privacidad a {
	color: #922149;
	text-underline-offset: 3px;
}

.privacidad a:hover,
.privacidad a:focus-visible {
	color: #671431;
}

/*Imagen de presidencia se pone como fondo*/
#inicio{
    background-image: url("../img/presidencia.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    
}

/*Titulo Operadora Municipal de estacionamientos de juarez*/
#titulo-inicio{
    position:relative;
    max-width:1000px;
    margin:20px 20px 0;
    padding:22px 30px 34px;
    border-radius:12px;
    background-color:rgba(20, 20, 20, 0.48);
    color:#fff;
    font-size:clamp(2.25rem, 5vw, 3.5rem);
    font-weight:700;
    line-height:1.15;
    text-align:center;
    text-shadow:0 2px 8px rgba(0, 0, 0, 0.7);
    letter-spacing:1px;
}

#titulo-inicio::after{
    position:absolute;
    bottom:14px;
    left:50%;
    width:72px;
    height:4px;
    border-radius:4px;
    background-color:#922149;
    content:"";
    transform:translateX(-50%);
}

/*seccion Descripción OMEJ*/
#omej{
    background-color:white;
    text-align:center;
     padding:60px 20px;
     
}

#titulo-omej{
    display:table;
    max-width:100%;
    margin:0 auto 30px;
    padding:8px 20px;
    border-radius:8px;
    background-color:#922149;
    color:white;
    font-size:40px;
    font-weight:700;
    letter-spacing:2px;
}

#omej p{
    font-size:20px;
    line-height:1.6;
    max-width:900px;
    margin:auto;
    color:#444;
}

/*Seccion Ubicanos*/
#ubicaciones{
    background-image: url("../img/lax.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    text-align:center;
    padding:60px 20px;
}
#titulo-ubicaciones{
    font-size:40px;
    font-weight:700;
    margin-bottom:30px;
    letter-spacing:2px;
    color:white;
    text-shadow:
        -1px -1px 0 black,
         1px -1px 0 black,
        -1px  1px 0 black,
         1px  1px 0 black;
}

#ubicaciones p{
    font-size:20px;
    line-height:1.6;
    max-width:900px;
    margin:auto;
    color:white;
    text-shadow:
        -1px -1px 0 black,
         1px -1px 0 black,
        -1px  1px 0 black,
         1px  1px 0 black;
}

#ubicaciones a{
    padding: 10px;
    margin-top: 20px;
    display: inline-block;
    border-radius: 5px;
    border: 2px solid #fff;
    text-decoration:none;
    background-color:#922149;
    color:white;
    font-weight:bold;
}

#ubicaciones a:hover{
    background-color:#a72855;
}
/*Seccion Noticias*/
#noticias{
    background-color:white;
    text-align:center;
    padding:60px 20px;
}

#titulo-noticias{
    font-size:40px;
    font-weight:700;
    margin-bottom:30px;
    letter-spacing:2px;
}

#noticias .noticias__introduccion{
    font-size:20px;
    line-height:1.6;
    max-width:900px;
    margin:auto;
    color:#444;
}

.noticias__carrusel{
    max-width:900px;
    margin:30px auto 0;
}

.noticias__carrusel:focus-visible{
    outline:3px solid #922149;
    outline-offset:6px;
}

.noticias__articulo{
    display:flex;
    flex-direction:column;
    align-items:center;
}

.noticias__medio{
    display:block;
    width:100%;
    max-height:520px;
    aspect-ratio:16 / 9;
    margin:0 auto 20px;
    border-radius:10px;
    background-color:#f2f2f2;
    object-fit:contain;
}

.noticias__medio[src],
.servicios__medio[src] {
    cursor: zoom-in;
}

.visor-imagenes-abierto {
    overflow: hidden;
}

.visor-imagenes {
    width: 100vw;
    height: 100vh;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 24px;
    border: 0;
    background: transparent;
}

.visor-imagenes::backdrop {
    background: rgba(0, 0, 0, 0.88);
}

.visor-imagenes[open] {
    display: flex;
    justify-content: center;
    align-items: center;
}

.visor-imagenes__imagen {
    max-width: min(92vw, 1400px);
    max-height: 92vh;
    object-fit: contain;
}

.visor-imagenes__cerrar {
    position: fixed;
    top: 18px;
    right: 18px;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    color: #222;
    cursor: pointer;
    font-size: 34px;
    line-height: 36px;
    z-index: 1;
}

.noticias__video-contenedor{
    position:relative;
    width:100%;
}

.noticias__boton-reproduccion{
    position:absolute;
    top:50%;
    left:50%;
    display:inline-flex;
    width:72px;
    height:72px;
    justify-content:center;
    align-items:center;
    padding:0;
    border:3px solid white;
    border-radius:50%;
    background-color:rgba(146, 33, 73, 0.92);
    color:white;
    cursor:pointer;
    font-size:34px;
    line-height:1;
    transform:translate(-50%, -50%);
    box-shadow:0 4px 18px rgba(0, 0, 0, 0.35);
}

.noticias__boton-reproduccion[hidden]{
    display:none;
}

.noticias__boton-reproduccion:hover{
    background-color:#922149;
}

.noticias__boton-reproduccion:focus-visible{
    outline:3px solid #303030;
    outline-offset:4px;
}

.noticias__boton-sonido{
    position:absolute;
    top:12px;
    right:12px;
    display:inline-flex;
    justify-content:center;
    align-items:center;
    width:44px;
    height:44px;
    padding:0;
    border:2px solid white;
    border-radius:50%;
    background-color:rgba(0, 0, 0, 0.75);
    color:white;
    cursor:pointer;
    font-size:22px;
}

.noticias__boton-sonido:hover{
    background-color:#922149;
}

.noticias__boton-sonido:focus-visible{
    outline:3px solid #922149;
    outline-offset:3px;
}

.noticias__subtitulo{
    margin:0 0 12px;
    color:#303030;
    font-size:clamp(1.3rem, 3vw, 1.8rem);
}

#noticias .noticias__descripcion{
    margin:0 auto;
    color:#444;
    font-size:18px;
    line-height:1.6;
}

.noticias__controles{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:20px;
    margin-top:22px;
}

.noticias__boton{
    display:inline-flex;
    justify-content:center;
    align-items:center;
    width:44px;
    height:44px;
    border:0;
    border-radius:50%;
    background-color:#922149;
    color:white;
    cursor:pointer;
    font-size:24px;
    transition:background-color 0.2s ease, transform 0.2s ease;
}

.noticias__boton:hover:not(:disabled){
    transform:scale(1.08);
    background-color:#a72855;
}

.noticias__boton:focus-visible{
    outline:3px solid #303030;
    outline-offset:3px;
}

.noticias__boton:disabled{
    cursor:not-allowed;
    opacity:0.5;
}

.noticias__contador{
    min-width:60px;
    margin:0;
    color:#444;
    font-size:16px;
}

.noticias__error{
    margin:20px auto 0;
    color:#922149;
}

.visually-hidden{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0, 0, 0, 0);
    white-space:nowrap;
    border:0;
}

/*Seccion Redes Sociales*/
#redes-sociales{
    background-color:#922149;
    text-align:center;
    padding:60px 20px;
}

/* La franja vino distingue los encabezados de Noticias y Servicios OMEJ. */
#titulo-noticias,
#titulo-servicios-omej{
    box-sizing:border-box;
    width:calc(100% + 40px);
    margin:0 -20px 30px;
    padding:14px 20px;
    background-color:#922149;
    color:white;
    font-size:clamp(1.6rem, 4vw, 2.5rem);
    line-height:1.25;
    letter-spacing:1px;
    text-align:center;
}

/* Distribuye en filas los elementos <li> de la lista de redes de la sección #redes-sociales. */
#redes-sociales ul{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:24px;
    margin:30px 0 0;
    padding:0;
    list-style:none;
}

/* Presenta cada enlace de red como botón y permite animar su estado al pasar el cursor. */
#redes-sociales a{
    display:inline-flex;
    border-radius:12px;
    transition:transform 0.2s ease;
}

/* Amplía ligeramente el botón cuando el cursor pasa sobre el enlace. */
#redes-sociales a:hover{
    transform:scale(1.08);
}

/* Muestra un contorno visible al llegar al enlace usando el teclado. */
#redes-sociales a:focus-visible{
    outline:3px solid white;
    outline-offset:4px;
}

/* Ajusta las imágenes dentro de los enlaces de redes a un tamaño uniforme. */
#redes-sociales img{
    display:block;
    width:72px;
    height:72px;
    object-fit:contain;
    border-radius:12px;
}

/* Ajustes para teléfonos: reduce el espacio y el tamaño de los iconos sociales. */
@media (max-width:480px){
    /* Reduce la separación entre los botones en pantallas pequeñas. */
    #redes-sociales ul{
        gap:16px;
    }

    /* Reduce el tamaño de las imágenes en teléfonos. */
    #redes-sociales img{
        width:60px;
        height:60px;
    }
}

/* Adaptación móvil y de tabletas pequeñas (hasta 760 px). */
@media (max-width:760px){
    /* La barra móvil es más baja que la de escritorio. */
    main > section[id]{
        scroll-margin-top:68px;
    }

    /* Compensa la navegación fija y encuadra la imagen de portada en pantallas altas. */
    #inicio{
        box-sizing:border-box;
        min-height:100vh;
        min-height:100svh;
        padding:60px 16px 24px;
    }

    /* Ajusta el título principal para que envuelva el texto sin desbordar la pantalla. */
    #titulo-inicio{
        box-sizing:border-box;
        width:100%;
        min-width:0;
        margin:0;
        padding:18px 14px 32px;
        font-size:clamp(2rem, 8.5vw, 3rem);
        line-height:1.15;
        letter-spacing:clamp(0.02em, 0.5vw, 0.12em);
        overflow-wrap:anywhere;
    }

    /* Reduce los márgenes interiores de las secciones para aprovechar el ancho del móvil. */
    #omej,
    #ubicaciones,
    #noticias,
    #redes-sociales{
        padding:48px 16px;
    }

    /* Escala los títulos y el texto de las secciones informativas. */
    #titulo-omej,
    #titulo-ubicaciones{
        font-size:clamp(1.7rem, 6vw, 2.5rem);
        line-height:1.2;
        letter-spacing:1px;
    }

    #omej p,
    #ubicaciones p,
    #noticias .noticias__introduccion{
        font-size:18px;
    }

    /* Conserva a ancho completo las franjas vino de Noticias y Servicios. */
    #titulo-noticias,
    #titulo-servicios-omej{
        width:calc(100% + 32px);
        margin:0 -16px 24px;
        padding:12px 16px;
    }
}