Álbum de páginas – nodo25

:root {
      --primary: #109045;
      --primary-dark: #0b6e35;
      --secondary: #0a62c2;
      --accent: #ff6b35;
      --ink: #0f172a;
      --muted: #64748b;
      --soft: #f8fafc;
      --card: #ffffff;
      --radius: 20px;
      --shadow: 0 10px 30px rgba(2, 6, 23, 0.08);
      --shadow-lg: 0 20px 40px rgba(2, 6, 23, 0.12);
      --gradient-primary: linear-gradient(135deg, var(--primary), var(--secondary));
      --gradient-dark: linear-gradient(135deg, var(--primary-dark), #0a4a8f);
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      color: var(--ink);
      background: #fff;
      line-height: 1.6;
      overflow-x: hidden;
    }

    h1, h2, h3, h4, h5, h6 {
      font-weight: 700;
      line-height: 1.2;
    }

    .btn-primary {
      --bs-btn-bg: var(--primary);
      --bs-btn-border-color: var(--primary);
      --bs-btn-hover-bg: var(--primary-dark);
      --bs-btn-hover-border-color: var(--primary-dark);
      --bs-btn-active-bg: var(--primary-dark);
      --bs-btn-active-border-color: var(--primary-dark);
      font-weight: 600;
      padding: 12px 24px;
      border-radius: 50px;
      transition: all 0.3s ease;
      box-shadow: 0 4px 12px rgba(16, 144, 69, 0.25);
    }

    .btn-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 16px rgba(16, 144, 69, 0.35);
    }

    .btn-outline-primary {
      --bs-btn-color: var(--primary);
      --bs-btn-border-color: var(--primary);
      --bs-btn-hover-bg: var(--primary);
      --bs-btn-hover-border-color: var(--primary);
      font-weight: 600;
      padding: 12px 24px;
      border-radius: 50px;
      transition: all 0.3s ease;
    }

    .btn-outline-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 16px rgba(16, 144, 69, 0.2);
    }

    .text-primary {
      color: var(--primary) !important;
    }

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

    .card-soft {
      background: var(--card);
      border: 1px solid rgba(15, 23, 42, 0.08);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      transition: all 0.3s ease;
    }

    .card-soft:hover {
      transform: translateY(-5px);
      box-shadow: var(--shadow-lg);
    }

    .section {
      padding: 100px 0;
    }

    .section-title {
      font-size: clamp(32px, 4vw, 56px);
      font-weight: 800;
      letter-spacing: -0.02em;
      margin-bottom: 16px;
    }

    .section-subtitle {
      color: var(--muted);
      font-size: 18px;
      max-width: 700px;
      margin: 0 auto;
    }

    /* Navbar */
    .navbar {
      --bs-navbar-brand-color: var(--ink);
      --bs-navbar-brand-hover-color: var(--ink);
      --bs-navbar-color: var(--ink);
      padding: 20px 0;
      transition: all 0.3s ease;
    }

    .navbar.scrolled {
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(10px);
      padding: 12px 0;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    }

    .navbar-brand {
      font-weight: 800;
      font-size: 24px;
    }

    .navbar .nav-link {
      font-weight: 500;
      margin: 0 8px;
      position: relative;
      transition: color 0.3s ease;
    }

    .navbar .nav-link:after {
      content: '';
      position: absolute;
      width: 0;
      height: 2px;
      bottom: 0;
      left: 0;
      background: var(--gradient-primary);
      transition: width 0.3s ease;
    }

    .navbar .nav-link:hover:after,
    .navbar .nav-link.active:after {
      width: 100%;
    }

    .navbar .badge-cta {
      background: var(--gradient-primary);
      border: none;
      border-radius: 50px;
      padding: 10px 20px;
      font-weight: 600;
      transition: all 0.3s ease;
      box-shadow: 0 4px 12px rgba(10, 98, 194, 0.25);
    }

    .navbar .badge-cta:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 16px rgba(10, 98, 194, 0.35);
    }

    /* Hero */
    #inicio {
      position: relative;
      min-height: 100vh;
      display: flex;
      align-items: center;
      overflow: hidden;
    }

    #inicio .hero-bg {
      position: absolute;
      inset: 0;
      background: linear-gradient(rgba(10, 30, 60, 0.7), rgba(10, 30, 60, 0.8)), url('img/herod.png') center/cover no-repeat;
      filter: brightness(0.8);
    }

    #inicio .hero-content {
      position: relative;
      z-index: 2;
      color: #fff;
      text-align: center;
      padding: 48px 16px;
    }

    #inicio .hero-content h1 {
      font-size: clamp(36px, 6vw, 72px);
      font-weight: 800;
      letter-spacing: -0.02em;
      margin-bottom: 24px;
      line-height: 1.1;
    }

    #inicio .hero-content p {
      max-width: 820px;
      margin: 0 auto 32px;
      color: #e8eef5;
      font-size: 20px;
    }

    #inicio .badges {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      justify-content: center;
      margin-bottom: 32px;
    }

    #inicio .chip {
      background: rgba(255, 255, 255, 0.15);
      color: #fff;
      border: 1px solid rgba(255, 255, 255, 0.25);
      border-radius: 50px;
      padding: 8px 16px;
      font-size: 15px;
      font-weight: 500;
      backdrop-filter: blur(10px);
    }

    #inicio .btn-group {
      display: flex;
      gap: 16px;
      justify-content: center;
      flex-wrap: wrap;
    }

    /* Quiénes somos */
    .feature {
      display: flex;
      gap: 16px;
      align-items: flex-start;
      margin-bottom: 16px;
    }

    .feature .dot {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: var(--gradient-primary);
      margin-top: 6px;
      flex: 0 0 16px;
      box-shadow: 0 4px 8px rgba(16, 144, 69, 0.3);
    }

    /* Servicios */
    .service-card {
      height: 100%;
      padding: 32px 24px;
      text-align: center;
      transition: all 0.3s ease;
      border-radius: var(--radius);
      position: relative;
      overflow: hidden;
    }

    .service-card:before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 4px;
      background: var(--gradient-primary);
    }

    .service-card .icon {
      width: 70px;
      height: 70px;
      margin: 0 auto 20px;
      background: var(--gradient-primary);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 28px;
      box-shadow: 0 8px 20px rgba(16, 144, 69, 0.25);
    }

    .service-card h5 {
      font-weight: 700;
      margin-bottom: 12px;
    }

    /* Ticker/Galería */
    #trabajos {
      position: relative;
      overflow: hidden;
    }

    #trabajos .frame {
      position: relative;
      margin: 0 auto;
      max-width: 1200px;
    }

    #trabajos .viewport {
      overflow: hidden;
      padding: 20px 0;
    }

    #trabajos .track {
      display: flex;
      gap: 20px;
      will-change: transform;
    }

    #trabajos .item {
      flex: 0 0 auto;
      width: 350px;
      border-radius: 16px;
      overflow: hidden;
      background: #fff;
      border: 1px solid rgba(15, 23, 42, 0.08);
      box-shadow: var(--shadow);
      cursor: pointer;
      transition: all 0.3s ease;
      position: relative;
    }

    #trabajos .item:hover {
      transform: translateY(-5px);
      box-shadow: var(--shadow-lg);
    }

    #trabajos .item img {
      width: 100%;
      height: 250px;
      object-fit: cover;
      display: block;
      transition: transform 0.5s ease;
    }

    #trabajos .item:hover img {
      transform: scale(1.05);
    }

    #trabajos .ctrl {
      positio
/* ...cortado... */

/* ===== Phone-only navbar/overflow fix (no desktop impact) ===== */
@media (max-width: 576px){
  /* Keep brand from pushing the hamburger off-screen */
  .navbar-brand{
    max-width: 68%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* Make sure navbar container doesn't clip controls and adds a tiny gutter */
  .navbar .container{
    overflow: visible !important;
    padding-left: 12px;
    padding-right: 12px;
  }
  /* Gentle horizontal padding site-wide to avoid accidental 1-2px overflow */
  .container{ padding-left: 16px; padding-right: 16px; }
}

/* Ensure the hamburger icon is always visible even if Bootstrap vars aren't loaded */
.navbar-light .navbar-toggler-icon{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(0,0,0,.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
}
.navbar-toggler{ border:none; }
.navbar-toggler:focus{ box-shadow:none; }

/* Safety rails: never allow horizontal scroll */
html, body{ max-width:100%; overflow-x:hidden; }

/* ====== Ticker más grande (sin estirar imágenes) ====== */
    #trabajos .frame{
      /* Tamaño base de cada ítem (auto-responsive) */
      --item-w: clamp(260px, 36vw, 560px);
      --item-h: clamp(260px, 36vw, 560px);
    }
    #trabajos .viewport{
      height: var(--item-h);
    }
    #trabajos .track{
      display: flex;
      gap: 16px;                 /* separa un poco las imágenes */
      align-items: center;
    }
    #trabajos .item{
      flex: 0 0 var(--item-w);   /* ancho fijo por ítem */
      height: var(--item-h);     /* alto fijo por ítem */
      display: flex;
      align-items: center;
      justify-content: center;
      background: #fff;          /* fondo blanco para evitar “marco” oscuro */
      border-radius: 12px;       /* opcional: esquinas suaves */
      overflow: hidden;
    }
    #trabajos .item img{
      width: 100%;
      height: 100%;
      object-fit: contain;       /* NO recorta ni deforma */
    }
  
    /* En móviles: que ocupen casi todo el ancho */
    @media (max-width: 576px){
      #trabajos .frame{
        --item-w: 92vw;
        --item-h: 92vw;          /* mantiene formato cuadrado 1:1 */
      }
    }
  
    /* Botones un toque más grandes (opcional) */
    #trabajos .ctrl{
      font-size: 1.25rem;
      width: 46px; height: 46px;
    }

/* ===== Estilos de la sección FAQs ===== */
        #faqs .faq-grid{display:grid; gap:18px}
        @media (min-width:768px){ #faqs .faq-grid{grid-template-columns:1fr 1fr} }
  
        #faqs details.faq{
          border:1px solid rgba(0,0,0,.08);
          border-radius:14px;
          background:#fff;
          overflow:hidden;
          transition: box-shadow .2s ease, border-color .2s ease;
        }
        #faqs details.faq[open]{border-color:rgba(0,0,0,.14); box-shadow:0 8px 24px rgba(0,0,0,.06)}
  
        #faqs summary{
          list-style:none; cursor:pointer;
          padding:16px 18px;
          display:flex; align-items:center; gap:12px;
          color:#0b0b0b;                /* PREGUNTA: negro */
          font-weight:700;              /* negrita */
          user-select:none;
        }
        #faqs summary::-webkit-details-marker{display:none}
  
        /* Flecha */
        #faqs .chev{
          flex:0 0 22px; height:22px; display:grid; place-items:center;
          border:1px solid rgba(0,0,0,.14); border-radius:50%;
          font-size:16px; line-height:1; transform:rotate(0deg);
          transition:transform .25s ease, background .25s ease;
        }
        #faqs details[open] .chev{transform:rotate(90deg); background:rgba(16,185,129,.10)}
  
        /* RESPUESTA: gris plomo + circulito verde */
        #faqs .answer{
          position:relative;
          padding:0 18px 16px 52px;
          color:#6b6f76;               /* gris plomo */
          line-height:1.6;
        }
        #faqs .answer::before{
          content:"";
          position:absolute; left:22px; top:6px;
          width:12px; height:12px; border-radius:50%;
          background:#22c55e;          /* verde */
          box-shadow:0 0 0 4px rgba(34,197,94,.15); /* halo suave */
        }
  
        /* Enlaces dentro de la respuesta */
        #faqs .answer a{
          color:#0d6efd; font-weight:600; text-decoration:none;
        }
        #faqs .answer a:hover{text-decoration:underline}

#contacto .contact-card { border-radius: 14px; }
        #contacto .card-title { font-weight: 800; margin-bottom: .25rem; }
        #contacto .muted { color: #6b7280; }
        #contacto .icon {
          width: 38px; height: 38px; border-radius: 50%;
          display: grid; place-items: center;
          background: rgba(13,110,253,.08); /* usa tu primario si querés */
          color: #0d6efd;
          margin-right: .75rem;
          flex: 0 0 38px;
        }
        #contacto .info-item { display: flex; align-items: flex-start; gap:.5rem; }
        #contacto .badge-soft {
          display:inline-block; padding:.35rem .6rem; border-radius:999px;
          background: rgba(13,110,253,.08); color:#0d6efd; font-weight:600; font-size:.85rem;
          margin-right:.4rem; margin-bottom:.4rem;
        }
        /* Asegura simetría en alto */
        #contacto .h-100 { display:flex; }
        #contacto .h-100 .card-body { display:flex; flex-direction:column; }
        #contacto .actions { margin-top:auto; }

