:root{
  --bg:#0b0b0b;
  --card:#151515;
  --muted:#9aa3ab;
  --accent:#e11d2b;
  --glass: rgba(255,255,255,0.04);
  --container: 1200px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background:var(--bg);
  color:#fff;
  -webkit-font-smoothing:antialiased;
}

/* container */
.container{max-width:var(--container);margin:0 auto;padding:0 20px}

/* header */
.header{position:sticky;top:0;z-index:60;background:linear-gradient(180deg, rgba(0,0,0,0.6), rgba(0,0,0,0.3));backdrop-filter: blur(6px);box-shadow:0 2px 10px rgba(0,0,0,0.5)}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:18px 0}
.brand{display:flex;align-items:center;gap:12px;cursor:pointer}
.logo{width:48px;height:48px;object-fit:cover;border-radius:8px}
.brand-title{font-weight:800;letter-spacing:0.6px}
.brand-sub{font-size:12px;color:var(--muted)}

/* nav desktop */
.nav-desktop{display:flex;align-items:center;gap:18px}
.link-btn{background:none;border:none;color:inherit;font-weight:600;cursor:pointer;padding:8px 10px;border-radius:8px}
.link-btn:hover{color:var(--accent)}
.cta{background:var(--accent);color:#fff;padding:8px 14px;border-radius:10px;text-decoration:none;font-weight:700;box-shadow:0 6px 18px rgba(225,29,43,0.12)}
.right-actions{display:flex;align-items:center;gap:12px}
.socials a{color:var(--muted);margin-right:8px;text-decoration:none;font-weight:600}
.menu-btn{display:none;background:transparent;border:0;color:#fff;font-size:22px;cursor:pointer}

/* hero */
.hero{display:flex;gap:40px;align-items:center;padding:48px 0}
.hero-left{flex:1}
.hero-right{flex:1}
.hero h1{font-size:34px;margin:0 0 12px 0}
.hero p{color:var(--muted);max-width:60%}
.hero-cta{display:flex;gap:12px;margin-top:18px}
.btn-primary{background:var(--accent);padding:10px 16px;border-radius:10px;color:#fff;text-decoration:none;border:0;font-weight:700;cursor:pointer}
.btn-outline{background:transparent;padding:10px 16px;border-radius:10px;color:#fff;border:1px solid rgba(255,255,255,0.06);text-decoration:none}

/* trust */
.trust{display:flex;gap:18px;margin-top:20px}
.trust div{background:var(--card);padding:10px 14px;border-radius:8px;text-align:center}
.trust strong{display:block;font-size:18px}

/* slider */
.slider{height:320px;border-radius:12px;overflow:hidden;position:relative;background:linear-gradient(180deg,#000,#111)}
.slide{position:absolute;inset:0;background-size:cover;background-position:center;transition:opacity 0.8s ease;opacity:0}
.slide.active{opacity:1}

/* features */
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:38px}
.feature{background:var(--card);padding:22px;border-radius:12px}

/* portfolio */
.portfolio{display:flex;gap:28px;margin-top:36px;align-items:flex-start}
.portfolio-left{flex:1}
.portfolio-right{width: 100%;height: auto;}
.portfolio-right video {
    width: 100%;
    height: auto; 
    /* Opcional, pero recomendado */
    max-width: 100%;
    border-radius: 8px;
}
.portfolio-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:12px}
.portfolio img{width:100%;height:120px;object-fit:cover;border-radius:8px}

/* services */
.section-title{font-size:28px;margin:0 0 20px 0}
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.service-card{background:var(--card);border-radius:12px;overflow:hidden;box-shadow:0 10px 30px rgba(2,6,23,0.6)}
.service-card img{width:100%;height:180px;object-fit:cover}
.service-card .body{padding:16px}
.service-card h3{margin:0 0 8px 0}
.materials{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.materials span{background:rgba(255,255,255,0.03);padding:6px 10px;border-radius:8px;font-size:13px}

/* modal */
.modal-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.6);z-index:80;padding:20px}
.modal{background:linear-gradient(180deg,#0d0d0d,#0b0b0b);border-radius:12px;padding:18px;max-width:920px;width:100;box-shadow:0 20px 60px rgba(0,0,0,0.8)}
.modal-body{display:flex;gap:12px}
.modal img{width:36%;height:200px;object-fit:cover;border-radius:8px}
.modal-content{flex:1}
.modal-materials{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}

/* others */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.card-stats{display:flex;flex-direction:column;gap:12px;background:var(--card);padding:16px;border-radius:8px}
.team-img{width:100%;height:240px;object-fit:cover;border-radius:8px;margin-top:12px}
.testimonial{display:block;margin-top:12px;color:var(--muted);font-style:italic}

/* contact */
.contact-card{background:var(--card);padding:18px;border-radius:12px}
.map-card iframe{width:100%;height:300px;border-radius:10px;border:0}
.map-actions{display:flex;gap:8px;margin-top:10px}

/* footer */
.footer{margin-top:40px;padding:20px 0;background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent)}
.footer-inner{display:flex;justify-content:space-between;align-items:center}

/* whatsapp floating */
.whatsapp-floating{position:fixed;right:20px;bottom:20px;background:#25D366;width:56px;height:56px;border-radius:999px;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 30px rgba(37,211,102,0.18);text-decoration:none}

/* responsive */
@media (max-width: 980px){
  .features-grid{grid-template-columns:1fr}
  .services-grid{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .portfolio{flex-direction:column}
  .hero p{max-width:100%}
  .menu-btn{display:inline-block}
  .nav-desktop{display:none}
  .slider{height:220px}
}

.hidden{display:none}
.mt-12{margin-top:3rem}
.mt-6{margin-top:1.5rem}
.row{display:flex;gap:12px;align-items:center}
.hero-section {
    min-height: 80vh; /* Sigue siendo la altura mínima del contenedor */
    height: 50vh;
    width: 100%; /* Asegúrate de que ocupa todo el ancho */
    position: relative;
    overflow: hidden;
    /* ... el resto de tus estilos de flexbox, padding, etc. */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    color: var(--color-claro);
    padding: 0; /* Aseguramos que no haya padding aquí que impida el 100% de los slides */
}

.carousel-container {
    display: flex;
    width: 100%;
    height: 100%; /* Esto es clave para que los slides hijos tomen la altura */
    transition: transform 0.5s ease-in-out;
}

.carousel-slide {
    min-width: 100%;
    height: 100%; /* ¡Esto es muy importante! Ocupa el 100% de la altura de carousel-container */
    
    display: flex; /* Mantenemos el flexbox para centrar el contenido (texto y botón) */
    justify-content: center;
    align-items: center;
    flex-direction: column; /* Para que el texto y el botón se apilen */
    text-align: center;
    color: var(--color-claro);
    
    /* Propiedades de la imagen de fondo */
    background-size: cover; /* Asegura que la imagen cubra todo el contenedor */
    background-position: center; /* Centra la imagen horizontal y verticalmente */
    background-repeat: no-repeat; /* Evita que la imagen se repita */
}
/* 3. Estilos de fondo individuales (con el overlay) */
.slide-1 {
    background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('/img/the-laser-cuts-4398315_1280.jpg'); /* ¡Añade esta imagen! */
}
.slide-2 {
    background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('/img/arte.jpg'); /* ¡Añade esta imagen! */
}
.slide-3 {
    background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('/img/laser-2795229_1280.jpg'); /* ¡Añade esta imagen! */
}


/* 4. Estilos de los botones de navegación (flechas) */
.carousel-nav {
    position:absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5); /* Fondo semitransparente */
    color: var(--color-claro);
    border: none;
    padding: 1rem 1.2rem;
    cursor: pointer;
    font-size: 1.5rem;
    z-index: 10;
    transition: background 0.3s;
}

.carousel-nav:hover {
    background: rgba(0, 0, 0, 0.8);
}

.prev-btn {
    left: 10px;
}

.next-btn {
    right: 10px;
}

.hero-section h1 {
    font-size: clamp(2.5rem, 5vw, 4.5rem); /* Tamaño fluido y responsivo */
    margin-bottom: 1.5rem;
    font-weight: 300; /* Letras más delgadas para un toque elegante */
}

.cta-button {
    /* Estilo del botón */
    display: inline-block; /* Para que podamos darle padding */
    padding: 1rem 2rem;
    margin-top: 1rem;
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    
    /* Estilos visuales del botón */
    color: var(--color-claro); /* Texto blanco */
    border: 2px solid var(--color-claro); /* Borde blanco */
    background-color: transparent; /* Fondo transparente */
    transition: background-color 0.3s ease, color 0.3s ease;
}

.cta-button:hover {
    /* Efecto al pasar el mouse */
    background-color: var(--color-claro); /* Se vuelve blanco */
    color: var(--color-principal); /* El texto se vuelve oscuro */
    cursor: pointer;
}
.social-links {
            text-align: center;
            padding: 20px;
        }
        .social-links a {
            font-size: 30px; 
            margin: 0 15px; 
            color: #333; 
            text-decoration: none; /* Opcional: quita el subrayado */
            transition: color 0.3s;
        }
        .social-links a:hover {
            color: #0077b5; /* Un color bonito al pasar el ratón */
        }