/*
Theme Name: Prodycma
Theme URI: http://tusitio.com/prodycma
Author: Tu Nombre
Author URI: http://tusitio.com
Description: Tema profesional responsive con Bootstrap 5, optimizado para SEO
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: prodycma
Tags: responsive, bootstrap, seo, custom
*/


/* =====================================================
   Reset profesional
   ===================================================== */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Variables globales */
:root {
    --color-principal: #C51414;   /* Barra roja */
    --color-negro-global: #1F1D1D; /* Barra negra */
    --color-blanco: #ffffff;
}

/* =====================================================
   Barra superior (desktop only)
   ===================================================== */
/* ================= Barra roja ================= */
.barra-superior {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    background-color: var(--color-principal); /* #C51414 */
    padding: 17px 0px;
}

/* Bloque de YouTube */
.youtube-bloque {
    position: relative;
    top: 6px; /* ajuste fino vertical */
}

.youtube-bloque .linea {
    display: inline-block;
    width: 50px;       /* longitud de la línea */
    height: 1px;
    background: rgba(255, 255, 255, 0.2);
    transform-origin: bottom;
}

.youtube-bloque .linea:first-child {
    transform: rotate(70deg); /* inclinación izquierda */
     margin-right: 0px; /* reduce espacio a la izquierda del icono */
}


.youtube-bloque .linea:last-child {
    transform: rotate(70deg); /* inclinación derecha */
    margin-left: 0px; /* reduce espacio a la derecha del icono */
}

.youtube-bloque .icono i {
    font-size: 24px;
    color: white;
}

/* Barra negra principal */
.barra-principal {
    background-color: var(--color-negro-global); /* #1F1D1D */
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.barra-principal .logo a {
    display: inline-block; /* asegura que el enlace se ajuste al contenido */
    text-decoration: none; /* mantiene sin subrayado si aún hay texto */
}

.barra-principal .logo-img {
    height: 90px;       /* altura reducida */
    max-width: 100%;    /* evita que se salga del contenedor */
    object-fit: contain; /* mantiene proporción */
}

/* Bloque de info */

.info-contenedor {
    /* desplazamiento hacia la izquierda */
    margin-left: 90px; 
}


.info-contenedor .info-item .icono {
    color: #C51414; /* color global */
    font-size: 22px;
}


.info-contenedor .info-item .texto .linea1 {
    color: white;
    margin: 0;
    font-size: 18px;
    font-weight: 500;
}

.info-contenedor .info-item .texto .linea2 {
    color: rgba(255,255,255,0.5);
    margin: 0;
    font-size: 14px;
}

/* Botón menú hamburguesa móvil */
.barra-principal button.menu-toggle {
    font-size: 24px;
    background: transparent;
    border: none;
    color: var(--color-blanco);
}


/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap');

/* Contenedor del slider */
.slider-container {
    position: relative;
    width: 100%;
    height: auto;
}

/* Menú dentro del slider (solo PC) */
.menu-container {
    position: absolute;
    top: 6px; /* Ajusta vertical */
    left: 50%; /* Centrado horizontal */
    transform: translateX(-50%);
    z-index: 999;
    display: none; /* por defecto oculto, se mostrará solo en lg */
}

@media(min-width: 992px) {
    .menu-container {
        display: flex;
        justify-content: center;
        width: 100%;
    }
}

/* Lista horizontal de paralelogramos */
.menu {
    list-style: none;
    display: flex;
    gap: 1px;
    position: relative;
    margin: 0;
    padding: 0;
}

/* Cada item de la lista */
.menu li {
    position: relative;
}

/* Líneas entre items (paralelogramo efecto) */
.menu li:not(:last-child)::after,
.menu li:first-child::before,
.menu li:last-child::after {
    content: "";
    position: absolute;
    top: 5%;
    width: 1px;
    height: 90%;
    background-color: rgba(255,255,255,0.0);
    z-index: 3;
    transform: skewX(-20deg);
}

.menu li:not(:last-child)::after {
    right: -2.5px;
}

.menu li:first-child::before {
    left: -2.5px;
}

.menu li:last-child::after {
    right: -2.5px;
}

/* Cada item paralelogramo */
.menu li a {
    display: block;
    position: relative;
    padding: 37px 20px;
    background-color: transparent;
    color: white;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 500;
    font-size: 14px;
    transform: skewX(-20deg);
    overflow: hidden;
    font-family: 'Montserrat', sans-serif;
}

/* Texto recto */
.menu li a span {
    display: inline-block;
    transform: skewX(20deg);
    position: relative;
    z-index: 2;
    transition: color 0.3s ease;
}

/* Hover: fondo rojo que se abre desde el centro */
.menu li a .hover-bg {
    position: absolute;
    top: 0;
    left: 50%;
    width: 0;
    height: 100%;
    background-color: #C51414; /* color global */
    transform: translateX(-50%);
    z-index: 1;
    transition: width 0.5s cubic-bezier(0.65,0,0.35,1), opacity 0.5s ease;
    opacity: 0;
}

/* Hover activo */
.menu li a:hover .hover-bg {
    width: 100%;
    opacity: 1;
}

/* Cambiar texto a blanco al hover */
.menu li a:hover span {
    color: white;
}

/* Centrar la línea blanca debajo del menú */
.menu-line {
    position: absolute;
    top: 90%; /* justo debajo del menú */
    left: 50%;
    transform: translateX(-50%);
    width: 428px; /* ancho ajustable */
    height: 1px;
    background-color: rgba(255,255,255,0.3);
    margin-top: 0px;
}

/* Ajustes responsive para ocultar el menú en móviles */
@media(max-width: 991px) {
    .menu-container {
        display: none;
    }
}


/* =====================================================
   Responsive adjustments
   ===================================================== */
@media (max-width: 991.98px) {
    .barra-superior {
        display: none; /* Solo se oculta visualmente, barra sigue en DOM */
    }
    .barra-principal .info-icons {
        display: none;
    }
    .hero-slider { height: 400px; }
}

@media (max-width: 575.98px) {
    .hero-slider { height: 300px; }
}