@charset "UTF-8";
/* CSS document */
/* Descripcion: estilo para Blue american
Autor: Omar De Luna
actualización: junio 2013 */


img {
	border: 0;
}

* {
	margin: 0;
	padding: 0;
	font-family: 'Oswald', Helvetica, Arial, Verdana, sans-serif;
}

a,
li,
input {
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

body {
	background: #EEECEC;
}

#wrapper {
	width: 990px;
	margin: auto;
	padding: 0 15px;
}

#logo {
	position: relative;
	top: -20px;
	z-index: 9;
}

#logo-principal {
	position: absolute;
	top: 70px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 9;
}

#top {
	width: 100%;
	height: 50px;
	background: rgba(87, 89, 91, 0.90);
	text-align: center;

	position: sticky;
	top: 0;
	z-index: 1000;
}

#top>ul {
	display: flex;
	justify-content: center;
	height: 50px;
	margin: 0;
	padding: 0;
	list-style: none;
}

#top>ul>li {
	display: block;
	position: relative;
}

#top>ul>li>a,
#top .menu-desplegable-boton {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 50px;
	box-sizing: border-box;

	font-size: 17px;
	color: #fff;
	font-weight: 400;
	padding: 0 15px;
	border: 0;
	background: transparent;
	cursor: pointer;
}

#top>ul>li:hover,
#top>ul>li.active {
	background: #C72029;
}

#top .menu-flecha {
	margin-left: 7px;
	font-size: 12px;
	transition: transform 0.2s ease;
}

#top .submenu {
	display: none;
	position: absolute;
	top: 50px;
	left: 0;
	min-width: 285px;
	height: auto;
	margin: 0;
	padding: 6px 0;
	list-style: none;
	text-align: left;
	background: #57595b;
	box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
}

#top .submenu li,
#top .submenu a {
	display: block;
	width: 100%;
	box-sizing: border-box;
}

#top .submenu a {
	padding: 11px 18px;
	color: #fff;
	font-size: 15px;
	line-height: 21px;
	text-align: left;
}

#top .submenu a:hover,
#top .submenu a:focus {
	background: #C72029;
}

#top .menu-desplegable:hover>.submenu,
#top .menu-desplegable:focus-within>.submenu,
#top .submenu.submenu-abierto {
	display: block;
}

#top .menu-desplegable:hover .menu-flecha,
#top .menu-desplegable:focus-within .menu-flecha,
#top .menu-desplegable-boton[aria-expanded="true"] .menu-flecha {
	transform: rotate(180deg);
}

#header {
	width: 100%;
	height: 250px;
	text-align: center;
}

#header2 {
	width: 100%;
	height: 250px;
}

#header3 {
	width: 100%;
	height: 250px;
}


#container {
	width: 990px;
	padding: 40px 0;
	margin: auto;
	text-align: center;
}

img.levanta:hover {
	-ms-transform: scale(1.1, 1.1) translate(0, 5px);
	/* IE 9 */
	-webkit-transform: scale(1.1, 1.1) translate(0, 5px);
	/* Chrome, Safari, Opera */
	transform: scale(1.1, 1.1, ) translate(0, 5px);
	-moz-transform: scale(1.1, 1.1) translate(0, 5px);
	-o-transform: scale(1.1, 1.1) translate(0, 5px);
}



h1 {
	font-size: 60px;
	line-height: 60px;
	color: #C72029;
	font-weight: 700;
	margin-bottom: 15px;
}

h2 {
	font-size: 36px;
	line-height: 45px;
	color: #fff;
	font-weight: 700;
	text-align: left;
}

h3 {
	font-size: 24px;
	line-height: 30px;
	color: #57595b;
	font-weight: 700;
}

h4 {
	font-size: 22px;
	line-height: 30px;
	color: #fff;
	font-weight: 700;
}

h5 {
	font-size: 25px;
	line-height: 30px;
	color: #C72029;
	font-weight: 700;
	margin-bottom: 20px;
	text-align: left;
}

h6 {
	font-size: 23px;
	line-height: 35px;
	background: #C72029;
	color: #fff;
	font-weight: 700;
	margin-bottom: 20px;
	text-align: center;
	display: block;
	padding: 5px 0;
}


p {
	font-size: 14px;
	line-height: 20px;
	color: #333;
	font-weight: 400;
}

p.grande {
	font-family: 'Roboto', Helvetica, Arial, Verdana, sans-serif;
	font-size: 18px;
	line-height: 25px;
	color: #333;
	font-weight: 300;
	padding: 0 200px;
}


a {
	font-size: 14px;
	line-height: 20px;
	color: #cc222a;
	text-decoration: none;
}


.cleare {
	display: block;
	clear: both;
}

#footer {
	width: 100%;
	text-align: center;
	background: #57595b;
	height: 170px;
	border-top: 3px solid #D12A2E;
}

#footer2 {
	width: 100%;
	height: 60px;
	background: #000000;
	margin-top: 13px;
}

#foo1 {
	width: auto;
	height: 60px;
	float: left;
	text-align: left;
}

#foo2 {
	width: auto;
	height: 60px;
	float: right;
	text-align: right;
}

#foo2 p {
	font-family: 'Roboto', Helvetica, Arial, Verdana, sans-serif;
	font-size: 12px;
	line-height: 60px;
	color: #fff;
	font-weight: 300;
}


#colum {
	width: 200px;
	height: 300px;
	float: left;
	margin-right: 15px;
	background: transparent;
	margin-bottom: 15px;
}

#colum2 {
	width: 345px;
	height: 300px;
	float: left;
	background: #fff;
}

.bkg1 {
	background: #fff;
}

.bkg2 {
	background: #57595b;
}

.bkg3 {
	background: #D12A2E;
}


#link {
	width: 200px;
	height: 145px;
	margin-bottom: 10px;
}


/*PRODUCTOS------------------------------------*/

#seccion {
	width: 100%;
	background: #d8d7d7;
}

#catalogo {
	width: 310px;
	float: left;
	margin-right: 20px;
	margin-bottom: 15px;
}

#portada {
	width: 170px;
	float: left;
	margin-right: 10px;
	-webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
	box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

#descripcion {
	width: 130px;
	float: left;
}

#descripcion p {
	font-family: 'Roboto', Helvetica, Arial, Verdana, sans-serif;
	font-size: 12px;
	line-height: 16px;
	color: #333;
	font-weight: 300;
	text-align: left;
}

#guias {
	width: 175px;
	height: 226px;
	float: left;
	margin-right: 15px;
	margin-bottom: 15px;
	-webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
	box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

a.cat:hover {
	opacity: 0.7;
}


/*PRODUCTOS------------------------------------*/


#sucursal {
	width: 227px;
	height: 245px;
	float: left;
	margin-right: 20px;
	margin-bottom: 30px
}

#sucursal h5 {
	font-size: 24px;
	line-height: 30px;
	color: #C72029;
	font-weight: 700;
	padding-bottom: 15px;
	margin-bottom: 15px;
	text-align: left;
	border-bottom: 1px solid #333;
}

#sucursal p {
	font-family: 'Roboto', Helvetica, Arial, Verdana, sans-serif;
	font-size: 14px;
	line-height: 21px;
	color: #333;
	font-weight: 300;
	text-align: left;
}

#sucursal a {
	font-family: 'Roboto', Helvetica, Arial, Verdana, sans-serif;
	font-size: 13px;
	line-height: 21px;
	color: #000;
	font-weight: 400;
	text-align: left;
	text-decoration: none;
}


/*historia------------------------------------*/


#historia {
	width: 197px;
	height: auto;
	float: left;
	background: #fff;
	margin-right: 20px;
	margin-bottom: 30px;
	padding: 15px;
	text-align: left;
}

