/*
 * Tu Guía Empresarial — tema de color
 * Sobreescribe variables y estilos de main.css con la paleta del logo.
 * Todos los valores salen muestreados de los dos ficheros que subiste:
 *
 *   Amarillo bombilla: #FFE497  (47% de los píxeles del logo sin fondo)
 *   Negro tipografía:  #000000  (texto, flecha y marco del logo)
 *   Lila:              #D7B8E4  (esquina superior izquierda del degradado)
 *   Rosa:              #FAD5DC  (superior derecha)
 *   Crema:             #EEF0DB  (inferior izquierda)
 *   Azul claro:        #BAE7FE  (inferior derecha)
 *
 * Carácter: pastel y amable, lo contrario del tema de Mi Directorio. Bordes
 * finos y redondeos suaves, siguiendo el marco fino del logo; nada brutalista.
 *
 * Reglas de la marca:
 *   1. El amarillo #FFE497 es MUY claro: nunca lleva texto blanco. Sobre él,
 *      siempre el negro violáceo (16:1). Lo mismo con lila, rosa y azul.
 *   2. El blanco solo va sobre --ink.
 *   3. El negro puro se sustituye por #1F1B2E, un negro con un punto del lila
 *      del degradado: sobre pasteles resulta menos duro.
 *
 * Tipografía: MONTSERRAT, la del propio logo. Identificada comparando el
 * título "TU GUIA EMPRESARIAL" renderizado con varias candidatas contra un
 * recorte del logo: casa la G con barra horizontal, la M ancha de trazos
 * rectos, la R de pierna recta y las proporciones anchas. Poppins, que es lo
 * que llevaba antes este tema, es más estrecha y redonda y no se parece.
 * Solo titulares y etiquetas: el cuerpo sigue en Helvetica Neue LT Pro
 * (main.css:103), igual que en las otras tres webs.
 */

/* Montserrat autoalojada, subconjunto latino (cubre todo el español: tildes,
   ñ, ü, ¿¡ y €). Nada de Google Fonts por CDN: además de la política del
   proyecto de no depender de terceros, cargarla desde fonts.googleapis.com
   envía la IP de cada visitante a Google. */
