/* portada_b.css - Portada de deporcuna.com, version B (moderna y adaptable al movil)
   Colores: cabeceras de tarjeta #6B6B00 (verde oliva), enlaces #0B3D91, resaltado de novedades #FFF200 */

body {
	margin: 0;
	padding: 8px;
	background: #FFFFFF url(imagenes/escudo_de_porcuna.jpg);
	color: #222222;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 15px;
	line-height: 1.5;
}
#pagina { max-width: 1180px; margin: 0 auto; }
img { border: 0; max-width: 100%; height: auto; }
a { color: #0B3D91; text-decoration: none; }
a:hover { color: #C00000; text-decoration: underline; }
.peq { font-size: 0.8em; margin: 0.4em 0; }

/* ---- Barra superior y fecha ---- */
#barra { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; }
#barra .iconos a { margin-left: 8px; font-size: 0.85em; }
#barra .iconos img { vertical-align: middle; }
.hoy { text-align: center; margin: 4px 0 12px 0; font-size: 0.95em; }
.hoy font[color="#0000ff" i] { color: #0B3D91; }

/* ---- Estructura: 1 columna en movil, 3 en ordenador ---- */
#cuerpo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
#centro { order: 1; }
#izq { order: 2; }
#der { order: 3; }
@media (min-width: 900px) {
	#cuerpo { grid-template-columns: 210px minmax(0, 1fr) 210px; align-items: start; }
	#izq { order: 1; }
	#centro { order: 2; }
	#der { order: 3; }
}

/* ---- Tarjetas ---- */
.tarjeta {
	background-color: #FFFFFF;
	border: 1px solid #C9C98A;
	border-radius: 8px;
	margin-bottom: 12px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
.tarjeta > h2 {
	margin: 0;
	background-color: #6B6B00;
	color: #FFFFFF;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 15px;
	text-align: center;
	padding: 6px 10px;
}
.tarjeta .cuerpo { padding: 6px 12px; }
.centrado .cuerpo { text-align: center; }
ul.menu { list-style: none; margin: 0; padding: 4px 0; }
ul.menu li { padding: 0; line-height: 1.3; font-weight: bold; }
ul.amigas { padding: 2px 0; }
ul.amigas li { font-weight: normal; font-size: 0.78em; line-height: 1.2; padding: 0; }
.mas { text-align: center; margin: 0.5em 0; }

/* ---- Cabecera de la portada ---- */
.hero { padding: 12px; }
.hero-txt { text-align: center; }
.hero-foto { text-align: center; margin-top: 10px; }
.hero-foto img { border: 2px solid #0000FF; }
.hero p { margin: 0.2em 0; }
.t1 { font-family: Arial, Helvetica, sans-serif; font-size: 2.3em; font-weight: bold; color: #E00000; line-height: 1.1; }
.t2 { font-family: Arial, Helvetica, sans-serif; font-size: 1.5em; font-weight: bold; color: #E00000; }
.t3 { color: #006400; font-weight: bold; }
.t4 { color: #666666; font-size: 0.75em; }
.t5 { font-size: 1.1em; font-weight: bold; }
.c1 { color: #0000FF; } .c2 { color: #E03030; } .c3 { color: #7A7A00; } .c4 { color: #800080; }
.contacto { margin-top: 0.8em; }
.contacto a { background-color: #00FF00; color: #000000; padding: 3px 10px; border-radius: 4px; font-size: 0.9em; }
.iconos-hero { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; text-align: center; padding: 12px 0 4px 0; font-size: 0.85em; }
.ico { display: inline-block; max-width: 110px; }
.autor { text-align: center; font-weight: bold; margin: 0.8em 0 0.4em 0; }
.autor a { padding: 1px 6px; color: #000000; text-decoration: underline; }
.autor .amar { background-color: #FFFF00; }
.autor .verde { background-color: #00FF00; }
.buscador { text-align: center; }
.buscador label { font-size: 0.9em; margin-right: 4px; }

.banners { text-align: center; margin-bottom: 12px; }
.banner { border: 1px solid #000000; box-sizing: border-box; }
.banners.superior img { margin: 4px 0; }
.banners img { margin: 4px; }
.banners.superior a { display: block; }
.banners.lateral img { display: block; margin: 8px auto; }

/* ---- Novedades y Noticias ---- */
.dos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 640px) { .dos { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
ul.nov { list-style: none; margin: 0; padding: 0; }
ul.nov li { padding: 8px 12px; border-bottom: 1px solid #E3E3C0; font-size: 0.9em; }
ul.nov li:last-child { border-bottom: 0; }
.fecha { display: inline-block; font-size: 0.8em; background-color: #EEF0F8; color: #334; padding: 0 7px; border-radius: 10px; }
.fecha.nuevo { background-color: #FFF200; color: #000000; font-weight: bold; }
.nova .tipo { color: #B00000; }
.noti .tipo { color: #00695C; }

/* ---- Farmacia de guardia ---- */
.farmacia .cuerpo { padding: 4px 6px; }
.farmacia .turno { padding: 5px 0; border-bottom: 1px solid #DDDDDD; font-size: 0.72em; line-height: 1.35; white-space: nowrap; text-align: center; }
.farmacia .turno:last-of-type { border-bottom: 0; }
.etq { background-color: #2E7D32; color: #FFFFFF; font-size: 0.75em; padding: 0 7px; border-radius: 8px; }

.videos .cuerpo { display: flex; flex-wrap: wrap; justify-content: space-around; gap: 12px; text-align: center; font-size: 0.85em; }
.video { display: inline-block; }

/* ---- Pie ---- */
hr { border: 0; border-top: 1px solid #999999; margin: 16px 0 8px 0; }
.legal { text-align: center; color: #555555; font-size: 0.85em; }
.legal a { color: #555555; text-decoration: underline; }
.firma { text-align: center; color: #555555; font-size: 0.75em; font-style: italic; }

/* ---- Menu de saltos solo para movil (se oculta en ordenador, desde 900 px) ---- */
.menu-movil, .subir-movil { display: none; }
@media (max-width: 899px) {
	html { scroll-behavior: smooth; }
	#sec-novedades, #sec-noticias, #sec-menus, #sec-servicios, #sec-tiempo, #sec-farmacia, #sec-obituario, #sec-amigas, #sec-loterias, #sec-videos { scroll-margin-top: 8px; }
	.menu-movil { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 12px 0; }
	.menu-movil a {
		flex: 1 1 42%; box-sizing: border-box; text-align: center; padding: 10px 6px;
		font: bold 15px Arial, Helvetica, sans-serif; color: #FFFFFF; text-decoration: none;
		border-radius: 8px; border: 1px solid rgba(0,0,0,0.35); box-shadow: 0 2px 3px rgba(0,0,0,0.25);
	}
	.menu-movil a:hover { color: #FFFFFF; text-decoration: none; }
	.menu-movil a:active { transform: translateY(1px); box-shadow: none; }
	.menu-movil .mm1 { background: #C62828; }
	.menu-movil .mm2 { background: #1565C0; }
	.menu-movil .mm3 { background: #2E7D32; }
	.menu-movil .mm4 { background: #6A1B9A; }
	.menu-movil .mm5 { background: #00838F; }
	.menu-movil .mm6 { background: #AD1457; }
	.menu-movil .mm7 { background: #EF6C00; }
	.menu-movil .mm8 { background: #5D4037; }
	.menu-movil .mm9 { background: #37474F; }
	.menu-movil .mm10 { background: #212121; }
	.subir-movil {
		display: block; position: fixed; right: 10px; bottom: 10px; z-index: 50;
		background: #6B6B00; color: #FFFFFF; font: bold 14px Arial, Helvetica, sans-serif;
		padding: 9px 14px; border-radius: 20px; text-decoration: none; box-shadow: 0 2px 5px rgba(0,0,0,0.4);
	}
	.subir-movil:hover { color: #FFFFFF; text-decoration: none; }
}

/* ---- Cabecera: iconos a los lados de la foto (3 + 3) ---- */
.hero-centro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 10px; align-items: center; margin-top: 10px; }
.hero-centro .hero-foto { grid-column: 1 / -1; order: -1; margin-top: 0; }
.ico-col { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; font-size: 0.85em; }
@media (min-width: 600px) {
	.hero-centro { grid-template-columns: minmax(0, 1fr) 164px minmax(0, 1fr); }
	.hero-centro .hero-foto { grid-column: auto; order: 0; }
}

/* ---- Farmacia de guardia y cuenta atras, a dos columnas ---- */
.paneles { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 4px; }
.paneles .tarjeta { margin-bottom: 0; }
@media (min-width: 640px) { .paneles { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 900px) and (max-width: 1099px) { .paneles { grid-template-columns: minmax(0, 1fr); } }
.paneles { margin-bottom: 12px; }
.cuenta .cuerpo { font-size: 0.88em; text-align: left; }
.cuenta .cuerpo p { margin: 0.45em 0; }
.cuenta .cuerpo p.mas { text-align: center; }

/* ---- Banners superiores en una sola linea si caben (centro de 732 px = pantalla desde 1196 px) ---- */
@media (min-width: 1196px) {
	.banners.superior { display: flex; flex-wrap: nowrap; justify-content: center; align-items: center; gap: 8px; }
	.banners.superior a { display: block; flex: 0 1 auto; min-width: 0; }
	.banners.superior img { margin: 0; max-width: 100%; height: auto; }
}