#historia p {
	font-family: 'Roboto', Helvetica, Arial, Verdana, sans-serif;
	font-size: 14px;
	line-height: 21px;
	color: #333;
	font-weight: 300;
	text-align: left;
}


/*galeria------------------------------------*/

#galeria {
	width: 990px;
	height: auto;
	margin-bottom: 20px;
}

#galeria img {
	float: left;
	margin: 0 15px 15px 0;
	border: #c2c2c2 solid 4px;
}

.campo {
	width: 500px;
	height: 41px;
	background: #57595b;
	font-family: 'Roboto', Helvetica, Arial, Verdana, sans-serif;
	font-size: 12px;
	line-height: 41px;
	color: #fff;
	border: 0;
	padding: 5px;
	outline: none;
	margin-bottom: 10px;
	text-align: center;
}

.campo:focus {
	background: #d12a2e;
	color: #fff;
}


/*VIDEOS------------------------------------*/

.video {
	width: 46%;
	margin: 20px 2%;
	float: left;
}

.video iframe {
	width: 100%;
	height: 350px;
}


/* Menu movil */

#menu-movil {
	display: none;
}


@media only screen and (min-width:0px) and (max-width:767px) {
	#wrapper {
		width: 100%;
		margin: auto;
		padding: 0;
	}

	#container {
		width: 90%;
		padding: 40px 5%;
		margin: auto;
		text-align: center;
	}

	#top {
		height: 50px;
		position: sticky;
		top: 0;
		z-index: 1000;
	}

	#menu-movil {
		display: block;
		position: absolute;
		right: 15px;
		top: 5px;
		width: 40px;
		height: 40px;
		padding: 0;
		border: 0;
		background: transparent;
		color: #fff;
		font-size: 28px;
		line-height: 40px;
		cursor: pointer;
		z-index: 1003;
	}

	#top>ul {
		display: none !important;
		position: absolute;
		top: 50px;
		left: 0;
		width: 100%;
		margin: 0;
		padding: 0;
		background: #57595b;
		z-index: 1002;
	}

	#top>ul.menu-abierto {
		display: block !important;
	}

	#top>ul>li {
		display: block !important;
		width: 100%;
		margin: 0;
		padding: 0;
		background: #57595b;
	}

	#top>ul>li.active {
		background: #C72029;
	}

	#top>ul>li>a,
	#top .menu-desplegable-boton {
		display: block !important;
		width: 100%;
		padding: 0;
		height: 45px;
		line-height: 45px;
		text-align: center;
		box-sizing: border-box;
	}

	#top .submenu {
		display: none !important;
		position: static;
		width: 100%;
		min-width: 0;
		padding: 0;
		box-shadow: none;
		background: #57595b;
	}

	#top .submenu.submenu-abierto {
		display: block !important;
	}

	#top .submenu li,
	#top .submenu a {
		width: 100%;
	}

	#top .submenu a {
		padding: 11px 18px;
		font-size: 14px;
		line-height: 20px;
		text-align: center;
	}

	h1 {
		font-size: 45px;
		line-height: 45px;
		color: #C72029;
		font-weight: 700;
		margin-bottom: 15px;
	}

	p.grande {
		font-family: 'Roboto', Helvetica, Arial, Verdana, sans-serif;
		font-size: 16px;
		line-height: 23px;
		color: #333;
		font-weight: 300;
		padding: 0 40px;
	}

	#colum {
		width: 200px;
		height: 300px;
		float: none;
		margin-right: 15px;
		background: transparent;
		margin-bottom: 15px;
		display: inline-table;
	}

	#colum2 {
		width: 300px;
		height: auto;
		float: none;
		background: #fff;
		display: inline-table;
	}


	.quitariphone {
		display: none;
	}

	.campo {
		width: 80%;
		height: 41px;
		background: #57595b;
		font-family: 'Roboto', Helvetica, Arial, Verdana, sans-serif;
		font-size: 12px;
		line-height: 41px;
		color: #fff;
		border: 0;
		padding: 5px;
		outline: none;
		margin-bottom: 10px;
		text-align: center;
	}

	#catalogo {
		width: 300px;
		float: left;
		margin-right: 10px;
		margin-bottom: 15px;
	}


	#descripcion {
		width: 110px;
		float: left;
	}


	/*VIDEOS------------------------------------*/

	.video {
		width: 100%;
		margin: 10px 0%;
		float: left;
	}

	.video iframe {
		width: 100%;
		height: 300px;
	}



}


@media only screen and (min-width:768px) and (max-width:1023px) {

	#wrapper {
		width: 100%;
		margin: auto;
		padding: 0;
	}

	#container {
		width: 90%;
		padding: 40px 5%;
		margin: auto;
		text-align: center;
	}

}

/* Sucursales: agrupadas por estado y municipio */
.sucursales-container {
	text-align: left !important;
}

.estado-sucursales {
	margin-bottom: 55px;
}

.estado-sucursales:last-child {
	margin-bottom: 15px;
}

.estado-titulo {
	margin: 0 0 26px;
	padding-bottom: 10px;
	border-bottom: 2px solid #c72029;
	color: #57595b;
	font-size: 30px;
	line-height: 1.1;
	font-weight: 700;
	text-transform: uppercase;
}

.municipio-sucursales + .municipio-sucursales {
	margin-top: 32px;
}

.municipio-sucursales h3 {
	margin: 0 0 18px;
	color: #57595b;
	font-size: 21px;
	font-weight: 400;
	line-height: 1.2;
}

.sucursales-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}

.tarjeta-sucursal {
	display: flex;
	flex-direction: column;
	min-height: 205px;
	padding: 22px;
	border: 1px solid #ddd;
	border-top: 4px solid #c72029;
	box-sizing: border-box;
	background: #fff;
}

.tarjeta-sucursal h4 {
	margin: 0 0 15px;
	padding-bottom: 12px;
	border-bottom: 1px solid #333;
	color: #c72029;
	font-size: 22px;
	line-height: 1.2;
	font-weight: 700;
	text-transform: uppercase;
}

.tarjeta-sucursal p {
	margin: 0;
	font-family: 'Roboto', Helvetica, Arial, Verdana, sans-serif;
	font-size: 14px;
	line-height: 21px;
	font-weight: 300;
	color: #333;
}

.tarjeta-sucursal p span {
	color: #c72029;
}

.correo-sucursal {
	color: #222;
	font-size: 13px;
	text-decoration: none;
}

.sitio-web-contenedor {
	display: flex;
	align-items: center;
	gap: 7px;
	margin-top: 10px;
}

