:root {
    --negro: #082338;
    --blanco: #fff9ea;
    --azul: #153b54;
    --amarillo: #efb810;
    --rojo: #ff0000;
    --verde: #008000;
    --naranja: #FC466B;
    --background: #bfbfde;
    --gris: #524e6a;

    /* Para el header */
    --hue: 320;
    --bg: oklch(35% .3 var(--hue));
    --text: oklch(85% .1 var(--hue));
    --shadow: oklch(25% .2 var(--hue));
    --highlight: oklch(98% .05 var(--hue));

    --d: 700ms;
    --e: cubic-bezier(0.19, 1, 0.22, 1);

    /* Para la marquesina de marcas */
	/* --marquee-width: 1600px; */
	--marquee-width: 100%;
	--marquee-height: 20vh;
	--marquee-elements: 29; /* defined with JavaScript */
	--marquee-elements-displayed: 8;
	--marquee-element-width: calc(var(--marquee-width) / var(--marquee-elements-displayed));
	--marquee-animation-duration: calc(var(--marquee-elements) * 1.5s);
}

@font-face {
    font-family: 'notoserifdisplay';
    src: url('fonts/display-font.woff2') format('woff2'),
         url('fonts/display-font.woff') format('woff');
    /* font-weight: 400;
    font-style: normal; */
}

/* Reseteo de estilos */
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;

    /*for debugging
      outline: 2px solid limegreen !important;
      background-color: rgb(0 100 0 / 0.1) !important;
    */
}

html {
    scroll-behavior: smooth;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 400;
    line-height: 1.5;

    overflow-x: hidden; /* Para evitar la barra horizontal para el slider */

    /*scroll-padding-top: 100px;*/
    /* Para evitar que el navbar cubra el contenido al dar clic en una opcion del menu */
}

h1,
h2,
h3,
h4,
h5 {
    font-family: 'notoserifdisplay';
    font-weight: 400;
}

img {
    max-width: 100%;
    display: block;
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
}

/* Divide el contenido en columnas iguales */
.split-columns {
    display: flex;
    flex-direction: column;
}

@media (min-width: 40em) {

    /* 40em = 640px */
    .split-columns {
        flex-direction: row;
    }

    .split-columns>* {
        flex-basis: 100%;
    }
}

/* Para centrar texto o div */
.centrado {
    display: flex;
    justify-content: center;
    align-items: center;
}

.centered {
    display: grid;
    place-items: center;
}


/*
    Barra de navegación
*/
.navbar {
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: var(--blanco);
    padding: 1rem 0;
}

.brand-title {
    width: 100%;
    height: 116px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--blanco);
}

.brand-title h1 {
    color: var(--negro) !important;
    font-size: clamp(6, 6em + 1vw, 8em); /* clamp(minimum, preferred, maximum); */
    padding-left: 1rem;
    text-transform: uppercase;
}

.brand-title img {
    max-height: 100px;
}

.navbar-links ul {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 7;
}

.navbar-links ul li a {
    color: var(--negro);
    text-transform: uppercase;
    font-family: 'notoserifdisplay';
    font-weight: 400;
    font-size: 1em;
    padding: 0 1rem;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 9;
    transition: all .5s;
}

.navbar-links ul li a img {
    padding-right: 8px;
}
.navbar-links ul li:nth-child(1):hover a,
.navbar-links ul li:nth-child(2):hover a,
.navbar-links ul li:nth-child(3):hover a,
.navbar-links ul li:nth-child(4):hover a {
    letter-spacing: 1px;
    border-bottom: 2px solid var(--negro);
    /* background-color: var(--amarillo);
    color: var(--negro); */
}

.navbar-wa-btn {
    border-radius: 100vmax;
    border: 2px solid var(--negro);
    background-color: var(--amarillo);
    transition: all .3s;
}

.navbar-wa-btn:hover {
    background-color: #f2c540;
    box-shadow: 8px 8px 12px rgba(0, 0, 0, 0.4);
}

