:root {
--fondo: #f7fbfe;
--fondo-secundario: #edf6fb;
--blanco: #ffffff;


--azul: #1677b8;
--azul-oscuro: #0b4f79;
--azul-claro: #dceff9;

--texto: #102735;
--texto-secundario: #657984;

--borde: #d9e8ef;

--sombra: 0 15px 40px rgba(23, 83, 112, 0.07);

--radio: 20px;
--ancho: 1180px;


}

body.modo-oscuro {
--fondo: #0c151b;
--fondo-secundario: #111f27;
--blanco: #172832;


--azul: #38a7e8;
--azul-oscuro: #75c8f2;
--azul-claro: #173c50;

--texto: #edf7fc;
--texto-secundario: #a7bbc5;

--borde: #29414d;

--sombra: 0 15px 40px rgba(0, 0, 0, 0.20);


}

/* ================================
GENERAL
================================ */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  }

html {
scroll-behavior: smooth;
scroll-padding-top: 90px;
}

body {
font-family: "DM Sans", sans-serif;
background: var(--fondo);
color: var(--texto);
line-height: 1.7;


transition:
    background 0.3s ease,
    color 0.3s ease;


}

img {
display: block;
max-width: 100%;
}

a {
color: inherit;
text-decoration: none;
}

button {
font-family: inherit;
}

.contenedor {
width: min(var(--ancho), calc(100% - 48px));
margin: 0 auto;
}

.seccion {
padding: 95px 0;
}

.etiqueta {
color: var(--azul);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.16em;
margin-bottom: 18px;
}

/* Todos los párrafos justificados */
body p {
text-align: justify;
}

/* Los títulos siempre alineados a la izquierda */
h1,
h2,
h3 {
text-align: left;
}

/* ================================
NAVEGACIÓN
================================ */

.cabecera {
position: fixed;
top: 0;
left: 0;


width: 100%;
z-index: 1000;

background: rgba(247, 251, 254, 0.90);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);

border-bottom: 1px solid var(--borde);


}

body.modo-oscuro .cabecera {
background: rgba(12, 21, 27, 0.90);
}

.navegacion {
width: min(var(--ancho), calc(100% - 48px));
min-height: 76px;
margin: 0 auto;


display: flex;
align-items: center;
justify-content: space-between;


}

.logo {
font-family: "Manrope", sans-serif;
font-size: 1.08rem;
font-weight: 800;
letter-spacing: -0.03em;


white-space: nowrap;


}

.logo span {
color: var(--azul);
}

/* Zona derecha */

.zona-navegacion {
display: flex;
align-items: center;
gap: 24px;
}

/* Enlaces */

.enlaces-nav {
display: flex;
align-items: center;
gap: 30px;
}

.enlaces-nav a {
color: var(--texto-secundario);
font-size: 0.88rem;
font-weight: 600;


transition: color 0.25s ease;

}

.enlaces-nav a:hover {
color: var(--azul);
}

/* Botón modo */

.boton-tema {
width: 40px;
height: 40px;


border: 1px solid var(--borde);
border-radius: 50%;

background: var(--blanco);
color: var(--texto);

cursor: pointer;
font-size: 1rem;

display: flex;
align-items: center;
justify-content: center;

transition:
    background 0.25s ease,
    color 0.25s ease,
    transform 0.25s ease;


}

.boton-tema:hover {
transform: translateY(-2px);
}

/* Botón hamburguesa */

.boton-menu {
display: none;


width: 40px;
height: 40px;

padding: 8px;

border: 1px solid var(--borde);
border-radius: 10px;

background: var(--blanco);

cursor: pointer;

flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;


}

.boton-menu span {
width: 18px;
height: 2px;


background: var(--texto);
border-radius: 2px;

transition:
    transform 0.25s ease,
    opacity 0.25s ease;


}

/* Menú móvil */

.menu-movil {
display: none;


width: min(var(--ancho), calc(100% - 32px));
margin: 0 auto 12px;

padding: 10px;

background: var(--blanco);
border: 1px solid var(--borde);
border-radius: 14px;

box-shadow: var(--sombra);


}

.menu-movil.abierto {
display: flex;
flex-direction: column;
}

.menu-movil a {
padding: 13px 15px;

color: var(--texto-secundario);
font-size: 0.95rem;
font-weight: 600;

border-radius: 9px;

transition:
    background 0.2s ease,
    color 0.2s ease;


}

.menu-movil a:hover {
background: var(--fondo-secundario);
color: var(--azul);
}

/* ================================
HERO
================================ */

.hero {
min-height: 100vh;
padding: 140px 0 90px;


display: flex;
align-items: center;


}

.hero-contenido {
display: grid;
grid-template-columns: 1fr 0.9fr;
align-items: center;


gap: 70px;


}

.hero-texto {
animation: aparecer 0.8s ease both;
}

.hero h1 {
max-width: 650px;


font-family: "Manrope", sans-serif;

font-size: clamp(2.5rem, 4.6vw, 4.4rem);

line-height: 1.05;
letter-spacing: -0.05em;

margin-bottom: 24px;


}

