/* ==========================================================================
   INICIO — estilos exclusivos de la plantilla "Home — Principal".
   Fondo amarillo y todo centrado en una sola columna, con el negro para
   texto y botones.
   ========================================================================== */

body.tpl-template-home {
	background: var(--c-amarillo);
}

.seccion-inicio {
	display: flex;
	align-items: center;
	/* Pantalla completa, pero si el contenido no cabe la seccion crece
	   en vez de cortarlo */
	min-height: 100vh;
	padding-block: 150px 90px;
	color: var(--c-negro);
	text-align: center;
}

.seccion-inicio .wrapper {
	max-width: 900px;
}

/* ---------- Zonas donde trabaja Cocona ---------- */

.inicio-zona {
	display: inline-block;
	margin: 0 0 32px;
	padding: 9px 22px;
	font-size: 14px;
	font-weight: 600;
	background: transparent;
	border: 1.5px solid var(--c-negro);
	border-radius: var(--radio);
}

/* ---------- Titular ---------- */

.inicio-titulo {
	margin-bottom: 28px;
	font-weight: 400;
}

/* La segunda mitad del titular es la que remata: va en negrita */
.inicio-remate {
	display: block;
	font-weight: 800;
}

/* Pincelada blanca bajo la palabra clave: una brocha real (mancha.webp, con
   transparencia). Va de fondo, asi que se estira con la palabra y escala
   con el titulo en cada breakpoint. */
.pincel {
	position: relative;
}

.pincel::after {
	content: "";
	position: absolute;
	z-index: -1;
	right: -0.08em;
	bottom: 0;
	left: -0.08em;
	height: 0.86em;
	background: url(../img/mancha.webp) no-repeat center / 100% 100%;
}

.inicio-descripcion {
	max-width: 700px;
	margin: 0 auto 36px;
	font-size: var(--fs-p);
	line-height: var(--lh-texto);
}

/* ---------- Cifras ---------- */

/* Franja delgada en negro, separada del hero */
.seccion-cifras {
	padding-block: 40px;
	color: var(--c-blanco);
	background: var(--c-negro);
}

.cifras {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: left;
}

/* La linea amarilla va al costado de cada cifra */
.cifra {
	padding-left: 20px;
	border-left: 2px solid var(--c-amarillo);
}

.cifra-valor {
	margin: 0 0 4px;
	font-family: var(--font-titulos);
	font-size: var(--fs-h3);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.02em;
}

.cifra-texto {
	margin: 0;
	font-size: 16px;
	line-height: 1.4;
}

/* La palabra clave de cada cifra */
.cifra-clave {
	font-weight: 800;
}

/* ==========================================================================
   MOVIL
   ========================================================================== */

@media (max-width: 767px) {

	.seccion-inicio {
		padding-block: clamp(110px, 17vh, 170px) 64px;
	}

	.inicio-zona {
		margin-bottom: 24px;
		font-size: 13px;
	}

	/* Fluido en movil: "estratégicamente" no se puede partir y a 44px no
	   cabe en una pantalla de 360. A 9vw mide ~310px y entra con margen. */
	.inicio-titulo {
		margin-bottom: 20px;
		font-size: clamp(28px, 9vw, var(--fs-h1));
	}

	/* Siguen a tres columnas: mas apretadas y con el texto mas chico */
	.seccion-cifras {
		padding-block: 28px;
	}

	.cifras {
		gap: 14px;
	}

	.cifra {
		padding-left: 12px;
	}

	.cifra-valor {
		font-size: 22px;
	}

	.cifra-texto {
		font-size: 12px;
	}
}

/* ==========================================================================
   SERVICIOS — sobre blanco, para que respire despues del hero amarillo.
   Cada tarjeta lleva una foto de fondo con un velo encima y el texto
   apoyado abajo. Las dos que mas piden llevan una cinta amarilla cruzando
   la esquina superior derecha.
   ========================================================================== */

.seccion-servicios {
	padding-block: 120px;
	color: var(--c-negro);
	background: var(--c-blanco);
}

.servicios-titulo {
	max-width: 640px;
	margin: 0 auto 64px;
	text-align: center;
}