@font-face {
    font-family: 'Montserrat';
    src: url('fonts/Montserrat-600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('fonts/Montserrat-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('fonts/Montserrat-800.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

:root {
    --font-size: 16px;
    --pre-header-background: #1F1B2E;
    --black-color: #1F1B2E;
    --main-color: #FFF;

    /* Paleta logo */
    --ink: #1F1B2E;                 /* negro violáceo */
    --ink-soft: #3A3350;            /* hover sobre superficies oscuras */
    --brand-yellow: #FFE497;        /* amarillo bombilla */
    --brand-yellow-dark: #F2CE6A;   /* amarillo hover */
    --lila: #D7B8E4;
    --lila-soft: #EDE0F4;
    --rosa: #FAD5DC;
    --crema: #EEF0DB;
    --azul: #BAE7FE;

    --primary-color: #1F1B2E;       /* primario = negro violáceo */
    --main-color-dark: #3A3350;
    --secondary-color: #EDE0F4;     /* lila suave */
    --third-color: #FFE497;         /* acento = amarillo */
    --third-color-dark: #F2CE6A;
    --cream-color: #EEF0DB;
    --gold-color: #FFE497;          /* alias (compat. con reglas heredadas) */
    --gold-color-dark: #F2CE6A;

    --bs-primary-rgb: 31, 27, 46;
    --bs-secondary-rgb: 255, 228, 151;

    --main-bg: #FFFFFF;
    --card-bg: #FBF7FD;
    --main-text-color: #2A2535;
    --secondary-text-color: #5F5872;
    --third-text-color: #3A3350;
    --medium-gray: #7C7690;
    --light-gray: #B8B2C6;
    --text-color-cards: #4A445C;

    /* Geometría: el logo tiene un marco fino y la bombilla redondeada.
       Redondeos suaves, nada de esquinas duras. */
    --border-radius: 8px;
    --bs-border-radius: 10px;
    --main-font: 'Poppins';
    /* Fuente de marca para titulares y etiquetas. Si Montserrat no llega a
       cargar, cae a Helvetica Neue, que es la del cuerpo: nunca a una serif. */
    --brand-font: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
    --main-padding: 1rem;
    --main-max-width: 1440px;
    --main-shadow: 0 4px 18px 0 rgba(31, 27, 46, .10), 0 1px 3px 0 rgba(31, 27, 46, .08);
    --main-transition: .25s all 0s ease-in-out;
    --bs-link-color-rgb: inherit;
    --bs-link-hover-color-rgb: var(--ink);
}

/* ---------- Tipografía ---------- */
/* Titulares en Montserrat, la fuente del logo. Sin este bloque heredarían la
   Helvetica Neue del body (main.css:103), que es lo que usan las otras webs.
   Los titulares NO van en mayúsculas: h1 lleva nombres de negocio
   (list/detail.blade.php, client.blade.php) y en caja alta gritarían. */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--brand-font);
    font-weight: 700;
    letter-spacing: -.01em;
}

body section h2 {
    font-weight: 700;
}

/* El h1 del banner (main.css:420 lo pone a 800) */
body #main .banner header h1,
.banner header h1 {
    font-family: var(--brand-font);
    font-weight: 800;
}

/* Etiquetas en caja alta y espaciadas: es exactamente el estilo del lema
   "AGENCIA DE MARKETING" del logo. */
p.pretitle,
.pretitle,
a.btn,
input#form-btn,
input.btn,
button.btn:not(.btn-outline-secondary),
.categories .category,
body > header nav li.nav-item a,
body > footer p.title {
    font-family: var(--brand-font);
}

p.pretitle,
.pretitle {
    color: var(--ink);
    font-weight: 700;
    letter-spacing: .12em;
}

/* ---------- Botones ---------- */
/* El ::after de main.css:495 es un círculo que se expande al 300% en hover:
   el color que acaba viendo el usuario es el del círculo, no el background.
   Por eso el color del texto en :hover se contrasta contra el ::after. */
a.btn,
input#form-btn,
input.btn,
button.btn:not(.btn-outline-secondary) {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
}

/* Azul (legacy) → negro violáceo */
.btn.blue,
.btn.blue-special {
    background: var(--ink) !important;
    border: 1.5px solid var(--ink) !important;
    color: var(--main-color) !important;
}

.btn.blue::after,
.btn.blue-special::after {
    background-color: var(--brand-yellow) !important;
}

.btn.blue:hover,
a.btn.blue:hover,
button.btn.blue:hover,
.btn.blue-special:hover,
a.btn.blue-special:hover {
    background: var(--ink) !important;
    border-color: var(--ink) !important;
    color: var(--ink) !important;      /* sobre el círculo amarillo */
}

/* Naranja (legacy) → amarillo bombilla. main.css:578 le pone texto blanco,
   que sobre #FFE497 es ilegible: se fuerza el negro violáceo. */
.btn.orange,
a.btn.orange,
input.btn.orange,
button.btn.orange {
    background: var(--brand-yellow) !important;
    border: 1.5px solid var(--ink) !important;
    color: var(--ink) !important;
}

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

.btn.orange:hover,
a.btn.orange:hover,
input.btn.orange:hover,
button.btn.orange:hover,
input#form-btn:hover {
    background-color: var(--brand-yellow) !important;
    border-color: var(--ink) !important;
    color: var(--main-color) !important;   /* sobre el círculo negro */
}

/* Botón con borde sobre fondos oscuros */
a.btn.border-white {
    border: 1.5px solid var(--main-color) !important;
    color: var(--main-color) !important;
}