.hero h1 span {
color: var(--azul);
}

.hero-descripcion {
max-width: 550px;


color: var(--texto-secundario);
font-size: 1rem;

margin-bottom: 32px;


}

.hero-botones {
display: flex;
flex-wrap: wrap;
gap: 12px;
}

.boton {
min-height: 50px;
padding: 0 23px;


display: inline-flex;
align-items: center;
justify-content: center;

border-radius: 10px;

font-weight: 700;
font-size: 0.9rem;

transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    background 0.25s ease;


}

.boton:hover {
transform: translateY(-3px);
}

.boton-principal {
background: var(--azul);
color: white;


box-shadow: 0 12px 30px rgba(22, 119, 184, 0.22);


}

.boton-secundario {
background: var(--blanco);
border: 1px solid var(--borde);
color: var(--texto);
}

.hero-imagen {
animation: aparecerImagen 0.9s ease both;
}

.hero-imagen img {
width: 100%;
max-height: 560px;


object-fit: contain;

border-radius: var(--radio);


}

/* ================================
PRESENTACIÓN
================================ */

.presentacion {
padding: 90px 0;


background: var(--fondo-secundario);

border-top: 1px solid var(--borde);
border-bottom: 1px solid var(--borde);


}

.presentacion-grid {
display: grid;
grid-template-columns: 1fr 1fr;


gap: 90px;
align-items: start;


}

.presentacion h2,
.cabecera-seccion h2,
.empresa-texto h2,
.contacto h2 {
font-family: "Manrope", sans-serif;


font-size: clamp(2rem, 3.4vw, 3.3rem);

line-height: 1.08;
letter-spacing: -0.045em;


}

.presentacion h2 span,
.cabecera-seccion h2 span,
.empresa-texto h2 span,
.contacto h2 span {
color: var(--azul);
}

.presentacion-texto {
max-width: 540px;


color: var(--texto-secundario);
font-size: 0.98rem;


}

.presentacion-texto p + p {
margin-top: 20px;
}

/* ================================
SERVICIO
================================ */

.cabecera-seccion {
display: flex;
align-items: flex-end;
justify-content: space-between;


gap: 40px;
margin-bottom: 50px;


}

.cabecera-seccion h2 {
max-width: 650px;
}

.numero-servicio {
font-family: "Manrope", sans-serif;


font-size: 4rem;
line-height: 1;

font-weight: 800;

color: var(--azul-claro);


}

.servicio-contenido {
display: grid;
grid-template-columns: 0.85fr 1.15fr;


gap: 55px;

padding: 42px;

background: var(--blanco);

border: 1px solid var(--borde);
border-radius: 24px;

box-shadow: var(--sombra);

align-items: flex-start;


}

.servicio-texto {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-self: flex-start;


text-align: justify;


}

.icono-servicio {
width: 50px;
height: 50px;


display: flex;
align-items: center;
justify-content: center;

border-radius: 12px;

background: var(--azul-claro);
color: var(--azul);

font-weight: 800;

margin-bottom: 22px;


}

.servicio-texto h3 {
font-family: "Manrope", sans-serif;


font-size: clamp(1.5rem, 2.5vw, 2.2rem);

line-height: 1.15;
letter-spacing: -0.035em;

margin-top: 0;
margin-bottom: 22px;

text-align: left;


}

.servicio-texto p {
color: var(--texto-secundario);
margin-bottom: 16px;
}

.enlace-servicio {
width: fit-content;


margin-top: 10px;

display: flex;
align-items: center;
gap: 10px;

color: var(--azul);
font-weight: 700;


}

.enlace-servicio span {
font-size: 1.3rem;


transition: transform 0.2s ease;


}

.enlace-servicio:hover span {
transform: translateX(5px);
}

/* Imagen del servicio */

.servicio-imagen {
min-width: 0;


display: flex;
align-items: center;
justify-content: center;

padding: 8px;

background: var(--blanco);

border-radius: 18px;

overflow: hidden;


}

.servicio-imagen img {
width: 100%;
height: auto;
max-height: 620px;


object-fit: contain;

border: none;
outline: none;
box-shadow: none;
border-radius: 8px;


}

/* ================================
EMPRESA
================================ */

.empresa {
background: var(--fondo-secundario);
}

.empresa-grid {
display: grid;
grid-template-columns: 1fr 1fr;


gap: 80px;
align-items: center;


}

.empresa-imagen {
display: flex;
justify-content: center;
}

.empresa-imagen img {
width: 100%;
height: auto;
max-height: 650px;


object-fit: contain;

border-radius: var(--radio);


}

.empresa-texto h2 {
margin-bottom: 28px;
}

.empresa-texto > p:not(.etiqueta) {
color: var(--texto-secundario);
margin-bottom: 17px;
}

.empresa-dato {
display: flex;
align-items: center;
gap: 18px;


margin-top: 32px;
padding-top: 24px;

border-top: 1px solid var(--borde);


}

