@charset "utf-8";

/* Medios fluidos sencillos
   Nota: Los medios fluidos exigen la eliminación de los atributos de altura y anchura de los medios del código HTML
   http://www.alistapart.com/articles/fluid-images/ 
*/


img, object, embed, video {
	max-width: 100%;
}
/* IE 6 no admite max-width (anchura máxima), por lo que usa de manera predeterminada una anchura del 100% */
/* COLORES hexadecimales */
/*pirineos: #578899
cols: #E7B13C
Pyrineist: #366560
Castillos: #D51953
Fuentes del Vino: #7A203E
B&W: #64328A
*/

/* FIN de COLORES hexadecimales */
.and {font-family: Arial, Helvetica, sans-serif; font-size: 0.8em; color:black; }
.prepunto  { font-family: 'Conv_Helvetica-BlackOblique';
             color: rgba(87,136,153,1);
             font-size:0.8em;
              }
.linea00 {
  border-top: 0px solid gray;
  clear: both;
  margin: 0px;
}

.linea0 {
  border-top: 1px solid gray;
  clear: both;
  margin: 0px;
}

.simbolos {
  color: white;
}
/* PASAFOTOS MODIFICADO PARA ESQUELETO */
.fluid_container {
    margin: 0 auto;
    max-width: 1670px;
    width: 98%;
    
    /* DEFINICIÓN DEL HUECO (Esqueleto) */
    aspect-ratio: 140 / 84; /* Indica la proporción exacta */
    background-color: #6318aa; /* El color morado de tu esqueleto */
    
    /* Por si el navegador es muy antiguo, usamos este truco: */
    min-height: 200px; 
    height: auto;
    
    overflow: hidden;
    border-radius: 4px;
}

