*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial, Helvetica, sans-serif;
}

body{
background:#f4f4f4;
}

/* NAVBAR */

header{

background:#7a0019;
color:white;

display:flex;
justify-content:space-between;
align-items:center;

padding:20px 8%;

position:relative;
z-index:1000;

}

.logo{
font-size:28px;
font-weight:bold;
}

.logo img{

height:50px; /* tamaño del logo */

object-fit:contain;

}

nav a{

color:white;
text-decoration:none;
margin-left:25px;
font-size:16px;

}

/* HERO */

.hero{

position:relative;

width:100%;

height:100vh;

overflow:hidden;

display:flex;

justify-content:center;

align-items:center;

background:url("../imagenes/presidencia_3.webp") center/cover no-repeat;




}

.hero::before{

content:"";

position:absolute;

top:0;
left:0;
right:0;
bottom:0;

background:rgba(0,0,0,.35);

}

/* CONTENEDOR */

.slider{


position:absolute;

top:50%;
left:50%;

transform:translate(-50%, -50%);

display:flex;
justify-content:center;
align-items:center;

width:100%;
height:120px;

z-index:2;

}

/* CUADRO + TEXTO */

.slide{

position:absolute;

background:rgba(122,0,25,.85);


padding:20px 60px;

border-radius:10px;

color:white;

font-size:40px;

font-weight:bold;

text-align:center;

white-space:nowrap; /* evita que el texto se haga vertical */

max-width:80%;

opacity:0;

transform:translateY(80px);

animation:animacionTexto 12s infinite;
background-position: center center;


/* TEXTO */

font-size:clamp(20px, 5vw, 55px);

font-weight:700;

line-height:1.2;

color:white;

justify-content:center;

white-space:normal;

word-wrap:break-word;

overflow-wrap:break-word;

hyphens:auto;

}

/* tiempos */

.slide:nth-child(1){ animation-delay:0s;}
.slide:nth-child(2){ animation-delay:4s;}
.slide:nth-child(3){ animation-delay:8s;}

@keyframes animacionTexto{

0%{
opacity:0;
transform:translateY(80px);
}

10%{
opacity:1;
transform:translateY(0);
}

30%{
opacity:1;
}

40%{
opacity:0;
transform:translateY(-60px);
}

100%{
opacity:0;
}

}

/* BOTON */

.hero-btn{

position:absolute;

bottom:80px;

left:50%;

transform:translateX(-50%);

background:white;

color:#7a0019;

padding:18px 35px;

border-radius:15px;

font-size:22px;

font-weight:bold;

text-decoration:none;

text-align:center;

width:80%;

max-width:400px;

transition:0.3s;

}



.hero-texto{

position:absolute;

top:50%;

left:50%;

transform:translate(-50%, -50%);

width:90%;

max-width:650px;

padding:20px;

background:rgba(155,0,28,0.75);

border-radius:20px;

display:flex;

justify-content:center;

align-items:center;

text-align:center;

box-sizing:border-box;

overflow:hidden;

}

/* TEXTO */

.hero-texto h1{

color:white;

font-size:clamp(28px, 6vw, 60px);

line-height:1.2;

margin:0;

width:100%;

word-break:break-word;

overflow-wrap:break-word;

}



/* Stilos de la sección de eventos */
/* SECCION EVENTOS */

.eventos{

padding:80px 8%;

background:#f1f1f1;

text-align:center;

}

.eventos h2{

font-size:40px;

color:#7a0019;

margin-bottom:50px;

font-weight:bold;

}

.contenedor-eventos{

display:grid;

grid-template-columns:repeat(auto-fit, minmax(300px,1fr));

gap:60px;

max-width:1200px;

margin:auto;



}

/* TARJETAS */

.card-evento{

background:white;

border-radius:15px;

padding:15px;

box-shadow:0 10px 25px rgba(0,0,0,.15);

transition:.3s;

cursor:pointer;

}

