/* Navegación principal mejorar color del boton de opciones */
.navbar-dark .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.78);
    transition: color 0.2s ease;
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus {
    color: #ffffff;
}

/* Opción activa del menú */
.navbar-dark .navbar-nav .nav-link.active {
    color: #ffffff;
    border-bottom: 2px solid #3b82f6;
}

/* espacio entre opciones del menu nav */
.navbar-nav > li{
    margin-left: 10px;
    margin-right: 10px;
}

/* para cuando se pase el mouse las opciones aumenten de tamaño el texto */
.navbar-nav > li > a {
	transition: color 0.3s, font-weight 0.3s; /* Añade una transición suave */
}

/* para cuando se pase el mouse las opciones se coloquen en negrilla y aumenten de tamaño el texto */
.navbar-nav > li > a:hover {
	font-weight: bold; /* Negrita al hacer hover */
	color: #333; /* Cambia el color a un tono más oscuro */
}

/* definir background */
.bg-principal {
	background: #000028;
}

.bg-gray-cos {
	background: #DBDBDB;
}

.box-shadow-cos:hover
{
	box-shadow: 2px 2px 10px #999;
}


/* efecto al pasar mouse en CARD*/


/* Estilos personalizados para las imágenes dentro de las tarjetas personalizadas */
.card .border {
    margin: 0;
    padding: 0;
}

.bg-empresa-cos {
	background: #0098c1;
}

.bg-gris-cos {
	background: #f5f5f5;
}

/*hipervinculos - enlaces*/
/*blanco*/
.link-white {
	color:#fff;
	text-decoration:none;
	font-size:14px;
}
.link-white:link {
	color: rgb(202, 182, 182);
	text-decoration: none;
}
.link-white:visited {
	text-decoration: none;
	color: #FFF;
}
.link-white:hover {
	text-decoration: none;
	color: #FF0 !important;
}
.link-white:active {
	text-decoration: none;
	color: #FFF;
}

/*negro font*/
.link-black {
	color: 	#000000;
	text-decoration:none;
	font-size:14px;
}
.link-black:link {
	color: rgb(14, 12, 12);
	text-decoration: none;
}
.link-black:visited {
	text-decoration: none;
	color: rgb(14, 11, 11);
}
.link-black:hover {
	text-decoration: none;
	color: #ff0000 !important;
}
.link-black:active {
	text-decoration: none;
	color: rgb(14, 11, 11);
}

/*link blue*/
.link-blue {
	color: 	#0101DF;
	text-decoration:none;
	font-size:14px;
}
.link-blue:link {
	color: #0101DF;
	text-decoration: none;
}
.link-blue:visited {
	text-decoration: none;
	color: #0101DF;
}
.link-blue:hover {
	text-decoration: none;
	color: #ff0000 !important;
}
.link-blue:active {
	text-decoration: none;
	color: #0101DF;
}


.link-black-boton {
    color: black;
    text-decoration: none;
    font-size: 14px;
}

.link-black-boton:link {
    color: black;
    text-decoration: none;
}

.link-black-boton:visited {
    text-decoration: none;
    color: black;
}

.link-black-boton:hover {
    text-decoration: none;
    color: black;
}

.link-black-boton:active {
    text-decoration: none;
    color: black;
}

.link-black-boton a:hover {
    color: black;
}


/* definir texto - letras - contenido - color - colores */
.text-blue-cos{
	color: blue;
}
.text-red-cos{
	color: red;
}
.text-green-cos {
	color: green;
}

/*margenes   */
.mb-120 {
	margin-bottom: 7em;
}

.pointer {
	cursor: pointer;
}

#marco_subiendo{
	display:none;
	width: 100%;
	margin-bottom: 10px;
}

#marco_subiendo1{
	display:none;
	width: 100%;
	margin-bottom: 10px;
}

#marco_subiendo2{
	display:none;
	width: 100%;
	margin-bottom: 10px;
}
/*dojutsu*/
/*
.border-1-p {
    border: 3px #D8D8D8 solid;
}

.marco_foto_p {
    box-shadow: 2px 2px 5px #999;
}
*/
/*
.img-contenedor:hover img {
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -o-transform: scale(1.05);
    transform: scale(1.05);
}*/

