/* VARIABLES GLOBALES */
:root {
    --acento: #eab308;
    --oscuro-bg: #0a0c10;
    --gris-bloque: #161a21;
    --texto: #ffffff;
    --texto-sec: #a1a1aa;
    --trans: 0.5s ease-in-out;
}

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

body {
    font-family: 'Segoe UI', sans-serif;
    background-color: var(--oscuro-bg);
    color: var(--texto);
    line-height: 1.6;
}

/* NAVEGACIÓN */
.nav-protekk {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 5%;
    background: #000;
    border-bottom: 1px solid #222;
    position: sticky;
    top: 0;
    z-index: 100;
}
.nav-links { display: flex; list-style: none; gap: 20px; }
.nav-links a { color: #fff; text-decoration: none; font-size: 0.9rem; text-transform: uppercase; }
.nav-links a:hover { color: var(--acento); }

/* HERO SECTION */
.hero-page { text-align: center; padding: 60px 5% 30px; }
.hero-page h1 { color: var(--acento); font-size: 2.8rem; letter-spacing: 4px; text-transform: uppercase; }
.hero-page p { color: var(--texto-sec); text-transform: uppercase; letter-spacing: 2px; }

/* BLOQUES DE SERVICIO */
.wrapper { padding: 40px 5%; max-width: 1200px; margin: auto; }

.bloque-servicio {
    display: flex;
    gap: 50px;
    background: var(--gris-bloque);
    padding: 40px;
    border-radius: 12px;
    margin-bottom: 60px;
    align-items: center;
    border: 1px solid #222;
}

/* Inversión de bloques pares */
.bloque-servicio:nth-child(even) {
    flex-direction: row-reverse;
}

.texto-servicio { flex: 1; }
.texto-servicio h2 { font-size: 2.2rem; margin-bottom: 20px; color: var(--texto); }

.descripcion-principal {
    font-size: 1.15rem;
    line-height: 2.1;
    color: var(--texto-sec);
    margin-bottom: 30px;
}

/* LISTA TÉCNICA */
.lista-tecnica {
    list-style: none;
    margin-top: 40px;
    padding-left: 0;
}

.lista-tecnica li {
    margin-bottom: 10px;
    padding-left: 25px;
    position: relative;
    color: var(--texto-sec);
    line-height: 1.4;
}

.lista-tecnica li::before {
    content: "■";
    color: var(--acento);
    position: absolute;
    left: 0;
    top: 2px;
    font-size: 0.8rem;
}

.lista-tecnica li strong { color: var(--texto); margin-right: 5px; }

/* CONTENEDOR DE MEDIA Y MARCA DE AGUA */
.media-placeholder {
    flex: 0 0 350px;
    height: 600px;
    background: #000;
    border: 1px solid #333;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
}

.foto-vertical, .video-vertical, .carrusel-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.logo-marca-agua {
    position: absolute;
    bottom: 25px;
    right: 25px;
    width: 300px; /* <--- MODIFICÁ ESTO. Estaba en 90px, probá con 140px o 150px */
    opacity: 0.8; /* Opcional: subila a 0.8 o 0.9 para que sea menos transparente */
    filter: drop-shadow(0 0 8px rgba(0,0,0,0.6));
    pointer-events: none;
    z-index: 10;
}

/* CARRUSEL */
.carrusel-container { overflow: hidden; }
.carrusel-track { display: flex; transition: transform 0.5s ease-in-out; height: 100%; }
.carrusel-slide { min-width: 100%; height: 100%; }
.carrusel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.5);
    color: white;
    border: none;
    padding: 15px 10px;
    cursor: pointer;
    z-index: 10;
}
.prev { left: 10px; }
.next { right: 10px; }

/* RESPONSIVE */
@media (max-width: 768px) {
    .bloque-servicio, .bloque-servicio:nth-child(even) {
        flex-direction: column !important;
        text-align: center;
    }
    .media-placeholder { width: 100%; max-width: 300px; height: 500px; }
}
/* CONTENEDOR PRINCIPAL PANTALLA DIVIDIDA */
.container-principal {
    display: flex;
    width: 100%;
    height: calc(100vh - 80px); /* Resta la altura del nav */
    position: relative;
    overflow: hidden;
}

.mitad {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: var(--trans);
    position: relative;
}

/* IMÁGENES DE FONDO (Asegurate que existan en la carpeta img) */
.redes { 
    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('img/redes.jpg') no-repeat center/cover; 
}
.seguridad { 
    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('img/seguridad.jpg') no-repeat center/cover; 
}

/* LOGO CENTRAL FLOTANTE */
.logo-flotante {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    pointer-events: none;
}

.logo-flotante img {
    width: 250px; /* Tamaño del logo central */
    filter: drop-shadow(0 0 15px rgba(0,0,0,0.8));
}

/* BOTONES DE LA PORTADA */
.boton {
    display: inline-block;
    margin-top: 20px;
    padding: 12px 30px;
    border: 2px solid var(--acento);
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    transition: 0.3s;
}

.boton:hover {
    background: var(--acento);
    color: #000;
}
/* EFECTO DE AGRANDAR AL PASAR EL MOUSE */
.mitad {
    flex: 1;
    transition: flex 0.6s ease-in-out, filter 0.5s ease; /* Transición suave del ancho */
    filter: grayscale(40%); /* Opcional: un poco gris cuando no está seleccionado */
}

.mitad:hover {
    flex: 1.5; /* Se agranda un 50% más que la otra mitad */
    filter: grayscale(0%); /* Color pleno al pasar el mouse */
    cursor: pointer;
}

.mitad .contenido {
    transition: transform 0.5s ease;
}

.mitad:hover .contenido {
    transform: scale(1.1); /* Agranda un poquito el texto también */
}