/* =========================================================
   CAJÓN DE SASTRE · estilo.css
   Diseño extraído de lauralobatoalabern.com (Carrd).
   Si cambias un color o una tipografía aquí, cambia en
   la portada y en todos los artículos a la vez.
   ========================================================= */

/* ---------- Tipografías (alojadas en la carpeta fuentes/) ---------- */
@font-face { font-family: 'Caveat'; font-style: normal; font-weight: 400; font-display: swap; src: url('fuentes/caveat-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Caveat'; font-style: normal; font-weight: 500; font-display: swap; src: url('fuentes/caveat-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Work Sans'; font-style: normal; font-weight: 200; font-display: swap; src: url('fuentes/work-sans-latin-200-normal.woff2') format('woff2'); }
@font-face { font-family: 'Work Sans'; font-style: italic; font-weight: 200; font-display: swap; src: url('fuentes/work-sans-latin-200-italic.woff2') format('woff2'); }
@font-face { font-family: 'Work Sans'; font-style: normal; font-weight: 300; font-display: swap; src: url('fuentes/work-sans-latin-300-normal.woff2') format('woff2'); }
@font-face { font-family: 'Work Sans'; font-style: italic; font-weight: 300; font-display: swap; src: url('fuentes/work-sans-latin-300-italic.woff2') format('woff2'); }
@font-face { font-family: 'Work Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('fuentes/work-sans-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Work Sans'; font-style: italic; font-weight: 400; font-display: swap; src: url('fuentes/work-sans-latin-400-italic.woff2') format('woff2'); }
@font-face { font-family: 'Work Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('fuentes/work-sans-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Work Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('fuentes/work-sans-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Work Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('fuentes/work-sans-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'EB Garamond'; font-style: normal; font-weight: 400; font-display: swap; src: url('fuentes/eb-garamond-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'EB Garamond'; font-style: italic; font-weight: 400; font-display: swap; src: url('fuentes/eb-garamond-latin-400-italic.woff2') format('woff2'); }
@font-face { font-family: 'EB Garamond'; font-style: normal; font-weight: 500; font-display: swap; src: url('fuentes/eb-garamond-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'EB Garamond'; font-style: italic; font-weight: 500; font-display: swap; src: url('fuentes/eb-garamond-latin-500-italic.woff2') format('woff2'); }
@font-face { font-family: 'EB Garamond'; font-style: normal; font-weight: 700; font-display: swap; src: url('fuentes/eb-garamond-latin-700-normal.woff2') format('woff2'); }

/* ---------- Colores de tu web ---------- */
:root {
	--fondo: #030303;            /* negro del fondo */
	--panel: rgba(20, 60, 89, 0.969); /* azul de los recuadros */
	--azul: #143C59;             /* azul oscuro de textos y botones */
	--azul-hover: #0d2b40;
	--azul-texto: rgba(20, 60, 89, 0.969); /* azul de los textos del artículo */
	--tarjeta: #B8C7D1;          /* gris azulado de las tarjetas */
	--blanco: #FFFFFF;
	--gris-claro: #E8E6E1;       /* copyright */
	--cian: #7AE7FF;             /* frases destacadas */
	--oro: #E0AD48;              /* botones dorados */
	--oro-claro: #F7D694;

	--serif: 'EB Garamond', Georgia, serif;
	--sans: 'Work Sans', 'Helvetica Neue', Arial, sans-serif;
	--manuscrita: 'Caveat', cursive;

	--pad-v: 3rem;      /* relleno vertical de los recuadros */
	--pad-h: 3.125rem;  /* relleno horizontal de los recuadros */
}

/* ---------- Base ---------- */
html { font-size: 18pt; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (max-width: 1680px) { html { font-size: 13pt; } }
@media (max-width: 980px)  { html { font-size: 11pt; } }

*, *::before, *::after { box-sizing: border-box; }

body {
	margin: 0;
	min-width: 320px;
	min-height: 100vh;
	overflow-x: hidden;
	background-color: var(--fondo);
	color: var(--blanco);
	font-family: var(--sans);
	line-height: 1;
	word-wrap: break-word;
}

/* Fondo de montañas fijo, igual que en Carrd */
body::before {
	content: '';
	position: fixed;
	top: 0; left: 0;
	width: 100vw;
	height: 100vh;
	height: 100lvh;   /* en el móvil cubre también la zona de la barra del navegador */
	z-index: 0;
	pointer-events: none;
	background: url('imagenes/bg.jpg') center / cover no-repeat;
}

a { color: inherit; }
img { max-width: 100%; height: auto; }

.sitio {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.contenido {
	width: 53rem;
	max-width: 100%;
	margin: 0 auto;
	padding: var(--pad-v) var(--pad-h);
	flex: 1 0 auto;
}

/* Enlace oculto para saltar al contenido (accesibilidad) */
.saltar {
	position: absolute; left: -9999px; top: 0;
	background: var(--oro); color: var(--azul);
	padding: .5rem 1rem; z-index: 10; text-decoration: none;
	font-family: var(--sans); font-size: .8rem;
}
.saltar:focus { left: 1rem; top: 1rem; }

/* ---------- Menú superior ---------- */
.menu {
	list-style: none;
	margin: 0 0 6.5rem 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .75rem;
}
.menu a {
	display: inline-block;
	height: 1.375rem;
	line-height: calc(1.375rem - 2px);
	padding: 0 .6875rem;
	font-family: var(--sans);
	font-size: 1em;
	font-weight: 500;
	color: var(--blanco);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color .25s ease, opacity .25s ease;
}
.menu a:hover { opacity: .8; }

/* ---------- Recuadros azules ---------- */
.panel {
	width: 45rem;
	max-width: 100%;
	margin: 0 auto 3.75rem auto;
	padding: var(--pad-v) var(--pad-h);
	background-color: var(--panel);
	border-radius: .375rem;
}
.panel:last-child { margin-bottom: 0; }
.ancla { scroll-margin-top: 1.5rem; }
/* Medidas de la portada copiadas de tu web principal */
.panel > .titulo-manuscrito:first-child, .panel > .titulo-seccion:first-child { margin-top: 2.25rem; }
.panel > .divisor { margin: 1.96rem 0 2.2rem 0; }
.botones--explora { margin-top: 3rem; }

/* Títulos */
.titulo-manuscrito {
	margin: 0 0 1rem 0;
	text-align: center;
	font-family: var(--manuscrita);
	font-weight: 400;
	font-size: 5em;
	line-height: .875;
	color: var(--blanco);
}
.titulo-seccion {
	margin: 0 0 1rem 0;
	text-align: center;
	font-family: var(--serif);
	font-variant: small-caps;
	font-weight: 400;
	font-size: 2.625em;
	line-height: .95;
	color: var(--blanco);
}

.divisor {
	border: 0;
	height: 1px;
	background: var(--blanco);
	margin: 1.5rem 0;
}

/* Textos */
.texto p,
p.texto {
	margin: 1.625rem 0;
	font-family: var(--sans);
	font-size: 1em;
	font-weight: 200;
	line-height: 1.875;
	letter-spacing: .025rem;
	color: var(--blanco);
}
.texto p:first-child, p.texto:first-child { margin-top: 0; }
.texto p { margin: 0; }
.texto p + p { margin-top: 1.25rem; }
.texto .entrada + p, .texto .cian + p { margin-top: 1.625rem; }
.texto p:last-child,  p.texto:last-child  { margin-bottom: 0; }
.texto .entrada { font-weight: 400; }
.texto .cian { color: var(--cian); font-weight: 400; }
.texto strong { font-weight: 500; }
.texto em { font-style: italic; }
.centrado { text-align: center; }
.cursiva p, .cursiva { font-style: italic; }

/* ---------- Botones dorados ---------- */
.botones {
	list-style: none;
	margin: 1.625rem 0 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .75rem;
}
.boton-oro {
	display: inline-block;
	width: 16.25rem;
	max-width: 100%;
	height: 3.375rem;
	line-height: calc(3.375rem - 2px);
	padding: 0 .5rem;
	text-align: center;
	text-decoration: none;
	font-family: var(--sans);
	font-size: 1em;
	font-weight: 400;
	color: var(--panel);
	background-color: var(--oro);
	border: 1px solid var(--blanco);
	border-radius: 3rem;
	transition: background-color .25s ease;
}
.boton-oro:hover { background-color: var(--oro-claro); }

/* ---------- Tarjetas de artículos ---------- */
.tarjetas {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
	margin: 2.125rem 0 0 0;
	padding: 0;
	list-style: none;
}
.tarjeta {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 24px 20px;
	background-color: var(--tarjeta);
	color: var(--azul);
	border-radius: .375rem;
	box-shadow: 0 4px 14px rgba(20, 60, 89, .15);
	transition: transform .25s ease, box-shadow .25s ease;
}
.tarjeta:hover {
	transform: translateY(-6px) scale(1.02);
	box-shadow: 0 0 0 2px #fff, 0 12px 28px rgba(0, 0, 0, .4);
}
.tarjeta__coleccion {
	margin: 0 0 10px 0;
	font-family: var(--sans);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	opacity: .7;
}
.tarjeta__titulo {
	margin: 0 0 4px 0;
	font-family: var(--serif);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.25;
	text-transform: uppercase;
}
.tarjeta__subtitulo {
	display: block;
	margin: 0 0 14px 0;
	font-family: var(--serif);
	font-style: italic;
	font-size: 14px;
	line-height: 1.4;
	opacity: .8;
}
.tarjeta__texto {
	margin: 0 0 18px 0;
	font-family: var(--serif);
	font-size: 15.5px;
	line-height: 1.55;
	opacity: .92;
}
.tarjeta__fecha {
	margin: 0 0 14px 0;
	font-family: var(--sans);
	font-size: 11px;
	letter-spacing: .04em;
	opacity: .65;
}
.tarjeta__boton {
	display: inline-block;
	margin-top: auto;
	padding: 9px 22px;
	background-color: var(--azul);
	color: #fff;
	text-decoration: none;
	border-radius: .375rem;
	font-family: var(--serif);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .5px;
	text-transform: uppercase;
	white-space: nowrap;
	transition: background-color .25s ease;
}
.tarjeta__boton:hover { background-color: var(--azul-hover); }
.tarjeta--sola { max-width: 500px; margin: 2.125rem auto 0 auto; }
.tarjeta__libro {
	display: block;
	margin: 0 0 12px 0;
	font-family: var(--serif);
	font-style: italic;
	font-size: 18px;
	line-height: 1.4;
}
.tarjeta__libro:last-child { margin-bottom: 0; }

/* ---------- Página de artículo (formato de tu web del Cajón en Carrd) ---------- */
.panel--claro {
	background-color: rgba(184, 199, 209, 0.969);   /* gris azulado claro */
	color: var(--azul-texto);
	margin-bottom: 2.5rem;
}
.articulo__logo {
	display: block;
	width: 6.125rem;
	height: auto;
	margin: 0 auto 2.3rem auto;
}
.articulo__titulo {
	margin: 0 0 1rem 0;
	text-align: center;
	font-family: var(--serif);
	font-variant: small-caps;
	font-weight: 400;
	font-size: 2.625em;
	line-height: .875;
	color: var(--azul-texto);
}
.articulo__subtitulo {
	margin: 1rem 0 0 0;
	text-align: center;
	font-family: var(--serif);
	font-weight: 400;
	font-size: 2em;
	line-height: 1;
	color: var(--azul-texto);
}
.articulo__subtitulo--largo { font-size: 1.5em; }
.divisor--azul { background: var(--azul-texto); }
header .divisor--azul { margin: 1.17rem 0 0 0; }
.cuerpo > :first-child:not([style*="--aire"]) { margin-top: 2.6rem; }
.es-articulo .menu { margin-bottom: 3.25rem; }

.cuerpo {
	color: var(--azul-texto);
	font-family: var(--sans);
	font-size: 1em;
	font-weight: 300;
	line-height: 1.875;
	letter-spacing: .025rem;
}
.cuerpo p { margin: 0; width: calc(100% + .025rem); }
.cuerpo ul.puntos, .cuerpo h3 { width: calc(100% + .025rem); }
.cuerpo p.nuevo { margin-top: 1.25rem; }
.cuerpo p.aparte { margin-top: 2.125rem; }
.cuerpo strong { font-weight: 400; }   /* en tu Carrd las negritas son suaves */
.cuerpo em { font-style: italic; }
.cuerpo a { color: var(--azul-texto); text-decoration: underline; }
.cuerpo a:hover { text-decoration: none; }

/* Apartados: letra manuscrita, como en tu web */
.cuerpo h2 {
	margin: 2.125rem 0 0 0;
	font-family: var(--manuscrita);
	font-weight: 500;
	font-size: 1.375em;
	line-height: 1.875;
	letter-spacing: .025rem;
	color: var(--azul-texto);
}
.cuerpo h3 {
	margin: 0;
	font-family: var(--sans);
	font-size: 1em;
	font-weight: 400;
	line-height: 1.875;
	letter-spacing: .025rem;
}

.cuerpo h2.mas-aire { margin-top: 3.2rem; }
/* Espacios exactos copiados de tu Carrd (artículos importados) */
.cuerpo { --escala-aire: 1; }
.cuerpo [style*="--aire"], .descarga[style*="--aire"] { margin-top: calc(var(--aire) * 1rem * var(--escala-aire, 1)) !important; }
.cuerpo figure[style*="--aire"] { margin-top: calc(var(--aire) * 1rem * var(--escala-aire, 1)) !important; }

/* Listas con punto azul */
.cuerpo ul { list-style: none; margin: 0; padding: 0 0 0 1.5rem; }
.cuerpo li { position: relative; margin-top: .5rem; }
.cuerpo li::before {
	content: '';
	position: absolute;
	left: -1.1rem;
	top: .78em;
	width: .42rem;
	height: .42rem;
	border-radius: 50%;
	background: var(--azul-texto);
}

/* Puntos escritos dentro del texto (como en tu Carrd) */
.cuerpo ul.puntos { padding-left: 0; }
.cuerpo ul.puntos li { margin-top: 0; }
.cuerpo ul.puntos li::before { content: '• '; position: static; width: auto; height: auto; background: none; border-radius: 0; }

/* Frase destacada */
.cuerpo .destacado {
	margin: 2.125rem 0;
	font-size: .875em;
	font-weight: 400;
	line-height: 1.625;
}

/* Imagen con marco blanco y pie de foto */
.cuerpo figure {
	margin: 1.375rem 0;
}
.cuerpo figure img {
	display: block;
	width: 24.375rem;
	max-width: 100%;
	margin: 0 auto;
	height: auto;
	border: 7px solid #FFFFFF;
	box-sizing: border-box;
}
.cuerpo figcaption {
	margin: 1.125rem 0 0 0;
	text-align: center;
	font-size: .75em;
	font-style: italic;
	font-weight: 300;
	line-height: 1.875;
}
.cuerpo figure + p { margin-top: 1.125rem; }

/* Tablas comparativas (tu código de Dos frecuencias) */
.uv-compare-wrap { max-width: 900px; margin: 0 auto; padding: 16px; box-sizing: border-box; font-family: var(--serif); line-height: 1; letter-spacing: normal; font-weight: 400; }
.uv-compare-section { margin-bottom: 40px; }
.cuerpo .uv-compare-title { font-family: var(--serif); font-size: 22px; font-weight: 700; color: #143C59; text-align: center; margin: 0 0 16px 0; letter-spacing: 0; line-height: 1; }
.uv-compare-table { width: 100%; border-collapse: separate; border-spacing: 0; border-radius: .375rem; overflow: hidden; border: 2px solid #143C59; box-shadow: 0 6px 18px rgba(20, 60, 89, .35); }
.uv-compare-table th { background-color: #143C59; color: #fff; font-family: var(--serif); font-size: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; padding: 12px 16px; text-align: center; width: 50%; box-sizing: border-box; }
.uv-compare-table td { background-color: #B8C7D1; color: #143C59; padding: 14px 16px; vertical-align: top; width: 50%; box-sizing: border-box; border-bottom: 1px solid rgba(20, 60, 89, .2); text-align: center; }
.uv-compare-table tr:last-child td { border-bottom: none; }
.uv-compare-table td strong { display: block; font-family: var(--serif); font-size: 15px; font-weight: 700; margin-bottom: 4px; color: #143C59; }
.uv-compare-table td em { display: block; font-family: Georgia, serif; font-style: italic; font-size: 13.5px; line-height: 1.5; color: #143C59; opacity: .85; }
@media (max-width: 600px) {
	.uv-compare-table, .uv-compare-table thead, .uv-compare-table tbody,
	.uv-compare-table th, .uv-compare-table td, .uv-compare-table tr { display: block; width: 100%; }
	.uv-compare-table thead { display: none; }
	.uv-compare-table tr { margin-bottom: 2px; }
	.uv-compare-table td { border-bottom: none; border-left: 4px solid #143C59; }
	.uv-compare-table td:last-child { border-left: 4px solid #143C59; background-color: #d4dfe6; }
}

/* Cierre del artículo: PDF y Telegram */
.descarga { margin-top: 2.125rem; text-align: center; }
.descarga .divisor { margin: 0 0 1.5rem 0; }
.descarga .descarga__texto { margin-top: 0; }
.descarga__texto {
	max-width: 37.25rem;
	margin: 1rem auto;
	font-family: var(--sans);
	font-size: .75em;
	font-weight: 400;
	line-height: 1.875;
	letter-spacing: .025rem;
	color: var(--azul-texto);
}
.botones--articulo { margin-top: 1rem; }
.boton-oro--articulo {
	width: 15.75rem;
	font-size: .875em;
	font-weight: 500;
	color: var(--azul-texto);
}
.cds-tg-wrap { width: 100%; max-width: 37.25rem; margin: 28px auto 0 auto; text-align: center; }
.cds-tg-text {
	margin: 0 0 24px 0;
	font-family: var(--sans);
	font-style: italic;
	font-size: .75em;
	line-height: 1.85;
	letter-spacing: .03em;
	color: var(--azul-texto);
}
.cds-tg-text strong { font-weight: 600; }
.cds-tg-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	height: 3.375rem;
	padding: 0 34px;
	font-family: var(--sans);
	font-size: .875em;
	font-weight: 500;
	letter-spacing: .12em;
	color: var(--azul-texto);
	background: var(--oro);
	border: 1px solid #FFFFFF;
	border-radius: 3rem;
	text-decoration: none;
	transition: background .25s ease;
}
.cds-tg-btn:hover { background: var(--oro-claro); }

/* Panel final: otros artículos */
.otros-titulo {
	margin: 0;
	text-align: center;
	font-family: var(--serif);
	font-variant: small-caps;
	font-size: 2em;
	font-weight: 400;
	line-height: 1;
}
.cierre .tarjetas { margin-top: 1.75rem; }
.cierre .botones { margin-top: 2rem; }

@media (max-width: 736px) {
	.panel--claro { margin-bottom: 1.875rem; }
	.cuerpo h2 { line-height: 1.25; margin-top: 1.75rem; margin-bottom: .35rem; }
	.cuerpo h2.mas-aire { margin-top: 2.6rem; }
	.cuerpo, .descarga { --escala-aire: .75; }
	.es-articulo .menu { margin-bottom: 3.25rem; gap: .75rem; }
	.cuerpo p.aparte, .cuerpo .destacado { margin-top: 1.59375rem; }
	.cuerpo .destacado { margin-bottom: 1.59375rem; }
	.otros-titulo { font-size: 1.75em; }
}
@media (max-width: 600px) {
	.cds-tg-btn { padding: 0 22px; }
}
@media (max-width: 480px) {
	.boton-oro--articulo { width: 100%; }
}

/* ---------- Pie de página ---------- */
.pie {
	position: relative;
	z-index: 1;
	padding: 1.25rem 1rem 1.75rem 1rem;
	background-color: transparent;   /* sobre las montañas, como en tu web */
	text-align: center;
}
.pie__copyright {
	margin: 0;
	font-family: var(--manuscrita);
	font-size: 1.125em;
	line-height: 2.5;
	letter-spacing: -.025rem;
	color: var(--gris-claro);
}
.pie__enlaces {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .25rem 1.5rem;
}
.pie__enlaces a {
	font-family: var(--sans);
	font-size: .625em;
	font-weight: 300;
	letter-spacing: -.025rem;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--blanco);
}
.pie__enlaces a:hover { text-decoration: underline; }

/* ---------- Móvil ---------- */
@media (max-width: 736px) {
	:root { --pad-v: 3rem; --pad-h: 2rem; }
	.menu { flex-direction: column; align-items: center; gap: .5625rem; margin-bottom: 5.5rem; }
	.panel { margin-bottom: 2.625rem; }
	.titulo-manuscrito { font-size: 3.5em; }
	.titulo-seccion { font-size: 2em; }
	p.texto { margin: 1.21875rem 0; }
	.texto .entrada + p, .texto .cian + p { margin-top: 1.21875rem; }
}
@media (max-width: 480px) {
	.tarjetas { grid-template-columns: 1fr; }
	.boton-oro { width: 100%; }
	.botones { flex-direction: column; }
}
@media (max-width: 360px) {
	:root { --pad-v: 2.25rem; --pad-h: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.tarjeta, .tarjeta:hover { transition: none; transform: none; }
}


/* Pantallas de la portada */
.vista[hidden] { display: none !important; }

/* Tarjetas exactamente como el código de tu web */
.tarjeta__subtitulo { font-family: Georgia, serif; font-size: 12.5px; opacity: .75; }
.tarjeta__texto { font-family: Georgia, serif; font-size: 14px; opacity: .9; }
.tarjeta__boton { font-family: Georgia, serif; font-weight: 600; }

/* Título y subtítulo de los artículos más contenidos en el móvil en vertical */
@media (max-width: 480px) {
	.articulo__titulo { font-size: 1.9em; line-height: .95; }
	.articulo__subtitulo { font-size: 1.4em; line-height: 1.1; }
	.articulo__subtitulo--largo { font-size: 1.2em; }
	.articulo__logo { width: 5rem; margin-bottom: 1.6rem; }
}