/* =========================================================
   PADIHER CUSTOM CSS - COMPLETO Y CORREGIDO
   Archivo para: Main File/css/padiher-custom.css
   - No lleva <style> ni </style>
   - Rutas ajustadas para estar dentro de la carpeta css/
   - Fondos locales convertidos a .webp
   ========================================================= */

/* =========================
     CABECERA / LOGOS
     ========================= */
  .pq-header-logo{display:flex;align-items:center;}
  .pq-header-logo .logo{
    max-height: 72px; height:auto; width:auto;
  }
  @media (max-width: 991.98px){
    .pq-header-logo .logo{max-height: 60px;}
  }
  .pq-footer-logo{max-height:64px;height:auto;width:auto;}

  /* ✅ FORZAR LOGO GRANDE (override del tema) */
  .pq-header-logo,
  .pq-header-logo a{display:flex !important;align-items:center !important;}

  .pq-header-logo img,
  .pq-header-logo .logo{
    height: 95px !important;
    max-height: none !important;
    width: auto !important;
    max-width: none !important;
  }
  @media (max-width: 991.98px){
    .pq-header-logo img,
    .pq-header-logo .logo{height: 75px !important;}
  }

  /* =========================
     NAV MENU (MÁS GRANDE + EFECTO)
     ========================= */
  .pq-main-menu > li > a{
    font-size:15.5px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;
    color:#0f172a;position:relative;padding:18px 14px;transition:all .25s ease;
  }
  .pq-main-menu > li > a::after{
    content:"";position:absolute;left:14px;right:14px;bottom:10px;height:3px;border-radius:999px;
    background:linear-gradient(90deg,#22c55e,#14532d);
    transform:scaleX(0);transform-origin:left;transition:transform .25s ease;opacity:.95;
  }
  .pq-main-menu > li > a:hover{
    color:#14532d;text-shadow:0 6px 18px rgba(34,197,94,.25);transform:translateY(-1px);
  }
  .pq-main-menu > li > a:hover::after{transform:scaleX(1);}
  .pq-main-menu > li.current-menu-item > a,
  .pq-main-menu > li.active > a{color:#14532d;}
  .pq-main-menu > li.current-menu-item > a::after,
  .pq-main-menu > li.active > a::after{transform:scaleX(1);}
  @media (max-width:991.98px){
    .pq-main-menu > li > a{font-size:15px;padding:14px 12px;}
  }

  /* =========================
     VIDEO RESPONSIVE
     ========================= */
  .pq-video-frame{
    position:relative;width:100%;aspect-ratio:16/9;border-radius:16px;overflow:hidden;
    box-shadow:0 10px 25px rgba(0,0,0,.15);
  }
  .pq-video-frame>video{width:100%;height:100%;display:block;object-fit:cover;}

  /* =========================
     TARJETA CONTACTO
     ========================= */
  .pq-contact-card{
    background:rgba(255,255,255,.9);
    border:1px solid rgba(148,163,184,.35);
    border-radius:18px;padding:22px;
    box-shadow:0 10px 25px rgba(15,23,42,.10);
  }
  .pq-contact-item{display:flex;gap:.75rem;align-items:flex-start;margin:0 0 14px;}
  .pq-contact-item i{font-size:1.05rem;color:#16a34a;margin-top:.2rem;}
  .pq-contact-item a{color:inherit;text-decoration:none;}
  .pq-contact-item a:hover{text-decoration:underline;}
  .pq-contact-title{font-size:1.1rem;font-weight:700;margin:0 0 10px;color:#0f172a;}
  
  /* =========================
     TOP HEADER MODERNO
     ========================= */
  .modern-top-header{
    background:radial-gradient(circle at 0% 0%,#22c55e 0%,#14532d 32%,#020617 100%);
    color:#e5e7eb;font-size:.9rem;border-bottom:1px solid rgba(148,163,184,.4);
  }
  .modern-top-header a{color:inherit;text-decoration:none;}
  .modern-top-header a:hover{color:#fff;}
  .modern-top-header .top-header-row{
    display:flex;justify-content:space-between;align-items:center;gap:1.5rem;padding:.45rem 1.5rem;
  }
  .modern-top-header .pq-header-contact ul,
  .modern-top-header .pq-header-social ul{
    list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:.75rem;
  }
  .modern-top-header .pq-header-contact li{
    display:inline-flex;align-items:center;gap:.4rem;padding:.25rem .8rem;border-radius:999px;
    background:rgba(15,23,42,.3);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
    border:1px solid rgba(148,163,184,.4);color:#e5e7eb;
  }
  .modern-top-header .pq-header-contact i{font-size:.9rem;color:#bbf7d0;}
  .modern-top-header .pq-header-contact span{white-space:nowrap;}
  .modern-top-header .pq-header-social ul li a{
    width:32px;height:32px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;
    border:1px solid rgba(148,163,184,.5);background:rgba(15,23,42,.35);transition:.2s;
  }
  .modern-top-header .pq-header-social ul li a i{font-size:.9rem;}
  .modern-top-header .pq-header-social ul li a:hover{
    transform:translateY(-1px) scale(1.03);
    border-color:#facc15;box-shadow:0 0 0 1px rgba(250,204,21,.4);
  }
  .modern-top-header .pq-header-social ul li a:hover i{color:#facc15;}
  @media (max-width:767.98px){
    .modern-top-header .top-header-row{flex-direction:column;align-items:flex-start;padding:.6rem 1rem;}
    .modern-top-header .pq-header-contact ul{flex-wrap:wrap;gap:.4rem;}
    .modern-top-header .pq-header-social{align-self:flex-start;}
  }

  /* =========================
     PRODUCTOS / BADGES
     ========================= */
  .pq-image-box{position:relative;}
  .pq-product-icon-badge{
    position:absolute;top:10px;left:10px;width:46px;height:46px;border-radius:999px;background:#fff;
    display:inline-flex;align-items:center;justify-content:center;font-size:1.6rem;
    box-shadow:0 8px 18px rgba(15,23,42,.18);color:#16a34a;z-index:3;
  }

  /* =========================
     HISTORIA
     ========================= */
  .process .story-copy p{
    font-size:1.125rem;line-height:1.85;letter-spacing:.1px;margin-bottom:1.15rem;
  }
  @media (min-width:992px){.process .story-copy p{font-size:1.25rem;}}
  .process.pq-bg-milk{
    position:relative;border-radius:18px;background:linear-gradient(180deg,#f7fbff 0%,#eef6ff 100%);
    padding-top:40px;padding-bottom:40px;
  }
  .process .pq-title-hadding{font-size:clamp(1.6rem,2.5vw,2.25rem);}

  /* ✅ HISTORIA: letra más grande + alineación */
  #historia .pq-title-sub-title span{
    font-size: 1.05rem !important;
    letter-spacing: .9px;
  }
  #historia .pq-title-hadding{
    font-size: clamp(2.2rem, 3vw, 3rem) !important;
    line-height: 1.1 !important;
    font-weight: 900 !important;
  }
  #historia .story-copy p{
    font-size: 1.5rem !important;
    line-height: 1.9 !important;
    margin-bottom: 1.2rem;
  }
  #historia .story-copy{
    text-align: justify !important;
    text-justify: inter-word;
  }
  @media (max-width: 576px){
    #historia .pq-title-hadding{font-size: 2rem !important;}
    #historia .story-copy p{font-size: 1.08rem !important;}
    #historia .story-copy{text-align:left !important;}
  }

  /* =========================
     APPOINTMENT: fondo real
     ========================= */
  .pq-bg-3-image::before,
  .pq-bg-3-image::after{content:none !important;display:none !important;background:none !important;box-shadow:none !important;opacity:0 !important;filter:none !important;}
  .pq-bg-3-image{
    background-image:url('../rev/assets/page-1/fondoprinci.webp') !important;
    background-size:cover !important;background-position:center !important;background-repeat:no-repeat !important;
  }

  .pq-hero-image{max-width:980px;margin:0 auto 30px auto;}
  .pq-hero-image img{
    display:block;width:100%;height:auto;border-radius:18px;box-shadow:0 12px 30px rgba(0,0,0,.15);object-fit:cover;
  }

  /* =========================
     MARCA GTO (badge)
     ========================= */
  .pq-gto-badge-wrap{margin-top:18px;text-align:center;}
  .pq-gto-badge{
    max-width:220px;width:100%;height:auto;filter:drop-shadow(0 10px 18px rgba(15,23,42,.14));
  }
  .pq-gto-badge-caption{
    margin-top:10px;font-weight:800;letter-spacing:.5px;color:#334155;text-transform:uppercase;font-size:.9rem;
  }

  /* =========================
     LOCATOR CARD / FIND US
     ========================= */
  .pq-locator-card{
    background:#fff;border-radius:18px;overflow:hidden;border:1px solid rgba(148,163,184,.25);
    box-shadow:0 12px 28px rgba(15,23,42,.10);
  }
  .pq-find-us-inside{padding:16px 18px 14px;border-top:1px solid rgba(148,163,184,.25);}
  .pq-find-us-title{
    margin:0 0 10px;font-weight:800;letter-spacing:.5px;color:#64748b;text-transform:uppercase;
    font-size:.95rem;text-align:center;
  }
  .pq-find-us-copy{
    margin:-2px 0 12px;text-align:center;font-weight:800;color:#0f172a;letter-spacing:.15px;font-size:.98rem;
  }
  @media (max-width:576px){
    .pq-find-us-copy{font-size:.92rem;text-align:left;padding:0 6px;}
  }
  .pq-find-us-row{display:flex;align-items:center;gap:12px;}

  .pq-find-us-logos{
    display:flex;align-items:center;justify-content:center;gap:34px;flex:1;overflow-x:auto;
    padding:10px 6px;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;
  }
  .pq-find-us-logos::-webkit-scrollbar{height:7px;}
  .pq-find-us-logos::-webkit-scrollbar-thumb{background:rgba(148,163,184,.45);border-radius:999px;}

  /* Estados como chips */
  .pq-find-us-logos.pq-find-us-states{
    gap: 12px !important;
    padding: 12px 8px !important;
    justify-content: flex-start !important;
    flex: 1 1 auto;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
  }
  .pq-find-us-logos.pq-find-us-states::-webkit-scrollbar{ height: 6px; }
  .pq-find-us-logos.pq-find-us-states::-webkit-scrollbar-thumb{ background: rgba(148,163,184,.45); border-radius: 999px; }

  .pq-state-chip{
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    padding: 10px 16px;
    border-radius: 999px;
    font-weight: 900;
    letter-spacing: .35px;
    font-size: .95rem;
    background: rgba(231, 136, 136, 0.95);
    border: 1px solid rgba(148,163,184,.40);
    color: #0f172a;
    box-shadow: 0 10px 22px rgba(15,23,42,.10);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  }
  .pq-state-chip:hover{
    transform: translateY(-1px);
    border-color: rgba(22,163,74,.35);
    box-shadow: 0 14px 30px rgba(15,23,42,.14);
  }
  @media (max-width: 991.98px){ .pq-state-chip{ font-size: .9rem; padding: 9px 14px; } }
  @media (max-width: 576px){ .pq-state-chip{ font-size: .88rem; padding: 8px 12px; } }

  /* Flechas Find Us (rojas + icono BLANCO) */
  .pq-find-us-arrow{
    width:38px;height:38px;border-radius:999px;
    border: 1px solid rgba(37,99,235,.45) !important;
    background: rgba(238, 8, 8, 0.98) !important;
    box-shadow: 0 10px 22px rgba(15,23,42,.10) !important;
    display:inline-flex;align-items:center;justify-content:center;
    transition:.2s;
  }
  .pq-find-us-arrow i{ color:#ffffff !important; font-size:22px; line-height:1; }
  .pq-find-us-arrow:hover{
    background: #240fdb !important;
    border-color: rgba(18, 197, 89, 0.65) !important;
    transform: translateY(-1px);
  }
  .pq-find-us-arrow[disabled]{
    opacity:.35 !important;cursor:not-allowed !important;transform:none !important;box-shadow:none !important;
  }

  /* =========================
     SLIDER PRODUCTOS (MÁS GRANDE)
     ========================= */
  :root{ --pq-prod-img: 205px; --pq-prod-radius: 26px; }
  .service.pq-bg-primary{ padding-top: 105px; padding-bottom: 120px; }
  .service.pq-bg-primary .pq-service-box.pq-style-2{ min-height: 520px; }
  .service.pq-bg-primary .pq-service-box.pq-style-2 .pq-service-info{ padding-top: 10px; }
  .service.pq-bg-primary .pq-service-box.pq-style-2 .pq-image-border{
    width: var(--pq-prod-img) !important;height: var(--pq-prod-img) !important;
    margin: 0 auto 14px !important;overflow: hidden !important;border-radius: var(--pq-prod-radius) !important;
  }
  .service.pq-bg-primary .pq-service-box.pq-style-2 .pq-image-border .pq-image-1{
    width: 100% !important;height: 100% !important;object-fit: cover !important;display:block;
  }
  .service.pq-bg-primary .pq-service-box.pq-style-2 .pq-service-bg-img{
    border-radius: calc(var(--pq-prod-radius) + 8px) !important;overflow:hidden !important;
  }
  .service.pq-bg-primary .pq-service-box.pq-style-2 .pq-service-number{ top: 38px !important; }
  .service.pq-bg-primary .pq-service-box.pq-style-2 .pq-service-box-title{ font-size: 1.15rem; }
  .service.pq-bg-primary .pq-service-box.pq-style-2 .pq-service-box-description{ font-size: .95rem; line-height: 1.6; }
  @media (max-width:1199.98px){ :root{ --pq-prod-img: 190px; } .service.pq-bg-primary .pq-service-box.pq-style-2{ min-height: 500px; } }
  @media (max-width:991.98px){ :root{ --pq-prod-img: 200px; } .service.pq-bg-primary .pq-service-box.pq-style-2{ min-height: 520px; } }
  @media (max-width:575.98px){ :root{ --pq-prod-img: 220px; } .service.pq-bg-primary .pq-service-box.pq-style-2{ min-height: 540px; } }

  /* =========================
     VIDEO OVERLAP
     ========================= */
  :root{ --pq-video-overlap: 110px; }
  .pq-popup-video-block{
    margin-top: calc(-1 * var(--pq-video-overlap)) !important;
    padding-top: 0 !important;
    position: relative; z-index: 10;
  }

  /* =========================
     OWL: flechas visibles + posicion
     ========================= */
  #equipo .owl-nav,
  #establos .owl-nav,
  .testimonial .owl-nav{
    position:absolute;top:50%;width:100%;transform:translateY(-50%);
    pointer-events:none;z-index:20;
  }
  #equipo .owl-nav button,
  #establos .owl-nav button,
  .testimonial .owl-nav button{ pointer-events:auto; }

  /* Base: Equipo/Establos (botón rojo + flecha blanca) */
  #equipo .owl-nav button.owl-prev,
  #equipo .owl-nav button.owl-next,
  #establos .owl-nav button.owl-prev,
  #establos .owl-nav button.owl-next{
    width:46px !important;height:46px !important;border-radius:999px !important;
    border:1px solid rgba(15,23,42,.18) !important;
    background: rgba(46, 150, 235, 0.829) !important;
    box-shadow:0 14px 28px rgba(15,23,42,.16) !important;
    display:inline-flex !important;align-items:center !important;justify-content:center !important;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
    position:absolute;
    color:#ffffff !important; /* ✅ flecha blanca */
  }
  #equipo .owl-nav button.owl-prev,
  #establos .owl-nav button.owl-prev{ left:-10px; }
  #equipo .owl-nav button.owl-next,
  #establos .owl-nav button.owl-next{ right:-10px; }

  #equipo .owl-nav button span,
  #establos .owl-nav button span{
    color:inherit !important;
    font-size:28px !important;
    line-height:1 !important;
    font-weight:900 !important;
  }

  #equipo .owl-nav button:hover{
    transform:translateY(-2px);
    background: rgba(29,78,216,.95) !important;
    box-shadow:0 18px 40px rgba(15,23,42,.22) !important;
    border-color: rgba(29,78,216,.65) !important;
    color:#fff !important;
  }
  #establos .owl-nav button:hover{
    transform:translateY(-2px);
    background: rgba(22,163,74,.95) !important;
    box-shadow:0 18px 40px rgba(15,23,42,.22) !important;
    border-color: rgba(22,163,74,.65) !important;
    color:#fff !important;
  }

  @media (max-width: 991.98px){
    #equipo .owl-nav button.owl-prev,
    #establos .owl-nav button.owl-prev{ left:6px; }
    #equipo .owl-nav button.owl-next,
    #establos .owl-nav button.owl-next{ right:6px; }
  }

  /* ✅ OWL: que no se oculten flechas */
  #equipo, #establos{ overflow: visible !important; }
  #equipo .pq-team-slider-1, #establos .pq-team-slider-1{
    position: relative; overflow: visible !important;
  }
  #equipo .owl-carousel .owl-nav, #establos .owl-carousel .owl-nav{ z-index: 9999 !important; }
  #equipo .owl-nav button, #establos .owl-nav button{ z-index: 10000 !important; }
  #equipo .owl-nav button.owl-prev, #establos .owl-nav button.owl-prev{ left: 12px !important; }
  #equipo .owl-nav button.owl-next, #establos .owl-nav button.owl-next{ right: 12px !important; }

  /* =========================
     TESTIMONIOS (flecha ROJA, ya no blanca)
     - Botón blanco + borde rojo + flecha roja
     - Hover: botón rojo + flecha blanca
     ========================= */
  .testimonial .owl-nav button.owl-prev,
  .testimonial .owl-nav button.owl-next,
  .pq-testimonial-pro .owl-nav button.owl-prev,
  .pq-testimonial-pro .owl-nav button.owl-next{
    width:48px !important;height:48px !important;border-radius:999px !important;
    border:2px solid rgba(220,38,38,.95) !important;
    background: rgba(255,255,255,.92) !important;
    color:#dc2626 !important; /* ✅ flecha roja */
    box-shadow:0 16px 34px rgba(15,23,42,.12) !important;
  }
  .testimonial .owl-nav button span,
  .pq-testimonial-pro .owl-nav button span{ color:inherit !important; font-size:28px !important; font-weight:900 !important; line-height:1 !important; }
  .testimonial .owl-nav button i,
  .pq-testimonial-pro .owl-nav button i{ color:inherit !important; }
  .testimonial .owl-nav button svg,
  .pq-testimonial-pro .owl-nav button svg{ fill: currentColor !important; stroke: currentColor !important; }

  .testimonial .owl-nav button:hover,
  .pq-testimonial-pro .owl-nav button:hover{
    background: rgba(220,38,38,.95) !important;
    border-color: rgba(185,28,28,1) !important;
    color:#ffffff !important; /* ✅ hover flecha blanca */
  }

  /* =========================
     APPOINTMENT: LOGO + CONTORNO TEXTO
     ========================= */
  .appointment .pq-icon-box-logo{margin-bottom:14px;}
  .appointment .pq-icon-box-logo-img{width:200px;height:200px;object-fit:contain;display:block;}
  .appointment .pq-icon-box-title{
    color:#fff;
    -webkit-text-stroke: 2px #000;
    text-shadow:
      2px 0 0 #000, -2px 0 0 #000,
      0 2px 0 #000, 0 -2px 0 #000,
      1.5px 1.5px 0 #000, -1.5px -1.5px 0 #000,
      -1.5px 1.5px 0 #000, 1.5px -1.5px 0 #000;
  }

  /* =========================
     ESTABLOS: fondo
     ========================= */
  #establos{
    position:relative;
    padding-top:95px !important;
    padding-bottom:110px !important;
    border-top:1px solid rgba(148,163,184,.18);
    background:
      linear-gradient(180deg,
        rgba(240,253,244,.78) 0%,
        rgba(255,255,255,.70) 55%,
        rgba(255,255,255,.82) 100%
      ),
      url("../image/team/hor/IMG_4829.webp") center/cover no-repeat !important;
  }

  /* Productos subtítulo */
  #productos .pq-title-sub-title > img{ height: 52px !important; }
  #productos .pq-title-sub-title > span{ font-size: 1.35rem !important; font-weight: 900 !important; }

  /* =========================
     TESTIMONIOS: sección premium (fondo + waves)
     ========================= */
  .pq-testimonial-pro{
    position: relative;
    padding-top: 105px;
    padding-bottom: 105px;
    overflow: hidden;
    background:
      radial-gradient(circle at 10% 10%, rgba(34,197,94,.18) 0%, rgba(34,197,94,0) 38%),
      radial-gradient(circle at 90% 20%, rgba(29,78,216,.14) 0%, rgba(29,78,216,0) 42%),
      linear-gradient(180deg, #f0fdf4 0%, #ffffff 55%, #eff6ff 100%);
    border-top: 1px solid rgba(148,163,184,.22);
    border-bottom: 1px solid rgba(148,163,184,.22);
  }
  .pq-testimonial-pro::before{
    content:"";position:absolute;top:0;left:0;right:0;height:4px;
    background: linear-gradient(90deg, #16a34a, #1d4ed8, #facc15);opacity:.95;
  }
  .pq-testimonial-pro::after{
    content:"";position:absolute;left:0;right:0;top:-1px;height:46px;pointer-events:none;
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120'%3E%3Cpath fill='%23ffffff' fill-opacity='1' d='M0,64L60,69.3C120,75,240,85,360,90.7C480,96,600,96,720,85.3C840,75,960,53,1080,42.7C1200,32,1320,32,1380,32L1440,32L1440,0L1380,0C1320,0,1200,0,1080,0C960,0,840,0,720,0C600,0,480,0,360,0C240,0,120,0,60,0L0,0Z'%3E%3C/path%3E%3C/svg%3E") center/cover no-repeat;
    opacity:.98;
  }
  .pq-testimonial-pro .container{ position: relative; }
  .pq-testimonial-pro .container::after{
    content:"";position:absolute;left:-2px;right:-2px;bottom:-106px;height:46px;transform:rotate(180deg);pointer-events:none;
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120'%3E%3Cpath fill='%23ffffff' fill-opacity='1' d='M0,64L60,69.3C120,75,240,85,360,90.7C480,96,600,96,720,85.3C840,75,960,53,1080,42.7C1200,32,1320,32,1380,32L1440,32L1440,0L1380,0C1320,0,1200,0,1080,0C960,0,840,0,720,0C600,0,480,0,360,0C240,0,120,0,60,0L0,0Z'%3E%3C/path%3E%3C/svg%3E") center/cover no-repeat;
    opacity:.98;
  }
  .pq-testimonial-pro .pq-title-hadding span{
    background: linear-gradient(90deg, #16a34a, #1d4ed8);
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  .pq-testimonial-pro .pq-testimonial-box.pq-style-2{
    background: rgba(255,255,255,.88);
    border: 1px solid rgba(148,163,184,.24);
    border-radius: 22px;
    box-shadow: 0 16px 40px rgba(15,23,42,.10);
    backdrop-filter: blur(10px);-webkit-backdrop-filter: blur(10px);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  }
  .pq-testimonial-pro .pq-testimonial-box.pq-style-2:hover{
    transform: translateY(-3px);
    box-shadow: 0 20px 52px rgba(15,23,42,.14);
    border-color: rgba(22,163,74,.35);
  }
  .pq-testimonial-pro .pq-quote{
    width:46px;height:46px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;
    background: linear-gradient(135deg, rgba(22,163,74,.14), rgba(29,78,216,.12));
    border: 1px solid rgba(148,163,184,.25);
  }
  .pq-testimonial-pro .pq-quote i{ color:#16a34a; }
  .pq-testimonial-pro .pq-image-border{
    border-radius:22px;overflow:hidden;box-shadow: 0 18px 44px rgba(15,23,42,.12);
  }
  @media (max-width: 991.98px){
    .pq-testimonial-pro{ padding-top: 85px; padding-bottom: 85px; }
    .pq-testimonial-pro::after{ height: 34px; }
    .pq-testimonial-pro .container::after{ bottom:-86px; height:34px; }
  }

  /* =========================================
     LOGO + TEXTO SUBTÍTULO DE SECCIONES (GLOBAL)
     ========================================= */
  .pq-title-sub-title img{
    height: 64px !important;width:auto !important;max-width:none !important;object-fit:contain !important;margin-right:12px;
  }
  .pq-title-sub-title span{
    font-size: 1.35rem !important;font-weight: 900 !important;letter-spacing: .8px;text-transform: uppercase;line-height: 1.1;
  }
  .pq-title-sub-title.justify-content-center{ gap: 12px; }
  @media (max-width: 991.98px){
    .pq-title-sub-title img{ height: 56px !important; }
    .pq-title-sub-title span{ font-size: 1.22rem !important; }
  }
  @media (max-width: 576px){
    .pq-title-sub-title img{ height: 50px !important; }
    .pq-title-sub-title span{ font-size: 1.10rem !important; letter-spacing: .6px; }
  }

  /* =========================
     HERO (REV SLIDER): LOGO CIRCULAR SIN RECORTE
     ========================= */
  #slider-8-slide-31-layer-0,
  #slider-8-slide-32-layer-0,
  #slider-8-slide-33-layer-0{
    width: 120px !important;
    height: 120px !important;
    border-radius: 999px !important;
    overflow: hidden !important;
    background: transparent !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px !important;          /* ✅ evita recorte */
    box-sizing: border-box !important;
  }
  #slider-8-slide-31-layer-0 img,
  #slider-8-slide-32-layer-0 img,
  #slider-8-slide-33-layer-0 img{
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;     /* ✅ NO recorta */
    border-radius: 999px !important;
    transform: scale(.98);
  }
  @media (max-width: 576px){
    #slider-8-slide-31-layer-0,
    #slider-8-slide-32-layer-0,
    #slider-8-slide-33-layer-0{
      width: 96px !important;
      height: 96px !important;
      padding: 8px !important;
    }
  }

  /* =========================================================
     HEADER MODERNO (glass + chips + CTA)
     ========================================================= */
  :root{
    --pq-primary:#16a34a;
    --pq-blue:#1d4ed8;
    --pq-text:#0f172a;
    --pq-border:rgba(148,163,184,.28);
    --pq-glass:rgba(255,255,255,.78);
    --pq-shadow:0 18px 48px rgba(15,23,42,.12);
    --pq-shadow-sm:0 10px 24px rgba(15,23,42,.10);
  }
  .pq-header-modern .pq-bottom-header{
    background: var(--pq-glass) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--pq-border);
  }
  .pq-topbar-modern{
    background:
      radial-gradient(circle at 0% 0%, rgba(34,197,94,.45) 0%, rgba(20,83,45,.55) 35%, rgba(2,6,23,.92) 100%) !important;
    border-bottom: 1px solid rgba(255,255,255,.10) !important;
  }
  .pq-topbar-row{padding:.55rem 1.2rem;gap:1rem;}
  .pq-topbar-modern .pq-header-contact ul,
  .pq-topbar-modern .pq-header-social ul{
    display:flex;gap:.55rem;align-items:center;list-style:none;margin:0;padding:0;
  }
  .pq-chip{
    display:inline-flex;align-items:center;gap:.45rem;padding:.32rem .85rem;border-radius:999px;
    color:#e5e7eb;background:rgba(15,23,42,.28);border:1px solid rgba(255,255,255,.18);
    backdrop-filter: blur(10px);-webkit-backdrop-filter: blur(10px);
  }
  .pq-chip i{ color:#bbf7d0; font-size:.92rem; }
  .pq-chip a{ color:inherit; }

  .pq-social-btn{
    width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;
    background:rgba(15,23,42,.28);border:1px solid rgba(255,255,255,.18);color:#e5e7eb;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  }
  .pq-social-btn:hover{
    transform: translateY(-2px);
    border-color: rgba(250,204,21,.55);
    box-shadow: 0 0 0 3px rgba(250,204,21,.12);
    color:#fff;
  }

  .pq-navbar-modern .pq-nav-inner{padding: .55rem 0;}
  .pq-logo-modern img{filter: drop-shadow(0 12px 18px rgba(15,23,42,.10));}

  .pq-toggler-modern{
    border: 1px solid var(--pq-border) !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,.75) !important;
    box-shadow: var(--pq-shadow-sm) !important;
    padding: 10px 12px !important;
  }
  .pq-toggler-modern i{ color: var(--pq-text) !important; }

  .pq-main-menu-modern > li > a{
    color: var(--pq-text) !important;
    border-radius: 999px;
    padding: 12px 14px !important;
    font-weight: 900;
    letter-spacing: .55px;
    transition: background .18s ease, transform .18s ease, color .18s ease;
  }
  .pq-main-menu-modern > li > a::after{ display:none !important; }
  .pq-main-menu-modern > li > a:hover{
    background: rgba(22,163,74,.10);
    color: #14532d !important;
    transform: translateY(-1px);
  }
  .pq-main-menu-modern > li.current-menu-item > a,
  .pq-main-menu-modern > li.active > a{
    background: rgba(29,78,216,.10);
    color: var(--pq-blue) !important;
  }

  .pq-actions-modern{display:flex;align-items:center;gap:.75rem;}

  .pq-call-modern a{
    display:flex;align-items:center;gap:.55rem;padding:.55rem .85rem;border-radius:999px;
    border:1px solid var(--pq-border);background: rgba(255,255,255,.75);
    box-shadow: var(--pq-shadow-sm);color: var(--pq-text);
    transition: transform .18s ease, box-shadow .18s ease;
  }
  .pq-call-modern a:hover{transform: translateY(-2px);box-shadow: var(--pq-shadow);}
  .pq-call-modern .pq-icon{
    width:34px;height:34px;border-radius:12px;display:flex;align-items:center;justify-content:center;
    background: linear-gradient(135deg, rgba(22,163,74,.16), rgba(29,78,216,.14));
    border:1px solid var(--pq-border);
  }
  .pq-call-text{ font-weight:900; letter-spacing:.2px; }

  .pq-cta-btn{
    border-radius:999px !important;
    padding: 12px 22px !important;
    border: 1px solid rgba(7, 243, 86, 0.18) !important;
    background: linear-gradient(135deg, var(--pq-primary), var(--pq-blue)) !important;
    box-shadow: 0 18px 44px rgba(2, 245, 91, 0.18), 0 16px 40px rgba(29,78,216,.14) !important;
    transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
  }
  .pq-cta-btn:hover{
    transform: translateY(-2px);
    filter: brightness(1.05);
    box-shadow: 0 22px 58px rgba(25, 250, 17, 0.22), 0 20px 48px rgba(29,78,216,.18) !important;
  }
  @media (max-width: 991.98px){
    .pq-call-text{ display:none; }
    .pq-actions-modern{ gap:.55rem; }
    .pq-call-modern a{ padding:.55rem; }
  }
  @media (max-width: 767.98px){
    .pq-topbar-row{flex-direction:column;align-items:flex-start;padding:.7rem 1rem;}
    .pq-topbar-modern .pq-header-contact ul{ flex-wrap:wrap; }
  }
  /* =========================================================
   GLASS SYSTEM (reutilizable)
   - Pégalo al final de tu 
   ========================================================= */
:root{
  --pq-glass-1: rgba(255,255,255,.78);
  --pq-glass-2: rgba(255,255,255,.66);
  --pq-glass-dark: rgba(15,23,42,.22);
  --pq-glass-border: rgba(148,163,184,.28);
  --pq-glass-shadow: 0 18px 48px rgba(15,23,42,.12);
  --pq-glass-shadow-sm: 0 10px 24px rgba(15,23,42,.10);
  --pq-blur: 14px;
}

/* Base “glass card” */
.pq-glass,
.pq-glass-card{
  background: var(--pq-glass-1);
  border: 1px solid var(--pq-glass-border);
  box-shadow: var(--pq-glass-shadow);
  backdrop-filter: blur(var(--pq-blur));
  -webkit-backdrop-filter: blur(var(--pq-blur));
}

/* Variante más ligera */
.pq-glass-lite{
  background: var(--pq-glass-2);
  border: 1px solid var(--pq-glass-border);
  box-shadow: var(--pq-glass-shadow-sm);
  backdrop-filter: blur(calc(var(--pq-blur) - 4px));
  -webkit-backdrop-filter: blur(calc(var(--pq-blur) - 4px));
}

/* Borde “brillo” (se ve premium) */
.pq-glass-border{
  position: relative;
  overflow: hidden;
}
.pq-glass-border::before{
  content:"";
  position:absolute; inset:-2px;
  background: linear-gradient(135deg,
    rgba(255,255,255,.55),
    rgba(255,255,255,0) 35%,
    rgba(34,197,94,.18),
    rgba(29,78,216,.14),
    rgba(255,255,255,0) 70%,
    rgba(255,255,255,.35)
  );
  pointer-events:none;
  opacity:.85;
  filter: blur(0px);
}
.pq-glass-border > *{ position: relative; z-index: 1; }


/* Un “shine” suave arriba */
#servicios .pq-service-box::after{
  content:"";
  position:absolute; left:-20%; top:-40%;
  width:60%; height:140%;
  background: radial-gradient(circle, rgba(255,255,255,.45) 0%, rgba(255,255,255,0) 60%);
  transform: rotate(18deg);
  opacity:.55;
  pointer-events:none;
}

/* =========================================================
   7) APPOINTMENT ✅ ESTE es de los mejores lugares para glass
   ========================================================= */
.appointment .pq-icon-box.pq-style-5{
  background: rgba(255,255,255,.18) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-radius: 26px !important;
  box-shadow: 0 22px 60px rgba(0,0,0,.22) !important;
  overflow:hidden;
}
.appointment .pq-icon-box.pq-style-5::before{
  content:"";
  position:absolute; inset:-2px;
  background: radial-gradient(circle at 20% 10%, rgba(255,255,255,.25) 0%, rgba(255,255,255,0) 55%),
              radial-gradient(circle at 80% 30%, rgba(34,197,94,.18) 0%, rgba(34,197,94,0) 55%),
              radial-gradient(circle at 60% 90%, rgba(29,78,216,.16) 0%, rgba(29,78,216,0) 60%);
  pointer-events:none;
  opacity:.95;
}
.appointment .pq-icon-box.pq-style-5 > *{ position:relative; z-index:1; }

/* =========================================================
   8) FOOTER TOP (si quieres que se vea moderno)
   ========================================================= */
#pq-footer .pq-footer-top-widget{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 22px;
  padding: 18px;
}
/* =========================================================
   CONTACTO WOW (neón + WhatsApp card + botón flotante mapa)
   Pegar al FINAL del 
   ========================================================= */

