/*
 * Mi Directorio de Negocios — tema de color
 * Sobreescribe las variables y estilos de main.css con el lenguaje visual del logo:
 *
 *   Amarillo marca:  #F2C438  (mancha del logo)
 *   Amarillo oscuro: #D9A81E  (hover / sombreado de la mancha)
 *   Negro tinta:     #111111  (texto y marco del logo)
 *   Negro suave:     #2E2E2E  (hover sobre superficies negras)
 *   Crema:           #FBF6E9  (papel, secciones claras)
 *
 * Reglas de la marca:
 *   1. El amarillo NUNCA lleva texto blanco (contraste 1.66:1). Sobre amarillo,
 *      texto negro (12.6:1). El blanco solo va sobre negro.
 *   2. Bordes rectos y sombra dura desplazada: es el marco negro del logo.
 *   3. Etiquetas (botones, pills, pretítulos) en mayúsculas con tracking abierto.
 *      Los titulares NO van en mayúsculas porque h1/h2 llevan nombres propios
 *      de negocios (list/detail.blade.php:34, client.blade.php:16).
 *      Bloque opcional al final del fichero para activarlas.
 */

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

    /* Paleta logo */
    --ink: #111111;                    /* negro tinta del logo */
    --ink-soft: #2E2E2E;               /* negro hover */
    --brand-yellow: #F2C438;           /* amarillo mancha */
    --brand-yellow-dark: #D9A81E;      /* amarillo hover */

    --primary-color: #111111;          /* primario = negro */
    --main-color-dark: #2E2E2E;        /* hover del primario */
    --secondary-color: #FBF6E9;        /* crema */
    --third-color: #F2C438;            /* acento = amarillo */
    --third-color-dark: #D9A81E;       /* amarillo oscuro hover */
    --cream-color: #FBF6E9;            /* alias crema */
    --gold-color: #F2C438;             /* alias amarillo (compat.) */
    --gold-color-dark: #D9A81E;

    --bs-primary-rgb: 17, 17, 17;
    --bs-secondary-rgb: 242, 196, 56;

    --main-bg: #FFFFFF;
    --card-bg: #FBF6E9;
    --main-text-color: #1A1A1A;
    --secondary-text-color: #5C5C5C;
    --third-text-color: #333333;
    --medium-gray: #7A7A7A;
    --light-gray: #B6B6B6;
    --text-color-cards: #4D4D4D;

    /* Geometría: el logo es angular, sin redondeos */
    --border-radius: 2px;
    --bs-border-radius: 2px;
    --main-font: 'Poppins';
    --main-padding: 1rem;
    --main-max-width: 1440px;
    /* Sombra dura desplazada = marco negro del logo */
    --main-shadow: 5px 5px 0 0 var(--ink);
    --hard-shadow: 5px 5px 0 0 var(--ink);
    --hard-shadow-lg: 8px 8px 0 0 var(--ink);
    --main-transition: .25s all 0s ease-in-out;
    --bs-link-color-rgb: inherit;
    --bs-link-hover-color-rgb: var(--ink);
}

/* ---------- Tipografía de marca ---------- */
/* main.css:155 pone 'Open Sans' (no cargada) en los titulares. El logo es
   pesado y compacto: Poppins 800 con tracking cerrado se le aproxima. */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--main-font), sans-serif;
    font-weight: 800;
    letter-spacing: -.015em;
}

body section h2 {
    font-weight: 800;
}

/* Etiquetas: mayúsculas con tracking abierto */
p.pretitle,
.pretitle {
    color: var(--ink);
    font-weight: 700;
    letter-spacing: .14em;
}

/* ---------- Geometría: fuera redondeos ----------
   El tema pone --border-radius y --bs-border-radius a 2px, pero hay radios
   escritos a pelo en main.css, home.css, detail_business.css, list-business.css,
   blog.css y filter-map.css que no pasan por esas variables. Aquí se cuadran
   todos, que es lo que pide el logo (marco recto, sin curvas).

   NO se tocan los border-radius: 50% ni el ::after circular de los botones:
   ese círculo es la animación de hover y debe seguir siendo redondo. */

/* Buscador */
.search-form {
    border-radius: var(--border-radius);
}

.search-form select,
.search-form input:not([type="submit"]),
.search-form span.select2-selection.select2-selection--single {
    border-radius: var(--border-radius) !important;
}

/* Píldoras y botones sueltos */
.button,
#filters_form select,
.map_kluster_list_item_see_more,
#quick_easy .swiper-button-next.inside,
#quick_easy .swiper-button-prev.inside {
    border-radius: var(--border-radius);
}

/* Home */
#quick_easy ul li a:after,
#quick_swiper article figure,
#quick_swiper article figure img,
#featured_destinations .container article,
#featured_destinations .container article figure:before,
#featured_destinations .container article figure img,
.our-services .service,
.post-card,
.post-card::before,
.business img {
    border-radius: var(--border-radius);
}