:root{
    --wa: #25D366; --wa-dark: #128C7E; --wa-darker: #075E54;
    /* leve guiño a tu paleta verde/azul en el header del chat */
    --dark-bg: #0b1120; --darker-bg: #0a162c;
    --light-text: #ffffff; --muted-text: rgba(255,255,255,.7);
  }
  .wa-float{ position: fixed; right: 18px; bottom: 18px; z-index: 9999; font-family: inherit; }
  .wa-btn{
    background: linear-gradient(135deg, var(--wa), var(--wa-dark));
    color:#fff; border:0; width:60px; height:60px; border-radius:50%;
    display:grid; place-items:center; box-shadow:0 10px 30px rgba(0,0,0,.25);
    cursor:pointer; transition:transform .3s, box-shadow .3s, background .3s; position:relative; overflow:hidden;
  }
  .wa-btn::after{ content:""; position:absolute; inset:0;
    background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.18), rgba(255,255,255,0) 70%);
    opacity:0; transition:opacity .3s;
  }
  .wa-btn:hover{ transform: translateY(-3px) scale(1.05); box-shadow:0 14px 36px rgba(0,0,0,.35); }
  .wa-btn:hover::after{ opacity:1; }

  .wa-card{
    position:absolute; right:0; bottom:74px; width:min(360px, 92vw);
    background: var(--dark-bg); color: var(--light-text); border-radius:18px; overflow:hidden;
    box-shadow: 0 18px 60px rgba(0,0,0,.5); border:1px solid rgba(255,255,255,.08);
    transform: translateY(10px); opacity:0; transition: transform .3s, opacity .3s;
  }
  .wa-card[aria-modal="true"]{ transform: translateY(0); opacity:1; }
  .wa-head{ display:flex; align-items:center; gap:12px; padding:14px;
    background: linear-gradient(180deg, #0d162c, var(--darker-bg)); border-bottom:1px solid rgba(255,255,255,.06);
  }
  .wa-avatar{
    width:40px; height:40px; border-radius:8px; background:#0e1a33;
    display:grid; place-items:center; border:1px solid rgba(255,255,255,.08);
    overflow:hidden;
  }
  .wa-title{ font-weight:700; font-size:1.05rem; }
  .wa-status{ font-size:.85rem; color:var(--muted-text); display:flex; align-items:center; gap:6px; }
  .wa-status::before{ content:""; width:8px; height:8px; border-radius:50%; background: var(--wa); }
  .wa-close{ margin-left:auto; background:transparent; color:#fff; border:0; font-size:24px; cursor:pointer; opacity:.7;
    width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:.2s;
  }
  .wa-close:hover{ opacity:1; background: rgba(255,255,255,.1); }

  .wa-body{ padding:12px 14px; max-height:40vh; overflow:auto; background: var(--dark-bg);
    display:flex; flex-direction:column; gap:8px; }
  .wa-bubble{ max-width:88%; padding:10px 12px; border-radius:14px; line-height:1.35; box-shadow:0 4px 14px rgba(0,0,0,.25); animation:fadeIn .25s ease; }
  @keyframes fadeIn{ from{opacity:0; transform:translateY(5px)} to{opacity:1; transform:none} }
  .wa-bot{ background:#0c1428; border:1px solid rgba(255,255,255,.06); align-self:flex-start; border-bottom-left-radius:4px; }
  .wa-user{ background: var(--wa-darker); align-self:flex-end; border-bottom-right-radius:4px; }

  .wa-compose{ display:grid; grid-template-columns:1fr auto; gap:8px; padding:10px; background: var(--dark-bg); border-top:1px solid rgba(255,255,255,.08); }
  .wa-compose textarea{
    resize:none; border-radius:12px; padding:10px 12px; border:1px solid rgba(255,255,255,.12);
    background:#0a1324; color:var(--light-text); outline:none; min-height:44px; font-family:inherit; transition:.2s;
  }
  .wa-compose textarea:focus{ border-color: var(--wa); box-shadow: 0 0 0 2px rgba(37,211,102,.15); }
  .wa-send{ background: var(--wa); color:#0b1220; border:0; border-radius:12px; padding:0 16px; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:.2s; }
  .wa-send:hover{ background: var(--wa-dark); transform: scale(1.05); }

  /* Scrollbar */
  .wa-body::-webkit-scrollbar{ width:6px; } .wa-body::-webkit-scrollbar-track{ background: rgba(255,255,255,.05); border-radius:3px; }
  .wa-body::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.2); border-radius:3px; } .wa-body::-webkit-scrollbar-thumb:hover{ background: rgba(255,255,255,.3); }

  /* Responsive */
  @media (max-width: 480px){
    .wa-float{ right:12px; bottom:12px; }
    .wa-card{ width: calc(100vw - 24px); right:0; }
  }

:root {
      --violet-700: #6a27b8;
      --violet-600: #7d35cc;
      --violet-500: #8b44d8;
      --violet-400: #9d62e0;
      --violet-300: #b48aeb;
      --violet-100: #f0e7ff;
      --dark: #141219;
      --soft: #f6f4fb;
      --text: #1c1a22;
      --muted: #6b6b76;
      --radius: 20px;
      --radius-sm: 12px;
      --shadow: 0 10px 30px rgba(20, 18, 25, .08);
      --shadow-lg: 0 20px 50px rgba(20, 18, 25, .12);
      --gradient: linear-gradient(135deg, var(--violet-700), var(--violet-400));
      --gradient-soft: linear-gradient(135deg, var(--violet-100), #fff);
    }

    * {
      box-sizing: border-box;
    }

    body {
      font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
      color: var(--text);
      background: #fff;
      line-height: 1.6;
      scroll-behavior: smooth;
    }

    /* Navbar */
    .navbar {
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(10px);
      box-shadow: 0 2px 20px rgba(0, 0, 0, 0.05);
      transition: all 0.3s ease;
      padding: 0.8rem 0;
    }

    .navbar.scrolled {
      padding: 0.5rem 0;
      box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    }

    .navbar-brand {
      font-weight: 800;
      font-size: 1.4rem;
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    .navbar .nav-link {
      font-weight: 600;
      position: relative;
      padding: 0.5rem 1rem !important;
      transition: color 0.3s ease;
    }

    .navbar .nav-link:after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 0;
      height: 2px;
      background: var(--violet-600);
      transition: width 0.3s ease;
    }

    .navbar .nav-link:hover:after,
    .navbar .nav-link.active:after {
      width: 70%;
    }

    .navbar .btn-primary {
      background: var(--violet-700);
      border-color: var(--violet-700);
      border-radius: var(--radius-sm);
      font-weight: 600;
      padding: 0.5rem 1.2rem;
      transition: all 0.3s ease;
      box-shadow: 0 4px 12px rgba(106, 39, 184, 0.3);
    }

    .navbar .btn-primary:hover {
      background: var(--violet-600);
      border-color: var(--violet-600);
      transform: translateY(-2px);
      box-shadow: 0 6px 15px rgba(106, 39, 184, 0.4);
    }

    /* Hero */
    .hero {
      background: var(--gradient);
      color: #fff;
      padding: clamp(80px, 10vw, 140px) 0;
      position: relative;
      overflow: hidden;
    }

    .hero:before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23ffffff' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E");
      opacity: 0.3;
    }

    .hero h1 {
      font-weight: 800;
      letter-spacing: -0.02em;
      line-height: 1.1;
      margin-bottom: 1.5rem;
    }

    .hero p.lead {
      opacity: 0.95;
      font-size: 1.2rem;
      margin-bottom: 2rem;
    }

    .hero .card {
      border: 0;
      border-radius: var(--radius);
      box-shadow: var(--shadow-lg);
      overflow: hidden;
      transform: translateY(0);
      transition: transform 0.3s ease;
    }

    .hero .card:hover {
      transform: translateY(-5px);
    }

    /* Secciones */
    .section {
      padding: clamp(80px, 10vw, 120px) 0;
    }

    .section-bg {
      background: var(--soft);
      position: relative;
    }

    .section-title {
      font-weight: 800;
      margin-bottom: 0.5rem;
      position: relative;
      display: inline-block;
    }

    .section-title:after {
      content: '';
      position: absolute;
      bottom: -8px;
      left: 0;
      width: 60px;
      height: 4px;
      background: var(--violet-600);
      border-radius: 2px;
    }

    .section-subtitle {
      color: black;
      font-size: 1.1rem;
      margin-bottom: 2rem;
    }

    /* Cards limpias */
    .clean-card {
      background: #fff;
      border: 1px solid rgba(20, 18, 25, .06);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      transition: all 0.3s ease;
      overflow: hidden;
    }

    .clean-card:hover {
      transform: translateY(-5px);
      box-shadow: var(--shadow-lg);
    }

    /* Ticker / Carousel de trabajos */
    .carousel-frame {
      background: #fff;
      border: 1px solid rgba(20, 18, 25, .06);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      overflow: hidden;
    }

    .carousel-item {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 440px;
      background: #fff;
    }

    /* El "marco" 500x500 aprox., imagen visible según su contenido */
    .work-box {
      width: min(92vw, 520px);
      height: min(92vw, 520px);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .work-box img {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
      display: block;
    }

    /* Controles del carousel un poco más visibles */
    .carousel-control-prev,
    .carousel-control-next {
      width: 12%;
      opacity: 0.9;
    }

    .carousel-control-prev-icon,
    .carousel-control-next-icon {
      filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .35));
    }

    .carousel-indicators [data-bs-target] {
      background-color: var(--violet-600);
      width: 10px;
      height: 10px;
      border-radius: 50%;
    }

    /* Listas con iconitos */
    .icon-li {
      list-style: none;
      padding-left: 0;
      margin: 0;
    }

    .icon-li li {
      display: flex;
      gap: .6rem;
      align-items: flex-start;
      margin: .5rem 0;
    }

    .icon-li i {
      color: var(--violet-600);
      margin-top: .2rem;
    }

    /* Contacto */
    .contact-card .form-control,
    .contact-card .form-select {
      border-radius: var(--radius-sm);
      border: 1px solid rgba(20, 18, 25, .12);
      padding: 0.75rem 1rem;
      transition: all 0.3s ease;
    }

    .contact-card .form-control:focus,
    .contact-card .form-select:focus {
      border-color: var(--violet-500);
      box-shadow: 0 0 0 3px rgba(106, 39, 184, 0.1);
    }

    .btn-primary {
      background: var(--violet-700);
      border-color: var(--violet-700);
      border-radius: var(--radius-sm);
      font-weight: 600;
      padding: 0.75rem 1.5rem;
      transition: all 0.3s ease;
      box-shadow: 0 4px 12px rgba(106, 39, 184, 0.3);
    }

    .btn-primary:hover {
      background: var(--violet-600);
      border-color: var(--violet-600);
  
/* ...cortado... */

/* ===== Navbar mobile: evitar marca estirada y wrap raro ===== */
@media (max-width: 576px){
  .navbar { padding-top: 6px; padding-bottom: 6px; }
  .navbar .container, .navbar .container-fluid {
    display: flex; align-items: center; justify-content: space-between;
  }
  .navbar-brand {
    max-width: 70%;
    flex: 1 1 auto;
    display: flex; align-items: center; gap: 8px;
    overflow: hidden;
  }
  .navbar-brand img {
    height: 44px; /* controla la altura del logo */
    width: auto;  /* no se estira a lo ancho */
    max-width: 100%;
    object-fit: contain;
  }
  .navbar-toggler {
    margin-left: 12px;
    flex: 0 0 auto;
  }
}

/* ===== FIX: WA card independiente del stack ===== */
  /* Saca a la tarjeta del flujo del contenedor y evita que herede ancho chico */
  .wa-card{
    position: fixed !important;   /* antes estaba absolute dentro del stack */
    right: 18px !important;
    bottom: 98px !important;       /* queda arriba del botón de WA */
    width: clamp(320px, 92vw, 380px) !important;
    max-width: none !important;
    min-width: 320px !important;
    z-index: 99999 !important;
    transform: translateY(10px);   /* mantiene la animación que ya tenías */
    opacity: 0;
  }
  .wa-card[aria-modal="true"]{
    transform: translateY(0);
    opacity: 1;
  }

  /* El stack de botones queda igual */
  .fab-stack{ right: 18px !important; bottom: 18px !important; }

  /* Mobile: ajustá offsets si tu botón es 56px */
  @media (max-width: 480px){
    .wa-card{ right: 12px !important; bottom: 80px !important; width: calc(100vw - 24px) !important; min-width: 0 !important; }
  }

/* Marco para la imagen (similar a tu referencia) */
      #quienes .quienes-media{
        border-radius: var(--radius, 16px);
        box-shadow: var(--shadow, 0 10px 30px rgba(20,18,25,.08));
        background:#fff;
      }
      #quienes .quienes-media img{
        width:100%; height:auto; display:block; object-fit:cover;
        /* Si tu imagen es muy alta, podés fijar un alto y recortar suave: */
        /* max-height:520px; */
      }
  
      /* Íconos y cards */
      #quienes .feature-box i{
        font-size: 2rem;
        color: var(--violet-600, #7d35cc);
      }
      #quienes .feature-box{
        border:1px solid rgba(20,18,25,.06);
        border-radius: var(--radius, 16px);
      }

/* Scope solo a esta sección */
        #trabajos .slider-wrap{
          position: relative;
          background:#fff; border:1px solid rgba(0,0,0,.08);
          border-radius:14px; box-shadow:0 6px 24px rgba(0,0,0,.06);
          overflow:hidden;
        }
  
        /* Carril horizontal con snap por página */
        #trabajos .slider{
          display:flex; gap:0;
          overflow-x:auto; overflow-y:hidden;
          scroll-snap-type:x mandatory;
          scroll-behavior:smooth;
          -webkit-overflow-scrolling: touch;
        }
        #trabajos .slider::-webkit-scrollbar{ height:10px; }
        #trabajos .slider::-webkit-scrollbar-thumb{
          background:rgba(0,0,0,.15); border-radius:20px;
        }
  
        /* Una "página" ocupa 100% del ancho del carril */
        #trabajos .page{
          flex:0 0 100%;
          scroll-snap-align:start;
          padding:16px;
        }
        #trabajos .grid{
          display:grid; gap:16px;
        }
        /* Columnas según breakpoint: se setean por JS con itemsPerPage,
           pero dejamos un fallback visual por si se deshabilita JS */
        @media (min-width: 992px){ #trabajos .grid{ grid-template-columns: repeat(3, 1fr); } }
        @media (min-width: 576px) and (max-width: 991.98px){ #trabajos .grid{ grid-template-columns: repeat(2, 1fr); } }
        @media (max-width: 575.98px){ #trabajos .grid{ grid-template-columns: 1fr; } }
  
        /* Caja y tamaño de las imágenes (sin recorte) */
        #trabajos .work-box{
          border:1px solid rgba(0,0,0,.06); border-radius:12px;
          background:#fff; height:300px; overflow:hidden;
          display:flex; align-items:center; justify-content:center;
          cursor: pointer;
        }
        @media (min-width:1400px){ #trabajos .work-box{ height:340px; } }
        @media (max-width:576px){  #trabajos .work-box{ height:280px; } }
  
        #trabajos .work-box img{
          width:100%; height:100%; object-fit:contain; display:block;
          transition: transform .2s ease;
        }
        #trabajos .work-box:hover img{ transform: scale(1.02); }
  
        /* Flechas de navegación */
        #trabajos .nav-btn{
          position:absolute; top:50%; transform:translateY(-50%);
          background:#fff; border:1px solid rgba(0,0,0,.15);
          width:48px; height:48px; border-radius:999px;
          display:flex; align-items:center; justify-content:center;
          box-shadow:0 4px 16px rgba(0,0,0,.12);
          z-index:3; cursor:pointer;
        }
        #trabajos .nav-btn:hover{ background:#f8f8f8; }
        #trabajos .prev{ left:12px; }
        #trabajos .next{ right:12px; }
        #trabajos .nav-btn[disabled]{ opacity:.35; pointer-events:none; }
  
        /* Indicadores */
        #trabajos .indicators{
          display:flex; gap:8px; justify-content:center; padding:10px 0 16px;
        }
        #trabajos .dot{
          width:9px; height:9px; border-radius:999px; background:#bbb;
        }
        #trabajos .dot.active{ background:#000; }
        
        /* Modal */
        #trabajos .modal-content{ background:#000; border:none; border-radius:12px; }
        #trabajos .modal-header{ border:0; }
        #trabajos .btn-close{ filter: invert(1); }
        #trabajos .modal-img{ max-width:100%; max-height:80vh; object-fit:contain; }
        #trabajos .modal-nav{
          position:absolute; top:50%; transform:translateY(-50%);
          background:rgba(255,255,255,.9); border:none; border-radius:999px;
          width:44px; height:44px; display:flex; align-items:center; justify-content:center;
          cursor: pointer;
        }
        #trabajos .modal-prev{ left:12px; } 
        #trabajos .modal-next{ right:12px; }

/* Ajustes locales de la sección */
      #contacto .contact-card .form-control{
        background:#fff;
      }
      /* Mapa sin fondo rosa + alturas responsivas */
      #contacto .map-container{
        width:100%;
        height:380px;
        border-radius:14px;
        overflow:hidden;
        background:#f3f5f9; /* neutro, no rosa */
        border:1px solid rgba(0,0,0,.06);
      }
      @media (max-width: 991.98px){
        #contacto .map-container{ height:320px; }
      }
      @media (max-width: 575.98px){
        #contacto .map-container{ height:280px; }
      }
      #contacto .map-container iframe{
        width:100%; height:100%; border:0; display:block;
      }

/* Scope al footer */
    #site-footer{
      --bg:#0f0e14;            /* fondo oscuro */
      --fg:#dfe0e6;            /* texto */
      --muted:#9aa0ae;         /* texto secundario */
      --violet:#6e38d6;        /* acento */
      --violet-2:#8e6df0;
      background: radial-gradient(1200px 600px at 80% -200px, rgba(110,56,214,.18), transparent 60%) , var(--bg);
      color:var(--fg);
      border-top:1px solid rgba(255,255,255,.06);
    }
    #site-footer .ft-brand img{ height:46px; }
    #site-footer .ft-title{
      font-weight:700; letter-spacing:.3px;
    }
    #site-footer a{ color:var(--fg); text-decoration:none; }
    #site-footer a:hover{ color:var(--violet-2); }
    #site-footer .ft-muted{ color:var(--muted); }

    /* Links */
    #site-footer .list-unstyled li + li{ margin-top:.35rem; }

    /* Botón CTA */
    #site-footer .btn-cta{
      background: linear-gradient(135deg, var(--violet), var(--violet-2));
      color:#fff; border:0; padding:.7rem 1rem; border-radius:12px; font-weight:600;
      box-shadow: 0 10px 30px rgba(110,56,214,.25);
    }
    #site-footer .btn-cta:hover{ transform: translateY(-1px); }

    /* Franja legal */
    #site-footer .legal{
      border-top:1px solid rgba(255,255,255,.08);
      color:var(--muted);
    }

/* Asegurar que la card flotante no provoque overflow horizontal */
.fab-stack, .wa-card { max-width: 100%; }