.card-evento img{

width:100%;

border-radius:10px;

}

/* HOVER */

.card-evento:hover{

transform:translateY(-8px);

box-shadow:0 20px 40px rgba(0,0,0,.2);

}


/* Estilo de la sección de noticias */

/* NOTICIAS */

.noticias{

padding:80px 8%;
background:#f5f5f5;
text-align:center;

}

.noticias h2{

font-size:42px;
color:#7a0019;
margin-bottom:10px;

}

.subtitulo{

color:#555;
margin-bottom:40px;

}

/* CONTENEDOR */

.carousel-container{

position:relative;
display:flex;
align-items:center;

}

/* TRACK */

.carousel-track{

display:flex;
gap:25px;

overflow:hidden;

scroll-behavior:smooth;

}

/* TARJETAS */

.card-noticia{

min-width:300px;

background:white;

border-radius:15px;

box-shadow:0 10px 25px rgba(0,0,0,.15);

overflow:hidden;

transition:.3s;

}

.card-noticia:hover{

transform:translateY(-6px);

}

.card-noticia img{

width:100%;
height:200px;
object-fit:cover;

}

.contenido-noticia{

padding:18px;

}

.contenido-noticia h3{

font-size:18px;
color:#7a0019;
margin-bottom:10px;

}

.contenido-noticia a{

text-decoration:none;
color:#0700ca;
font-weight:bold;

}

/* BOTONES */

.carousel-btn{

position:absolute;

width:45px;
height:45px;

border-radius:50%;
border:none;

background:#2f4b8f;
color:white;

font-size:20px;

cursor:pointer;

}

.prev{
left:-20px;
}

.next{
right:-20px;
}


/* SECCION HISTORIA */

.historia{

height:500px;

background-image:url("../imagenes/presidencia_1.webp");

background-size:cover;

background-position:center;

/* ESTA ES LA CLAVE DEL EFECTO */

background-attachment:fixed;

display:flex;

justify-content:center;

align-items:center;

text-align:center;

color:white;

position:relative;

}

/* oscurecer un poco la imagen */

.historia::before{

content:"";

position:absolute;

top:0;
left:0;
right:0;
bottom:0;

background:rgba(0,0,0,.45);

}

.contenido-historia{

 width:100%;

text-align:center;

position:relative;
align-items:center;

max-width:800px;

padding:0px;

}

.contenido-historia h2{
    font-size: clamp(40px, 10vw, 90px);
    line-height: 1.1;
    text-align: center;
    word-break: normal;
    overflow-wrap: normal;
}

.contenido-historia p{

font-size:20px;

margin-bottom:30px;

line-height:1.6;

}

.btn-historia{

background:white;

color:#2f4b8f;

padding:14px 28px;

border-radius:6px;

text-decoration:none;

font-weight:bold;

transition:.3s;

}

.btn-historia:hover{

background:#e5e5e5;

}


/* SECCION MISION VISION */

.mvv{

padding:80px 8%;

background:#f5f5f5;

text-align:center;

}

.mvv h2{

font-size:42px;

color:#7a0019;

margin-bottom:10px;

}

.mvv .subtitulo{

color:#666;

margin-bottom:60px;

}

.contenedor-mvv{

display:flex;

justify-content:center;

gap:40px;

flex-wrap:wrap;

}

/* TARJETAS */

.flip-card{

width:420px;

height:260px;

perspective:1000px;

}

.flip-inner{

position:relative;

width:100%;
height:100%;

transition:transform 0.7s;

transform-style:preserve-3d;

}

/* giro */

.flip-card:hover .flip-inner{

transform:rotateY(180deg);

}

/* lados */

.flip-front,
.flip-back{

position:absolute;

width:100%;
height:100%;

backface-visibility:hidden;

border-radius:15px;

box-shadow:0 10px 25px rgba(0,0,0,.15);

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

padding:30px;

}

/* frente */

.flip-front{

background:white;

}