.servicios {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.servicio {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 520px;
	overflow: hidden;
	color: var(--c-blanco);
	border-radius: 28px;
	/* Que el zoom de la foto no se salga del radio en Safari */
	isolation: isolate;
}

/* ---------- Foto y velo ---------- */

.servicio-fondo {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.8s var(--ease);
}

.servicio:hover .servicio-fondo {
	transform: scale(1.06);
}

/* El velo: oscuro abajo, para que el texto se lea, y transparente arriba,
   para que la foto se vea */
.servicio::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		to top,
		rgba(17, 17, 17, 0.96) 0%,
		rgba(17, 17, 17, 0.7) 45%,
		rgba(17, 17, 17, 0.35) 100%
	);
}

/* ---------- Contenido, por encima de todo ---------- */

.servicio-contenido {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	padding: 28px 26px;
}

.servicio-cinta {
	position: absolute;
	top: 29px;
	right: -66px;
	z-index: 3;
	width: 220px;
	margin: 0;
	padding: 8px 0;
	font-size: 10px;
	font-weight: 800;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--c-negro);
	background: linear-gradient(90deg, var(--c-amarillo) 0%, var(--c-amarillo-claro) 50%, var(--c-amarillo) 100%);
	transform: rotate(45deg);
	box-shadow: 0 4px 12px rgba(17, 17, 17, 0.25);
}

.servicio-icono {
	display: flex;
	margin-bottom: 18px;
}