:root{
      --wa: #25D366; --wa-dark:#128C7E;
      --dark-bg:#0b0f18; --darker-bg:#0a1324;
      --light:#fff; --muted: rgba(255,255,255,.7);
    }
    /* Contenedor de la pila (3 flotantes) */
    .fab-stack{
      position: fixed; right: 18px; bottom: 18px; z-index: 9999;
      display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
      font-family: inherit;
    }
    /* Botón base */
    .fab{
      width:60px; height:60px; border-radius:50%; border:0; cursor:pointer;
      display:grid; place-items:center; box-shadow:0 10px 30px rgba(0,0,0,.25);
      transition: transform .25s ease, box-shadow .25s ease, opacity .2s;
      background:#111; color:#fff; text-decoration:none;
    }
    .fab:hover{ transform: translateY(-3px) scale(1.05); box-shadow:0 14px 36px rgba(0,0,0,.35); }
  
    /* Colores de marca */
    .fab-ig{ background: linear-gradient(135deg, #f58529, #dd2a7b 40%, #8134af 70%, #515bd4); }
    .fab-fb{ background: #1877F2; }
    .fab-wa{ background: linear-gradient(135deg, var(--wa), var(--wa-dark)); }
  
    /* Card de WhatsApp posicionada sobre el botón de WA dentro del stack */
    .wa-card{
      position:absolute; right:0;
      bottom: calc(60px + 10px); /* por encima del botón de WA */
      width: min(360px, 92vw);
      background: var(--dark-bg); color: var(--light);
      border-radius: 18px; overflow: hidden;
      box-shadow: 0 18px 60px rgba(0,0,0,.5); border:1px solid rgba(255,255,255,.08);
      transform: translateY(10px); opacity:0; transition:.28s ease;
    }
    .wa-card[aria-modal="true"]{ transform: translateY(0); opacity:1; }
    .wa-head{
      display:flex; align-items:center; gap:12px; padding:14px;
      background: linear-gradient(180deg, #0d162c, var(--darker-bg));
      border-bottom:1px solid rgba(255,255,255,.06);
    }
    .wa-avatar{ width:40px; height:40px; border-radius:8px; background:#0e1a33;
      display:grid; place-items:center; border:1px solid rgba(255,255,255,.08); overflow:hidden; }
    .wa-title{ font-weight:700; font-size:1.05rem; }
    .wa-status{ font-size:.85rem; color:var(--muted); display:flex; align-items:center; gap:6px; }
    .wa-status::before{ content:""; width:8px; height:8px; border-radius:50%; background: var(--wa); }
    .wa-close{ margin-left:auto; background:transparent; color:#fff; border:0; font-size:24px; cursor:pointer; opacity:.7;
      width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:.2s; }
    .wa-close:hover{ opacity:1; background: rgba(255,255,255,.1); }
  
    .wa-body{ padding:12px 14px; max-height:40vh; overflow:auto; background: var(--dark-bg);
      display:flex; flex-direction:column; gap:8px; }
    .wa-bubble{ max-width:88%; padding:10px 12px; border-radius:14px; line-height:1.35; box-shadow:0 4px 14px rgba(0,0,0,.25); animation:fadeIn .25s ease; }
    @keyframes fadeIn{ from{opacity:0; transform:translateY(5px)} to{opacity:1; transform:none} }
    .wa-bot{ background:#0c1428; border:1px solid rgba(255,255,255,.06); align-self:flex-start; border-bottom-left-radius:4px; }
    .wa-user{ background:#0d7b5c; align-self:flex-end; border-bottom-right-radius:4px; }
  
    .wa-compose{ display:grid; grid-template-columns:1fr auto; gap:8px; padding:10px; background: var(--dark-bg); border-top:1px solid rgba(255,255,255,.08); }
    .wa-compose textarea{
      resize:none; border-radius:12px; padding:10px 12px; border:1px solid rgba(255,255,255,.12);
      background:#0a1324; color:#fff; outline:none; min-height:44px; font-family:inherit; transition:.2s;
    }
    .wa-compose textarea:focus{ border-color: var(--wa); box-shadow: 0 0 0 2px rgba(37,211,102,.15); }
    .wa-send{ background: var(--wa); color:#0b1220; border:0; border-radius:12px; padding:0 16px; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:.2s; }
    .wa-send:hover{ background: var(--wa-dark); transform: scale(1.05); }
  
    /* Ajustes mobile */
    @media (max-width: 480px){
      .fab-stack{ right:12px; bottom:12px; gap:8px; }
      .fab{ width:56px; height:56px; }
      .wa-card{ width: calc(100vw - 24px); bottom: calc(56px + 8px); }
    }

:root {
      /* Paleta de colores moderna y profesional */
      --primary: #2563eb;
      --primary-dark: #1d4ed8;
      --primary-light: #3b82f6;
      --secondary: #0ea5e9;
      --accent: #f59e0b;
      --text-900: #0f172a;
      --text-700: #334155;
      --text-500: #64748b;
      --text-300: #cbd5e1;
      --surface: #ffffff;
      --muted: #f8fafc;
      --muted-dark: #f1f5f9;
      --border: #e2e8f0;
      --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
      --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
      --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
      --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
      --radius: 12px;
      --radius-lg: 16px;
      --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    html, body {
      overflow-x: hidden;
      scroll-behavior: smooth;
    }

    body {
      font-family: "Outfit", "Inter", system-ui, -apple-system, sans-serif;
      color: var(--text-900);
      background: #fff;
      line-height: 1.6;
    }

    h1, h2, h3, h4, h5, h6 {
      font-family: "Inter", system-ui, -apple-system, sans-serif;
      font-weight: 700;
      line-height: 1.2;
    }

    a {
      color: var(--primary);
      text-decoration: none;
      transition: var(--transition);
    }

    a:hover {
      color: var(--primary-dark);
    }

    /* Navbar moderna */
    .navbar {
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid var(--border);
      padding: 1rem 0;
      transition: var(--transition);
    }

    .navbar.scrolled {
      box-shadow: var(--shadow);
      padding: 0.75rem 0;
    }

    .navbar .nav-link {
      font-weight: 500;
      position: relative;
      padding: 0.5rem 1rem !important;
      border-radius: 8px;
      transition: var(--transition);
    }

    .navbar .nav-link:not(.btn):hover {
      background: rgba(37, 99, 235, 0.05);
      color: var(--primary);
    }

    .navbar .nav-link.active {
      color: var(--primary);
      font-weight: 600;
    }

    .navbar .nav-link.active:after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 1rem;
      right: 1rem;
      height: 2px;
      background: var(--primary);
      border-radius: 2px;
    }

    .brand-logo {
      height: 39px;
      width: auto;
      transition: var(--transition);
    }

    /* Hero section espectacular */
    .hero {
      padding: 120px 0 80px;
      background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
      position: relative;
      overflow: hidden;
    }

    .hero:before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: 
        radial-gradient(circle at 20% 80%, rgba(37, 99, 235, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(14, 165, 233, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 40% 40%, rgba(245, 158, 11, 0.03) 0%, transparent 50%);
      z-index: 0;
    }

    .hero .container {
      position: relative;
      z-index: 1;
    }

    .hero h1{
  font-weight: 800;
  letter-spacing: -0.02em;
  color:#fff !important;                 /* ONLY the H1 is white */
  background:none !important;            /* no gradient clip */
  -webkit-text-fill-color:#fff !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  mix-blend-mode: normal !important;
  margin-bottom: 1.5rem;
}

    .hero .lead {
      color: var(--text-700);
      font-size: 1.25rem;
      margin-bottom: 2rem;
    }

    .hero .pill {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.75rem 1.25rem;
      border: 1px solid var(--border);
      background: rgba(255, 255, 255, 0.7);
      backdrop-filter: blur(10px);
      border-radius: 50px;
      font-size: 0.9rem;
      font-weight: 500;
      box-shadow: var(--shadow-sm);
      margin-bottom: 2rem;
      transition: var(--transition);
    }

    .hero .pill:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow);
    }

    /* Botones mejorados */
    .btn {
      border-radius: 10px;
      font-weight: 600;
      padding: 0.75rem 1.5rem;
      transition: var(--transition);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
    }

    .btn-primary {
      background: var(--primary);
      border-color: var(--primary);
      box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.3);
    }

    .btn-primary:hover {
      background: var(--primary-dark);
      border-color: var(--primary-dark);
      transform: translateY(-2px);
      box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.4);
    }

    .btn-outline-secondary {
      border: 2px solid var(--border);
      color: var(--text-700);
    }

    .btn-outline-secondary:hover {
      background: var(--muted);
      border-color: var(--text-300);
      transform: translateY(-2px);
      box-shadow: var(--shadow);
    }

    /* Secciones */
    .section {
      padding: 80px 0;
    }

    .section-title {
      font-weight: 800;
      letter-spacing: -0.02em;
      margin-bottom: 1rem;
      position: relative;
    }

    .section-title:after {
      content: '';
      display: block;
      width: 60px;
      height: 4px;
      background: linear-gradient(90deg, var(--primary), var(--secondary));
      border-radius: 2px;
      margin-top: 0.75rem;
    }

    .section-title.text-center:after {
      margin-left: auto;
      margin-right: auto;
    }

    /* Cards modernas */
    .card-clean {
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow);
      transition: var(--transition);
      overflow: hidden;
      background: var(--surface);
    }

    .card-clean:hover {
      transform: translateY(-5px);
      box-shadow: var(--shadow-xl);
    }

    .icon-pill {
      display: inline-grid;
      place-items: center;
      width: 60px;
      height: 60px;
      border-radius: 16px;
      background: linear-gradient(135deg, var(--primary), var(--secondary));
      color: white;
      font-size: 1.5rem;
      box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.3);
      transition: var(--transition);
    }

    .card-clean:hover .icon-pill {
      transform: scale(1.05) rotate(5deg);
    }

    /* Grid servicios */
    .svc-icon {
      font-size: 22px;
    }

    /* Ticker (carousel cuadrado 500) */
    .trabajos-wrap {
      max-width: 1100px;
      margin: 0 auto;
    }

    .square-500 {
      width: 100%;
      max-width: 500px;
      aspect-ratio: 1 / 1;
      border-radius: var(--radius-lg);
      border: 1px solid var(--border);
      background: #fff;
      box-shadow: var(--shadow-lg);
      margin-inline: auto;
      display: grid;
      place-items: center;
      overflow: hidden;
      transition: var(--transition);
    }

    .square-500:hover {
      transform: scale(1.02);
      box-shadow: var(--shadow-xl);
    }

    .square-500 img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: var(--transition);
    }

    .square-500:hover img {
      transform: scale(1.05);
    }

    .carousel-control-prev, .carousel-control-next {
      width: 50px;
      height: 50px;
      background: rgba(255, 255, 255, 0.9);
      border-radius: 50%;
      top: 50%;
      transform: translateY(-50%);
      opacity: 0.8;
      box-shadow: var(--shadow-lg);
      transition: var(--transition);
    }

    .carousel-control-prev {
      left: 20px;
    }

    .carousel-c
/* ...cortado... */

:root{
      /* Palette aligned with the logo */
      --primary: #1E88E5;            /* vivid blue */
      --primary-dark: #1565C0;
      --primary-light: #42A5F5;
      --secondary: #FF6A00;          /* orange */
      --accent: #FF8C00;             /* warm accent */
      --text-900: #0e141b;           /* near-black for readability */
      --text-700: #2b2f33;
      --text-500: #6b7280;
      --muted: #f7f9fb;
      --muted-dark: #eef2f6;
      --border: #e3e8ef;
    }
    /* Icon pills use brand gradient: blue -> orange */
    .icon-pill{
      background: linear-gradient(135deg, var(--primary), var(--secondary)) !important;
      width: 56px; height: 56px; border-radius: 14px;
    }
    /* Slightly smaller service icons inside the pill */
    .svc-icon{ font-size: 20px !important; }
    /* Buttons pick new brand */
    .btn-primary{ background: var(--primary) !important; border-color: var(--primary) !important; }
    .btn-primary:hover{ background: var(--primary-dark) !important; border-color: var(--primary-dark) !important; }
    .section-title:after{ background: linear-gradient(90deg, var(--primary), var(--secondary)) !important; }

    /* Footer accent to orange */
    #footer-servimax{ border-top: 3px solid var(--secondary) !important; }

    /* HERO tweak for better contrast with new palette */
    .hero{
      background: linear-gradient(135deg, #f5f7fa 0%, #e9eef5 100%) !important;
    }
    .hero h1{
      /* subtle gradient text using brand */
      background: linear-gradient(135deg, var(--text-900), var(--primary)) !important;
      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    }

    /* === Mobile compactness === */
    @media (max-width: 576px){
      /* Reduce general paddings on cards created with utility p-4 */
      .card-clean{ padding: 1rem !important; }
      /* Icon pill smaller for phone */
      .icon-pill{ width: 44px; height: 44px; border-radius: 12px; }
      .svc-icon{ font-size: 18px !important; }
      /* Headings & lead more compact */
      .hero h1{ font-size: 2.05rem !important; line-height: 1.15 !important; }
      .hero .lead{ font-size: 1.05rem !important; }
      /* Buttons slimmer */
      .btn{ padding: .6rem 1rem !important; border-radius: 9px !important; }
      /* Brand logo a poco más chico para que la navbar no "salte" */
      .brand-logo{ height: 32px !important; }
      /* Reduce gaps */
      .row.g-5{ --bs-gutter-x: 1.25rem; --bs-gutter-y: 1.25rem; }
      /* Carousel controls a tamaño de dedo pero menos invasivos */
      #trabajos .carousel-control-prev-icon,
      #trabajos .carousel-control-next-icon{ width: 36px; height: 36px; }
      /* Grid spacing in Servicios */
      #servicios .row.g-4{ --bs-gutter-x: 1rem; --bs-gutter-y: 1rem; }
      /* Smaller FAQ paddings */
      .accordion-button{ padding: .9rem 1rem !important; }
      .accordion-body{ padding: .9rem 1rem !important; }
    }

/* Make prev/next controls round, visible, and always on */
    #trabajos .carousel-control-prev,
    #trabajos .carousel-control-next{
      width: 64px;
      opacity: 1 !important;
    }
    #trabajos .carousel-control-prev-icon,
    #trabajos .carousel-control-next-icon{
      width: 56px; height: 56px;
      border-radius: 50%;
      background-color: rgba(17, 24, 39, .75); /* dark circle */
      box-shadow: 0 8px 18px rgba(2,6,23,.22);
      background-size: 42% 42%;
      background-position: center;
      background-repeat: no-repeat;
      border: 2px solid rgba(255,255,255,.75);
    }
    /* Replace default Bootstrap svg so they are always visible */
    #trabajos .carousel-control-prev-icon{
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='white' d='M10.854 1.646a.5.5 0 0 1 0 .708L5.207 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/></svg>");
    }
    #trabajos .carousel-control-next-icon{
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='white' d='M5.146 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 1 1-.708-.708L10.293 8 5.146 2.354a.5.5 0 0 1 0-.708z'/></svg>");
    }
    #trabajos .carousel-control-prev:hover .carousel-control-prev-icon,
    #trabajos .carousel-control-next:hover .carousel-control-next-icon{
      background-color: rgba(17, 24, 39, .9);
      transform: scale(1.03);
    }
    /* Brand ring with blue→orange gradient */
    #trabajos .carousel-control-prev-icon,
    #trabajos .carousel-control-next-icon{
      position: relative;
      overflow: hidden;
    }
    #trabajos .carousel-control-prev-icon::after,
    #trabajos .carousel-control-next-icon::after{
      content: "";
      position: absolute; inset: 0;
      border-radius: 50%;
      padding: 2px; /* ring width */
      background: linear-gradient(135deg, var(--primary), var(--secondary));
      -webkit-mask: 
        radial-gradient(farthest-side, #0000 calc(100% - 2px), #000 calc(100% - 1px)) content-box,
        radial-gradient(farthest-side, #000 100%, #0000 0) border-box;
              mask: 
        radial-gradient(farthest-side, #0000 calc(100% - 2px), #000 calc(100% - 1px)) content-box,
        radial-gradient(farthest-side, #000 100%, #0000 0) border-box;
      -webkit-mask-composite: xor; mask-composite: exclude;
    }

    /* Position a bit further from image edges */
    #trabajos .carousel-control-prev{ left: -10px; }
    #trabajos .carousel-control-next{ right: -10px; }

    /* Mobile size */
    @media (max-width: 576px){
      #trabajos .carousel-control-prev,
      #trabajos .carousel-control-next{ width: 56px; }
      #trabajos .carousel-control-prev-icon,
      #trabajos .carousel-control-next-icon{
        width: 46px; height: 46px;
        background-size: 44% 44%;
      }
      #trabajos .carousel-control-prev{ left: -6px; }
      #trabajos .carousel-control-next{ right: -6px; }
    }

/* Hide Bootstrap's default icon spans */
    #trabajos .carousel-control-prev .carousel-control-prev-icon,
    #trabajos .carousel-control-next .carousel-control-next-icon{
      display: none !important;
    }
    /* Use the control itself to render a round button with a glyph */
    #trabajos .carousel-control-prev,
    #trabajos .carousel-control-next{
      width: 72px; opacity: 1 !important;
    }
    #trabajos .carousel-control-prev::after,
    #trabajos .carousel-control-next::after{
      content: attr(data-arrow); /* we will set via CSS below as fallback */
      display: grid; place-items: center;
      width: 56px; height: 56px;
      border-radius: 50%;
      font-size: 28px; font-weight: 800; line-height: 1;
      color: #fff;
      background: linear-gradient(135deg, var(--primary), var(--secondary));
      box-shadow: 0 8px 18px rgba(2,6,23,.22);
      border: 2px solid rgba(255,255,255,.85);
    }
    /* Explicit characters (safer than attr) */
    #trabajos .carousel-control-prev::after{ content: "‹"; } /* single-left angle */
    #trabajos .carousel-control-next::after{ content: "›"; }
    /* Position and hover */
    #trabajos .carousel-control-prev{ left: -8px; }
    #trabajos .carousel-control-next{ right: -8px; }
    #trabajos .carousel-control-prev:hover::after,
    #trabajos .carousel-control-next:hover::after{ transform: scale(1.05); }

    @media (max-width: 576px){
      #trabajos .carousel-control-prev,
      #trabajos .carousel-control-next{ width: 60px; }
      #trabajos .carousel-control-prev::after,
      #trabajos .carousel-control-next::after{
        width: 46px; height: 46px; font-size: 24px;
      }
      #trabajos .carousel-control-prev{ left: -6px; }
      #trabajos .carousel-control-next{ right: -6px; }
    }

