@charset "UTF-8";

/* ===== FUENTE PERSONALIZADA ===== */
@font-face {
    font-family: 'BobbyJones';
    src: url('../fonts/bobby-jones-soft-regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'BobbyJones';
    src: url('../fonts/Bobby Jones Soft.otf') format('opentype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'BobbyJones';
    src: url('../fonts/Bobby Jones Soft Outline.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'BobbyRough';
    src: url('../fonts/Bobby Rough Soft.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'BobbyJonesRough';
    src: url('../fonts/Bobby Rough Soft Outline.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

/*-----------------------------------------------------------------------------------
Theme Name: Boka - Personal portfolio html template
Author: SLICEmyPAGE
Support: service@slicemypage.com
Description: Description of your template.
Version: 1.0
-----------------------------------------------------------------------------------

/************ TABLE OF CONTENTS ***************
01. VARIABLES 
02. RESET CSS
03. CORE CSS 
04. HEADING
05. PADDING / MARGIN
06. CTA
07. HEADER
   07(a). HEADER (VERSION - 1)
   07(b). HEADER (VERSION - 2)
   07(c). HEADER (VERSION - 3)
08. FOOTER
09. COMMON PAGE SECTION
10. ABOUT SECTION
11. SERVICES SECTION
12. PORTFOLIO SECTION
13. RESUME SECTION
14. BLOG SECTION
15. CONTACT SECTION
**********************************************/


/**************************************************************************************************************************/
/***************************************************** 01. VARIABLES ******************************************************/
/**************************************************************************************************************************/
/* Global Variable Start for Both Themes (Light and Dark)  */
:root{
   --boka-white:#fff;
   --boka-black:#1c1d25; 
   --boka-theme-color-1:#11d486;
   --boka-theme-color-2:#7b33e9;
   --boka-primary-font:"BobbyJones", sans-serif;
   --boka-secondary-font:"BobbyJones", sans-serif;
   --boka-custom-ease:all 0.4s cubic-bezier(0.215,0.61,0.355,1);
   --boka-section-padding-desktop:120px;
   --boka-section-padding-tablet:80px;
   --boka-section-padding-mobile:64px;
   --boka-gradient-1:linear-gradient(220.55deg, #A531DC 0%, #4300B1 100%);
   --boka-gradient-2:linear-gradient(220.55deg, #FFC328 0%, #E20000 100%); 
   --boka-gradient-3:linear-gradient(220.55deg, #D0004B 0%, #88069D 100%);
   --boka-gradient-4:linear-gradient(220.55deg, #3793FF 0%, #0017E4 100%);
   --boka-gradient-5:linear-gradient(220.55deg, #FFD439 0%, #FF7A00 100%);
   --boka-gradient-6:linear-gradient(220.55deg, #00B960 0%, #00552C 100%);
   --boka-header-width:400px;
   --boka-vh: 100vh;
}

/* Reset for iOS Tap Highlight */
* {
    -webkit-tap-highlight-color: transparent;
}

/* iOS Smooth Scrolling */
html {
    -webkit-overflow-scrolling: touch;
}

/* Fallback for browsers that don't support dvh */
@supports (height: 100dvh) {
    :root {
        --boka-vh: 100dvh;
    }
}

/* Light Theme (Default) Variable Start  */
:root{
--boka-body-bg:var(--boka-white);
--boka-body-color:var(--boka-black); 
}

/* Dark Theme Variable Start  */
body.dark-theme{
  --boka-body-bg:var(--boka-black);
  --boka-body-color:var(--boka-white); 
} 

/* X-Large devices (desktops, less than 1400px) */
@media (max-width:1399.98px){ 
   :root{
      --boka-header-width:350px;
   }
  }
  /* Large devices (desktops, less than 1200px) */
@media (max-width:1199.98px){ 
   :root{
      --boka-header-width:0px;
   }
  }
  /* ! Medium devices (tablets, less than 992px) */
  @media (max-width:991.98px){
   .content-container{padding:var(--boka-section-padding-tablet) 0;}
  }
  /* ! Small devices (landscape phones, less than 768px) */
  @media (max-width:767.98px){
   .content-container{padding:var(--boka-section-padding-mobile) 0;} 
 
  }
  /* ! Extra small devices (portrait phones, less than 576px) */
 
/* Responsive testimonios (evitar superposición foto/texto) */
@media (max-width:767.98px){
  .testimonio-foto-perfil{
    width: 300px !important;
    height: 300px !important;
    border-radius: 12px !important;
  }

  .testimonial-item .h3,
  .testimonial-item.swiper-slide .h3{
    font-size: 20px !important;
    line-height: 1.25 !important;
  }

  .testimonial-item.swiper-slide .d-flex{
    flex-wrap: wrap;
  }

  .testimonial-item.swiper-slide .ms-2{
    width: 100%;
  }
}

@media (max-width:575.98px){
  .testimonio-foto-perfil{
    width: 300px !important;
    height: 300px !important;
  }

  .testimonial-item .h3,
  .testimonial-item.swiper-slide .h3{
    font-size: 18px !important;
  }

  .testimonial-item.swiper-slide .ms-2{
    margin-left: 0 !important;
  }
}

 /* ! Medium devices (tablets, less than 992px) */
   @media (max-width:991.98px){
      ul.service-list{display: flex; flex-wrap: wrap; margin-bottom: 50px;}
      ul.service-list li{width: 50%; padding-right: 20px;}
      .service-details{width: 100%;margin-left: 0;position: relative;bottom: auto; margin-top: -30px;}
      .service-image-box{height: auto;min-height: auto;max-height: none; }

   }
   /* ! Small devices (landscape phones, less than 768px) */
   @media (max-width:767.98px){
      ul.service-list li{width: 100%; padding-right: 0px;}
     

   }
   /* ! Extra small devices (portrait phones, less than 576px) */
   @media (max-width:575.98px){ 
      /* WRITE YOUR CSS HERE */
   }
   

/**************************************************************************************************************************/
/************************************************* 02. RESET CSS **********************************************************/
/**************************************************************************************************************************/
*{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6,p,ul,li,body,html,form,fieldset{margin:0;padding:0;outline:none;border:0;}
a{text-decoration:none;border:0;outline:0;}
ul{list-style:none;}
a:focus,input:focus,textarea:focus,*:focus{outline:0!important;}

/**************************************************************************************************************************/
/************************************************** 03. CORE CSS **********************************************************/
/**************************************************************************************************************************/
html{height: 100%; }
.page-changing{scroll-behavior: auto !important;}
body{min-height: 100%; font-size:18px;line-height:1.5;font-weight:400;font-family:var(--boka-primary-font);color:var(--boka-body-color);background:var(--boka-body-bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-overflow-scrolling: touch;}
body{padding-left: 0 !important;}
body:not(.page-active){ overflow-x: hidden; } /* scroll vertical siempre habilitado */
.container{width:90%;max-width:1200px;margin-left:auto;margin-right:auto;}
a,input,button{display:inline-block;text-decoration:none;color:inherit;outline:none;transition:var(--boka-custom-ease);-webkit-transition:var(--boka-custom-ease);}
a img{border:0px none;}
a:hover{outline:none;color:var(--boka-theme-color-1);text-decoration:none;}
a:active{outline:none;text-decoration:none;}
a:focus{outline:none;outline-offset:0px;text-decoration:none;color:inherit;}
img{max-width:100%;border:0;height:auto;} 
p{margin:0px;padding:0px;margin-bottom:24px;}
strong, b{font-weight:700;} 
p:last-child{margin-bottom:0;}
ul:not([class]){list-style:disc;margin-bottom:24px;text-align:left;list-style-position: outside;margin-left: 20px;}
ul:not([class])>li{position:relative;margin-bottom:18px;}
ul:not([class])>li:last-child{margin-bottom:0;}
ol:not([class]){margin-bottom:24px;text-align:left;list-style-position:outside;margin-left: 25px;padding:0;}
ol:not([class])>li{position:relative;margin-bottom:18px;}
ol:not([class])>li:last-child{margin-bottom:0;}
.img-cover{object-fit: cover;}
.img-contain{object-fit: contain;}
.content-container{padding:var(--boka-section-padding-desktop) 0;}
.dark-theme .for-light-theme, .for-dark-theme{display: none;}
.dark-theme .for-dark-theme{display: block;}
.transition{transition: var(--boka-custom-ease);}
.bg-gradient-1{background: var(--boka-gradient-1);}
.bg-gradient-2{background: var(--boka-gradient-2);}
.bg-gradient-3{background: var(--boka-gradient-3);}
.bg-gradient-4{background: var(--boka-gradient-4);}
.bg-gradient-5{background: var(--boka-gradient-5);} 
.bg-gradient-6{background: var(--boka-gradient-6);} 
.bg-white{background: var(--boka-white) !important;}
.bg-black{background: var(--boka-black) !important;}
.bg-body-color{background: var(--boka-body-color) !important;}
.bg-body-bg{background: var(--boka-body-bg) !important;}
.text-white{color: var(--boka-white) !important;}
.text-black{color: var(--boka-black) !important;}
.text-body-color{color: var(--boka-body-color) !important;}
.text-body-bg{color: var(--boka-body-bg) !important;}
.z-index-10{z-index:10;}
.z-index-9{z-index: 9;}
.z-index-8{z-index: 8;}
.z-index-7{z-index: 7;}
.z-index-6{z-index: 6;}
.z-index-5{z-index: 5;}
.z-index-4{z-index: 4;}
.z-index-3{z-index: 3;}
.z-index-2{z-index: 2;}
.z-index-1{z-index: 1;}
.z-index-0{z-index: 0;}
.font-primary{font-family: var(--boka-primary-font) !important;}
.font-secondary{font-family: var(--boka-secondary-font) !important;}
.outline{-webkit-text-stroke:1px var(--boka-white);color:transparent !important;}
.overflow-visible{overflow:visible !important;}
.line-height-100{line-height: 1 !important;}
.line-height-125{line-height: 1.25 !important;}
.line-height-150{line-height: 1.5 !important;}
.line-height-175{line-height: 1.75 !important;}
.line-height-200{line-height:2 !important;}
/* Swiper css overwrite start */
.swiper{padding-bottom: 5px !important;}
.swiper-slide{padding-bottom: 0 !important;}
.swiper-wrapper{padding-bottom: 0 !important;}
.testimonial-slider{padding-bottom: 52px !important;}
.testimonial-slider .swiper-slide{padding-bottom: 0 !important;}
.testimonial-slider .swiper-wrapper{padding-bottom: 0 !important;}
.testimonial-slider .swiper-button-next,
.testimonial-slider .swiper-button-prev{bottom: 0 !important;}
.testimonial-slider .swiper-pagination{bottom: 6px !important;}
.swiper-button-prev, .swiper-button-next{width: 50px; height: 50px; background: transparent; border: solid 2px var(--boka-body-color); border-radius: 50%; transition: var(--boka-custom-ease);}
.swiper-button-next:after, .swiper-button-prev:after{font-size: 20px; color: var(--boka-body-color);}
.swiper-button-prev:hover, .swiper-button-next:hover{background: var(--boka-body-color);}
.swiper-button-next:hover:after, .swiper-button-prev:hover:after{color: var(--boka-body-bg);}
.swiper-button-prev{position: absolute; bottom: 10px; right: 70px; top: auto; left: auto;}
.swiper-button-next{position: absolute; bottom: 10px; right: 0; top: auto; left: auto;}
.swiper-pagination-fraction{width: auto;font-size: 20px;line-height: 1;font-weight: 800;}
.swiper.full-height .swiper-wrapper{display: flex;}
.swiper.full-height .swiper-slide{height:auto;}
/* Swiper css overwrite end */
hr{width:0; transition: var(--boka-custom-ease);}
hr.grow{width: 100%;}
.text-clip{background-size: 100% 100%; background-position-x: 0%; color: transparent; background-clip: text; -webkit-background-clip: text; transition: var(--boka-custom-ease);}
@keyframes textMarquee {
   0%   {transform: translateX(0);} 
   100% {transform: translateX(-100%);}
}
.text-marquee-parent{display: inline-block; white-space: nowrap; width: max-content; font-size: 0;}
.text-marquee-list{ display: inline-block; white-space: nowrap;}
.text-marquee-list span{color: var(--boka-black); font-size: 50px; line-height: 1; white-space: nowrap; opacity: 0.40;}
.text-marquee-wrapper{position: absolute;  left: 0; right: 0; top: 30px; opacity: 0;  transition: var(--boka-custom-ease);}
.navbar-block:not(.full):hover .text-marquee-list{animation-name: textMarquee; animation-duration:20s; animation-iteration-count: infinite; animation-timing-function: linear;}
.navbar-block:not(.full):hover .text-marquee-wrapper{ opacity: 1; transition-delay: 0.1s; }
@keyframes imgMarquee {
   0%   {transform: translateX(0);} 
   100% {transform: translateX(-100%);}
}
.img-marquee-parent{display: inline-block; white-space: nowrap; width: max-content; font-size: 0;}
.img-marquee-list{ display: inline-block; white-space: nowrap; animation-name: imgMarquee; animation-duration:15s; animation-iteration-count: infinite; animation-timing-function: linear;}
.img-marquee-list span{display: inline-block;}
.img-marquee-parent:hover .img-marquee-list{animation-play-state:paused;}

/* Estilos para el grid de fotos de testimonios */
.fotos-testimonios-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  padding: 20px;
}

.foto-testimonio {
  aspect-ratio: 1;
  -webkit-aspect-ratio: 1;
  border: 2px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  background: #f8f9fa;
}

.foto-testimonio-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.foto-testimonio:hover .foto-testimonio-img {
  transform: scale(1.1);
}

/* Estilos para texto justificado */
.text-justify {
  text-align: justify !important;
  text-justify: inter-word !important;
}

/* Estilos para mini videos en sección de capacitación */
.mini-videos-grid {
  display: flex;
  justify-content: center;
  margin-top: 8px;
}

.mini-video {
  width: 72px;
  height: 72px;
  border-radius: 4px;
  object-fit: cover;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: transform 0.2s ease;
}

.mini-video:hover {
  transform: scale(1.1);
}

/* Estilos para modal de video */
.video-modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.92);
  animation: fadeIn 0.3s;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.video-modal-content {
  position: relative;
  width: 95%;
  max-width: 800px;
}

.video-modal-close {
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  background: rgba(255,255,255,0.15);
  border: 2px solid rgba(255,255,255,0.6);
  padding: 10px 28px;
  border-radius: 50px;
  letter-spacing: 1px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: block;
  text-align: center;
  transition: background 0.2s;
}

.video-modal-close:hover {
  background: rgba(255,255,255,0.3);
  color: #fff;
}

#modalVideo {
  width: 100%;
  height: auto;
  max-height: 75vh;
  border-radius: 12px;
  display: block;
}

/* Responsive para dispositivos móviles */
@media (max-width: 768px) {
  .video-modal-content {
    width: 92%;
  }

  #modalVideo {
    max-height: 65vh;
  }
}

@media (max-width: 480px) {
  .video-modal-content {
    width: 92%;
  }

  #modalVideo {
    max-height: 55vh;
    border-radius: 8px;
  }
}

/* Estilos para contenedor de medios del blog (imagen/video) */
.blog-media-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.blog-media {
  transition: opacity 0.3s ease;
}

.blog-video-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.blog-video {
  border: none;
  border-radius: inherit;
}

/* Estilos para iframes de redes sociales */
.blog-video[src*="tiktok.com"],
.blog-video[src*="instagram.com"],
.blog-video[src*="facebook.com"] {
  border: none;
  border-radius: 8px;
}

/* Estilos para TikTok embed en bloquequote */
.tiktok-embed {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  min-width: none !important;
  border: none;
  border-radius: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tiktok-embed iframe {
  width: 100% !important;
  height: 100% !important;
  border: none;
}

/* Mini videos grid responsive */
.mini-videos-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.mini-videos-grid .tiktok-embed {
  width: 72px !important;
  height: 72px !important;
  max-width: 72px !important;
  min-width: 72px !important;
}

/* Botón para cambiar entre imagen y video */
.blog-media-toggle {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  border: none;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  transition: background 0.3s ease;
}

.blog-media-toggle:hover {
  background: rgba(0, 0, 0, 0.9);
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Estilos para foto de perfil de testimonios */
.testimonio-foto-perfil {
  width: 50% !important;
  height: 50% !important;
  object-fit: cover !important;
  border-radius: 8px !important;
  border: 3px solid #fff !important;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1) !important;
}

/* Estilos para texto de testimonios - 30% más pequeño */
.testimonial-item .h3,
.testimonial-item.swiper-slide .h3 {
  font-size: 28px !important; /* 40px - 30% = 28px */
  line-height: 1.3 !important;
}

/* Reducir espacio entre texto y botones */
.testimonial-item .mb-5,
.testimonial-item.swiper-slide .mb-5 {
  margin-bottom: 1rem !important; /* Reducir de 3rem a 1rem */
}

/* Estilos específicos para testimonial-item swiper-slide */
.testimonial-item.swiper-slide {
  padding-bottom: 50px !important;
  margin-bottom: 0 !important;
  perspective: 2000px;
  -webkit-perspective: 2000px;
}

.testimonial-item.swiper-slide .testimonial-box {
  margin-bottom: 0 !important;
  padding: 40px !important;
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 30px;
  box-shadow:
    0 10px 30px rgba(0,0,0,0.1),
    inset 0 0 0 1px rgba(255,255,255,0.1);
  transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
}

.testimonial-item.swiper-slide:hover .testimonial-box {
  transform: translateZ(100px) rotateX(8deg) rotateY(-4deg);
  -webkit-transform: translateZ(100px) rotateX(8deg) rotateY(-4deg);
  box-shadow:
    0 50px 80px rgba(0,0,0,0.3),
    0 20px 40px rgba(0,0,0,0.2);
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.3);
}

.testimonial-item.swiper-slide .testimonial-box > div {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  transform: translateZ(60px);
  filter: drop-shadow(0 5px 10px rgba(0,0,0,0.2));
}

.testimonio-foto-perfil {
  transform: translateZ(30px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.3);
}

/* X-Large devices (desktops, less than 1400px) */
@media (max-width:1399.98px){ 
    /* WRITE YOUR CSS HERE */
}
/* Large devices (desktops, less than 1200px) */
@media (max-width:1199.98px){ 
   .container{width: calc(100% - 16px);}
 }
 /* ! Medium devices (tablets, less than 992px) */
 @media (max-width:991.98px){
  .content-container{padding:var(--boka-section-padding-tablet) 0;}
 }
 /* ! Small devices (landscape phones, less than 768px) */
 @media (max-width:767.98px){
  .content-container{padding:var(--boka-section-padding-mobile) 0;} 

 }
 /* ! Extra small devices (portrait phones, less than 576px) */
 @media (max-width:575.98px){ 
    /* WRITE YOUR CSS HERE */
 }
 


/**************************************************************************************************************************/
/**************************************************** 04. HEADING *********************************************************/
/**************************************************************************************************************************/
h1,h2,h3,h4,h5,h6{margin:0px;padding:0px;margin-bottom:24px;line-height:1.2;font-weight:400;color:inherit; font-family: var(--boka-secondary-font);}
h1, .h1{font-size:60px;line-height:1.2;}
h2, .h2{font-size:50px;line-height:1.2;}
h3, .h3{font-size:40px;line-height:1.3;}
h4, .h4{font-size:30px;line-height:1.3;}
h5, .h5{font-size:25px;line-height:1.3;}
h6, .h6{font-size:20px;line-height:1.3;}

/* Historial / Experience Box 3D */
.experience-list-wrapper { perspective: 1500px; -webkit-perspective: 1500px; }
.experience-box {
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    border-radius: 20px;
    padding: 30px;
    background: transparent;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
}
.experience-box:hover {
    transform: translateX(20px) translateZ(40px) rotateY(-5deg);
    -webkit-transform: translateX(20px) translateZ(40px) rotateY(-5deg);
    background: rgba(255,255,255,0.1);
    box-shadow:
        -20px 20px 40px rgba(0,0,0,0.1),
        0 0 0 1px rgba(255,255,255,0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}
.dark-theme .experience-box:hover {
    background: rgba(255,255,255,0.05);
}
.experience-box-left, .experience-box-mid, .experience-box-right {
    transform: translateZ(20px);
}
/* Large devices (desktops, less than 1200px) */
@media (max-width:1199.98px){ 
  
}

/* ! Medium devices (tablets, less than 992px) */
@media (max-width:991.98px){
  h1, .h1{font-size:48px;}
  h2, .h2{font-size:40px;}
  h3, .h3{font-size:32px;}
  h4, .h4{font-size:26px;}
  h5, .h5{font-size:22px;}
  h6, .h6{font-size:18px;}
}
/* ! Small devices (landscape phones, less than 768px) */
@media (max-width:767.98px){
  h1, .h1{font-size:40px;}
  h2, .h2{font-size:32px;}
  h3, .h3{font-size:24px;}
  h4, .h4{font-size:22px;}
  h5, .h5{font-size:20px;}
  h6, .h6{font-size:18px;}
}

/* ! Extra small devices (portrait phones, less than 576px) */
@media (max-width:575.98px){ 
}
/**************************************************************************************************************************/
/*********************************************** 05. PADDING / MARGIN *****************************************************/
/**************************************************************************************************************************/
/* padding all side start */
.p-200{padding: 200px;}
.p-190{padding: 190px;}
.p-180{padding: 180px;}
.p-170{padding: 170px;}
.p-160{padding: 160px;}
.p-150{padding: 150px;}
.p-140{padding: 140px;}
.p-130{padding: 130px;}
.p-120{padding: 120px;}
.p-110{padding: 110px;}
.p-100{padding: 100px;}
.p-90{padding: 90px;}
.p-80{padding: 80px;}
.p-72{padding: 72px;}
.p-64{padding: 64px;}
.p-56{padding: 56px;}
.p-48{padding: 48px;}
.p-40{padding: 40px;}
.p-36{padding: 36px;}
.p-32{padding: 32px;}
.p-28{padding: 28px;}
.p-24{padding: 24px;}
.p-20{padding: 20px;}
.p-16{padding: 16px;}
.p-12{padding: 12px;}
.p-8{padding: 8px;}
.p-4{padding: 4px;}
.p-2{padding: 2px;}
.p-0{padding: 0;}
/* padding all side end */
/* padding top start */
.pt-200{padding-top: 200px;}
.pt-190{padding-top: 190px;}
.pt-180{padding-top: 180px;}
.pt-170{padding-top: 170px;}
.pt-160{padding-top: 160px;}
.pt-150{padding-top: 150px;}
.pt-140{padding-top: 140px;}
.pt-130{padding-top: 130px;}
.pt-120{padding-top: 120px;}
.pt-110{padding-top: 110px;}
.pt-100{padding-top: 100px;}
.pt-90{padding-top: 90px;}
.pt-80{padding-top: 80px;}
.pt-72{padding-top: 72px;}
.pt-64{padding-top: 64px;}
.pt-56{padding-top: 56px;}
.pt-48{padding-top: 48px;}
.pt-40{padding-top: 40px;}
.pt-36{padding-top: 36px;}
.pt-32{padding-top: 32px;}
.pt-28{padding-top: 28px;}
.pt-24{padding-top: 24px;}
.pt-20{padding-top: 20px;}
.pt-16{padding-top: 16px;}
.pt-12{padding-top: 12px;}
.pt-8{padding-top: 8px;}
.pt-4{padding-top: 4px;}
.pt-2{padding-top: 2px;}
.pt-0{padding-top: 0;}
/* padding top end */
/* padding right start */
.pr-200{padding-right: 200px;}
.pr-190{padding-right: 190px;}
.pr-180{padding-right: 180px;}
.pr-170{padding-right: 170px;}
.pr-160{padding-right: 160px;}
.pr-150{padding-right: 150px;}
.pr-140{padding-right: 140px;}
.pr-130{padding-right: 130px;}
.pr-120{padding-right: 120px;}
.pr-110{padding-right: 110px;}
.pr-100{padding-right: 100px;}
.pr-90{padding-right: 90px;}
.pr-80{padding-right: 80px;}
.pr-72{padding-right: 72px;}
.pr-64{padding-right: 64px;}
.pr-56{padding-right: 56px;}
.pr-48{padding-right: 48px;}
.pr-40{padding-right: 40px;}
.pr-36{padding-right: 36px;}
.pr-32{padding-right: 32px;}
.pr-28{padding-right: 28px;}
.pr-24{padding-right: 24px;}
.pr-20{padding-right: 20px;}
.pr-16{padding-right: 16px;}
.pr-12{padding-right: 12px;}
.pr-8{padding-right: 8px;}
.pr-4{padding-right: 4px;}
.pr-2{padding-right: 2px;}
.pr-0{padding-right: 0;}
/* padding right end */
/* padding bottom start */
.pb-200{padding-bottom: 200px;}
.pb-190{padding-bottom: 190px;}
.pb-180{padding-bottom: 180px;}
.pb-170{padding-bottom: 170px;}
.pb-160{padding-bottom: 160px;}
.pb-150{padding-bottom: 150px;}
.pb-140{padding-bottom: 140px;}
.pb-130{padding-bottom: 130px;}
.pb-120{padding-bottom: 120px;}
.pb-110{padding-bottom: 110px;}
.pb-100{padding-bottom: 100px;}
.pb-90{padding-bottom: 90px;}
.pb-80{padding-bottom: 80px;}
.pb-72{padding-bottom: 72px;}
.pb-64{padding-bottom: 64px;}
.pb-56{padding-bottom: 56px;}
.pb-48{padding-bottom: 48px;}
.pb-40{padding-bottom: 40px;}
.pb-36{padding-bottom: 36px;}
.pb-32{padding-bottom: 32px;}
.pb-28{padding-bottom: 28px;}
.pb-24{padding-bottom: 24px;}
.pb-20{padding-bottom: 20px;}
.pb-16{padding-bottom: 16px;}
.pb-12{padding-bottom: 12px;}
.pb-8{padding-bottom: 8px;}
.pb-4{padding-bottom: 4px;}
.pb-2{padding-bottom: 2px;}
.pb-0{padding-bottom: 0;}
/* padding bottom end */
/* padding left start */
.pl-200{padding-left: 200px;}
.pl-190{padding-left: 190px;}
.pl-180{padding-left: 180px;}
.pl-170{padding-left: 170px;}
.pl-160{padding-left: 160px;}
.pl-150{padding-left: 150px;}
.pl-140{padding-left: 140px;}
.pl-130{padding-left: 130px;}
.pl-120{padding-left: 120px;}
.pl-110{padding-left: 110px;}
.pl-100{padding-left: 100px;}
.pl-90{padding-left: 90px;}
.pl-80{padding-left: 80px;}
.pl-72{padding-left: 72px;}
.pl-64{padding-left: 64px;}
.pl-56{padding-left: 56px;}
.pl-48{padding-left: 48px;}
.pl-40{padding-left: 40px;}
.pl-36{padding-left: 36px;}
.pl-32{padding-left: 32px;}
.pl-28{padding-left: 28px;}
.pl-24{padding-left: 24px;}
.pl-20{padding-left: 20px;}
.pl-16{padding-left: 16px;}
.pl-12{padding-left: 12px;}
.pl-8{padding-left: 8px;}
.pl-4{padding-left: 4px;}
.pl-2{padding-left: 2px;}
.pl-0{padding-left: 0;}
/* padding left end */
/* margin all side start */
.m-200{margin: 200px;}
.m-190{margin: 190px;}
.m-180{margin: 180px;}
.m-170{margin: 170px;}
.m-160{margin: 160px;}
.m-150{margin: 150px;}
.m-140{margin: 140px;}
.m-130{margin: 130px;}
.m-120{margin: 120px;}
.m-110{margin: 110px;}
.m-100{margin: 100px;}
.m-90{margin: 90px;}
.m-80{margin: 80px;}
.m-72{margin: 72px;}
.m-64{margin: 64px;}
.m-56{margin: 56px;}
.m-48{margin: 48px;}
.m-40{margin: 40px;}
.m-36{margin: 36px;}
.m-32{margin: 32px;}
.m-28{margin: 28px;}
.m-24{margin: 24px;}
.m-20{margin: 20px;}
.m-16{margin: 16px;}
.m-12{margin: 12px;}
.m-8{margin: 8px;}
.m-4{margin: 4px;}
.m-2{margin: 2px;}
.m-0{margin: 0;}
/* margin all side end */
/* margin top start */
.mt-200{margin-top: 200px;}
.mt-190{margin-top: 190px;}
.mt-180{margin-top: 180px;}
.mt-170{margin-top: 170px;}
.mt-160{margin-top: 160px;}
.mt-150{margin-top: 150px;}
.mt-140{margin-top: 140px;}
.mt-130{margin-top: 130px;}
.mt-120{margin-top: 120px;}
.mt-110{margin-top: 110px;}
.mt-100{margin-top: 100px;}
.mt-90{margin-top: 90px;}
.mt-80{margin-top: 80px;}
.mt-72{margin-top: 72px;}
.mt-64{margin-top: 64px;}
.mt-56{margin-top: 56px;}
.mt-48{margin-top: 48px;}
.mt-40{margin-top: 40px;}
.mt-36{margin-top: 36px;}
.mt-32{margin-top: 32px;}
.mt-28{margin-top: 28px;}
.mt-24{margin-top: 24px;}
.mt-20{margin-top: 20px;}
.mt-16{margin-top: 16px;}
.mt-12{margin-top: 12px;}
.mt-8{margin-top: 8px;}
.mt-4{margin-top: 4px;}
.mt-2{margin-top: 2px;}
.mt-0{margin-top: 0;}
/* margin top end */
/* margin right start */
.mr-200{margin-right: 200px;}
.mr-190{margin-right: 190px;}
.mr-180{margin-right: 180px;}
.mr-170{margin-right: 170px;}
.mr-160{margin-right: 160px;}
.mr-150{margin-right: 150px;}
.mr-140{margin-right: 140px;}
.mr-130{margin-right: 130px;}
.mr-120{margin-right: 120px;}
.mr-110{margin-right: 110px;}
.mr-100{margin-right: 100px;}
.mr-90{margin-right: 90px;}
.mr-80{margin-right: 80px;}
.mr-72{margin-right: 72px;}
.mr-64{margin-right: 64px;}
.mr-56{margin-right: 56px;}
.mr-48{margin-right: 48px;}
.mr-40{margin-right: 40px;}
.mr-36{margin-right: 36px;}
.mr-32{margin-right: 32px;}
.mr-28{margin-right: 28px;}
.mr-24{margin-right: 24px;}
.mr-20{margin-right: 20px;}
.mr-16{margin-right: 16px;}
.mr-12{margin-right: 12px;}
.mr-8{margin-right: 8px;}
.mr-4{margin-right: 4px;}
.mr-2{margin-right: 2px;}
.mr-0{margin-right: 0;}
/* margin right end */
/* margin bottom start */
.mb-200{margin-bottom: 200px;}
.mb-190{margin-bottom: 190px;}
.mb-180{margin-bottom: 180px;}
.mb-170{margin-bottom: 170px;}
.mb-160{margin-bottom: 160px;}
.mb-150{margin-bottom: 150px;}
.mb-140{margin-bottom: 140px;}
.mb-130{margin-bottom: 130px;}
.mb-120{margin-bottom: 120px;}
.mb-110{margin-bottom: 110px;}
.mb-100{margin-bottom: 100px;}
.mb-90{margin-bottom: 90px;}
.mb-80{margin-bottom: 80px;}
.mb-72{margin-bottom: 72px;}
.mb-64{margin-bottom: 64px;}
.mb-56{margin-bottom: 56px;}
.mb-48{margin-bottom: 48px;}
.mb-40{margin-bottom: 40px;}
.mb-36{margin-bottom: 36px;}
.mb-32{margin-bottom: 32px;}
.mb-28{margin-bottom: 28px;}
.mb-24{margin-bottom: 24px;}
.mb-20{margin-bottom: 20px;}
.mb-16{margin-bottom: 16px;}
.mb-12{margin-bottom: 12px;}
.mb-8{margin-bottom: 8px;}
.mb-4{margin-bottom: 4px;}
.mb-2{margin-bottom: 2px;}
.mb-0{margin-bottom: 0;}
/* margin bottom end */
/* margin left start */
.ml-200{margin-left: 200px;}
.ml-190{margin-left: 190px;}
.ml-180{margin-left: 180px;}
.ml-170{margin-left: 170px;}
.ml-160{margin-left: 160px;}
.ml-150{margin-left: 150px;}
.ml-140{margin-left: 140px;}
.ml-130{margin-left: 130px;}
.ml-120{margin-left: 120px;}
.ml-110{margin-left: 110px;}
.ml-100{margin-left: 100px;}
.ml-90{margin-left: 90px;}
.ml-80{margin-left: 80px;}
.ml-72{margin-left: 72px;}
.ml-64{margin-left: 64px;}
.ml-56{margin-left: 56px;}
.ml-48{margin-left: 48px;}
.ml-40{margin-left: 40px;}
.ml-36{margin-left: 36px;}
.ml-32{margin-left: 32px;}
.ml-28{margin-left: 28px;}
.ml-24{margin-left: 24px;}
.ml-20{margin-left: 20px;}
.ml-16{margin-left: 16px;}
.ml-12{margin-left: 12px;}
.ml-8{margin-left: 8px;}
.ml-4{margin-left: 4px;}
.ml-2{margin-left: 2px;}
.ml-0{margin-left: 0;}
/* margin left end */
 

/* Large devices (desktops, less than 1200px) */
@media (max-width:1199.98px){ 
/* tablet padding all side start */
.tab-p-200{padding: 200px;}
.tab-p-190{padding: 190px;}
.tab-p-180{padding: 180px;}
.tab-p-170{padding: 170px;}
.tab-p-160{padding: 160px;}
.tab-p-150{padding: 150px;}
.tab-p-140{padding: 140px;}
.tab-p-130{padding: 130px;}
.tab-p-120{padding: 120px;}
.tab-p-110{padding: 110px;}
.tab-p-100{padding: 100px;}
.tab-p-90{padding: 90px;}
.tab-p-80{padding: 80px;}
.tab-p-72{padding: 72px;}
.tab-p-64{padding: 64px;}
.tab-p-56{padding: 56px;}
.tab-p-48{padding: 48px;}
.tab-p-40{padding: 40px;}
.tab-p-36{padding: 36px;}
.tab-p-32{padding: 32px;}
.tab-p-28{padding: 28px;}
.tab-p-24{padding: 24px;}
.tab-p-20{padding: 20px;}
.tab-p-16{padding: 16px;}
.tab-p-12{padding: 12px;}
.tab-p-8{padding: 8px;}
.tab-p-4{padding: 4px;}
.tab-p-2{padding: 2px;}
.tab-p-0{padding: 0;}
/* tablet padding all side end */
/* tablet padding top start */
.tab-pt-200{padding-top: 200px;}
.tab-pt-190{padding-top: 190px;}
.tab-pt-180{padding-top: 180px;}
.tab-pt-170{padding-top: 170px;}
.tab-pt-160{padding-top: 160px;}
.tab-pt-150{padding-top: 150px;}
.tab-pt-140{padding-top: 140px;}
.tab-pt-130{padding-top: 130px;}
.tab-pt-120{padding-top: 120px;}
.tab-pt-110{padding-top: 110px;}
.tab-pt-100{padding-top: 100px;}
.tab-pt-90{padding-top: 90px;}
.tab-pt-80{padding-top: 80px;}
.tab-pt-72{padding-top: 72px;}
.tab-pt-64{padding-top: 64px;}
.tab-pt-56{padding-top: 56px;}
.tab-pt-48{padding-top: 48px;}
.tab-pt-40{padding-top: 40px;}
.tab-pt-36{padding-top: 36px;}
.tab-pt-32{padding-top: 32px;}
.tab-pt-28{padding-top: 28px;}
.tab-pt-24{padding-top: 24px;}
.tab-pt-20{padding-top: 20px;}
.tab-pt-16{padding-top: 16px;}
.tab-pt-12{padding-top: 12px;}
.tab-pt-8{padding-top: 8px;}
.tab-pt-4{padding-top: 4px;}
.tab-pt-2{padding-top: 2px;}
.tab-pt-0{padding-top: 0;}
/* tablet padding top end */
/* tablet padding right start */
.tab-pr-200{padding-right: 200px;}
.tab-pr-190{padding-right: 190px;}
.tab-pr-180{padding-right: 180px;}
.tab-pr-170{padding-right: 170px;}
.tab-pr-160{padding-right: 160px;}
.tab-pr-150{padding-right: 150px;}
.tab-pr-140{padding-right: 140px;}
.tab-pr-130{padding-right: 130px;}
.tab-pr-120{padding-right: 120px;}
.tab-pr-110{padding-right: 110px;}
.tab-pr-100{padding-right: 100px;}
.tab-pr-90{padding-right: 90px;}
.tab-pr-80{padding-right: 80px;}
.tab-pr-72{padding-right: 72px;}
.tab-pr-64{padding-right: 64px;}
.tab-pr-56{padding-right: 56px;}
.tab-pr-48{padding-right: 48px;}
.tab-pr-40{padding-right: 40px;}
.tab-pr-36{padding-right: 36px;}
.tab-pr-32{padding-right: 32px;}
.tab-pr-28{padding-right: 28px;}
.tab-pr-24{padding-right: 24px;}
.tab-pr-20{padding-right: 20px;}
.tab-pr-16{padding-right: 16px;}
.tab-pr-12{padding-right: 12px;}
.tab-pr-8{padding-right: 8px;}
.tab-pr-4{padding-right: 4px;}
.tab-pr-2{padding-right: 2px;}
.tab-pr-0{padding-right: 0;}
/* tablet padding right end */
/* tablet padding bottom start */
.tab-pb-200{padding-bottom: 200px;}
.tab-pb-190{padding-bottom: 190px;}
.tab-pb-180{padding-bottom: 180px;}
.tab-pb-170{padding-bottom: 170px;}
.tab-pb-160{padding-bottom: 160px;}
.tab-pb-150{padding-bottom: 150px;}
.tab-pb-140{padding-bottom: 140px;}
.tab-pb-130{padding-bottom: 130px;}
.tab-pb-120{padding-bottom: 120px;}
.tab-pb-110{padding-bottom: 110px;}
.tab-pb-100{padding-bottom: 100px;}
.tab-pb-90{padding-bottom: 90px;}
.tab-pb-80{padding-bottom: 80px;}
.tab-pb-72{padding-bottom: 72px;}
.tab-pb-64{padding-bottom: 64px;}
.tab-pb-56{padding-bottom: 56px;}
.tab-pb-48{padding-bottom: 48px;}
.tab-pb-40{padding-bottom: 40px;}
.tab-pb-36{padding-bottom: 36px;}
.tab-pb-32{padding-bottom: 32px;}
.tab-pb-28{padding-bottom: 28px;}
.tab-pb-24{padding-bottom: 24px;}
.tab-pb-20{padding-bottom: 20px;}
.tab-pb-16{padding-bottom: 16px;}
.tab-pb-12{padding-bottom: 12px;}
.tab-pb-8{padding-bottom: 8px;}
.tab-pb-4{padding-bottom: 4px;}
.tab-pb-2{padding-bottom: 2px;}
.tab-pb-0{padding-bottom: 0;}
/* tablet padding bottom end */
/* tablet padding left start */
.tab-pl-200{padding-left: 200px;}
.tab-pl-190{padding-left: 190px;}
.tab-pl-180{padding-left: 180px;}
.tab-pl-170{padding-left: 170px;}
.tab-pl-160{padding-left: 160px;}
.tab-pl-150{padding-left: 150px;}
.tab-pl-140{padding-left: 140px;}
.tab-pl-130{padding-left: 130px;}
.tab-pl-120{padding-left: 120px;}
.tab-pl-110{padding-left: 110px;}
.tab-pl-100{padding-left: 100px;}
.tab-pl-90{padding-left: 90px;}
.tab-pl-80{padding-left: 80px;}
.tab-pl-72{padding-left: 72px;}
.tab-pl-64{padding-left: 64px;}
.tab-pl-56{padding-left: 56px;}
.tab-pl-48{padding-left: 48px;}
.tab-pl-40{padding-left: 40px;}
.tab-pl-36{padding-left: 36px;}
.tab-pl-32{padding-left: 32px;}
.tab-pl-28{padding-left: 28px;}
.tab-pl-24{padding-left: 24px;}
.tab-pl-20{padding-left: 20px;}
.tab-pl-16{padding-left: 16px;}
.tab-pl-12{padding-left: 12px;}
.tab-pl-8{padding-left: 8px;}
.tab-pl-4{padding-left: 4px;}
.tab-pl-2{padding-left: 2px;}
.tab-pl-0{padding-left: 0;}
/* tablet padding left end */
/* tablet margin all side start */
.tab-m-200{margin: 200px;}
.tab-m-190{margin: 190px;}
.tab-m-180{margin: 180px;}
.tab-m-170{margin: 170px;}
.tab-m-160{margin: 160px;}
.tab-m-150{margin: 150px;}
.tab-m-140{margin: 140px;}
.tab-m-130{margin: 130px;}
.tab-m-120{margin: 120px;}
.tab-m-110{margin: 110px;}
.tab-m-100{margin: 100px;}
.tab-m-90{margin: 90px;}
.tab-m-80{margin: 80px;}
.tab-m-72{margin: 72px;}
.tab-m-64{margin: 64px;}
.tab-m-56{margin: 56px;}
.tab-m-48{margin: 48px;}
.tab-m-40{margin: 40px;}
.tab-m-36{margin: 36px;}
.tab-m-32{margin: 32px;}
.tab-m-28{margin: 28px;}
.tab-m-24{margin: 24px;}
.tab-m-20{margin: 20px;}
.tab-m-16{margin: 16px;}
.tab-m-12{margin: 12px;}
.tab-m-8{margin: 8px;}
.tab-m-4{margin: 4px;}
.tab-m-2{margin: 2px;}
.tab-m-0{margin: 0;}
/* tablet margin  all side end */
/* tablet margin top start */
.tab-mt-200{margin-top: 200px;}
.tab-mt-190{margin-top: 190px;}
.tab-mt-180{margin-top: 180px;}
.tab-mt-170{margin-top: 170px;}
.tab-mt-160{margin-top: 160px;}
.tab-mt-150{margin-top: 150px;}
.tab-mt-140{margin-top: 140px;}
.tab-mt-130{margin-top: 130px;}
.tab-mt-120{margin-top: 120px;}
.tab-mt-110{margin-top: 110px;}
.tab-mt-100{margin-top: 100px;}
.tab-mt-90{margin-top: 90px;}
.tab-mt-80{margin-top: 80px;}
.tab-mt-72{margin-top: 72px;}
.tab-mt-64{margin-top: 64px;}
.tab-mt-56{margin-top: 56px;}
.tab-mt-48{margin-top: 48px;}
.tab-mt-40{margin-top: 40px;}
.tab-mt-36{margin-top: 36px;}
.tab-mt-32{margin-top: 32px;}
.tab-mt-28{margin-top: 28px;}
.tab-mt-24{margin-top: 24px;}
.tab-mt-20{margin-top: 20px;}
.tab-mt-16{margin-top: 16px;}
.tab-mt-12{margin-top: 12px;}
.tab-mt-8{margin-top: 8px;}
.tab-mt-4{margin-top: 4px;}
.tab-mt-2{margin-top: 2px;}
.tab-mt-0{margin-top: 0;}
/* tablet margin top end */
/* tablet margin right start */
.tab-mr-200{margin-right: 200px;}
.tab-mr-190{margin-right: 190px;}
.tab-mr-180{margin-right: 180px;}
.tab-mr-170{margin-right: 170px;}
.tab-mr-160{margin-right: 160px;}
.tab-mr-150{margin-right: 150px;}
.tab-mr-140{margin-right: 140px;}
.tab-mr-130{margin-right: 130px;}
.tab-mr-120{margin-right: 120px;}
.tab-mr-110{margin-right: 110px;}
.tab-mr-100{margin-right: 100px;}
.tab-mr-90{margin-right: 90px;}
.tab-mr-80{margin-right: 80px;}
.tab-mr-72{margin-right: 72px;}
.tab-mr-64{margin-right: 64px;}
.tab-mr-56{margin-right: 56px;}
.tab-mr-48{margin-right: 48px;}
.tab-mr-40{margin-right: 40px;}
.tab-mr-36{margin-right: 36px;}
.tab-mr-32{margin-right: 32px;}
.tab-mr-28{margin-right: 28px;}
.tab-mr-24{margin-right: 24px;}
.tab-mr-20{margin-right: 20px;}
.tab-mr-16{margin-right: 16px;}
.tab-mr-12{margin-right: 12px;}
.tab-mr-8{margin-right: 8px;}
.tab-mr-4{margin-right: 4px;}
.tab-mr-2{margin-right: 2px;}
.tab-mr-0{margin-right: 0;}
/* tablet margin right end */
/* tablet margin bottom start */
.tab-mb-200{margin-bottom: 200px;}
.tab-mb-190{margin-bottom: 190px;}
.tab-mb-180{margin-bottom: 180px;}
.tab-mb-170{margin-bottom: 170px;}
.tab-mb-160{margin-bottom: 160px;}
.tab-mb-150{margin-bottom: 150px;}
.tab-mb-140{margin-bottom: 140px;}
.tab-mb-130{margin-bottom: 130px;}
.tab-mb-120{margin-bottom: 120px;}
.tab-mb-110{margin-bottom: 110px;}
.tab-mb-100{margin-bottom: 100px;}
.tab-mb-90{margin-bottom: 90px;}
.tab-mb-80{margin-bottom: 80px;}
.tab-mb-72{margin-bottom: 72px;}
.tab-mb-64{margin-bottom: 64px;}
.tab-mb-56{margin-bottom: 56px;}
.tab-mb-48{margin-bottom: 48px;}
.tab-mb-40{margin-bottom: 40px;}
.tab-mb-36{margin-bottom: 36px;}
.tab-mb-32{margin-bottom: 32px;}
.tab-mb-28{margin-bottom: 28px;}
.tab-mb-24{margin-bottom: 24px;}
.tab-mb-20{margin-bottom: 20px;}
.tab-mb-16{margin-bottom: 16px;}
.tab-mb-12{margin-bottom: 12px;}
.tab-mb-8{margin-bottom: 8px;}
.tab-mb-4{margin-bottom: 4px;}
.tab-mb-2{margin-bottom: 2px;}
.tab-mb-0{margin-bottom: 0;}
/* tablet margin bottom end */
/* tablet margin left start */
.tab-ml-200{margin-left: 200px;}
.tab-ml-190{margin-left: 190px;}
.tab-ml-180{margin-left: 180px;}
.tab-ml-170{margin-left: 170px;}
.tab-ml-160{margin-left: 160px;}
.tab-ml-150{margin-left: 150px;}
.tab-ml-140{margin-left: 140px;}
.tab-ml-130{margin-left: 130px;}
.tab-ml-120{margin-left: 120px;}
.tab-ml-110{margin-left: 110px;}
.tab-ml-100{margin-left: 100px;}
.tab-ml-90{margin-left: 90px;}
.tab-ml-80{margin-left: 80px;}
.tab-ml-72{margin-left: 72px;}
.tab-ml-64{margin-left: 64px;}
.tab-ml-56{margin-left: 56px;}
.tab-ml-48{margin-left: 48px;}
.tab-ml-40{margin-left: 40px;}
.tab-ml-36{margin-left: 36px;}
.tab-ml-32{margin-left: 32px;}
.tab-ml-28{margin-left: 28px;}
.tab-ml-24{margin-left: 24px;}
.tab-ml-20{margin-left: 20px;}
.tab-ml-16{margin-left: 16px;}
.tab-ml-12{margin-left: 12px;}
.tab-ml-8{margin-left: 8px;}
.tab-ml-4{margin-left: 4px;}
.tab-ml-2{margin-left: 2px;}
.tab-ml-0{margin-left: 0;}
/* tablet margin left end */
}
/* ! Medium devices (tablets, less than 992px) */
@media (max-width:991.98px){
   /* WRITE YOUR CSS HERE */
}
/* ! Small devices (landscape phones, less than 768px) */
@media (max-width:767.98px){

/* mobile padding all side start */
.mob-p-200{padding: 200px;}
.mob-p-190{padding: 190px;}
.mob-p-180{padding: 180px;}
.mob-p-170{padding: 170px;}
.mob-p-160{padding: 160px;}
.mob-p-150{padding: 150px;}
.mob-p-140{padding: 140px;}
.mob-p-130{padding: 130px;}
.mob-p-120{padding: 120px;}
.mob-p-110{padding: 110px;}
.mob-p-100{padding: 100px;}
.mob-p-90{padding: 90px;}
.mob-p-80{padding: 80px;}
.mob-p-72{padding: 72px;}
.mob-p-64{padding: 64px;}
.mob-p-56{padding: 56px;}
.mob-p-48{padding: 48px;}
.mob-p-40{padding: 40px;}
.mob-p-36{padding: 36px;}
.mob-p-32{padding: 32px;}
.mob-p-28{padding: 28px;}
.mob-p-24{padding: 24px;}
.mob-p-20{padding: 20px;}
.mob-p-16{padding: 16px;}
.mob-p-12{padding: 12px;}
.mob-p-8{padding: 8px;}
.mob-p-4{padding: 4px;}
.mob-p-2{padding: 2px;}
.mob-p-0{padding: 0;}
/* mobile padding all side end */
/* mobile padding top start */
.mob-pt-200{padding-top: 200px;}
.mob-pt-190{padding-top: 190px;}
.mob-pt-180{padding-top: 180px;}
.mob-pt-170{padding-top: 170px;}
.mob-pt-160{padding-top: 160px;}
.mob-pt-150{padding-top: 150px;}
.mob-pt-140{padding-top: 140px;}
.mob-pt-130{padding-top: 130px;}
.mob-pt-120{padding-top: 120px;}
.mob-pt-110{padding-top: 110px;}
.mob-pt-100{padding-top: 100px;}
.mob-pt-90{padding-top: 90px;}
.mob-pt-80{padding-top: 80px;}
.mob-pt-72{padding-top: 72px;}
.mob-pt-64{padding-top: 64px;}
.mob-pt-56{padding-top: 56px;}
.mob-pt-48{padding-top: 48px;}
.mob-pt-40{padding-top: 40px;}
.mob-pt-36{padding-top: 36px;}
.mob-pt-32{padding-top: 32px;}
.mob-pt-28{padding-top: 28px;}
.mob-pt-24{padding-top: 24px;}
.mob-pt-20{padding-top: 20px;}
.mob-pt-16{padding-top: 16px;}
.mob-pt-12{padding-top: 12px;}
.mob-pt-8{padding-top: 8px;}
.mob-pt-4{padding-top: 4px;}
.mob-pt-2{padding-top: 2px;}
.mob-pt-0{padding-top: 0;}
/* mobile padding top end */
/* mobile padding right start */
.mob-pr-200{padding-right: 200px;}
.mob-pr-190{padding-right: 190px;}
.mob-pr-180{padding-right: 180px;}
.mob-pr-170{padding-right: 170px;}
.mob-pr-160{padding-right: 160px;}
.mob-pr-150{padding-right: 150px;}
.mob-pr-140{padding-right: 140px;}
.mob-pr-130{padding-right: 130px;}
.mob-pr-120{padding-right: 120px;}
.mob-pr-110{padding-right: 110px;}
.mob-pr-100{padding-right: 100px;}
.mob-pr-90{padding-right: 90px;}
.mob-pr-80{padding-right: 80px;}
.mob-pr-72{padding-right: 72px;}
.mob-pr-64{padding-right: 64px;}
.mob-pr-56{padding-right: 56px;}
.mob-pr-48{padding-right: 48px;}
.mob-pr-40{padding-right: 40px;}
.mob-pr-36{padding-right: 36px;}
.mob-pr-32{padding-right: 32px;}
.mob-pr-28{padding-right: 28px;}
.mob-pr-24{padding-right: 24px;}
.mob-pr-20{padding-right: 20px;}
.mob-pr-16{padding-right: 16px;}
.mob-pr-12{padding-right: 12px;}
.mob-pr-8{padding-right: 8px;}
.mob-pr-4{padding-right: 4px;}
.mob-pr-2{padding-right: 2px;}
.mob-pr-0{padding-right: 0;}
/* mobile padding right end */
/* mobile padding bottom start */
.mob-pb-200{padding-bottom: 200px;}
.mob-pb-190{padding-bottom: 190px;}
.mob-pb-180{padding-bottom: 180px;}
.mob-pb-170{padding-bottom: 170px;}
.mob-pb-160{padding-bottom: 160px;}
.mob-pb-150{padding-bottom: 150px;}
.mob-pb-140{padding-bottom: 140px;}
.mob-pb-130{padding-bottom: 130px;}
.mob-pb-120{padding-bottom: 120px;}
.mob-pb-110{padding-bottom: 110px;}
.mob-pb-100{padding-bottom: 100px;}
.mob-pb-90{padding-bottom: 90px;}
.mob-pb-80{padding-bottom: 80px;}
.mob-pb-72{padding-bottom: 72px;}
.mob-pb-64{padding-bottom: 64px;}
.mob-pb-56{padding-bottom: 56px;}
.mob-pb-48{padding-bottom: 48px;}
.mob-pb-40{padding-bottom: 40px;}
.mob-pb-36{padding-bottom: 36px;}
.mob-pb-32{padding-bottom: 32px;}
.mob-pb-28{padding-bottom: 28px;}
.mob-pb-24{padding-bottom: 24px;}
.mob-pb-20{padding-bottom: 20px;}
.mob-pb-16{padding-bottom: 16px;}
.mob-pb-12{padding-bottom: 12px;}
.mob-pb-8{padding-bottom: 8px;}
.mob-pb-4{padding-bottom: 4px;}
.mob-pb-2{padding-bottom: 2px;}
.mob-pb-0{padding-bottom: 0;}
/* mobile padding bottom end */
/* mobile padding left start */
.mob-pl-200{padding-left: 200px;}
.mob-pl-190{padding-left: 190px;}
.mob-pl-180{padding-left: 180px;}
.mob-pl-170{padding-left: 170px;}
.mob-pl-160{padding-left: 160px;}
.mob-pl-150{padding-left: 150px;}
.mob-pl-140{padding-left: 140px;}
.mob-pl-130{padding-left: 130px;}
.mob-pl-120{padding-left: 120px;}
.mob-pl-110{padding-left: 110px;}
.mob-pl-100{padding-left: 100px;}
.mob-pl-90{padding-left: 90px;}
.mob-pl-80{padding-left: 80px;}
.mob-pl-72{padding-left: 72px;}
.mob-pl-64{padding-left: 64px;}
.mob-pl-56{padding-left: 56px;}
.mob-pl-48{padding-left: 48px;}
.mob-pl-40{padding-left: 40px;}
.mob-pl-36{padding-left: 36px;}
.mob-pl-32{padding-left: 32px;}
.mob-pl-28{padding-left: 28px;}
.mob-pl-24{padding-left: 24px;}
.mob-pl-20{padding-left: 20px;}
.mob-pl-16{padding-left: 16px;}
.mob-pl-12{padding-left: 12px;}
.mob-pl-8{padding-left: 8px;}
.mob-pl-4{padding-left: 4px;}
.mob-pl-2{padding-left: 2px;}
.mob-pl-0{padding-left: 0;}
/* mobile padding left end */
/* mobile margin all side start */
.mob-m-200{margin: 200px;}
.mob-m-190{margin: 190px;}
.mob-m-180{margin: 180px;}
.mob-m-170{margin: 170px;}
.mob-m-160{margin: 160px;}
.mob-m-150{margin: 150px;}
.mob-m-140{margin: 140px;}
.mob-m-130{margin: 130px;}
.mob-m-120{margin: 120px;}
.mob-m-110{margin: 110px;}
.mob-m-100{margin: 100px;}
.mob-m-90{margin: 90px;}
.mob-m-80{margin: 80px;}
.mob-m-72{margin: 72px;}
.mob-m-64{margin: 64px;}
.mob-m-56{margin: 56px;}
.mob-m-48{margin: 48px;}
.mob-m-40{margin: 40px;}
.mob-m-36{margin: 36px;}
.mob-m-32{margin: 32px;}
.mob-m-28{margin: 28px;}
.mob-m-24{margin: 24px;}
.mob-m-20{margin: 20px;}
.mob-m-16{margin: 16px;}
.mob-m-12{margin: 12px;}
.mob-m-8{margin: 8px;}
.mob-m-4{margin: 4px;}
.mob-m-2{margin: 2px;}
.mob-m-0{margin: 0;}
/* mobile margin  all side end */
/* mobile margin top start */
.mob-mt-200{margin-top: 200px;}
.mob-mt-190{margin-top: 190px;}
.mob-mt-180{margin-top: 180px;}
.mob-mt-170{margin-top: 170px;}
.mob-mt-160{margin-top: 160px;}
.mob-mt-150{margin-top: 150px;}
.mob-mt-140{margin-top: 140px;}
.mob-mt-130{margin-top: 130px;}
.mob-mt-120{margin-top: 120px;}
.mob-mt-110{margin-top: 110px;}
.mob-mt-100{margin-top: 100px;}
.mob-mt-90{margin-top: 90px;}
.mob-mt-80{margin-top: 80px;}
.mob-mt-72{margin-top: 72px;}
.mob-mt-64{margin-top: 64px;}
.mob-mt-56{margin-top: 56px;}
.mob-mt-48{margin-top: 48px;}
.mob-mt-40{margin-top: 40px;}
.mob-mt-36{margin-top: 36px;}
.mob-mt-32{margin-top: 32px;}
.mob-mt-28{margin-top: 28px;}
.mob-mt-24{margin-top: 24px;}
.mob-mt-20{margin-top: 20px;}
.mob-mt-16{margin-top: 16px;}
.mob-mt-12{margin-top: 12px;}
.mob-mt-8{margin-top: 8px;}
.mob-mt-4{margin-top: 4px;}
.mob-mt-2{margin-top: 2px;}
.mob-mt-0{margin-top: 0;}
/* mobile margin top end */
/* mobile margin right start */
.mob-mr-200{margin-right: 200px;}
.mob-mr-190{margin-right: 190px;}
.mob-mr-180{margin-right: 180px;}
.mob-mr-170{margin-right: 170px;}
.mob-mr-160{margin-right: 160px;}
.mob-mr-150{margin-right: 150px;}
.mob-mr-140{margin-right: 140px;}
.mob-mr-130{margin-right: 130px;}
.mob-mr-120{margin-right: 120px;}
.mob-mr-110{margin-right: 110px;}
.mob-mr-100{margin-right: 100px;}
.mob-mr-90{margin-right: 90px;}
.mob-mr-80{margin-right: 80px;}
.mob-mr-72{margin-right: 72px;}
.mob-mr-64{margin-right: 64px;}
.mob-mr-56{margin-right: 56px;}
.mob-mr-48{margin-right: 48px;}
.mob-mr-40{margin-right: 40px;}
.mob-mr-36{margin-right: 36px;}
.mob-mr-32{margin-right: 32px;}
.mob-mr-28{margin-right: 28px;}
.mob-mr-24{margin-right: 24px;}
.mob-mr-20{margin-right: 20px;}
.mob-mr-16{margin-right: 16px;}
.mob-mr-12{margin-right: 12px;}
.mob-mr-8{margin-right: 8px;}
.mob-mr-4{margin-right: 4px;}
.mob-mr-2{margin-right: 2px;}
.mob-mr-0{margin-right: 0;}
/* mobile margin right end */
/* mobile margin bottom start */
.mob-mb-200{margin-bottom: 200px;}
.mob-mb-190{margin-bottom: 190px;}
.mob-mb-180{margin-bottom: 180px;}
.mob-mb-170{margin-bottom: 170px;}
.mob-mb-160{margin-bottom: 160px;}
.mob-mb-150{margin-bottom: 150px;}
.mob-mb-140{margin-bottom: 140px;}
.mob-mb-130{margin-bottom: 130px;}
.mob-mb-120{margin-bottom: 120px;}
.mob-mb-110{margin-bottom: 110px;}
.mob-mb-100{margin-bottom: 100px;}
.mob-mb-90{margin-bottom: 90px;}
.mob-mb-80{margin-bottom: 80px;}
.mob-mb-72{margin-bottom: 72px;}
.mob-mb-64{margin-bottom: 64px;}
.mob-mb-56{margin-bottom: 56px;}
.mob-mb-48{margin-bottom: 48px;}
.mob-mb-40{margin-bottom: 40px;}
.mob-mb-36{margin-bottom: 36px;}
.mob-mb-32{margin-bottom: 32px;}
.mob-mb-28{margin-bottom: 28px;}
.mob-mb-24{margin-bottom: 24px;}
.mob-mb-20{margin-bottom: 20px;}
.mob-mb-16{margin-bottom: 16px;}
.mob-mb-12{margin-bottom: 12px;}
.mob-mb-8{margin-bottom: 8px;}
.mob-mb-4{margin-bottom: 4px;}
.mob-mb-2{margin-bottom: 2px;}
.mob-mb-0{margin-bottom: 0;}
/* mobile margin bottom end */
/* mobile margin left start */
.mob-ml-200{margin-left: 200px;}
.mob-ml-190{margin-left: 190px;}
.mob-ml-180{margin-left: 180px;}
.mob-ml-170{margin-left: 170px;}
.mob-ml-160{margin-left: 160px;}
.mob-ml-150{margin-left: 150px;}
.mob-ml-140{margin-left: 140px;}
.mob-ml-130{margin-left: 130px;}
.mob-ml-120{margin-left: 120px;}
.mob-ml-110{margin-left: 110px;}
.mob-ml-100{margin-left: 100px;}
.mob-ml-90{margin-left: 90px;}
.mob-ml-80{margin-left: 80px;}
.mob-ml-72{margin-left: 72px;}
.mob-ml-64{margin-left: 64px;}
.mob-ml-56{margin-left: 56px;}
.mob-ml-48{margin-left: 48px;}
.mob-ml-40{margin-left: 40px;}
.mob-ml-36{margin-left: 36px;}
.mob-ml-32{margin-left: 32px;}
.mob-ml-28{margin-left: 28px;}
.mob-ml-24{margin-left: 24px;}
.mob-ml-20{margin-left: 20px;}
.mob-ml-16{margin-left: 16px;}
.mob-ml-12{margin-left: 12px;}
.mob-ml-8{margin-left: 8px;}
.mob-ml-4{margin-left: 4px;}
.mob-ml-2{margin-left: 2px;}
.mob-ml-0{margin-left: 0;}
/* mobile margin left end */
   
}
/* ! Extra small devices (portrait phones, less than 576px) */
@media (max-width:575.98px){ 
   /* WRITE YOUR CSS HERE */
}

/**************************************************************************************************************************/
/****************************************************** 06. CTA ***********************************************************/
/**************************************************************************************************************************/
.btn{font-family: var(--boka-secondary-font); border-radius:8px;font-weight:400;padding: 10px 18px;min-width:170px;height: 50px;font-size: 16px;line-height: 22px;box-shadow:none;transition:var(--boka-custom-ease);display: inline-block;vertical-align: middle; }
.btn-primary,.btn-primary:focus{color:var(--boka-black);background-color:var(--boka-theme-color-1);border:solid 2px var(--boka-theme-color-1);}
.btn-primary:hover,.btn-primary:active{color:var(--boka-theme-color-1);background-color:transparent;border-color:var(--boka-theme-color-1) ;}
.btn-primary-outline,.btn-primary-outline:focus{color:var(--boka-theme-color-1);background-color:transparent;border:solid 2px var(--boka-theme-color-1);}
.btn-primary-outline:hover,.btn-primary-outline:active{color:var(--boka-black);background-color:var(--boka-theme-color-1);border-color:var(--boka-theme-color-1) ;}
.btn-secondary,.btn-secondary:focus{color:var(--boka-white);background-color:var(--boka-theme-color-2);border:solid 2px var(--boka-theme-color-2);}
.btn-secondary:hover,.btn-secondary:active{color:var(--boka-theme-color-2);background-color:transparent;border-color:var(--boka-theme-color-2) ;}
.btn-secondary-outline,.btn-secondary-outline:focus{color:var(--boka-theme-color-2);background-color:transparent;border:solid 2px var(--boka-theme-color-2);}
.btn-secondary-outline:hover,.btn-secondary-outline:active{color:var(--boka-white);background-color:var(--boka-theme-color-2);border-color:var(--boka-theme-color-2) ;}
.btn-white,.btn-white:focus{color:var(--boka-black);background-color:var(--boka-white);border:solid 2px var(--boka-white);}
.btn-white:hover,.btn-white:active{color:var(--boka-white);background-color:transparent;border-color:var(--boka-white) ;}
.btn-white-outline,.btn-white-outline:focus{color:var(--boka-white);background-color:transparent;border:solid 2px var(--boka-white);}
.btn-white-outline:hover,.btn-white-outline:active{color:var(--boka-black);background-color:var(--boka-white);border-color:var(--boka-white) ;}
.btn-black,.btn-black:focus{color:var(--boka-white);background-color:var(--boka-black);border:solid 2px var(--boka-black);}
.btn-black:hover,.btn-black:active{color:var(--boka-black);background-color:transparent;border-color:var(--boka-black) ;}
.btn-black-outline,.btn-black-outline:focus{color:var(--boka-black);background-color:transparent;border:solid 2px var(--boka-black);}
.btn-black-outline:hover,.btn-black-outline:active{color:var(--boka-white);background-color:var(--boka-black);border-color:var(--boka-black) ;}
.btn:focus{box-shadow:none;}
.btn.btn-block{min-width:100%;}  
.btn.btn-sm{min-width:150px;}
.btn.btn-lg{min-width:210px;}
.link{font-family: var(--boka-primary-font); background: transparent; font-weight:700;color:var(--boka-black);font-size:16px;line-height: 1.1;padding:0;border:none; position: relative; text-decoration:none; overflow: hidden; border-bottom: solid 1px var(--boka-body-color);}
.link.link-xs{font-size: 12px;}
.link.link-sm{font-size: 14px;}
.link.link-lg{font-size: 18px;}
.link.link-xl{font-size: 20px;}
.link.link-xxl{font-size: 24px;}
.link:after{content:attr(data-text);position: absolute;top: 0;right: 0;width: 100%;height: 100%; transition: var(--boka-custom-ease); transform: translateY(100%);}
.link:hover{color: var(--boka-body-color);}
.link span{display: inline-block; transition: var(--boka-custom-ease);}
.link:hover span{transform: translateY(-100%);}
.link:hover:after{transform: translateY(0%);}
.text-white.link{border-color: var(--boka-white);}
.text-black.link{border-color: var(--boka-black);}
.text-body-color.link{border-color: var(--boka-body-color);}
.text-body-bg.link{border-color: var(--boka-body-bg);}
.text-white.link .outline{-webkit-text-stroke:1px var(--boka-white);}
.text-black.link .outline{-webkit-text-stroke:1px var(--boka-black);}
.text-body-color.link .outline{-webkit-text-stroke:1px var(--boka-body-color);}
.text-body-bg.link .outline{-webkit-text-stroke:1px var(--boka-body-bg);}

/**************************************************************************************************************************/
/********************************************* 07(a). HEADER  ************************************************/
/**************************************************************************************************************************/
#header{ position: fixed; left: 0; right: 0; top: 0; width: var(--boka-header-width); height: 100%; z-index: 99;box-shadow: 20px 0 20px rgba(0,0,0,0.1);}
.navbar-brand{position: absolute; left: 30px; top: 30px; z-index: 9; width: 110px;}
.header-img-hold{width: 100%; height: 100%; position: absolute; left: 0; top: 0;}

.header-content{width: 100%;height: 100%;position: absolute;left: 0;top: 0;padding: 30px;color: var(--boka-white);}
.header-content h1{font-size: 40px;}
.header-content h2{font-size: 24px;}
.navbar-outer{width: calc(100% - var(--boka-header-width)); height: var(--boka-vh); position: fixed; top: 0; right: 0; z-index: 97;} 
.navbar-block{width: 100%; height: 100%; border-top: 0; border-bottom: 0; overflow: hidden; position: relative; transition: var(--boka-custom-ease);cursor: pointer;}
.navbar-block h2{position: absolute; bottom: 0; right: -15%; color: var(--boka-white); font-size: 7vw; line-height: 1; letter-spacing: -0.025em; margin: 0; }
.navbar-block h2 .arrow{ display: inline-block; transform: scale(0); transition: var(--boka-custom-ease);}
.navbar-block:not(.full):hover .arrow{transform: scale(1);}
.hero-heading{ color: var(--boka-white); font-size: 4vw; line-height: 1.3; padding: 80px 20% 80px 60px;  opacity: 0; visibility: hidden; position: absolute; left: 0; top: 0;}
.full.navbar-block .hero-heading{opacity: 1; visibility: visible; transition: var(--boka-custom-ease);  }
.navbar-icon{position: absolute;left: 0;bottom: 0; width: 150px; transition: var(--boka-custom-ease); transform: translateX(-100px) rotate(-20deg); opacity: 0; filter: brightness(0) invert(1); object-position: left bottom;}
.navbar-block:not(.full):hover .navbar-icon{transform: translateX(0) rotate(0deg); opacity: 1;transition-delay: 0.1s; }
/* scroll down start */
.scroll-down{
    position: absolute; 
    left: 60px; 
    left: calc(60px + env(safe-area-inset-left));
    bottom: 20px; 
    bottom: calc(20px + env(safe-area-inset-bottom));
    color: var(--boka-white); z-index: 0; visibility: hidden; opacity: 0; transition: var(--boka-custom-ease);
}
.page-active .scroll-down{visibility: visible; opacity: 1; transition-delay: 1s; z-index: 20;}
/* scroll down start */
/* go back btn start */
.go-back{
    position: absolute; 
    right: 20px; 
    right: calc(20px + env(safe-area-inset-right));
    top: 20px; 
    top: calc(20px + env(safe-area-inset-top));
    color: var(--boka-white); z-index: 0; visibility: hidden; opacity: 0; transition: var(--boka-custom-ease);
}
.go-back i{transform: rotate(-45deg);}
.page-active .go-back{visibility: visible; opacity: 1; transition-delay: 1s; z-index: 20;}
/* go back btn end */
/* nav toggler start */
.nav-toggler{position: fixed; right: 20px; top: 20px; color: var(--boka-white); z-index: 99999; font-size: 0; background: rgba(255,255,255,0.15); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.2); border-radius: 50%; width: 56px; height: 56px; transform: translateY(0%); transition: all 0.3s ease; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.nav-toggler:hover{background: rgba(255,255,255,0.25); transform: scale(1.05);}
.nav-toggle-btn{width: 24px; height: 18px; position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: 0;}
.nav-toggle-btn span{display: block; width: 100%; height: 2px; background: #fff; border-radius: 2px; transition: all 0.35s cubic-bezier(0.23, 1, 0.32, 1); transform-origin: center;}
.nav-toggle-btn span:nth-child(2){width: 70%; margin-left: auto;}
/* Estado abierto - X */
.nav-open .nav-toggle-btn span:nth-child(1){transform: translateY(8px) rotate(45deg);}
.nav-open .nav-toggle-btn span:nth-child(2){opacity: 0; transform: scaleX(0);}
.nav-open .nav-toggle-btn span:nth-child(3){transform: translateY(-8px) rotate(-45deg);}
/* nav toggler end */

/* X-Large devices (desktops, less than 1400px) */
@media (max-width:1399.98px){ 
   .header-content h1{font-size: 45px;}
   .hero-heading{font-size: 60px; padding: 80px 5%;}
}

/* Large devices (desktops, less than 1200px) */
@media (max-width:1199.98px){ 
#header{width: 100%;}
.header-content{padding: 20px;}
.navbar-brand{top: 20px; left: 20px;}
.navbar-outer{width: 100%; height: 100%; z-index: 100;  left: 0; top: 0; transform: translateX(100%);}
.nav-open .navbar-outer{transform: translateX(0%);}
.navbar-block h2{font-size: 60px !important; line-height: 1; bottom: 0; right: 0;}
.navbar-block h2 .arrow{transform: scale(1); order: -1;}
.navbar-icon{ width: 50px !important; transform: translateX(0) rotate(0deg); opacity: 1;  }
.page-active .full .navbar-icon{ width: 0; }
.hero-heading{font-size: 50px; padding: 80px 20px 60px 20px;}
.navbar-block{transform: translateX(100%); }
.nav-open .navbar-block{transform: translateX(0%); }
.nav-stagger .navbar-block:nth-child(1){transition-delay: 0.2s;}
.nav-stagger .navbar-block:nth-child(2){transition-delay: 0.3s;}
.nav-stagger .navbar-block:nth-child(3){transition-delay: 0.4s;}
.nav-stagger .navbar-block:nth-child(4){transition-delay: 0.5s;}
.nav-stagger .navbar-block:nth-child(5){transition-delay: 0.6s;}
.nav-stagger .navbar-block:nth-child(6){transition-delay: 0.7s;}
.page-active .nav-toggler{ transform: translateY(0); }
.scroll-down{bottom: 7px; left: 20px;}
}
/* ! Medium devices (tablets, less than 992px) */
@media (max-width:991.98px){
  
}
/* ! Small devices (landscape phones, less than 768px) */
@media (max-width:767.98px){
.hero-heading{font-size: 35px;}
.navbar-block h2{font-size: 40px !important; }
}
/* ! Extra small devices (portrait phones, less than 576px) */
@media (max-width:575.98px){ 
   /* WRITE YOUR CSS HERE */
}




/**************************************************************************************************************************/
/********************************************* 07(a). HEADER (VERSION - 1) ************************************************/
/**************************************************************************************************************************/
.navbar-v1-block{width: 100%; height: var(--boka-vh);  box-shadow: 20px 0 20px rgba(0,0,0,0.1); }
.navbar-v1-block h2{ position: absolute; bottom: 0; right: -1vw;}
.navbar-v1-block h2 .arrow i{ transform: rotate(135deg);}
.navbar-v1-block:hover h2,  .navbar-v1-block.full h2{right: 0; opacity: 1;}
.navbar-v1-block.remove{width: 0 !important;}
.navbar-v1-block.full{width: 100% !important;}
.navbar-v1-block .navbar-icon{ left: 30px;bottom: 15px;}

/* X-Large devices (desktops, less than 1400px) */
@media (max-width:1399.98px){ 
   /* WRITE YOUR CSS HERE */
}

/* Large devices (desktops, more than 1200px) */
@media (min-width:1200px){
.navbar-v1-block h2{-webkit-writing-mode: vertical-lr; writing-mode: vertical-lr; -webkit-transform: rotate(180deg); transform: rotate(180deg);  }
.navbar-v1-block:hover{width: 250%;}
}
/* Large devices (desktops, less than 1200px) */
@media (max-width:1199.98px){ 
   .navbar-v1-block{box-shadow: 0 10px 10px rgba(0,0,0,0.1);}
   .navbar-v1-block .navbar-icon{left: 10px;bottom: auto;top: 10px;} 
   .navbar-v1-block h2{ bottom: -5px; right: 0px; }
   .navbar-v1-block.full h2{ opacity: 1; }
   .navbar-v1-block.remove{height: 0 !important; width: 100%!important;}
   .navbar-v1-block.full{height: var(--boka-vh) !important;}
 }
 /* ! Medium devices (tablets, less than 992px) */
 @media (max-width:991.98px){
    /* WRITE YOUR CSS HERE */
 }
 /* ! Small devices (landscape phones, less than 768px) */
 @media (max-width:767.98px){
   /* WRITE YOUR CSS HERE */
 }
 /* ! Extra small devices (portrait phones, less than 576px) */
 @media (max-width:575.98px){ 
    /* WRITE YOUR CSS HERE */
 }


  
/**************************************************************************************************************************/
/********************************************* 07(b). HEADER (VERSION - 2) ************************************************/
/**************************************************************************************************************************/
.navbar-v2-block{width: 100%; height: 100%; box-shadow: 0 20px 20px rgba(0,0,0,0.1); }
.navbar-v2-block h2{ bottom: -1.5vw; right: 0; }
.navbar-v2-block h2 .arrow i{ transform: rotate(-45deg);}
.navbar-v2-block:hover h2, .navbar-v2-block.full h2{opacity: 1; bottom: 0;}
.navbar-v2-block.remove{height: 0 !important;}
.navbar-v2-block.full{height: 100% !important;}
.navbar-v2-block .navbar-icon{ left: 30px;bottom: 15px;}

/* X-Large devices (desktops, less than 1400px) */
@media (max-width:1399.98px){ 
   /* WRITE YOUR CSS HERE */
}

/* Large devices (desktops, more than 1200px) */
@media (min-width:1200px){
   .navbar-v2-block:hover{height: 250%;}
}
/* Large devices (desktops, less than 1200px) */
@media (max-width:1199.98px){
.navbar-v2-block{box-shadow: 0 10px 10px rgba(0,0,0,0.1);} 
.navbar-v2-block .navbar-icon{left: 10px;bottom: auto;top: 10px;}
.navbar-v2-block h2 .arrow i{transform: rotate(135deg);}
.navbar-v2-block h2{ bottom: -5px; right: 0px; }
.navbar-v2-block:hover h2, .navbar-v2-block.full h2{right: 0px;bottom: -5px;}
}
 /* ! Medium devices (tablets, less than 992px) */
 @media (max-width:991.98px){
  
 }
 /* ! Small devices (landscape phones, less than 768px) */
 @media (max-width:767.98px){
   /* WRITE YOUR CSS HERE */
 }
 /* ! Extra small devices (portrait phones, less than 576px) */
 @media (max-width:575.98px){ 
    /* WRITE YOUR CSS HERE */
 }


/**************************************************************************************************************************/
/********************************************* 07(c). HEADER (VERSION - 3) ************************************************/
/**************************************************************************************************************************/
.navbar-v3-block{ box-shadow: 20px 20px 20px rgba(0,0,0,0.1); width: 100%; height: 100%; }
.navbar-v3-block h2{bottom: -1.0vw;right: 0;font-size: 4.5vw;}
.navbar-v3-block h2 .arrow i{transform: rotate(315deg) translateX(0);}
.navbar-v3-block:hover h2,  .navbar-v3-block.full h2{bottom: 0; right: 0px; opacity: 1;}
.navbar-v3-block.full{height: 100% !important;width: 100% !important; left: 0 !important; top: 0 !important;  z-index: 19 !important;}
.navbar-v3-block .navbar-icon{left: auto; bottom: auto; right: 30px; top: 15px; transform: translateX(100%); width: 120px;}
.navbar-v3-block .text-marquee-wrapper{right: 120px; mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 0%, rgb(0, 0, 0) 85%, rgba(0, 0, 0, 0) 100%);}
/* Large devices (desktops, more than 1200px) */
@media (min-width:1200px){
   .navbar-grid-3 .navbar-v3-block:nth-child(1){width: 50%; height: 66.666%; position: absolute; left: 0; top: 0;}
   .navbar-grid-3 .navbar-v3-block:nth-child(2){width: 50%; height: 33.333%; position: absolute; left: 50%; top: 0;}
   .navbar-grid-3 .navbar-v3-block:nth-child(3){width: 50%; height: 33.333%; position: absolute; left: 50%; top: 33.333%;}
   .navbar-grid-3 .navbar-v3-block:nth-child(4){width: 33.333%; height: 33.333%; position: absolute; left: 0; top: 66.666%;}
   .navbar-grid-3 .navbar-v3-block:nth-child(5){width: 33.333%; height: 33.333%; position: absolute; left: 33.333%; top: 66.666%;}
   .navbar-grid-3 .navbar-v3-block:nth-child(6){width: 33.333%; height: 33.333%; position: absolute; left: 66.666%; top: 66.666%;}
}

/* X-Large devices (desktops, less than 1400px) */
@media (max-width:1399.98px){ 
   /* WRITE YOUR CSS HERE */
}
/* Large devices (desktops, less than 1200px) */
@media (max-width:1199.98px){ 
.navbar-v3-block{box-shadow: 0 10px 10px rgba(0,0,0,0.1);}
.navbar-v3-block .navbar-icon{left: 10px;bottom: auto;top: 10px; transform: none;}
.navbar-v3-block h2 .arrow i{transform: rotate(135deg);}
.navbar-v3-block h2{ bottom: -5px; right: 0px; }
.navbar-v3-block:hover h2, .navbar-v3-block.full h2{bottom: -5px; right: 0px; opacity: 1;}
.navbar-v3-block.remove{height: 0 !important;}
.navbar-v3-block.full{height: 100% !important;}
 }
 /* ! Medium devices (tablets, less than 992px) */
 @media (max-width:991.98px){
    /* WRITE YOUR CSS HERE */
 }
 /* ! Small devices (landscape phones, less than 768px) */
 @media (max-width:767.98px){
   /* WRITE YOUR CSS HERE */
 }
 /* ! Extra small devices (portrait phones, less than 576px) */
 @media (max-width:575.98px){ 
    /* WRITE YOUR CSS HERE */
 }




/**************************************************************************************************************************/
/************************************************** 08. FOOTER ************************************************************/
/**************************************************************************************************************************/
#footer{position:relative;background:var(--boka-black);color:var(--boka-white);}
.theme-toggler{ width: 40px;height: 40px; border: 0; background: rgba(255,255,255,0.1); border-radius: 50px;position: relative;padding: 0;cursor: pointer;display: flex;justify-content: space-between;align-items: center; }
.dark-icon, .light-icon{width: 40px; height: 40px; border-radius: 50px; transition: var(--boka-custom-ease);}
.light-icon, body.dark-theme .dark-icon{display: none !important;}
body.dark-theme .light-icon{display: flex !important;}
.dark-icon:hover, .light-icon:hover{transform: scale(1.05);}
.go-top{ width: 40px;height: 40px; border: 0; background: rgba(255,255,255,0.1); color: var(--boka-white); border-radius: 50px;}
.go-top:hover{color: var(--boka-white);}
.go-top:hover i{transform: scale(1.05);}
/* X-Large devices (desktops, less than 1400px) */
@media (max-width:1399.98px){ 
   /* WRITE YOUR CSS HERE */
}
/* Large devices (desktops, less than 1200px) */
@media (max-width:1199.98px){ 
 /* WRITE YOUR CSS HERE */
 }
 /* ! Medium devices (tablets, less than 992px) */
 @media (max-width:991.98px){
    /* WRITE YOUR CSS HERE */
 }
 /* ! Small devices (landscape phones, less than 768px) */
 @media (max-width:767.98px){
 /* WRITE YOUR CSS HERE */
 }
 /* ! Extra small devices (portrait phones, less than 576px) */
 @media (max-width:575.98px){ 
    /* WRITE YOUR CSS HERE */
 }
 
 
 

/**************************************************************************************************************************/
/******************************************** 09. COMMON PAGE SECTION *****************************************************/
/**************************************************************************************************************************/
main{z-index: 98; color:var(--boka-body-color);background:var(--boka-body-bg); margin-top: 0;}
body:not(.page-active) main{visibility: visible; overflow: visible; height: auto;}
.page-heading{font-size: 60px; line-height: 1.3; }
.page-nav-link{min-height: 240px; box-shadow: 20px 0 20px rgba(0,0,0,0.1);}
.page-nav-link h2{ color: var(--boka-white); font-size: 5vw; line-height: 1; letter-spacing: -0.025em; margin-bottom: 0; bottom:-0.75vw;  }
.page-nav-link h2 .arrow{ display: inline-block; transform: scale(0); transition: var(--boka-custom-ease); position: absolute; left: 100%; bottom: -10%;}
.page-nav-link h2 .arrow i{transform: rotate(225deg) translateX(0);}
.page-nav-link:hover .arrow{transform: scale(1);}
.page-nav-link:hover h2{bottom: 0;}
.page-nav-icon{position: absolute;right: 20px;top: 20px; width: 120px; transition: var(--boka-custom-ease); transform: translateX(-100px) rotate(-20deg); opacity: 0; filter: brightness(0) invert(1); object-position: left bottom;}
.page-nav-link .page-nav-icon{transform: translateX(0) rotate(0deg); opacity: 1;transition-delay: 0.1s; }
.page-nav-arrow{position: absolute; left: -50px; top: 30px; font-size: 100px; line-height: 1;}
.page-nav-link:nth-child(2){justify-content: flex-end;}
.page-nav-link:nth-child(2) .page-nav-icon{left: 20px; right: auto;}
.page-nav-link:nth-child(2) h2 .arrow {left: auto; right: 100%;}
.page-nav-link:nth-child(2) h2 .arrow i{transform: rotate(315deg) translateX(0);}
.nav-link-overlay { z-index: -1; position: fixed;   opacity: 0; visibility: hidden;  transition: width 0.3s ease-in, height 0.3s ease-in, left 0.3s ease-in, top 0.3s ease-in, bottom 0.3s ease-in;}
.go-full.nav-link-overlay { z-index: 8; width: calc(100% - var(--boka-header-width)) !important; height: 100% !important; bottom: 0; left: var(--boka-header-width) !important; top: 0 !important; opacity: 1; visibility: visible;} 

/* X-Large devices (desktops, less than 1400px) */
@media (max-width:1399.98px){ 
   .page-heading{font-size: 50px;}
   .page-nav-link h2{font-size: 60px; bottom: -10px;}
}
/* Large devices (desktops, less than 1200px) */
@media (max-width:1199.98px){   
   body{padding-left: 0;}
   main{z-index: 100;}
   }
   /* ! Medium devices (tablets, less than 992px) */
   @media (max-width:991.98px){
      .page-heading{font-size: 40px;}
      .page-nav-link h2 .arrow{transform: scale(1);}
   }
   /* ! Small devices (landscape phones, less than 768px) */
   @media (max-width:767.98px){
 .page-nav-container{flex-flow: column;}
  .page-heading{font-size: 35px; }
  .page-nav-link{min-height: 100px;}
  .page-nav-link h2{font-size: 40px;bottom: -5px;margin: 0 20px;}
  .page-nav-icon{width: 50px;top: 10px;}
   }
   /* ! Extra small devices (portrait phones, less than 576px) */
   @media (max-width:575.98px){ 
      /* WRITE YOUR CSS HERE */
   }




/**************************************************************************************************************************/
/*********************************************** 10. ABOUT SECTION ********************************************************/
/**************************************************************************************************************************/
.signature-hold{left: 50px; bottom: 20px; width: 70%; max-width: 200px; transform: rotate(-5deg); transform-origin: left bottom;}
/* X-Large devices (desktops, less than 1400px) */
@media (max-width:1399.98px){ 
   /* WRITE YOUR CSS HERE */
}
/* Large devices (desktops, less than 1200px) */
@media (max-width:1199.98px){ 
   /* WRITE YOUR CSS HERE */
   }
   /* ! Medium devices (tablets, less than 992px) */
   @media (max-width:991.98px){
      /* WRITE YOUR CSS HERE */
   }
   /* ! Small devices (landscape phones, less than 768px) */
   @media (max-width:767.98px){
   /* WRITE YOUR CSS HERE */
   }
   /* ! Extra small devices (portrait phones, less than 576px) */
   @media (max-width:575.98px){ 
      /* WRITE YOUR CSS HERE */
   }

/**************************************************************************************************************************/
/********************************************** 11. SERVICES SECTION ******************************************************/
/**************************************************************************************************************************/
.service-link{background-image: linear-gradient(to right, var(--boka-black) 50%, rgba(85, 85, 85, 0.2) 50%); background-size: 200% 100%; background-position-x: 100%; color: transparent; background-clip: text; -webkit-background-clip: text; transition: var(--boka-custom-ease); cursor: pointer;}
.service-link.active{opacity: 1; background-position-x: 0%; }
.dark-theme .service-link{background-image: linear-gradient(to right, var(--boka-white) 50%, rgba(244, 244, 244, 0.15) 50%);}
.service-link sup{position: absolute; top: 0; left: 100%; line-height: 1;}
.service-link:not(.active) sup{ margin-left: 20px; opacity: 0;}
.service-image-box{height: 80vh; min-height: 600px; max-height: 900px; transition: var(--boka-custom-ease);transform: translateY(20px); opacity: 0;  }
.reveal .service-image-box{transform: translateY(0px); opacity: 1;  }
.service-details{width: 80%; margin-left: -80px; position: absolute; bottom: -20px; background: var(--boka-white); color: var(--boka-black);  opacity: 0;  transform: rotate(5deg); transform-origin: center bottom;}
.reveal .service-details{transform: rotate(0deg); transition: var(--boka-custom-ease); transition-delay: 0.3s; opacity:1;}

/* X-Large devices (desktops, less than 1400px) */
@media (max-width:1399.98px){ 
   /* WRITE YOUR CSS HERE */
}
/* Large devices (desktops, less than 1200px) */
@media (max-width:1199.98px){ 
   /* WRITE YOUR CSS HERE */
   }
   /* ! Medium devices (tablets, less than 992px) */
   @media (max-width:991.98px){
      ul.service-list{display: flex; flex-wrap: wrap; margin-bottom: 50px;}
      ul.service-list li{width: 50%; padding-right: 20px;}
      .service-details{width: 100%;margin-left: 0;position: relative;bottom: auto; margin-top: -30px;}
      .service-image-box{height: auto;min-height: auto;max-height: none; }

   }
   /* ! Small devices (landscape phones, less than 768px) */
   @media (max-width:767.98px){
      ul.service-list li{width: 100%; padding-right: 0px;}
     

   }
   /* ! Extra small devices (portrait phones, less than 576px) */
   @media (max-width:575.98px){ 
      /* WRITE YOUR CSS HERE */
   }
   


/**************************************************************************************************************************/
/********************************************* 12. PORTFOLIO SECTION ******************************************************/
/**************************************************************************************************************************/
.portfolio-box-img{width: 100%; position: relative; overflow: hidden;  border-radius: 30px; background: var(--boka-black); overflow: hidden;}
.portfolio-box{transform: translateY(10px); transition: var(--boka-custom-ease); opacity: 0; padding: 0 50px; } 
.swiper-slide-active .portfolio-box{transform: translateY(0px); opacity: 1; transition-delay: 0.2s;}
.portfolio-title{left: -50px; margin-bottom: -50px; transition-delay: 0.5s;}
.portfolio-item:not(.swiper-slide-active) .portfolio-title{transform: translateY(30px); opacity: 0;}
.portfolio-title h2{font-size: 80px; line-height: 1.1; text-shadow: 5px 5px 5px rgba(0,0,0,0.1);}
.portfolio-category{position: absolute; right: 0; bottom: 0; }
.portfolio-category span{background: var(--boka-body-color); color: var(--boka-body-bg); display: inline-block; transform: translateY(0); opacity: 1; transition: var(--boka-custom-ease);}
.portfolio-item:not(.swiper-slide-active) .portfolio-category span{transform: translateY(30px); opacity: 0;}
.portfolio-item .portfolio-category span:nth-child(1){transition-delay: 0.6s;}
.portfolio-item .portfolio-category span:nth-child(2){transition-delay: 0.65s;}
.portfolio-item .portfolio-category span:nth-child(3){transition-delay: 0.7s;}
.portfolio-item .portfolio-category span:nth-child(4){transition-delay: 0.75s;}
.portfolio-item .portfolio-category span:nth-child(5){transition-delay: 0.8s;}
.portfolio-item .portfolio-category span:nth-child(6){transition-delay: 0.85s;}
.portfolio-item .portfolio-category span:nth-child(7){transition-delay: 0.9s;}
.portfolio-item .portfolio-category span:nth-child(8){transition-delay: 0.95s;}
.portfolio-link-wrapper{position: absolute; left: 0; bottom: 30px;}
.portfolio-link-wrapper .portfolio-link{background: var(--boka-body-color); color: var(--boka-body-bg); display: inline-block; transform: translateY(0); opacity: 1;}
.portfolio-link-wrapper .portfolio-link:hover{transform: scale(1.05); }
.portfolio-link-wrapper span{transition: var(--boka-custom-ease); transition-delay: 0.8s;}
.portfolio-item:not(.swiper-slide-active) .portfolio-link-wrapper span{transform: translateY(10px); opacity: 0;}
.client-logo-wrapper{mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 15%, rgb(0, 0, 0) 85%, rgba(0, 0, 0, 0) 100%);}
.client-logo-item{padding: 0 60px;}
.client-logo-item img{height: 80px; filter: grayscale(1); transition: var(--boka-custom-ease);}
.client-logo-item img:hover{filter: grayscale(0);} 

/* X-Large devices (desktops, less than 1400px) */
@media (max-width:1399.98px){ 
   .portfolio-box{padding: 0 40px;}
   .portfolio-title h2{font-size: 70px;}
}
/* Large devices (desktops, less than 1200px) */
@media (max-width:1199.98px){ 
   /* WRITE YOUR CSS HERE */
}
   /* ! Medium devices (tablets, less than 992px) */
   @media (max-width:991.98px){
      .portfolio-title h2{font-size: 60px;}
   }
   /* ! Small devices (landscape phones, less than 768px) */
   @media (max-width:767.98px){
      .portfolio-title{left: 0;margin-bottom: 0;}
      .portfolio-title h2{font-size: 35px; text-shadow: none;}
      .portfolio-box{padding:0; font-size: 16px;}
      .portfolio-link-wrapper{left: -15px; bottom: -15px;}
      .portfolio-category{right: -15px;}
      .stats-wrapper{flex-wrap: wrap; gap: 30px 0;}
      .stat-box{width: 50% !important; padding-right: 20px;}
   }
   /* ! Extra small devices (portrait phones, less than 576px) */
   @media (max-width:575.98px){ 
      /* WRITE YOUR CSS HERE */
   }
 
   
/**************************************************************************************************************************/
/*********************************************** 13. RESUME SECTION *******************************************************/
/**************************************************************************************************************************/
.awards-logo{width: 100%;height: 132px; max-width: 240px;}
.awards-logo img{width: 100%; height: 100%;object-fit: contain;}
.skills-icon{width: 100px;height: 100px;}
.skills-icon img{width: 100%; height: 100%;object-fit: contain;}
/* X-Large devices (desktops, less than 1400px) */
@media (max-width:1399.98px){ 
   /* WRITE YOUR CSS HERE */
}

/* Large devices (desktops, less than 1200px) */
@media (max-width:1199.98px){ 
/* WRITE YOUR CSS HERE */
}
/* ! Medium devices (tablets, less than 992px) */
@media (max-width:991.98px){
      /* WRITE YOUR CSS HERE */
}
/* ! Small devices (landscape phones, less than 768px) */
@media (max-width:767.98px){
   .skills-icon{width: 60px;height: 60px;}
   .awards-logo{max-width: 200px; height: 100px;}

}
/* ! Extra small devices (portrait phones, less than 576px) */
@media (max-width:575.98px){ 
   /* WRITE YOUR CSS HERE */
}
/**************************************************************************************************************************/
/*********************************************** 14. BLOG SECTION *********************************************************/
/**************************************************************************************************************************/
.blog-list-wrapper { perspective: 2000px; }
.blog-list { 
    display: flex; 
    flex-direction: column; 
    gap: 20px; 
}
.blog-item { 
    transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1); 
    width: 100%;
}
.blog-box { 
    background: #FEEBE7; 
    border: 3px solid #00ffff !important; 
    box-shadow: 0 0 20px rgba(0,255,255,0.3); 
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); 
    transform-style: preserve-3d;
    backface-visibility: hidden;
    border-radius: 20px !important;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 20px;
    gap: 20px;
}
.blog-box:hover { 
    transform: translateY(-20px) rotateX(6deg) rotateY(-3deg); 
    box-shadow: 0 0 30px rgba(0,255,255,0.5); 
    border-color: #00ffff !important;
}
.blog-box-inner { 
    transform: translateZ(40px); 
    flex: 1;
    min-width: 0;
}
.blog-img-wrapper { 
    flex: 0 0 400px;
    max-width: 400px;
    margin: 0;
    position: relative;
    z-index: 1;
}
.blog-img-wrapper .blog-box-img { 
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); 
    transform: translateZ(20px);
    border-radius: 15px !important;
    position: relative;
    overflow: hidden;
    background: #FEEBE7;
}

/* En desktop el iframe llena todo el contenedor expandido */
.blog-img-wrapper:hover .blog-box-img iframe {
    width: 100% !important;
    height: 100% !important;
    border-radius: 12px;
}

/* Efecto hover expandible en videos */
.blog-img-wrapper {
    transition: all 0.4s ease;
    position: relative;
    overflow: visible;
}

.blog-img-wrapper .blog-box-img {
    transition: all 0.4s ease;
    overflow: visible;
}

.blog-img-wrapper:hover {
    z-index: 1000;
}

.blog-img-wrapper:hover .blog-box-img {
    position: absolute;
    right: 100%;
    top: 50%;
    left: auto;
    transform: translateY(-50%);
    width: 860px;
    height: 484px;
    z-index: 1001;
    box-shadow: 0 25px 60px rgba(0,0,0,0.6);
    margin-right: 20px;
    border-radius: 16px;
    overflow: hidden;
}

.blog-img-wrapper .blog-box-img iframe {
    width: 100%;
    height: 100%;
    border-radius: 12px;
}
.blog-box:hover .blog-img-wrapper .blog-box-img { 
    transform: translateZ(100px) scale(1.05); 
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}

/* X-Large devices (desktops, less than 1400px) */
@media (max-width:1399.98px){ 
   /* WRITE YOUR CSS HERE */
}

/* Large devices (desktops, less than 1200px) */
@media (max-width:1199.98px){ 
   /* WRITE YOUR CSS HERE */
   }
   /* ! Medium devices (tablets, less than 992px) */
   @media (max-width:991.98px){
      .blog-box{flex-direction: column; padding: 15px;}
      .blog-img-wrapper{flex: 0 0 auto; width: 100%; max-width: 100%; margin-top: 15px; overflow: visible;}
      .blog-img-wrapper.expanded .blog-box-img {
          position: fixed;
          top: 50%;
          left: 50%;
          right: auto;
          transform: translate(-50%, -50%);
          width: min(90vw, 400px);
          height: min(80vh, 720px);
          z-index: 1002;
          box-shadow: 0 25px 60px rgba(0,0,0,0.6);
          border-radius: 16px;
          overflow: hidden;
      }
      .blog-img-wrapper.expanded .blog-box-img iframe {
          width: 100% !important;
          height: 100% !important;
          border-radius: 16px;
      }
      .blog-img-wrapper.expanded { z-index: 1001; }
   }
   /* ! Small devices (landscape phones, less than 768px) */
   @media (max-width:767.98px){
      .blog-box{flex-direction: column; padding: 15px;}
      .blog-img-wrapper{flex: 0 0 auto; width: 100%; max-width: 100%; margin-top: 15px; overflow: visible;}
      .blog-img-wrapper.expanded .blog-box-img {
          position: fixed;
          top: 50%;
          left: 50%;
          right: auto;
          transform: translate(-50%, -50%);
          width: min(92vw, 380px);
          height: min(82vh, 680px);
          z-index: 1002;
          box-shadow: 0 25px 60px rgba(0,0,0,0.6);
          border-radius: 16px;
          overflow: hidden;
      }
      .blog-img-wrapper.expanded .blog-box-img iframe {
          width: 100% !important;
          height: 100% !important;
          border-radius: 16px;
      }
      .blog-img-wrapper.expanded { z-index: 1001; }
   }

   /* Overlay oscuro al expandir en móvil */
   #blog-expand-overlay {
       display: none;
       position: fixed;
       inset: 0;
       background: rgba(0,0,0,0.85);
       z-index: 100000;
       cursor: pointer;
   }
   #blog-expand-overlay.active { display: flex; align-items: flex-start; justify-content: center; padding-top: 16px; }
   #blog-expand-overlay.active::after {
       content: '✕ Cerrar';
       color: #fff;
       font-size: 16px;
       font-weight: bold;
       background: rgba(255,255,255,0.15);
       border: 1px solid rgba(255,255,255,0.4);
       padding: 8px 24px;
       border-radius: 50px;
       backdrop-filter: blur(4px);
       pointer-events: none;
   }

/* Combo Fotos Grid Styles */
.combo-fotos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  justify-items: center;
}

.foto-slot {
  text-align: center;
}

.full-width {
  grid-column: 1 / -1;
}
   /* ! Extra small devices (portrait phones, less than 576px) */
   @media (max-width:575.98px){ 
      .blog-img-wrapper .blog-box-img{transform: rotate(0deg);}
   }
 

/**************************************************************************************************************************/
/********************************************** 15. CONTACT SECTION *******************************************************/
/**************************************************************************************************************************/
.form-label{font-weight: 700; margin-bottom: 0; opacity: 0.5;}
.form-control, .form-control:focus{border: solid 2px rgba(33,33,33,0.2); background: rgba(238, 238, 238, 0.2);box-shadow: 2px 2px 2px rgba(0,0,0,0.1); height: 60px; color: var(--boka-body-color);}
.form-control:focus{border-color: var(--boka-gradient-6);}
textarea.form-control,  textarea.form-control:focus{resize: none; height: 220px;}
.form-check-label{padding-left: 50px;position: relative;min-height: 40px; display: flex;align-items: center;}
.form-check-label:before{content:''; width: 40px; height: 40px; border-radius: 10px; border: solid 2px rgba(33,33,33,0.2); background: rgba(238, 238, 238, 0.2);box-shadow: 2px 2px 2px rgba(0,0,0,0.1); position: absolute; left: 0; top: 0;}
.form-check-label:after{content:"\f00c"; font-family: "font awesome 6 free"; font-weight: 900; width: 40px; height: 40px; position: absolute; left: 0; top: 0; display: flex; align-items: center; justify-content: center; font-size: 30px;background-size: 100% 100%; background-position-x: 0%; color: transparent; background-clip: text; -webkit-background-clip: text; transition: var(--boka-custom-ease); background-image: var(--boka-gradient-6); transform: scale(0);}
.form-check-input{position: absolute; left: -100vw; width: 0; height: 0; visibility: hidden;}
.form-check-input:checked + .form-check-label:after{transform: scale(1);}
.map-container{width: 100%; min-height: 0;}
.map-container iframe{width: 100%; height: 100%; position: absolute; left: 0; top: 0; border: 0;}
label.error{font-size: 16px;font-weight: 500;color: #f00;display: none;background:rgb(255 0 0 / 10%);padding: 10px;border-radius: 8px;border: solid 2px #f00; margin-top: 5px;}
#success, #error {display: none; text-align: center;margin-top: 40px;padding: 30px;border-radius: 8px;}
#error{color: #f00; background:rgb(255 0 0 / 10%);border: solid 2px #f00; }
#success{color: #019620;background: rgb(25 150 32 / 10%); border: solid 2px #019620;}
#success h4, #error h4{margin-bottom:10px;}
#success p {color: #019620; padding: 0;}
#error p {color: #f00; padding: 0; margin: 0;}
.loading {  display: inline-block; background-color: #23282d; opacity: 0.75; width: 24px; height: 24px; border: none; border-radius: 100%; padding: 0; margin: 0; position: absolute; top: 0; right: 0;}
.loading::before { content: ''; position: absolute; background-color: #fbfbfc;  top: 4px; left: 4px; width: 6px; height: 6px; border: none; border-radius: 100%; transform-origin: 8px 8px; animation-name: spin; animation-duration: 1000ms; animation-timing-function: linear; animation-iteration-count: infinite;}
@keyframes spin {
   from {
       transform: rotate(0deg);
   }
   to {
       transform: rotate(360deg);
   }
}
/* X-Large devices (desktops, less than 1400px) */
@media (max-width:1399.98px){ 
   /* WRITE YOUR CSS HERE */
}
/* Large devices (desktops, less than 1200px) */
@media (max-width:1199.98px){ 
   /* WRITE YOUR CSS HERE */
   }
   /* ! Medium devices (tablets, less than 992px) */
   @media (max-width:991.98px){
      /* WRITE YOUR CSS HERE */
   }
   /* ! Small devices (landscape phones, less than 768px) */
   @media (max-width:767.98px){
   /* WRITE YOUR CSS HERE */
   }
   /* ! Extra small devices (portrait phones, less than 576px) */
   @media (max-width:575.98px){ 
      /* WRITE YOUR CSS HERE */
   }


/**************************************************************************************************************************/
/********************************************* MAIN.HTML - ESTILOS PERSONALIZADOS ****************************************/
/**************************************************************************************************************************/

/* ===== VARIABLES GLOBALES ===== */
:root {
    --boka-header-width: 400px;
    --boka-gradient-1: linear-gradient(220.55deg, #A531DC 0%, #4300B1 100%);
    --boka-gradient-2: linear-gradient(220.55deg, #FFC328 0%, #E20000 100%);
    --boka-gradient-3: linear-gradient(220.55deg, #D0004B 0%, #88069D 100%);
    --boka-gradient-4: linear-gradient(220.55deg, #3793FF 0%, #0017E4 100%);
    --boka-gradient-5: linear-gradient(220.55deg, #FFD439 0%, #FF7A00 100%);
    --boka-gradient-6: linear-gradient(220.55deg, #00B960 0%, #00552C 100%);
}

body:not(.page-active) { overflow-x: hidden; }

/* ===== HEADER ===== */
#header { position: fixed; left: 0; top: 0; width: var(--boka-header-width); height: 100%; z-index: 99; box-shadow: 20px 0 20px rgba(0,0,0,0.1); }
.header-img-hold { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.header-img-hold img { width: 100%; height: auto; object-fit: contain; object-position: top; position: absolute; top: 0; }
.navbar-brand { position: absolute; left: 30px; top: 30px; z-index: 9; width: 110px; }
.navbar-brand img { width: 100%; height: auto; filter: brightness(1) contrast(1) saturate(1); }
.header-content { width: 100%; height: 100%; position: absolute; left: 0; top: 0; padding: 30px; color: var(--boka-white); background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0) 100%); display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; }
.header-content h1 { font-size: 40px; margin-bottom: 10px; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); }
.header-content h2 { font-size: 24px; margin-bottom: 20px; text-shadow: 1px 1px 2px rgba(0,0,0,0.3); }
.header-content ul { padding: 0; margin: 0; list-style: none; }
.header-content ul li a { color: var(--boka-white); font-size: 1.2rem; transition: var(--boka-custom-ease); display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: rgba(255,255,255,0.2); border-radius: 50%; }
.header-content ul li a.social-icon-btn { background: unset; width: 38px; height: 38px; }
.header-content ul li a:hover { opacity: 0.8; transform: translateY(-2px); background: rgba(255,255,255,0.3); }
.header-content ul li a.social-icon-btn:hover { opacity: 1; background: unset; }

/* ===== NAVBAR ===== */
.navbar-outer { width: calc(100% - var(--boka-header-width)); height: 100vh; position: fixed; top: 0; right: 0; z-index: 97; }
.navbar-v1-block { 
    width: 100%; 
    height: 100vh; 
    box-shadow: 20px 0 20px rgba(0,0,0,0.1); 
    overflow: hidden; 
    position: relative; 
    transition: var(--boka-custom-ease); 
    cursor: pointer;
    /* Vidrio Plomo / Ahumado */
    background: rgba(40, 40, 45, 0.4);
    backdrop-filter: blur(25px) saturate(180%);
    -webkit-backdrop-filter: blur(25px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    transform-style: preserve-3d;
}

/* Brillo en la superficie del vidrio */
.navbar-v1-block::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.05) 100%);
    z-index: 1;
    pointer-events: none;
}

.navbar-v1-block:hover {
    background: rgba(50, 50, 55, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.navbar-v1-block h2 { position: absolute; bottom: 0; right: -15%; color: #ffffff; font-size: 7vw; line-height: 1; margin: 0; z-index: 5; text-shadow: 0 4px 10px rgba(0,0,0,0.3); }
.navbar-v1-block h2 .arrow { display: inline-block; transform: scale(0); transition: var(--boka-custom-ease); }
.navbar-v1-block:not(.full):hover .arrow { transform: scale(1); }
.navbar-v1-block.full h2 { right: 0; }
.hero-heading { color: var(--boka-white); font-size: 4vw; line-height: 1.3; padding: 80px 20% 80px 60px; opacity: 0; visibility: hidden; position: absolute; left: 0; top: 0; z-index: 5; }
.full.navbar-v1-block .hero-heading { opacity: 1; visibility: visible; transition: var(--boka-custom-ease); }
.navbar-icon { position: absolute; left: 30px; bottom: 15px; width: 150px; transition: var(--boka-custom-ease); transform: translateX(-100px) rotate(-20deg); opacity: 0; filter: brightness(0) invert(1); z-index: 5; }
.navbar-v1-block:not(.full):hover .navbar-icon { transform: translateX(0) rotate(0deg); opacity: 1; transition-delay: 0.1s; }

/* Nav toggler mobile */
.nav-toggler { 
    display: none; position: fixed; 
    right: 20px; 
    right: calc(20px + env(safe-area-inset-right));
    top: 20px; 
    top: calc(20px + env(safe-area-inset-top));
    z-index: 999999; 
    background: rgba(255,140,0,0.95); 
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); 
    border: 1px solid rgba(255,180,60,0.6); border-radius: 50%; 
    width: 56px; height: 56px; cursor: pointer; 
    box-shadow: 0 4px 20px rgba(255,140,0,0.5); 
}
.nav-toggle-btn { width: 24px; height: 18px; position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: 0; }
.nav-toggle-btn span { display: block; width: 100%; height: 2.5px; background: #fff; border-radius: 2px; transition: all 0.35s cubic-bezier(0.23, 1, 0.32, 1); }
.nav-toggle-btn span:nth-child(2) { width: 70%; margin-left: auto; }
.nav-open .nav-toggle-btn span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-open .nav-toggle-btn span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-open .nav-toggle-btn span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ===== PRODUCTOS - EFECTO ANAMÓRFICO 3D ===== */
.combo-title { font-size: 28px; font-weight: bold; color: #ff0000; margin-bottom: 20px; text-align: center; }

/* Promociones - mismo tamaño que combos */
#promociones-dynamic-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 56px;
    max-width: 1800px;
    margin: 0 auto;
    padding: 50px 0;
}

#promociones-dynamic-container .col-lg-4,
#promociones-dynamic-container .col-md-6,
#promociones-dynamic-container .col-sm-6,
#promociones-dynamic-container .col-12 {
    margin-bottom: 0;
    width: 100%;
    max-width: 100%;
}

#promociones-dynamic-container .foto-slot {
    max-width: 588px;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 28px;
    margin: 0 auto;
}
.combo-fotos-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 56px; max-width: 1800px; margin: 0 auto; padding: 70px 0; perspective: 1500px; }

.foto-slot { 
    aspect-ratio: 1; 
    border-radius: 28px; 
    background: transparent;
    position: relative; 
    width: 100%; 
    max-width: 588px; /* Aumentado 40% desde 420px */
    margin: 0 auto; 
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.6s ease; 
    cursor: pointer; 
    transform-style: preserve-3d;
    /* NO usamos overflow: hidden para que el producto pueda "salir" */
    overflow: visible; 
    box-shadow: 
        0 14px 28px rgba(0,0,0,0.05),
        0 3px 7px rgba(0,0,0,0.02);
    border: 4px solid #ffffff;
}

.foto-slot:hover { 
    transform: translateY(-10px); /* El contenedor sube un poco para dar sensación de salto recto */
    box-shadow: 0 30px 60px rgba(0,0,0,0.15);
}

/* El producto que "sale" */
.combo-foto, .combo-slide { 
    width: 95%; /* Un poco más grande para llenar mejor el cuadro */
    height: 95%; 
    object-fit: contain; 
    background: transparent !important; 
    position: absolute;
    top: 50%; /* Centrado vertical */
    left: 50%; /* Centrado horizontal */
    z-index: 5;
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.6s ease, opacity 0.5s ease;
    transform: translate(-50%, -50%) translateZ(70px); /* Centrado perfecto + profundidad inicial aumentada 40% */
    /* Sombra suave y sutil para que el producto no se vea plano */
    filter: drop-shadow(0 14px 28px rgba(0,0,0,0.1));
}

.combo-slide {
    opacity: 0; /* Por defecto ocultas para el carrusel */
}

.combo-slide:first-child {
    opacity: 1; /* La primera visible */
}

.foto-slot:hover .combo-foto, .foto-slot:hover .combo-slide { 
    transform: translate(-50%, -50%) scale(1.2) translateZ(168px); /* Mantiene el centrado mientras salta - aumentado 40% */
    filter: drop-shadow(0 42px 56px rgba(0,0,0,0.3)); /* Sombra más fuerte al saltar */
}

/* Descripción adaptada para no cortarse pero mantenerse en su sitio */
.foto-descripcion { 
    position: absolute; 
    bottom: 5%; 
    left: 5%; 
    right: 5%; 
    background: rgba(214, 207, 207, 0.39); /* Fondo blanco muy transparente */
    backdrop-filter: blur(17px) saturate(180%); /* Efecto de desenfoque de vidrio */
    -webkit-backdrop-filter: blur(17px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.3); /* Borde de brillo para el vidrio */
    border-radius: 28px;
    color: #1a1a1a; /* Texto oscuro para contraste sobre vidrio claro */
    padding: 28px; 
    font-size: 20px; 
    text-align: center; 
    font-weight: 700;
    opacity: 0; 
    transform: translateY(28px) translateZ(42px); 
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); 
    z-index: 10;
    pointer-events: none;
    box-shadow: 0 11px 45px 0 rgba(31, 38, 135, 0.15);
}

.foto-descripcion .small {
    color: #00ffff;
    opacity: 1;
    white-space: pre-line;
    line-height: 1.6;
}

.foto-descripcion .fw-bold {
    color: #e20000; /* Precio en rojo para que resalte */
}

/* El overlay usa pointer-events:none para no bloquear el hover 3D; el botón debe recibir clics */
.foto-descripcion .add-to-cart-btn {
    pointer-events: auto;
    position: relative;
    z-index: 12;
    cursor: pointer;
}

.foto-slot:hover .foto-descripcion { 
    opacity: 1; 
    transform: translateY(0) translateZ(210px); /* Flota por encima de todo - aumentado 40% */
}

/* ===== PAGE SECTIONS ===== */
main { z-index: 98; color: var(--boka-body-color); background: var(--boka-body-bg); margin-top: 0; }
body:not(.page-active) main { visibility: visible; overflow: visible; height: auto; }

/* ===== FONDO ANIMADO CON PUNTOS + PARTICULAS ===== */
.page-section {
    position: relative;
    overflow: hidden;
}

/* Particulas canvas */
.section-canvas {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
}

/* Puntos de gradiente moviles */
.page-section::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: 
        radial-gradient(circle, rgba(255, 120, 180, 0.5) 1px, transparent 1px),
        radial-gradient(circle, rgba(255, 80, 150, 0.4) 1px, transparent 1px);
    background-size: 80px 80px, 120px 120px;
    background-position: 0 0, 40px 40px;
    animation: moveDots 25s linear infinite;
    opacity: 0.6;
    z-index: 1;
    pointer-events: none;
}

@keyframes moveDots {
    0%   { background-position: 0 0, 40px 40px; }
    100% { background-position: 300px 300px, 340px 340px; }
}

/* Asegurar que el contenido quede por encima del fondo */
.page-section .content-container {
    position: relative;
    z-index: 2;
}
.page-nav-link { min-height: 240px; box-shadow: 20px 0 20px rgba(0,0,0,0.1); position: relative; overflow: hidden; }
.page-nav-link h2 { color: var(--boka-white); font-size: 5vw; line-height: 1; margin-bottom: 0; position: absolute; bottom: -0.75vw; left: 20px; }
.page-nav-link h2 .arrow { display: inline-block; transform: scale(0); transition: var(--boka-custom-ease); position: absolute; left: 100%; bottom: -10%; }
.page-nav-link:hover .arrow { transform: scale(1); }
.page-nav-link:hover h2 { bottom: 0; }
.page-nav-icon { position: absolute; right: 20px; top: 20px; width: 120px; transition: var(--boka-custom-ease); filter: brightness(0) invert(1); }
.page-nav-link:nth-child(2) .page-nav-icon { left: 20px; right: auto; }
.page-nav-link:nth-child(2) h2 { left: auto; right: 20px; text-align: right; }
.page-nav-link:nth-child(2) h2 .arrow { left: auto; right: 100%; }

/* ===== PESTAÑAS HORIZONTALES DESKTOP ===== */
@media (min-width: 1200px) {
    .navbar-outer { width: 100% !important; height: auto !important; top: 0 !important; right: 0 !important; left: 0 !important; z-index: 200; perspective: 1000px; }
    .navbar-block-wrapper { flex-direction: row !important; height: 70px !important; width: 100% !important; transform-style: preserve-3d; }
    .navbar-v1-block {
        height: 70px !important;
        width: auto !important;
        flex: 1 1 0 !important;
        min-width: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        transition: background 0.45s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.45s ease, transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), backdrop-filter 0.45s ease !important;
        position: relative;
        overflow: visible !important;
        transform-style: preserve-3d;
        /* Vidrio claro: capa base casi transparente + desenfoque fuerte */
        background: linear-gradient(
            168deg,
            rgba(255, 255, 255, 0.38) 0%,
            rgba(255, 255, 255, 0.12) 38%,
            rgba(245, 248, 252, 0.06) 72%,
            rgba(224, 48, 48, 0.04) 100%
        ) !important;
        backdrop-filter: blur(40px) saturate(220%);
        -webkit-backdrop-filter: blur(40px) saturate(220%);
        border-right: 1px solid rgba(255, 255, 255, 0.22);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.65),
            inset 0 -1px 0 rgba(255, 255, 255, 0.06),
            0 1px 0 rgba(255, 255, 255, 0.04),
            0 5px 22px rgba(0, 0, 0, 0.2);
    }
    /* Brillo diagonal tipo cristal pulido */
    .navbar-v1-block::before {
        background: linear-gradient(
            118deg,
            rgba(255, 255, 255, 0.55) 0%,
            rgba(255, 255, 255, 0.12) 28%,
            rgba(255, 255, 255, 0) 48%,
            rgba(255, 255, 255, 0.08) 78%,
            rgba(255, 255, 255, 0.02) 100%
        );
    }
    /* Línea de refracción inferior */
    .navbar-v1-block::after {
        content: '';
        position: absolute;
        left: 10%;
        right: 10%;
        bottom: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
        pointer-events: none;
        z-index: 2;
        opacity: 0.85;
    }
    /* Texto con degradados de marca (misma paleta que page-nav-link / text-clip) */
    .navbar-v1-block h2 {
        writing-mode: horizontal-tb !important;
        transform: translateZ(0) !important;
        position: static !important;
        font-size: 1rem !important;
        white-space: nowrap !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        transition: transform 0.4s ease;
        z-index: 5;
        background-size: 100% 100%;
        background-position-x: 0%;
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent !important;
        -webkit-text-fill-color: transparent;
        filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
    }
    #nav-about.navbar-v1-block h2 { background-image: var(--boka-gradient-1); }
    #nav-services.navbar-v1-block h2 { background-image: var(--boka-gradient-2); }
    #nav-portfolio.navbar-v1-block h2 { background-image: var(--boka-gradient-3); }
    #nav-resume.navbar-v1-block h2 { background-image: var(--boka-gradient-4); }
    #nav-blog.navbar-v1-block h2 { background-image: var(--boka-gradient-5); }
    #nav-contact.navbar-v1-block h2 { background-image: var(--boka-gradient-6); }
    .navbar-v1-block h2 .arrow {
        -webkit-text-fill-color: transparent;
        color: transparent !important;
        -webkit-text-stroke: 1px rgba(255, 255, 255, 0.92);
    }
    .navbar-v1-block .hero-heading, .navbar-v1-block .navbar-icon, .navbar-v1-block .text-marquee-wrapper { display: none !important; }
    .navbar-v1-block.full {
        flex: 1.5 1 0 !important;
        background: linear-gradient(
            168deg,
            rgba(255, 255, 255, 0.48) 0%,
            rgba(255, 255, 255, 0.18) 40%,
            rgba(248, 252, 255, 0.1) 100%
        ) !important;
        backdrop-filter: blur(48px) saturate(240%);
        -webkit-backdrop-filter: blur(48px) saturate(240%);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.85),
            inset 0 -1px 0 rgba(255, 255, 255, 0.08),
            0 8px 32px rgba(0, 0, 0, 0.2);
    }
    .navbar-v1-block.full h2 { font-weight: 900 !important; text-decoration: underline !important; text-decoration-color: rgba(255, 255, 255, 0.75) !important; text-underline-offset: 4px !important; transform: translateZ(20px) !important; }
    .navbar-v1-block:hover {
        flex: 1.2 1 0 !important;
        z-index: 10;
        transform: translateZ(15px);
        background: linear-gradient(
            168deg,
            rgba(255, 255, 255, 0.52) 0%,
            rgba(255, 255, 255, 0.2) 42%,
            rgba(250, 252, 255, 0.1) 100%
        ) !important;
        backdrop-filter: blur(44px) saturate(230%);
        -webkit-backdrop-filter: blur(44px) saturate(230%);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.9),
            inset 0 -1px 0 rgba(255, 255, 255, 0.1),
            0 20px 44px rgba(0, 0, 0, 0.2),
            0 8px 24px rgba(0, 0, 0, 0.2);
    }
    .navbar-v1-block:hover::before {
        background: linear-gradient(
            118deg,
            rgba(255, 255, 255, 0.7) 0%,
            rgba(255, 255, 255, 0.22) 32%,
            rgba(255, 255, 255, 0.05) 55%,
            rgba(255, 255, 255, 0.14) 100%
        );
    }
    .navbar-v1-block:hover::after { opacity: 1; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.65), transparent); }
    .navbar-v1-block:hover h2 { transform: scale(1.1) translateZ(10px); }
    #main { padding-top: 70px !important; }
    body:not(.page-active) #main { visibility: visible !important; overflow: visible !important; height: auto !important; }
    main { margin-top: 0 !important; }
    #main .page-section { display: block !important; height: auto !important; min-height: auto !important; }
    #main .page-nav-link { display: none !important; }
    .content-container { padding-top: 40px !important; padding-bottom: 60px !important; }
    #header { z-index: 100 !important; }
    .header-img-hold img { object-fit: contain !important; object-position: center bottom !important; }
}

/* ===== RESPONSIVE TABLETS/MÓVIL ===== */
@media (max-width: 1399.98px) {
    :root { --boka-header-width: 350px; }
    .header-content h1 { font-size: 35px; }
    .page-heading { font-size: 50px; }
}
@media (max-width: 1199.98px) {
    :root { --boka-header-width: 0px; }
    body { padding-left: 0; }
    #header { width: 100%; height: var(--boka-vh); position: relative; top: auto; left: auto; }
    .header-content { 
        position: relative; 
        padding: 100px 20px 40px; 
        padding-top: calc(100px + env(safe-area-inset-top));
        padding-left: calc(20px + env(safe-area-inset-left));
        padding-right: calc(20px + env(safe-area-inset-right));
        text-align: center; align-items: center; justify-content: flex-end; 
        background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 60%, rgba(0,0,0,0.2) 100%); 
    }
    .header-content ul { justify-content: center; margin-top: 20px; }
    .navbar-brand { top: 20px; left: 20px; }
    .navbar-outer { width: 100%; height: 100%; position: fixed; transform: translateX(100%); transition: transform 0.4s ease; top: 0; left: 0; z-index: 999999; background: rgba(30,30,40,0.30); backdrop-filter: blur(32px) saturate(180%); -webkit-backdrop-filter: blur(32px) saturate(180%); border-left: 1px solid rgba(255,255,255,0.2); }
    .navbar-v1-block { height: auto; min-height: 100px; background: transparent; box-shadow: none; border: none; }
    .navbar-v1-block::before { backdrop-filter: none; -webkit-backdrop-filter: none; background: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 100%); }
    #nav-about    h2 { background-image: var(--boka-gradient-1); }
    #nav-services h2 { background-image: var(--boka-gradient-2); }
    #nav-portfolio h2 { background-image: var(--boka-gradient-3); }
    #nav-resume   h2 { background-image: var(--boka-gradient-4); }
    #nav-blog     h2 { background-image: var(--boka-gradient-5); }
    #nav-contact  h2 { background-image: var(--boka-gradient-6); }
    .navbar-v1-block h2 .arrow { transform: scale(1); order: -1; margin-right: 10px; }
    .navbar-icon { width: 38px !important; transform: none !important; opacity: 0.9 !important; right: 12px !important; left: auto !important; top: 8px !important; bottom: auto !important; z-index: 5; }
    .navbar-v1-block h2 { font-size: clamp(16px, 5vw, 24px) !important; top: 8px !important; bottom: auto !important; transform: none !important; right: 50px !important; left: 30px !important; text-align: left !important; z-index: 5; text-shadow: 0 2px 10px rgba(0,0,0,0.4); background-clip: text; -webkit-background-clip: text; color: transparent !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
    .hero-heading { font-size: clamp(12px, 3.5vw, 16px); padding: 4px 16px 10px 16px; position: absolute; bottom: 6px; top: auto; left: 0; right: 0; opacity: 1; visibility: visible; z-index: 5; line-height: 1.2; white-space: normal; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; color: #fff !important; }
    #nav-services .hero-heading { font-size: clamp(10px, 2.8vw, 17px); }
    .nav-toggler { display: flex; align-items: center; justify-content: center; z-index: 1000000; }
    main { margin-top: 0; }
    .page-nav-link { min-height: 120px; }
    .page-nav-link h2 { font-size: 32px; bottom: -5px; }
    .page-nav-icon { width: 60px; top: 15px; }
    .combo-fotos-grid { grid-template-columns: repeat(auto-fit, minmax(392px, 1fr)); }
}
@media (max-width:767.98px){
  h1, .h1{font-size:40px;}
  h2, .h2{font-size:32px;}
  h3, .h3{font-size:24px;}
  h4, .h4{font-size:22px;}
  h5, .h5{font-size:20px;}
  h6, .h6{font-size:18px;}
  /* Productos más grandes en tablets pequeños */
  .combo-fotos-grid { 
      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); 
      gap: 35px; 
      padding: 40px 20px; 
  }
  .foto-slot { 
      max-width: 100%; 
      border-radius: 24px;
  }
  .foto-descripcion {
      font-size: 18px;
      padding: 24px;
  }
  /* Promociones en tablets */
  #promociones-dynamic-container {
      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
      gap: 35px;
      padding: 40px 20px;
  }
}
@media (max-width:575.98px){ 
    /* Productos más grandes en móviles */
    .combo-fotos-grid { 
        grid-template-columns: 1fr; 
        gap: 30px; 
        padding: 30px 15px; 
    }
    .foto-slot { 
        max-width: 100%; 
        border-radius: 20px;
    }
    .foto-descripcion {
        font-size: 16px;
        padding: 20px;
        border-radius: 20px;
    }
    /* Promociones en móvil - una columna */
    #promociones-dynamic-container {
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 30px 15px;
    }
    #promociones-dynamic-container .col-12 {
        padding: 0;
    }
    #promociones-dynamic-container .foto-slot {
        max-width: 100% !important;
    }
   }