.sitio-web-sucursal {
	color: #c72029;
	font-size: 13px;
	font-weight: 700;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.sitio-web-sucursal:hover,
.sitio-web-sucursal:focus {
	color: #8f141a;
}

.info-sucursal {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	border: 1px solid #57595b;
	border-radius: 50%;
	color: #57595b;
	font-family: Arial, sans-serif;
	font-size: 11px;
	font-weight: 700;
	font-style: italic;
	line-height: 1;
	cursor: help;
}

.info-tooltip {
	position: absolute;
	bottom: calc(100% + 9px);
	left: 50%;
	z-index: 5;
	width: 205px;
	padding: 9px 11px;
	border-radius: 3px;
	border: 1px solid #e1e1e1;
	background: #fff;
	box-shadow: 0 3px 10px rgba(0, 0, 0, .16);
	color: #c72029;
	font-family: 'Roboto', Helvetica, Arial, Verdana, sans-serif;
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
	line-height: 16px;
	text-align: center;
	visibility: hidden;
	opacity: 0;
	transform: translate(-50%, 4px);
	transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
	pointer-events: none;
}

.info-sucursal:hover .info-tooltip,
.info-sucursal:focus .info-tooltip {
	visibility: visible;
	opacity: 1;
	transform: translate(-50%, 0);
}

.acciones-sucursal {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: auto;
	padding-top: 16px;
}

.acciones-sucursal > a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.acciones-sucursal > a > img {
	display: block;
	transition: transform .2s ease;
}

.acciones-sucursal > a:not(.mapa-icono) img {
	width: 42px;
	height: 42px;
	object-fit: contain;
}

.mapa-icono img {
	width: 36px;
	height: 36px;
	object-fit: contain;
}

.acciones-sucursal > a:hover img,
.acciones-sucursal > a:focus img {
	transform: scale(1.12);
}

/* Separación visual entre el directorio de sucursales y la información institucional. */
.sucursales-container {
	padding-bottom: 15px !important;
}

.pagina-sucursales .sucursales-informacion {
	position: relative;
	margin-top: 25px;
	padding-top: 35px;
	border-top: 2px solid #c72029;
}

.pagina-sucursales .sucursales-informacion::before {
	position: absolute;
	top: -13px;
	left: 50%;
	padding: 0 16px;
	background: #eeecec;
	color: #c72029;
	content: "NUESTRA CAPACIDAD";
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .08em;
	transform: translateX(-50%);
}

@media only screen and (max-width: 767px) {
	.sucursales-grid {
		grid-template-columns: 1fr;
	}

	.estado-titulo {
		font-size: 26px;
	}

	.tarjeta-sucursal {
		min-height: 0;
	}
}

@media only screen and (min-width: 768px) and (max-width: 1023px) {
	.sucursales-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Navegacion principal compartida por todas las paginas del sitio. */
.pagina-navbar #top {
	height: 82px;
	box-sizing: border-box;
	border-bottom: 2px solid #c72029;
	background: rgba(87, 89, 91, 0.90);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12);
}

.pagina-navbar .navbar-logo {
	position: absolute;
	top: 50%;
	left: max(34px, calc(25vw - 244px));
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 68px;
	height: 66px;
	transform: translateY(-50%);
	transition: transform 0.32s cubic-bezier(0.2, 0.9, 0.25, 1.35), filter 0.32s ease;
}

.pagina-navbar .navbar-logo:hover,
.pagina-navbar .navbar-logo:focus-visible {
	filter: drop-shadow(0 5px 9px rgba(0, 0, 0, 0.32));
	transform: translateY(-50%) scale(1.12);
}

.pagina-navbar .navbar-logo:focus-visible {
	border-radius: 8px;
	outline: 2px solid #fff;
	outline-offset: 4px;
}

.pagina-navbar .navbar-logo img {
	display: block;
	width: 68px;
	height: 66px;
	object-fit: contain;
}

@media (prefers-reduced-motion: reduce) {
	.pagina-navbar .navbar-logo {
		transition: none;
	}
}

.pagina-navbar #top > ul {
	height: 82px;
	gap: 6px;
}

.pagina-navbar #top > ul > li {
	background: transparent;
}

.pagina-navbar #top > ul > li > a,
.pagina-navbar #top .menu-desplegable-boton {
	position: relative;
	height: 82px;
	padding: 0 20px;
	color: rgba(255, 255, 255, 0.9);
	font-family: Impact, 'Arial Narrow', 'Oswald', sans-serif;
	font-size: 18px;
	line-height: 1;
	font-weight: 400;
	letter-spacing: 0.045em;
	font-stretch: condensed;
	white-space: nowrap;
}

/* Calculadora de Arcotecho */
.pagina-calculadora-arcotecho {
	margin: 0;
	background: #f3f4f5;
	color: #333;
	font-family: 'Roboto', Arial, sans-serif;
}

.arcotecho-hero h1 {
	max-width: 820px;
}

.calculadora-arcotecho {
	display: grid;
	grid-template-columns: 0.72fr 1.28fr;
	gap: 46px;
	padding: 52px;
	background: #fff;
	box-shadow: 0 18px 46px rgba(26, 28, 30, 0.14);
}

.calculadora-arcotecho h2 {
	margin: 0 0 18px;
	color: #000000;
	font-family: 'Oswald', Arial, sans-serif;
	font-size: 34px;
	line-height: 1.18;
	text-transform: uppercase;
}

.calculadora-arcotecho-intro p {
	margin: 0;
	font-size: 17px;
	line-height: 1.7;
}

.calculadora-arcotecho-formulario {
	display: grid;
	gap: 22px;
}

.selector-acrilicas {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 18px 20px;
	background: #f1f2f3;
}

.selector-acrilicas-titulo,
.selector-acrilicas-estado {
	display: block;
}

.selector-acrilicas-titulo {
	margin-bottom: 4px;
	color: #000000;
	font-size: 15px;
	font-weight: 700;
}

.selector-acrilicas-estado {
	color: #57595b;
	font-size: 13px;
}

.interruptor {
	position: relative;
	display: inline-flex;
	flex: 0 0 auto;
	cursor: pointer;
}

.interruptor input {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	opacity: 0;
}

.interruptor-control {
	position: relative;
	display: block;
	width: 54px;
	height: 30px;
	border-radius: 30px;
	background: #b9bdc0;
	transition: background 0.2s ease;
}

.interruptor-control::after {
	content: "";
	position: absolute;
	top: 4px;
	left: 4px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.22);
	transition: transform 0.2s ease;
}

.interruptor input:checked + .interruptor-control {
	background: #c72029;
}

.interruptor input:checked + .interruptor-control::after {
	transform: translateX(24px);
}

.interruptor input:focus-visible + .interruptor-control {
	box-shadow: 0 0 0 3px rgba(199, 32, 41, 0.2);
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.campos-dimensiones {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}

.campo-acrilicas[hidden],
.mensaje-claro[hidden],
.resultado-arcotecho[hidden],
.resumen-acrilicas[hidden],
.calculadora-error[hidden] {
	display: none;
}

.campo-acrilicas {
	padding: 18px 20px;
	border-left: 4px solid #c72029;
	background: #f7f7f7;
}

.campo-acrilicas input {
	margin-top: 9px;
}

.mensaje-claro {
	margin: -8px 0 0;
	padding: 12px 15px;
	font-size: 14px;
	line-height: 1.5;
}

.mensaje-claro-recomendacion {
	background: #eef3f6;
	color: #57595b;
}

.mensaje-claro-recomendacion a {
	color: #b51c24;
	font-weight: 700;
	text-decoration: underline;
}

.mensaje-claro-error {
	background: #fff0f0;
	color: #a91820;
	font-weight: 700;
}

.campo-flecha {
	padding-top: 4px;
}

.campo-flecha-encabezado,
.campo-flecha-limites {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.campo-flecha-encabezado label {
	color: #000000;
	font-size: 15px;
	font-weight: 700;
}

.campo-flecha-valor {
	display: flex;
	align-items: center;
	gap: 7px;
	color: #c72029;
	font-family: 'Oswald', Arial, sans-serif;
	font-size: 22px;
	font-weight: 700;
}

.campo-flecha-valor input {
	width: 96px;
	height: 42px;
	box-sizing: border-box;
	padding: 0 8px;
	border: 1px solid #cfd2d4;
	border-radius: 2px;
	background: #fff;
	color: #c72029;
	font: 700 21px 'Oswald', Arial, sans-serif;
	text-align: right;
}

.campo-flecha-valor input:focus {
	border-color: #c72029;
	box-shadow: 0 0 0 3px rgba(199, 32, 41, 0.12);
	outline: 0;
}

.campo-flecha input[type="range"] {
	--valor-slider: 28.57%;
	width: 100%;
	height: 6px;
	margin: 18px 0 8px;
	border-radius: 6px;
	background: linear-gradient(to right, #c72029 0 var(--valor-slider), #d6d8da var(--valor-slider) 100%);
	appearance: none;
	cursor: pointer;
}

.campo-flecha input[type="range"]::-webkit-slider-thumb {
	width: 22px;
	height: 22px;
	border: 3px solid #fff;
	border-radius: 50%;
	background: #c72029;
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.35);
	appearance: none;
}

.campo-flecha input[type="range"]::-moz-range-thumb {
	width: 17px;
	height: 17px;
	border: 3px solid #fff;
	border-radius: 50%;
	background: #c72029;
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.35);
}

.campo-flecha-limites {
	color: #57595b;
	font-size: 12px;
}

.altura-flecha {
	margin: 10px 0 0;
	color: #57595b;
	font-size: 13px;
}

.boton-calcular-arcotecho {
	min-height: 56px;
	padding: 14px 24px;
	border: 0;
	border-radius: 2px;
	background: #c72029;
	color: #fff;
	font: 700 16px 'Oswald', Arial, sans-serif;
	letter-spacing: 0.06em;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.2s ease;
}

.boton-calcular-arcotecho:hover,
.boton-calcular-arcotecho:focus-visible {
	background: #a91820;
	transform: translateY(-1px);
}

.resultado-arcotecho {
	grid-column: 1 / -1;
	padding-top: 38px;
	border-top: 1px solid #dedfe0;
}

.resultado-arcotecho-encabezado h2 {
	margin-bottom: 24px;
}

.resultado-arcotecho-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
}