.flip-front img{

width:60px;

margin-bottom:15px;

}

.flip-front h3{

color:#7a0019;

font-size:26px;

}

/* parte trasera */

.flip-back{

background:#7a0019; /* color del menu */

color:white;

transform:rotateY(180deg);

}

.flip-back h3{

margin-bottom:15px;

font-size:26px;

}

.flip-back p{

line-height:1.6;

font-size:16px;

}



/* SECCION VALORES */

.valores{

padding:90px 0%;

background:#f5f5f5;

text-align:center;

 width:100%;
 overflow:hidden;

}

.valores h2{

font-size:42px;

color:#7a0019;

margin-bottom:10px;

}

.valores .subtitulo{

color:#666;

margin-bottom:60px;

}

/* GRID */

.contenedor-valores{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

gap:40px;

max-width:1200px;

margin:60px auto 0 auto;

column-gap:80px;   /* separación horizontal */
row-gap:60px;      /* separación vertical */

}

/* TARJETAS */

.flip-card{

height:220px;


max-width:320px;

margin:auto;
perspective:1000px;

}

.flip-inner{

position:relative;

width:100%;
height:100%;

transition:transform .7s;

transform-style:preserve-3d;

}

.flip-card:hover .flip-inner{

transform:rotateY(180deg);

}

/* LADOS */

.flip-front,
.flip-back{

position:absolute;

width:100%;
height:100%;

border-radius:15px;

box-shadow:0 10px 25px rgba(0,0,0,.15);

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

padding:25px;

backface-visibility:hidden;

}

/* FRENTE */

.flip-front{

background:white;

}

.flip-front img{

width:55px;

margin-bottom:12px;

}

.flip-front h3{

color:#7a0019;

font-size:20px;

}

/* ATRAS */

.flip-back{

background:#7a0019; /* color del menu */

color:white;

transform:rotateY(180deg);

}

.flip-back h3{

margin-bottom:10px;

}

.flip-back p{

font-size:15px;

line-height:1.5;

}



/* SECCION MAPA */

.mapa{

padding:100px 8%;

background:#f5f5f5;

text-align:center;

}

.mapa h2{

font-size:42px;

color:#7a0019;

margin-bottom:10px;

}

.mapa .subtitulo{

margin-bottom:40px;

color:#666;

}

#mapa{

height:450px;

max-width:1200px;

margin:auto;

border-radius:15px;

border:3px solid #2f4b8f;

box-shadow:0 10px 25px rgba(0,0,0,.15);

}


/*Boton del mapa*/

.btn-maps{

display:inline-block;

margin-top:6px;

padding:8px 16px;

background:#7a0019; /* color del menú */

color:#ffffff !important;

text-decoration:none;

border-radius:6px;

font-size:14px;

font-weight:bold;

transition:0.3s;

}

/* asegurar que el enlace también sea blanco */

.btn-maps:visited,
.btn-maps:active,
.btn-maps:link{

color:#ffffff !important;

}

/* hover */

.btn-maps:hover{

background:#5c0013;

color:#ffffff !important;

}


/* FOOTER MUNICIPAL */

.footer-municipio{

background:#9b001c;

padding:50px 20px;

display:flex;

justify-content:center;

align-items:center;

overflow:hidden;

}

.footer-contenido{

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

text-align:center;

gap:25px;

width:100%;

}

.logo-footer{

width:350px;

margin-bottom:25px;

opacity:0.95;

background:white;

padding:10px 20px;

border-radius:10px;



}

.footer-municipio h2{

font-size:40px;

letter-spacing:2px;

margin-bottom:5px;

}

.footer-municipio p{

font-size:16px;

opacity:0.85;

}


/* SECCION PRESIDENTE */

.presidente{

background:#f5f5f5;

}

/* BANNER */

.banner-presidente{

position:relative;

height:220px;

background:url("../imagenes/banner.jpg") center/cover no-repeat;

display:flex;

justify-content:center;

align-items:center;

}