body.dark-theme .header-content {
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.6) 50%, rgba(0,0,0,0.2) 100%);
}
body.dark-theme main,
body.dark-theme .page-section {
    background: rgba(28,29,37,0.75);
    color: var(--boka-white);
}
body.dark-theme .cart-summary,
body.dark-theme .bg-white {
    background: #2a2b35 !important;
    color: var(--boka-white) !important;
}

/* ===== DARK MODE FIXES ===== */

/* Base light mode para contact-info-box */
.contact-info-box {
    background-image: linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45)), url('https://res.cloudinary.com/dweog8syn/image/upload/v1777423105/From_KlickPin_CF_Upgrade_this_guide_to_cozy_engagement_party_ideas_to_make_your_next_project_easier_and_prettier_using_simple_ideas_you_can_actually_pull_off_and_-_Pin-1058838562397153030_cw1pxp.jpg');
    background-size: cover;
    background-position: center;
    color: #fff !important;
}

/* Textos generales */
body.dark-theme h1, body.dark-theme h2, body.dark-theme h3,
body.dark-theme h4, body.dark-theme h5, body.dark-theme h6,
body.dark-theme p, body.dark-theme li, body.dark-theme span:not(.arrow):not(.badge) {
    color: var(--boka-white);
}
body.dark-theme .text-dark { color: var(--boka-white) !important; }
body.dark-theme .opacity-75 { color: rgba(255,255,255,0.75); }

