body html{ min-height: 100vh; background: #fff }
body{padding: 0px!important; padding: }
*{font-family: 'Karmina Sans Rg';}


.h-95 {
  height: 95% !important;
}
.h-80 {
  height: 80% !important;
}
.w-25 {
  width: 25% !important;
}

.w-50 {
  width: 50% !important;
}

.w-75 {
  width: 75% !important;
}

.w-100 {
  width: 100% !important;
}
.w-90 {
  width: 90% !important;
}
.w-80 {
  width: 80% !important;
}
.w-70 {
  width: 70% !important;
}
.w-60 {
  width: 60% !important;
}
.w-50 {
  width: 50% !important;
}



.error{ margin: auto; max-width: 905px}
.t-error{font-size: 9em; font-family: 'EssayTextW01'; font-weight: 600; display: inline!important; margin-bottom: 0px; margin-top: 0px; line-height: 1em}
.sub-error{font-size: 3em; font-family: 'EssayTextW01'; margin-bottom: 30px; margin-top: 40px; font-weight: 600}
.error p{font-family: 'Karmina Sans Rg'; font-size: 1.15em}
.logo-error{width:90px; height:90px; border-radius: 50%; overflow: hidden;
   border: none;
   border-radius: 50%;
 margin-bottom: 15px;
margin-left: -8px;
margin-right: -8px}

a:hover{font-family: 'Karmina Sans SB';}
/*----------- PRELOADER -----------*/

/* Contenedor del preloader */
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #fff; /* Fondo oscuro mientras carga */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

/* Círculo animado */
#loader-circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #7cafa5; /* Color inicial */
}



/* --------- CURSORES --------- */
 body, a, button, div, section, article, video {
   cursor: none !important;
 }

 .citem, .proyectos, .gitem, .rel-item img,  .close, .closed, .nav-link, .contacto a, .mas, .arrow-left, .arrow-right, #blog, .close2, .play-btn {
cursor:none!important;
 }


 .video-container {  cursor: default!important}

 #custom-cursor {
 position: fixed;
 top: 0;
 left: 0;
 width: 50px;    /* más grande para probar */
 height: 50px;
 pointer-events: none;
 transform: translate(-50%, -50%);
 z-index: 9999;
 display: none;
 mix-blend-mode: difference;
 transition: transform 0.1s ease, width 0.1s ease, height 0.1s ease;
 opacity: .7;
 }

 /* Clase para agrandar cursor */
 #custom-cursor.active {
   transform: translate(-50%, -50%) scale(1.7);
   opacity: 1
 }
  @media screen and (max-width: 992px) {
  #custom-cursor { width: 35px;    /* más grande para probar */
     height: 35px;}
}
/* --------- BAR --------- */
.nav{ z-index: 99999}
.navbar {
  position: fixed!important;
  top: 0;
  width: 100%;
  height: 100px;
  color: #000;
  display: flex;
  background: #fff;
  justify-content: space-between;
  align-items: center;
  padding: 0px 20px!important;
  z-index: 10;
}




