﻿
/* === GLOBAL STYLES === */


h1, h2, h3, h4, h5, h6, p {
  font-family: 'Inter', sans-serif;
  margin-top: 10px;
  margin-bottom: 10px;
  color: #2a669a;
}

/* === BASE STYLES (Mobile First) === */ 
h1 {
  font-size: 1.75rem;    
  line-height: 2rem;
  font-weight: bold;
}

h2 {
  font-size: 1.5rem;      
  line-height: 1.8rem;
  font-weight: bold;
}

h4 {
  font-size: 1.15rem;    
  line-height: 1.6rem;
  font-weight: bold;
}

h5 {
  font-size: 1.25rem;    
  line-height: 1.5rem;
  color: #e82a18;
  font-weight: bold;
}

.h5 {
  font-size: 1.25rem;    
  line-height: 1.5rem;
  color: #e82a18;
  font-weight: bold;
}

p {
  font-size: 0.95rem;     
  line-height: 1.5rem;
  color: #000;
}

/* === DESKTOP (≥ 992px) === */
@media screen and (min-width: 992px) {
  h1 {
    font-size: 2.655rem;   
    line-height: 3rem;
  }

  h2 {
    font-size: 2.2rem;    
    line-height: 2.8rem;
  }

  h4 {
    font-size: 1.5rem;    
    line-height: 1.9rem;
  }

  h5 {
    font-size: 1.5rem;    
    line-height: 1.8rem;
  }

  p {
    font-size: 1rem; 
    line-height: 1.5rem;
  }
}

/* === DESKTOP (≥ 1024px) === */
@media screen and (min-width: 1200px) {
  h1 {
    font-size: 2.655rem;   
    line-height: 3rem;
  }

  h2 {
    font-size: 2.2rem;    
    line-height: 2.8rem;
  }

  h4 {
    font-size: 1.5rem;    
    line-height: 1.9rem;
  }

  h5 {
    font-size: 1.5rem;    
    line-height: 1.8rem;
  }

  p {
    font-size: 1.615rem; 
    line-height: 1.5rem;
  }
}



/* ===  Contenido */
.contenido {
  p {
	  
	    color:#4a5568;               /* gris neutro */
		font-weight:400;
		line-height:1.35;
		font-size:22px; 
		text-align:justify;
  }
}


.text-primary
{
	
color:#2a669a !important;	
}

#video-background{
	pointer-events: none;
    width: 100vw;
    transition: .4s;
}

.div-video{
    width: 100%;
    overflow: hidden;
    position: relative;
}

img-content{
	max-width: 100%;
	height: auto;
}

.language-object .Language {
    padding-right: 10px;
}

.sectionBs5{
	padding-left:3rem;
	padding-right:3rem;
}

@media screen and (max-width: 768px) {
	
.sectionBs5{
	padding-left:0px;
	padding-right:0px;
}
}

.slick-arrow {
    z-index: 99;
    width: 50px;
    height: 50px;
}


.slick-prev {
  left: 2rem;
}

.slick-next {
  right: 2rem;
}

.a-left.control-c{  
	-webkit-mask:url("/Portals/_default/skins/cubatraveltheme/images/arrow-prev.png") center/contain;
			mask:url("/Portals/_default/skins/cubatraveltheme/images/arrow-prev.png") center/contain; 
			background:white !important;
}

.a-right.control-c{  
	-webkit-mask:url("/Portals/_default/skins/cubatraveltheme/images/arrow-next.png") center/contain;
			mask:url("/Portals/_default/skins/cubatraveltheme/images/arrow-next.png") center/contain; 
			background:white !important;
}


@media screen and (max-width: 768px) {
	.control-c {
		width:25px;
		height:25px;
	}
}


.container-breadcrumb {
    background: rgb(251, 251, 251);
	font-size: .75rem;
    color: #2a669a;;
    top: -.15rem;
	position: relative !important;
	a, a:visited, a:hover  {
		color: #2a669a;;
		text-decoration: none;
	}
	padding:1rem;
	.breadcrumb{
		margin-top: auto !important;
		margin-bottom: auto !important;
	}
}

