@import url(reset.css);
/* - - - - - - - - - - - - - - - - - - - - -

Titulo          :  
Autor           : Puntopy Interactive Agency
Site            : www.puntopy.com

- - - - - - - - - - - - - - - - - - - - - */
/*************** RESET Y GLOBALES ***************/
/*

MOOD Framework :: 2.0

Made by @lickybuay

Collaboration of: 
@cafedesigners / @paoluque / @diegoplus / @cbenitez10

m = Margin / p = Padding / s = Size
ml = Margin Left   /   mr = Margin Right
mt = Margin Top   /    mb = Margin Bottom
pl = Padding Left   /   pr = Padding Right
pt = Padding Top   /    pb = Padding Bottom


Last update: 22-08-1012

Modification of Version:
- Fixed Clear class
- removed body overflow-x
*/
/*MIXIN*/
/*@mixin redondeado ($leftop, $rightop, $leftdown, $rightdown) {
	//How tu use: @include redondeado(lefttop, rightop, leftdown, rightdown);	
	-webkit-border-radius: $leftop+px $rightop+px $leftdown+px $rightdown+px;
    -moz-border-radius: $leftop+px $rightop+px $leftdown+px $rightdown+px;
    border-radius: $leftop+px $rightop+px $leftdown+px $rightdown+px;
}*/
/*@mixin piecss() { 
	behavior: url(PIE.php); 
}*/
/*MIXIN*/
.left {
  float: left; }

.right {
  float: right; }

b, strong {
  font-weight: bold; }

.positionrelative {
  position: relative; }

a:hover, input[type="button"]:hover, input[type="submit"]:hover {
  cursor: pointer; }

.displaynone {
  display: none; }

.alignleft {
  text-align: left; }

.alignright {
  text-align: right; }

.alignjustify {
  text-align: justify; }

.aligncenter {
  text-align: center; }

a {
  text-decoration: none; }

.divcentrado {
  margin-left: auto;
  margin-right: auto; }

.clear {
  /*Clearing floats like a boss: goo.gl/zm1oD*/
  zoom: 1; }
  .clear:before {
    display: table;
    content: ""; }
  .clear:after {
    display: table;
    content: "";
    clear: both; }

.displayblock {
  display: block; }

/*MARGIN / PADDING 0*/
.m0 {
  margin: 0; }

.p0 {
  padding: 0; }

/*TAMA?S - S960*/
.s20 {
  width: 20px; }

.s40 {
  width: 40px; }

.s60 {
  width: 60px; }

.s80 {
  width: 80px; }

.s100 {
  width: 100px; }

.s120 {
  width: 120px; }

.s140 {
  width: 140px; }

.s160 {
  width: 160px; }

.s180 {
  width: 180px; }

.s200 {
  width: 200px; }

.s220 {
  width: 220px; }

.s240 {
  width: 240px; }

.s260 {
  width: 260px; }

.s280 {
  width: 280px; }

.s300 {
  width: 300px; }

.s320 {
  width: 320px; }

.s340 {
  width: 340px; }

.s360 {
  width: 360px; }

.s380 {
  width: 380px; }

.s400 {
  width: 400px; }

.s420 {
  width: 420px; }

.s440 {
  width: 440px; }

.s460 {
  width: 460px; }

.s480 {
  width: 480px; }

.s500 {
  width: 500px; }

.s520 {
  width: 520px; }

.s540 {
  width: 540px; }

.s560 {
  width: 560px; }

.s580 {
  width: 580px; }

.s600 {
  width: 600px; }

.s620 {
  width: 620px; }

.s640 {
  width: 640px; }

.s660 {
  width: 660px; }

.s680 {
  width: 680px; }

.s700 {
  width: 700px; }

.s720 {
  width: 720px; }

.s740 {
  width: 740px; }

.s760 {
  width: 760px; }

.s780 {
  width: 780px; }

.s800 {
  width: 800px; }

.s820 {
  width: 820px; }

