/*
Theme Name: Tricolor
Author: Erick Baca
Description: Esta es una web para Tricolor
Version: 1.0
*/

body {
    font-family: Arial, sans-serif;
    margin: 0;
    background: #f5f5f5;
}

header {
    background: #0033a0; /* azul */
    color: white;
    padding: 5px;
    text-align: center;
}

footer {
    background: #d91023; /* rojo */
    color: white;
    text-align: center;
    padding: 10px;
}

.container {
    width: 90%;
    margin: auto;
    padding: 5px;
}

h2 {
    font-size:35px;
    font-family: 'Gotham', Arial, sans-serif;
}

h1{
    font-size:45px;
    font-family: 'Gotham', Arial, sans-serif;
}

h1, h2, h3 {
    margin-top: 0;
    font-family: 'Gotham', Arial, sans-serif;
}
p {
    font-size:15px;
    line-height: 20px;
    color:#737373;
    font-family: 'Gotham-light', Arial, sans-serif;
}
table {
    width: 100%;
    border-collapse: collapse;
}
ul,li{
   font-family: 'Gotham-light', Arial, sans-serif; 
}

table, td, th {
    border: 1px solid #ccc;
    padding: 8px;
}
.texto-main-columna{
font-size:16px;
line-height:35px;
}
/*-----------------------------------------fuentes--------------------------------------*/
@font-face {
    font-family: 'Gotham-regular';
    src: url('assets/fonts/Gotham-Regular.woff2') format('woff2'),
         url('assets/fonts/Gotham-Regular.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Gotham-bold';
    src: url('assets/fonts/Gotham-Bold.woff2') format('woff2'),
         url('assets/fonts/Gotham-Bold.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Gotham-light';
    src: url('assets/fonts/Gotham-Light.woff2') format('woff2'),
         url('assets/fonts/Gotham-Light.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

/* Gotham Bold */
@font-face {
    font-family: 'Gotham';
    src: url('assets/fonts/Gotham-Bold.woff2') format('woff2'),
         url('assets/fonts/Gotham-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
/*------------------------paleta de colores------------*/
.bg-azul{
    background:#14518a;
}
.bg-morado{
    background-color:#440099;
}
.txt-azul{
    color:#14518a;
}
.bg-blanco{
    background:#fff;
}
.txt-blanco{
    color:#fff;
}
.bg-gray{
    background:#eee;
}
.celeste{
   background: #00b7ff;
background: linear-gradient(7deg,rgba(0, 183, 255, 1) 0%, rgba(110, 220, 250, 1) 50%, rgba(102, 232, 255, 1) 99%);
}
.naranja{
    background: #ff9500;
background: linear-gradient(0deg,rgba(255, 149, 0, 1) 0%, rgba(255, 155, 112, 1) 50%, rgba(255, 209, 145, 1) 99%);
}
.rojo{
    background: #ff1100;
background: linear-gradient(0deg,rgba(255, 17, 0, 1) 0%, rgba(255, 108, 64, 1) 50%, rgba(255, 117, 102, 1) 99%);
} 
.verde{
    background: #308f00;
background: linear-gradient(0deg,rgba(48, 143, 0, 1) 0%, rgba(60, 181, 0, 1) 50%, rgba(11, 224, 0, 1) 99%);
} 
.azul{
    background: #006ca6;
background: linear-gradient(0deg,rgba(0, 108, 166, 1) 0%, rgba(0, 139, 209, 1) 50%, rgba(23, 157, 252, 1) 99%);
}
.borde-celeste{
    border:4px solid rgba(0, 183, 255, 1);
    color:rgba(0, 183, 255, 1);
}
.borde-naranja{
    border:4px solid rgba(255, 149, 0, 1);
    color:rgba(255, 149, 0, 1);
}
.borde-verde{
    border:4px solid rgba(60, 181, 0, 1);
    color: rgba(60, 181, 0, 1);
}
.borde-azul{
    border:4px solid rgba(0, 139, 209, 1);
    color:rgba(0, 139, 209, 1);
}
.borde-rojo{
    border:4px solid rgba(255, 108, 64, 1);
    color:rgba(255, 108, 64, 1);
}

/*---------Header menu------*/
.header {
    position: sticky;
    top: 0;
    z-index: 999;
    background: white;
    border-bottom: 1px solid #eee;
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo img {
    max-height: 50px;
}

.menu ul {
    list-style: none;
    display: flex;
    gap: 40px;
}

.menu ul li a {
    text-decoration: none;
    color: #333;
    transition: color 0.5s ease;
}
.menu ul li a:hover,
.menu ul li.current-menu-item > a,
.menu ul li.current-menu-parent > a,
.menu ul li.current-menu-ancestor > a {
    color: #14518a;
    font-weight: 800;
    padding-bottom: 1.6rem;
    border-bottom: 3.5px solid;
}

.redes {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.redes svg {
    width: 30px;
    height: 30px;
    fill: #14518a;
    transition: 0.3s;
}

.redes a:hover svg {
    fill: #d91023;
}
.menu-toggle{
    display:none;
    width:40px;
    height:40px;
    border:none;
    background:none;
    cursor:pointer;
    padding:0;
}

.menu-toggle span{
    display:block;
    width:28px;
    height:3px;
    background:#14518a;
    margin:5px auto;
    transition:.3s;
}
/*-------------------------------Cabeceras-----------------------------*/
.banner-main{
    display:flex;
    height: 100vh;
    background-size:cover;
    background-position: center;
    align-items: center; 
    justify-content: center;
    will-change: background-position;
}
.sombra-texto{
    text-shadow: 2px 2px 4px rgba(0,0,0,.5);
}
/*----------------slider tipo banner-----------*/
 .swiper {
      width: 100%;
      height: 100%;
    }

    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background-size: cover;
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
      height: 100vh !important;
    }
.swiper-slide-x3 {
      height: auto!important;
    }

    .swiper-slide img {
      position: absolute; /* 🔥 esto es clave */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
    }
    .miSwiper {
  width: 100%;
  height: 100vh;
}
.contrast{
background: rgba(0, 0, 0, 0.4);
    width: 100%;
    height: 100%;
}
.slider-content{
    display:flex;
    height: 100vh;
    align-items: center;
}
.texto-slider{
    position:relative;
    display:flex;
    padding:20px;
    align-content: center;
    margin-left:5rem;
    text-align: left !important;
    
}
.texto-slider h2{
    color:#fff;
    text-align:left;
    font-size:40px;
}
.texto-slider a {
    text-align: left!important;
    margin-top:1em;
    display: table;
}
/*-----------------------layout-----------------------------------*/
.pd-main{
    padding:2rem 4rem;
}
.pd-horizontal{
    padding-right: 10px;
    padding-right: 10px;
}
.txt-center{
    text-align: center;
}
.content-height-full{
    height:100vh;
    display: grid;
    align-items: center;
}
.content-height-full-space{
height:100vh;
}
.pd-content-2rem{
    padding:2rem;
}
.pd-bottom{
    margin-bottom: 3rem;
}
.pd-bottom-4{
    padding-bottom: 4rem;
}
.all-content{
    align-items: center;
}

/*--------------------------------------Columnas--------------------------*/
.columna-doble{
    display:flex;
    height:100vh;
}
.columna-doble img{

}
.columna-50{
    width:50%;
    float:left;
}
.colum-3{
    width:30%;
}
.colum-4{
    width:40%;
    float:left;
}
.colum-25{
    width:25%;
    float:left;
}
.colum-800{
    max-width:800px;
}
/*--------------------------parrfo centrado-----------------*/
.parrafo-centrado{
    margin-top:4rem;
    margin-bottom:4rem;
    margin-left:auto;
    margin-right:auto;
}
/*---------------------------capsula de imagen----------------*/
.capsula-imagen{
    max-width: 1200px;
    height:400px;
    padding: 2rem;
    border-radius: 10px;
    background-size: cover;
    background-position: center;
    margin: 10px auto;
}
.txt-capsula{
    background: rgba(255,255,255,0.8);
    border-radius:10px;
    padding: 1.5rem;
}
/*----------------------------columna doble------------*/
.txt-height-color{
   color:#14518a; 
}
.columna-texto{
    display: flex;
    align-items: center;
    font-size: 18px;
    text-align:center;
    line-height: 30px;
}
.columna-texto p{
    font-size: 22px;
    line-height: 30px;
}
.imagen-cuarto-circulo{
width: 100%;
  height: 100%;
  object-fit: cover;
      border-top-left-radius: 100%;
}
.columna-imagen{
    overflow: hidden;
}
.circulo-bk-azul{
    width:100%;
    height:100%;
    padding-top:1rem;
    padding-left:1rem;
    border-top-left-radius:100%;
    border: 30px solid #14518a;
    background: #fff;
    overflow:hidden;
}
.circulo-bk{
    width:100%;
    height:100%;
    padding-top:3rem;
    padding-left:3rem;
    border-top-left-radius:100%;
    background: #d91023;
    overflow:hidden;
}

/*-----------------------------seccion actividades-----------------------*/
.columa-flex-2{
    display:flex;
    height:200px;
    align-items: center;
}
.actividades{
    display:flex;
    gap:10px;
}
.actividad{
    background:#fff;
    border-radius:10px;
    padding-bottom: 10px;
}
.actividad h3 {
    text-align:center;
    margin: 1em;
}
.actividad p {
    margin-top:0;
    margin-left:1em;
    margin-right:1em;
    margin-bottom:1em;
}
.imagen-actividad{
    background-size: cover;
    background-position: center;
    height: 300px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.sector-boton{
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    gap: 10px;
    margin-top: 2rem;
}
.actividades .swiper-button-next{
left: -50px;
}
.slider-prev,
.slider-next{
    position:static !important;
    margin-top:0 !important;
    flex-shrink:0;
    color:#fff!important;
}

.slider-prev::after,
.slider-next::after{
    font-size:30px;
    color:#fff!important;
}
.slider-prev,
.slider-next{
    position:relative !important;
    top:auto !important;
    left:auto !important;
    right:auto !important;
    margin-top:0 !important;
    width:50px;
    height:50px;
    flex-shrink:0;
}
.slider-wrapper-actividades{
    display:flex;
    align-items: center;
}
/*------------------------------------Sección about us----------------------------*/
.grid_fotos_and_text{
    display: flex;
    gap:1em;
    margin:auto;
    justify-content: center;
}
.imagen_grid_and_text{
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 20px;
}
.imagen_grid_and_text_logo{
    background-size: 90%;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 20px;
}
.grid_text{
    font-size:15px;
    padding-bottom: 1em;
}
.grid_text p{
    font-size:15px;
}
.img-text{
    width:100%;
    height: 350px;
}
.img-text-center{
    width:100%;
    height: 250px;
}
.img-text-vert{
    width:100%;
    height:100%;
}
/*------------------------------------Botones----------------------*/
.boton-main{
    max-width:200px;
    color:#fff;
    background:#d91023;
    padding:15px 10px;
    border-radius:10px;
    text-decoration: none;
    font-weight: 700;
    transition: 1s;
}
.boton-main:hover{
    background: #F5A927;;
}
.minimal-boton{
    color:#14518a;
}
.boton-more{
    display: flex;
    color:#14518a;
    text-align:left;
    text-decoration: none;
    margin:1em;
    font-size:15px;
    gap:5px;
}
.boton-more svg{
    width:15px;
}
/*-------------------------------seccion marcas--------------------*/
.sector-circulo{
    display:flex;
    justify-content: center;
    height: 150px;
    margin-bottom: 100px;
}
.circulo-horizontal-azul{
    position: absolute;
    margin-top: -30rem;
    z-index: -1;
    background: #14518a;
    width: 70%;
    height: 480px;
    border-radius: 100%;
    margin-left: auto;
    margin-right: auto;
    border: 40px solid #fff;
    box-shadow: 0 40px 0 #d91023;
}
.intro-seccion{
    width:480px;
    margin:20px auto;
    text-align:center;
}
.flex-x4{
    display:flex;
    gap:10px;
    justify-content: center;
}
.logos-home{
    width: 200px;
}
.contenedor-medio{
    max-width: 1200px;
    margin:auto;
}
.circulo-horizontal-blanco{
   position: relative;
   top:-100px;
    z-index: -2;
    width:90%;
    height:280px;
    border-bottom-left-radius: 100%;
    border-bottom-right-radius: 100%;
    border:20px solid #d91023;
    margin:auto; 
}
.content-white{
    background:#fff;
    margin:0 5rem;
    border-radius:15px;
    padding:5.5rem 1em;
}
.logolarge{
width:300px;
}
.logosmall{
  width:150px;  
}
.logomedium{
  width:200px;  
}
.logoxl{
  width:400px;  
}
.bgtransparente{
    background:rgba(255,255,255,0.7)!important;
}
.bg-imagen{
    background-size:cover;
    background-position: center;
    background-attachment: fixed;
}
/*---------------------------seccion trabaja con nosotros-----------------*/
.content-doble{
    display:flex;
    height: 100vh;
}
.txt-work {
    display: flex;
    align-items: center;
}
.content-doble img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 15px;
}
.content-work p{
    padding: 2em 0;
    font-size: 18px;
    line-height: 25fpx;
}
.wework-white{
background:#fff;
}
/*---------------------------------seccion Principios-----------------------*/
.content-list-horizontal{
    display:flex;
    align-items: center;
}
.content-list-horizontal img{
    width:90px;
    height: 90px;
}
.content-list{
    padding: 2em 1em;
}

/*---------------------seccion valores----------------------------*/
.half-list{
    display: flex;
    background-color: #eee;
    gap:1em;
    align-items:flex-start;
    padding: 2em 3em;
}
.seccion-half-list{
    display:grid;
    align-items: center;
    min-height: 100vh;
}
.intro-half-list{
    margin:2em;
    padding: 2em;
    background:#fff; 
    border-radius: 15px; 
}
.stiky-half-list{
    position: sticky;
    top:0;
}
.left,
.right{
    width:50%;
}
.content-list-vertical{
    display:flex;
    gap:1em;
    align-items: center;
    margin: 3em;
}
.circle-icon-list{
    width: 100px;
    height:100px;
    text-align: center;
    display: grid;
    align-content: center;
    padding:1em;
}
.circle-icon{
border-radius: 50%;
}
.circle-icon-list img{
    width:50px;
    margin:auto;
}
.circle-icon-list h3{
    margin-top:1em;
    font-size:12px;
    color:#fff;
}
.content-list-circle{
    padding: 2em 1em;
    background:#fff;
    border-radius: 15px;
}
/*----------------------------------------seccion color center--------------------------*/
.texto-color-center-left{
    padding:2em;
}
.intro-color-center{
    display:flex;
    align-items: center;
}
.intro-color-center img{
    width:200px;
}
.imagen-right-color-centro-size{
    width: 500px !important;
    margin: auto;
    display: block;
    text-align: center;
}
.mapa-chile{
    min-height: 100vh;
}
.texto-inferior-left{
    padding:2em 3em;
}
/*-------------------------------------------------------seccion mapas--------------------------------*/
.mapa-contenedor-list{
    background-color: #14518a;
    padding:5em;
}
.mapas-tiendas{
    display:flex;
    align-items:flex-start;
    background-color: #fff;
    flex-direction: row-reverse;
}

.columna-mapa{
    width:60%;
}

.columna-direcciones{
    width:40%;
    background:#fff;
    padding:2em;
}

.swiperMapas iframe{
    width:100%;
    height:500px;
    border:0;
}
.swiper-slide-map {
      text-align: center;
      font-size: 18px;
      background-size: cover;
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
      height: auto !important;
    }

.direccion-item{
    cursor:pointer;
    padding:20px;
    border-bottom:1px solid #ddd;
    transition:0.3s;
}

.direccion-item.active{
    background:#f2f2f2;
}
.bloque-mapa{
    padding: 4rem;
}
/*-----------------------------------------productos--------------------------*/
.lista-producto{
    display:flex;
    gap:2em;
    margin-top:4em;
    align-items: center;
}
.lista-producto img{
    width:180px;
}
.content-list-producto{
    width:800px;
    margin:auto;
}
.txt-producto{
    margin-bottom:3em;
}
/*-------------------------------footer------------------------------*/
.footer-site {
    max-width:1300px;
    height:100vh;
    padding:0 2em;
    display: flex;
    gap:3rem;
    align-items: center;
}
.logo-footer{
    max-width:200px;
    height: 130px;
    background-size:200px;
    background-position:center;
    margin:auto;
}
.footer-redes{
    margin:auto;
}
.content-widget{
    display:flex;
    gap:3rem;
    justify-content: center;
    color:#737373;
    line-height: 25px;
}
.content-widget h2{
    font-size:20px;
}
@media print {

  /* Ocultar cosas que NO quieres en el PDF */
  header,
  footer,
  .sidebar,
  .no-print {
    display: none !important;
  }

  /* Ajustar el layout */
  body {
    background: white !important;
    color: #000 !important;
  }

  /* Evitar cortes raros */
  section, div {
    page-break-inside: avoid;
  }

  /* Forzar imágenes correctas */
  img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Mejorar márgenes del PDF */
  @page {
    margin: 1.5cm;
  }
}

@media print {
  .flex, .contenedor, .row {
    display: block !important;
  }
}
/*----------------------------------------Responsive-------------------------------------*/
/* Tablet */
@media (max-width: 992px){

}
@media (max-width:768px){

.header-inner{
    position:relative;
}

.menu-toggle{
    display:block;
}

.menu{

    position:absolute;
    top:100%;
    left:-10px;
    padding:0 10px;
    width:100%;
    background:#fff;

    display:none;

    box-shadow:0 10px 30px rgba(0,0,0,.1);
}

.menu.active{
    display:block;
}

.menu ul{
    display:flex;
    flex-direction:column;
    gap:0;
}

.menu li{
    border-bottom:1px solid #eee;
}

.menu a{
    display:block;
    padding:15px 20px;
    border-bottom:1px solid #14518a;
}

.redes{
    display:none;
}
.content-height-full{
    height: auto;
}
.grid_fotos_and_text{
    flex-direction: column;
}
.content-height-full-space{
    height: auto;
}
.seccion-half-list{
    min-height:auto;
}
.half-list{
    flex-direction: column;
    padding:0;
}
.left,.right{
    width:100%;
}
.contenedor-medio{
    padding:2em;
}
.stiky-half-list{
position: relative;
}
.mapas-tiendas{
flex-direction: column-reverse;
}
.columna-mapa, .columna-direcciones{
    width:100%;
    box-sizing: border-box;
}
.capsula-imagen{
    height:550px;
}
.mapa-contenedor-list{
    padding: 0;
}
.txt-capsula{
    box-sizing: border-box;
}

.colum-3{
    width:100%;
}
.colum-4{
width:100%;
}
.colum-25{
    width:100%;
}
.pd-main{
    padding:2rem 1rem;
}
.flex-x4{
    flex-direction: column;
}
.intro-seccion{
    width:100%;
}
.content-white{
    margin: 1rem 1rem;
}
.columna-50{
    width:auto;
}
.content-doble{
    flex-direction: column;
    height:auto;
}
.footer-site{
    flex-direction: column;
}
.content-widget {
    flex-direction: column;
}
}
/* Móvil pequeño */
@media (max-width: 480px){

}