/* === Scoped hero text colors (safe) === */
.hero .lead,
.hero p,
.hero small,
.hero .small,
.hero a:not(.btn){ color: var(--text-700) !important; }
.hero .btn, .hero .btn *{ color:#fff !important; }

/* ====== SOLO BOTONES DEL CAROUSEL EN #trabajos ====== */
#trabajos .carousel-control-prev,
#trabajos .carousel-control-next{
  width:auto;                 /* no estiran el layout */
  padding:0 .6rem;
  opacity:1;                  /* bien visibles */
  z-index:10;                 /* por arriba de la imagen */
}

#trabajos .carousel-control-prev-icon,
#trabajos .carousel-control-next-icon{
  /* icono nativo de Bootstrap (no máscaras raras) */
  -webkit-mask:none !important; mask:none !important;
  background-color: rgba(0,0,0,.45);   /* círculo oscuro semi */
  border-radius: 50%;
  width:44px; height:44px;             /* botón redondo */
  background-repeat:no-repeat;
  background-position:center;
  background-size: 55% auto;           /* flecha un poco más chica */
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.35));
}

#trabajos .carousel-control-prev-icon{
  background-image: var(--bs-carousel-control-prev-icon-bg) !important;
}
#trabajos .carousel-control-next-icon{
  background-image: var(--bs-carousel-control-next-icon-bg) !important;
}

/* por si algún CSS global les baja la opacidad en hover */
#trabajos .carousel-control-prev:hover,
#trabajos .carousel-control-next:hover{
  opacity:1;
}

/* mobile: un poco más grandes para el dedo */
@media (max-width:576px){
  #trabajos .carousel-control-prev,
  #trabajos .carousel-control-next{ padding:0 .8rem }
  #trabajos .carousel-control-prev-icon,
  #trabajos .carousel-control-next-icon{ width:40px; height:40px }
}

/* ===== Footer Servi-Max (scope) ===== */
    #footer-servimax{
      background:#0f1720;               /* fondo oscuro elegante */
      color:#c9d4df;                     /* texto suave */
      margin:0;                          /* evita franjas blancas */
      border-top: 3px solid #e45841;     /* acento sutil */
    }
    #footer-servimax .brand{
      gap:14px;
    }
    #footer-servimax .brand img{ height:52px }
    #footer-servimax .brand .title{
      font-weight:700; color:#fff; letter-spacing:.2px
    }
    #footer-servimax .brand .subtitle{
      font-size:.925rem; color:#a6b4c3
    }

    /* enlaces del menú */
    #footer-servimax .footer-nav a{
      color:#c9d4df; text-decoration:none; margin-right:1rem
    }
    #footer-servimax .footer-nav a:last-child{ margin-right:0 }
    #footer-servimax .footer-nav a:hover{
      color:#fff; text-decoration:underline
    }

    /* separador */
    #footer-servimax hr{
      border-color:rgba(255,255,255,.12);
      opacity:1
    }

    /* bloque legal y contacto */
    #footer-servimax .legal{
      color:#a6b4c3
    }
    #footer-servimax .legal a{
      color:#e3ecf5; text-decoration:none
    }
    #footer-servimax .legal a:hover{ text-decoration:underline }

    /* iconos sociales */
    #footer-servimax .social a{
      display:inline-flex; align-items:center; justify-content:center;
      width:38px; height:38px; border-radius:50%;
      background:rgba(255,255,255,.06);
      color:#e9f0f6; margin-left:.35rem;
      transition:transform .15s ease, background .15s ease
    }
    #footer-servimax .social a:hover{
      background:#e45841; color:#fff; transform:translateY(-2px)
    }

    /* responsive */
    @media (max-width:768px){
      #footer-servimax .footer-nav{ margin-top:12px }
      #footer-servimax .footer-nav a{ display:inline-block; margin:0 .6rem .4rem 0 }
      #footer-servimax .brand img{ height:46px }
    }

/* Vars y estilos scoped para Facebook */
  .fb-float{
    --fb: #4267B2; --fb-dark: #365899; --fb-darker: #29487d;
    position: fixed; right: 18px; bottom: 90px; z-index: 9999; font-family: inherit;
  }
  .fb-float .fb-btn{
    background: linear-gradient(135deg, var(--fb), var(--fb-dark));
    color:#fff; border:0; width:60px; height:60px; border-radius:50%;
    display:grid; place-items:center; box-shadow:0 10px 30px rgba(0,0,0,.25);
    cursor:pointer; transition:transform .3s, box-shadow .3s, background .3s; 
    position:relative; overflow:hidden; text-decoration: none;
  }
  .fb-float .fb-btn::after{ 
    content:""; position:absolute; inset:0;
    background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.18), rgba(255,255,255,0) 70%);
    opacity:0; transition:opacity .3s;
  }
  .fb-float .fb-btn:hover{ 
    transform: translateY(-3px) scale(1.05); 
    box-shadow:0 14px 36px rgba(0,0,0,.35); 
  }
  .fb-float .fb-btn:hover::after{ 
    opacity:1; 
  }

  /* Responsive */
  @media (max-width: 480px){
    .fb-float{ right:12px; bottom:84px; }
  }

/* Vars y estilos scoped para evitar choques con el sitio */
  .wa-float{
    --wa: #25D366; --wa-dark: #128C7E; --wa-darker: #075E54;
    --dark-bg: #0b0f18; --darker-bg: #0a1324;
    --light-text: #ffffff; --muted-text: rgba(255,255,255,.7);
    position: fixed; right: 18px; bottom: 18px; z-index: 9999; font-family: inherit;
  }
  .wa-float .wa-btn{
    background: linear-gradient(135deg, var(--wa), var(--wa-dark));
    color:#fff; border:0; width:60px; height:60px; border-radius:50%;
    display:grid; place-items:center; box-shadow:0 10px 30px rgba(0,0,0,.25);
    cursor:pointer; transition:transform .3s, box-shadow .3s, background .3s; position:relative; overflow:hidden;
  }
  .wa-float .wa-btn::after{ content:""; position:absolute; inset:0;
    background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.18), rgba(255,255,255,0) 70%);
    opacity:0; transition:opacity .3s;
  }
  .wa-float .wa-btn:hover{ transform: translateY(-3px) scale(1.05); box-shadow:0 14px 36px rgba(0,0,0,.35); }
  .wa-float .wa-btn:hover::after{ opacity:1; }

  .wa-float .wa-card{
    position:absolute; right:0; bottom:74px; width:min(360px, 92vw);
    background: var(--dark-bg); color: var(--light-text); border-radius:18px; overflow:hidden;
    box-shadow: 0 18px 60px rgba(0,0,0,.5); border:1px solid rgba(255,255,255,.08);
    transform: translateY(10px); opacity:0; transition: transform .3s, opacity .3s;
  }
  .wa-float .wa-card[aria-modal="true"]{ transform: translateY(0); opacity:1; }
  .wa-float .wa-head{ display:flex; align-items:center; gap:12px; padding:14px;
    background: linear-gradient(180deg, #0d162c, var(--darker-bg)); border-bottom:1px solid rgba(255,255,255,.06);
  }
  .wa-float .wa-avatar{
    width:40px; height:40px; border-radius:8px; background:#0e1a33;
    display:grid; place-items:center; border:1px solid rgba(255,255,255,.08); overflow:hidden;
  }
  .wa-float .wa-title{ font-weight:700; font-size:1.05rem; }
  .wa-float .wa-status{ font-size:.85rem; color:var(--muted-text); display:flex; align-items:center; gap:6px; }
  .wa-float .wa-status::before{ content:""; width:8px; height:8px; border-radius:50%; background: var(--wa); }
  .wa-float .wa-close{ margin-left:auto; background:transparent; color:#fff; border:0; font-size:24px; cursor:pointer; opacity:.7;
    width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:.2s;
  }
  .wa-float .wa-close:hover{ opacity:1; background: rgba(255,255,255,.1); }

  .wa-float .wa-body{ padding:12px 14px; max-height:40vh; overflow:auto; background: var(--dark-bg);
    display:flex; flex-direction:column; gap:8px; }
  .wa-float .wa-bubble{ max-width:88%; padding:10px 12px; border-radius:14px; line-height:1.35; box-shadow:0 4px 14px rgba(0,0,0,.25); animation:fadeInWA .25s ease; }
  @keyframes fadeInWA{ from{opacity:0; transform:translateY(5px)} to{opacity:1; transform:none} }
  .wa-float .wa-bot{ background:#0c1428; border:1px solid rgba(255,255,255,.06); align-self:flex-start; border-bottom-left-radius:4px; }
  .wa-float .wa-user{ background: var(--wa-darker); align-self:flex-end; border-bottom-right-radius:4px; }

  .wa-float .wa-compose{ display:grid; grid-template-columns:1fr auto; gap:8px; padding:10px; background: var(--dark-bg); border-top:1px solid rgba(255,255,255,.08); }
  .wa-float .wa-compose textarea{
    resize:none; border-radius:12px; padding:10px 12px; border:1px solid rgba(255,255,255,.12);
    background:#0a1324; color:var(--light-text); outline:none; min-height:44px; font-family:inherit; transition:.2s;
  }
  .wa-float .wa-compose textarea:focus{ border-color: var(--wa); box-shadow: 0 0 0 2px rgba(37,211,102,.15); }
  .wa-float .wa-send{ background: var(--wa); color:#0b1220; border:0; border-radius:12px; padding:0 16px; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:.2s; }
  .wa-float .wa-send:hover{ background: var(--wa-dark); transform: scale(1.05); }

  /* Scrollbar */
  .wa-float .wa-body::-webkit-scrollbar{ width:6px; }
  .wa-float .wa-body::-webkit-scrollbar-track{ background: rgba(255,255,255,.05); border-radius:3px; }
  .wa-float .wa-body::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.2); border-radius:3px; }
  .wa-float .wa-body::-webkit-scrollbar-thumb:hover{ background: rgba(255,255,255,.3); }

  /* Responsive */
  @media (max-width: 480px){
    .wa-float{ right:12px; bottom:12px; }
    .wa-float .wa-card{ width: calc(100vw - 24px); right:0; }
  }

:root {
      /* Paleta refinada para joyería */
      --gold: #D4AF37;
      --gold-light: #E8D9A0;
      --gold-dark: #B8860B;
      --silver: #C0C0C0;
      --silver-light: #E8E8E8;
      --silver-dark: #A0A0A0;
      --dark: #1A1A1A;
      --dark-light: #2D2D2D;
      --text: #333333;
      --text-light: #666666;
      --bg: #FAFAFA;
      --bg-light: #FFFFFF;
      --accent: #8B4513; /* Marrón cálido para contraste */
    }

    /* Scroll: sin smooth global (evita choques con animaciones/JS) */
    html { scroll-behavior: auto; }

    body {
      font-family: 'Manrope', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      background: var(--bg);
      color: var(--text);
      overflow-x: hidden;
    }

    .serif-font { font-family: 'Playfair Display', serif; }

    /* ===== NAVBAR (optimizada sin blur) ===== */
    .navbar {
      background: rgba(255, 255, 255, 0.98);
      border-bottom: 1px solid rgba(0, 0, 0, 0.05);
      transition: background-color 0.25s ease, box-shadow 0.25s ease, padding 0.25s ease;
      padding: 1rem 0;
      will-change: background-color, box-shadow, padding;
    }
    .navbar.scrolled {
      background: rgba(255, 255, 255, 0.98);
      box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
      padding: 0.5rem 0;
    }
    .navbar-brand {
      font-weight: 600;
      font-size: 1.4rem;
      color: var(--dark);
    }
    /* Asegurar que el toggler sea visible */
    .navbar .navbar-toggler { border: none; box-shadow: none !important; }
    .navbar .navbar-toggler-icon {
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(26,26,26,0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    }

    .brand-badge {
      width: 50px;
      height: 50px;
      display: inline-grid;
      place-items: center;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
      box-shadow: 0 8px 20px rgba(212, 175, 55, 0.3);
      color: white;
      font-size: 1.2rem;
      transition: transform 0.2s ease;
      will-change: transform;
    }

    .navbar .nav-link {
      color: var(--text);
      font-weight: 500;
      position: relative;
      margin: 0 0.5rem;
      transition: color 0.2s ease;
    }
    .navbar .nav-link:hover, .navbar .nav-link.active { color: var(--gold); }
    .navbar .nav-link::after {
      content: '';
      position: absolute;
      bottom: -5px; left: 0; width: 0; height: 2px;
      background: var(--gold);
      transition: width 0.2s ease;
    }
    .navbar .nav-link:hover::after, .navbar .nav-link.active::after { width: 100%; }

    .btn-cta {
      background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
      color: white;
      font-weight: 600;
      border: none;
      border-radius: 30px;
      padding: 0.6rem 1.5rem;
      box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
      transition: transform 0.2s ease, box-shadow 0.2s ease;
      will-change: transform;
    }
    .btn-cta:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(212, 175, 55, 0.4); color: white; }

    .btn-outline-light {
      border: 1px solid var(--gold);
      color: var(--gold);
      border-radius: 30px;
      padding: 0.6rem 1.5rem;
      font-weight: 500;
      transition: background-color 0.2s ease, color 0.2s ease;
    }
    .btn-outline-light:hover { background: var(--gold); color: white; }

    /* ===== HERO ===== */
    .hero {
      position: relative;
      overflow: hidden;
      color: var(--dark);
      background: linear-gradient(135deg, #f9f9f9 0%, #ffffff 100%);
      padding: 150px 0 100px;
      min-height: 100vh;
      display: flex;
      align-items: center;
    }
    .hero::before {
      content: ''; position: absolute; top: 0; right: 0; width: 50%; height: 100%;
      background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none"><path d="M0,0 L100,0 L100,100 Z" fill="rgba(212,175,55,0.03)"/></svg>');
      background-size: cover;
    }
    .hero-h1 { font-weight: 700; font-size: 3.5rem; margin-bottom: 1.5rem; line-height: 1.2; }
    .hero-lead { color: var(--text-light); font-size: 1.2rem; margin-bottom: 2rem; line-height: 1.6; }
    .bubble {
      display: inline-flex; align-items: center; gap: 0.5rem;
      padding: 0.6rem 1.2rem; border-radius: 30px;
      background: rgba(212, 175, 55, 0.1);
      border: 1px solid rgba(212, 175, 55, 0.2);
      color: var(--gold-dark); font-size: 0.9rem; font-weight: 500; margin-bottom: 1.5rem;
    }
    .hero-image-container {
      position: relative; border-radius: 20px; overflow: hidden;
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
      transition: transform 0.35s ease, box-shadow 0.35s ease;
      will-change: transform;
    }
    .hero-image-container:hover { transform: translateY(-2px); box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15); }

    @media (max-width: 768px) {
      .hero-h1 { font-size: 2.5rem; }
      .hero-lead { font-size: 1rem; }
      .hero-image-container { margin-top: 2rem; transform: none !important; }
    }

    /* ===== SECTION BASE ===== */
    .section { padding: 100px 0; position: relative; }
    .section-title {
      font-weight: 700; margin-bottom: 1rem; color: var(--dark);
      position: relative; display: inline-block;
    }
    .section-title::after { content: ''; position: absolute; bottom: -10px; left: 0; width: 50px; height: 3px; background: var(--gold); }
    .section-sub { color: var(--text-light); margin-bottom: 2rem; font-size: 1.1rem; }

    /* ===== CARDS ===== */
    .card-soft {
      background: var(--bg-light); border: 1px solid rgba(0, 0, 0, 0.05);
      border-radius: 15px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
      transition: transform 0.2s ease, box-shadow 0.2s ease;
      overflow: hidden; position: relative; will-change: transform;
    }
    .card-soft::before {
      content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 5px;
      background: linear-gradient(90deg, var(--gold) 0%, var(--gold-dark) 100%);
      transform: scaleX(0); transform-origin: left; transition: transform 0.2s ease;
    }
    .card-soft:hover::before { transform: scaleX(1); }
    .card-soft:hover { transform: translateY(-6px); box-shadow: 0 12px 34px rgba(0, 0, 0, 0.09); }

    .icon-circle {
      width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center;
      background: linear-gradient(135deg, rgba(212, 175, 55, 0.1) 0%, rgba(184, 134, 11, 0.1) 100%);
      border: 1px solid rgba(212, 175, 55, 0.2); color: var(--gold);
      font-size: 1.5rem; margin-bottom: 1.5rem;
    }

    /* ===== TICKER ===== */
    .ticker-wrap { position: relative; padding: 20px 0; }
    .ticker-viewport {
      overflow: auto; scroll-snap-type: x mandatory; display: flex; gap: 20px;
      padding: 10px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    }
    .ticker-viewport::-webkit-scrollbar { display: none; }
    .ticker-slide {
      flex: 0 0 auto; width: min(400px, 85vw); aspect-ratio: 1/1; scroll-snap-align: center;
      position: relative; background: var(--bg-light); border-radius: 15px; overflow: hidden;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); transition: transform 0.2s ease, box-shadow 0.2s ease;
      will-change: transform;
    }
    .ticker-slide:hover { transform: scale(1.03); box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15); }
    .ticker-slide img { width: 100%; height: 100%; object-fit: cover; }

    .ticker-controls {
      position: absolute; inset: 0; display: flex; justify-content: space-between; align-items: center;
      pointer-events: none; padding: 0 10px;
    }

