/* ═══════════════════════════════════════════════════════════════════════════
   BASE — estilos generales de todo el sitio

   A diferencia de la landing (que era una página suelta y borraba todos los
   márgenes y viñetas), acá la base es suave: el sitio convive con WooCommerce,
   Mercado Pago, Elementor y otros plugins que esperan un HTML "normal".
   Los estilos llamativos están en componentes.css y solo se aplican a quien
   tenga la clase correspondiente.
   ═══════════════════════════════════════════════════════════════════════════ */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-padding-top: 90px; /* que los anclas (#seccion) no queden tapadas por el header fijo */
}

@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}

body {
	margin: 0;
	font-family: var(--font-sans);
	font-size: 17px;
	line-height: 1.65;
	color: var(--ink-2);
	background: var(--paper);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: clip; /* evita el scroll horizontal sin romper el header fijo */
}

@media (max-width: 820px) {
	body { font-size: 16px; }
}

img, svg, video { max-width: 100%; height: auto; }

:focus-visible { outline: 2.5px solid var(--brand); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--aqua-soft); color: var(--abyss); }

/* ── Tipografía general ───────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
	margin: 0 0 .6em;
	color: var(--ink);
	font-family: var(--font-sans);
	font-weight: 700;
	letter-spacing: -.025em;
	line-height: 1.15;
}
h1 { font-size: clamp(2.1rem, 4.6vw, 3.6rem); font-weight: 800; letter-spacing: -.038em; line-height: 1.05; }
h2 { font-size: clamp(1.6rem, 3vw, 2.35rem); letter-spacing: -.03em; }
h3 { font-size: clamp(1.15rem, 1.8vw, 1.4rem); letter-spacing: -.02em; }
h4 { font-size: 1.1rem; }
h5, h6 { font-size: 1rem; }

p { margin: 0 0 1.1em; }

a { color: var(--brand-700); text-decoration: none; transition: color .2s; }
a:hover { color: var(--brand); }

strong, b { font-weight: 700; color: var(--ink); }

hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }

/* ── Contenido editable (páginas y entradas hechas con el editor) ─────────
   :where() baja la prioridad de estas reglas a cero, así cualquier estilo
   de un bloque, de Elementor o de WooCommerce les gana sin pelear. */
:where(.entry-content) :where(ul, ol) { margin: 0 0 1.1em; padding-left: 1.3em; }
:where(.entry-content) :where(li) { margin-bottom: .35em; }
:where(.entry-content) a:where(:not([class])) {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
:where(.entry-content) :where(blockquote) {
	margin: 1.5em 0;
	padding-left: 1.2em;
	border-left: 3px solid var(--brand);
	font-family: var(--font-serif);
	font-style: italic;
	font-size: 1.3em;
	line-height: 1.45;
	color: var(--ink);
}

/* ── Accesibilidad ─────────────────────────────────────────────────────────
   Texto solo para lectores de pantalla (nombre estándar de WordPress). */
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
/* El enlace "Saltar al contenido" aparece solo al navegar con teclado. */
.skip-link:focus {
	clip: auto; width: auto; height: auto; margin: 0;
	top: .75rem; left: .75rem; z-index: 1000;
	padding: .8rem 1.2rem;
	background: var(--abyss); color: #fff;
	border-radius: var(--r-full);
	font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}