.resultado-arcotecho-item {
	min-height: 122px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	box-sizing: border-box;
	padding: 20px;
	background: #f1f2f3;
}

.resultado-arcotecho-principal {
	grid-column: span 2;
	border-left: 5px solid #c72029;
}

.resultado-arcotecho-item span {
	margin-bottom: 8px;
	color: #57595b;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
}

.resultado-arcotecho-item strong {
	color: #000000;
	font-family: 'Oswald', Arial, sans-serif;
	font-size: clamp(27px, 3.2vw, 38px);
	line-height: 1.05;
	overflow-wrap: anywhere;
}

.resultado-arcotecho-item small {
	margin-top: 8px;
	color: #57595b;
	font-size: 13px;
}

.resultado-arcotecho-grid-ordenado {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.resultado-arcotecho-grid-ordenado .resultado-arcotecho-item {
	min-height: 112px;
	border-top: 3px solid transparent;
	transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.resultado-arcotecho-grid-ordenado .resultado-arcotecho-item:hover {
	border-top-color: #c72029;
	box-shadow: 0 10px 24px rgba(26, 28, 30, 0.12);
	transform: translateY(-2px);
}

.resultado-arcotecho-grid-ordenado .resultado-etiqueta-aclaracion {
	display: block;
	margin-top: 3px;
	color: #77797b;
	font: 600 10px/1.3 'Montserrat', Arial, sans-serif;
	text-transform: none;
}

.resumen-acrilicas {
	margin: 18px 0 0;
	color: #57595b;
	font-size: 14px;
	font-weight: 700;
}

.resultado-kr18 .resumen-acrilicas {
	font-weight: 400;
}

.resultado-kr18 .resumen-acrilicas strong,
.resultado-kr18 .resumen-acrilicas span {
	display: block;
}

.resultado-kr18 .resumen-acrilicas strong {
	margin-bottom: 5px;
	color: #c72029;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
}

.resultado-arcotecho .nota-calculadora {
	margin: 20px 0 0;
	color: #57595b;
	font-size: 13px;
	line-height: 1.55;
}

.mini-arcotecho-dato-fijo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 18px 20px;
	border-left: 4px solid #c72029;
	background: #f1f2f3;
}

.mini-arcotecho-dato-fijo div {
	display: flex;
	align-items: baseline;
	gap: 12px;
}

.mini-arcotecho-dato-fijo span {
	color: #57595b;
	font-size: 14px;
	font-weight: 700;
}

.mini-arcotecho-dato-fijo strong {
	color: #c72029;
	font-family: 'Oswald', Arial, sans-serif;
	font-size: 26px;
}

.mini-arcotecho-dato-fijo p {
	margin: 0;
	color: #57595b;
	font-size: 13px;
	text-align: right;
}

.arcotecho-mas-informacion {
	margin-top: 0;
}

@media only screen and (max-width: 900px) {
	.calculadora-arcotecho {
		grid-template-columns: 1fr;
		gap: 32px;
		padding: 38px;
	}

	.resultado-arcotecho-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.resultado-arcotecho-grid-ordenado {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media only screen and (max-width: 767px) {
	.calculadora-arcotecho {
		padding: 28px 22px;
	}

	.calculadora-arcotecho h2 {
		font-size: 29px;
	}

	.campos-dimensiones,
	.resultado-arcotecho-grid {
		grid-template-columns: 1fr;
	}

	.resultado-arcotecho-grid-ordenado {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 9px;
	}

	.resultado-arcotecho-principal {
		grid-column: auto;
	}

	.resultado-arcotecho-item {
		min-height: 108px;
	}

	.resultado-arcotecho-grid-ordenado .resultado-arcotecho-item {
		min-height: 104px;
		padding: 15px 13px;
	}

	.resultado-arcotecho-grid-ordenado .resultado-arcotecho-item span {
		font-size: 10px;
		line-height: 1.35;
	}

	.resultado-arcotecho-grid-ordenado .resultado-arcotecho-item strong {
		font-size: clamp(24px, 7vw, 29px);
		overflow-wrap: normal;
		word-break: normal;
	}

	.mini-arcotecho-dato-fijo {
		align-items: flex-start;
		flex-direction: column;
		gap: 8px;
	}

	.mini-arcotecho-dato-fijo p {
		text-align: left;
	}
}

.pagina-navbar #top > ul > li > a::after,
.pagina-navbar #top > ul > li > .menu-desplegable-boton::after {
	content: "";
	position: absolute;
	right: 20px;
	bottom: 0;
	left: 20px;
	height: 3px;
	background: #d52830;
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 0.22s ease;
}

.pagina-navbar #top > ul > li:hover > a::after,
.pagina-navbar #top > ul > li:hover > .menu-desplegable-boton::after,
.pagina-navbar #top > ul > li.active > a::after,
.pagina-navbar #top > ul > li.active > .menu-desplegable-boton::after,
.pagina-navbar #top > ul > li > a:focus-visible::after,
.pagina-navbar #top > ul > li > .menu-desplegable-boton:focus-visible::after {
	transform: scaleX(1);
}

.pagina-navbar #top > ul > li > a:hover,
.pagina-navbar #top .menu-desplegable-boton:hover,
.pagina-navbar #top > ul > li > a:focus-visible,
.pagina-navbar #top .menu-desplegable-boton:focus-visible {
	background: rgba(255, 255, 255, 0.07);
}

.pagina-navbar #top .submenu {
	top: 82px;
	left: 50%;
	padding: 8px 0;
	border-top: 3px solid #d52830;
	background: #57595b;
	transform: translateX(-50%);
}

@media only screen and (min-width: 1441px) {
	.pagina-navbar #top .submenu {
		display: block;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		translate: 0 -10px;
		transform-origin: top center;
		transition: opacity 0.2s ease, translate 0.24s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.24s;
	}

	.pagina-navbar #top .menu-desplegable:hover > .submenu,
	.pagina-navbar #top .menu-desplegable:focus-within > .submenu,
	.pagina-navbar #top .submenu.submenu-abierto {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		translate: 0 0;
		transition-delay: 0s;
	}

	.pagina-navbar #top > ul > li > a::after,
	.pagina-navbar #top > ul > li > .menu-desplegable-boton::after {
		bottom: 24px !important;
		height: 2px;
	}
}

