:root{
      --amarillo:#f5ad16;
      --amarillo-hover:#e69c08;
      --oscuro:#071522;
      --texto:#13202d;
      --blanco:#ffffff;
      --gris:#f5f6f7;
      --ancho:1180px;
    }

    *{box-sizing:border-box;margin:0;padding:0}
    html{scroll-behavior:smooth}
    body{
      font-family:"Montserrat",sans-serif;
      color:var(--texto);
      background:#fff;
    }
    a{text-decoration:none;color:inherit}
    img{max-width:100%;display:block}

    .container{
      width:min(var(--ancho),calc(100% - 40px));
      margin:auto;
    }

    /* HEADER */
    .site-header{
      position:sticky;
      top:0;
      z-index:1000;
      background:rgba(255,255,255,.97);
      box-shadow:0 2px 18px rgba(0,0,0,.08);
    }
    .nav{
      min-height:88px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:30px;
    }
    .brand img{
      width:280px;
      max-height:68px;
      object-fit:contain;
      object-position:left center;
    }
    .nav-links{
      display:flex;
      align-items:center;
      gap:32px;
      list-style:none;
      margin-left:auto;
    }
    .nav-links a{
      font-size:13px;
      font-weight:600;
      color:#0c2032;
      position:relative;
      padding:34px 0 30px;
    }
    .nav-links a::after{
      content:"";
      position:absolute;
      left:0;
      right:100%;
      bottom:22px;
      height:3px;
      background:var(--amarillo);
      transition:.25s;
    }
    .nav-links a:hover::after,
    .nav-links a.active::after{right:0}

    .header-cta,
    .btn-primary{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      background:var(--amarillo);
      color:#071522;
      font-weight:800;
      border-radius:10px;
      transition:.2s;
    }
    .header-cta{
      min-height:48px;
      padding:0 23px;
      font-size:13px;
      white-space:nowrap;
    }
    .header-cta:hover,.btn-primary:hover{
      background:var(--amarillo-hover);
      transform:translateY(-1px);
    }

    .wa-icon{
      width:20px;
      height:20px;
      border:2px solid currentColor;
      border-radius:50%;
      display:inline-grid;
      place-items:center;
      font-size:12px;
      line-height:1;
    }

    .menu-btn{
      display:none;
      border:0;
      background:none;
      font-size:30px;
      cursor:pointer;
      color:var(--oscuro);
    }

    /* HERO */
    .hero{
      min-height:600px;
      position:relative;
      display:flex;
      align-items:center;
      color:#fff;
      background:
        linear-gradient(90deg,rgba(4,16,27,.88) 0%,rgba(4,16,27,.62) 47%,rgba(4,16,27,.18) 100%),
       url("../images/hero-nuevo-imperio.png") center/cover no-repeat;
    }
    .hero-content{
      width:min(680px,100%);
      padding:88px 0 96px;
    }
    .eyebrow{
      font-size:14px;
      font-weight:600;
      letter-spacing:7px;
      text-transform:uppercase;
      margin-bottom:18px;
    }
    .hero h1{
      font-size:clamp(48px,6vw,76px);
      line-height:.98;
      letter-spacing:-3px;
      font-weight:800;
      margin-bottom:24px;
    }
    .hero h1 span{
      display:block;
      color:var(--amarillo);
    }
    .hero p{
      font-size:19px;
      line-height:1.55;
      max-width:650px;
      margin-bottom:34px;
      color:rgba(255,255,255,.94);
    }
    .hero-actions{
      display:flex;
      gap:16px;
      flex-wrap:wrap;
    }
    .btn-primary,.btn-outline{
      min-height:55px;
      padding:0 26px;
      border-radius:10px;
      font-size:13px;
    }
    .btn-outline{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      border:2px solid rgba(255,255,255,.9);
      color:#fff;
      font-weight:700;
      transition:.2s;
    }
    .btn-outline:hover{
      background:#fff;
      color:var(--oscuro);
    }

    /* SERVICIOS */
    .services{
      background:#fff;
      padding:34px 0;
    }
   .services-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  max-width:1000px;
  margin:auto;
}
    .service{
  padding:24px 55px;
  border-right:1px solid #ddd;
  display:flex;
  align-items:center;
  gap:25px;
}

.service:last-child{
  border-right:0;
}