/* ...cortado... */

#trabajos .ticker-wrap{position:relative;}
    #trabajos .ticker-viewport{
      display:grid;
      grid-auto-flow: column;
      grid-auto-columns: minmax(280px, 1fr);
      gap: 20px;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      padding: 8px 8px 16px;
    }
    #trabajos .ticker-viewport::-webkit-scrollbar{display:none}
    #trabajos .ticker-slide{scroll-snap-align:start}
    #trabajos .img-box{
      border-radius:16px;
      background:#111;
      border:1px solid rgba(212,175,55,.15);
      box-shadow:0 10px 24px rgba(0,0,0,.08);
      aspect-ratio:1/1;
      display:grid; place-items:center;
    }
    #trabajos .img-box img{
      width:100%; height:100%; object-fit:contain; border-radius:14px;
    }
    /* Controles */
    #trabajos .ticker-controls{
      position:absolute; inset:auto 0 4px 0; display:flex; justify-content:space-between; pointer-events:none;
    }
    #trabajos .ticker-btn{
      pointer-events:auto; border:0; background:rgba(17,17,17,.55); color:#fff;
      width:42px; height:42px; border-radius:999px; display:grid; place-items:center;
      backdrop-filter:saturate(1.2) blur(2px);
    }
    /* Tamaños responsivos de columna */
    @media (min-width: 1400px){
      #trabajos .ticker-viewport{grid-auto-columns:minmax(380px, 1fr);}
    }
    @media (max-width: 991.98px){
      #trabajos .ticker-viewport{grid-auto-columns:minmax(320px, 1fr);}
    }
    @media (max-width: 575.98px){
      #trabajos .ticker-viewport{grid-auto-columns:100%;}
    }

/* ===== Overrides v3: 2 grandes en desktop, sin fondo negro ===== */
    #trabajos .ticker-viewport{ gap:24px; padding: 8px 8px 20px; }
    /* 2 por vista en desktop (columnas anchas) */
    @media (min-width: 992px){
      #trabajos .ticker-viewport{ grid-auto-columns: minmax(520px, 1fr); }
    }
    /* 1-1.5 cards en tablets */
    @media (max-width: 991.98px) and (min-width: 576px){
      #trabajos .ticker-viewport{ grid-auto-columns: minmax(380px, 1fr); }
    }
    /* 1 card en phone */
    @media (max-width: 575.98px){
      #trabajos .ticker-viewport{ grid-auto-columns: 100%; }
    }

    #trabajos .img-box{
      background: transparent;            /* sin contenedor negro */
      border: none;
      box-shadow: 0 10px 24px rgba(0,0,0,.06);
      aspect-ratio: 1/1;
    }
    #trabajos .img-box img{
      width:100%; height:100%;
      object-fit: cover;                  /* llena el cuadro sin barras */
      border-radius:16px;
    }

    /* Botones un poco más grandes para las imágenes grandes */
    #trabajos .ticker-btn{ width:48px; height:48px; }

/* ===== Ticker v4: infinito real (DOM recycle), BIG slides, sin fondo negro ===== */
    #trabajos .ticker-wrap{ position:relative; overflow:hidden; }
    #trabajos .ticker-viewport{
      display:flex; gap:24px; padding:10px 12px 20px;
      will-change: transform;
      transform: translateX(0);
    }
    #trabajos .ticker-slide{ flex:0 0 auto; width:640px; }
    @media (max-width: 1199.98px){ #trabajos .ticker-slide{ width:520px; } }
    @media (max-width: 991.98px){  #trabajos .ticker-slide{ width:420px; } }
    @media (max-width: 575.98px){  #trabajos .ticker-slide{ width:100%; } }

    #trabajos .img-box{
      aspect-ratio: 1/1;
      border-radius:18px;
      background: transparent;
      border: none;
      box-shadow: 0 10px 24px rgba(0,0,0,.08);
      display:grid; place-items:center;
    }
    #trabajos .img-box img{
      width:100%; height:100%; object-fit: contain; /* ver según contenido, sin recortes */
      border-radius:16px;
      background: transparent;
    }

    #trabajos .ticker-controls{ position:absolute; inset:auto 0 6px 0; display:flex; justify-content:space-between; pointer-events:none; }
    #trabajos .ticker-btn{ pointer-events:auto; border:0; background:rgba(17,17,17,.55); color:#fff; width:50px; height:50px; border-radius:999px; display:grid; place-items:center; }

/* ===== Ticker v5: infinito CSS (marquee), tiles GRANDES, sin fondo negro ===== */
    #trabajos .ticker-stage{ position:relative; overflow:hidden; }
    #trabajos .marquee{
      display:flex; gap:24px; padding:10px 12px 20px;
      width:max-content;
      animation: marquee-linear 40s linear infinite;
    }
    /* Pausa al hover */
    #trabajos .ticker-stage:hover .marquee{ animation-play-state: paused; }

    @keyframes marquee-linear {
      0%   { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }

    /* Cada slide */
    #trabajos .slide{ flex:0 0 auto; width:640px; }
    @media (max-width: 1199.98px){ #trabajos .slide{ width:520px; } }
    @media (max-width: 991.98px){  #trabajos .slide{ width:420px; } }
    @media (max-width: 575.98px){  #trabajos .slide{ width:100%; } }

    #trabajos .img-box{
      aspect-ratio: 1/1; border-radius:18px; background:transparent; border:none;
      box-shadow:0 10px 24px rgba(0,0,0,.08); display:grid; place-items:center;
    }
    #trabajos .img-box img{ width:100%; height:100%; object-fit:contain; border-radius:16px; background:transparent; }

    /* Controles: opcionales para saltar en bloques (no afectan el loop) */
    #trabajos .ticker-controls{ position:absolute; inset:auto 0 6px 0; display:flex; justify-content:space-between; pointer-events:none; }
    #trabajos .ticker-btn{ pointer-events:auto; border:0; background:rgba(17,17,17,.55); color:#fff; width:50px; height:50px; border-radius:999px; display:grid; place-items:center; }

/* ===== Mobile/overflow fixes ===== */
  html, body { max-width: 100%; overflow-x: hidden; }
  * { box-sizing: border-box; }
  img, video, svg { max-width: 100%; height: auto; }

  /* Avoid accidental 100vw overflow inside sections */
  .container, .container-fluid, .row { overflow-x: clip; }

  /* Navbar: ensure hamburger doesn't require horizontal scroll */
  .navbar .navbar-brand img { height: 32px; width: auto; }
  .navbar .navbar-brand { max-width: 75%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .navbar .navbar-collapse { width: 100%; flex-grow: 1; }
  @media (max-width: 991.98px) {
    .navbar { padding-left: 0.5rem; padding-right: 0.5rem; }
    .navbar .container, .navbar .container-fluid { padding-left: 0.5rem; padding-right: 0.5rem; }
    .navbar .navbar-collapse.show { max-height: 80vh; overflow-y: auto; }
  }

  /* Hero text sizing for small screens */
  @media (max-width: 575.98px) {
    .hero-h1 { font-size: 1.95rem !important; line-height: 1.15 !important; }
    .hero-lead { font-size: 0.98rem !important; }
  }

  /* Tickers & tracks should never push the layout */
  #trabajos .ticker-container,
  #trabajos .ticker-wrap,
  #trabajos .ticker-stage,
  #trabajos .ticker-viewport { overflow-x: hidden; }
  #trabajos .ticker-track { will-change: transform; }

  /* Tienda embed: avoid page-level horizontal scroll in normal (non-FS) mode */
  #tienda .store-frame-wrap { width: 100%; }
  #tienda .store-frame-viewport { width: 100%; }

:root{
    --font-body: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    --font-head: 'Outfit', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  }
  body{ font-family: var(--font-body) !important; font-feature-settings: "ss01" on, "cv01" on; }
  h1,h2,h3,h4,h5,h6,
  .display-1,.display-2,.display-3,.display-4,
  .navbar-brand .brand-text,
  .hero-h1{ font-family: var(--font-head) !important; letter-spacing: -0.015em; }
  /* Subtle weight tuning for luxury feel */
  h1,.hero-h1{ font-weight: 700; }
  h2,h3{ font-weight: 600; }
  .btn, .nav-link{ font-weight: 600; letter-spacing: .01em; }

/* ====== Ticker Espectacular ====== */
        #trabajos .ticker-container{
          position:relative;width:100%;overflow:hidden;margin:44px 0;padding:10px 0
        }
        #trabajos .ticker-track{
          display:flex;gap:28px;transition:transform .5s ease;will-change:transform
        }
        /* Cards un poco más grandes */
        #trabajos .ticker-item{
          flex:0 0 auto;width:360px;height:360px;border-radius:18px;background:#fff;
          border:1px solid rgba(0,0,0,.06);box-shadow:0 12px 28px rgba(0,0,0,.06);
          overflow:hidden;display:grid;place-items:center;cursor:pointer;
          transition:transform .25s ease, box-shadow .25s ease
        }
        #trabajos .ticker-item:hover{transform:translateY(-6px) scale(1.03);box-shadow:0 16px 36px rgba(0,0,0,.12)}
        #trabajos .ticker-item img{width:100%;height:100%;object-fit:contain;display:block}

        /* Controles del ticker */
        #trabajos .ticker-controls{
          display:flex;justify-content:center;gap:16px;margin-top:18px
        }
        #trabajos .ticker-btn{
          width:48px;height:48px;border-radius:50%;background:rgba(212,175,55,.10);
          border:1px solid rgba(212,175,55,.30);display:flex;align-items:center;justify-content:center;
          cursor:pointer;transition:all .25s ease
        }
        #trabajos .ticker-btn:hover{background:rgba(212,175,55,.18);transform:scale(1.06)}
        #trabajos .ticker-btn i{font-size:1.2rem;color:#333}

        /* Responsive */
        @media (max-width: 992px){
          #trabajos .ticker-item{width:320px;height:320px}
        }
        @media (max-width: 768px){
          #trabajos .ticker-item{width:280px;height:280px}
        }
        @media (max-width: 576px){
          #trabajos .ticker-item{width:240px;height:240px}
        }

        /* Modal Galería (único) */
        #galleryModal .modal-content{
          background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:12px;overflow:hidden
        }
        #galleryModal .modal-body{padding:0;position:relative;background:#fff}
        #galleryModal .btn-close{
          position:absolute;right:14px;top:14px;z-index:5;background-color:rgba(255,255,255,.9);
          border-radius:50%;padding:10px
        }
        #galleryModal .modal-nav{
          position:absolute;top:50%;transform:translateY(-50%);z-index:5;background:rgba(0,0,0,.52);
          border:0;width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;
          transition:all .25s ease
        }
        #galleryModal .modal-nav:hover{background:rgba(0,0,0,.72);transform:translateY(-50%) scale(1.06)}
        #galleryModal .modal-nav.prev{left:10px}
        #galleryModal .modal-nav.next{right:10px}
        #galleryModal .modal-nav i{font-size:1.5rem;color:#fff}
        #galleryModal .ratio{background:#fff}
        #galleryModal #galleryImage{width:100%;height:100%;object-fit:contain}

:root{
        --accent:#d4af37;
        --accent-20: rgba(212,175,55,.20);
        --card:#ffffff;
        --ink:#222;
        --line:rgba(0,0,0,.08);
        --shadow:0 10px 24px rgba(0,0,0,.06);
        --safe-t: env(safe-area-inset-top, 0px);
        --safe-b: env(safe-area-inset-bottom, 0px);
      }
      #tienda .store-frame-wrap{
        border:1px solid var(--line);
        border-radius:18px;
        background:var(--card);
        box-shadow:var(--shadow);
        overflow:hidden;
        position:relative;
        isolation:isolate;
      }
      #tienda .store-toolbar{
        display:flex;gap:.75rem;align-items:center;justify-content:space-between;
        padding:12px;border-bottom:1px solid var(--line);background:#fff;
        position:sticky;top:0;z-index:3;
      }
      #tienda .btn-store{
        display:inline-flex;align-items:center;gap:.5rem;
        padding:.52rem .95rem;border-radius:12px;border:1px solid var(--line);
        background:#fff; color:var(--ink); font-size:.95rem; cursor:pointer; text-decoration:none;
        transition:transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
        touch-action: manipulation;
      }
      #tienda .btn-store.primary{ background:var(--accent); border-color:var(--accent); color:#111 }
      #tienda .btn-store:hover{ transform:translateY(-1px); box-shadow:0 6px 18px rgba(0,0,0,.08) }
      #tienda .btn-store:active{ transform:none }

      #tienda .store-frame-viewport{
        position:relative; width:100%;
        height:1200px; /* desktop base */
        background:#fff;
      }
      #tienda iframe#storeIframe{
        position:absolute; inset:0; width:100%; height:100%; border:0; display:block; background:#fff;
        touch-action: pan-x pan-y;
      }
      #tienda .store-loader{
        position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
        background:linear-gradient(180deg,#fff,rgba(255,255,255,.94));
        z-index:2;
      }
      #tienda .spinner{
        width:22px;height:22px;border-radius:50%;
        border:3px solid var(--accent-20); border-top-color:var(--accent);
        animation:spin 1s linear infinite; display:inline-block;
      }
      @keyframes spin{ to{ transform:rotate(360deg) } }
      #tienda .store-fallback{
        position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; padding:24px;
        background:repeating-linear-gradient(45deg, #fafafa, #fafafa 10px, #f6f6f6 10px, #f6f6f6 20px);
        border-top:1px dashed var(--line);
        z-index:1;
      }

      /* ========= FULLSCREEN REAL (portaleado al <body>) ========= */
      .tienda-portal-backdrop{
        position:fixed; inset:0; z-index:9998; background:#fff;
      }
      .tienda-portal-wrap{
        position:fixed; inset:0; z-index:9999; background:#fff; border:0; border-radius:0; box-shadow:none;
        margin:0; padding:0;
        display:flex; flex-direction:column;
      }
      .tienda-portal-wrap .store-toolbar{
        position:relative; top:0; left:0; right:0; border-bottom:1px solid var(--line);
        padding:12px 14px; padding-top: calc(12px + var(--safe-t)); background:#fff; z-index:2;
      }
      .tienda-portal-wrap .store-frame-viewport{
        position:relative; flex:1 1 auto; width:100%;
        /* 100dvh cubre viewport dinámico en navegadores modernos */
        min-height: calc(100dvh - 56px - var(--safe-t) - var(--safe-b));
        height: auto;
        background:#fff;
      }
      .tienda-portal-wrap iframe#storeIframe{
        position:absolute; inset:0; width:100%; height:100%;
      }

      /* MÓVIL: botones apilados */
      @media (max-width: 576px){
        #tienda .store-toolbar{ flex-direction: column; align-items: stretch; gap: .75rem; }
        #tienda .left-tools, #tienda .right-tools{ display: grid; grid-template-columns: 1fr; gap: .6rem; }
        #tienda .btn-store{ width:100%; justify-content:center; padding:.9rem 1rem; border-radius:16px; font-size:1rem; }
      }