.pagina-navbar #top .submenu a {
	padding: 12px 20px;
	font-family: Impact, 'Arial Narrow', 'Oswald', sans-serif;
	font-size: 15px;
	font-weight: 400;
	letter-spacing: 0.045em;
	font-stretch: condensed;
	text-align: center;
}

.pagina-navbar #top .submenu a:hover,
.pagina-navbar #top .submenu a:focus {
	background: #d52830;
}

.pagina-navbar .headerimg {
	top: 82px;
}

.pagina-navbar #logo-principal {
	top: 102px;
}

@media only screen and (max-width: 767px) {
	.pagina-navbar #top {
		height: 68px;
	}

	.pagina-navbar #menu-movil {
		top: 14px;
		font-family: 'Montserrat', Arial, sans-serif;
		font-size: 25px;
	}

	.pagina-navbar .navbar-logo,
	.pagina-navbar .navbar-logo img {
		width: 52px;
		height: 50px;
	}

	.pagina-navbar .navbar-logo {
		left: 22px;
	}

	.pagina-navbar #top > ul {
		top: 68px;
		height: auto;
		gap: 0;
		background: #57595b;
	}

	.pagina-navbar #top > ul > li > a,
	.pagina-navbar #top .menu-desplegable-boton {
		height: 50px;
		padding: 0;
		line-height: 50px;
	}

	.pagina-navbar #top > ul > li > a::after,
	.pagina-navbar #top > ul > li > .menu-desplegable-boton::after {
		right: 35%;
		left: 35%;
	}

	.pagina-navbar #top .submenu {
		top: auto;
		left: auto;
		padding: 0;
		border-top: 0;
		transform: none;
	}

	.pagina-navbar .headerimg {
		top: 68px;
	}

.pagina-navbar #logo-principal {
		top: 88px;
	}
}

/* Cambia al menú compacto antes de que el navbar de escritorio se comprima. */
@media only screen and (min-width: 768px) and (max-width: 1440px) {
	.pagina-navbar #top {
		height: 68px;
	}

	.pagina-navbar #menu-movil {
		display: block;
		position: absolute;
		top: 14px;
		right: 15px;
		z-index: 1003;
		width: 40px;
		height: 40px;
		padding: 0;
		border: 0;
		background: transparent;
		color: #fff;
		font-family: 'Montserrat', Arial, sans-serif;
		font-size: 25px;
		line-height: 40px;
		cursor: pointer;
	}

	.pagina-navbar .navbar-logo,
	.pagina-navbar .navbar-logo img {
		width: 52px;
		height: 50px;
	}

	.pagina-navbar .navbar-logo {
		left: 22px;
	}

	.pagina-navbar #top > ul {
		display: none !important;
		position: absolute;
		top: 68px;
		left: 0;
		width: 100%;
		height: auto;
		margin: 0;
		padding: 0;
		gap: 0;
		background: #57595b;
		z-index: 1002;
	}

	.pagina-navbar #top > ul.menu-abierto {
		display: block !important;
	}

	.pagina-navbar #top > ul > li {
		display: block !important;
		width: 100%;
		margin: 0;
		padding: 0;
		background: #57595b;
	}

	.pagina-navbar #top > ul > li > a,
	.pagina-navbar #top .menu-desplegable-boton {
		display: block !important;
		width: 100%;
		height: 50px;
		padding: 0;
		line-height: 50px;
		text-align: center;
	}

	.pagina-navbar #top > ul > li > a::after,
	.pagina-navbar #top > ul > li > .menu-desplegable-boton::after {
		right: 35%;
		left: 35%;
	}

	.pagina-navbar #top .submenu {
		display: none !important;
		position: static;
		width: 100%;
		min-width: 0;
		padding: 0;
		border-top: 0;
		background: #57595b;
		box-shadow: none;
		transform: none;
	}

	.pagina-navbar #top .submenu.submenu-abierto {
		display: block !important;
	}

	.pagina-navbar #top .submenu li,
	.pagina-navbar #top .submenu a {
		width: 100%;
	}

	.pagina-navbar #top .submenu a {
		padding: 11px 18px;
		font-size: 14px;
		line-height: 20px;
		text-align: center;
	}
}

@media only screen and (max-width: 1440px) {
	.pagina-navbar #top {
		box-sizing: border-box;
		border-bottom: 3px solid #c72029;
		background: rgba(87, 89, 91, 0.90);
	}

	.pagina-navbar #top::after {
		content: "GRUPO AZERO";
		position: absolute;
		top: 50%;
		left: 86px;
		color: rgba(255, 255, 255, 0.94);
		font-family: 'Oswald', Arial, sans-serif;
		font-size: 17px;
		font-weight: 700;
		letter-spacing: 0.1em;
		line-height: 1;
		transform: translateY(-50%);
		pointer-events: none;
	}

	.pagina-navbar #menu-movil {
		right: 18px;
		width: 42px;
		height: 42px;
		box-sizing: border-box;
		border: 1px solid rgba(255, 255, 255, .2);
		border-radius: 6px;
		background: #c72029;
		box-shadow: 0 3px 10px rgba(0, 0, 0, .2);
		font-size: 0;
		line-height: 0;
		transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
	}

	.icono-menu-movil {
		position: relative;
		display: block;
		width: 21px;
		height: 16px;
		margin: auto;
		background: linear-gradient(#fff, #fff) center / 100% 2px no-repeat;
		transition: background-size .18s ease;
	}

	.icono-menu-movil::before,
	.icono-menu-movil::after {
		position: absolute;
		left: 0;
		width: 21px;
		height: 2px;
		border-radius: 2px;
		background: #fff;
		content: "";
		transition: top .18s ease, bottom .18s ease, transform .18s ease;
	}

	.icono-menu-movil::before { top: 1px; }
	.icono-menu-movil::after { bottom: 1px; }
	#menu-movil[aria-expanded="true"] .icono-menu-movil { background-size: 0 2px; }
	#menu-movil[aria-expanded="true"] .icono-menu-movil::before { top: 7px; transform: rotate(45deg); }
	#menu-movil[aria-expanded="true"] .icono-menu-movil::after { bottom: 7px; transform: rotate(-45deg); }

	.pagina-navbar #menu-movil:hover,
	.pagina-navbar #menu-movil:focus-visible,
	.pagina-navbar #menu-movil[aria-expanded="true"] {
		background: #a91820;
		outline: 0;
	}

	.pagina-navbar #menu-movil:active {
		transform: scale(0.96);
	}

	.pagina-navbar #menu-movil:focus-visible {
		box-shadow: 0 0 0 3px rgba(255, 255, 255, .28), 0 3px 10px rgba(0, 0, 0, .2);
	}
}