.service-icon{
  flex:0 0 auto;
  font-size:42px;
}
    .service:first-child{padding-left:0}
    .service:last-child{border-right:0}
    .service-icon{
      font-size:38px;
      margin-bottom:12px;
      filter:grayscale(1);
    }
    .service h3{
      font-size:18px;
      margin-bottom:7px;
      color:#111;
    }
    .service p{
      font-size:14px;
      line-height:1.5;
      color:#59616b;
    }

    /* placeholder para continuar luego */
    .next-section{
      padding:72px 0;
      text-align:center;
      background:var(--gris);
    }
    .next-section small{
      letter-spacing:5px;
      font-weight:700;
      color:#68717a;
    }
    .next-section h2{
      margin-top:10px;
      font-size:34px;
      color:var(--oscuro);
    }
    .next-section h2 span{color:var(--amarillo)}

    @media(max-width:900px){
      .nav{min-height:76px}
      .brand img{width:220px}
      .menu-btn{display:block}
      .header-cta{display:none}
      .nav-links{
        display:none;
        position:absolute;
        top:76px;
        left:0;
        right:0;
        padding:18px 20px 25px;
        background:#fff;
        box-shadow:0 15px 25px rgba(0,0,0,.12);
        flex-direction:column;
        gap:0;
      }
      .nav-links.open{display:flex}
      .nav-links li{width:100%}
      .nav-links a{
        display:block;
        padding:14px 0;
      }
      .nav-links a::after{bottom:7px}
      .hero{
        min-height:570px;
        background-position:62% center;
      }
      .hero h1{letter-spacing:-2px}
      .services-grid{grid-template-columns:repeat(2,1fr)}
      .service{border-bottom:1px solid #ddd}
      .service:nth-child(2){border-right:0}
      .service:nth-child(3),.service:nth-child(4){border-bottom:0}
      .service:nth-child(3){padding-left:0}
    }

    @media(max-width:560px){
      .container{width:min(100% - 28px,var(--ancho))}
      .brand img{width:185px}
      .hero{
        min-height:600px;
        background-position:65% center;
      }
      .hero-content{padding:70px 0}
      .eyebrow{font-size:11px;letter-spacing:4px}
      .hero h1{font-size:46px}
      .hero p{font-size:16px}
      .hero-actions{flex-direction:column}
      .btn-primary,.btn-outline{width:100%}
      .services-grid{grid-template-columns:1fr}
      .service,.service:first-child,.service:nth-child(3){
        padding:24px 0;
        border-right:0;
        border-bottom:1px solid #ddd;
      }
      .service:last-child{border-bottom:0}
    }
    /* PROYECTOS */

.projects{
  padding:75px 0 85px;
  background:#0b1219;
  color:#fff;
}

.projects-header{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:30px;
  margin-bottom:30px;
}

.projects-eyebrow{
  font-size:12px;
  letter-spacing:6px;
  font-weight:700;
  margin-bottom:12px;
  color:#b8c0c7;
}

.projects h2{
  font-size:clamp(32px,4vw,48px);
  line-height:1.1;
  font-weight:800;
}

.projects h2 span{
  color:var(--amarillo);
}

.projects-button{
  border:2px solid rgba(255,255,255,.8);
  border-radius:10px;
  padding:15px 22px;
  font-size:12px;
  font-weight:700;
  white-space:nowrap;
  transition:.2s;
}

.projects-button span{
  margin-left:12px;
  font-size:20px;
}

.projects-button:hover{
  background:#fff;
  color:#071522;
}

.project-filters{
  display:flex;
  gap:10px;
  margin-bottom:28px;
  flex-wrap:wrap;
}

.filter{
  border:0;
  background:#202a34;
  color:#fff;
  padding:11px 22px;
  border-radius:30px;
  font-family:inherit;
  font-size:12px;
  cursor:pointer;
}

.filter.active,
.filter:hover{
  background:var(--amarillo);
  color:#071522;
  font-weight:700;
}

.projects-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
}

.project-card{
  height:300px;
  position:relative;
  overflow:hidden;
  border-radius:12px;
  background:#202830;
}

.project-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .5s ease;
}

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

.project-overlay{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  padding:55px 20px 20px;
  background:linear-gradient(
    transparent,
    rgba(4,12,18,.92)
  );
  transform:translateY(25px);
  opacity:0;
  transition:.3s;
}

.project-card:hover .project-overlay{
  transform:translateY(0);
  opacity:1;
}

.project-overlay span{
  color:var(--amarillo);
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:2px;
}

.project-overlay h3{
  margin-top:5px;
  font-size:18px;
}

@media(max-width:900px){

  .projects-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .projects-header{
    align-items:flex-start;
    flex-direction:column;
  }

}

@media(max-width:560px){

  .projects{
    padding:55px 0;
  }

  .projects-grid{
    grid-template-columns:1fr;
  }

  .project-card{
    height:280px;
  }

  .projects-button{
    width:100%;
    text-align:center;
  }

}