.overlay{

position:absolute;

top:0;
left:0;
right:0;
bottom:0;

background:linear-gradient(to bottom, rgba(155,0,28,.8), rgba(0,0,0,.6));

}

.contenido-banner{

position:relative;

color:white;

text-align:center;

}

.contenido-banner h2{

font-size:32px;

letter-spacing:2px;

}

.linea{

width:80px;

height:3px;

background:#9b001c;

margin:10px auto;

}

/* CONTENIDO */

.contenido-presidente{

padding:80px 8%;

display:flex;

justify-content:center;

}

/* CARD */

.card-presidente{

display:flex;

gap:40px;

background:white;

padding:30px;

border-radius:10px;

box-shadow:0 10px 25px rgba(0,0,0,.15);

max-width:1000px;

align-items:center;

}

/* IMAGEN */

.img-presidente img{

width:280px;

border-radius:10px;

box-shadow:0 10px 20px rgba(0,0,0,.2);

}

/* TEXTO */

.info-presidente{

flex:1;

}

.nombre-presidente{

background:#444;

color:white;

padding:10px;

margin-bottom:15px;

font-weight:bold;

}

.nombre-presidente span{

font-size:14px;

opacity:.8;

}

/* TEXTO */

.info-presidente p{

margin-bottom:15px;

line-height:1.6;

color:#333;

}

/* RESPONSIVE */

@media(max-width:768px){

.card-presidente{

flex-direction:column;

text-align:center;

}

.img-presidente img{

width:100%;

max-width:300px;

}







}


/* SECCION CABILDO */

.cabildo{
background:#f5f5f5;
padding-bottom:60px;
}

/* BANNER */

.banner-cabildo{

position:relative;
height:180px;

background:url("imagenes/banner.jpg") center/cover no-repeat;

display:flex;
justify-content:center;
align-items:center;

}

.banner-cabildo .overlay{

position:absolute;
top:0;
left:0;
right:0;
bottom:0;

background:linear-gradient(to bottom, rgba(155,0,28,.8), rgba(0,0,0,.6));

}

.contenido-banner{

position:relative;
color:white;
text-align:center;

}

.contenido-banner h2{

font-size:28px;
letter-spacing:2px;

}



/* PRESIDENTE */

.presidente-cabildo{

display:flex;
justify-content:center;
margin-top:-50px;

}

.card-cabildo{

background:white;

border-radius:10px;

overflow:hidden;

box-shadow:0 10px 25px rgba(0,0,0,.2);

text-align:center;

transition:.3s;

}

.card-cabildo img{

width:100%;
display:block;

}

/* PRINCIPAL */

.principal{

width:260px;

transform:scale(1.1);

z-index:2;

}

/* INFO */

.card-cabildo .info{

background:#444;

color:white;

padding:10px;

font-size:13px;

}

.card-cabildo .info span{

font-size:11px;
opacity:.8;

}

/* GRID */

.grid-cabildo{

display:flex;

justify-content:center;

gap:40px;

margin-top:60px;

flex-wrap:wrap;

}

.grid-cabildo .card-cabildo{

width:220px;

}

/* HOVER */

.card-cabildo:hover{

transform:translateY(-8px);

}

/* FLECHA */

.flecha{

text-align:center;

font-size:40px;

margin-top:40px;

color:#444;

}

/* NAV */

nav{
display:flex;
gap:25px;
align-items:center;
}

/* CONTENEDOR */

.dropdown{
position:relative;
}

/* SUBMENU */

.submenu{

position:absolute;

top:100%;
left:0;

background:#9b001c;

min-width:250px;

border-radius:12px;

overflow:hidden;

box-shadow:0 8px 20px rgba(0,0,0,.2);

display:flex;
flex-direction:column;

opacity:0;

visibility:hidden;

transform:translateY(15px);

transition:
opacity .35s ease,
transform .35s ease,
visibility .35s ease;

pointer-events:none;

z-index:2000;
}

