@charset "utf-8";

*{margin:0px;padding: 0px;box-sizing: border-box;} *:not(p){margin: 0px;padding: 0px;text-decoration: none;list-style:none;text-shadow:none;font-weight: normal;box-sizing:border-box;-moz-box-sizing:border-box; /* Firefox */}
html {margin:0;padding:0; height: 100vh;} table {border-collapse:collapse;border-spacing:0;} h1,h2,h3,h4,h5,h6{margin: 0 auto;padding: 0;} header,nav,main,section,article,footer{margin: 0 auto;padding: 0;}
fieldset,img {border:0;} input{border:0 solid #001d26;padding:0;color:#000;width:100%;} address,caption,cite,code,dfn,th,var {font-style:normal;font-weight:normal;}
ol,ul {list-style:none;} caption,th {text-align:left;} q:before,q:after {content:'';} abbr,acronym { border:0;} a {outline: none; text-decoration: none;} a:hover {text-decoration-line: underline;}
small {font-size: 15px;} big{font-size: 80px;font-weight: bolder;} strong{font-weight: bolder;}

/* General Ideas Style */

body {
  background: #fdfbf6;
  font-family: "Cabin", sans-serif;
  letter-spacing: .5px;
  color: #3a3a39;
  margin:0px;
  padding:0px;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-font-smoothing: subpixel-antialiased !important; 
  text-rendering:optimizeLegibility !important;
    -webkit-text-size-adjust: 100%; /* Chrome/Safari/Opera */
  -moz-text-size-adjust: 100%;    /* Firefox (older) */
  -ms-text-size-adjust: 100%;     /* IE */
  text-size-adjust: 100%;         /* Standard */
}

.ie7 body {overflow:hidden;} a{text-decoration: none;} .clr{clear: both;} .but{background-color: #255e98;color: white;font-size: 16px;padding: 0;text-align: center;width: 2%;float: right;margin-right: 10px;cursor: crosshair;}

img {width: 100%;height: auto;}

b{
  font-weight: 700;
}





/******************************************************
        SEMBLANZA
*******************************************************/

.semblanza{
  display: grid;
  grid-template-columns: 1fr 55%;
  grid-template-areas: 
  "h1  semb"
  "h1  semb";
  align-items: center;
  justify-items: start;
  grid-gap: 20px;
  width: 70%;
  margin: 0 auto;
  padding: 50px 0 50px 0;
}

h1{
  grid-area: h1;
  color: #666257;
  display: block;
  margin: 0 auto;
  text-align: left;
  font-size: 28px;
}

.semb p{
  grid-area: semb;
  text-align: justify;
  color: #666257;  
  justify-content: evenly;
  font-weight: 400;
  margin: 25px 0 25px 0;
  font-size: 14px;  
}

.tcenter{
  text-align: center;
  margin: 0 auto;
  justify-content: center;
  font-weight: 700;
  font-style: italic;
  font-size: 14px;   
}


/******************************************************
        PORTFOLIO
*******************************************************/

.h2{
  display: block;
  color: #666257;  
  text-align: left;
  text-transform: uppercase;
  font-weight: 600;
  margin: 0 auto;
  font-size: 16px;
  line-height: 18px;  
  padding: 0 0 0 40px;
}

.portfolio {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  text-align: left;
  justify-content: start;
  background: none;
  padding: 0;
  max-width: 100%;
  margin: 0 auto;
  padding: 20px 40px; 
}

.grid {
  text-align: left;
  justify-content: start;
  display: grid;
  transition: all 0.5s ease;  
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  width: 100%;
  margin: 0 auto;
  padding: 0;
}

.project-item {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 0 auto;
  padding: 0;
}

.project-item img {
  object-fit: cover;
  transition: transform 0.5s ease;  
  width: 100%;
  /* CAMBIO 3: Asegurar que la imagen llene el cuadrado */
  height: 100%; 
}

.project-item:hover img {
  transform: scale(1.03);
  filter: brightness(1.2); /* Bajé un poco el brillo para que no se lave tanto la imagen */
}

.descripcion {
  color: white;  
  font-size: 13px;
  color: black;
  padding: 8px 0; 
  margin: 0;
  text-align: left;
}


/******************************************************
        RETAIL
*******************************************************/

.retail{
  display: block;
  color: #666257;  
  text-align: left;
  text-transform: uppercase;
  font-weight: 600;
  margin: 0 auto;
  font-size: 16px;
  line-height: 18px;  
  padding: 40px 40px 0 40px;
}

.portfolio3 {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  text-align: left;
  justify-content: start;
  background: none;
  padding: 0;
  width: 100%;
  margin: 0 auto;
  padding: 0 40px 60px 40px; 
}

.grid3 {
  text-align: left;
  justify-content: start;
  display: grid;
  transition: all 0.5s ease;  
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 40px;
  width: 100%;
  margin: 0 auto;
  padding: 0;
}

.project-item-r {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 30px auto;
  padding: 0;
  width: 100%;
  height: 600px;
}

.project-item-r img {
  object-fit: cover;
  transition: transform 0.5s ease;  
  width: 100%;
  /* CAMBIO 3: Asegurar que la imagen llene el cuadrado */
  height: 600px; 
}

.project-item-r:hover img {
  transform: scale(1.03);
  filter: brightness(1.2); /* Bajé un poco el brillo para que no se lave tanto la imagen */
}


.grid3 {
  text-align: left;
  justify-content: start;
  display: grid;
  transition: all 0.5s ease;  
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 40px;
  width: 100%;
  margin: 0 auto;
  padding: 0;
}

.project-item-r {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 30px auto;
  padding: 0;
  width: 100%;
  height: 600px;
}

.project-item-r img {
  object-fit: cover;
  transition: transform 0.5s ease;  
  width: 100%;
  /* CAMBIO 3: Asegurar que la imagen llene el cuadrado */
  height: 600px; 
}

.project-item-r:hover img {
  transform: scale(1.03);
  filter: brightness(1.2); /* Bajé un poco el brillo para que no se lave tanto la imagen */
}


/******************************************************
        INTERNAS
*******************************************************/
.proyecto p a{
  color: #3a3a39;
  text-decoration: none;
}

.proyecto p a:hover{
  text-decoration: underline;
}


.gold{
color: #b28e2d;
}

.ficha-tecnica{
  position: relative;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  margin: 0 auto;
  padding: 0;
}

.foto-interna{
  display: block;
  width: 100%;
  height: 100vh;
  margin: 0 auto;
  padding: 0;
  text-align: center;
  z-index: 0;
}

.foto-interna img{
  width: 100%;
  max-width: 100%;
  max-height: 100vh;
  height: 100%;
  object-fit: cover;
  object-position: 100% 20%;
  filter: brightness(95%) contrast(105%);  
}

.h1{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
 -webkit-transform: translate(-50%, -50%); 
  color: #f5f1e5;
  display: block;
  margin: 0 auto;
  z-index: 9999;
  text-align: center;
  font-size: 36px;
  line-height: 45px;
  letter-spacing: 15px;
  text-shadow: 2px 2px 1px rgba(0,0,0,0.8);
}

h4{
  position: absolute;
  top: 56%;
  left: 50%;
  width: 100%;
  transform: translate(-50%, -50%);
 -webkit-transform: translate(-50%, -50%); 
  color: #f5f1e5;
  display: block;
  margin: 0 auto;
  z-index: 9999;
  text-align: center;
  font-size: 14px;
  line-height: 17px;
  letter-spacing: 10px;
  text-shadow: 1px 1px .3px rgba(0,0,0,0.8);
}

.place{
  font-size: 20px;
  line-height: 60px;
  letter-spacing: 20px;
}


.resumen{
  position: absolute;
  bottom: 0;
  left: 50%;
  color: white;  
  transform: translate(-50%, -50%);
 -webkit-transform: translate(-50%, -50%,);   
  width: 55%;
  text-align: center;
  justify-content: center;
  font-weight: 300;
  z-index: 9999;  
  margin: 0 auto;
  font-size: 16px;
  line-height: 18px;
  padding: 0 0 10px 0;
  letter-spacing: 1px;
  text-shadow: 1px 1px .3px rgba(0,0,0,.9);
}


.ficha-proyecto{
  display: grid;
  grid-template-columns: 20% 1r;
  grid-template-areas: 
  "proyecto  foto";
  align-items: center;
  grid-gap: 30px;
  width: 75%;
  margin: 0 auto;
  padding: 50px 0 50px 0;
}

.proyecto{
  grid-area: proyecto;
  width: 100%;
  padding: 0;
  margin: 0 auto;
  align-self: start;
}

h5{
  font-size: 14px;
  font-weight: 500;
}

.proyecto p{
  font-size: 13px;
  font-weight: 400;
  margin: 0 0 25px 0;  
}

.foto-int-01{
  grid-area: foto;
  text-align: center;
  justify-self: center;
  width: 85%;
  filter: brightness(1.1); 
}

.foto-int-01:hover{
  filter: brightness(1.25);    
}

.foto-int-01 img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 0% 100%;
}


/******************************************************
     PORTFOLIO 2
*******************************************************/

.portfolio2 {
  display: block;
  background: none;
  padding: 0;
  width: 100%;
  margin: 0 auto;
  padding: 40px 0 40px 0;   
}

.titulo-internas{
  display: block;
  color: #666257;  
  text-align: left;
  text-transform: uppercase;
  font-weight: 600;
  margin: 0 auto;
  font-size: 16px;
  line-height: 18px;  
  padding: 0 0 0 40px; 
}

.grid2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    margin: 0 auto;    
    grid-gap: 40px;
    padding: 20px 0 40px 0;
    max-width: 100%; /* Ancho máximo solicitado */
}