.bg-gray1-p {
    background: #F2F2F2;
}

/* Color fondo encabezado login mantenimiento */
.bg-encab-sup {
	background: #424240;
}

/* **********************************
// Blog - Actualidad - Noticias
/* **********************************

/* Efecto de realze suave al pasar el mouse por las imágenes  para blog */
.img-hover-zoom{
    transition:
        transform .45s ease,
        filter .45s ease;
}

.img-hover-zoom:hover{
    transform: scale(1.07);
    filter: brightness(1.04);
}

/* ==========================================
   GALERÍA DE FOTOS
========================================== */
.galeria-foto {
    display: inline-block;
    padding: 6px;
    background: #ffffff;
    border: 1px solid #e3e3e3;
    border-radius: 14px;
    overflow: hidden;

    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.10);

    transition:
        border-color 0.35s ease,
        box-shadow 0.35s ease,
        transform 0.35s ease;
}

/* Imagen */
.galeria-foto img {
    display: block;
    border-radius: 9px;

    transition:
        filter 0.35s ease;
}

/* Efecto elegante al pasar el mouse */
.galeria-foto:hover {
    border-color: #c7c7c7;

    box-shadow:
        0 8px 22px rgba(0, 0, 0, 0.16);

    transform: translateY(-3px);
}

/* La imagen NO crece */
.galeria-foto:hover img {
    filter: brightness(1.04);
}

/* Sección Contacto del menu de Opciones */
.hero-contacto {
    background: linear-gradient(135deg, #000028 0%, #101040 100%);
    padding: 4rem 1rem 3rem;
}

.hero-contacto h4 {
    color: #ffffff !important;
    font-size: 2rem;
}

.hero-contacto p {
    color: #b8bcd6;
    max-width: 500px;
    margin: 0.5rem auto 0;
}

/* Color para el texto "Contáctanos" (un azul claro/acero que contrasta y combina con la barra) */
.titulos {
    color: #3b82f6;
}

/* Color de fondo para el formulario (un azul muy claro y suave) */
.bg-formulario {
    background-color: #f0f4f8;
}

/* Pie de página - alineado a la paleta navy del sitio */
.bg-footer {
	background: linear-gradient(180deg, #05051a 0%, #000028 100%);
}

/* Margenes extra a bootstrap */
.mb-6 {
  margin-bottom: 4rem !important; /* Equivalente a 64px o el valor que prefieras */
}

.mb-7 {
  margin-bottom: 5rem !important; /* Equivalente a 80px */
}

/* =========================================================
   HOME
========================================================= */

/* Texto principal */

.texto-principal {
    color: #05052B;
}


/* Fondo gris claro de los bloques */

.bg-bloque1 {
    background: #F5F5F5;
}


/* =========================================================
   BLOQUE PRESENTACIÓN
========================================================= */

/* Subtítulo superior */

.subtitulo-home {
    color: #3b82f6;
    letter-spacing: 1px;
    font-size: 0.78rem;
}


/* Texto general */

.texto-home {
    color: #4b5563;
    line-height: 1.7;
}


/* Datos destacados */

.dato-home {
    color: #000028;
    font-size: 1.4rem;
}


.descripcion-dato {
    color: #64748b;
}

/* =========================================================
   BLOQUE PRESENTACIÓN - IMAGEN
========================================================= */

.presentacion-imagen {
    position: relative;
    overflow: hidden;
    border-radius: 10px;

    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.14);
}


/* Imagen */

.imagen-presentacion {
    display: block;
    width: 100%;
}


/* =========================================================
   TEXTO SOBRE LA IMAGEN
========================================================= */

.presentacion-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;

    padding: 3rem 1.5rem 1.4rem;

    background: linear-gradient(
        to top,
        rgba(0, 0, 40, 0.92) 0%,
        rgba(0, 0, 40, 0.68) 42%,
        rgba(0, 0, 40, 0) 100%
    );

    color: #ffffff;
}


/* Línea decorativa */