/* Fondo con detalle y puntitos */
#contacto{
  position: relative;
  background:
    radial-gradient(circle at 10% 10%, rgba(34,197,94,.18) 0%, rgba(34,197,94,0) 42%),
    radial-gradient(circle at 90% 18%, rgba(29,78,216,.16) 0%, rgba(29,78,216,0) 46%),
    linear-gradient(180deg,#f8fafc 0%,#ffffff 55%,#f1f5f9 100%) !important;
  overflow:hidden;
}
#contacto::before{
  content:"";
  position:absolute; left:0; right:0; top:0; height:4px;
  background: linear-gradient(90deg,#16a34a,#1d4ed8,#facc15);
  opacity:.95;
}
#contacto::after{
  content:"";
  position:absolute; inset:0;
  background-image: radial-gradient(rgba(15,23,42,.08) 1px, transparent 1px);
  background-size: 18px 18px;
  opacity:.22;
  pointer-events:none;
}

/* Títulos con glow */
#contacto .pq-title-hadding{
  text-shadow: 0 14px 45px rgba(15,23,42,.10);
}
#contacto .pq-title-hadding span{
  background: linear-gradient(90deg,#16a34a,#1d4ed8);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter: drop-shadow(0 12px 24px rgba(29,78,216,.14));
}