/* Blog / Videos */
body.dark-theme .blog-box {
    background: #1e1f2a;
    color: var(--boka-white);
}
body.dark-theme .blog-title,
body.dark-theme .blog-box-content p,
body.dark-theme .blog-box-inner p,
body.dark-theme .blog-box-inner h4 {
    color: var(--boka-white) !important;
}

/* Productos */
body.dark-theme .foto-slot {
    background: #2a2b38;
    border-color: rgba(255,255,255,0.15);
}
body.dark-theme .foto-descripcion {
    background: rgba(20,21,30,0.96);
    color: var(--boka-white);
}
body.dark-theme .foto-descripcion .small {
    color: #ffaa33;
}
body.dark-theme .combo-title { color: #ff6b6b; }

/* Testimonios */
body.dark-theme .foto-testimonio {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.15);
}
body.dark-theme .testimonial-box {
    background: rgba(255,255,255,0.06);
    color: var(--boka-white);
}

/* Contacto */
body.dark-theme .contact-info-box {
    background: rgba(30,31,42,0.95) !important;
    color: var(--boka-white) !important;
}
body.dark-theme .contact-info-box h4,
body.dark-theme .contact-info-box p,
body.dark-theme .contact-info-box strong {
    color: var(--boka-white) !important;
}
body.dark-theme .quick-contact h6,
body.dark-theme .quick-contact p,
body.dark-theme .quick-contact a { color: var(--boka-white); }