/* LINKS DEL SUBMENU */

.submenu a{

margin:0;

border:none;

display:block;
width:100%;            /* ocupa todo el ancho */
height:100%;           /* asegura altura completa */

box-sizing:border-box; /* evita espacios raros */

padding:12px 16px;

color:white;

text-decoration:none;

display:block;

opacity:0;

transform:translateY(10px);



}

.submenu a:hover{

background:white;

color:#9b001c;

width:100%;

}

/* MOSTRAR AL PASAR EL CURSOR */

.dropdown:hover .submenu{

opacity:1;

visibility:visible;

transform:translateY(0);

pointer-events:auto;
}

.dropdown:hover .submenu a{

animation:fadeDown .4s forwards;

}

.submenu a:nth-child(1){ animation-delay:0.05s; }
.submenu a:nth-child(2){ animation-delay:0.1s; }
.submenu a:nth-child(3){ animation-delay:0.15s; }
.submenu a:nth-child(4){ animation-delay:0.2s; }

@keyframes fadeDown{

from{
opacity:0;
transform:translateY(-10px);
}

to{
opacity:1;
transform:translateY(0);
}

}

/* FLECHITA OPCIONAL */

.dropdown > a{

color:white;
text-decoration:none;

}

.card-img{

width:100%;

height:250px; /* puedes ajustar altura */

overflow:hidden;

border-top-left-radius:12px;
flex-shrink:0; /* 🔥 evita que se deforme */
background-size:cover;

background-position:center;


}

.card-img img{

width:100%;

height:100%;

object-fit:cover; /* 🔥 clave */
object-position:center top; /* enfoca rostros */


display:block;

transition:.4s;


}

.card:hover img{
transform:scale(1.05);
}

.card{

width:300px;

border-radius:12px;

overflow:hidden;

background:white;

box-shadow:0 10px 20px rgba(0,0,0,.1);

display:flex;
flex-direction:column;

}

.plan-archivistico{

text-align:center;

padding:80px 20px;

background:#f5f5f5;

}

.plan-archivistico h2{

color:#9b001c;

font-size:40px;

margin-bottom:20px;

}

.descripcion{

max-width:900px;

margin:0 auto 50px auto;

color:#555;

font-size:18px;

line-height:1.6;

}

.cards-plan{

display:flex;

justify-content:center;

gap:40px;

flex-wrap:wrap;

}

/* CARD */

.card-plan{

width:350px;

height:200px;

background:white;

border-radius:20px;

display:flex;

align-items:center;

justify-content:center;

text-decoration:none;

color:#9b001c;

box-shadow:0 10px 25px rgba(0,0,0,0.1);

transition:.4s;

position:relative;

overflow:hidden;

}

/* contenido */

.card-plan h3{

font-size:40px;

margin-bottom:10px;

}

.card-plan p{

color:#777;

}

/* hover */

.card-plan:hover{

background:#9b001c;

color:white;

transform:translateY(-10px);

}

.card-plan:hover p{

color:white;

}

/* efecto tipo "giro ligero" elegante */

.card-plan::before{

content:"";

position:absolute;

width:100%;

height:100%;

background:rgba(255,255,255,0.1);

top:0;

left:-100%;

transition:.4s;

}

.card-plan:hover::before{

left:0;

}

.plan-2025{

padding:80px 20px;

text-align:center;

background:#f5f5f5;

}

.plan-2025 h2{

color:#9b001c;

font-size:38px;

margin-bottom:20px;

}

.plan-2025 .descripcion{

max-width:900px;

margin:0 auto 40px auto;

color:#555;

font-size:18px;

line-height:1.6;

}

/* visor */

.visor-pdf{

max-width:1000px;

margin:auto;

background:white;

border-radius:15px;

box-shadow:0 10px 25px rgba(0,0,0,.1);

overflow:hidden;

}