:root{
    /* WhatsApp */
    --wa: #25D366; --wa-dark: #128C7E;
    /* Redes Sociales */
    --ig: #E4405F; --ig-dark: #C13584;
    --fb: #1877F2; --fb-dark: #166FE5;
    /* Paleta del sitio */
    --brand: #207a58; --accent: #e0b600;
    /* Tarjeta clara */
    --wa-card-bg: #ffffff; --wa-card-text:#0f172a; --wa-muted:#64748b; --wa-stroke:#e7e9ee;
  }

  /* WhatsApp Styles */
  .wa-float{ position: fixed; right: 18px; bottom: 18px; z-index: 1050; font-family: inherit; }
  .wa-btn{
    background: linear-gradient(135deg, var(--wa), var(--wa-dark));
    color:#fff; border:0; width:60px; height:60px; border-radius:50%;
    display:grid; place-items:center; box-shadow:0 10px 30px rgba(2,6,23,.18);
    cursor:pointer; transition:transform .3s, box-shadow .3s, background .3s; position:relative; overflow:hidden;
  }
  .wa-btn::after{ content:""; position:absolute; inset:0;
    background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.18), rgba(255,255,255,0) 70%);
    opacity:0; transition:opacity .3s;
  }
  .wa-btn:hover{ transform: translateY(-3px) scale(1.05); box-shadow:0 14px 36px rgba(2,6,23,.28); }
  .wa-btn:hover::after{ opacity:1; }

  .wa-card{
    position:absolute; right:0; bottom:74px; width:min(360px, 92vw);
    background: var(--wa-card-bg); color: var(--wa-card-text); border-radius:18px; overflow:hidden;
    box-shadow: 0 18px 60px rgba(15,23,42,.22); border:1px solid var(--wa-stroke);
    transform: translateY(10px); opacity:0; transition: transform .28s ease, opacity .28s ease;
  }
  .wa-card[aria-modal="true"]{ transform: translateY(0); opacity:1; }
  .wa-head{ display:flex; align-items:center; gap:12px; padding:14px; background: linear-gradient(180deg, #ffffff, #f7f9fb); border-bottom:1px solid var(--wa-stroke); }
  .wa-avatar{ width:40px; height:40px; border-radius:8px; background:#fff; display:grid; place-items:center; border:1px solid var(--wa-stroke); overflow:hidden; }
  .wa-title{ font-weight:700; font-size:1.05rem; }
  .wa-status{ font-size:.85rem; color:var(--wa-muted); display:flex; align-items:center; gap:6px; }
  .wa-status::before{ content:""; width:8px; height:8px; border-radius:50%; background: var(--wa); }
  .wa-close{ margin-left:auto; background:transparent; color:#111; border:0; font-size:22px; cursor:pointer; opacity:.6; width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:.2s; }
  .wa-close:hover{ opacity:1; background:#f1f5f9; }

  .wa-body{ padding:12px 14px; max-height:40vh; overflow:auto; background:#fff; display:flex; flex-direction:column; gap:8px; }
  .wa-bubble{ max-width:88%; padding:10px 12px; border-radius:14px; line-height:1.35; box-shadow:0 2px 8px rgba(2,6,23,.08); animation:fadeIn .25s ease; }
  @keyframes fadeIn{ from{opacity:0; transform:translateY(5px)} to{opacity:1; transform:none} }
  .wa-bot{ background:#f7fafc; border:1px solid var(--wa-stroke); align-self:flex-start; border-bottom-left-radius:4px; }
  .wa-user{ background: #eafff3; border:1px solid #c9f6de; align-self:flex-end; border-bottom-right-radius:4px; }

  .wa-compose{ display:grid; grid-template-columns:1fr auto; gap:8px; padding:10px; background:#fff; border-top:1px solid var(--wa-stroke); }
  .wa-compose textarea{ resize:none; border-radius:12px; padding:10px 12px; border:1px solid var(--wa-stroke); background:#fff; color:#0f172a; outline:none; min-height:44px; font-family:inherit; transition:.2s; }
  .wa-compose textarea:focus{ border-color: var(--brand); box-shadow: 0 0 0 2px rgba(32,122,88,.12); }
  .wa-send{ background: var(--wa); color:#0b1220; border:0; border-radius:12px; padding:0 16px; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:.2s; }
  .wa-send:hover{ background: var(--wa-dark); transform: translateY(-1px); }

  /* Social Floats Styles */
  .social-float{ position: fixed; right: 18px; z-index: 1040; font-family: inherit; }
  .instagram-float{ bottom: 90px; }
  .facebook-float{ bottom: 150px; }

  .social-btn{
    color:#fff; border:0; width:50px; height:50px; border-radius:50%;
    display:grid; place-items:center; box-shadow:0 8px 25px rgba(2,6,23,.15);
    cursor:pointer; transition:transform .3s, box-shadow .3s, background .3s; position:relative; overflow:hidden;
    text-decoration: none;
  }
  .social-btn::after{
    content:""; position:absolute; inset:0;
    background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.18), rgba(255,255,255,0) 70%);
    opacity:0; transition:opacity .3s;
  }
  .social-btn:hover{ transform: translateY(-3px) scale(1.05); box-shadow:0 12px 30px rgba(2,6,23,.25); }
  .social-btn:hover::after{ opacity:1; }

  .instagram-btn{ background: linear-gradient(135deg, var(--ig), var(--ig-dark)); }
  .facebook-btn{ background: linear-gradient(135deg, var(--fb), var(--fb-dark)); }

  /* Scrollbar */
  .wa-body::-webkit-scrollbar{ width:6px; } .wa-body::-webkit-scrollbar-track{ background:#f1f5f9; border-radius:3px; }
  .wa-body::-webkit-scrollbar-thumb{ background:#cbd5e1; border-radius:3px; } .wa-body::-webkit-scrollbar-thumb:hover{ background:#94a3b8; }

  /* Responsive */
  @media (max-width: 480px){
    .wa-float, .social-float{ right:12px; bottom:12px; }
    .instagram-float{ bottom: 74px; }
    .facebook-float{ bottom: 128px; }
    .wa-card{ width: calc(100vw - 24px); right:0; }
    .social-btn{ width:48px; height:48px; }
  }

:root {
      --primary: #0d6efd;
      --primary-dark: #0a58ca;
      --primary-light: #3d8bfd;
      --secondary: #6c757d;
      --success: #198754;
      --dark: #0f1113;
      --soft: #22262a;
      --text: #212529;
      --light: #f8f9fa;
      --accent: #9aa4ae;
      --link: #e6e9ec;
      --whatsapp: #25D366;
      --gradient-primary: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%);
      --gradient-dark: linear-gradient(135deg, #0f1113 0%, #22262a 100%);
      --gradient-light: linear-gradient(135deg, #f9fbff 0%, #f0f5ff 100%);
      --gradient-hero: linear-gradient(135deg, #0d6efd 0%, #0dcaf0 100%);
      --gradient-silver: linear-gradient(135deg, #c0c0c0 0%, #e8e8e8 50%, #a0a0a0 100%);
      --gradient-silver-light: linear-gradient(135deg, #e8e8e8 0%, #f8f8f8 50%, #d8d8d8 100%);
      --gradient-silver-dark: linear-gradient(135deg, #a0a0a0 0%, #c0c0c0 50%, #808080 100%);
      --shadow-sm: 0 2px 12px rgba(0,0,0,0.08);
      --shadow-md: 0 8px 30px rgba(0,0,0,0.12);
      --shadow-lg: 0 15px 50px rgba(0,0,0,0.15);
      --shadow-xl: 0 25px 60px rgba(0,0,0,0.2);
      --border-radius: 12px;
      --border-radius-lg: 20px;
      --border-radius-xl: 30px;
      --transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      --transition-slow: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    /* ====== Base ====== */
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    
    html {
      scroll-behavior: smooth;
    }
    
    body {
      background: #fff;
      color: var(--text);
      font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
      line-height: 1.7;
      overflow-x: hidden;
      font-weight: 400;
    }
    
    .container-narrow {
      max-width: 1200px;
      margin: 0 auto;
    }
    
    .section-title {
      font-weight: 800;
      letter-spacing: -0.5px;
      position: relative;
      display: inline-block;
      font-size: clamp(2rem, 4vw, 3rem);
      margin-bottom: 1.5rem;
    }
    
    .section-title::after {
      content: '';
      position: absolute;
      bottom: -12px;
      left: 0;
      width: 80px;
      height: 6px;
      background: var(--gradient-silver);
      border-radius: 3px;
      transition: var(--transition);
    }
    
    .text-center .section-title::after {
      left: 50%;
      transform: translateX(-50%);
    }
    
    .section-title:hover::after {
      width: 120px;
    }
    
    .muted {
      color: #6b737b;
    }
    
    a {
      text-decoration: none;
      transition: var(--transition);
    }
    
    /* ====== Navbar: Ultra Moderna ====== */
    .navbar {
      box-shadow: var(--shadow-sm);
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(20px);
      padding: 1rem 0;
      transition: var(--transition-slow);
      border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    }
    
    .navbar.scrolled {
      padding: 0.7rem 0;
      box-shadow: var(--shadow-md);
      background: rgba(255, 255, 255, 0.98);
    }
    
    .navbar-brand img {
      transition: var(--transition);
      filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
    }
    
    .navbar-brand:hover img {
      transform: scale(1.05);
    }
    
    .navbar .nav-link {
      font-weight: 600;
      color: #1d232a;
      position: relative;
      padding: 0.7rem 1.2rem !important;
      border-radius: 10px;
      transition: var(--transition);
      margin: 0 0.2rem;
    }
    
    .navbar .nav-link:hover, 
    .navbar .nav-link:focus {
      color: var(--primary);
      background: rgba(13, 110, 253, 0.08);
      transform: translateY(-2px);
    }
    
    .navbar .nav-link::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      width: 0;
      height: 3px;
      background: var(--gradient-silver);
      transition: var(--transition);
      transform: translateX(-50%);
      border-radius: 2px;
    }
    
    .navbar .nav-link:hover::after {
      width: 70%;
    }
    
    .navbar .btn-primary {
      background: var(--gradient-silver);
      border: none;
      border-radius: 12px;
      font-weight: 700;
      padding: 0.7rem 1.5rem;
      transition: var(--transition);
      box-shadow: 0 6px 20px rgba(192, 192, 192, 0.3);
      position: relative;
      overflow: hidden;
      color: #333;
    }
    
    .navbar .btn-primary::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
      transition: var(--transition-slow);
    }
    
    .navbar .btn-primary:hover {
      transform: translateY(-3px);
      box-shadow: 0 10px 25px rgba(192, 192, 192, 0.4);
    }
    
    .navbar .btn-primary:hover::before {
      left: 100%;
    }
    
    .navbar .navbar-toggler {
      border: 1px solid rgba(29, 35, 42, 0.1);
      padding: 0.5rem 0.7rem;
      border-radius: 10px;
      transition: var(--transition);
      background: rgba(255, 255, 255, 0.8);
    }
    
    .navbar .navbar-toggler:focus {
      box-shadow: none;
    }
    
    .navbar .navbar-toggler .tog-dot {
      width: 24px;
      height: 2px;
      background: #1d232a;
      display: block;
      margin: 5px 0;
      border-radius: 2px;
      transition: var(--transition);
    }
    
    .navbar .navbar-toggler[aria-expanded="true"] .tog-dot:nth-child(1) {
      transform: rotate(45deg) translate(6px, 6px);
    }
    
    .navbar .navbar-toggler[aria-expanded="true"] .tog-dot:nth-child(2) {
      opacity: 0;
    }
    
    .navbar .navbar-toggler[aria-expanded="true"] .tog-dot:nth-child(3) {
      transform: rotate(-45deg) translate(6px, -6px);
    }

    /* ====== HERO ULTRA MODERNO ====== */
    .hero-ultimate {
      background: var(--gradient-light);
      position: relative;
      padding: 0;
      font-family: 'Inter', system-ui, -apple-system, sans-serif;
      overflow: hidden;
      min-height: 100vh;
      display: flex;
      align-items: center;
    }
    
    /* Efectos de fondo avanzados */
    .hero-ultimate::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: 
        radial-gradient(circle at 20% 80%, rgba(192, 192, 192, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(232, 232, 232, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 40% 40%, rgba(160, 160, 160, 0.03) 0%, transparent 50%);
      z-index: 0;
    }
    
    .hero-ultimate::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: 
        linear-gradient(135deg, rgba(255,255,255,0.8) 0%, transparent 30%),
        linear-gradient(225deg, rgba(255,255,255,0.6) 0%, transparent 30%);
      z-index: 0;
    }
    
    .hero-container-ultimate {
      max-width: 1400px;
      margin: 0 auto;
      padding: 100px 40px;
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-columns: 1.2fr 1fr;
      gap: 80px;
      align-items: center;
    }
    
    /* Columna de contenido */
    .hero-content-ultimate {
      padding-right: 40px;
    }
    
    .hero-brand-ultimate {
      margin-bottom: 30px;
    }
    
    .hero-logo-ultimate {
      height: 70px;
      width: auto;
      filter: drop-shadow(0 6px 12px rgba(15, 23, 42, 0.15));
      transition: var(--transition);
    }
    
    .hero-logo-ultimate:hover {
      transform: scale(1.05);
      filter: drop-shadow(0 8px 16px rgba(15, 23, 42, 0.2));
    }
    
    .hero-title-ultimate {
      font-size: clamp(2
/* ...cortado... */

/* SAFE GUARD: prevent accidental horizontal scroll on small screens */
html, body { max-width: 100%; overflow-x: hidden; }
[class*="col-"] { min-width: 0; } /* prevent flex overflow */
.navbar .navbar-toggler { z-index: 1040; } /* ensure hamburger stays clickable */

/* === Scoped Mobile Overflow Hotfix (structure untouched) === */
@media (max-width: 576px){
  html, body { max-width: 100%; overflow-x: hidden; }
  /* Bootstrap rows can overflow if a .row is outside .container */
  .row { margin-left: 0; margin-right: 0; }
  /* Prevent any internal navbar element from pushing width */
  .navbar, .navbar > .container, .navbar > .container-fluid { overflow-x: clip; }
  /* Avoid long words breaking layout */
  h1, h2, h3, .display-1, .display-2, .display-3 { word-wrap: break-word; overflow-wrap: anywhere; }
  /* Media should never exceed viewport width */
  img, svg, video, canvas { max-width: 100%; height: auto; }
}

/* ===== Mobile Navbar Fix: smaller logo + tighter spacing (<=576px) ===== */
@media (max-width: 576px){
  .navbar { padding: .5rem 0 !important; }
  .navbar .container, .navbar .container-fluid { gap: .5rem; }
  .navbar-brand { gap: .4rem !important; }
  .navbar-brand img.brand-logo { max-height: 34px !important; height: 34px !important; width: auto !important; }
  /* ocultar texto al lado del logo en pantallas chicas para que no desborde */
  .navbar .brand-text { display: none !important; }
  /* botón hamburguesa compacto y siempre clickeable */
  .navbar .navbar-toggler { padding: .35rem .5rem !important; border-radius: 8px; z-index: 1050; }
  .navbar .tog-dot { width: 22px; height: 2px; margin: 4px 0; }
  /* evitar que el collapse empuje el ancho */
  .navbar .collapse.navbar-collapse { max-width: 100vw; overflow-x: hidden; }
}
/* Quitar ocultamiento en mobile */
@media (max-width: 576px){
  .navbar .brand-text{ 
    display:inline-block !important;   /* antes lo ocultabas */
    font-size:.95rem;                  /* bajamos tamaño para que no desborde */
  }
  .navbar-brand{ gap:.35rem !important; } /* menos espacio entre logo y texto */
}

/* Versión desktop: ya la tenés, pero por si acaso */
.navbar .brand-text{
  font-weight:800; letter-spacing:.2px; line-height:1; white-space:nowrap;
}
.navbar .brand-text-strong{
  background: var(--gradient-silver);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* Badge responsive */
.badge {
  font-size: 1rem !important;
}
@media (max-width: 576px) {
  .badge {
    font-size: 0.85rem !important;
    padding: 0.5rem 1rem !important;
  }
}

.hero-ultimate .hero-container-ultimate{padding:64px 28px;gap:56px}
      .hero-ultimate .hero-content-ultimate{padding-right:16px}
  
      /* LOGO ENORME Y CENTRADO */
      .hero-ultimate .brand-right{
        display:flex; justify-content:center; align-items:center;
        margin-bottom:16px;
      }
      .hero-ultimate .brand-right img{
        height:420px;             /* << MAS GRANDE */
        width:auto; max-width:100%;
        filter: drop-shadow(0 18px 34px rgba(15,23,42,.22));
      }
  
      /* Contenedor de cards más angosto para resaltar el logo */
      .hero-ultimate .hero-visual-container{
        width:clamp(320px,30vw,460px);
        padding:14px; border-radius:20px;
        background:rgba(255,255,255,.92);
        border:1px solid rgba(226,232,240,.9);
        box-shadow:0 20px 44px rgba(2,6,23,.10);
        margin-inline:auto;
      }
  
      /* Cards mini */
      .hero-ultimate .feature-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
      .hero-ultimate .fcard{
        border-radius:14px;padding:10px 10px 12px;
        background:linear-gradient(180deg,#f8fbff 0%, #f2f6fb 100%);
        border:1px solid #e6ebf2; box-shadow:0 6px 14px rgba(2,6,23,.06);
        transition:transform .2s ease, box-shadow .2s ease;
      }
      .hero-ultimate .fcard:hover{transform:translateY(-4px);box-shadow:0 12px 22px rgba(2,6,23,.10)}
      .hero-ultimate .f-icon{
        width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;
        background: var(--gradient-silver);color:#333;font-size:1.05rem;margin-bottom:6px;
        box-shadow:0 8px 16px rgba(192, 192, 192,.30);
      }
      .hero-ultimate .f-title{font-weight:800;font-size:.95rem;color:#0f172a;margin-bottom:4px;letter-spacing:-.1px}
      .hero-ultimate .f-desc{font-size:.78rem;color:#5b6878;line-height:1.35;margin:0}
  
      /* Breakpoints */
      @media (min-width:1600px){
        .hero-ultimate .brand-right img{height:500px;} /* XL aún más grande */
      }
      @media (max-width:1200px){
        .hero-ultimate .brand-right img{height:320px;}
      }
      @media (max-width:992px){
        .hero-ultimate .hero-container-ultimate{grid-template-columns:1fr;gap:34px}
        .hero-ultimate .brand-right img{height:220px}
        .hero-ultimate .hero-visual-container{width:100%;max-width:480px}
      }
      @media (max-width:576px){
        .hero-ultimate .brand-right img{height:140px}
        .hero-ultimate .hero-visual-container{padding:12px}
        .hero-ultimate .feature-grid{grid-template-columns:1fr;gap:10px}
      }

/* Scope local */
      .quienes-clean{position:relative;overflow:hidden}
      .quienes-clean .visual-frame{
        width:100%; max-width:560px; aspect-ratio:1/1;
        margin-inline:auto;
        border-radius:22px;
        background: rgba(255,255,255,.75);               /* SIN FONDO NEGRO */
        border:1px solid #e6ebf2;
        box-shadow:0 22px 50px rgba(2,6,23,.10);
        position:relative; overflow:hidden; isolation:isolate;
        transform: translateZ(0);
        transition: transform .35s ease, box-shadow .35s ease;
      }
      /* Línea superior sutil */
      .quienes-clean .visual-frame::before{
        content:""; position:absolute; inset:0 0 auto 0; height:8px;
        background: var(--gradient-silver);
        opacity:.9; z-index:2;
      }
      /* Brillo diagonal animado */
      .quienes-clean .visual-frame::after{
        content:""; position:absolute; inset:-40% -40%;
        background:linear-gradient(115deg, transparent 45%, rgba(255,255,255,.35) 50%, transparent 55%);
        transform: rotate(5deg) translateX(-30%);
        animation: shine 4.5s ease-in-out infinite;
        z-index:1; pointer-events:none;
      }
      @keyframes shine{
        0%{transform: rotate(5deg) translateX(-30%)}
        100%{transform: rotate(5deg) translateX(30%)}
      }
      /* Imagen */
      .quienes-clean .visual-frame img{
        position:relative; z-index:0; width:100%; height:100%;
        object-fit: contain; background: transparent;   /* sin fondo */
        transform: scale(1.02);
        transition: transform .35s ease, filter .35s ease;
        filter: drop-shadow(0 10px 20px rgba(192, 192, 192,.15));
      }
      .quienes-clean .visual-frame:hover{
        transform: translateY(-6px);
        box-shadow:0 30px 70px rgba(2,6,23,.16);
      }
      .quienes-clean .visual-frame:hover img{ transform: scale(1.05) }
  
      /* Blobs decorativos (muy sutiles) */
      .quienes-clean .blob{
        position:absolute; border-radius:50%; filter: blur(20px);
        opacity:.25; pointer-events:none; z-index:0;
        animation: float 12s ease-in-out infinite;
      }
      .quienes-clean .blob.b1{width:320px;height:320px;right:-80px;top:-60px;
        background: radial-gradient(circle, rgba(192, 192, 192,.25), transparent 60%);}
      .quienes-clean .blob.b2{width:280px;height:280px;left:-80px;bottom:-60px; 
        background: radial-gradient(circle, rgba(232, 232, 232,.25), transparent 60%); 
        animation-direction: reverse;}
      @keyframes float{
        0%,100%{ transform: translateY(0) }
        50%{ transform: translateY(-18px) }
      }
  
      /* Reveal suave al entrar (se acopla a tu IntersectionObserver) */
      .quienes-clean .reveal{
        opacity:0; transform: translateY(26px); transition: opacity .6s ease, transform .6s ease;
      }
      .quienes-clean .reveal.is-visible{
        opacity:1; transform: translateY(0);
      }
      @media (max-width: 576px){
        .quienes-clean .visual-frame{border-radius:18px}
      }

.placasXL2{padding:64px 0}
    .placasXL2 .plaquita{
      border:1px solid #e6ebf2; border-radius:22px; background:#fff;
      box-shadow:0 14px 34px rgba(2,6,23,.10);
      transition:transform .2s ease, box-shadow .2s ease;
      padding:14px; height:100%; cursor: zoom-in;
    }
    .placasXL2 .plaquita:hover{transform:translateY(-6px); box-shadow:0 22px 60px rgba(2,6,23,.16)}

    /* Plaquitas GRANDES, sin recorte en desktop */
    .placasXL2 .plaquita-media{
      height: clamp(360px, 44vw, 700px);
      border-radius:16px; background:#fff;
      display:flex; align-items:center; justify-content:center; overflow:hidden;
    }
    @media (min-width:1600px){
      .placasXL2 .plaquita-media{ height: clamp(420px, 40vw, 780px); }
    }

    /* >>> Mobile: 1 por fila y MUCHO más altas (aprovecha la pantalla) */
    @media (max-width: 576px){
      .placasXL2{padding:40px 0}
      .placasXL2 .plaquita-media{
        height: min(68vh, 560px); /* bien grandes en phone, sin recortar */
      }
    }
    @media (max-width: 380px){
      .placasXL2 .plaquita-media{ height: min(72vh, 600px); }
    }

    .placasXL2 img{max-width:100%; max-height:100%; object-fit:contain; display:block}

    /* ===== Modal Lightbox ===== */
    #pxl2Modal .modal-dialog{max-width:min(1280px,96vw)}
    #pxl2Modal .modal-content{background:transparent; border:none}
    #pxl2Modal .viewer{
      position:relative; display:flex; align-items:center; justify-content:center;
      min-height:40vh; text-align:center;
    }
    #pxl2Modal #pxl2Img{
      max-height:85vh; max-width:100%; width:auto; margin:0 auto;
      border-radius:18px; box-shadow:0 32px 90px rgba(0,0,0,.5); background:#000;
    }
    .pxl2-nav{
      position:absolute; top:50%; transform:translateY(-50%);
      width:58px; height:58px; border-radius:50%;
      background:#fff; border:1px solid #e6ebf2; opacity:1;
      display:flex; align-items:center; justify-content:center; z-index:5;
      filter: drop-shadow(0 14px 30px rgba(2,6,23,.24));
    }
    .pxl2-prev{left:12px}
    .pxl2-next{right:12px}
    .pxl2-nav i{font-size:20px}
    .pxl2-counter{
      position:absolute; bottom:8px; right:12px;
      background:rgba(0,0,0,.55); color:#fff; font-weight:700;
      border-radius:10px; padding:6px 10px; font-size:.9rem;
    }
    @media (max-width:576px){
      .pxl2-nav{width:46px;height:46px}
    }

.carousel-image {
    max-height: 500px;
    width: auto;
    object-fit: contain;
  }
  
  /* Ajustes responsivos */
  @media (max-width: 768px) {
    .carousel-image {
      max-height: 400px;
    }
  }
  
  @media (max-width: 576px) {
    .carousel-image {
      max-height: 300px;
    }
  }

/* ==== FOOTER STYLES ==== */
  .footer {
    background: #111;
    color: #ccc;
    font-size: 14px;
  }
  .footer-nav a {
    color: #ccc;
    margin: 0 6px;
    text-decoration: none;
    transition: color 0.3s ease;
  }
  .footer-nav a:hover {
    color: #fff;
  }
  .footer-brand img {
    filter: drop-shadow(0 0 3px rgba(255,255,255,0.1));
  }
  .footer hr {
    opacity: 0.2;
  }
  
  /* Ajustes responsive */
  @media (max-width: 576px) {
    .footer {
      padding-top: 20px !important;
      padding-bottom: 15px !important;
    }
    .footer h6 {
      font-size: 16px;
    }
    .footer-nav a {
      display: inline-block;
      margin: 3px 8px;
      font-size: 13px;
    }
    .footer img {
      height: 32px;
    }
  }

:root{
    --wa:#25D366; --wa-dark:#128C7E; --wa-darker:#075E54;
    /* tonos más industriales para el panel */
    --dark-bg:#0f1116; --darker-bg:#0c121b;
    --light-text:#ffffff; --muted-text:rgba(255,255,255,.7);
  }
  .wa-float{position:fixed; right:18px; bottom:18px; z-index:9999; font-family:inherit;}
  .wa-btn{
    background:linear-gradient(135deg,var(--wa),var(--wa-dark));
    color:#fff; border:0; width:60px; height:60px; border-radius:50%;
    display:grid; place-items:center; box-shadow:0 10px 30px rgba(0,0,0,.25);
    cursor:pointer; transition:transform .3s, box-shadow .3s, background .3s; position:relative; overflow:hidden;
  }
  .wa-btn::after{content:""; position:absolute; inset:0;
    background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.18), rgba(255,255,255,0) 70%);
    opacity:0; transition:opacity .3s;}
  .wa-btn:hover{transform:translateY(-3px) scale(1.05); box-shadow:0 14px 36px rgba(0,0,0,.35);}
  .wa-btn:hover::after{opacity:1;}

  .wa-card{
    position:absolute; right:0; bottom:74px; width:min(360px,92vw);
    background:var(--dark-bg); color:var(--light-text); border-radius:18px; overflow:hidden;
    box-shadow:0 18px 60px rgba(0,0,0,.5); border:1px solid rgba(255,255,255,.08);
    transform:translateY(10px); opacity:0; transition:transform .3s, opacity .3s;
  }
  .wa-card[aria-modal="true"]{transform:translateY(0); opacity:1;}
  .wa-head{display:flex; align-items:center; gap:12px; padding:14px;
    background:linear-gradient(180deg,#121a26,var(--darker-bg)); border-bottom:1px solid rgba(255,255,255,.06);}
  .wa-avatar{width:40px; height:40px; border-radius:8px; background:#101722;
    display:grid; place-items:center; border:1px solid rgba(255,255,255,.08); overflow:hidden;}
  .wa-title{font-weight:700; font-size:1.05rem;}
  .wa-status{font-size:.85rem; color:var(--muted-text); display:flex; align-items:center; gap:6px;}
  .wa-status::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--wa);}
  .wa-close{margin-left:auto; background:transparent; color:#fff; border:0; font-size:24px; cursor:pointer; opacity:.7;
    width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:.2s;}
  .wa-close:hover{opacity:1; background:rgba(255,255,255,.1);}

  .wa-body{padding:12px 14px; max-height:40vh; overflow:auto; background:var(--dark-bg);
    display:flex; flex-direction:column; gap:8px;}
  .wa-bubble{max-width:88%; padding:10px 12px; border-radius:14px; line-height:1.35; box-shadow:0 4px 14px rgba(0,0,0,.25); animation:fadeIn .25s ease;}
  @keyframes fadeIn{from{opacity:0; transform:translateY(5px)} to{opacity:1; transform:none}}
  .wa-bot{background:#0e1622; border:1px solid rgba(255,255,255,.06); align-self:flex-start; border-bottom-left-radius:4px;}
  .wa-user{background:var(--wa-darker); align-self:flex-end; border-bottom-right-radius:4px;}

  .wa-compose{display:grid; grid-template-columns:1fr auto; gap:8px; padding:10px; background:var(--dark-bg); border-top:1px solid rgba(255,255,255,.08);}
  .wa-compose textarea{
    resize:none; border-radius:12px; padding:10px 12px; border:1px solid rgba(255,255,255,.12);
    background:#0b121c; color:var(--light-text); outline:none; min-height:44px; font-family:inherit; transition:.2s;}
  .wa-compose textarea:focus{border-color:var(--wa); box-shadow:0 0 0 2px rgba(37,211,102,.15);}
  .wa-send{background:var(--wa); color:#0b1220; border:0; border-radius:12px; padding:0 16px; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:.2s;}
  .wa-send:hover{background:var(--wa-dark); transform:scale(1.05);}

  /* Scrollbar */
  .wa-body::-webkit-scrollbar{width:6px;}
  .wa-body::-webkit-scrollbar-track{background:rgba(255,255,255,.05); border-radius:3px;}
  .wa-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2); border-radius:3px;}
  .wa-body::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.3);}

  @media (max-width:480px){
    .wa-float{right:12px; bottom:12px;}
    .wa-card{width:calc(100vw - 24px); right:0;}
  }

:root {
      --primary: #0f2f46;
      --primary-dark: #0a2333;
      --accent: #d4a017;
      --accent-light: #e8b83d;
      --ink: #0f1a24;
      --soft: #f6f8fb;
      --soft-light: #fafcff;
      --muted: #6b7280;
      --white: #ffffff;
      --shadow: 0 10px 30px rgba(15, 42, 70, 0.08);
      --shadow-lg: 0 20px 50px rgba(15, 42, 70, 0.12);
      --radius: 16px;
      --radius-lg: 24px;
      --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    }

    * {
      box-sizing: border-box;
    }

    body {
      font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, 'Helvetica Neue', Arial, sans-serif;
      color: var(--ink);
      background: var(--white);
      overflow-x: hidden;
      line-height: 1.6;
    }

    h1, h2, h3, h4, h5, h6 {
      font-weight: 700;
      line-height: 1.2;
    }

    a {
      color: var(--primary);
      text-decoration: none;
      transition: var(--transition);
    }

    a:hover {
      color: var(--accent);
    }

    .btn {
      border-radius: 12px;
      font-weight: 600;
      padding: 12px 24px;
      transition: var(--transition);
      position: relative;
      overflow: hidden;
    }

    .btn-primary {
      background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
      border: none;
      box-shadow: 0 4px 15px rgba(15, 47, 70, 0.2);
    }

    .btn-primary:hover {
      background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(15, 47, 70, 0.3);
    }

    .btn-outline-primary {
      border-color: var(--primary);
      color: var(--primary);
      background: transparent;
    }

    .btn-outline-primary:hover {
      background: var(--primary);
      color: var(--white);
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(15, 47, 70, 0.2);
    }

    .btn-lg {
      padding: 16px 32px;
      font-size: 1.1rem;
    }

    .btn-accent {
      background: linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 100%);
      border: none;
      color: var(--primary);
      font-weight: 700;
      box-shadow: 0 4px 15px rgba(212, 160, 23, 0.3);
    }

    .btn-accent:hover {
      background: linear-gradient(135deg, var(--accent-light) 0%, var(--accent) 100%);
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(212, 160, 23, 0.4);
      color: var(--primary);
    }

    /* Navbar */
    .navbar {
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(10px);
      box-shadow: 0 4px 20px rgba(15, 42, 70, 0.08);
      padding: 1rem 0;
      transition: var(--transition);
    }

    .navbar.scrolled {
      padding: 0.5rem 0;
    }

    .navbar-brand {
      font-weight: 800;
      font-size: 1.5rem;
      color: var(--primary) !important;
      display: flex;
      align-items: center;
    }

    .navbar-brand::before {
      content: "";
      display: inline-block;
      width: 8px;
      height: 24px;
      background: var(--accent);
      margin-right: 8px;
      border-radius: 2px;
    }

    .navbar .nav-link {
      font-weight: 600;
      color: var(--ink) !important;
      padding: 0.5rem 1rem;
      position: relative;
    }

    .navbar .nav-link::after {
      content: '';
      position: absolute;
      width: 0;
      height: 2px;
      bottom: 0;
      left: 50%;
      background: var(--accent);
      transition: var(--transition);
      transform: translateX(-50%);
    }

    .navbar .nav-link:hover::after,
    .navbar .nav-link.active::after {
      width: 80%;
    }

    .navbar .nav-link:hover,
    .navbar .nav-link.active {
      color: var(--primary) !important;
    }

    /* Hero Section */
    .hero {
      padding: clamp(80px, 10vw, 160px) 0;
      background: linear-gradient(135deg, var(--soft-light) 0%, var(--soft) 50%, var(--white) 100%);
      position: relative;
      overflow: hidden;
    }

    .hero::before {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      width: 60%;
      height: 100%;
      background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 800" fill="none"><g opacity="0.05"><path d="M0 0h1200v800H0z" fill="%230f2f46"/><circle cx="900" cy="100" r="80" fill="%23d4a017"/><circle cx="1100" cy="300" r="120" fill="%23d4a017"/><circle cx="1000" cy="600" r="100" fill="%23d4a017"/><rect x="800" y="400" width="200" height="200" rx="20" fill="%23d4a017"/></g></svg>') no-repeat;
      background-size: cover;
      z-index: 0;
    }

    .hero-content {
      position: relative;
      z-index: 1;
    }

    .badge-dot {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      font-weight: 700;
      color: var(--primary);
      background: rgba(15, 47, 70, 0.08);
      padding: 8px 16px;
      border-radius: 50px;
      font-size: 0.9rem;
      margin-bottom: 1.5rem;
    }

    .badge-dot::before {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--accent);
      animation: pulse 2s infinite;
    }

    @keyframes pulse {
      0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(212, 160, 23, 0.7);
      }
      70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(212, 160, 23, 0);
      }
      100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(212, 160, 23, 0);
      }
    }

    .hero h1 {
      font-size: clamp(2.5rem, 5vw, 4rem);
      font-weight: 800;
      line-height: 1.1;
      margin-bottom: 1.5rem;
    }

    .hero-highlight {
      color: var(--accent);
      position: relative;
      display: inline-block;
    }

    .hero-highlight::after {
      content: '';
      position: absolute;
      bottom: 5px;
      left: 0;
      width: 100%;
      height: 8px;
      background: rgba(212, 160, 23, 0.2);
      z-index: -1;
      border-radius: 4px;
    }

    .hero p.lead {
      font-size: 1.25rem;
      color: var(--muted);
      margin-bottom: 2rem;
    }

    .feature-badges {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-bottom: 2.5rem;
    }

    .feature-badge {
      background: var(--white);
      border: 1px solid rgba(15, 47, 70, 0.1);
      border-radius: 50px;
      padding: 8px 16px;
      font-size: 0.9rem;
      font-weight: 500;
      box-shadow: 0 2px 8px rgba(15, 42, 70, 0.05);
      transition: var(--transition);
    }

    .feature-badge:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(15, 42, 70, 0.1);
    }

    .hero-buttons {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
    }

    .hero-image {
      position: relative;
      z-index: 1;
    }

    .hero-card {
      background: var(--white);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-lg);
      padding: 24px;
      overflow: hidden;
      position: relative;
      transition: var(--transition);
    }

    .hero-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 25px 50px rgba(15, 42, 70, 0.15);
    }

    .hero-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 4px;
      background: linear-gradient(90deg, var(--primary) 0%, var(--accent) 100%);
    }

    .hero-card img {
      width: 100%;
      height: auto;
      border-radius: 12px;
    }

    /* Sections */
    .section {
      padding: clamp(80px, 10vw, 120px) 0;
      position: relative;
    }

    .section-title {
      font-size: clamp(2rem, 4vw, 3rem);
      font-weight: 800;
      margin-bottom: 1rem;
      position: relati
/* ...cortado... */

/* ===== Scoped SOLO a #quienes ===== */
    #quienes .logo-panel{
      background:#fff; border-radius:18px; box-shadow:0 16px 40px rgba(16,24,40,.14);
      padding:28px; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center;
      position:relative; overflow:hidden; transform-style:preserve-3d; will-change:transform;
    }
    /* Anillo suave decorativo detrás */
    #quienes .logo-panel::before{
      content:""; position:absolute; inset:auto; width:520px; height:520px; right:-160px; bottom:-160px;
      background: radial-gradient(closest-side, rgba(11,94,215,.12), transparent 70%);
      filter: blur(2px); pointer-events:none; transform: translateZ(-1px);
    }
    /* Marca de agua ultralight del logo (muy sutil) */
    #quienes .logo-panel::after{
      content:""; position:absolute; left:-60px; top:-60px; width:280px; height:280px; opacity:.05;
      background:url('img/logo.png') center/contain no-repeat; pointer-events:none; transform: translateZ(-1px);
    }

    /* Caja del logo (GRANDE) */
    #quienes .logo-box{
      width:100%; max-width:480px; aspect-ratio:1/1;
      border-radius:18px; display:grid; place-items:center;
      background:#ffffff; box-shadow:inset 0 0 0 1px rgba(16,24,40,.06), 0 8px 24px rgba(16,24,40,.08);
      position:relative; overflow:hidden; animation: q-float 6s ease-in-out infinite;
    }
    /* Brillo diagonal muy sutil */
    #quienes .logo-box::after{
      content:""; position:absolute; inset:-40%;
      background: linear-gradient(55deg, transparent 40%, rgba(255,255,255,.18) 50%, transparent 60%);
      transform: translateX(-60%) rotate(0.001deg);
      animation: q-shine 7s linear infinite;
      pointer-events:none;
    }
    #quienes .logo-box img{
      width:88%; height:88%; object-fit:contain; display:block;
      transform: translateZ(20px);
    }
    #quienes .logo-caption{ margin:.95rem 0 0; text-align:center; color:var(--muted, #6c757d); font-size:.95rem; }

    /* Hover: un toque de escala, el tilt lo maneja JS */
    #quienes .logo-panel:hover .logo-box{ box-shadow:inset 0 0 0 1px rgba(16,24,40,.07), 0 12px 34px rgba(16,24,40,.16); }
    #quienes .logo-panel:hover .logo-box img{ transform: translateZ(22px) scale(1.02); }

    /* Keyframes */
    @keyframes q-float {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-10px); }
    }
    @keyframes q-shine {
      0%   { transform: translateX(-60%) rotate(0.001deg); }
      100% { transform: translateX(60%)  rotate(0.001deg); }
    }

    /* Resp. solo del panel/logo */
    @media (max-width: 991.98px){
      #quienes .logo-box{ max-width:400px; }
    }
    @media (max-width: 575.98px){
      #quienes .logo-box{ max-width:300px; }
    }

    /* Respeta accesibilidad: si el usuario prefiere menos movimiento */
    @media (prefers-reduced-motion: reduce){
      #quienes .logo-box{ animation: none; }
      #quienes .logo-box::after{ animation: none; opacity: .08; }
      #quienes .logo-panel, #quienes .logo-box img{ transition: none !important; }
    }