.navbar-wa-btn a {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--negro);
    font-size: .9em;
    letter-spacing: normal;
    padding: .5rem 1.5rem;
}

.navbar-wa-btn img {
    height: 1.5rem;
    margin: .5rem 0;
}

.golden-btn {
    display: inline-block;
    outline: none;
    font-family: inherit;
    font-size: 1em;
    box-sizing: border-box;
    border: none;
    /* border-radius: .3em; */
    border-radius: 100vmax;
    /* border: 2px solid var(--negro); */
    height: 2.75em;
    line-height: 2.5em;
    /* text-transform: uppercase; */
    padding: 0 1.5em;
    box-shadow: 0 3px 6px rgba(0, 0, 0, .16), 0 3px 6px rgba(110, 80, 20, .4),
        inset 0 -2px 5px 1px rgba(139, 66, 8, 1),
        inset 0 -1px 1px 3px rgba(250, 227, 133, 1);
    background-image: linear-gradient(160deg, #a54e07, #b47e11, #fef1a2, #bc881b, #a54e07);
    border: 1px solid #a55d07;
    color: rgb(120, 50, 5);
    text-shadow: 0 2px 2px rgba(250, 227, 133, 1);
    cursor: pointer;
    transition: all .2s ease-in-out;
    background-size: 100% 100%;
    background-position: center;
}

.golden-btn a {
    color: rgb(120, 50, 5);
}

.golden-btn:focus,
.golden-btn:hover {
    background-size: 150% 150%;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23),
        inset 0 -2px 5px 1px #b17d10,
        inset 0 -1px 1px 3px rgba(250, 227, 133, 1);
    border: 1px solid rgba(165, 93, 7, .6);
    color: rgba(120, 50, 5, .8);
}

.golden-btn:active {
    box-shadow: 0 3px 6px rgba(0, 0, 0, .16), 0 3px 6px rgba(110, 80, 20, .4),
        inset 0 -2px 5px 1px #b17d10,
        inset 0 -1px 1px 3px rgba(250, 227, 133, 1);
}

.toggle-button {
    position: absolute;
    top: 4.5rem;
    right: 1rem;
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 21px;
}

.toggle-button .bar {
    height: 3px;
    width: 100%;
    background-color: var(--azul);
    border-radius: 10px;
}

@media (max-width: 768px) {

    .brand-title img {
        margin: 1rem;
    }

    .brand-title h1 {
        text-align: center;
    }

    .toggle-button {
        display: flex;
    }

    .navbar-links {
        display: none;
        width: 100%;
        background-color: var(--azul);
    }

    .navbar {
        padding: 0;
        flex-direction: column;
        margin: 1rem 0;
    }

    .navbar-links ul {
        width: 100%;
        height: 65dvh;
        flex-direction: column;
        justify-content: space-around;
    }

    .navbar-links li {
        text-align: center;
    }

    .navbar-links ul li a {
        color: var(--blanco);
        padding: .5rem 1rem;
    }

    .navbar-links.active {
        display: flex;
        margin-top: 4rem;
        margin-bottom: 1rem;
    }

}


