/* === RESET Y BASE === */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Montserrat', 'Roboto', sans-serif;
line-height: 1.6;
color: #0A192F; /* Navy profundo */
background-color: #ffffff;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
section {
padding: 60px 0;
}
/* === TÍTULOS === */
.section-title {
font-size: 2rem;
font-weight: 600;
margin-bottom: 40px;
color: #0A192F;
text-align: center;
letter-spacing: -0.02em;
}
/* === HERO (fondo navy) === */
.hero {
background-color: #0A192F;
color: #ffffff;
padding: 50px 0;
}
.hero-grid {
display: grid;
gap: 40px;
}
.hero h1 {
font-size: 1.8rem;
font-weight: 700;
text-transform: uppercase;
line-height: 1.3;
margin-bottom: 20px;
color: #ffffff;
}
.hero-subtitle {
font-size: 1.1rem;
color: #e0e0e0;
margin-bottom: 20px;
}
/* Formulario (placeholder) */
.hero-form {
background: #ffffff;
border-radius: 16px;
padding: 30px 25px;
box-shadow: 0 20px 30px -10px rgba(0,0,0,0.3);
}
.hero-form h3 {
font-size: 1.5rem;
font-weight: 600;
color: #0A192F;
margin-bottom: 20px;
text-align: center;
}
.hero-form input {
width: 100%;
padding: 14px 16px;
margin-bottom: 15px;
border: 1px solid #ddd;
border-radius: 8px;
font-size: 1rem;
font-family: inherit;
transition: border 0.3s;
}
.hero-form input:focus {
outline: none;
border-color: #FDCB02;
}
.hero-form button {
width: 100%;
background-color: #FDCB02;
color: #0A192F;
font-weight: 700;
font-size: 1rem;
padding: 14px;
border: none;
border-radius: 8px;
cursor: pointer;
transition: background 0.3s, transform 0.1s;
margin-top: 5px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.hero-form button:hover {
background-color: #e5b702;
transform: scale(1.02);
}
.form-disclaimer {
font-size: 0.75rem;
color: #777;
text-align: center;
margin-top: 15px;
}
/* === PILARES (fondo gris claro) === */
.pilares {
background-color: #F9F9F9;
}
.pilar-grid {
display: grid;
gap: 30px;
grid-template-columns: 1fr;
}
.pilar-card {
background: #ffffff;
padding: 40px 25px;
border-radius: 20px;
text-align: center;
box-shadow: 0 10px 20px rgba(0,0,0,0.02);
transition: transform 0.3s, box-shadow 0.3s;
}
.pilar-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 30px rgba(0,0,0,0.05);
}
.pilar-card i {
font-size: 3.5rem;
color: #FDCB02;
margin-bottom: 20px;
}
.pilar-card h3 {
font-size: 1.4rem;
font-weight: 600;
color: #0A192F;
margin-bottom: 15px;
}
.pilar-card p {
color: #333;
font-size: 1rem;
}
/* === AUTORIDAD (fondo gris claro) === */
.autoridad {
background-color: #F9F9F9;
padding-top: 0; /* para que no duplique separación con sección anterior */
}
.autoridad-grid {
display: grid;
gap: 40px;
align-items: center;
}
.foto-profesional {
width: 220px;
height: 220px;
margin: 0 auto;
background: #d1d5db; /* gris medio */
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
border: 4px solid #FDCB02;
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.foto-profesional i {
font-size: 6rem;
color: #4b5563;
}
.bio p {
font-size: 1.05rem;
color: #1e293b;
margin-bottom: 20px;
line-height: 1.7;
}
.bio strong {
color: #0A192F;
font-weight: 700;
}
/* === FOOTER (fondo negro) === */
.footer {
background-color: #000000;
padding: 40px 0;
text-align: center;
}
.footer .legal {
color: #aaaaaa;
font-size: 0.85rem;
line-height: 1.6;
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
.footer .legal.small {
font-size: 0.75rem;
margin-top: 10px;
color: #888;
}
/* === MEDIA QUERIES (MOBILE FIRST → TABLET / DESKTOP) === */
@media screen and (min-width: 768px) {
section {
padding: 80px 0;
}
.hero-grid {
grid-template-columns: 1fr 1fr;
align-items: center;
gap: 50px;
}
.hero h1 {
font-size: 2.2rem;
}
.hero-subtitle {
font-size: 1.2rem;
}
.pilar-grid {
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}
.autoridad-grid {
grid-template-columns: auto 1fr;
gap: 60px;
}
.foto-profesional {
width: 280px;
height: 280px;
}
.foto-profesional i {
font-size: 8rem;
}
.section-title {
font-size: 2.5rem;
}
}
/* Ajustes finos para pantallas muy grandes */
@media screen and (min-width: 1024px) {
.hero h1 {
font-size: 2.5rem;
}
.container {
padding: 0 40px;
}
}