.presentacion-linea {
    width: 46px;
    height: 3px;

    margin-bottom: 0.65rem;

    background: #3b82f6;
    border-radius: 5px;
}


/* Contenido */

.presentacion-texto {
    display: flex;
    flex-direction: column;
}


.presentacion-texto strong {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;

    color: #ffffff;
}


.presentacion-texto span {
    margin-top: 0.25rem;

    font-size: 0.78rem;
    line-height: 1.4;

    color: rgba(255, 255, 255, 0.88);
}

/* =========================================================
   CARRUSEL HOME
========================================================= */

.carousel-home {
    overflow: hidden;
    border-radius: 10px;

    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.14);
}


/* Cada imagen */

.carousel-home .carousel-item {
    position: relative;
}


.carousel-home img {
    display: block;
    width: 100%;
}


/* =========================================================
   TEXTO DEL CARRUSEL
========================================================= */

.carousel-caption-home {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;

    padding: 4rem 1.8rem 1.6rem;

    background: linear-gradient(
        to top,
        rgba(0, 0, 40, 0.93) 0%,
        rgba(0, 0, 40, 0.68) 42%,
        rgba(0, 0, 40, 0) 100%
    );

    color: #ffffff;
}


/* Línea decorativa */

.carousel-linea {
    width: 46px;
    height: 3px;

    margin-bottom: 0.65rem;

    background: #3b82f6;
    border-radius: 5px;
}


/* Título */

.carousel-caption-home h3 {
    margin-bottom: 0.35rem;

    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.3;

    color: #ffffff;
}


/* Descripción */

.carousel-caption-home p {
    margin-bottom: 0;

    font-size: 0.85rem;
    line-height: 1.45;

    color: rgba(255, 255, 255, 0.88);
}

/* =========================================================
   TÍTULOS DE SECCIONES
========================================================= */

.titulo-seccion {
    color: #05052B;
    font-weight: 600;
}


.linea-titulo {
    width: 55px;
    height: 3px;

    background: #3b82f6;

    margin-left: auto;
    margin-right: auto;

    border-radius: 5px;
}


/* =========================================================
   SERVICIOS
========================================================= */

.texto-servicios {
    max-width: 650px;
    color: #64748b;
}


/* Cards */

.card-servicio {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


.card-servicio:hover {
    transform: translateY(-4px);

    box-shadow:
        0 8px 22px rgba(0, 0, 0, 0.12);
}

/* Imágenes de servicios */
.imagen-servicio {
    width: 100%;             /* Ocupa todo el ancho disponible */
    /* height: 220px; */
    aspect-ratio: 16 / 9;    /* Mantiene la forma 16:9 */
    object-fit: cover;       /* Evita deformación y rellena el espacio */
    object-position: center; /* Centra un posible recorte */
}

/* =========================================================
   HOME - MÓVIL
========================================================= */

@media (max-width: 767.98px) {


    /* =====================================================
       IMAGEN PRESENTACIÓN
    ===================================================== */

    .presentacion-overlay {
        padding: 4rem 1.3rem 1.3rem;
    }


    .presentacion-texto strong {
        font-size: 0.95rem;
    }


    .presentacion-texto span {
        font-size: 0.75rem;
    }


    /* =====================================================
       CARRUSEL
    ===================================================== */

    .carousel-home .carousel-item {
        height: 280px;
    }


    .carousel-home img {
        width: 100%;
        height: 280px;

        object-fit: cover;
    }


    /* Texto abajo a la izquierda */

    .carousel-caption-home {
        padding:
            5rem
            1.3rem
            1.3rem;
    }


    .carousel-caption-home h3 {
        font-size: 1.05rem;
    }


    .carousel-caption-home p {
        font-size: 0.78rem;
    }


    /* =====================================================
       INDICADORES DEL CARRUSEL
    ===================================================== */

    .carousel-home .carousel-indicators {
        top: 0.9rem;
        right: 1rem;
        bottom: auto;
        left: auto;

        width: auto;

        margin: 0;

        justify-content: flex-end;
    }


    /* Barras indicadoras */

    .carousel-home .carousel-indicators [data-bs-target] {
        width: 24px;
        height: 3px;

        margin-right: 3px;
        margin-left: 3px;

        border: 0;

        background-color: rgba(255, 255, 255, 0.65);

        opacity: 1;
    }


    /* Indicador activo */

    .carousel-home .carousel-indicators .active {
        background-color: #3b82f6;
    }


    /* =====================================================
       SERVICIOS
    ===================================================== */

    .imagen-servicio {
        height: 230px;
    }

}

/*
=========================================================

    HERO INTERNO

=========================================================
*/

/* Encabezado común de las páginas internas */

.hero-interno {

    background: linear-gradient(
        135deg,
        #000028 0%,
        #101040 100%
    );

}

.hero-interno .subtitulo-home {

    color: #ffffff;

}

.titulo-hero {

    color: #ffffff;

    font-weight: 600;

}

.hero-interno .linea-titulo {

    background: #3b82f6;

}

.texto-hero-intro {

    max-width: 680px;

    margin-left: auto;

    margin-right: auto;

    color: rgba(255, 255, 255, 0.80);

    line-height: 1.7;

}

/*
=========================================================

    IMAGEN PRINCIPAL

=========================================================
*/

.nosotros-imagen {

    overflow: hidden;

    border-radius: 10px;

    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.14);

}