/*
    Carrusel principal
*/
.swiper {
    width: 100%;
    height: 600px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.swiper-wrapper {
    max-width: 100dvw;
}

.swiper-slide {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

}

.swiper-slide h3 {
    position: absolute;
    width: 70%;
    color: var(--blanco);
    font-size: clamp(1.5em, 1.5em + 1vw, 5em); /* clamp(minimum, preferred, maximum); */
    text-align: center;
    text-shadow: 5px 5px 8px rgba(0, 0, 0, 0.5);
    animation: bounce-right 2s ease 0s 1 normal forwards;
}
@keyframes bounce-right {
	0% {
		animation-timing-function: ease-in;
		opacity: 0;
		transform: translateX(250px);
	}

	38% {
		animation-timing-function: ease-out;
		opacity: 1;
		transform: translateX(0);
	}

	55% {
		animation-timing-function: ease-in;
		transform: translateX(68px);
	}

	72% {
		animation-timing-function: ease-out;
		transform: translateX(0);
	}

	81% {
		animation-timing-function: ease-in;
		transform: translateX(32px);
	}

	90% {
		animation-timing-function: ease-out;
		transform: translateX(0);
	}

	95% {
		animation-timing-function: ease-in;
		transform: translateX(8px);
	}

	100% {
		animation-timing-function: ease-out;
		transform: translateX(0);
	}
}


/*
    Titulos principales
*/
.home {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
}

.home .home-title {
    width: 50%;
    height: 100dvh;
    padding: 3rem 4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #000000;
    /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #666, #000000);
    /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #666, #000000);
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.home .home-title h1 {
    color: var(--blanco);
    /*font-size: clamp(3.8em, 3em + 2vw, 2em);*/ /* clamp(minimum, preferred, maximum); */
    font-size: clamp(2em, 2em + 2vw, 4em); /* clamp(minimum, preferred, maximum); */
    line-height: 1.1;
    text-transform: uppercase;
    margin-bottom: 2rem;
    text-shadow: 8px 8px 12px rgb(0, 0, 0, 0.8);
}

.home .home-title h1 span {
    color: var(--amarillo);
}

.home .home-title p {
    color: var(--blanco);
    padding: 1rem 0;
    font-size: 1.1em;
}

.home .home-title a {
    padding: .75rem 2.5rem;
    color: var(--blanco);
    border: 2px solid var(--blanco);
    font-size: 1.2em;
    transition: all .8s ease;
}

.home .home-title a:hover {
    background-color: var(--negro);
    box-shadow: 5px 5px 8px rgba(255, 255, 255, 0.4);
}

.home .hero-right {
    width: 50%;
    max-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}


/*
    Formulario de contacto
*/
#contactForm {
    display: flex;
    flex-direction: column;
}

#contactForm label {
    margin-top: 1rem;
}

#contactForm input,
#contactForm select,
#contactForm textarea {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 1rem;
    padding: .75rem;
    width: 100%;
}

#contactForm textarea {
    resize: none;
    field-sizing: content;
    margin-bottom: 2rem;
}
#contactForm button {
    width: 50%;
    margin: 0 auto;
}

.error {
    color: var(--rojo);
    margin-top: -1rem;
    padding-bottom: 1rem;
    display: none;
}

.gracias {
    text-align: center;
    padding: 1rem 0;
    display: none;
}

.info-contacto {
    padding: 2rem;
}

.contact-form {
    padding: 2rem;
    background: rgba( 255, 255, 255, 0.25 );
    box-shadow: 8px 8px 32px 0 rgba( 0, 0, 0, 0.5 );
    backdrop-filter: blur( 4px );
    -webkit-backdrop-filter: blur( 4px );
    border-radius: 10px;
    border: 1px solid rgba( 255, 255, 255, 0.18 );
}

section h2 {
    font-size: 2em;
    text-transform: uppercase;
    margin-bottom: 2rem;
    width: fit-content;
    border-bottom: 2px solid var(--negro);
}


/*
    Servicios
*/
#servicios {
    padding: 4rem;
}

#productos h2 {
    padding: 0 2rem;
}

.productos-content {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    gap: 2rem;
}

.service-card {
    border-radius: 6px;
    margin: 0 1rem 2rem 0;
    min-height: 60vh;
    perspective: 1000px;
    transition: all .5s ease;
    -moz-transition: all .5s ease;
}

.service-card-inner {
    border-radius: 6px;
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;   
}

.service-card:hover .service-card-inner,
.service-card:active .service-card-inner,
.service-card:focus .service-card-inner
{
    transform: rotateY(180deg);
    box-shadow: -5px 5px 16px var(--gris);
}
.service-card-front {
    box-shadow: -5px 5px 16px var(--gris);
}

