/*
Theme Name: FoodMart
Theme URI: https://templatesjungle.com/
Author: TemplatesJungle
Author URI: https://templatesjungle.com/
Description: FoodMart is specially designed product packaged for eCommerce store websites.
Version: 1.1
*/

/*--------------------------------------------------------------
This is main CSS file that contains custom style rules used in this template
--------------------------------------------------------------*/

/*------------------------------------*\
    Table of contents
\*------------------------------------*/

/*------------------------------------------------

CSS STRUCTURE:

1. VARIABLES

2. GENERAL TYPOGRAPHY
  2.1 General Styles
  2.2 Floating & Alignment
  2.3 Forms
  2.4 Lists
  2.5 Code
  2.6 Tables
  2.7 Spacing
  2.8 Utilities
  2.9 Misc
    - Row Border
    - Zoom Effect
  2.10 Buttons
    - Button Sizes
    - Button Shapes
    - Button Color Scheme
    - Button Aligns
  2.11 Section
    - Hero Section
    - Section Title
    - Section Paddings
    - Section Margins
    - Section Bg Colors
    - Content Colors
    - Content Borders

3. EXTENDED TYPOGRAPHY
  3.1 Blockquote / Pullquote
  3.2 Text Highlights

4. CONTENT ELEMENTS
  4.1 Tabs
  4.2 Accordions
  4.3 Brand Carousel
  4.4 Category Carousel

5. BLOG STYLES
  5.1 Blog Single Post
  5.2 About Author
  5.3 Comments List
  5.4 Comments Form3

6. SITE STRUCTURE
  6.1 Header
    - Header Menu
    - Nav Sidebar
  6.2 Billboard
  6.3 About Us Section
  6.4 Video Section
  6.5 Selling Products Section
  6.6 Quotation Section
  6.7 Latest Blogs Section
  6.8 Newsletter Section
  6.9 Instagram Section
  6.10 Footer
    - Footer Top
    - Footer Bottom

7. OTHER PAGES
  7.1 Product detail
  7.2 Shop page

    
/*--------------------------------------------------------------
/** 1. VARIABLES
--------------------------------------------------------------*/
:root {
    /* widths for rows and containers
     */
    --header-height       : 160px;
    --header-height-min   : 80px;
}
/* on mobile devices below 600px
 */
@media screen and (max-width: 600px) {
    :root {
        --header-height : 100px;
        --header-height-min   : 80px;
    }
}
/* Theme Colors */
:root {
    --accent-color       : #FFC43F;
    --dark-color         : #222222;
    --light-dark-color   : #727272;
    --light-color        : #fff;
    --grey-color         : #dbdbdb;
    --light-grey-color   : #fafafa;
    --primary-color      : #6995B1;
    --light-primary-color   : #eef1f3;
}

/* Fonts */
:root {
    --body-font           : "Open Sans", sans-serif;
    --heading-font        : "Nunito", sans-serif;
}