.s840 {
  width: 840px; }

.s860 {
  width: 860px; }

.s880 {
  width: 880px; }

.s900 {
  width: 900px; }

.s920 {
  width: 920px; }

.s940 {
  width: 940px; }

.s960 {
  width: 960px; }

/*LINE HEIGHT*/
.lh18 {
  line-height: 18px; }

.lh24 {
  line-height: 24px; }

.lh36 {
  line-height: 36px; }

/*MARGIN*/
.m0 {
  margin-left: 0 !important;
  margin-right: 0 !important; }

.margin5 {
  margin: 5px; }

.margin10 {
  margin: 10px; }

.margin15 {
  margin: 15px; }

.margin20 {
  margin: 20px; }

/*MARGINS*/
.mt10 {
  margin-top: 10px; }

.mr10 {
  margin-right: 10px; }

.mb10 {
  margin-bottom: 10px; }

.ml10 {
  margin-left: 10px; }

.mt20 {
  margin-top: 20px; }

.mr20 {
  margin-right: 20px; }

.mb20 {
  margin-bottom: 20px; }

.ml20 {
  margin-left: 20px; }

.mt30 {
  margin-top: 30px; }

.mr30 {
  margin-right: 30px; }

.mb30 {
  margin-bottom: 30px; }

.ml30 {
  margin-left: 30px; }

.mt40 {
  margin-top: 40px; }

.mr40 {
  margin-right: 40px; }

.mb40 {
  margin-bottom: 40px; }

.ml40 {
  margin-left: 40px; }

.mt50 {
  margin-top: 50px; }

.mr50 {
  margin-right: 50px; }

.mb50 {
  margin-bottom: 50px; }

.ml50 {
  margin-left: 50px; }

.mt60 {
  margin-top: 60px; }

.mr60 {
  margin-right: 60px; }

.mb60 {
  margin-bottom: 60px; }

.ml60 {
  margin-left: 60px; }

.mt70 {
  margin-top: 70px; }

.mr70 {
  margin-right: 70px; }

.mb70 {
  margin-bottom: 70px; }

.ml70 {
  margin-left: 70px; }

.mt80 {
  margin-top: 80px; }

.mr80 {
  margin-right: 80px; }

.mb80 {
  margin-bottom: 80px; }

.ml80 {
  margin-left: 80px; }

.mt90 {
  margin-top: 90px; }

.mr90 {
  margin-right: 90px; }

.mb90 {
  margin-bottom: 90px; }

.ml90 {
  margin-left: 90px; }

.mt100 {
  margin-top: 100px; }

.mr100 {
  margin-right: 100px; }

.mb100 {
  margin-bottom: 100px; }

.ml100 {
  margin-left: 100px; }

.mt110 {
  margin-top: 110px; }

.mr110 {
  margin-right: 110px; }

.mb110 {
  margin-bottom: 110px; }

.ml110 {
  margin-left: 110px; }

.mt120 {
  margin-top: 120px; }

.mr120 {
  margin-right: 120px; }

.mb120 {
  margin-bottom: 120px; }

.ml120 {
  margin-left: 120px; }

.mt130 {
  margin-top: 130px; }

.mr130 {
  margin-right: 130px; }

.mb130 {
  margin-bottom: 130px; }

.ml130 {
  margin-left: 130px; }

.mt140 {
  margin-top: 140px; }

.mr140 {
  margin-right: 140px; }

.mb140 {
  margin-bottom: 140px; }

.ml140 {
  margin-left: 140px; }

.mt150 {
  margin-top: 150px; }

.mr150 {
  margin-right: 150px; }

.mb150 {
  margin-bottom: 150px; }

.ml150 {
  margin-left: 150px; }

.mt160 {
  margin-top: 160px; }

.mr160 {
  margin-right: 160px; }

.mb160 {
  margin-bottom: 160px; }

.ml160 {
  margin-left: 160px; }

.mt170 {
  margin-top: 170px; }

.mr170 {
  margin-right: 170px; }