.pasafotow3 { 
    text-align: center;
    font-family: "Arial", sans-serif;
    font-size: 1.02em;
    /* Añadimos un margen para que no pegue con lo siguiente mientras carga */
    min-height: 100px; 
}
#camera_wrap_1 {
    height: 100% !important;
    min-height: 300px; /* Un mínimo razonable para móviles */
}
@keyframes pulsoEsqueleto {
    0% { background-color: #6318aa; }
    50% { background-color: #4a1180; }
    100% { background-color: #6318aa; }
}

.fluid_container:empty { /* Solo pulsa si está vacío de imágenes */
    animation: pulsoEsqueleto 1.5s infinite;
}
/* FIN PASAFOTOS */


.preciob  {font-family: 'Conv_Helvetica-BlackOblique'; font-size:1em; color: white; display:inline-block;  }	
.precio {
  font-family: 'Conv_Helvetica-BlackOblique';
  font-size: 1em;
  color: rgb(79, 25, 121);
  display: inline-block;
}
.lugares  {font-family: 'Conv_Helvetica-BlackOblique'; font-size:1em; 
           color: rgba(122,32,62,1); 
		   display:inline-block;
		     }
.modalidad  {font-family:"Segoe Print", "Segoe Script";  color: white; font-weight:300; }
.modalidad2  {font-family:"Segoe Print", "Segoe Script";
              font-size:0.9em;
              /* color: rgb(79, 25, 121); */
			  font-weight:600;
			   }
.opcbarraw3 {font-family:"Eras Medium ITC"; font-size:0.9em; color: white;    }
.conf  {font-family:"Eras Medium ITC"; font-size:1.2em; color: blue;  }
.lux  {font-family:"Eras Medium ITC"; font-size:1.2em; color:yellow;   }
.luxscolor  {color:yellow;   }
.lux2  {font-family:"Eras Medium ITC"; font-size:1.2em; color:#ef680e;    }
.pamplona {
  font-family: "Eras Light ITC";
  font-size: 1.5em;
  color: white;
  display: inline-block;
  padding: 0.1em 0.4em;
  background-color: rgba(213, 25, 83, 1);
  margin: 0.2em auto;
  border: 1px solid rgba(122, 32, 62, 1);
  border-radius: 8px;
}
.tipopamplona {
  font-family: "Eras Demi ITC";
  color: rgba(213, 25, 83, 1);
  font-size: 1.1em;
}
.notali {
  margin: 0em 0.5em;
  font-size: 0.75em;
  font-family: Arial, Helvetica, sans-serif;
  font-style: italic;
  font-weight: bold;
  color: rgba(100, 50, 138, 1);
  line-height: 1.6em;
}   
.notalibwfort {
    		  margin: 0em 1em;
    		  font-size: 0.75em;
    		  font-family: Arial, Helvetica, sans-serif;
    		  font-style: italic;
    		  color: rgb(79, 25, 121);
    		  font-weight: 600;
    		  line-height: 1.4em !important;
    		}
.interespack  { display:block;	    }
.interespack li {
  font-family: sans-serif;
  list-style-image: url("icos/arrow-purple.png");
  text-align: left;
  font-size: 0.75em;
  line-height: 1.3em;
  margin-left: -1.5em;
  margin-bottom: 0.8em;
}
.interespack li a  { padding: 1px; font-style:oblique; font-weight:bold; color:blue;  }
.interespack li	img {display:inline; width: 24px;  }

/* Nuevas reglas para la sublista con puntos */
.sublist-points {
  margin: 0.5em 0 0.5em 1.5em;
  padding: 0;
  list-style-type: none; /* IMPORTANTE: desactivar puntos nativos */
}

.sublist-points li {
  position: relative;
  padding-left: 1.5em; /* Espacio para nuestro punto personalizado */
  margin-bottom: 0.3em; /* Espacio entre items */
  list-style-type: none;
  margin-left: 0;
}

/* Punto personalizado más grande */
.sublist-points li::before {
  content: "•";
  color: #2d053d; /* Tu color w3-theme aquí */
  font-size: 2.1em; /* ¡Ajusta este valor! Puedes usar 24px, 1.8em, etc. */
  position: absolute;
  left: 0;
  top: -0.1em; /* Ajusta para centrar verticalmente */
  line-height: 1;
  list-style-type: none;
}
.interespack ul.sublist-points li {
  list-style-image: none !important;
  background-image: none !important;
  font-size: 1rem; /* Vuelve al tamaño base del documento */
  /* O si quieres que sea igual que el li padre: */
  font-size: inherit; /* También podría funcionar */
  margin-bottom: 0.15em !important; /* Valor inicial para probar */
  
}

.resr { color: #462361; font-size:1.2em; } /*theme d3*/
.resr2 { color: #462361; font-size:1.1em; text-transform:uppercase; font-weight:bold; }  /*theme d3*/
.resr3 { color: #462361; font-size:1.1em; }
.resr4 { font-family:Arial, sans-serif; color: rgba(122,32,62,1); font-size:1.1em; font-weight: 400; }
.resaltelilistas  {color: rgba(122,32,62,1); font-size:1.1em; text-transform:uppercase;  }
.lineainterdias { margin:0em 5em 2em 5em;  border-top:1px	solid rgba(122,32,62,1);  clear:both; }	

.puerton { font-family:"Segoe Print", "Segoe Script";
           text-transform:uppercase;
           font-size:1.0em; 
		   color: rgba(122,32,62,1);
			}			 
.tariffs {
  width: 80%;
  margin: 3em auto;
  padding: 4px 4px 8px 4px;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.10);
  border: 1px solid black;
  border-radius: 2px;
}
.publicidadsippb {
  background-color: rgba(87, 136, 153, 0);
}
.publicidadsirpb {
  background-color: rgba(122, 32, 62, 0.3);
}
.colaboradoresppb {
  background-color: rgba(87, 136, 153, 0.55);
}
.colaboradoresrpb {
  background-color: rgba(122, 32, 62, 0.55);
}
.cromitocentro {
  text-align: center;
  background-color: rgba(213, 25, 83, 0.1);
}
.cromitocentro img {
  width: 20%;
  background-color: white;
  border: 1px solid black;
  border-radius: 10px;
  }
    .cuadrohome {
      width: 46%;
      margin: 2% 1% 2% 2%;
      padding: 0px;
      float: left;
      clear: none;
      text-align: center;
      /*background-color: rgba(122,32,62,0.6);*/
      border: 1px solid black;
      border-radius: 10px;
    }

  .cuadrohome img {
    width: 100%;
    height: auto;
    margin: 0 auto;
    border-bottom: solid 1px #CCC;
    border: 1px solid black;
    border-radius: 10px;
  }

  #interesa {
    font-family: sans-serif;
    text-align: center;
    font-size: 1.05em;
    color: black;
    line-height: 1.4em;
  }

#interesa img {
    width: 45%;
    float: left;
    margin: 2%;
    clear: none;
    border: 1px solid rgba(0, 0, 0, 1);
    border-radius: 8px;
  }
#direcion {
  font-size: 0.5em;
  font-family: Verdana, Geneva, sans-serif;
  margin: 0 auto;
  padding-bottom: 0.4em;
  text-align: center;
  /*background-color: rgba(87,136,153,1);*/
  color: white;
}

.barracookies {
  font-size: 0.8em;
  background-color: black;
  text-align: center;
  padding: 0.06em;
  color: rgba(231, 177, 60);
}

.eldesierto {
  font-family: "Segoe UI Symbol";
  color: rgba(60, 60, 60, 1);
  font-weight: 600;
  font-size: 1.1em;
}.w3bloquecentral  {width:100%; 
              margin: 0 auto;
              text-align:center;
			  font-family:"Eras Medium ITC";
               }
.w3bloqueanchofull  {width:100%; margin: 0 auto;
               text-align:center;
              /*background-color: rgba(122,32,62,0.1);*/              
                }
.w3bloqueanchofull2  {width:100%; margin: 0 auto;
              text-align:center;
              background-color: rgba(0,0,0,0.5);              
                }									   
.compimapas { font-family:"Eras Medium ITC"; 
              font-size:0.9em; 
			  font-weight:600; 
			  line-height:1.3em; }
.luxbarraw3  {font-family:"Eras Medium ITC"; font-size:1.05em; color:yellow;   }
.colsbarraw3  {font-family:"Eras Demi ITC"; font-size:1em; color:rgb(231,177,60);   }
.tipopamplonaw3  { font-family:"Eras Demi ITC"; color:rgba(213,25,83,1); font-size:1.3em; }	
.lugaresbarraw3  {font-family: 'Conv_Helvetica-BlackOblique'; 
            font-size:0.90em;
			color:rgb(242, 226, 243); 
              }
.modalidadw3  {font-family:"Segoe Print", "Segoe Script"; font-size:0.9em;  color: white; font-weight:300; }					
.w3-sidebar .w3-bar-item:hover{ background-color: green; /* Un verde claro */  }

.w3-cell a { text-decoration:none;  }
.botones-esquina-superior-derecha {
  position: fixed!important;
  top: 6px; /* Ajusta este valor para la distancia desde la parte superior */
  right: 20px; /* Ajusta este valor para la distancia desde la derecha */
  z-index: 9; /* Asegura que los botones estén por encima de otros elementos */
}

.botones-esquina-superior-derecha .w3-bar button {
  margin-left: 0px;
  /* Espacio entre los botones */
  padding: 4px 10px !important;
  ;
}
.publiheadw3 {
  font-family: "Candaral";
  font-size: 1.4em;
  font-weight: 600;
  float: left;
  margin: 1em 1.0em;
}
.publiheadbw3 {
  font-family: "Candaral";
  font-size: 1.4em;
  font-weight: 600;
  color: white;
  float: left;
  margin: 1em 1.0em;
}
.subpaisajes {
  font-family: 'Candaral';
  color: white;
  font-size: 1.0em;
  font-weight: 800;
}

.barradw3 ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: rgba(87,136,153,1);
}

.barradw3 li { float: left; font-family:"Arial"; font-size: 0.8em; }

.barradw3 li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

/* Change the link color to #111 (black) on hover */
.barradw3 li a:hover {
    background-color: #111;
}
.wine {font-family: Arial, Helvetica, sans-serif; font-size: 1.2em; color:rgb(148,30,129); font-weight:900; }
.bike1  {font-family: 'Conv_neuropolitical_rg';  font-size:1.3em; color: rgba(122,32,62,1); font-weight:900; }
.wine2 {font-family: Arial, Helvetica, sans-serif; font-size: 1.0em; color:rgb(148,30,129); font-weight:700; }
.bike2  {font-family: 'Conv_neuropolitical_rg';  font-size:1.0em; color: rgba(122,32,62,1); font-weight:700; }

@keyframes skeleton-pulse {
    0% { background-color: #6318aa; }   /* Color púrpura base */
    50% { background-color: #853dc4; }  /* Un tono un poco más claro */
    100% { background-color: #6318aa; }
}

.fotoacordw3 {text-align:center;
          max-width: 1700px;           /* Límite máximo absoluto */
          width: calc(100% - 40px);    /* Margen lateral en móviles/tablets */
          margin: 1em auto 2em;        /* Vertical y centrado */
          border: 1px solid #34035c;  /* rgba(150,25,45,1) simplificado */
          border-radius: 4px;
	    	  box-sizing: border-box;      /* El borde cuenta dentro del ancho */
          overflow: hidden;            /* Opcional: contiene bordes redondeados */
		}
          
.fotoacordw3 img {
  width: 100%;
  
  /* Mantenemos tu transform y añadimos opacity y filter */
  transition: transform 0.3s, opacity 0.8s ease-in, filter 0.8s ease-in;
  background-color: #6318aa; 
  animation: skeleton-pulse 1.5s infinite ease-in-out;
    /* Estado inicial: Invisible y desenfocado */
    opacity: 0; 
    filter: blur(8px); 
    /* Añadimos 'filter' a la transición para que el desenfoque desaparezca suavemente */
    transition: opacity 0.8s ease-in, filter 0.8s ease-in, transform 0.5s ease;
}
.fotoacordw3 img:hover {
  transform: scale(1.05); /* Tu efecto hover sutil */
  opacity: 1;
  filter: blur(0);
}
.fotoacordw3 img.loaded {
    opacity: 1;
    filter: blur(0); /* Se vuelve nítida */
}

/* ============================================================
   NUEVO SISTEMA DE CARGA Y TARJETAS (Sustituir anteriores)
   ============================================================ */

/* 1. EL MARCO (Contenedor morado) */
.fotoconpietexto, .fotowine {
    text-align: center;
    max-width: 1700px;
    width: calc(100% - 30px);
    margin: 1em auto 2em;
    border: 1px solid #34035c;
    border-radius: 4px;
    overflow: hidden;
    display: flex; 
    flex-direction: column; /* Apila foto arriba y texto abajo */
    background-color: #5a2d7d !important; /* Esqueleto morado w3-theme-d1*/
    transition: transform 0.35s ease;
}
.fotoconpietexto .resbw {
    color: #f1e579; /* Un color dorado/amarillo para resaltar sobre el púrpura */
    font-weight: bold;
}



/* 2. EL TEXTO (Con fondo sólido para tapar el morado del marco) */
.piefotow3, .text-block-wine {
    /*background-color: #333 !important; */ /* Fondo gris oscuro SE PODRIA USAR PARA CAMBIAR EL COLOR DEL BLOQUE DE TEXTO */
    color: white !important;
    padding: 15px !important;
    margin: 0 !important;
    z-index: 2; /* Asegura que tape el fondo del padre */
    font-size: 0.85em;
}

/* 3. El pie de foto (Recuperamos su tamaño normal) */
.piefotow3 {
    font-size:0.95em; 
    display: block; /* Aseguramos que sea un bloque independiente */
    margin-top: 0 !important; /* Pegado a la foto */
    line-height: 1.4; /* Devolvemos una altura de línea normal para leer */
}


/* 2. El contenedor (Sin el font-size: 0) */
.conefect {
    display: block;
    width: 100%;
}

.conefect img, .fotowine img {
    /* ESTRUCTURA (Para que pegue con el texto) */
    display: block;
    width: 100%;
    height: auto;
    vertical-align: middle;
    margin-bottom: 0 !important;
    /* ESTÉTICA (Tu efecto de carga) */
    opacity: 0 !important;
    filter: blur(15px) !important;
    transition: opacity 0.8s ease-out, filter 0.8s ease-out !important;
    will-change: opacity, filter;
}

/* 4. LA IMAGEN CARGADA */
.conefect img.loaded, .fotowine img.loaded {
    opacity: 1 !important;
    filter: blur(0) !important;
}

/* 5. EFECTOS EXTRA (Zoom y Premium) */
.fotoconpietexto:hover, .fotowine:hover {
    transform: scale(1.03);
}

.fotoconpietexto.premium {
    background-color: #1a1a1a !important; /* Esqueleto negro */
    border-color: #d4af37;
}

.fotoconpietexto.premium .piefotow3 {
    background-color: #000 !important;
    color: #d4af37 !important;
}



/* --- TUS BLOQUES DE TEXTO (Mantenlos igual) --- */
.text-block-wine { 
    background-color: #333;
    color: white;
    padding: 15px;
    margin-top: 10px; /* En tablet/desktop podrías quitar este margen si se superpone */
    border-radius: 4px;
}

.text-block-wine h4 { margin: 0 0 5px 0; }
.text-block-wine p { margin: 0; font-size: 0.95em; }
.blockwinebodega  { font-style: italic; font-size: 0.90em;}

.chapapaisajes {
              color: rgba(0,0,0,1);
              font-size:1em; 
			  text-align:center;
			  margin-top:0.5em;
			  padding:0em 1em;
			  line-height:1.2em;
			   } 			   
.lineaetapasw3 	{font-family: Verdana, sans-serif;
              color: rgba(0,0,0,1);
              font-size:0.9em; 
			  font-weight:500;              
			  text-align:center;
			  margin-top:0.5em;
			  padding:0em 1em;
			  line-height:1.3em;
			   } 
.txentradasacordw3 	{font-family: Verdana, sans-serif;
              color: rgba(0,0,0,1);
              font-size:0.9em; 
			  font-weight:500;              
			  text-align:center;
			  margin-top:0.5em;
			  padding:0em 1em;
			  line-height:1.3em;
			   }
.bloquesleermas {font-family: Verdana, sans-serif;
              color: rgba(0,0,0,1);
              font-size:1.1em; 
			  text-align:center;
			    }
.tariffs { width: 70%;  }

.titulosenpanelesw3 {
  font-size: 0.8em;
  color: white;
  display: inline-block;
  padding: 0.3em 0.8em;
  margin: 0.2em auto;
  border: 1px solid rgba(0, 0, 0, 1);
  border-radius: 4px;
  transition: all 0.3s;
}

.titulosenpanelesw3:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  opacity: 0.9;
  cursor: pointer;
}

.notasenzonasw3 {
  font-size: 0.9em;
  font-style: italic;
  /* color: white;*/
  width: 80%;
  margin-left: 2em;
  border: 1px solid rgba(0, 0, 0, 1);
  border-radius: 0px 4px 4px 0px;
}

.notascentradasw3 {
  width: 80%;
  margin: 1.1em auto;
  border: 1px solid rgba(0, 0, 0, 1);
  border-radius: 0px 4px 4px 0px;
}
.paneletapanoches {
  font-size: 0.8em;
  display: inline-block;
  padding: 0.2em 0.8em;
  margin: 0.2em auto;
  border: 1px solid rgba(0, 0, 0, 1);
  border-radius: 2px;
  transition: all 0.3s;
}
.contact-options a {  text-decoration: none !important;     }	
.w3-cell {
  margin-right: 10px!important;
  margin-bottom: 10px; /* Si también quieres espacio vertical */
      }

.w3-cell:last-child {
  margin-right: 0;
}     
.w3-border-flat-midnight-blue {
  border-color: #2c3e50 !important;
  border-left-width: 8px !important;  /* Grosor personalizado (4px es el default) */
  border-left-style: solid !important;
}

/* ===== ESTILOS BASE (MOBILE FIRST) PARA LOS TITLES Y BADGES EN FOTOS ===== */
.custom-title {
  /* Tipografía y caja */
  font-size: clamp(0.9rem, 2.5vw, 1.5rem); /*texto: nunca menor a 0.9rem, ideal 2.5vw, máximo 1.5rem*/
  display: inline-block;
  max-width: 90%;
  padding: clamp(0.5rem, 1.5vw, 1rem) clamp(1rem, 3vw, 1.5rem);
  border-radius: 4px;
  /* Color y efectos */
  background-color: inherit;
  color: inherit;
  opacity: 0.85;
  transition: all 0.3s;
}

.custom-badge {
  /* Dimensiones y disposición */
  width: clamp(3rem, 5vw, 3.625rem);
  height: clamp(3rem, 5vw, 3.625rem);
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  /* Tipografía */
  font-size: clamp(0.9rem, 4.5vw, 1.5rem);
  /* Estilos visuales */
  background-color: inherit;
  border-radius: 50%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  opacity: 0.75;
  transition: all 0.3s;
}
/* ===== INTERACCIONES (MOBILE) ===== */
.custom-title:hover {
  transform: scale(1.05);
  opacity: 0.9;
  cursor: default;
}
.custom-badge:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  opacity: 0.9;
  cursor: default;
}
/* Container holding image and text */
/* Estilos base - Mobile First */
.contenedorfotohoteles {
  position: relative;
  overflow: hidden; /* Para contener el efecto zoom */
}
.contenedorfotohoteles img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.5s ease; /* Para efecto hover */
}
/* Efectos hover */
.contenedorfotohoteles:hover img {
  transform: scale(1.05); /* Ligero zoom en la imagen */
}

.contenedorfotohoteles:hover .text-block-center {
  opacity: 0.9;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); /* Sombra para destacar */
}

/* Bottom en bloque y centrado */
.text-block-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 0.5rem;
  text-align: center;
  color: white;
  width: 46%;
  max-width: 500px;
  transition: all 0.3s ease;
  border-radius: 4px; /* Bordes ligeramente redondeados */
}