/* =========================
   CARD IZQUIERDA (premium)
   ========================= */
#contacto .pq-contact-card{
  border-radius: 26px !important;
  padding: 22px !important;
  background: rgba(255,255,255,.74) !important;
  border: 1px solid rgba(148,163,184,.28) !important;
  box-shadow: 0 24px 70px rgba(15,23,42,.14) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  position: relative;
  overflow: hidden;
}
#contacto .pq-contact-card::before{
  content:"";
  position:absolute; inset:-2px;
  background:
    radial-gradient(circle at 18% 10%, rgba(255,255,255,.62) 0%, rgba(255,255,255,0) 55%),
    radial-gradient(circle at 88% 18%, rgba(34,197,94,.20) 0%, rgba(34,197,94,0) 55%),
    radial-gradient(circle at 72% 95%, rgba(29,78,216,.18) 0%, rgba(29,78,216,0) 60%);
  opacity:.95;
  pointer-events:none;
}
#contacto .pq-contact-card > *{ position:relative; z-index:1; }

#contacto .pq-contact-title{
  font-weight: 950 !important;
  letter-spacing: .2px;
  font-size: 1.28rem;
  margin-bottom: 14px !important;
  color:#0f172a;
}

/* Items: icono con neón suave */
#contacto .pq-contact-item{
  gap: 12px !important;
  padding: 12px 12px !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,.52);
  border: 1px solid rgba(148,163,184,.20);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