/* Formulario */
body.dark-theme .form-control {
    background: #2a2b38;
    color: var(--boka-white);
    border-color: rgba(255,255,255,0.2);
}
body.dark-theme .form-control::placeholder { color: rgba(255,255,255,0.4); }
body.dark-theme .form-label,
body.dark-theme .form-check-label { color: var(--boka-white); }
body.dark-theme label.error {
    background: rgba(255,0,0,0.15);
    color: #ff6b6b;
    border-color: #ff6b6b;
}
body.dark-theme #success {
    background: rgba(1,150,32,0.15);
    color: #4caf50;
    border-color: #4caf50;
}
body.dark-theme #success h4, body.dark-theme #success p { color: #4caf50; }
body.dark-theme #error {
    background: rgba(255,0,0,0.15);
    color: #ff6b6b;
    border-color: #ff6b6b;
}
body.dark-theme #error h4, body.dark-theme #error p { color: #ff6b6b; }

/* Historial / Experience */
body.dark-theme .experience-box { color: var(--boka-white); }
body.dark-theme .experience-box h5,
body.dark-theme .experience-box p { color: var(--boka-white); }

/* Filtros docena */
body.dark-theme .docena-filter-btn {
    background: #2a2b38;
    color: var(--boka-white);
    border-color: rgba(255,255,255,0.2);
}
body.dark-theme .docena-filter-btn.active {
    background: var(--boka-theme-color-1);
    color: #000;
}