.text-block-center h4 {
  font-size: 1.0rem;
  margin: 0 0 0.5rem 0;
  }

.text-block-center p {
  font-size: 0.9rem;
  margin: 0;
}

/* Bottom right text */
.text-block-bottom-right {
  position: absolute;
  bottom: 20px;
  right: 20px;
  padding-left: 20px;
  padding-right: 20px;
  opacity: 0.8;
}
/* Up right text */
.text-block-up-right {
  position: absolute;
  top: 20px;
  right: 20px;
  padding-left: 20px;
  padding-right: 20px;
  opacity: 0.8;
}



/* HRs con color w3 - Se pone por ej : <hr class="w3-theme custom-hr4">  */

hr.custom-hr0 {  height: 0px; /* Grosor personalizado */  border: none;  }
hr.custom-hr1 {  height: 1px; /* Grosor personalizado */  border: none;  }
hr.custom-hr2 {  height: 2px; /* Grosor personalizado */  border: none;  }
hr.custom-hr3 {  height: 3px; /* Grosor personalizado */  border: none;  }
hr.custom-hr4 {  height: 4px; /* Grosor personalizado */  border: none;  }
hr.custom-hr5 {  height: 5px; /* Grosor personalizado */  border: none;  }

/* Y ESTOS PARA QUE QUEDE LA LINEA PEGADA L ELEMENTO SIGUIENTE */
hr.custom-hr0m0 {  margin: 0px!important; height: 0px; /* Grosor personalizado */  border: none;  }
hr.custom-hr1m0 {  margin: 0px!important; height: 1px; /* Grosor personalizado */  border: none;  }
hr.custom-hr2m0 {  margin: 0px!important; height: 2px; /* Grosor personalizado */  border: none;  }
hr.custom-hr3m0 {  margin: 0px!important; height: 3px; /* Grosor personalizado */  border: none;  }
hr.custom-hr4m0 {  margin: 0px!important; height: 4px; /* Grosor personalizado */  border: none;  }
hr.custom-hr5m0 {  margin: 0px!important; height: 5px; /* Grosor personalizado */  border: none;  }