/* iframe */

#pdfViewer{

width:100%;

height:600px;

border:none;

}

/* controles */

.controles{

display:flex;

justify-content:center;

gap:10px;

padding:15px;

background:#9b001c;

}

.controles button{

background:white;

color:#9b001c;

border:none;

padding:8px 15px;

border-radius:6px;

cursor:pointer;

font-weight:bold;

transition:.3s;

}

.controles button:hover{

background:#ddd;

}

.nota{

padding:80px 20px;

background:#f5f5f5;

text-align:center;

}

.nota h2{

color:#9b001c;

font-size:36px;

margin-bottom:20px;

}

.texto-nota{

max-width:900px;

margin:0 auto 40px auto;

font-size:18px;

color:#555;

line-height:1.7;

}

/* CAROUSEL */

.carousel{

display:flex;

gap:20px;

overflow-x:auto;

padding:20px;

scroll-behavior:smooth;

justify-content:center;

flex-wrap:wrap;

}

.carousel img{

width:260px;

height:180px;

object-fit:cover; /* 🔥 clave */

border-radius:12px;

cursor:pointer;

transition:.3s;

}

.carousel img:hover{

transform:scale(1.05);

}

/* MODAL */

.modal{

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

background:rgba(0,0,0,0.8);

display:none;

justify-content:center;

align-items:center;

z-index:9999;

}

.modal img{

max-width:90%;

max-height:90%;

border-radius:10px;

}

.noticias{

padding:80px 20px;

background:#f5f5f5;

text-align:center;

}

.noticias h2{

color:#9b001c;

font-size:36px;

margin-bottom:40px;

}

/* GRID */

.grid-noticias{

display:grid;

grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));

gap:30px;

max-width:1100px;

margin:auto;

}

/* CARD */

.card-noticia{

text-decoration:none;

background:white;

border-radius:15px;

overflow:hidden;

box-shadow:0 10px 25px rgba(0,0,0,.1);

transition:.4s;

}

/* IMAGEN */

.img-noticia{

position:relative;

overflow:hidden;

}

.img-noticia img{

width:100%;

height:200px;

object-fit:cover;

transition:.5s;

}

/* OVERLAY */

.overlay{

position:absolute;

top:0;
left:0;

width:100%;
height:100%;

background:rgba(155,0,28,0.8);

display:flex;

justify-content:center;

align-items:center;

opacity:0;

transition:.4s;

}

.overlay span{

color:white;

font-size:18px;

font-weight:bold;

transform:translateY(20px);

transition:.4s;

}

/* CONTENIDO */

.contenido-noticia{

padding:20px;

}

.contenido-noticia h3{

color:#333;

margin-bottom:10px;

}

.contenido-noticia p{

color:#666;

font-size:14px;

}

/* 🔥 ANIMACIÓN AL PASAR EL CURSOR */

.card-noticia:hover{

transform:translateY(-10px) scale(1.02);

box-shadow:0 20px 40px rgba(0,0,0,.2);

}

/* zoom imagen */

.card-noticia:hover img{

transform:scale(1.2);

}

/* aparece overlay */

.card-noticia:hover .overlay{

opacity:1;

}

/* texto sube */

.card-noticia:hover .overlay span{

transform:translateY(0);

}

.organigrama{

padding:80px 20px;

background:#ffffff;

text-align:center;

}

.organigrama h2{

color:#9b001c;

font-size:36px;

margin-bottom:20px;

}

.organigrama .descripcion{

max-width:800px;

margin:0 auto 40px;

color:#555;

font-size:16px;

line-height:1.6;

}

/* CONTENEDOR PDF */

.pdf-container{

width:100%;

max-width:1000px;

height:600px;

margin:0 auto;

border-radius:15px;

overflow:hidden;

box-shadow:0 10px 25px rgba(0,0,0,0.1);

}

/* IFRAME PDF */

.pdf-container iframe{

width:100%;

height:100%;

}