.nosotros-imagen img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

}


/*
=========================================================

    CONTENIDO

=========================================================
*/

.titulo-nosotros-contenido {

    color: #05052B;

    font-size: 1.7rem;

    font-weight: 600;

}


/*
=========================================================

    FORTALEZAS

=========================================================
*/

.nosotros-item {

    display: flex;

    align-items: flex-start;

    gap: 1.2rem;

    padding: 1.5rem;

    background: #ffffff;

    border: 1px solid #e2e8f0;

    border-radius: 8px;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;

}

.nosotros-item:hover {

    transform: translateY(-3px);

    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.10);

}


/* Número */

.nosotros-numero {

    min-width: 42px;

    color: #3b82f6;

    font-size: 0.85rem;

    font-weight: 700;

}


/* Título */

.nosotros-item h3 {

    margin-bottom: 0.45rem;

    color: #05052B;

    font-size: 1rem;

    font-weight: 600;

}


/* Texto */

.nosotros-item p {

    margin-bottom: 0;

    color: #64748b;

    font-size: 0.92rem;

    line-height: 1.6;

}


/*
=========================================================

    MÓVIL

=========================================================
*/

@media (max-width: 767.98px) {

    .titulo-hero {

        font-size: 1.8rem;

    }

    .titulo-nosotros-contenido {

        font-size: 1.4rem;

    }

    .nosotros-item {

        padding: 1.3rem;

    }

}

/*
IMAGEN PRINCIPAL
=========================================================
*/

.servicios-imagen {
    overflow: hidden;

    border-radius: 10px;

    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.14);
}
.servicios-imagen img {
    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;
}

/*
TÍTULOS Y CONTENIDO
=========================================================
*/
.titulo-servicios-contenido {
    color: #05052B;

    font-size: 1.7rem;

    font-weight: 600;
}

/*
BLOQUE DESTACADO DE FABRICACIÓN
=========================================================
*/
.servicio-destacado {
    padding: 2rem;

    background: #ffffff;

    border: 1px solid #e2e8f0;

    border-radius: 10px;
}
.servicio-dato {
    height: 100%;
}

.servicio-dato h3 {
    margin-bottom: 0.5rem;

    color: #05052B;

    font-size: 1rem;

    font-weight: 600;
}
.servicio-dato p {
    margin-bottom: 0;

    color: #64748b;

    font-size: 0.92rem;

    line-height: 1.6;
}
/*
TIPOS DE TRANSFORMADORES
=========================================================
*/
.card-tipo-transformador {
    border: 1px solid #e2e8f0;

    border-radius: 10px;

    overflow: hidden;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}
.card-tipo-transformador:hover {
    transform: translateY(-4px);

    box-shadow:
        0 8px 22px rgba(0, 0, 0, 0.12);
    }