/* Footer */
body.dark-theme footer,
body.dark-theme footer p,
body.dark-theme footer a { color: var(--boka-white); }

/* Marquee */
body.dark-theme .text-marquee-list span { color: var(--boka-white); }

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ===== GALERÍA DE CALCETINES ===== */
.sock-gallery { width: 100%; }

.sock-gallery-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.sock-item {
    background: transparent;
    border-radius: 20px;
    padding: 16px;
    aspect-ratio: 3/4;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.35s ease, border-color 0.3s;
    position: relative;
}

.sock-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transition: opacity 0.25s ease, transform 0.35s cubic-bezier(0.34,1.56,0.64,1);
}

.sock-item.flipping img { opacity: 0; transform: scale(0.8) rotate(-8deg); }

.sock-item:hover {
    transform: translateY(-10px) scale(1.04);
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
    border-color: rgba(0,255,200,0.5);
}

body.dark-theme .sock-item { background: #2a2b38; }

@media (max-width: 767px) {
    .sock-gallery-row { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}


/**************************************************************************************************************************/
/************************************** ESTILOS MIGRADOS DESDE main.html **************************************************/
/**************************************************************************************************************************/

/* ===== CURSOR PERSONALIZADO ===== */

#sockCursor {
    position: fixed; top: 0; left: 0; width: 36px; height: 36px; border-radius: 50%;
    background: rgba(255,255,255,0.15); backdrop-filter: blur(4px);
    border: 2px solid rgba(0,255,200,0.7);
    box-shadow: 0 0 12px rgba(0,255,200,0.4), inset 0 0 8px rgba(0,255,200,0.1);
    display: flex; align-items: center; justify-content: center;
    pointer-events: none; z-index: 99999;
    transform: translate(-50%,-50%);
    transition: transform 0.12s cubic-bezier(0.23,1,0.32,1), box-shadow 0.15s ease, background 0.15s ease;
    will-change: left, top; opacity: 0;
}

#sockCursor img { width: 23px; height: 23px; object-fit: contain; pointer-events: none; user-select: none; }

#sockCursor.hover {
    transform: translate(-50%,-50%) scale(1.4);
    background: rgba(255,69,0,0.2);
    box-shadow: 0 0 24px rgba(0,255,200,0.7), inset 0 0 12px rgba(0,255,200,0.2);
}