.nav-link{color: #000; font-size: 1.2em}

.nav-link:hover{color: #000;}

 .nav-link.active {
  font-weight: 900;
  font-family: 'Karmina Sans SB';
}

.logohome{opacity: 0}
/* Logo */
.logo {
  user-select: none;
  width: 60px!important;
  aspect-ratio: 1 / 1!important;
  border-radius: 50%;
  overflow: hidden;
  margin: 10px
}
.logo video{margin-left: -3px; margin-top: -3px}



nav{display: inline-block}

nav li{margin: auto}


/* Icono hamburguesa */
.hambur {

  display: none
}

/* Menú fullscreen oculto por defecto */
.menu {
  position: fixed;
  top: -100vh; /* fuera de pantalla */
  left: 0;
  width: 100vw;
  height: 100vh;
background: #fff;
  color: white;
  display: flex;
  flex-direction: column;
  z-index: 100;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
}

/* Header del menú */
.menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Links del menú */
.menu-links {
  margin-top: 50px;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 25px;
  font-size: 1.5rem;
  font-family: 'Karmina Sans Rg';
}

.menu-links a {
  color: #000;
  text-decoration: none;
}

/* Estado visible para el menú */
.menu.show {
  pointer-events: auto;
  opacity: 1;
}

  @media screen and (max-width: 992px) {


    .hambur{position: absolute;
      top: 20px;
      right: 20px;
      z-index: 20; /* siempre encima */
      border: none;
      width: 40px;
      aspect-ratio: 1 / 1;
      background-image: url("../images/hambur.svg");
      background-repeat: no-repeat;
      background-size: cover;
      background-color: transparent;
      display: block

    }
    .navbar {   padding: 0px 0px!important;}
 .logo {
   width: 60px;
   margin: 10px
   }
   .nav-desk{display: none}
 }

 .video-container {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    padding: 0px;
  }

.bg-video {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   object-fit: cover; /* rellena sin deformar */
   z-index: 0; /* lo manda al fondo */
 }


.play-btn {
   position: absolute;
   transform: translate(-50%, -50%);
   border: none;
   border-radius: 50%;
   padding: 0px;
   overflow: hidden;
   cursor: pointer;
   transition: all 0.4s ease; /* animación suave */
   z-index: 1;
   width: 90px;
   aspect-ratio: 1 / 1;
   background: transparent;
   mix-blend-mode: exclusion;
   opacity: .7

 }

 /* Estado cuando el video está en pausa → centrado */
 .play-btn.center {
   bottom: 50%;
   left: 50%;
 }

 /* Estado cuando el video está en play → esquina */
 .play-btn.corner {
  top: auto;
  right: auto;
  bottom: 20px;
  left: 20px;
  width: 60px;
  aspect-ratio: 1 / 1;
  transform: translate(0, 0);

 }

 .play-btn img {
   width: 100%;
   aspect-ratio: 1 / 1;


 }

 @media screen and (max-width: 992px) {

  .play-btn {
     width: 60px;
   }
   .play-btn.center {
      bottom: 40%;
      left: 50%;
    }

.play-btn.corner {

      width: 40px;


     }
 }

 /* --------- slide PALABRAS --------- */

.slidepapar-pala {
   position: relative;
   width: 100%;
   height: 100vh;
   overflow: hidden;
   background-repeat: no-repeat;
   background-size: cover
 }

 .slidepa {
   position: absolute;
   width: 100%;
   height: 100%;
   background-size: cover;
   background-position: center;
   opacity: 0;
   display: flex;
   justify-slidepa-content: center;
   align-items: center;
   padding: 2rem;
 }

 .slidepa.active {
   opacity: 1;
   z-index: 2;
 }

 .slidepa .slidepa-content {
   width:90%;
   max-width: 1120px;
   color: white;
   padding: 2rem;
   max-height: 80vh;
   overflow-y: auto;
   margin: auto;
 }

.slidepa-content p{  font-family: 'Karmina Sans Rg'!important;
 font-size: 2.1em; margin-bottom: 30px}
 .slidepa-content h2{  font-family: 'Karmina Sans Rg'!important;
  font-size: 2.9em; width: 80%}

 /* Scroll personalizado */
 .slidepa .slidepa-content::-webkit-scrollbar {
   width: 6px;
 }
 .slidepa .slidepa-content::-webkit-scrollbar-thumb {
   background: rgba(255,255,255,0.4);
   border-radius: 4px;
 }

  /* Botones que cubren las dos mitades (son accesibles y clicables) */
  .arrow{
    position:absolute;
    top:0;
    height:100%;
    width:50%;
    background:transparent;
    border:0;
    padding:0;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:2;
    transition:background .18s;
    -webkit-tap-highlight-color: transparent;
  }
  .arrow:active{ transform: scale(.995) }

  .arrow-left{ left:0;  z-index: 2; }
  .arrow-right{ right:0; z-index: 2}

  /* Iconos visibles (círculo con flecha) */
  .arrow svg{
    width:44px;
    height:44px;
    background: rgba(0,0,0,0.35);
    border-radius:50%;
    padding:6px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.45);
    transition:transform .14s, background .14s, opacity .14s;
    opacity:0.9;
  }
  .arrow:hover svg{ transform:translateY(-2px) scale(1.03); background: rgba(0,0,0,0.45); }

  /* Opcional: si quieres ocultar los iconos en mobile */

  @media screen and (max-width: 992px) {
    #hamburClose{height: 60px; width: 60px;}
  .slidepa { padding: 1rem;  }
  .slidepa .slidepa-content {
  max-height: 70vh; padding: 0rem; width:85%;}
  .slidepa-content p{  font-size: 1.5em;}
  .slidepa-content h2{ font-size: 2em; width: 90%}


    .arrow svg{ width:40px; height:40px; padding:5px; }

}
/* --------- Segunda sección --------- */

.esfera{width: 60px!important; height: 60px!important;
  display: inline;
  overflow: hidden;
  margin-right: 10px;
  margin-top: 20px;
  aspect-ratio: 1 / 1!important;
  border-radius: 50%!important;
  overflow: ;
  z-index: 1;
  display: block;
  }


.tex h1{font-size: 5em!important; font-family: 'Karmina Sans Rg'; margin-bottom: 0px; line-height: 1em}
h1.indentidad{ font-family: 'Karmina Sans SB'; margin-left: -30%;}
.camb{width: 330px!important; text-align: left; }


.more-info{display: none;
  position: fixed;
  top: 0;
  left: 0;
  color: white;
  width: 100vw;
  height: 100vh;
  z-index: 1000;}

.esfera-palabra{ margin-top: -20px}

.txt{opacity: 1;
  font-family: 'EssayTextW01'; color: #fff;
  font-size: 4em;
  transform: translateY(100px);
 }
 .close, .closed{position: absolute;
   top: 20px;
   right: 20px;
   z-index: 20; /* siempre encima */
   border: none;
   width: 3em;
   aspect-ratio: 1 / 1;
   background-image: url("../images/close.svg");
   background-repeat: no-repeat;
   background-size: cover;
   background-color: transparent;

 }



 .mas{border: none; padding: 10px 40px;   font-size: 1.3em; }
 .mas:hover{font-family: 'Karmina Sans SB';}

 .es-mobile{width: 0%; display: none}



  @media screen and (max-width: 992px) {
  .es-mobile{width: 100%; display: block}
  h1.indentidad{ font-family: 'Karmina Sans SB'; margin-left: 0%;}
 .tex h1{font-size: 3em!important; display: inline; float: left }
 .txt{font-size: 1.7em; }
 .esfera{width: 35px!important; height: 35px!important; margin-left: -5px  }
 .pre{ margin-left: 0px; }
 .camb{width: auto!important; text-align: left; margin-left: -22px}
 }






 /* --------- Proyectos nuevos --------- */

.proyectos{  height: auto; min-width: 350px}

.imagen-pro{padding: 0px;
  overflow: hidden; /* evita que la imagen se salga al hacer zoom */
  display: inline-block;
  aspect-ratio: 16 / 9;
}

.imagen-pro img{width: 100%;
  height: auto;
  transition: transform 0.4s ease; /* transición suave */}

.imagen-pro:hover img { transform: scale(1.1); /* escala la imagen en hover */ }

.text-proyecto h2{padding: 3em 4em; margin: auto; font-size: 2.4em; }

.video-contenedor {
  width: 100%;
  height: 100%;
  position: relative;
    display: inline-block;
    margin:0px;
    overflow: hidden;
    cursor: pointer;
  }

 .video-contenedor video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* Imagen superpuesta */
  .video-cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 5;
    transition: opacity 0.3s ease;
  }

  /* Botón de mute/unmute */
  .mute-btn {
    position: absolute;
    bottom: 30px;
    left: 30px;
    z-index: 10;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
  }

  .mute-btn img {
    width: 34px;
    height: 34px;
  }
  .disenamos{min-height: 100vh}
  .disenamos h1{margin-bottom: 30px; font-weight: 700; color: #3794df; margin-bottom: 50px;jnnnb }
  .disenamos h3{float: right; width: 80%; }

 @media screen and (max-width: 1495px) {
   .text-proyecto h2{padding: 2em; font-size: 2em; }
    }
  @media screen and (max-width: 1090px) {
 .text-proyecto h2{padding: 1em; font-size: 1.7em;}
  }
 @media screen and (max-width: 992px) {
   .text-proyecto h2{padding: 3em 2em; }
   .disenamos h3{float: right; width: 90%; }
   .proyecto{padding-top: 110px;}
    }











/* --------- Grid --------- */

  .grid-layout {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16.6vw, 1fr));
    grid-auto-rows: minmax(16.6vw, 1fr);
    grid-auto-flow: dense;
    aspect-ratio: 1 / 1;
  }

  .gitem {
    padding: 0rem;
    font-size: 14px;
    display: flex;
    overflow: hidden!important;
    position: relative;

    }




    /* On screens that are 992px or less, set the background color to blue */
    @media screen and (max-width: 992px) {
    .grid-layout {
      grid-template-columns: repeat(auto-fill, minmax(30vw, 1fr));
      grid-auto-rows: minmax(30vw, auto);
    }

    .gitem {

      background-color: pink;
    }
    }


  .fondo{ position: absolute; top: 0px; width: 100%; height: 100%; background: #ffffff}

  .span-2 {
    grid-column-end: span 2;
    grid-row-end: span 2;
  }

  .span-3 {
    grid-column-end: span 3;
    grid-row-end: span 1;
  }

  .span-4 {
    grid-column-end: span 2;
    grid-row-end: span 1;
  }

  .span-5 {
    grid-column-end: span 1;
    grid-row-end: span 3;
  }

  .caso{
    position: absolute;
    top:0%;
    aspect-ratio: 1 / 1!important;
    width: 100%;
    height: 100%;
    background-size: 100.1%!important;
    background-position: center;
    background-repeat: no-repeat;
    transition: all 0.3s ease;
    transform-origin: center center ;

   }

.gitem:hover .caso, .caso:hover .caso, .fondo:hover .caso{
      transform-origin: center center ;
        -ms-transform: scale(1.1)!important;
        -moz-transform: scale(1.1)!important;
        -webkit-transform: scale(1.1)!important;
        -o-transform: scale(1.1)!important;
        transform: scale(1.1)!important;
    }




.citem-container {
    visibility: hidden;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 100;
  }

  .citem {
    position: absolute;
    min-height: 100vh!important;
    width: 100vw;
    top: 0;
    left: 0;
    z-index: 99999;
    position: fixed;
    background: #ffffff;
    overflow-y: scroll!important;
  }

  .citem .row{min-height: 100vh!important; overflow-y: scroll!important;
      display: flex;
      flex-direction: row!important;
      flex-wrap: wrap!important;
      align-items: center!important;
      justify-content: center!important;
    }
      .citem .row .dis{ align-self: flex-end!important; position: absolute; padding-left: 20px }

  .citem h1 {   font-family: 'EssayTextW01'; margin-bottom: 50px; color: #fff; }

  .citem h3{color: #fff; font-family: 'EssayTextW01'; margin-bottom: 30px; }
  .citem p{color: #fff; font-family: 'Karmina Sans Rg';}
  .mbxl{margin-bottom: 90px}
  .mtxl{margin-top: 90px}


  @media screen and (max-width: 992px){
    .citem {padding: 90px 10px 70px 10px!important; }
    .citem .row{padding: 0px!important;
        flex-direction: column!important;
        align-items: flex-center!important;
        justify-content: flex-center!important;
        overflow-y: scroll!important;
        gap: 10px 40px!important; /* row-gap column gap */
    }
    .citem img{max-width: 500px}
    .citem .row .dis{align-self: flex-end!important; position: relative  }

      .mbxl{margin-bottom: 30px;}
      .mtxl{margin-top: 30px}
      .h-80 {
        height: auto!important;
      }
  }

/* --------- casos historia --------- */

.volaris{background-image: url('../hisoticos-mosaico/volaris.svg');}
.b-volaris{background: #000000}


.ampersand{background-image: url('../hisoticos-mosaico/ampersand.svg');}
.b-ampersand{background: #fff; }
.b-ampersand h1, .b-ampersand h3, .b-ampersand p{color: #002d6a!important}

.mexico {background-image: url('../hisoticos-mosaico/mexico.svg');}
.b-mexico{background: #95002f}

.impuestos {background-image: url('../hisoticos-mosaico/impuestos-internos.svg');}
.b-impuestos{background: #fff}
.b-impuestos h1, .b-impuestos h3, .b-impuestos p{color: #322d2d!important}

.tesselar {background-image: url('../hisoticos-mosaico/tesselar.svg');}
.b-tesselar{background: #2ed9c3}
.b-tesselar h1, .b-tesselar h3, .b-tesselar p{color: #000!important}

.vivir-mejor {background-image: url('../hisoticos-mosaico/vivir-mejor.svg');}
.b-vivir-mejor{background: #fff}
.b-vivir-mejor h1, .b-vivir-mejor h3, .b-vivir-mejor p{color: #808184!important}

.casa-americas {background-image: url('../hisoticos-mosaico/casa-americas.svg');}
.b-casa-americas{background: #3155a5}

.anglo {background-image: url('../hisoticos-mosaico/anglo.svg');}
.b-anglo{background: #383780}

.ideograma {background-image: url('../hisoticos-mosaico/ideograma.jpg');}
.b-ideograma{background: #fff}
.b-ideograma h1, .b-ideograma h3, .b-ideograma p{color: #28377d!important}

.globogo {background-image: url('../hisoticos-mosaico/globo-go.svg');}
.b-globogo{background: #ee4034}

.compartamos {background-image: url('../hisoticos-mosaico/compartamos.svg');}
.b-compartamos{background: #e10177}

.disena-mexico {background-image: url('../hisoticos-mosaico/disena-mexico.svg');}
.b-disena-mexico{background: #bfbfbf}
.b-disena-mexico1{background: #f89f5b}

.lluvia-ideas {background-image: url('../hisoticos-mosaico/lluvia-ideas.jpg');}
.b-lluvia-ideas {background: #fff}
.b-lluvia-ideas h1, .b-lluvia-ideas h3, .b-lluvia-ideas p{color: #293a8a!important}

.donde {background-image: url('../hisoticos-mosaico/donde.svg');}
.b-donde{background: #00895e}

.united-water {background-image: url('../hisoticos-mosaico/united-water.jpg');}
.b-united-water{background: #fff}
.b-united-water h1, .b-united-water h3, .b-united-water p{color: #000!important}

.golden-books {background-image: url('../hisoticos-mosaico/golden-books.svg');}
.b-golden-books{background: #0053bd}

.pixelatl {background-image: url('../hisoticos-mosaico/pixelatl.svg');}
.b-pixelatl{background: #0b0a09}

.zacatecas {background-image: url('../hisoticos-mosaico/zacatecas.svg');}
.b-zacatecas{background: #fff}
.b-zacatecas h1, .b-zacatecas h3, .b-zacatecas p{color: #000!important}

.biva {background-image: url('../hisoticos-mosaico/biva.svg');}
.b-biva {background: #00adee}

.sendai {background-image: url('../hisoticos-mosaico/sendai.svg');}
.b-sendai {background: #fff}
.b-sendai h1, .b-sendai h3, .b-sendai p{color: #183e8c!important}

.haus {background-image: url('../hisoticos-mosaico/haus.svg');}
.b-haus {background: #e5d83e}
.b-haus h1, .b-haus h3, .b-haus p{color: #455760!important}

.mejor-mexico {background-image: url('../hisoticos-mosaico/mejor-mexico.svg');}
.b-mejor-mexico {background: #872d91}

.addenda {background-image: url('../hisoticos-mosaico/addenda.svg');}
.b-addenda {background: #fff}
.b-addenda h1, .b-addenda h3, .b-addenda p{color: #706f73!important}

.mumedi {background-image: url('../hisoticos-mosaico/mumedi.svg');}
.b-mumedi {background: #4c4744}
.b-mumedi1{background: #bfb8b2 }

.uni-politecnica {background-image: url('../hisoticos-mosaico/uni-politecnica.svg');}
.b-uni-politecnica {background: #492f91}
.b-uni-politecnica1 {background: #fff}
.b-uni-politecnica1 h1, .b-uni-politecnica1 h3, .b-uni-politecnica1 p{color: #492f91!important}


.cicr-icrc {background-image: url('../hisoticos-mosaico/cicr-icrc.svg');}
.b-cicr-icrc {background: #fff}
.b-cicr-icrc h1, .b-cicr-icrc h3, .b-cicr-icrc p{color: #211e1f!important}


.impc {background-image: url('../hisoticos-mosaico/impc.svg');}
.b-impc {background: #ee3e42}
.b-impc1 {background: #fff}
.b-impc1 h1, .b-impc1 h3, .b-impc1 p{color: #231f20!important}

.cmas {background-image: url('../hisoticos-mosaico/cmas.svg');}
.b-cmas {background: #000}

.fiesta {background-image: url('../hisoticos-mosaico/fiesta.svg');}
.b-fiesta {background: #757575}
.b-fiesta1 {background: #fff}
.b-fiesta1 h1, .b-fiesta1 h3, .b-fiesta1 p{color: #968b83!important}

.la-salle {background-image: url('../hisoticos-mosaico/la-salle.svg');}
.b-la-salle {background: #013a80}
.b-la-salle1 {background: #fff}
.b-la-salle1 h1, .b-la-salle1 h3, .b-la-salle1 p{color: #013a80!important}

.casa-brugal {background-image: url('../hisoticos-mosaico/casa-brugal.svg');}
.b-casa-brugal {background: #174a7d}

.comunalia {background-image: url('../hisoticos-mosaico/comunalia.svg');}
.b-comunalia {background: #fff}
.b-comunalia h1, .b-comunalia h3, .b-comunalia p{color: #4f3030!important}

.espn-grill {background-image: url('../hisoticos-mosaico/espn-grill.jpg');}
.b-espn-grill {background: #000}

.contigo {background-image: url('../hisoticos-mosaico/contigo.svg');}
.b-contigo {background: #fff}
.b-contigo h1, .b-contigo h3, .b-contigo p{color: #008557!important}

.amib {background-image: url('../hisoticos-mosaico/amib.svg');}
.b-amib {background: #edb111}

.amco {background-image: url('../hisoticos-mosaico/amco.svg');}
.b-amco {background: #ed5c2f}
.b-amco1 {background: #c41288}

.urquiza {background-image: url('../hisoticos-mosaico/urquiza.jpg');}
.b-urquiza {background: #000003}

.ho1a {background-image: url('../hisoticos-mosaico/ho1a.svg');}
.b-ho1a {background: #5bb947}

.compu-solution {background-image: url('../hisoticos-mosaico/compu-solution.svg');}
.b-compu-solution {background: #fff}
.b-compu-solution h1, .b-compu-solution h3, .b-compu-solution p{color: #231f20!important}

.fdd {background-image: url('../hisoticos-mosaico/fdd.svg');}
.b-fdd {background: #2b3382}

.lexica {background-image: url('../hisoticos-mosaico/lexica.svg');}
.b-lexica {background: #fff}
.b-lexica h1, .b-lexica h3, .b-lexica p{color: #706f73!important}

.intec {background-image: url('../hisoticos-mosaico/intec.svg');}
.b-intec {background: #00b2e3}

.gbm {background-image: url('../hisoticos-mosaico/gbm.svg');}
.b-gbm {background: #3d3935}

.yavas {background-image: url('../hisoticos-mosaico/yavas.svg');}
.b-yavas {background: #ce009f}

.gob-federal {background-image: url('../hisoticos-mosaico/gob-federal.svg');}
.b-gob-federal {background: #e6e7e8}
.b-gob-federal h1, .b-gob-federal h3, .b-gob-federal p{color: #000!important}

.encore {background-image: url('../hisoticos-mosaico/encore.svg');}
.b-encore {background: #003087;
  background: linear-gradient(90deg,rgba(0, 48, 135, 1) 60%, rgba(0, 163, 255, 1) 120%);}

.f-comunidad {background-image: url('../hisoticos-mosaico/fundacion-comunidad.jpg');}
.b-comunidad {background: #fff}
.b-comunidad h1, .b-comunidad h3, .b-comunidad p{color: #000!important}

.quetal {background-image: url('../hisoticos-mosaico/quetal.svg');}
.b-quetal {background: #001f97}

.inicia {background-image: url('../hisoticos-mosaico/inicia.svg');}
.b-inicia {background: #c6b784}

.yastas {background-image: url('../hisoticos-mosaico/yastas.svg');}
.b-yastas {background: #652d88}

.a-diseno {background-image: url('../hisoticos-mosaico/a-diseno.svg');}
.b-a-diseno {background: #b1a7a2}



/*------------ Proyectos individuales -----------------*/

.proyecto{min-height: 100vh}
.proyecto h1{margin-bottom: 30px; font-weight: 700; color: #3794df; margin-bottom: 50px;jnnnb }
.proyecto h3{ font-family: 'EssayTextW01';float: right; width: 80% }


.video-proyecto {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* Proporción 16:9 */
  height: 0;
  overflow: hidden;
}

.video-proyecto video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Mantiene proporción sin deformar */
}



@media screen and (max-width: 992px){
.proyecto h3{width: 90% }
}

/*-------- Relacionados ----------------*/
#otros{ min-height: auto!important; padding: 230px 0px}

 .rel-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0px;
  border: none;
  border-radius: none;
  text-decoration: none;
  right:0;
}

.rel-item {
  overflow: hidden;
  text-align: center;
 right:0;
}
.rel-item img {
  width: 100%;
  display: block;
 cursor: mix-blend-mode: difference;
  transition: transform 0.4s ease; /* transición suave */}
}

.rel-item:hover img { transform: scale(1.1); /* escala la imagen en hover */ }

@media screen and (max-width: 992px){
  #otros h1{margin-left: 30px}


   .rel-list {
    display: grid;
    grid-template-columns: repeat(1, 1fr);}
}

/*------ BLOG------*/
#decimos{padding: 90px 20px; }
#decimos h1{padding: 0em 2.3em;}
  #blog {
    width: 100%;
  list-style: none;
  display: flex;
  align-items: top;
  flex-flow: row wrap;
  padding: 3em 4em;
  z-index: 0
}

#blog .card {
  padding: 1em;
  display: inline-block;
  border: none!important;
  border-radius: 0px;
  z-index: 0;

}

#blog .card  p{ color: #000!important; font-size: 1.2rem}

#blog .card  p span{font-weight: 900}

#blog small {
  display: block;
  color: #666;
  font-size: 0.85em;
  margin-bottom: 0.4em;
}

#blog a {
  font-size: 1.1em;
  font-weight: 600;
  text-decoration: none;
  color: inherit; /* ← esto hace que el link herede el color de tu página */
  transition: color 0.3s ease;
}

#blog:hover h3 {
  color: #000; /* aquí pones el color hover que quieras */
}
@media screen and (max-width: 992px){
  #decimos h1{padding: 0em;}
  #blog {
    padding: 0em;
 }
}
 /* --------- Respondemos --------- */

 #respondemos {min-height: 100vh!important; background-repeat: no; background-size: cover; color: #fff; background-color: #dc932d;  background-image: url("../images/respondemos.webp");}
 #respondemos h2{ font-family: 'Karmina Sans SB';}
 .contacto{display: flex!important;   justify-content: space-between!important; margin-top: 120px}
.contacto a{font-size: 1.8rem; display: inline-block; color: #fff; text-decoration: none; }
.bottom-footer a, .bottom-footer{ color: #fff!important; text-decoration: none}

@media screen and (max-width: 992px){
  .contacto{display: block!important; }
  .contacto a{font-size: 1.8rem; display: block; }
  #respondemos {padding: 120px 1em;}
}

 /* --------- Somos --------- */
.perfil {min-height: 60vh; padding-bottom: 230px}
.somos h2 {font-family: 'Karmina Sans SB';}
.somos h4 { font-family: 'EssayTextW01';margin-bottom: 30px}
.somos h4 .italic { font-family: 'EssayTextW01'; font-style: italic;}
.pic-cv img{ width: 80%; margin-top: 120px; margin-bottom: 40px; }


@media screen and (max-width: 992px){
  .somos {margin-bottom: 100px;}
.pic-cv img{ width: 100%; margin-top: 80px; margin-bottom: 40px}
}


 /* --------- Modal --------- */
 .modal-dialog{width: 90%; max-width: 900px; position: relative; }
 .modal-content{border-radius: 0px!important;  padding: 50px}

 .modal-content p { font-family: 'EssayTextW01';font-size: 1.4em}
.close2{border: none; background-color: transparent;
  z-index: 20; /* siempre encima */
   border: none;
   width: 3em;
   right: 0px!important;
   top: 0px;
   position: absolute;
   aspect-ratio: 1 / 1;
   background: white;
   background-image: url("../images/close.svg");
   background-repeat: no-repeat;
   background-size: cover;
   padding: 0px;

 }

 iframe{min-height: 320px}


  @media screen and (max-width: 992px){
    .modal-content{padding: 30px}
    iframe{min-height: 450px}

  }
   @media screen and (max-width: 767px){
     .modal-dialog{ width: 95%;}
     .modal-content{padding: 20px}
   }