.navbar {
	@media (min-width: 1200px) {
		.container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
			max-width: 90%;
		}
	} 
}

.contentPane
{
	background-color : #fff;
}

.contentPaneAlt
{
	background-color : #f9f9f9;
}

@media (min-width: 992px) {
    .content .featured-text {
        padding-bottom: 1rem;
        font-size: 1.25rem;
        line-height: 28px;
    }
}

.content .featured-text {
    font-weight: 400;
    font-size: 1rem;
    color: rgba(2, 31, 60, 0.87);
    letter-spacing: 0;
}

.card {
  margin: 0 0.5em;
  overflow: hidden;
  border: 0px !important;
}

.card-over{
	margin-top: -3rem;
}

.card .card-blue{
	background-color:#2a669a;
	color:#fff;
	/*text-transform: uppercase;*/
	a{
	text-decoration : none;
	color:#fff;
	}
	a:visited {
		text-decoration : none;
		color:#fff;
	}
	h3{
		color:#fff;
	}
}

.card-on-card {
    margin-top: -1rem;
    margin-bottom: 1 rem;
    background-color: #fff;
    position: relative;
    z-index: 100;
	box-shadow: 2px 1px 5px 2px rgba(0, 0, 0, 0.2);

}

.card-on-card .title {
	color:#000;
	/*text-transform: uppercase;*/
	font-weight:bold;
	font-size : 1.15rem;
	margin-top:.5rem;
	margin-bottom:0;
}

.card-on-card .subtitle{
	color:gray;
	font-size : .75rem;
	font-weight:bold;
}

.card-on-card a{
	/*text-transform: uppercase;*/
	font-size : .85rem;
	color:red;
	font-size:small;
}

.card-img-overlay .title {
	font-family:'Inter';
	/*text-transform: uppercase;*/
	font-weight:bold;
	font-size : 1.15rem;
	margin-bottom: 0px !important;
}

.card-img-overlay {
	a{
	text-decoration : none;
	color:#fff;
	}
	a:visited {text-decoration : none;
	color:#fff;
	}
	h3{
			color:#fff;

	}
}

.card-img-overlay .subtitle {
	font-family:'Inter';
}

.card-img-overlay .date-stiker {
	position : absolute;
	top: -1rem;
	
	label{
		position: absolute;
        color: #fff;
        cursor: pointer;
        &.first-title {
			left:2rem;
			font-size: 2.25rem;
			top:.25rem;
        }  
        &.second-title{
          top:2.75rem;
		  left:2.25rem;
		  font-size:1rem;
		  padding-right:1rem;
        }
    }
}

.img-tag-wrapper {
	background:linear-gradient(0deg, rgba(0, 0, 0, 0.53) 0%, rgb(67 67 66 / 32%) 100%); /* #00000069;*/
    padding: .5rem;
    margin-left: -1rem;
	width:100%
}

.EventCards .img-wrapper .card-img{
	margin-top:4px;
	
    min-height: 200px !important;

}
.img-wrapper{
	
    min-height: 200px !important;

}

.EventCards .card{
	padding-top: 16px;
}

.EventCards .card-img-overlay .date-stiker{
	top:0px;
}

.slide-title-wrapper {
	position:absolute;
	top:50%;
	text-align: center;
	left: 0;
    right: 0;

}

.slide-title-wrapper {
	.title {
		font-family: 'Inter';
		font-size: 3.5rem;
		line-height: 1rem;
		font-weight:bold;
	}
	.subtitle{
		font-size:1.75rem;
		font-weight:bold;
		line-height:1.5rem;
	}
}

@media screen and (max-width: 768px) {
	.slide-title-wrapper{
		.title {
			font-size: 1.5rem;
			line-height: .75rem;
		}
		.subtitle{
			font-size:.85rem;
			line-height:.75rem;
		}
	}

}

