/* ==========================================================================
   Tema Disercom
   ========================================================================== */

:root {
	--azul: #478ac9;
	--amarillo: #f1c50e;
	--amarillo-claro: #ffd741;
	--rojo: #db545a;
	--rojo-vivo: #ff0000;
	--negro: #000;
	--gris-oscuro: #333;
	--gris-marron: #333129;
	--gris-caja: #b9b9b9;
	--gris-fondo: #f2f2f2;
	--gris-cabecera: #e8e8e8;
	--texto: #111;
	--texto-suave: #555;
	--fuente: "Open Sans", Arial, sans-serif;
	--fuente-titulos: "Roboto", Arial, sans-serif;
	--fuente-ubuntu: "Ubuntu", "Open Sans", Arial, sans-serif;
	--ancho: 1140px;
	--alto-cabecera: 72px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: var(--alto-cabecera); }

body {
	margin: 0;
	font-family: var(--fuente);
	font-size: 16px;
	line-height: 1.6;
	color: var(--texto);
	background: #fff;
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--azul); }
h1, h2, h3, h4, h5, h6 { font-family: var(--fuente-titulos); line-height: 1.15; margin: 0 0 .5em; }
p { margin: 0 0 1em; }

.contenedor { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 24px; }
.contenedor--estrecho { max-width: 860px; }
.contenedor--medio { max-width: 960px; }