.service-card-front,
.service-card-back {
    border-radius: 6px;
    position: absolute;
    width: 100%;
    min-height: 60vh;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.service-card-front {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.service-card-front h3 {
    color: var(--blanco);
    text-shadow: 5px 5px 10px rgba(0, 0, 0, 0.4);
    font-size: 2em;
}

.service-card-back {
    height: 60vh;
    overflow-x: hidden;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2rem 1rem;
    color: var(--blanco);
    background-color: var(--negro);
    transform: rotateY(180deg);
}
.service-card-back p {
    /* text-align: justify; */
    line-height: 1.5;
    font-style: italic;
}

.service-card-back ul {
    text-align: left;
}
.service-card-back ul li {
    padding: .5rem;
}

/*
.service-card-back a {
    color: var(--blanco);
    padding: .75rem 1rem;
    border-radius: 100vmax;
    border: 1px solid var(--blanco);
    background-color: var(--negro);
    transition: all .3s ease;
}
.service-card-back a:hover {
    background-color: var(--gris);
}
*/


/*
    Edictos
*/
#edictos {
    padding: 4rem;
}

#edictos h3 {
    font-size: 3em;
    padding-bottom: 2rem;
}

#edictos h4 {
    font-size: 2em;
}

#edictos p {
    font-size: 1.5em;
}

.card-edictos div {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 4rem 0;
}

.card-edictos p {
    padding-bottom: 2rem;
}

.card-edictos img {
    height: 150px;
}

#edictos p a:hover {
    color: var(--azul);
}


/*
    Diferenciadores
*/
.diferenciadores {
    border-radius: 6px;
    background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.9)), no-repeat center / 100% fixed url(../images/abogado.jpg);
    padding: 6rem;
}

.diferenciadores h3 {
    color: var(--blanco);
    font-size: 1.9em;
    line-height: 1.6;
    text-align: center;
}


.btn {
    cursor: pointer;
    margin-top: 1.5rem;
    padding: 0.75rem 1.5rem;
    font-weight: bold;
    letter-spacing: 0.25rem;
    text-transform: uppercase;
    background-color: var(--negro);
    border: 1px solid var(--blanco);
    border-radius: 100vmax;
}

.btn a {
    color: white;
    font-size: 1rem;
}

.btn:hover {
    background-color: #262626;
}


/*
    Nosotros
*/
#nosotros {
    padding: 4rem;
}

.nosotros {
    padding: 2rem;
    display: flex;
    background-color: #153b54;
}

.nosotros-text {
    color: var(--blanco);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2rem;
}

.nosotros-text p {
    line-height: 1.5;
    font-size: 1.2em;
    margin-bottom: 1rem;
}

.nosotros-img img {
    border-radius: 8px;
}

#galeria {
    padding: 0 4rem 4rem 4rem;

}

.card-container {
    padding-top: 2rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    column-gap: 2rem;
    row-gap: 4rem;
    margin: 0 auto;
}

.card-galeria h3 {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: bolder;
    font-size: 1.4em;
    color: var(--blanco);
    margin: 0px;
    text-align: center;
    /* opacity: 0;
    transition: opacity 1s; */
}

.card-galeria p, .card-galeria a {
    /* position: absolute;
    bottom: 2rem;
    padding-left: 1rem; */
    color: var(--blanco);
    font-size: 1.2em;
    text-align: center;

    /* opacity: 0;
    transition: opacity 1s; */
}

.puesto-contacto {
    margin-top: auto;
    padding: 0 1rem;
    opacity: 1;
    transition: opacity 1s;
}

.btn-contacto {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    width: 90%;
    border-radius: 100vmax;
    border: 2px solid var(--blanco);
    color: var(--blanco);
    background-color: var(--azul);
    padding: .5rem 1rem;
    margin: 2rem 0;
    transition: all .5s;
}