#contacto .pq-contact-item:hover{
  transform: translateY(-2px);
  border-color: rgba(22,163,74,.32);
  box-shadow: 0 18px 44px rgba(15,23,42,.12);
}
#contacto .pq-contact-item i{
  width: 42px; height: 42px;
  border-radius: 16px;
  display:flex; align-items:center; justify-content:center;
  color:#16a34a !important;
  background: linear-gradient(135deg, rgba(22,163,74,.18), rgba(29,78,216,.14));
  border: 1px solid rgba(148,163,184,.22);
  box-shadow:
    0 10px 26px rgba(15,23,42,.10),
    0 0 0 4px rgba(22,163,74,.08),
    0 0 0 8px rgba(29,78,216,.06);
}

/* Botón maps: gradiente + glow */
#contacto .pq-contact-card .pq-button.pq-button-flat{
  border-radius: 999px !important;
  padding: 12px 18px !important;
  background: linear-gradient(135deg,#16a34a,#1d4ed8) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  box-shadow:
    0 22px 60px rgba(22,163,74,.18),
    0 22px 60px rgba(29,78,216,.16) !important;
}
#contacto .pq-contact-card .pq-button .pq-button-text{
  color:#fff !important;
  font-weight: 950 !important;
  letter-spacing: .55px;
  text-transform: uppercase;
}
#contacto .pq-contact-card .pq-button:hover{
  transform: translateY(-2px);
  filter: brightness(1.06);
}


/* Icono WA a la izquierda usando pseudo-elemento */
#contacto .pq-contact-card .pq-btn-container.mt-3::before{
  content:"\f232";
  font-family: "Font Awesome 5 Brands";
  position:absolute;
  left: 14px;
  bottom: 12px;

  width: 40px; height: 40px;
  border-radius: 14px;

  display:flex;
  align-items:center;
  justify-content:center;

  background: rgba(34,197,94,.22);
  border: 1px solid rgba(34,197,94,.25);
  color:#22c55e;

  box-shadow: 0 10px 28px rgba(34,197,94,.14);
}
#contacto .pq-contact-card .pq-btn-container.mt-3::after{
  padding-left: 62px; /* espacio por el icono */
}

/* =========================
   CARD DERECHA (Mapa + estados)
   ========================= */
#contacto .pq-locator-card{
  border-radius: 26px !important;
  overflow: hidden !important;
  background: rgba(255,255,255,.70) !important;
  border: 1px solid rgba(148,163,184,.26) !important;
  box-shadow: 0 26px 72px rgba(15,23,42,.14) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}

/* Bloques internos */
#contacto .pq-find-us-inside{
  background: rgba(255,255,255,.50) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

/* Mapa: marco pro + overlay */
#contacto .pq-find-us-inside > div[style*="overflow:hidden"]{
  border-radius: 18px !important;
  border: 1px solid rgba(148,163,184,.22) !important;
  position: relative;
  overflow:hidden !important;
}
#contacto .pq-find-us-inside > div[style*="overflow:hidden"]::after{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 20% 10%, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 45%),
    linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,0) 40%);
  pointer-events:none;
}

/* BOTÓN FLOTANTE encima del mapa (sin HTML) */
#contacto .pq-find-us-inside:first-child{
  position: relative;
}
#contacto .pq-find-us-inside:first-child .pq-btn-container.mt-3{
  position:absolute;
  right: 16px;
  top: 64px; /* debajo del título */
  margin: 0 !important;
  z-index: 5;
}
#contacto .pq-find-us-inside:first-child .pq-btn-container.mt-3 .pq-button{
  border-radius: 999px !important;
  padding: 10px 14px !important;
  background: rgba(29,78,216,.95) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,.22) !important;
}
#contacto .pq-find-us-inside:first-child .pq-btn-container.mt-3 .pq-button:hover{
  transform: translateY(-2px);
  filter: brightness(1.06);
}

/* Chips estados más elegantes */
#contacto .pq-state-chip{
  background: rgba(255,255,255,.72) !important;
  border: 1px solid rgba(148,163,184,.28) !important;
  color:#0f172a !important;
  box-shadow: 0 12px 26px rgba(15,23,42,.08) !important;
  position: relative;
  overflow:hidden;
}
#contacto .pq-state-chip::before{
  content:"";
  position:absolute; inset:-2px;
  background: linear-gradient(135deg, rgba(34,197,94,.20), rgba(29,78,216,.16), rgba(250,204,21,.14));
  opacity:.55;
  pointer-events:none;
}
#contacto .pq-state-chip:hover{
  transform: translateY(-2px) scale(1.01);
  border-color: rgba(29,78,216,.30) !important;
  box-shadow: 0 18px 38px rgba(15,23,42,.12) !important;
}

/* Flechas: glass oscuro + glow */
#contacto .pq-find-us-arrow{
  background: rgba(15,23,42,.78) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  box-shadow: 0 14px 34px rgba(15,23,42,.14) !important;
}
#contacto .pq-find-us-arrow i{ color:#fff !important; }
#contacto .pq-find-us-arrow:hover{
  background: rgba(29,78,216,.92) !important;
  transform: translateY(-2px) scale(1.03);
}

/* Responsive */
@media (max-width: 767.98px){
  #contacto .pq-contact-card .pq-btn-container.mt-3{ padding-bottom: 98px; }
  #contacto .pq-find-us-inside:first-child .pq-btn-container.mt-3{
    position: static;
    margin-top: 12px !important;
  }
}
/* =========================================================
   WhatsApp card PRO (clickeable)
   ========================================================= */
#contacto .pq-wa-card{
  margin: 14px 0 10px;
  padding: 14px 14px;
  border-radius: 18px;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;

  background: rgba(15,23,42,.86);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 46px rgba(15,23,42,.18);

  position: relative;
  overflow:hidden;

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* shine */
#contacto .pq-wa-card::before{
  content:"";
  position:absolute; inset:-2px;
  background:
    radial-gradient(circle at 18% 20%, rgba(34,197,94,.25) 0%, rgba(34,197,94,0) 55%),
    radial-gradient(circle at 90% 15%, rgba(29,78,216,.18) 0%, rgba(29,78,216,0) 58%),
    radial-gradient(circle at 40% 120%, rgba(250,204,21,.14) 0%, rgba(250,204,21,0) 55%);
  opacity:.95;
  pointer-events:none;
}
#contacto .pq-wa-card > *{ position:relative; z-index:1; }

#contacto .pq-wa-left{
  display:flex;
  align-items:center;
  gap: 12px;
}

/* icon */
#contacto .pq-wa-ico{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display:flex;
  align-items:center;
  justify-content:center;

  background: rgba(34,197,94,.18);
  border: 1px solid rgba(34,197,94,.22);
  color:#22c55e;

  box-shadow:
    0 12px 30px rgba(34,197,94,.14),
    0 0 0 4px rgba(34,197,94,.08),
    0 0 0 8px rgba(29,78,216,.06);
}
#contacto .pq-wa-ico i{ font-size: 22px; }

#contacto .pq-wa-title{
  color:#fff;
  font-weight: 950;
  letter-spacing:.2px;
  line-height: 1.1;
}
#contacto .pq-wa-sub{
  color: rgba(229,231,235,.82);
  font-weight: 700;
  font-size: .92rem;
  margin-top: 2px;
}

/* Button */
#contacto .pq-wa-btn{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;

  background: rgba(29,78,216,.95);
  border: 1px solid rgba(255,255,255,.16);
  color:#fff !important;

  font-weight: 950;
  letter-spacing:.35px;
  text-decoration:none !important;

  box-shadow: 0 16px 40px rgba(0,0,0,.22);
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}
#contacto .pq-wa-btn i{ font-size: 18px; }
#contacto .pq-wa-btn:hover{
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow: 0 20px 50px rgba(0,0,0,.28);
}

/* Responsive */
@media (max-width: 576px){
  #contacto .pq-wa-card{
    flex-direction: column;
    align-items: flex-start;
  }
  #contacto .pq-wa-btn{
    width: 100%;
    justify-content: center;
  }
}
/* =========================================================
   CONTACTO: fondo con imagen + overlay (pro)
   ========================================================= */
#contacto{
  position: relative;
  background: url("../image/team/hor/IMG_4909.webp") center/cover no-repeat !important;
  overflow: hidden;
}

/* overlay para que se lea todo encima */
#contacto::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,
      rgba(2,6,23,.70) 0%,
      rgba(2,6,23,.45) 55%,
      rgba(2,6,23,.62) 100%
    );
  z-index: 0;
}

/* detalles tipo “luces” para que se vea más chido */
#contacto::after{
  content:"";
  position:absolute;
  inset:-60px;
  background:
    radial-gradient(circle at 15% 10%, rgba(34,197,94,.22) 0%, rgba(34,197,94,0) 45%),
    radial-gradient(circle at 90% 25%, rgba(29,78,216,.18) 0%, rgba(29,78,216,0) 46%),
    radial-gradient(circle at 40% 95%, rgba(250,204,21,.14) 0%, rgba(250,204,21,0) 55%);
  z-index: 0;
  pointer-events:none;
}

/* que TODO el contenido quede arriba del overlay */
#contacto .container,
#contacto .row,
#contacto .wow{
  position: relative;
  z-index: 1;
}

/* títulos en blanco para que contrasten */
#contacto .pq-title-hadding,
#contacto .pq-title-sub-title span{
  color:#fff !important;
}
#contacto .pq-title-hadding span{
  color:#bbf7d0 !important;
}

/* glass más fuerte en cards (se ve brutal sobre foto) */
#contacto .pq-contact-card,
#contacto .pq-locator-card{
  background: rgba(255,255,255,.80) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  box-shadow: 0 22px 60px rgba(0,0,0,.22) !important;
}

/* secciones internas dentro del locator un poquito más glass */
#contacto .pq-find-us-inside{
  background: rgba(255,255,255,.50) !important;
  border-top: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
/* =========================================================
   CONTACTO PRO V2 (más premium + legible)
   ========================================================= */

/* 1) Fondo: overlay + viñeta para contraste */
#contacto::before{
  background:
    linear-gradient(180deg,
      rgba(2,6,23,.78) 0%,
      rgba(2,6,23,.52) 55%,
      rgba(2,6,23,.78) 100%
    ) !important;
}
#contacto::after{
  opacity: .95 !important;
  filter: saturate(1.05);
}

/* Viñeta suave */
#contacto{
  background-attachment: fixed; /* si no te gusta, borra esta línea */
}
#contacto .container{
  position: relative;
}
#contacto .container::before{
  content:"";
  position:absolute;
  inset:-22px -12px;
  border-radius: 26px;
  background: radial-gradient(circle at 50% 45%,
    rgba(255,255,255,.06) 0%,
    rgba(255,255,255,0) 48%,
    rgba(0,0,0,.18) 100%
  );
  pointer-events:none;
  z-index:0;
}
#contacto .container > *{ position:relative; z-index:1; }

/* 2) Título: más contraste + sombra (se ve brutal sobre foto) */
#contacto .pq-title-sub-title span{
  color:#e2e8f0 !important;
  letter-spacing: 1px !important;
}
#contacto .pq-title-hadding{
  color:#fff !important;
  text-shadow: 0 18px 40px rgba(0,0,0,.40);
}
#contacto .pq-title-hadding span{
  color:#bbf7d0 !important;
  text-decoration-thickness: 6px; /* tu subrayado se ve más pro */
  text-underline-offset: 8px;
}

/* 3) “Stage” glass detrás de las dos cards (sin tocar HTML) */
#contacto .row{
  border-radius: 28px;
  padding: 22px 18px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 26px 80px rgba(0,0,0,.30);
}

/* 4) Cards: mismo radio, borde brillante y hover leve */
#contacto .pq-contact-card,
#contacto .pq-locator-card{
  border-radius: 24px !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  box-shadow: 0 22px 60px rgba(0,0,0,.22) !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
