:root {
--color-fondo: #F8F9FA;
--color-texto: #1E2A38;
--color-resalto-1: #00A5C3;
--color-resalto-2: #7BD3E0;
--color-contraste: #FFC300;
}
.hero-search-block {
width: 100%;
max-width: none;
}
.hero-search-container {   padding: 24px;  }
.hero-search-form {
width: 100%;
}
.search-fields-wrapper {
display: grid;
grid-template-columns: 1fr 1fr 2fr auto;
gap: 16px;
align-items: start;
}
.search-field {
position: relative;
}
.search-select,
.search-input {
width: 100%;
height: 52px;
padding: 0 16px;
border: 2px solid var(--color-resalto-2);
border-radius: 12px;
font-size: 16px;
font-weight: 500;
color: var(--color-texto);
background: var(--color-fondo);
transition: all 0.3s ease;
outline: none;
}
.search-select:focus,
.search-input:focus {
border-color: var(--color-resalto-1);
box-shadow: 0 0 0 3px rgba(0, 165, 195, 0.1);
transform: translateY(-1px);
}
.search-select {
cursor: pointer;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
background-position: right 12px center;
background-repeat: no-repeat;
background-size: 16px;
padding-right: 40px;
appearance: none;
}
.location-input-wrapper {
position: relative;
height: 52px;
display: flex;
align-items: center;
}
.location-input.using-geolocation {
background: linear-gradient(135deg, var(--color-resalto-2), var(--color-resalto-1));
color: white;
font-weight: 600;
border-color: var(--color-resalto-1);
}
.location-input.using-geolocation::placeholder {
color: rgba(255, 255, 255, 0.8);
}
.geolocate-btn {
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
width: 36px;
height: 36px;
border: none;
background: var(--color-resalto-1);
color: white;
border-radius: 8px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
z-index: 2;
}
.geolocate-btn:hover {
background: var(--color-texto);
transform: translateY(-50%) scale(1.05);
}
.geolocate-btn.active {
background: var(--color-contraste);
color: var(--color-texto);
}
.geolocate-btn.loading {
animation: pulse 1.5s infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
.geo-status {
position: absolute;
top: 100%;
left: 0;
right: 0;
margin-top: 4px;
font-size: 12px;
font-weight: 500;
text-align: center;
}
.status-loading {
color: var(--color-resalto-1);
}
.status-success {
color: var(--color-resalto-2);
}
.status-error {
color: #dc3545;
}
.search-submit-btn {
height: 52px;
padding: 0 24px;
background: linear-gradient(135deg, var(--color-contraste), #FFD700);
color: var(--color-texto);
border: none;
border-radius: 12px;
font-size: 16px;
font-weight: 700;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
transition: all 0.3s ease;
white-space: nowrap;
min-width: 120px;
justify-content: center;
}
.search-submit-btn:hover {
background: linear-gradient(135deg, #FFD700, var(--color-contraste));
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(255, 195, 0, 0.3);
}
.search-submit-btn:active {
transform: translateY(0);
} .pac-container {
border-radius: 12px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
border: 1px solid var(--color-resalto-2);
font-family: inherit;
margin-top: 4px;
}
.pac-item {
padding: 12px 16px;
font-size: 14px;
border-top: 1px solid #f0f0f0;
cursor: pointer;
}
.pac-item:first-child {
border-top: none;
}
.pac-item:hover {
background-color: #f8f9fa;
}
.pac-item-selected {
background-color: var(--color-resalto-2);
color: white;
} @media (max-width: 768px) {
.search-fields-wrapper {
grid-template-columns: 1fr;
gap: 12px;
}
.hero-search-container {
padding: 20px;
border-radius: 16px;
}
.search-select,
.search-input,
.search-submit-btn {
height: 48px;
font-size: 15px;
}
.search-submit-btn {
min-width: 100%;
}
}
@media (max-width: 480px) {
.hero-search-container {
padding: 16px;
border-radius: 12px;
}
.search-fields-wrapper {
gap: 10px;
}
}