.btn-contacto:hover,
.btn-contacto:active,
.btn-contacto:focus {
    background-color: #524e6a;
    box-shadow: 0 5px 6px rgba(255, 255, 255, 0.3);
}

.border {
    display: flex;
    flex-direction: column;
    height: 369px;
    width: 300px;
    background: transparent;
    border-radius: 10px;
    transition: border 1s;
    position: relative;
}

.border:hover,
.border:active,
.border:focus {
  border: 1px solid var(--blanco);
}

.card-galeria {
  height: 379px;
  width: 310px;
  background: #808080;
  border-radius: 10px;
  transition: background 0.8s;
  overflow: hidden;
  background: #000;
  box-shadow: 0 70px 63px -60px #000;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}


.card0 {
    background: url(../images/javier.jpg) center center no-repeat;
    background-size: 310px;
  }
  .card0:hover,
  .card0:active,
  .card0:focus {
    background: linear-gradient( to right, rgba(0,0,0,0.9),rgba(0,0,0,0.3) ), url(../images/javier.jpg) left center no-repeat;
    background-size: 600px;
  }
  .card-galeria:hover h3,
  .card-galeria:active h3,
  .card-galeria:focus h3 {
    opacity: 1;
  }
  .card-galeria:hover .puesto-contacto,
  .card-galeria:active .puesto-contacto,
  .card-galeria:focus .puesto-contacto {
    opacity: 1;
  }
  
  .card1 {
  background: url(../images/ruben.jpg) center center no-repeat;
  background-size: 350px;
}
.card1:hover,
.card1:active,
.card1:focus {
  background: linear-gradient( to right, rgba(0,0,0,0.9),rgba(0,0,0,0.3) ), url(../images/ruben.jpg) left center no-repeat;
  background-size: 600px;
}
.card1:hover h3,
.card1:active h3,
.card1:focus h3 {
  opacity: 1;
}
.card1:hover p,
.card1:active p,
.card1:focus p {
  opacity: 1;
}

.card2 {
    background: url(../images/eddy.jpeg) center center no-repeat;
    background-size: 350px;
}
.card2:hover,
.card2:active,
.card2:focus {
    background: linear-gradient( to right, rgba(0,0,0,0.9),rgba(0,0,0,0.3) ), url(../images/eddy.jpeg) left center no-repeat;
    background-size: 600px;
}
.card2:hover h3,
.card2:active h3,
.card2:focus h3 {
    opacity: 1;
}
.card2:hover p,
.card2:active p,
.card2:focus p {
    opacity: 1;
}

.card3 {
    background: url(../images/francisco.jpg) center center no-repeat;
    background-size: 350px;
}
.card3:hover,
.card3:active,
.card3:focus {
    background: linear-gradient( to right, rgba(0,0,0,0.9),rgba(0,0,0,0.3) ), url(../images/francisco.jpg) left center no-repeat;
    background-size: 600px;
}
.card3:hover h3,
.card3:active h3,
.card3:focus h3 {
    opacity: 1;
}
.card3:hover p,
.card3:active p,
.card3:focus p {
    opacity: 1;
}

.card4 {
    background: url(../images/emmanuel.jpg) center center no-repeat;
    background-size: 350px;
}
.card4:hover,
.card4:active,
.card4:focus {
    background: linear-gradient( to right, rgba(0,0,0,0.9),rgba(0,0,0,0.3) ), url(../images/emmanuel.jpg) left center no-repeat;
    background-size: 600px;
}
.card4:hover h3,
.card4:active h3,
.card4:focus h3 {
    opacity: 1;
}
.card4:hover p,
.card4:active p,
.card4:focus p {
    opacity: 1;
}

.card5 {
    background: url(../images/joana.jpg) center center no-repeat;
    background-size: 350px;
}
.card5:hover,
.card5:active,
.card5:focus {
    background: linear-gradient( to right, rgba(0,0,0,0.9),rgba(0,0,0,0.3) ), url(../images/joana.jpg) left center no-repeat;
    background-size: 600px;
}
.card5:hover h3,
.card5:active h3,
.card5:focus h3 {
    opacity: 1;
}
.card5:hover p,
.card5:active p,
.card5:focus p {
    opacity: 1;
} 
 

/*
    Diferenciadores
*/
#diferenciadores {
    padding: 4rem;
}


