/**
 * Owl Vision — sistema base
 * Depende de brand-tokens.css. No declares colores ni fuentes aquí:
 * usa las variables --ov-*.
 */

/* ============================================================
   1 · REINICIO
   ============================================================ */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

body {
	margin: 0;
	background-color: var(--ov-bg);
	color: var(--ov-text);
	font-family: var(--ov-font-body);
	font-size: var(--ov-text-base);
	line-height: var(--ov-leading-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

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

button, input, select, textarea { font: inherit; color: inherit; }

/* ============================================================
   2 · TIPOGRAFÍA — §08 del manual
   PT Sans Narrow en títulos · Lato en información · EB Garamond en lemas
   ============================================================ */

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 var(--ov-space-md);
	font-family: var(--ov-font-display);
	font-weight: 700;
	line-height: var(--ov-leading-tight);
	letter-spacing: var(--ov-tracking-display);
	text-wrap: balance;
}

h1 { font-size: var(--ov-text-3xl); }
h2 { font-size: var(--ov-text-2xl); }
h3 { font-size: var(--ov-text-xl);  }
h4 { font-size: var(--ov-text-lg);  }
h5, h6 {
	font-size: var(--ov-text-sm);
	text-transform: uppercase;
	letter-spacing: var(--ov-tracking-label);
}

p { margin: 0 0 var(--ov-space-md); text-wrap: pretty; }

a {
	color: var(--ov-trust);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	transition: color var(--ov-duration) var(--ov-ease);
}

a:hover, a:focus-visible { color: var(--ov-accent); }

:focus-visible {
	outline: var(--ov-stroke) solid var(--ov-accent);
	outline-offset: 3px;
}

/* Lema o cita de marca. Único lugar donde vive EB Garamond. */
.ov-lema {
	font-family: var(--ov-font-quote);
	font-style: italic;
	font-size: var(--ov-text-xl);
	line-height: 1.35;
	color: var(--ov-trust);
	max-width: 26ch;
}

/* Etiqueta de sección: "01 · FUNDAMENTO" */
.ov-eyebrow {
	display: block;
	margin-bottom: var(--ov-space-xs);
	font-family: var(--ov-font-display);
	font-size: var(--ov-text-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--ov-tracking-label);
	color: var(--ov-trust);
}

/* Subrayado corto bajo los títulos, como en el manual. */
.ov-rule::after {
	content: "";
	display: block;
	width: 76px;
	height: 3px;
	margin-top: var(--ov-space-md);
	background-color: var(--ov-trust);
}

.ov-rule--accent::after { background-color: var(--ov-accent); }

/* ============================================================
   3 · DISPOSICIÓN
   ============================================================ */

.ov-container {
	width: 100%;
	max-width: var(--ov-container);
	margin-inline: auto;
	padding-inline: var(--ov-gutter);
}

.ov-container--wide { max-width: var(--ov-container-wide); }
.ov-container--text { max-width: var(--ov-container-text); }

.ov-section { padding-block: var(--ov-section-y); }

.ov-section--inverse {
	background-color: var(--ov-bg-inverse);
	color: var(--ov-text-inverse);
}

.ov-section--inverse h1,
.ov-section--inverse h2,
.ov-section--inverse h3,
.ov-section--inverse h4 { color: var(--ov-text-inverse); }

.ov-section--trust {
	background-color: var(--ov-trust);
	color: var(--ov-text-inverse);
}

.ov-section--paper { background-color: var(--ov-bg-alt); }

/* Corte 50/50 — §09: detalle técnico + mensaje claro. */
.ov-split {
	display: grid;
	gap: var(--ov-space-2xl);
	align-items: center;
}

@media (min-width: 900px) {
	.ov-split { grid-template-columns: 1fr 1fr; gap: var(--ov-space-3xl); }
	.ov-split--reverse > :first-child { order: 2; }
}

.ov-grid {
	display: grid;
	gap: var(--ov-space-lg);
	grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}

.ov-stack > * + * { margin-top: var(--ov-space-md); }

.skip-link {
	position: absolute;
	left: -9999px;
	z-index: var(--ov-z-modal);
	padding: var(--ov-space-sm) var(--ov-space-md);
	background: var(--ov-obsidian);
	color: var(--ov-hueso);
}

.skip-link:focus { left: var(--ov-space-md); top: var(--ov-space-md); }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ============================================================
   3.5 · SUPERFICIES OSCURAS — corrección de contraste
   ------------------------------------------------------------
   El azul iris (#183B56) sobre obsidiana (#111111) da 1.6:1.
   WCAG pide 4.5:1 para texto normal: es ilegible.

   Sobre fondo oscuro el azul NO se usa como color de texto. Se
   sustituye por ámbar (8.4:1) en etiquetas y por hueso (16.8:1)
   en lemas y citas. Es además lo que hace el propio manual en
   sus páginas oscuras: etiquetas en ámbar, citas en hueso.
   ============================================================ */

.ov-hero,
.ov-section--inverse,
.ov-section--trust,
.ov-footer {
	/* Redefine los roles para esta superficie; los componentes
	   internos no necesitan saber sobre qué fondo están. */
	--ov-text: var(--ov-hueso);
	--ov-text-muted: var(--ov-hueso-70);
	--ov-trust: var(--ov-ambar);
	--ov-border: var(--ov-hueso-40);
	--ov-border-soft: rgba(244, 241, 234, 0.18);
}

.ov-hero .ov-eyebrow,
.ov-section--inverse .ov-eyebrow,
.ov-section--trust .ov-eyebrow,
.ov-footer .ov-eyebrow {
	color: var(--ov-ambar);
}

.ov-hero .ov-lema,
.ov-section--inverse .ov-lema,
.ov-section--trust .ov-lema,
.ov-footer .ov-lema,
.ov-section--inverse blockquote,
.ov-footer blockquote {
	color: var(--ov-hueso);
}

.ov-hero .ov-rule::after,
.ov-section--inverse .ov-rule::after,
.ov-section--trust .ov-rule::after,
.ov-footer .ov-rule::after {
	background-color: var(--ov-ambar);
}

.ov-hero .ov-icon,
.ov-section--inverse .ov-icon,
.ov-section--trust .ov-icon,
.ov-footer .ov-icon {
	color: var(--ov-ambar);
}

/* Enlaces de contenido sobre fondo oscuro. */
.ov-section--inverse a:not(.ov-btn),
.ov-section--trust a:not(.ov-btn) {
	color: var(--ov-ambar);
}

.ov-section--inverse a:not(.ov-btn):hover,
.ov-section--trust a:not(.ov-btn):hover {
	color: var(--ov-hueso);
}

/* La píldora azul sobre fondo oscuro desaparece: se invierte. */
.ov-section--inverse .ov-pill,
.ov-footer .ov-pill {
	background-color: var(--ov-ambar);
	color: var(--ov-obsidian);
}

/* Las tarjetas heredarían texto hueso sobre fondo blanco.
   Se restauran los roles claros dentro de la tarjeta. */
.ov-section--inverse .ov-card,
.ov-section--trust .ov-card {
	--ov-text: var(--ov-obsidian);
	--ov-text-muted: var(--ov-obsidian-60);
	color: var(--ov-obsidian);
}

/* ============================================================
   4 · LOGOTIPO — §03 y §04
   ============================================================ */

.ov-logo {
	display: inline-block;
	line-height: 0;
	/* Área de seguridad: 1X alrededor (X = pupila del símbolo). */
	padding: var(--ov-logo-clearspace);
	margin: calc(var(--ov-logo-clearspace) * -1);
}

.ov-logo svg,
.ov-logo img,
.ov-logo picture { display: block; width: 100%; height: auto; }

/*
 * Tamaños del manual (§04). El mínimo con lema es 320px, pero a ese ancho
 * el logotipo no cabe en una cabecera móvil. Por eso en móvil se usa la
 * variante SIN lema (mínimo 180px), que es justo el "uso cotidiano y
 * formatos reducidos" que el manual describe para el secundario (§03).
 */
.ov-logo--principal  { width: clamp(200px, 24vw, var(--ov-logo-min-lema)); }
.ov-logo--secundario { width: clamp(150px, 18vw, var(--ov-logo-min-nolema)); }
.ov-logo--simbolo    { width: 44px; }

/* Debajo del mínimo con lema, el logotipo completo deja de ser legible. */
@media (max-width: 640px) {
	.ov-logo--principal { width: 168px; }
}

/* Fallback mientras no existan los SVG de marca. */
.ov-logo__fallback {
	font-family: var(--ov-font-display);
	font-size: var(--ov-text-xl);
	font-weight: 700;
	line-height: 1;
	letter-spacing: var(--ov-tracking-caps);
	text-transform: uppercase;
	color: currentColor;
}

/* ============================================================
   5 · RECURSOS GRÁFICOS — §09
   Siempre de una tinta, siempre discretos: no compiten con el logo.
   ============================================================ */

.ov-iris,
.ov-facetas {
	color: var(--ov-cuarzo);
	opacity: 0.5;
	pointer-events: none;
}

.ov-section--inverse .ov-iris,
.ov-section--inverse .ov-facetas { color: var(--ov-hueso); opacity: 0.22; }

.ov-decor {
	position: absolute;
	z-index: 0;
	width: min(38vw, 420px);
}

.ov-decor--tr { top: -6%;  right: -6%; }
.ov-decor--bl { bottom: -8%; left: -8%; }

.ov-icon { color: var(--ov-trust); }

/* ============================================================
   6 · BOTONES
   Ámbar sobre hueso, o hueso sobre obsidiana. CTA breve y directo (§13).
   ============================================================ */

.ov-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--ov-space-xs);
	padding: 0.9rem 2rem;
	border: var(--ov-stroke) solid transparent;
	border-radius: var(--ov-radius-pill);
	background-color: var(--ov-accent);
	color: var(--ov-obsidian);
	font-family: var(--ov-font-body);
	font-size: var(--ov-text-sm);
	font-weight: 700;
	letter-spacing: var(--ov-tracking-caps);
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--ov-duration) var(--ov-ease),
	            color var(--ov-duration) var(--ov-ease),
	            border-color var(--ov-duration) var(--ov-ease);
}