a.btn.border-white::after {
    background-color: var(--brand-yellow) !important;
}

a.btn.border-white:hover {
    background: transparent !important;
    border-color: var(--brand-yellow) !important;
    color: var(--ink) !important;
}

/* ---------- Tarjetas de negocios (.features) ---------- */
.features .card {
    border-width: 1.5px;
    border-color: var(--lila);
}

article.card.dark-blue {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--main-color);
}

article.card.orange {
    background: var(--brand-yellow);
    border-color: var(--brand-yellow-dark);
    color: var(--ink);
}

article.card.light-blue {
    background: var(--lila-soft);
    border-color: var(--lila);
    color: var(--ink);
}

article.card.dark-blue h3 {
    color: var(--main-color);
}

article.card.orange h3,
article.card.light-blue h3 {
    color: var(--ink);
}

article.card:hover {
    transform: translateY(-4px);
    transition: .3s all ease-in-out;
}

article.card.dark-blue:hover {
    background: var(--ink-soft);
    border-color: var(--brand-yellow);
}

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.dark-blue:hover a.category {
    border-color: var(--brand-yellow) !important;
    color: var(--brand-yellow) !important;
}

article.card.orange:hover {
    background: var(--brand-yellow-dark);
}

article.card.light-blue:hover {
    background: var(--lila);
}

article.card.orange:hover,
article.card.orange:hover h3,
article.card.light-blue:hover,
article.card.light-blue:hover h3 {
    color: var(--ink) !important;
}

/* Categorías (pills): marco fino, como el rectángulo del logo */
.categories .category {
    border: 1.5px solid var(--ink);
    color: var(--ink);
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 600;
}

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

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

/* ---------- Tarjetas del listado (.business-grid) ----------
   list-business.css:112 pone todos los <p> en var(--text-color-cards) y en
   :hover los pasa a blanco (list-business.css:130). Sobre las tarjetas claras
   de esta paleta el blanco no se lee: se fija el color por variante. */
.business-grid .card.dark-blue h3,
.business-grid .card.dark-blue p,
.business-grid .card.dark-blue small,
.business-grid .card.dark-blue .direction,
.business-grid .card.dark-blue:hover h3,
.business-grid .card.dark-blue:hover p,
.business-grid .card.dark-blue:hover small,
.business-grid .card.dark-blue:hover .direction {
    color: var(--main-color);
}

.business-grid .card.orange h3,
.business-grid .card.orange p,
.business-grid .card.orange small,
.business-grid .card.orange .direction,
.business-grid .card.orange:hover h3,
.business-grid .card.orange:hover p,
.business-grid .card.orange:hover small,
.business-grid .card.orange:hover .direction,
.business-grid .card.light-blue h3,
.business-grid .card.light-blue p,
.business-grid .card.light-blue small,
.business-grid .card.light-blue .direction,
.business-grid .card.light-blue:hover h3,
.business-grid .card.light-blue:hover p,
.business-grid .card.light-blue:hover small,
.business-grid .card.light-blue:hover .direction {
    color: var(--ink);
}

.business-grid .card.dark-blue .category,
.business-grid .card.dark-blue:hover .category {
    color: var(--main-color);
    border-color: var(--main-color);
}

.business-grid .card.orange .category,
.business-grid .card.orange:hover .category,
.business-grid .card.light-blue .category,
.business-grid .card.light-blue:hover .category {
    color: var(--ink);
    border-color: var(--ink);
}

.business-grid .card.dark-blue:hover {
    background: var(--ink-soft);
    border-color: var(--brand-yellow);
}

.business-grid .card.orange:hover {
    background: var(--brand-yellow-dark);
}

.business-grid .card.light-blue:hover {
    background: var(--lila);
}

/* ---------- Servicios destacados (.our-services) ---------- */
.row.service.dark-blue {
    background: var(--ink) !important;
    color: var(--main-color) !important;
}