body {
  --bs-link-color: #333;
  --bs-link-hover-color:#333;

  --bs-link-color-rgb: 40,40,40;
  --bs-link-hover-color-rgb: 0,0,0;

  /* --bs-link-color: #FFC43F;
  --bs-link-hover-color: #FFC43F; */

  --bs-light-rgb: 248, 248, 248;

  --bs-font-sans-serif: "Open Sans", sans-serif;
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-size: 1rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 2;
  --bs-body-color: #9e9898;

  --bs-primary: #FFC43F;
  --bs-primary-rgb: 255, 196, 63;

  --bs-success: #a3be4c;
  --bs-success-rgb: 163, 190, 76;
  
  --bs-primary-bg-subtle: #FFF9EB;
  --bs-success-bg-subtle: #eef5e5;
  
  --bs-border-color: #F7F7F7;

  --bs-secondary-rgb: 230, 243, 251;
  /* --bs-success-rgb: 238, 245, 228; */
  --bs-danger-rgb: 249, 235, 231;
  --bs-warning-rgb: 255, 249, 235;
  --bs-info-rgb: 230, 243, 250;

}
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #ffc43f;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #f7a422;
  --bs-btn-hover-border-color: transparent;
  --bs-btn-focus-shadow-rgb: 49,132,253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #ffc43f;
  --bs-btn-active-border-color: transparent;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #d3d7dd;
  --bs-btn-disabled-border-color: transparent;
}
.btn-outline-primary {
  --bs-btn-color: #ffc43f;
  --bs-btn-border-color: #ffc43f;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #ffc107;
  --bs-btn-hover-border-color: #ffc107;
  --bs-btn-focus-shadow-rgb: 13,110,253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #ffc107;
  --bs-btn-active-border-color: #ffc107;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff3cd;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #fff3cd;
  --bs-gradient: none;
}
.btn-outline-light {
  --bs-btn-color: #747474;
  --bs-btn-border-color: #EFEFEF;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #EFEFEF;
  --bs-btn-hover-border-color: #EFEFEF;
  --bs-btn-focus-shadow-rgb: 248,249,250;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #EFEFEF;
  --bs-btn-active-border-color: #EFEFEF;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #EFEFEF;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #EFEFEF;
  --bs-gradient: none;
}
.btn-warning {
  --bs-btn-color: #747474;
  --bs-btn-bg: #FCF7EB;
  --bs-btn-border-color: #FCF7EB;
  --bs-btn-hover-color: #747474;
  --bs-btn-hover-bg: #FFECBE;
  --bs-btn-hover-border-color: #FFECBE;
  --bs-btn-focus-shadow-rgb: 217,164,6;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #FFECBE;
  --bs-btn-active-border-color: #FFECBE;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: #FCF7EB;
  --bs-btn-disabled-border-color: #FCF7EB;
}
.btn-success {
  --bs-btn-color: #222;
  --bs-btn-bg: #EEF5E4;
  --bs-btn-border-color: #EEF5E4;
  --bs-btn-hover-color: #222;
  --bs-btn-hover-bg: #9de3c2;
  --bs-btn-hover-border-color: #9de3c2;
  --bs-btn-focus-shadow-rgb: 60,153,110;
  --bs-btn-active-color: #222;
  --bs-btn-active-bg: #9de3c2;
  --bs-btn-active-border-color: #9de3c2;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #222;
  --bs-btn-disabled-bg: #EEF5E4;
  --bs-btn-disabled-border-color: #EEF5E4;
}
.btn-danger {
  --bs-btn-color: #222;
  --bs-btn-bg: #FFEADA;
  --bs-btn-border-color: #FFEADA;
  --bs-btn-hover-color: #222;
  --bs-btn-hover-bg: #ecc9af;
  --bs-btn-hover-border-color: #ecc9af;
  --bs-btn-focus-shadow-rgb: 60,153,110;
  --bs-btn-active-color: #222;
  --bs-btn-active-bg: #ecc9af;
  --bs-btn-active-border-color: #ecc9af;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #222;
  --bs-btn-disabled-bg: #FFEADA;
  --bs-btn-disabled-border-color: #FFEADA;
}
body {
  letter-spacing: 0.03em;
    /*padding-top: 100px;*/
    /* position: absolute; */
    /*background-color: #970e48;*/
}

header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: #fff; /* Cambia el color si necesitas otro fondo */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Opcional: agrega sombra */
  }

h1,h2,h3,h4,h5,h6 {
  font-family: var(--heading-font);
  color: var(--dark-color);
  font-weight: 700;
}
.display-1,
.display-2,
.display-3,
.display-4,
.display-5,
.display-6 {
  font-weight: 700;
}
.breadcrumb.text-white {
  --bs-breadcrumb-divider-color: #fff;
  --bs-breadcrumb-item-active-color: var(--bs-primary);
}
.dropdown-menu {
  --bs-dropdown-link-active-bg: var(--bs-primary);
}
.nav-pills .nav-link {
  --bs-nav-pills-link-active-color: #111;
  --bs-nav-pills-link-active-bg: #f1f1f1;
}