/* MODALS SOBRESCRIBIENDO LOS DE w3 */
.w3-modal {
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease-out;
  z-index:20;
}

.w3-modal-content {
  transform: scale(0.95);
  transition: transform 0.3s ease-out;
}

.w3-modal.w3-show {
  opacity: 1;
}

.w3-modal.w3-show .w3-modal-content {
  transform: scale(1);
}
/* FIN de MODALS SOBRESCRIBIENDO LOS DE w3 */


/* ICONOS CONTACTO Mobile First (default) */
/* Estilos para los botones de contacto con iconos */
.bloquecontactolu { width: 90%; margin: 0 auto; }
.contacto-icono-boton {
  display: inline-block; /* Para que los botones estén en línea horizontalmente */
  /*margin: 4px;*/ /* Espacio entre botones */
}

.contacto-icono-imagen {
  width: 30px;
  margin: 0 6px;
  display: inline-block;
  border: 1px solid rgba(255, 255, 255, 1); /* Borde blanco */
  vertical-align: middle; /* Alinea verticalmente el icono con el texto si lo hubiera */
}

/* fin ICONOS CONTACTO Mobile First (default) */
/* Modal Footer */
.modal-header {
  padding: 2px 16px;
  text-align:center;
}

.micardpie p {
  padding: 8px;  
  text-align:center;
 }