/* ===== Carrusel proporcional (sin recortes/estirones) ===== */
    #trabajos .wrap{ position:relative; }
    #trabajos .rail{
      display:flex; align-items:center; gap:22px;
      overflow:auto; scroll-snap-type:x mandatory; scroll-padding:3rem;
      padding:8px 0 28px; -ms-overflow-style:none; scrollbar-width:none;
      mask-image: linear-gradient(to right, transparent 0, black 6%, black 94%, transparent 100%);
      -webkit-mask-image: linear-gradient(to right, transparent 0, black 6%, black 94%, transparent 100%);
    }
    #trabajos .rail::-webkit-scrollbar{ display:none; }

    /* Cada item usa alto fijo y ancho AUTO según la foto (lo calcula JS) */
    #trabajos .item{
      flex:0 0 auto; scroll-snap-align:center;
      height:min(64vh, 520px); /* ajustá este alto para “más grande/menos” */
      min-height:320px;
      background:#fff; border-radius:18px; overflow:hidden;
      box-shadow:0 18px 40px rgba(16,24,40,.18);
      position:relative; transition:transform .25s ease, box-shadow .25s ease;
      cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
    }
    #trabajos .item:hover{ transform:translateY(-2px); box-shadow:0 22px 48px rgba(16,24,40,.22); }

    /* La imagen nunca se deforma ni se recorta */
    #trabajos .item img{
      height:100%; width:auto; display:block; object-fit:contain;
      user-select:none; -webkit-user-drag:none;
      background:#111; /* bordes laterales discretos en verticales */
    }

    /* Controles flotantes */
    #trabajos .controls{
      position:absolute; inset:0; pointer-events:none;
      display:flex; align-items:center; justify-content:space-between; padding:0 8px;
    }
    #trabajos .controls .btn-nav{
      pointer-events:auto; width:46px; height:46px; border-radius:999px; border:0;
      display:flex; align-items:center; justify-content:center;
      background:rgba(0,0,0,.35); color:#fff; font-size:22px; backdrop-filter:blur(2px);
    }

    /* Play/Pause */
    #trabajos .playbox{ position:absolute; right:10px; bottom:-14px; display:flex; gap:8px; }
    #trabajos .playbox .btn{ pointer-events:auto; }

    /* ===== Modal (Lightbox) ===== */
    #trabajos .lightbox{
      position:fixed; inset:0; background:rgba(0,0,0,.85);
      display:none; align-items:center; justify-content:center; z-index:1090;
    }
    #trabajos .lightbox.open{ display:flex; }
    #trabajos .lightbox-inner{
      position:relative; width:min(96vw,1280px); height:min(86vh,860px);
      display:flex; align-items:center; justify-content:center;
      background:#111; border-radius:14px; overflow:hidden; box-shadow:0 12px 36px rgba(0,0,0,.5);
    }
    #trabajos .lightbox img{ max-width:100%; max-height:100%; object-fit:contain; background:#111; }
    #trabajos .lb-btn{
      position:absolute; top:50%; transform:translateY(-50%);
      width:46px; height:46px; border-radius:999px; border:0;
      background:rgba(255,255,255,.14); color:#fff; font-size:22px;
    }
    #trabajos .lb-prev{ left:14px; }  #trabajos .lb-next{ right:14px; }
    #trabajos .lb-close{
      position:absolute; top:10px; right:10px; width:42px; height:42px; font-size:20px;
      border-radius:999px; border:0; background:rgba(255,255,255,.14); color:#fff;
    }
    #trabajos .lb-counter{
      position:absolute; left:14px; bottom:12px; color:#fff; opacity:.9;
      background:rgba(0,0,0,.35); padding:.25rem .6rem; border-radius:999px; font-size:.95rem;
    }

    /* Responsivo */
    @media (max-width: 991.98px){
      #trabajos .item{ height:420px; }
    }
    @media (max-width: 575.98px){
      #trabajos .item{ height:320px; }
      #trabajos .lb-btn{ width:42px; height:42px; font-size:20px; }
    }

