@font-face
	{font-family: Raleway;
	src: url('../fonts/Raleway-Light.ttf');
	font-weight: 300;
	font-style: normal}

@font-face
	{font-family: Raleway;
	src: url('../fonts/Raleway-Regular.ttf');
	font-weight: 400;
	font-style: normal}

@font-face
	{font-family: Raleway;
	src: url('../fonts/Raleway-Medium.ttf');
	font-weight: 500;
	font-style: normal}

@font-face
	{font-family: Raleway;
	src: url('../fonts/Raleway-SemiBold.ttf');
	font-weight: 600;
	font-style: normal}

@font-face
	{font-family: Roboto;
	src: url('../fonts/Roboto-Light.ttf');
	font-weight: 300;
	font-style: normal}

@font-face
	{font-family: Roboto;
	src: url('../fonts/Roboto-Regular.ttf');
	font-weight: 400;
	font-style: normal}

@font-face
	{font-family: Roboto;
	src: url('../fonts/Roboto-Medium.ttf');
	font-weight: 500;
	font-style: normal}

@font-face
	{font-family: 'Source Sans Pro';
	src: url('../fonts/SourceSansPro-Regular.ttf');
	font-weight: 400;
	font-style: normal}

*
	{margin: 0;
	padding: 0}

html
	{--azul-claro: #3f96ed;
	--azul-oscuro: #0074e8;
	--blanco: #fff;
	--gris-muy-claro: #f5f5f5;
	--gris-claro: #ccc;
	--gris-intermedio: #c0c0c0;
	--gris-oscuro: #999;
	--gris-muy-oscuro: #777;
	--negro: #333}

body
	{background: var(--blanco);
	color: var(--negro);
	font-family: Roboto, Arial, Verdana, Tahoma, sans-serif;
	font-weight: 300}

#barraSuperior
	{background: var(--blanco);
	border-bottom: 1px solid var(--gris-claro)}

#barraSuperior > div:nth-child(2)
	{font-family: Raleway, Arial, Verdana, Tahoma, sans-serif;
	font-weight: 600}

.cotizacion div:last-child
	{font-weight: 500}

#barraSuperior .cotizacion.desactualizado div
	{color: red}

#barraSuperior > div:last-child
	{color: #aaa}

header
	{background: #eee;
	font-family: Raleway, Arial, Verdana, Tahoma, sans-serif;
	font-size: 0.75rem;
	padding: 1.5rem 0;
	text-align: center;
	text-transform: uppercase}

/* En Chrome el comando copy no funciona si el ancho y/o el alto tienen valor cero */
header textarea
	{background: none;
	border: 0;
	color: transparent;
	height: 1px;
	resize: none;
	width: 1px}

header img
	{margin-bottom: 0.5rem}

#imagen
	{background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	border-top: 3px solid var(--gris-claro);
	border-bottom: 3px solid var(--gris-claro);
	display: flex}

section
	{justify-content: center}

section + section
	{border-top: 1px solid #e5e5e5}

section:nth-child(odd)
	{background: var(--gris-muy-claro)}

section:nth-child(even)
	{background: var(--blanco)}

section:not(:last-child)
	{align-items: center;
	display: grid}

section:last-child
	{display: flex}

section:last-child img
	{width: 1.25rem}

h1
	{color: var(--gris-muy-oscuro);
	font-family: Raleway, Arial, Verdana, Tahoma, sans-serif;
	font-weight: 300}

h1 span
	{font-weight: 500}

section p
	{line-height: 1.5}

ul
	{list-style: none;
	padding-left: 0.75rem}

ul li
	{background-image: url('../img/visto.svg');
	background-position: left center;
	background-repeat: no-repeat;
	background-size: 1rem 1rem;
	padding-left: 1.5rem}

ul li + li
	{margin-top: 0.5rem}

label
	{color: var(--gris-muy-oscuro);
	font-size: 0.75rem}

input,
form textarea
	{background: #fafafa;
	border: 1px solid var(--gris-intermedio);
	font-family: 'Source Sans Pro', Consolas, 'Lucida Console', monospace;
	font-size: 1rem;
	margin: 0.25rem 0 1rem;
	padding: 0.5rem}

input:focus,
form textarea:focus
	{border-color: var(--azul-oscuro)}

input.error,
textarea.error
	{border-color: #ff7946}

input[disabled],
textarea[disabled]
	{color: var(--gris-muy-oscuro)}

form textarea
	{height: 10rem;
	resize: vertical}

label + div
	{color: red;
	font-size: 0.75rem}

form > div:last-child
	{text-align: center}

button
	{background: var(--azul-claro);
	border: 0;
	color: var(--blanco);
	font-family: Raleway, Arial, Verdana, Tahoma, sans-serif;
	padding: 0.5rem 1rem;
	text-transform: uppercase}

button[disabled],
button[disabled]:hover
	{background: var(--gris-oscuro)}

/* Contenedor de los datos de la empresa (domicilio, teléfono y correo electrónico) */
section:last-child > div > div > div
	{align-items: start;
	display: grid;
	grid-gap: 1rem 0.5rem;
	grid-template-columns: repeat(2, max-content)}

a
	{color: var(--negro);
	text-decoration: none}

#domicilio div + *
	{margin-top: 0.5rem}

/* Enlace "VER EN EL MAPA" */
#domicilio a
	{color: var(--azul-oscuro);
	display: block;
	font-family: Raleway, Arial, Verdana, Tahoma, sans-serif;
	font-size: 0.75rem;
	text-transform: uppercase}

#telefonos div
	{display: block}

#telefonos div + div
	{margin-top: 0.5rem}

#telefonos span
	{color: #888}

#qr
	{align-items: center;
	background: rgba(255, 255, 255, .9);
	cursor: pointer;
	display: none;
	flex-direction: column;
	justify-content: center;
	left: 0;
	position: fixed;
	height: 100%;
	top: 0;
	width: 100vw}

#qr img
	{margin-bottom: 1.5rem}

#qr p
	{text-align: center}

#qr p + p
	{margin-top: 0.5rem}

#notificacion
	{display: none;
	position: fixed;
	text-align: center;
	top: 1rem;
	width: 100%}

#notificacion > div
	{align-items: center;
	border-style: solid;
	border-width: 1px;
	cursor: pointer;
	display: inline-flex;
	padding: 0.5rem 1.25rem}

#notificacion.informacion > div
	{background-color: rgba(125, 150, 160, .95);
	border-color: #5f7d8c}

#notificacion.exito > div
	{background-color: rgba(40, 170, 160, .95);
	border-color: #009788}

#notificacion.error > div
	{background-color: rgba(255, 120, 70, .95);
	border-color: #ff5607}

#notificacion div div:first-child
	{background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	display: block;
	height: 24px;
	margin-right: 0.5rem;
	width: 24px}

#notificacion.informacion div div:first-child
	{background-image: url('../img/informacion.svg')}

#notificacion.exito div div:first-child
	{background-image: url('../img/exito.svg')}

#notificacion.error div div:first-child
	{background-image: url('../img/error.svg')}

#notificacion div div:last-child
	{color: var(--blanco);
	font-family: Raleway, Arial, Verdana, Tahoma, sans-serif;
	font-size: 0.75rem;
	font-weight: 600}

#opcionesLogos
	{display: none}