/* Paneles de submenú: tarjetas compactas con entrada escalonada. */
@media only screen and (min-width: 768px) {
	.pagina-navbar #top .submenu {
		box-sizing: border-box;
		min-width: 330px;
		padding: 12px;
		border: 1px solid rgba(255, 255, 255, .12);
		border-top: 3px solid #d52830;
		border-radius: 0 0 10px 10px;
		background: linear-gradient(145deg, rgba(72, 74, 76, .90), rgba(48, 50, 52, .90));
		-webkit-backdrop-filter: blur(4px);
		backdrop-filter: blur(4px);
		box-shadow: 0 18px 38px rgba(0, 0, 0, .38);
	}

	.pagina-navbar #top .submenu li { overflow: hidden; }

	.pagina-navbar #top .submenu a {
		display: flex;
		align-items: center;
		gap: 12px;
		min-height: 52px;
		padding: 10px 12px;
		border-radius: 6px;
		font-family: 'Montserrat', Arial, sans-serif;
		font-size: 12px;
		font-weight: 700;
		letter-spacing: .025em;
		line-height: 1.4;
		text-align: left;
		transition: background .18s ease, transform .18s ease, color .18s ease;
	}

	.pagina-navbar #top .submenu a::before {
		content: "▦";
		display: grid;
		flex: 0 0 30px;
		width: 30px;
		height: 30px;
		place-items: center;
		border: .5px solid rgba(213, 40, 48, .65);
		border-radius: 8px;
		background: rgba(213, 40, 48, .14);
		color: #ff5961;
		font-size: 17px;
		line-height: 1;
		transition: background .18s ease, color .18s ease, transform .18s ease;
	}

	.pagina-navbar #submenu-nosotros a::before { content: "›"; font-size: 23px; }

	.pagina-navbar #top .submenu a:hover,
	.pagina-navbar #top .submenu a:focus-visible {
		transform: translateX(3px);
		background: rgba(255, 255, 255, .09);
		color: #fff;
	}

	.pagina-navbar #top .submenu a:hover::before,
	.pagina-navbar #top .submenu a:focus-visible::before {
		transform: scale(1.08);
		background: #d52830;
		color: #fff;
	}

	@media (prefers-reduced-motion: no-preference) {
		.pagina-navbar #top .submenu.submenu-abierto li,
		.pagina-navbar #top .menu-desplegable:hover > .submenu li,
		.pagina-navbar #top .menu-desplegable:focus-within > .submenu li {
			animation: submenuItemIn .24s both;
		}

		.pagina-navbar #top .submenu li:nth-child(2) { animation-delay: .025s; }
		.pagina-navbar #top .submenu li:nth-child(3) { animation-delay: .05s; }
		.pagina-navbar #top .submenu li:nth-child(4) { animation-delay: .075s; }
		.pagina-navbar #top .submenu li:nth-child(5) { animation-delay: .1s; }
	}
}

@keyframes submenuItemIn {
	from { opacity: 0; transform: translateY(-5px); }
	to { opacity: 1; transform: translateY(0); }
}

/* Calculadora de metros cuadrados a metros lineales */
.pagina-calculadora-lineales {
	margin: 0;
	background: #f3f4f5;
	color: #333;
	font-family: 'Roboto', Arial, sans-serif;
}

.herramientas-hero {
	min-height: 330px;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	padding: 130px max(6vw, 28px) 70px;
	background:
		linear-gradient(105deg, rgba(0, 0, 0, 0.97) 0%, rgba(87, 89, 91, 0.91) 60%, rgba(199, 32, 41, 0.82) 100%),
		url('../images/fondos/top.jpg') center 42% / cover no-repeat;
	color: #fff;
}

.herramientas-hero-contenido {
	width: min(900px, 100%);
	margin: 0 auto;
}

.herramientas-etiqueta,
.resultado-lineales-etiqueta {
	display: block;
	margin-bottom: 14px;
	color: #ef3a43;
	font-family: 'Oswald', Arial, sans-serif;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.16em;
}

.herramientas-hero h1 {
	max-width: 760px;
	margin: 0;
	color: #fff;
	font-family: 'Oswald', Arial, sans-serif;
	font-size: clamp(40px, 6vw, 68px);
	line-height: 1.05;
	text-align: left;
	text-transform: uppercase;
}

.herramientas-hero p {
	max-width: 620px;
	margin: 24px 0 0;
	color: rgba(255, 255, 255, 0.86);
	font-size: 19px;
	line-height: 1.55;
}

.herramientas-contenido {
	width: min(1120px, calc(100% - 40px));
	margin: -44px auto 70px;
	position: relative;
	z-index: 2;
}

.calculadora-lineales {
	display: grid;
	grid-template-columns: 0.85fr 1.15fr;
	gap: 46px;
	padding: 52px;
	background: #fff;
	box-shadow: 0 18px 46px rgba(26, 28, 30, 0.14);
}

.calculadora-lineales h2 {
	margin: 0 0 18px;
	color: #000000;
	font-family: 'Oswald', Arial, sans-serif;
	font-size: 34px;
	line-height: 1.18;
	text-transform: uppercase;
}

.calculadora-lineales-intro p {
	margin: 0;
	font-size: 17px;
	line-height: 1.7;
}

.calculadora-lineales-formulario {
	display: grid;
	gap: 22px;
}

.campo-calculadora label {
	display: block;
	margin-bottom: 9px;
	color: #000000;
	font-size: 15px;
	font-weight: 700;
}

.campo-calculadora select,
.campo-calculadora input {
	width: 100%;
	height: 54px;
	box-sizing: border-box;
	padding: 0 16px;
	border: 1px solid #cfd2d4;
	border-radius: 2px;
	background: #fff;
	color: #000000;
	font: 16px 'Roboto', Arial, sans-serif;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.campo-calculadora select:focus,
.campo-calculadora input:focus {
	border-color: #c72029;
	box-shadow: 0 0 0 3px rgba(199, 32, 41, 0.12);
	outline: 0;
}

.campo-con-unidad {
	position: relative;
}

.campo-con-unidad input {
	padding-right: 58px;
}

.campo-con-unidad span {
	position: absolute;
	top: 50%;
	right: 17px;
	color: #57595b;
	font-weight: 700;
	transform: translateY(-50%);
}

.campo-ayuda {
	display: block;
	margin-top: 7px;
	color: #57595b;
	font-size: 12px;
}

.boton-calcular-lineales {
	min-height: 56px;
	padding: 14px 24px;
	border: 0;
	border-radius: 2px;
	background: #c72029;
	color: #fff;
	font: 700 16px 'Oswald', Arial, sans-serif;
	letter-spacing: 0.06em;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.2s ease;
}

.boton-calcular-lineales:hover,
.boton-calcular-lineales:focus-visible {
	background: #a91820;
	transform: translateY(-1px);
}

.calculadora-error {
	margin: -5px 0 0;
	color: #a91820;
	font-size: 14px;
	font-weight: 700;
}

.resultado-lineales {
	grid-column: 1 / -1;
	padding: 30px 34px;
	border-left: 5px solid #c72029;
	background: #f2f3f4;
}

.resultado-lineales[hidden],
.calculadora-error[hidden] {
	display: none;
}

.resultado-lineales-etiqueta {
	margin-bottom: 8px;
}

.resultado-lineales strong {
	display: block;
	color: #000000;
	font-family: 'Oswald', Arial, sans-serif;
	font-size: clamp(27px, 4.5vw, 46px);
	line-height: 1.1;
	overflow-wrap: anywhere;
}

.resultado-lineales p {
	margin: 10px 0 0;
	color: #57595b;
	font-size: 15px;
}

.resultado-lineales .nota-calculadora {
	margin-top: 16px;
	font-size: 13px;
	line-height: 1.55;
}

.calculadora-mas-informacion {
	grid-column: 1 / -1;
	padding-top: 20px;
	border-top: 1px solid #dedfe0;
}

.calculadora-mas-informacion summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: #c72029;
	font-family: 'Oswald', Arial, sans-serif;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.08em;
	list-style: none;
	cursor: pointer;
}

.calculadora-mas-informacion summary::-webkit-details-marker {
	display: none;
}

.calculadora-mas-informacion summary::after {
	content: "+";
	font: 400 28px/1 'Roboto', Arial, sans-serif;
	transition: transform 0.2s ease;
}

.calculadora-mas-informacion[open] summary::after {
	transform: rotate(45deg);
}

.calculadora-mas-informacion:not([open]) > .mas-informacion-contenido {
	display: block;
}

.mas-informacion-contenido {
	max-height: 0;
	padding-top: 0;
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
	transition: max-height 0.35s ease, padding-top 0.35s ease, opacity 0.25s ease;
}