/* Elemento base */
.grid2 > div {
    overflow: hidden;
    background-color: #000000;
}

/* Fotos completas (1, 4, 7): Se extienden por las 2 columnas */
.item-full {
    grid-column: span 2;
    aspect-ratio: 16 / 9; /* Modifica esta proporción para cambiar su altura */
}

/* Control de las imágenes y efectos */
.item-full img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Recorte perfecto */
    object-position: 50% 50%;
    display: block;
    filter: brightness(1);
    transition: filter 0.3s ease-in-out;
}

/* Efecto hover de brillo */
.item-full img:hover {
    filter: brightness(1.25);
}

/* Fotos a la mitad (2, 3, 5, 6, 8, 9): Ocupan solo 1 columna */
.item-half {
    grid-column: span 1;
    aspect-ratio: 3 / 4; /* Aspect ratio vertical exacto solicitado */
    width: 80%;
    max-height: 800px;
    margin: 0 auto;
    text-align: center;
}

/* Control de las imágenes y efectos */
.item-half img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Recorte perfecto */
    object-position: 50% 45%;    
    display: block;
    filter: brightness(1);
    transition: filter 0.3s ease-in-out;
}

/* Efecto hover de brillo */
.item-half img:hover {
    filter: brightness(1.25);
}


/******************************************************
         PROYECTOS PROCESO
*******************************************************/
.foto-proyecto-proceso{
  display: block;
  position: relative;
  top: 30px;
  right: 0;
  width: 100%;
  z-index: 1;  
}

