html * {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    box-sizing: border-box;
	scroll-behavior: smooth;
}

body {
  font-family: "Inter", sans-serif;
  color: #6B6867;
  margin: 0;
  font-weight:400;
  padding:0;
  font-size:0.85rem;
  position:relative;
  overflow-x:hidden;
  scroll-behavior: smooth;
  background-color:#EBEBEB;
}

::before, ::after {box-sizing: border-box;}

:root {
  --animate-delay:0.5s;
  --select-border:blue;
  --select-focus:blue;
}

a {font-family: "Inter", sans-serif; font-weight:400;}



#loader {position:absolute; width: 100%; height:100%; background-color:#EBEBEB; left:0px; top:0px; z-index: 9999999999; }
#logotipo {position:relative; width:178px; height:132px; top:50%; left:50%; margin-left:-89px; margin-top:-66px; opacity:0;}

.aviso { display:none !important; width:100%;  height:100%; max-width:100%; min-height:100vh; padding: 0; margin:0; position:absolute;  z-index:99999999999; background-color:black;}
.aviso h1 {font-size:1.5rem; font-weight:600; color:white; width:600px; height:100vh; margin: 0 auto; display:flex; flex-direction:column; justify-content:center; align-items:center;}

.page-container {
    display: grid;
    grid-template-rows: auto 1fr auto; /* Header, Main Content, Footer */
    min-height: 100dvh; /* Use dynamic viewport height */
	
}

header {width:100%; height:120px !important; position:fixed !important; top:0; left:0; display:flex; flex-direction:row; justify-content:space-between; margin:auto 0; padding:0; z-index:500;}
#hide-header {transition: all .5s ease!important;}   

