/* MIXED CSS PACK */
/* Template: drugstorecanguro.com.ar/index.html */
/* Template mtime: 2025-12-30 22:41:15 */

/* external link (no embedded): https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css */
/* external link (no embedded): https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css */
/* external link (no embedded): https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css */

/* ===== INLINE <style> BLOCK #1 ===== */
:root {
      --accent: #fe0000;
      --accent-light: #ff3333;
      --accent-dark: #cc0000;
      --text: #0f172a;
      --text-light: #334155;
      --muted: #64748b;
      --bg: #ffffff;
      --soft: #f8fafc;
      --card-bg: rgba(255, 255, 255, 0.95);
      --border: rgba(15, 23, 42, 0.08);
      --border-light: rgba(15, 23, 42, 0.04);
      --shadow: 0 20px 60px rgba(2, 6, 23, 0.08);
      --shadow-sm: 0 8px 30px rgba(2, 6, 23, 0.06);
      --shadow-lg: 0 30px 80px rgba(254, 0, 0, 0.12);
      --radius: 24px;
      --radius-sm: 16px;
      --radius-lg: 32px;
      --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      --gradient-accent: linear-gradient(135deg, #fe0000 0%, #ff5e5e 100%);
      --gradient-bg: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    }

    html, body {
      background: var(--bg);
      color: var(--text);
      scroll-behavior: smooth;
      font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    }
    body {
      overflow-x: hidden;
      background: var(--gradient-bg);
    }

    h1, h2, h3, h4, .section-title {
      font-weight: 800;
      letter-spacing: -0.02em;
      line-height: 1.1;
    }
    p { line-height: 1.7; color: var(--text-light); }

    .section { padding: 100px 0; position: relative; }
    .section::before {
      content:'';
      position:absolute; top:0; left:0; width:100%; height:1px;
      background: linear-gradient(90deg, transparent, var(--border), transparent);
    }
    .soft { background: var(--soft); position: relative; overflow: hidden; }
    .soft::before{
      content:'';
      position:absolute; width:300px; height:300px;
      background: radial-gradient(circle, rgba(254,0,0,0.03) 0%, transparent 70%);
      top:-150px; right:-150px; z-index:0;
    }

    .section-title{
      font-weight: 900;
      letter-spacing: -0.03em;
      background: linear-gradient(135deg, var(--text) 0%, var(--text-light) 100%);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
      background-clip: text;
      margin-bottom: 1rem;
    }
    .section-subtitle{
      color: var(--muted);
      font-size: 1.1rem;
      max-width: 600px;
      margin: 0 auto;
    }

    .eyebrow{
      display:inline-flex; align-items:center; gap:10px;
      padding:10px 20px; border-radius:100px;
      font-weight:700; font-size:0.9rem;
      background: rgba(254,0,0,0.08);
      color: var(--accent);
      border:1px solid rgba(254,0,0,0.15);
      margin-bottom: 20px;
      backdrop-filter: blur(10px);
      transition: var(--transition);
      position:relative; overflow:hidden;
    }
    .eyebrow::before{
      content:'';
      position:absolute; inset:0;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
      transform: translateX(-100%);
    }
    .eyebrow:hover::before{ animation: shine 1s ease; }
    @keyframes shine{ 100%{ transform: translateX(100%);} }

    /* Navbar */
    .navbar{
      background: rgba(255,255,255,0.96);
      backdrop-filter: blur(20px);
      border-bottom: 1px solid var(--border-light);
      padding-top:1rem; padding-bottom:1rem;
      box-shadow: 0 4px 30px rgba(0,0,0,0.05);
      transition: var(--transition);
    }
    .navbar.scrolled{
      padding-top:.75rem; padding-bottom:.75rem;
      box-shadow: 0 8px 40px rgba(0,0,0,0.08);
    }
    .brand-mark{
      width:48px; height:48px; border-radius:14px;
      display:grid; place-items:center;
      background: var(--gradient-accent);
      color:#fff; font-weight:900; font-size:1.2rem;
      box-shadow: 0 8px 24px rgba(254,0,0,0.2);
      transition: var(--transition);
    }
    .navbar-brand:hover .brand-mark{
      transform: rotate(10deg) scale(1.05);
      box-shadow: 0 12px 32px rgba(254,0,0,0.3);
    }
    .navbar-brand .brand-name{
      font-weight: 900;
      letter-spacing: -0.03em;
      line-height: 1.1;
      font-size: 1.3rem;
    }
    .navbar-brand .brand-name span{
      color: var(--accent); position: relative;
    }
    .navbar-brand .brand-name span::after{
      content:'';
      position:absolute; bottom:2px; left:0;
      width:100%; height:2px; background: var(--gradient-accent);
      border-radius: 2px;
    }
    .nav-link{
      color: var(--text);
      font-weight: 600;
      padding: .5rem 1rem !important;
      margin: 0 .2rem;
      border-radius: 10px;
      transition: var(--transition);
      position: relative;
    }
    .nav-link::before{
      content:'';
      position:absolute; bottom:0; left:50%;
      transform: translateX(-50%);
      width:0; height:2px;
      background: var(--gradient-accent);
      border-radius:2px;
      transition: var(--transition);
    }
    .nav-link:hover{ color: var(--accent); background: rgba(254,0,0,0.04); }
    .nav-link:hover::before{ width:70%; }
    .nav-link.active{ color: var(--accent); font-weight:700; }
    .nav-link.active::before{ width:70%; }

    /* Buttons */
    .btn-accent{
      background: var(--gradient-accent);
      border:none; color:white;
      border-radius:100px;
      font-weight:700;
      padding:14px 28px;
      box-shadow: 0 12px 40px rgba(254,0,0,0.25);
      transition: var(--transition);
      position:relative; overflow:hidden; z-index:1;
    }
    .btn-accent::before{
      content:'';
      position:absolute; inset:0;
      background: linear-gradient(135deg, var(--accent-dark) 0%, var(--accent) 100%);
      z-index:-1; opacity:0; transition: var(--transition);
    }
    .btn-accent:hover{ transform: translateY(-3px); box-shadow: 0 20px 50px rgba(254,0,0,0.35); }
    .btn-accent:hover::before{ opacity:1; }

    .btn-outline-accent{
      border: 2px solid rgba(254,0,0,0.3);
      color: var(--accent);
      background: transparent;
      border-radius:100px;
      font-weight:700;
      padding: 12px 26px;
      transition: var(--transition);
      position:relative; overflow:hidden;
    }
    .btn-outline-accent::before{
      content:'';
      position:absolute; inset:0;
      background: rgba(254,0,0,0.05);
      z-index:-1;
      transform: scaleX(0);
      transform-origin: right;
      transition: transform .4s cubic-bezier(0.4,0,0.2,1);
    }
    .btn-outline-accent:hover{
      border-color: var(--accent);
      color: var(--accent);
      transform: translateY(-3px);
      box-shadow: 0 12px 30px rgba(254,0,0,0.15);
    }
    .btn-outline-accent:hover::before{
      transform: scaleX(1);
      transform-origin: left;
    }

    /* Hero */
    .hero{
      padding-top: 140px;
      padding-bottom: 80px;
      position: relative;
      overflow: hidden;
      background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    }
    .hero::before{
      content:'';
      position:absolute; width:600px; height:600px;
      background: radial-gradient(circle, rgba(254,0,0,0.08) 0%, transparent 70%);
      top:-300px; left:-300px; z-index:0;
    }
    .hero::after{
      content:'';
      position:absolute; width:500px; height:500px;
      background: radial-gradient(circle, rgba(15,23,42,0.05) 0%, transparent 70%);
      bottom:-250px; right:-250px; z-index:0;
    }
    .hero > .container{ position:relative; z-index:1; }
    .hero h1{
      font-weight:900;
      letter-spacing:-0.03em;
      line-height:1.05;
      font-size: clamp(2.5rem, 4vw, 3.75rem);
      margin-bottom: 1.5rem;
      background: linear-gradient(135deg, var(--text) 0%, #334155 100%);
      -webkit-background-clip:text; -webkit-text-fill-color: transparent;
      background-clip:text;
    }
    .hero p{ color: var(--text-light); font-size: 1.15rem; max-width: 600px; }

    .hero-card{
      background: var(--card-bg);
      border: 1px solid var(--border-light);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-lg);
      overflow: hidden;
      transform: perspective(1000px) rotateY(-5deg);
      transition: var(--transition);
      position:relative;
      z-index: 1;
    }
    .hero-card:hover{
      transform: perspective(1000px) rotateY(0deg);
      box-shadow: 0 40px 100px rgba(254,0,0,0.15);
    }
    .hero-img{
      width: 100%;
      height: clamp(300px, 50vh, 500px);
      object-fit: cover;
      display:block;
      transition: transform .5s ease;
    }
    .hero-card:hover .hero-img{ transform: scale(1.05); }

    .hero-bullets{
      display:grid; grid-template-columns: 1fr;
      gap:14px; margin: 28px 0;
    }
    .bullet{
      display:flex; gap:14px; align-items:flex-start;
      color: var(--text);
      font-weight:600;
      padding: 12px 16px;
      border-radius: var(--radius-sm);
      background: rgba(255,255,255,0.6);
      border: 1px solid var(--border);
      transition: var(--transition);
    }
    .bullet:hover{
      background: #fff;
      border-color: rgba(254,0,0,0.2);
      transform: translateX(5px);
      box-shadow: var(--shadow-sm);
    }
    .bullet i{ color: var(--accent); font-size: 1.1rem; margin-top: 2px; }

    /* Cards */
    .card-soft{
      background: var(--card-bg);
      border: 1px solid var(--border-light);
      border-radius: var(--radius);
      box-shadow: var(--shadow-sm);
      height: 100%;
      padding: 32px;
      transition: var(--transition);
      position: relative;
      overflow: hidden;
    }
    .card-soft::before{
      content:'';
      position:absolute; top:0; left:0;
      width:4px; height:100%;
      background: var(--gradient-accent);
      transform: scaleY(0);
      transform-origin: top;
      transition: transform .4s cubic-bezier(0.4,0,0.2,1);
    }
    .card-soft:hover{
      transform: translateY(-10px);
      box-shadow: var(--shadow);
    }
    .card-soft:hover::before{ transform: scaleY(1); }

    .icon-pill{
      width:56px; height:56px;
      border-radius: 18px;
      display:grid; place-items:center;
      background: rgba(254,0,0,0.08);
      border: 1px solid rgba(254,0,0,0.15);
      color: var(--accent);
      font-size: 1.4rem;
      flex: 0 0 auto;
      transition: var(--transition);
    }
    .card-soft:hover .icon-pill{
      background: var(--gradient-accent);
      color:#fff;
      transform: rotate(15deg) scale(1.1);
    }
    .muted{ color: var(--muted); font-size: .95rem; line-height: 1.6; }

    /* Contact */
    .contact-wrap{
      border-radius: var(--radius-lg);
      border: 1px solid var(--border-light);
      background: var(--card-bg);
      box-shadow: var(--shadow-lg);
      overflow:hidden;
      position: relative;
    }
    .contact-wrap::before{
      content:'';
      position:absolute; width:200px; height:200px;
      background: radial-gradient(circle, rgba(254,0,0,0.05) 0%, transparent 70%);
      top:-100px; right:-100px; z-index:0;
    }
    .contact-info{
      background: linear-gradient(135deg, rgba(254,0,0,0.03) 0%, transparent 100%);
      position: relative; z-index:1;
    }
    .form-control, .form-select{
      border-radius: 14px;
      border: 1px solid var(--border);
      padding: 14px 16px;
      font-size: 1rem;
      transition: var(--transition);
      background: #fff;
    }
    .form-control:focus, .form-select:focus{
      border-color: var(--accent);
      box-shadow: 0 0 0 4px rgba(254,0,0,0.1);
      transform: translateY(-2px);
    }

    /* Footer */
    footer{
      border-top: 1px solid var(--border-light);
      background: var(--card-bg);
      position: relative; overflow:hidden;
    }
    footer::before{
      content:'';
      position:absolute; width:400px; height:400px;
      background: radial-gradient(circle, rgba(254,0,0,0.03) 0%, transparent 70%);
      bottom:-200px; left:-200px; z-index:0;
    }
    footer > .container{ position: relative; z-index:1; }
    .footer-title{ font-weight:900; font-size: 1.8rem; letter-spacing: -0.02em; }
    .footer-title span{ color: var(--accent); position:relative; }
    .footer-title span::after{
      content:'';
      position:absolute; bottom:2px; left:0;
      width:100%; height:2px;
      background: var(--gradient-accent);
      border-radius:2px;
    }
    .footer-link{
      color: var(--muted);
      text-decoration:none;
      transition: var(--transition);
      padding:4px 0;
      display:inline-block;
      position:relative;
    }
    .footer-link::before{
      content:'';
      position:absolute; bottom:0; left:0;
      width:0; height:1px;
      background: var(--accent);
      transition: var(--transition);
    }
    .footer-link:hover{
      color: var(--accent);
      transform: translateX(5px);
    }
    .footer-link:hover::before{ width: 20px; }

    section { scroll-margin-top: 100px; }

    /* Scroll anim */
    .animate-on-scroll{
      opacity:0;
      transform: translateY(30px);
      transition: opacity .6s ease, transform .6s ease;
    }
    .animate-on-scroll.animated{ opacity:1; transform: translateY(0); }

    /* Gallery */
    .gal-gallery{ position: relative; }
    .gal-frame{
      height: clamp(280px, 50vh, 500px);
      background: var(--card-bg);
      border-radius: 20px;
      overflow:hidden;
      box-shadow: 0 20px 60px rgba(0,0,0,0.1);
      display:flex; align-items:center; justify-content:center;
      padding:10px;
      border: 1px solid var(--border-light);
      transition: var(--transition);
    }
    .gal-frame:hover{ box-shadow: 0 30px 80px rgba(0,0,0,0.15); transform: translateY(-5px); }
    .gal-img{
      width:auto !important; max-width:100%;
      height:auto !important; max-height:100%;
      object-fit: contain !important;
      object-position:center;
      display:block;
      cursor: zoom-in;
      transition: transform .5s ease;
    }
    .gal-img:hover{ transform: scale(1.02); }

    .gal-gallery .carousel-control-prev,
    .gal-gallery .carousel-control-next{
      z-index:20;
      width:60px; height:60px;
      top:50%;
      transform: translateY(-50%);
      opacity:1;
      background: rgba(255,255,255,0.9);
      border-radius: 50%;
      margin: 0 20px;
      box-shadow: 0 10px 30px rgba(0,0,0,0.1);
      border: 1px solid var(--border-light);
      transition: var(--transition);
    }
    .gal-gallery .carousel-control-prev:hover,
    .gal-gallery .carousel-control-next:hover{
      background:#fff;
      box-shadow: 0 15px 40px rgba(0,0,0,0.15);
      transform: translateY(-50%) scale(1.1);
    }
    .gal-gallery .gal-ctrl-icon{
      width:2.8rem; height:2.8rem;
      background-size: 60% 60%;
      filter: brightness(0.7);
    }
    .gal-gallery .carousel-indicators{ z-index:10; bottom:-60px; }
    .gal-gallery .carousel-indicators button{
      width:12px; height:12px;
      border-radius:50%;
      background: rgba(0,0,0,0.2);
      border:none;
      transition: var(--transition);
      margin: 0 6px;
    }
    .gal-gallery .carousel-indicators button.active{
      background: var(--accent);
      transform: scale(1.3);
    }

    /* Lightbox */
    #galLightbox .modal-content{ background: rgba(0,0,0,0.95); border:none; border-radius:0; }
    #galLightboxImg{ max-height: 90vh; width:100%; height:auto; object-fit: contain; background: transparent; }
    .gal-lightbox-nav{
      position:absolute; top:50%; transform: translateY(-50%);
      border:0; width:60px; height:60px; border-radius:50%;
      background: rgba(255,255,255,0.15);
      color:#fff; font-size: 32px; line-height: 60px;
      text-align:center; z-index:5; cursor:pointer;
      transition: var(--transition);
      backdrop-filter: blur(10px);
    }
    .gal-lightbox-nav:hover{ background: rgba(255,255,255,0.25); transform: translateY(-50%) scale(1.1); }

    /* Ofertas */
    .oferta-card{
      background: var(--card-bg);
      border: 1px solid var(--border-light);
      border-radius: var(--radius);
      box-shadow: var(--shadow-sm);
      overflow: hidden;
      transition: var(--transition);
      height: 100%;
      display:flex;
      flex-direction: column;
    }
    .oferta-card:hover{ transform: translateY(-10px); box-shadow: var(--shadow); }
    .oferta-media{
      width:100%;
      height: 240px;
      background: #fff;
      display:flex;
      align-items:center;
      justify-content:center;
      border-bottom: 1px solid var(--border-light);
      padding: 10px;
    }
    /* ✅ para que NO recorte: se ve según su contenido */
    .oferta-img{
      width: 100%;
      height: 100%;
      object-fit: contain;
      object-position: center;
      display:block;
      background: transparent;
    }
    .oferta-noimg{
      width:100%;
      height: 240px;
      display:grid;
      place-items:center;
      background: linear-gradient(135deg, rgba(254,0,0,.08), rgba(15,23,42,.02));
      border-bottom: 1px solid var(--border-light);
      color: var(--muted);
      font-weight: 700;
    }
    .oferta-body{ padding: 22px; flex: 1 1 auto; display:flex; flex-direction: column; }
    .oferta-title{ font-weight: 900; margin: 0 0 6px; }
    .oferta-price{ color: var(--accent); font-weight: 900; font-size: 1.15rem; margin-bottom: 10px; }
    .oferta-desc{ color: var(--muted); margin: 0 0 16px; }
    .oferta-actions{ margin-top:auto; }

    /* Responsive */
    @media (max-width: 991.98px){
      .section{ padding: 80px 0; }
      .hero{ padding-top: 120px; padding-bottom: 60px; }
      .hero-card{ transform:none; margin-top: 40px; }
      .hero-card:hover{ transform: translateY(-10px); }
    }
    @media (max-width: 767.98px){
      .section{ padding: 60px 0; }
      .section-title{ font-size: 2rem; }
      .hero h1{ font-size: 2.2rem; }
      .card-soft{ padding: 24px; }
      .gal-frame{ height: clamp(220px, 40vh, 350px); }
      .gal-gallery .carousel-control-prev,
      .gal-gallery .carousel-control-next{ width: 50px; height: 50px; margin: 0 10px; }
      .gal-lightbox-nav{ width: 50px; height: 50px; font-size: 28px; line-height: 50px; }
      .oferta-media{ height: 220px; }
      .oferta-noimg{ height: 220px; }
    }

    /* Scrollbar */
    ::-webkit-scrollbar{ width: 10px; }
    ::-webkit-scrollbar-track{ background: var(--soft); }
    ::-webkit-scrollbar-thumb{ background: var(--accent); border-radius: 5px; }
    ::-webkit-scrollbar-thumb:hover{ background: var(--accent-dark); }
    /* ===== FOOTER SOLIDO (override) ===== */
footer.footer-solid{
  position: relative;
  overflow: hidden;
  border-top: 0;
  background: linear-gradient(135deg,
    #070B14 0%,
    #0B1220 35%,
    #0F172A 70%,
    #0A0F1C 100%
  );
  color: rgba(255,255,255,0.92);
}

/* línea superior con acento */
footer.footer-solid::before{
  content:'';
  position:absolute; left:0; top:0; width:100%; height:1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
  z-index: 0;
}

/* glow rojo + glow frío */
footer.footer-solid::after{
  content:'';
  position:absolute; inset:-200px;
  background:
    radial-gradient(circle at 15% 75%, rgba(254,0,0,0.16) 0%, transparent 55%),
    radial-gradient(circle at 85% 25%, rgba(255,255,255,0.06) 0%, transparent 60%);
  filter: blur(8px);
  z-index: 0;
}

footer.footer-solid > .container{ position: relative; z-index: 1; }

/* texto y links dentro del footer */
footer.footer-solid .muted{
  color: rgba(255,255,255,0.68) !important;
}
footer.footer-solid .footer-link{
  color: rgba(255,255,255,0.72);
}
footer.footer-solid .footer-link:hover{
  color: #fff;
  transform: translateX(6px);
}
footer.footer-solid .footer-link::before{
  background: rgba(254,0,0,0.9);
}

/* título */
footer.footer-solid .footer-title{
  color:#fff;
}
footer.footer-solid .footer-title span{
  color: #fff;
}
footer.footer-solid .footer-title span::after{
  background: var(--gradient-accent);
}

/* íconos sociales en “pills” */
.footer-social{
  width:44px; height:44px;
  border-radius: 14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.85);
  transition: var(--transition);
}
.footer-social:hover{
  transform: translateY(-3px);
  background: rgba(254,0,0,0.14);
  border-color: rgba(254,0,0,0.35);
  color: #fff;
  box-shadow: 0 18px 50px rgba(254,0,0,0.18);
}