.proyecto-proceso{
  font-size: 13px;
  display: block;
  position: absolute;
  top: 50%;
  left: 40px;
  width: 30%;
  z-index: 2;
}

.portfolio4 {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  text-align: left;
  justify-content: start;
  background: none;
  padding: 0;
  width: 100%;
  margin: 0 auto;
  padding: 0 40px 60px 40px; 
}

.grid4 {
  text-align: left;
  justify-content: start;
  display: grid;
  transition: all 0.5s ease;  
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 40px;
  width: 100%;
  margin: 0 auto;
  padding: 0;
}


/******************************************************
        DESARROLLOS
*******************************************************/
.foto-desarrollos{
  display: block;
  width: 100%;
  height: 100vh;
  margin: 0 auto;
  padding: 0;
  text-align: center;
  z-index: 0;
}

.foto-desarrollos img{
  width: 100%;
  max-width: 100%;
  max-height: 100vh;
  height: 100%;
  object-fit: cover;
  object-position: 100% 50%;
  filter: brightness(95%) contrast(105%);  
}


.grid5 {
  text-align: left;
  justify-content: start;
  display: grid;
  transition: all 0.5s ease;  
  grid-template-columns: 1fr 1fr;
  grid-gap: 40px;
  width: 100%;
  margin: 0 auto;
  padding: 0;
}

