/* Base de la web de Beyond Reality AR.
   Sustituye al "reset" que traía Framer: lo mismo, pero sólo lo que esta
   página usa de verdad. */

:root {
	/* La paleta. Framer los llamaba "tokens" y les ponía un identificador
	   ilegible; aquí van con su nombre. */
	--negro-nav: #111013;
	--tinta: #101012;
	--gris-texto: #666572;
	--rojo: #ff4433;
	--morado: #7855ff;
	--lavanda: #e8e3fd;
}

html,
body,
#main {
	margin: 0;
	padding: 0;
}

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

body {
	background: #fff;
	/* La familia de partida es la genérica, igual que en el original: los
	   textos llevan la suya y, donde no hay texto, la métrica de esta fuente
	   es la que decide el hueco de la línea base (el pie mide 1 px menos con
	   DM Sans aquí). */
	font-family: sans-serif;
	font-size: 12px;
}

/* Los textos van dentro de cajas de maqueta; el margen lo pone la caja. */
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
figure,
ul,
ol,
li {
	margin: 0;
	padding: 0;
	font-size: inherit;
	font-weight: inherit;
	font-style: inherit;
	font-family: inherit;
	color: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	text-align: inherit;
}

/* Valores de partida del texto. Framer los tenía escondidos como respaldo de
   sus variables (`var(--framer-font-size, 16px)`), así que había textos sin
   tamaño ni interlineado propios que, sin esto, salen con los del navegador.
   Van con `:where()` para que cualquier clase `t-…` los gane siempre. Los
   `span` y los enlaces quedan fuera a propósito: tienen que heredar del
   párrafo que los contiene, no volver al valor de partida. */
:where(.texto) h1,
:where(.texto) h2,
:where(.texto) h3,
:where(.texto) h4,
:where(.texto) h5,
:where(.texto) h6,
:where(.texto) p,
:where(.texto) blockquote,
:where(.texto) li {
	font-family: "Inter", sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 1.2em;
	letter-spacing: 0;
	text-align: start;
	text-transform: none;
	text-decoration: none;
	color: #000;
}

/* Varios párrafos seguidos dentro del mismo bloque de texto. */
p + p,
h3 + p,
p + h3 {
	margin-top: var(--espacio-parrafo, 0);
}

a {
	color: inherit;
	text-decoration: inherit;
}

ul,
ol {
	list-style: none;
}

img,
video,
iframe {
	display: block;
	border: 0;
}

/* Los `svg` se quedan en `inline`, como en el original: en el pie, el hueco
   de la línea base es justo lo que hace que la fila mida 39 px y no 36. */
svg {
	border: 0;
}

button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

/* `display:block` a secas. Framer lo repartía con tres clases distintas. */
.bloque {
	display: block;
}

/* Caja de texto. En Framer era `data-framer-component-type="RichTextContainer"`:
   una columna que no se encoge. Sin esto, los textos se desparraman. */
.texto {
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
	justify-content: flex-start;
	position: relative;
	outline: none;
}

/* Marco de las imágenes de fondo: la imagen llena su caja sin tocar la
   maqueta. */
.marco {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	overflow: hidden;
}

.marco > img {
	width: 100%;
	height: 100%;
	border-radius: inherit;
	object-position: center;
	object-fit: cover;
}

/* Borde dibujado por encima, sin alterar la caja (Framer usaba `data-border`).
   Importa: con `border` de verdad, el alto fijo de la barra cambiaría. */
.con-borde::after {
	content: "";
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border-style: var(--borde-estilo, none);
	border-width: var(--borde-arriba, 0) var(--borde-derecha, 0) var(--borde-abajo, 0) var(--borde-izquierda, 0);
	border-color: var(--borde-color, transparent);
	border-radius: inherit;
	pointer-events: none;
	box-sizing: border-box;
}

/* Qué se ve en cada tamaño. Son los mismos cortes que la maqueta. */
@media (min-width: 1400px) {
	.oculto-en-escritorio {
		display: none !important;
	}
}

@media (min-width: 800px) and (max-width: 1399.98px) {
	.oculto-en-tableta {
		display: none !important;
	}
}

@media (max-width: 799.98px) {
	.oculto-en-movil {
		display: none !important;
	}
}

/* Accesibilidad: quien pide menos movimiento ve la página quieta y entera. */
@media (prefers-reduced-motion: reduce) {
	[data-entrada],
	[data-aparece] {
		opacity: 1 !important;
		transform: none !important;
	}
}