body {
	/* Base oscura (espresso-roast) + acentos de color en los radial-gradients
	   de abajo. Con la paleta Velvet Crema, --main-color es un dorado CLARO
	   (acento, no base): usar --main-dark-color aquí dejaba el fondo entero
	   en un dorado medio-brillante, ilegible para texto blanco y lejos del
	   "fondo oscuro cálido" de la marca. --secondary-color (espresso-roast)
	   es la base oscura correcta. */
	background-color: var(--secondary-color);
	background-size: 100% 100%;
	background-position: 0px 0px, 0px 0px, 0px 0px;
	background-image:

		radial-gradient(1800px at -1000px -600px, var(--secondary-color) 0%, rgb(from var(--secondary-color) r g b / 0%) 100%),
		radial-gradient(2500px at calc(100% + 900px) -1700px, var(--terciary-color) 0%, rgb(from var(--terciary-color) r g b / 0%) 100%),
		radial-gradient(1800px at calc(100% + 300px) calc(100% + 300px), var(--main-color) 0%, rgb(from var(--main-color) r g b / 0%) 100%);

	background-size: cover;
	-ms-background-size: cover;
	-o-background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	background-attachment: fixed;
	color: white;
	font-family: var(--body-font);
}

body::before {
	content: '';
	display: inline-block;
	width: 100%;
	height: 100%;
	position: fixed;
	background-color: hsl(from var(--main-color) h s calc(l - 20));
	background-image:
		linear-gradient(to right, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.0)),
		url(../img/noise.svg);
	left: 0;
	top: 0;
	opacity: 0.2;
	z-index: -1;
}


a {
	color: var(--main-color);
}

/*a:visited{
	color:#846680;
}*/



.pricing-container ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.pricing-container ul li::before {
	content: '\e5ca';
	font-family: 'Material Symbols Outlined';
	color: green;
}

.pricing-container.popular .design-container {
	border: 1px solid var(--secondary-color);
	transform: scale(1.06);
	backface-visibility: hidden;
	-webkit-font-smoothing: subpixel-antialiased;
	padding: 10px 0;
	position: relative;
	box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.8);
	background:
		radial-gradient(1800px at -1000px -600px, rgb(from var(--secondary-color) r g b / 40%) 0%, rgb(from var(--secondary-color) r g b / 0%) 100%),
		radial-gradient(2500px at calc(100% + 900px) -1700px, rgb(from var(--terciary-color) r g b / 60%) 0%, rgb(from var(--terciary-color) r g b / 0%) 100%),
		radial-gradient(1800px at calc(100% + 300px) calc(100% + 300px), hsl(from var(--main-color) h s calc(l - 20) / 40%) 0%, hsl(from var(--main-color) h s calc(l - 20) / 0%) 100%),
		hsl(from var(--main-color) h s calc(l - 20) / 60%);

	background-size: 200% 200%;
	animation: none;
	/* background-position: 0% 0%; */
	/* background-position: -100% 0%; */
	/*animation: design_container_out .5s 1 forwards cubic-bezier(0.505, 0.000, 0.305, 1.000);*/
}

.pricing-container.popular .design-container:hover {
	animation: none;
}

.pricing-container.popular .design-container::before {
	content: 'Popular';
	position: absolute;
	left: 0;
	right: 0;
	margin: 0 auto;
	top: -15px;
	font-size: 8pt;
	font-weight: bold;
	text-transform: uppercase;
	padding: 5px 10px;
	background-color: var(--secondary-color);
	display: inline-block;
	width: 70px;
	border-radius: 999px;

}


.item {
	max-width: 500px;
	cursor: pointer;
}

.item img {
	display: inline-block;
	width: 50px;
	vertical-align: middle;
}

.item div {
	display: inline-block;
	width: calc(100% - 60px);
	vertical-align: middle;
}

.item p {
	margin: 0;
	width: 100%;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;

}







