/* ╔══════════════════════════════════════════════════════════╗
   ║  EL ORDENADOR                                              ║
   ╚══════════════════════════════════════════════════════════╝

   Esta página es una columna de 440 px, y eso NO se cambia: los tamaños de
   letra, la carta, el mapa y las burbujas están medidos para ese ancho, y
   estirarlos el día del lanzamiento es la forma más rápida de romper algo que
   ya funciona. Lo que sí se arregla es lo de alrededor.

   El problema real en un portátil no era la columna: era que a los lados había
   un fondo de vía de tren infinito, sin principio ni final, y la columna
   flotaba encima sin apoyarse en nada. Se leía como una web móvil abierta en
   grande, que es exactamente lo que era.

   Lo que hace este archivo:
     · le pone suelo y techo a la columna (deja de tocar los bordes)
     · convierte el fondo en un andén con profundidad en vez de un patrón suelto
     · y ata el Tuad colgado a la columna, que en ordenador colgaba del borde de
       la ventana y no se entendía de qué colgaba

   El corte de 720 px es el mismo que el de las hojas (css/hojas.css), a
   propósito: un solo sitio donde esta página deja de ser un móvil. */

@media (min-width: 720px) {
	/* Aire arriba y abajo: la columna pasa a ser una hoja apoyada en el andén,
	   no una tira que sale y entra por los bordes de la pantalla. */
	.da-columna {
		margin-top: 26px !important;
		margin-bottom: 40px !important;
		min-height: calc(100vh - 66px) !important;
		border-radius: 20px;
		overflow: clip; /* clip y no hidden: hidden rompería el sticky de arriba */
		box-shadow: 0 0 0 1px rgba(47, 36, 24, 0.1), 0 30px 80px rgba(47, 36, 24, 0.26) !important;
	}

	/* La cabecera pegajosa vive dentro de la columna redondeada. Sin esto, al
	   bajar se le ven las esquinas cuadradas asomando por encima. */
	.da-columna > div[style*='position:sticky'] {
		border-radius: 20px 20px 0 0;
	}

	/* El fondo: de patrón plano a andén con profundidad. Un degradado suave
	   hacia los lados hace que la columna parezca iluminada y centrada, en vez
	   de recortada y pegada. */
	body::before {
		content: '';
		position: fixed;
		inset: 0;
		z-index: 0;
		pointer-events: none;
		background: radial-gradient(120% 80% at 50% 0%, rgba(255, 253, 247, 0.5) 0%, transparent 62%),
			linear-gradient(180deg, transparent 55%, rgba(47, 36, 24, 0.1) 100%);
	}

	/* Tuad deja de colgar del borde de la ventana y cuelga de la columna.

	   No basta con moverlo: su animación cruza `-102vw`, o sea la pantalla
	   entera. En un móvil eso es cruzar por encima del contenido; en un
	   portátil de 1440 px es pasarse veinte de los veintiséis segundos flotando
	   sobre fondo vacío, lejos de todo, como si se hubiera escapado. Así que en
	   pantalla grande hace un viaje más corto, de canto a canto de la columna. */
	.da-colgado {
		left: 50%;
		right: auto !important;
		margin-left: 132px;
		width: 88px !important;
		animation-name: colgadoColumna !important;
	}
}

/* Ida y vuelta, no una pasada. La animación original acaba fuera de la pantalla
   y por eso el salto de vuelta al primer fotograma no se ve; ésta acaba a la
   vista, así que tiene que volver a donde empezó o pegaría un tirón cada 26 s. */
@keyframes colgadoColumna {
	from {
		transform: translateX(60px) rotate(4deg);
	}
	50% {
		transform: translateX(-420px) rotate(-4deg);
	}
	to {
		transform: translateX(60px) rotate(4deg);
	}
}

/* Pantallas muy anchas: la columna se queda donde está, pero el andén se abre.
   No se ensancha el contenido — se ensancha el sitio donde está puesto. */
@media (min-width: 1400px) {
	.da-columna {
		margin-top: 40px !important;
		margin-bottom: 56px !important;
		min-height: calc(100vh - 96px) !important;
	}

	.da-colgado {
		width: 104px !important;
		margin-left: 126px;
	}
}

/* ─────────── el reproductor ───────────
   Va fijo abajo a la izquierda. En un móvil eso es la esquina de la pantalla;
   en un portátil de 1440 px queda a medio metro de la columna, solo, como si
   se hubiera caído. Se le acerca. */
@media (min-width: 720px) {
	.wh-float,
	.wh-widget {
		left: 50% !important;
		right: auto !important;
		margin-left: -220px; /* el canto izquierdo de la columna (440 / 2) */
	}
}

/* ─────────── ratón, no dedo ───────────
   Hay 52 provincias pulsables y ningún indicio de que se puedan pulsar cuando
   no hay dedo: en un ordenador el cursor es la única señal que existe. */
@media (hover: hover) and (pointer: fine) {
	.da-mapa__g,
	.da-mapa__hit {
		cursor: pointer;
	}

	.da-mapa__g:hover .da-mapa__p {
		filter: brightness(0.93);
	}
}

/* ── LA INTRO NO SE RECORTA ────────────────────────────────────────────────
   La columna de escritorio lleva `overflow: clip` para redondear sus esquinas,
   y la intro —que es pantalla completa y vive dentro— se llevaba el recorte: el
   titular grande perdía las letras de los dos extremos, como difuminadas.

   Mientras la intro está abierta, la columna no recorta. Al cerrarse vuelve el
   clip y las esquinas siguen redondas. La clase la pone app.js. */
@media (min-width: 720px) {
	body.hay-intro .da-columna {
		overflow: visible;
	}
}