#sockCursor.clicking { transform: translate(-50%,-50%) scale(0.85); }

@media (pointer: coarse), (max-width: 991px) { #sockCursor { display: none !important; } }

/* ===== SKIP NAV ===== */
.skip-nav {
    position: fixed; top: -100%; left: 50%; transform: translateX(-50%);
    background: #00ffc8; color: #000; padding: 12px 24px;
    border-radius: 0 0 8px 8px; z-index: 999999; font-weight: 700; font-size: 14px;
    transition: top 0.3s ease;
}
.skip-nav:focus { top: 0; outline: 3px solid #000; }

/* ===== TOASTS ===== */
#toast-container {
    position: fixed; bottom: 100px; right: 24px; z-index: 999997;
    display: flex; flex-direction: column-reverse; gap: 10px; pointer-events: none;
}

.toast-notification {
    pointer-events: auto; display: flex; align-items: center; gap: 12px;
    padding: 14px 20px; border-radius: 14px;
    background: rgba(20,20,25,0.92); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.12); color: #fff; font-size: 14px; font-weight: 500;
    box-shadow: 0 12px 40px rgba(0,0,0,0.35);
    transform: translateX(120%); opacity: 0;
    transition: all 0.45s cubic-bezier(0.34,1.56,0.64,1);
    max-width: 360px; min-width: 260px; font-family: var(--boka-primary-font);
}