/* bloquecitos de contacto */
.footer-chip{
  display:flex; gap:10px; align-items:flex-start;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
}
.footer-chip i{
  color: rgba(255,255,255,0.92);
  margin-top: 2px;
}

/* barra final */
.footer-bottom{
  border-top: 1px solid rgba(255,255,255,0.10) !important;
}
.brand-mark {
  width: 48px;
  height: 48px;
  background: #e53935; /* rojo */
  border-radius: 12px;
}

.brand-logo-img {
  max-width: 70%;
  max-height: 70%;
  object-fit: contain;
}
.footer-logo {
  width: 36px;
  height: 36px;
  object-fit: contain;
}

/* ===== INLINE <style> BLOCK #2 ===== */
:root{
    --wac-accent: var(--accent, #fe0000);
    --wac-text: #0f172a;
    --wac-muted:#64748b;
    --wac-border: rgba(2,6,23,.10);
    --wac-shadow: 0 20px 60px rgba(2, 6, 23, .22);
  }

  .wac-wrap{
    position:fixed;
    right:18px;
    bottom:18px;
    z-index:9999;
    font-family: inherit;
  }

  /* botón WA oficial */
  .wac-fab{
    width:60px; height:60px;
    border-radius:999px;
    border:none;
    color:#fff;
    cursor:pointer;
    display:grid;
    place-items:center;
    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
    box-shadow: 0 14px 34px rgba(37, 211, 102, .45);
    transition: transform .22s ease, box-shadow .22s ease;
  }
  .wac-fab:hover{
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 18px 42px rgba(37, 211, 102, .55);
  }

  /* panel plano (sin gradient, sin backdrop) */
  .wac-panel{
    position:absolute;
    right:0;
    bottom:74px;
    width:min(360px, calc(100vw - 28px));
    border-radius:18px;
    overflow:hidden;
    border:1px solid var(--wac-border);
    background:#fff;
    box-shadow: var(--wac-shadow);
    transform: translateY(10px);
    opacity:0;
    pointer-events:none;
    transition: opacity .2s ease, transform .2s ease;
  }
  .wac-panel.is-open{
    transform: translateY(0);
    opacity:1;
    pointer-events:auto;
  }

  .wac-head{
    padding:14px;
    background:#fff;              /* sin gradiente */
    border-bottom:1px solid rgba(2,6,23,.08);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
  }
  .wac-left{ display:flex; align-items:center; gap:10px; }
  .wac-avatar{
    width:40px; height:40px;
    border-radius:12px;
    display:grid; place-items:center;
    font-weight:800;
    color:#fff;
    background: var(--wac-accent); /* accent plano */
  }
  .wac-title{ font-weight:800; color:var(--wac-text); line-height:1.05; }
  .wac-sub{ font-size:.85rem; color:var(--wac-muted); margin-top:2px; }

  .wac-x{
    width:36px; height:36px;
    border-radius:12px;
    border:1px solid rgba(2,6,23,.12);
    background:#fff;
    color:var(--wac-text);
    font-size:22px;
    cursor:pointer;
    display:grid; place-items:center;
    transition: transform .18s ease;
  }
  .wac-x:hover{ transform: scale(1.05); }

  .wac-body{
    padding:14px;
    background:#f8fafc; /* plano */
    display:flex;
    flex-direction:column;
    gap:10px;
    max-height: 44vh;
    overflow:auto;
  }

  .wac-bubble{
    max-width: 90%;
    padding:10px 12px;
    border-radius:14px;
    font-size:.95rem;
    line-height:1.35;
    box-shadow: 0 6px 14px rgba(2,6,23,.08);
    border:1px solid rgba(2,6,23,.08);
    background:#fff;
    color:var(--wac-text);
  }
  .wac-bubble.user{
    align-self:flex-end;
    background: rgba(254,0,0,.06);
    border-color: rgba(254,0,0,.16);
  }

  .wac-chips{ display:flex; gap:8px; flex-wrap:wrap; }
  .wac-chip{
    border:1px solid rgba(2,6,23,.12);
    background:#fff;
    color:var(--wac-text);
    padding:7px 10px;
    border-radius:999px;
    cursor:pointer;
    font-size:.86rem;
    transition: transform .15s ease, border-color .15s ease;
  }
  .wac-chip:hover{
    transform: translateY(-1px);
    border-color: rgba(254,0,0,.30);
  }

  .wac-compose{
    display:grid;
    grid-template-columns: 1fr auto;
    gap:10px;
    padding:10px;
    background:#fff;
    border-top:1px solid rgba(2,6,23,.08);
  }
  .wac-compose textarea{
    resize:none;
    border-radius:14px;
    border:1px solid rgba(2,6,23,.16);
    padding:10px 12px;
    font-family: inherit;
    font-size:.95rem;
    outline:none;
    transition: box-shadow .18s ease, border-color .18s ease;
  }
  .wac-compose textarea:focus{
    border-color: rgba(254,0,0,.55);
    box-shadow: 0 0 0 4px rgba(254,0,0,.10);
  }

  /* enviar: verde WA (plano, sin gradient si querés) */
  .wac-send{
    width:46px; height:46px;
    border:none;
    border-radius:14px;
    cursor:pointer;
    color:#fff;
    display:grid;
    place-items:center;
    background:#128C7E;
    box-shadow: 0 12px 26px rgba(18,140,126,.25);
    transition: transform .18s ease;
  }
  .wac-send:hover{ transform: translateY(-1px); }

  @media (max-width: 480px){
    .wac-wrap{ right:14px; bottom:14px; }
    .wac-panel{ bottom:72px; }
  }