:root{
  --blanco:#ffffff;
  --gris-claro:#f5f5f5;
  --gris-medio:#e4e4e4;
  --gris-texto:#444;
  --naranja:#f47c20; /* naranja del logo */
}

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:'IBM Plex Sans', sans-serif;
}

body{
  background:var(--blanco);
  color:var(--gris-texto);
  font-size:18px;
  /*line-height:1.7;*/  /* mejora lectura y aspecto premium */
}

/* HEADER */
header{
  background:var(--blanco);
  padding:15px 10%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid var(--gris-medio);
  position:fixed;
  width:100%;
  top:0;
  z-index:1000;
}

.logo img{
  height:50px;
}

nav a{
  color:var(--gris-texto);
  text-decoration:none;
  margin-left:25px;
  font-weight:bold;
  transition:0.3s;
}

nav a:hover{
  color:var(--naranja);
}

/* HERO */
.hero{
  background:var(--gris-claro);
  text-align:center;
  padding:140px 10% 80px 10%;
}

.hero h1{
  font-size:38px;
  margin-bottom:20px;
  color:var(--naranja);
}


.hero h2{
  font-size:38px;
  margin-bottom:20px;
}

.hero p{
  font-size:18px;
  max-width:800px;
  margin:0 auto 30px;
  line-height:1.6;
}

.btn{
  background:var(--naranja);
  color:white;
  padding:14px 30px;
  text-decoration:none;
  border-radius:6px;
  font-weight:bold;
  transition:0.3s;
}

.btn:hover{
  opacity:0.85;
}

/* SECCIONES */
section{
  padding:90px 10%;
}

section:nth-child(even){
  background:var(--gris-claro);
}

section h2{
  margin-bottom:25px;
  font-size:28px;
}

section h2{
  margin-bottom:25px;
  font-size:28px;
  position:relative;
  display:inline-block;
  padding-bottom:12px;
}

section h2::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:60px;
  height:2px;
  background:var(--naranja);
}

/* CONTENEDOR */
.container{
  padding:100px 10%;
}

/* CABECERA */
.project-header{
  margin-bottom:40px;
}



.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:25px;
}

.card{
  background:var(--blanco);
  padding:25px;
  border-radius:10px;
  border:1px solid var(--gris-medio);
  transition:0.3s;
}

.card:hover{
  border-color:var(--naranja);
  transform:translateY(-4px);
}

.card h3{
  margin-bottom:15px;
  color:var(--naranja);
}

.card-icon{
  width:42px;
  height:42px;
  margin-bottom:18px;
  stroke:var(--naranja);
}

.card{
  background:var(--blanco);
  padding:35px;
  border-radius:8px;
  border:1px solid var(--gris-medio);
  transition:all 0.3s ease;
}

.card:hover{
  border-color:var(--naranja);
  transform:translateY(-6px);
  box-shadow:0 8px 25px rgba(0,0,0,0.05);
}

.card p{
  line-height:1.6;
  margin-bottom:10px;
}

.card ul li{
  margin-bottom:6px;
}

.card ul{
  margin-top:10px;
  padding-left:18px;
}

/* PROYECTOS */

.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 25px;
  margin-top: 30px;
}

.project-card {
  text-align: center;
  border: 1px solid var(--gris-medio);
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s ease;
  background: var(--blanco);
}

.project-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.05);
  border-color: var(--naranja);
}

.project-card h3 {
  font-size: 20px;
  color: var(--naranja);
  padding: 15px 10px 0 10px;
}

.project-card img {
  width: 100%;
  display: block;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  transition: transform 0.3s ease;
}

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

.project-images{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  padding:15px;
}

.project-images a{
  display:block;
  overflow:hidden;
  border-radius:6px;
}

.project-images img{
  width:100%;
  height:180px;              /* altura fija = aspecto profesional */
  object-fit:cover;          /* recorte elegante sin deformar */
  display:block;
  transition:all 0.3s ease;
}

.project-images img:hover{
  transform:scale(1.05);
}

/* Dos columnas de imagenes.
.project-images{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  padding:15px;
}
*/

.project-item{
  display:block;
  text-decoration:none;
  color:inherit;
}

/* TITULO */
.project-title-index{
  display:block;
  font-size:15px;
  font-weight:600;
  margin-bottom:4px;
  color:#333;
}

.project-item img{
  width:100%;
  height:180px;
  object-fit:cover;
  border-radius:6px;
  display:block;
  transition:all 0.3s ease;
}