.card-img-overlay .index {
	color:#fff;
	font-size: 9rem;
	margin-top: -2.5rem;
	font-weight: bolder;
	font-family: 'Inter';
	
	text-decoration: underline;
	text-decoration-thickness: 8px; /* o un valor más pequeño */
	text-decoration-style: solid;
	text-decoration-color: #e82a18;
	text-underline-offset: 1rem;
	

}

.heading_wrapper{
	margint-bottom : 1rem;
}

.heading_wrapper .subtitle{
	color: #E71C03;
    text-shadow: 0 2px 4px rgba(255,255,255,0.5);
    background-image: linear-gradient(0deg, #fff 85%, rgba(255,255,255,0) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: #E71C03;
	/*text-transform: uppercase;*/
    margin-bottom: 10px;
	font-weight: bold;
    font-size: 1.15rem;    
	display: inline-block;

}

.heading_wrapper .title{
	font-family: 'Inter';
	font-size: 2rem;
    font-weight: bold;
    color: #2a669a;
}

.heading_wrapper .description{
	font-family: 'Inter';
	font-weight:normal;
	font-size: 1.25rem;
	line-height:1.5rem;
    color: #525252;
}

.icons-links {
    display: inline-block;
    width: 100%;
    margin-top: 30px
}

.icons-links .text-center{
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-around;
    min-height: 90px;
    font-size: 1rem;
    font-weight: 700;
    font-size: 16px;
    color: #000;
    letter-spacing: 0.6px;
    text-align: center; 
	text-decoration:none;
}

    .MainSliderTitle .slick-slide {
      margin: 0 !important; /* Removes default margins */
      padding: 0 !important; /* Removes default padding */
    }
	
	.MainSlider .slick-slide {
      margin: 0 !important; /* Removes default margins */
      padding: 0 !important; /* Removes default padding */
    }

@media screen and (min-width: 768px) {
    .icons-links {
        margin-top:0
    }
}

.icons-links [class*="icon-"] {
    font-size: 6em;
    display: block;
    padding: 1.5rem 0;
    background: #f0f0f0
}

.text-center {
    margin: 0 auto;
}

.select-idioma-container{
	font-family:'Inter';
}

.select-idioma-container select {
	border: 2px white solid;
	color:white;
	background-color: transparent;
	height: 2.18rem;
	margin-bottom: 0.5rem;
}

.select-idioma-container select option {
	color:initial;
}

.select-idioma-container .bi-search {
	margin-left: 0.5rem;
    fill: white;
	vertical-align: top;
}

.select-idioma-container button {
    display: block;
    border: 0;
    height: 2.375rem;
	font-size: 0.8rem;
    font-weight: 700;
    color: #01669e;
}

.select-idioma-container span {
	color: white;
    font-size: 0.9rem;
}

@media screen and (min-width: 768px) {
	.select-idioma-container select {
	width: 15rem;}
	.select-idioma-container button {
	width: 15rem;}
}


/* ESTILOS A CONSIDERAR */

header {
    position: absolute;
    width: 100%;
}

@media (max-width: 768px) {
   header {
    position: relative !important;
	background-color: #2a669a;
    width: 100%;
} 
}

#dnn_HeaderPane {
    margin-top: 0 !important;
}

header>.navbar {
    z-index: 99;
}

@media (min-width: 768px) {
	#dnn_HeaderPane {
		margin-top: -6rem;
	}
}

@media screen and (max-width:767px) {
	.heading_wrapper .title
	{
		font-size: 1.25rem;
	}
	.heading_wrapper .subtitle{
	    font-size: .75rem;
	}
}

footer h3{
	  color: #fff;
}

.footer-above{
	color:white;
	height:500px;
	background-image: url(images/capitolio-footer.png);	

    background-position: left bottom; /* Posiciona la imagen en la esquina inferior izquierda */
    background-size: auto 100%; /* La altura es el 100% del contenedor, y el ancho se ajusta proporcionalmente */
    background-repeat: no-repeat; /* Evita que la imagen se repita */
	font-size: 1.375rem;

}