/* ===== SECCIÓN CONTACTO ===== */

.contact-section {
  padding: 100px 0;
  background: #14191f;
  color: #ffffff;
}

.contact-heading {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 55px;
}

.contact-eyebrow {
  color: #aab4c0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 3px;
  margin-bottom: 16px;
}

.contact-heading h2 {
  font-size: clamp(32px, 5vw, 48px);
  margin: 0 0 20px;
  font-weight: 800;
}

.contact-heading h2 span {
  color: #aab4c0;
}

.contact-heading p {
  color: #c0c8d1;
  font-size: 16px;
  line-height: 1.8;
}

.contact-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}

.contact-info,
.contact-message {
  padding: 40px;
  border: 1px solid #39434d;
  border-radius: 16px;
  background: #202730;
}

.contact-info h3,
.contact-message h3 {
  font-size: 24px;
  margin: 0 0 16px;
}

.contact-info > p,
.contact-message > p {
  color: #c0c8d1;
  line-height: 1.7;
}

.contact-detail {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin: 28px 0;
}

.contact-detail > span {
  font-size: 24px;
}

.contact-detail strong {
  display: block;
  margin-bottom: 6px;
}

.contact-detail p {
  margin: 0;
  color: #c0c8d1;
}

.contact-whatsapp {
  display: inline-block;
  margin-top: 20px;
  padding: 16px 24px;
  border-radius: 8px;
  background: #25d366;
  color: #102015;
  text-decoration: none;
  font-size: 14px;
  font-weight: 800;
  transition: transform 0.2s, background 0.2s;
}

.contact-whatsapp:hover {
  background: #1fbd59;
  transform: translateY(-2px);
}

.contact-slogan {
  margin-top: 35px;
  font-size: 20px;
  font-weight: 700;
  font-style: italic;
  color: #ffffff !important;
}

@media (max-width: 768px) {
  .contact-section {
    padding: 65px 0;
  }

  .contact-content {
    grid-template-columns: 1fr;
  }

  .contact-info,
  .contact-message {
    padding: 28px 22px;
  }

  .contact-whatsapp {
    display: block;
    text-align: center;
  }
}
.footer-principal {
  background: #111418;
  border-top: 1px solid #343a40;
  padding: 28px 20px;
  text-align: center;
  color: #a0a0a0;
  font-size: 13px;
}

.footer-principal p {
  margin: 6px 0;
}

.footer-creditos strong {
  color: #f5ad16;
  font-weight: 600;
}

.acceso-admin {
  display: inline-block;
  margin-top: 12px;
  color: #777;
  font-size: 11px;
  text-decoration: none;
}

.acceso-admin:hover {
  color: #f5ad16;
}
/* Descripción emergente de proyectos */

.project-card {
  position: relative;
  overflow: hidden;
}

.project-card .project-overlay {
  transition: background 0.35s ease;
}

.project-description {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  margin: 0;
  color: #f1f1f1;
  font-size: 14px;
  line-height: 1.6;
  transform: translateY(12px);
  transition:
    max-height 0.4s ease,
    opacity 0.35s ease,
    transform 0.35s ease,
    margin 0.35s ease;
}

.project-card:hover .project-description,
.project-card:focus-within .project-description {
  max-height: 180px;
  opacity: 1;
  margin-top: 12px;
  transform: translateY(0);
}

.project-card:hover .project-overlay {
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.94),
    rgba(0, 0, 0, 0.55)
  );
}

/* En dispositivos táctiles, mostrar la descripción */
@media (hover: none) {
  .project-description {
    max-height: 180px;
    opacity: 1;
    margin-top: 10px;
    transform: none;
  }
}
/* NOVEDADES - ESTILO BLOG */

#novedadesGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 25px;
  align-items: start;
}

.novedad-card {
  background: #191d22;
  border: 1px solid #343a40;
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 0.3s ease, transform 0.3s ease;
}

.novedad-card:hover {
  border-color: #f5ad16;
  transform: translateY(-3px);
}

.novedad-imagen {
  display: block;
  width: 100%;
  height: 300px;
  object-fit: cover;
  object-position: center;
 
}

.novedad-cuerpo {
  padding: 25px;
}

.novedad-fecha {
  display: block;
  color: #f5ad16;
  font-size: 12px;
  margin-bottom: 12px;
}

.novedad-cuerpo h3 {
  color: #fff;
  font-size: 21px;
  margin: 0 0 15px;
  line-height: 1.35;
}

