/* ==========================================================
AJUSTES.CSS — Correcciones de proporciones para desktop
----------------------------------------------------------
Este archivo SE INCLUYE DESPUÉS de style.css en el :
----------------------------------------------------------
Si algo no te gusta, comenta esa sección con / * * / y
vuelves al comportamiento original sin romper nada.
========================================================== */
/* ==========================================================
1) CONTAINER MÁS AMPLIO
El original es 1100px → se siente apretado en monitores grandes.
Ampliamos a 1280px (siguen quedando márgenes laterales).
========================================================== */
.container {
max-width: 1280px;
}
/* ==========================================================
2) NAVBAR — Más compacto para que entren los 8 links
----------------------------------------------------------
- Menos padding vertical (era 1rem → 0.7rem)
- Logo texto más chico (era 1.8rem → 1.4rem)
- Imagen del logo más controlada
- Menos separación entre links (era 25px → 14px)
- Padding de cada link más justo
========================================================== */
#navbar {
padding: 0.7rem 0;
}
#navbar .logo {
font-size: clamp(1.1rem, 1.6vw, 1.5rem);
}
.logo {
width: auto; /* el 30% original deformaba el ancho */
}
.logo-img {
width: 42px; /* tamaño fijo y razonable, no depende del % del contenedor */
height: auto;
}
#nav-links li {
margin-left: 14px;
}
#nav-links li a {
padding: 6px 8px;
font-size: 0.88rem; /* texto un poco más chico para que entren todos */
letter-spacing: 0.2px;
}
.rastreo {
padding: 0.55rem 0.9rem !important;
font-size: 0.85rem;
}
/* ==========================================================
3) BREAKPOINT EXTRA — Que el menú hamburguesa aparezca antes
Con 8 items, el navbar deja de caber bien antes de 768px.
Lo movemos a 992px para que la transición sea limpia.
========================================================== */
@media (max-width: 992px) {
#menu-toggle {
display: block;
position: relative;
z-index: 1001;
}
#menu-toggle.active span:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}
#menu-toggle.active span:nth-child(2) { opacity: 0; }
#menu-toggle.active span:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}
#nav-links {
display: none;
flex-direction: column;
position: absolute;
top: 100%;
left: 0;
width: 100%;
background-color: rgba(33, 37, 41, 0.95);
padding: 10px 0;
box-shadow: var(--shadow-medium);
border-top: 1px solid var(--slate-gray);
margin: 0;
}
#nav-links.active {
display: flex;
}
#nav-links li {
margin: 0;
width: 100%;
text-align: center;
}
#nav-links li a {
display: block;
padding: 14px;
width: 100%;
border-radius: 0;
font-size: 0.95rem;
}
}
/* ==========================================================
4) HERO SECTION — Menos alto y proporciones controladas
----------------------------------------------------------
El original es 90-100vh: literalmente traga toda la pantalla.
Lo bajamos a 78vh con un máximo razonable.
========================================================== */
.hero-section {
height: auto;
min-height: 78vh;
max-height: 820px;
}
.inicio {
height: auto;
min-height: 78vh;
max-height: 820px;
}
.hero-content h1 {
font-size: clamp(1.8rem, 4vw, 3rem); /* era hasta 3.8rem */
line-height: 1.2;
}
.hero-content p,
.hero-content .subtagline {
font-size: clamp(0.9rem, 1.6vw, 1.15rem);
}
/* ==========================================================
5) PADDING DE SECCIONES — Menos exagerado
60px arriba+abajo se siente mucho al 100%. Bajamos a 45px.
========================================================== */
.page-section {
padding: 45px 0;
}
.page-section h2 {
font-size: clamp(1.5rem, 2.6vw, 2.2rem); /* era hasta 2.8rem */
margin-bottom: 28px;
}
.page-section p {
font-size: clamp(0.95rem, 1.3vw, 1.05rem); /* era 1.1rem fijo */
}
/* ==========================================================
6) RASTREAR ENVÍO — Padding desorbitado
El original tiene padding: 10vh → 200px arriba y abajo en
pantalla de 1080px. Lo bajamos a 3rem.
========================================================== */
.rastreo-paquete {
padding: 3rem 1rem !important;
}
/* ==========================================================
7) SECCIÓN "NOSOTROS" — Mejor proporción
El h2 era 2.5rem fijo y el padding del texto 3rem.
========================================================== */
#nosotros {
min-height: auto;
}
.nosotros-img {
width: 32%;
margin-left: 2rem;
}
.nosotros-text {
padding: 2rem 2.5rem;
}
.nosotros-text h2 {
font-size: clamp(1.5rem, 2.4vw, 2rem);
margin-bottom: 0.8rem;
}
.nosotros-text p {
font-size: clamp(0.92rem, 1.2vw, 1rem);
line-height: 1.65;
}
/* ==========================================================
8) MISIÓN, VISIÓN Y VALORES — Tipografía ajustada
========================================================== */
#mision-vision h3 {
font-size: clamp(1.1rem, 1.6vw, 1.35rem);
margin-bottom: 12px;
}
#mision-vision .mision-vision-grid > div {
padding: 22px;
}
#mision-vision .mision-vision-grid > div p {
font-size: clamp(0.9rem, 1.2vw, 1rem);
margin: 0;
}
/* ==========================================================
9) SECCIÓN SERVICIOS-INFO (features) — Más compacta
========================================================== */
#servicios-info .feature-item {
padding: 18px;
}
#servicios-info .feature-item h3 {
font-size: clamp(1.05rem, 1.4vw, 1.25rem);
margin-bottom: 8px;
}
#servicios-info .feature-item p {
font-size: clamp(0.85rem, 1.1vw, 0.95rem);
}
#servicios-info .feature-item img {
padding: 10px;
margin-bottom: 14px;
max-width: 100px;
}
.icono-seguridad {
width: 32%;
max-width: 110px;
}
.map {
width: 50%;
max-width: 600px;
}
/* ==========================================================
10) PRODUCTOS — Texto y descripción más balanceados
========================================================== */
.productos-section {
padding: 3rem 1rem;
}
.productos-description {
font-size: clamp(0.95rem, 1.3vw, 1.05rem);
}
/* ==========================================================
11) PROMOCIONES — Título contenido (era 3rem fijo)
========================================================== */
.promociones h1 {
font-size: clamp(1.6rem, 2.6vw, 2.2rem);
margin-bottom: 2rem;
}
.promo-description {
font-size: clamp(0.95rem, 1.3vw, 1.05rem);
}
/* ==========================================================
12) CONTACTO — Headers y formularios proporcionados
========================================================== */
.contacto-container {
padding: 1.5rem 1rem;
gap: 1.5rem;
}
.contacto-info h2 {
font-size: clamp(1.4rem, 2.2vw, 1.8rem);
margin-bottom: 0.8rem;
}
.contacto-info p {
font-size: clamp(0.9rem, 1.2vw, 1rem);
}
.contacto-form {
padding: 1.3rem;
}
.form-group label {
font-size: 0.9rem;
}
/* ==========================================================
13) BOTONES — Un poco más compactos
========================================================== */
.btn {
padding: 11px 22px;
font-size: 0.95rem;
}
#rastrear-envio input[type="text"] {
padding: 11px 16px;
font-size: 0.95rem;
}
#anioSeleccionado {
padding: 11px 36px 11px 16px;
font-size: 0.95rem;
}
/* ==========================================================
14) TRACKING (pasos de rastreo)
========================================================== */
.tracking-step {
width: 105px;
}
.tracking-step p {
font-size: 11.5px;
}
.circle img.icono-tracking {
width: 54px;
height: 54px;
}
/* ==========================================================
15) PAQUETES (swiper) — slides más controlados
========================================================== */
.swiper-paquetes .swiper-slide {
width: clamp(260px, 26vw, 340px) !important;
}
.swiper-paquetes .swiper-slide h4 {
font-size: 1rem;
}
/* ==========================================================
16) PAÍSES (selector con banderas)
========================================================== */
.paises-grid {
max-width: 720px;
gap: 0.8rem;
}
.pais-card {
padding: 0.7rem;
}
/* ==========================================================
17) FOOTER — texto un poco más compacto
========================================================== */
footer {
padding: 24px 0;
}
footer p {
font-size: 0.85rem;
margin-bottom: 6px;
}
/* ==========================================================
18) RESPONSIVE — Ajuste fino para tablets
========================================================== */
@media (max-width: 1100px) {
.container {
width: 92%;
}
.page-section {
padding: 35px 0;
}
}
@media (max-width: 768px) {
.hero-section,
.inicio {
min-height: 65vh;
max-height: none;
}
.rastreo-paquete {
padding: 2rem 1rem !important;
}
.page-section {
padding: 30px 0;
}
.nosotros-text {
padding: 1.5rem;
}
}