.card-tipo-transformador .card-body {
    padding: 1.8rem;
}
.card-tipo-transformador h3 {
    color: #05052B;

    font-size: 1.15rem;

    font-weight: 600;

    line-height: 1.4;
}
.texto-card-servicio {
    color: #64748b;

    line-height: 1.6;
}

/*
LISTAS DE SERVICIOS
=========================================================
*/
.lista-servicio {
    margin: 0;

    padding-left: 1.1rem;

    color: #4b5563;
}
.lista-servicio li {
    margin-bottom: 0.65rem;

    padding-left: 0.2rem;

    line-height: 1.5;
}
.lista-servicio li:last-child {
    margin-bottom: 0;
}
/*
RECONSTRUCCIÓN Y MANTENIMIENTO
=========================================================
*/
.servicio-bloque {
    padding: 2rem;

    border: 1px solid #e2e8f0;

    border-radius: 10px;

    background: #ffffff;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}
.servicio-bloque:hover {
    transform: translateY(-3px);

    box-shadow:
        0 8px 22px rgba(0, 0, 0, 0.10);
}
.servicio-bloque h3 {
    margin-bottom: 1rem;

    color: #05052B;

    font-size: 1.25rem;

    font-weight: 600;
}
/*
DIAGNÓSTICO DESTACADO
=========================================================
*/
.diagnostico-destacado {
    padding: 2rem;

    background: #000028;

    border-radius: 10px;

    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.14);
}
.diagnostico-destacado h3 {
    margin-bottom: 1rem;

    color: #ffffff;

    font-size: 1.3rem;

    font-weight: 600;
}
.diagnostico-destacado p {
    margin-bottom: 1.5rem;

    color: rgba(255, 255, 255, 0.80);

    line-height: 1.7;
}
/*
SERVICIOS - MÓVIL
=========================================================
*/
@media (max-width: 767.98px) {
    /*
    =====================================================
        ENCABEZADO
    =====================================================
    */

    /*
    =====================================================
        TÍTULOS
    =====================================================
    */

    .titulo-servicios-contenido {

        font-size: 1.4rem;

    }


    /*
    =====================================================
        BLOQUES
    =====================================================
    */

    .servicio-destacado {

        padding: 1.5rem;

    }


    .card-tipo-transformador .card-body {

        padding: 1.5rem;

    }


    .servicio-bloque {

        padding: 1.5rem;

    }


    .diagnostico-destacado {

        padding: 1.5rem;

    }
}

/* =========================================================
   FOTOS - ACERCAMIENTO SUAVE REUTILIZABLE
========================================================= */
/* Efecto con mouse, respetando la preferencia de reducir movimiento. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {

    /* Suaviza el acercamiento y el regreso al tamaño original. */
    .foto-zoom-suave img {
        transition:
            transform 0.45s ease,
            filter 0.45s ease;
    }

    /* Amplía ligeramente la imagen dentro de su marco. */
    .foto-zoom-suave:hover img {
        transform: scale(1.04);
        filter: brightness(1.03);
    }

}

/* =========================================================
   HOME - REALCE DE LA TARJETA DE PRESENTACIÓN
========================================================= */
/* Aplica el movimiento con mouse y respeta movimiento reducido. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {

    /* La foto y su texto superpuesto se desplazan como una unidad. */
    .presentacion-imagen {
        transition:
            transform 0.3s ease,
            box-shadow 0.3s ease;
    }

    /* Elevación discreta, sin ampliar la imagen ni las letras. */
    .presentacion-imagen:hover {
        transform: translateY(-3px);
        box-shadow: 0 12px 28px rgba(0, 0, 40, 0.20);
    }

}

/* =========================================================
   CERTIFICADOS - GALERÍA DE DIPLOMAS
========================================================= */
/* Tarjetas discretas, coherentes con los servicios del sitio. */
.certificado-card {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
}

/* Área uniforme para diplomas con distintas proporciones. */
.certificado-miniatura {
    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;
}

/* Muestra el documento completo sin recortarlo ni deformarlo. */
.certificado-imagen {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: contain;
}

/* Logo principal del encabezado */
.logo-principal {
    max-height: 45px;
    width: auto;
}