/*
    Contacto
*/
#contacto {
    color: var(--blanco);
    margin-top: 4rem;
    padding: 4rem;
    background-image: linear-gradient(to left, rgb(51, 51, 51, 0.6), rgb(0, 0, 0, 0.9)), url(../images/contacto.jpg);
    background-image: -webkit-linear-gradient(to left, rgb(51, 51, 51, 0.6), rgb(0, 0, 0, 0.9)), url(../images/contacto.jpg);
    background-size: cover;
}

#contacto>h2 {
    padding: 0 2rem;
    color: var(--blanco);
    border-bottom: 2px solid var(--blanco);
}

#contacto h3 {
    color: var(--blanco);
    position: relative;
    text-transform: uppercase;
    padding-bottom: 1rem;
}

.contacto ul li {
    display: flex;
    align-items: center;
    padding-bottom: 1rem;
}

.contacto ul li a {
    color: var(--blanco);
    padding-left: .5rem;
}

.contacto ul li a:hover {
    color: var(--background);
}

.contacto ul li img {
    height: 24px;
}

.aviso-privacidad {
    color: var(--blanco);
}

.aviso-privacidad:hover {
    color: #bfbfde;
}

#aviso {
    padding: 4rem;
    display: none;
}

#aviso p, #aviso h4, #aviso ul li {
    padding-bottom: 1rem;
}

#aviso ul {
    list-style: disc;
}

.cerrar-btn {
    cursor: pointer;
    padding: .5rem 1rem;
    border: 2px solid var(--negro);
    text-transform: uppercase;
    letter-spacing: 2px;
}

.mapa {
    margin-top: 4rem;
}

.mapa iframe {
    border-radius: 6px;
    box-shadow: 8px 8px 12px rgba(0, 0, 0, 0.8);
}

.ti-conmigo {
    color: #fff;
    background-color: #000000;
    padding: 1rem 0;
}


/* 

    Adapatación a dispositivos móviles

*/
@media (max-width: 768px) {

    .brand-title {
        max-height: 100px;
    }
    .brand-title h1 {
        font-size: 1.1em;
    }
    .brand-title img {
        max-height: 80px;
    }

    #nosotros, #servicios, #diferenciadores {
        padding: 2rem 1rem;
    }

    .nosotros-text {
        padding: 1rem;
    }

    .nosotros-text p {
        font-size: 1em;
    }

    #contacto {
        padding: 4rem 1rem;
    }

    .contacto {
        padding: 2rem 1rem;
    }

    .contacto ul li a img {
        padding-right: .2rem;
    }

    .info-contacto {
        padding: 0rem;        
    }
    .contact-form {
        padding: 2rem 1rem;
    }

    .contact-form h3 {
        text-align: center;
    }

    .email-input {
        margin-bottom: 1rem;
    }

    #contactForm button {
        width: 100%;
    }

    #galeria {
        padding: 0 .5rem;
        margin-bottom: 3rem;
    }

    .card-galeria {
        width: 310px;
    }


    #edictos {
        padding: 4rem 1rem;
        width: 100%;
        overflow: hidden;
    }

    #edictos h3 {
        font-size: 2em;
        padding-bottom: 2rem;
    }
    
    #edictos h4 {
        font-size: 1.5em;
    }
    
    #edictos p {
        font-size: 1em;
    }  

    .card-edictos {
        max-width: 310px;
    }

    .diferenciadores {
        padding: 2rem;
    }

    .diferenciadores h3 {
        font-size: 1.5em;
        line-height: 1.2;
    }

}