@charset "utf-8";
/* CSS Document */

BODY {
    MARGIN: 10px 0px;
    BACKGROUND-COLOR: #f6f6f6;
}
/* Todo menos el contador de Goole Analytics ************************************************************************/
#contenedor {
    width: 940px;
    margin: auto;
	background-color:#FFF; /*añadido para chrome*/
    box-shadow: 14px 14px 5px #999;
    -webkit-box-shadow: 14px 14px 5px #999;
    -moz-box-shadow: 14px 14px 5px #999;
}
/* Navegador superior, primera línea ******************************************************************************/
#FirstLine {
    width: 940px;
}
#FirstLeft {
    float: left;
    background-color: #e4e0d8;
    width: 775px;
    /* height: 22px;*/    
    line-height: 16px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 9pt;
    color: #000066;
    text-decoration: none;
    text-align: left;
    padding: 2px 0px 2px 0px;
    border-bottom: 1px solid #fff;
}
#FirstRight {
    float: right;
    background-color: #e4e0d8;
    width: 150px;
    /*height: 22px;*/    
    line-height: 16px;
    padding: 1px 15px 0px 0px;
    border-bottom: 1px solid #fff;
    text-align: right;
}
/* Logo y cabecera, segunda línea ********************************************************************************/

#secondLine {
    width: 940px;
    height: 77px;
    clear: both
}
#SeconLeft {
    float: left;
    width: 150px;
    border-bottom: 10px solid #fff;
    border-right: 1px solid #fff;
}
#SecondRight {
    float: right;
    width: 789px; /*784*/
    border-bottom: 10px solid #fff;
    text-align: right;
}
/* Pais y ciudad, tercera línea  **********************************************************************************/
#donde {
    width: 940px;
    clear: both
}
#dndZona {
    float: left;
    background-color: #689cce;
    width: 150px;
    /*  height:22px;*/
    
    text-align: center;
    color: #ffffff;
    letter-spacing: 1px;
    word-spacing: 1px;
    border-bottom: 1px solid #fff;
    border-right: 1px solid #fff;
    padding: 3px 0px 3px 0px;
}
#dndCiudad {
    float: right;
    background-color: #689cce;
    width: 789px; /*784*/
    /*  height:22px;*/
    
    text-align: center;
    color: #ffffff;
    letter-spacing: 6px;
    word-spacing: 6px;
    border-bottom: 1px solid #fff;
    padding: 3px 0px 3px 0px;
}
#dndTimeLine {
    background-color: #689cce;
	width: 100% !important;
    float: none !important;
    text-align: center;
    color: #ffffff;
    letter-spacing: 6px;
    word-spacing: 6px;
    border-bottom: 1px solid #fff;
    padding: 3px 0px 3px 0px;
}
/* Columna de menus y cuerpo del texto principal  *************************************************************/

#seccionSurContenedor {
    display: table;
	background-color:#FFF; /*añadido para chrome*/
    clear: both;
}
#seccionSurContenidos {
    background-color: #D9D9D9;
    display: -webkit-flex;
    display: flex;
	/*display: table-row*/
}
/* Columna de menus */
#LeftCol {
    display: table-cell;
    float: left;
    width: 150px;
}

/* Contenedor del Diari de viatge  */
#cuerpo {
    display: table-cell;
    float: right;
    width: 773px;
/*    padding: 4px 6px 10px 14px; */
    padding: 4px 4px 10px 12px;
    background-color: #ffffff;
    /* estas dos lineas hace que ambas columnas (menus y texto principal) tengan el mismo largo 
	   y pinta la columna de menus de gris 
	border-left:150px solid #D9D9D9;   
	margin-left:-150PX;   */
}
#cuerpoTimeLine {
    display: table-cell;
    background-color: #FFF;
	padding-top:8px;
	clear:both;
}
.tabNormal {
/*    width: 751px; */
    clear:both; 
    width: 768px;
    margin: 0px 0px 4px 0px;
    font-family: Tahoma;
    font-size: 10pt;
    text-align: justify;
    vertical-align: top;
	position:relative;
/*	display:table;*/
}
/******************************************************************************************************************
												IMAGENES
*******************************************************************************************************************/
/* Cualquier imagen dentro de un link estará sin marco azul */
a img { border: none;}

/* alineación de los iconos de mapas, hoteles, restaurantes, etc... con ancho variable */
img.bt {vertical-align: bottom; display: inline; border: none}
img.pez{width:70px; height:60px; margin-right:3px;}
img.yuan {width:12px; height:12px}