/* Imágenes que van a ras dentro de una tarjeta ya cuadrada */
.row.service .image,
.blog .card img,
.post-card img,
.features .card img{
    border-radius: 0 !important;
}

/* Ficha de negocio y listados */
section.about {
    border-radius: var(--border-radius) !important;
}

.col-auto.logo img.img-business,
.list_activities::-webkit-scrollbar-thumb,
.map_kluster_list_item,
.map_kluster_list_item_image img,
.custom_message,
#map,
#filters_form,
body #main .banner nav form {
    border-radius: var(--border-radius);
}

/* ---------- Botones ---------- */
/* Rectos, con marco negro y sombra dura. El hover invierte negro <-> amarillo. */
a.btn,
input#form-btn,
input.btn,
button.btn:not(.btn-outline-secondary) {
    border-radius: 2px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
}

/* Azul (legacy) → negro */
.btn.blue,
.btn.blue-special {
    background: var(--ink) !important;
    border: 2px solid var(--ink) !important;
    color: var(--main-color) !important;
    box-shadow: var(--hard-shadow);
}

/* El ::after es el círculo que se expande en hover: es el color final visible. */
.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 */
    box-shadow: 2px 2px 0 0 var(--ink);
}

/* Naranja (legacy) → amarillo marca, SIEMPRE con texto negro */
.btn.orange,
a.btn.orange,
input.btn.orange,
button.btn.orange {
    background: var(--brand-yellow) !important;
    border: 2px solid var(--ink) !important;
    color: var(--ink) !important;
    box-shadow: var(--hard-shadow);
}

.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 */
    box-shadow: 2px 2px 0 0 var(--ink);
}

input#form-btn {
    border-radius: 2px;
    text-transform: uppercase;
    letter-spacing: .06em;
}

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

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;          /* sobre el círculo amarillo */
}

/* Botón amarillo explícito (acento de marca) */
.btn.gold {
    background: var(--brand-yellow) !important;
    border: 2px solid var(--ink) !important;
    color: var(--ink) !important;
}

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

/* ---------- Tarjetas de negocios (sección .features) ---------- */
.features .card {
    border-width: 2px;
    border-color: var(--ink);
    border-radius: 2px;
    box-shadow: var(--hard-shadow);
}

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(--ink);
    color: var(--ink);
}

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

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

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

/* Hover: la tarjeta se despega y la sombra crece (marco del logo) */
.features .card:hover,
article.card:hover {
    transform: translate(-3px, -3px);
    box-shadow: var(--hard-shadow-lg);
    transition: 0.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);
    border-color: var(--ink);
}

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

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

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

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

/* Categorías (pills): etiqueta rectangular con marco, como el del logo */
.categories .category {
    border: 1.5px solid var(--ink);
    border-radius: 2px;
    color: var(--ink);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 700;
}

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 de negocios (.business-grid) ----------
   list-business.css:112 pone TODOS los <p> de la tarjeta en
   var(--text-color-cards), un gris que sobre la tarjeta negra no se lee
   (era el caso de la dirección y la descripción). Y en :hover los pasa a
   blanco (list-business.css:130), que sobre la tarjeta amarilla tampoco.
   Aquí se fija el color por variante, en reposo y en hover. */

/* Negra -> todo en blanco */
.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);
}

/* Amarilla y crema -> todo en negro */
.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);
}

/* Pills de categoría dentro de esas tarjetas */
.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);
}

/* Fondos de hover coherentes con el resto del tema */
.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);
    border-color: var(--ink);
}

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

/* ---------- Servicios destacados (sección .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(--cream-color) !important;
    color: var(--main-text-color) !important;
}

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

/* Botones dentro de servicios */
.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 fondo amarillo el borde blanco desaparece: pasa a negro */
.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 (carousel .featured-businesses) ---------- */
article.business {
    border-width: 2px;
    border-radius: 2px;
    box-shadow: var(--hard-shadow);
}

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(--ink);
    color: var(--ink);
}

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

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

/* Estado por defecto del texto interno — home.css:316 lo deja en #666666
   (gris ilegible tanto sobre negro como sobre amarillo). */
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:hover {
    transform: translate(-3px, -3px);
    box-shadow: var(--hard-shadow-lg);
}

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

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

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);
}

article.business.dark-blue:hover .category {
    border-color: var(--brand-yellow) !important;
    color: var(--brand-yellow) !important;
}

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

/* ---------- Header / subheader ---------- */
/* Filete negro grueso: el marco del logo aplicado a la cabecera */
body > header,
.subheader {
    border-bottom: 3px solid var(--ink);
}

/* Logo: main.css:311 lo limita a 67px de alto, una medida pensada para el logo
   APAISADO de Tu Guía Online (328x48, relación 6.8:1), que a esa altura sale a
   458px de ancho. El de esta marca es casi cuadrado (377x348, relación 1.08:1):
   a 67px de alto ocupa solo 73px de ancho y sus tres líneas de texto quedan a
   unos 8px, ilegibles. Se sube el tope y se recorta el padding de la cabecera
   para que no crezca de más. */