.mb170 {
  margin-bottom: 170px; }

.ml170 {
  margin-left: 170px; }

.mt180 {
  margin-top: 180px; }

.mr180 {
  margin-right: 180px; }

.mb180 {
  margin-bottom: 180px; }

.ml180 {
  margin-left: 180px; }

.mt190 {
  margin-top: 190px; }

.mr190 {
  margin-right: 190px; }

.mb190 {
  margin-bottom: 190px; }

.ml190 {
  margin-left: 190px; }

.mt200 {
  margin-top: 200px; }

.mr200 {
  margin-right: 200px; }

.mb200 {
  margin-bottom: 200px; }

.ml200 {
  margin-left: 200px; }

/*PADDING*/
.p0 {
  padding-left: 0 !important;
  padding-right: 0 !important; }

.padding5 {
  padding: 5px; }

.padding10 {
  padding: 10px; }

.padding15 {
  padding: 15px; }

.padding20 {
  padding: 20px; }

.pl5 {
  padding-left: 5px; }

.pl10 {
  padding-left: 10px; }

.pl15 {
  padding-left: 15px; }

.pl20 {
  padding-left: 20px; }

.pr5 {
  padding-right: 5px; }

.pr10 {
  padding-right: 10px; }

.pr15 {
  padding-right: 15px; }

.pr20 {
  padding-right: 20px; }

.pt5 {
  padding-top: 5px; }

.pt10 {
  padding-top: 10px; }

.pt15 {
  padding-top: 15px; }

.pt20 {
  padding-top: 20px; }

.pb5 {
  padding-bottom: 5px; }

.pb10 {
  padding-bottom: 10px; }

.pb15 {
  padding-bottom: 15px; }

.pb20 {
  padding-bottom: 20px; }

/*How tu use: @include fontface('../','helvetica_light-normal-webfont','helveticalight'); */
@font-face {
  font-family: "avenir";
  src: url("../font/2C6A5D_1_0.eot");
  src: url("../font/2C6A5D_1_0.eot?#iefix") format("embedded-opentype"), url("../font/2C6A5D_1_0.woff") format("woff"), url("../font/2C6A5D_1_0.ttf") format("truetype"), url("../font/2C6A5D_1_0.svg#avenir") format("svg");
  font-weight: normal;
  font-style: normal; }

/*How tu use: @include fontface('../','helvetica_light-normal-webfont','helveticalight'); */
@font-face {
  font-family: "avenirb";
  src: url("../font/2C6A5D_0_0.eot");
  src: url("../font/2C6A5D_0_0.eot?#iefix") format("embedded-opentype"), url("../font/2C6A5D_0_0.woff") format("woff"), url("../font/2C6A5D_0_0.ttf") format("truetype"), url("../font/2C6A5D_0_0.svg#avenirb") format("svg");
  font-weight: normal;
  font-style: normal; }

::-moz-selection {
  background: #ec3e45;
  color: white;
  text-shadow: none; }

::selection {
  background: #ec3e45;
  color: white;
  text-shadow: none; }

/*How tu use: @include inputdefault('Arial', 12px);*/
input, textarea, buttom, select {
  font-family: "avenir";
  font-size: 16px; }

.wrap {
  width: 100%;
  max-width: 810px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  clear: both; }

a {
  color: inherit; }

html {
  height: 100%; }

body {
  font-family: 'avenir';
  height: 100%; }

/****************** LAYOUT ******************/
.fullwidth {
  width: 100%;
  float: left;
  overflow: hidden; }

/**MENU**/
#unidades a[rel="unidades"],
#clientes a[rel="clientes"],
#inicio a[rel="grupo"] {
  color: #ec3e45; }

body {
  position: relative;
  padding-top: 46px; }