img.cabecera {width:789px; height:77px} /*width:784*/
img.foto {margin-right:10px; margin-top:2px; margin-bottom:2px}
img.fotoFin {margin-top:2px; margin-bottom:2px; margin-left:1px}
img.fotoIzq {margin-right:8px; margin-top:2px; margin-bottom:2px; float:left}
img.fotoIzqPlus {margin-right:14px; margin-top:2px; margin-bottom:4px; float:left}
img.fotoDch {margin-left:8px; margin-top:2px; margin-bottom:2px; float:right}
img.fotoDchPlus {margin-left:14px; margin-top:2px; margin-bottom:4px; float:right}
img.fotoPan {margin-top:2px; margin-bottom:4px; width:768px}
/******************************************************************************************************************
								PROPIEDADES DEL MENU DE LA COLUMNA DE LA IZQUIERDA
*******************************************************************************************************************/

li,
dd {
    border: none;
    margin: 0
}
/* tamaño de todo el conjunto de opciones */

div#left {
    float: left;
    width: 150px !important;
    /* fixes width of col without borders */
    
    padding: 1px 1px 1px 0px;
    background: #D9D9D9 !important;
    border: 0px solid #fff;
}
div#nav dl#cv dd.opc a {
    text-decoration: none;
    font-size: 9pt;
    FONT-FAMILY: Helvetica, Arial, Tahoma, Verdana, SansSerif;
    padding: 2px 0 2px 6px;
    display: block;
    background: #D9D9D9;
    color: #808080;
    line-height: 15px;
    border-bottom: 1px solid #fff
    /*; width:150px */
}
div#nav dl#cv dd.opc a:hover {
    color: #fff;
    background: #808080
}
div#nav dl#cv dd.seccion {
    text-decoration: none;
    font-size: 9pt;
    FONT-FAMILY: Helvetica, Arial, Tahoma, Verdana, SansSerif;
    padding: 4px 0 4px 6px;
    display: block;
    BACKGROUND-COLOR: #689cce;
    color: #ffffff;
    line-height: 15px;
    border-bottom: 1px solid #fff
    /*; width:150px */
}
div#nav dl#cv dd.secPais {
    text-decoration: none;
    font-size: 9pt;
    FONT-FAMILY: Helvetica, Arial, Tahoma, Verdana, SansSerif;
    padding: 2px 0 2px 6px;
    display: block;
    background: #D9D9D9;
    color: #689cce;
    line-height: 15px;
    border-bottom: 1px solid #fff
    /*; width:150px */
}
div#nav dl#cv dd.secNOlink {
    text-decoration: none;
    font-size: 9pt;
    FONT-FAMILY: Helvetica, Arial, Tahoma, Verdana, SansSerif;
    padding: 2px 0 2px 6px;
    display: block;
    background: #D9D9D9;
    color: #808080;
    line-height: 15px;
    border-bottom: 1px solid #fff
    /*; width:150px */
}


/******************************************************************************************************************
												FUENTES
*******************************************************************************************************************/

A {
    TEXT-DECORATION: none;
}
a:link {
    COLOR: #0000ff;
    TEXT-DECORATION: none;
}
a:visited {
    COLOR: #0000ff;
    TEXT-DECORATION: none;
}
h1 {
    FONT-SIZE: 9pt;
    FONT-FAMILY: Helvetica, Arial, Tahoma, Verdana, SansSerif;
    font-weight: bold;
    display: inline;
}
h2 {
    FONT-SIZE: 9pt;
    FONT-FAMILY: Helvetica, Arial, Tahoma, Verdana, SansSerif;
    font-weight: bold;
    display: inline;
}
h3 {
    FONT-SIZE: 10pt;
    FONT-FAMILY: Tahoma;
    FONT-WEIGHT: bold
}
.alCuadrado {
    FONT-SIZE: 7pt;
    vertical-align: 35%
}
.textofiesta {
    FONT-WEIGHT: normal;
    FONT-SIZE: 8pt;
    COLOR: #000000;
    FONT-STYLE: normal;
    FONT-FAMILY: Tahoma
}
.TextoPlano {
    FONT-SIZE: 10pt;
    FONT-FAMILY: Tahoma
}
.Item {
    FONT-SIZE: 10pt;
    FONT-FAMILY: Tahoma;
    FONT-WEIGHT: bold
}
.ItemHotel {
    FONT-SIZE: 10pt;

    FONT-FAMILY: Tahoma;
    FONT-WEIGHT: bold;
    border-color: #000000;
    COLOR: #5773d4;
    BACKGROUND-COLOR: transparent;
}
/*#tip7 {margin-right:6px;}*/
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ --- */
Table.Normal {
	width:768px;
	border:none;
	}
