/* Natural Trainers — «La pizarra de la sala» */
@font-face {
	font-family: "Shantell NT";
	src: url("fonts/shantell.woff2") format("woff2");
	font-weight: 300 800;
	font-display: swap;
}
@font-face {
	font-family: "Archivo NT";
	src: url("fonts/archivo.woff2") format("woff2");
	font-weight: 100 900;
	font-stretch: 62% 125%;
	font-display: swap;
}

:root {
	--pizarra: #1d2723;
	--pizarra-2: #24302b;
	--pizarra-3: #2c3a34;
	--marco: #9aa19c;
	--tiza: #f1efe6;
	--tiza-2: #cfd3c9;
	--tiza-3: #a9b2a9;
	--lima: #c2f04a;
	--lima-tinta: #18230f;
	--amarillo: #f4d046;
	--coral: #f28a72;
	--cielo: #9ad6ee;
	--papel: #f4f1e8;
	--papel-tinta: #1f2622;
	--mano: "Shantell NT", "Comic Sans MS", cursive;
	--texto: "Archivo NT", system-ui, sans-serif;
	--ancho: 76rem;
	--gutter: clamp(1rem, 4vw, 3rem);
	--sombra: 0 10px 24px -8px rgba(0, 0, 0, .55), 0 2px 4px rgba(0, 0, 0, .35);
	--ease: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 5rem; -webkit-text-size-adjust: 100%; }
body.nt {
	margin: 0;
	color: var(--tiza);
	font-family: var(--texto);
	font-size: clamp(1rem, .96rem + .2vw, 1.125rem);
	line-height: 1.6;
	font-stretch: 96%;
	background-color: var(--pizarra);
	/* borrones de borrador y polvo de tiza */
	background-image:
		radial-gradient(60rem 22rem at 18% 8%, rgba(255, 255, 255, .045), transparent 70%),
		radial-gradient(40rem 18rem at 85% 30%, rgba(255, 255, 255, .035), transparent 70%),
		radial-gradient(50rem 20rem at 30% 62%, rgba(255, 255, 255, .03), transparent 70%),
		radial-gradient(45rem 20rem at 78% 88%, rgba(255, 255, 255, .035), transparent 70%),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	-webkit-font-smoothing: antialiased;
	accent-color: var(--lima);
	padding-bottom: 4.5rem;
}
@media (min-width: 900px) { body.nt { padding-bottom: 0; } }

::selection { background: var(--lima); color: var(--lima-tinta); }
:focus-visible { outline: 2px dashed var(--lima); outline-offset: 4px; border-radius: 4px; }
html { scrollbar-color: var(--pizarra-3) var(--pizarra); }

