/*
Theme Name: Guía Comercial Caynet v1.2.
Theme URI: https://caynet.com.ar
Description: Tema a medida desde cero para la Guía Comercial e Informativa Caynet.
Author: Caynet
Version: 1.2.0
*/

    :root{
        --blue:#00B3FD;
        --purple:#D911EA;
        --indigo:#7B5CF0;
        --ink:#1E2233;
        --muted:#6B7280;
        --surface:#F5F6FB;
        --white:#FFFFFF;
		--green:#198754;
        --whatsapp-green:#25D366;
        --grad: linear-gradient(120deg, var(--blue) 0%, var(--indigo) 55%, var(--purple) 100%);
        --grad-soft: linear-gradient(120deg, rgba(0,179,253,.40) 0%, rgba(123,92,240,.40) 55%, rgba(217,17,234,.40) 100%);
        --red-emergency:#EF4444;
        --grad-emergency: linear-gradient(120deg, #F87171 0%, #EF4444 55%, #DC2626 100%);
		--blue-utility:#5680FF;
		
	  }
	   
	   
		
      *{ box-sizing:border-box; }
      body{
        font-family:'Inter', system-ui, sans-serif;
        color:var(--ink);
        background:var(--white);
        -webkit-font-smoothing:antialiased;
      }
      h1,h2,h3,h4, .brand-font{
        font-family:'Poppins', system-ui, sans-serif;
      }
      a{ text-decoration:none; }
      .text-grad{
        background:var(--grad);
        -webkit-background-clip:text;
        background-clip:text;
        color:transparent;
      }
      /* ===== NAVBAR - 1 ===== */
      .navbar-caynet{
        background:var(--white);
        box-shadow:0 1px 0 rgba(30,34,51,.06);
        padding: 0.8rem 0;
      }
      .navbar-caynet .nav-link{
        color:var(--ink);
        font-weight:500;
        font-size:.95rem;
        padding:.5rem 1rem !important;
        position:relative;
      }
      .navbar-caynet .nav-link:hover,
      .navbar-caynet .nav-link.active{
        color:var(--indigo);
      }
      .navbar-caynet .nav-link.active::after{
        content:"";
        position:absolute;
        left:1rem; right:1rem; bottom:.15rem;
        height:2px;
        background:var(--grad);
        border-radius:2px;
      }
      .btn-grad{
        background:var(--grad);
        color:#fff;
        border:none;
        font-weight:600;
        font-size:.9rem;
        padding:.55rem 1.3rem;
        border-radius:50px;
        transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
        box-shadow:0 6px 16px rgba(123,92,240,.28);
        display: inline-flex;
        align-items: center;
        gap: .4rem;
      }
      .btn-grad:hover{
        color:#fff;
        transform:translateY(-1px);
        filter:brightness(1.06);
        box-shadow:0 10px 22px rgba(123,92,240,.36);
      }
      .brand-logo{ height:34px; width:auto; }
	  
	  
	  /* ========= NAVBAR -2  ================*//* Color de fondo oscuro para el buscador y barra inferior (estilo e-commerce) */
.bg-dark-header {
    background-color: #2c3545;
}

/* Marca CAYNET.GUÍA */
.text-ink {
    color: #1a1a1a;
}
.text-grad {
    background: linear-gradient(135deg, #00B3FD 0%, #D911EA 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Botón Gradiente "Sumar mi Negocio" */
.btn-grad {
    background: linear-gradient(135deg, #00B3FD 0%, #D911EA 100%);
    border: none;
    transition: transform 0.2s ease, opacity 0.2s ease;
}
.btn-grad:hover {
    opacity: 0.95;
    transform: translateY(-1px);
}

/* Buscador Estilo Imagen */
.search-form-full input:focus {
    box-shadow: none;
}
.btn-search-custom {
    background-color: #f7b267; /* Color amarillo/naranja del botón de búsqueda */
    border: none;
    transition: background-color 0.2s ease;
}
.btn-search-custom:hover {
    background-color: #f5a042;
}

/* Barra de categorías desplazable en móvil */
.header-bottom-row::-webkit-scrollbar {
    display: none; /* Oculta la barra de scroll en móviles */
}
.header-bottom-row {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.opacity-100-hover:hover {
    opacity: 1 !important;
}

/* ===== NAVBAR OFF CANVSA CATEGORIAS ===== */
/* Offcanvas con fondo al 70% de opacidad y efecto desenfoque */
#offcanvasCategorias {
    background-color: rgba(255, 255, 255, 0.85) !important; /* Fondo oscuro con 70% de opacidad */
    /*backdrop-filter: blur(10px);  Efecto vidrio esmerilado / glassmorphism 
    -webkit-backdrop-filter: blur(10px);*/
    color: #ffffff;
}

/* Ajustes de legibilidad para elementos dentro del Offcanvas */
#offcanvasCategorias .offcanvas-header {
    background-color: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.85);
}

#offcanvasCategorias .offcanvas-body {
    background-color: transparent !important;
}

#offcanvasCategorias .offcanvas-footer {
    background-color: transparent !important;
    border-top: 1px solid rgba(255, 255, 255, 0.95);
}