header {
  position: fixed;
  top: 0;
  width: 100%;
  padding: 0 0 0 0;
  /*padding: 15px 0 0 0;*/
  border-bottom: 1px solid #afafaf;
  z-index: 40;
  background: #FFF;
  min-height: 46px; }
  header a[rel="logo"] {
    /*border: 1px solid blue;****/
    margin-top: 7px;
    float: left; }
  header .idioma {
    text-align: left;
    float: left;
    padding-left: 0;
    padding-right: 10px; }
    header .idioma button {
      -webkit-transition: all 200ms ease;
      -moz-transition: all 200ms ease;
      -o-transition: all 200ms ease;
      -ms-transition: all 200ms ease;
      transition: all 200ms ease;
      background: #ebebeb;
      padding: 5px 7px;
      color: #000;
      display: inline-block;
      border: none;
      border-radius: 0;
      font-size: 12px;
      margin-top: 7px;
      margin-left: 20px; }
  header .navbar {
    min-height: 0; }
  header .nav {
    margin-top: 7px;
    /*margin-top: 16px;
    margin-bottom: 25px;*/ }
    header .nav > li {
      font-size: 16px;
      top: 2px;
      z-index: 1; }
      header .nav > li a {
        /*padding: 10px 0;*/
        padding: 0;
        padding-bottom: 15px;
        margin: 0 15px; }
        header .nav > li a:hover {
          color: #ec3e45;
          background: none;
          font-style: none; }
        header .nav > li a:focus {
          background: none; }
        header .nav > li a.activo {
          color: #ec3e45;
          background: url("../images/arrow-unidades.jpg") no-repeat center bottom; }
    header .nav .open > a {
      background: none; }
      header .nav .open > a:hover, header .nav .open > a:focus {
        background: none;
        color: #ec3e45; }
  header .dropdown-menu {
    border: 1px solid #afafaf;
    border-radius: 0;
    box-shadow: none;
    left: 15px; }
    header .dropdown-menu a {
      /*padding:2px 0 !important;*/
      text-align: right; }
  header .nav-pills > li.active > a, header .nav-pills > li.active > a:hover, header .nav-pills > li.active > a:focus {
    color: #ec3e45;
    background-color: transparent; }

.navbar {
  margin: 0; }
  .navbar .nav-pills > li a {
    margin-right: 0 0 0 30px; }

.nav-pills a:focus {
  color: black; }

.menunidades {
  border-bottom: 2px solid #e8e8e8;
  display: none; }
  .menunidades .wrap nav {
    border-top: 1px solid #d0d0d0; }
  .menunidades .wrap ul li {
    display: inline-block;
    vertical-align: top;
    margin-left: 27px;
    font-size: 13px; }
    .lt-ie8 .menunidades .wrap ul li, .lt-ie7 .menunidades .wrap ul li {
      float: left; }
    .menunidades .wrap ul li a {
      display: block;
      padding: 12px 0;
      -webkit-transition: all 200ms ease;
      -moz-transition: all 200ms ease;
      -o-transition: all 200ms ease;
      -ms-transition: all 200ms ease;
      transition: all 200ms ease; }
      .menunidades .wrap ul li a.active, .menunidades .wrap ul li a:hover {
        color: #ec3e45; }
    .menunidades .wrap ul li:first-child {
      margin-left: 0; }

#unidades.marketing .menunidades .wrap ul li a[rel="marketing"],
#unidades.publicidad .menunidades .wrap ul li a[rel="publicidad"],
#unidades.pr .menunidades .wrap ul li a[rel="pr"],
#unidades.medios .menunidades .wrap ul li a[rel="medios"],
#unidades.eventos .menunidades .wrap ul li a[rel="eventos"],
#unidades.management .menunidades .wrap ul li a[rel="management"],
#unidades.editorial .menunidades .wrap ul li a[rel="editorial"],
#unidades.social-media .menunidades .wrap ul li a[rel="social-media"],
#unidades.estadisticas .menunidades .wrap ul li a[rel="estadisticas"] {
  color: #ec3e45; }

#inicio .banner {
  /*height: 870px;*/
  margin-bottom: 150px; }
  #inicio .banner h3 {
    font-size: 26px;
    margin-top: 140px;
    margin-left: 20px; }
  #inicio .banner .parallax-window-banner {
    min-height:840px;
    position: relative;
    background-size: 100%; }
    #inicio .banner .parallax-window-banner .contenedorr-banner {
      position: absolute;
      top: 0;
      border: 1px solid red; }