.row.service.orange {
    background: var(--brand-yellow) !important;
    color: var(--ink) !important;
}

.row.service.orange h3 {
    color: var(--ink) !important;
}

.row.service.light-blue {
    background: var(--azul) !important;
    color: var(--ink) !important;
}

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

.row.service.dark-blue .btn.border-white {
    border-color: var(--brand-yellow) !important;
    color: var(--brand-yellow) !important;
}

.row.service.dark-blue .btn.border-white:hover {
    background: var(--brand-yellow) !important;
    color: var(--ink) !important;
}

/* Sobre los fondos claros el borde blanco desaparece */
.row.service.orange .btn.border-white,
.row.service.light-blue .btn.border-white {
    border-color: var(--ink) !important;
    color: var(--ink) !important;
}

.row.service.orange .btn.border-white:hover,
.row.service.light-blue .btn.border-white:hover {
    background: var(--ink) !important;
    color: var(--brand-yellow) !important;
}

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

article.business.orange {
    background: var(--brand-yellow);
    border-color: var(--brand-yellow-dark);
    color: var(--ink);
}

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

article.business.orange h3 {
    color: var(--ink);
}

/* home.css:316 deja este texto en #666666: gris sobre negro no se lee */
article.business.dark-blue .header p,
article.business.dark-blue .header p.direction,
article.business.dark-blue .content p {
    color: var(--main-color);
}

article.business.orange .header p,
article.business.orange .header p.direction,
article.business.orange .content p {
    color: var(--ink);
}

article.business.dark-blue:hover {
    background: var(--ink-soft);
    border-color: var(--brand-yellow);
}

article.business.orange:hover {
    background: var(--brand-yellow-dark);
}

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

article.business.orange:hover .direction {
    color: var(--ink) !important;
}

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

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

/* ---------- Header ---------- */
body > header,
.subheader {
    border-bottom: 2px solid var(--lila);
}

/* El logo es 600x350 (1.71:1). Con el tope de 67px de main.css:311, pensado
   para el logo apaisado de Tu Guía Online (6.83:1), su texto queda diminuto. */
a.navbar-brand img {
    max-height: 88px;
}

body > header .subheader.middle {
    padding: .5em 0;
}

@media screen and (max-width: 991px) {
    a.navbar-brand img {
        max-height: 68px;
    }
}

body > header nav li.nav-item a {
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 700;
}

body > header nav li.nav-item a:hover {
    color: var(--brand-yellow-dark);
}

/* ---------- Fondo general de la página ----------
   main.css:99 pone en el body res/images/background.svg, con dos pines de mapa
   de Tu Guía Online. Aquí se cambia solo la imagen por la versión con
   bombillas; background-attachment: fixed y background-size: cover siguen
   viniendo de main.css. */
body {
    background-image: url("../images/empresarial/background.svg");
}

/* ---------- Banner ---------- */
body#home .banner,
.banner {
    background: var(--lila-soft) center / cover no-repeat url("../images/empresarial/background-gradient.svg") !important;
}

/* Sobre el degradado pastel, todo el texto en negro violáceo.
   OJO con el selector: blog.css:33 pone `.banner { color: var(--main-bg) }`
   (blanco) SIN el prefijo #main, y ese wrapper no existe en /productos,
   /quienes-somos, /contacto ni /publique-su-negocio. Las reglas de main.css
   y las mías que empiezan por `body #main .banner` no llegan ahí, así que
   el banner de esas páginas salía en blanco sobre el degradado claro.
   Por eso aquí se cubre `.banner` a secas además de la variante con #main. */
.banner,
.banner header,
.banner header h1,
.banner header h2,
.banner header p,
.banner header div,
.banner .price,
.banner .iva,
body #main .banner header :where(h1, h2),
body #main .banner header h1,
body #main .banner header h2 {
    color: var(--ink);
}

/* blog.css:37 deja el precio en var(--third-color): amarillo sobre claro */
#main.product .price {
    color: var(--ink);
}