#contacto .pq-contact-card:hover,
#contacto .pq-locator-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 28px 80px rgba(0,0,0,.28) !important;
  border-color: rgba(34,197,94,.28) !important;
}

/* 5) Items de contacto más modernos (tarjetitas internas) */
#contacto .pq-contact-item{
  padding: 12px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(148,163,184,.22);
}
#contacto .pq-contact-item i{
  width: 36px; height: 36px;
  border-radius: 12px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(34,197,94,.14);
  border: 1px solid rgba(34,197,94,.18);
  color:#16a34a;
}

/* 6) Marco glass para el MAPA (más premium) */
#contacto iframe{
  border-radius: 18px !important;
}
#contacto .pq-find-us-inside > div[style*="border-radius:16px"]{
  border-radius: 20px !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  background: rgba(255,255,255,.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 22px 60px rgba(0,0,0,.22) !important;
}

/* 7) Chips estados: más contraste + hover bonito */
#contacto .pq-state-chip{
  background: rgba(255,255,255,.78) !important;
  border: 1px solid rgba(148,163,184,.30) !important;
  color:#0f172a !important;
}
#contacto .pq-state-chip:hover{
  transform: translateY(-2px);
  border-color: rgba(34,197,94,.35) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,.16);
}

/* 8) WhatsApp card: más “pro” y botón más marcado */
#contacto .pq-wa-card{
  background: rgba(15,23,42,.90) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
}
#contacto .pq-wa-btn{
  background: linear-gradient(135deg, rgba(29,78,216,.95), rgba(34,197,94,.90)) !important;
}

/* Responsive: stage padding */
@media (max-width: 991.98px){
  #contacto .row{ padding: 16px 12px; }
  #contacto{ background-attachment: scroll; }
}
/* =========================================================
   SECCIÓN PRODUCTOS (service pq-bg-primary) con IMAGEN FONDO
   ========================================================= */

/* 1) Fondo con imagen */
.service.pq-bg-primary{
  position: relative;
  background:
    linear-gradient(180deg,
      rgba(2,6,23,.70) 0%,
      rgba(2,6,23,.45) 55%,
      rgba(2,6,23,.72) 100%
    ),
    url("../image/team/hor/IMG_4935.webp") center/cover no-repeat !important; /* <-- CAMBIA ESTA RUTA */
  border-top: 1px solid rgba(255,255,255,.10);
  border-bottom: 1px solid rgba(255,255,255,.10);
  overflow: hidden;
}

/* 2) Glow / luz suave para verse “premium” */
.service.pq-bg-primary::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(circle at 15% 20%, rgba(34,197,94,.18) 0%, rgba(34,197,94,0) 45%),
    radial-gradient(circle at 85% 25%, rgba(29,78,216,.16) 0%, rgba(29,78,216,0) 48%),
    radial-gradient(circle at 50% 95%, rgba(250,204,21,.10) 0%, rgba(250,204,21,0) 55%);
  pointer-events:none;
  z-index:0;
}

/* 3) Asegurar que el contenido quede arriba */
.service.pq-bg-primary .container{
  position: relative;
  z-index: 1;
}

/* 4) Título en blanco y más legible */
.service.pq-bg-primary .pq-title-hadding{
  color:#fff !important;
  text-shadow: 0 18px 40px rgba(0,0,0,.45);
}
.service.pq-bg-primary .pq-title-hadding span{
  color:#bbf7d0 !important;
}

/* 5) Cards del slider en glass para que se lean sobre la foto */
.service.pq-bg-primary .pq-service-box.pq-style-2{
  background: rgba(255,255,255,.88) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 22px 60px rgba(0,0,0,.22) !important;
}

/* 6) Logos de marcas (abajo) con glass suave */
.service.pq-bg-primary .pq-client-box.pq-style-1{
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 18px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 16px 40px rgba(0,0,0,.18);
}

/* 7) En móvil: evita "background-attachment fixed" (si llegas a usarlo) */
@media (max-width: 991.98px){
  .service.pq-bg-primary{
    background-position: center;
  }
}
/* =========================================================
   QUITAR FONDO a los logos del carrusel de marcas
   (deja solo las imágenes)
   ========================================================= */
.service.pq-bg-primary .pq-client-box.pq-style-1,
.pq-client-box.pq-style-1{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* A veces el fondo viene en el <a> interno */
.service.pq-bg-primary .pq-client-box.pq-style-1 a,
.pq-client-box.pq-style-1 a{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Opcional: que se vean más pro sobre la foto (sin “cuadro”) */
.service.pq-bg-primary .pq-client-box.pq-style-1 img,
.pq-client-box.pq-style-1 img{
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.25));
}
/* =========================================================
   FIX: en hover NO perder texto en cards (pq-service-box style-2)
   ========================================================= */

/* 1) Que todo el contenido esté arriba del overlay */
.service .pq-service-box.pq-style-2{
  position: relative;
  overflow: hidden;
}
.service .pq-service-box.pq-style-2 .pq-service-info,
.service .pq-service-box.pq-style-2 .pq-service-info *{
  position: relative;
  z-index: 3;
}

/* 2) Si el tema usa overlay/pseudo-elemento al hover, lo mandamos atrás */
.service .pq-service-box.pq-style-2::before,
.service .pq-service-box.pq-style-2::after{
  z-index: 1 !important;
  pointer-events: none !important;
}

/* 3) Si en hover el fondo se hace más claro y lava texto, fijamos colores */
.service .pq-service-box.pq-style-2:hover .pq-service-box-title,
.service .pq-service-box.pq-style-2:hover .pq-service-box-description,
.service .pq-service-box.pq-style-2:hover .pq-button-text{
  color: #0f172a !important;
  opacity: 1 !important;
}

/* 4) Evita que el link "Ver más productos" se haga transparente */
.service .pq-service-box.pq-style-2 .pq-button-link{
  position: relative;
  z-index: 4;
  opacity: 1 !important;
}
/* =========================================================
   MÁS GROSOR / FUERZA TIPOGRÁFICA (cards productos - style-2)
   ========================================================= */

/* TÍTULO */
.service .pq-service-box.pq-style-2 .pq-service-box-title{
  font-weight: 900 !important;     /* más grueso */
  letter-spacing: .2px;
  text-shadow: 0 2px 10px rgba(0,0,0,.12);
}

/* DESCRIPCIÓN */
.service .pq-service-box.pq-style-2 .pq-service-box-description{
  font-weight: 700 !important;     /* más grueso */
  text-shadow: 0 2px 10px rgba(0,0,0,.10);
}

/* LINK "Ver más productos" */
.service .pq-service-box.pq-style-2 .pq-button-link .pq-button-text{
  font-weight: 900 !important;
  letter-spacing: .3px;
  text-shadow: 0 2px 10px rgba(0,0,0,.12);
}

/* (Opcional) Icono del servicio un poquito más fuerte */
.service .pq-service-box.pq-style-2 .pq-service-icon i{
  font-weight: 900;
}
/* =========================================================
   MÁS GRANDE la letra (cards productos - style-2)
   ========================================================= */

/* Título */
.service .pq-service-box.pq-style-2 .pq-service-box-title{
  font-size: 1.45rem !important;   /* antes ~1.15 */
  line-height: 1.2 !important;
}

/* Descripción */
.service .pq-service-box.pq-style-2 .pq-service-box-description{
  font-size: 1.08rem !important;   /* antes ~.95 */
  line-height: 1.75 !important;
}

/* Link */
.service .pq-service-box.pq-style-2 .pq-button-link .pq-button-text{
  font-size: 1.02rem !important;
}
/* =========================
   SERVICIOS: FONDO (FIX DEFINITIVO)
   ========================= */

/* 1) Mata overlays del tema que tapan el fondo */
#servicios.pq-bg-expand::before,
#servicios.pq-bg-expand::after,
#servicios.our-service::before,
#servicios.our-service::after{
  content: none !important;
  display: none !important;
}

/* 2) Fuerza el fondo DIRECTO en la sección */
#servicios{
  position: relative !important;
  background: url("../image/team/hor/IMG_4909.webp") center/cover no-repeat !important; /* ✅ PRUEBA */
  background-color: transparent !important;
  z-index: 0 !important;
}

/* 3) Overlay para que se lean las tarjetas (encima del fondo) */
#servicios.servicios-bg::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  background: rgba(255,255,255,.82) !important;  /* baja a .65 si quieres ver más la foto */
  z-index: 0 !important;
}

/* 4) Todo el contenido arriba del overlay */
#servicios > .container{
  position: relative !important;
  z-index: 2 !important;
}

/* 5) Las vacas arriba */
#servicios .pq-3-bg-image,
#servicios .pq-7-bg-image{
  position: absolute !important;
  z-index: 3 !important;
  pointer-events: none !important;
}
/* =========================================================
   SERVICIOS: GLASS CARDS (sin cambiar diseño)
   ========================================================= */

/* 1) Que el título de la sección se lea sobre la foto */
#servicios .pq-title-sub-title span,
#servicios .pq-title-hadding{
  color: #ffffff !important;
  text-shadow: 0 14px 34px rgba(0,0,0,.45);
}
#servicios .pq-title-hadding span{
  color: #bbf7d0 !important;
}

/* 2) Overlay más suave (para que se vea la foto) */
#servicios.servicios-bg::before{
  background: rgba(255,255,255,.35) !important; /* súbelo a .45 si quieres más claro */
}

/* 3) GLASS real en cada tarjeta */
#servicios .pq-service-box.pq-style-1{
  position: relative !important;
  overflow: hidden !important;
  border-radius: 22px !important;

  background: rgba(255,255,255,.18) !important;
  border: 1px solid rgba(255,255,255,.28) !important;

  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;

  box-shadow: 0 22px 60px rgba(0,0,0,.20) !important;

  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}

/* brillo suave tipo “premium” */
#servicios .pq-service-box.pq-style-1::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,.42) 0%, rgba(255,255,255,0) 55%),
    radial-gradient(circle at 85% 25%, rgba(29,78,216,.14) 0%, rgba(29,78,216,0) 55%),
    radial-gradient(circle at 25% 90%, rgba(34,197,94,.16) 0%, rgba(34,197,94,0) 60%);
  opacity: .95;
  pointer-events:none;
  z-index: 0;
}
#servicios .pq-service-box.pq-style-1 > *{
  position: relative;
  z-index: 1;
}

/* 4) Hover: sigue glass y no “lava” el texto */
#servicios .pq-service-box.pq-style-1:hover{
  transform: translateY(-3px);
  border-color: rgba(255,255,255,.40) !important;
  box-shadow: 0 30px 80px rgba(0,0,0,.26) !important;
  background: rgba(255,255,255,.22) !important;
}

/* 5) Texto y colores dentro (legible) */
#servicios .pq-service-box-title{
  color:#0f172a !important;
  font-weight: 950 !important;
  text-shadow: 0 10px 22px rgba(0,0,0,.08);
}
#servicios .pq-service-box-description{
  color:#334155 !important;
  font-weight: 650 !important;
  line-height: 1.75 !important;
}

/* 6) Icono arriba: en “chip” glass */
#servicios .pq-service-box-icon{
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display:flex;
  align-items:center;
  justify-content:center;

  background: rgba(15,23,42,.10) !important;
  border: 1px solid rgba(255,255,255,.30) !important;

  box-shadow: 0 14px 30px rgba(0,0,0,.12) !important;
}
#servicios .pq-service-box-icon i{
  color: #1d4ed8 !important; /* si lo quieres verde: #16a34a */
  font-size: 22px;
}

/* 7) Imagen dentro: más pro, sin cambiar tamaños */
#servicios .pq-image-border{
  border-radius: 18px !important;
  overflow: hidden !important;
  box-shadow: 0 16px 40px rgba(0,0,0,.18) !important;
}
#servicios .pq-image-border img{
  width: 100% !important;
  height: auto !important;
  display: block !important;
}
/* =========================================================
   FIX SERVICIOS: icono + texto (SIN absolute) + glass pro
   ========================================================= */

/* 1) El card se comporta como fila: icono | contenido */
#servicios .pq-service-box.pq-style-1{
  display: flex !important;
  align-items: flex-start !important;
  gap: 16px !important;
  padding: 18px 18px !important;
  border-radius: 22px !important;

  background: rgba(255,255,255,.22) !important;
  border: 1px solid rgba(255,255,255,.28) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  box-shadow: 0 22px 60px rgba(0,0,0,.18) !important;

  overflow: hidden !important;
}