.project-item-d {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 30px auto;
  padding: 0;
  width: 100%;
  height: 600px;
}

.project-item-d img {
  object-fit: cover;
  transition: transform 0.5s ease;  
  width: 100%;
  /* CAMBIO 3: Asegurar que la imagen llene el cuadrado */
  height: 600px; 
}

.project-item-d:hover img {
  transform: scale(1.03);
  filter: brightness(1.2); /* Bajé un poco el brillo para que no se lave tanto la imagen */
}


/******************************************************
        COTIZACIONES
*******************************************************/
.cotizaciones{
  display: grid;
  text-align: center;
  color: #666257;
  margin: 0 auto;
  padding: 0;
  width: 100%;
  height: 100vh;
  font-size: 14px;
  grid-template-columns: 1fr 55%;
  grid-template-areas: 
  "formas   contactofoto";

}

.h1-cot{  
  font-size: 17px;
  text-align: center;
  text-transform: uppercase;
}

.formas{
  grid-area: formas;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  align-self: center;
}

.cotizaciones p a{
  color: #666257;
  text-decoration: underline;
}

.cotizaciones p a:hover{
  text-decoration:none;
}

.contact{
  margin: 20px auto;
}

.pic-c{
  grid-area: contactofoto;
  width: 100%;
  margin: 0 auto;
  padding: 0;
  text-align: center;
}

.pic-c img{
  width: 100%;
  max-width: 88%;
  object-fit: cover;
}

.forma{
  background: none;
  display: block;
  text-align: center;
  width: 80%;
  font-size: 13px;
  margin: 10px auto;
}

form{
  margin: 0 auto;
  text-align: center;
  width: 100%;
}

.put{  
  background: #E8E5DC;
  color: #3F3D36;
  font-size: 14px;
  font-weight: 700;
  width: 100%;
  padding: 8px;
  margin: 10px auto;
}

.textosbut{
  background: #E8E5DC;
  color: #3F3D36;
  cursor: pointer;
  border-radius: 15px;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  width: 18%;
  margin: 15px 40px 10px 40px;
  padding: 5px;
}

.put2{
  font-family: "Cabin", sans-serif;  
  background: #E8E5DC;
  color: #3F3D36;
  font-size: 17px;
  font-weight: 700;
  width: 100%;
  padding: 8px;
  margin: 10px auto;
}

.textosbut:hover{
  text-decoration: underline;
}

.css-button-fully-rounded--green {
  font-family: "Cabin", sans-serif;  
  min-width: 130px;
  height: 40px;
  color: #fff;
  padding: 10px 12px;
  font-weight: font-bold;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
  outline: none;
  border-radius: 20px;
  border: 2px solid #57cc99;
  background: #57cc99;
}
.css-button-fully-rounded--green:hover {
  background: #fff;
  color: #57cc99
}