.ov-btn:hover,
.ov-btn:focus-visible {
	background-color: var(--ov-obsidian);
	color: var(--ov-hueso);
}

.ov-btn--ghost {
	background-color: transparent;
	border-color: currentColor;
	color: var(--ov-text);
}

.ov-btn--ghost:hover,
.ov-btn--ghost:focus-visible {
	background-color: var(--ov-obsidian);
	border-color: var(--ov-obsidian);
	color: var(--ov-hueso);
}

.ov-section--inverse .ov-btn--ghost { color: var(--ov-hueso); }

.ov-section--inverse .ov-btn--ghost:hover {
	background-color: var(--ov-hueso);
	border-color: var(--ov-hueso);
	color: var(--ov-obsidian);
}

/* ============================================================
   7 · TARJETAS
   ============================================================ */

.ov-card {
	padding: var(--ov-space-xl);
	background-color: var(--ov-bg-alt);
	border-radius: var(--ov-radius-lg);
}

.ov-card__label {
	display: block;
	margin-bottom: var(--ov-space-sm);
	font-size: var(--ov-text-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--ov-tracking-label);
	color: var(--ov-accent);
}

.ov-card__title {
	font-size: var(--ov-text-lg);
	margin-bottom: var(--ov-space-xs);
}

.ov-card > :last-child { margin-bottom: 0; }