.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
  --bs-gutter-x: 3rem;
}
/*----------------------------------------------*/
/* 6. SITE STRUCTURE */
/*----------------------------------------------*/
/* 6.1 Header
--------------------------------------------------------------*/
/* Preloader */
.preloader-wrapper {
  width: 100%;
  height: 100vh;
  margin: 0 auto;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 111;
  background: #fff;
}

.preloader-wrapper .preloader {
  margin: 20% auto 0;
  transform: translateZ(0);
}

.preloader:before,
.preloader:after {
  content: '';
  position: absolute;
  top: 0;
}

.preloader:before,
.preloader:after,
.preloader {
  border-radius: 50%;
  width: 2em;
  height: 2em;
  animation: animation 1.2s infinite ease-in-out;
}

.preloader {
  animation-delay: -0.16s;
}

.preloader:before {
  left: -3.5em;
  animation-delay: -0.32s;
}

.preloader:after {
  left: 3.5em;
}

@keyframes animation {
  0%,
  80%,
  100% {
    box-shadow: 0 2em 0 -1em var(--accent-color);
  }
  40% {
    box-shadow: 0 2em 0 0 var(--accent-color);
  }
}

/* *** Start editing below this line *** */
.container-fluid {
  max-width: 1600px;
}
.banner-blocks {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-gap: 2rem;
}
.block-1 { grid-area: 1 / 1 / 3 / 8; }
.block-2 { grid-area: 1 / 8 / 2 / 13; }
.block-3 { grid-area: 2 / 8 / 3 / 13; }

@media screen and (max-width:1140px) {
  .banner-blocks {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, 1fr);
  }
  .block-1 { grid-area: 1 / 1 / 3 / 2; }
  .block-2 { grid-area: 3 / 1 / 4 / 2; }
  .block-3 { grid-area: 4 / 1 / 5 / 2; }
  
}

/* banner ad */
.banner-ad {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}
.banner-ad.blue {
  background: #e6f3fb;
}
.banner-ad .swiper-pagination {
  bottom: 40px;
  left: 0;
  right: 0;
}
.banner-ad .swiper-pagination .swiper-pagination-bullet {
  width: 16px;
  height: 16px;
  margin: 4px;
  background: #FFF;
  opacity: 1;
  transition: background 0.3s ease-out;
}
.banner-ad .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{
  background: #FFC43F;
}
.banner-ad .swiper-slide {
  min-height: 630px;
  display: flex;
}
/* .banner-ad .banner-content {
  padding: 52px;
}
.banner-ad.large .banner-content {
  padding: 90px;
} */
.banner-ad .banner-content .categories {
  font-family: 'Garamond';
  font-size: 37px;
  text-transform: capitalize;
  color: var(--dark-color);
}
.banner-ad .banner-content .sale {
  position: relative;
  display: inline-block;
}
.banner-ad .banner-content .sale:before {
  content: '';
  width: 80px;
  border-bottom: 1px solid #111;
  position: absolute;
  bottom: 6px;
}
.banner-ad .banner-content .sale:after {
  content: 'SALE';
  font-family: var(--body-font);
  position: absolute;
  font-size: 11px;
  line-height: 15px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #252525;
  bottom: 0;
  right: 0;
}
.banner-ad .banner-content .banner-title {
  letter-spacing: 0.02em;
  font-size: 33px;
}
.banner-ad.large .banner-content .categories {
  color: var(--accent-color);
}
.banner-ad.large .banner-content .banner-title {
  font-size: 54px;
}

