@charset "utf-8";
/*------------------------------------*\
	MODERNO
	Estilos actuales de la web. Se carga después de base.css,
	que reúne solo las reglas heredadas de la plantilla antigua que siguen en uso.
\*------------------------------------*/
:root {
	--azul: #025197;
	--azul-oscuro: #013a6b;
	--azul-suave: #eaf2fb;
	--texto: #3b4351;
	--texto-suave: #6b7483;
	--fondo: #f4f6f9;
	--borde: #e2e7ee;
	--radio: 14px;
	--sombra: 0 1px 2px rgba(16, 38, 70, .06), 0 6px 20px rgba(16, 38, 70, .07);
}

html {
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	color: var(--texto);
	-webkit-font-smoothing: antialiased;
}
body { background: var(--fondo); }
p { color: var(--texto); }

/*--- Títulos: sin sombra verde, más limpios ---*/
h1, h2, h3, h4 {
	text-shadow: none;
	color: var(--azul);
	letter-spacing: .01em;
}
h1 { line-height: 1.25; margin-bottom: .6em; }
h1 a { color: var(--azul); transition: color .2s; }
h1 a:hover { color: var(--azul-oscuro); }

a { transition: color .2s, background-color .2s, box-shadow .2s, transform .2s; }
a:hover { color: var(--azul-oscuro); }

/*--- Cabecera ---*/
.wrapper > div > img.center,
.wrapper > div > img:first-child,
.recreacion > img {
	border-radius: var(--radio);
	box-shadow: var(--sombra);
	max-width: 100%;
	height: auto;
}

/*--- Menú principal: botones planos tipo "píldora" ---*/
#nav.main a {
	background: #fff;
	border: 1px solid var(--borde);
	border-radius: 999px;
	color: var(--texto);
	text-shadow: none;
	box-shadow: 0 1px 2px rgba(16, 38, 70, .05);
	letter-spacing: .04em;
	margin: 0 .15em .6em;
}
#nav.main a:hover {
	color: var(--azul);
	background: var(--azul-suave);
	border-color: #c9dbf0;
	text-shadow: none;
	transform: translateY(-1px);
}
#nav.main a.active {
	color: #fff;
	background: var(--azul);
	border-color: var(--azul);
	text-shadow: none;
	letter-spacing: .04em;
	box-shadow: 0 4px 12px rgba(2, 81, 151, .25);
}

/*--- Cabecera: botón de teléfono y menú en la misma fila ---*/
.wrapper > div:has(> .boton-telefono) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px 16px;
}
.wrapper > div:has(> .boton-telefono) > img,
.wrapper > div:has(> .boton-telefono) > .recreacion { flex-basis: 100%; }

/* Imágenes creadas con IA: aviso discreto en una esquina */
.recreacion { position: relative; display: block; line-height: 0; }
.recreacion > img { display: block; margin: 0 auto; }
/* Fotos retocadas: marco con la etiqueta «Fotomontaje»; el flotado lo lleva el marco */
.fotomontaje {
	position: relative;
	display: block;
	line-height: 0;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 2px 10px rgba(16, 38, 70, .12);
}
.grids > .grid-10 .fotomontaje img { display: block; margin: 0; border-radius: 0; box-shadow: none; }
/* Fotos propias a todo el ancho de la columna de texto */
.fotomontaje.foto-grande { margin: 4px 0 20px; }
.grids > .grid-10 .foto-grande img { width: 100%; height: auto; }
.recreacion-aviso,
.fotomontaje-aviso {
	position: absolute;
	right: 10px;
	bottom: 8px;
	padding: 2px 7px;
	border-radius: 4px;
	background: rgba(0, 0, 0, .28);
	color: rgba(255, 255, 255, .8);
	font-size: 10px;
	line-height: 1.5;
	letter-spacing: .02em;
	pointer-events: none;
}
.wrapper > div:has(> .boton-telefono) > #nav.main { float: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; }
.wrapper > div:has(> .boton-telefono) > #nav.main li { display: block; margin: 0; padding: 0; }
.wrapper > div:has(> .boton-telefono) > #nav.main a { margin: .3em .1em; padding-left: 1em; padding-right: 1em; }
/* Si no caben en una fila, se apilan centrados */
@media (max-width: 1240px) {
	.wrapper > div:has(> .boton-telefono) { justify-content: center; }
}

/*--- Botón de teléfono ---*/
.boton-telefono {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	padding: 9px 28px 9px 9px;
	background: var(--azul);
	color: #fff;
	border-radius: 999px;
	text-decoration: none;
	text-align: left;
	box-shadow: 0 4px 14px rgba(2, 81, 151, .28);
}
.boton-telefono:hover, .boton-telefono:focus-visible {
	background: var(--azul-oscuro);
	color: #fff;
	text-decoration: none;
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(2, 81, 151, .35);
}
.bt-icono {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #fff;
}
.bt-icono svg { width: 30px; height: 30px; fill: var(--azul); }
/* Onda que se expande alrededor del icono */
.bt-icono::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 2px solid #fff;
	opacity: 0;
}
.boton-telefono:hover .bt-icono svg,
.boton-telefono:focus-visible .bt-icono svg { animation: telefono-suena .9s ease-in-out infinite; }
.boton-telefono:hover .bt-icono::after,
.boton-telefono:focus-visible .bt-icono::after { animation: telefono-onda 1.2s ease-out infinite; }
.bt-texto { display: flex; flex-direction: column; line-height: 1.2; }
.bt-etiqueta { font-size: .85em; opacity: .85; }
.bt-texto strong { font-family: 'Oswald', Arial, sans-serif; font-size: 1.9em; font-weight: 500; letter-spacing: .03em; }