.relative {
  position: relative; }

.content {
  min-height: 100%;
  height: auto !important;
  /* This line and the next line are not necessary unless you need IE6 support */
  height: 100%;
  margin: 0 auto -28px;
  /* the bottom margin is the negative value of the footer's height */ }

footer {
  font-size: 13px;
  padding: 25px 0;
  margin-top: 60px;
  border-top: 1px solid #afafaf;
  position: relative;
  height: 88px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }
  footer div a {
    -webkit-transition: all 200ms ease;
    -moz-transition: all 200ms ease;
    -o-transition: all 200ms ease;
    -ms-transition: all 200ms ease;
    transition: all 200ms ease; }
    footer div a:hover {
      opacity: 0.5; }
  footer .social a {
    margin: 0 7px;
    -webkit-transition: all 200ms ease;
    -moz-transition: all 200ms ease;
    -o-transition: all 200ms ease;
    -ms-transition: all 200ms ease;
    transition: all 200ms ease; }
  footer .idioma {
    text-align: left;
    float: left;
    padding-left: 0;
    padding-right: 10px; }
    footer .idioma button {
      -webkit-transition: all 200ms ease;
      -moz-transition: all 200ms ease;
      -o-transition: all 200ms ease;
      -ms-transition: all 200ms ease;
      transition: all 200ms ease;
      background: #ec3e45;
      padding: 7px 25px;
      color: #fff;
      display: inline-block;
      border: none;
      border-radius: 0; }
  footer .puntopy {
    font-size: 12px;
    text-align: right; }
  footer .dropdown-menu {
    box-shadow: none;
    border-radius: 0;
    top: -120px; }

/*****************
internas
****************/
.banner-small {
  background: url(../images/banner-small.jpg) no-repeat center center;
  height: 300px;
  overflow: hidden; }
  .banner-small h2 {
    font-size: 32px;
    margin-top: 180px; }

.title-big {
  padding: 50px 0;
  overflow: hidden;
  /*border: 1px solid blue;*/
  clear: both; }
  .title-big h2 {
    font-size: 25px;
    /*font-size: 30px;*/ }