.calculadora-mas-informacion[open] .mas-informacion-contenido {
	max-height: 1400px;
	padding-top: 20px;
	opacity: 1;
	visibility: visible;
}

.mas-informacion-contenido h3 {
	margin: 0 0 10px;
	color: #000000;
	font-family: 'Oswald', Arial, sans-serif;
	font-size: 23px;
	text-transform: uppercase;
}

.arcotecho-mas-informacion .mas-informacion-contenido h3:not(:first-child) {
	margin-top: 26px;
}

.mas-informacion-contenido p {
	margin: 0;
	font-size: 15px;
	line-height: 1.65;
}

.mas-informacion-contenido p + p {
	margin-top: 15px;
}

.mas-informacion-contenido .formula-lineales {
	padding: 20px 24px;
	background: #e5e7e8;
	color: #000000;
	font-size: 20px;
	font-weight: 700;
	text-align: center;
}

.mas-informacion-contenido .nota-calculadora {
	color: #57595b;
	font-size: 14px;
}

/* Contenido explicativo e indexable para la calculadora de metros lineales. */
.contenido-seo-calculadora {
	margin-top: 34px;
	padding: 48px 52px;
	background: #fff;
	box-shadow: 0 12px 32px rgba(26, 28, 30, 0.1);
}

.contenido-seo-calculadora h2 {
	margin: 0 0 18px;
	color: #000000;
	font-family: 'Oswald', Arial, sans-serif;
	font-size: 34px;
	line-height: 1.18;
	text-transform: uppercase;
}

.contenido-seo-calculadora > p,
.contenido-seo-calculadora article p {
	margin: 0;
	color: #57595b;
	font-size: 16px;
	line-height: 1.7;
}

.contenido-seo-calculadora > p + p {
	margin-top: 14px;
}

.contenido-seo-ejemplos {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
	margin-top: 30px;
}

.contenido-seo-ejemplos article {
	padding: 24px;
	border-left: 4px solid #c72029;
	background: #f1f2f3;
}

.contenido-seo-calculadora h3 {
	margin: 0 0 10px;
	color: #000000;
	font-family: 'Oswald', Arial, sans-serif;
	font-size: 22px;
	line-height: 1.2;
	text-transform: uppercase;
}

.preguntas-frecuentes-lineales {
	margin-top: 38px;
	padding-top: 34px;
	border-top: 1px solid #dedfe0;
}

.preguntas-frecuentes-lineales h2 {
	margin-bottom: 24px;
}

.preguntas-frecuentes-lineales article + article {
	margin-top: 22px;
}

.resultado-kr18-grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.resultado-kr18-grid .resultado-arcotecho-item {
	border-left: 5px solid #c72029;
}

.footer-identidad {
	border-top: 2px solid #c72029;
	background: #57595b;
	color: #fff;
}

.footer-identidad-contenido {
	display: grid;
	width: min(1180px, calc(100% - 48px));
	grid-template-columns: 245px minmax(0, 1fr) auto;
	gap: 30px;
	align-items: center;
	box-sizing: border-box;
	margin: 0 auto;
	padding: 28px 0 24px;
}

.footer-identidad-marca {
	display: flex;
	gap: 17px;
	align-items: center;
}

.footer-identidad-marca > a {
	flex: 0 0 auto;
}

.footer-identidad-marca img {
	display: block;
	width: 60px;
	height: 58px;
	object-fit: contain;
}

.footer-identidad-marca strong {
	display: block;
	color: #fff;
	font-size: 21px;
	line-height: 1.1;
	text-transform: uppercase;
}

.footer-identidad-marca p {
	margin: 7px 0 0;
	color: rgba(255, 255, 255, .72);
	font: 300 12px/1.45 'Roboto', Arial, sans-serif;
}

.footer-identidad-sucursales {
	min-width: 0;
}

.footer-identidad-sucursales > span {
	display: block;
	margin-bottom: 11px;
	color: rgba(255, 255, 255, .82);
	font: 700 11px/1 'Roboto', Arial, sans-serif;
	letter-spacing: .13em;
	text-transform: uppercase;
}

.footer-identidad-sucursales-lista {
	display: grid;
	grid-template-columns: repeat(8, minmax(0, 1fr));
	gap: 8px 12px;
}

.footer-identidad-sucursales-lista a {
	display: block;
	min-width: 0;
	color: rgba(255, 255, 255, .82);
	font: 700 10px/1.2 'Oswald', 'Arial Narrow', Arial, sans-serif;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	transform-origin: center;
	transition: color .2s ease, transform .24s cubic-bezier(.22, 1, .36, 1), text-shadow .2s ease;
}

.footer-identidad-sucursales-lista a:hover,
.footer-identidad-sucursales-lista a:focus-visible {
	color: #fff;
	text-shadow: 0 2px 8px rgba(0, 0, 0, .45);
	transform: translateY(-4px) scale(1.06);
}

.footer-identidad-sucursales-lista a:focus-visible {
	border-radius: 2px;
	outline: 2px solid #fff;
	outline-offset: 3px;
}

.footer-identidad-ver-todas {
	display: inline-block;
	margin-top: 9px;
	color: rgba(255, 255, 255, .74);
	font: 600 11px/1.3 'Roboto', Arial, sans-serif;
}

.footer-identidad-ver-todas:hover,
.footer-identidad-ver-todas:focus-visible {
	color: #fff;
	text-decoration: underline;
}

.footer-identidad-sucursales > a {
	display: none;
	color: #fff;
	font: 700 13px/1.3 'Roboto', Arial, sans-serif;
}

.footer-identidad-sucursales > a:hover,
.footer-identidad-sucursales > a:focus-visible {
	color: #fff;
	text-decoration: underline;
}

.redes-sociales {
	display: flex;
	align-items: center;
	gap: 10px;
}

.redes-sociales a {
	display: inline-flex;
	width: 40px;
	height: 40px;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(255, 255, 255, .25);
	border-radius: 50%;
	background: #3d3e40;
	transition: background .2s ease, border-color .2s ease, transform .2s ease;
}