.empresa-dato strong {
color: var(--azul);


font-family: "Manrope", sans-serif;
font-size: 1.3rem;


}

.empresa-dato span {
color: var(--texto-secundario);
font-weight: 600;
}

/* ================================
CONTACTO
================================ */

.contacto {
padding: 100px 0;
}

.contacto-contenido {
display: grid;
grid-template-columns: 1fr 0.8fr;


gap: 80px;
align-items: center;


}

.contacto h2 {
margin-bottom: 22px;
}

.contacto-contenido > div:first-child > p:last-child {
max-width: 520px;
color: var(--texto-secundario);
}

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

.contacto-item {
display: flex;
align-items: center;
gap: 18px;


padding: 20px;

background: var(--blanco);

border: 1px solid var(--borde);
border-radius: 14px;

transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;


}

.contacto-item:hover {
transform: translateY(-3px);
border-color: var(--azul);
box-shadow: 0 10px 25px rgba(23, 83, 112, 0.06);
}

.contacto-icono {
width: 42px;
height: 42px;


display: flex;
align-items: center;
justify-content: center;

flex-shrink: 0;

border-radius: 10px;

background: var(--azul-claro);
color: var(--azul);

font-size: 0.78rem;
font-weight: 800;


}

.contacto-item small {
display: block;


color: var(--texto-secundario);
font-size: 0.75rem;


}

.contacto-item strong {
font-size: 0.95rem;
}

/* ================================
FOOTER
================================ */

.footer {
border-top: 1px solid var(--borde);
padding: 28px 0;
}

.footer-contenido {
display: flex;
align-items: center;
justify-content: space-between;


gap: 20px;

color: var(--texto-secundario);
font-size: 0.8rem;


}

/* ================================
ANIMACIONES
================================ */

@keyframes aparecer {
from {
opacity: 0;
transform: translateY(25px);
}


to {
    opacity: 1;
    transform: translateY(0);
}


}

@keyframes aparecerImagen {
from {
opacity: 0;
transform: translateX(25px);
}


to {
    opacity: 1;
    transform: translateX(0);
}


}

/* ================================
TABLET
================================ */

@media (max-width: 900px) {


.enlaces-nav {
    display: none;
}

.boton-menu {
    display: flex;
}

.zona-navegacion {
    gap: 10px;
}

.hero-contenido {
    grid-template-columns: 1fr;
    gap: 50px;
}

.hero {
    min-height: auto;
    padding-top: 120px;
}

.hero-texto {
    max-width: 720px;
}

.hero-imagen {
    max-width: 700px;
}

.presentacion-grid,
.empresa-grid,
.contacto-contenido {
    grid-template-columns: 1fr;
    gap: 45px;
}

.servicio-contenido {
    grid-template-columns: 1fr;
    gap: 35px;
}

.servicio-imagen {
    order: -1;
}

.empresa-imagen {
    max-width: 700px;
}


}

/* ================================
MÓVIL
================================ */

@media (max-width: 600px) {


.contenedor,
.navegacion {
    width: calc(100% - 32px);
}

.cabecera {
    position: fixed;
}

.navegacion {
    min-height: 70px;
}

.logo {
    font-size: 0.98rem;
}

.hero {
    padding: 115px 0 70px;
}

.hero h1 {
    font-size: clamp(2.3rem, 11vw, 3.2rem);
}

.hero-descripcion {
    font-size: 0.95rem;
}

.hero-botones {
    flex-direction: column;
}

.boton {
    width: 100%;
}

.hero-imagen img {
    max-height: 450px;
}

.presentacion {
    padding: 70px 0;
}

.presentacion h2,
.cabecera-seccion h2,
.empresa-texto h2,
.contacto h2 {
    font-size: 2.15rem;
}

.seccion {
    padding: 75px 0;
}

.cabecera-seccion {
    align-items: flex-start;
    margin-bottom: 35px;
}

.numero-servicio {
    font-size: 2.8rem;
}

.servicio-contenido {
    padding: 22px;
    border-radius: 18px;
}

.servicio-imagen {
    padding: 6px;
}

.servicio-imagen img {
    max-height: none;
}

.contacto {
    padding: 75px 0;
}

.contacto-item strong {
    font-size: 0.84rem;
    word-break: break-word;
}

.footer-contenido {
    flex-direction: column;
    align-items: flex-start;
}

}

/* ================================
MÓVILES MUY PEQUEÑOS
================================ */

@media (max-width: 380px) {

.hero h1 {
    font-size: 2.2rem;
}

.presentacion h2,
.cabecera-seccion h2,
.empresa-texto h2,
.contacto h2 {
    font-size: 2rem;
}

.servicio-contenido {
    padding: 18px;
}

}

/* ================================
REDUCIR MOVIMIENTO
================================ */

@media (prefers-reduced-motion: reduce) {

html {
    scroll-behavior: auto;
}

*,
*::before,
*::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
}

}