* {
  text-decoration: none !important;
}


/* Letra */

body {
  font-family: "Open Sans", sans-serif;
}

:root {
    /* ================================
    PRIMARIO – Azul vibrante
    ================================ */
    --color-primario:               #0074d9;       /* azul principal (cielo vibrante) */
    --color-primario-hover:         #2891e0;       /* más claro al pasar el mouse */
    --color-primario-active:        #005bb5;       /* más profundo al hacer clic */
    --color-primario-subtle:        #e0f0fc;       /* fondo sutil */
    --color-primario-subtle-focus:  #e0f0fc80;     /* fondo sutil con transparencia */
    --color-primario-focus:         #0074d980;     /* azul con transparencia */

    /* ================================
    SECUNDARIO – Azul marino
    ================================ */
    --color-secundario:             #003d99;       /* azul oscuro / navy */
    --color-secundario-hover:       #1453b3;       /* ligeramente más claro */
    --color-secundario-active:      #002d73;       /* aún más profundo */
    --color-secundario-subtle:      #dde6f9;       /* fondo claro azulado */
    --color-secundario-subtle-focus:#dde6f980;     /* versión translúcida */
    --color-secundario-focus:       #003d9980;     /* navy transparente */

    /* ================================
    BLANCO NEUTRO
    ================================= */
    --color-blanco:                 #ffffff;
    --color-blanco-hover:           #f5f5f5;
    --color-blanco-active:          #e6e6e6;
    --color-blanco-subtle:          #ffffff;
    --color-blanco-subtle-focus:    #ffffff80;
    --color-blanco-focus:           #ffffff80;
}

/* ================================
Botones degradado 
================================ */
/* .btn-degradado {
  background: linear-gradient(to right, var(--color-acentado), var(--color-primario));
  color: var(--color-blanco);
  border: none;
  font-weight: 600;
  padding: 0.6rem 1.4rem;
  border-radius: 0.375rem;
  transition: background 0.3s ease, transform 0.3s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.btn-degradado:hover {
  background: linear-gradient(to right, var(--color-acentado-active), var(--color-primario-active));
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.2);
} */

.btn-degradado {
  background: linear-gradient(135deg, var(--color-acentado), var(--color-destaque));
  color: var(--color-blanco);
  border: none;
  font-weight: 600;
  padding: 0.6rem 1.4rem;
  border-radius: 0.5rem;
  transition: background 0.3s ease, transform 0.3s ease;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
}

.btn-degradado:hover {
  background: linear-gradient(135deg, var(--color-acentado-hover), var(--color-destaque-hover));
  transform: translateY(-3px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25);
}


/*=============================================
Textos degradados
=============================================*/
.titulo-degradado {
  background: linear-gradient(to right, var(--color-acentado), var(--color-primario-active));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.15); 
}

/* .text-degradado {
  background: linear-gradient(to right, var(--color-acentado), var(--color-primario-active));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.15);
} */

/* .text-degradado {
  background: linear-gradient(to right, var(--color-acentado), var(--color-destaque));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.15);
} */