.micardpie a {
   text-decoration:none;
}
.h3gordo  {font-size:1.8em;  }
.resr5 { color: rgba(148,30,129,1); font-size:1.1em; }
.punto2st  {font-family: 'Conv_neuropolitical_rg';
          color: rgba(122,32,62,1);
		  font-size:1.0em; }
.luxlight  { font-family:"Eras Light ITC"; font-size:1.1em; color:rgba(231,177,60,1);  } 
.estandar  { font-family:"Eras Light ITC"; font-size:1.1em; color:rgb(25, 47, 150);  } 
.luxlightb  { font-family:"Eras Light ITC"; font-size:1.1em; color:white;  } 
.estandarb  { font-family:"Eras Light ITC"; font-size:1.1em; color:white;  } 
.luxlightmarco  {  display:inline-block;
	         padding: 0em 0.4em;
	         font-family:"Eras Medium ITC"; font-size:1.1em; color:rgba(231,177,60,1);
		       background-color:rgb(3, 3, 3);
			     border: 1px solid black; 
           border-radius: 4px;
			   } 
.fv { font-family:"Eras Medium ITC"; font-size:1.2em; color: rgba(122,32,62,1); }  
.tdiaslight  { font-family:"Eras Light ITC"; font-size:1.1em; color: black; text-align:center;  }
.domaine2ymarco  { font-family:"Candaral"; font-size: 1.2em;  color: rgba(231,177,60,1);
             display:inline-block;
			 margin: 0.5em auto;
             padding: 0.1em 0.5em 0.1em 0.5em;
			 background-color:rgba(255,255,255,1);
			 border: 1px solid black; 
              border-radius: 8px;
					   }
