* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
font-family:
"Segoe UI",
Arial,
sans-serif;
color:
var(--color-texto);
background:
var(--color-fondo);
overflow-x:
hidden;
}
a {
text-decoration: none;
}
img {
max-width: 100%;
}
.seccion {
padding:
62px 0;
}
/* =========================================================
TÍTULOS
========================================================= */
.titulo-seccion {
max-width:
680px;
margin:
0 auto 30px;
text-align:
center;
}
.titulo-seccion > span,
.subtitulo {
display:
block;
margin-bottom:
6px;
color:
var(--color-acento);
font-size:
.74rem;
font-weight:
700;
letter-spacing:
.12em;
text-transform:
uppercase;
}
.titulo-seccion h2,
.contacto-info h2 {
margin:
0 0 10px;
color:
var(--color-primario-oscuro);
font-size:
clamp(
1.8rem,
4vw,
2.45rem
);
font-weight:
700;
}
.titulo-seccion p,
.contacto-info > p {
margin: 0;
color:
var(--color-texto-secundario);
line-height:
1.6;
}
/* =========================================================
HEADER
========================================================= */
.header {
position:
fixed;
top:
0;
left:
0;
z-index:
1000;
width:
100%;
background:
var(--color-header);
border-bottom:
1px solid
var(--color-borde);
}
.header.sombra {
box-shadow:
0 6px 22px
rgba(
0,
0,
0,
.08
);
}
.navbar {
min-height:
88px;
}
.navbar-brand {
display:
flex;
align-items:
center;
}
.logo {
width:
auto;
max-width:
280px;
max-height:
72px;
object-fit:
contain;
}
.navbar-toggler {
border:
none;
color:
var(--color-primario);
font-size:
1.8rem;
}
.navbar-toggler:focus {
box-shadow:
none;
}
.nav-link {
padding:
10px 12px !important;
color:
var(--color-texto) !important;
font-size:
.9rem;
font-weight:
500;
}
.nav-link:hover {
color:
var(--color-primario) !important;
}
.btn-contacto-menu {
margin-left:
8px;
padding:
9px 16px;
border:
1px solid
var(--color-primario);
border-radius:
6px;
color:
var(--color-primario);
font-size:
.87rem;
font-weight:
600;
}
.btn-contacto-menu:hover {
background:
var(--color-primario);
color:
var(--color-boton-texto);
}
/* =========================================================
HERO
========================================================= */
.hero {
min-height:
570px;
display:
flex;
align-items:
center;
background-color:
var(--color-primario-oscuro);
background-position:
center;
background-repeat:
no-repeat;
background-size:
cover;
}
.hero-contenido {
max-width:
700px;
padding-top:
88px;
color:
var(--color-texto-hero);
}
.hero-marca {
margin-bottom:
13px;
color:
var(--color-acento);
font-size:
.76rem;
font-weight:
700;
letter-spacing:
.14em;
text-transform:
uppercase;
}
.hero h1 {
margin:
0 0 18px;
color:
var(--color-texto-hero);
font-size:
clamp(
3rem,
6vw,
4.7rem
);
font-weight:
700;
line-height:
1;
}
.hero h1 span {
display:
block;
color:
var(--color-acento);
}
.hero p {
max-width:
610px;
margin:
0 0 25px;
color:
var(--color-texto-hero);
font-size:
1rem;
line-height:
1.6;
}
.hero-botones {
display:
flex;
flex-wrap:
wrap;
gap:
10px;
}
.btn-hero-principal,
.btn-hero-secundario {
padding:
11px 17px;
border-radius:
6px;
font-size:
.88rem;
font-weight:
600;
}
.btn-hero-principal {
border:
1px solid
var(--color-primario);
background:
var(--color-primario);
color:
var(--color-boton-texto);
}
.btn-hero-principal:hover {
background:
var(--color-primario-oscuro);
border-color:
var(--color-primario-oscuro);
color:
var(--color-boton-texto);
}
.btn-hero-secundario {
border:
1px solid
var(--color-texto-hero);
color:
var(--color-texto-hero);
}
.btn-hero-secundario:hover {
background:
var(--color-texto-hero);
color:
var(--color-primario-oscuro);
}
/* =========================================================
SECCIONES
========================================================= */
.oferta,
.accesos {
background:
var(--color-fondo-alterno);
}
.planteles,
.contacto {
background:
var(--color-fondo);
}
/* =========================================================
TARJETAS
========================================================= */
.card-programa,
.card-plantel,
.card-acceso {
height:
100%;
display:
flex;
flex-direction:
column;
padding:
22px;
border:
1px solid
var(--color-borde);
border-radius:
10px;
background:
var(--color-fondo);
transition:
transform .2s ease,
box-shadow .2s ease;
}
.card-plantel {
background:
var(--color-fondo-alterno);
}
.card-programa:hover,
.card-plantel:hover,
.card-acceso:hover {
transform:
translateY(-4px);
box-shadow:
0 14px 35px
rgba(
0,
0,
0,
.08
);
}
.card-cabecera {
display:
flex;
align-items:
center;
justify-content:
space-between;
gap:
12px;
margin-bottom:
15px;
}
.card-icono,
.acceso-icono,
.contacto-icono {
display:
flex;
align-items:
center;
justify-content:
center;
background:
var(--color-secundario);
color:
var(--color-primario);
}
.card-icono,
.acceso-icono {
width:
46px;
height:
46px;
flex:
0 0 46px;
border-radius:
8px;
font-size:
1.2rem;
}
.acceso-icono {
margin-bottom:
13px;
}
.card-etiqueta {
color:
var(--color-acento);
font-size:
.7rem;
font-weight:
700;
text-transform:
uppercase;
}
.card-programa h3,
.card-plantel h3,
.card-acceso h3 {
margin:
0 0 12px;
color:
var(--color-primario-oscuro);
font-size:
1.08rem;
font-weight:
700;
}
/* =========================================================
PROGRAMA
========================================================= */
.programa-datos {
display:
flex;
flex-direction:
column;
gap:
7px;
margin-bottom:
12px;
}
.programa-datos > div {
display:
flex;
gap:
7px;
color:
var(--color-texto-secundario);
font-size:
.81rem;
}
.programa-datos i {
color:
var(--color-primario);
}
.descripcion {
flex:
1;
color:
var(--color-texto-secundario);
font-size:
.85rem;
line-height:
1.5;
}
.rvoe {
margin-bottom:
13px;
color:
var(--color-texto-secundario);
font-size:
.74rem;
}
.btn-interes-programa,
.btn-interes-plantel {
align-self:
flex-start;
padding:
0;
border:
none;
background:
transparent;
color:
var(--color-primario);
font-size:
.84rem;
font-weight:
700;
}
/* =========================================================
PLANTELES
========================================================= */
.plantel-datos {
flex:
1;
display:
flex;
flex-direction:
column;
gap:
9px;
margin-bottom:
17px;
}
.plantel-datos > div {
display:
flex;
align-items:
flex-start;
gap:
8px;
color:
var(--color-texto-secundario);
font-size:
.82rem;
line-height:
1.45;
}
.plantel-datos i {
color:
var(--color-primario);
}
/* =========================================================
ACCESOS
========================================================= */
.card-acceso {
color:
var(--color-texto);
}
.card-acceso p {
flex:
1;
color:
var(--color-texto-secundario);
font-size:
.82rem;
}
.card-acceso span {
color:
var(--color-primario);
font-size:
.82rem;
font-weight:
600;
}
/* =========================================================
CONTACTO
========================================================= */
.contacto-info {
max-width:
460px;
}
.contacto-imagen {
margin-top:
22px;
}
.contacto-imagen img {
width:
100%;
max-height:
245px;
object-fit:
cover;
border-radius:
10px;
}
.contacto-datos {
display:
flex;
flex-direction:
column;
gap:
13px;
margin-top:
25px;
}
.contacto-datos > div {
display:
flex;
align-items:
center;
gap:
11px;
}
.contacto-icono {
width:
42px;
height:
42px;
flex:
0 0 42px;
border-radius:
7px;
}
.contacto-datos small {
display:
block;
color:
var(--color-texto-secundario);
font-size:
.72rem;
}
.contacto-datos strong {
display:
block;
color:
var(--color-primario-oscuro);
font-size:
.88rem;
}
/* =========================================================
FORMULARIO
========================================================= */
.form-contacto {
height:
100%;
padding:
26px;
border:
1px solid
var(--color-borde);
border-radius:
10px;
background:
var(--color-fondo-alterno);
}
.form-titulo {
margin-bottom:
20px;
}
.form-titulo h3 {
margin:
0 0 5px;
color:
var(--color-primario-oscuro);
font-size:
1.2rem;
font-weight:
700;
}
.form-titulo p {
margin:
0;
color:
var(--color-texto-secundario);
font-size:
.82rem;
}
.form-label {
margin-bottom:
5px;
color:
var(--color-texto);
font-size:
.81rem;
font-weight:
600;
}
.form-control,
.form-select {
min-height:
44px;
border:
1px solid
var(--color-borde);
border-radius:
6px;
background:
var(--color-fondo);
color:
var(--color-texto);
font-size:
.86rem;
}
textarea.form-control {
min-height:
85px;
resize:
vertical;
}
.form-control:focus,
.form-select:focus {
border-color:
var(--color-primario);
box-shadow:
0 0 0 3px
color-mix(
in srgb,
var(--color-primario) 10%,
transparent
);
}
.btn-enviar {
padding:
10px 17px;
border:
none;
border-radius:
6px;
background:
var(--color-primario);
color:
var(--color-boton-texto);
font-size:
.87rem;
font-weight:
600;
}
.btn-enviar:hover {
background:
var(--color-primario-oscuro);
color:
var(--color-boton-texto);
}
/* =========================================================
FOOTER
========================================================= */
.footer {
padding:
38px 0 17px;
background:
var(--color-footer);
color:
var(--color-texto-hero);
}
.footer-principal {
display:
flex;
justify-content:
space-between;
align-items:
center;
gap:
30px;
}
.footer-identidad {
display:
flex;
flex-direction:
column;
}
.footer-identidad img {
width:
auto;
max-width:
220px;
max-height:
65px;
margin-bottom:
8px;
object-fit:
contain;
}
.footer-identidad strong {
color:
var(--color-texto-hero);
font-size:
.88rem;
}
.footer-identidad span {
font-size:
.77rem;
}
.footer-redes {
display:
flex;
gap:
8px;
}
.footer-redes a {
width:
37px;
height:
37px;
display:
flex;
align-items:
center;
justify-content:
center;
border:
1px solid
var(--color-texto-hero);
border-radius:
7px;
color:
var(--color-texto-hero);
}
.footer-copy {
display:
flex;
justify-content:
space-between;
gap:
20px;
margin-top:
20px;
padding-top:
15px;
border-top:
1px solid
color-mix(
in srgb,
var(--color-texto-hero) 20%,
transparent
);
font-size:
.72rem;
}
/* =========================================================
SUBIR
========================================================= */
.btn-subir {
position:
fixed;
right:
20px;
bottom:
20px;
z-index:
950;
width:
40px;
height:
40px;
display:
none;
align-items:
center;
justify-content:
center;
border:
none;
border-radius:
7px;
background:
var(--color-primario);
color:
var(--color-boton-texto);
}
.btn-subir.visible {
display:
flex;
}
/* =========================================================
TABLET
========================================================= */
@media (
max-width: 991px
) {
.navbar-collapse {
padding-bottom:
15px;
}
.btn-contacto-menu {
display:
inline-block;
margin:
5px 0 0;
}
.hero {
min-height:
540px;
}
}
/* =========================================================
CELULAR
========================================================= */
@media (
max-width: 767px
) {
.seccion {
padding:
50px 0;
}
.navbar {
min-height:
74px;
}
.logo {
max-width:
210px;
max-height:
58px;
}
.hero {
min-height:
520px;
}
.hero-contenido {
padding-top:
76px;
}
.hero h1 {
font-size:
2.9rem;
}
.hero-botones {
flex-direction:
column;
}
.hero-botones .btn {
width:
100%;
}
.footer-principal,
.footer-copy {
flex-direction:
column;
align-items:
flex-start;
}
}
@media (
max-width: 480px
) {
.hero h1 {
font-size:
2.45rem;
}
.card-programa,
.card-plantel,
.card-acceso,
.form-contacto {
padding:
19px;
}
.logo {
max-width:
185px;
}
}