/* BOTÓN */

.btn-pdf{

display:inline-block;

margin-top:30px;

padding:12px 25px;

background:#9b001c;

color:white;

text-decoration:none;

border-radius:8px;

font-weight:bold;

transition:.3s;

}

/* HOVER */

.btn-pdf:hover{

background:#7a0016;

transform:scale(1.05);

}


.titulo-color-fijo{
    color: #9b001c; /* rojo institucional */
}


.dif{
    padding:80px 20px;
    background:#f5f5f5;
    text-align:center;
}

.dif h2{
    font-size:36px;
    color:#9b001c;
    margin-bottom:20px;
}

.dif h3{
    margin:40px 0 30px;
    color:#1e2a55;
}

/* TITULOS */
.dif h2,
.dif h3{
    color:#9b001c;
}

/* TEXTO DE TARJETAS */
.dif-card h4{
    color:#9b001c;
}

.btn-volver{
    display:inline-block;
    margin:20px 0;
    padding:10px 20px;
    background:#9b001c;
    color:white;
    border-radius:10px;
    text-decoration:none;
    font-weight:bold;
}

.btn-volver:hover{
    background:#141d3a;
}

/* GRID */
.dif-grid{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap:25px;
    max-width:1100px;
    margin:auto;
}

/* TARJETAS */

.dif-card{

background:white;

border-radius:25px;

padding:30px 20px;

text-align:center;

position:relative;

display:flex;

flex-direction:column;

align-items:center;

justify-content:flex-start;

min-height:360px;

box-sizing:border-box;

}

.dif-card img{
    width:70px;
    margin-bottom:15px;
}

.dif-card h4{
    margin-bottom:15px;
    color:#9b001c;
}

/* BOTÓN */
.btn-dif{
    display:inline-block;
    padding:8px 18px;
    background:#1e2a55;
    color:white;
    border-radius:8px;
    text-decoration:none;
    font-size:14px;
}

/* BOTONES */
.btn-dif,
.btn-volver{
    background:#9b001c;
    color:white;
    border:none;
}

/* HOVER BOTONES */
.btn-dif:hover,
.btn-volver:hover{
    background:#7a0016;
}


/* EFECTO TARJETA */

.dif-card{
    position:relative; /* 🔥 necesario para la etiqueta */
    transition: transform .3s ease, box-shadow .3s ease; /* 🔥 esto recupera la animación */
}

.dif-card:hover{
    transform:translateY(-8px) scale(1.03);
    box-shadow:0 15px 30px rgba(155, 0, 28, 0.25);
}


.badge{
    position:absolute;
    top:15px;
    left:15px;
    background:#9b001c;
    color:white;
    padding:5px 10px;
    font-size:12px;
    border-radius:20px;
    font-weight:bold;
    box-shadow:0 3px 8px rgba(0,0,0,0.2);

    z-index:2; /* 🔥 asegura que esté encima */
}


 /* Estilo de la descripción de los servicios */
 .detalle-servicio{

padding:80px 20px;

max-width:1000px;

margin:auto;

background:#f5f5f5;

}

.detalle-servicio h2{

color:#9b001c;

margin-bottom:10px;

}

.descripcion{

margin:20px 0;

color:#555;

line-height:1.6;

}

/* BLOQUES */

.bloque{

background:white;

padding:20px;

margin-top:20px;

border-radius:10px;

box-shadow:0 5px 15px rgba(0,0,0,.1);

}

.bloque h3{

color:#9b001c;

margin-bottom:10px;

}

/* DETALLES */

.info-detalles{

display:flex;

gap:20px;

flex-wrap:wrap;

}

/* MAPA */

#mapa-servicio{

flex:1;

min-height:300px;

border-radius:10px;

}

/* HORARIO */

.horario{

flex:1;

display:flex;

flex-direction:column;

justify-content:center;

}

.horario h4{

color:#9b001c;

margin-bottom:10px;

}

