html
	{font-size: 1.17vw}

@media (max-width: 1366px) and (max-height: 768px)
{
	html
		{font-size: 16px}
}

#barraSuperior
	{align-items: center;
	display: flex;
	font-size: 0.75rem;
	padding: 0.5rem 1rem}

#barraSuperior img
	{width: 1rem}

#barraSuperior > div:nth-child(2)
	{margin-left: 0.5rem}

.cotizacion div
	{cursor: default; /* Flecha en lugar de cursor de texto */
	display: inline-block}

.cotizacion div:first-child
	{border-left: 1px dotted var(--gris-intermedio);
	color: var(--gris-oscuro);
	margin-left: 0.75rem;
	padding-left: 0.75rem}

.cotizacion div:last-child
	{margin-left: 0.25rem}

.cotizacion:hover div
	{color: var(--azul-oscuro)}

#barraSuperior > div:last-child
	{flex: 1;
	text-align: right}

header img
	{height: 100px}

@media (max-width: 1366px)
{
	#imagen
		{background-image: url('../img/trigo-1366.jpg')}
}

@media (min-width: 1367px) and (max-width: 1920px)
{
	#imagen
		{background-image: url('../img/trigo-1920.jpg')}
}

@media (min-width: 1921px)
{
	#imagen
		{background-image: url('../img/trigo-3840.jpg')}
}

#imagen
	{align-items: center;
	height: 15rem;
	justify-content: space-around}

#imagen div
	{display: none}

#imagen picture
	{cursor: help}

section
	{padding: 2rem 1rem}

section:not(:last-child)
	{grid-template-columns: max-content 80ch}

section > img
	{grid-row: 1 / 3;
	margin-right: 2rem;
	width: 5rem}

h1 + p,
h1 + ul
	{margin-top: 0.5rem}

/* 5rem: <img>, 2rem: margin-right de <img>, 80ch: <p> y <ul> */
section:last-child > div
	{width: calc(5rem + 2rem + 80ch)}

/* Para separar el formulario y los datos del encabezado */
section:last-child > div > div
	{align-items: start;
	display: flex;
	flex-direction: row;
	justify-content: stretch;
	margin-top: 1rem}

section:last-child > div > div > div
	{margin-left: 3rem}

#telefono img,
#emailEmpresa img
	{margin-left: 0.5rem;
	opacity: .75;
	vertical-align: middle;
	visibility: hidden}

#telefono:hover img,
#emailEmpresa:hover img
	{cursor: pointer;
	visibility: visible}

#telefono img:hover,
#emailEmpresa img:hover
	{opacity: 1}

a:hover,
#compartir:hover
	{color: var(--azul-oscuro)}

form
	{display: grid;
	grid-template-columns: auto max-content;
	width: 100%}

input,
form textarea
	{grid-column: span 2}

form > div:last-child
	{grid-column: span 2}

button:hover
	{background: var(--azul-oscuro);
	cursor: pointer}

#compartir
	{cursor: pointer}

#qr p
	{font-size: 1.25rem}

/* Tecla Esc */
#qr span
	{background: var(--gris-muy-claro);
	border: 1px solid var(--gris-intermedio);
	border-radius: 4px;
	color: var(--gris-muy-oscuro);
	padding: 0.25rem 0.5rem}