/* ===================================================================== COMFORT CABO TRANSPORTATION — Tokens de marca Cargar en el ANTES de las demás hojas de estilo. Cambiando estos valores cambia toda la paleta del sitio. ===================================================================== */ :root { /* --- Primarios --- */ --cc-turquoise: #17A2B8; /* color principal (antes: dorado) */ --cc-turquoise-dark: #12808F; /* hover / degradados */ --cc-turquoise-light: #4FC3D5; --cc-turquoise-soft: #E6F6F9; /* fondos suaves */ --cc-navy: #0A2540; /* azul profundo — encabezados, footer */ --cc-navy-2: #0F3557; /* azul profundo secundario */ --cc-navy-deep: #061A2E; /* --- Acento dorado (usar con moderación: bordes, íconos, detalles) --- */ --cc-gold: #C9A227; --cc-gold-dark: #A6851C; /* --- Neutros --- */ --cc-white: #FFFFFF; --cc-gray-50: #F8FAFC; --cc-gray-100: #F1F5F9; --cc-gray-300: #E0E0E0; --cc-gray-600: #64748B; --cc-text: #1A1A1A; /* --- Estados --- */ --cc-success: #16A34A; --cc-warning: #F59E0B; --cc-danger: #EF4444; --cc-whatsapp: #25D366; /* --- Degradados --- */ --cc-grad-primary: linear-gradient(135deg, var(--cc-turquoise), var(--cc-turquoise-dark)); --cc-grad-navy: linear-gradient(135deg, var(--cc-navy), var(--cc-navy-2)); /* --- Tipografía --- */ --cc-font-head: 'Poppins', 'Segoe UI', system-ui, sans-serif; --cc-font-body: 'Inter', 'Segoe UI', system-ui, sans-serif; /* --- Radios y sombras --- */ --cc-radius: 10px; --cc-radius-lg: 16px; --cc-shadow: 0 4px 15px rgba(10, 37, 64, .12); --cc-shadow-lg: 0 12px 32px rgba(10, 37, 64, .18); } /* ===================================================================== Red de seguridad El sitio no tenía la regla base de imágenes responsivas. Sin ella, si una hoja de estilos no carga, las fotos se muestran a su tamaño real (1600 px) y revientan el diseño. Con esto, el peor caso es una página sin estilos pero legible. ===================================================================== */ img, video, svg { max-width: 100%; height: auto; } /* Utilidades opcionales */ .cc-accent { color: var(--cc-gold); } .cc-rule-gold { border-top: 2px solid var(--cc-gold); } .cc-btn-primary { background: var(--cc-grad-primary); color: var(--cc-white); border: none; border-radius: var(--cc-radius); padding: 14px 28px; font-family: var(--cc-font-head); font-weight: 600; cursor: pointer; transition: filter .2s ease, transform .2s ease; } .cc-btn-primary:hover { filter: brightness(1.08); transform: translateY(-1px); } /* ===================================================================== Selector de idioma EN / ES ===================================================================== */ .cc-lang-switch { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; border: 1.5px solid rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .08); margin-left: 6px; vertical-align: middle; } .cc-lang-btn { appearance: none; border: 0; background: transparent; color: inherit; opacity: .62; font: inherit; font-size: .78rem; font-weight: 700; letter-spacing: .6px; line-height: 1; padding: 6px 11px; border-radius: 999px; cursor: pointer; transition: background .2s ease, opacity .2s ease, color .2s ease; } .cc-lang-btn:hover { opacity: 1; } .cc-lang-btn.active { background: var(--cc-turquoise); color: #fff; opacity: 1; } .cc-lang-btn:focus-visible { outline: 2px solid var(--cc-turquoise-light); outline-offset: 2px; } /* En el menú móvil el selector va como una fila más de la lista */ @media (max-width: 900px) { .menu .cc-lang-item { justify-content: center; display: flex; padding: 10px 0; } .cc-lang-switch { margin-left: 0; } .cc-lang-btn { padding: 8px 18px; font-size: .85rem; } }