/*
 * Tu Guía GPS — tema de color
 * Sobreescribe las variables de main.css con la paleta del logo:
 *   Teal:        #5BBFB5  (fondo logo)
 *   Teal oscuro: #3A9E96  (hover teal)
 *   Rojo:        #E8352A  (pin de mapa)
 *   Crema:       #F8F4EE  (badge interior)
 *   Dorado:      #F5C242  (base del pin)
 *   Navy:        #001C37  (texto contraste)
 */

:root {
    --font-size: 16px;
    --pre-header-background: #5BBFB5;
    --black-color: #001C37;
    --main-color: #FFF;

    /* Paleta logo */
    --primary-color: #5BBFB5;          /* teal */
    --main-color-dark: #3A9E96;        /* teal oscuro */
    --secondary-color: #F8F4EE;        /* crema (era teal pálido) */
    --third-color: #E8352A;            /* rojo logo (corregido) */
    --third-color-dark: #C42A1E;       /* rojo oscuro hover */
    --cream-color: #F8F4EE;            /* alias crema */
    --gold-color: #F5C242;             /* dorado */
    --gold-color-dark: #DBA825;        /* dorado oscuro hover */

    --bs-primary-rgb: 91, 191, 181;
    --bs-secondary-rgb: 248, 244, 238;

    --main-bg: #FFFFFF;
    --card-bg: #F9F9F9;
    --main-text-color: #252525;
    --secondary-text-color: #707070;
    --third-text-color: #454646;
    --medium-gray: #808080;
    --light-gray: #B6B6B6;
    --text-color-cards: #666666;
    --border-radius: .5rem;
    --main-font: 'Poppins';
    --main-padding: 1rem;
    --main-max-width: 1440px;
    --main-shadow: 0px 0px 15px 0px rgba(34, 34, 34, 0.10), 0px 0px 2px 0px rgba(34, 34, 34, 0.25);
    --main-transition: .25s all 0s ease-in-out;
    --bs-link-color-rgb: inherit;
    --bs-border-radius: 0.81rem;
    --bs-link-hover-color-rgb: var(--third-color);
}

/* ---------- Botones ---------- */
/* Azul (legacy) → teal GPS */
.btn.blue,
.btn.blue-special {
    background: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: var(--main-color) !important;
}

.btn.blue:hover,
a.btn.blue:hover,
.btn.blue-special:hover {
    background: var(--main-color-dark) !important;
    border-color: var(--main-color-dark) !important;
}

.btn.blue::after {
    background-color: var(--third-color);
}

/* Naranja (legacy) → rojo GPS */
a.btn.orange,
input.btn.orange {
    background: var(--third-color) !important;
    border-color: var(--third-color) !important;
    color: white;
}

.btn.orange:hover,
a.btn.orange:hover,
input.btn.orange:hover,
input#form-btn:hover {
    background-color: var(--third-color-dark) !important;
    border-color: var(--third-color-dark) !important;
}

.btn.orange::after,
input#form-btn::after {
    background-color: var(--primary-color) !important;
}

/* Botón dorado (acento marca) */
.btn.gold {
    background: var(--gold-color) !important;
    border-color: var(--gold-color) !important;
    color: var(--black-color) !important;
}

.btn.gold:hover {
    background: var(--gold-color-dark) !important;
    border-color: var(--gold-color-dark) !important;
}

/* Botón con borde blanco (sobre fondos oscuros) — sin cambio cromático */

/* ---------- Tarjetas de negocios (sección .features) ---------- */
article.card.dark-blue {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--main-color);
}

article.card.orange {
    background: var(--third-color);
    border-color: var(--third-color);
    color: var(--main-color);
}

article.card.light-blue {
    background: var(--cream-color);
    border-color: var(--cream-color);
    color: var(--main-text-color);
}

/* Headings dentro de cards */
article.card.dark-blue h3,
article.card.orange h3 {
    color: var(--main-color);
}

article.card.light-blue h3 {
    color: var(--black-color);
}

/* Hover cards — bg shift + acento dorado */
article.card.dark-blue:hover {
    background: var(--main-color-dark);
    border-color: var(--gold-color);
    transition: 0.3s all ease-in-out;
}

article.card.dark-blue:hover,
article.card.dark-blue:hover h3,
article.card.dark-blue:hover a.category {
    color: var(--main-color) !important;
}

article.card.orange:hover {
    background: var(--third-color-dark);
    border-color: var(--gold-color);
    transition: 0.3s all ease-in-out;
}

article.card.orange:hover,
article.card.orange:hover h3,
article.card.orange:hover a.category {
    color: var(--main-color) !important;
}