.container {
  width: 100%;
  height: auto;
  overflow: hidden; }
  .container h1 {
    font-size: 38px;
    /*font-size: 41px;*/
    font-family: 'avenirb';
    color: #626262;
    /*margin-bottom: 60px;*/ }
  .container .lista {
    margin-bottom: 40px; }
    .container .lista article {
      position: relative;
      margin-bottom: 30px;
      /*border: 1px solid blue;*/
      -webkit-transition: all 200ms ease;
      -moz-transition: all 200ms ease;
      -o-transition: all 200ms ease;
      -ms-transition: all 200ms ease;
      transition: all 200ms ease; }
      .container .lista article:hover img {
        opacity: 0.1; }
      .container .lista article:hover figcaption {
        z-index: 999;
        opacity: 1; }
    .container .lista figure {
      background: #ec3e45;
      width: 100%;
      overflow: hidden;
      height: 182px; }
      .container .lista figure img {
        float: left;
        max-height: 100%;
        width: auto; }
    .container .lista figcaption {
      -webkit-transition: all 200ms ease;
      -moz-transition: all 200ms ease;
      -o-transition: all 200ms ease;
      -ms-transition: all 200ms ease;
      transition: all 200ms ease;
      opacity: 0;
      left: 10px;
      right: 10px;
      text-align: center;
      height: 182px;
      top: 0;
      position: absolute;
      padding: 20px;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      box-sizing: border-box; }
      .container .lista figcaption.detalle {
        text-align: left;
        color: #fff; }
        .container .lista figcaption.detalle h3 {
          font-size: 31px; }
        .container .lista figcaption.detalle h4 {
          font-size: 15px; }
      .container .lista figcaption.big {
        height: 265px; }
      .container .lista figcaption p {
        position: relative;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        font-size: 22px;
        color: #fff; }
    .container .lista .frase h3 {
      font-size: 31px;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      padding-right: 13%; }
    .container .lista.logos article {
      overflow: hidden; }
      .container .lista.logos article figure {
        padding-top: 50px;
        padding-bottom: 50px;
        margin: 0;
        background: #666; }
        .container .lista.logos article figure:hover {
          background: #ec3e45 !important; }
      .container .lista.logos article figcaption {
        background: #ec3e45;
        height: 140px;
        margin: 0 5px; }
  .container .datos {
    margin-bottom: 50px; }
    .container .datos p {
      font-size: 12px; }
    .container .datos h3 {
      font-size: 16px; }

#inicio h2 {
  font-size: 38px;
  font-family: 'avenirb';
  color: #626262;
  margin-bottom: 60px; }
#inicio h3 {
  font-size: 28px;
  padding-bottom: 160px; }

h4.informativos {
  font-size: 25px;
  padding-bottom: 160px; }

h1.informativos {
  font-size: 25px;
  padding-bottom: 160px; }

.banner-interna {
  margin-top: 40px;
  position: relative;
  height: auto;
  float: left;
  clear: both; }
  .banner-interna .flexslider {
    border: none;
    box-shadow: none;
    margin: 0; }
    .banner-interna .flexslider .slides li {
      position: relative; }
    .banner-interna .flexslider .flex-control-paging {
      bottom: 40%;
      float: left;
      text-align: left;
      padding: 0 27px; }
      .banner-interna .flexslider .flex-control-paging a {
        background: #fff;
        box-shadow: none; }
        .banner-interna .flexslider .flex-control-paging a.flex-active {
          background: #fff200; }
  .banner-interna figcaption {
    background: rgba(233, 28, 36, 0.8);
    color: #fff;
    position: absolute;
    top: 0;
    padding: 45px 30px;
    height: 100%; }
    .banner-interna figcaption h3 {
      font-size: 30px;
      margin-bottom: 12px; }
    .banner-interna figcaption h4 {
      font-size: 16px; }
  .banner-interna figure {
    /*border: 1px solid red;*/
    height: 100%;
    width: 100%; }
    .banner-interna figure img {
      float: left;
      height: auto;
      max-width: 100%;
      /*border: 1px solid blue;*/
      /*min-height: 500px;
      max-width: 100%;
      width: auto;
      height: auto;*/ }

.container-revista {
  background: #253139;
  padding: 20px 0; }

.fancybox-nav span {
  height: 100px !important;
  width: 42px !important;
  top: 40% !important; }

.fancybox-prev {
  left: -80px !important; }
  .fancybox-prev span {
    background: url("../images/arrow-left.png") center center !important;
    border: 1px solid blue;
    height: 100px; }

.fancybox-next {
  right: -80px !important; }
  .fancybox-next span {
    background: url("../images/arrow-right.png") center center !important;
    border: 1px solid blue;
    height: 100px; }

/*********************
generales
***********************/
.paginador {
  width: auto;
  margin-top: 50px; }
  .paginador ul {
    display: inline-block; }
    .paginador ul li {
      float: left; }
      .paginador ul li a {
        font-size: 18px;
        padding: 10px 15px;
        margin-right: 3px;
        margin-left: 3px;
        height: 15px;
        /*@include botones;*/
        -webkit-transition: all 200ms ease;
        -moz-transition: all 200ms ease;
        -o-transition: all 200ms ease;
        -ms-transition: all 200ms ease;
        transition: all 200ms ease; }
        .paginador ul li a.activo {
          color: #fff; }
        .paginador ul li a:hover {
          opacity: 0.5; }

.img-grande {
  width: 100%;
  height: auto;
  padding: 0;
  margin-bottom: 100px;
  text-align: center; }
  .img-grande img {
    max-width: 100%; }

.pagination-centered {
  text-align: center;
  margin-bottom: 30px; }

/*@import "sizes.scss";*/
.flexslider {
  /*border: 5px solid blue !important;*/
  width: 100%;
  height: 300px; }

.banner-eventos {
  transform: translate3d;
  width: 100%; }

.parallax-window {
  min-height: 400px;
  background: transparent; }
  .parallax-window img {
    width: 100% !important; }

.scrollblock {
  height: 100px;
  position: relative;
  width: 100%; }
  .scrollblock .corcho1 {
    display: block;
    width: 100%;
    position: absolute;
    top: 0; }

.btn-responsive {
  display: none;
  font-size: 20px;
  margin-top: 13px;
  height: 15px;
  width: 16px;
  background: url(../images/btn-resposive.png) no-repeat left top; }

.navbar-responsive {
  display: none; }

header .nav.nav-stacked {
  display: none; }
  header .nav.nav-stacked > li a {
    position: relative;
    top: 1px; }
    header .nav.nav-stacked > li a > a.active {
      background: url("../images/arrow-unidades.jpg") no-repeat scroll center bottom rgba(0, 0, 0, 0);
      color: #ec3e45; }
  header .nav.nav-stacked > li ul {
    display: none;
    border-top: 1px solid #d0d0d0;
    border-bottom: 1px solid #d0d0d0;
    padding: 10px 0;
    margin-bottom: 10px; }
    header .nav.nav-stacked > li ul li {
      display: block;
      float: none; }
      header .nav.nav-stacked > li ul li a {
        display: block;
        font-size: 14px;
        padding-top: 5px;
        padding-bottom: 5px; }
        header .nav.nav-stacked > li ul li a:hover {
          color: #ec3e45;
          background: none;
          font-style: none !important; }

/*****************************************************
                 MEDIA-QUERIES                                         
***************************************************/
/************* MAX WIDTH 1000PX **********************/
@media screen and (max-width: 1000px) {
  header .row, footer .row {
    margin: 0; }

  /*header .nav.nav-stacked { display: none !important; }*/
  .container .lista img {
    opacity: 0.2; }
  .container .lista figcaption {
    z-index: 999;
    opacity: 1; }

  footer .wrap .row > .col-xs-12 > div:last-child {
    text-align: center;
    margin-top: 10px; }

  #unidades .content .wrap .row {
    margin-left: 0;
    margin-right: 0; }

  .container h1 {
    font-size: 36px; }

  .title-big h2 {
    font-size: 24px; } }
@media screen and (max-width: 991px) {
  .container .lista figure img {
    max-width: 100%;
    max-height: none; } }
/************* MAX WIDTH 840PX **********************/
@media screen and (max-width: 840px) {
  /* HEADER */
  header .navbar {
    display: none; }

  .menu {
    width: 100%;
    text-align: center; }

  header .navbar.navbar-responsive {
    display: block; }

  .btn-responsive {
    display: block; }

  #menunidades {
    height: 0;
    overflow: hidden;
    border: none; } }
/************* MAX WIDTH 780PX **********************/
@media screen and (max-width: 780px) {
  .parallax-window-banner {
    min-height: 420px !important; }

  .parallax-window {
    min-height: 420px !important; }

  .parallax-window-banner img {
    opacity: 0.5; }

  #unidades .parallax-window {
    min-height: 420px !important; }

  /* INICIO */
  #inicio .banner {
    margin-bottom: 80px; }
    #inicio .banner h3 {
      margin-top: 80px; }

  #inicio h3 {
    font-size: 26px;
    padding-bottom: 80px; }

  #inicio h2 {
    font-size: 36px; } }