/* BOTON */

.btn-maps{

margin-top:15px;

padding:10px;

background:#9b001c;

color:white;

text-decoration:none;

border-radius:6px;

text-align:center;

font-weight:bold;

}

.btn-maps:hover{

background:#7a0016;

}

/* BOTÓN OCULTO EN PC */
.menu-toggle{
    font-size:42px;

    color:white;

    cursor:pointer;

    transition:0.3s;
}

.menu-toggle:hover{
    transform:scale(1.1);
}

/* MENU NORMAL */
nav{
display:flex;
gap:20px;
}






.grupo{
    margin-top:25px;
}

.grupo h4{
    color:#9b001c;
    margin-bottom:10px;
    border-left:4px solid #9b001c;
    padding-left:10px;
}

/* ITEMS */

.item{
    display:flex;
    justify-content:space-between;
    padding:10px 15px;
    border-bottom:1px solid #eee;
    font-size:15px;
    border-radius:6px;
    transition:.2s;
}

/* EFECTO HOVER */

.item:hover{
    background:#f9f9f9;
    transform:scale(1.01);
}

/* PRECIO DESTACADO */

.item span:last-child{
    font-weight:bold;
    color:#9b001c;
}



.descripcion{
    margin:15px 0;
    color:#555;
    line-height:1.6;
}

/* SUBTITULO */

.subtitulo{
    margin-top:25px;
    color:#9b001c;
    border-left:4px solid #9b001c;
    padding-left:10px;
}

/* LISTA */

.lista-talleres{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap:10px;
    margin-top:15px;
    padding:0;
    list-style:none;
}

/* ITEM */

.lista-talleres li{
    background:white;
    padding:10px;
    border-radius:8px;
    box-shadow:0 3px 10px rgba(0,0,0,.1);
    text-align:center;
    transition:.3s;
}

/* HOVER */

.lista-talleres li:hover{
    background:#9b001c;
    color:white;
    transform:scale(1.05);
}

/* TEXTO FINAL */

.nota-final{
    margin-top:25px;
    color:#555;
    line-height:1.6;
}



/* GRID */

.grid-servicios{

display:grid;

grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));

gap:25px;

margin-top:25px;

}

/* TARJETAS */

.card-servicio{

background:white;

padding:25px;

border-radius:15px;

box-shadow:0 5px 15px rgba(0,0,0,.1);

transition:.3s;

border-top:5px solid #9b001c;

}

/* TITULO */

.card-servicio h4{

color:#9b001c;

margin-bottom:10px;

}

/* TEXTO */

.card-servicio p{

color:#555;

line-height:1.6;

}

/* 🔥 ANIMACIÓN */

.card-servicio:hover{

transform:translateY(-10px) scale(1.03);

box-shadow:0 15px 30px rgba(155,0,28,.25);

background:#fffafa;

}


/* SECCIÓN PLAN */

.plan-archivistico{

padding:80px 20px;

text-align:center;

background:#f5f5f5;

}

/* TITULO */

.plan-archivistico h2{

color:#9b001c;

font-size:40px;

margin-bottom:25px;

}

/* DESCRIPCIÓN */

.plan-archivistico .descripcion{

max-width:900px; /* 🔥 limita ancho */

margin:0 auto; /* 🔥 centra */

text-align:center; /* centra texto */

line-height:1.8;

font-size:18px;

color:#555;

}

/* CARDS */

.cards-plan{

display:flex;

justify-content:center;

gap:40px;

margin-top:50px;

flex-wrap:wrap;

}
/* =========================================
   RESPONSIVE GENERAL
========================================= */

/* Evita scroll horizontal */
html, body{
    overflow-x: hidden;
    width: 100%;
}

/* Todas las imágenes adaptables */
img{
    max-width: 100%;
    height: auto;
    display: block;
}

/* Contenedores principales */
section,
header,
footer,
div{
    box-sizing: border-box;
}