/* 2) Quita el “layout raro” del absolute/padding-left */
#servicios .pq-service-box.pq-style-1 .pq-service-box-content{
  padding-left: 0 !important;
  position: relative !important;
  flex: 1 1 auto !important;
}

/* 3) Icono: burbuja visible y estable */
#servicios .pq-service-box.pq-style-1 .pq-service-box-icon{
  position: static !important;         /* ✅ adiós absolute */
  width: 56px !important;
  height: 56px !important;
  border-radius: 18px !important;
  flex: 0 0 56px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  background: rgba(255,255,255,.62) !important;
  border: 1px solid rgba(255,255,255,.55) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,.16) !important;

  margin-top: 2px !important;
}

/* 4) Tamaño del icono */
#servicios .pq-service-box.pq-style-1 .pq-service-box-icon i{
  font-size: 26px !important;
  color: #1d4ed8 !important;  /* cámbialo a #16a34a si lo quieres verde */
  opacity: 1 !important;
}

/* 5) Título y texto más grandes + legibles */
#servicios .pq-service-box.pq-style-1 .pq-service-box-title{
  font-size: 1.55rem !important;
  line-height: 1.15 !important;
  font-weight: 950 !important;
  margin: 0 0 8px !important;
  color: #0f172a !important;
  text-shadow: 0 10px 28px rgba(0,0,0,.12) !important;
}
#servicios .pq-service-box.pq-style-1 .pq-service-box-description{
  font-size: 1.10rem !important;
  line-height: 1.8 !important;
  font-weight: 650 !important;
  color: rgba(15,23,42,.92) !important;
}

/* 6) Imágenes internas no se rompen */
#servicios .pq-service-box.pq-style-1 .pq-image-border{
  margin-top: 12px !important;
  border-radius: 18px !important;
  overflow: hidden !important;
}

/* 7) Hover suave (sin “lavar” el texto) */
#servicios .pq-service-box.pq-style-1:hover{
  transform: translateY(-2px) !important;
  box-shadow: 0 28px 80px rgba(0,0,0,.22) !important;
  border-color: rgba(34,197,94,.28) !important;
}

/* 8) Responsive: en móvil se apila bonito */
@media (max-width: 767.98px){
  #servicios .pq-service-box.pq-style-1{
    flex-direction: column !important;
    gap: 12px !important;
    padding: 16px !important;
  }
  #servicios .pq-service-box.pq-style-1 .pq-service-box-icon{
    width: 54px !important;
    height: 54px !important;
    flex: 0 0 auto !important;
  }
  #servicios .pq-service-box.pq-style-1 .pq-service-box-title{
    font-size: 1.35rem !important;
  }
  #servicios .pq-service-box.pq-style-1 .pq-service-box-description{
    font-size: 1.02rem !important;
  }
}
/* ICONOS: sin fondo + más grandes */
#servicios .pq-service-box.pq-style-1 .pq-service-box-icon{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;

  width: auto !important;
  height: auto !important;
  flex: 0 0 auto !important;

  margin-top: 0 !important;
  padding: 0 !important;
}

/* tamaño y color del icono */
#servicios .pq-service-box.pq-style-1 .pq-service-box-icon i{
  font-size: 40px !important; /* 🔥 más grande (sube a 44 si quieres) */
  color: #1d4ed8 !important;  /* cámbialo a #16a34a si lo quieres verde */
  opacity: 1 !important;
}

/* si el tema mete el icono dentro de un span/div extra */
#servicios .pq-service-box.pq-style-1 .pq-service-box-icon span,
#servicios .pq-service-box.pq-style-1 .pq-service-box-icon div{
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}
#servicios .pq-service-box.pq-style-1{ gap: 18px !important; }
/* Texto justificado en las tarjetas */
#servicios .pq-service-box.pq-style-1 .pq-service-box-content p,
#servicios .pq-service-box.pq-style-1 .pq-service-box-content .pq-service-description,
#servicios .pq-service-box.pq-style-1 .pq-service-box-content{
  text-align: justify !important;
  text-justify: inter-word;
  hyphens: auto;
}
/* =========================================================
   PRELOADER PRO (Logo grande + barra de carga)
   ========================================================= */
#pq-loading.pq-preloader{
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;




  justify-content: center;
  padding: 18px;

  /* fondo pro */
  background:
    radial-gradient(circle at 20% 15%, rgba(34,197,94,.18) 0%, rgba(34,197,94,0) 45%),
    radial-gradient(circle at 85% 25%, rgba(29,78,216,.14) 0%, rgba(29,78,216,0) 48%),
    linear-gradient(180deg, rgba(2,6,23,.92) 0%, rgba(2,6,23,.82) 100%);
}

#pq-loading .pq-preloader-center{
  width: min(520px, 92vw);
  border-radius: 26px;
  text-align: center;
  padding: 26px 22px;

  background: rgba(255,255,255,.82);
  border: 1px solid rgba(148,163,184,.28);
  box-shadow: 0 26px 80px rgba(0,0,0,.35);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

#pq-loading .pq-preloader-logo{
  width: 260px;               /* ✅ logo grande */
  max-width: 78vw;
  height: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto 16px auto;
  filter: drop-shadow(0 18px 35px rgba(0,0,0,.25));
}

#pq-loading .pq-preloader-bar{
  height: 12px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(15,23,42,.10);
  border: 1px solid rgba(148,163,184,.30);
  box-shadow: inset 0 2px 10px rgba(0,0,0,.08);
}

#pq-loading .pq-preloader-bar span{
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, #16a34a, #1d4ed8, #facc15);
  transition: width .18s ease;
}

#pq-loading .pq-preloader-text{
  margin-top: 10px;
  font-weight: 900;
  letter-spacing: .4px;
  color: #0f172a;
}

#pq-loading .pq-preloader-text #pq-preloader-percent{
  color: #1d4ed8;
}

/* Ocultar con animación */
#pq-loading.pq-hide{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .35s ease, visibility .35s ease;
}

/* Responsive */
@media (max-width: 576px){
  #pq-loading .pq-preloader-center{ padding: 20px 16px; border-radius: 22px; }
  #pq-loading .pq-preloader-logo{ width: 220px; margin-bottom: 14px; }
  #pq-loading .pq-preloader-bar{ height: 11px; }
}
/* ===== Nuevo diseño iOS (una sola card + imagen grande) ===== */
.pq-card-ios{
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 18px 45px rgba(0,0,0,.22);
  background: rgba(255,255,255,.06);
}

/* Fondo blur usando la misma imagen (por variable --bg) */
.pq-card-ios::before{
  content:"";
  position:absolute;
  inset:-20px;
  background-image: var(--bg);
  background-size: cover;
  background-position: center;
  filter: blur(18px) brightness(.85);
  transform: scale(1.1);
  z-index: 0;
}

/* Capita para que no se “ensucie” */
.pq-card-ios::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.50));
  z-index: 0;
}

/* ---- Media (imagen grande) ---- */
.pq-card-ios-media{
  position: relative;
  z-index: 1;
  padding: 18px 18px 10px;
}

.pq-card-ios-media img{
  width: 100%;
  height: 220px;              /* 👈 imagen GRANDE */
  object-fit: contain;        /* si quieres que no se recorte el producto */
  background: rgba(255,255,255,.10);
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.20);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Número estilo badge */
.pq-card-ios-number{
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  color: #fff;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* ---- Body (info) ---- */
.pq-card-ios-body{
  position: relative;
  z-index: 1;
  margin: 0 18px 18px;
  padding: 16px 16px;
  border-radius: 16px;

  background: rgba(15, 18, 24, 0.38);
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}

.pq-card-ios-icon{
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  margin-bottom: 10px;
}
.pq-card-ios-icon i{ color:#fff; }

.pq-card-ios-title{
  color: #fff;
  margin: 0 0 8px;
}

.pq-card-ios-desc{
  color: rgba(255,255,255,.92);
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.35;
}

/* Botón */
.pq-card-ios-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 12px;

  color: #fff;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.20);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Responsive: imagen más alta en pantallas grandes */
@media (min-width: 992px){
  .pq-card-ios-media img{ height: 260px; }
}
/* ===== Imagen FULL (cover) + hover effects + texto más grande ===== */

/* Card un poco más alta para lucir la imagen */
.pq-card-ios{
  min-height: 460px;      /* ajusta si quieres más alto */
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

/* La parte de imagen ocupa más y se ve como "cover" */
.pq-card-ios-media{
  padding: 0;             /* sin margen, imagen al borde */
  height: 300px;          /* controla cuánto espacio ocupa la imagen */
  position: relative;
  z-index: 1;
}

/* IMAGEN: ocupa todo el bloque */
.pq-card-ios-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;      /* 🔥 llena todo el espacio */
  object-position: center;
  border-radius: 0;       /* para que se funda con el card */
  border: 0;
  background: transparent;
  transform: scale(1);
  transition: transform .35s ease, filter .35s ease;
  filter: brightness(.95) contrast(1.05);
}

/* Overlay suave para que el texto siempre contraste */
.pq-card-ios-media::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.55));
  z-index: 1;
  pointer-events: none;
}

/* Número y badge arriba */
.pq-card-ios-number{
  z-index: 2;
}

/* Caja de info más grande y con mejor presencia */
.pq-card-ios-body{
  margin: 0;
  border-radius: 0;
  padding: 20px 20px 22px;
  transform: translateY(0);
  transition: transform .25s ease, background .25s ease;
}

/* Texto más grande */
.pq-card-ios-title{
  font-size: 22px;     /* 🔥 más grande */
  line-height: 1.1;
  margin-bottom: 10px;
}

.pq-card-ios-desc{
  font-size: 16px;     /* 🔥 más grande */
  line-height: 1.45;
}

/* Botón más pro */
.pq-card-ios-btn{
  font-size: 15px;
  padding: 12px 16px;
}

/* ===== Hover effects (PC) ===== */
@media (hover:hover){
  .pq-card-ios:hover{
    transform: translateY(-6px);
    box-shadow: 0 26px 60px rgba(0,0,0,.30);
    border-color: rgba(255,255,255,.35);
  }

  .pq-card-ios:hover .pq-card-ios-media img{
    transform: scale(1.06);
    filter: brightness(1.05) contrast(1.08);
  }

  .pq-card-ios:hover .pq-card-ios-body{
    transform: translateY(-6px);
    background: rgba(15, 18, 24, 0.48);
  }

  /* iconito “flota” */
  .pq-card-ios-icon{
    transition: transform .25s ease;
  }
  .pq-card-ios:hover .pq-card-ios-icon{
    transform: translateY(-2px) scale(1.03);
  }
}
/* ===== FIX: nada se sale del margen ===== */
.pq-card-ios{
  overflow: hidden !important; /* recorta todo */
}

.pq-card-ios-media{
  overflow: hidden !important; /* recorta la imagen/overlay */
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
}

.pq-card-ios-media img{
  display: block;          /* quita espacios raros */
  width: 100%;
  height: 100%;
  margin: 0;
}

/* Asegura overlay exacto al contenedor */
.pq-card-ios-media::after{
  inset: 0 !important;
}

/* Evita que el zoom se note afuera */
@media (hover:hover){
  .pq-card-ios:hover .pq-card-ios-media img{
    transform: scale(1.04); /* baja un poco el zoom */
  }
}
/* ===== Texto más grande + sin icono ===== */

/* Por si queda algún icono, lo escondemos */
.pq-card-ios-icon{ display:none !important; }

/* Título más grande */
.pq-card-ios-title{
  font-size: 26px !important;
  line-height: 1.15 !important;
  margin-bottom: 10px !important;
  font-weight: 800;
}

/* Descripción más grande */
.pq-card-ios-desc{
  font-size: 22px !important;
  line-height: 1.55 !important;
  opacity: .95;
}

/* Botón un poco más grande */
.pq-card-ios-btn{
  font-size: 16px !important;
  padding: 12px 18px !important;
}
@media (min-width: 992px){
  .pq-card-ios-title{ font-size: 28px !important; }
  .pq-card-ios-desc{ font-size: 18px !important; }
}
/* ===== Imágenes más claras ===== */

/* 1) Aclara la foto principal */
.pq-card-ios-media img{
  filter: brightness(1.12) contrast(1.05) saturate(1.08) !important;
}

/* 2) Baja el “oscuro” del degradado encima de la imagen */
.pq-card-ios-media::after{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.18)) !important;
}