/******************************************************
        AVISO
*******************************************************/
.privacidad{
  background-image: url(../images/aviso-arkz-arquitectos.png);
  display: block;
  text-align: center;
  color: #666257;
  margin: 100px auto;
  padding: 40px 40px 40px 40px;
  width: 100%;
  font-size: 14px;
}

.t-aviso{
  width: 100%;
}

.t-aviso p{
  width: 100%;
  text-align: justify;
  font-weight: 600;
  margin: 20px auto;
}

.pic-a{
  display: block;
  width: 100%;
  margin: 0 auto;
  padding: 0;
  text-align: center;
}

.pic-a img{
  width: 100%;
  max-width: 50%;
  object-fit: cover;
}


/******************************************************
         FOOTER
*******************************************************/

footer{
  text-transform: uppercase;
  background: none;
  color: #3a3a39;
  width: 100%;
  display: grid;
  align-items: center;
  justify-items: end;
  text-align: right;  
  grid-template-columns: 1fr 75%;
  grid-template-areas: 
  "arkz redes";
  font-size: 13px;
  margin: 0 auto;  
  padding: 0;
}

.arkz{
  grid-area: arkz;
  width: 100%;
  text-align: left;
  justify-content: start;
  padding: 0 0 25px 40px;
  font-size: 13px;
  line-height: 25px;  
}

.arkz p a{
  color: #3a3a39;
  font-size: 13px;
  line-height: 25px;
}

.arkz p a:hover{
  color: #3a3a39;
  text-decoration: underline;
}

.redes{
  grid-area: redes;
  width: 100%;
}

.redes a{
  color:#3a3a39;
  text-align: right;
  justify-self: end;  
  font-size: 20px;
  padding: 0 40px 0 20px;  
}

.redes a:hover{
  color: #3a3a39;
}


/******************************************************
          MOOD TABLETAS
    [ MEDIA all 762-1100 ]
*******************************************************/
@media all and (min-width: 1101px) and (max-width: 1360px)
{

.grid2 {
  grid-gap: 15px; /* Reducimos espacio en pantallas medianas/chicas */
}


}

/******************************************************
          MOOD TABLETAS
    [ MEDIA all 762-1100 ]
*******************************************************/
@media all and (min-width: 762px) and (max-width: 1100px)
{

/******************************************************
        SEMBLANZA
*******************************************************/

.semblanza{
  grid-template-columns: 1fr 65%;
  grid-template-areas: 
  "h1  semb"
  "h1  semb";
  align-items: center;
  justify-items: start;
  grid-gap: 20px;
  width: 100%;
  margin: 0 auto;
  padding: 40px 60px;
}

h1{
  text-align: left;
  font-size: 21px;
  width: 100%;
}

.semb p{
  margin: 25px 0 25px 0;
  font-size: 13px;  
}

.tcenter{
  font-size: 14px;   
}

/******************************************************
        PORTFOLIO
*******************************************************/
.h2{
  background: none;
  font-size: 14px;
  line-height: 17px;  
  padding: 0 0 0 25px; 
  letter-spacing: 1px;
}


.portfolio {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  text-align: left;
  justify-content: start;
  background: none;
  padding: 0;
  max-width: 100%;
  margin: 0 auto;
  padding: 10px 25px; 
}

.grid {
  text-align: left;
  justify-content: start;
  display: grid;
  transition: all 0.5s ease;  
  grid-template-columns: 1fr 1fr;
  gap: 25px;
  width: 100%;
  margin: 0 auto;
  padding: 0;
}

/******************************************************
        INTERNAS
*******************************************************/
.retail{
  font-size: 14px;
  line-height: 18px;  
  padding: 40px 25px 0 25px;
}

.portfolio3 {
  padding: 0 25px 60px 25px; 
}

.grid3 {
  text-align: left;
  justify-content: start;
  display: grid;
  transition: all 0.5s ease;  
  grid-template-columns: 1fr 1fr;
  grid-gap: 25px;
  width: 100%;
  margin: 0 auto;
  padding: 0;
}

.project-item-r {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 20px auto;
  padding: 0;
  width: 100%;
  height: 250px;
}

.project-item-r img {
  height: 250px;
}


.ficha-proyecto{
  display: grid;
  grid-template-columns: 20% 1fr;
  grid-template-areas: 
  "proyecto  foto";
  grid-gap: 15px;
  width: 90%;
  margin: 0 auto;
  padding: 50px 0 0 0;
}

.foto-int-01{
  text-align: right;
  justify-self: right;
}

.foto-int-01 img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}