.cuadradaborde  { text-align:center;  }			   
.cuadradaborde img {width:86%;
              margin: 2em auto!important;
			  border: 1px solid rgba(0,0,0,1); 
              border-radius: 10px;
					 }
.cuadradatxiki  { text-align:center;  }			   
.cuadradatxiki img {width:60%;
              height: auto;
              margin: 2em auto!important;
			        border: 1px solid rgba(0,0,0,1); 
              border-radius: 10px;
						 }			 
.lineacol {  border-top:3px	solid rgba(231,177,60,1);  clear:both; margin: 1em 0% 1em 0%; }
.tjourneymarco  { font-family:"OratorStd_0"; font-size:1.0em; color: black;
             display:inline-block;
			 margin: 0.5em auto;
             padding: 0.5em 0.5em 0.1em 0.5em;
			 background-color:rgba(255,255,255,1);
			 border: 1px solid rgba(231,177,60,1); 
              border-radius: 8px;
					   }
.tjourneymarcop  { font-family:"OratorStd_0"; font-size:0.8em; color: black;
             display:inline-block;
             padding: 0.5em 0.5em 0.1em 0.5em; background-color:rgba(231,177,60,0.4); margin: 0.5em auto;
	          	border: 1px solid rgba(0,0,0,1); 
              border-radius: 8px;
						   }