#logo-footer{
	height:80px;
}

.footer-above a{
	text-decoration : none;
	color:white;
}

.footer-above a:visited {
	color:white;
    text-decoration: none;
}

.footer-above ul{
    list-style: none;
}

.footer-above {
	min-height:10rem;
	background-color:#063665;
	 #01112b
}

.footer-below {
	color:#fff;
	max-height:50px;
	background-color:#01112b;
}

.footer .footer-above
{
	 background-image: url("images/capitolio-footer.png");
	 background-repeat :no-repeat;
	 min-height : 520px;
}

.footer-above {
    position: relative;
    background-color: #003665; /* Color azul de fondo */
    color: white;
    padding: 20px;
}

.footer-above::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0;
    height: 0;
    border-left: 24rem solid transparent;
    border-bottom: 18rem solid #b8291d; /* Ajusta el tamaño y color del triángulo */
}

@media (max-width: 767px) {
	.footer-above::after {
		border-left: 12rem solid transparent;
		border-bottom: 7rem solid #b8291d; /* Ajusta el tamaño y color del triángulo */
	}
}

@media (min-width: 768px) and (max-width:1023px) {
	.footer-above::after {
		border-left: 18rem solid transparent;
		border-bottom: 12rem solid #b8291d; /* Ajusta el tamaño y color del triángulo */
	}
}


.social-links a {
    color: #fff;
    background: none;
    padding: 7px;
    border-radius: 50%;
    display: inline-block;
    width: 46px;
    text-align: center;
	font-size: 1.675rem;
}

.instagram-section {
		text-align: center;
		margin: 40px 0;
	}

.instagram-section h2 {
	font-weight: bold;
}

.instagram-section img {
	width: 100%;
	object-fit: cover;
	border-radius: 10px;
}

.instagram-icon {
	font-size: 1.5rem;
	margin-left: 5px;
	color: #000;
}
		
.zoom-in{
	overflow:hidden;
}

.zoom-in:hover img{
	transform: scale(1.05);
	-webkit-transform: scale(1.05);
	-moz-transform: scale(1.05);
	-ms-transform: scale(1.05);
	-o-transform: scale(1.05);
}

.zoom-in img{
	transition: all .5s ease-in-out;
	-webkit-transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
	-ms-transition: all .5s ease-in-out;
	-o-transition: all .5s ease-in-out;
}
		
.breadcrumb{
	display:flex;
	align-items:center;
	min-height:50px;
	margin: 0px;
}
	
.breadcrumb-item+.breadcrumb-item::before{
content:"-" !important;
color:white;
}	


/* Activo: azul + bold (soporta class .active o aria-current="page") */
.breadcrumb .breadcrumb-link.active{
  color:#46A9FF;               
  font-weight:700;
}


.breadcrumb a{
	color:white;
	text-decoration:none;
}

.breadcrumb a:hover{
	color:white;
}

/* Reset básico para la lista */
.menu-root{
  list-style:none;
  margin:0;
  padding:0;
  
}

/* Pila vertical, separación pareja */
.menu-root .menu-item{
  margin: 6px 0;              /* ajusta el espacio vertical */
  font-size:1.435rem;
}

/* Enlaces: tipografía limpia y sin subrayado */
.menu-root .menu-link{
  display:block;
  text-decoration:none;
  color:#4a5568;               /* gris neutro */
  font-weight:400;
  line-height:1.35;
}

/* Activo: azul + bold (soporta class .active o aria-current="page") */
.menu-root .menu-link.active,
.menu-root .menu-link[aria-current="page"]{
  color:#2a669a;               /* tu azul corporativo */
  font-weight:700;
}

/* Hover/focus: feedback sutil */
.menu-root .menu-link:hover,
.menu-root .menu-link:focus{
  color:#2a669a;
}