/* Botones de categorías adaptados al fondo translúcido */
#offcanvasCategorias .list-group-item {
    background-color: rgba(255, 255, 255, 0.90) !important;
    border: 1px solid rgba(255, 255, 255, 0.90) !important;
    color: #ffff00 !important;
}

#offcanvasCategorias .list-group-item:hover {
    background-color: rgba(255, 255, 255, 0.20) !important;
    border-color: rgba(255, 255, 255, 0.30) !important;
    transform: translateX(4px);
}

#offcanvasCategorias .badge {
    background-color: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.20);
}

      /* ===== HERO / HEADER ===== */
      .hero{
        position:relative;
        overflow:hidden;
        background:var(--grad-soft);
        padding:3.5rem 0 3.5rem;
      }
      .hero::before, .hero::after{
        content:"";
        position:absolute;
        border-radius:50%;
        filter:blur(2px);
        opacity:.55;
      }
      .hero::before{
        width:420px; height:420px;
        border:2px solid rgba(123,92,240,.25);
        top:-160px; right:-120px;
      }
      .hero::after{
        width:260px; height:260px;
        border:2px solid rgba(0,179,253,.30);
        bottom:-100px; left:-80px;
      }
      .hero-orbit-dot{
        position:absolute;
        width:14px; height:14px;
        border-radius:50%;
        background:var(--grad);
        top:38px; right:210px;
        box-shadow:0 0 0 6px rgba(217,17,234,.12);
      }
      .hero-eyebrow{
        display:inline-flex;
        align-items:center;
        gap:.5rem;
        font-size:.8rem;
        font-weight:600;
        letter-spacing:.06em;
        text-transform:uppercase;
        color:var(--indigo);
        background:#fff;
        border:1px solid rgba(123,92,240,.18);
        padding:.4rem .9rem;
        border-radius:50px;
        box-shadow:0 4px 14px rgba(30,34,51,.05);
      }
      .hero h1{
        font-weight:800;
        font-size:clamp(1.5rem, 2.2vw, 2.2rem);
        line-height:1.15;
        margin-top:0.85rem;
        color: var(--ink);
      }
      .hero p.lead{
        color:var(--muted);
        font-size:1.1rem;
        max-width:580px;
        margin-bottom: 2rem;
      }

      /* ===== BUSCADOR HOME ===== */
      .search-card{
        position:relative;
        z-index:2;
        background:#fff;
        border-radius:20px;
        padding:.6rem;
        /*box-shadow:0 22px 50px -18px rgba(30,34,51,.18);*/
        max-width:820px;
        margin:0 auto;
        display: flex;
        align-items: center;
        gap: .5rem;
      }
      .search-card .form-select{
        border:none;
        background:transparent;
        font-weight:600;
        font-size:.92rem;
        color:var(--ink);
        max-width:180px;
        cursor: pointer;
      }
      .search-card .form-select:focus{ box-shadow:none; }
      .search-divider{ width:1px; height: 32px; background:#E7E8F0; margin:.4rem 0; flex:0 0 auto; }
      .search-card input[type="search"]{
        border:none;
        background:transparent;
        font-size:1rem;
        width: 100%;
        padding-left: .5rem;
      }
      .search-card input[type="search"]:focus{ box-shadow:none; outline:none; }
     
	 .search-card .btn-search{
        background:var(--grad);
        color:#fff;
        border:none;
        border-radius:14px;
        width:48px; height:48px;
        display:flex; align-items:center; justify-content:center;
        flex:0 0 auto;
        transition: transform .18s ease;
      }
      .search-card .btn-search:hover{
        transform: scale(1.04);
      }
      .search-tags{
        margin-top:1.2rem;
        display:flex;
        flex-wrap:wrap;
        justify-content: center;
        gap:.5rem;
      }
      .search-tags .chip{
        font-size:.82rem;
        color:var(--muted);
        background:#fff;
        border:1px solid #E7E8F0;
        border-radius:50px;
        padding:.35rem .9rem;
        transition:.18s ease;
        text-decoration: none;
      }
      .search-tags .chip:hover{
        color:var(--indigo);
        border-color:rgba(123,92,240,.35);
        background:rgba(123,92,240,.06);
      }

      /* ===== QUICK ICONS ===== */
      .quick-section{ padding:4.5rem 0 2.5rem; }
      .quick-title{ font-weight:500; font-size:1.3rem; margin-bottom:.2rem; }
      .quick-sub{ color:var(--muted); font-size:0.95rem; }
	  

.quick-icon i {
    z-index: 2;
    transition: transform 0.2s ease;
}

.quick-card:hover .quick-icon i {
    transform: scale(1.1);
}

/* Colores para cada tarjeta basándose en la paleta de colores del tema */
.qc-1 .quick-icon i { color: var(--blue); }
.qc-2 .quick-icon i { color: var(--red-emergency); }
.qc-3 .quick-icon i { color: var(--indigo); }
.qc-4 .quick-icon i { color: var(--blue-utility); }
.qc-5 .quick-icon i { color: var(--purple); }
.qc-6 .quick-icon i { color: var(--green); }

      .quick-card{
        display:block;
        text-align:center;
        padding:1.9rem 1rem 1.6rem;
        border-radius:18px;
        border:1px solid #ECEDF4;
        background:#fff;
        height:100%;
        transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
      }
      .quick-card:hover{
        transform:translateY(-5px);
        box-shadow:0 20px 34px -18px rgba(30,34,51,.24);
        border-color:transparent;
      }
      .quick-icon{
        width:64px; height:64px;
        margin:0 auto 1rem;
        border-radius:50%;
        display:flex; align-items:center; justify-content:center;
        background:var(--grad-soft);
        position:relative;
      }
      .quick-icon::before{
        content:"";
        position:absolute;
        inset:-5px;
        border-radius:50%;
        border:1.5px dashed rgba(123,92,240,.28);
      }
      .quick-icon svg{ width:28px; height:28px; }
      .quick-card .qname{
        font-weight:600;
        font-size:.98rem;
        color:var(--ink);
        margin-bottom:.15rem;
      }
      .quick-card .qdesc{
        font-size:.8rem;
        color:var(--muted);
      }

      /* icon colors cycling through gradient stops */
      .qc-1 .quick-icon svg{ stroke:var(--blue); }
      .qc-2 .quick-icon svg{ stroke:#5B8CF5; }
      .qc-3 .quick-icon svg{ stroke:var(--indigo); }
      .qc-4 .quick-icon svg{ stroke:#B44BE8; }
      .qc-5 .quick-icon svg{ stroke:var(--purple); }
      .qc-6 .quick-icon svg{ stroke:var(--blue); }
      .qc-7 .quick-icon svg{ stroke:var(--indigo); }
	  
	  /* ===== BUSCADOR HOME ===== */
	   .search-form-home{  z-index:2;
        background:#fff;
        border-radius:20px;
		
		 }
	  
	   /* ===== BUSCADOR INTERIOR ===== */
	   .bg-search-navbar2{
		     background:var(--grad);  
	   }
	   .btn-search-custom{background:#1DB5FF;}
	   .btn-search-custom:hover{background:#1DB5FF;}
	   
/* =========================================================================
   3º NIVEL NAVBAR - CHIPS SCROLL
   ========================================================================= */

/* Contenedor con Scroll Horizontal Oculto */
.nav-filter-scroll {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
}

.nav-filter-scroll::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Edge */
}

/* Estilo Base de las Píldoras / Chips */
.btn-filter-chip {
    display: inline-flex;
    align-items: center;
    padding: 5px 15px;
    font-size: 0.675rem;
    font-weight: 600;
    color: #fff;
    background-color: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 40rem; /* Pill shape */
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    white-space: nowrap;
}

/* Hover State */
.btn-filter-chip:hover {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.45);
    border-color: rgba(255, 255, 255, 0.4);
}

/* Active State (Botón seleccionado) */
.btn-filter-chip.active {
    color: #0d6efd; /* Azul de acento o color de tu marca */
    background-color: #ffffff;
    border-color: #ffffff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

 
 /* ===== FEATURED BUSINESSES & CAROUSEL ===== */
      .section-title-row{
        display:flex;
        align-items:flex-end;
        justify-content:space-between;
        margin-bottom:1.8rem;
        flex-wrap:wrap;
        gap:.5rem;
      }
      .see-all{
        font-weight:600;
        font-size:.9rem;
        color:var(--indigo);
      }
      .see-all:hover{ color:var(--purple); }

      .biz-card{
        border-radius:18px;
        overflow:hidden;
        border:1px solid #ECEDF4;
        height:100%;
        transition:transform .2s ease, box-shadow .2s ease;
        background:#fff;
        display: flex;
        flex-direction: column;
      }
      .biz-card:hover{
        transform:translateY(-5px);
        box-shadow:0 20px 34px -18px rgba(30,34,51,.22);
      }
      .biz-img-wrapper{
        position: relative;
        height: 160px;
        overflow: hidden;
      }
      .biz-img{
        height:100%;
        width:100%;
        object-fit:cover;
        display:block;
      }
      .biz-badge-loc{
        position: absolute;
        top: 10px;
        left: 10px;
        background: rgba(30,34,51,.75);
        backdrop-filter: blur(4px);
        color: #fff;
        font-size: .75rem;
        font-weight: 600;
        padding: .25rem .65rem;
        border-radius: 50px;
      }
      .biz-body{ 
        padding:1.2rem; 
        display: flex; 
        flex-direction: column; 
        flex-grow: 1; 
      }
      .biz-cat{
        font-size:.72rem;
        font-weight:700;
        text-transform:uppercase;
        letter-spacing:.04em;
        color:var(--indigo);
      }
      .biz-name{ font-weight:700; font-size: 1.1rem; margin:.25rem 0 .35rem; color: var(--ink); }
      .biz-desc{ font-size:.85rem; color:var(--muted); margin-bottom:1rem; flex-grow:1;}
      .btn-wsap-custom {
        background: #25D366;
        color: #fff;
        border-radius: 50px;
        padding: .45rem 1rem;
        font-weight: 600;
        font-size: .85rem;
        display: inline-flex;
        align-items: center;
        gap: .4rem;
        border: none;
        transition: filter .18s ease;
      }
      .btn-wsap-custom:hover {
        color: #fff;
        filter: brightness(1.08);
      }

      .bg-surface{ background:var(--surface); }

      /* Swiper Customizations */
      .swiper-ofertas {
        padding-bottom: 3rem !important;
      }
      .offer-card-custom {
        border-radius: 18px;
        border: 1px solid #ECEDF4;
        background: #fff;
        overflow: hidden;
        height: 100%;
        display: flex;
        flex-direction: column;
      }
      .offer-badge {
        position: absolute;
        top: 10px;
        right: 10px;
        background: var(--purple);
        color: #fff;
        font-weight: 700;
        font-size: .8rem;
        padding: .3rem .6rem;
        border-radius: 8px;
      }

      /* ===== CTA BANNER ===== */
      .cta-banner{
        border-radius:24px;
        background:var(--grad);
        padding:3.5rem 2.5rem;
        color:#fff;
        position:relative;
        overflow:hidden;
      }
      .cta-banner::after{
        content:"";
        position:absolute;
        width:260px; height:260px;
        border-radius:50%;
        border:2px solid rgba(255,255,255,.25);
        right:-80px; top:-90px;
      }
      .cta-banner h3{ font-weight:700; font-size: 1.8rem; }
      .cta-banner p{ opacity:.92; max-width:520px; font-size: 1.05rem; }
      .btn-cta-outline{
        background:#fff;
        color:var(--indigo);
        font-weight:700;
        border-radius:50px;
        padding:.75rem 1.8rem;
        border:none;
        box-shadow: 0 8px 20px rgba(0,0,0,0.15);
        transition: transform .18s ease;
      }
      .btn-cta-outline:hover{ color:var(--purple); transform: translateY(-2px); }
	  
	     /* ===== CALENDARIO DE TURNOS ===== */
      .shift-table-card {
        background: #fff;
        border-radius: 20px;
        border: 1px solid #ECEDF4;
        overflow: hidden;
      }
      .shift-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1rem 1.5rem;
        border-bottom: 1px solid #ECEDF4;
        transition: background .18s ease;
      }
      .shift-row:last-child {
        border-bottom: none;
      }
      .shift-row:hover {
        background: var(--surface);
      }
      .shift-date-badge {
        background: var(--surface);
        border: 1px solid #ECEDF4;
        font-size: .85rem;
        font-weight: 700;
        color: var(--ink);
        padding: .4rem .8rem;
        border-radius: 10px;
        min-width: 130px;
        text-align: center;
      }
	  
	  

	/* ===== TARJETAS RESULTADOS - SEARCH.PHP ===== */
	.card-comercio-result {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
	}
	.card-comercio-result:hover {
    transform: translateY(-2px);
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.08) !important;
	}
	.hover-primary:hover {
    color: #0d6efd !important;
	}
	.object-fit-cover {
    object-fit: cover;
	}  

      /* ===== DATOS ÚTILES / URGENCIAS ===== */
      .emergency-card {
        background: #fff;
        border-radius: 18px;
        border: 1px solid #FCA5A5;
        padding: 1.25rem 1.5rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        transition: transform .18s ease, box-shadow .18s ease;
      }
      .emergency-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 12px 25px rgba(239,68,68,.16);
      }
      .emergency-icon {
        width: 50px;
        height: 50px;
        border-radius: 14px;
        background: #FEE2E2;
        color: var(--red-emergency);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.3rem;
        flex: 0 0 auto;
      }
      .emergency-number {
        font-family: 'Poppins', system-ui, sans-serif;
        font-weight: 500;
        font-size: 1rem;
        color: var(--red-emergency);
      }
	  
	        /* ===== DATOS ÚTILES / ORGANISMOS INSTITUCIONES ===== */

      .utility-card {
        background: #fff;
        border-radius: 18px;
        border: 1px solid #5482FF;
        padding: 1.25rem 1.5rem;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        transition: transform .18s ease, box-shadow .18s ease;
      }
      .utility-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 22px rgba(30,34,51,.08);
      }
      .utility-icon {
        width: 46px;
        height: 46px;
        border-radius: 12px;
        background: var(--surface);
        color: var(--blue-utility);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;
        flex: 0 0 auto;
      }
	 .utility-number {
        font-family: 'Poppins', system-ui, sans-serif;
        font-weight: 500;
        font-size: 1rem;
        color: var(--blue-utility);
      }
	  
	   .farmacy-card {
        background: #fff;
        border-radius: 18px;
        border: 1px solid ;
        padding: 1.25rem 1.5rem;
		/*box-shadow: 0 6px 18px rgba(239,68,68,.08);
        display: flex;
        align-items: center;
        justify-content: space-between;
        transition: transform .18s ease, box-shadow .18s ease;*/
      }

      /* ===== FOOTER ===== */
      footer{
        background:var(--ink);
        color:#C7C9DA;
        padding:3.5rem 0 1.5rem;
      }
      footer h6{
        color:#fff;
        font-weight:600;
        margin-bottom:1rem;
        font-size:.9rem;
        text-transform:uppercase;
        letter-spacing:.04em;
      }
      footer a{ color:#C7C9DA; font-size:.88rem; text-decoration: none; }
      footer a:hover{ color:#fff; }
      footer ul{ list-style:none; padding:0; margin:0; }
      footer li{ margin-bottom:.55rem; }
      .footer-bottom{
        border-top:1px solid rgba(255,255,255,.08);
        margin-top:2.5rem;
        padding-top:1.5rem;
        font-size:.8rem;
        color:#8B8FA3;
      }
      .footer-brand-logo{ height:30px; filter:brightness(0) invert(1); opacity:.92; }
      .social-dot{
        width:36px; height:36px;
        border-radius:50%;
        background:rgba(255,255,255,.08);
        display:inline-flex; align-items:center; justify-content:center;
        color:#fff;
        transition:.2s ease;
        text-decoration: none;
      }
      .social-dot:hover{ background:var(--grad); transform:translateY(-2px); color: #fff; }

      @media (max-width: 767.98px){
        .search-card{ padding:.5rem; flex-wrap: wrap; }
        .search-card .form-select{ max-width:100%; font-size:.88rem; width: 100%; }
        .search-divider{ display: none; }
        .cta-banner{ padding:2.2rem 1.5rem; text-align:center; }
        .cta-banner::after{ display:none; }
      }