.toast-notification.show { transform: translateX(0); opacity: 1; }
.toast-notification.hide { transform: translateX(120%); opacity: 0; transition-timing-function: ease-in; }
.toast-notification.success { border-left: 4px solid #00e676; }
.toast-notification.error { border-left: 4px solid #ff5252; }
.toast-notification.info { border-left: 4px solid #00e5ff; }
.toast-notification.warning { border-left: 4px solid #ffd740; }
.toast-icon { font-size: 20px; flex-shrink: 0; }
.toast-notification.success .toast-icon { color: #00e676; }
.toast-notification.error .toast-icon { color: #ff5252; }
.toast-notification.info .toast-icon { color: #00e5ff; }
.toast-notification.warning .toast-icon { color: #ffd740; }
.toast-close {
    margin-left: auto; background: none; border: none; color: rgba(255,255,255,0.5);
    font-size: 18px; cursor: pointer; padding: 4px; flex-shrink: 0; transition: color 0.2s;
}
.toast-close:hover { color: #fff; }

/* ===== WHATSAPP FLOTANTE ===== */
.whatsapp-float {
    position: fixed; 
    bottom: 24px; 
    bottom: calc(24px + env(safe-area-inset-bottom));
    right: 24px;
    right: calc(24px + env(safe-area-inset-right));
    width: 56px; height: 56px; border-radius: 50%;
    background: #25D366; color: #fff;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 16px rgba(37,211,102,0.4);
    z-index: 999995; font-size: 28px;
    transition: all 0.35s cubic-bezier(0.34,1.56,0.64,1);
    text-decoration: none;
}

.whatsapp-float:hover { transform: scale(1.1) rotate(-5deg); box-shadow: 0 8px 28px rgba(37,211,102,0.5); color: #fff; }

.whatsapp-float::before {
    content: ''; position: absolute; inset: -4px; border-radius: 50%;
    border: 2px solid rgba(37,211,102,0.35);
    animation: waPulse 2.5s ease-out infinite;
}

@keyframes waPulse {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(1.4); opacity: 0; }
}

@media (max-width: 575px) {
    .whatsapp-float { 
        width: 48px; height: 48px; font-size: 24px; 
        bottom: 16px; 
        bottom: calc(16px + env(safe-area-inset-bottom));
        right: 16px;
        right: calc(16px + env(safe-area-inset-right));
    }
    #toast-container { 
        bottom: 80px; 
        bottom: calc(80px + env(safe-area-inset-bottom));
        right: 12px; left: 12px; 
    }
    .toast-notification { max-width: 100%; min-width: 0; }
}

/* ===== SKELETONS ===== */
.skeleton {
    background: linear-gradient(90deg, rgba(128,128,128,0.1) 25%, rgba(128,128,128,0.2) 50%, rgba(128,128,128,0.1) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
    border-radius: 12px;
}
.skeleton-card { aspect-ratio: 1; border-radius: 28px; border: 4px solid rgba(0,0,0,0.08); }
.skeleton-text { height: 20px; margin-bottom: 12px; }
.skeleton-text.short { width: 60%; }
.skeleton-box { height: 200px; border-radius: 20px; }

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ===== SCROLL REVEAL ===== */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.7s cubic-bezier(0.23,1,0.32,1), transform 0.7s cubic-bezier(0.23,1,0.32,1);
}
.reveal-on-scroll.revealed { opacity: 1; transform: translateY(0); }
.reveal-on-scroll.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-on-scroll.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-on-scroll.reveal-delay-3 { transition-delay: 0.3s; }
.stat-number { font-variant-numeric: tabular-nums; }

/* ===== DARK MODE — COMPONENTES ADICIONALES ===== */
body.dark-theme .foto-slot { background: #2a2b38; border-color: rgba(255,255,255,0.15); }
body.dark-theme .foto-descripcion { background: rgba(30,30,50,0.65); color: #e0e0e0; border-color: rgba(255,255,255,0.15); }
body.dark-theme .foto-descripcion .small { color: #ffaa33; }
body.dark-theme .blog-box { background: rgba(30,30,45,0.85) !important; border-color: rgba(0,255,255,0.3) !important; }
body.dark-theme .blog-box-inner h4, body.dark-theme .blog-box-inner p { color: #e0e0e0; }
body.dark-theme .form-control { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.15); color: #fff; }
body.dark-theme .form-label { color: rgba(255,255,255,0.7); }
body.dark-theme .quick-contact { color: #ccc; }
body.dark-theme .combo-title { color: #ff4444; }
body.dark-theme .testimonial-box { background: rgba(255,255,255,0.06) !important; border-color: rgba(255,255,255,0.1) !important; }
body.dark-theme .testimonial-box h4, body.dark-theme .testimonial-box blockquote { color: #e0e0e0; }
body.dark-theme .contact-info-box { background: rgba(30,30,45,0.92) !important; color: #e0e0e0; }
body.dark-theme .experience-box:hover { background: rgba(255,255,255,0.04); }
body.dark-theme .docena-filter-btn { border-color: rgba(255,255,255,0.2); color: #fff; }
body.dark-theme .docena-filter-btn:hover,
body.dark-theme .docena-filter-btn.active { background: #00ffc8; color: #000; }

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
    .section-canvas { display: none !important; }
    .page-section::before { animation: none !important; }
    .reveal-on-scroll { opacity: 1; transform: none; transition: none; }
    .whatsapp-float::before { animation: none; }
}

/* ===== FOCUS VISIBLE ===== */
*:focus-visible { outline: 3px solid #00ffc8; outline-offset: 3px; border-radius: 4px; }

/* ===== FILTROS DOCENA ===== */
.docena-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; justify-content: center; }
.docena-filter-btn {
    padding: 8px 20px; border-radius: 50px; border: 2px solid rgba(0,0,0,0.15);
    background: transparent; font-weight: 600; font-family: var(--boka-primary-font);
    transition: all 0.3s ease; font-size: 14px;
}
.docena-filter-btn:hover, .docena-filter-btn.active { background: #00ffc8; border-color: #00ffc8; color: #000; }

/* ===== PRODUCTO HOVER — FIX: SIEMPRE SUBE SIN translateZ ERRÁTICO ===== */
/* Se elimina translateZ del producto y se usa solo translateY negativo + scale,
   garantizando que el elemento suba visualmente sin importar su posición en
   pantalla ni el origen de perspectiva. */
.foto-slot {
    aspect-ratio: 1;
    border-radius: 28px;
    background: transparent;
    position: relative;
    width: 100%;
    max-width: 588px;
    margin: 0 auto;
    transition: transform 0.55s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.55s ease;
    cursor: pointer;
    overflow: visible;
    box-shadow: 0 14px 28px rgba(0,0,0,0.05), 0 3px 7px rgba(0,0,0,0.02);
    border: 4px solid #ffffff;
    transform-style: preserve-3d;
    perspective: 1200px;
}

.foto-slot:hover {
    transform: translateY(-18px);
    box-shadow: 0 36px 70px rgba(0,0,0,0.18);
}

.combo-foto, .combo-slide {
    width: 95%; height: 95%; object-fit: contain;
    background: transparent !important;
    position: absolute; top: 50%; left: 50%;
    z-index: 5;
    transition: transform 0.55s cubic-bezier(0.34,1.56,0.64,1), filter 0.55s ease, opacity 0.4s ease;
    transform: translate(-50%, -50%);
    filter: drop-shadow(0 14px 28px rgba(0,0,0,0.1));
}

.combo-slide { opacity: 0; }
.combo-slide:first-child { opacity: 1; }

.foto-slot:hover .combo-foto,
.foto-slot:hover .combo-slide {
    transform: translate(-50%, -55%) scale(1.18);
    filter: drop-shadow(0 35px 50px rgba(0,0,0,0.3));
}

.foto-descripcion {
    position: absolute; bottom: 5%; left: 5%; right: 5%;
    background: rgba(214,207,207,0.39);
    backdrop-filter: blur(17px) saturate(180%); -webkit-backdrop-filter: blur(17px) saturate(180%);
    border: 1px solid rgba(255,255,255,0.3); border-radius: 28px;
    color: #1a1a1a; padding: 28px; font-size: 20px;
    text-align: center; font-weight: 700;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s cubic-bezier(0.34,1.56,0.64,1);
    z-index: 10; pointer-events: none;
    box-shadow: 0 11px 45px 0 rgba(31,38,135,0.15);
}

.foto-descripcion .small { color: #00ffff; opacity: 1; white-space: pre-line; line-height: 1.6; }
.foto-descripcion .fw-bold { color: #e20000; }
.foto-descripcion .add-to-cart-btn { pointer-events: auto; position: relative; z-index: 12; cursor: pointer; }

.foto-slot:hover .foto-descripcion {
    opacity: 1;
    transform: translateY(0);
}

/* ===== CARRITO BADGE ===== */
#cart-counter {
    font-size: 0.65rem !important; min-width: 18px; height: 18px;
    display: flex !important; align-items: center; justify-content: center;
    transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
#cart-counter.bump { transform: scale(1.5); }

/* ===== BLOG VIDEO MOBILE FIX ===== */

/* Ocultar el botón play móvil en desktop */
@media (min-width: 992px) {
    .mob-video-tap { display: none !important; }
}

@media (max-width: 991px) {
    .blog-img-wrapper:hover .blog-box-img {
        position: relative !important; top: auto !important; left: auto !important; right: auto !important;
        transform: none !important; width: 100% !important; height: auto !important;
        max-height: none !important; margin-right: 0 !important; box-shadow: none !important;
        border-radius: 12px !important; overflow: hidden !important;
    }
    .blog-img-wrapper .blog-box-img {
        overflow: hidden !important;
    }
    .blog-img-wrapper .blog-box-img iframe {
        max-height: none !important;
        min-height: 400px !important;
    }
}

/* Tarjeta icon - forzar rectangular */
img.tarjeta-icon {
    border-radius: 4px !important;
    width: 48px !important;
    height: 30px !important;
    object-fit: cover !important;
    clip-path: none !important;
}

/* ===== BOTÓN PACK 3D ===== */
.btn-pack-3d {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    outline: none;
    font-family: var(--boka-primary-font);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.5px;
    transform-style: preserve-3d;
    transition: transform 0.15s cubic-bezier(0.34,1.56,0.64,1), filter 0.15s ease;
}

.btn-pack-3d-top {
    display: flex;
    align-items: center;
    padding: 14px 28px;
    border-radius: 12px;
    background: linear-gradient(135deg, #00d4ff 0%, #0099cc 100%);
    color: #fff;
    transform: translateY(0);
    transition: transform 0.15s cubic-bezier(0.34,1.56,0.64,1);
    position: relative;
    z-index: 1;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.btn-pack-3d::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 4px;
    right: 4px;
    height: 100%;
    background: #005580;
    border-radius: 12px;
    z-index: 0;
}

.btn-pack-3d:hover {
    filter: drop-shadow(0 4px 0 #0077aa);
    transform: translateY(4px);
}

.btn-pack-3d:hover .btn-pack-3d-top {
    transform: translateY(0);
}

.btn-pack-3d:active {
    filter: drop-shadow(0 1px 0 #0077aa);
    transform: translateY(7px);
}

.btn-pack-3d:active .btn-pack-3d-top {
    transform: translateY(0);
}

/* ===== ICONOS REDES SOCIALES ===== */
.social-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    color: #fff !important;
    font-size: 16px;
    transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s ease;
}
.social-icon-btn:hover {
    transform: scale(1.15) translateY(-2px);
    color: #fff !important;
}
.social-fb { background: #1877F2 !important; box-shadow: 0 4px 12px rgba(24,119,242,0.4); }
.social-fb:hover { box-shadow: 0 6px 20px rgba(24,119,242,0.6); background: #1877F2 !important; }
.social-ig { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%) !important; box-shadow: 0 4px 12px rgba(214,36,159,0.4); }
.social-ig:hover { box-shadow: 0 6px 20px rgba(214,36,159,0.6); }
.social-tt { background: #000 !important; box-shadow: 0 4px 12px rgba(0,0,0,0.4); }
.social-tt:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.6); background: #000 !important; }
.social-x { background: #000 !important; box-shadow: 0 4px 12px rgba(0,0,0,0.4); }
.social-x:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.6); background: #000 !important; }
.social-yt { background: #FF0000 !important; box-shadow: 0 4px 12px rgba(255,0,0,0.4); }
.social-yt:hover { box-shadow: 0 6px 20px rgba(255,0,0,0.6); background: #FF0000 !important; }

/* ===== MARCO GIRATORIO EN PRODUCTOS ===== */
.foto-slot {
    --border-angle: 0turn;
}

@property --border-angle {
    syntax: '<angle>';
    inherits: true;
    initial-value: 0turn;
}

@keyframes borderRotate {
    to { --border-angle: 1turn; }
}

.foto-slot::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50px;
    width: 50%;
    height: 100%;
    border-radius: 8px;
    transform: skewX(15deg);
    transition: 0.5s;
    z-index: 0;
    opacity: 0;
}

.foto-slot::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50px;
    width: 50%;
    height: 100%;
    border-radius: 8px;
    transform: skewX(15deg);
    transition: 0.5s;
    filter: blur(30px);
    z-index: 0;
    opacity: 0;
}

.foto-slot:nth-child(3n+1)::before, .foto-slot:nth-child(3n+1)::after { background: linear-gradient(315deg, #ffbc00, #ff0058); }
.foto-slot:nth-child(3n+2)::before, .foto-slot:nth-child(3n+2)::after { background: linear-gradient(315deg, #03a9f4, #ff0058); }
.foto-slot:nth-child(3n+3)::before, .foto-slot:nth-child(3n+3)::after { background: linear-gradient(315deg, #4dff03, #00d0ff); }

.foto-slot:hover::before,
.foto-slot:hover::after {
    opacity: 1;
    transform: skewX(0deg);
    left: 20px;
    width: calc(100% - 40px);
}

/* ===== BACKGROUND SECCIONES ===== */
#about-section,
#services-section,
#portfolio-section,
#resume-section {
    background-image: url('https://res.cloudinary.com/dweog8syn/image/upload/v1777462616/55_wtv4be.png');
    background-size: 100%;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
}

#about-section,
#services-section,
#portfolio-section,
#resume-section {
    color: #fff !important;
}

#about-section p,
#about-section h1, #about-section h2, #about-section h3, #about-section h4, #about-section h5, #about-section h6,
#services-section p,
#services-section h1, #services-section h2, #services-section h3, #services-section h4, #services-section h5, #services-section h6,
#portfolio-section p,
#portfolio-section h1, #portfolio-section h2, #portfolio-section h3, #portfolio-section h4, #portfolio-section h5, #portfolio-section h6,
#resume-section p,
#resume-section h1, #resume-section h2, #resume-section h3, #resume-section h4, #resume-section h5, #resume-section h6 {
    color: #fff !important;
}


/* ===== BACKGROUND CONTACTO ===== */
#contact-section {
    background-image: linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45)), url('https://res.cloudinary.com/dweog8syn/image/upload/v1777432061/From_KlickPin_CF_Explore_Must-save_entryway_makeover_ideas_for_your_next_inspiration_board_designed_for_people_who_want_results_that_look_intentional_-_Pin-11259067813747823_ux1x1h.jpg');
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    color: #fff !important;
}

#contact-section p,
#contact-section h1, #contact-section h2, #contact-section h3,
#contact-section h4, #contact-section h5, #contact-section h6,
#contact-section label {
    color: #fff !important;
    text-shadow: 0 2px 6px rgba(0,0,0,0.6);
}

@supports (-webkit-touch-callout: none) {
    #contact-section { background-attachment: scroll; }
}

/* ===== CONTACT INFO BOX - TEXTO BLANCO ===== */
.contact-info-box h4,
.contact-info-box p,
.contact-info-box strong {
    color: #fff !important;
    text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}

/* ===== FORMULARIO CONTACTO - TEXTO BLANCO ===== */
#contact-section .form-control {
    color: #fff !important;
    background: rgba(255,255,255,0.1) !important;
    border-color: rgba(255,255,255,0.3) !important;
}

#contact-section .form-control::placeholder {
    color: rgba(255,255,255,0.5) !important;
}

#contact-section .form-control:focus {
    color: #fff !important;
    background: rgba(255,255,255,0.15) !important;
    border-color: rgba(255,255,255,0.6) !important;
    box-shadow: 0 0 0 0.2rem rgba(255,255,255,0.15) !important;
}

#contact-section .form-check-label {
    color: #fff !important;
}

/* ===== BOTÓN ENVIAR CONTACTO ===== */
#contact-section #messageForm button[type="submit"] {
    color: #ff4500 !important;
}

/* ===== CHECKBOX TÉRMINOS - TOMATE ===== */
#contact-section #agree {
    accent-color: #ff4500;
    width: 18px;
    height: 18px;
    cursor: pointer;
}

/* ===== EFECTO SUBRAYADO HOVER EN TÍTULOS ===== */
h1, h2, h3, h4, h5, h6 {
    position: relative;
    display: inline-block;
}

h1::after, h2::after, h3::after, h4::after, h5::after, h6::after,
h1::before, h2::before, h3::before, h4::before, h5::before, h6::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    background: linear-gradient(to right, #ff0000, #00ffff);
    left: 0;
    transform: scaleX(0);
    transition: transform 0.4s ease-out;
}

h1::after, h2::after, h3::after, h4::after, h5::after, h6::after {
    bottom: -5px;
    transform-origin: right;
}

h1::before, h2::before, h3::before, h4::before, h5::before, h6::before {
    top: -5px;
    transform-origin: left;
}

h1:hover::after, h2:hover::after, h3:hover::after, h4:hover::after, h5:hover::after, h6:hover::after,
h1:hover::before, h2:hover::before, h3:hover::before, h4:hover::before, h5:hover::before, h6:hover::before {
    transform: scaleX(1);
}

/* ===== SPLIT IMAGE EFFECT - ABOUT ===== */
.split-image-container {
    position: relative;
    width: 100%;
    max-width: 480px;
    height: 400px;
    margin: 0 auto;
    overflow: visible;
}

.quadrant {
    position: absolute;
    width: 50%;
    height: 50%;
    background-image: url('../images/about-img.jpg');
    background-size: 200% 200%;
    transition: transform 0.4s ease;
}

.quadrant-1 { top: 0; left: 0; background-position: 0% 0%; border-radius: 16px 0 0 0; }
.quadrant-2 { top: 0; right: 0; background-position: 100% 0%; border-radius: 0 16px 0 0; }
.quadrant-3 { bottom: 0; left: 0; background-position: 0% 100%; border-radius: 0 0 0 16px; }
.quadrant-4 { bottom: 0; right: 0; background-position: 100% 100%; border-radius: 0 0 16px 0; }

.split-image-container:hover .quadrant-1 { transform: translate(-8px, -8px); }
.split-image-container:hover .quadrant-2 { transform: translate(8px, -8px); }
.split-image-container:hover .quadrant-3 { transform: translate(-8px, 8px); }
.split-image-container:hover .quadrant-4 { transform: translate(8px, 8px); }

/* ===== EFECTO OUTLINE EN IMÁGENES DE PRODUCTOS ===== */
.foto-slot .combo-foto {
    --b: 3px;
    --g: 8px;
    --c: #00ffff;
    outline: calc(var(--s, 100%) / 2) solid #fff9;
    outline-offset: calc(var(--s, 100%) / -2);
    cursor: pointer;
    transition: outline 0.3s, outline-offset 0.3s;
}

.foto-slot:hover .combo-foto {
    outline: var(--b) solid var(--c);
    outline-offset: var(--g);
}

/* ===== GLASSMORPHISM - TARJETA CRÉDITO ===== */
.tarjeta-glass-box {
    position: relative;
    width: 280px;
    height: 180px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.5s;
}

.tarjeta-glass-box::before {
    content: '';
    position: absolute;
    top: 0; left: 50px;
    width: 50%; height: 100%;
    background: linear-gradient(315deg, #ffbc00, #ff0058);
    border-radius: 8px;
    transform: skewX(15deg);
    transition: 0.5s;
    opacity: 0;
    z-index: 0;
}

.tarjeta-glass-box::after {
    content: '';
    position: absolute;
    top: 0; left: 50px;
    width: 50%; height: 100%;
    background: linear-gradient(315deg, #ffbc00, #ff0058);
    border-radius: 8px;
    transform: skewX(15deg);
    transition: 0.5s;
    filter: blur(30px);
    opacity: 0;
    z-index: 0;
}

.tarjeta-glass-box:hover::before,
.tarjeta-glass-box:hover::after {
    opacity: 1;
    transform: skewX(0deg);
    left: 20px;
    width: calc(100% - 40px);
}

.tarjeta-glass-span {
    display: block;
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 5;
    pointer-events: none;
}

.tarjeta-glass-span::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 0; height: 0;
    border-radius: 8px;
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(10px);
    opacity: 0;
    transition: 0.1s;
    animation: animateBubble 2s ease-in-out infinite;
}

.tarjeta-glass-box:hover .tarjeta-glass-span::before {
    top: -40px; left: 40px;
    width: 80px; height: 80px;
    opacity: 1;
}

.tarjeta-glass-span::after {
    content: '';
    position: absolute;
    bottom: 0; right: 0;
    width: 0; height: 0;
    border-radius: 8px;
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(10px);
    opacity: 0;
    transition: 0.5s;
    animation: animateBubble 2s ease-in-out infinite;
    animation-delay: -1s;
}

.tarjeta-glass-box:hover .tarjeta-glass-span::after {
    bottom: -40px; right: 40px;
    width: 80px; height: 80px;
    opacity: 1;
}

.tarjeta-glass-content {
    position: relative;
    left: 0;
    padding: 16px 24px;
    background: rgba(255,255,255,0.05);
    backdrop-filter: blur(10px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    border-radius: 8px;
    z-index: 1;
    transition: 0.5s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tarjeta-glass-box:hover .tarjeta-glass-content {
    left: -20px;
}

/* ===== GLASSMORPHISM - GALERÍA CALCETINES ===== */
.sock-item {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.5s;
}

.sock-item::before {
    content: '';
    position: absolute;
    top: 0; left: 30px;
    width: 50%; height: 100%;
    border-radius: 8px;
    transform: skewX(15deg);
    transition: 0.5s;
    opacity: 0;
    z-index: 0;
}

.sock-item::after {
    content: '';
    position: absolute;
    top: 0; left: 30px;
    width: 50%; height: 100%;
    border-radius: 8px;
    transform: skewX(15deg);
    transition: 0.5s;
    filter: blur(30px);
    opacity: 0;
    z-index: 0;
}

.sock-item:nth-child(1)::before, .sock-item:nth-child(1)::after { background: linear-gradient(315deg, #ffbc00, #ff0058); }
.sock-item:nth-child(2)::before, .sock-item:nth-child(2)::after { background: linear-gradient(315deg, #03a9f4, #ff0058); }
.sock-item:nth-child(3)::before, .sock-item:nth-child(3)::after { background: linear-gradient(315deg, #4dff03, #00d0ff); }
.sock-item:nth-child(4)::before, .sock-item:nth-child(4)::after { background: linear-gradient(315deg, #ff6600, #9900ff); }

.sock-item:hover::before,
.sock-item:hover::after {
    opacity: 1;
    transform: skewX(0deg);
    left: 10px;
    width: calc(100% - 20px);
}

.sock-glass-span {
    display: block;
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 5;
    pointer-events: none;
}

.sock-glass-span::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 0; height: 0;
    border-radius: 8px;
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(10px);
    opacity: 0;
    transition: 0.1s;
    animation: animateBubble 2s ease-in-out infinite;
}

.sock-item:hover .sock-glass-span::before {
    top: -30px; left: 30px;
    width: 70px; height: 70px;
    opacity: 1;
}

.sock-glass-span::after {
    content: '';
    position: absolute;
    bottom: 0; right: 0;
    width: 0; height: 0;
    border-radius: 8px;
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(10px);
    opacity: 0;
    transition: 0.5s;
    animation: animateBubble 2s ease-in-out infinite;
    animation-delay: -1s;
}

.sock-item:hover .sock-glass-span::after {
    bottom: -30px; right: 30px;
    width: 70px; height: 70px;
    opacity: 1;
}

.sock-glass-content {
    position: relative;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.05);
    backdrop-filter: blur(10px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    border-radius: 8px;
    z-index: 1;
    transition: 0.5s;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.sock-item:hover .sock-glass-content {
    left: -15px;
}

.sock-glass-content img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ===== VIDRIO ESMERILADO EN CUADROS DE PRODUCTOS ===== */
.foto-slot,
.foto-slot.reveal-on-scroll.revealed {
    background: rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(12px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2) !important;
}

/* ===== COLOR DINÁMICO POR SLOT (asignado desde JS) ===== */
.foto-slot::before,
.foto-slot::after {
    background: var(--slot-gradient, linear-gradient(315deg, #ffbc00, #ff0058));
}


/* ============================================================
   CALCETA STORE — ESTILOS PRINCIPALES (integrado desde styles.css)
   ============================================================ */

/* ===== RESET & BASE ===== */
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: 'Segoe UI', Arial, sans-serif;
  background: #EDE9FE;
  color: #222;
}

a {
  text-decoration: none;
  color: inherit;
}

/* ===== ANNOUNCEMENT BAR ===== */
.announcement-bar {
  background-color: #1a1a1a;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 24px;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.3px;
  gap: 12px;
  position: relative;
}
.announcement-bar span {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  z-index: 1;
}
.announcement-bar span:nth-child(2) {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  text-align: center;
  opacity: 0.85;
  font-weight: 600;
  pointer-events: none;
}
.announcement-bar span i {
  font-size: 0.75rem;
  color: #e91e8c;
}
@media (max-width: 768px) {
  .announcement-bar span:nth-child(2) { display: none; }
  .announcement-bar { padding: 7px 12px; }
}

/* ===== NAVBAR ===== */
.navbar {
  background-color: #ffffff;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(0,0,0,0.10);
  border-bottom: 1px solid #f0f0f0;
}

.navbar-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* ===== LOGO ===== */
.logo a {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.logo img {
  height: 44px;
  width: auto;
  border-radius: 50%;
  object-fit: cover;
}

.logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.logo-text .logo-sub {
  color: #555;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.logo-text .logo-main {
  color: #e91e8c;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-family: 'BobbyJones', sans-serif;
}

/* ===== NAV MENU ===== */
.nav-menu ul {
  list-style: none;
  display: flex;
  gap: 2px;
}

.nav-menu ul li a {
  color: #333;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 8px 12px;
  border-radius: 6px;
  transition: background 0.2s, color 0.2s;
  white-space: nowrap;
}

.nav-menu ul li a:hover,
.nav-menu ul li a.active {
  background-color: #fce4f3;
  color: #e91e8c;
}

/* ===== NAV ICONS ===== */
.nav-icons {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 4px;
}

.social-icon-btn {
  background: #f5f5f5 !important;
  border: none;
  cursor: pointer;
  color: #333 !important;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, transform 0.2s;
  text-decoration: none;
  flex-shrink: 0;
}

.social-icon-btn:hover {
  background-color: #fce4f3 !important;
  transform: scale(1.08);
}

.social-icon-btn.social-fb  { background: #f5f5f5 !important; }
.social-icon-btn.social-ig  { background: #f5f5f5 !important; }
.social-icon-btn.social-tt  { background: #f5f5f5 !important; }
.social-icon-btn.social-x   { background: #111 !important; color: #fff !important; }
.social-icon-btn.social-yt  { background: #FF0000 !important; color: #fff !important; }

/* Carrito — color naranja */
.social-icon-btn[href="cart.html"] {
  background: rgba(255,140,0,0.95) !important;
  box-shadow: 0 4px 12px rgba(255,140,0,0.4) !important;
  color: #fff !important;
}

.icon-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: #333;
  padding: 8px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  transition: background 0.2s;
}

.icon-btn:hover {
  background-color: #fce4f3;
  color: #e91e8c;
}

/* ===== HAMBURGER (móvil) ===== */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}

.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: #333;
  border-radius: 2px;
  transition: transform 0.3s, opacity 0.3s;
}

.hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ===== HERO BANNER ===== */
.hero {
  width: 100%;
  overflow: hidden;
  line-height: 0;
  position: relative;
}

.hero-video {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  object-position: center center;
}

.hero-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  object-position: center center;
}

@media (max-width: 820px) {
  .hero { height: 220px; }
  .hero-video, .hero-img { height: 100%; object-fit: cover; }
}

@media (max-width: 480px) {
  .hero { height: 200px; }
}

/* Barra de redes sociales solo móvil */
.social-bar-mobile {
  display: none;
}

@media (max-width: 820px) {
  /* Ocultar redes en el navbar */
  .nav-icons li.social-only { display: none !important; visibility: hidden !important; width: 0 !important; overflow: hidden !important; }

  /* Mostrar barra de redes debajo del navbar */
  .social-bar-mobile {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #f8f8f8;
    border-bottom: 1px solid #eee;
    padding: 6px 16px;
  }
  .social-bar-mobile .social-icon-btn {
    width: 32px !important;
    height: 32px !important;
  }
}

@media (max-width: 820px) {
  .hamburger { display: flex; }
  .nav-menu {
    display: none;
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    background-color: #ffffff;
    padding: 12px 0 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    border-top: 2px solid #f0e0f8;
    z-index: 99;
  }
  .nav-menu.open { display: block; }
  .nav-menu ul { flex-direction: column; gap: 0; padding: 0 16px; }
  .nav-menu ul li a { display: block; padding: 12px 16px; font-size: 0.95rem; border-radius: 8px; color: #333; }
  .nav-menu ul li a:hover, .nav-menu ul li a.active { background: #fce4f3; color: #e91e8c; }
  .nav-icons { gap: 2px; flex-shrink: 1; }
  .nav-icons ul { gap: 3px !important; flex-wrap: nowrap !important; }
  .announcement-bar { flex-direction: row; justify-content: space-between; padding: 6px 12px; font-size: 0.72rem; }
  .social-icon-btn {
    width: 34px !important;
    height: 34px !important;
    flex-shrink: 0 !important;
  }
  .social-icon-btn img {
    width: 20px !important;
    height: 20px !important;
  }
  .social-icon-btn i { font-size: 0.9rem !important; }
  .social-icon-btn span { font-size: 15px !important; }
  .navbar-container { padding: 0 12px !important; gap: 8px !important; overflow: hidden; }
}

@media (max-width: 600px) {
  .announcement-bar { font-size: 0.78rem; padding: 8px 12px; }
  .logo-text { font-size: 1rem; }
  .navbar-container { height: 58px; padding: 0 14px; }
  .nav-menu { top: 58px; }
  .hero { height: 200px; }
  .carousel-section { padding: 24px 0 28px; }
  .carousel-title { font-size: 1.15rem; margin-bottom: 18px; padding: 0 10px; }
  .carousel-wrapper { padding: 0 4px; gap: 4px; }
  .carousel-track { gap: 8px; padding: 6px 2px 12px; }
  .product-card { width: 38vw !important; min-width: 38vw !important; max-width: 38vw !important; border-radius: 10px; }
  .product-info { padding: 8px 8px 10px; }
  .product-name { font-size: 0.78rem; }
  .product-price { font-size: 0.88rem; }
  .carousel-btn { width: 30px; height: 30px; font-size: 0.95rem; flex-shrink: 0; }
}

@media (max-width: 414px) {
  .announcement-bar { font-size: 0.72rem; padding: 7px 10px; }
  .logo-text { font-size: 0.92rem; }
  .logo img { height: 36px; }
  .hero { height: 170px; }
  .carousel-title { font-size: 1rem; }
  .product-card { width: 38vw !important; min-width: 38vw !important; max-width: 38vw !important; }
}

@media (max-width: 375px) {
  .announcement-bar { font-size: 0.68rem; padding: 6px 8px; }
  .logo-text { font-size: 0.85rem; }
  .navbar-container { height: 54px; padding: 0 10px; gap: 8px; }
  .nav-menu { top: 54px; }
  .hero { height: 150px; }
  .carousel-title { font-size: 0.92rem; }
  .product-card { width: 38vw !important; min-width: 38vw !important; max-width: 38vw !important; border-radius: 8px; }
  .product-name { font-size: 0.75rem; }
  .product-price { font-size: 0.84rem; }
  .carousel-btn { width: 26px; height: 26px; font-size: 0.85rem; }
}

@media (max-width: 320px) {
  .announcement-bar { font-size: 0.62rem; padding: 5px 6px; }
  .logo-text { font-size: 0.78rem; }
  .logo img { height: 30px; }
  .hero { height: 120px; }
  .carousel-title { font-size: 0.82rem; }
  .product-card { width: 40vw !important; min-width: 40vw !important; max-width: 40vw !important; }
  .carousel-btn { display: none; }
}

@media (max-width: 900px) and (min-width: 601px) {
  .product-card { min-width: calc((100% - 3 * 16px) / 2.5); max-width: calc((100% - 3 * 16px) / 2.5); }
  .carousel-title { font-size: 1.4rem; }
}

/* ===== CARRUSEL DE PRODUCTOS ===== */
.carousel-section {
  background-color: #EDE9FE;
  padding: 36px 0 40px;
}

.carousel-title {
  text-align: center;
  color: #1a1a1a;
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 28px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.carousel-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 0 8px;
}

.carousel-track-container {
  flex: 1;
  overflow: hidden;
}

.carousel-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 8px 4px 16px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
}

.carousel-track::-webkit-scrollbar { display: none; }

.product-card {
  background: #fff;
  border-radius: 12px;
  width: clamp(140px, 24vw, 320px);
  min-width: clamp(140px, 24vw, 320px);
  max-width: clamp(140px, 24vw, 320px);
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0,0,0,0.12);
  flex-shrink: 0;
  transition: transform 0.2s, box-shadow 0.2s;
  cursor: pointer;
}

.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
}

.product-img-wrap {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
}

.product-img-wrap img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain !important;
  display: block;
  transition: transform 0.3s;
}

.product-card:hover .product-img-wrap img { transform: scale(1.05); }

.product-info { padding: 12px 14px 16px; }

.product-name {
  font-size: 0.88rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 6px;
  line-height: 1.3;
}

.product-price {
  font-size: 1rem;
  font-weight: 700;
  color: #e91e8c;
}

.carousel-btn {
  background: #fff;
  border: none;
  color: #e91e8c;
  font-size: 1.4rem;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  transition: background 0.2s, transform 0.2s;
}

.carousel-btn:hover { background: #fce4f3; transform: scale(1.08); }

/* ===== CARRITO CONTADOR ===== */
.cart-counter {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #ff3b3b;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  line-height: 1;
  pointer-events: none;
}

/* ===== REDES SOCIALES EN NAVBAR ===== */
.social-icon-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.2) !important;
  color: #fff !important;
  font-size: 1rem !important;
  transition: transform 0.2s, box-shadow 0.2s !important;
  text-decoration: none !important;
  position: relative !important;
  vertical-align: middle !important;
  transform: none !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}

.social-icon-btn:hover {
  transform: scale(1.15) !important;
  color: #fff !important;
}

.nav-icons ul {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 6px !important;
}

.nav-icons ul li {
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  transform: none !important;
}

@media (max-width: 480px) {
  .nav-icons ul li:nth-child(3),
  .nav-icons ul li:nth-child(4) { display: flex !important; }

  .social-icon-btn {
    width: 30px !important;
    height: 30px !important;
  }

  .social-icon-btn img {
    width: 18px !important;
    height: 18px !important;
  }
}

/* ===== LOADING SPINNER CARRUSEL ===== */
.carousel-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 40px 0;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ===== CENTRAR TÍTULOS CARRUSEL ===== */
.carousel-section .carousel-title {
  text-align: center !important;
  width: 100% !important;
  display: block !important;
  padding: 0 16px !important;
}

/* ===== FUENTE BOBBY JONES EN TODA LA PÁGINA ===== */
body,
h1, h2, h3, h4, h5, h6,
p, a, span, li, button, input, select, textarea,
.announcement-bar,
.logo-text,
.nav-menu ul li a,
.carousel-title,
.product-name,
.product-price,
.carousel-btn {
  font-family: 'BobbyJones', 'Segoe UI', Arial, sans-serif !important;
}

/* ============================================================
   iOS / SAFARI FIXES
   ============================================================ */

/* Safe area para notch y barra inferior de iPhone */
.announcement-bar {
  padding-top: max(10px, env(safe-area-inset-top));
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
}

.navbar {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

.navbar-container {
  padding-left: max(24px, env(safe-area-inset-left));
  padding-right: max(24px, env(safe-area-inset-right));
}

/* Evitar zoom en inputs en iOS (mínimo 16px) */
input, select, textarea {
  font-size: 16px !important;
}

/* Fix tap highlight en iOS */
* {
  -webkit-tap-highlight-color: transparent;
}

/* Fix scroll momentum en iOS */
.carousel-track {
  -webkit-overflow-scrolling: touch;
}

/* Fix video autoplay en iOS — necesita muted + playsinline */
.hero-video {
  -webkit-playsinline: true;
}

/* Fix botones en iOS — evitar estilos nativos */
button,
.btn-add-cart,
.variant-btn,
.carousel-btn,
.social-icon-btn,
.back-btn {
  -webkit-appearance: none;
  appearance: none;
}

/* Fix position sticky en Safari */
.navbar {
  position: -webkit-sticky;
  position: sticky;
}

/* Fix gap en flexbox para Safari antiguo */
.nav-icons ul {
  gap: 6px;
}

/* Fix aspect-ratio en Safari < 15 */
.product-img-wrap {
  position: relative;
}

@supports not (aspect-ratio: 1/1) {
  .product-img-wrap::before {
    content: '';
    display: block;
    padding-top: 100%;
  }
  .product-img-wrap img {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    max-width: 90%; max-height: 90%;
    object-fit: contain;
  }
}

/* Fix para el carrusel en iPhone — padding inferior para barra home */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  body {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* Fix font rendering en iOS */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ===== SCROLL SUAVE ANCLAS ===== */
html {
  scroll-behavior: smooth;
}

/* ===== WIDGET WHATSAPP ===== */
.whatsapp-widget {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}

.wa-panel {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  width: 320px;
  overflow: hidden;
  display: none;
  flex-direction: column;
  animation: waSlideUp 0.25s ease;
}

.wa-panel.open { display: flex; }

@keyframes waSlideUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.wa-header {
  background: #1a1a1a;
  padding: 16px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.wa-header-top {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex: 1;
}

.wa-title {
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  margin: 0 0 4px;
  font-family: 'BobbyJones', sans-serif;
}

.wa-subtitle {
  color: rgba(255,255,255,0.8);
  font-size: 0.82rem;
  margin: 0;
  line-height: 1.4;
  font-family: 'BobbyJones', sans-serif;
}

.wa-close {
  background: rgba(255,255,255,0.15);
  border: none;
  color: #fff;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.2s;
}
.wa-close:hover { background: rgba(255,255,255,0.3); }

.wa-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 340px;
  overflow-y: auto;
}

.wa-instant-title {
  font-weight: 700;
  font-size: 0.9rem;
  color: #333;
  margin: 0 0 4px;
  text-align: center;
  font-family: 'BobbyJones', sans-serif;
}

.wa-question {
  display: block;
  border: 1.5px solid #e0e0e0;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 0.88rem;
  color: #333;
  text-decoration: none;
  font-family: 'BobbyJones', sans-serif;
  transition: border-color 0.2s, background 0.2s;
  line-height: 1.4;
}

.wa-question:hover {
  border-color: #25d366;
  background: #f0fff4;
  color: #1a7a3a;
}

.whatsapp-float {
  background: #25d366;
  border: none;
  border-radius: 16px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  box-shadow: 0 4px 16px rgba(37, 211, 102, 0.5);
  transition: transform 0.2s, box-shadow 0.2s;
  cursor: pointer;
}

.whatsapp-label {
  color: #fff;
  font-weight: 700;
  font-size: 0.8rem;
  font-family: 'BobbyJones', sans-serif;
  letter-spacing: 0.5px;
}

.whatsapp-float:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 24px rgba(37, 211, 102, 0.7);
}

@media (max-width: 600px) {
  .whatsapp-widget { bottom: 16px; right: 16px; }
  .wa-panel { width: 290px; }
  .whatsapp-float { padding: 8px 12px; }
  .whatsapp-label { font-size: 0.72rem; }
}