.text-degradado {
  background: linear-gradient(to right, var(--color-acentado), var(--color-secundario));
    background: 
        radial-gradient(circle at 75% 25%, rgba(106, 215, 229, 0.2), transparent 200px),
        radial-gradient(circle at 20% 70%, rgba(123, 63, 150, 0.25), transparent 300px),
        linear-gradient(120deg, #6AD7E5, #7D3B8A, #000000);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.15);
}

/*=============================================
Backgrounds degradado
=============================================*/
.bg-degradado{
    background: linear-gradient(to right, var(--color-destaque-active), var(--color-secundario));
    background: 
        radial-gradient(circle at 75% 25%, rgba(106, 215, 229, 0.2), transparent 200px),
        radial-gradient(circle at 20% 70%, rgba(123, 63, 150, 0.25), transparent 300px),
        linear-gradient(120deg, #6AD7E5, #7D3B8A, #000000);
}

/*=============================================
//Backgrounds
=============================================*/

/* ================================
Colores de fondo base
================================ */
.bg-primario           { background-color: var(--color-primario); }
.bg-secundario         { background-color: var(--color-secundario); }
.bg-acentado           { background-color: var(--color-acentado); }
.bg-fondo              { background-color: var(--color-fondo); }
.bg-destaque           { background-color: var(--color-destaque); }
.bg-blanco             { background-color: var(--color-blanco); }

/* ================================
Estados hover
================================ */
.bg-primario-hover           { background-color: var(--color-primario-hover) !important; }
.bg-secundario-hover         { background-color: var(--color-secundario-hover); }
.bg-acentado-hover           { background-color: var(--color-acentado-hover); }
.bg-fondo-hover              { background-color: var(--color-fondo-hover); }
.bg-destaque-hover           { background-color: var(--color-destaque-hover); }
.bg-blanco-hover             { background-color: var(--color-blanco-hover); }

/* ================================
Estados subtle
================================ */
.bg-primario-subtle          { background-color: var(--color-primario-subtle) !important; }
.bg-secundario-subtle        { background-color: var(--color-secundario-subtle)!important; }
.bg-acentado-subtle          { background-color: var(--color-acentado-subtle); }
.bg-fondo-subtle             { background-color: var(--color-fondo-subtle); }
.bg-destaque-subtle          { background-color: var(--color-destaque-subtle); }
.bg-blanco-subtle            { background-color: var(--color-blanco-subtle); }

/* ================================
Estados focus
================================ */
.bg-primario-focus           { background-color: var(--color-primario-focus); }
.bg-secundario-focus         { background-color: var(--color-secundario-focus); }
.bg-acentado-focus           { background-color: var(--color-acentado-focus); }
.bg-fondo-focus              { background-color: var(--color-fondo-focus); }
.bg-destaque-focus           { background-color: var(--color-destaque-focus); }
.bg-blanco-focus             { background-color: var(--color-blanco-focus); }

/* ================================
Bg-azul-claro
================================ */
.bg-azul-claro{ background-color: #aadbff !important; }
/* ================================
Botones primario
================================ */
.btn-primario {
    background-color: var(--color-primario);
    color: var(--color-blanco);
    border: none;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-primario:hover {
    background-color: var(--color-primario-hover);
}

.btn-primario:active {
    background-color: var(--color-primario-active);
}

.btn-primario:focus {
    outline: 2px solid var(--color-primario-focus);
    outline-offset: 2px;
}

.btn-primario:disabled {
    opacity: 0.6;
    pointer-events: none;
}

/* Outline version */
.btn-primario-outline {
    background-color: transparent;
    color: var(--color-primario);
    border: 2px solid var(--color-primario);
}

.btn-primario-outline:hover {
    background-color: var(--color-primario-subtle);
    color: var(--color-primario-hover);
}


/* ================================
Botones secundario
================================ */
.btn-secundario {
    background-color: var(--color-secundario);
    color: var(--color-blanco);
    border: none;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-secundario:hover {
    background-color: var(--color-secundario-hover);
}

.btn-secundario:active {
    background-color: var(--color-secundario-active);
}

.btn-secundario:focus {
    outline: 2px solid var(--color-secundario-focus);
    outline-offset: 2px;
}

.btn-secundario:disabled {
    opacity: 0.6;
    pointer-events: none;
}

.btn-secundario-outline {
    background-color: transparent;
    color: var(--color-secundario);
    border: 2px solid var(--color-secundario);
}

.btn-secundario-outline:hover {
    background-color: var(--color-secundario-subtle);
    color: var(--color-secundario-hover);
}


/* ================================
Botones acentado
================================ */
.btn-acentado {
    background-color: var(--color-acentado);
    color: var(--color-blanco);
    border: none;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-acentado:hover {
    background-color: var(--color-acentado-hover);
}

.btn-acentado:active {
    background-color: var(--color-acentado-active);
}

.btn-acentado:focus {
    outline: 2px solid var(--color-acentado-focus);
    outline-offset: 2px;
}

.btn-acentado:disabled {
    opacity: 0.6;
    pointer-events: none;
}

.btn-acentado-outline {
    background-color: transparent;
    color: var(--color-acentado);
    border: 2px solid var(--color-acentado);
}

.btn-acentado-outline:hover {
    background-color: var(--color-acentado-subtle);
    color: var(--color-acentado-hover);
}


/* ================================
Botones fondo
================================ */
.btn-fondo {
    background-color: var(--color-fondo);
    color: var(--color-blanco);
    border: none;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-fondo:hover {
    background-color: var(--color-fondo-hover);
}

.btn-fondo:active {
    background-color: var(--color-fondo-active);
}

.btn-fondo:focus {
    outline: 2px solid var(--color-fondo-focus);
    outline-offset: 2px;
}

.btn-fondo:disabled {
    opacity: 0.6;
    pointer-events: none;
}

.btn-fondo-outline {
    background-color: transparent;
    color: var(--color-fondo);
    border: 2px solid var(--color-fondo);
}

.btn-fondo-outline:hover {
    background-color: var(--color-fondo-subtle);
    color: var(--color-fondo-hover);
}


/* ================================
Botones destaque
================================ */
.btn-destaque {
    background-color: var(--color-destaque);
    color: var(--color-blanco);
    border: none;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-destaque:hover {
    background-color: var(--color-destaque-hover);
}

.btn-destaque:active {
    background-color: var(--color-destaque-active);
}

.btn-destaque:focus {
    outline: 2px solid var(--color-destaque-focus);
    outline-offset: 2px;
}

.btn-destaque:disabled {
    opacity: 0.6;
    pointer-events: none;
}

.btn-destaque-outline {
    background-color: transparent;
    color: var(--color-destaque);
    border: 2px solid var(--color-destaque);
}

.btn-destaque-outline:hover {
    background-color: var(--color-destaque-subtle);
    color: var(--color-destaque-hover);
}


/* ================================
Botones blanco
================================ */
.btn-blanco {
    background-color: var(--color-blanco);
    color: var(--color-fondo);
    border: none;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-blanco:hover {
    background-color: var(--color-blanco-hover);
}

.btn-blanco:active {
    background-color: var(--color-blanco-active);
}

.btn-blanco:focus {
    outline: 2px solid var(--color-blanco-focus);
    outline-offset: 2px;
}

.btn-blanco:disabled {
    opacity: 0.6;
    pointer-events: none;
}

.btn-blanco-outline {
    background-color: transparent;
    color: var(--color-blanco);
    border: 2px solid var(--color-blanco);
}

.btn-blanco-outline:hover {
    background-color: var(--color-blanco-subtle);
    color: var(--color-blanco-hover);
}

/* ================================
Colores de texto primario
================================ */
.text-primario            { color: var(--color-primario); }
.text-primario-hover      { color: var(--color-primario-hover); }
.text-primario-active     { color: var(--color-primario-active); }
.text-primario-focus      { color: var(--color-primario-focus); }
.text-primario-subtle     { color: var(--color-primario-subtle); }
.text-primario-subtle-focus { color: var(--color-primario-subtle-focus); }

/* ================================
Colores de texto secundario
================================ */
.text-secundario            { color: var(--color-secundario); }
.text-secundario-hover      { color: var(--color-secundario-hover); }
.text-secundario-active     { color: var(--color-secundario-active); }
.text-secundario-focus      { color: var(--color-secundario-focus); }
.text-secundario-subtle     { color: var(--color-secundario-subtle); }
.text-secundario-subtle-focus { color: var(--color-secundario-subtle-focus); }

/* ================================
Colores de texto acentado
================================ */
.text-acentado            { color: var(--color-acentado); }
.text-acentado-hover      { color: var(--color-acentado-hover); }
.text-acentado-active     { color: var(--color-acentado-active); }
.text-acentado-focus      { color: var(--color-acentado-focus); }
.text-acentado-subtle     { color: var(--color-acentado-subtle); }
.text-acentado-subtle-focus { color: var(--color-acentado-subtle-focus); }

/* ================================
Colores de texto fondo
================================ */
.text-fondo            { color: var(--color-fondo) !important; }
.text-fondo-hover      { color: var(--color-fondo-hover); }
.text-fondo-active     { color: var(--color-fondo-active); }
.text-fondo-focus      { color: var(--color-fondo-focus); }
.text-fondo-subtle     { color: var(--color-fondo-subtle); }
.text-fondo-subtle-focus { color: var(--color-fondo-subtle-focus); }

/* ================================
Colores de texto destaque
================================ */
.text-destaque            { color: var(--color-destaque); }
.text-destaque-hover      { color: var(--color-destaque-hover); }
.text-destaque-active     { color: var(--color-destaque-active); }
.text-destaque-focus      { color: var(--color-destaque-focus); }
.text-destaque-subtle     { color: var(--color-destaque-subtle); }
.text-destaque-subtle-focus { color: var(--color-destaque-subtle-focus); }

/* ================================
Colores de texto blanco
================================ */
.text-blanco            { color: var(--color-blanco); }
.text-blanco-hover      { color: var(--color-blanco-hover); }
.text-blanco-active     { color: var(--color-blanco-active); }
.text-blanco-focus      { color: var(--color-blanco-focus); }
.text-blanco-subtle     { color: var(--color-blanco-subtle); }
.text-blanco-subtle-focus { color: var(--color-blanco-subtle-focus); }


/* ================================================
Navbar 
================================================ */
.navbar.fixed-top {
    z-index: 1050;
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); /* Sombra sutil */
}

/* ================================================
Estilo para enlaces del navbar (.text-nav-link)
================================================ */
/* .text-nav-link {
    color: var(--color-blanco);
    transition: all 0.3s ease;
    font-weight: 500;
}

.text-nav-link:hover {
    color: var(--color-destaque) ;
    transform: scale(1.09);
}

.text-nav-link:focus {
    color: var(--color-destaque);
} */

/*=============================================
Footer
=============================================*/
.footer-copy {
border-top: 1px solid rgba(255, 255, 255, 0.08); /* Más sutil que 0.5 */
padding-top: 1rem;
font-size: 0.875rem;
color: rgba(255, 255, 255, 0.7);
margin-top: 2rem;
}

/*=============================================
Footer-section
=============================================*/

.footer-dark .social-icon {
background-color: rgba(255, 255, 255, 0.1);
color: var(--color-blanco);
width: 36px;
height: 36px;
border-radius: 50%;
display: inline-flex;
justify-content: center;
align-items: center;
transition: background-color 0.3s, transform 0.3s;
}

.footer-dark .social-icon:hover {
background-color: var(--color-acentado);
transform: scale(1.1);
color: #fff;
}

.footer-dark .footer-link {
color: var(--color-blanco);
text-decoration: none;
display: block;
margin-bottom: 5px;
transition: color 0.3s;
}

.footer-dark .footer-link:hover {
color: var(--color-acentado);
text-decoration: underline;
}

.text-blanco-subtle {
color: rgba(255, 255, 255, 0.75);
}

/*=============================================
Navbar
=============================================*/
.header-scroll {
  transition: top 0.3s ease-in-out;
  z-index: 1030;
}

/*=============================================
Hero_section
=============================================*/
.slider-galeria .mySwiper2 {
  width: 100%;
  height: 300px;
}

.slider-galeria .mySwiper {
  height: 100px;
  box-sizing: border-box;
  padding: 10px 0;
}

.slider-galeria .swiper-slide {
  background-position: center;
  background-size: cover;
}

.slider-galeria .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slider-galeria .mySwiper .swiper-slide {
  width: 25%;
  height: 100%;
  opacity: 0.4;
  transition: 0.3s;
}

.slider-galeria .mySwiper .swiper-slide-thumb-active {
  opacity: 1;
}


.servicios-overlay {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 0.5rem 1rem;
  background: linear-gradient(to right, rgba(0, 116, 217, 0.70), rgba(0, 61, 153, 0.70));

  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  z-index: 10;
  white-space: nowrap;
  overflow-x: auto;
}

@media (max-width: 768px) {
  .servicios-overlay {
    font-size: 0.75rem;
    padding: 0.4rem 0.75rem;
  }
}

.mySwiper2 {
  position: relative;
}

/*=============================================
Welcome
=============================================*/
.hero-bienvenida {
  min-height: 100vh;
  padding-top: 120px; /* ajustable según el alto de tu header */
  padding-bottom: 60px; /* para asegurar espacio inferior */
  position: relative;
  background: #000;
}


.fondo-hero {
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  opacity: 0.3;
  z-index: 1;
}


.titulo-hero {
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #ffffff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

.text-acento {
  background: linear-gradient(to right, #00d4ff, #0074d9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.texto-hero {
  font-size: 1.25rem;
  color: #e0f3ff;
}

.panel-hero {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  backdrop-filter: blur(12px);
  color: #ffffff;
  font-size: 1rem;
  line-height: 1.7;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
   animation: fadeInUp 1s ease-in-out;
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/*=============================================
Branding
=============================================*/
.segmento-promocional {
  background: #f8f9fa;
}

.frase-empresa {
  font-size: 1.25rem;
  font-weight: 500;
  color: #0074d9;
  max-width: 800px;
  margin: auto;
}

.text-acento {
  color: #00bcd4;
}

.banner-catalogo {
  position: relative;
  display: inline-block;
}

.btn-banner {
  position: absolute;
  bottom: 12%;
  right: 5%;
  font-weight: bold;
  text-transform: uppercase;
  padding: 0.75rem 1.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.marcasSwiper .swiper-slide {
  text-align: center;
}

.marcasSwiper img {
  height: 50px;
  filter: grayscale(100%);
  transition: all 0.3s ease;
}

.marcasSwiper img:hover {
  filter: grayscale(0%);
  transform: scale(1.1);
}

/*=============================================
Services
=============================================*/
.text-acento {
  color: #0074d9;
  font-weight: 600;
}

/* Tabs */
.swiperServiciosTabs .swiper-slide {
  display: inline-block;
  width: auto;
  white-space: nowrap;
  cursor: pointer;
  padding: 10px 20px;
  margin: 0 5px;
  background-color: #ffffff;
  color: #0074d9;
  border: 2px solid #0074d9;
  border-radius: 25px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.swiperServiciosTabs .swiper-slide.active,
.swiperServiciosTabs .swiper-slide:hover {
  background-color: #0074d9;
  color: #ffffff;
}

/* Contenido */
.swiperServiciosContenido .swiper-slide {
  background: #fff;
  border-radius: 12px;
  margin-bottom: 20px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
}

/* screen Printing */
.swiperGraphicRequirementsGaleria,
.swiperSignBannerGaleria,
.swiperEmbroideryGaleria,
.swiperPrintingGaleria {
  width: 100%;
  max-width: 500px;
  padding: 1rem;
}

.swiperGraphicRequirementsGaleria .swiper-slide,
.swiperSignBannerGaleria .swiper-slide,
.swiperEmbroideryGaleria .swiper-slide,
.swiperPrintingGaleria .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
}




.img-slide-full {
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  border-radius: 12px;
}

@media (max-width: 767px) {
  .img-slide-full {
    max-height: 250px;
  }
}

.lista-servicio {
  list-style: disc;
  padding-left: 1.5rem;
  line-height: 1.6;
}

.accordion-item {
  border: none;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 10px;
  /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); */
}

.accordion-button {
  font-weight: 600;
  color: #0074d9;
  background-color: #fff;
  transition: background-color 0.3s ease;
}

.accordion-button:not(.collapsed) {
  background-color: #e6f2fd;
  color: #005fa3;
}