/* Swiper carousel */
.swiper-prev,
.swiper-next {
  width: 38px;
  height: 38px;
  line-height: 38px;
  background: #F1F1F1;
  color: #222222;
  padding: 0;
  text-align: center;
  border-radius: 10px;
  --bs-btn-border-color: transparent;
  --bs-btn-active-bg: #ec9b22;
  --bs-btn-active-border-color: transparent;
  --bs-btn-hover-bg: #FFC43F;
  --bs-btn-hover-border-color: transparent;
  --bs-btn-disabled-color: #ccc;
  --bs-btn-disabled-bg: #eaeaea;
  --bs-btn-disabled-border-color: #eaeaea
}
.swiper-prev:hover,
.swiper-next:hover {
  background: #FFC43F;
}
.btn-link {
  margin-right: 30px;
  font-weight: 600;
  font-size: 16px;
  line-height: 22px;
  text-align: right;
  /*text-transform: capitalize;*/
  color: #787878;
}
/* category carousel */
.category-carousel .category-item {
  background: #FFFFFF;
  border: 1px solid #FBFBFB;
  box-shadow: 0px 5px 22px rgba(0, 0, 0, 0.04);
  border-radius: 16px;
  text-align: center;
  padding: 60px 20px;
  margin: 20px 0;
  transition: box-shadow 0.3s ease-out, transform 0.3s ease-out;
}
.category-carousel .category-item:hover {
  transform: translate3d(0,-10px,0);
  box-shadow: 0px 21px 44px rgba(0, 0, 0, 0.08);
}
.category-carousel .category-item .category-title {
  font-weight: 600;
  font-size: 20px;
  line-height: 27px;
  letter-spacing: 0.02em;
  text-transform: capitalize;
  color: #222222;
  margin-top: 20px;
}

/* brand carousel */
.brand-carousel .brand-item {
  background: #FFFFFF;
  border: 1px solid #FBFBFB;
  box-shadow: 0px 5px 22px rgba(0, 0, 0, 0.04);
  border-radius: 16px;
  padding: 16px;
}
.brand-carousel .brand-item img {
  width: 100%;
  border-radius: 12px;
}
.brand-carousel .brand-item .brand-details {
  margin-left: 15px;
}
.brand-carousel .brand-item .brand-title {
  margin: 0;
}

/* product tabs */
.product-tabs .nav-tabs {
  justify-content: flex-end;
  border: none;
  
  --bs-nav-link-hover-color: #111;
  --bs-nav-link-color: #970e48;
  --bs-nav-tabs-link-border-color: #fff;
  --bs-nav-tabs-link-hover-border-color: transparent;
  --bs-nav-tabs-link-active-border-color: #fff;
}
.product-tabs .nav-tabs .nav-link.active, 
.product-tabs .nav-tabs .nav-item.show .nav-link {
  /* border: none; */
  border-bottom: 3px solid var(--accent-color);
}

/* product-grid */
/* .product-grid {
  gap: 25px;
} */
.product-item {
  position: relative;
  padding: 16px;
  background: #FFFFFF;
  border: 1px solid #FBFBFB;
  box-shadow: 0px 5px 22px rgba(0, 0, 0, 0.04);
  border-radius: 16px;
  margin-bottom: 30px;
  transition: box-shadow 0.3s ease-out;
}
.product-item:hover {
  box-shadow: 0px 21px 44px rgba(0, 0, 0, 0.08);
}
.product-item h3 {
  display: block;
  width: 100%;
  font-weight: 600;
  font-size: 18px;
  line-height: 25px;
  text-transform: capitalize;
  color: #333333;
  margin: 0;
}
.product-item figure {
  background: #F9F9F9;
  border-radius: 12px;
  text-align: center;
}
.product-item figure img {
  max-height: 210px;
  height: auto;
}
.product-item .btn-wishlist {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid #d8d8d8;
  transition: all 0.3s ease-out;
}
.product-item .btn-wishlist:hover {
  background: rgb(240, 56, 56);
  color: #fff;
}
.product-item .qty {
  font-weight: 400;
  font-size: 13px;
  line-height: 18px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #9D9D9D;
}
.product-item .rating {
  font-weight: 600;
  font-size: 13px;
  line-height: 18px;
  text-transform: capitalize;
  color: #222222;
}
.product-item .rating iconify-icon {
  color: #FFC43F;
}
.product-item .price {
  display: block;
  width: 100%;
  font-weight: 600;
  font-size: 22px;
  line-height: 30px;
  text-transform: capitalize;
  color: #222222;
}
.product-item .product-qty {
  width: 85px;
}
.product-item .btn-link {
  text-decoration: none;
}
.product-item #quantity {
  height: auto;
  width: 28px;
  text-align: center;
  border: none;
  margin: 0;
  padding: 0;
}
.product-item .btn-number {
  width: 26px;
  height: 26px;
  line-height: 1;
  text-align: center;
  background: #FFFFFF;
  border: 1px solid #E2E2E2;
  border-radius: 6px;
  color: #222;
  padding: 0;
}