.blur-body {
	display: inline-block;
	width: 100%;
	height: 100%;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: brightness(70%);
	-o-backdrop-filter: brightness(70%);
	-ms-backdrop-filter: brightness(70%);
	-moz-backdrop-filter: brightness(70%);
}


.stars_component img {
	width: 40px;
	height: 40px;
	margin: 0 5px;
	display: inline-block;
	filter: saturate(0%);
	-moz-filter: saturate(0%);
	-webkit-filter: saturate(0%);
	-o-filter: saturate(0%);
	-ms-filter: saturate(0%);
	transition: all .3s;
	-moz-transition: all .3s;
	-webkit-transition: all .3s;
	-o-transition: all .3s;
	-ms-transition: all .3s;
	cursor: pointer;
}

.stars_component .selected_star {
	filter: saturate(100%);
	-moz-filter: saturate(100%);
	-webkit-filter: saturate(100%);
	-o-filter: saturate(100%);
	-ms-filter: saturate(100%);
	transform: scale(1.1);
	-moz-transform: scale(1.1);
	-webkit-transform: scale(1.1);
	-o-transform: scale(1.1);
	-ms-transform: scale(1.1);
}

.stars_component .active_star {
	filter: brightness(110%) saturate(80%);
	-moz-filter: brightness(110%) saturate(80%);
	-webkit-filter: brightness(110%) saturate(80%);
	-o-filter: brightness(110%) saturate(80%);
	-ms-filter: brightness(110%) saturate(80%);
}

footer {
	position: fixed;
	bottom: 0px;
	left: 0;
	width: 100%;
	height: 20px;
	padding: 10px 0;
	background-color: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	-o-backdrop-filter: blur(10px);
	-ms-backdrop-filter: blur(10px);
	-moz-backdrop-filter: blur(10px);
}


/* Media queries - Responsive timeline on screens less than 600px wide */
@media screen and (max-width: 600px) {

	/* Place the timelime to the left */
	.timeline::after {
		left: 20px;
	}

	/* Full-width containers */
	.timeline-item {
		width: calc(100% - 100px);
		margin: 25px 0 25px 60px;
	}

	/* Make sure that all arrows are pointing leftwards */
	.timeline-item::before {
		left: -40px;
	}


	/* Make sure all circles are at the same spot */
	.timeline-item:nth-child(odd)::after,
	.timeline-item:nth-child(even)::after {
		left: -50px;
	}

	/* Make all right containers behave like the left ones */
	.timeline-item:nth-child(even) {
		left: 0%;
	}
}

/* ---------------------------------------------------------------------
   ORI (Feature: UI Base — Landing, Gate de Passcode, Conversación)
   Paleta "Velvet Crema" — variables NUEVAS con prefijo --ori- para no
   pisar las variables genéricas del framework (--main-color, etc.)
   que consume el cheat-sheet atómico y el resto del boilerplate.
   Ver docs/specs/02_feature_ui_base_landing_gate/spec.md (Resolved Decisions #2).
--------------------------------------------------------------------- */
:root {
	/* Alias semánticos que APUNTAN a las variables globales del framework
	   (framework.css:root, ya seteadas a la paleta Velvet Crema) para que
	   nunca puedan divergir de --main-color/--secondary-color/etc. */
	--ori-surface: #131313;
	--ori-espresso-roast: var(--secondary-color);
	--ori-crema-gold: var(--main-color);
	--ori-primary: #f2be8c;
	--ori-steam-white: #f4f4f4;
	--ori-on-surface-variant: var(--cuaternary-color);
	--ori-brushed-steel: var(--terciary-color);

	/* Tipografía de marca: NO se declaran --ori-headline-font/--ori-body-font
	   aquí todavía (otro agente configurará @font-face con Archer SSm Bold Pro /
	   Helvetica Neue Bold). Los componentes referencian
	   var(--ori-headline-font, serif) / var(--ori-body-font, sans-serif) con
	   fallback inline, que aplica automáticamente mientras la variable no exista. */
}