.primary-navigation {list-style:none; width: min-content; height:min-content;  display:flex; flex-direction:row; justify-content:space-between; position:absolute; right:3%; top:3vh; z-index:9999; margin:0; padding:0;}
.primary-navigation ul {display:flex; flex-direction:row; justify-content:space-between; position:absolute; right:4%; top:0; z-index:9999; margin:0; padding:0; list-style: none;}
.primary-navigation a{ width:auto; height:auto; text-decoration:none; font-family: "EB Garamond", serif; font-size:1.5rem; font-style:italic; font-weight:400; padding:0; margin-left:5rem; color:#373332;}
.primary-navigation a:hover, .primary-navigation a.active {color:black; text-decoration:underline;}
 

.burger { display:none; border: 0; width:60px; height:auto; padding: 0;  background: url("../images/menu.svg") no-repeat bottom;  position: absolute; top:2vh; right:2vh; z-index:99999; cursor: pointer;}
.mobile-nav-toggle { cursor: pointer; display:none; border: 0; width:130px; height:40px; padding: 0; color:black; background: url("../images/logo_grajales.svg") no-repeat center; transition: opacity 250ms ease; position: absolute; top:1.5rem; z-index:99999;}

.logo {position:absolute; left:3%; top:3vh; width: auto; height:auto; display:block; z-index:300; margin: 0 auto; padding:0;}
.logo img {height:70px; width:auto; max-width:auto; }

main {
    /* The main content will grow to fill available space due to 1fr in grid-template-rows */
    overflow-y: auto; /* Add scroll to main content if it's taller than the viewport */
}

.partial-screen-section {
    height: 94dvh; /* Full height of the viewport */
    display: flex;
    justify-content: flex-start;
    align-items: center;
	overflow:hidden;
}


.full-screen-section {
    height: auto; /* Full height of the viewport */
    display: flex;
	flex-direction:column;
    justify-content: flex-start;
    align-items: center;
	margin:150px 0 5rem 0;
}

h1 {width:94%; height:auto; font-family: "EB Garamond", serif; font-size: clamp(1.75rem, 0.8929rem + 1.3393vw, 2.5rem); font-weight:400; color:#514D4D; margin:0 3% 3rem 3%; padding:0; text-align:left;}

.home {width:94%; height:auto; display:flex; justify-content:space-between; margin:0 3%; padding:0;}
.anim {
  position: relative;
  width: 45%;
  height: 70dvh;
  overflow: hidden; /* important */
}

/* ALL images stay absolute */
.anim-img {
  position: absolute;
  inset: 0; /* replaces top/left/width/height */
  margin: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;

  opacity: 0;
  transition: opacity 0.5s ease;
}

/* Only opacity changes */
.anim-img.active-img {
  opacity: 1;
}

.grupo {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.grupo.active-group {
  opacity: 1;
  z-index: 2;
}

.textos {width:45%; height:auto; margin:0; padding:0; display:flex; flex-direction:column; justify-content:start; position:relative;}
.textos p {width:auto; height:auto; font-family: "Inter", sans-serif; font-size:0.9rem; font-weight:300; color:#6B6867; line-height:1.3rem; margin:0 0 2rem 0; padding:0; text-align:justify;}
.textos p:nth-child(2) {margin:0 0 3rem 0 !important;}
.botones {width:100%; height:auto; display:flex; justify-content:space-between; margin:0 0 2rem 0; padding:0;}
.boton {width:28%; height:auto; font-family: "Inter", sans-serif; font-size:0.8rem; font-weight:400; color:#373332; display:flex; flex-direction:column; justify-content:center; margin:0; padding:0.5rem; border-radius: 30px; outline: 1px solid #373332; text-align:center; text-decoration:none;}
.botones a:hover, .botones a.active {background:#373332; color:#EBEBEB; outline: 1px solid #373332;}

.text-content {
  position: relative;
}

/* Each group behaves like one "slide" */
.text-item { position: absolute; top: 0; left: 0; width: 100%; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity 0.4s ease, transform 0.4s ease;}
.text-item p {width:auto; height:auto; font-family: "Inter", sans-serif; font-size:0.9rem; font-weight:300; color:#6B6867; line-height:1.3rem; margin:0; padding:0; text-align:justify;}
/* Active group */
.text-item.active-text { opacity: 1; visibility: visible; transform: translateY(0);}

.nosotros {width:94%; height:auto; display:flex; justify-content:space-between; margin:0 3% 3rem 3%; padding:0;}
.modulo {width:30%; height:auto; margin:0; padding:0;  display:flex; flex-direction:column;  justify-content:start; text-align:justify;}
.logo-nos {width:20%; height:auto; margin:0 0 2rem 0; padding:0;}
.modulo h1 {width:auto; height:auto; font-family: "EB Garamond", serif; font-size: clamp(1.75rem, 0.8929rem + 1.3393vw, 2.5rem); font-weight:400; color:#514D4D; margin:0 0 2rem 0; padding:0;}
.modulo p {width:auto; height:auto; font-family: "Inter", sans-serif; font-size:0.9rem; font-weight:300; color:#6B6867; line-height:1.3rem; margin:0 0 2rem 0; padding:0;}
.modulo h4 {width:auto; height:auto; font-family: "Inter", sans-serif; font-size:1.15rem; font-weight:400; color:#6B6867; line-height:1.3rem; margin:0 0 2rem 0; padding:0; text-align:right;}
.modulo a {width:auto; height:auto; font-family: "EB Garamond", serif; font-size:1.25rem; font-style:italic; font-weight:400; color:#6B6867; margin:0 0 2rem 0; padding:0; text-decoration:none; text-align:right;}
.modulo img {width:100%; height:auto; margin:0; padding:0;}


.servicios {width:94%; height:auto; display:flex; justify-content:space-between; margin:0 3% 2rem 3%; padding:0;}
.servicio {width:22%; height:auto;  display:flex; flex-direction:column;  justify-content:start; margin:0; padding:0; text-align:justify;}
.servicio h1 {width:auto; height:auto; font-family: "Inter", sans-serif; font-size:1.15rem; font-weight:400; color:#373332; line-height:1.3rem; margin:0 0 2rem 0; padding:0; text-align:left;}
.servicio p {width:auto; height:auto; font-family: "Inter", sans-serif; font-size:0.9rem; font-weight:300; color:#6B6867; line-height:1.3rem; margin:0 0 2rem 0; padding:0;}
.foto {width:48%; height:auto; margin:0; padding:0;}
.foto img {width:100%; height:auto; margin:0; padding:0;}


.proyectos {width:94%; height:auto; display:flex; justify-content:space-between; margin:0 3% 2rem 3%; padding:0;}

.listado {
  width: 75%;
  column-count: 3;
  column-gap: 2rem;
}

.listado a {
  display: inline-block;
  width: 100%;
  margin-bottom: 2rem;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.listado a:hover {
  opacity: 0.85;
  transform: translateY(-4px);
}

.listado a img {
  width: 100%;
  height: auto;
  display: block;
}

.overlay {width:100%; height:100%; display:flex; justify-content:space-between; position:fixed; background:#373332; margin:0; padding:0;  opacity: 0; transition: opacity 0.4s ease; z-index:500; display:none;}
.overlay.active {display: flex; opacity: 0.95;}
.info {width:94%; max-height:94dvh; display:flex; justify-content:space-between; align-items:center; margin:3%; padding:0;}
.imagen {width:70%; max-height:100%; display:flex; justify-content:center;align-items:center; margin:0; padding:0;}
.imagen img {width:auto; max-width:100%; max-height:94dvh; margin:0; padding:0; object-fit:contain; display: block; transition: opacity 0.3s ease;}
.ficha {width:20%; height:auto; display:flex; flex-direction:column; justify-content:start; margin:0 auto; padding:0; text-align:left;}
.cerrar {width:24px; height:24px; display:block; position:absolute; top:4%; right:2%; margin:0; padding:0; text-decoration:none;}
.cerrar img {width:24px; height:24px; margin:0; padding:0;}
.ficha h1 {width:auto; height:auto; font-family: "EB Garamond", serif; font-size: clamp(1.75rem, 0.8929rem + 1.3393vw, 2.5rem); font-weight:400; color:white; margin:0 0 2rem 0; padding:0;}
.ficha p {width:auto; height:auto; font-family: "Inter", sans-serif; font-size:0.9rem; font-weight:300; color:white; line-height:1.3rem; margin:0 0 0.5rem 0; padding:0;}
.ficha b {width:auto; height:auto; font-family: "Inter", sans-serif; font-size:0.9rem; font-weight:500; color:white; line-height:1.3rem; margin:0 0.5rem 0 0; padding:0;}
.navigation {
  margin-top: 2rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.navigation button {
  background: none;
  border: none;
  color: white;
  font-size: 1.2rem;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.3s ease;
}

.navigation button:hover {
  opacity: 1;
}

.navigation button:disabled {
  opacity: 0.2;
  cursor: default;
}

.counter {
  display: flex;
  align-items: center;
}

.counter .sep {
  margin: 0 1rem; /* spacing only around "de" */
  opacity: 0.7; /* subtle hierarchy */
}


.datos {width:25%; height:auto; margin:0; padding:0; display:flex; justify-content:end; align-content:end; text-align:justify;}
.datos p {width:80%; height:auto; font-family: "Inter", sans-serif; font-size:0.9rem; font-weight:300; color:#6B6867; line-height:1.3rem; margin:0 0 2rem 0; padding:0;}
.datos h4 {width:auto; height:auto; font-family: "Inter", sans-serif; font-size:1.15rem; font-weight:400; color:#6B6867; line-height:1.3rem; margin:0 0 2rem 0; padding:0; text-align:right;}
.datos a {width:auto; height:auto; font-family: "EB Garamond", serif; font-size:1.25rem; font-style:italic; font-weight:400; color:#6B6867; margin:0 0 2rem 0; padding:0; text-decoration:none; text-align:right;}
.datos img {width:100%; height:auto; margin:0; padding:0;}

.insta {width:20%; height:auto; margin:0; padding:0;}
.insta img {width:32px; height:auto; margin:0; padding:0;}

footer {width:94%; height:auto; display:flex; flex-direction:row; justify-content:space-between; align-items:center; margin:0; padding:0 3%;}
.address {width:auto; height:auto; margin:0; padding:0; display:flex; flex-direction:column; justify-content:space-between;}
.address p, .address a {width:auto; height:auto; font-family: "Inter", sans-serif; fontt-size:0.85rem; font-weight:400; color:#373332; margin:0; padding:0; }
.address a:hover {color:black; text-decoration:underline;}
.correo {width:auto; height:auto; margin:0; padding:0;}
.correo a {width:auto; height:auto; font-family: "EB Garamond", serif; font-size:1.2rem; font-style:italic; font-weight:400; color:#373332; text-decoration:none;}
.correo a:hover {color:black; text-decoration:underline;}
.redes {width:auto; height:auto; margin:0; padding:0;}
.redes a {width:28px; height:28px; margin:0; padding:0;}
.redes a img {width:28px; height:auto; margin:0; padding:0;}
footer a {width:auto; height:auto; font-family: "EB Garamond", serif; font-size:1.2rem; font-weight:400; color:#373332; text-decoration:none;}
.mobile {display:none;}


@media (max-width:35em) {
  #loader {position:absolute; width: 100%; height:100%; background-color:#EBEBEB; left:0px; top:0px; z-index: 9999999999; }
  #logotipo {position:relative; width:178px; height:132px; top:50%; left:50%; margin-left:-89px; margin-top:-66px; opacity:0;}
	
  header {width:100%; height:70px !important; position:fixed !important;  top:0; left:0; background-color:#EBEBEB; display:flex; justify-content:space-between; margin:auto 0; padding:0; z-index:500;}
  #hide-header {transition: all .5s ease!important;} 
  
  .primary-navigation a{ width:auto; height:auto; text-decoration:none; font-family: "EB Garamond", serif; font-size:1.15rem; font-style:italic; font-weight:400; padding:0; margin-left:1.5rem; color:#373332;}
  
   .logo {position:absolute; left:3%; top:3vh; width: auto; height:auto; display:block; z-index:300; margin: 0 auto; padding:0;}
   .logo img {height:40px; width:auto; max-width:auto; }
   
   .partial-screen-section {
    height: auto; /* Full height of the viewport */
    display: flex;
    justify-content: flex-start;
    align-items: center;
	overflow:auto;
	margin-top:60px;
    }
   
    .full-screen-section {
    height: auto; /* Full height of the viewport */
    display: flex;
	flex-direction:column;
    justify-content: flex-start;
    align-items: center;
	margin:100px 0 3rem 0;
    }
	
	h1 {width:94%; height:auto; font-family: "EB Garamond", serif; font-size: clamp(1.75rem, 0.8929rem + 1.3393vw, 2.5rem); font-weight:400; color:#514D4D; margin:0 3% 2rem 3%; padding:0; text-align:left;}
   
   .home {width:94%; height:auto; display:flex; flex-direction:column; justify-content:space-between; margin:0 3%; padding:0;}
   .anim {
	position: relative;
	width: 100%;
	height: 40dvh;
	overflow: hidden; /* important */
   }
    .textos {width:100%; height:auto; margin:0; padding:0; display:flex; flex-direction:column; justify-content:start; position:relative;}
	
	.botones {width:100%; height:auto; display:flex; flex-direction:column; justify-content:space-between; margin:0 0 1rem 0; padding:0;}
	.boton {width:94%; height:auto; font-family: "Inter", sans-serif; font-size:0.8rem; font-weight:400; color:#373332; display:flex; flex-direction:column; justify-content:center; margin:0 0 1rem 0; padding:0.5rem; border-radius: 30px; outline: 1px solid #373332; text-align:center; text-decoration:none;}
	
	.nosotros {width:94%; height:auto; display:flex; flex-direction:column; justify-content:start; margin:0 3% 2rem 3%; padding:0;}
	.modulo {width:100%; height:auto; margin:0; padding:0;  display:flex; flex-direction:column;  justify-content:start; text-align:justify;}
	.direccion, .vacio {display:none;}
	
	.servicios {width:94%; height:auto; display:flex; flex-direction:column; justify-content:space-between; margin:0 3% 2rem 3%; padding:0;}
	.servicio {width:100%; height:auto;  display:flex; flex-direction:column;  justify-content:start; margin:0; padding:0; text-align:justify;}
	.servicio h1 {width:auto; height:auto; font-family: "Inter", sans-serif; font-size:1.15rem; font-weight:400; color:#373332; line-height:1.3rem; margin:0 0 2rem 0; padding:0; text-align:left;}
	.servicio p {width:auto; height:auto; font-family: "Inter", sans-serif; font-size:0.9rem; font-weight:300; color:#6B6867; line-height:1.3rem; margin:0 0 2rem 0; padding:0;}
	.foto {width:100%; height:auto; margin:0 0 2rem 0; padding:0;}
	.foto img {width:100%; height:auto; margin:0; padding:0;}
	
	
	.proyectos {width:94%; height:auto; display:flex; flex-direction:column-reverse; justify-content:start; margin:0 3% 2rem 3%; padding:0;}
	.listado {width:100%; column-count: 2; column-gap: 1rem; margin:0; padding:0;}
	.listado a {display: inline-block; width: 100%; margin-bottom: 1rem; transition: opacity 0.3s ease, transform 0.3s ease;}
	
	.datos {width:100%; height:auto; margin:0; padding:0;}
	.datos p {width:100%; margin:0 0 1rem 0; padding:0;}
	
	.overlay {width:100%; height:100%; display:flex; flex-direction:column; justify-content:center; position:fixed; background:#373332; margin:0; padding:0;  opacity: 0; transition: opacity 0.4s ease; z-index:500; display:none;}
	.overlay.active {display: flex; opacity: 0.95;}
	.info {width:94%; max-height:94dvh; display:flex; flex-direction:column; justify-content:space-between; align-items:center; margin:3%; padding:0;}
	.imagen {width:100%; max-height:100%; display:flex; justify-content:center;align-items:center; margin:0; padding:0;}
	.imagen img {width:auto; max-width:100%; max-height:50dvh; margin:0; padding:0; object-fit:contain; transition: opacity 0.3s ease;}
	.ficha {width:100%; height:auto; display:flex; flex-direction:column; justify-content:start; margin:0 auto; padding:0; text-align:left;}
	.cerrar {width:24px; height:24px; display:block; position:absolute; top:4%; right:2%; margin:0; padding:0; text-decoration:none;}
	.cerrar img {width:24px; height:24px; margin:0; padding:0;}
	.ficha h1 {width:auto; height:auto; font-family: "EB Garamond", serif; font-size: clamp(1.75rem, 0.8929rem + 1.3393vw, 2.5rem); font-weight:400; color:white; margin:0 0 2rem 0; padding:0;}
	.ficha p {width:auto; height:auto; font-family: "Inter", sans-serif; font-size:0.9rem; font-weight:300; color:white; line-height:1.3rem; margin:0 0 0.5rem 0; padding:0;}
	.ficha b {width:auto; height:auto; font-family: "Inter", sans-serif; font-size:0.9rem; font-weight:500; color:white; line-height:1.3rem; margin:0 0.5rem 0 0; padding:0;}
	
	
	footer {width:94%; height:auto; display:flex; flex-direction:row; justify-content:space-between; align-items:center; margin:1rem 0 2rem 0 !important; padding:0 3%;}
	
	.address {width:70%; height:auto;  display:flex; flex-direction:column; justify-content:space-between; margin:0 !important; padding:0;}
	.adreess p {width:70%; height:auto; font-family: "Inter", sans-serif; fontt-size:0.85rem; font-weight:300; color:#373332; margin:0 !important; padding:0; }
	.address a {width:70%; height:auto; font-family: "EB Garamond", serif; font-style:italic; font-size:1.2rem; font-weight:300; color:#373332; margin:0 !important; padding:0;}
    .address a:hover {color:black; text-decoration:underline;}
	.mobile {width:70%; height:auto; display:block; font-family: "EB Garamond", serif; font-size:1rem; font-style:italic; font-weight:300; color:#373332; text-decoration:underline; margin:0 !important; padding:0;}
    .correo {display:none;}
	
}




@media only screen and (orientation:landscape) and (max-width:992px){.aviso {display:block !important; width:100%; height:100% !important;} .page-container {display:none;}}