:where(body.nt) img { max-width: 100%; height: auto; display: block; }
:where(body.nt) a { color: inherit; }
.ico { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.saltar { position: absolute; left: -999px; top: .5rem; background: var(--lima); color: var(--lima-tinta); padding: .5rem 1rem; z-index: 50; border-radius: 6px; }
.saltar:focus { left: .5rem; }

/* Letra de tiza */
.tiza {
	font-family: var(--mano);
	font-weight: 640;
	font-variation-settings: "INFM" 72;
	letter-spacing: -.01em;
	line-height: 1.02;
	text-wrap: balance;
	filter: url(#tiza);
	margin: 0;
}
.tiza-mano { font-family: var(--mano); font-variation-settings: "INFM" 60; font-weight: 480; color: var(--tiza-2); }

h2.tiza { font-size: clamp(2.1rem, 1.4rem + 3.2vw, 4.2rem); margin-bottom: .5em; }

/* Cabecera: el borde superior de la pizarra, logo y menú centrados */
.cab {
	position: sticky;
	top: 0;
	z-index: 20;
	padding: .5rem var(--gutter);
	background: rgba(29, 39, 35, .94);
	border-bottom: 1px solid rgba(241, 239, 230, .08);
	backdrop-filter: blur(6px);
	box-shadow: inset 0 3px 0 var(--marco);
}
.cab__in { max-width: 62rem; margin-inline: auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: clamp(1.2rem, 3vw, 2.6rem); }
.cab__logo { grid-column: 2; display: block; }
.cab__logo img { width: 6.6rem; transition: width .4s var(--ease); }
.cab__lado { display: none; align-items: center; gap: clamp(1.1rem, 2.2vw, 2rem); font-weight: 580; font-stretch: 92%; font-size: 1.02rem; }
.cab__lado--i { justify-content: flex-end; }
.cab__lado--d { justify-content: flex-start; }
.cab__lado a:not(.cab__cta) { text-decoration: none; color: var(--tiza-2); padding: .4rem 0; background: linear-gradient(var(--lima), var(--lima)) 0 100% / 0 2px no-repeat; transition: background-size .35s var(--ease), color .2s; white-space: nowrap; }
.cab__lado a:not(.cab__cta):hover { color: var(--tiza); background-size: 100% 2px; }
.cab__cta {
	display: inline-flex; align-items: center; gap: .45rem;
	background: var(--lima); color: var(--lima-tinta);
	text-decoration: none; font-weight: 720; font-stretch: 90%;
	padding: .55rem 1rem; border-radius: 999px; white-space: nowrap;
	transition: transform .25s var(--ease), box-shadow .25s;
}
.cab__cta:hover { transform: translateY(-1px); box-shadow: 0 6px 16px -6px rgba(194, 240, 74, .55); }
.cab--mini .cab__logo img { width: 4.6rem; }
@media (min-width: 900px) {
	.cab__lado { display: flex; }
	.cab__logo img { width: 9rem; }
	.cab--mini .cab__logo img { width: 5.6rem; }
}

/* Portada */
main { overflow-x: clip; }
main > section { max-width: var(--ancho); margin-inline: auto; padding: clamp(3.5rem, 8vw, 7rem) var(--gutter); }

.portada {
	display: grid;
	gap: 2.5rem;
	padding-top: clamp(1.5rem, 4vw, 3.5rem) !important;
	align-content: center;
}
@media (max-width: 899px) {
	.portada { gap: 1.1rem; }
	.portada__texto { display: contents; }
	.portada__nota { display: none; }
	.portada h1 { order: 1; }
	.portada .marcador { order: 2; grid-template-columns: auto auto 1fr; column-gap: .9rem; align-items: center; padding-top: .6rem; }
	.portada .marcador__nota { grid-row: span 2; font-size: 3.1rem; }
	.portada .marcador__estrellas .ico { width: 1.15rem; height: 1.15rem; }
	.portada .marcador__pie { font-size: .92rem; }
	.portada .marcador .palotes { grid-column: 3; grid-row: 1 / span 2; width: 6.8rem; margin: 0; justify-self: end; }
	.portada .marcador__flecha { display: none; }
	.portada .portada__foto { order: 3; margin: .5rem .3rem; padding: .55rem .55rem 2.1rem; }
	.portada .portada__foto img { aspect-ratio: auto; height: 30vh; object-fit: cover; }
	.portada .portada__sub { order: 4; margin-top: .4rem; }
	.portada .portada__acciones { order: 5; margin-top: .8rem; }
}


.portada__nota { font-family: var(--mano); font-variation-settings: "INFM" 70; font-size: .98rem; color: var(--tiza-3); margin: 0; transform: rotate(-1deg); }
.portada__nota span { color: var(--lima); padding-inline: .2em; }
.portada h1 { font-size: clamp(2.9rem, 1.2rem + 3.6vw, 4.6rem); }
.portada h1 .l { display: block; }
.portada h1 em { font-style: normal; color: var(--lima); }
.portada__sub { max-width: 34rem; margin: 1.4rem 0 0; color: var(--tiza-2); font-size: clamp(1.05rem, 1rem + .3vw, 1.25rem); }
.portada__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem 2rem; margin-top: 2.2rem; }

.portada__foto { margin: 0; max-width: none; transform: rotate(1.6deg); }
.portada__foto img { aspect-ratio: 4 / 3; }
@media (min-width: 900px) {
	.portada {
		grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
		grid-template-areas: "texto nota" "texto foto" "texto marcador";
		grid-template-rows: auto auto auto;
		column-gap: clamp(2.5rem, 5vw, 5.5rem);
		row-gap: 1.2rem;
		padding-top: clamp(1rem, 2.5vw, 2rem) !important;
		padding-bottom: clamp(2.5rem, 5vw, 4rem) !important;
		align-items: center;
	}
	.portada__nota { grid-area: nota; justify-self: end; font-size: 1.15rem; color: var(--tiza-2); transform: rotate(-2deg); margin-bottom: .9rem; }
	.portada__texto { grid-area: texto; }
	.portada__foto { grid-area: foto; }
	.portada .marcador { grid-area: marcador; }
}

/* Imán: la tarjeta de papel sujeta con un imán */
.iman {
	position: relative;
	display: inline-grid;
	gap: .2rem;
	padding: 1.15rem 1.5rem 1rem;
	text-decoration: none;
	color: var(--lima-tinta);
	background: var(--lima);
	border-radius: 3px 5px 4px 6px;
	box-shadow: var(--sombra);
	transform: rotate(-2deg);
	transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.iman strong { font-family: var(--mano); font-variation-settings: "INFM" 55; font-weight: 720; font-size: clamp(1.3rem, 1.1rem + .8vw, 1.65rem); line-height: 1.1; }
.iman small { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; font-size: .92rem; opacity: .82; }
.iman__pin {
	position: absolute; top: -.55rem; left: 50%; width: 1.25rem; height: 1.25rem; margin-left: -.6rem;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, #ff9a86, #d9442e 55%, #8d2414);
	box-shadow: 0 3px 5px rgba(0, 0, 0, .45);
}
.iman:hover { transform: rotate(0deg) translateY(-3px); box-shadow: 0 16px 30px -10px rgba(0, 0, 0, .6), 0 2px 4px rgba(0, 0, 0, .3); }
.iman:active { transform: rotate(0deg) translateY(0); }

.raya { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--mano); font-variation-settings: "INFM" 60; font-weight: 520; color: var(--tiza-2); text-decoration: underline; text-decoration-color: var(--lima); text-decoration-thickness: 2px; text-underline-offset: .35em; }
.raya:hover { color: var(--tiza); }
.raya .ico { transition: transform .3s var(--ease); }
.raya:hover .ico { transform: translateX(4px); }

/* Marcador: 5,0 y 76 palotes */
.marcador {
	display: grid;
	justify-items: start;
	gap: .5rem;
	text-decoration: none;
	padding: 1.2rem 0 0;
	border-top: 2px dashed rgba(241, 239, 230, .18);
}
.marcador__nota { font-size: clamp(4.5rem, 3rem + 6vw, 6rem); line-height: .9; }
.marcador__estrellas { display: flex; gap: .2rem; color: var(--amarillo); }
.marcador__estrellas .ico { width: 1.6rem; height: 1.6rem; fill: currentColor; stroke-width: 1.2; filter: url(#tiza); }
.palotes { width: min(15rem, 100%); height: auto; margin-top: .6rem; }
.palotes path { fill: none; stroke: var(--tiza); stroke-width: 2.6; stroke-linecap: round; filter: url(#tiza); }
.marcador__pie { white-space: nowrap; display: inline-flex; align-items: center; gap: .4rem; font-weight: 640; color: var(--tiza-2); text-decoration: underline; text-decoration-color: var(--amarillo); text-decoration-thickness: 2px; text-underline-offset: .3em; }
.marcador:hover .marcador__pie { color: var(--tiza); }
@media (min-width: 900px) {
	.marcador { grid-template-columns: auto auto 1fr; grid-template-rows: auto auto; column-gap: 1.6rem; align-items: center; border-top: 0; padding: 1rem 0 0; }
	.marcador__nota { grid-row: span 2; font-size: 4rem; }
	.marcador__estrellas { grid-column: 2; }
	.marcador__pie { grid-column: 2; }
	.marcador .palotes { grid-column: 3; grid-row: 1 / span 2; width: 11.5rem; margin: 0; justify-self: end; }
}

/* Método y escalera de niveles */
.metodo { display: grid; gap: 2.5rem; }
.metodo__intro p { max-width: 62ch; color: var(--tiza-2); }
.escalera { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; counter-reset: n; }
.escalera li { display: grid; gap: .2rem; padding: .8rem 0 .4rem; margin-left: calc(var(--n) * 1.1rem); border-top: 3px solid var(--tiza); filter: url(#tiza); }
.escalera li:last-child { border-color: var(--lima); }
.escalera__nombre { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); color: var(--tiza); }
.escalera li:last-child .escalera__nombre { color: var(--lima); }
.escalera__txt { color: var(--tiza-2); max-width: 26ch; }
.metodo__nota { margin: 0; font-size: 1.15rem; transform: rotate(-1.2deg); }
@media (min-width: 900px) {
	.metodo { grid-template-columns: 1fr; }
	.escalera { grid-template-columns: repeat(4, 1fr); align-items: end; gap: 0; }
	.escalera li {
		margin-left: 0;
		border-top: 3px solid var(--tiza);
		border-right: 3px solid var(--tiza);
		padding: 1rem 1.2rem 1.4rem;
		margin-top: calc(var(--n) * -2.4rem);
		min-height: calc(7rem + var(--n) * 2.4rem);
		align-content: start;
	}
}

/* Servicios: fichas de papel en el tablón */
.servicios__intro { color: var(--tiza-2); max-width: 52ch; margin: 0 0 2.5rem; }
.tablon { display: grid; gap: 2.2rem 1.6rem; }
.ficha {
	position: relative;
	background: var(--papel);
	color: var(--papel-tinta);
	padding: 1.7rem 1.4rem 1.3rem;
	border-radius: 2px;
	box-shadow: var(--sombra);
	transform: rotate(var(--r, 0deg));
	transition: transform .35s var(--ease);
}
.ficha:hover { transform: rotate(0deg) translateY(-3px); }
.ficha h3 { font-family: var(--mano); font-variation-settings: "INFM" 50; font-weight: 720; font-size: 1.45rem; line-height: 1.1; margin: 0 0 .6rem; text-wrap: balance; }
.ficha p { margin: 0 0 1rem; font-size: 1rem; line-height: 1.55; color: #36403a; }
.ficha a { display: inline-flex; align-items: center; gap: .35rem; font-weight: 700; font-stretch: 92%; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .25em; }
.ficha__iman { position: absolute; top: -.6rem; left: 1.4rem; width: 1.3rem; height: 1.3rem; border-radius: 50%; box-shadow: 0 3px 5px rgba(0, 0, 0, .4); }
.ficha--lima { background: var(--lima); }
.ficha--lima .ficha__iman { background: radial-gradient(circle at 35% 30%, #8fa0ff, #2b47c9 60%, #1a2a7a); }
.ficha--amarillo { background: var(--amarillo); }
.ficha--amarillo .ficha__iman { background: radial-gradient(circle at 35% 30%, #ff9a86, #d9442e 55%, #8d2414); }
.ficha--cielo { background: var(--cielo); }
.ficha--cielo .ficha__iman { background: radial-gradient(circle at 35% 30%, #fff1a6, #e2b51b 60%, #8f6d06); }
.ficha--coral { background: var(--coral); }
.ficha--coral .ficha__iman { background: radial-gradient(circle at 35% 30%, #c9f58a, #5aa324 60%, #2f5c10); }
.ficha--blanco .ficha__iman { background: radial-gradient(circle at 35% 30%, #ffb3d6, #d63a85 60%, #7e1a4b); }
.ficha--amarillo a, .ficha--lima a, .ficha--cielo a, .ficha--coral a { text-decoration-color: currentColor; }
.ficha--blanco a { text-decoration-color: #5aa324; }
@media (min-width: 640px) { .tablon { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) {
	.tablon { grid-template-columns: repeat(12, 1fr); }
	.ficha { grid-column: span 3; }
	#escuela { grid-column: span 7; padding: 2.2rem 2rem 1.8rem; }
	#escuela h3 { font-size: 2rem; }
	#escuela p { font-size: 1.1rem; }
	#tercer-tiempo { grid-column: span 5; margin-top: 2.5rem; }
}

/* Reseñas */
.resenas__lista { display: grid; gap: 2rem; margin: 1rem 0 2.5rem; }
.resena { margin: 0; }
.resena__estrellas { display: flex; gap: .15rem; color: var(--amarillo); margin-bottom: .6rem; }
.resena__estrellas .ico { width: 1.1rem; height: 1.1rem; fill: currentColor; stroke-width: 1; }
.resena blockquote { margin: 0; }
.resena blockquote p { margin: 0; font-family: var(--mano); font-variation-settings: "INFM" 45; font-weight: 440; font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem); line-height: 1.45; color: var(--tiza); }
.resena figcaption { margin-top: .8rem; color: var(--tiza-3); font-size: .95rem; font-weight: 560; }
@media (min-width: 900px) {
	.resenas__lista { grid-template-columns: 1.3fr 1fr 1fr; gap: 3rem; }
	.resena:first-child blockquote p { font-size: 1.55rem; }
}

/* Fran y Natu */
.fran { display: grid; gap: 3rem; align-items: start; }
.foto { position: relative; margin: 0; background: #fff; padding: .8rem .8rem 2.6rem; box-shadow: var(--sombra); transform: rotate(-2.2deg); max-width: 34rem; }
.foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.foto figcaption { position: absolute; left: 0; right: 0; bottom: .6rem; text-align: center; color: #3a3f3b; font-size: 1.05rem; }
.foto__cinta { position: absolute; width: 6.5rem; height: 1.7rem; background: rgba(236, 230, 205, .78); box-shadow: 0 1px 2px rgba(0, 0, 0, .2); }
.foto__cinta--a { top: -.8rem; left: -1.4rem; transform: rotate(-32deg); }
.foto__cinta--b { top: -.6rem; right: -1.6rem; transform: rotate(28deg); }
.fran__texto p { max-width: 62ch; color: var(--tiza-2); }
.cita { margin: 1.6rem 0 0; padding: 0; font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem); line-height: 1.4; color: var(--tiza); transform: rotate(-.6deg); }
.natu { display: grid; grid-template-columns: 8.5rem 1fr; align-items: center; gap: 1rem; max-width: 30rem; }
.natu__dibujo { width: 100%; height: auto; fill: none; stroke: var(--amarillo); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; filter: url(#tiza); }
.natu__dibujo circle { fill: var(--amarillo); stroke: none; }
.natu p { margin: 0; font-size: 1.15rem; line-height: 1.35; transform: rotate(-1.5deg); }
.natu strong { color: var(--amarillo); font-weight: 720; }
@media (min-width: 900px) {
	.fran { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); column-gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
	.natu { grid-template-columns: 1fr; justify-items: start; }
	.natu__dibujo { width: 14rem; }
}

/* Empezar */
.pasos { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 1.8rem; }
.pasos li { display: grid; grid-template-columns: 3rem 1fr; gap: .8rem; align-items: baseline; color: var(--tiza-2); max-width: 32ch; font-size: 1.15rem; line-height: 1.45; }
.pasos strong { color: var(--tiza); }
.pasos__n { font-size: 3.2rem; color: var(--lima); line-height: .8; }
@media (min-width: 900px) { .pasos { grid-template-columns: repeat(3, 1fr); gap: 3rem; } }

/* Contacto y horario */
.contacto { display: grid; gap: 3rem; }
.contacto__dir { display: flex; gap: .7rem; font-size: 1.2rem; font-weight: 600; margin: 0 0 1rem; }
.contacto__dir .ico { color: var(--lima); margin-top: .25rem; }
.contacto__zona { color: var(--tiza-3); max-width: 46ch; margin: 0 0 2rem; }
.contacto__botones { display: flex; flex-wrap: wrap; gap: .8rem; }
.boton {
	display: inline-flex; align-items: center; gap: .5rem;
	padding: .8rem 1.2rem; border-radius: 999px;
	border: 2px solid rgba(241, 239, 230, .4);
	text-decoration: none; font-weight: 680; font-stretch: 92%;
	transition: border-color .2s, background-color .2s, transform .25s var(--ease);
}
.boton:hover { border-color: var(--tiza); transform: translateY(-2px); }
.boton--lima { background: var(--lima); border-color: var(--lima); color: var(--lima-tinta); }
.boton--lima:hover { border-color: var(--lima); }
.horario { border-collapse: collapse; width: 100%; max-width: 26rem; font-variant-numeric: tabular-nums; }
.horario caption { text-align: left; font-size: 2.2rem; margin-bottom: .8rem; }
.horario th, .horario td { padding: .55rem 0; border-bottom: 2px solid rgba(241, 239, 230, .14); text-align: left; }
.horario th { font-weight: 600; }
.horario td { text-align: right; font-family: var(--mano); font-variation-settings: "INFM" 50; font-size: 1.1rem; }
.horario .abierto td { color: var(--lima); }
.horario .cerrado { color: var(--tiza-3); }
.horario .cerrado td { text-decoration: line-through; text-decoration-color: var(--coral); text-decoration-thickness: 2px; }
@media (min-width: 900px) { .contacto { grid-template-columns: 1.3fr 1fr; align-items: start; } }

/* Cierre */
.final { text-align: center; display: grid; justify-items: center; gap: 2.4rem; padding-bottom: clamp(4rem, 9vw, 8rem) !important; }
.final h2 { font-size: clamp(2.6rem, 1.6rem + 5vw, 5.4rem); }

/* Pie: la bandeja de la pizarra, centrado */
.pie {
	display: grid; justify-items: center; gap: 1.2rem;
	padding: 3rem var(--gutter) 2rem;
	text-align: center;
	background: #151c19;
	box-shadow: inset 0 4px 0 var(--marco), inset 0 10px 14px -8px rgba(0, 0, 0, .6);
	color: var(--tiza-3);
	font-size: .98rem;
}
.pie p { margin: 0 0 .5rem; }
.pie strong { color: var(--tiza); }
.pie a { text-decoration-color: rgba(241, 239, 230, .35); text-underline-offset: .2em; }
.pie a:hover { color: var(--tiza); }
.pie__logo { width: 8rem; opacity: .92; }
.pie__col { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.6rem; }
.pie__col a { display: inline-flex; align-items: center; gap: .45rem; }
.pie__legal { font-size: .85rem; width: min(100%, 40rem); padding-top: 1rem; border-top: 1px solid rgba(241, 239, 230, .1); }

/* Barra fija en móvil */
.barra {
	position: fixed; inset: auto 0 0 0; z-index: 30;
	display: grid; grid-template-columns: 1.6fr 1fr; gap: .5rem;
	padding: .55rem .75rem calc(.55rem + env(safe-area-inset-bottom));
	background: rgba(21, 28, 25, .96);
	box-shadow: 0 -1px 0 rgba(241, 239, 230, .1), inset 0 3px 0 var(--marco);
}
.barra a { display: flex; align-items: center; justify-content: center; gap: .45rem; min-height: 3rem; border-radius: 999px; text-decoration: none; font-weight: 720; font-stretch: 92%; }
.barra__wa { background: var(--lima); color: var(--lima-tinta); }
.barra__tel { border: 2px solid rgba(241, 239, 230, .4); }
@media (min-width: 900px) { .barra { display: none; } }

/* Escritura a tiza (firma): solo con JS y sin preferencia de movimiento reducido */
@media (prefers-reduced-motion: no-preference) {
	@keyframes nt-escribe {
		from { clip-path: inset(-.2em 100% -.3em -.1em); }
		to { clip-path: inset(-.2em -.2em -.3em -.1em); }
	}
	.portada h1 .l { animation: nt-escribe 1.1s cubic-bezier(.55, .1, .35, 1) .15s both; }
	.portada h1 .l--2 { animation-delay: .9s; }
	.js .final .escribe .l { display: inline-block; clip-path: inset(-.2em 100% -.3em -.1em); transition: clip-path 1.1s cubic-bezier(.55, .1, .35, 1); }
	.js .final .escribe.visto .l { clip-path: inset(-.2em -.2em -.3em -.1em); }
	.js .palotes path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .12s ease-out; transition-delay: calc(.5s + var(--i) * 14ms); }
	.js .palotes.visto path { stroke-dashoffset: 0; }
}

/* Marco de aluminio de la pizarra (escritorio) */
@media (min-width: 900px) {
	body.nt::after {
		content: ""; position: fixed; inset: 0; z-index: 40; pointer-events: none;
		border: 10px solid transparent;
		border-image: linear-gradient(135deg, #c9cdc8, #8e958f 30%, #d8dbd6 52%, #7d847e 75%, #b6bbb5) 1;
		box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .5), inset 0 0 24px rgba(0, 0, 0, .45);
	}
	.cab { margin: 0 10px; }
}

/* Borrones de borrador */
.portada, .servicios, .resenas, .contacto { position: relative; }
.portada::before, .servicios::before, .resenas::before, .contacto::before {
	content: ""; position: absolute; z-index: -1; pointer-events: none;
	inset: 0 -10vw; background: url("img/borrones.svg") center / 100% 100% no-repeat; opacity: .9;
}
.servicios::before { transform: scaleX(-1); inset: -4rem -12vw auto; height: 70%; }
.resenas::before { inset: 10% -8vw 0; }
.contacto::before { transform: scaleY(-1); }
main { position: relative; z-index: 0; }

/* Trazos a tiza */
.trazo { overflow: visible; fill: none; stroke: var(--tiza); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; filter: url(#tiza); }
.rodea { position: relative; display: inline-block; }
.rodea__trazo { position: absolute; left: -.25em; top: -.12em; width: calc(100% + .45em); height: 1.35em; stroke-width: 2.6; opacity: .85; }
.marcador { position: relative; }
.marcador__flecha { display: none; }
@media (min-width: 900px) {
	.marcador__flecha { display: block; position: absolute; width: 4.2rem; right: 12.6rem; bottom: -.6rem; }
}
#metodo-t::after, #servicios-t::after, #resenas-t::after, #empezar-t::after, #contacto-t::after {
	content: ""; display: block; width: min(11em, 70%); height: .32em; margin-top: .12em;
	background: url("img/subrayado.svg") left center / 100% 100% no-repeat;
}
@media (prefers-reduced-motion: no-preference) {
	.trazo path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: nt-trazo .7s cubic-bezier(.55, .1, .35, 1) forwards; }
	.rodea__trazo path { animation-delay: 2.1s; animation-duration: .9s; }
	.marcador__flecha path { animation-delay: 2.6s; }
	.marcador__flecha path + path { animation-delay: 3.1s; animation-duration: .3s; }
	.js .natu__flecha path { animation-play-state: paused; }
	.js .natu.visto .natu__flecha path { animation-play-state: running; }
	.natu__flecha path + path { animation-delay: .6s; animation-duration: .3s; }
	@keyframes nt-trazo { to { stroke-dashoffset: 0; } }
}

/* Natu, más protagonista mientras llegan sus fotos */
.natu { grid-template-columns: 1fr; position: relative; justify-items: start; gap: .2rem; max-width: 24rem; }
.natu__dibujo { width: min(17rem, 70vw); }
.natu .natu__nombre { margin: 0; transform: none; line-height: 1; font-size: clamp(2.6rem, 2rem + 2vw, 3.6rem); color: var(--amarillo); }
.natu__flecha { position: absolute; width: 5rem; left: 19.5rem; top: 8rem; stroke: var(--amarillo); transform: scaleX(-1) rotate(-10deg); }
.natu__txt { margin: 0; font-size: 1.2rem; line-height: 1.35; max-width: 22ch; transform: rotate(-1.5deg); }
@media (max-width: 899px) { .natu__flecha { display: none; } }

/* Bandeja de la pizarra con tizas y borrador */
.bandeja {
	position: relative; width: min(100%, 52rem); height: 1.1rem; margin-top: 3.5rem;
	background: linear-gradient(#d4d8d2, #9ba29c 45%, #6f766f);
	border-radius: 2px 2px 6px 6px;
	box-shadow: 0 10px 18px -6px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .6);
}
.bandeja__tiza { position: absolute; bottom: 100%; left: 18%; width: 4.2rem; height: .7rem; border-radius: 3px 6px 6px 3px; background: linear-gradient(#ffffff, #e2e0d6); box-shadow: 0 2px 2px rgba(0, 0, 0, .35); transform: rotate(-3deg); }
.bandeja__tiza--lima { left: 31%; width: 2.6rem; background: linear-gradient(#e4ff9a, var(--lima)); transform: rotate(4deg); }
.bandeja__borrador { position: absolute; bottom: 100%; right: 16%; width: 7rem; height: 2.1rem; border-radius: 4px; background: linear-gradient(#7a4e2c, #5b3820 60%); box-shadow: 0 4px 6px rgba(0, 0, 0, .45); }
.bandeja__borrador::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: .6rem; border-radius: 0 0 4px 4px; background: #3b3f45; }

/* Menú móvil */
.cab { position: sticky; }
.cab__menu { position: absolute; left: var(--gutter); top: 50%; transform: translateY(-50%); z-index: 2; }
.cab__menu summary { list-style: none; cursor: pointer; font-family: var(--mano); font-variation-settings: "INFM" 60; font-weight: 600; font-size: 1.1rem; padding: .4rem .2rem; text-decoration: underline; text-decoration-color: var(--lima); text-decoration-thickness: 2px; text-underline-offset: .3em; }
.cab__menu summary::-webkit-details-marker { display: none; }
.cab__menu nav { position: absolute; top: calc(100% + .6rem); left: 0; display: grid; gap: .2rem; min-width: 12rem; padding: .8rem 1rem; background: var(--pizarra-2); border-radius: 4px; box-shadow: var(--sombra); }
.cab__menu nav a { padding: .55rem 0; text-decoration: none; font-weight: 600; border-bottom: 1px solid rgba(241, 239, 230, .1); }
@media (min-width: 900px) { .cab__menu { display: none; } }

/* Navegación del pie */
.pie__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.4rem; font-weight: 600; }
.pie__nav a { color: var(--tiza-2); }

/* Blog: histórico */
.ruta { font-size: .95rem; color: var(--tiza-3); margin: 0 0 1rem; }
.ruta a { color: var(--tiza-2); text-decoration-color: rgba(241, 239, 230, .3); text-underline-offset: .2em; }
.blog__cab { padding-bottom: 1rem !important; }
.blog__cab h1 { font-size: clamp(2.6rem, 1.6rem + 4vw, 5rem); }
.blog__intro { max-width: 60ch; color: var(--tiza-2); font-size: 1.1rem; margin: 1.2rem 0 2rem; }
.filtros { display: flex; flex-wrap: wrap; gap: .6rem; }
.filtros a { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem 1rem; border-radius: 999px; border: 2px solid rgba(241, 239, 230, .3); text-decoration: none; font-weight: 640; font-stretch: 92%; }
.filtros a small { font-weight: 500; color: var(--tiza-3); }
.filtros a[aria-current] { background: var(--lima); border-color: var(--lima); color: var(--lima-tinta); }
.filtros a[aria-current] small { color: var(--lima-tinta); }
.cronologia { padding-top: 1rem !important; display: grid; gap: 3rem; }
.anio { display: grid; gap: 1rem; }
.anio__num { font-size: clamp(3rem, 2rem + 4vw, 5.5rem); color: var(--tiza-3); line-height: .9; }
.anio__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.entrada { padding: 1.2rem 0; border-top: 2px solid rgba(241, 239, 230, .12); }
.entrada__meta { margin: 0 0 .3rem; font-size: .92rem; color: var(--tiza-3); font-variant-numeric: tabular-nums; }
.entrada__meta a { color: var(--lima); text-decoration: none; font-weight: 600; }
.entrada__t { margin: 0 0 .4rem; font-family: var(--mano); font-variation-settings: "INFM" 55; font-weight: 640; font-size: clamp(1.35rem, 1.1rem + .9vw, 1.8rem); line-height: 1.15; text-wrap: balance; }
.entrada__t a { text-decoration: none; background: linear-gradient(var(--lima), var(--lima)) 0 100% / 0 2px no-repeat; transition: background-size .35s var(--ease); }
.entrada__t a:hover { background-size: 100% 2px; }
.entrada__ext { margin: 0; max-width: 70ch; color: var(--tiza-2); }
@media (min-width: 900px) {
	.anio { grid-template-columns: 11rem 1fr; gap: 2rem; align-items: start; }
	.anio__num { position: sticky; top: 7rem; }
}

/* Blog: entrada */
.lectura { max-width: 48rem; margin-inline: auto; padding: clamp(2rem, 5vw, 4rem) var(--gutter) clamp(3rem, 6vw, 5rem); }
.lectura h1 { font-size: clamp(2.3rem, 1.5rem + 3.4vw, 4.2rem); }
.lectura__meta { color: var(--tiza-3); margin: 1rem 0 2.5rem; }
.lectura__texto { color: var(--tiza-2); font-size: 1.1rem; line-height: 1.75; }
.lectura__texto p { margin: 0 0 1.2em; }
.lectura__texto h2, .lectura__texto h4 { font-family: var(--mano); color: var(--tiza); font-variation-settings: "INFM" 55; margin: 2em 0 .6em; }
.lectura__texto b, .lectura__texto strong { color: var(--tiza); }
.lectura__texto a { color: var(--lima); }
.lectura__texto img { border: .5rem solid #fff; box-shadow: var(--sombra); margin: 1.5rem auto; transform: rotate(-1deg); }
.lectura__texto ul, .lectura__texto ol { padding-left: 1.3em; }
.lectura__cta { position: relative; margin: 3rem 0; padding: 2rem 1.6rem 1.6rem; background: var(--papel); color: var(--papel-tinta); box-shadow: var(--sombra); transform: rotate(-.8deg); display: grid; gap: 1rem; justify-items: start; }
.lectura__cta .iman__pin { left: 1.6rem; margin-left: 0; }
.lectura__cta p { margin: 0; font-size: 1.35rem; color: var(--papel-tinta); }
.lectura__nav { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; margin: 2rem 0; }
.lectura__nav a { display: grid; gap: .2rem; text-decoration: none; padding: 1rem 0; border-top: 2px solid rgba(241, 239, 230, .15); font-family: var(--mano); font-variation-settings: "INFM" 50; font-size: 1.1rem; }
.lectura__nav small { font-family: var(--texto); font-size: .85rem; color: var(--tiza-3); }
.lectura__next { text-align: right; }
.lectura__volver { margin: 0; }

/* Así es la sala: fotos pegadas en la pizarra */
.sala__intro { color: var(--tiza-2); max-width: 54ch; margin: 0 0 2.6rem; }
.muro { display: grid; gap: 2.4rem 1.6rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.muro__foto { margin: 0; padding: .55rem .55rem 2.2rem; transform: rotate(var(--r, 0deg)); transition: transform .4s var(--ease); }
.muro__foto:hover { transform: rotate(0deg) scale(1.03); z-index: 2; }
.muro__foto img { aspect-ratio: 1; }
.muro__foto figcaption { bottom: .45rem; font-size: 1rem; }
.muro__foto:nth-child(even) { margin-top: 1.6rem; }
@media (min-width: 640px) { .muro { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 639px) { .muro { gap: 1.6rem 1rem; } .muro__foto figcaption { font-size: .85rem; } }

/* Natu en foto */
.natu__foto { margin: 0 0 .4rem; padding: .55rem .55rem 1rem; width: min(19rem, 78vw); transform: rotate(2.4deg); }
.natu__foto img { aspect-ratio: 1; }

/* Fran y Natu: fotos en columna */
.fran__fotos { display: grid; gap: 2.4rem; justify-items: start; }
.fran__foto { margin: 0; max-width: 30rem; transform: rotate(-2deg); }
.fran__foto img { aspect-ratio: 4 / 3; }
@media (min-width: 900px) {
	.fran { align-items: start; }
	.fran__fotos { grid-column: 2; grid-row: 1; }
	.fran__texto { grid-column: 1; grid-row: 1; }
	.fran__fotos .natu { margin-left: 3rem; }
}

/* Vídeos dentro de las entradas */
.lectura__texto iframe { width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; margin: 1.2rem 0; box-shadow: var(--sombra); }
/* Páginas legales y 404 */
.lectura--pagina .lectura__texto h2 { font-size: 1.6rem; }
.perdido { min-height: 70svh; align-content: center; }
.perdido h1 { font-size: clamp(2.2rem, 1.4rem + 3vw, 4rem); max-width: 18ch; }
.perdido__txt { max-width: 46ch; color: var(--tiza-2); margin: 0; }

/* Aviso de cookies: nota de papel con imán */
.aviso-cookies {
	position: fixed; z-index: 45; left: max(1rem, env(safe-area-inset-left)); bottom: 5.4rem;
	width: min(23rem, calc(100vw - 2rem));
	padding: 1.4rem 1.3rem 1.1rem;
	background: var(--papel); color: var(--papel-tinta);
	border-radius: 3px; box-shadow: var(--sombra); transform: rotate(-1deg);
}
.aviso-cookies[hidden] { display: none; }
.aviso-cookies .iman__pin { left: 1.4rem; margin-left: 0; }
.aviso-cookies__t { margin: 0 0 .3rem; font-family: var(--mano); font-variation-settings: "INFM" 55; font-weight: 720; font-size: 1.25rem; }
.aviso-cookies__txt { margin: 0 0 .9rem; font-size: .92rem; line-height: 1.45; color: #36403a; }
.aviso-cookies__txt a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: .2em; }
.aviso-cookies__botones { display: flex; gap: .6rem; }
.aviso-cookies .boton { padding: .6rem 1.1rem; font-size: .95rem; cursor: pointer; font-family: var(--texto); }
.boton--papel { background: transparent; color: var(--papel-tinta); border-color: rgba(31, 38, 34, .45); }
.boton--papel:hover { border-color: var(--papel-tinta); }
.pie__cookies { background: none; border: 0; padding: 0; color: inherit; font: inherit; text-decoration: underline; text-decoration-color: rgba(241, 239, 230, .35); text-underline-offset: .2em; cursor: pointer; }
.pie__cookies:hover { color: var(--tiza); }
@media (min-width: 900px) { .aviso-cookies { bottom: 1.4rem; left: 1.6rem; } }