@media screen and (max-width: 767px) {
  #inicio .contenedor-banner {
    height: 100%; }
    #inicio .contenedor-banner .col-xs-12 {
      height: 100%; }
      #inicio .contenedor-banner .col-xs-12 h3 {
        height: 100%;
        margin-left: -15px;
        margin-right: -15px;
        text-align: center;
        background-color: rgba(0, 0, 0, 0.7);
        padding: 120px 20px;
        margin-top: 0px;
        color: #FFF; } }
        

/************* MAX WIDTH 720PX **********************/
@media screen and (max-width: 720px) {
  footer .wrap .row > .col-xs-12 > div {
    width: 100%;
    text-align: center;
    margin-bottom: 10px; } }
/************* MAX WIDTH 640PX **********************/
/************* MAX WIDTH 540PX **********************/
@media screen and (max-width: 540px) {
  #publicidadBox {
    padding: 60px 30px !important; } }
/************* MAX WIDTH 460PX **********************/
@media screen and (max-width: 460px) {
  .container .lista article {
    width: 100%; } }
/************* MAX WIDTH 430PX **********************/


/* Contenedor del logo. Importante para el posicionamiento. */
.tooltip-container {
    position: relative; 
    display: inline-block; /* Asegura que se comporte bien en línea */
    vertical-align: middle; /* Ayuda a alinear las imágenes si tienen alturas diferentes */
    -webkit-tap-highlight-color: transparent; /* Quita el destello azul al tocar en móviles */
}