.novedad-texto {
  color: #c9cdd2;
  font-size: 15px;
  line-height: 1.75;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.novedad-texto.resumido {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
}

.novedad-texto.resumido.expandido {
  display: block;
}

.novedad-leer-mas {
  display: inline-block;
  margin-top: 15px;
  padding: 10px 18px;
  background: transparent;
  color: #f5ad16;
  border: 1px solid #f5ad16;
  border-radius: 7px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease;
}

.novedad-leer-mas:hover {
  background: #f5ad16;
  color: #171717;
}
/* SECCIÓN NOSOTROS */

.seccion-nosotros {
  background: #0b1219;
  color: #ffffff;
  padding: 85px 0;
}

.seccion-nosotros .section-head {
  margin-bottom: 30px;
}

.seccion-nosotros .eyebrow {
  color: #f5ad16;
  letter-spacing: 4px;
}

.seccion-nosotros h2 {
  color: #ffffff;
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 800;
}

.seccion-nosotros h2 span {
  color: #f5ad16;
}

.nosotros-contenido {
  max-width: 900px;
  padding: 30px 35px;
  background: #191d22;
  border-left: 4px solid #f5ad16;
  border-radius: 0 12px 12px 0;
}

#nosotrosTexto {
  color: #d3d7dc;
  font-size: 17px;
  line-height: 1.9;
  margin: 0;
  white-space: pre-line;
}

@media (max-width: 600px) {
  .seccion-nosotros {
    padding: 55px 0;
  }

  .nosotros-contenido {
    padding: 24px;
  }

  #nosotrosTexto {
    font-size: 15px;
  }
}
/* TRABAJOS Y NOSOTROS EN DOS COLUMNAS */

.trabajos-nosotros-layout {
  display: grid;
  grid-template-columns: minmax(0, 70%) minmax(0, 30%);
  gap: 0;
  align-items: start;
  background: #0b1219;
}

.columna-trabajos,
.columna-nosotros {
  min-width: 0;
}

/* Ajustar los márgenes interiores */
.columna-trabajos .projects {
  padding: 65px 25px 65px 40px;
}

.columna-trabajos .container,
.columna-nosotros .container {
  width: 100%;
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

/* Tres fotografías por fila */
.columna-trabajos .projects-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

/* Columna Nosotros */
.columna-nosotros .seccion-nosotros {
  padding: 65px 30px 50px 15px;
  background: transparent;
}

.columna-nosotros .seccion-nosotros h2 {
  font-size: clamp(26px, 2.5vw, 38px);
}

.columna-nosotros .nosotros-contenido {
  padding: 24px;
}

.columna-nosotros #nosotrosTexto {
  font-size: 15px;
  line-height: 1.8;
}

/* Adaptación a celulares y tablets */
@media (max-width: 1000px) {
  .trabajos-nosotros-layout {
    grid-template-columns: 1fr;
  }

  .columna-trabajos .projects {
    padding: 55px 20px;
  }

  .columna-nosotros .seccion-nosotros {
    padding: 30px 20px 60px;
  }
}

@media (max-width: 600px) {
  .columna-trabajos .projects-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 400px) {
  .columna-trabajos .projects-grid {
    grid-template-columns: 1fr;
  }
}
/* Alinear Nosotros con la galería de fotografías */

/* Alinear los encabezados de Trabajos y Nosotros */

@media (min-width: 1001px) {
  .columna-nosotros .seccion-nosotros {
    padding-top: 65px;
  }
}
/* PRESENTACIÓN COMERCIAL EN CONTACTO */

.contact-eyebrow {
  display: block;
  color: #f5ad16;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 3px;
  margin-bottom: 14px;
}

.contact-benefits {
  display: flex;
  flex-direction: column;
  gap: 23px;
  margin: 30px 0;
  padding: 25px 0;
  border-top: 1px solid #3b4652;
  border-bottom: 1px solid #3b4652;
}

.contact-benefit {
  display: flex;
  align-items: flex-start;
  gap: 15px;
}

.benefit-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  background: rgba(245, 173, 22, 0.12);
  border: 1px solid #f5ad16;
  border-radius: 9px;
  color: #f5ad16;
  font-size: 20px;
  font-weight: 700;
}

.contact-benefit h4 {
  color: #ffffff;
  font-size: 16px;
  margin: 0 0 6px;
}

.contact-benefit p {
  color: #b9c1cb;
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
}

.contact-message .contact-slogan {
  color: #f5ad16;
  font-size: 19px;
  font-style: italic;
  font-weight: 700;
  line-height: 1.6;
  margin-top: 25px;
}