/*
 * Capa responsive para Hostal Ana.
 * Se carga DESPUÉS de comun.css y solo actúa por debajo de 980px:
 * en pantallas de escritorio el diseño original no cambia.
 */

@media (max-width: 980px) {

	html { -webkit-text-size-adjust: 100%; }

	/* El diseño original fija todo a 960px: pasa a fluido */
	#fondoblanco, #cabecera, #cuerpo, #contenidopie, #visor, #galeria,
	#texto, .csubmenu, #col_izq, #col_der_hom, #encabezado, #formulario,
	#direccion, #principal {
		box-sizing: border-box;
		max-width: 100%;
	}

	/* ---------- Cabecera ---------- */
	#cabecera {
		width: auto;
		height: auto;
		margin: 0;
		padding: 10px 12px 0;
		overflow: hidden;
	}
	#cabecera #logo {
		float: none;
		width: auto;
		height: auto;
	}
	h1 {
		width: 100%;
		max-width: 281px;
		background-size: contain;
	}
	#idiomas {
		float: none;
		width: auto;
		text-align: left;
		margin: 0 0 8px;
		overflow: hidden;
	}
	#cabecera #menusup {
		float: none;
		width: auto;
		height: auto;
		clear: both;
		overflow: hidden;
	}
	#cabecera #menusup ul { float: none; }
	#cabecera #menusup li {
		height: auto;
		line-height: 36px;
		text-align: left;
	}
	#cabecera #menusup li a {
		height: auto;
		padding: 0 14px 0 0 !important;
		margin: 0 !important;
		text-align: left;
	}

	/* ---------- Cuerpo ---------- */
	#cuerpo {
		width: auto;
		margin: 0 0 20px;
		padding: 0 12px 20px;
	}
	/* hay #cuerpo anidados en varias páginas: no duplicar el relleno */
	#cuerpo #cuerpo {
		padding: 0;
		margin: 0;
	}

	/* ---------- Galería (PikaChoose) ---------- */
	#visor { float: none; width: 100%; margin: 0 0 12px; }
	#galeria {
		float: none;
		width: 100%;
		height: auto !important;
		margin: 12px 0;
	}
	.pika-wrap { width: 100%; }
	.pika-image {
		position: relative;
		width: 100%;
		height: auto;
		aspect-ratio: 960 / 535;
		overflow: hidden;
	}
	.pika-image > a,
	.pika-image img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	/* los efectos de transición calculan tamaños en px: se anulan */
	.pika-image .animation { display: none !important; }
	.pika-imgnav a.previous,
	.pika-imgnav a.next {
		top: 50%;
		margin-top: -20px;
	}
	#pikame { max-width: 100%; }

	/* ---------- Columnas ---------- */
	.csubmenu {
		float: none;
		width: 100%;
		margin-bottom: 12px;
	}
	.csubmenu ul.submenu li {
		display: inline-block;
		width: auto;
		height: auto;
		margin: 0 4px 6px 0;
		vertical-align: top;
	}
	li a.ff, li a.ffactivo, li a.ff1, li a.ffactivo1, li a.ff2, li a.ffactivo2,
	li a.ff:hover, li a.ffactivo:hover {
		width: auto;
		height: auto;
		padding: 5px 12px;
		font-size: 14px;
		line-height: 20px;
		background-image: none;
		background-color: #7e8e9a;
		color: #fff;
		border-radius: 3px;
	}
	li a.ffactivo, li a.ffactivo:hover, li a.ff:hover {
		background-color: #c9d3da;
		color: #333;
	}

	#texto, #col_izq, #col_der_hom, #col_der, #encabezado, #formulario,
	.sitemap {
		float: none !important;
		width: 100% !important;
		padding-left: 0;
		padding-right: 0;
	}
	#texto { margin-top: 12px; }
	#texto p { text-align: left; }
	#col_der_hom { padding: 0; }
	#col_izq img { float: none; }
	#col_der_hom img { max-width: 100%; height: auto; }
	.sitemap { margin-right: 0; }

	/* ---------- Tarifas ---------- */
	table.tarifas { width: 100% !important; }
	table.tarifas td { width: auto !important; }

	/* ---------- Formularios ---------- */
	#principal { width: 100%; }
	table.todo,
	table.todo tbody,
	table.todo tr,
	table.todo td {
		display: block;
		width: 100% !important;
		box-sizing: border-box;
	}
	table.todo td { padding: 6px 8px; }
	#formulario input[type="text"],
	#formulario input[type="email"],
	#formulario input[type="date"],
	#formulario input[type="number"],
	#formulario textarea,
	#formulario select,
	table.todo input[type="text"],
	table.todo input[type="email"],
	table.todo input[type="date"],
	table.todo input[type="number"],
	table.todo textarea,
	table.todo select {
		box-sizing: border-box;
		width: 100%;
		max-width: 100%;
		height: auto;
		padding: 8px 10px;
		font-size: 16px; /* evita el zoom automático en iOS */
	}
	table.todo textarea { min-height: 120px; }
	table.todo input[type="checkbox"],
	#formulario input[type="checkbox"] {
		width: auto;
		height: auto;
		margin-right: 6px;
	}
	table.todo input[type="submit"] {
		width: auto;
		height: auto;
		padding: 10px 28px;
		font-size: 16px;
	}
	#entradaVerificacion { width: 80px !important; }
	#muestraVerificacion { display: inline-block; }

	/* ---------- Mapa y medios ---------- */
	iframe { max-width: 100%; }
	img { max-width: 100%; }
	.pika-image img, .clip img { max-width: none; }

	/* ---------- Pie ---------- */
	#pie {
		height: auto;
		padding: 20px 12px 0;
		box-sizing: border-box;
		overflow: hidden;
	}
	#contenidopie {
		width: auto;
		padding-bottom: 30px;
	}
	#contenidopie #direccion {
		float: none;
		width: auto;
	}
	#contenidopie #direccion ul li {
		display: inline-block;
		padding: 2px 10px 2px 0;
		background: none;
	}
}

@media (max-width: 600px) {
	h2, h2.linea { font-size: 21px; }
	h3 { font-size: 17px; }
	iframe { width: 100%; height: 320px; }
	#cabecera #menusup li a { font-size: 14px; }
}