/* ========================================================================== */
/*                           Layout: Mobile                                   */
/* ========================================================================== */

@media (max-width: 640px) {


	/* ====================================================================== */
	/*                         1. Custom Properties                           */
	/* ====================================================================== */

	:root {
		--main-sizes: 2.4rem;
		--main-texts: 1.6rem;
	}

	/* ====================================================================== */
	/*                            2. Document Base                            */
	/* ====================================================================== */

	html {
		font-size: 2.77778vw;
	}

	main {
		gap: calc(var(--main-sizes) * 2);
	}

	main > *:not(cover, quiz):first-child {
		padding-top: calc(var(--main-sizes) * 2);
	}

	/* ====================================================================== */
	/*                             3. Typography                              */
	/* ====================================================================== */

	h1, h2, h3, h4, h5, h6,
	p, dl, small, hr {
		margin-bottom: calc(var(--main-sizes) * 0.5);
		line-height: 1.1;
	}

	h1    { font-size: calc(var(--main-texts) * 2.250); }
	h2    { font-size: calc(var(--main-texts) * 2.000); }
	h3    { font-size: calc(var(--main-texts) * 1.500); }
	h4    { font-size: calc(var(--main-texts) * 1.250); }
	h5    { font-size: calc(var(--main-texts) * 1.125); }
	h6    { font-size: calc(var(--main-texts) * 1.000); }
	p, dd { font-size: calc(var(--main-texts) * 0.900); line-height: 1.5; }
	small { font-size: calc(var(--main-texts) * 0.800); line-height: 1.5; }

	tag {
		font-size: calc(var(--main-texts) * 0.8);
	}

	hr {
		margin: calc(var(--main-sizes) * 0.25) auto var(--main-sizes);
	}

	/* ====================================================================== */
	/*                             4. Structure                               */
	/* ====================================================================== */

	header,
	footer {
		font-size: calc(var(--main-texts) * 0.9);
	}

	header > .isBTN {
		display: none;
	}

	header > nav {
		width: 100vw;
		height: 100vh;
		height: 100dvh;
		background: rgba(var(--color-soft), 1);
		transition: all 0.25s ease-in-out;
		transform: translateY(-100%);
		justify-content: center;
		align-items: center;
		text-align: center;
		position: fixed;
		display: flex;
		left: 0;
		top: 0;
	}

	header > nav > ul {
		font-size: calc(var(--main-texts) * 1.5);
		margin-top: calc(var(--main-sizes) * -6);
		gap: var(--main-sizes);
		flex-direction: column;
		font-weight: 400;
	}

	header > nav > ul > li:last-child {
		padding: calc(var(--main-sizes) * 2) var(--main-sizes);
		background: rgba(244, 244, 244, 1);
		border-top: var(--main-lines);
		position: absolute;
		display: block;
		bottom: 0;
		left: 0;
	}

	header > nav > ul > li:last-child > p {
		margin-bottom: var(--main-sizes);
		width: 80%;
	}

	header.isOpen > nav {
		transform: translateY(0);
	}

	header.isOpen        { color: rgba(var(--color-dark), 1); }
	header.isOpen .isF01 { fill:  rgba(var(--color-main), 1); }
	header.isOpen .isF02 { fill:  rgba(var(--color-dark), 1); }
	header.isOpen .isBTN { background: rgba(var(--color-main), 1); color: rgba(var(--color-soft), 1); }

	/* ---------------------------------------- */
	/*  Footer                                   */
	/* ---------------------------------------- */

	footer {
		padding: calc(var(--main-sizes) * 2) var(--main-sizes) calc(var(--main-sizes) * 5);
		flex-direction: column;
	}

	footer > div,
	footer > nav {
		width: 100%;
	}

	footer > div > .isBND {
		margin-bottom: calc(var(--main-sizes) * 0.5);
	}

	footer > div > ul {
		margin-left: -0.6rem;
	}

	footer > nav > ul {
		gap: var(--main-sizes) calc(var(--main-sizes) * 2);
		white-space: nowrap;
		flex-wrap: wrap;
	}

	footer > nav > ul > li {
		width: calc(50% - var(--main-sizes));
	}

	footer > nav > ul > li > a {
		font-size: calc(var(--main-texts) * 1.1);
		font-weight: 500;
		margin-bottom: 0;
	}

	footer > nav > ul > li > ul {
		gap: calc(var(--main-sizes) * 0.5);
	}

	/* ---------------------------------------- */
	/*  Legal Bar                               */
	/* ---------------------------------------- */

	legal {
		padding: var(--main-sizes);
	}

	legal > * {
		font-size: calc(var(--main-texts) * 0.8);
	}

	/* ====================================================================== */
	/*                           5. Section Blocks                            */
	/* ====================================================================== */

	/* Padding base reducido para mobile */
	plans, media, mixed, lines,
	lists, info, maps, stats, texts {
		padding: 0 var(--main-sizes);
	}

	/* ---------------------------------------- */
	/*  5.1 Texts                               */
	/* ---------------------------------------- */

	texts {
		gap: calc(var(--main-sizes) * 0.5);
		flex-direction: column;
	}

	texts > item > p:first-child {
		margin-top: 0;
	}

	texts[data-line] {
		gap: calc(var(--main-sizes) * 2);
	}

	texts[data-line] > item:not(:last-child)::after {
		width: 100%;
		height: 1px;
		bottom: calc(var(--main-sizes) * -1);
		right: unset;
		top: unset;
		left: 0;
	}

	/* ---------------------------------------- */
	/*  5.2 Cover                               */
	/* ---------------------------------------- */

	cover[data-full] {
		aspect-ratio: 9 / 16;
	}

	cover > texts {
		padding: calc(var(--main-sizes) * 3) var(--main-sizes);
	}

	cover > texts > form {
		max-width: unset;
	}

	cover[data-form] > texts {
		padding-top: calc(var(--main-sizes) * 4);
		gap: calc(var(--main-sizes) * 2);
	}

	/* ---------------------------------------- */
	/*  5.3 Mixed                               */
	/* ---------------------------------------- */

	mixed > media {
		padding: 0;
	}

	/* flex-flow reemplaza la declaración inválida "flex-direction: row wrap" del original */
	mixed > media[data-get="1"] > items {
		flex-flow: row wrap !important;
		display: flex !important;
	}

	mixed > media[data-get="1"] > items > item:not(:first-child) {
		width: calc(50% - (var(--main-sizes) * 0.5));
	}

	/* ---------------------------------------- */
	/*  5.4 Stats                               */
	/* ---------------------------------------- */

	stats {
		gap: var(--main-sizes);
		flex-wrap: wrap;
	}

	stats > item {
		width: calc(50% - (var(--main-sizes) * 0.5));
	}

	stats > item > span {
		font-size: calc(var(--main-texts) * 3);
	}

	stats > item > p:first-of-type {
		font-size: calc(var(--main-texts) * 0.9);
	}

	/* ---------------------------------------- */
	/*  5.5 Scroll (Marquee)                    */
	/* ---------------------------------------- */

	scroll > items {
		-webkit-animation-duration: 4s;
		animation-duration: 4s;
	}

	scroll > items > item {
		flex: 0 0 calc(var(--main-sizes) * 14);
		margin: calc(var(--main-sizes) * 0.25);
	}

	scroll > items > item > div > img {
		width: 3.6rem;
	}

	/* ---------------------------------------- */
	/*  5.6 Lists                               */
	/* ---------------------------------------- */

	lists {
		columns: 1;
	}

	lists > item {
		padding: calc(var(--main-sizes) * 0.75) 0;
		flex-direction: column;
		gap: 0.5rem;
	}

	/* ---------------------------------------- */
	/*  5.7 Lines (Timeline)                    */
	/* ---------------------------------------- */

	lines {
		padding-right: var(--main-sizes) !important; /* Sobreescribe padding-inline del desktop */
		padding-left:  var(--main-sizes) !important;
	}

	lines::before {
		top: calc(var(--main-sizes) * 6.3);
	}

	lines > items > item > span::after {
		bottom: calc(var(--main-sizes) * -2.5);
	}

	lines > items > item > small {
		display: inline-block;
		min-height: calc(var(--main-sizes) * 3);
	}

	lines > prev,
	lines > next {
		top: 50%;
	}

	/* ---------------------------------------- */
	/*  5.8 Plans                               */
	/* ---------------------------------------- */

	plans {
		background: unset;
		aspect-ratio: 1 / 1;
		padding: 0;
	}

	plans > text {
		bottom: var(--main-sizes);
		left: var(--main-sizes);
	}

	plans > text > ul {
		gap: calc(var(--main-sizes) * 0.25);
		flex-wrap: wrap;
	}

	/* ---------------------------------------- */
	/*  5.9 Media                               */
	/* ---------------------------------------- */

	media > items,
	media > items > item {
		gap: calc(var(--main-sizes) * 0.5);
	}

	media[data-get="1"] > items {
		gap: var(--main-sizes);
	}

	media > items > item:not(:last-child) > div {
		padding-bottom: calc(var(--main-sizes) * 0.5);
	}

	media.swiper {
		padding-right: var(--main-sizes);
		padding-left:  var(--main-sizes);
	}

	/* Fuerza una sola columna sobreescribiendo cualquier data-max del desktop */
	media[data-min="1"] > items {
		grid-template-columns: 1fr !important;
	}

	media > items > item > play::before {
		width: calc(var(--main-sizes) * 2);
	}

	/* ---------------------------------------- */
	/*  5.10 Maps                               */
	/* ---------------------------------------- */

	maps {
		width: 100%;
		aspect-ratio: 1 / 1;
	}

	/* ---------------------------------------- */
	/*  5.11 Accordion (dt/dd)                  */
	/* ---------------------------------------- */

	dt, dd {
		padding: calc(var(--main-sizes) * 0.75) calc(var(--main-sizes) * 0.5);
	}

	dt {
		padding-right: calc(var(--main-sizes) * 2);
		font-size: calc(var(--main-texts) * 0.9);
		line-height: 1.25em;
	}

	/* Reafirma el estado colapsado base ante posibles sobreescrituras de Swiper */
	dd {
		padding-block: 0;
		max-height: 0;
	}

	/* ---------------------------------------- */
	/*  5.12 Info                               */
	/* ---------------------------------------- */

	info {
		grid-template-columns: 1fr;
		gap: calc(var(--main-sizes) * 2);
	}

	info > item:nth-child(1),
	info > item:nth-child(2) {
		grid-template-columns: 1fr;
		grid-column: span 1;
	}

	info > item > *,
	info > item > *:first-child {
		grid-column: span 1;
	}

	info > item > maps > boxes {
		max-width: 100%;
	}

	/* ====================================================================== */
	/*                              6. Forms                                  */
	/* ====================================================================== */

	form {
		padding: 0;
	}

	input, select, textarea, fieldset, output,
	button, .isBTN {
		font-size: calc(var(--main-texts) * 0.9);
	}

	output {
		font-size: calc(var(--main-texts) * 0.7);
	}

	label {
		font-size: calc(var(--main-texts) * 0.8);
	}

	/* ====================================================================== */
	/*                          7. Buttons & Controls                         */
	/* ====================================================================== */

	button, .isBTN {
		font-size: calc(var(--main-texts) * 0.7);
	}

	/* ====================================================================== */
	/*                             8. Icon Sets                               */
	/* ====================================================================== */

	i, .isSCL {
		width: var(--main-sizes);
	}

	.isBND {
		position: relative;
		z-index: 999;
	}

	/* ====================================================================== */
	/*                             9. Burger Menu                             */
	/* ====================================================================== */

	menu {
		display: block !important;
	}

	/* ====================================================================== */
	/*                            10. Utilities                               */
	/* ====================================================================== */

	lines::after,
	scroll::after,
	scroll::before {
		width: 20vw;
	}

	/* ====================================================================== */
	/*                             11. Dev Tools                              */
	/* ====================================================================== */

	.isDev header::before {
		left: var(--main-sizes);
	}

	.isDev header::after {
		right: var(--main-sizes);
	}

}