DISEÑO:
[Link]
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Acciona Ingenieros y Obras</title>
<!-- DISEÑO DE PAGINA-->
<link rel="stylesheet" href="assets/css/[Link]">
<!-- ESTILOS DE LETRAS -->
<link rel="preconnect" href="[Link]
<link rel="preconnect" href="[Link] crossorigin>
<link href="[Link]
family=Bebas+Neue&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap"
rel="stylesheet">
<!--ICONOS-->
<link rel="stylesheet" href="[Link]
[Link]"
integrity="sha512-2SwdPD6INVrV/lHTZbO2nodKhrnDdJK9/kg2XD1r9uGqPo1cUbujc+IYdlYdEEr
WNu69gVcYgdxlmVmzTWnetw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<!-- HEADER -->
<header>
<div class="container nav">
<div class="logo">
<img src="assets/img/[Link] " alt="Logo">
<div>
<h1>ACCIONA INGENIEROS Y OBRAS</h1>
<p>ESPECIALISTAS EN INGENIERÍAS ELÉCTRICAS E INFRAESTRUCTURA</p>
</div>
</div>
<nav>
<ul>
<li><a href="[Link]">INICIO</a></li>
<li><a href="assets/pages/[Link]">NUESTROS SERVICIOS</a></li>
<li><a href="assets/pages/[Link]">SOBRE NOSOTROS</a></li>
<li><a href="assets/pages/[Link]">ENVIAR SOLICITUD</a></li>
<li><a href="assets/pages/[Link]">CONTACTO</a></li>
</ul>
</nav>
</div>
</header>
<!-- MAIN -->
<main>
<!-- HERO -->
<section class="hero">
<div class="overlay">
<h2>BIENVENIDO A ACCIONA INGENIEROS Y OBRAS</h2>
<p>
Nosotros existimos con el propósito de optimizar, diseñar, proyectar y construir
según sus requerimientos, con los más altos estándares de calidad.
Optimización energética y económica, la mejora continua de todos sus procesos
industriales.
</p>
</div>
</section>
<!-- FEATURES -->
<section class="features">
<h2>¿Por que Elegirnos?</h2>
<div class="cards">
<div class="card">
<div class="contenido">
<div class="icon">
<i class="fa-solid fa-piggy-bank"></i>
</div>
<h3>Precio Justo</h3>
<p>Nuestras tarifas son las mejores del mercado y las mas competitivas</p>
</div>
</div>
<div class="card">
<div class="contenido">
<div class="icon">
<i class="fa-solid fa-shield-halved"></i>
</div>
<h3>Seguridad</h3>
<p>Somos una empresa con muchos años de experiencia</p>
</div>
</div>
<div class="card">
<div class="contenido">
<div class="icon">
<i class="fa-solid fa-headset"></i>
</div>
<h3>24x7 Soporte</h3>
<p>Contamos con un personal siempre dispuesto para poder colaborar</p>
</div>
</div>
<div class="card">
<div class="contenido">
<div class="icon">
<i class="fa-solid fa-gear"></i>
</div>
<h3>Conocimiento técnico</h3>
<p>Nuestro equipo está conformado por profesionales.</p>
</div>
</div>
<div class="card">
<div class="contenido">
<div class="icon">
<i class="fa-solid fa-tractor"></i>
</div>
<h3>Equipos propios</h3>
<p>Manejamos nuestros propios equipos</p>
</div>
</div>
</div>
</section>
</main>
<!-- FOOTER -->
<footer class="footer">
<p>© 2026 Acciona Ingenieros y Obras</p>
</footer>
</body>
</html>
[Link]
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Acciona Ingenieros y Obras</title>
<!-- DISEÑO DE PAGINA-->
<link rel="stylesheet" href="../css/[Link]">
<!-- ESTILOS DE LETRAS -->
<link rel="preconnect" href="[Link]
<link rel="preconnect" href="[Link] crossorigin>
<link href="[Link]
family=Bebas+Neue&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap"
rel="stylesheet">
<!--ICONOS-->
<link rel="stylesheet" href="[Link]
[Link]"
integrity="sha512-2SwdPD6INVrV/lHTZbO2nodKhrnDdJK9/kg2XD1r9uGqPo1cUbujc+IYdlYdEEr
WNu69gVcYgdxlmVmzTWnetw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<!-- HEADER -->
<header>
<div class="container nav">
<div class="logo">
<img src="../img/[Link] " alt="Logo">
<div>
<h1>ACCIONA INGENIEROS Y OBRAS</h1>
<p>ESPECIALISTAS EN INGENIERÍAS ELÉCTRICAS E INFRAESTRUCTURA</p>
</div>
</div>
<nav>
<ul>
<li><a href="../../[Link]">INICIO</a></li>
<li><a href="[Link]">NUESTROS SERVICIOS</a></li>
<li><a href="[Link]">SOBRE NOSOTROS</a></li>
<li><a href="[Link]">ENVIAR SOLICITUD</a></li>
<li><a href="[Link]">CONTACTO</a></li>
</ul>
</nav>
</div>
</header>
<!-- MAIN -->
<main>
<!-- SECCIÓN SERVICIOS -->
<section class="servicios">
<h2>NUESTROS SERVICIOS</h2>
<div class="contenedor-servicios">
<!-- TARJETA 1 -->
<div class="card-servicios">
<img src="../img/[Link]" alt="Servicios eléctricos">
<div class="overlay-servicios">
<h3>SERVICIOS ELECTRICOS</h3>
<a href="./[Link]" class="btn-servicios">Clic Aqui</a>
</div>
</div>
<!-- TARJETA 2 -->
<div class="card-servicios">
<img src="../img/[Link]" alt="Infraestructura">
<div class="overlay-servicios">
<h3>SERVICIOS DE INFRAESTRUCTURA</h3>
<a href="./[Link]" class="btn-servicios">Clic Aqui</a>
</div>
</div>
</div>
</section>
</main>
<!-- FOOTER -->
<footer class="footer">
<p>© 2026 Acciona Ingenieros y Obras</p>
</footer>
</body>
</html>
[Link]
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Acciona Ingenieros y Obras</title>
<!-- DISEÑO DE PAGINA-->
<link rel="stylesheet" href="../css/[Link]">
<!-- ESTILOS DE LETRAS -->
<link rel="preconnect" href="[Link]
<link rel="preconnect" href="[Link] crossorigin>
<link href="[Link]
family=Bebas+Neue&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap"
rel="stylesheet">
<!--ICONOS-->
<link rel="stylesheet" href="[Link]
[Link]"
integrity="sha512-2SwdPD6INVrV/lHTZbO2nodKhrnDdJK9/kg2XD1r9uGqPo1cUbujc+IYdlYdEEr
WNu69gVcYgdxlmVmzTWnetw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<!-- HEADER -->
<header>
<div class="container nav">
<div class="logo">
<img src="../img/[Link] " alt="Logo">
<div>
<h1>ACCIONA INGENIEROS Y OBRAS</h1>
<p>ESPECIALISTAS EN INGENIERÍAS ELÉCTRICAS E INFRAESTRUCTURA</p>
</div>
</div>
<nav>
<ul>
<li><a href="../../[Link]">INICIO</a></li>
<li><a href="[Link]">NUESTROS SERVICIOS</a></li>
<li><a href="[Link]">SOBRE NOSOTROS</a></li>
<li><a href="[Link]">ENVIAR SOLICITUD</a></li>
<li><a href="[Link]">CONTACTO</a></li>
</ul>
</nav>
</div>
</header>
<!-- MAIN -->
<main>
<!-- SECCIÓN SERVICIOS -->
<section class="servicios">
<h2>SERVICIOS ELECTRICOS</h2>
<div class="contenedor-servicioselect">
<!-- CARD 1 -->
<div class="card-servicioselect">
<h3>Subestacion Electrica</h3>
<p>Servicio de mantenimiento preventivo y correctivo de subestaciones
eléctricas.</p>
<img src="../img/[Link]" alt="Subestación">
<button>Solicitar Servicio</button>
</div>
<!-- CARD 2 -->
<div class="card-servicioselect">
<h3>Tableros eléctricos</h3>
<p>Gestión, instalación y mantenimiento de tableros eléctricos.</p>
<img src="../img/[Link]" alt="Tableros">
<button>Solicitar Servicio</button>
</div>
<!-- CARD 3 -->
<div class="card-servicioselect">
<h3>Sistemas puesta a tierra (SPAT)</h3>
<p>Construcción y mantenimiento de sistemas eléctricos industriales.</p>
<img src="../img/[Link]" alt="SPAT">
<button>Solicitar Servicio</button>
</div>
<!-- CARD 4 -->
<div class="card-servicioselect">
<h3>Más servicios eléctricos</h3>
<p>Diseño, supervisión y análisis de instalaciones eléctricas.</p>
<img src="../img/[Link]" alt="Servicios">
<button>Solicitar Servicio</button>
</div>
</div>
</section>
<!-- GALERÍA -->
<section class="galeria">
<h2>Galeria de Proyectos</h2>
<div class="grid-galeria">
<img src="../img/[Link]" alt="">
<img src="../img/[Link]" alt="">
<img src="../img/[Link]" alt="">
<img src="../img/[Link]" alt="">
</div>
</section>
</main>
<!-- FOOTER -->
<footer class="footer">
<p>© 2026 Acciona Ingenieros y Obras</p>
</footer>
</body>
</html>
[Link]
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Acciona Ingenieros y Obras</title>
<!-- DISEÑO DE PAGINA-->
<link rel="stylesheet" href="../css/[Link]">
<!-- ESTILOS DE LETRAS -->
<link rel="preconnect" href="[Link]
<link rel="preconnect" href="[Link] crossorigin>
<link href="[Link]
family=Bebas+Neue&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap"
rel="stylesheet">
<!--ICONOS-->
<link rel="stylesheet" href="[Link]
[Link]"
integrity="sha512-2SwdPD6INVrV/lHTZbO2nodKhrnDdJK9/kg2XD1r9uGqPo1cUbujc+IYdlYdEEr
WNu69gVcYgdxlmVmzTWnetw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<!-- HEADER -->
<header>
<div class="container nav">
<div class="logo">
<img src="../img/[Link] " alt="Logo">
<div>
<h1>ACCIONA INGENIEROS Y OBRAS</h1>
<p>ESPECIALISTAS EN INGENIERÍAS ELÉCTRICAS E INFRAESTRUCTURA</p>
</div>
</div>
<nav>
<ul>
<li><a href="../../[Link]">INICIO</a></li>
<li><a href="[Link]">NUESTROS SERVICIOS</a></li>
<li><a href="[Link]">SOBRE NOSOTROS</a></li>
<li><a href="[Link]">ENVIAR SOLICITUD</a></li>
<li><a href="[Link]">CONTACTO</a></li>
</ul>
</nav>
</div>
</header>
<!-- MAIN -->
<main>
</main>
<!-- FOOTER -->
<footer class="footer">
<p>© 2026 Acciona Ingenieros y Obras</p>
</footer>
</body>
</html>
[Link]
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Acciona Ingenieros y Obras</title>
<!-- DISEÑO DE PAGINA-->
<link rel="stylesheet" href="../css/[Link]">
<!-- ESTILOS DE LETRAS -->
<link rel="preconnect" href="[Link]
<link rel="preconnect" href="[Link] crossorigin>
<link href="[Link]
family=Bebas+Neue&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap"
rel="stylesheet">
<!--ICONOS-->
<link rel="stylesheet" href="[Link]
[Link]"
integrity="sha512-2SwdPD6INVrV/lHTZbO2nodKhrnDdJK9/kg2XD1r9uGqPo1cUbujc+IYdlYdEEr
WNu69gVcYgdxlmVmzTWnetw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<!-- HEADER -->
<header>
<div class="container nav">
<div class="logo">
<img src="../img/[Link] " alt="Logo">
<div>
<h1>ACCIONA INGENIEROS Y OBRAS</h1>
<p>ESPECIALISTAS EN INGENIERÍAS ELÉCTRICAS E INFRAESTRUCTURA</p>
</div>
</div>
<nav>
<ul>
<li><a href="../../[Link]">INICIO</a></li>
<li><a href="[Link]">NUESTROS SERVICIOS</a></li>
<li><a href="[Link]">SOBRE NOSOTROS</a></li>
<li><a href="[Link]">ENVIAR SOLICITUD</a></li>
<li><a href="[Link]">CONTACTO</a></li>
</ul>
</nav>
</div>
</header>
<!-- MAIN -->
<main class="section-sn">
<div class="container-sn">
<div>
<h2>¡Quienes somos?</h2>
<p>
Somos una empresa peruana dedicada a ofrecer soluciones integrales en servicios
generales y proyectos de ingeniería. Combinamos la experiencia técnica especializada
con un enfoque en la eficiencia y la calidad, satisfaciendo las diversas necesidades
del sector industrial, comercial, público y privado.
</p>
<br>
<p>
Nuestro equipo está conformado por profesionales y técnicos altamente capacitados,
con valores sólidos y preparados para la ejecución de proyectos complejos y servicios
de mantenimiento con los más altos estándares de seguridad y responsabilidad.
</p>
</div>
<div>
<img src="../img/quienes [Link]" alt="Equipo de trabajo">
</div>
</div>
</main>
<!-- FOOTER -->
<footer class="footer">
<p>© 2026 Acciona Ingenieros y Obras</p>
</footer>
</body>
</html>
[Link]
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Acciona Ingenieros y Obras</title>
<!-- DISEÑO DE PAGINA-->
<link rel="stylesheet" href="../css/[Link]">
<!-- ESTILOS DE LETRAS -->
<link rel="preconnect" href="[Link]
<link rel="preconnect" href="[Link] crossorigin>
<link href="[Link]
family=Bebas+Neue&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap"
rel="stylesheet">
<!--ICONOS-->
<link rel="stylesheet" href="[Link]
[Link]"
integrity="sha512-2SwdPD6INVrV/lHTZbO2nodKhrnDdJK9/kg2XD1r9uGqPo1cUbujc+IYdlYdEEr
WNu69gVcYgdxlmVmzTWnetw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<!-- HEADER -->
<header>
<div class="container nav">
<div class="logo">
<img src="../img/[Link] " alt="Logo">
<div>
<h1>ACCIONA INGENIEROS Y OBRAS</h1>
<p>ESPECIALISTAS EN INGENIERÍAS ELÉCTRICAS E INFRAESTRUCTURA</p>
</div>
</div>
<nav>
<ul>
<li><a href="../../[Link]">INICIO</a></li>
<li><a href="[Link]">NUESTROS SERVICIOS</a></li>
<li><a href="[Link]">SOBRE NOSOTROS</a></li>
<li><a href="[Link]">ENVIAR SOLICITUD</a></li>
<li><a href="[Link]">CONTACTO</a></li>
</ul>
</nav>
</div>
</header>
<!-- MAIN -->
<!-- CONTENIDO PRINCIPAL -->
<main class="main-envsolic">
<div class="formulario-envsolic">
<h2>Solicitud de servicio</h2>
<form>
<div>
<h3>Datos del Cliente</h3>
<label for="nombre">Nombre Completo: </label>
<input type="text" placeholder="Ingresa tu nombre" name="nombre" required>
<label for="telefono">Telefono celular: </label>
<input type="tel" placeholder="Ingresa tu numero de celular" pattern="[0-9]{3}-[0-
9]{3}-[0-9]{3}" name="telefono" required>
<label for="email">Correo electronico: </label>
<input type="email" placeholder="Ingresa tu correo" name="email" required>
</div>
<div>
<h3>Tipo de Servicio</h3>
<label for="oficina"> Servicio: </label>
<select name="oficina" id="" required>
<option selected= "true">Selecciona una servicio</option>
<option value="">Servicios Electricos</option>
<option value="">Servicios de Infraestructura </option>
</select>
</div>
<div>
<h3>Detalles del Servicio</h3>
<label for="direccion">Direccion del servicio: </label> <br>
<input type="text" placeholder="Ingrese la dirección" name="direccion" required>
<label for="fecha">Fecha del servicio: </label> <br>
<input type="date" placeholder="Ingrese la fecha" name="fecha" required>
<label for="problema">Problema</label>
<textarea placeholder="Describa el problema o servicio solicitado"
name="problema" rows="5" cols="60" id="" required></textarea>
</div>
<div class="radio">
<label for="">Prioridad: </label><br>
<label><input type="radio" name="Prioridad"> Normal</label> <br>
<label><input type="radio" name="Prioridad"> Urgente</label>
</div>
<div class="div-btn">
<input class="btn-envsolic" type="reset" value="Borrar Datos">
<button class="btn-envsolic" type="submit">Enviar Solicitud</button>
</div>
</form>
</div>
</main>
<!-- FOOTER -->
<footer class="footer">
<p>© 2026 Acciona Ingenieros y Obras</p>
</footer>
</body>
</html>
[Link]
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Acciona Ingenieros y Obras</title>
<!-- DISEÑO DE PAGINA-->
<link rel="stylesheet" href="../css/[Link]">
<!-- ESTILOS DE LETRAS -->
<link rel="preconnect" href="[Link]
<link rel="preconnect" href="[Link] crossorigin>
<link href="[Link]
family=Bebas+Neue&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap"
rel="stylesheet">
<!--ICONOS-->
<link rel="stylesheet" href="[Link]
[Link]"
integrity="sha512-2SwdPD6INVrV/lHTZbO2nodKhrnDdJK9/kg2XD1r9uGqPo1cUbujc+IYdlYdEEr
WNu69gVcYgdxlmVmzTWnetw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<!-- HEADER -->
<header>
<div class="container nav">
<div class="logo">
<img src="../img/[Link] " alt="Logo">
<div>
<h1>ACCIONA INGENIEROS Y OBRAS</h1>
<p>ESPECIALISTAS EN INGENIERÍAS ELÉCTRICAS E INFRAESTRUCTURA</p>
</div>
</div>
<nav>
<ul>
<li><a href="../../[Link]">INICIO</a></li>
<li><a href="[Link]">NUESTROS SERVICIOS</a></li>
<li><a href="[Link]">SOBRE NOSOTROS</a></li>
<li><a href="[Link]">ENVIAR SOLICITUD</a></li>
<li><a href="[Link]">CONTACTO</a></li>
</ul>
</nav>
</div>
</header>
<!-- MAIN -->
<main>
</main>
<!-- FOOTER -->
<footer class="footer">
<p>© 2026 Acciona Ingenieros y Obras</p>
</footer>
</body>
</html>
[Link]
:root{
--color1: white;
--color2: #222222;
--color3: #81cbe6;
--fuente1: Arial, sans-serif;
--fuente2:"Bebas Neue", sans-serif
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: var(--fuente1);
body {
background: var(--color1);
}
/* HEADER */
header {
background: var(--color1);
border-bottom: 1px solid var(--color1);
.container {
width: 90%;
margin: auto;
.logo {
display: flex;
align-items: center;
.logo img {
width: 80px;
margin-right: 10px;
.logo h1 {
font-family: var(--fuente2);
font-weight: 400;
font-style: normal;
font-size: 1.5rem;
.logo p {
font-family: var(--fuente2);
font-weight: 400;
font-style: normal;
color: gray;
font-size: 0.9rem;
.nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 2px 0;
nav ul {
list-style: none;
display: flex;
nav ul li {
margin-left: 30px;
nav ul li a {
font-family: var(--fuente2);
font-weight: 400;
font-style: normal;
font-size: 1.5rem;
text-decoration: none;
color: black;
font-weight: bold;
text-shadow: 2px 2px 5px gray;
}
/* HERO */
.hero {
background-image: url(../img/[Link]);
height: 450px;
width: 100%;
background-size: cover;
background-position: center;
position: relative;
.overlay {
background: rgba(0, 0, 0, 0.5);
height: 100%;
color: var(--color1);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
.overlay::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(54, 176, 192, 0.103);
}
.overlay h2 {
font-size: 3rem;
font-weight: bold;
margin-bottom: 50px;
.overlay p {
font-size: 1rem;
font-weight: bold;
max-width: 1200px;
/* FEATURES */
.features {
text-align: center;
padding: 20px 20px;
.features h2 {
margin-bottom: 20px;
font-size: 2.5rem;
.cards {
display: flex;
justify-content: center;
gap: 50px;
}
.card {
position: relative;
width: 250px;
height: 400px;
background-image: url('../img/[Link]');
background-size: cover;
background-position: center;
color: var(--color1);
overflow: hidden;
.card::before {
content: "";
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.849);
.contenido {
position: relative;
z-index: 2;
padding: 20px;
.card:hover {
transform: translateY(-8px);
.icon {
font-size: 50px;
border: 4px solid var(--color1);
border-radius: 50%;
padding: 35px;
display: inline-block;
margin-bottom: 15px;
.card h3 {
padding: 15px;
margin: 10px 0;
.card p {
padding: 20px;
font-size: 1rem;
/* FOOTER */
.footer {
background: #cfe3ea;
text-align: center;
padding: 15px;
margin-top: 10px;
/* **********************************NUESTROS SERVICIOS
***************************************************** */
.servicios {
text-align: center;
padding: 20px 0px;
background: url(../img/[Link]) center/cover no-repeat;
}
.servicios h2 {
font-size: 3rem;
font-weight: bold;
margin-bottom: 30px;
/* CONTENEDOR */
.contenedor-servicios {
display: flex;
justify-content: center;
gap: 40px;
flex-wrap: wrap;
/* TARJETAS */
.card-servicios {
position: relative;
width: 600px;
height: 500px;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 6px 15px rgba(0,0,0,0.2);
.card-servicios img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* OVERLAY */
.overlay-servicios {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.4);
color: var(--color1);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
/* TEXTO */
.overlay-servicios h3 {
font-size: 2rem;
font-weight: bold;
margin-bottom: 20px;
text-align: center;
padding: 90px;
/* BOTÓN */
.btn-servicios {
background: rgba(0, 51, 102, 0.8);
padding: 20px 30px;
border-radius: 30px;
color: var(--color1);
text-decoration: none;
font-size: 1.5rem;
font-weight: bold;
transition: 0.3s;
.btn-servicios:hover {
background: #003366;
transform: scale(1.05);
/* **************************SERVICIOS: SERVICIOS
ELECTRICOS************************** */
/* CARDS */
.contenedor-servicioselect {
display: flex;
gap: 20px;
justify-content: center;
flex-wrap: wrap;
.card-servicioselect {
background: rgba(0,0,0,0.4);
color: white;
width: 300px;
padding: 40px;
border-radius: 15px;
backdrop-filter: blur(5px);
text-align: center;
}
.card-servicioselect h3 {
font-size: 1.5rem;
margin-bottom: 5px;
margin-bottom: 20px;
.card-servicioselect p {
font-size: 1rem;
margin-bottom: 25px;
/* IMAGEN REDONDA */
.card-servicioselect img {
width: 150px;
height: 150px;
object-fit: cover;
border-radius: 50%;
margin-bottom: 15px;
/* BOTÓN */
.card-servicioselect button {
padding: 10px 20px;
border: none;
border-radius: 20px;
background: var(--color1);
cursor: pointer;
font-weight: bold;
.card-servicioselect button:hover {
background: var(--color3);
/* GALERÍA */
.galeria {
padding: 40px 20px;
text-align: center;
.galeria h2 {
font-size: 3rem;
font-weight: bold;
margin-bottom: 30px;
.grid-galeria {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
.grid-galeria img {
width: 100%;
height: 200px;
object-fit: cover;
/* **************************SERVICIOS: SERVICIOS DE
INFRAESTRUCTURA************************** */
/* **************************SOBRE NOSOTROS************************** */
.section-sn {
background-image: url(../img/[Link]);
padding: 100px;
.container-sn {
background: var(--color1);
max-width: 1400px;
margin: auto;
border-radius: 20px;
padding: 40px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
align-items: center;
.container-sn h2 {
font-size: 2rem;
margin-bottom: 20px;
font-weight: bold;
text-align: center;
font-family: var(--fuente2);
.container-sn p {
font-size: 1rem;
line-height: 1.6;
text-align: center;
font-weight: bold;
font-family: var(--fuente1);
.container-sn img {
width: 100%;
border-radius: 15px;
/* *******************************************ENVIAR
SOLICITUD*************************************** */
.main-envsolic {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
background:
linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)),
url("../img/[Link]");
background-size: cover;
background-position: center;
padding: 20px;
/* FORMULARIO */
.formulario-envsolic {
width: 420px;
background: var(--color1);
padding: 30px;
border-radius: 15px;
box-shadow: 0 10px 25px rgba(0,0,0,0.3);
.formulario-envsolic h2 {
text-align: center;
margin-bottom: 20px;
color: #2f4f7f;
form h3 {
margin: 10px 0;
font-size: 1rem;
/* INPUTS */
input, select, textarea {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border-radius: 8px;
border: 1px solid #ccc;
/* TEXTAREA */
textarea {
height: 80px;
resize: none;
}
/* RADIO */
.radio {
display: flex;
gap: 10px;
margin-bottom: 10px;
.div-btn{
display: flex;
gap: 10px;
margin-bottom: 10px;
/* BOTÓN */
.btn-envsolic {
width: 100%;
padding: 12px;
background: linear-gradient(to right, #2f6fd6, #3d8bff);
color:var(--color1);
border: none;
border-radius: 10px;
font-size: 16px;
cursor: pointer;
.btn-envsolic:hover {
opacity: 0.9;
/* **************************CONTACTO************************** */
/* ********************************************MEDIA QUERY
768PX************************** */
@media (max-width: 768px) {
.cards {
flex-direction: column;
align-items: center;
.card {
width: 90%;