/* ===== Footer PRO (scopeado a .footer) ===== */
    .footer{
      position: relative; color:#e9eef6; overflow:hidden;
      background:
        radial-gradient(1200px 600px at 100% -10%, rgba(11,94,215,.25), transparent 55%),
        radial-gradient(900px 500px at -10% 110%, rgba(0,184,148,.18), transparent 60%),
        linear-gradient(180deg, #0b1220 0%, #0a1120 60%, #0a0f1c 100%);
      padding-top: 56px;
    }
    /* Textura sutil */
    .footer::before{
      content:""; position:absolute; inset:0;
      background-image: radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px);
      background-size: 22px 22px; opacity:.25; pointer-events:none;
    }
    .footer .container{ position:relative; z-index:2; }

    /* Brand */
    .footer .brand{
      display:flex; align-items:center; gap:12px; margin-bottom:10px;
    }
    .footer .brand .logo{
      width:44px; height:44px; border-radius:12px; display:grid; place-items:center; overflow:hidden;
      background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
    }
    .footer .brand .logo img{ width:80%; height:80%; object-fit:contain; display:block; }
    .footer .brand .name{ font-weight:800; letter-spacing:.2px; font-size:1.2rem; color:#fff; }

    .footer .lead{ color:#cbd5e1; }
    .footer .muted{ color:#a9b3c2; }

    /* Links */
    .footer .footer-links{
      display:grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap:.4rem .75rem;
    }
    .footer .footer-links a{
      color:#e5ecf6; text-decoration:none; position:relative; display:inline-block; padding:.125rem 0;
      opacity:.88; transition: opacity .2s ease;
    }
    .footer .footer-links a::after{
      content:""; position:absolute; left:0; bottom:-2px; height:2px; width:0%;
      background: linear-gradient(90deg, #4ea8ff, #7dd3fc);
      transition: width .25s ease;
    }
    .footer .footer-links a:hover{ opacity:1; }
    .footer .footer-links a:hover::after{ width:100%; }

    /* Contacto */
    .footer .contact-list{ list-style:none; padding:0; margin:0; }
    .footer .contact-list li{ margin-bottom:.5rem; display:flex; align-items:center; gap:.5rem; }
    .footer .contact-list a{ color:#e5ecf6; text-decoration:none; opacity:.92; }
    .footer .contact-list a:hover{ opacity:1; text-decoration:underline; text-underline-offset:2px; }
    .footer .actions { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.75rem; }
    .footer .btn-ghost{
      border:1px solid rgba(255,255,255,.18); color:#e9eef6; background:transparent;
      padding:.4rem .7rem; border-radius:10px; font-size:.9rem;
      transition: background .2s ease, border-color .2s ease, transform .05s ease;
    }
    .footer .btn-ghost:hover{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.3); }
    .footer .btn-ghost:active{ transform: translateY(1px); }

    /* Divider */
    .footer hr{ border-color: rgba(255,255,255,.12) !important; opacity:1; }

    /* Bottom bar */
    .footer .bottom{
      display:flex; flex-direction:column; gap:.75rem;
    }
    @media (min-width: 768px){
      .footer .bottom{ flex-direction:row; justify-content:space-between; align-items:center; }
    }
    .footer .bottom a{ color:#cbd5e1; text-decoration:none; opacity:.9; }
    .footer .bottom a:hover{ opacity:1; text-decoration:underline; text-underline-offset:2px; }

    /* Responsive tweaks */
    @media (max-width: 991.98px){
      .footer{ padding-top: 48px; }
      .footer .footer-links{ grid-template-columns: repeat(2,minmax(0,1fr)); }
    }
    @media (max-width: 575.98px){
      .footer .footer-links{ grid-template-columns: 1fr; }
    }

:root{
    --wa: #25D366; --wa-dark: #128C7E; --wa-darker: #075E54;
    --dark-bg: #0b0f18; --darker-bg: #0a1324;
    --light-text: #ffffff; --muted-text: rgba(255,255,255,.7);
  }
  .wa-float{ position: fixed; right: 18px; bottom: 18px; z-index: 9999; font-family: inherit; }
  .wa-btn{
    background: linear-gradient(135deg, var(--wa), var(--wa-dark));
    color:#fff; border:0; width:60px; height:60px; border-radius:50%;
    display:grid; place-items:center; box-shadow:0 10px 30px rgba(0,0,0,.25);
    cursor:pointer; transition:transform .3s, box-shadow .3s, background .3s; position:relative; overflow:hidden;
  }
  .wa-btn::after{ content:""; position:absolute; inset:0;
    background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.18), rgba(255,255,255,0) 70%);
    opacity:0; transition:opacity .3s;
  }
  .wa-btn:hover{ transform: translateY(-3px) scale(1.05); box-shadow:0 14px 36px rgba(0,0,0,.35); }
  .wa-btn:hover::after{ opacity:1; }

  .wa-card{
    position:absolute; right:0; bottom:74px; width:min(360px, 92vw);
    background: var(--dark-bg); color: var(--light-text); border-radius:18px; overflow:hidden;
    box-shadow: 0 18px 60px rgba(0,0,0,.5); border:1px solid rgba(255,255,255,.08);
    transform: translateY(10px); opacity:0; transition: transform .3s, opacity .3s;
  }
  .wa-card[aria-modal="true"]{ transform: translateY(0); opacity:1; }
  .wa-head{ display:flex; align-items:center; gap:12px; padding:14px;
    background: linear-gradient(180deg, #0d162c, var(--darker-bg)); border-bottom:1px solid rgba(255,255,255,.06);
  }
  .wa-avatar{
    width:40px; height:40px; border-radius:8px; background:#0e1a33;
    display:grid; place-items:center; border:1px solid rgba(255,255,255,.08); overflow:hidden;
  }
  .wa-title{ font-weight:700; font-size:1.05rem; }
  .wa-status{ font-size:.85rem; color:var(--muted-text); display:flex; align-items:center; gap:6px; }
  .wa-status::before{ content:""; width:8px; height:8px; border-radius:50%; background: var(--wa); }
  .wa-close{ margin-left:auto; background:transparent; color:#fff; border:0; font-size:24px; cursor:pointer; opacity:.7;
    width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:.2s;
  }
  .wa-close:hover{ opacity:1; background: rgba(255,255,255,.1); }

  .wa-body{ padding:12px 14px; max-height:40vh; overflow:auto; background: var(--dark-bg);
    display:flex; flex-direction:column; gap:8px; }
  .wa-bubble{ max-width:88%; padding:10px 12px; border-radius:14px; line-height:1.35; box-shadow:0 4px 14px rgba(0,0,0,.25); animation:fadeIn .25s ease; }
  @keyframes fadeIn{ from{opacity:0; transform:translateY(5px)} to{opacity:1; transform:none} }
  .wa-bot{ background:#0c1428; border:1px solid rgba(255,255,255,.06); align-self:flex-start; border-bottom-left-radius:4px; }
  .wa-user{ background: var(--wa-darker); align-self:flex-end; border-bottom-right-radius:4px; }

  .wa-compose{ display:grid; grid-template-columns:1fr auto; gap:8px; padding:10px; background: var(--dark-bg); border-top:1px solid rgba(255,255,255,.08); }
  .wa-compose textarea{
    resize:none; border-radius:12px; padding:10px 12px; border:1px solid rgba(255,255,255,.12);
    background:#0a1324; color:var(--light-text); outline:none; min-height:44px; font-family:inherit; transition:.2s;
  }
  .wa-compose textarea:focus{ border-color: var(--wa); box-shadow: 0 0 0 2px rgba(37,211,102,.15); }
  .wa-send{ background: var(--wa); color:#0b1220; border:0; border-radius:12px; padding:0 16px; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:.2s; }
  .wa-send:hover{ background: var(--wa-dark); transform: scale(1.05); }

  /* Scrollbar */
  .wa-body::-webkit-scrollbar{ width:6px; } .wa-body::-webkit-scrollbar-track{ background: rgba(255,255,255,.05); border-radius:3px; }
  .wa-body::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.2); border-radius:3px; } .wa-body::-webkit-scrollbar-thumb:hover{ background: rgba(255,255,255,.3); }

  /* Responsive */
  @media (max-width: 480px){
    .wa-float{ right:12px; bottom:12px; }
    .wa-card{ width: calc(100vw - 24px); right:0; }
  }