/* Píldora de etiqueta, como los chips del manual. */
.ov-pill {
	display: inline-block;
	padding: 0.35em 1em;
	border-radius: var(--ov-radius-pill);
	background-color: var(--ov-trust);
	color: var(--ov-hueso);
	font-size: var(--ov-text-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--ov-tracking-label);
}

/* ============================================================
   8 · CABECERA
   ============================================================ */

.ov-header {
	position: sticky;
	top: 0;
	z-index: var(--ov-z-header);
	background-color: var(--ov-bg);
	border-bottom: 1px solid var(--ov-border-soft);
}

.ov-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ov-space-lg);
	min-height: 84px;
}

.ov-nav__list {
	display: flex;
	align-items: center;
	gap: var(--ov-space-lg);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ov-nav__list a {
	color: var(--ov-text);
	font-size: var(--ov-text-sm);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-decoration: none;
	text-transform: uppercase;
}

.ov-nav__list a:hover { color: var(--ov-accent); }

.ov-header__actions {
	display: flex;
	align-items: center;
	gap: var(--ov-space-md);
}

.ov-nav-toggle {
	display: none;
	padding: var(--ov-space-xs);
	border: 0;
	background: none;
	cursor: pointer;
}

@media (max-width: 899px) {
	.ov-nav-toggle { display: block; }

	.ov-nav {
		position: fixed;
		inset: 84px 0 0;
		padding: var(--ov-space-xl) var(--ov-gutter);
		background-color: var(--ov-bg);
		transform: translateX(100%);
		transition: transform var(--ov-duration) var(--ov-ease);
		overflow-y: auto;
	}

	.ov-nav[data-open="true"] { transform: translateX(0); }

	.ov-nav__list { flex-direction: column; align-items: flex-start; gap: var(--ov-space-lg); }
	.ov-nav__list a { font-size: var(--ov-text-lg); }
}

/* ============================================================
   9 · HÉROE
   ============================================================ */

.ov-hero {
	position: relative;
	overflow: hidden;
	background-color: var(--ov-bg-inverse);
	color: var(--ov-text-inverse);
	padding-block: clamp(4rem, 2rem + 10vw, 9rem);
}

.ov-hero__inner { position: relative; z-index: 1; max-width: 40rem; }

.ov-hero h1 { color: var(--ov-text-inverse); }

.ov-hero__lead {
	font-size: var(--ov-text-md);
	color: var(--ov-hueso-70);
	max-width: 46ch;
}

.ov-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ov-space-md);
	margin-top: var(--ov-space-xl);
}