/******************************************************
     PORTFOLIO 2
*******************************************************/

.portfolio2 {
  display: block;
  background: none;
  padding: 0;
  width: 100%;
  margin: 0 auto;
  padding: 40px 0 40px 0;   
}

.titulo-internas{
  display: block;
  color: #666257;  
  text-align: left;
  text-transform: uppercase;
  font-weight: 600;
  margin: 0 auto;
  font-size: 15px;
  line-height: 18px;  
  padding: 0 0 0 30px;
  letter-spacing: 1px;
}

    .grid2 {
        grid-gap: 15px; /* Reducimos espacio en pantallas medianas/chicas */
    }


/******************************************************
     PORTFOLIO 3
*******************************************************/

.retail{
  font-size: 14px;
  line-height: 18px;  
  padding: 40px 25px 0 25px;
}

.portfolio3 {
  padding: 0 25px 60px 25px; 
}

.grid3 {
  text-align: left;
  justify-content: start;
  display: grid;
  transition: all 0.5s ease;  
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 25px;
  width: 100%;
  margin: 0 auto;
  padding: 0;
}

.project-item-r {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 20px auto;
  padding: 0;
  width: 100%;
  height: 350px;
}

.project-item-r img {
  height: 350px;
}


/******************************************************
        DESARROLLOS
*******************************************************/


.grid5 {
  text-align: left;
  justify-content: start;
  display: grid;
  transition: all 0.5s ease;  
  grid-template-columns: 1fr 1fr;
  grid-gap: 15px;
  width: 100%;
  margin: 0 auto;
  padding: 0;
}

.project-item-d {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 30px auto;
  padding: 0;
  width: 100%;
  height: 500px;
}

.project-item-d img {
  object-fit: cover;
  transition: transform 0.5s ease;  
  width: 100%;
  /* CAMBIO 3: Asegurar que la imagen llene el cuadrado */
  height: 500px; 
}

.project-item-d:hover img {
  transform: scale(1.03);
  filter: brightness(1.2); /* Bajé un poco el brillo para que no se lave tanto la imagen */
}

/******************************************************
        COTIZACIONES
*******************************************************/
.cotizaciones{
  display: grid;
  text-align: center;
  color: #666257;
  margin: 0 auto;
  padding: 0 0 40px 0;
  width: 100%;
  height: auto;
  font-size: 14px;
  grid-template-columns: 1fr;
  grid-template-areas:
  "contactofoto"
  "formas";
}

.pic-c img{
max-width: 500px;
}

.forma{
width: 60%;
}


}