.tjourney  { font-family:"OratorStd_0"; font-size:1.0em; color: black;  }
.tjourneyp  { font-family:"OratorStd_0"; font-size:0.85em; color: black;  }
.tjourneyb  { font-family:"OratorStd_0"; font-size:1.0em; color: white;  }
.testr  { font-family: 'Conv_Helvetica-BlackOblique'; font-size:1.2em; color: #ef680e;  }
.notalimin { margin: 0em 1em;  
        font-size:0.70em; 
        font-family:Arial, Helvetica, sans-serif;
		font-style:italic;
		font-weight:bold;
		color: rgba(122,32,62,1);
		line-height:1.5em;
		}
.interpsfdv {clear: both;
	float: none;
	margin:0.7em auto;
	width: 85%;
	display: block;
	text-align:center;
	padding: -1.5em 0.6em;	
	border: 1px solid #333;
			  border-radius: 8px;
				background-color: rgba(122,32,62,0.2);	
}
.interpsfdv p {margin:inherit; font-family:"Segoe Script"; font-size:1.0em; color:black; font-weight:500; }

.liexpg  {  font-size: 1.0em; font-weight:bold; color: rgba(122,32,62,1); }	
.prepuntog  { font-family: 'Conv_Helvetica-BlackOblique';
             color: rgba(87,136,153,1);
             font-size:0.95em;
            }
.hotelesw3  {text-transform:uppercase;
        	font-family:"Eras Medium ITC"; 
	        font-size:1.0em;
		    font-weight:800;
		  	 }	
.punto2  {font-family: 'Conv_neuropolitical_rg';
          color: rgba(122,32,62,1);
		  font-size:0.8em; }
.h1encogido  {  font-size:1.6em; margin: 1em 1em;   }
.h2encogido  {  font-size:1.45em; margin: 0.5em 1em;    }
.h3encogido  {  font-size:1.25em; margin: 0.5em 1em;    }
.h4encogido  {  font-size:0.95em; margin: 0.5em 1em;    }
.frasespaisajes  {  font-size:1.25em; margin: 0.5em 1em;    }
         
.paisajeschina {
  /*font-family: Nyala, "Microsoft Yi Baiti", serif;*/
  font-family: 'Microsoft Yi Baiti';
  font-size: 1.4em;
}
.tipochina { font-family: 'Microsoft Yi Baiti'; font-size:1.2em;
            /*font-family: Nyala, "Microsoft Yi Baiti", serif!important;*/
			  }
.resbw { color: rgb(130, 38, 201); font-size:1.15em; }
.spain1	{font-family: Arial, Helvetica, sans-serif; font-size: 1.3em; }
.spain2	{font-family: Arial, Helvetica, sans-serif; font-size: 1.05em; }
.lugaresbw  { font-family: 'Conv_Helvetica-BlackOblique';
             color: rgb(100,50,138,1);
             font-size:0.9em;
              }
.hotelesbw  {  font-family:"Eras Medium ITC";
	          font-size:0.8em; 
              display:inline-block;
              padding: 0.2em 0.6em; 
			  margin: 0.2em  0.8em;
	          border: 1px solid rgba(0,0,0,1); 
              border-radius: 2px;
			
			 transition: all 0.3s;  }				  
.w3-border-bottomlu {border-bottom:1px solid #a571cc!important;   }	
/* ABOUTs */

.rowabout  { margin-top: 3em;   }
.columnabout {
    width: 100%;
    display: block;
  }
.cardabout {  margin: 2em auto;    }
.cardabout img { margin-top: 1.5em;  width: 86%; height: auto; }

/* Some left and right padding inside the container */
.containerabout {   padding: 0 16px;
}
/* Clear floats */
.containerabout::after, .rowabout::after {
  content: "";
  clear: both;
  display: table;
}

.titleabout {
  color: grey;
}

.buttonabout {
  border: none;
  outline: 0;
  display: inline-block;
  padding: 8px;
  color: white;
 /* background-color: #000;*/
  text-align: center;
  cursor: pointer;
  width: 60%;
}

.buttonabout:hover {
  background-color: #555;
}
.fotocard { width: 75%;    }

/*FIN de ABOUTs*/
/* Botón de LinkedIn profesional */
.linkedin-button {
  background-color: #0077B5 !important; /* Azul oficial de LinkedIn */
  text-decoration: none !important;
  border-radius: 4px;
  transition: all 0.3s ease;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 600;
  margin-bottom: 1em;
}
.linkedin-button:hover {
  background-color: #005983 !important;
  /* Azul más oscuro al hover */
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 119, 181, 0.3);
}

.linkedin-button i {
  font-size: 1.2em;
}

.fcentro {
  width: 100%;
  max-width: 1600px;
  /* El ancho máximo de tu mapa de escritorio */
  margin: 0 auto;
  /* Centrado horizontal */
  overflow: hidden;
}

.fcentro img {
  width: 100%;
  /* En móvil se estira al 100% del ancho */
  height: auto;
  /* Mantiene la proporción */
  display: block;
  margin: 0.5em auto 0.9em auto;
  border: 1px solid black;
}

.logo-contenedor {
  width: 100%;
  overflow: hidden;
}

.logo-contenedor img {
  width: 100%;
  height: auto;
  display: block;
}


/* Diseño tableta: de 660 px a 992 px. Hereda estilos de: Diseño móvil. */

@media only screen and (min-width: 660px) {
	
.titulosenpanelesw3  {  font-size:1.05em; padding: 0.4em 1.1em; }
.paneletapanoches  {  font-size:1.15em; padding: 0.2em 1.1em; }

.notasenzonasw3  {  font-size:0.95em; width:70%; margin-left:3em; } 
.notascentradasw3  {  margin:2em auto; width:88%; } 
.lineaetapasw3 	{ font-size:1.0em; font-weight:500;    }	
.txentradasacordw3 	{ font-size:1.1em; font-weight:500;    }
.bloquesleermas 	{ font-size:1.05em;    }
.prepunto  {  font-size:0.95em;  }
.notali { font-size:0.75em; }
.lineainterdias {margin:1.5em 5em 2em 5em; }
.tariffs { width: 80%;  }
.lineainterdias {margin:1.5em 5em 2em 5em; }
.interespack  { font-size:0.95em;    }			
.interespack li  { font-size: 0.95em; line-height: 1.3em; margin-bottom: 0.7em; }
.resalteli  {font-size:1.1em; font-weight:800;  }
.cuadrohome {  width: 21.5%;
           margin: 2% 0.5% 2% 2.5%;
           float:left; 
           clear:none;
           }
.w3bloquecentral  {width:98%;
              margin: 0 auto;
              text-align:center;
			  }
.w3bloqueanchofull  {width:100%; text-align:center; 	  }	
.w3bloqueanchofull2  {width:100%; text-align:center; 	  }			  
.compimapas { font-size:1.0em; }
.publiheadw3  {	font-size: 1.2em;
			}
.publiheadbw3  {font-size: 1.2em; 	}

.piefotow3 { font-size:0.9em; line-height:1.3em;  }
.chapapaisajes { font-size:1.1em; line-height:1.3em;  } 
.bloquecontactolu { width: 70%;  }

#direcion {	font-size:0.7em; 
            padding-bottom: 0.4em;
            }
 .text-block-center {
    padding: 1.0rem 0.3rem;
    width: 36%;
  }
.text-block-center h4 {font-size: 1.6rem;  }
.text-block-center p {font-size: 1.1rem;  }
.luxlight  {  font-size:1.1em;   }
.estandar  {  font-size:1.1em;   } 

.tjourneymarco  { font-size:1.1em; }	
.tjourneymarcop  { font-size:0.95em; }
.hotelesw3  {font-size:1.1em;  	 }

.h1encogido  {  font-size:2.05em;    }	
.h2encogido  {  font-size:1.75em;    }
.h3encogido  {  font-size:1.45em;    }	
.h4encogido  {  font-size:1.15em;    }	
.frasespaisajes  {  font-size:1.45em;    }	

/* ABOUTs */
/* 3 columns side by side para ABOUTs */
.columnabout {
  float:left;
  width: 33.33%;
  margin-bottom: 16px;
  padding: 0 12px;
}
.cardabout { width: 96%; 
             margin: 0.5em auto;
			}
.cardabout img{ margin-top: 0.5em;  }
.fotocard { width: 96%;    }
.buttonabout { width: 80%;  }
/* FIN ABOUTs */
.lugaresbw  {   font-size:1.02em;      }
.hotelesbw  {   font-size:0.95em; 
              padding: 0.3em 0.7em; 
			  margin: 0.2em  0.8em;
	           }	
.container-wine {
  position: relative;
  display: block;
  overflow: hidden;
  /* Recorta el zoom interno */
  border: 1px solid #000;
  border-radius: 4px;
}

.text-block-wine {
  position: absolute;
  /* En lugar de bottom fijo, usamos flex para empujar el contenido hacia abajo */
  bottom: 34px;
  right: 20px;
  /* HACEMOS EL BLOQUE ELÁSTICO */
  width: auto;
  /* Que se adapte al contenido */
  min-width: 200px;
  /* Que no sea ridículamente estrecho */
  max-width: 60%;
  /* Le damos permiso para ensancharse mucho antes de crecer hacia arriba */
  /* El combo perfecto: color semi-transparente + desenfoque */
  background-color: rgba(0, 0, 0, 0.5);
  /* Bajamos un poco a 0.5 para que luzca más el blur */
  backdrop-filter: blur(6px);
  /* El efecto de cristal esmerilado */
  -webkit-backdrop-filter: blur(8px);
  /* Compatibilidad para Safari */
  padding: 15px 25px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  /* Un borde casi invisible que le da un toque premium */
  pointer-events: none;
  /* Alineación interna del texto */
  text-align: right;
  /* Estéticamente suele quedar mejor pegado a la derecha */
  margin-top: 0;
  /* Anula el margen del modo móvil */
}
.fotowine img {
  border: none !important;
  /* Quitamos el borde a la imagen para que no crezca */
  transition: transform 0.5s ease;
}

.fotowine img {
  width: 100%;
  height: auto;
  display: block;
  border: none !important;
  /* Nos aseguramos de que no haya borde interno */
}
}