@keyframes telefono-suena {
	0%, 50%, 100% { transform: rotate(0); }
	10%, 30% { transform: rotate(-18deg); }
	20%, 40% { transform: rotate(18deg); }
}
@keyframes telefono-onda {
	0% { transform: scale(1); opacity: .8; }
	100% { transform: scale(1.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.boton-telefono:hover .bt-icono svg, .boton-telefono:focus-visible .bt-icono svg,
	.boton-telefono:hover .bt-icono::after, .boton-telefono:focus-visible .bt-icono::after { animation: none; }
}

/*--- Contenido principal en tarjeta blanca ---*/
.grids > .grid-10 {
	background: #fff;
	border: 1px solid var(--borde);
	border-radius: var(--radio);
	box-shadow: var(--sombra);
	padding: 28px 32px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
/* Texto alineado a la izquierda: evita los huecos del justificado junto a las fotos */
.grids > .grid-10[style*="justify"] { text-align: left !important; }
.grids > .grid-10 img {
	border-radius: 10px;
	box-shadow: 0 2px 10px rgba(16, 38, 70, .12);
}

/* Reparto de columnas: texto más ancho, columna derecha más estrecha (suman lo mismo que grid-10 + grid-6) */
@media (min-width: 961px) {
	#contenido .grids > .grid-10 { width: 68.571%; }
	#contenido .grids > .grid-6 { width: 26.071%; }
	#contenido .green .como-h3 { font-size: 1.6em; padding-left: 16px; padding-right: 16px; }
	#contenido .green p.como-h6 { padding-left: 16px; padding-right: 16px; }
}

/*--- Cajas laterales ---*/
.green, .grey {
	background: #fff;
	border: 1px solid var(--borde);
	border-radius: var(--radio);
	box-shadow: var(--sombra);
	overflow: hidden;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.green h2, .grey h2, .green h3, .grey h3, .green h4, .grey h4 {
	border-bottom: 1px solid var(--borde);
	background: var(--azul-suave);
	padding-top: .35em;
	padding-bottom: .35em;
}

/*--- Botones de llamada a la acción ("Ver precios...", etc.) ---*/
ul.main { margin-left: 0; }
ul.main li { display: inline-block; }
ul.main a.active,
a.button {
	display: inline-block;
	padding: .65em 1.4em;
	background: var(--azul);
	background-image: none;
	color: #fff;
	border: 0;
	border-radius: 999px;
	font-weight: 600;
	text-shadow: none;
	box-shadow: 0 4px 12px rgba(2, 81, 151, .22);
}
ul.main a.active:hover,
a.button:hover {
	background: var(--azul-oscuro);
	background-image: none;
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(2, 81, 151, .3);
}

/*--- Tablas de precios ---*/
table { border-collapse: separate; border-spacing: 0; border: 1px solid var(--borde); border-radius: 10px; overflow: hidden; }
th { background: var(--azul-suave); color: var(--azul); }
th, td { border-color: var(--borde); }

/*--- Formularios ---*/
.contact_form ul { margin-left: 0; width: auto; max-width: 560px; }
.contact_form li { padding: 0; }
.contact_form label { float: none; font-family: inherit; font-size: .9em; font-weight: 600; color: var(--texto); }
.contact_form input, .contact_form textarea { height: auto; padding: 10px 12px !important; box-shadow: none; color: var(--texto); }
.contact_form input:focus, .contact_form textarea:focus { padding-right: 12px; }
.contact_form input:required:valid, .contact_form textarea:required:valid { box-shadow: none; border-color: #cfd6e0; }
.contact_form button { margin-left: 0; }
.aviso-datos { font-size: .8em; line-height: 1.5; color: var(--texto-suave); margin: 0 0 14px; text-align: left; }
.contact_form textarea { font: inherit; }
input[type="text"], input[type="email"], input[type="tel"], textarea {
	border: 1px solid #cfd6e0;
	border-radius: 10px;
	background: #fff;
	font: inherit;
	color: var(--texto);
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	transition: border-color .2s, box-shadow .2s;
}
input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus, textarea:focus {
	outline: none;
	border-color: var(--azul);
	box-shadow: 0 0 0 3px rgba(2, 81, 151, .15);
}
button.submit, button[type="submit"] {
	background: var(--azul);
	color: #fff;
	border: 0;
	border-radius: 999px;
	font: inherit;
	font-weight: 600;
	padding: .7em 1.6em !important;
	box-shadow: 0 4px 12px rgba(2, 81, 151, .22);
	transition: background-color .2s, transform .2s;
}
button.submit:hover, button[type="submit"]:hover { background: var(--azul-oscuro); transform: translateY(-1px); }

/*--- Pie ---*/
#footer {
	background: var(--azul-oscuro);
	border-radius: var(--radio);
	padding: 0;
	overflow: hidden;
	box-shadow: var(--sombra);
}
#footer p, #footer a, #footer span { color: #c9d9ec; }
#footer a { text-decoration: none; }
#footer a:hover { color: #fff; text-decoration: underline; }
.pie-columnas {
	display: grid;
	grid-template-columns: 1.3fr 1.2fr 1fr 1fr 1fr;
	gap: 28px;
	padding: 36px 40px 28px;
	text-align: left;
}
#footer .pie-col p { padding: 0; margin: 0 0 .8em; font-size: .92em; line-height: 1.6; }
#footer .pie-titulo {
	font-family: 'Oswald', Arial, sans-serif;
	font-size: 1.15em;
	font-weight: 500;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #fff;
	margin-bottom: 1em;
	padding-bottom: .5em;
	border-bottom: 2px solid rgba(255, 255, 255, .15);
}
.pie-lista { list-style: none; margin: 0; padding: 0; font-size: .92em; }
.pie-lista li { margin: 0 0 .65em; line-height: 1.5; }
.pie-contacto li { display: flex; align-items: flex-start; gap: 10px; }
.pie-contacto svg { flex: none; width: 18px; height: 18px; margin-top: 2px; fill: #8fb6e0; }
#footer .pie-contacto a { color: #fff; font-weight: 600; }
.pie-inferior {
	background: rgba(0, 0, 0, .18);
	padding: 14px 40px;
	text-align: center;
}
#footer .pie-inferior p { margin: 0; padding: 0; font-size: .85em; color: #9fb8d4; }
#footer .pie-inferior p.pie-ia { margin-top: 4px; font-size: .75em; color: #7f9cbd; }
@media (max-width: 1100px) {
	.pie-columnas { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 960px) {
	.pie-columnas { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
	.pie-columnas { grid-template-columns: 1fr; gap: 24px; padding: 28px 22px 20px; }
	.pie-inferior { padding: 12px 22px; }
}

/*--- Páginas de guía: preguntas frecuentes, ventajas y comparativa ---*/
.entradilla { font-size: 1.1em; color: var(--texto); }

/* Preguntas frecuentes en acordeón */
.faq { margin: 0 0 30px; }
.faq details {
	border: 1px solid var(--borde);
	border-radius: 12px;
	margin-bottom: 10px;
	background: #fff;
	transition: box-shadow .2s, border-color .2s;
}
.faq details[open] { border-color: #c9dbf0; box-shadow: 0 4px 14px rgba(16, 38, 70, .07); }
.faq summary {
	position: relative;
	cursor: pointer;
	list-style: none;
	padding: 16px 52px 16px 20px;
	font-weight: 600;
	color: var(--azul);
	line-height: 1.4;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
	content: "+";
	position: absolute;
	right: 18px;
	top: 50%;
	transform: translateY(-50%);
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--azul-suave);
	color: var(--azul);
	font-size: 1.2em;
	line-height: 26px;
	text-align: center;
	transition: transform .2s, background-color .2s;
}
.faq details[open] summary::after { content: "\2212"; background: var(--azul); color: #fff; }
.faq summary:hover { background: var(--azul-suave); border-radius: 12px; }
.faq .respuesta { padding: 0 20px 6px; }
.faq .respuesta p { margin-bottom: .8em; }

/* Tarjetas de ventajas */
.tarjetas {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 16px;
	margin: 0 0 30px;
}
.tarjeta {
	background: var(--azul-suave);
	border: 1px solid #d6e5f5;
	border-radius: 12px;
	padding: 18px 20px;
}
.tarjeta .tarjeta-titulo {
	font-family: 'Oswald', Arial, sans-serif;
	font-size: 1.25em;
	font-weight: 500;
	color: var(--azul);
	margin: 0 0 .4em;
	line-height: 1.3;
}
.tarjeta p { margin: 0; font-size: .95em; }

/* Calendario por temporadas (cuándo anunciarse): cada etapa tiene su color; .destacado marca los meses fuertes */
.temporadas {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin: 0 0 12px;
}
.temporada {
	--t-color: var(--azul);
	--t-suave: var(--azul-suave);
	background: #fff;
	border: 1px solid var(--borde);
	border-top: 5px solid var(--t-color);
	border-radius: var(--radio);
	padding: 18px 20px 8px;
	box-shadow: 0 1px 2px rgba(16, 38, 70, .05);
}
.t-primavera { --t-color: #3a9d5d; --t-suave: #e7f5ec; }
.t-verano { --t-color: #d98300; --t-suave: #fff3d9; }
.t-otono { --t-color: #c4572b; --t-suave: #fbeae2; }
.t-cabecera { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.t-icono {
	flex: none;
	width: 44px;
	height: 44px;
	padding: 10px;
	border-radius: 50%;
	background: var(--t-suave);
	fill: var(--t-color);
	stroke: var(--t-color);
	box-sizing: border-box;
}
.t-icono path, .t-icono circle { stroke: none; }
#contenido .temporada .t-nombre {
	margin: 0;
	font-family: 'Oswald', Arial, sans-serif;
	font-size: 1.3em;
	font-weight: 500;
	line-height: 1.2;
	color: var(--t-color);
}
#contenido .temporada .t-meses { margin: 0; font-size: .85em; color: var(--texto-suave); }

/* Línea de tiempo con un punto por mes */
.t-linea { position: relative; list-style: none; margin: 0; padding: 0 0 0 24px; }
.t-linea::before {
	content: "";
	position: absolute;
	left: 6px;
	top: 6px;
	bottom: 14px;
	width: 2px;
	background: var(--t-suave);
}
.t-linea li { position: relative; margin: 0; padding: 0 0 14px; font-size: .92em; line-height: 1.5; }
.t-linea li::before {
	content: "";
	position: absolute;
	left: -24px;
	top: .3em;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: #fff;
	border: 3px solid var(--t-color);
	box-sizing: border-box;
}
.t-linea .mes { display: block; font-weight: 700; color: var(--t-color); }
.t-linea li.destacado::before { background: var(--t-color); box-shadow: 0 0 0 4px var(--t-suave); }
.t-linea li.destacado .mes::after,
.t-sello {
	content: "Temporada fuerte";
	display: inline-block;
	margin-left: 8px;
	padding: 1px 9px;
	border-radius: 999px;
	background: var(--t-color);
	color: #fff;
	font-size: .72em;
	font-weight: 700;
	letter-spacing: .02em;
	vertical-align: 2px;
}
.t-leyenda { font-size: .85em; color: var(--texto-suave); margin-bottom: 30px; }
.t-leyenda .t-sello { margin: 0 6px 0 0; background: var(--azul); vertical-align: 1px; }
@media (max-width: 720px) {
	.temporadas { grid-template-columns: 1fr; }
	.temporada { padding: 16px 16px 6px; }
}

/* Pasos numerados */
.pasos { list-style: none; margin: 0 0 30px; padding: 0; counter-reset: paso; }
.pasos li {
	position: relative;
	counter-increment: paso;
	padding: 4px 0 18px 56px;
	min-height: 40px;
}
.pasos li::before {
	content: counter(paso);
	position: absolute;
	left: 0;
	top: 0;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--azul);
	color: #fff;
	font-family: 'Oswald', Arial, sans-serif;
	font-size: 1.2em;
	line-height: 40px;
	text-align: center;
}

/* Tabla comparativa */
.tabla-scroll { overflow-x: auto; margin: 0 0 30px; }
.tabla-comparativa { width: 100%; min-width: 560px; }
.tabla-comparativa th, .tabla-comparativa td { padding: 12px 14px; border-bottom: 1px solid var(--borde); text-align: left; vertical-align: top; }
.tabla-comparativa thead th { background: var(--azul); color: #fff; font-family: 'Oswald', Arial, sans-serif; font-weight: 500; letter-spacing: .03em; }
.tabla-comparativa tbody th { background: var(--azul-suave); color: var(--azul); width: 22%; }
.tabla-comparativa tbody tr:last-child th, .tabla-comparativa tbody tr:last-child td { border-bottom: 0; }

/* Caja final de llamada a la acción */
.llamada-accion {
	background: var(--azul);
	border-radius: var(--radio);
	padding: 24px 28px;
	margin: 10px 0 10px;
	text-align: center;
}
.llamada-accion p { color: #fff; margin: 0 0 14px; font-size: 1.1em; }
.llamada-accion a.boton-blanco {
	display: inline-block;
	padding: .65em 1.6em;
	background: #fff;
	color: var(--azul);
	border-radius: 999px;
	font-weight: 700;
	text-decoration: none;
	margin: 4px 6px;
}
.llamada-accion a.boton-blanco:hover { background: var(--azul-suave); color: var(--azul-oscuro); transform: translateY(-1px); }

@media (max-width: 720px) {
	.faq summary { padding: 14px 48px 14px 16px; }
	.faq .respuesta { padding: 0 16px 4px; }
	.llamada-accion { padding: 20px 18px; }
}

/*--- Gráfico animado del kiosco (index) ---*/
.grafico-kiosco {
	clear: both;
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: 24px;
	align-items: center;
	margin: 24px 0 28px;
	padding: 20px;
	background: var(--azul-suave);
	border: 1px solid #d6e5f5;
	border-radius: var(--radio);
}
.gk-ilustracion { display: block; width: 100%; height: auto; border-radius: 12px; overflow: hidden; }
.gk-cielo { fill: #cfe3f7; animation: gk-dia-noche 18s ease-in-out infinite; }
.gk-sol { fill: #ffd257; animation: gk-sol 18s ease-in-out infinite; }
.gk-farola-luz { fill: #ffe9a6; opacity: 0; animation: gk-encender 18s ease-in-out infinite; }
.gk-cartel-luz { fill: #fff6cc; opacity: 0; filter: blur(6px); animation: gk-encender 18s ease-in-out infinite; }
.gk-texto-grande { font: 600 15px 'Oswald', Arial, sans-serif; fill: #fff; letter-spacing: .5px; }
.gk-texto-enorme { font: 600 24px 'Oswald', Arial, sans-serif; fill: #fff; }
.gk-texto-peque { font: 600 8.5px Arial, sans-serif; fill: #fff; letter-spacing: .4px; }
.gk-oscuro { fill: #1e2a38; }

/* Los tres carteles se alternan en un ciclo de 9 s */
.gk-cartel { opacity: 0; animation: gk-cartel 9s infinite; }
.gk-cartel-2 { animation-delay: 3s; }
.gk-cartel-3 { animation-delay: 6s; }

/* Peatones cruzando por delante del kiosco */
.gk-peaton-1 { animation: gk-cruzar 11s linear infinite; }
.gk-peaton-2 { animation: gk-cruzar-vuelta 14s linear infinite; animation-delay: -5s; }
.gk-pierna-a, .gk-pierna-b { transform-box: fill-box; transform-origin: top center; }
.gk-pierna-a { animation: gk-paso .5s ease-in-out infinite alternate; }
.gk-pierna-b { animation: gk-paso .5s ease-in-out infinite alternate-reverse; }

@keyframes gk-cartel {
	0% { opacity: 0; }
	5%, 33% { opacity: 1; }
	38%, 100% { opacity: 0; }
}
@keyframes gk-cruzar { from { transform: translateX(-20px); } to { transform: translateX(340px); } }
@keyframes gk-cruzar-vuelta { from { transform: translateX(340px); } to { transform: translateX(-20px); } }
@keyframes gk-paso { from { transform: rotate(-16deg); } to { transform: rotate(16deg); } }
@keyframes gk-dia-noche { 0%, 40%, 100% { fill: #cfe3f7; } 55%, 85% { fill: #23395a; } }
@keyframes gk-sol { 0%, 40%, 100% { opacity: 1; transform: translateY(0); } 55%, 85% { opacity: 0; transform: translateY(30px); } }
@keyframes gk-encender { 0%, 42%, 100% { opacity: 0; } 55%, 85% { opacity: .85; } }

/* Cifras clave */
.gk-cifras {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}
.gk-cifras li {
	background: #fff;
	border-radius: 12px;
	padding: 14px 12px;
	text-align: center;
	box-shadow: 0 1px 2px rgba(16, 38, 70, .06);
}
.gk-numero {
	display: block;
	font-family: 'Oswald', Arial, sans-serif;
	font-size: 1.9em;
	font-weight: 500;
	line-height: 1.15;
	color: var(--azul);
	font-variant-numeric: tabular-nums;
}
.gk-etiqueta { display: block; font-size: .82em; line-height: 1.35; color: var(--texto-suave); margin-top: 4px; }

@media (max-width: 720px) {
	.grafico-kiosco { grid-template-columns: 1fr; padding: 14px; }
	.gk-numero { font-size: 1.6em; }
}
@media (prefers-reduced-motion: reduce) {
	.gk-cielo, .gk-sol, .gk-farola-luz, .gk-cartel-luz, .gk-peaton-1, .gk-peaton-2,
	.gk-pierna-a, .gk-pierna-b, .gk-cartel { animation: none; }
	.gk-cartel-1 { opacity: 1; }
	.gk-peaton-1 { transform: translateX(250px); }
	.gk-peaton-2 { display: none; }
}

/*--- Mapa animado de kioscos (publicidad-en-kioscos-en-sevilla) ---*/
/* Ciclo de 12 s: cada modo (un kiosco, una zona, un circuito) se muestra 4 s */
.grafico-mapa {
	clear: both;
	margin: 10px 0 30px;
	padding: 20px;
	background: var(--azul-suave);
	border: 1px solid #d6e5f5;
	border-radius: var(--radio);
}
.grafico-mapa .gm-titulo {
	font-family: 'Oswald', Arial, sans-serif;
	font-size: 1.35em;
	font-weight: 500;
	color: var(--azul);
	text-align: center;
	margin: 0 0 14px;
}
.gm-mapa { display: block; width: 100%; height: auto; border-radius: 12px; overflow: hidden; background: #eef3f8; }
.gm-rio { font: italic 11px Arial, sans-serif; fill: #5f8fb8; }
.gm-kioscos circle { fill: #9fb3c8; stroke: #fff; stroke-width: 2; }
.gm-activo { fill: var(--azul); stroke: #fff; stroke-width: 3; }
.gm-zona { fill: rgba(2, 81, 151, .12); stroke: var(--azul); stroke-width: 2; stroke-dasharray: 6 5; }
.gm-ruta { fill: none; stroke: #f2a900; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 600; stroke-dashoffset: 600; }
.gm-pulso { fill: none; stroke: var(--azul); stroke-width: 3; transform-box: fill-box; transform-origin: center; }

.gm-modo { opacity: 0; animation: gm-fase 12s infinite; }
.gm-modo-2 { animation-delay: 4s; }
.gm-modo-3 { animation-delay: 8s; }
.gm-modo-1 .gm-pulso { animation: gm-pulso 1.3s ease-out infinite; }
.gm-modo-3 .gm-ruta { animation: gm-trazo 12s ease-in-out infinite; animation-delay: 8s; }

@keyframes gm-fase {
	0% { opacity: 0; }
	4%, 30% { opacity: 1; }
	34%, 100% { opacity: 0; }
}
@keyframes gm-pulso { from { transform: scale(1); opacity: .9; } to { transform: scale(3.2); opacity: 0; } }
@keyframes gm-trazo { 0%, 3% { stroke-dashoffset: 600; } 26%, 100% { stroke-dashoffset: 0; } }

/* Leyenda: se resalta la opción que muestra el mapa en cada momento */
.gm-leyenda {
	list-style: none;
	margin: 14px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
}
.gm-opcion {
	background: #fff;
	border: 2px solid transparent;
	border-radius: 12px;
	padding: 10px 12px;
	text-align: center;
	animation: gm-opcion 12s infinite;
}
.gm-opcion-2 { animation-delay: 4s; }
.gm-opcion-3 { animation-delay: 8s; }
.gm-opcion strong { display: block; color: var(--azul); font-size: 1.05em; }
.gm-opcion span { display: block; font-size: .85em; line-height: 1.35; color: var(--texto-suave); }
@keyframes gm-opcion {
	0%, 33%, 100% { border-color: transparent; box-shadow: none; }
	4%, 30% { border-color: var(--azul); box-shadow: 0 4px 12px rgba(2, 81, 151, .18); }
}

@media (max-width: 560px) {
	.grafico-mapa { padding: 14px; }
	.gm-leyenda { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
	.gm-modo, .gm-opcion, .gm-modo-1 .gm-pulso, .gm-modo-3 .gm-ruta { animation: none; }
	.gm-modo-3 { opacity: 1; }
	.gm-modo-3 .gm-ruta { stroke-dashoffset: 0; }
}

/*--- Gráfico animado de la valla (publicidad-en-vallas-en-sevilla) ---*/
.grafico-valla,
.grafico-parada {
	clear: both;
	margin: 10px 0 30px;
	padding: 20px;
	background: var(--azul-suave);
	border: 1px solid #d6e5f5;
	border-radius: var(--radio);
}
.gv-escena { display: block; width: 100%; height: auto; border-radius: 12px; overflow: hidden; }
.gv-texto-grande { font: 600 26px 'Oswald', Arial, sans-serif; fill: #fff; letter-spacing: 1px; }
.gv-texto-enorme { font: 600 34px 'Oswald', Arial, sans-serif; fill: #fff; letter-spacing: 1px; }
.gv-texto-peque { font: 700 10px Arial, sans-serif; fill: #fff; letter-spacing: 1px; }
.gv-oscuro { fill: #1e2a38; }

/* Ciclo de 12 s: el cartel 2 se pega a los 4 s, el 3 a los 8 s y al final el 3 se despega dejando ver el 1 */
.gv-cartel-2, .gv-cartel-3 { transform-box: fill-box; transform-origin: center top; }
.gv-cartel-2 { animation: gv-pegar-2 12s infinite; }
.gv-cartel-3 { animation: gv-pegar-3 12s infinite; }
@keyframes gv-pegar-2 {
	0%, 33.33% { transform: scaleY(0); }
	40%, 74% { transform: scaleY(1); }
	74.1%, 100% { transform: scaleY(0); }
}
@keyframes gv-pegar-3 {
	0%, 66.67% { transform: scaleY(0); transform-origin: center top; }
	73%, 92% { transform: scaleY(1); transform-origin: center top; }
	92.01% { transform: scaleY(1); transform-origin: center bottom; }
	100% { transform: scaleY(0); transform-origin: center bottom; }
}

/* Tráfico y líneas de la carretera */
.gv-carril { animation: gv-carril 1s linear infinite; }
.gv-coche-1 { animation: gv-derecha 4.5s linear infinite; }
.gv-coche-2 { animation: gv-derecha 6s linear infinite; animation-delay: -3.5s; }
.gv-coche-3 { animation: gv-izquierda 5s linear infinite; animation-delay: -1.5s; }
@keyframes gv-carril { to { stroke-dashoffset: -32; } }
@keyframes gv-derecha { from { transform: translateX(-70px); } to { transform: translateX(420px); } }
@keyframes gv-izquierda { from { transform: translateX(420px); } to { transform: translateX(-80px); } }

/* Datos clave */
.gv-datos {
	list-style: none;
	margin: 14px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
}
.gv-datos li {
	background: #fff;
	border-radius: 12px;
	padding: 12px 10px;
	text-align: center;
	box-shadow: 0 1px 2px rgba(16, 38, 70, .06);
}
.gv-numero {
	display: block;
	font-family: 'Oswald', Arial, sans-serif;
	font-size: 1.7em;
	font-weight: 500;
	line-height: 1.15;
	color: var(--azul);
	font-variant-numeric: tabular-nums;
}
.gv-etiqueta { display: block; font-size: .8em; line-height: 1.35; color: var(--texto-suave); margin-top: 4px; }
.gv-datos li.gv-contador { background: var(--azul); }
.gv-contador .gv-numero, .gv-contador .gv-etiqueta { color: #fff; }

@media (max-width: 720px) {
	.grafico-valla, .grafico-parada { padding: 14px; }
	.gv-datos { grid-template-columns: 1fr 1fr; }
	.gv-numero { font-size: 1.45em; }
}
@media (prefers-reduced-motion: reduce) {
	.gv-cartel-2, .gv-cartel-3, .gv-carril, .gv-coche-1, .gv-coche-2, .gv-coche-3 { animation: none; }
	.gv-cartel-2, .gv-cartel-3 { transform: scaleY(0); }
	.gv-coche-1 { transform: translateX(40px); }
	.gv-coche-2 { transform: translateX(300px); }
	.gv-coche-3 { transform: translateX(150px); }
	.gv-datos li.gv-contador { display: none; }
	.gv-datos { grid-template-columns: repeat(3, 1fr); }
}

/*--- Gráfico animado de la parada (publicidad-en-paradas-de-autobus-en-sevilla) ---*/
/* Usa la caja de .grafico-valla y las tarjetas .gv-datos. Ciclo de 12 s:
   0-6 s espera (3, 2, 1 min) · 6-7,5 s llega el autobús · 7,5-9 s parado · 9-10,5 s se va · 10,5-12 s llega otra persona */
.gp-escena { display: block; width: 100%; height: auto; border-radius: 12px; overflow: hidden; }
.gp-led { font: 700 10px 'Courier New', monospace; fill: #ffb020; letter-spacing: .5px; opacity: 0; }
.gp-texto { font: 600 10.5px 'Oswald', Arial, sans-serif; fill: #fff; letter-spacing: .3px; }
.gp-oscuro { fill: #1e2a38; }
.gp-brillo { fill: #fff6cc; filter: blur(5px); animation: gp-brillo 3s ease-in-out infinite alternate; }

.gp-led-3 { animation: gp-led-3 12s infinite; }
.gp-led-2 { animation: gp-led-2 12s infinite; }
.gp-led-1 { animation: gp-led-1 12s infinite; }
.gp-led-0 { animation: gp-led-0 12s infinite; }
@keyframes gp-led-3 { 0%, 16.5% { opacity: 1; } 16.6%, 87.4% { opacity: 0; } 87.5%, 100% { opacity: 1; } }
@keyframes gp-led-2 { 0%, 16.5% { opacity: 0; } 16.6%, 33.2% { opacity: 1; } 33.3%, 100% { opacity: 0; } }
@keyframes gp-led-1 { 0%, 33.2% { opacity: 0; } 33.3%, 49.9% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes gp-led-0 { 0%, 49.9% { opacity: 0; } 50%, 87.4% { opacity: 1; } 87.5%, 100% { opacity: 0; } }

.gp-anuncio-2 { animation: gp-anuncio 8s infinite; }
@keyframes gp-anuncio { 0%, 45% { opacity: 0; } 50%, 95% { opacity: 1; } 100% { opacity: 0; } }
@keyframes gp-brillo { from { opacity: .35; } to { opacity: .8; } }

.gp-autobus { animation: gp-autobus 12s infinite; }
@keyframes gp-autobus {
	0%, 50% { transform: translateX(-460px); animation-timing-function: ease-out; }
	/* Se detiene con el morro junto a la persona, sin tapar el cartel */
	62.5%, 75% { transform: translateX(-108px); animation-timing-function: ease-in; }
	87.5%, 100% { transform: translateX(460px); }
}
.gp-persona { animation: gp-persona 12s infinite; }
@keyframes gp-persona {
	0%, 66% { transform: translateX(0); opacity: 1; }
	66.1%, 87.4% { transform: translateX(-160px); opacity: 0; }
	87.5% { transform: translateX(-160px); opacity: 1; }
	100% { transform: translateX(0); opacity: 1; }
}
.gp-carril { animation: gv-carril 1s linear infinite; }

@media (prefers-reduced-motion: reduce) {
	.gp-led, .gp-brillo, .gp-anuncio-2, .gp-autobus, .gp-persona, .gp-carril { animation: none; }
	.gp-led-3 { opacity: 1; }
	.gp-anuncio-2 { opacity: 0; }
	.gp-autobus { transform: translateX(460px); }
}

/*--- Movimiento: cabecera y teléfono solo en la portada (body.inicio); el resto en todas las páginas ---*/
/* Cabecera: zoom lento continuo */
.inicio .cabecera-animada { overflow: hidden; border-radius: var(--radio); box-shadow: var(--sombra); }
.inicio .cabecera-animada > img { box-shadow: none; animation: inicio-zoom 26s ease-in-out infinite alternate; }
@keyframes inicio-zoom {
	from { transform: scale(1); }
	to { transform: scale(1.08) translateX(-1.5%); }
}

/* Aparición al hacer scroll (js/movimiento.js pone la clase js-revelar solo si puede animar) */
.js-revelar .revelar { opacity: 0; transform: translateY(26px); transition: opacity .8s ease, transform .8s ease; }
.js-revelar .revelar.visible { opacity: 1; transform: none; }

/* Subrayado que crece bajo los títulos de cada apartado */
#contenido .grid-10 > h1::after,
#contenido .grid-10 > h2.como-h1::after,
#contenido .grid-10 > h2.como-h4::after {
	content: "";
	display: block;
	width: 64px;
	height: 4px;
	margin-top: .25em;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--azul), #3b9ae1);
	transform-origin: left;
	transition: transform .9s ease .3s;
}
#contenido .grid-10 > h2.como-h4::after { width: 48px; height: 3px; }
.js-revelar #contenido .grid-10 > h1.revelar:not(.visible)::after,
.js-revelar #contenido .grid-10 > h2.revelar:not(.visible)::after { transform: scaleX(0); }

/* Fotos del contenido: ligero zoom al pasar el ratón */
#contenido .grid-10 p > img,
#contenido .grid-10 li > img { transition: transform .4s ease, box-shadow .4s ease, opacity .8s ease; }
#contenido .grid-10 p > img:hover,
#contenido .grid-10 li > img:hover { transform: scale(1.04); box-shadow: 0 8px 24px rgba(16, 38, 70, .2); }
/* En los fotomontajes, el zoom se hace dentro del marco para que la etiqueta no se mueva */
#contenido .grid-10 .fotomontaje img { transition: transform .4s ease; }
#contenido .grid-10 .fotomontaje:hover img { transform: scale(1.04); }

/* El icono del teléfono "suena" solo cada pocos segundos */
.inicio .bt-icono svg { animation: inicio-aviso 6s ease-in-out infinite; }
@keyframes inicio-aviso {
	0%, 12%, 100% { transform: rotate(0); }
	2%, 6% { transform: rotate(-16deg); }
	4%, 8% { transform: rotate(16deg); }
	10% { transform: rotate(-6deg); }
}

@media (prefers-reduced-motion: reduce) {
	.inicio .cabecera-animada > img, .inicio .bt-icono svg { animation: none; }
	#contenido .grid-10 p > img:hover, #contenido .grid-10 li > img:hover, #contenido .grid-10 .fotomontaje:hover img { transform: none; }
}

/*--- Accesibilidad ---*/
/* Títulos que cambiaron de nivel (h1 único por página) conservando su aspecto */
.como-h1, .como-h3, .como-h4 {
	font-family: 'Oswald', Arial, sans-serif;
	font-weight: 500;
	color: var(--azul);
	text-shadow: none;
	letter-spacing: .01em;
}
h2.como-h1 { font-size: 2.5em; line-height: 1.25; margin-bottom: .6em; }
h2.como-h1 a { color: var(--azul); }
.como-h3 { font-size: 2em; line-height: 1.3; margin-bottom: 1em; }
.como-h4 { font-size: 1.5em; line-height: 1.3; margin-bottom: .8em; font-weight: bold; }
.green .como-h3, .green .como-h4 {
	margin-bottom: 0;
	padding: .35em 30px;
	line-height: 1.7em;
	background: var(--azul-suave);
	border-bottom: 1px solid var(--borde);
}
.green p.como-h6 {
	font-size: 1.2em;
	font-weight: bold;
	line-height: 1.7em;
	color: var(--azul);
	padding: 0 30px;
	margin: .5em 0;
}
.green p.como-h6 a { display: inline-block; padding: .15em .5em; border-radius: 8px; }
.green p.como-h6 a:hover { background: var(--azul-suave); }
h2.apartado {
	font-family: inherit;
	font-size: 1em;
	font-weight: bold;
	line-height: 1.6;
	color: var(--texto);
	letter-spacing: 0;
	margin: 1.5em 0 .5em;
}

/* Enlace para saltar al contenido: invisible hasta que recibe el foco del teclado */
.saltar {
	position: absolute;
	left: 16px;
	top: -100px;
	z-index: 1000;
	padding: .7em 1.2em;
	background: var(--azul);
	color: #fff;
	border-radius: 0 0 10px 10px;
	font-weight: 600;
}
.saltar:focus { top: 0; color: #fff; }

/* Foco visible al navegar con teclado */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
	outline: 3px solid #f2a900;
	outline-offset: 2px;
}

/*--- Móvil ---*/
@media (max-width: 720px) {
	.grids > .grid-10 { padding: 18px 16px; margin-bottom: 20px !important; }
	.grids > .grid-10 img[style*="float"] { float: none !important; display: block; margin: 0 auto 12px !important; max-width: 100%; height: auto; }
	.grids > .grid-10 .fotomontaje[style*="float"] { float: none !important; display: table; margin: 0 auto 12px !important; max-width: 100%; }
	#nav.main a { margin: 0 .1em .5em; padding: .65em 1em; }
	/* Sin desplazamiento horizontal a 320 px: palabras largas y tablas de precios se ajustan */
	.grids > .grid-10 { overflow-wrap: break-word; word-wrap: break-word; }
	.grids > .grid-10 th, .grids > .grid-10 td { padding: 6px 4px !important; font-size: .85em; overflow-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto; }
	h2.como-h1 { font-size: 1.9em; }
	.como-h3 { font-size: 1.5em; }
	.como-h4 { font-size: 1.1em; }
	.green p.como-h6 { font-size: 1em; }
}