:root{
  --negro:#090909;
  --oro:#D4AF37;
  --plata:#C0C0C0;
  --gris:#1d1d1d;
  --blanco:#ffffff;
}

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  font-family:'Montserrat',sans-serif;
  background:var(--negro);
  color:var(--blanco);
}

.header{
  position:sticky;
  top:0;
  z-index:1000;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:18px 50px;
  background:linear-gradient(180deg,#151515,#050505);
  border-bottom:3px solid var(--oro);
  box-shadow:0 8px 20px rgba(0,0,0,.45);
}

.logo-area{
  display:flex;
  align-items:center;
  gap:18px;
}

.logo-area img{
  width:90px;
  height:auto;
}

.logo-area h1{
  font-family:'Cinzel',serif;
  font-size:2rem;
  color:var(--plata);
  letter-spacing:2px;
}

.logo-area h1 span{
  color:var(--oro);
}

.logo-area h2{
  font-family:'Cinzel',serif;
  color:var(--plata);
  letter-spacing:8px;
  font-size:.95rem;
}

.hero{
  min-height:78vh;
  background:
  linear-gradient(rgba(0,0,0,.75),rgba(0,0,0,.82)),
  url("../imagenes/banner.jpg") center/cover no-repeat;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}

.overlay{
  width:min(900px,92%);
}

.overlay h3{
  color:var(--oro);
  font-size:1.5rem;
  margin-bottom:18px;
}

.overlay h1{
  font-family:'Cinzel',serif;
  font-size:3rem;
  line-height:1.3;
  margin-bottom:22px;
}

.overlay p{
  color:#ddd;
  font-size:1.15rem;
  margin-bottom:35px;
}

.btn{
  display:inline-block;
  padding:16px 36px;
  border-radius:40px;
  border:2px solid var(--oro);
  color:var(--oro);
  text-decoration:none;
  font-weight:700;
  transition:.35s;
}

.btn:hover{
  background:var(--oro);
  color:#000;
  box-shadow:0 0 25px rgba(212,175,55,.8);
}

.servicios{
  padding:80px 8%;
}

.servicios h2{
  text-align:center;
  font-family:'Cinzel',serif;
  color:var(--oro);
  margin-bottom:50px;
  font-size:2.3rem;
}

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

.card{
  background:linear-gradient(180deg,#1d1d1d,#0a0a0a);
  border:1px solid rgba(212,175,55,.35);
  border-radius:18px;
  padding:40px 20px;
  text-align:center;
  transition:.35s;
}

.card i{
  font-size:3rem;
  color:var(--oro);
  margin-bottom:20px;
}

.card h3{
  color:var(--plata);
}

.card:hover{
  transform:translateY(-10px);
  border-color:var(--oro);
  box-shadow:0 12px 28px rgba(212,175,55,.25);
}

footer{
  padding:30px;
  text-align:center;
  border-top:2px solid var(--oro);
  color:var(--plata);
  background:#050505;
}

@media(max-width:992px){
  .header{
    flex-direction:column;
    gap:20px;
    padding:20px;
  }

  .overlay h1{
    font-size:2.2rem;
  }

  .logo-area{
    text-align:center;
  }
}

/*====================================*/
/* TARJETAS DE SERVICIOS */
/*====================================*/

.cards{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:30px;
    padding:50px 0;
}

.card{
    background:#111;
    border:1px solid rgba(212,175,55,.25);
    border-radius:18px;
    padding:35px 25px;
    text-align:center;
    color:#fff;
    cursor:pointer;
    transition:all .4s ease;
    position:relative;
    overflow:hidden;
}

.card i{
    font-size:55px;
    color:#D4AF37;
    margin-bottom:20px;
    transition:.4s;
}

.card h3{
    margin-bottom:15px;
    font-size:24px;
}

.card p{
    color:#cfcfcf;
    line-height:1.7;
}

.card::before{
    content:"";
    position:absolute;
    top:-120%;
    left:-50%;
    width:60%;
    height:300%;
    background:rgba(255,255,255,.18);
    transform:rotate(25deg);
    transition:.6s;
}

.card:hover{
    transform:translateY(-12px) scale(1.04);
    background:linear-gradient(145deg,#1b1b1b,#2d2d2d);
    border-color:#D4AF37;
    box-shadow:0 20px 45px rgba(212,175,55,.35);
}

.card:hover::before{
    left:150%;
}

.card:hover i{
    transform:scale(1.2) rotate(8deg);
    color:#FFD700;
}

.card:hover h3{
    color:#D4AF37;
}

.card:hover p{
    color:#fff;
}

/*=========================
BOTONES HERO
=========================*/

.hero-buttons{
    margin-top:30px;
    display:flex;
    justify-content:center;
    gap:18px;
    flex-wrap:wrap;
}

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:14px 30px;
    border-radius:40px;
    text-decoration:none;
    font-weight:600;
    transition:.35s;
    cursor:pointer;
}

.btn-gold{
    background:#D4AF37;
    color:#000;
}

.btn-gold:hover{
    background:#E5C45A;
    transform:translateY(-4px);
    box-shadow:0 15px 35px rgba(212,175,55,.35);
}

.btn-outline{
    background:transparent;
    color:#D4AF37;
    border:2px solid #D4AF37;
}

.btn-outline:hover{
    background:#D4AF37;
    color:#000;
    transform:translateY(-4px);
    box-shadow:0 15px 35px rgba(212,175,55,.35);
}
.proyectos{
    width:100%;
    padding:90px 8%;
    background:#090909;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:60px;
}

.proyectos .imagen{
    flex:1;
}

.proyectos img{
    width:100%;
    border-radius:12px;
    box-shadow:0 20px 50px rgba(0,0,0,.6);
}

.proyectos .texto{
    flex:1;
}

.proyectos h2{
    font-family:'Cinzel',serif;
    color:#D4AF37;
    font-size:38px;
    margin-bottom:25px;
}

.proyectos p{
    color:#c8c8c8;
    line-height:1.9;
    font-size:18px;
    margin-bottom:30px;
}

.proyectos ul{
    list-style:none;
    padding:0;
}

.proyectos li{
    color:#ffffff;
    padding:10px 0;
    font-size:18px;
}
/*==========================
CLIENTES
==========================*/

.clientes{

    padding:90px 8%;
    background:#0A0A0A;
    text-align:center;

}

.clientes-grid{

    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:25px;

}

.cliente{
    height:160px;
    background:#fff;
    border-radius:15px;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:20px;
    overflow:hidden;

    border:1px solid #2a2a2a;
}

.cliente img{
    max-width:100%;
    max-height:90px;

    width:auto;
    height:auto;

    object-fit:contain;

    transition:.4s;
}
.cliente:hover img{
    transform:scale(1.05);
}
.cliente:hover{

    border-color:#D4AF37;
    box-shadow:0 15px 35px rgba(212,175,55,.20);

}

.submenu-item{
    position:relative;
}

.submenu-item>a{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.submenu-level2{
    display:none;
    position:absolute;
    left:100%;
    top:0;
    min-width:280px;
    background:#111;
    border-left:3px solid #D4AF37;
}


.submenu-level2 li a{
    padding:12px 18px;
    display:block;
    color:#fff;
}

.submenu-level2 li a:hover{
    background:#D4AF37;
    color:#000;
}

.submenu-item{
    position:relative;
}

.submenu-level2{

    display:none;
    position:absolute;
    top:0;
    left:100%;

    min-width:280px;

    background:#111;
    border-left:3px solid #D4AF37;

    z-index:9999;
}

.submenu-item:hover>.submenu-level2{

    display:block;

}

/*==================================
SUBMENU NIVEL 2 (HACIA LA IZQUIERDA)
===================================*/

.submenu{
    position:absolute;
    top:100%;
    left:0;
    min-width:320px;
    background:#111;
    list-style:none;
    border-top:3px solid #D4AF37;
    display:none;
    z-index:9999;
    overflow:visible;
}

.menu>li:hover>.submenu{
    display:block;
}

.submenu-item{
    position:relative;
}

.submenu-item>a{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.submenu-level2{
    display:none;
    position:absolute;

    top:0;

    right:100%;      /* ← ABRE A LA IZQUIERDA */
    left:auto;

    min-width:320px;

    background:#111;

    border-right:3px solid #D4AF37;
    border-left:none;

    list-style:none;

    z-index:10000;
}


.submenu-level2 li{
    list-style:none;
}

.submenu-level2 a{
    display:block;
    padding:14px 18px;
    color:#fff;
    text-decoration:none;
    white-space:nowrap;
}

.submenu-level2 a:hover{
    background:#D4AF37;
    color:#000;
}
.card-link{

    text-decoration:none;
    color:inherit;
    display:block;

}


.card-link .card{

    cursor:pointer;

}


.card-link:hover .card{

    transform:translateY(-8px);

}

/* =========================================
   AJUSTE GENERAL RESPONSIVE
========================================= */

html,
body {
    width: 100%;
    overflow-x: hidden;
}

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

.contenedor {
    width: 90%;
    max-width: 1500px;
    margin-left: auto;
    margin-right: auto;
}

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

/* =========================================
   CELULARES Y TABLETAS
========================================= */

@media screen and (max-width: 768px) {

    .header {
        padding: 15px 20px;
        flex-direction: column;
    }

    .logo-area {
        width: 100%;
        justify-content: center;
        flex-direction: column;
        text-align: center;
    }

    .logo-area img {
        width: 85px;
        height: auto;
    }

    .titulo {
        text-align: center;
    }

    .titulo h1 {
        font-size: 23px;
        letter-spacing: 1px;
    }

    .titulo h2 {
        font-size: 13px;
        letter-spacing: 4px;
    }

    .hero {
        min-height: auto;
        padding: 70px 20px;
    }

    .hero h1 {
        font-size: 32px;
        line-height: 1.2;
    }

    .hero h2 {
        font-size: 19px;
    }

    .hero p {
        font-size: 16px;
    }

    .cards,
    .clientes-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .clientes {
        padding: 60px 20px;
    }

    .clientes h2 {
        font-size: 30px;
    }

    .botones,
    .hero-buttons {
        flex-direction: column;
        width: 100%;
    }

    .botones a,
    .hero-buttons a {
        width: 100%;
        text-align: center;
    }

    section {
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* =========================================
   AJUSTE GENERAL PARA ANDROID
========================================= */

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

html,
body {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

body {
    min-width: 0;
}

img,
video,
iframe,
svg {
    max-width: 100%;
    height: auto;
}

input,
textarea,
select,
button {
    max-width: 100%;
    font-size: 16px;
}

.contenedor,
.header,
.hero,
.cards,
.clientes,
.clientes-grid,
.contacto,
footer,
section {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

/* =========================================
   CELULARES ANDROID
========================================= */

@media screen and (max-width: 767px) {

    body {
        width: 100% !important;
        min-width: 0 !important;
        overflow-x: hidden !important;
    }

    .contenedor {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
    }

    .header {
        width: 100% !important;
        padding: 12px 15px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    .logo-area {
        width: 100% !important;
        min-width: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }

    .logo-area img {
        width: 78px !important;
        max-width: 78px !important;
        height: auto !important;
    }

    .titulo {
        width: 100% !important;
        min-width: 0 !important;
        text-align: center !important;
    }

    .titulo h1 {
        font-size: clamp(20px, 7vw, 29px) !important;
        line-height: 1.15 !important;
        letter-spacing: 1px !important;
        white-space: normal !important;
    }

    .titulo h2 {
        font-size: clamp(11px, 4vw, 15px) !important;
        letter-spacing: 2px !important;
        white-space: normal !important;
    }

    .hero {
        width: 100% !important;
        min-height: auto !important;
        padding: 55px 16px !important;
        background-size: cover !important;
        background-position: center !important;
    }

    .hero h1 {
        font-size: clamp(27px, 9vw, 39px) !important;
        line-height: 1.15 !important;
        white-space: normal !important;
    }

    .hero h2 {
        font-size: clamp(18px, 5vw, 23px) !important;
    }

    .hero p {
        width: 100% !important;
        max-width: 100% !important;
        font-size: 16px !important;
    }

    section {
        width: 100% !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .cards,
    .clientes-grid {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 18px !important;
    }

    .card,
    .cliente {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .botones,
    .hero-buttons {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    .botones a,
    .hero-buttons a {
        width: 100% !important;
        max-width: 100% !important;
        text-align: center !important;
    }
}