/* main.css:425 pone el <span> del h1 en blanco, invisible sobre los pasteles.
   Se convierte en el recurso del logo: resalte amarillo con letra negra. */
body #main .banner header h1 span {
    color: var(--ink);
    background: var(--brand-yellow);
    padding: 0 .18em;
    border-radius: 4px;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

/* ---------- Iconos ::before ---------- */
body > header nav li.nav-item::before {
    content: url("../images/empresarial/arrow-menu.svg");
}

.container.markers p::before {
    content: url("../images/empresarial/marker.svg");
}

/* Sobre el footer oscuro la flecha negra no se vería */
body > footer .tipo-negocio nav ul li::before,
body > footer .provincias nav li::before {
    content: url("../images/empresarial/arrow-menu-yellow.svg");
}

/* ---------- Footer ---------- */
/* main.css:274 pinta el footer entero con var(--primary-color) */
body > footer section.services {
    background: var(--lila-soft) center / cover no-repeat url("../images/empresarial/background-services.png");
}

/* Sobre el lila claro el texto va oscuro: main.css:327 y :334 lo ponen blanco */
body > footer section.services .pretitle,
body > footer section.services .description,
body > footer section.services h2 {
    color: var(--ink);
}

footer .services {
    background: var(--ink);
}

/* El logo lleva tipografía negra: sobre el footer oscuro necesita placa clara */
body > footer .logo > img {
    background: var(--main-color);
    border-radius: var(--border-radius);
    padding: .6rem .9rem;
    max-width: 260px;
    height: auto;
}

/* ---------- Acentos de texto ---------- */
/* El amarillo como texto sobre blanco es ilegible (1.3:1). El acento va como
   resalte, igual que en el logo: fondo amarillo con letra negra. */
span.orange,
h1 .orange,
h2 .orange,
h3 .orange,
h4 .orange {
    color: var(--ink) !important;
    background: var(--brand-yellow);
    padding: 0 .18em;
    border-radius: 4px;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

/* ---------- Buscador e inputs ---------- */
.search-form {
    background: var(--lila-soft);
}

.search-form .form-group label {
    color: var(--ink);
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--lila) !important;
    box-shadow: 0 0 0 .2rem rgba(215, 184, 228, .45) !important;
}

/* ---------- Select2 ----------
   El buscador mezcla un <select> nativo (#zone_dropdown) con un widget select2
   (#type_dropdown): header-form.blade.php solo inicializa el segundo, y el
   widget es un <span>, así que no le entran las reglas de select:focus. */
.select2-container--bootstrap-5 .select2-selection {
    border: none;
    min-height: 40px;
}

.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection {
    border-color: var(--lila) !important;
    box-shadow: 0 0 0 .2rem rgba(215, 184, 228, .45) !important;
}

.select2-container--bootstrap-5 .select2-dropdown {
    border: 1.5px solid var(--lila);
}

.select2-container--bootstrap-5 .select2-results__option--highlighted,
.select2-container--bootstrap-5 .select2-results__option--highlighted[aria-selected] {
    background-color: var(--brand-yellow) !important;
    color: var(--ink) !important;
}

.select2-container--bootstrap-5 .select2-results__option[aria-selected="true"],
.select2-container--bootstrap-5 .select2-results__option--selected {
    background-color: var(--ink) !important;
    color: var(--main-color) !important;
}

.select2-container--bootstrap-5 .select2-selection__clear,
.select2-container--bootstrap-5 .select2-selection__arrow b {
    color: var(--ink);
}

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

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

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

/* ---------- Blog ---------- */
.post-card .btn.border-white {
    border-color: var(--main-color) !important;
    color: var(--main-color) !important;
}

.post-card .btn.border-white:hover {
    background: var(--brand-yellow) !important;
    border-color: var(--brand-yellow) !important;
    color: var(--ink) !important;
}