/*

TemplateMo 559 Zay Shop

https://templatemo.com/tm-559-zay-shop

---------------------------------------------
Table of contents
------------------------------------------------
1. Typography
2. General
3. Nav
4. Hero Carousel
5. Accordion
6. Shop
7. Product
8. Carousel Hero
9. Carousel Brand
10. Services
11. Contact map
12. Footer
13. Small devices (landscape phones, 576px and up)
14. Medium devices (tablets, 768px and up)
15. Large devices (desktops, 992px and up)
16. Extra large devices (large desktops, 1200px and up)
--------------------------------------------- */




/* Typography */
body{
        color: #080808;
}
body, ul, li, p, a, label, input, div {
  font-family: 'Roboto', sans-serif;
  font-size: 20px !important;
  font-weight: 400 !important;
}
p, li, label, input, div{
  text-align: justify;
}
.h1 {
  font-family: 'Roboto', sans-serif;
  font-weight: 400 !important;
  
  color: #2c0c75;
}
.h2 {
  font-family: 'Roboto', sans-serif;
  font-size: 30px !important;
  font-weight: 300;
  
  color: #000000;
}
.h3 {
  font-family: 'Roboto', sans-serif;
  font-size: 22px !important;
  
  color: #000000;
}
/* General */
.logo { font-weight: 500 !important;}
.text-warning {  color: #ede861 !important;}
.text-muted { color: #000000 !important;}
.text-success { color: #5988ab !important;}
.text-light { color: #cfd6e1 !important;}
.bg-dark { background-color: #212934 !important;}
.bg-light { background-color: #e9eef5 !important;}
.bg-black { background-color: #1d242d !important;}
.bg-success { background-color: #5988ab !important;}
.btn-success {
  background-color: #5988ab !important;
  border-color: #568fae !important;
}
.pagination .page-link:hover {color: #000;}
.pagination .page-link:hover, .pagination .page-link.active {
  background-color: #69a0bb;
  color: #fff;
}
/* Nav */
#templatemo_nav_top { min-height: 40px;}
#templatemo_nav_top * { font-size: .9em !important;}
#templatemo_main_nav a { color: #212934; font-size: 20px !important;}
#templatemo_main_nav a:hover { color: #69a0bb;}
#templatemo_main_nav .navbar .nav-icon { margin-right: 20px;}

/* Hero Carousel */
#template-mo-zay-hero-carousel { background: #efefef !important;}
/* Accordion */
.templatemo-accordion a { color: #000;}
.templatemo-accordion a:hover { color: #333d4a;}
/* Shop */
.shop-top-menu a:hover { color: #69a0bb !important;}
/* Product */
.product-wap { box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.10);}
.product-wap .product-color-dot.color-dot-red { background:#f71515;}
.product-wap .product-color-dot.color-dot-blue { background:#6db4fe;}
.product-wap .product-color-dot.color-dot-black { background:#000000;}
.product-wap .product-color-dot.color-dot-light { background:#e0e0e0;}
.product-wap .product-color-dot.color-dot-green { background:#0bff7e;}
.card.product-wap .card .product-overlay {
  background: rgba(0,0,0,.2);
  visibility: hidden;
  opacity: 0;
  transition: .3s;
}
.card.product-wap:hover .card .product-overlay {
  visibility: visible;
  opacity: 1;
}
.card.product-wap a { color: #000;}
#carousel-related-product .slick-slide:focus { outline: none !important;}
#carousel-related-product .slick-dots li button:before {
  font-size: 15px;
  margin-top: 20px;
}
/* Brand */
.brand-img {
  filter: grayscale(100%);
  opacity: 0.5;
  transition: .5s;
}
.brand-img:hover {
  filter: grayscale(0%);
  opacity: 1;
}
/* Carousel Hero */
#template-mo-zay-hero-carousel .carousel-indicators li {
  margin-top: -50px;
  background-color: #5988ab;
}
#template-mo-zay-hero-carousel .carousel-control-next i,
#template-mo-zay-hero-carousel .carousel-control-prev i {
  color: #5988ab !important;
  font-size: 2.8em !important;
}
/* Carousel Brand */
.tempaltemo-carousel .h1 {
  font-size: .5em !important;
  color: #000 !important;
}
/* Services */
.services-icon-wap {transition: .3s;}
.services-icon-wap:hover, .services-icon-wap:hover i {color: #fff;}
.services-icon-wap:hover {background: #69a0bb;}
/* Contact map */
.leaflet-control a, .leaflet-control { font-size: 10px !important;}
.form-control { border: 1px solid #e8e8e8;}
/* Footer */
#tempaltemo_footer a { color: #dcdde1;}
#tempaltemo_footer a:hover { color: #68bb7d;}
#tempaltemo_footer ul.footer-link-list li { padding-top: 10px;}
#tempaltemo_footer ul.footer-icons li {
  width: 2.6em;
  height: 2.6em;
  line-height: 2.6em;
}
#tempaltemo_footer ul.footer-icons li:hover {
  background-color: #cfd6e1;
  transition: .5s;
}
#tempaltemo_footer ul.footer-icons li:hover i {
  color: #212934;
  transition: .5s;
}
#tempaltemo_footer .border-light { border-color: #2d343f !important;}
/*
// Extra small devices (portrait phones, less than 576px)
// No media query since this is the default in Bootstrap
*/
/* Small devices (landscape phones, 576px and up)*/
.product-wap .h3, .product-wap li, .product-wap i, .product-wap p {
  font-size: 12px !important;
}
.product-wap .product-color-dot {
  width: 6px;
  height: 6px;
}

@media (min-width: 576px) {
  .tempaltemo-carousel .h1 { font-size: 1em !important;}
  
}

/*// Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
  #templatemo_main_nav .navbar-nav {max-width: 450px;}
 }

/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
  #templatemo_main_nav .navbar-nav {max-width: 650px;}
  #template-mo-zay-hero-carousel .carousel-item {min-height: 36rem !important;}
  .product-wap .h3, .product-wap li, .product-wap i, .product-wap p {font-size: 18px !important;}
  .product-wap .product-color-dot {
    width: 12px;
    height: 12px;
  }
}

/* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {}

/*nvo*/
/* =========================
   INSTITUCIONES ORGANIZADORAS
   ========================= */
.logos-principales .col-md-2,
.logos-principales .col-md-8,
.logos-secundarios .col-md-2{
    display:flex;
}
.logos-principales .col-md-2,
.logos-principales .col-md-8{
    height:280px;
}
.logos-secundarios .col-md-2{
    height:180px;
}

.instituciones{
    padding-left:60px;
    padding-right:60px;
}

/* Fila principal */
.logos-principales{
    margin-top:40px;
    margin-bottom:30px;
}

.logos-principales .institution-card{
    padding:15px;
}

.logos-principales img{
    max-height:140px;
    width:auto;
    max-width:100%;
    object-fit:contain;
}
.logos-principales .col-md-2,
.logos-principales .col-md-8{
    display:flex;
}
.logos-principales .institution-card{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:100%;
}


.cio-logo img{
    height: 260px;
    width: auto;
    object-fit: contain;
}


/* Fila secundaria */
.logos-secundarios{
    margin-top:20px;
}
.logos-principales .institution-card{
    height:280px;   /* 👈 fuerza misma altura para todos */
}

.logos-secundarios .institution-card{
    padding:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    height:140px;   /* 👈 sube esto para que no se salga el logo */
    overflow:hidden;
}

.logos-secundarios img{
    max-height:150px !important;
    width:auto;
    height:auto;
    object-fit:contain;
}

/* Responsive */
@media (max-width: 768px){

    /* Reduce altura de TODAS las cajas */
    .logos-principales .col-md-2,
    .logos-principales .col-md-8{
        height:160px !important;
    }

    .logos-secundarios .col-md-2{
        height:120px !important;
    }

    /* Ajusta logos para que no se vean pequeños */
    .logos-principales img{
        max-height:90px;
    }

    .cio-logo img{
        max-height:140px;
    }

    .logos-secundarios img{
        max-height:55px;
    }
}

.hero-banner{
    background-image: url("../img/banner.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    min-height: 500px;
    position: relative;
}

/* oscurecer para que el texto se lea */
.hero-banner::before{
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.4);
}

.hero-banner .container{
    position: relative;
    z-index: 2;
}

.hero-banner h1,
.hero-banner h3{
    color: #fff;
}
/* ===== INSTITUCIONES ===== */

.institution-card{
    background: #fff;
    border-radius: 20px;
    padding: 10px;
    height: 260px;

    display: flex;
    align-items: center;
    justify-content: center;

    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
}

.institution-card img{
    width: 100%;
    max-width: 520px;
    max-height: 260px;
    object-fit: contain;
}

.institution-card:hover{
    transform: translateY(-5px);
    box-shadow: 0 12px 25px rgba(0,0,0,0.12);
}

/* Logo CIO más grande */
.cio-logo{
    height: 320px;
}

.cio-logo img{
    width: 100%;
    max-width: 1000px;
    max-height: 360px;
    object-fit: contain;
}

/* Tablets */
@media (max-width: 768px){

    .institution-card{
        height: 180px;
        padding: 10px;
    }

    .institution-card img{
        max-width: 220px;
        max-height: 140px;
    }

    .cio-logo{
        height: 220px;
    }

    .cio-logo img{
        max-width: 400px;
        max-height: 180px;
    }
}

/* Celulares */
@media (max-width: 480px){
 #template-mo-zay-hero-carousel .carousel-item {min-height: 6rem !important;}
    .institution-card{
        height: 160px;
    }

    .institution-card img{
        max-width: 180px;
        max-height: 120px;
    }

    .cio-logo{
        height: 190px;
    }

    .cio-logo img{
        max-width: 300px;
        max-height: 150px;
    }
}
.fecha-card{
    border-radius: 16px;
    background: #fff;
    transition: all 0.3s ease;
    padding: 30px 20px;
}

/* ICONO */
.fecha-card i{
    font-size: 3.2rem;
    margin-bottom: 10px;
    transition: transform 0.3s ease;
}

/* TITULO */
.fecha-card h2{
    font-size: 1.6rem;
    font-weight: 700;
}

/* TEXTO */
.fecha-card p{
    font-size: 1.4rem;   /* MÁS GRANDE */
    margin-top: 8px;
    font-weight: 700;
     line-height: 1.4;
}

/* HOVER ANIMADO */
.fecha-card:hover{
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.15);
}

.fecha-card:hover i{
    transform: scale(1.15);
}
.sede-link{
    text-decoration: none;
    transition: all 0.3s ease;
}

.sede-link:hover{
    color: #fff;
    text-shadow: 0 0 8px rgba(250,204,21,0.6);
}

.text-theme{
    color: #6d28d9 !important; /* morado elegante */
}

.text-theme i{
    color: #6d28d9 !important;
}
.card:hover{
    transform: translateY(-6px);
    transition: 0.3s;
}
.program-card{
    transition: all 0.3s ease;
    border: 0;
}

.program-card:hover{
    transform: translateY(-6px);
    box-shadow: 0 12px 25px rgba(30,58,138,0.15);
}

/* colores de texto */
.text-blue-theme{
    color: #1e3a8a !important;
}

.text-purple-theme{
    color: #6d28d9 !important;
}

/* íconos con fondo suave */
.icon-circle{
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px auto;
    background: rgba(59,130,246,0.12);
}
.program-card h5{
    color: #1e3a8a !important;
}

.program-card h6{
    color: #111827 !important;
}

.program-card p{
    color: #143577 !important;
}
.badge{
    font-weight: 600;
    border-radius: 8px;
}
.back-to-top {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 50px;
    height: 50px;
    background: #0d6efd;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    text-decoration: none;

    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
    z-index: 9999;
}

.back-to-top.show {
    opacity: 1;
    visibility: visible;
}

.back-to-top i{
    font-size: 20px;
}

.back-to-top:hover{
    color: #fff;
    transform: translateY(-6px) scale(1.08);
    box-shadow:
        0 12px 35px rgba(30,64,175,.45),
        0 8px 18px rgba(109,40,217,.35);
}

.hero-banner h1,
.hero-banner h3{
    text-align: left !important;
    color: #fff;
}

/* Contenedor del texto (recomendado) */
.text-align-left {
    color: #1c1919;
    text-align: left;
    max-width: none;
}

/* H1 más fuerte */
.hero-title{
    font-weight: 800;
    font-size: 3rem;
    line-height: 1.1;
    color: #fff;
}

.hero-line{
    display: block;
}

.hero-main{
    font-weight: 900;
    font-size: 3.2rem;
}

.hero-highlight{
    display: block;
    font-weight: 900;
    font-size: 3.2rem;
    color: #fff;
}

/* Subtítulo alineado a la izquierda */
.hero-subtitle{
    font-weight: 400;
    font-size: 1.6rem;
    opacity: 0.95;
    max-width: 700px;
    margin: 0; /* 👈 importante: quita centrado */
    color: #fff;
}
footer{
    text-align: center;
}

footer p{
    text-align: center;
}

footer h5{
    text-align: center;
}
.hero-slide{
    height: 90vh;
    min-height: 500px;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    position: relative;
    display: flex;
    align-items: center;
}

.hero-overlay{
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.45);
}

.hero-content{
    position: relative;
    z-index: 2;
    color: #fff;

    text-align: left;
    max-width: 700px;
}


.hero-title{
    font-weight: 800;
    font-size: 3rem;
    line-height: 1.2;
     margin-top:50px;
    margin-bottom: 10px;
}

.hero-subtitle{
    font-weight: 400;
    font-size: 1.6rem;
    opacity: 0.9;
}
.slide-1 {
    background-image: url("../img/pasarela_patentes_2026.jpg");
    background-size: cover;
    background-position: center 20%;
    background-repeat: no-repeat;
}

.slide-2 {
    background-image: url("../img/banner1.jpg");
     background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.slide-3 {
    background-image: url("../img/banner2.jpg");
     background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.slide-4 {
    background-image: url("../img/banner3.jpg");
     background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.slide-5 {
    background-image: url("../img/banner4.jpg");
     background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.slide-6 {
    background-image: url("../img/banner5.jpg");
     background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
/*=========================
   CATÁLOGO ULTRA COMPACTO
==========================*/

/*#invenciones{
    background:#f7f9fb;
}*/

/* TARJETA */
.producto-card{
    background:#fff;
    border-radius:10px;
    overflow:hidden;
    box-shadow:0 2px 6px rgba(0,0,0,.06);
    transition:.2s;
    height:100%;
}

.producto-card:hover{
    transform:translateY(-2px);
    box-shadow:0 6px 14px rgba(0,0,0,.10);
}

/* IMAGEN */
.producto-img{
    height:120px;   /* más pequeña */
}

.producto-img img{
    width:100%;
    height:100%;
    object-fit:cover;
}

/* CONTENIDO */
.producto-body{
    padding:10px 12px;
}

/* TITULO */
.producto-titulo {
    font-size: 16px;
    font-weight: 600;
    margin-top: 10px;
    margin-bottom: 3px;
    color: #0b4c84;
    line-height: 1.2;
    text-align: center;
}

/* AREA */
.producto-area {
    font-size: 12px !important;
    color: #5988ab;
    margin-bottom: 5px;
}

/* DESCRIPCION */
.producto-desc {
    font-size: 12px !important;
    color: #141619;
    line-height: 1.35;
    margin-bottom: 6px;
    margin-top: 16px;
}

/* INVENTORES */
.producto-inv{
    font-size:12px !important;
    color:#666;
    line-height:1.25;
    margin-top:18px;
}

/* LOGO */
.producto-logo {
    text-align:center;   /* 🔥 centrado */
    margin-top:8px;
}
.producto-logo-tec {
    text-align:center;   /* 🔥 centrado */
    margin-top:8px;
}

.producto-logo img{
    height:22px;
    opacity:.85;
}
.producto-logo-tec img{
    height:40px;
    opacity:.85;
}

/* GRID MÁS AJUSTADO */
.row.g-3{
    --bs-gutter-y: 12px;
    --bs-gutter-x: 12px;
}
.inventores-lista{
    list-style:none;
    padding-left:0;
    margin-top:5px;
    margin-bottom:0;
}

.inventores-lista li{
    font-size:12px !important;
    color:#666;
    line-height:1.2;
    margin-bottom:2px;
}

/* opcional: puntito elegante */
.inventores-lista li::before{
    content:"• ";
    color:#0b4c84;
    font-weight:bold;
}
.producto-card:hover .producto-logo img{
    transform:scale(1.05);
    transition:.2s;
}
.producto-card:hover .producto-logo-tec img{
    transform:scale(1.05);
    transition:.2s;
}
.registro-leyenda{
    color: #e05616;
    font-size: 1.1rem;
    font-weight: 600;
    font-style: italic;
    text-align: center;
    margin: 0;
}

.registro-fecha{
    color:#6d28d9;
    font-size:1.1rem;
    font-weight:600;
    text-align:center;
}