.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}
.saltar-contenido { position: absolute; left: -9999px; top: 0; z-index: 1000; background: #000; color: #fff; padding: 8px 14px; }
.saltar-contenido:focus { left: 8px; top: 8px; }

/* Botones ---------------------------------------------------------------- */
.boton {
	display: inline-block; font-family: var(--fuente); font-size: 14px; line-height: 1;
	padding: 12px 26px; text-decoration: none; cursor: pointer; border: 1px solid transparent;
	transition: background .2s, color .2s, border-color .2s;
}
.boton--borde { background: transparent; color: #999; border-color: #ccc; }
.boton--borde:hover { background: #333; color: #fff; border-color: #333; }
.boton--negro { background: #000; color: #fff; }
.boton--negro:hover { background: #333; }
.boton--oscuro { background: var(--gris-oscuro); color: #fff; }

/* Cabecera ---------------------------------------------------------------- */
.cabecera {
	position: sticky; top: 0; z-index: 100;
	background: var(--gris-cabecera);
	transition: box-shadow .2s;
}
.admin-bar .cabecera { top: 32px; }
@media (max-width: 782px) { .admin-bar .cabecera { top: 0; } }
.cabecera.con-sombra { box-shadow: 0 2px 10px rgba(0,0,0,.12); }
.cabecera__fila { display: flex; align-items: center; justify-content: space-between; min-height: var(--alto-cabecera); }
.cabecera__logo img { width: 220px; height: auto; }

.navegacion .menu { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; }
.navegacion a {
	display: block; padding: 8px 10px; font-family: var(--fuente); font-weight: 700; font-size: 13px;
	text-transform: uppercase; color: #111; text-decoration: none; letter-spacing: .02em;
	border-bottom: 2px solid transparent;
}
.navegacion a:hover { color: var(--azul); }
.navegacion .current-menu-item > a,
.navegacion .current_page_item > a { color: var(--azul); border-bottom-color: var(--azul); }

.cabecera__hamburguesa {
	display: none; background: none; border: 0; width: 40px; height: 40px; padding: 8px; cursor: pointer;
}
.cabecera__hamburguesa span:not(.screen-reader-text) { display: block; height: 2px; background: #111; margin: 5px 0; transition: transform .2s, opacity .2s; }

@media (max-width: 900px) {
	.cabecera__logo img { width: 180px; }
	.cabecera__hamburguesa { display: block; }
	.navegacion {
		position: absolute; left: 0; right: 0; top: 100%;
		background: var(--gris-cabecera); box-shadow: 0 8px 16px rgba(0,0,0,.12);
		max-height: 0; overflow: hidden; transition: max-height .3s ease;
	}
	.navegacion.esta-abierta { max-height: 420px; }
	.navegacion .menu { flex-direction: column; gap: 0; padding: 8px 24px 16px; }
	.navegacion a { padding: 12px 0; border-bottom: 1px solid rgba(0,0,0,.08); }
	.cabecera__hamburguesa[aria-expanded="true"] span:nth-of-type(2) { transform: translateY(7px) rotate(45deg); }
	.cabecera__hamburguesa[aria-expanded="true"] span:nth-of-type(3) { opacity: 0; }
	.cabecera__hamburguesa[aria-expanded="true"] span:nth-of-type(4) { transform: translateY(-7px) rotate(-45deg); }
}

/* Pie ---------------------------------------------------------------------- */
.pie-contacto { background: #000; color: #fff; text-align: center; padding: 56px 0 40px; }
.pie-contacto__nombre { font-family: var(--fuente-ubuntu); font-weight: 400; font-size: 28px; margin-bottom: 22px; }
.pie-contacto p { font-size: 14px; line-height: 1.8; margin: 0; }
.pie-contacto a { color: #fff; text-decoration: none; }
.pie-contacto a:hover { text-decoration: underline; }

.pie { background: var(--gris-oscuro); color: #fff; padding: 36px 0; text-align: center; font-size: 13px; }
.pie__menu { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; }
.pie__menu li + li::before { content: "|"; margin: 0 .5em; color: #bbb; }
.pie__menu a { color: #fff; text-decoration: none; }
.pie__menu a:hover { text-decoration: underline; }

.volver-arriba {
	position: fixed; right: 20px; bottom: 24px; z-index: 90; width: 48px; height: 48px;
	border: 1px solid var(--azul); border-radius: 50%; color: var(--azul); background: rgba(255,255,255,.75);
	display: grid; place-items: center; opacity: 0; pointer-events: none; transition: opacity .25s;
}
.volver-arriba.es-visible { opacity: 1; pointer-events: auto; }
.volver-arriba svg { width: 28px; height: 28px; }

/* Carrusel ---------------------------------------------------------------- */
.carrusel { position: relative; overflow: hidden; background: #eee; }
.carrusel__pista { position: relative; width: 100%; height: 100%; aspect-ratio: var(--proporcion, 4 / 3); }
.carrusel__diapo {
	position: absolute; inset: 0; margin: 0; opacity: 0; visibility: hidden;
	transition: opacity .6s ease, visibility .6s;
}
.carrusel__diapo.es-activa { opacity: 1; visibility: visible; }
.carrusel__diapo img { width: 100%; height: 100%; object-fit: cover; }
.carrusel--contener { background: transparent; }
.carrusel--contener .carrusel__diapo img { object-fit: contain; }
.carrusel--blanco { background: #fff; }

.carrusel__flecha {
	position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
	width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer;
	background: rgba(64,64,64,.75); color: #fff; display: grid; place-items: center; padding: 0;
}
.carrusel__flecha:hover { background: rgba(0,0,0,.9); }
.carrusel__flecha svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.carrusel__flecha--prev { left: 10px; }
.carrusel__flecha--next { right: 10px; }
.carrusel__puntos { position: absolute; left: 0; right: 0; bottom: 10px; z-index: 2; display: flex; justify-content: center; gap: 8px; }
.carrusel__puntos button { width: 9px; height: 9px; border-radius: 50%; border: 0; padding: 0; background: rgba(255,255,255,.6); cursor: pointer; box-shadow: 0 0 0 1px rgba(0,0,0,.15); }
.carrusel__puntos button.es-activo { background: #fff; }
.carrusel--capturas .carrusel__puntos { position: static; margin-top: 12px; }
.carrusel--capturas .carrusel__puntos button { background: #ccc; box-shadow: none; }
.carrusel--capturas .carrusel__puntos button.es-activo { background: #555; }

/* ==========================================================================
   INICIO
   ========================================================================== */
.inicio-hero {
	background-size: cover; background-position: center; text-align: right;
	min-height: 600px; display: flex; align-items: center;
}
.inicio-hero__titulo {
	font-family: var(--fuente-ubuntu); font-weight: 500; font-size: clamp(42px, 7vw, 80px); color: #111;
	text-shadow: 2px 2px 8px rgba(0,0,0,.4); margin-bottom: 26px;
}
.inicio-hero__lema { font-weight: 700; font-style: italic; font-size: 15px; text-shadow: 0 0 6px rgba(0,0,0,.2); }

.empresa { padding: 50px 0 60px; }
.empresa__rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.empresa__titulo { font-family: var(--fuente-ubuntu); font-weight: 400; font-size: 29px; margin-bottom: 30px; }
.empresa__bloque { display: grid; grid-template-columns: 56px 1fr; gap: 14px; margin-bottom: 26px; padding-left: 26px; }
.empresa__icono { width: 40px; height: 40px; fill: currentColor; color: #111; }
.empresa__bloque h3 { font-family: var(--fuente); font-weight: 600; font-size: 14px; letter-spacing: .25em; margin: 6px 0 14px; }
.empresa__bloque p { font-size: 13px; margin-bottom: 10px; }
.carrusel--empresa .carrusel__pista { aspect-ratio: 4 / 3.1; }

.servicios { background: var(--gris-fondo); padding: 25px 0 50px; }
.servicio { padding: 25px 0; }
.servicio__rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; }
.servicio--derecha .servicio__columna-texto { order: 2; }
.servicio__columna-texto { display: flex; flex-direction: column; gap: 22px; }
.servicio__mini { width: 82%; aspect-ratio: 2.4 / 1; object-fit: cover; opacity: .3; margin-left: auto; margin-right: auto; }
.servicio--derecha .servicio__mini { margin-right: 0; }
.servicio__caja {
	display: block; background: var(--gris-caja); color: #fff; text-decoration: none;
	padding: 34px 40px 30px; flex: 1; transition: transform .3s, box-shadow .3s;
}
.servicio__caja:hover { transform: translateY(-6px); box-shadow: 0 12px 26px rgba(0,0,0,.15); }
.servicio--derecha .servicio__caja { text-align: right; }
.servicio__num { display: block; font-family: var(--fuente-ubuntu); font-weight: 700; font-size: 72px; line-height: 1; }
.servicio__titulo { font-family: var(--fuente-ubuntu); font-weight: 400; font-size: 26px; margin: 26px 0 16px; text-align: center; }
.servicio--derecha .servicio__titulo { text-align: right; }
.servicio__texto { font-size: 12px; text-align: center; margin: 0; }
.servicio--derecha .servicio__texto { text-align: right; }
.servicio__imagen img { width: 100%; height: 100%; min-height: 360px; object-fit: cover; }
.servicio--oscuro .servicio__caja { background: #000; text-align: right; }
.servicio--oscuro .servicio__titulo, .servicio--oscuro .servicio__texto { text-align: right; }
.servicio--transparente .servicio__imagen { display: flex; align-items: center; }
.servicio--transparente .servicio__imagen img { min-height: 0; height: auto; object-fit: contain; }

.marcas { padding: 50px 0; }
.marcas__rejilla { display: grid; grid-template-columns: repeat(5, 1fr); gap: 40px 34px; align-items: center; }
.marcas__logo { display: flex; align-items: center; justify-content: center; height: 90px; }
.marcas__logo img { max-height: 70px; max-width: 100%; width: auto; object-fit: contain; filter: none; transition: transform .2s; }
.marcas__logo:hover img { transform: scale(1.05); }
.marcas__logo:nth-child(n+6) { grid-row: 2; }
.marcas__logo:nth-child(6) { grid-column: 1 / span 1; }

/* ==========================================================================
   MANTENIMIENTOS
   ========================================================================== */
.hero-mant { background-size: cover; background-position: left center; padding: 0; }
.hero-mant__fila { display: flex; justify-content: flex-end; min-height: 430px; align-items: center; }
.hero-mant__caja {
	background: rgba(255,255,255,.55); width: 56%; min-height: 350px; display: flex; align-items: center; padding: 30px 40px;
}
.hero-mant__caja h1 { font-family: var(--fuente-titulos); font-weight: 700; text-transform: uppercase; font-size: clamp(34px, 4.6vw, 52px); margin: 0; }

.soluciones { padding: 70px 0 60px; }
.soluciones__rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.soluciones__titulo { font-weight: 900; text-transform: uppercase; font-size: clamp(38px, 5vw, 56px); margin-top: 20px; }
.soluciones__texto > p { font-size: 13px; }
.soluciones__contratos { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-top: 26px; }
.soluciones__num { display: block; font-family: var(--fuente-titulos); font-weight: 700; font-size: 34px; margin-bottom: 14px; }
.soluciones__contratos h3 { font-family: var(--fuente-titulos); font-weight: 700; font-size: 16px; text-transform: uppercase; letter-spacing: .06em; }
.soluciones__contratos p { font-size: 13px; }

.mant-ventajas { background: var(--gris-marron); }
.mant-ventajas__rejilla { display: grid; grid-template-columns: 2.2fr 1fr; padding: 0 24px; }
.mant-ventajas__imagen { background-size: cover; background-position: center; min-height: 560px; }
.mant-ventajas__lista { background: #fff; padding: 30px 26px; }
.mant-ventajas__item { margin-bottom: 30px; }
.mant-ventajas__item svg { width: 30px; height: 30px; fill: none; stroke: #111; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 14px; }
.mant-ventajas__item h3 { font-family: var(--fuente-titulos); font-weight: 700; font-size: 16px; text-transform: uppercase; letter-spacing: .1em; }
.mant-ventajas__item p { font-size: 13px; color: var(--texto-suave); margin: 0; }

.presupuesto { padding: 80px 0 90px; }
.presupuesto__titulo { font-weight: 700; text-transform: uppercase; font-size: clamp(30px, 4vw, 44px); max-width: 900px; margin-bottom: 30px; }

/* Formulario --------------------------------------------------------------- */
.formulario { max-width: 100%; }
.formulario__campo { margin-bottom: 16px; }
.formulario label { display: block; font-size: 14px; margin-bottom: 4px; }
.formulario input[type="text"],
.formulario input[type="email"],
.formulario textarea {
	width: 100%; font: inherit; font-size: 14px; padding: 10px 12px; border: 1px solid #c0c0c0; background: #fff; color: #111;
}
.formulario input:focus, .formulario textarea:focus { outline: 2px solid var(--azul); outline-offset: 0; border-color: var(--azul); }
.formulario textarea { min-height: 110px; resize: vertical; }
.formulario__acepto label { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; }
.formulario__acepto input { margin-top: 4px; }
.formulario__trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formulario__aviso { padding: 12px 16px; font-size: 14px; }
.formulario__aviso--ok { background: #e3f4e6; color: #1b5e20; border-left: 4px solid #2e7d32; }
.formulario__aviso--error { background: #fdecea; color: #8a1c13; border-left: 4px solid #c62828; }

/* ==========================================================================
   INSTALACIONES
   ========================================================================== */
.hero-inst { background-size: cover; background-position: center; background-color: var(--amarillo-claro); }
.hero-inst__rejilla { display: grid; grid-template-columns: 1fr 1fr; min-height: 560px; }
.hero-inst__texto { padding: 70px 40px 50px max(24px, calc((100vw - var(--ancho)) / 2 + 76px)); }
.hero-inst__texto h1 { font-weight: 700; text-transform: uppercase; font-size: clamp(34px, 4vw, 48px); margin-bottom: 12px; }
.hero-inst__texto ul { font-size: 13px; padding-left: 20px; margin: 0 0 22px; }
.hero-inst__texto h2 { font-weight: 700; font-style: italic; font-size: clamp(22px, 2.6vw, 30px); }
.hero-inst__imagen { background-size: cover; background-position: center; min-height: 360px; }

.razones { padding: 30px 0 70px; text-align: center; }
.razones__titulo { font-weight: 700; text-transform: uppercase; font-size: clamp(30px, 4vw, 40px); max-width: 520px; margin: 0 auto 60px; }
.razones__rejilla { display: grid; grid-template-columns: repeat(3, 1fr); gap: 60px 50px; }
.razones__item { position: relative; padding-top: 6px; min-height: 160px; }
.razones__num {
	position: absolute; left: 50%; top: -20px; transform: translateX(-50%); z-index: 0;
	font-family: var(--fuente-titulos); font-weight: 700; font-size: 170px; line-height: 1; color: var(--amarillo-claro); opacity: .55;
}
.razones__item h3, .razones__item p { position: relative; z-index: 1; }
.razones__item h3 { font-weight: 400; text-transform: uppercase; font-size: 20px; margin-bottom: 20px; }
.razones__item p { font-size: 13px; }

.trabajos { padding: 40px 0 60px; text-align: center; }
.trabajos__titulo { font-weight: 400; font-size: clamp(26px, 3.5vw, 38px); text-shadow: 2px 2px 6px rgba(0,0,0,.3); }
.carrusel--trabajos { max-width: 700px; margin: 0 auto; }
.carrusel--trabajos .carrusel__pista { aspect-ratio: 16 / 9.5; }

/* ==========================================================================
   WEBS
   ========================================================================== */
.webs-intro { padding: 40px 0 70px; overflow: hidden; }
.webs-intro__rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.webs-intro__titulo { font-weight: 700; font-size: clamp(34px, 4.6vw, 52px); line-height: 1.2; }
.webs-intro__titulo span { color: #b5bdc8; }
.webs-intro__imagen { position: relative; min-height: 440px; display: flex; align-items: center; }
.webs-intro__bloque { position: absolute; right: -60px; top: 0; bottom: 0; width: 46%; background: #666; }
.webs-intro__imagen img {
	position: relative; width: 82%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; background: #fff;
}

.webs-responsive__rejilla { display: grid; grid-template-columns: 1fr 1fr; }
.webs-responsive__imagen { background-size: cover; background-position: center; min-height: 520px; }
.webs-responsive__texto { padding: 50px 40px; max-width: 560px; }
.webs-responsive__texto h2 { font-weight: 400; font-size: 34px; }
.webs-responsive__texto h2 strong { font-weight: 700; }
.webs-responsive__texto h2 span { color: #b5bdc8; font-weight: 700; }
.webs-responsive__texto > p { font-size: 13px; color: var(--texto-suave); margin-bottom: 8px; }
.webs-responsive__item { display: grid; grid-template-columns: 38px 1fr; gap: 16px; margin-top: 36px; }
.webs-responsive__item svg { width: 34px; height: 34px; fill: none; stroke: #111; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.webs-responsive__item h3 { font-weight: 700; font-size: 15px; text-transform: uppercase; margin: 6px 0 10px; }
.webs-responsive__item p { font-size: 13px; color: var(--texto-suave); margin: 0; }

.contadores { padding: 50px 0 80px; text-align: center; }
.contadores__titulo { font-weight: 400; font-size: 28px; margin-bottom: 70px; }
.contadores__rejilla { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.contadores__num { display: block; font-family: var(--fuente-titulos); font-weight: 400; font-size: 60px; line-height: 1.2; margin-bottom: 14px; }
.contadores p { font-size: 14px; max-width: 200px; margin: 0 auto; }

/* ==========================================================================
   SOFTWARE
   ========================================================================== */
.soft-intro { padding: 40px 0 50px; text-align: center; }
.soft-intro__imagen { width: 100%; aspect-ratio: 2.6 / 1; object-fit: cover; margin-bottom: 40px; }
.soft-intro__titulo { font-weight: 300; text-transform: uppercase; font-size: clamp(36px, 5vw, 60px); max-width: 520px; margin: 0 auto 22px; }
.soft-intro__texto { font-weight: 700; font-style: italic; font-size: 14px; max-width: 560px; margin: 0 auto; }

.programa { padding: 50px 0; }
.programa__rejilla { display: grid; grid-template-columns: 1.6fr 1fr; gap: 40px; align-items: center; }
.programa--invertido .programa__rejilla { grid-template-columns: 1fr 1.6fr; }
.programa__texto { position: relative; padding-top: 20px; }
.programa__deco { position: absolute; width: 76px; top: -20px; left: -20px; z-index: 0; }
.programa__texto h2, .programa__texto p { position: relative; z-index: 1; }
.programa__texto h2 { font-weight: 400; font-size: 28px; margin-bottom: 40px; }
.programa__texto p { font-size: 13px; }
.carrusel--capturas .carrusel__pista { aspect-ratio: 1.95 / 1; }

.soft-destacado {
	background-image: linear-gradient(-90deg, var(--amarillo), var(--azul));
	color: #111; padding: 0; overflow: hidden;
}
.soft-destacado__rejilla { display: grid; grid-template-columns: 1fr 1fr; align-items: center; min-height: 460px; }
.soft-destacado__texto { padding: 40px 30px 40px 0; font-size: 14px; }
.soft-destacado__caja {
	align-self: stretch; display: flex; flex-direction: column; justify-content: center; align-items: flex-end;
	text-align: right; background: #fff; border-radius: 230px 0 0 230px; padding: 50px 30px 50px 60px; margin: 60px -100vw 60px 0; padding-right: calc(100vw + 30px);
}
.soft-destacado__caja h2 { font-weight: 400; font-size: clamp(28px, 3.2vw, 38px); margin-bottom: 30px; max-width: 380px; }

/* ==========================================================================
   VENTAS
   ========================================================================== */
.ventas-hero { background-size: cover; background-position: center; text-align: center; padding: 90px 0 80px; min-height: 520px; display: flex; align-items: center; }
.ventas-hero__titulo { font-weight: 400; text-transform: uppercase; font-size: clamp(42px, 6vw, 72px); line-height: 1.05; max-width: 380px; margin: 0 auto 22px; }
.ventas-hero__titulo span { display: block; font-weight: 300; font-size: .62em; margin-top: 20px; }
.ventas-hero__sub { font-weight: 700; text-transform: uppercase; font-size: 14px; letter-spacing: .06em; }

.reacond { background: var(--rojo); color: #fff; padding: 60px 0; }
.reacond__rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: center; }
.reacond__texto { text-align: right; padding-right: 10px; }
.reacond__antetitulo { font-family: var(--fuente); font-weight: 400; font-size: 18px; text-transform: uppercase; letter-spacing: .2em; margin-bottom: 10px; }
.reacond__cifra { font-family: var(--fuente-titulos); font-weight: 700; font-size: clamp(70px, 9vw, 110px); line-height: 1; margin: 0; }
.reacond__desc { font-family: var(--fuente-titulos); font-weight: 300; text-transform: uppercase; font-size: 32px; margin: 0 0 30px; }
.reacond__garantia { font-size: 11px; text-transform: uppercase; letter-spacing: .2em; }
.carrusel--blanco .carrusel__pista { aspect-ratio: 1.25 / 1; }

.ventas-tipos { background: #000; color: #fff; padding: 70px 0 60px; }
.ventas-tipos__rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.ventas-tipos__num { display: block; font-family: var(--fuente-titulos); font-weight: 900; font-size: 100px; line-height: 1; color: #9a9a9a; margin: 0 0 30px 50px; }
.ventas-tipos h2 { font-family: var(--fuente-titulos); font-weight: 300; text-transform: uppercase; font-size: 26px; }
.ventas-tipos p { font-size: 13px; padding-left: 50px; max-width: 440px; }

.garantias { background-size: cover; background-position: center; color: #fff; min-height: 430px; display: flex; align-items: center; }
.garantias__titulo { font-weight: 300; font-size: clamp(28px, 3.2vw, 38px); max-width: 460px; margin: 120px 0 40px; }

.outlet { background-size: cover; background-position: center; color: #fff; padding: 60px 0; }
.outlet__rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.outlet__marco { position: relative; border: 6px solid #9a9a9a; padding: 60px 20px; margin-left: 60px; max-width: 340px; text-align: center; }
.outlet__pincelada { position: absolute; left: -70px; top: 50%; transform: translateY(-50%); width: 120%; max-width: none; opacity: .9; z-index: 0; }
.outlet__marco h2 { position: relative; z-index: 1; font-weight: 400; text-transform: uppercase; font-size: clamp(30px, 3.6vw, 44px); line-height: 1.15; color: #bbb; text-shadow: 0 2px 4px rgba(0,0,0,.4); margin: 0; }
.outlet__marco h2 strong { color: #eee; font-weight: 700; }
.outlet__texto h3 { font-weight: 700; text-transform: uppercase; font-size: 32px; color: var(--rojo); margin-bottom: 14px; }
.outlet__texto p { font-size: 13px; max-width: 300px; }

.necesidades { background: var(--rojo-vivo); color: #fff; padding: 60px 0 120px; }
.necesidades__titulo { font-weight: 400; text-transform: uppercase; font-size: clamp(26px, 3.4vw, 36px); max-width: 620px; margin-bottom: 30px; }
.necesidades__titulo strong { font-weight: 700; }
.necesidades .formulario label { color: #fff; font-size: 12px; }
.necesidades .formulario input[type="text"], .necesidades .formulario input[type="email"], .necesidades .formulario textarea { border-color: #fff; }
.necesidades .formulario a { color: #fff; }
.necesidades .boton--borde { color: #fff; border-color: #fff; }
.necesidades .boton--borde:hover { background: #fff; color: var(--rojo-vivo); }

/* ==========================================================================
   Páginas de texto (legales)
   ========================================================================== */
.pagina-texto { padding: 60px 0 80px; }
.pagina-texto__titulo { font-weight: 700; font-size: clamp(30px, 4vw, 42px); margin-bottom: 30px; }
.pagina-texto__contenido { font-size: 15px; }
.pagina-texto__contenido h2, .pagina-texto__contenido h3 { font-size: 17px; margin: 32px 0 10px; letter-spacing: .03em; }
.pagina-texto__contenido a { word-break: break-word; }
.entrada { margin-bottom: 40px; }

/* ==========================================================================
   Animación suave al entrar en pantalla
   ========================================================================== */
.js .aparecer { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.js .aparecer.es-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.js .aparecer { opacity: 1; transform: none; transition: none; }
	.carrusel__diapo { transition: none; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 991px) {
	.marcas__rejilla { grid-template-columns: repeat(3, 1fr); }
	.marcas__logo:nth-child(n+6) { grid-row: auto; }
	.marcas__logo:nth-child(6) { grid-column: auto; }
	.mant-ventajas__rejilla { grid-template-columns: 1.4fr 1fr; }
	.soft-destacado__caja { border-radius: 160px 0 0 160px; }
}

@media (max-width: 767px) {
	.inicio-hero { min-height: 380px; text-align: center; }
	.empresa__rejilla,
	.servicio__rejilla,
	.soluciones__rejilla,
	.mant-ventajas__rejilla,
	.hero-inst__rejilla,
	.webs-intro__rejilla,
	.webs-responsive__rejilla,
	.programa__rejilla,
	.programa--invertido .programa__rejilla,
	.soft-destacado__rejilla,
	.reacond__rejilla,
	.ventas-tipos__rejilla,
	.outlet__rejilla { grid-template-columns: 1fr; }

	.empresa__bloque { padding-left: 0; }
	.servicio--derecha .servicio__columna-texto { order: 0; }
	.servicio__mini { display: none; }
	.servicio__caja, .servicio--derecha .servicio__caja { text-align: center; padding: 28px 22px; }
	.servicio__titulo, .servicio--derecha .servicio__titulo, .servicio__texto, .servicio--derecha .servicio__texto,
	.servicio--oscuro .servicio__titulo, .servicio--oscuro .servicio__texto { text-align: center; }
	.servicio--oscuro .servicio__caja { text-align: center; }
	.servicio__imagen img { min-height: 240px; }
	.servicio__num { font-size: 56px; }

	.marcas__rejilla { grid-template-columns: repeat(2, 1fr); gap: 24px; }
	.marcas__logo { height: 70px; }
	.marcas__logo img { max-height: 54px; }

	.hero-mant__caja { width: 100%; min-height: 220px; }
	.hero-mant__fila { min-height: 300px; }
	.soluciones__contratos { grid-template-columns: 1fr; }
	.mant-ventajas__rejilla { padding: 0; }
	.mant-ventajas__imagen { min-height: 260px; }

	.hero-inst__texto { padding: 50px 24px 40px; }
	.razones__rejilla { grid-template-columns: 1fr; gap: 40px; }
	.razones__num { font-size: 130px; }

	.webs-intro__imagen { min-height: 300px; justify-content: center; }
	.webs-intro__bloque { right: -24px; }
	.webs-responsive__imagen { min-height: 260px; }
	.webs-responsive__texto { padding: 40px 24px; }
	.contadores__rejilla { grid-template-columns: 1fr; gap: 40px; }

	.programa--invertido .programa__galeria { order: 2; }
	.soft-destacado__texto { padding: 40px 0 10px; }
	.soft-destacado__caja { align-items: center; text-align: center; border-radius: 30px; margin: 20px 0 40px; padding: 40px 24px; }

	.reacond__texto { text-align: center; padding-right: 0; }
	.ventas-tipos__num, .ventas-tipos p { margin-left: 0; padding-left: 0; }
	.outlet__marco { margin: 0 auto; }
	.outlet__pincelada { left: -20px; width: 110%; }
	.outlet__texto { text-align: center; }
	.outlet__texto p { margin: 0 auto; }
}

@media (max-width: 767px) {
	.webs-intro__bloque { display: none; }
	.webs-intro__imagen img { width: 100%; max-width: 340px; margin: 0 auto; }
	.garantias { position: relative; }
	.garantias::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.55); }
	.garantias .contenedor { position: relative; }
	.garantias__titulo { margin: 60px 0; }
}