.servicio-icono svg {
	width: 34px;
	height: 34px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.servicio-nombre {
	margin-bottom: 8px;
	font-size: var(--fs-h4);
	font-weight: 800;
}

.servicio-gancho {
	margin: 0 0 10px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
}

/* La descripcion solo se despliega al pasar el raton (o al enfocar con
   teclado). En movil no hay hover, asi que va siempre visible.
   Se anima con grid (0fr -> 1fr): asi la altura que se abre es la real del
   texto y no un max-height a ojo, que es lo que hacia brusco el movimiento. */
.servicio-texto {
	display: grid;
	grid-template-rows: 0fr;
	margin: 0;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	opacity: 0;
	transform: translateY(10px);
	transition:
		grid-template-rows 0.6s var(--ease),
		opacity 0.45s var(--ease) 0.08s,
		transform 0.6s var(--ease);
}

.servicio-texto > span {
	overflow: hidden;
}

.servicio:hover .servicio-texto,
.servicio:focus-within .servicio-texto {
	grid-template-rows: 1fr;
	opacity: 1;
	transform: none;
}

.servicio-enlace {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	align-self: flex-start;
	margin-top: 20px;
	font-weight: 700;
	text-decoration: none;
	border-bottom: 2px solid currentColor;
	transition: gap var(--dur) var(--ease);
}

.servicio-enlace:hover {
	gap: 14px;
}

.servicio-enlace svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

@media (max-width: 1023px) {

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

@media (max-width: 767px) {

	.seccion-servicios {
		padding-block: 72px;
	}

	.servicios-titulo {
		margin-bottom: 40px;
	}

	.servicios {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.servicio,
	.servicio--destacado {
		min-height: 400px;
		border-radius: 22px;
	}

	.servicio-texto {
		grid-template-rows: 1fr;
		opacity: 1;
		transform: none;
	}

	.servicio-contenido {
		padding: 26px 24px;
	}

}

/* ==========================================================================
   PROCESO — sobre crema, para separarse del blanco de servicios.
   Cuatro pasos en fila, centrados, con el numero en amarillo como icono.
   Al pasar el raton el paso gana fondo, como en la referencia.
   ========================================================================== */

.seccion-proceso {
	padding-block: 120px;
	color: var(--c-negro);
	background: var(--c-crema);
}

.proceso-titulo {
	margin: 0 auto 64px;
	text-align: center;
}

.proceso {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* El fondo blanco va pasando de un paso al siguiente cada 2 s, en bucle.
   Los cuatro comparten la misma animacion de 8 s (4 x 2 s); lo unico que
   cambia es el retardo con el que arranca cada uno. */
.paso {
	padding: 40px 28px 44px;
	text-align: center;
	border-radius: 24px;
	border: 1px solid transparent;
	animation: paso-turno 8s ease-in-out infinite;
}

.paso:nth-child(2) { animation-delay: 2s; }
.paso:nth-child(3) { animation-delay: 4s; }
.paso:nth-child(4) { animation-delay: 6s; }

/* Activo durante el primer cuarto del ciclo, con entrada y salida suaves */
@keyframes paso-turno {
	0%       { background: transparent; border-color: transparent; }
	4%, 21%  { background: var(--c-blanco); border-color: rgba(17, 17, 17, 0.08); }
	25%, 100% { background: transparent; border-color: transparent; }
}

.paso-numero {
	display: block;
	margin-bottom: 18px;
	font-family: var(--font-titulos);
	font-size: var(--fs-h3);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--c-amarillo);
}

.paso-nombre {
	margin-bottom: 10px;
	font-size: var(--fs-h5);
	font-weight: 800;
}

.paso-texto {
	margin: 0;
	font-size: 15px;
	line-height: 1.55;
}

@media (max-width: 1023px) {

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

@media (max-width: 767px) {

	.seccion-proceso {
		padding-block: 72px;
	}

	.proceso-titulo {
		margin-bottom: 40px;
	}

	.proceso {
		grid-template-columns: 1fr;
		gap: 8px;
	}

	.paso {
		padding: 28px 22px 32px;
	}
}

/* ==========================================================================
   TESTIMONIOS — sobre negro. Dos cintas de tarjetas que corren sin parar en
   sentidos opuestos; al pasar el raton se detienen para poder leerlas.
   ========================================================================== */

.seccion-testimonios {
	padding-block: 120px;
	overflow: hidden;
	color: var(--c-blanco);
	background: var(--c-fondo-oscuro);
}

.testimonios-titulo {
	margin: 0 auto 64px;
	text-align: center;
}

.testimonios {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* Se difuminan los extremos para que las tarjetas entren y salgan suaves */
.testimonios-cinta {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
	mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}

.testimonios-pista {
	display: flex;
	width: max-content;
	animation: testimonios-correr 80s linear infinite;
}

.testimonios-cinta--inversa .testimonios-pista {
	animation-direction: reverse;
}

.testimonios-cinta:hover .testimonios-pista {
	animation-play-state: paused;
}

.testimonios-lista {
	display: flex;
	gap: 20px;
	margin: 0;
	padding: 0 10px;
	list-style: none;
}

.testimonio {
	display: flex;
	align-items: center;
	gap: 40px;
	width: 840px;
	padding: 28px 36px;
	border: 1.5px solid color-mix(in srgb, var(--c-mostaza) 20%, transparent);
	border-radius: 22px;
	background: var(--luz-tarjeta);
}

/* La luz: un radial amarillo muy tenue que entra por la esquina superior
   izquierda y se funde con la superficie. Va en una variable para poder
   reutilizarlo en el estado hover sin repetirlo. */
.testimonio {
	--luz-tarjeta: radial-gradient(
		ellipse 70% 90% at 12% 0%,
		color-mix(in srgb, var(--c-amarillo) 14%, var(--c-superficie)) 0%,
		var(--c-superficie) 70%
	);
}

/* Al pasar el raton el borde se anima: dos fondos apilados. El de arriba
   (superficie) llena solo el padding-box; el de abajo (gradiente conico)
   llena el border-box y asoma unicamente en el borde. Al girar el angulo,
   el borde recorre la tarjeta. */
.testimonio:hover {
	border-color: transparent;
	background:
		var(--luz-tarjeta) padding-box,
		conic-gradient(from var(--angulo), var(--c-mostaza) 0deg, var(--c-amarillo) 90deg, var(--c-mostaza) 180deg, var(--c-amarillo) 270deg, var(--c-mostaza) 360deg) border-box;
	animation: testimonio-borde 5s linear infinite;
}

/* Sin @property el angulo no se puede animar: el borde queda fijo */
@property --angulo {
	syntax: "<angle>";
	initial-value: 0deg;
	inherits: false;
}

@keyframes testimonio-borde {
	to { --angulo: 360deg; }
}

.testimonio-foto {
	flex: 0 0 auto;
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: 50%;
	border: 2px solid var(--c-amarillo);
}

.testimonio-cita {
	flex: 1 1 auto;
	margin: 0;
}

.testimonio-cita p {
	margin: 0;
	font-size: var(--fs-p);
	line-height: 1.55;
}

/* Comillas de apertura, en amarillo, como marca de la cita */
.testimonio-cita p::before {
	content: "\201C";
	margin-right: 2px;
	color: var(--c-amarillo);
}

/* El autor va a la derecha, con un ancho fijo para que las tarjetas queden
   alineadas entre si */
.testimonio-autor {
	display: flex;
	flex: 0 0 200px;
	flex-direction: column;
	gap: 2px;
	margin: 0;
	padding-left: 32px;
	font-size: 14px;
	border-left: 1px solid var(--c-borde-suave);
}

.testimonio-autor span {
	color: var(--c-texto-suave);
}

@keyframes testimonios-correr {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

@media (max-width: 767px) {

	.seccion-testimonios {
		padding-block: 72px;
	}

	.testimonios-titulo {
		margin-bottom: 40px;
	}

	.testimonios,
	.testimonios-lista {
		gap: 14px;
	}

	/* En movil las dos cintas se funden en UNA sola fila que se desliza con
	   el dedo, con imanes en cada tarjeta. Cinta, pista y lista pasan a
	   display: contents para que las tarjetas cuelguen directamente del
	   contenedor. La copia duplicada sobra. */
	.testimonios {
		flex-direction: row;
		gap: 14px;
		padding: 0 var(--gutter);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.testimonios::-webkit-scrollbar {
		display: none;
	}

	.testimonios-cinta,
	.testimonios-pista,
	.testimonios-lista {
		display: contents;
	}

	.testimonios-pista {
		animation: none;
	}

	.testimonios-lista[aria-hidden="true"] {
		display: none;
	}

	.testimonio {
		flex-direction: column;
		align-items: stretch;
		gap: 18px;
		flex: 0 0 auto;
		width: 82vw;
		max-width: 340px;
		padding: 24px 26px;
		border-radius: 18px;
		scroll-snap-align: center;
	}

	.testimonio-foto {
		width: 56px;
		height: 56px;
	}

	.testimonio-autor {
		flex-basis: auto;
		padding-left: 0;
		border-left: 0;
	}
}

/* ---------- Fila de logos de clientes, al pie de los testimonios ---------- */

.logos-cinta {
	margin-top: 56px;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
	mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}

.logos-pista {
	display: flex;
	width: max-content;
	animation: testimonios-correr 40s linear infinite;
}

.logos-cinta:hover .logos-pista {
	animation-play-state: paused;
}

.logos-lista {
	display: flex;
	align-items: center;
	gap: 64px;
	margin: 0;
	padding: 0 32px;
	list-style: none;
}

.logo img {
	width: auto;
	height: 40px;
	opacity: 0.7;
	transition: opacity var(--dur) var(--ease);
}

.logo:hover img {
	opacity: 1;
}

@media (max-width: 767px) {

	.logos-cinta {
		margin-top: 40px;
	}

	.logos-lista {
		gap: 40px;
	}

	.logo img {
		height: 32px;
	}
}

/* ==========================================================================
   AIDU — caja amarilla sobre blanco en dos bloques: arriba la presentacion
   a todo el ancho, abajo el resto del texto con la foto al lado.
   ========================================================================== */

.seccion-aidu {
	padding-block: 120px;
	color: var(--c-negro);
	background: var(--c-blanco);
}

.aidu-caja {
	overflow: hidden;
	padding: 72px 72px 0;
	background: var(--c-amarillo);
	border-radius: 40px;
	box-shadow: 0 40px 60px -40px color-mix(in srgb, var(--c-amarillo) 55%, transparent);
}

/* ---------- Presentacion, al inicio de la columna de texto ---------- */

.aidu-intro {
	margin-bottom: 28px;
}

/* h2 y h3 en la misma linea, alineados por la base del texto */
.aidu-titulos {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 18px;
	margin-bottom: 12px;
}

.aidu-titulo,
.aidu-subtitulo {
	margin: 0;
}

.aidu-subtitulo {
	font-weight: 500;
}

.aidu-rol {
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	opacity: 0.7;
}

.aidu-intro p,
.aidu-texto p {
	margin: 0 0 18px;
	font-size: var(--fs-p);
	line-height: 1.55;
}

/* ---------- Bloque 2: texto | foto ---------- */

.aidu-detalle {
	display: grid;
	grid-template-columns: 1.5fr 1fr;
	gap: 56px;
	align-items: start;
}

.aidu-texto {
	padding-bottom: 72px;
}

.aidu-enlace {
	font-weight: 700;
	text-decoration: none;
	border-bottom: 2px solid currentColor;
	white-space: nowrap;
}

/* "Conecta con Aidu en:" + el icono de LinkedIn */
.aidu-conecta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 32px 0 0 !important;
	font-weight: 700;
}

.aidu-conecta a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	color: var(--c-amarillo);
	background: var(--c-negro);
	border-radius: 8px;
	transition: transform var(--dur) var(--ease);
}

.aidu-conecta a:hover {
	transform: translateY(-3px);
}

.aidu-conecta svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

/* La foto apoya en el borde inferior de la caja, sea cual sea el alto del texto */
.aidu-foto {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	align-self: end;
	margin: 0;
}

.aidu-foto img {
	width: 100%;
	height: auto;
}

@media (max-width: 1023px) {

	.aidu-caja {
		padding: 56px 40px 0;
		border-radius: 30px;
		text-align: center;
	}

	/* Los titulos en linea y el enlace de LinkedIn tambien se centran */
	.aidu-titulos,
	.aidu-conecta {
		justify-content: center;
	}

	.aidu-detalle {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.aidu-texto {
		padding-bottom: 0;
	}
}

@media (max-width: 767px) {

	.seccion-aidu {
		padding-block: 72px;
	}

	.aidu-caja {
		padding: 40px 24px 0;
		border-radius: 24px;
	}

	.aidu-intro {
		margin-bottom: 24px;
	}
}

/* ==========================================================================
   CONTACTO — sobre crema. Titulo a la izquierda, formulario a la derecha
   con los campos en pastilla blanca, como en la referencia.
   ========================================================================== */

.seccion-contacto {
	padding-block: 120px;
	color: var(--c-negro);
	background: var(--c-crema);
}

.contacto-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 72px;
	align-items: center;
}

.contacto-texto {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
}

.contacto-titulo {
	margin: 0;
}

.contacto-bajada {
	margin: 0;
	font-size: var(--fs-bajada);
	font-weight: 500;
	line-height: 1.45;
}

/* Enlace a WhatsApp, como alternativa al formulario */
.contacto-wsp {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-weight: 700;
	text-decoration: none;
	border-bottom: 2px solid currentColor;
	transition: opacity var(--dur) var(--ease);
}

.contacto-wsp:hover {
	opacity: 0.65;
}

.contacto-wsp svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

/* ---------- Formulario ---------- */

.formulario {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.formulario .campo {
	position: relative;
	margin: 0;
}

.formulario input,
.formulario select {
	width: 100%;
	padding: 18px 28px;
	font-family: var(--font-texto);
	font-size: var(--fs-p);
	color: var(--c-negro);
	background: var(--c-blanco);
	border: 1.5px solid transparent;
	border-radius: var(--radio);
	outline: none;
	appearance: none;
	-webkit-appearance: none;
	transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.formulario input::placeholder {
	color: rgba(17, 17, 17, 0.5);
}

.formulario input:focus,
.formulario select:focus {
	border-color: var(--c-negro);
	box-shadow: 0 0 0 4px var(--c-blanco-velo);
}

/* El select pierde su flecha nativa y gana una propia */
.formulario select {
	padding-right: 56px;
	cursor: pointer;
}

.formulario select:invalid,
.formulario select option[value=""] {
	color: rgba(17, 17, 17, 0.5);
}

.campo--select::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 26px;
	width: 10px;
	height: 10px;
	border-right: 2px solid var(--c-negro);
	border-bottom: 2px solid var(--c-negro);
	transform: translateY(-70%) rotate(45deg);
	pointer-events: none;
}

.formulario-envio {
	margin: 12px 0 0;
}

.formulario button[disabled] {
	opacity: 0.6;
	cursor: wait;
}

.formulario-mensaje {
	min-height: 1.5em;
	margin: 0;
	font-weight: 700;
}

.formulario-mensaje.is-error {
	color: #B3261E;
}

/* Trampa para bots: fuera de la vista, pero presente en el DOM */
.formulario-trampa {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

@media (max-width: 1023px) {

	.contacto-grid {
		grid-template-columns: 1fr;
		gap: 40px;
		justify-items: center;
	}

	.contacto-texto {
		align-items: center;
		text-align: center;
	}

	.formulario {
		width: 100%;
		max-width: 560px;
	}

	.formulario-envio,
	.formulario-mensaje {
		text-align: center;
	}
}

@media (max-width: 767px) {

	.seccion-contacto {
		padding-block: 72px;
	}

	.formulario input,
	.formulario select {
		padding: 15px 22px;
	}
}