/* cart */
.cart .product-qty {
  min-width: 130px;
}

/* floating image */
.image-float {
  margin-top: -140px;
  margin-bottom: -140px;
}
@media screen and (max-width:991px) {
  .image-float {
    margin: 0;
  }
}
 /* post item */
.post-item .post-meta {
  font-size: 0.8rem;
  line-height: 1;
}
.post-item .post-meta svg {
  margin-right: 5px;
}

@media screen and (max-width: 991px) {
  /* offcanvas menu */
  .offcanvas-body .nav-item {
    font-weight: 700;
    border-bottom: 1px solid #d1d1d1;
  }
  .offcanvas-body .filter-categories {
    width: 100%;
    margin-bottom: 20px !important;
    border: 1px solid #d1d1d1 !important;
    padding: 14px;
    border-radius: 8px;
  }
  /* dropdown-menu */
  .dropdown-menu {
    padding: 0;
    border: none;
    line-height: 1.4;
    font-size: 0.9em;
  }
  .dropdown-menu a {
    padding-left: 0;
  }
  .dropdown-toggle::after {
    position: absolute;
    right: 0;
    top: 21px;
  }
}

/* single product */
/* product-thumbnail-slider */
.product-thumbnail-slider {
  height: 740px;
}
@media screen and (max-width:992px) {
  .product-thumbnail-slider {
    margin-top: 20px;
    height: auto;
  }
}
@media screen and (min-width:992px) {
  .product-thumbnail-slider {
    height: 520px;
  }
}
@media screen and (min-width:1200px) {
  .product-thumbnail-slider {
    height: 740px;
  }
}

@media screen and (max-width: 991px) {
  .navbar{
    padding: 15px;
  }
}

@media screen and (min-width:992px) {
  .navbar{
    padding: 0px;
  }
}


.temas a{
  color: #6c757d;
}

.temas a:hover{
  color: #c2995c
}

.dircolor{
  color:#9e9898;
}

.footer-menu a{
  color:#9e9898;
}

.footer-menu a:hover{
  color:#fff;
}

.buscar {
  color: #970e48;
  border-color: #970e48;
}

.buscar:hover {
    background-color: #970e48;
    border-color: #970e48;
}

.activemenu {
    background-color: #970e48;
    color: #fff;
}
.menup:hover {
    background-color: #a7762c;
  
}

