/* ======== ESTILOS GLOBALES ======== */
* {margin: 0;padding: 0;box-sizing: border-box;}
body {font-family: 'Playfair Display', serif;/*color: #d9d9d9;*/color: #050505;background-color: #ffffff;overflow-x: hidden;}
.logo{height:65px;padding-top: 10px;}
.icono{height:35px;}
.socialTop{display:flex;gap:12px;}
.socialTop a:hover{background:0A1121;color:#3c2a33;transform:scale(1.1);} 
.socialTop svg{width:18px;height:18px;}
/* ======== ENCABEZADO ======== */
header {background: linear-gradient(135deg, #000000, #1c1c1c);color: #c0c0c0;text-align: center;padding: 5px 2px;border-bottom: 2px solid #555;}
header h1 {font-size: 3em;letter-spacing: 1px;color: #e0e0e0;}
header p {color: #bfbfbf;font-size: 1.2em;margin-top: 10px;}
/* .hero-texto{display:inline-block;gap:10px;padding:10px;}
.hero{display:flex;gap:50px;padding:10px} 
.hero-video {display:inline-flex;width:450px;border-radius:20px;justify-content:space-between;}
.hero-video video{display:inline-flex;width:450px;border-radius:20px;justify-content:space-between;} */

/* escritorio */
.hero{display:flex;justify-content:space-between;align-items:center;gap:25px;padding:40px;flex-wrap:nowrap;}
.hero-texto{width:35%;}
.hero-video{width:30%;}
.hero-video video{width:100%;height:400px;object-fit:cover;border-radius:18px;} 

/* ======== MENÚ PRINCIPAL ======== */
nav {background: #1a1a1a;border-bottom: 1px solid #555;}
.menu {list-style: none;display: flex;justify-content: center;align-items: center;}
.menu li {position: relative;}
.menu li a {display: block;color: #ccc;text-decoration: none;padding: 20px 30px;font-weight: bold;transition: 0.3s;}
.menu li a:hover {background: #333;color: white;}
/* ======== SUBMENÚ VERTICAL ======== */
.dropdown{position:relative;}
.dropdown:hover .submenu{display:block;}
.submenu {display: none;position: absolute;top: 100%;left: 0;background: #333;list-style: none;min-width: 200px;z-index: 1000;}
.submenu li {width: 100%;}
.submenu li a {padding: 15px 20px;color: white;border-bottom: 1px solid #555;}
.submenu li a:hover {background: #555;}
/* Mostrar submenu al pasar mouse */
/* .dropdown:hover .submenu {display: block;} */


/* .submenu{display:none;position:absolute;top:100%;left:0;min-width:260px;background:#1a1a1a;border-radius:8px;z-index:9999;}
.submenu li{list-style:none;}
.submenu li a{display:block;padding:12px 16px;color:white;} */

/* ===== TOP BAR ===== */
.menu{    z-index:9999;}
.top-bar{    position:relative;    z-index:9999;}
.top-bar {display: flex;align-items: center;justify-content: space-between;background: #1a1a1a;padding: 0 30px;border-bottom: 1px solid #555;}
/* LOGO */
.logo img {width: 120px;height: auto;display: block;}
/* NAV */
nav {background: transparent;border-bottom: none;}
/* ======== SECCIONES ======== */
.video{position: relative;width: 100%;height: 570;background-size: cover;background-position: center ;} 
section {display: none;max-width: 1100px;margin: 0 auto;padding: 10px 20px;animation: fadeIn 0.6s ease-in-out;}
section.active {display: block;}
@keyframes fadeIn {from { opacity: 0; transform: translateY(20px); }to { opacity: 1; transform: translateY(0); }}
h2 {text-align: center;/*color: #c0c0c0;*/color: #050505;font-size: 2em;margin-bottom: 30px;border-bottom: 2px solid #444; display: inline-block;padding-bottom: 5px;}
h3 {text-align: center;/*color: #c0c0c0;*/color: #070707;font-size: 1.5em;margin-bottom: 10px;display: inline-block;padding-bottom: 5px;} 
/* ======== GALERÍA ======== */
.galeria {position: relative;overflow: hidden;border-radius: 12px;box-shadow: 0 4px 12px rgba(255,255,255,0.1);margin: 50px 0;}
.galeria img {width: 50%;display: none;}
.galeria img.active {display: block;animation: fadeImg 1s ease-in-out;}
@keyframes fadeImg {from { opacity: 0; }to { opacity: 1; }}
/* Grid de Nosotros */
/* .grid-galeria{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;padding:40px} */
.grid-galeria{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:15px;padding:10px;}
.grid-galeria img{width:100%}
 /* Controles del slider */
.galeria .control {position: absolute;top: 50%;transform: translateY(-50%);background: rgba(0, 0, 0, 0.6);color: #d9d9d9;border: none;padding: 15px 20px;cursor: pointer;font-size: 18px;transition: background 0.3s;}
.galeria .control:hover {background: rgba(255, 255, 255, 0.2);}
.galeria .prev { left: 10px; }
.galeria .next { right: 10px; }
.galeria .next { left: 600px; }

/* ======== SERVICIOS ======== */
.servicio {display: flex;align-items: center;justify-content: space-between;gap: 25px;margin-bottom: 60px;flex-wrap: wrap;}
.servicio img {width: 45%;border-radius: 10px;box-shadow: 0 3px 10px rgba(255,255,255,0.1);}
.servicio div {flex: 1;}
.servicio h3 {color: #0a0a0a;margin-bottom: 10px;font-size: 1.4em;}
.servicio p {line-height: 1.7;color: #050505;}
/* ======== CONTACTO ======== */
.contacto {text-align: center;line-height: 2;color: #ccc;}
.contacto a {color: #aaa;text-decoration: none;font-weight: bold;}
.contacto-frame{    width:100%;    max-width:1100px;    margin:auto;    padding:10px;}
.contacto-frame iframe{    width:100%;    min-height:850px;    border:none;    border-radius:12px;    background:white;}
/* ======== PIE DE PÁGINA ======== */
footer {background: #0d0d0d;color: #999;text-align: center;padding: 20px;border-top: 1px solid #333;font-size: 0.9em;}
/* ======== RESPONSIVE ======== */

/* Ocultamos el menú por defecto en móviles */
.nav-links {display: none;flex-direction: column;}
/* Mostramos el menú cuando tenga la clase 'activo' */
.nav-links.activo {display: flex;}
/* Estilo básico para el icono de las tres rayas */
/*.menu-icono {font-size: 30px;cursor: pointer;display: none;*/ /* Se oculta en PC *//*}*/
.menu-icono{display:none;font-size:34px;color:white;cursor:pointer;padding:10px;}

@media (max-width:768px){.top-bar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:10px 12px;position:relative;    }
    .logo img{width:85px;    }
    .socialTop{flex:1;justify-content:center;gap:8px;    }
    .icono{height:24px;    }
    .menu-icono{display:block;font-size:30px;padding:6px;cursor:pointer;z-index:10001;    }
    nav{width:100%;position:absolute;top:100%;left:0;background:#111;z-index:10000;    }
    .menu{display:none;flex-direction:column;width:100%;    }
    .menu li{width:100%;border-bottom:1px solid #333;    }
    .menu li a{display:block;padding:16px;text-align:center;    }
    .submenu{position:static;display:none;width:100%;background:#222;    }
    .dropdown.activo .submenu{display:block;    }
    .dropdown:hover .submenu{display:none;   }
}

@media (max-width:768px){
    .menu{display:none !important;flex-direction:column;width:100%;background:#111;    }
    .menu.abierto{display:flex !important;    }
    .submenu{display:none !important;position:static;width:100%;background:#222;   }
    .dropdown.activo .submenu{display:block !important;    }
    .dropdown:hover .submenu{display:none !important;    }
}

@media (max-width:768px){
    .dropdown{display:flex;flex-direction:column;width:100%;}
    .submenu{position:relative !important;top:auto !important;left:auto !important;width:100%;background:#222;display:none;padding:0;margin:0;}
    .dropdown.activo .submenu{display:block !important;}
    .submenu li{width:100%;}
    .submenu li a{display:block;width:100%;padding:14px;text-align:center;font-size:15px;}
}

@media (max-width:768px){
    .hero{flex-direction:column;flex-wrap:wrap;padding:20px;    }
    .hero-texto{width:100%;text-align:center;    }
    .hero-video{width:100%;    }
    .hero-video video{height:auto;    }
}

@media (max-width:768px){
    #inicio .hero-texto{width:100%;order:1;    }
    #inicio .hero-video:nth-of-type(1){width:100%;order:2;    }
    #inicio .hero-video:nth-of-type(2){width:100%;order:3;    }
    #inicio .hero-video video{width:100%;height:auto;border-radius:12px;    }
}
.btn-whatsapp{
    display:block;
    width:100%;
    text-align:center;
    margin-top:12px;
    padding:14px;
    border-radius:10px;
    background:#25D366;
    color:white;
    text-decoration:none;
    font-weight:bold;
    transition:.3s;
}

.btn-whatsapp:hover{
    background:#1ebe5d;
}