/* El cuerpo del tooltip (el texto) */
.tooltip-container::after {
    /* --- Estilo y Contenido --- */
    content: attr(data-tooltip); 
    background-color: rgba(0, 0, 0, 0.85);
    color: #fff;
    font-family: sans-serif;
    font-size: 14px;
    line-height: 1.4;
    padding: 8px 12px;
    border-radius: 5px;
    text-align: center;
    box-sizing: border-box;

    /* --- Comportamiento del texto --- */
    white-space: normal; /* PERMITE que el texto se divida en varias líneas */
    width: max-content;  /* El tooltip se ajusta al texto... */
    max-width: 280px;    /* ...pero sin pasarse de este ancho en escritorio */

    /* --- Posición (65% sobre la imagen) --- */
    position: absolute;
    top: 65%;
    left: 50%;
    transform: translateX(-50%);

    /* --- Estado Inicial (Oculto) --- */
    opacity: 0;
    visibility: hidden;
    pointer-events: none; /* No interfiere con el cursor cuando está oculto */
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 9999; /* Un z-index alto para que aparezca por encima de todo */
}

/* La flecha no la usaremos, queda oculta */
.tooltip-container::before {
    display: none; 
}

/* --- LÓGICA DE VISIBILIDAD --- */
/*
 * En escritorio, mostramos con :hover para una experiencia rápida.
 * El JS también añade .tooltip-visible al hacer clic, por si el usuario prefiere fijarlo.
*/
.tooltip-container:hover::after,
.tooltip-container.tooltip-visible::after {
    opacity: 1;
    visibility: visible;
}


/* ============================================= */
/* ===         AJUSTES PARA MÓVILES          === */
/* ============================================= */
@media (max-width: 768px) {
  
    /* Anulamos el :hover en móviles para que SOLO funcione con el toque */
    .tooltip-container:hover::after {
        opacity: 0;
        visibility: hidden;
    }

    /* Mostramos el tooltip SOLO cuando tenga la clase .tooltip-visible */
    .tooltip-container.tooltip-visible::after {
        opacity: 1;
        visibility: visible;
    }
  
    .tooltip-container::after {
        /* Hacemos el tooltip más grande y adaptable al ancho de la pantalla */
        width: auto; 
        max-width: 90vw; /* El tooltip ocupará hasta el 90% del ancho del dispositivo */
        
        /* Posicionamiento inteligente para que no se salga de la pantalla */
        left: 50%;
        transform: translateX(-50%);

        /* Centramos el tooltip horizontalmente si se sale de la pantalla */
        /* Estas líneas son una salvaguarda */
        margin-left: auto;
        margin-right: auto;
    }
}