article.card.orange:hover a.category,
article.card.dark-blue:hover a.category {
    border-color: var(--gold-color) !important;
}

article.card.light-blue:hover {
    background: var(--main-color);
    border-color: var(--primary-color);
    transition: 0.3s all ease-in-out;
}

article.card.light-blue:hover,
article.card.light-blue:hover h3,
article.card.light-blue:hover a.category {
    color: var(--third-color) !important;
}

article.card.light-blue:hover a.category {
    border-color: var(--third-color) !important;
}

/* Categorías (pills) */
.categories .category {
    border: 1px solid var(--black-color);
    color: var(--black-color);
}

article.card.dark-blue .category,
article.card.orange .category {
    border-color: var(--main-color);
    color: var(--main-color);
}

/* ---------- Servicios destacados (sección .our-services) ---------- */
.row.service.dark-blue {
    background: var(--primary-color) !important;
    color: white !important;
}

.row.service.orange {
    background: var(--third-color) !important;
    color: white !important;
}

.row.service.light-blue {
    background: var(--cream-color) !important;
    color: var(--main-text-color) !important;
}

.row.service.light-blue h3 {
    color: var(--primary-color) !important;
}

/* Botones dentro de servicios */
.row.service .btn.border-white {
    border-color: var(--gold-color) !important;
    color: var(--gold-color) !important;
}

.row.service .btn.border-white:hover {
    background: var(--gold-color) !important;
    color: var(--black-color) !important;
}

/* ---------- Negocios destacados (carousel .featured-businesses) ---------- */
article.business.dark-blue {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--main-color);
}

article.business.orange {
    background: var(--third-color);
    border-color: var(--third-color);
    color: var(--main-color);
}

article.business.dark-blue h3,
article.business.orange h3 {
    color: var(--main-color);
}

/* Estado por defecto del texto interno — home.css:316 lo deja en #666666 (gris invisible sobre teal/rojo). */
article.business.dark-blue .header p,
article.business.dark-blue .header p.direction,
article.business.dark-blue .content p,
article.business.orange  .header p,
article.business.orange  .header p.direction,
article.business.orange  .content p {
    color: var(--main-color);
}

article.business.dark-blue:hover {
    background: var(--main-color-dark);
    border-color: var(--gold-color);
}

article.business.orange:hover {
    background: var(--third-color-dark);
    border-color: var(--gold-color);
}

article.business.dark-blue:hover .direction,
article.business.orange:hover .direction {
    color: var(--main-color) !important;
}

article.business .category {
    border-color: var(--main-color);
    color: var(--main-color);
}

article.business:hover .category {
    border-color: var(--gold-color) !important;
    color: var(--gold-color) !important;
}

/* ---------- Header / subheader ---------- */
body > header,
.subheader {
    border-bottom-color: var(--primary-color);
}

/* ---------- Banner home (#header-home) ---------- */
body#home .banner,
.banner {
    background: #5BBFB5 center / cover no-repeat url("../images/gps/background-blue.svg") !important;
}

/* ---------- Nav items ::before (flecha menú) ---------- */
body > header nav li.nav-item::before {
    content: url("../images/gps/arrow-menu.svg");
}

/* ---------- Markers ::before (publica tu negocio) ---------- */
.container.markers p::before {
    content: url("../images/gps/marker.svg");
}

/* ---------- Footer tipo-negocio ::before ---------- */
body > footer .tipo-negocio nav ul li::before {
    content: url("../images/gps/arrow-menu.svg");
}

/* ---------- Footer ---------- */
footer .services {
    background: var(--primary-color);
}

/* ---------- Acentos de texto ---------- */
/* Span.orange en h2 → acento rojo logo */
span.orange,
h1 .orange,
h2 .orange,
h3 .orange,
h4 .orange {
    color: var(--third-color) !important;
}

/* Pretitle → teal */
.pretitle {
    color: var(--primary-color);
}

/* ---------- Inputs ---------- */
input:focus,
select:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 .2rem rgba(91, 191, 181, .25) !important;
}

/* ---------- Carousel indicators (paleta logo) ---------- */
.carousel-indicators [data-bs-target] {
    background-color: var(--primary-color);
}

.carousel-indicators .active {
    background-color: var(--gold-color);
}

/* ---------- Markers (sección publica tu negocio) ---------- */
.container.markers p {
    border-color: var(--cream-color);
}

/* ---------- Botón blog "leer más" / similar — acento dorado opcional ---------- */
.post-card .btn.border-white {
    border-color: var(--main-color) !important;
    color: var(--main-color) !important;
}

.post-card .btn.border-white:hover {
    background: var(--gold-color) !important;
    border-color: var(--gold-color) !important;
    color: var(--black-color) !important;
}