/******************************************************
          MOOD CELULARES
    [ MEDIA all 1-761 ]
*******************************************************/
@media all and (min-width: 1px) and (max-width: 761px)
{


/******************************************************
        SEMBLANZA
*******************************************************/

.semblanza{
  grid-template-columns: 1fr;
  grid-template-areas: 
  "h1"
  "semb";
  align-items: center;
  justify-items: start;
  grid-gap: 20px;
  width: 100%;
  margin: 0 auto;
  padding: 50px 30px 50px 30px;
}

h1{
  text-align: center;
  font-size: 20px;
  width: 100%;
}

.semb p{
  margin: 0 0 25px 0;
  font-size: 13px;  
}

.tcenter{
  font-size: 14px;   
}


/******************************************************
        PORTFOLIO
*******************************************************/

.h2{
  background: none;
  font-size: 14px;
  line-height: 17px;  
  padding: 0 0 0 15px; 
  letter-spacing: 1px;
}

.portfolio {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  text-align: left;
  justify-content: start;
  background: none;
  padding: 0;
  max-width: 100%;
  margin: 0 auto;
  padding: 0; 
}

.grid {
  text-align: left;
  justify-content: start;
  display: grid;
  transition: all 0.5s ease;  
  grid-template-columns: 1fr;
  gap: 30px;
  width: 100%;
  margin: 0 auto;
  padding: 10px;
}

.descripcion {
  color: white;  
  padding: 20px;
  font-size: 12.5px;
  line-height: 18px;
  color: black;
  padding: 8px 0; 
  margin: 0;
  text-align: left;
  letter-spacing: 1px;
}


/******************************************************
     INTERNAS
*******************************************************/
.h1{
  font-size: 26px;
  line-height: 28px;
  letter-spacing: 5px;
  text-shadow: 2px 2px 1px rgba(0,0,0,0.8);
}

h4{
  top: 55%;
  left: 50%;
  font-size: 14px;
  line-height: 17px;
  letter-spacing: 4px;
  text-shadow: 1px 1px .3px rgba(0,0,0,0.8);
}

.place{
  font-size: 14px;
  line-height: 40px;
  letter-spacing: 4px;
}

.resumen{
  width: 85%;
  font-size: 12.5px;
  line-height: 18px;
  padding: 0 0 5px 0;
  letter-spacing: 1px;
  text-shadow: 1px 1px .3px rgba(0,0,0,.9);  
}


.ficha-proyecto{
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: 
  "foto"
  "proyecto";
  grid-gap: 15px;
  width: 100%;
  margin: 0 auto;
  padding: 50px 30px 0 30px;
}

.foto-int-01{
  width: 100%;
  text-align: center;
  justify-self: center;
}

.foto-int-01 img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

h5{
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 1px;
}

.proyecto p{
  font-size: 12.5px;
  letter-spacing: 1px;  
  font-weight: 400;
  margin: 0 0 18px 0;  
}

/******************************************************
     PORTFOLIO 2
*******************************************************/

.portfolio2 {
  display: block;
  background: none;
  width: 100%;
  margin: 0 auto;
  padding: 0;   
}

.titulo-internas{
  display: block;
  color: #666257;  
  text-align: left;
  text-transform: uppercase;
  font-weight: 600;
  margin: 0 auto;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: 1px;  
  padding: 20px 0 0 15px; 
}

/******************************************************
     PORTFOLIO 3
*******************************************************/

.retail{
  font-size: 14px;
  line-height: 18px;  
  padding: 40px 25px 0 25px;
}

.portfolio3 {
  padding: 0 25px 60px 25px; 
}

.grid3 {
  text-align: left;
  justify-content: start;
  display: grid;
  transition: all 0.5s ease;  
  grid-template-columns: 1fr 1fr;
  grid-gap: 40px;
  width: 100%;
  margin: 0 auto;
  padding: 0;
}

.project-item-r {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 20px 0 45px 0;
  padding: 0;
  width: 100%;
  height: 300px;
}

.project-item-r img {
  height: 300px;
}


/******************************************************
         PROYECTOS PROCESO
*******************************************************/
.foto-proyecto-proceso{
  display: block;
  position: relative;
  top: 60px;
  right: 0;
  width: 100%;
  z-index: 1;
  margin: 0 0 15px 0; 
}

.proyecto-proceso{
  font-size: 12px;
  display: block;
  position: absolute;
  top: 30%;
  left: 20px;
  width: 38%;
  z-index: 2;
}

.portfolio4 {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  text-align: left;
  justify-content: start;
  background: none;
  padding: 0;
  width: 100%;
  margin: 0 auto;
  padding: 0 40px 60px 40px; 
}

.grid4 {
  text-align: left;
  justify-content: start;
  display: grid;
  transition: all 0.5s ease;  
  grid-template-columns: 1fr;
  grid-gap: 40px;
  width: 100%;
  margin: 0 auto;
  padding: 0;
}


/* Fotos completas (1, 4, 7): Se extienden por las 2 columnas */
.item-full {
    grid-column: span 2;
    aspect-ratio: 16 / 9; /* Modifica esta proporción para cambiar su altura */
}

/* Control de las imágenes y efectos */
.item-full img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Recorte perfecto */
    object-position: 50% 50%;
    display: block;
    filter: brightness(1);
    transition: filter 0.3s ease-in-out;
}