.titulo-principal + h1{
	color:white;
	font-size: 2.025rem;
	font-weight: 800;
    text-transform: uppercase;
	position:relative;
	top:7px;
}



.bg-primary-color{
background-color: #2a669a;
}

.header-mobile .logo-color{ display:none} /* siempre oculto para desktop */


/* ================================
   PHONE: ≤ 767.98px
===================================*/
@media (max-width: 767.98px){

  /* Header */
	.header-mobile .is-sticky .logo-color{display:block; !important;}
    .header-mobile .is-sticky .logo-white{display:none; !important;}


  /* CTA */
  .header-mobile .btn-reserva-mobile{
    display:inline-flex; align-items:center; gap:.35rem;
    padding:.35rem .75rem; font-size:.85rem; font-weight:800; line-height:1.1;
    border:0; border-radius:.5rem;
    background:#fff; color:#2a669a !important;
  }
  .header-mobile.is-sticky .btn-reserva-mobile{
    background:#46abe0; color:#fff !important;
  }

  /* Secciones a pantalla completa con snap */
  .snap-container{
    scroll-snap-type: y mandatory;
    overflow-y:auto;
    height:100vh; height:100svh; height:100dvh;
    -webkit-overflow-scrolling:touch;
    background:#fff;
  }
  .section-fullvh{
    min-height:100vh; min-height:100svh; min-height:100dvh;
    display:flex; flex-direction:column; justify-content:center;
    padding:16px clamp(12px, 4vw, 24px);
    scroll-snap-align:start; background:#fff; box-sizing:border-box;
    padding-top:calc(16px + env(safe-area-inset-top));
    padding-bottom:calc(16px + env(safe-area-inset-bottom));
  }
  .has-sticky-header .section-fullvh{ min-height:calc(100dvh - 86px); }

  /* Footer */
  .footer-cubamaps .fw-bold{ letter-spacing:.3px; text-transform:uppercase; }
  .footer-cubamaps .footer-link{ color:#fff; text-decoration:none; display:inline-block; opacity:.9; }
  .footer-cubamaps .footer-link:hover{ text-decoration:underline; opacity:1; }
  .footer-cubamaps ul{ padding-left:0; } .footer-cubamaps li{ list-style:none; }

  .footer-cubamaps.section-fullvh{
    min-height:100vh; min-height:100dvh;
    display:flex; flex-direction:column; justify-content:flex-end;
    background-position: top center; background-repeat:no-repeat; background-size:cover;
    padding-top:0 !important;
  }
  .footer-cubamaps .row{ margin-top:0; margin-bottom:0; }
  .footer-cubamaps hr{ margin-top:1rem; margin-bottom:1rem; }

  /* Layout fixes */
  html, body{ overflow-x:hidden; }
  .footer-cubamaps .row{ --bs-gutter-x:0; margin-left:0; margin-right:0; }
  .footer-cubamaps [class*="col-"]{ padding-left:.75rem; padding-right:.75rem; }
  .footer-cubamaps img{ max-width:100%; height:auto; display:block; }
}


/* =====================================
   TABLET: 768px – 979.98px  (iPad incluído)
========================================*/
@media (min-width: 768px) and (max-width: 979.98px){

  /* Header */
  .header-mobile .is-sticky .logo-color{display:block; !important;}
  .header-mobile .is-sticky .logo-white{display:none; !important;}



  /* CTA un poco más grande en tablet */
  .header-mobile .btn-reserva-mobile{
    display:inline-flex; align-items:center; gap:.4rem;
    padding:.45rem .9rem; font-size:.95rem; font-weight:800; line-height:1.1;
    border:0; border-radius:.55rem;
    background:#fff; color:#2a669a !important;
  }
  
  .header-mobile.is-sticky .btn-reserva-mobile{
    background:#46abe0; color:#fff !important;
  }

  /* Secciones a pantalla completa con snap */
  .snap-container{
    scroll-snap-type:y mandatory;
    overflow-y:auto;
    height:100vh; height:100svh; height:100dvh;
    -webkit-overflow-scrolling:touch;
    background:#fff;
  }
  .section-fullvh{
    min-height:100vh; min-height:100svh; min-height:100dvh;
    display:flex; flex-direction:column; justify-content:center;
    padding:20px clamp(16px, 3vw, 28px);
    scroll-snap-align:start; background:#fff; box-sizing:border-box;
    padding-top:calc(20px + env(safe-area-inset-top));
    padding-bottom:calc(20px + env(safe-area-inset-bottom));
  }
  .has-sticky-header .section-fullvh{ min-height:calc(100dvh - 90px); }

  /* Footer */
  .footer-cubamaps .fw-bold{ letter-spacing:.35px; text-transform:uppercase; }
  .footer-cubamaps .footer-link{ color:#fff; text-decoration:none; display:inline-block; opacity:.9; }
  .footer-cubamaps .footer-link:hover{ text-decoration:underline; opacity:1; }
  .footer-cubamaps ul{ padding-left:0; } .footer-cubamaps li{ list-style:none; }

  .footer-cubamaps.section-fullvh{
    min-height:100vh; min-height:100dvh;
    display:flex; flex-direction:column; justify-content:flex-end;
    background-position: top center; background-repeat:no-repeat; background-size:cover;
    padding-top:0 !important;
  }
  .footer-cubamaps .row{ margin-top:0; margin-bottom:0; }
  .footer-cubamaps hr{ margin-top:1rem; margin-bottom:1rem; }

  /* Layout fixes */
  html, body{ overflow-x:hidden; }
  .footer-cubamaps .row{ --bs-gutter-x:0; margin-left:0; margin-right:0; }
  .footer-cubamaps [class*="col-"]{ padding-left:1rem; padding-right:1rem; }
  .footer-cubamaps img{ max-width:100%; height:auto; display:block; }
}

.ct-right .weather-card{
		background:#0b5f86; /* azul del ejemplo */
		color:#fff;
		border-radius:12px;
		padding:16px 18px;
		min-height: 180px;
	}
/* el widget inserta su propio contenido; forzamos ancho */
.ct-right .weather-card .weatherwidget-io{
		display:block; width:100%!important; max-width:100%!important;
	}

.ct-right .grid-opts .info-card{
		display:flex; align-items:center; gap:14px;
		background:#fff; border-radius:12px; padding:14px 16px;
		height:100%;
	}
.ct-right .grid-opts .icon-wrap{
		flex:0 0 56px; /* ancho fijo del ícono */
	}
.ct-right .grid-opts .icon-wrap img{ 
		width:100%; height:auto; display:block; 
	}
.ct-right .grid-opts .txt small{
		display:block; letter-spacing:.5px; font-weight:700; text-transform:uppercase;
	}
.ct-right .grid-opts .txt h4{
		margin:0; font-weight:800; line-height:1.1;
	}
/* colores como el ejemplo */
.ct-right .txt .hl-red{ color:#d93025; }    /* títulos rojos */
.ct-right .txt .hl-blue{ color:#0b5f86; }   /* títulos azules */

/* Espaciados responsivos */
@media (max-width: 767.98px){
		.ct-right .weather-card{ margin-bottom:14px; }
		.ct-right .grid-opts{ row-gap:12px; }
	}

/* Igualar alturas de las dos columnas (md+) */
@media (min-width: 768px){
		.two-pane-row { align-items: stretch; }
		.ct-right { display:flex; flex-direction:column; }
		/* ★ este bloque ocupa el espacio restante y centra el grid */
		.ct-right .grid-outer { flex:1 1 auto; display:flex; align-items:center; }
	}

/* Las cards llenan la altura del col y quedan parejas */
.grid-opts .col { display:flex; }
.grid-opts .info-card { height:100%; width:100%; }

/* Asegurar que la imagen de la izquierda rellene toda la columna */
.object-fit-cover { object-fit: cover; }