.redes-sociales a:hover,
.redes-sociales a:focus-visible {
	border-color: #d52830;
	background: #d52830;
	transform: translateY(-2px);
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.redes-sociales img {
	display: block;
	width: 20px;
	height: 20px;
}

.footer-identidad-redes {
	justify-self: end;
}

.footer-identidad-legal {
	border-top: 1px solid rgba(255, 255, 255, .18);
	background: #3d3e40;
	background: color-mix(in srgb, #57595b 70%, #000);
}

.footer-identidad-legal > div {
	display: flex;
	width: min(1180px, calc(100% - 48px));
	min-height: 40px;
	align-items: center;
	justify-content: space-between;
	gap: 22px;
	margin: 0 auto;
}

.footer-identidad-legal p {
	margin: 0;
	color: rgba(255, 255, 255, .9);
	font: 400 11px/1.4 'Roboto', Arial, sans-serif;
}

.footer-identidad-legal > div > div {
	display: flex;
	align-items: center;
	gap: 25px;
}

.footer-identidad-legal a {
	color: #fff;
	font: 400 11px/1.3 'Roboto', Arial, sans-serif;
}

.footer-identidad-legal a:hover,
.footer-identidad-legal a:focus-visible {
	color: #fff;
	text-decoration: underline;
}

.footer-identidad-diseno {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	color: rgba(255, 255, 255, .75);
	font: 400 10px/1 'Roboto', Arial, sans-serif;
}

.footer-identidad-diseno img {
	display: block;
	width: 48px;
	height: 16px;
	object-fit: contain;
	filter: brightness(0) invert(1);
	opacity: .78;
}

.footer-identidad-claro {
	background: #fff;
	color: #000;
}

.footer-identidad-claro .footer-identidad-marca strong {
	color: #000;
}

.footer-identidad-claro .footer-identidad-marca p,
.footer-identidad-claro .footer-identidad-sucursales > span {
	color: #57595b;
}

.footer-identidad-claro .footer-identidad-sucursales img {
	filter: brightness(0);
	opacity: .72;
}

.footer-identidad-claro .footer-identidad-sucursales > a {
	color: #000;
}

.footer-identidad-claro .footer-identidad-sucursales-lista a {
	color: #57595b;
}

.footer-identidad-claro .footer-identidad-sucursales-lista a:hover,
.footer-identidad-claro .footer-identidad-sucursales-lista a:focus-visible {
	color: #c72029;
}

@media only screen and (max-width: 1120px) {
	.footer-identidad {
		border-top-width: 3px;
	}
}

@media only screen and (max-width: 800px) {
	.footer-identidad-contenido {
		width: min(100% - 30px, 680px);
		grid-template-columns: 1fr;
		gap: 24px;
		padding: 26px 0 22px;
	}

	.footer-identidad-redes {
		justify-self: start;
	}

	.footer-identidad-sucursales-lista { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.footer-identidad-sucursales-lista a { text-align: left; }
	.footer-identidad-ver-todas { display: inline-flex; gap: 8px; }

	.footer-identidad-legal > div {
		width: min(100% - 30px, 680px);
		min-height: 0;
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
		padding: 10px 0;
	}
}

@media only screen and (max-width: 480px) {
	.footer-identidad-sucursales-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
	.footer-identidad-sucursales-lista a { transition: none; }
}

@media only screen and (max-width: 560px) {
	.footer-identidad-legal > div > div {
		flex-wrap: wrap;
		gap: 14px 22px;
	}
}

.herramientas-footer {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	padding: 28px 20px;
	background: #57595b;
	color: rgba(255, 255, 255, 0.78);
	font-size: 13px;
}

.herramientas-footer img {
	object-fit: contain;
}

.herramientas-footer p {
	margin: 0;
	color: rgba(255, 255, 255, 0.78);
}

@media only screen and (max-width: 900px) {
	.calculadora-lineales {
		grid-template-columns: 1fr;
		gap: 30px;
		padding: 38px;
	}

	.contenido-seo-calculadora {
		padding: 38px;
	}
}

@media only screen and (max-width: 767px) {
	.herramientas-hero {
		min-height: 300px;
		padding: 112px 24px 68px;
	}

	.herramientas-hero h1 {
		font-size: 39px;
	}

	.herramientas-hero p {
		font-size: 17px;
	}

	.herramientas-contenido {
		width: calc(100% - 28px);
		margin-top: -34px;
	}

	.calculadora-lineales {
		padding: 28px 22px;
	}

	.calculadora-lineales h2 {
		font-size: 29px;
	}

	.resultado-lineales {
		padding: 24px 22px;
	}

	.resultado-lineales strong {
		font-size: 27px;
	}

	.contenido-seo-calculadora {
		padding: 30px 22px;
	}

	.contenido-seo-calculadora h2 {
		font-size: 29px;
	}

	.contenido-seo-ejemplos {
		grid-template-columns: 1fr;
	}

	.resultado-kr18-grid {
		grid-template-columns: 1fr;
	}
}

/* Menú compacto: navegación alineada a la izquierda con subopciones sangradas. */
@media only screen and (max-width: 1440px) {
	.pagina-navbar #top > ul > li > a,
	.pagina-navbar #top .menu-desplegable-boton {
		box-sizing: border-box;
		padding-right: 48px !important;
		padding-left: 48px !important;
		text-align: left !important;
	}

	.pagina-navbar #top > ul > li > a::after,
	.pagina-navbar #top > ul > li > .menu-desplegable-boton::after {
		display: none !important;
	}

	.pagina-navbar #top .menu-desplegable-boton {
		position: relative;
	}

	.pagina-navbar #top .menu-desplegable-boton[aria-expanded="true"]::before {
		content: "";
		position: absolute;
		top: 7px;
		bottom: 7px;
		left: 28px;
		width: 6px;
		background: #d52830;
	}

	.pagina-navbar #top .submenu a {
		box-sizing: border-box;
		padding: 11px 28px 11px 76px !important;
		font-size: 14px;
		line-height: 20px;
		text-align: left !important;
	}

	.pagina-navbar #top .menu-flecha {
		margin-left: 9px;
	}
}

@media only screen and (min-width: 768px) {
	.pagina-navbar #top .submenu a {
		padding: 10px 12px !important;
		text-align: left !important;
	}
}

@media only screen and (max-width: 1440px) {
	.pagina-navbar #top > ul.menu-abierto,
	.pagina-navbar #top > ul.menu-abierto > li {
		background: transparent;
	}

	.pagina-navbar #top > ul.menu-abierto > li > a,
	.pagina-navbar #top > ul.menu-abierto > li > .menu-desplegable-boton {
		background: rgba(87, 89, 91, .90);
		-webkit-backdrop-filter: blur(4px);
		backdrop-filter: blur(4px);
	}

	.pagina-navbar #top .submenu {
		display: block !important;
		box-sizing: border-box;
		max-height: 0;
		overflow: hidden;
		padding: 0;
		border: 0;
		border-radius: 0 0 8px 8px;
		background: linear-gradient(145deg, rgba(72, 74, 76, .90), rgba(48, 50, 52, .90));
		-webkit-backdrop-filter: blur(4px);
		backdrop-filter: blur(4px);
		box-shadow: inset 0 1px rgba(255, 255, 255, .08);
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: max-height .28s ease, opacity .22s ease, visibility 0s linear .28s;
	}

	.pagina-navbar #top .submenu.submenu-abierto {
		max-height: 480px;
		padding: 6px 10px 10px;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transition: max-height .28s ease, opacity .22s ease, visibility 0s;
	}

	.pagina-navbar #top .submenu a {
		display: flex;
		align-items: center;
		gap: 6px;
		min-height: 48px;
		box-sizing: border-box;
		padding: 9px 12px !important;
		border-radius: 6px;
		font-size: 12px;
		line-height: 1.35;
		text-align: left !important;
		transition: background .18s ease, color .18s ease;
	}

	.pagina-navbar #top .submenu a::before {
		content: "▦";
		display: grid;
		flex: 0 0 22px;
		width: 22px;
		height: 22px;
		place-items: center;
		border: .5px solid rgba(213, 40, 48, .65);
		border-radius: 7px;
		background: rgba(213, 40, 48, .14);
		color: #ff5961;
		font-size: 12px;
	}

	.pagina-navbar #submenu-nosotros a::before { content: "›"; font-size: 18px; }

	.pagina-navbar #top .submenu a:active,
	.pagina-navbar #top .submenu a:focus-visible {
		background: rgba(255, 255, 255, .1);
		color: #fff;
	}
}

@media only screen and (max-width: 767px) {
	.pagina-navbar #top > ul.menu-abierto > li > a,
	.pagina-navbar #top > ul.menu-abierto > li > .menu-desplegable-boton {
		background: rgba(87, 89, 91, .95);
	}

	.pagina-navbar #top .submenu,
	.pagina-navbar #top .submenu.submenu-abierto {
		background: linear-gradient(145deg, rgba(72, 74, 76, .95), rgba(48, 50, 52, .95));
	}
}

@media only screen and (min-width: 1441px) {
	.pagina-navbar #top {
		background: rgba(87, 89, 91, .95);
	}

	.pagina-navbar #top .submenu {
		background: linear-gradient(145deg, rgba(72, 74, 76, .95), rgba(48, 50, 52, .95));
	}
}