.project-item:hover img{
  transform:scale(1.05);
}

.project-item:hover .project-title-index{
  color:var(--naranja);
}

.project-card{
  padding-bottom:10px;
}



.project-item{
  display:block;
  text-decoration:none;
  color:inherit;
  border:1px solid var(--gris-medio);
  border-radius:8px;
  overflow:hidden;
  background:var(--blanco);
  transition:all 0.3s ease;
}

.project-item:hover{
  transform:translateY(-4px);
  box-shadow:0 10px 30px rgba(0,0,0,0.05);
  border-color:var(--naranja);
}

.project-item img{
  width:100%;
  height:180px;
  object-fit:cover;
  display:block;
  transition:transform 0.3s ease;
}

.project-item:hover img{
  transform:scale(1.05);
}

/* TEXTO */
.project-text{
  padding:12px 14px;
  text-align:left;
}


/* ETIQUETA */
/*
.project-tag-index{
  display:inline-block;
  font-size:12px;
  padding:3px 8px;
  background:rgba(244,124,32,0.1);
  color:var(--naranja);
  border-radius:4px;
  margin-bottom:6px;
}*/
.project-tag{
  display:inline-block;
  font-size:13px;
  padding:4px 10px;
  background:rgba(244,124,32,0.1);
  color:var(--naranja);
  border-radius:4px;
  margin-bottom:10px;
}

/* RESULTADO */
.project-result-index{
  display:block;
  font-size:13px;
  color:#666;
}
.project-result{
  font-size:16px;
  color:#666;
}

.project-title{
  font-size:32px;
  margin-bottom:10px;
}

/* LAYOUT */
.project-layout{
  display:grid;
  gap:50px;
  grid-template-columns:2fr 1fr; /*2 Columnas*/
  align-items:start;
}

.project-layout-1C{
  display:grid;
  gap:50px;
  grid-template-columns:1fr; /*1 Columnas*/
  align-items:start;
}


/* DESCRIPCIÓN */
.project-description{
  line-height:1.7;
  margin-bottom:30px;
}

.project-description p{
  margin-bottom:15px;
}

/* GALERÍA */
.project-gallery{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:15px;
}

.project-gallery img{
  width:100%;
  max-width:500px;
  height:200px;
  object-fit:cover;
  border-radius:8px;
  border:1px solid var(--gris-medio);
  cursor:pointer;
  transition:0.3s;
}

.project-gallery img:hover{
  transform:scale(1.03);
}


/* PDF */
.project-pdf{
  background:var(--gris-claro);
  padding:20px;
  border-radius:8px;
  border:1px solid var(--gris-medio);
  position:sticky;
  top:100px;
}

.project-pdf h4{
  margin-bottom:10px;
  font-size:15px;
}

.project-pdf img{
  width:100%;
  height:auto;
  aspect-ratio:210 / 297;
  object-fit:contain;
  background:white;
  border-radius:6px;
  margin-bottom:10px;
  padding:5px;
}

.project-pdf a{
  display:block;
  text-align:center;
  background:var(--naranja);
  color:white;
  padding:10px;
  text-decoration:none;
  border-radius:6px;
  font-size:14px;
  font-weight:bold;
}

.project-pdf a:hover{
  opacity:0.85;
}

/* RESPONSIVE */
@media(max-width:900px){
  .project-layout{
    grid-template-columns:1fr;
  }

  .project-pdf{
    position:static;
  }
}

/* LIGHTBOX (VISOR) */
.lightbox{
  display:none;
  position:fixed;
  z-index:9999;
  left:0;
  top:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.9);
  justify-content:center;
  align-items:center;
}

.lightbox img{
  max-width:90%;
  max-height:90%;
  border-radius:6px;
}

.lightbox:target{
  display:flex;
}

.close {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 30px;
  color: white;
  cursor: pointer;
}

.lightbox img {
  touch-action: pan-y;
}

/* FOOTER */
footer {
  text-align:center;
  border-top:1px solid var(--gris-medio);
  background:var(--gris-claro);
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  padding: 20px;
  font-size: 14px;
}

footer a { /* enlace a la derecha */
  position: absolute;
  right: 20px;
  opacity: 0.6;
  font-size: 13px;
  text-decoration: none;
}

footer a:hover {
  opacity: 1;
}



/* CONTACTO */
#contacto p{
  margin-bottom:8px;
}

.contacto-icon2{
  stroke:var(--naranja);
}
.contacto-p{
	display: flex;
	align-items: center;
	gap: 6px;
}