/* Diseño escritorio: de 992 px hasta un máximo de 1920 px.  Hereda estilos de: Diseño móvil y Diseño tableta. */

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

.notali { font-size:0.8em; }
.interespack li  { font-size: 1.0em; line-height: 1.5em; margin-bottom: 1em; }
.cuadrohome {  width: 21.5%;
           margin: 2% 0.5% 2% 2.5%;
            }

.cromitocentro img  { width: 12%;    }	
#interesa  { font-size:1.0em;  }
#interesa img  {   width: 31%; margin: 1%;  }
#direcion {	font-size:0.75em;  }
.w3bloquecentral  {width:96%;       
			  }
.compimapas { font-size:1.1em; }		  	 
.lugaresbarraw3  { font-size:0.90em;   }
.publiheadw3  {	font-size: 1.3em;	}
.publiheadbw3  {font-size: 1.3em; 	}	
.tariffs { width: 60%;  }
.titulosenpanelesw3  {  font-size:1.35em; padding: 0.6em 1.3em; }
.paneletapanoches {  font-size:1.35em; padding: 0.3em 1.3em; }	
.custom-title:hover {
    transform: scale(1.08); /* Efecto más pronunciado en pantallas grandes */
  }
.custom-badge:hover {transform: scale(1.15);  }	
.bloquecontactolu { width: 76%;  }
 .text-block-center {
    padding: 1.1rem;
    width: 35%;
  }
.text-block-wine {
        /* Aumentamos el ancho máximo permitido en escritorio */
        /* Un 50% o 55% suele ser el límite ideal para no tapar la parte izquierda de la foto */
        max-width: 55%; 
        
        padding: 20px 30px;
        bottom: 30px; /* Un poco más de aire desde el borde inferior */
        right: 30px;
    }
    
    .text-block-wine h4 {
        font-size: 1.6em; /* Titulo más imponente en pantallas grandes */
    }

    .text-block-wine p {
        font-size: 1.1em;
        line-height: 1.4;
    }		
}