:root {
/* Identidad visual */
--color-primary: #1E3A8A;
/* Azul Oscuro profundo */
--color-primary-dark: #172554;
/* Azul profundo para hovers */
--color-secondary: #B91C1C;
/* Rojo más oscuro para mejor legibilidad */
--color-secondary-dark: #991B1B;
/* Rojo oscuro para hovers */
--color-tertiary: #FFFFFF;
/* Blanco */
/* Neutros */
--color-text-main: #2c3e50;
--color-text-muted: #596a7a;
--color-bg-light: #f8fafc;
--color-bg-white: #ffffff;
--color-border: #e2e8f0;
/* Componentes Generales */
--color-header-bg: #1e3a8b;
--color-footer-bg: #1e3a8b;
--color-footer-text: #ffffff;
/* Typografía */
--font-main: 'Outfit', sans-serif;
--font-heading: 'Montserrat', sans-serif;
/* Espaciado & otros */
--transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
--shadow-sm: 0 4px 6px rgba(0, 0, 0, 0.05);
--shadow-md: 0 10px 20px rgba(0, 0, 0, 0.08);
--shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.12);
--border-radius: 12px;
}
[data-theme="dark"] {
--color-primary: #60a5fa;
/* Blue 400 for brightness */
--color-text-main: #f1f5f9;
--color-text-muted: #94a3b8;
--color-bg-light: #020617;
--color-bg-white: #1e293b;
--color-border: #334155;
--color-header-bg: #1e3a8b;
--color-footer-bg: #1e3a8b;
--color-footer-text: #e2e8f0;
}
[data-theme="dark"] .btn-primary {
background-color: #1e3a8b;
border-color: #1e3a8b;
color: #ffffff;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}
[data-theme="dark"] .btn-primary:hover {
background-color: #172554;
border-color: #172554;
color: #ffffff;
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.6);
}
.header-actions {
flex: 0 0 auto;
justify-self: end;
display: flex;
align-items: center;
justify-content: center;
gap: 0.4rem !important;
/* Standardized symmetrical spacing */
height: 2.4rem;
background: var(--color-bg-white);
border: 1px solid var(--color-border);
border-radius: var(--border-radius);
padding: 0 0.6rem !important;
/* Balanced capsule padding */
box-shadow: var(--shadow-sm);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.header-actions:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.header-actions a,
.header-actions .lang-btn {
display: flex !important;
align-items: center;
justify-content: center;
height: 1.9rem !important;
border-radius: 8px;
transition: all 0.25s ease;
background: transparent !important;
border: none !important;
color: var(--color-text-main) !important;
padding: 0;
margin: 0;
}
.header-actions a {
width: 2.2rem;
height: 100% !important;
/* Force full height for vertical centering */
}
.header-actions a svg {
display: block;
margin: 0 auto;
transition: transform 0.25s, color 0.25s;
stroke: currentColor;
pointer-events: none;
/* Prevent interference */
}
/* Vertical Dividers Removed for Symmetry */
.header-actions a:nth-child(4),
.header-actions .lang-btn {
border-right: none !important;
margin-right: 0;
padding-right: 0;
}
.header-actions a:hover,
.header-actions .lang-btn:hover {
background: transparent !important;
/* Removed gray box */
border-radius: 8px;
}
.header-actions a:hover svg {
transform: translateY(-1px) scale(1.1);
color: var(--color-primary);
}
.lang-btn {
background: transparent;
border: none;
font-size: 0.8rem;
font-weight: 700;
cursor: pointer;
font-family: var(--font-main);
color: var(--color-text-main) !important;
width: 2.2rem !important;
/* Standardized width to match social icons */
height: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
/* Greeting Text in Hero */
.hero-greeting {
display: block;
font-size: 1rem;
font-weight: 700;
font-family: var(--font-main);
letter-spacing: 2px;
text-transform: uppercase;
color: #ffffff;
margin-bottom: 0.8rem;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
/* Toggle Switch Styles - Encapsulated Unit */
.header-actions .theme-toggle-switch {
display: inline-block !important;
width: 64px !important;
height: 34px !important;
position: relative;
cursor: pointer;
background: #0f172a !important;
/* Solid dark background for track */
border: 1.5px solid rgba(255, 255, 255, 0.2) !important;
border-radius: 50px !important;
padding: 0 !important;
margin: 0 !important;
overflow: hidden;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}
/* Dark Mode Toggle Track */
[data-theme="dark"] .header-actions .theme-toggle-switch {
border-color: rgba(255, 255, 255, 0.4) !important;
background: #020617 !important;
}
.toggle-slider {
width: 100%;
height: 100%;
position: relative;
}
/* ☀️ left, 🌙 right — BOTH always visible and ON TOP of the knob */
.icon-sun-svg,
.icon-moon-svg {
position: absolute !important;
top: 50% !important;
transform: translateY(-50%) !important;
z-index: 3 !important;
/* ON TOP of the knob */
pointer-events: none;
width: 16px !important;
height: 16px !important;
margin: 0 !important;
padding: 0 !important;
display: block !important;
transition: color 0.3s ease;
}
.icon-sun-svg {
left: 6.5px !important; /* Movido a la izquierda */
color: #facc15 !important;
/* Bright Yellow Sun */
}
.icon-moon-svg {
right: 6px !important;
color: #f8fafc !important;
/* White/Silver Moon */
}
/* The sliding knob - Semi-transparent and slightly raised */
.knob {
position: absolute;
width: 24px !important; /* Achicado */
height: 24px !important; /* Achicado */
background-color: rgba(255, 255, 255, 0.8) !important; /* Blanco translúcido siempre */
border-radius: 50%;
left: 3px; /* Movido un mínimo a la izquierda */
top: 3.5px !important;
z-index: 2;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
backdrop-filter: blur(2px);
}
[data-theme="dark"] .knob {
left: 27px !important; /* Movido más a la izquierda (base/móvil) */
}
/* Desktop specific overrides for the toggle knob */
@media (min-width: 769px) {
.knob {
background-color: rgba(255, 255, 255, 0.2) !important; /* Más transparente para ver el sol */
backdrop-filter: blur(0px) !important; /* Quitamos el desenfoque sobre el sol */
}
[data-theme="dark"] .knob {
background-color: rgba(255, 255, 255, 0.8) !important;
left: 34px !important; /* Movido más a la derecha para cubrir bien la luna */
backdrop-filter: blur(2px) !important;
}
}
[data-theme="dark"] .icon-moon-svg {
color: #0f172a !important; /* Luna negra/oscura en modo oscuro */
}
[data-theme="dark"] .toggle-slider {
background-color: transparent;
}
/* Base Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 19px;
scroll-padding-top: 4.2rem;
}
body {
font-family: var(--font-main);
color: var(--color-text-main);
background-color: var(--color-bg-white);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
overflow-x: clip;
}
h1,
h2,
h3,
h4 {
font-family: var(--font-heading);
color: var(--color-text-main);
line-height: 1.2;
}
a {
text-decoration: none;
color: inherit;
transition: var(--transition);
}
img {
max-width: 100%;
height: auto;
display: block;
}
.container {
width: 100%;
max-width: 75rem;
margin: 0 auto;
padding: 0 1.5rem;
}
.px-section {
padding: 6rem 0;
}
.bg-light {
background-color: var(--color-bg-light);
background-image: radial-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px);
background-size: 20px 20px;
}
.text-center {
text-align: center;
}
/* Utilities */
.section-title {
font-size: 2.5rem;
margin-bottom: 2rem;
position: relative;
display: inline-block;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.section-title::after {
content: '';
position: absolute;
bottom: -10px;
left: 0;
width: 60px;
height: 3px;
background-color: var(--color-primary);
}
.text-center .section-title::after {
left: 50%;
transform: translateX(-50%);
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.8rem 1.8rem;
border-radius: 50px;
font-weight: 500;
font-family: var(--font-main);
cursor: pointer;
border: none;
transition: var(--transition);
text-align: center;
}
.btn-primary {
background-color: var(--color-primary);
color: #ffffff;
font-weight: 600;
font-size: 1.1rem;
box-shadow: 0 4px 15px rgba(137, 207, 240, 0.4);
}
.btn-primary:hover {
background-color: var(--color-primary-dark);
color: #fff;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(137, 207, 240, 0.6);
}
.btn-whatsapp {
background-color: var(--color-secondary);
color: white;
font-weight: 500;
width: 100%;
margin-top: 0.6rem;
padding: 0.3rem 0.5rem;
font-size: 0.8rem;
}
.btn-whatsapp:hover {
background-color: var(--color-secondary-dark);
transform: translateY(-2px);
}
.btn-whatsapp::before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
margin-right: 6px;
background-image: url('data:image/svg+xml;utf8,');
background-size: cover;
}
.btn-disabled {
background-color: #cbd5e1;
color: #94a3b8;
cursor: not-allowed;
box-shadow: none;
}
.btn-disabled:hover {
background-color: #cbd5e1;
transform: none;
}
.btn-disabled::before {
display: none;
}
/* Header */
#main-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: var(--color-header-bg);
backdrop-filter: blur(10px);
z-index: 1002;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
transition: var(--transition);
}
.header-container {
position: relative;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
height: 4.2rem;
width: 100%;
max-width: 87.5rem;
margin: 0 auto;
padding: 0 2rem;
/* Balanced horizontal padding */
}
.logo-space {
display: flex;
align-items: center;
justify-content: center;
}
.logo-text {
font-family: var(--font-heading);
font-size: 1.25rem;
font-weight: 600;
color: #ffffff;
letter-spacing: -0.5px;
}
#main-nav {
display: flex;
justify-content: center;
}
.mobile-nav-header {
display: none;
}
.mobile-only-nav-actions {
display: none;
}
#main-nav ul {
display: flex;
list-style: none;
gap: 1.2rem;
}
.nav-link {
font-weight: 500;
color: rgba(255, 255, 255, 0.8);
position: relative;
padding: 0.5rem 0;
white-space: nowrap;
}
.nav-link:hover,
.nav-link.active {
color: #ffffff;
}
.nav-link::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background-color: #ffffff;
transition: var(--transition);
}
.nav-link:hover::after,
.nav-link.active::after {
width: 100%;
}
.mobile-menu-btn {
display: none;
background: transparent;
border: none;
flex-direction: column;
justify-content: space-around;
width: 1.875rem;
height: 1.3125rem;
cursor: pointer;
}
.mobile-menu-btn span {
display: block;
width: 100%;
height: 3px;
background-color: #ffffff !important;
border-radius: 3px;
transition: var(--transition);
}
/* Hero */
.hero {
height: 100vh;
min-height: 600px;
display: flex;
align-items: center;
position: relative;
padding-top: 4.2rem;
color: var(--color-tertiary);
text-align: center;
overflow: hidden;
background-color: #000;
}
.hero-slideshow {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
}
.hero-slideshow .slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
opacity: 0;
z-index: 0;
transition: opacity 1.5s ease-in-out, transform 6s linear;
}
.hero-slideshow .slide.active {
opacity: 1;
z-index: 2;
transform: scale(1.03);
}
.hero-slideshow .slide.prev {
opacity: 1;
z-index: 1;
}
.slide-1 {
background-image: url('assets/slide-1.jpg');
}
.slide-2 {
background-image: url('assets/estatua.webp');
background-position: center top;
}
.slide-3 {
background-image: url('assets/hero-paris.png');
}
.slide-4 {
background-image: url('assets/slide-4.jpg');
}
/* SF puente */
.slide-5 {
background-image: url('assets/slide-5.jpg');
}
.slide-6 {
background-image: url('assets/slide-6.jpg');
}
.slide-7 {
background-image: url('assets/slide-7.jpg');
}
.slide-8 {
background-image: url('assets/slide-8.jpg');
}
.slide-9 {
background-image: url('assets/slide-9.jpg');
background-position: center top;
}
.slide-10 {
background-image: url('assets/slide-10.jpg');
}
.slide-11 {
background-image: url('assets/hero-beach.png');
}
.slide-12 {
background-image: url('assets/slide-12.jpg');
}
.slide-13 {
background-image: url('assets/slide-13.jpg');
}
.slide-14 {
background-image: url('assets/slide-14.jpg');
}
.slide-15 {
background-image: url('assets/slide-15.jpg');
}
.slide-16 {
background-image: url('assets/hero-bg.webp');
}
.slide-17 {
background-image: url('assets/slide-17.jpg');
}
.slide-18 {
background-image: url('assets/slide-18.jpg');
}
.slide-19 {
background-image: url('assets/slide-19.jpg');
}
/* London */
.slide-20 {
background-image: url('assets/slide-20.jpg');
}
/* Venice */
.slide-21 {
background-image: url('assets/slide-21.jpg');
}
/* NY */
.slide-22 {
background-image: url('assets/slide-22.jpg');
}
/* Tokyo */
.slide-23 {
background-image: url('assets/slide-23.jpg');
}
/* Grand Canyon */
.slide-24 {
background-image: url('assets/slide-24.jpg');
}
/* Kyoto */
.slide-25 {
background-image: url('assets/slide-25.jpg');
}
/* Berlin */
.slide-26 {
background-image: url('assets/slide-26.jpg');
}
/* Sagrada Familia */
.slide-27 {
background-image: url('assets/slide-27.jpg');
}
/* Rome / General */
.slide-28 {
background-image: url('assets/slide-28.jpg');
}
/* Alps / general */
.slide-29 {
background-image: url('assets/slide-29.jpg');
}
/* Cataratas del Iguazú */
.slide-30 {
background-image: url('assets/slide-30.jpg');
}
/* Glaciar Perito Moreno */
.slide-31 {
background-image: url('assets/slide-31.jpg');
}
/* Obelisco de Buenos Aires */
.slide-32 {
background-image: url('assets/slide-32.jpg');
}
/* Stonehenge */
.slide-33 {
background-image: url('assets/slide-33.jpg');
}
/* Angkor Wat / Ha Long Bay */
.slide-34 {
background-image: url('assets/slide-34.jpg');
}
/* Serengeti */
.slide-35 {
background-image: url('assets/slide-35.jpg');
}
/* Milford Sound */
.slide-36 {
background-image: url('assets/slide-36.jpg');
}
/* Moai Easter Island */
.slide-37 {
background-image: url('assets/slide-37.jpg');
}
/* Mt Kilimanjaro */
.slide-38 {
background-image: url('assets/slide-38.jpg');
}
/* Neuschwanstein */
.slide-39 {
background-image: url('assets/slide-39.jpg');
}
/* Banff */
.slide-40 {
background-image: url('assets/slide-40.jpg');
}
/* Salar de Uyuni */
.slide-41 {
background-image: url('assets/slide-41.jpg');
}
/* Cappadocia */
.slide-42 {
background-image: url('assets/slide-42.jpg');
}
/* Mt Everest */
.slide-43 {
background-image: url('assets/slide-43.jpg');
}
/* Victoria Falls */
.slide-44 {
background-image: url('assets/slide-44.jpg');
}
/* Uluru */
.slide-45 {
background-image: url('assets/slide-45.jpg');
}
.slide-46 { background-image: url('assets/slide-46.png'); }
.slide-47 { background-image: url('assets/slide-47.png'); }
.slide-48 { background-image: url('assets/slide-48.png'); }
.slide-49 { background-image: url('assets/slide-49.png'); }
.slide-50 { background-image: url('assets/slide-29.jpg'); }
.slide-51 { background-image: url('assets/slide-51.png'); }
.slide-52 { background-image: url('assets/slide-52.png'); }
.slide-53 { background-image: url('assets/slide-53.png'); }
.slide-54 { background-image: url('assets/slide-54.png'); }
.slide-55 { background-image: url('assets/slide-55.png'); }
.slide-56 { background-image: url('assets/slide-56.png'); }
.slide-57 { background-image: url('assets/slide-57.png'); }
.slide-58 { background-image: url('assets/slide-58.png'); }
.slide-59 { background-image: url('assets/slide-59.png'); }
.slide-60 { background-image: url('assets/slide-60.png'); }
.slide-61 { background-image: url('assets/slide-61.png'); }
.slide-62 { background-image: url('assets/slide-62.png'); }
.slide-63 { background-image: url('assets/slide-1.jpg'); }
.slide-64 { background-image: url('assets/slide-4.jpg'); }
.slide-65 { background-image: url('assets/slide-5.jpg'); }
.slide-66 { background-image: url('assets/slide-6.jpg'); }
.slide-67 { background-image: url('assets/slide-7.jpg'); }
.slide-68 { background-image: url('assets/slide-8.jpg'); }
.slide-69 { background-image: url('assets/slide-9.jpg'); }
.slide-70 { background-image: url('assets/slide-10.jpg'); }
/* Hagia Sophia */
.hero-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7));
z-index: 1;
}
.hero-content {
position: relative;
z-index: 2;
max-width: 800px;
margin: 0 auto;
}
.hero h1 {
font-size: 4rem;
color: var(--color-tertiary);
margin-bottom: 1.5rem;
text-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
min-height: 2.4em;
/* Mantiene 2 líneas en inglés y español dinámicamente */
}
.hero p {
font-size: 1.25rem;
margin-bottom: 2.5rem;
opacity: 1;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
font-weight: 300;
min-height: 3.2em;
/* Mantiene bloque dinámicamente */
}
/* World Clocks */
.world-clocks-container {
display: inline-flex;
margin-top: 1.2rem;
gap: 1.2rem;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
padding: 0.5rem 1.6rem;
border-radius: 50px;
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 0.25rem 1.875rem rgba(0, 0, 0, 0.1);
}
/* Hero Date & Time Capsule */
.local-clock {
display: flex;
align-items: center;
color: #fff;
font-family: var(--font-main);
font-size: 1.15rem;
font-weight: 500;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}
#current-time {
font-weight: 700;
min-width: 90px;
text-align: center;
}
#current-date {
opacity: 1;
font-weight: 700;
letter-spacing: 0.5px;
}
/* About Section */
.about-grid {
display: flex;
flex-direction: column;
gap: 1.7rem;
/* Ajuste de espacio solicitado */
align-items: center;
}
.about-text {
max-width: 900px;
margin: 0 auto;
text-align: center;
padding-top: 0;
}
.about-text p {
margin-bottom: 1.25rem;
font-size: 1.1rem;
color: var(--color-text-main);
}
.about-badges-wrapper {
width: 100%;
margin-bottom: 0;
}
.about-badges {
display: flex;
justify-content: center;
align-items: stretch;
flex-wrap: wrap;
gap: 1rem;
width: 100%;
}
.badge {
width: 220px;
height: 140px;
padding: 1.5rem 1rem 1rem;
background: var(--color-bg-white);
border-radius: 1rem;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
border: 1px solid var(--color-border);
border-top: 5px solid var(--color-primary);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
gap: 0.8rem;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.badge:hover {
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
transform: translateY(-0.5rem);
border-color: var(--color-primary);
}
.badge-icon {
font-size: 2.5rem;
color: var(--color-primary);
display: flex;
align-items: center;
justify-content: center;
}
.badge h3 {
font-size: 1rem;
font-weight: 700;
color: var(--color-primary);
margin-bottom: 0;
font-family: var(--font-heading);
line-height: 1.2;
}
.badge p {
font-size: 0.9rem;
color: var(--color-text-muted);
margin: 0;
}
/* Agents Section */
.agents-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0.6rem;
margin-top: 0.6rem;
}
/* Hide schedule line-breaks on desktop — they only apply on mobile */
@media (min-width: 769px) {
.agent-card .agent-schedule span br {
display: none;
}
/* Accordion divs added by JS are transparent to layout on desktop */
#contacto .accordion-header,
#contacto .accordion-body {
display: contents;
}
#contacto .accordion-arrow {
display: none;
}
}
@media (max-width: 62rem) {
.agents-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 30rem) {
.agents-grid {
grid-template-columns: 1fr;
}
}
.agent-card {
background: var(--color-bg-white);
border-radius: 1rem;
padding: 0.8rem 0.7rem;
border: 1px solid var(--color-border);
text-align: center;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
position: relative;
overflow: hidden;
}
.agent-card:hover {
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
transform: translateY(-0.5rem);
border-color: var(--color-primary);
}
#admin .agent-card:hover,
#admin .highlighted-admin:hover {
border-color: #1e3a8a !important;
}
.agent-info {
flex-grow: 1;
margin-bottom: 0.5rem;
}
.agent-name {
font-size: 1.08rem;
margin-bottom: 0.3rem;
color: var(--color-primary);
font-weight: 700;
font-family: var(--font-heading);
}
.agent-role {
color: var(--color-text-main);
font-weight: 500;
font-size: 0.85rem;
margin-bottom: 0.3rem;
line-height: 1.3;
}
.agent-schedule {
font-size: 0.72rem;
color: var(--color-text-main);
line-height: 1.2;
word-break: break-word;
font-weight: 500;
}
.agent-schedule span:not(.appointment-notice) {
font-weight: 500;
color: var(--color-text-main);
}
.agent-schedule span[data-i18n="schedule_consult"],
.agent-schedule span [style*="color: var(--color-primary)"] {
font-weight: 700 !important;
color: var(--color-primary) !important;
}
.appointment-notice {
font-weight: 400;
color: var(--color-text-muted);
font-size: 0.9em;
}
.office-schedule .appointment-notice {
font-weight: 700;
color: var(--color-primary);
font-size: 1em;
}
.agent-card .appointment-notice {
display: block;
margin-top: 0.2rem;
}
/* Contact Office Box */
.contact-office-box {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.5rem;
margin: 0.3rem 0 0.4rem 0;
width: 100%;
padding-bottom: 0.4rem;
}
.btn-office {
padding: 0.3rem 1.2rem !important;
font-size: 1rem !important;
max-width: 21.25rem;
font-weight: 500;
}
.office-schedule {
font-size: 0.95rem !important;
color: var(--color-text-main);
display: flex;
align-items: center;
justify-content: center;
gap: 0.6rem;
font-weight: 500;
}
/* Reviews Section */
.google-rating {
display: flex;
align-items: center;
justify-content: center;
gap: 1.5rem;
margin-top: 0rem;
margin-bottom: 0.5rem;
}
.rating-wrapper {
display: flex;
align-items: center;
gap: 0.8rem;
}
.rating-score {
font-size: 1.5rem;
font-weight: 700;
color: var(--color-text-main);
}
.reviews-link {
font-size: 0.9rem;
color: #4285F4;
text-decoration: underline;
font-weight: 500;
}
/* Reviews Section */
.review-card {
position: relative;
flex: 0 0 calc((100% - 2 * 1.5rem) / 3);
scroll-snap-align: center;
padding: 1.2rem;
height: auto;
display: flex;
flex-direction: column;
justify-content: flex-start;
background: var(--color-bg-light);
border: 1px solid var(--color-border);
border-radius: var(--border-radius);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
transition: var(--transition);
}
.review-card:hover {
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
transform: translateY(-3px);
border-color: #4285F4;
}
.review-header {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 0.6rem;
}
.reviewer-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #EA4335;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 1.2rem;
}
.reviewer-info h4 {
margin: 0;
font-size: 1rem;
font-weight: 600;
font-family: var(--font-main);
color: var(--color-text-main);
}
.reviewer-info .stars {
font-size: 0.75rem;
display: flex;
align-items: center;
}
.verified-badge {
display: inline-flex;
align-items: center;
gap: 3px;
font-size: 0.7rem;
color: #34A853;
font-weight: 600;
margin-left: 8px;
letter-spacing: 0.2px;
}
.review-text {
font-size: 0.88rem;
color: var(--color-text-main);
opacity: 0.9;
line-height: 1.5;
margin-top: 0;
margin-bottom: 0;
}
/* Partners Section */
.partners {
padding: 4.2rem 0;
}
.partners-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.2rem;
/* reduced gap to fit the items */
}
.partner-category {
background: var(--color-bg-white);
border-radius: var(--border-radius);
padding: 1.5rem 1rem;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
border: 1px solid var(--color-border);
border-top: 4px solid var(--color-primary);
transition: var(--transition);
}
.partner-category:hover {
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
transform: translateY(-5px);
}
#respaldo {
background-color: var(--color-bg-light);
}
.partner-cat-header {
display: flex;
align-items: center;
gap: 0.8rem;
margin-bottom: 1.5rem;
border-bottom: 1px solid var(--color-border);
padding-bottom: 1rem;
}
.partner-cat-header h3 {
font-size: 1.25rem;
margin: 0;
color: var(--color-text-main);
}
.partner-logos {
display: flex;
flex-wrap: wrap;
gap: 0.8rem;
}
.partner-name {
display: inline-flex;
align-items: center;
gap: 10px;
background: var(--color-bg-white);
color: #ffffff !important;
font-weight: 600;
padding: 0.25rem 0.75rem;
border-radius: 50px;
font-size: 0.8rem;
border: 2px solid rgba(0, 0, 0, 0.08);
/* borde estilo interior */
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.partner-name img {
height: 24px;
width: 24px;
background-color: white;
border-radius: 50%;
padding: 3px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
object-fit: contain;
}
.brand-oti {
background-color: #02326b;
}
/* Azul oscuro OTI */
.brand-universal {
background-color: #06b6d4;
}
/* oscurecido cyan */
.partner-name.brand-universal img {
background-color: transparent;
mix-blend-mode: multiply;
box-shadow: none;
padding: 0;
}
.brand-assistcard {
background-color: #dc2626;
}
/* rojo fuerte */
.brand-coris {
background-color: #bef264;
color: #1e293b !important;
text-shadow: none;
}
/* verde más amarillento, texto oscuro por legibilidad */
.partner-name.brand-coris img {
width: 24px;
height: 24px;
object-fit: cover;
object-position: left center;
}
.brand-leon {
background-color: #f97316;
}
/* naranja más fuerte */
.partner-name.brand-leon img {
width: 24px;
height: 24px;
object-fit: cover;
object-position: 0% 50%;
}
.brand-avis {
background-color: #b91c1c;
}
.brand-hertz {
background-color: #eab308;
color: #fff !important;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.brand-freeway {
background-color: #fde047;
color: #fff !important;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
/* amarillo banana */
.brand-julia {
background-color: #166534;
}
/* verde oscuro */
.brand-grupo8 {
background-color: #ef4444;
}
/* rojo */
.partner-name.brand-grupo8 img {
background-color: transparent;
box-shadow: none;
padding: 0;
}
/* Fondo transparente para integrar el logo blanco en la pastilla roja */
.brand-tucano {
background-color: #64748b;
}
/* gris */
.partner-name.brand-tucano img {
background-color: transparent;
box-shadow: none;
padding: 0;
}
/* Fondo transparente para integrar el logo en la pastilla gris */
/* OS Icon logic - Removed win-os check since Apple Emojis are forced via JS images */
/* Footer */
.footer {
background-color: var(--color-footer-bg);
color: var(--color-footer-text);
text-align: center;
padding: 0.1rem 0; /* Más bajo */
font-size: 0.78rem;
}
.footer p {
opacity: 0.7;
margin-bottom: 0;
}
.mobile-only-br {
display: none;
}
/* Responsive */
@media (max-width: 992px) {
.about-grid {
grid-template-columns: 1fr;
}
.hero h1 {
font-size: 3rem;
}
}
@media (max-width: 768px) {
.hero {
padding-top: 2rem;
padding-bottom: 2rem;
min-height: 85vh;
}
.hero-date {
margin-bottom: 2rem;
}
html {
font-size: 16px;
/* Escala ajustada para mejor legibilidad en móvil */
}
p {
line-height: 1.65;
margin-bottom: 1.25rem;
}
.mobile-menu-btn {
display: flex !important;
position: relative !important;
left: auto !important;
z-index: 1003;
}
.mobile-menu-btn.active {
opacity: 0 !important;
pointer-events: none !important;
}
#main-nav {
position: fixed;
top: 0;
left: -100%;
width: 60%;
max-width: 180px;
height: 100vh;
background-color: var(--color-header-bg);
display: flex !important;
flex-direction: column;
z-index: 1005 !important; /* Cubre el header principal y su logo/X original */
padding: 0;
box-shadow: 10px 0 30px rgba(0, 0, 0, 0.5);
transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
overflow-y: auto;
}
.mobile-nav-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.5rem 1.5rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
margin-bottom: 1.5rem;
flex-shrink: 0;
}
.mobile-nav-logo {
height: 40px;
object-fit: contain;
}
.close-menu-btn {
position: static;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
color: var(--color-tertiary);
cursor: pointer;
padding: 0;
transition: var(--transition);
flex-shrink: 0;
}
#main-nav.active {
left: 0;
}
#main-nav ul {
display: flex;
flex-direction: column;
list-style: none;
justify-content: flex-start;
gap: 1.2rem; /* ~19px de separación entre opciones */
width: 100%;
padding: 0 1.5rem 2rem 1.5rem; /* Sin padding superior para subirlas al máximo posible */
margin: 0;
flex: 1 1 auto;
}
.nav-link {
display: block;
padding: 0.5rem 0;
width: 100%;
text-align: left;
border: none;
background: transparent;
font-size: 1.25rem;
font-weight: 500;
line-height: 1.2;
color: rgba(255, 255, 255, 0.7);
transition: var(--transition);
position: relative;
}
.nav-link.active {
color: #ffffff;
font-weight: 700;
}
.nav-link.active::after {
content: '';
display: block;
width: 40px;
height: 3px;
background-color: var(--color-tertiary);
margin: 0.5rem 0 0;
border-radius: 4px;
box-shadow: 0 0 8px rgba(137, 207, 240, 0.4); /* Brillo sutil */
transition: width 0.3s ease;
}
.mobile-only-nav-actions {
display: block;
padding: 1.5rem 0 7.5rem; /* Aumentado a 7.5rem para subir más los botones */
margin-top: auto; /* Empuja hacia abajo si hay espacio libre */
border-top: 1px solid rgba(255, 255, 255, 0.1);
width: 100%;
}
.nav-actions-grid {
display: flex;
flex-direction: column;
gap: 1.5rem;
align-items: center;
width: 100%;
}
.mobile-social-icons {
display: grid;
grid-template-columns: repeat(2, 44px); /* 2x2 centrado */
gap: 1.5rem; /* Gran espaciado entre botones */
justify-content: center;
width: 100%;
padding-bottom: 1.5rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Separador visual */
}
.mobile-social-icons a {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 44px !important;
height: 44px !important;
border-radius: 50% !important;
box-sizing: border-box !important;
background-color: rgba(255, 255, 255, 0.05);
color: #ffffff;
border: 1.5px solid rgba(255, 255, 255, 0.15); /* Outline circles */
transition: all 0.3s ease;
margin: 0;
padding: 0;
line-height: 0;
}
.mobile-social-icons a:hover,
.mobile-social-icons a:active {
background-color: rgba(255, 255, 255, 0.15);
border-color: rgba(255, 255, 255, 0.3);
transform: translateY(-2px);
}
.mobile-toggles {
display: flex;
flex-direction: row; /* Uno al lado del otro */
justify-content: center;
align-items: center;
gap: 1.2rem;
width: 100%;
padding: 0.5rem 0 0;
}
.mobile-toggles .lang-btn {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 64px !important; /* Mismo ancho que el toggle */
height: 34px !important; /* Mismo alto que el toggle */
border-radius: 50px !important; /* Misma forma de píldora */
box-sizing: border-box !important;
background-color: rgba(255, 255, 255, 0.05) !important;
color: #ffffff !important;
border: 1.5px solid rgba(255, 255, 255, 0.15) !important;
font-weight: 600 !important;
font-size: 1rem !important;
padding: 0 !important;
margin: 0 !important;
cursor: pointer !important;
letter-spacing: 1px !important;
transition: all 0.3s ease !important;
}
.mobile-toggles .lang-btn:hover,
.mobile-toggles .lang-btn:active {
background-color: rgba(255, 255, 255, 0.15);
border-color: rgba(255, 255, 255, 0.3);
}
.mobile-toggles .theme-toggle-switch {
display: inline-block !important;
width: 64px !important;
height: 34px !important;
position: relative;
cursor: pointer;
background-color: rgba(255, 255, 255, 0.05) !important; /* Mismo fondo translúcido que idioma */
border: 1.5px solid rgba(255, 255, 255, 0.15) !important; /* Mismo borde que idioma */
border-radius: 50px !important;
padding: 0 !important;
margin: 0 !important;
overflow: hidden;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}
.header-actions a,
.header-actions label,
.header-actions .lang-btn,
.header-actions .theme-toggle-switch {
display: none !important;
/* Sacar de la barra superior */
}
.mobile-menu-btn {
display: flex !important;
}
.header-container {
display: flex !important;
justify-content: center;
}
.logo-space {
position: fixed !important; /* Ignora el padding del header */
left: 50vw !important; /* 50% exacto de la pantalla real */
transform: translateX(-50%) !important;
top: 0 !important;
height: 4.2rem !important; /* Mantiene la alineación vertical con el header */
margin: 0 !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
z-index: 1003 !important;
}
.header-actions {
position: absolute !important;
left: 1rem !important;
right: auto !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
height: auto;
}
/* Body & general */
body {
overflow-x: clip;
}
.container {
padding: 0 1.5rem !important; /* Márgenes laterales uniformes en móvil, igual a sección Nosotros */
}
.px-section {
padding: 3rem 0;
}
.section-title {
font-size: 1.8rem;
}
/* Hero */
.hero h1 {
font-size: 2rem;
min-height: unset;
margin-top: -1.5rem !important; /* Subir a cuadro verde */
margin-bottom: 0.5rem !important; /* Acercar al subtítulo */
}
.hero p {
font-size: 1rem;
min-height: unset;
margin-bottom: 1.5rem !important; /* Espacio para el botón */
}
.hero button, .hero .btn {
position: absolute;
bottom: -2rem !important; /* Subir el botón de contacto a cuadro violeta */
left: 50%;
transform: translateX(-50%);
width: max-content;
margin-top: 0;
padding: 0.8rem 1.6rem;
font-size: 1rem;
}
.hero-content > div:first-child {
margin-top: -5.5rem !important; /* Subir el saludo y la hora a cuadro rojo */
}
.hero-content {
padding: 0 1rem;
}
.world-clocks-container {
flex-wrap: wrap;
gap: 0.8rem;
padding: 0.5rem 1rem;
justify-content: center;
}
.hero-logo-strip {
gap: 1rem;
padding: 0.8rem 1rem;
}
.hero-logo-strip img {
height: 24px !important;
}
/* About/Nosotros */
.about-grid {
flex-direction: column;
}
.about-badges {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 0.8rem !important;
padding: 0 1.5rem !important; /* Margen un poquito más grande */
}
.badge {
width: 100% !important;
height: auto !important;
min-height: 90px !important; /* Más petisos */
padding: 0.6rem 0.4rem !important;
flex-direction: column !important;
}
.badge-icon {
width: 20px !important;
height: 20px !important;
margin-top: 18px !important; /* Baja aún más el emoji */
margin-bottom: 4px !important;
}
.badge-icon img {
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
}
.badge-content h4 {
font-size: 0.9rem !important;
}
.badge-content p {
font-size: 0.75rem !important;
}
.about-text {
padding: 0 1.5rem !important; /* Sincronizado con los nuevos márgenes */
}
.about-text p {
font-size: 0.9rem;
}
/* Admin Buttons Mobile */
#admin .btn-whatsapp {
font-size: 0.75rem !important;
padding: 8px 12px !important;
width: calc(100% - 1rem) !important;
margin-left: 0.5rem !important;
margin-right: 0.5rem !important;
}
/* Reviews Carousel Mobile */
.reviews-carousel {
padding: 0 !important;
position: relative !important;
}
.reviews-grid {
display: flex !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
scroll-snap-type: x mandatory !important;
gap: 0 !important;
padding: 1.5rem 0 !important;
width: 100% !important;
margin: 0 !important;
scrollbar-width: none;
}
.reviews-grid::-webkit-scrollbar {
display: none;
}
.review-card {
flex: 0 0 80% !important;
/* Más separación visible */
scroll-snap-align: center !important;
width: 80% !important;
max-width: 80% !important;
margin: 0 0.5rem !important;
/* Gap visible */
padding: 1rem !important;
box-sizing: border-box !important;
min-height: 150px !important;
/* Altura reducida */
}
.scroll-arrow {
display: flex !important;
width: 44px !important;
height: 44px !important;
margin-top: -22px !important;
background: white !important;
border: 2.5px solid var(--color-primary) !important;
font-size: 1.8rem !important;
line-height: 1 !important;
z-index: 100 !important;
}
#reviewLeft {
left: 0 !important;
}
#reviewRight {
right: 0 !important;
}
.appointment-notice {
display: inline !important;
font-weight: 700;
/* Resaltado en negrita */
margin-top: 0;
}
.scroll-arrow {
display: flex !important;
width: 36px !important;
height: 36px !important;
margin-top: -18px !important;
}
#reviewLeft {
left: -10px !important;
}
#reviewRight {
right: -10px !important;
}
/* Navbar Mobile tight screens */
.header-container {
flex-direction: row-reverse !important;
justify-content: space-between !important;
}
.header-actions {
flex-direction: row-reverse !important;
gap: 0.5rem !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
}
.logo-space {
margin-left: 0 !important;
}
.google-rating {
flex-direction: column !important; /* Link abajo */
justify-content: center !important;
align-items: center !important;
gap: 0.8rem !important; /* Aumentado para más espacio */
}
.rating-wrapper {
display: flex;
align-items: center;
gap: 0.5rem;
}
.reviews-link {
margin-top: 0.5rem !important; /* Aumentado para más espacio */
display: block !important;
}
.section-title[data-i18n="reviews_title"] {
white-space: nowrap !important;
/* Nuestros Clientes en una sola línea */
font-size: 1.6rem !important;
}
@media (max-width: 450px) {
.header-actions {
gap: 0.4rem !important;
}
.header-actions a {
width: 28px !important;
height: 28px !important;
}
.header-actions a svg {
width: 18px !important;
height: 18px !important;
}
.lang-btn {
min-width: 32px !important;
height: 28px !important;
font-size: 0.7rem !important;
}
.theme-toggle-switch {
width: 44px !important;
height: 28px !important;
}
.mobile-menu-btn {
width: 28px !important;
height: 20px !important;
}
#contacto {
padding-top: 1.5rem !important;
padding-bottom: 8rem !important; /* Large padding to keep admin section out of view */
}
/* ===== MOBILE ACCORDION – Contacto y Admin ===================================== */
#contacto .agents-grid,
#admin .agents-grid {
display: block !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
text-align: center !important;
overflow: visible !important;
overflow-anchor: none !important; /* CRITICAL: Prevents browser from jumping scroll during expansion */
}
#admin .agents-grid {
margin-top: 3.5rem !important; /* Bajamos la posición de la grilla */
}
/* Card: matches desktop aesthetics but adapted for mobile list */
#contacto .agent-card,
#admin .agent-card {
display: block !important; /* Changed from flex to block for total vertical stability */
width: 92% !important;
max-width: none !important; /* Override admin inline max-width */
margin-left: auto !important;
margin-right: auto !important;
margin-top: 0 !important;
margin-bottom: 0.9rem !important; /* Más separación entre cuadros */
padding: 0 !important;
overflow: hidden !important; /* Restore hidden so max-height works properly */
cursor: pointer !important;
background: var(--color-bg-white) !important;
border-radius: 1.5rem !important; /* Más circular/curvado */
border: 1px solid var(--color-border) !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
/* CRITICAL: Disable all layout-affecting transitions on the card itself */
transition: border-radius 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
height: auto !important;
min-height: unset !important;
position: relative !important;
z-index: 1; /* Base z-index */
}
#contacto .agent-card {
margin-bottom: 0.6rem !important; /* Reducción de separación en móvil para Contacto */
}
#admin .agent-card {
margin-bottom: 1.8rem !important; /* Mayor separación para Administración (agrandada levemente) */
}
#contacto .agent-card:hover,
#contacto .agent-card:active,
#admin .agent-card:hover,
#admin .agent-card:active {
transform: none !important; /* Evitar que el hover state mueva la tarjeta en móviles */
}
#contacto .agent-card.expanded,
#admin .agent-card.expanded {
border-color: var(--color-primary) !important;
/* Removed border-radius manipulation to keep it a standard card */
}
/* ── Header: always visible ── */
#contacto .accordion-header,
#admin .accordion-header {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 0.5rem !important;
padding: 0.55rem 2.6rem 0.55rem 0.8rem !important; /* Slightly smaller padding */
width: 100% !important;
box-sizing: border-box !important;
min-height: 48px !important;
position: relative !important;
}
#contacto .accordion-header .agent-name,
#admin .accordion-header .agent-name {
font-size: 0.9rem !important;
margin-bottom: 0 !important;
flex-shrink: 0;
text-align: left !important;
color: var(--color-primary);
}
#contacto .accordion-header .agent-role {
font-size: 0.85rem !important;
margin-bottom: 0 !important;
flex: 1;
text-align: right !important;
overflow: visible !important;
text-overflow: clip !important;
white-space: nowrap !important; /* Volvemos a una sola línea como pidió el usuario */
font-weight: 600 !important;
}
#admin .accordion-header .agent-role {
font-size: 0.72rem !important; /* Agrandado levemente */
margin-top: 3px !important; /* Bajado levemente */
margin-bottom: 0 !important;
flex: 1;
text-align: left !important; /* Alinear a la izquierda bajo el nombre */
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important; /* Volvemos a una sola línea como pidió el usuario */
font-weight: 600 !important;
}
/* ── Body: simple max-height for maximum compatibility ── */
#contacto .accordion-arrow,
#admin .accordion-arrow {
position: absolute;
right: 0.75rem;
top: 50%;
transform: translateY(-50%) rotate(0deg);
font-size: 1.4rem;
font-weight: 300;
color: var(--color-primary);
line-height: 1;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
pointer-events: none;
user-select: none;
z-index: 10 !important;
}
.admin-accordion-header {
padding-right: 2rem !important; /* Espacio extra para la flecha */
}
#contacto .agent-card.expanded .accordion-arrow,
#admin .agent-card.expanded .accordion-arrow {
transform: translateY(-50%) rotate(90deg);
}
/* ── Body: simple max-height for maximum compatibility ── */
/* ── Body: Push-down Accordion ── */
#contacto .accordion-body,
#admin .accordion-body {
display: block !important;
max-height: 0;
overflow: hidden;
transition: max-height 0.35s ease-out;
width: 100% !important;
}
#contacto .agent-card.expanded .accordion-body,
#admin .agent-card.expanded .accordion-body {
max-height: 400px;
}
/* Inner wrapper: STATIC padding */
#contacto .accordion-body-inner,
#admin .accordion-body-inner {
padding: 0 1.2rem 1.2rem; /* Top padding is 0 to let the header breathe */
text-align: center;
width: 100%;
box-sizing: border-box;
}
/* ── 2-Column Redesign Styles ── */
#contacto .accordion-body-inner .agent-inner-row-1,
#admin .accordion-body-inner .agent-inner-row-1 {
display: flex;
justify-content: space-between;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.8rem;
border-bottom: 1px solid var(--color-border);
padding-bottom: 0.6rem;
}
#contacto .accordion-body-inner .agent-inner-row-1 .agent-role,
#admin .accordion-body-inner .agent-inner-row-1 .agent-role {
margin: 0 !important;
font-size: 0.65rem !important;
text-align: left !important;
line-height: 1.2 !important;
white-space: normal !important;
word-break: break-all !important;
color: var(--color-text-main) !important;
}
#contacto .accordion-body-inner .agent-inner-row-1 .agent-schedule,
#admin .accordion-body-inner .agent-inner-row-1 .agent-schedule {
margin: 0 !important;
font-size: 0.65rem !important;
text-align: right !important;
line-height: 1.2 !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: var(--color-text-main) !important;
font-weight: 500 !important;
flex-shrink: 0;
}
#contacto .accordion-body-inner .agent-schedule img,
#admin .accordion-body-inner .agent-schedule img {
display: inline-block !important;
vertical-align: middle !important;
margin-right: 4px !important;
width: 14px !important;
height: 14px !important;
position: relative;
top: -1px;
}
#contacto .accordion-body-inner .agent-inner-time,
#admin .accordion-body-inner .agent-inner-time {
font-size: 0.75rem !important;
margin-bottom: 0.8rem !important;
text-align: center !important;
color: var(--color-text-main) !important;
font-weight: 500;
display: block !important;
}
#contacto .accordion-body-inner .agent-inner-time .appointment-notice,
#admin .accordion-body-inner .agent-inner-time .appointment-notice {
display: inline-block !important;
margin-left: 4px;
color: var(--color-text-main) !important;
font-weight: 500 !important;
font-style: normal;
}
#contacto .accordion-body-inner .agent-inner-wa,
#admin .accordion-body-inner .agent-inner-wa {
width: 100% !important;
font-size: 0.85rem !important;
font-weight: 600 !important;
padding: 10px 15px !important;
text-align: center !important;
margin-top: 0 !important;
border-radius: 2rem !important;
}
.contact-office-box {
margin: 1.2rem 0 0.6rem !important; /* Increased top margin from 0.5rem to 1.2rem */
}
.btn-office {
max-width: 92% !important;
width: auto !important;
margin: 0 auto;
display: block;
font-size: 0.85rem !important;
padding: 10px 20px !important;
background-color: var(--color-primary) !important;
color: #ffffff !important;
font-weight: 600 !important;
border-radius: 2rem !important; /* Capsule style like hero/buttons */
box-shadow: 0 4px 15px rgba(30, 58, 138, 0.3) !important;
transition: all 0.3s ease !important;
text-align: center !important;
}
.btn-office:hover {
background-color: var(--color-primary-dark) !important;
transform: translateY(-2px) !important;
box-shadow: 0 6px 20px rgba(30, 58, 138, 0.4) !important;
}
.office-schedule {
font-size: 0.8rem !important;
display: flex !important;
align-items: center !important;
flex-wrap: nowrap !important;
/* Mismo renglón */
justify-content: center;
gap: 4px;
margin-bottom: 0.25rem !important; /* Tight gap before office button */
}
.office-schedule span {
white-space: nowrap !important;
}
.btn-whatsapp {
padding: 6px 12px !important;
/* Más compacto */
height: auto !important;
min-height: unset !important;
}
/* Admin */
#admin {
min-height: 100vh !important; /* Que resenas no se vea al instante */
padding: 3rem 0 5rem !important;
}
#admin .container {
width: 100%;
}
#admin>.container>div[style*="grid-template-columns: repeat(2"] {
grid-template-columns: 1fr !important;
}
#admin>.container>div[style*="width: 300px"] {
width: 100% !important;
}
/* Reviews / Clientes */
.reviews-grid {
flex-wrap: nowrap !important;
overflow-x: auto !important;
padding: 0.5rem 0 !important;
gap: 20px !important;
scroll-padding: 0 calc(50vw - 115px - 1.5rem) !important; /* Centrado para tarjeta de 230px con padding del container */
scroll-snap-type: x mandatory !important;
}
.reviews-grid::before,
.reviews-grid::after {
content: '';
flex: 0 0 calc(50vw - 115px - 1.5rem);
}
.review-card {
flex: 0 0 230px !important; /* Tarjeta más angosta para un aspecto vertical muy elegante */
width: 230px !important;
min-height: 250px !important; /* Más alta para formato vertical */
scroll-snap-align: center !important;
margin: 0 !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important; /* Distribuye el contenido a lo alto */
padding: 1.2rem !important;
}
#resenas .section-header.text-center > div:first-child {
margin-bottom: 1rem !important; /* Más separación del subtítulo */
}
#resenas .section-header p[data-i18n="reviews_subtitle"] {
margin-bottom: 1rem !important; /* Más separación entre subtítulo y puntuación */
}
#resenas .section-header {
margin-bottom: 1.5rem !important; /* Espacio generoso entre el enlace y el carrusel */
}
#resenas {
min-height: calc(100vh - 9.5rem) !important;
display: block !important;
padding-top: 4.5rem !important;
padding-bottom: 2rem !important;
box-sizing: border-box !important;
background-color: var(--color-bg-white) !important;
}
.reviews-carousel {
position: relative;
}
.reviews-grid {
/* Máscara degradado: menos intensa para que las reseñas se vean mejor y aplicada al grid para no afectar flechas */
-webkit-mask-image: linear-gradient(
to right,
rgba(0,0,0,0.6) 0%,
rgba(0,0,0,0.8) 8%,
black 15%,
black 85%,
rgba(0,0,0,0.8) 92%,
rgba(0,0,0,0.6) 100%
);
mask-image: linear-gradient(
to right,
rgba(0,0,0,0.6) 0%,
rgba(0,0,0,0.8) 8%,
black 15%,
black 85%,
rgba(0,0,0,0.8) 92%,
rgba(0,0,0,0.6) 100%
);
}
/* Footer */
.footer {
font-size: 0.72rem; /* Un poco más chico para que entre la dirección */
padding: 0.6rem 0.5rem; /* Más compacto */
}
.mobile-hide {
display: none !important;
}
.mobile-only-br {
display: block !important;
}
/* Hero logo strip if present */
.logo-strip-container {
flex-wrap: wrap;
gap: 0.5rem;
}
/* Misc overflows */
* {
max-width: 100%;
box-sizing: border-box;
}
img {
max-width: 100%;
height: auto;
}
.director-section {
grid-template-columns: 1fr !important;
}
.respaldo-quote-main {
font-size: 1.6rem !important; /* Achicar título de respaldo */
padding: 0 1rem;
}
#respaldo .commitment-box {
margin: 0 1rem !important; /* Achicar cuadro de respaldo de los costados */
width: auto !important;
max-width: 90% !important;
padding: 1.2rem 1.5rem !important; /* Sacar espacio en blanco de arriba y abajo */
}
/* Scroll arrows for reviews - Rediseñadas para centrar el icono y evitar solapamientos */
.scroll-arrow {
width: 38px !important;
height: 38px !important;
margin-top: -19px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 !important;
background: white !important;
border: 2px solid var(--color-primary) !important;
border-radius: 50% !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
z-index: 100 !important;
}
.scroll-arrow svg {
display: block !important;
width: 20px !important;
height: 20px !important;
stroke: var(--color-primary) !important;
stroke-width: 3px !important; /* Flecha más visible y definida */
}
#reviewLeft {
left: 12px !important; /* Ubicadas perfectamente en los laterales sin solapar la tarjeta */
}
#reviewRight {
right: 12px !important;
}
.header-container {
height: 4rem;
}
.logo-space {
margin-left: 0;
}
}
@media (max-width: 480px) {
.hero h1 {
font-size: 1.6rem;
}
.hero p {
font-size: 0.9rem;
}
.local-clock {
font-size: 0.9rem;
}
.section-title {
font-size: 1.5rem;
}
.btn {
font-size: 0.9rem;
padding: 0.7rem 1.2rem;
}
.agent-name {
font-size: 0.9rem;
}
.world-clocks-container {
padding: 0.4rem 0.8rem;
}
}
}
/* Animations */
.reveal-up {
opacity: 0;
transform: translateY(40px);
transition: opacity 0.8s cubic-bezier(0.25, 0.8, 0.25, 1), transform 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.reveal-up.active {
opacity: 1;
transform: translateY(0);
}
@keyframes float {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-8px);
}
100% {
transform: translateY(0px);
}
}
.badge-icon {
display: inline-block;
animation: float 4s ease-in-out infinite;
}
/* Airplane Animation System */
.airplane-wrapper {
position: fixed;
bottom: 0;
right: 0;
width: 100vw;
height: 100vh;
pointer-events: none;
z-index: 9999;
}
.flying-airplane {
position: absolute;
bottom: -100px;
right: -100px;
width: 120px;
opacity: 0;
}
.airplane-wrapper.active .flying-airplane {
animation: flyCurvedActual 19.5s cubic-bezier(0.3, 0.7, 0.5, 1) forwards;
}
@keyframes flightX {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-120vw);
}
}
@keyframes flightY {
0% {
transform: translateY(0) scaleX(-1) rotate(15deg);
opacity: 1;
filter: drop-shadow(15px 30px 10px rgba(0, 0, 0, 0.2));
}
100% {
transform: translateY(-120vh) scaleX(-1) rotate(-20deg);
opacity: 1;
filter: drop-shadow(10px 20px 5px rgba(0, 0, 0, 0.1));
}
}
.flying-airplane.active {
animation: flyCurved 4.1s linear forwards;
}
@keyframes flyCurved {
0% {
right: -20%;
top: 120vh;
transform: scaleX(-1) rotate(25deg);
opacity: 1;
filter: drop-shadow(15px 30px 10px rgba(0, 0, 0, 0.2));
}
10% {
right: -5%;
top: 95vh;
transform: scaleX(-1) rotate(20deg);
}
20% {
right: 8%;
top: 73vh;
transform: scaleX(-1) rotate(15deg);
}
30% {
right: 20%;
top: 55vh;
transform: scaleX(-1) rotate(10deg);
}
40% {
right: 33%;
top: 40vh;
transform: scaleX(-1) rotate(5deg);
}
50% {
right: 47%;
top: 28vh;
transform: scaleX(-1) rotate(0deg);
filter: drop-shadow(20px 40px 15px rgba(0, 0, 0, 0.3));
}
60% {
right: 62%;
top: 18vh;
transform: scaleX(-1) rotate(-5deg);
}
70% {
right: 78%;
top: 10vh;
transform: scaleX(-1) rotate(-10deg);
}
80% {
right: 96%;
top: 4vh;
transform: scaleX(-1) rotate(-15deg);
}
90% {
right: 116%;
top: 0vh;
transform: scaleX(-1) rotate(-20deg);
}
100% {
right: 150%;
top: -5vh;
transform: scaleX(-1) rotate(-25deg);
opacity: 1;
filter: drop-shadow(15px 30px 10px rgba(0, 0, 0, 0.2));
}
}
/* The curve has to be radical to be visible: X goes 0 to 100 fast, Y goes 100 to 0 slow */
/* The curve has to be radical to be visible: X goes 0 to 100 fast, Y goes 100 to 0 slow */
@keyframes flyCurvedActual {
0% {
bottom: -20vh;
right: -20vw;
transform: scaleX(-1) rotate(0deg);
opacity: 1;
filter: drop-shadow(15px 30px 10px rgba(0, 0, 0, 0.2));
}
100% {
bottom: 120vh;
right: 180vw;
transform: scaleX(-1) rotate(0deg);
opacity: 1;
filter: drop-shadow(10px 20px 5px rgba(0, 0, 0, 0.1));
}
}
/* Mobile: Airplane flies vertically (bottom to top), faster */
@media (max-width: 768px) {
.airplane-wrapper.active .flying-airplane {
animation: flyVerticalMobile 5s linear forwards !important;
}
}
@keyframes flyVerticalMobile {
0% {
bottom: -15vh;
right: 35%;
transform: scaleX(-1) rotate(-45deg);
opacity: 1;
filter: drop-shadow(15px 30px 10px rgba(0, 0, 0, 0.2));
}
50% {
bottom: 50vh;
right: 35%;
transform: scaleX(-1) rotate(-45deg);
opacity: 1;
filter: drop-shadow(20px 40px 15px rgba(0, 0, 0, 0.3));
}
100% {
bottom: 130vh;
right: 35%;
transform: scaleX(-1) rotate(-45deg);
opacity: 1;
filter: drop-shadow(10px 20px 5px rgba(0, 0, 0, 0.1));
}
}
/* Highlight strong text in About section with a nice line */
.about-text strong::after {
content: none;
}
/* Fix dark mode for the strong highlight */
[data-theme="dark"] .about-text strong::after {
background-color: var(--color-primary-light);
opacity: 0.4;
}
/* Reviews Carousel */
.reviews-carousel {
position: relative;
max-width: 1100px;
margin: 0 auto;
padding: 0 60px;
}
.reviews-grid {
display: flex !important;
overflow-x: auto;
overflow-y: visible;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
justify-content: flex-start;
gap: 1.5rem;
padding: 2rem 0;
margin: 0;
scrollbar-width: none;
-ms-overflow-style: none;
width: 100%;
}
.reviews-grid::-webkit-scrollbar {
display: none;
}
/* Merged above */
.scroll-arrow {
position: absolute;
top: 50%;
margin-top: -25px;
background: var(--color-bg-white);
border: 2px solid var(--color-primary);
border-radius: 50%;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 10;
color: var(--color-primary);
transition: var(--transition);
}
#reviewLeft {
left: -20px;
opacity: 0;
visibility: hidden;
}
#reviewRight {
right: -20px;
}
.scroll-arrow {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
z-index: 100;
}
.scroll-arrow:hover {
background: var(--color-primary);
color: white;
box-shadow: 0 6px 20px rgba(66, 133, 244, 0.4);
}
.feature-card {
background-color: var(--color-bg-light);
border: 1px solid rgba(0, 0, 0, 0.1);
}
[data-theme="dark"] .feature-card {
background-color: var(--color-card-bg);
}
[data-theme='dark'] #quienes-somos {
background-color: #030617 !important;
}
.about-text strong {
text-decoration: none !important;
border-bottom: 2.5px solid var(--color-primary);
padding-bottom: 1px;
}
[data-theme='dark'] .about-text strong {
border-bottom-color: #89cff0 !important;
}
[data-theme='dark'] .badge,
[data-theme='dark'] .commitment-box {
border: 1px solid var(--color-primary) !important;
box-shadow: 0 0 15px rgba(30, 58, 138, 0.5) !important; /* Glow/reborde */
}
/* Dark mode celeste for Respaldo and Nav */
[data-theme='dark'] #respaldo h3,
[data-theme='dark'] #respaldo .respaldo-years-text,
[data-theme='dark'] #respaldo .respaldo-svg-icon {
color: #89cff0 !important;
stroke: #89cff0 !important;
}
[data-theme='dark'] .nav-link:hover,
[data-theme='dark'] .nav-link.active,
[data-theme='dark'] .header-actions a:hover svg,
[data-theme='dark'] .lang-btn:hover {
color: #89cff0 !important;
}
[data-theme='dark'] .nav-link:hover::after,
[data-theme='dark'] .nav-link.active::after {
background-color: #89cff0 !important;
}
/* Responsive adjustments for Respaldo Commitment Box and Mobile Menu Dark Mode */
@media (max-width: 768px) {
.commitment-box {
padding: 2rem 1.5rem !important;
}
[data-theme='dark'] #main-nav .nav-link:hover,
[data-theme='dark'] #main-nav .nav-link.active,
[data-theme='dark'] .mobile-toggles .lang-btn:hover,
[data-theme='dark'] .mobile-toggles .lang-btn:active {
color: #ffffff !important;
}
[data-theme='dark'] #main-nav .nav-link:hover::after,
[data-theme='dark'] #main-nav .nav-link.active::after {
background-color: #ffffff !important;
}
}
/* Dark mode hover effect for office button */
[data-theme='dark'] .btn-office:hover {
background-color: #1e3a8b !important;
box-shadow: 0 0 0 1.5px #89cff0, 0 0 15px rgba(137, 207, 240, 0.4) !important;
}
/* Dark mode overrides for agent cards */
[data-theme='dark'] .agent-name,
[data-theme='dark'] .agent-card .agent-role {
color: #ffffff !important;
}
[data-theme='dark'] .agent-card .agent-schedule {
color: var(--color-primary) !important;
}
[data-theme='dark'] .appointment-notice {
opacity: 1 !important;
}
[data-theme='dark'] .badge h3 {
color: #ffffff !important;
}
/* Ensure consistent card background and fine borders in dark mode */
[data-theme='dark'] .badge {
background-color: #1e293b !important;
border: 0.5px solid rgba(255, 255, 255, 0.15) !important;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
}
[data-theme='dark'] .agent-card {
background-color: #1e293b !important;
border: 0.5px solid rgba(255, 255, 255, 0.15) !important;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
}
[data-theme='dark'] .badge:hover,
[data-theme='dark'] .agent-card:hover {
box-shadow: 0 0 0 1px #89cff0 !important;
border-color: #89cff0 !important;
transform: translateY(-0.5rem);
}
[data-theme='dark'] .section-title::after,
[data-theme='dark'] .section-title-bar {
background-color: #89cff0 !important;
}
[data-theme='dark'] #admin .agent-card:hover,
[data-theme='dark'] #admin .highlighted-admin:hover {
box-shadow: 0 0 0 1px #1e3a8a !important;
border-color: #1e3a8a !important;
}
/* Ensure glow effect works for badges too */
.badge.highlighted-admin {
position: relative;
overflow: visible;
}
/* ============================================================
MODAL SECONDARY BUTTON
============================================================ */
/* Modal Buttons */
.btn-modal-primary,
.btn-modal-secondary {
width: 100%;
color: #ffffff;
font-weight: 700;
font-size: 1rem;
padding: 0.8rem 1.5rem;
border-radius: 50px;
border: none;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
font-family: var(--font-main);
}
.btn-modal-primary {
background-color: #1e3a8a;
box-shadow: 0 4px 15px rgba(30, 58, 138, 0.25);
}
.btn-modal-primary:hover {
background-color: #162d66;
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(30, 58, 138, 0.35);
}
.btn-modal-secondary {
background-color: var(--color-secondary);
box-shadow: 0 4px 15px rgba(185, 28, 28, 0.25);
}
.btn-modal-secondary:hover {
background-color: var(--color-secondary-dark);
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(185, 28, 28, 0.35);
}
.btn-modal-primary::before,
.btn-modal-secondary::before {
content: "";
display: inline-block;
width: 20px;
height: 20px;
background-image: url('data:image/svg+xml;utf8,');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.commitment-box {
max-width: 650px;
margin: 0 auto;
background: var(--color-bg-white);
padding: 2.5rem 2.5rem;
border: 1px solid var(--color-border);
border-top: 5px solid var(--color-primary);
border-radius: 1.5rem;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.06);
transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
position: relative;
overflow: hidden;
}
.commitment-box:hover {
transform: translateY(-0.8rem) scale(1.01);
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12);
border-color: var(--color-primary);
}
.commitment-box::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
box-shadow: 0 0 25px var(--color-primary);
opacity: 0;
transition: opacity 0.4s ease;
pointer-events: none;
border-radius: 1.5rem;
}
.commitment-box:hover::after {
opacity: 0.15;
}
[data-theme="dark"] .commitment-box {
background-color: #1e293b;
border: 1px solid rgba(255, 255, 255, 0.2) !important;
border-top: none !important;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
}
[data-theme="dark"] .commitment-box:hover {
border-color: var(--color-primary) !important;
box-shadow: 0 0 0 1px var(--color-primary), 0 30px 60px rgba(0, 0, 0, 0.7);
}
[data-theme="dark"] .commitment-box:hover::after {
opacity: 0.3;
}
[data-theme="dark"] .respaldo-quote-main {
color: #ffffff !important;
}
[data-theme='dark'] #resenas {
background-color: var(--color-bg-light) !important;
}
/* Review Cards and Scroll Arrows Dark Mode Celeste */
[data-theme='dark'] .review-card {
background-color: #1e293b !important;
border: 0.5px solid rgba(255, 255, 255, 0.15) !important;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
}
[data-theme='dark'] .review-card:hover {
box-shadow: 0 0 0 1px #89cff0, 0 20px 50px rgba(0, 0, 0, 0.6) !important;
border-color: #89cff0 !important;
}
[data-theme='dark'] .scroll-arrow {
background-color: #1e293b !important;
border-color: #89cff0 !important;
color: #89cff0 !important;
}
[data-theme='dark'] .scroll-arrow:hover {
background-color: #89cff0 !important;
color: #1e293b !important;
box-shadow: 0 0 15px rgba(137, 207, 240, 0.5) !important;
}
/* ── Admin Modal Styles ── */
.modal-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.45);
z-index: 10000;
align-items: center;
justify-content: center;
padding: 20px;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.modal-overlay.modal-opening {
animation: overlayFadeIn 0.3s ease forwards;
}
.modal-overlay.modal-closing {
animation: overlayFadeOut 0.3s ease forwards;
}
.modal-content {
background: var(--color-bg-white);
padding: 2.8rem 2.2rem;
border-radius: 1.8rem;
max-width: 480px;
width: 95%;
text-align: center;
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.12);
border: 1.5px solid var(--color-primary); /* Reborde fino permanente */
position: relative;
animation: modalScaleUp 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
display: flex;
flex-direction: column;
align-items: center;
}
.modal-close-btn {
position: absolute;
top: 18px;
right: 18px;
background: rgba(128, 128, 128, 0.1);
border: none;
width: 34px;
height: 34px;
border-radius: 50%;
font-size: 1.4rem;
color: var(--color-text-muted);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
transition: all 0.2s ease;
}
.modal-close-btn:hover {
background: rgba(128, 128, 128, 0.2);
color: var(--color-text-main);
}
.modal-icon-wrapper {
background: rgba(30, 58, 138, 0.08);
width: 72px;
height: 72px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.6rem;
border: 2px solid rgba(30, 58, 138, 0.12);
color: var(--color-primary);
}
.modal-title {
margin-top: 0;
margin-bottom: 0.8rem;
color: var(--color-text-main);
font-family: var(--font-heading);
font-size: 1.6rem;
font-weight: 700;
}
.modal-text {
margin-bottom: 2.2rem;
color: var(--color-text-main);
font-size: 1.05rem;
line-height: 1.5;
text-align: center;
}
.modal-actions {
display: flex;
flex-direction: column;
gap: 1.1rem;
align-items: center;
width: 100%;
}
.modal-btn-primary {
background: var(--color-primary) !important;
color: white !important;
width: 100%;
padding: 1rem !important;
font-weight: 600 !important;
border-radius: 1rem !important;
font-size: 1rem !important;
}
.modal-btn-secondary {
background: #c2410c !important; /* Orangish/Reddish for "Continue anyway" but consistent */
color: white !important;
width: 100%;
padding: 1rem !important;
font-weight: 600 !important;
border-radius: 1rem !important;
font-size: 0.95rem !important;
}
/* Symmetrical and consistent modal buttons */
.modal-actions .btn-whatsapp {
margin-top: 0 !important;
height: 52px;
display: flex;
align-items: center;
justify-content: center;
}
.modal-overlay.modal-closing {
animation: fadeOut 0.3s ease forwards;
}
.modal-overlay.modal-closing .modal-content {
animation: modalScaleDown 0.3s ease forwards;
}
@keyframes fadeOut {
from { opacity: 1; }
to { opacity: 0; }
}
@keyframes modalScaleDown {
from {
opacity: 1;
transform: scale(1) translateY(0);
}
to {
opacity: 0;
transform: scale(0.9) translateY(20px);
}
}
body.modal-open {
overflow: hidden !important;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes modalScaleUp {
from {
opacity: 0;
transform: scale(0.9) translateY(20px);
}
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}
.mobile-br {
display: none;
}
/* Mobile font fixes for Pablo's card and Administration layout */
@media (max-width: 768px) {
.mobile-br {
display: inline;
}
.pablo-phone {
font-size: 0.82rem !important;
white-space: nowrap !important;
}
/* Mejoras en la sección Administración para móvil */
#admin {
padding-bottom: 6rem !important; /* Espacio reducido (antes 9rem) */
}
#admin .agents-grid {
gap: 0.8rem !important; /* Separación reducida aún más */
display: flex !important;
flex-direction: column !important;
align-items: center !important;
}
#admin .agent-card.highlighted-admin {
padding-top: 0.4rem !important; /* Altura extrema reducida */
padding-bottom: 0.4rem !important;
width: 100% !important;
max-width: 290px !important;
}
#admin .agent-card.highlighted-admin h3 {
margin-bottom: 0rem !important;
}
#admin .agent-card.highlighted-admin p.agent-role {
margin-bottom: 0.1rem !important;
}
#admin .agent-card.highlighted-admin p.agent-role:nth-of-type(3) {
margin-bottom: 0.2rem !important;
}
#admin .agent-card.highlighted-admin .btn-whatsapp {
margin-top: 0.4rem !important; /* Reducir espacio antes del botón */
}
/* Ajustes para los cuadraditos de Nosotros (Badges) */
#quienes-somos .badge {
width: 145px !important; /* Reducción adicional */
height: 90px !important; /* Reducción adicional */
padding: 0.5rem 0.4rem 0.7rem !important; /* Menos padding arriba para subir el contenido */
gap: 0.3rem !important;
}
#quienes-somos .badge h3 {
font-size: 0.8rem !important;
line-height: 1 !important;
}
#quienes-somos .badge-icon {
margin-top: -2px !important; /* Bajado un poco respecto al cambio anterior */
}
#quienes-somos .badge-icon img {
width: 26px !important;
height: 26px !important;
}
/* Achicar pie de página en móvil */
.footer {
font-size: 0.8rem !important;
padding-top: 1.2rem !important;
padding-bottom: 1.2rem !important;
}
.footer p {
font-size: 0.8rem !important;
line-height: 1.45 !important;
}
.footer p span {
font-size: 0.9em !important;
}
/* ── Hero: Layout mobile — saludo fijo arriba, contenido en centro-bajo ── */
.hero {
align-items: flex-start !important;
}
.hero-content {
position: relative !important;
height: calc(100vh - 4.2rem) !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
padding-top: 13rem !important;
padding-bottom: 2rem !important;
margin-top: 0 !important;
}
/* Saludo + fecha: pegado bien arriba */
.hero-content > div:first-child {
position: absolute !important;
top: 8.5rem !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
margin: 0 !important;
text-align: center !important;
}
.hero h1 {
margin-top: 3rem !important; /* Baja el título respecto al saludo */
margin-bottom: 2.0rem !important; /* Controla espacio entre título y subtítulo */
font-size: 1.6rem !important;
line-height: 1.25 !important;
min-height: auto !important;
}
.hero p {
margin-top: 0 !important;
margin-bottom: 6.5rem !important; /* Controla espacio entre subtítulo y botón */
min-height: auto !important;
}
.hero .btn-primary {
position: relative !important;
bottom: auto !important;
left: 50% !important;
transform: translateX(-50%) !important;
margin-top: 0 !important;
display: inline-block !important;
width: max-content !important;
}
}