.link-nave {color: #352a2a; }

.nav-principal{
  padding:0px 75px;
  font-weight: bold;
}



@media screen and (min-width:768px) {
  .navegador{
    margin-top:170px;
  }
}
@media screen and (max-width:991px) {
  .navegador{
    padding:10px;
  }
}

@media screen and (min-width:1400px) {
   .botonesCHTI{
      margin: 0px 300px;
    }
}

@media screen and (max-width:357px) {
    .navegador{
    margin-top:175px;
  }
}

@media screen and (min-width:358px) and (max-width:385px)  {
      .navegador{
      margin-top:190px;
    }
}
@media screen and (min-width:386px) and (max-width:425px)  {
      .navegador{
      margin-top:210px;
    }
}

@media screen and (min-width:426px) and (max-width:468px)  {
      .navegador{
      margin-top:230px;
    }
}

@media screen and (min-width:469px) and (max-width:658px)  {
      .navegador{
      margin-top:260px;
    }
}
@media screen and (min-width:659px) and (max-width:767px)  {
      .navegador{
      margin-top:280px;
    }
}






/*.tseccion thead tr th { 
            position: sticky;
            top: 0;
            z-index: 10;
            background-color: #ffffff;
        }

.table-responsive { 
            height:200px;
            overflow:scroll;
        }*/





        .brand-text {
            color: green;
            font-weight: bold;
            font-size: 24px;
            margin-bottom: 20px;
        }

        .dropdown-submenu .dropdown-menu {
            display: none;
        }

        .dropdown-submenu .dropdown-menu.show {
            display: block;
        }

.contenedor {
      border: 1px solid #333;
      overflow: hidden;
    }

    .caja {
      width: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: sans-serif;
      background-color: #ffffff;
      border-right: 1px solid #333;
    }

    .caja:last-child {
      border-right: none; /* Quitar borde extra */
    }


/* Contenedor del menú */
   /* Contenedor del menú */
    .menuarea {
      background-color: #970e48;
      display: flex;
      justify-content: center; /* Centra horizontalmente */
      align-items: center;
    }

    /* Estilo de los enlaces */
    .menuarea a {
      color: white;
      text-align: center;
      padding: 14px 20px;
      text-decoration: none;
      transition: background-color 0.3s;
    }

    @media screen and (max-width:991px) {
      .menuarea a {
          color: white;
          text-align: center;
          padding: 4px 20px;
          text-decoration: none;
          transition: background-color 0.3s;
          font-size: 12px;
        }
}

    .menuarea a:hover {
      background-color: #575757;
    }

    .menuarea a.active {
      background-color: #000;
    }

.mesas:hover {
  transform: scale(1.1);
  box-shadow: 0 8px 20px rgba(78 3 3 / 54%);/*quitar para imagen*/
}

.mesas {
  background: white; /*quitar para imagen*/
  border: 1px solid #ddd;/*quitar para imagen*/
  padding: 10px;/*quitar para imagen*/
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);/*quitar para imagen*/
  position: static;
}

.mesas1:hover {
  transform: scale(1.28);
}

.mesas1 {
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  cursor: pointer;
  position: static;
}


.texto-encima{
   /* color: #0d140100;
    position: absolute;
    height: 90%;
    width: 93%;
    margin: 30px;*/
}

.texto-encima:hover {
   /* color: white;
    position: absolute;
    background-color: #000000b0;*/
}

.efectoIcon:hover {
  transform: scale(1.1);
  box-shadow: 8px 9px 20px 1px rgb(46 43 43 / 80%)
}

.efectoIcon{
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  cursor: pointer;
  position: static;
  box-shadow: 8px 9px 20px 1px rgb(46 43 43 / 80%)
}


.btnlegis{
    width: 100%;
    color: #f1dfc8; /* #c2995c;*/
    font-size: large;
    font-weight: bolder;
    background-color: #970e48;
    border-color: #c2995c;
    border-width: 3px
}

.seccion_foro{
  padding-top: 35px;
  padding-bottom: 35px;
  font-family: 'Montserrat', sans-serif;
  display: flex;align-items: center;
  justify-content: center;
  background-color: #960e48;
}