a.navbar-brand img {
    max-height: 100px;
}

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

/* En tablet y móvil se baja un poco: ahí la cabecera compite con el contenido */
@media screen and (max-width: 991px) {
    a.navbar-brand img {
        max-height: 76px;
    }
}

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

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

/* ---------- Banner home (#header-home) ---------- */
body#home .banner,
.banner {
    background: var(--brand-yellow) center / cover no-repeat url("../images/directorio/background-yellow.svg") !important;
}

/* Sobre amarillo, todo el texto del banner va en negro */
body #main .banner header :where(h1, h2),
body #main .banner header h1,
body #main .banner header h2 {
    color: var(--ink);
}

/* main.css:425 pone el <span> del h1 en blanco (invisible sobre amarillo).
   Se convierte en el recurso del logo: bloque negro con texto en blanco. */
body #main .banner header h1 span {
    color: var(--main-color);
    background: var(--ink);
    padding: 0 .18em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

/* La ilustración del banner se controla desde config/webs.php
   ('show_hero_image' => false), no desde aquí. */

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

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

/* ---------- Footer ---------- */
/* main.css:274 pinta el footer entero con var(--primary-color), que en este
   tema es negro. Todo lo que va dentro tiene que contar con fondo negro. */

/* Flechas de los listados: sobre el footer negro la flecha negra no se ve. */
body > footer .tipo-negocio nav ul li::before,
body > footer .provincias nav li::before {
    content: url("../images/directorio/arrow-menu-yellow.svg");
}

/* Sección "Crece con nosotros" (main.css:315).
   OJO: la foto de fondo es la propia imagen de la sección, no un <img> — el
   .col-sm-5 de footer.blade.php:16 está vacío. Si se sobreescribe `background`
   con un color plano, la foto desaparece. Aquí sólo se cambia el color base. */
body > footer section.services {
    background: var(--cream-color) center / cover no-repeat url("../images/directorio/background-services.png");
}

/* Sobre el crema el texto va en negro: 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);
}

/* El logo es negro sobre mancha amarilla: sobre el footer negro desaparecía la
   tipografía. Se le da una placa clara con el marco de la marca. */
body > footer .logo > img {
    background: var(--main-color);
    border: 2px solid var(--ink);
    border-radius: 2px;
    padding: .6rem .9rem;
    max-width: 240px;
    height: auto;
}

/* ---------- Acentos de texto ---------- */
/* El amarillo como texto es ilegible sobre blanco (1.66:1). El acento del logo
   es justo lo contrario: bloque 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;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

/* ---------- Inputs ---------- */
input,
select,
textarea {
    border-radius: 2px !important;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--ink) !important;
    box-shadow: 0 0 0 .2rem rgba(242, 196, 56, .45) !important;
}

/* ---------- Select2 ----------
   El buscador mezcla un <select> nativo (#zone_dropdown) con un widget select2
   (#type_dropdown): header-form.blade.php:37 sólo inicializa el segundo. El
   widget es un <span>, así que NO le entran las reglas de `select:focus` de
   más arriba y los dos campos se comportaban distinto. Aquí se igualan. */

/* Caja cerrada: mismo alto y radio que el <select> nativo (main.css:635),
   ya cuadrado por la sección de geometría de más arriba. */
.select2-container--bootstrap-5 .select2-selection {
    border: none;
    border-radius: var(--border-radius) !important;
    min-height: 40px;
}

/* Foco: mismo anillo que input:focus / select:focus */
.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection {
    border-color: var(--ink) !important;
    box-shadow: 0 0 0 .2rem rgba(242, 196, 56, .45) !important;
}

/* Desplegable: marco negro recto, como el resto del tema */
.select2-container--bootstrap-5 .select2-dropdown {
    border: 2px solid var(--ink);
    border-radius: 2px;
}

/* Opción bajo el cursor: amarillo con texto negro (nunca blanco sobre amarillo) */
.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;
}

/* Opción ya seleccionada: negro con texto blanco */
.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;
}

/* Aspa de "allowClear" y flecha */
.select2-container--bootstrap-5 .select2-selection__clear,
.select2-container--bootstrap-5 .select2-selection__arrow b {
    color: var(--ink);
}

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

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

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

/* ---------- 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;
}

/* ---------- OPCIONAL: titulares en mayúsculas ----------
   Fiel al logo, pero pone en mayúsculas los nombres de negocio
   (list/detail.blade.php:34 y client.blade.php:16 usan <h1> para el nombre).
   Descomentar solo si se asume ese efecto.

h1, h2, .h1, .h2 {
    text-transform: uppercase;
    font-weight: 900;
    letter-spacing: -.01em;
}

body.detail h1,
body.client h1 {
    text-transform: none;
}
*/