Table.Normal td  {
	font-family: Tahoma;
	font-size: 10pt;
	vertical-align:top;
	text-align:justify;
	}	
Table.Normal td.Centrado { /* Centrado para anchos de 145 */
	width:145px;
	text-align:center;
	}
Table.Normal td.EscLat { /*Espacio para texto con foto a un lado */
	width:595px;
	text-align:justify;
	}
Table.Normal td.izq {	/*Espacio para foto con texto a un lado */
	width:145px;
	text-align:left;
	}
Table.Normal td.dch {	/*Espacio para foto con texto a un lado */
	width:145px;
	text-align:right;
	}
Table.Normal td.cnt {	/*Espacio para texto entre dos fotos */	
	width:446px;
	text-align:justify;
	}
/* 
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ --- */
Table.ColorVerde {
	border: solid #336666 1px;
	border-collapse: collapse;
/*	width:750px;*/
	}
Table.ColorVerde td {
	border: solid #336666 1px;
	vertical-align:top;
	padding-left: 3.5pt; 
	padding-right: 3.5pt;
	font-family: Tahoma;
	font-size: 10pt;
	text-align:justify;
}
Table.ColorVerde td.cvCentro { 
	text-align:center;
	}

/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ --- */
Table.cvMapas {
	border: solid #336666 1px;
	border-collapse: collapse;
	width:758px;
	}
Table.cvMapas td {
	border: solid #336666 1px;
	vertical-align:top;
	padding-left: 1.5pt; 
	padding-right: 1.5pt;
	font-family: Tahoma;
	font-size: 10pt;
	text-align:center;
	width: 184px;
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ --- */
/* =========================================================
   CAPA RESPONSIVE COMPLETA FINAL
   Fotos columna única + iconos + ritmo editorial
   + Ajuste tamaños Zona / Ciudad / Índice
   ========================================================= */

/* ===== BOTÓN MENÚ OCULTO EN DESKTOP ===== */
/* 🔴 FUERA de media query para que nunca salga en escritorio */
 
#menuToggle {
  display: none !important;
}
 
/* =========================================================
   TABLET + MÓVIL
   ========================================================= */

@media (max-width: 960px) {

  /* ===== CONTENEDOR ===== */

  #contenedor {
    width: 100% !important;
    margin: 0 !important;
    box-shadow: none !important;
  }

  /* ===== CABECERA ===== */

  #secondLine {
    width: 100% !important;
    height: auto !important;
  }

  #SeconLeft,
  #SecondRight {
    float: none !important;
    width: 100% !important;
    text-align: center;
  }

  img.cabecera {
    width: 100% !important;
    height: auto !important;
  }

  /* ===== ZONA ===== */

  #donde {
    width: 100% !important;
  }

  #dndZona,
  #dndCiudad {
    float: none !important;
    width: 100% !important;
    text-align: center;
  }

  /* 🔵 TAMAÑO UNIFICADO */

  #dndZona h1,
  #dndCiudad h2 {
    font-size: 1.05rem !important;
    font-weight: bold;
    letter-spacing: 1px;
    word-spacing: 1px;
  }

  /* ===== LAYOUT ===== */

  #seccionSurContenidos {
    display: block !important;
  }

  #LeftCol {
    width: 100% !important;
  }

  /* ===== BOTÓN MENÚ (SOLO MÓVIL) ===== 

  #menuToggle {

    display: block !important;

    background: #689cce;
    color: #fff;

    padding: 10px;
    font-weight: bold;
    text-align: center;
    cursor: pointer;

    font-size: 1.05rem;
  }
*/
  /* ===== MENÚ ===== */
 /*
  #left {
    display: none;
    width: 100% !important;
  }

  #left.menuOpen {
    display: block;
  }
*/
  /* ===== TEXTO ===== */

  #cuerpo {
    width: auto !important;
    max-width: 100% !important;
    padding: 14px !important;
    overflow: hidden;
  }

  .tabNormal {
    width: auto !important;
    max-width: 100% !important;
    margin: 0 0 18px 0 !important;
    padding: 0 !important;
    font-size: 1rem;
    line-height: 1.55;
  }

  body {
    font-size: 1rem;
    line-height: 1.55;
  }

  /* =====================================================
     TODAS LAS FOTOS → COLUMNA ÚNICA
     ===================================================== */

  .tabNormal img:not(.bt),
  img.foto,
  img.fotoFin,
  img.fotoIzq,
  img.fotoDch,
  img.fotoPan {

    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;

    float: none !important;
    display: block !important;

    margin: 14px auto !important;
  }

  /* ===== ICONOS RESPETADOS ===== */

  img.bt {
    width: auto !important;
    height: auto !important;
    display: inline !important;
    margin: 0 4px 0 0 !important;
    vertical-align: bottom;
  }

  /* ===== TABLAS ===== */

  table {
    width: 100% !important;
  }

}