/* 3) Si también quieres el fondo blur (la parte de atrás) más claro */
.pq-card-ios::before{
  filter: blur(18px) brightness(1.05) saturate(1.10) !important;
}

/* 4) Hover: que no se oscurezca */
@media (hover:hover){
  .pq-card-ios:hover .pq-card-ios-media img{
    filter: brightness(1.18) contrast(1.06) saturate(1.10) !important;
  }
}
/* ===== Auto-balance: mismo look en todas las imágenes ===== */

/* Imagen principal: ajuste base */
.pq-card-ios-media img{
  filter: brightness(1) contrast(1) saturate(1.04) !important;
}

/* Overlay 1: aclara sombras (como “soft light”) */
.pq-card-ios-media::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(255,255,255,.22);
  mix-blend-mode: soft-light;   /* clave para normalizar */
  opacity: .85;
  z-index: 1;
  pointer-events:none;
}

/* Overlay 2: degradado MUY ligero para que el texto no pelee */
.pq-card-ios-media::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(0,0,0,.16)) !important;
  z-index: 2;
  pointer-events:none;
}

/* Asegura que el número quede arriba */
.pq-card-ios-number{ z-index: 3; }

/* Fondo blur detrás un poco más claro (uniformiza todo) */
.pq-card-ios::before{
  filter: blur(18px) brightness(1.08) saturate(1.10) !important;
}

/* Hover: efecto bonito sin oscurecer */
@media (hover:hover){
  .pq-card-ios:hover .pq-card-ios-media img{
    transform: scale(1.06);
    filter: brightness(1.18) contrast(1.07) saturate(1.12) !important;
  }
} 
/* ===== SERVICIOS: texto más entendible (color + tipografía) ===== */
#servicios .pq-service-box.pq-style-1{
  background: rgba(255,255,255,.88) !important;
  border: 1px solid rgba(255,255,255,.55) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

/* Títulos */
#servicios .pq-service-box-title{
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  color: #0b1220 !important;
  font-weight: 900 !important;
  letter-spacing: .2px !important;
  line-height: 1.15 !important;
  text-shadow: 0 1px 8px rgba(0,0,0,.08) !important;
}

/* Descripción */
#servicios .pq-service-box-description{
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  color: #111827 !important;
  font-weight: 650 !important;
  font-size: 14.5px !important;  /* sube a 15.5 si quieres */
  line-height: 1.55 !important;
  opacity: 1 !important;
  text-shadow: 0 1px 8px rgba(0,0,0,.06) !important;
}

/* Evita que en hover se “apague” el texto */
#servicios .pq-service-box.pq-style-1:hover .pq-service-box-title,
#servicios .pq-service-box.pq-style-1:hover .pq-service-box-description{
  opacity: 1 !important;
  color: #0b1220 !important;
}
/* =========================================================
   ADD-ON MODERNO (sin mover tu diseño)
   Pegar al FINAL del 
   ========================================================= */

/* Smooth scrolling + evita que el sticky tape el ancla */
html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 120px; } /* ajusta si tu header es más alto */

/* Selección de texto más pro */
::selection { background: rgba(34,197,94,.25); color: #0f172a; }

/* Focus visible (accesibilidad moderna) */
:focus { outline: none; }
:focus-visible{
  outline: 3px solid rgba(29,78,216,.55);
  outline-offset: 3px;
  border-radius: 12px;
}

/* Micro-animaciones globales suaves (sin marear) */
@media (prefers-reduced-motion: no-preference){
  .wow, .pq-service-box, .pq-team, .pq-image-box, .pq-testimonial-box, .pq-button, a, button{
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease, opacity .18s ease;
  }
  .pq-image-border img, .pq-team-img img{
    transition: transform .35s ease, filter .35s ease;
  }
  .pq-image-border:hover img,
  .pq-team:hover .pq-team-img img{
    transform: scale(1.03);
    filter: contrast(1.05) saturate(1.05);
  }
}

/* Botones: más “app” sin cambiar tu estilo base */
.pq-button, .pq-card-ios-btn, .pq-social-btn{
  will-change: transform;
}
@media (hover:hover){
  .pq-button:hover, .pq-card-ios-btn:hover{
    transform: translateY(-2px);
    filter: brightness(1.03);
  }
}

/* Inputs: si usas forms, se verán más premium */
input, textarea, select{
  border-radius: 14px;
  transition: box-shadow .18s ease, border-color .18s ease;
}
input:focus, textarea:focus, select:focus{
  border-color: rgba(29,78,216,.35);
  box-shadow: 0 0 0 4px rgba(29,78,216,.12);
}

/* =========================
   Barra de progreso de scroll (arriba)
   ========================= */
.pq-scroll-progress{
  position: fixed;
  top: 0; left: 0;
  height: 4px;
  width: 0%;
  z-index: 999999;
  background: linear-gradient(90deg,#16a34a,#1d4ed8,#facc15);
  box-shadow: 0 10px 28px rgba(15,23,42,.18);
}

/* =========================
   WhatsApp flotante (opcional)
   ========================= */
.pq-wa-float{
  position: fixed;
  right: 18px;
  bottom: 84px; /* para que no choque con el “to top” */
  width: 52px;
  height: 52px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: linear-gradient(135deg, rgba(34,197,94,.98), rgba(16,163,74,.92));
  border: 1px solid rgba(255,255,255,.18);
  color: #fff !important;
  box-shadow: 0 18px 48px rgba(34,197,94,.22);
  z-index: 999998;
}
.pq-wa-float:hover{ filter: brightness(1.06); transform: translateY(-2px); }

/* En móvil: acomoda un poco */
@media (max-width:576px){
  .pq-to-top{ right: 14px; bottom: 14px; width: 48px; height: 48px; }
  .pq-wa-float{ right: 14px; bottom: 74px; width: 48px; height: 48px; }
}

#pq-loading{ display:none !important; }
/* =========================================================
   PRO PACK V3 (Pegar al FINAL del )
   Unifica look premium + corrige choques de estilos
   ========================================================= */

/* ---------- 0) TOKENS PRO (únicos) ---------- */
:root{
  --pq-primary: #16a34a;
  --pq-blue: #1d4ed8;
  --pq-yellow: #facc15;

  --pq-ink: #0b1220;
  --pq-muted: rgba(15,23,42,.72);

  --pq-r-lg: 26px;
  --pq-r-md: 20px;
  --pq-r-sm: 16px;

  --pq-bd: rgba(148,163,184,.28);
  --pq-bd-strong: rgba(255,255,255,.30);

  --pq-glass: rgba(255,255,255,.80);
  --pq-glass-lite: rgba(255,255,255,.66);
  --pq-glass-dark: rgba(2,6,23,.62);

  --pq-blur: 14px;

  --pq-shadow: 0 24px 80px rgba(0,0,0,.18);
  --pq-shadow-sm: 0 14px 38px rgba(15,23,42,.12);
  --pq-shadow-xs: 0 10px 24px rgba(15,23,42,.10);
}

/* ---------- 1) Micro-UX + Accesibilidad (pro) ---------- */
html{ scroll-behavior: smooth; }
section[id]{ scroll-margin-top: 120px; }

::selection{ background: rgba(34,197,94,.22); color: var(--pq-ink); }

:focus{ outline: none; }
:focus-visible{
  outline: 3px solid rgba(29,78,216,.55);
  outline-offset: 3px;
  border-radius: 12px;
}

@media (prefers-reduced-motion: no-preference){
  a, button, .pq-button, .pq-service-box, .pq-team, .pq-testimonial-box{
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease, background .18s ease, border-color .18s ease;
  }
}

/* ---------- 2) GLASS UNIVERSAL (consistente) ---------- */
.pq-glass-pro{
  background: var(--pq-glass) !important;
  border: 1px solid var(--pq-bd) !important;
  box-shadow: var(--pq-shadow-sm) !important;
  backdrop-filter: blur(var(--pq-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--pq-blur)) saturate(140%);
  border-radius: var(--pq-r-lg) !important;
}
.pq-glass-pro-lite{
  background: var(--pq-glass-lite) !important;
  border: 1px solid var(--pq-bd) !important;
  box-shadow: var(--pq-shadow-xs) !important;
  backdrop-filter: blur(calc(var(--pq-blur) - 4px)) saturate(140%);
  -webkit-backdrop-filter: blur(calc(var(--pq-blur) - 4px)) saturate(140%);
  border-radius: var(--pq-r-md) !important;
}

/* borde “shine” premium (sin ensuciar) */
.pq-shine{
  position: relative;
  overflow: hidden;
}
.pq-shine::before{
  content:"";
  position:absolute; inset:-2px;
  background: linear-gradient(135deg,
    rgba(255,255,255,.55),
    rgba(255,255,255,0) 35%,
    rgba(34,197,94,.18),
    rgba(29,78,216,.14),
    rgba(255,255,255,0) 70%,
    rgba(255,255,255,.35)
  );
  opacity:.75;
  pointer-events:none;
}
.pq-shine > *{ position: relative; z-index: 1; }

/* ---------- 3) HEADER más PRO (sin pelear con tu tema) ---------- */
/* Sticky glass (si tu header es fixed/sticky ya) */
.pq-header-modern .pq-bottom-header{
  background: rgba(255,255,255,.78) !important;
  border-bottom: 1px solid var(--pq-bd) !important;
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 18px 55px rgba(15,23,42,.10);
}

/* Menú: pill premium (más fino que subrayado) */
.pq-main-menu > li > a,
.pq-main-menu-modern > li > a{
  border-radius: 999px !important;
  padding: 12px 14px !important;
  font-weight: 900 !important;
  letter-spacing: .55px !important;
  text-transform: uppercase;
}
.pq-main-menu > li > a:hover,
.pq-main-menu-modern > li > a:hover{
  background: rgba(22,163,74,.10) !important;
  transform: translateY(-1px);
}
.pq-main-menu > li.current-menu-item > a,
.pq-main-menu-modern > li.current-menu-item > a,
.pq-main-menu > li.active > a,
.pq-main-menu-modern > li.active > a{
  background: rgba(29,78,216,.10) !important;
  color: var(--pq-blue) !important;
}

/* CTA del header: más premium */
.pq-cta-btn{
  border-radius: 999px !important;
  padding: 12px 22px !important;
  background: linear-gradient(135deg, var(--pq-primary), var(--pq-blue)) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  box-shadow: 0 22px 60px rgba(22,163,74,.16), 0 22px 60px rgba(29,78,216,.14) !important;
}
@media (hover:hover){
  .pq-cta-btn:hover{
    transform: translateY(-2px);
    filter: brightness(1.06);
    box-shadow: 0 30px 80px rgba(22,163,74,.18), 0 30px 80px rgba(29,78,216,.18) !important;
  }
}

/* ---------- 4) SERVICIOS (limpio, legible, pro) ---------- */
#servicios{
  position: relative !important;
  overflow: hidden;
  background: url("../image/team/hor/IMG_4909.webp") center/cover no-repeat !important;
}

/* overlay correcto (legible pero deja ver foto) */
#servicios::before{
  content:"";
  position:absolute; inset:0;
  background: rgba(255,255,255,.40) !important; /* sube a .48 si quieres más claro */
  z-index:0;
}
#servicios > .container{ position: relative !important; z-index: 1 !important; }

/* título legible sobre foto */
#servicios .pq-title-sub-title span,
#servicios .pq-title-hadding{
  color: #fff !important;
  text-shadow: 0 16px 44px rgba(0,0,0,.45);
}
#servicios .pq-title-hadding span{ color: #bbf7d0 !important; }

/* Cards servicios PRO (sin absolute raros) */
#servicios .pq-service-box.pq-style-1{
  display:flex !important;
  gap: 18px !important;
  padding: 18px 18px !important;
  border-radius: var(--pq-r-lg) !important;

  background: rgba(255,255,255,.86) !important;
  border: 1px solid rgba(255,255,255,.52) !important;
  box-shadow: var(--pq-shadow-sm) !important;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}
#servicios .pq-service-box.pq-style-1 .pq-service-box-icon{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  width:auto !important;
  height:auto !important;
}
#servicios .pq-service-box.pq-style-1 .pq-service-box-icon i{
  font-size: 42px !important;
  color: var(--pq-blue) !important;
}