/* ============================================================
   10 · BLOQUE DE CONFIANZA — íconos visión/armazón/protección/ajuste
   ============================================================ */

.ov-trust-grid {
	display: grid;
	gap: var(--ov-space-xl);
	grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
	text-align: center;
}

.ov-trust-item .ov-icon { margin-inline: auto; margin-bottom: var(--ov-space-sm); }

.ov-trust-item h3 {
	font-size: var(--ov-text-sm);
	text-transform: uppercase;
	letter-spacing: var(--ov-tracking-label);
	margin-bottom: var(--ov-space-2xs);
}

.ov-trust-item p {
	font-size: var(--ov-text-sm);
	color: var(--ov-text-muted);
	margin: 0;
}

/* ============================================================
   11 · PIE
   ============================================================ */

.ov-footer {
	background-color: var(--ov-bg-inverse);
	color: var(--ov-text-inverse);
	padding-block: var(--ov-space-3xl) var(--ov-space-xl);
}

.ov-footer a { color: var(--ov-hueso-70); text-decoration: none; }
.ov-footer a:hover { color: var(--ov-accent); }

.ov-footer__grid {
	display: grid;
	gap: var(--ov-space-2xl);
	grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
	margin-bottom: var(--ov-space-2xl);
}

.ov-widget__title,
.ov-footer__heading {
	font-family: var(--ov-font-display);
	font-size: var(--ov-text-sm);
	text-transform: uppercase;
	letter-spacing: var(--ov-tracking-label);
	color: var(--ov-accent);
	margin-bottom: var(--ov-space-md);
}

.ov-footer ul { margin: 0; padding: 0; list-style: none; }
.ov-footer li + li { margin-top: var(--ov-space-xs); }

.ov-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--ov-space-md);
	padding-top: var(--ov-space-lg);
	border-top: 1px solid var(--ov-hueso-40);
	font-size: var(--ov-text-xs);
	color: var(--ov-hueso-70);
}

/* ============================================================
   12 · CONTENIDO
   ============================================================ */

.ov-entry__content > * { margin-bottom: var(--ov-space-md); }

.ov-entry__content > h2,
.ov-entry__content > h3 { margin-top: var(--ov-space-2xl); }

blockquote {
	margin: var(--ov-space-xl) 0;
	padding-left: var(--ov-space-lg);
	border-left: 3px solid var(--ov-accent);
	font-family: var(--ov-font-quote);
	font-style: italic;
	font-size: var(--ov-text-lg);
	color: var(--ov-trust);
}

table { width: 100%; border-collapse: collapse; }
th, td { padding: var(--ov-space-sm); border-bottom: 1px solid var(--ov-border); text-align: left; }
th { font-family: var(--ov-font-display); text-transform: uppercase; letter-spacing: var(--ov-tracking-caps); }