/* =========================================================
   PIE DE FOTO RESPONSIVE
   ========================================================= */

.fotoCaption {

  font-family: Tahoma;
  font-size: 10pt;
  color: #555;

  text-align: center;

  margin-top: -4px;
  margin-bottom: 12px;

  line-height: 1.3;
}

/* =========================================================
   MENÚ RESPONSIVE — FIX DEFINITIVO CENTRADO
   ========================================================= */

#menuToggle {
  display: none !important;
}

@media (max-width: 960px) {

  /* ===== ROMPER ESTRUCTURA COLUMNAS ===== */

  #seccionSurContenedor,
  #seccionSurContenidos {
    display: block !important;
  }

  #LeftCol {
    display: block !important;
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* ===== MENÚ ===== */

  div#left {

    float: none !important;

    width: 92% !important;
    max-width: 420px !important;
    min-width: 0 !important;

    margin: 0 auto 18px auto !important;
    padding: 0 !important;

    display: none;

    background: #D9D9D9;
    border-radius: 6px;
  }

  div#left.menuOpen {
    display: block;
  }

  /* ===== BOTÓN ===== */

  #menuToggle {

    display: block !important;

    width: 92%;
    max-width: 420px;

    margin: 12px auto;

    background: #689cce;
    color: #fff;

    padding: 10px;
    font-weight: bold;
    text-align: center;

    border-radius: 6px;
    cursor: pointer;
  }

/* ===== TEXTO DEL MENÚ ===== */

div#nav dl#cv dd.opc a,
div#nav dl#cv dd.seccion,
div#nav dl#cv dd.secPais {

  font-size: 1.1rem !important;   /* tamaño letra */
  text-align: center !important;  /* centrado horizontal */

  padding: 6px 4px !important;   /* altura línea */
  line-height: 1.05 !important;

}

/* =====================================================
   MAPAS RESPONSIVE
   ===================================================== */

table.cvMapas {
  width: 100% !important;
}

table.cvMapas td {
  width: auto !important;
  display: block !important;
  text-align: center;
}

table.cvMapas img {

  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;

  display: block;
  margin: 10px auto;
}

}

/* =========================================================
   TIMELINE RESPONSIVE FIX
   ========================================================= */

@media (max-width: 960px) {

  #contenedor {
    width: 100% !important;
    margin: 0 !important;
    box-shadow: none !important;
  }

}

/* === AÑADIDO POR SANDRO-RESPONSIVE (1/2)
   FORZAR QUE EL CONTENIDO DEL TEXTO SE AJUSTE AL ANCHO === */

@media (max-width: 960px) {

  #cuerpo,
  #seccionSurContenidos,
  #seccionSurContenedor {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
}


/* === AÑADIDO POR SANDRO-RESPONSIVE (2/2)
   FIGURES E IMÁGENES GENERADAS POR EL SCRIPT = FULL WIDTH === */

@media (max-width: 960px) {

  #cuerpo figure {
    width: 100% !important;
    margin: 0 0 20px 0 !important;
    padding: 0 !important;
    display: block !important;
  }

  #cuerpo figure img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
    float: none !important;
  }
}

@media (max-width: 960px) {

  .fotoCaption {
    font-size: 1.05rem !important;
    margin-top: 8px !important;
  }


}

/* === MARGEN LATERAL GLOBAL PARA MÓVIL (CORREGIDO) === */
@media (max-width: 960px) {

  /* margen lateral para todo el contenido */
  #cuerpo,
  #cuerpo > *,
  #cuerpo figure,
  #cuerpo figure img {
    padding-left: 6px !important;
    padding-right: 6px !important;
    box-sizing: border-box !important;
  }

  /* Ajuste fino: que las imágenes realmente no sobresalgan */
  #cuerpo figure img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto !important;
    display: block !important;
  }
}