/* tipografía pro (más entendible) */
#servicios .pq-service-box-title{
  color: var(--pq-ink) !important;
  font-weight: 950 !important;
  font-size: 1.35rem !important;
  line-height: 1.15 !important;
}
#servicios .pq-service-box-description{
  color: rgba(15,23,42,.92) !important;
  font-weight: 650 !important;
  font-size: 1.02rem !important;
  line-height: 1.7 !important;
  text-align: justify !important;
  text-justify: inter-word;
  hyphens: auto;
}

@media (hover:hover){
  #servicios .pq-service-box.pq-style-1:hover{
    transform: translateY(-3px);
    box-shadow: 0 30px 90px rgba(0,0,0,.20) !important;
    border-color: rgba(34,197,94,.30) !important;
  }
}
@media (max-width: 767.98px){
  #servicios .pq-service-box.pq-style-1{
    flex-direction: column !important;
    padding: 16px !important;
  }
}

/* ---------- 5) PRODUCTOS (cards más premium + consistentes) ---------- */
.service.pq-bg-primary{
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(2,6,23,.72) 0%, rgba(2,6,23,.46) 55%, rgba(2,6,23,.76) 100%),
    url("../image/team/hor/IMG_4935.webp") center/cover no-repeat !important;
  border-top: 1px solid rgba(255,255,255,.10);
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.service.pq-bg-primary::before{
  content:"";
  position:absolute; inset:-2px;
  background:
    radial-gradient(circle at 15% 20%, rgba(34,197,94,.18) 0%, rgba(34,197,94,0) 45%),
    radial-gradient(circle at 85% 25%, rgba(29,78,216,.16) 0%, rgba(29,78,216,0) 48%),
    radial-gradient(circle at 50% 95%, rgba(250,204,21,.10) 0%, rgba(250,204,21,0) 55%);
  pointer-events:none;
  z-index:0;
}
.service.pq-bg-primary .container{ position:relative; z-index:1; }
.service.pq-bg-primary .pq-title-hadding{ color:#fff !important; text-shadow: 0 18px 42px rgba(0,0,0,.45); }
.service.pq-bg-primary .pq-title-hadding span{ color:#bbf7d0 !important; }

/* Card style-2: glass real + no pierde texto en hover */
.service .pq-service-box.pq-style-2{
  background: rgba(255,255,255,.90) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  border-radius: var(--pq-r-lg) !important;
  box-shadow: var(--pq-shadow) !important;
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  overflow:hidden;
}
.service .pq-service-box.pq-style-2 .pq-service-info,
.service .pq-service-box.pq-style-2 .pq-service-info *{
  position: relative;
  z-index: 2;
}
.service .pq-service-box.pq-style-2 .pq-service-box-title{
  color: var(--pq-ink) !important;
  font-weight: 950 !important;
  font-size: 1.35rem !important;
  line-height: 1.2 !important;
}
.service .pq-service-box.pq-style-2 .pq-service-box-description{
  color: rgba(15,23,42,.92) !important;
  font-weight: 650 !important;
  font-size: 1.02rem !important;
  line-height: 1.7 !important;
}

/* ---------- 6) TESTIMONIOS (más “Apple”) ---------- */
.pq-testimonial-pro .pq-testimonial-box.pq-style-2{
  background: rgba(255,255,255,.88) !important;
  border: 1px solid rgba(148,163,184,.22) !important;
  border-radius: var(--pq-r-lg) !important;
  box-shadow: var(--pq-shadow-sm) !important;
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
}
@media (hover:hover){
  .pq-testimonial-pro .pq-testimonial-box.pq-style-2:hover{
    transform: translateY(-3px);
    box-shadow: 0 26px 78px rgba(15,23,42,.14) !important;
    border-color: rgba(22,163,74,.28) !important;
  }
}

/* ---------- 7) CONTACTO (UN SOLO fondo + overlay pro) ---------- */
/* IMPORTANTE: esta sección reemplaza tus múltiples #contacto repetidos */
#contacto{
  position: relative;
  overflow: hidden;
  background: url("../image/team/hor/IMG_4909.webp") center/cover no-repeat !important; /* CAMBIA si quieres */
}
#contacto::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(2,6,23,.78) 0%, rgba(2,6,23,.52) 55%, rgba(2,6,23,.78) 100%);
  z-index:0;
}
#contacto::after{
  content:"";
  position:absolute; inset:-60px;
  background:
    radial-gradient(circle at 15% 10%, rgba(34,197,94,.20) 0%, rgba(34,197,94,0) 45%),
    radial-gradient(circle at 90% 25%, rgba(29,78,216,.18) 0%, rgba(29,78,216,0) 46%),
    radial-gradient(circle at 40% 95%, rgba(250,204,21,.12) 0%, rgba(250,204,21,0) 55%);
  opacity:.95;
  pointer-events:none;
  z-index:0;
}
#contacto .container, #contacto .row, #contacto .wow{ position: relative; z-index: 1; }

#contacto .pq-title-hadding,
#contacto .pq-title-sub-title span{
  color:#fff !important;
  text-shadow: 0 18px 46px rgba(0,0,0,.45);
}
#contacto .pq-title-hadding span{ color:#bbf7d0 !important; }

/* Stage detrás de las cards */
#contacto .row{
  border-radius: 28px;
  padding: 22px 18px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 26px 90px rgba(0,0,0,.30);
}

/* Cards contacto/mapa uniformes */
#contacto .pq-contact-card,
#contacto .pq-locator-card{
  background: rgba(255,255,255,.82) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  border-radius: var(--pq-r-lg) !important;
  box-shadow: 0 22px 70px rgba(0,0,0,.22) !important;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}
@media (hover:hover){
  #contacto .pq-contact-card:hover,
  #contacto .pq-locator-card:hover{
    transform: translateY(-2px);
    box-shadow: 0 30px 95px rgba(0,0,0,.28) !important;
    border-color: rgba(34,197,94,.26) !important;
  }
}

/* WhatsApp card: premium */
#contacto .pq-wa-card{
  background: rgba(2,6,23,.88) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: var(--pq-r-md) !important;
  box-shadow: 0 18px 55px rgba(0,0,0,.26) !important;
}
#contacto .pq-wa-btn{
  background: linear-gradient(135deg, rgba(29,78,216,.96), rgba(34,197,94,.92)) !important;
}

/* ---------- 8) PRELOADER (más fino, sin exagerar blur) ---------- */
#pq-loading.pq-preloader{
  background:
    radial-gradient(circle at 20% 15%, rgba(34,197,94,.16) 0%, rgba(34,197,94,0) 45%),
    radial-gradient(circle at 85% 25%, rgba(29,78,216,.12) 0%, rgba(29,78,216,0) 48%),
    linear-gradient(180deg, rgba(2,6,23,.92) 0%, rgba(2,6,23,.86) 100%);
}
#pq-loading .pq-preloader-center{
  border-radius: var(--pq-r-lg);
}

/* ---------- 9) Barra progreso scroll (si la usas) ---------- */
.pq-scroll-progress{
  height: 4px;
  background: linear-gradient(90deg, var(--pq-primary), var(--pq-blue), var(--pq-yellow));
  box-shadow: 0 10px 28px rgba(15,23,42,.18);
}

/* NOTA: Si estás ocultando el preloader global, quita esto:
   #pq-loading{ display:none !important; }
*/
/* =========================================================
   REELS (Instagram / TikTok / Shorts) - PRO + Responsive
   Estilo PADIHER (Rojo/Azul/Amarillo/Blanco)
   Pegar al FINAL del 
   ========================================================= */

/* Paleta Padiher (puedes ajustar tonos aquí) */
:root{
  --p-red:    #E11D2E;   /* rojo */
  --p-blue:   #1D4ED8;   /* azul */
  --p-yellow: #FACC15;   /* amarillo */
  --p-white:  #FFFFFF;

  --ink: #0f172a;
  --muted: rgba(15,23,42,.78);

  --line: rgba(148,163,184,.20);
  --glass: rgba(255,255,255,.82);
  --shadow: 0 18px 55px rgba(15,23,42,.12);
}

/* Sección */
#reels{
  position: relative;
  padding: 105px 0;
  overflow: hidden;

  /* Fondo con halos Padiher */
  background:
    radial-gradient(circle at 12% 18%, rgba(225,29,46,.16) 0%, rgba(225,29,46,0) 46%),
    radial-gradient(circle at 88% 22%, rgba(29,78,216,.16) 0%, rgba(29,78,216,0) 48%),
    radial-gradient(circle at 50% 92%, rgba(250,204,21,.12) 0%, rgba(250,204,21,0) 52%),
    linear-gradient(180deg, #f8fafc 0%, #ffffff 55%, #f1f5f9 100%);

  border-top: 1px solid rgba(148,163,184,.18);
  border-bottom: 1px solid rgba(148,163,184,.18);
}

/* Barra superior tricolor */
#reels::before{
  content:"";
  position:absolute; top:0; left:0; right:0; height:4px;
  background: linear-gradient(90deg, var(--p-red), var(--p-blue), var(--p-yellow));
  opacity:.95;
}

/* Título */
#reels .pq-title-hadding{
  text-shadow: 0 18px 40px rgba(15,23,42,.10);
}

/* Span destacado (texto en gradiente + subrayado amarillo) */
#reels .pq-title-hadding span{
  background: linear-gradient(90deg, var(--p-red), var(--p-blue));
  -webkit-background-clip:text; background-clip:text;
  color: transparent;

  text-decoration: underline;
  text-decoration-color: var(--p-yellow);
  text-decoration-thickness: 4px;
  text-underline-offset: 10px;
  text-decoration-skip-ink: none;

  padding: 0 .08em;
}

/* Grid */
.pq-reels-grid{
  margin-top: 26px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

@media (max-width: 991.98px){
  .pq-reels-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px){
  #reels{ padding: 80px 0; }
  .pq-reels-grid{ grid-template-columns: 1fr; }
}

/* Card */
.pq-reel-card{
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  background: var(--glass);
  border: 1px solid rgba(148,163,184,.22);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

/* Línea de marca dentro de la card */
.pq-reel-card::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:2px;
  background: linear-gradient(90deg, rgba(225,29,46,.92), rgba(29,78,216,.92), rgba(250,204,21,.92));
  opacity:.75;
  pointer-events:none;
}

@media (hover:hover){
  .pq-reel-card:hover{
    transform: translateY(-3px);
    border-color: rgba(225,29,46,.22);
    box-shadow: 0 26px 80px rgba(15,23,42,.16);
  }
}

.pq-reel-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 16px 10px;
  gap: 10px;
}

/* Chip */
.pq-reel-chip{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 950;
  letter-spacing: .35px;
  font-size: .92rem;
  color: var(--ink);
  background: rgba(15,23,42,.05);
  border: 1px solid rgba(148,163,184,.22);
}

.pq-reel-chip i{ color: var(--p-red); }

/* Botón */
.pq-reel-btn{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;

  background: rgba(29,78,216,.10);
  border: 1px solid rgba(29,78,216,.22);
  color: var(--p-blue);

  font-weight: 950;
  text-decoration: none !important;
  transition: transform .16s ease, filter .16s ease, background .16s ease, border-color .16s ease;
}

.pq-reel-btn:hover{
  filter: brightness(1.06);
  transform: translateY(-1px);
  background: rgba(29,78,216,.13);
  border-color: rgba(29,78,216,.30);
}

/* Accesibilidad: focus visible */
.pq-reel-btn:focus-visible{
  outline: 3px solid rgba(250,204,21,.55);
  outline-offset: 2px;
}

/* Frame 9:16 */
.pq-reel-frame{
  position: relative;
  width: 100%;
  aspect-ratio: 9/16;
  overflow: hidden;

  border-top: 1px solid rgba(148,163,184,.18);
  background:
    radial-gradient(circle at 70% 30%, rgba(29,78,216,.12), transparent 55%),
    rgba(2,6,23,.05);
}

.pq-reel-frame iframe,
.pq-reel-frame video{
  width: 100%;
  height: 100%;
  border: 0;
  display:block;
}

/* Footer mini */
.pq-reel-foot{
  padding: 12px 16px 16px;
  color: rgba(15,23,42,.82);
  font-weight: 800;
  font-size: .95rem;
  line-height: 1.4;
}

/* =========================================================
   RENDIMIENTO FINAL
   ========================================================= */
#pq-loading{transition:opacity .25s ease, visibility .25s ease;}
@media (max-width:767px){
  .wow,.animated{animation:none!important;transition:none!important;transform:none!important;opacity:1!important;}
}