/* Efecto hover de brillo */
.item-full img:hover {
    filter: brightness(1.25);
}

/* Fotos a la mitad (2, 3, 5, 6, 8, 9): Ocupan solo 1 columna */
.item-half {
    grid-column: span 1;
    aspect-ratio: 3 / 4; /* Aspect ratio vertical exacto solicitado */
    width: 80%;
    max-height: 800px;
    margin: 0 auto;
    text-align: center;
}

/* Control de las imágenes y efectos */
.item-half img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Recorte perfecto */
    object-position: 50% 45%;    
    display: block;
    filter: brightness(1);
    transition: filter 0.3s ease-in-out;
}

/* Efecto hover de brillo */
.item-half img:hover {
    filter: brightness(1.25);
}


/******************************************************
        DESARROLLOS
*******************************************************/

.foto-desarrollos{
  display: block;
  width: 100%;
  height: 100vh;
  margin: 0 auto;
  padding: 0;
  text-align: center;
  z-index: 0;
}

.foto-desarrollos img{
  width: 100%;
  max-width: 100%;
  max-height: 100vh;
  height: 100%;
  object-fit: cover;
  object-position: 60% 20%;
  filter: brightness(95%) contrast(105%);  
}




.grid5 {
  text-align: left;
  justify-content: start;
  display: grid;
  transition: all 0.5s ease;  
  grid-template-columns: 1fr;
  grid-gap: 40px;
  width: 100%;
  margin: 0 auto;
  padding: 0;
}

.project-item-d {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 30px auto;
  padding: 0;
  width: 100%;
  height: 500px;
}

.project-item-d img {
  object-fit: cover;
  transition: transform 0.5s ease;  
  width: 100%;
  /* CAMBIO 3: Asegurar que la imagen llene el cuadrado */
  height: 500px; 
}

.project-item-d:hover img {
  transform: scale(1.03);
  filter: brightness(1.2); /* Bajé un poco el brillo para que no se lave tanto la imagen */
}

/******************************************************
        COTIZACIONES
*******************************************************/
.cotizaciones{
  display: grid;
  text-align: center;
  color: #666257;
  margin: 0 auto;
  padding: 0 0 40px 0;
  width: 100%;
  height: auto;
  font-size: 14px;
  grid-template-columns: 1fr;
  grid-template-areas:
  "contactofoto"
  "formas";
}

.pic-c img{
max-width: 500px;
}

.forma{
width: 60%;
}


/******************************************************
         FOOTER
*******************************************************/

footer{
  grid-template-columns: 1fr 160px;
  grid-template-areas: 
  "arkz redes";
  font-size: 13px;  
  padding: 10px;
  text-align: center;
}

.arkz{
  grid-area: arkz;
  width: 100%;
  text-align: left;
  justify-content: start;
  padding: 0 0  0 15px;
}

.arkz p a{
  color: #3a3a39;

}

.arkz p a:hover{
  color: #3a3a39;
  text-decoration: underline;
}

.redes{
  background: none;
  grid-area: redes;
  width: 100%;
}

.redes a{
  color:#3a3a39;
  text-align: center;
  justify-content: center;  
  font-size: 20px;
  line-height: 40px;
  padding: 40px 15px 20px 15px;  
}

.redes a:hover{
  color: #3a3a39;
}



}