.portada {
      display: flex;
      flex-direction: row;
      background: rgba(255, 255, 255, 0.05);
      border-radius: 15px;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
      width: 50vw;  /* 50% del ancho */
      /*height: 50vh; /* 50% del alto */
      overflow: hidden;
      backdrop-filter: blur(10px);
    }

    .portada img {
      width: 50%;
      /*height: 100%;*/
      object-fit: cover;
    }
    .portadaNaat {
      display: flex;
      flex-direction: row;
      background: rgba(255, 255, 255, 0.05);
      border-radius: 15px;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
      width: 70vw;  /* 50% del ancho */
      /*height: 50vh; /* 50% del alto */
      overflow: hidden;
      backdrop-filter: blur(10px);
      align-items: center;
    }

    .portadaNaat img {
      width: 30%;
      height: 100%;
      /*object-fit: cover;*/

      padding: 20px;
    }

    .contenido {
      padding: 25px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      width: 50%;
    }

    .contenidoNaat {
      padding: 25px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .contenidoNaat p {
      font-size: 0.95em;
      margin-bottom: 20px;
      line-height: 1.4;
      color: #ddd;
    }

    .contenido h1 {
      font-size: 1.4em;
      margin-bottom: 10px;
      font-weight: 700;
    }
    .contenidoNaat h1 {
      font-size: 1.4em;
      margin-bottom: 10px;
      font-weight: 700;
    }

    .contenido p {
      font-size: 0.95em;
      margin-bottom: 20px;
      line-height: 1.4;
      color: #ddd;
    }

    .contenido button {
      background-color: #c2995c;
      background-image: linear-gradient(to right, #c2995c, #c2995c94);
      border: none;
      padding: 10px 20px;
      border-radius: 5px;
      font-size: 0.9em;
      color: white;
      font-weight: bold;
      cursor: pointer;
      transition: transform 0.2s, box-shadow 0.3s;
      align-self: flex-start;
    }

    .contenido button:hover {
      transform: scale(1.05);
      box-shadow: 0 4px 12px #655d5d";
    }


    .texto_cuadro {
      padding: 25px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .texto_cuadro h1 {
      font-size: 1.4em;
      margin-bottom: 10px;
      font-weight: 700;
    }

    .texto_cuadro p {
      font-size: 0.95em;
      margin-bottom: 20px;
      line-height: 1.4;
      color: #ddd;
    }

    .texto_cuadro button {
      background-color: #c2995c;
      background-image: linear-gradient(to right, #c2995c, #c2995c94);
      border: none;
      padding: 10px 20px;
      border-radius: 5px;
      font-size: 0.9em;
      color: white;
      font-weight: bold;
      cursor: pointer;
      transition: transform 0.2s, box-shadow 0.3s;
      align-self: flex-start;
    }

    .texto_cuadro button:hover {
      transform: scale(1.05);
      box-shadow: 0 4px 12px #655d5d";
    }

    @media (max-width: 768px) {
      .portada {
        flex-direction: column;
        width: 90vw;
        height: auto;
      }

      .portada img,
      .contenido {
        width: 100%;
        height: auto;
      }

      .portadaNaat {
        flex-direction: column;
        width: 90vw;
        height: auto;
      }

      .portadaNaat img,
      .contenido {
        width: 100%;
        height: auto;
      }

      .contenido {
        padding: 20px;
      }

      .contenidoNaat {
        padding: 20px;
      }
    }


    /*Seccion Visita cinvestav*/ 

    .visita {
      position: relative;
      background-image: url('images/visita_cinvestav.jpg'); /* Cambia por tu URL */
      background-size: cover;
      background-position: center;
      height: 500px;
      color: white;
      display: flex;
      flex-direction: column;
      justify-content: flex-end; /* Esto mueve el contenido al fondo */
      padding: 30px;
      margin: 30px;
    }

    .visita-content {
      background-color: rgba(0, 0, 0, 0.5); /* Oscurece ligeramente para mayor legibilidad */
      padding: 20px;
      border-radius: 10px;
      text-align: center;
    }

    .visita h1 {
      font-size: 2.2rem;
      margin-bottom: 15px;
      color: white;
    }

    @media (max-width: 768px) {
      .visita h1 {
        font-size: 1.5rem;
      }
    }

    .visita button {
       padding: 10px 20px;
      font-size: 1rem;
      color: white;
      background-color: #970e48;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }

    .visita button:hover {
      background-color: #514d4f;
    }

    /* Fin seccion visita cinvestav*/

   

/*MODAL POP‑UP*/
  /* Fondo semi‑transparente */
  #popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    display: none;
  }
  /* Caja del pop‑up */
  #popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    padding: 2rem;
    border-radius: 8px;
    max-width: 90%;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
    text-align: center;
  }
  /* Botón de cerrar */
  #popup button.close {
    margin-top: 1rem;
    padding: 0.5rem 1rem;
    background: #970e48;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }

  #popup button.close:hover {
      background-color: #514d4f;
    }

/*FiN MODAL POP‑UP*/

.campo-contacto:focus{
  border-color: #c2995c;
  box-shadow: 0 0 0 .25rem rgba(194, 153, 95, .25);
}


.seccionlogodCHTI{
  padding: 35px 350px 35px 350px;
}

.fcontacto button {
       padding: 10px 20px;
      font-size: 1rem;
      color: white;
      background-color: #c2995c;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }

    .fcontacto button:hover {
      background-color: #514d4f;
    }

  .titulo-seccion{
    color: #656060;
    text-align: center;
    text-shadow: 0px 0px 20px #ebae53;
  }

  .cards-containerCh {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      justify-content: center;
    }

    .inst_chile .card {
      background-color: #fffbf3;
      border-radius: 10px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
      padding: 20px;
      width: 100%;
      max-width: 400px;
      flex: 1 1 300px;
      transition: transform 0.3s ease;
    }

    .inst_chile .card:hover {
      transform: translateY(-5px);
    }

    .inst_chile .card h3 {
      margin-top: 0;
      color: #616365;
      font-size: 1.3rem;
      margin-bottom: 15px;
      border-bottom: 2px solid #e0e0e0;
      padding-bottom: 8px;
    }

    .inst_chile ul {
      padding-left: 20px;
      margin: 0;
    }

    .inst_chile li {
      margin-bottom: 10px;
      line-height: 1.5;
    }

    .inst_chile a {
      color: #4b4b4b;
      text-decoration: none; /* ❌ Quitamos subrayado */
      transition: color 0.2s ease;
      font-weight: 600;
    }

    .inst_chile a:hover {
      color: #0056b3; /* ✅ Cambia a azul más oscuro */
    }




    @media (max-width: 600px) {
      .inst_chile .card {
        width: 100%;
        flex: 1 1 100%;
      }
    }


    .bg_leyendaSis{
      background: #5c5c5c;
      background: linear-gradient(56deg,rgba(92, 92, 92, 1) 0%, rgba(148, 133, 133, 1) 35%, rgba(214, 191, 165, 1) 100%);
    }

    .carousel-control-prev-icon,
.carousel-control-next-icon {
  background-color: #494949;       /* Fondo blanco */
  border-radius: 50%;           /* Forma circular */
  width: 50px;                  /* Tamaño círculo */
  height: 50px;
  background-size: 50% 50%;     /* Ajusta el tamaño de la flecha */
  background-position: center;
  background-repeat: no-repeat;
  filter: invert(0);            /* Mantiene la flecha oscura */
  box-shadow: 0 2px 6px rgba(0,0,0,0.3); /* Sombrilla ligera */
}

.btn-transparente {
  display: inline-block;
  padding: 8px 18px;
  color: #fff;
  border: 2px solid #fff;    /* Borde blanco */
  background-color: transparent; /* Fondo transparente */
  border-radius: 30px;       /* Bordes redondeados */
  text-decoration: none;     /* Quitar subrayado */
  font-size: 14px;
  transition: all 0.3s ease;
}

.btn-transparente:hover {
  background-color: #fff;  /* Se vuelve blanco al pasar el mouse */
  color: #000;             /* Texto negro para contraste */
}