/* MIXED CSS PACK */
/* Template: piscinasjm.com.ar/index.html */
/* Template mtime: 2026-01-31 17:27:28 */

/* 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://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Poppins:wght@600;700;800&display=swap */

/* ===== INLINE <style> BLOCK #1 ===== */
:root {
      --primary: #0ea5e9;
      --primary-dark: #0284c7;
      --primary-light: #38bdf8;
      --primary-soft: #f0f9ff;
      
      --secondary: #1e293b;
      --secondary-light: #334155;
      
      --accent: #06b6d4;
      --accent-light: #22d3ee;
      
      --neutral-50: #f8fafc;
      --neutral-100: #f1f5f9;
      --neutral-200: #e2e8f0;
      --neutral-300: #cbd5e1;
      --neutral-400: #94a3b8;
      --neutral-500: #64748b;
      --neutral-600: #475569;
      --neutral-700: #334155;
      --neutral-800: #1e293b;
      --neutral-900: #0f172a;
      
      --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08);
      --shadow-md: 0 6px 20px rgba(15, 23, 42, 0.12);
      --shadow-lg: 0 20px 50px rgba(14, 165, 233, 0.15);
      --shadow-xl: 0 30px 80px rgba(14, 165, 233, 0.2);
      
      --radius-sm: 10px;
      --radius-md: 18px;
      --radius-lg: 28px;
      --radius-xl: 40px;
      --radius-full: 9999px;
    }
    
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    html {
      scroll-behavior: smooth;
      scroll-padding-top: 80px;
    }
    
    body {
      font-family: 'Inter', system-ui, -apple-system, sans-serif;
      font-weight: 400;
      color: var(--neutral-800);
      background-color: white;
      line-height: 1.6;
      overflow-x: hidden;
    }
    
    h1, h2, h3, h4, h5, h6 {
      font-family: 'Poppins', sans-serif;
      font-weight: 700;
      line-height: 1.2;
      color: var(--neutral-900);
      letter-spacing: -0.02em;
    }
    
    /* ===== NAVBAR ===== */
    .navbar {
      padding: 1.25rem 0;
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(20px);
      border-bottom: 1px solid rgba(226, 232, 240, 0.6);
      transition: all 0.3s ease;
    }
    
    .navbar.scrolled {
      padding: 0.75rem 0;
      box-shadow: var(--shadow-md);
    }
    
    .navbar-brand {
      font-size: 1.75rem;
      font-weight: 900;
      background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }
    
    .navbar-brand i {
      font-size: 1.5rem;
    }
    
    .nav-link {
      font-weight: 600;
      color: var(--neutral-700);
      padding: 0.5rem 1rem;
      border-radius: var(--radius-full);
      transition: all 0.2s ease;
    }
    
    .nav-link:hover {
      color: var(--primary);
      background-color: var(--primary-soft);
    }
    
    .btn-whatsapp {
      background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
      color: white;
      font-weight: 700;
      padding: 0.75rem 1.5rem;
      border-radius: var(--radius-full);
      transition: all 0.3s ease;
      box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      border: none;
    }
    
    .btn-whatsapp:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(37, 211, 102, 0.4);
      color: white;
    }
    
    /* ===== HERO ===== */
    .hero-section {
      padding-top: 140px;
      padding-bottom: 100px;
      position: relative;
      overflow: hidden;
      background: linear-gradient(135deg, var(--neutral-50) 0%, white 50%, var(--primary-soft) 100%);
    }
    
    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 0.75rem;
      font-size: 0.9rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--primary);
      background: var(--primary-soft);
      padding: 0.5rem 1.25rem;
      border-radius: var(--radius-full);
      border: 1px solid rgba(14, 165, 233, 0.2);
      margin-bottom: 1.5rem;
    }
    
    .hero-title {
      font-size: 3.5rem;
      line-height: 1.1;
      margin-bottom: 1.5rem;
      color: var(--neutral-900);
    }
    
    @media (max-width: 768px) {
      .hero-title {
        font-size: 2.5rem;
      }
    }
    
    .hero-subtitle {
      font-size: 1.25rem;
      color: var(--neutral-600);
      margin-bottom: 2.5rem;
      max-width: 600px;
    }
    
    .hero-image-wrapper {
      background: white;
      border-radius: var(--radius-xl);
      padding: 1.5rem;
      box-shadow: var(--shadow-xl);
      border: 1px solid rgba(226, 232, 240, 0.8);
      overflow: hidden;
      transition: transform 0.3s ease;
    }
    
    .hero-image-wrapper:hover {
      transform: translateY(-10px);
    }
    
    .hero-image {
      width: 100%;
      height: auto;
      border-radius: var(--radius-lg);
    }
    
    .hero-stats {
      display: flex;
      gap: 2.5rem;
      margin-top: 3rem;
      flex-wrap: wrap;
    }
    
    .stat-item {
      text-align: center;
    }
    
    .stat-number {
      font-size: 2.5rem;
      font-weight: 800;
      background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      line-height: 1;
      margin-bottom: 0.25rem;
    }
    
    .stat-label {
      font-size: 0.9rem;
      color: var(--neutral-500);
      font-weight: 500;
    }
    
    /* ===== BOTONES ===== */
    .btn-primary {
      background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
      border: none;
      padding: 1rem 2.25rem;
      border-radius: var(--radius-full);
      font-weight: 700;
      transition: all 0.3s ease;
      box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
      color: white;
    }
    
    .btn-primary:hover {
      transform: translateY(-3px);
      box-shadow: 0 8px 24px rgba(14, 165, 233, 0.4);
      color: white;
      background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
    }
    
    .btn-outline-primary {
      border: 2px solid var(--primary);
      color: var(--primary);
      padding: 1rem 2.25rem;
      border-radius: var(--radius-full);
      font-weight: 700;
      transition: all 0.3s ease;
      background: transparent;
    }
    
    .btn-outline-primary:hover {
      background: var(--primary);
      color: white;
      transform: translateY(-3px);
      box-shadow: 0 8px 24px rgba(14, 165, 233, 0.3);
    }
    
    /* ===== SECCIONES ===== */
    .section {
      padding: 100px 0;
      position: relative;
    }
    
    .section-title {
      font-size: 2.75rem;
      margin-bottom: 1rem;
      position: relative;
      display: inline-block;
    }
    
    .section-title::after {
      content: '';
      position: absolute;
      bottom: -10px;
      left: 0;
      width: 60px;
      height: 5px;
      background: linear-gradient(90deg, var(--primary), var(--accent));
      border-radius: var(--radius-full);
    }
    
    .section-subtitle {
      font-size: 1.125rem;
      color: var(--neutral-600);
      max-width: 700px;
      margin-bottom: 3rem;
    }
    
    /* ===== CARDS DE SERVICIOS ===== */
    .service-card {
      background: white;
      border-radius: var(--radius-lg);
      padding: 2.5rem 2rem;
      height: 100%;
      transition: all 0.3s ease;
      border: 1px solid rgba(226, 232, 240, 0.8);
      position: relative;
      overflow: hidden;
      z-index: 1;
    }
    
    .service-card:hover {
      transform: translateY(-10px);
      box-shadow: var(--shadow-xl);
      border-color: transparent;
    }
    
    .service-icon {
      width: 70px;
      height: 70px;
      background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
      border-radius: var(--radius-md);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 1.5rem;
      color: white;
      font-size: 1.75rem;
      transition: transform 0.3s ease;
    }
    
    .service-card:hover .service-icon {
      transform: scale(1.1) rotate(5deg);
    }
    
    .service-card h3 {
      font-size: 1.5rem;
      margin-bottom: 1rem;
    }
    
    .service-card p {
      color: var(--neutral-600);
      margin-bottom: 0;
    }
    
    /* ===== GALERÍA ===== */
    .gallery-section {
      background: linear-gradient(135deg, var(--neutral-50) 0%, white 100%);
    }
    
    .gallery-carousel {
      border-radius: var(--radius-xl);
      overflow: hidden;
      box-shadow: var(--shadow-xl);
    }
    
    .gallery-img-container {
      height: 500px;
      overflow: hidden;
      position: relative;
    }
    
    @media (max-width: 768px) {
      .gallery-img-container {
        height: 350px;
      }
    }
    
    .gallery-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    .carousel-control-prev,
    .carousel-control-next {
      width: 60px;
      height: 60px;
      background: rgba(255, 255, 255, 0.9);
      border-radius: 50%;
      top: 50%;
      transform: translateY(-50%);
      opacity: 0;
      transition: all 0.3s ease;
      box-shadow: var(--shadow-md);
    }
    
    .gallery-carousel:hover .carousel-control-prev,
    .gallery-carousel:hover .carousel-control-next {
      opacity: 1;
    }
    
    .carousel-control-prev {
      left: 20px;
    }
    
    .carousel-control-next {
      right: 20px;
    }
    
    /* ===== ACCORDION ===== */
    .accordion-item {
      border: none;
      border-radius: var(--radius-md) !important;
      margin-bottom: 1rem;
      overflow: hidden;
      background: white;
      box-shadow: var(--shadow-sm);
      transition: all 0.3s ease;
    }
    
    .accordion-item:hover {
      box-shadow: var(--shadow-md);
    }
    
    .accordion-button {
      padding: 1.5rem;
      font-weight: 700;
      color: var(--neutral-900);
      background: white;
      border: none;
      box-shadow: none;
    }
    
    .accordion-button:not(.collapsed) {
      background: var(--primary-soft);
      color: var(--primary-dark);
      border-bottom: 3px solid var(--primary);
    }
    
    .accordion-button:focus {
      box-shadow: none;
      border-color: var(--primary);
    }
    
    .accordion-body {
      padding: 1.5rem;
      color: var(--neutral-700);
      background: white;
    }
    
    /* ===== FORMULARIO DE CONTACTO ===== */
    .contact-section {
      background: linear-gradient(135deg, var(--neutral-50) 0%, white 100%);
    }
    
    .contact-card {
      background: white;
      border-radius: var(--radius-xl);
      overflow: hidden;
      box-shadow: var(--shadow-xl);
    }
    
    .contact-info {
      background: linear-gradient(135deg, var(--neutral-900) 0%, var(--secondary) 100%);
      color: white;
      padding: 3rem;
      height: 100%;
    }
    
    @media (max-width: 991px) {
      .contact-info {
        padding: 2rem;
      }
    }
    
    .contact-info h3 {
      color: white;
      margin-bottom: 1.5rem;
    }
    
    .contact-item {
      display: flex;
      align-items: flex-start;
      gap: 1rem;
      margin-bottom: 1.5rem;
      padding-bottom: 1.5rem;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .contact-item:last-child {
      border-bottom: none;
      margin-bottom: 0;
      padding-bottom: 0;
    }
    
    .contact-icon {
      width: 50px;
      height: 50px;
      background: rgba(255, 255, 255, 0.1);
      border-radius: var(--radius-md);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.25rem;
      flex-shrink: 0;
    }
    
    .contact-details h5 {
      color: white;
      margin-bottom: 0.25rem;
      font-size: 1rem;
    }
    
    .contact-details p {
      color: rgba(255, 255, 255, 0.8);
      margin-bottom: 0;
    }
    
    .contact-details a {
      color: white;
      text-decoration: none;
      transition: color 0.2s ease;
    }
    
    .contact-details a:hover {
      color: var(--primary-light);
    }
    
    .contact-form {
      padding: 3rem;
    }
    
    @media (max-width: 991px) {
      .contact-form {
        padding: 2rem;
      }
    }
    
    .form-control, .form-select {
      padding: 1rem 1.25rem;
      border-radius: var(--radius-md);
      border: 1px solid var(--neutral-300);
      background: white;
      transition: all 0.2s ease;
    }
    
    .form-control:focus, .form-select:focus {
      border-color: var(--primary);
      box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.2);
    }
    
    .form-label {
      font-weight: 600;
      margin-bottom: 0.5rem;
      color: var(--neutral-800);
    }
    
    /* ===== FOOTER ===== */
    .footer {
      background: linear-gradient(135deg, var(--neutral-900) 0%, var(--secondary) 100%);
      color: white;
      padding: 80px 0 40px;
    }
    
    .footer-logo {
      font-size: 2rem;
      font-weight: 900;
      color: white;
      margin-bottom: 1.5rem;
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }
    
    .footer-description {
      color: rgba(255, 255, 255, 0.7);
      margin-bottom: 2rem;
    }
    
    .footer-heading {
      color: white;
      font-size: 1.25rem;
      margin-bottom: 1.5rem;
      position: relative;
      padding-bottom: 0.75rem;
    }
    
    .footer-heading::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 40px;
      height: 3px;
      background: linear-gradient(90deg, var(--primary), var(--accent));
      border-radius: var(--radius-full);
    }
    
    .footer-links {
      list-style: none;
      padding: 0;
    }
    
    .footer-links li {
      margin-bottom: 0.75rem;
    }
    
    .footer-links a {
      color: rgba(255, 255, 255, 0.7);
      text-decoration: none;
      transition: all 0.2s ease;
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }
    
    .footer-links a:hover {
      color: white;
      transform: translateX(5px);
    }
    
    .footer-divider {
      border-color: rgba(255, 255, 255, 0.1);
      margin: 3rem 0;
    }
    
    .footer-bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 1rem;
    }
    
    @media (max-width: 768px) {
      .footer-bottom {
        flex-direction: column;
        text-align: center;
      }
    }
    
    .copyright {
      color: rgba(255, 255, 255, 0.6);
      font-size: 0.9rem;
    }
    
    .social-links {
      display: flex;
      gap: 1rem;
    }
    
    .social-link {
      width: 44px;
      height: 44px;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      text-decoration: none;
      transition: all 0.2s ease;
    }
    
    .social-link:hover {
      background: var(--primary);
      transform: translateY(-3px);
    }
    
    /* ===== UTILITIES ===== */
    .text-gradient {
      background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    
    .bg-light {
      background-color: var(--neutral-50) !important;
    }
    
    .lead {
      font-size: 1.25rem;
      font-weight: 400;
      color: var(--neutral-600);
    }
    /* ===================== FIX EYEBROW (ARRIBA + CENTRADO) ===================== */
/* Pisa cualquier hack anterior (left/transform) y lo deja siempre arriba */
.eyebrow{
  /* reset de lo que te lo tiró a la derecha */
  position: static !important;
  left: auto !important;
  transform: none !important;

  /* esto lo obliga a estar "en su renglón" y centrado */
  display: table !important;          /* shrink-wrap + bloque */
  margin: 0 auto 1.25rem auto !important;

  /* mantiene tu look de pill */
  width: max-content !important;
  max-width: 100% !important;

  text-align: center !important;
}

/* Por si algún padre raro lo vuelve inline o flex: lo refuerza */
.section .eyebrow,
.hero-section .eyebrow,
.contact-section .eyebrow,
.gal-gallery .eyebrow{
  display: table !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* =================== FIN FIX EYEBROW =================== */

/* ===== FIX MOBILE NAV + HORIZONTAL OVERFLOW ===== */
html, body{
  width:100%;
  overflow-x:hidden;
}

/* Toggler visible siempre (no depende de navbar-light/dark) */
.navbar-toggler{
  border:0;
  padding:.35rem .5rem;
  border-radius:12px;
  background:rgba(14,165,233,.10);
}
.navbar-toggler:focus{ box-shadow:0 0 0 3px rgba(14,165,233,.18); }
.navbar-toggler-icon{
  width:1.5em;height:1.5em;
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(15,23,42,0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Brand no rompe el layout en phone */
@media (max-width: 991.98px){
  .navbar-brand{
    font-size:1.35rem;
    max-width:calc(100% - 72px);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .navbar-collapse{
    background:rgba(255,255,255,.98);
    border:1px solid rgba(226,232,240,.9);
    border-radius:18px;
    padding:12px;
    margin-top:12px;
    box-shadow: var(--shadow-md);
  }
  .navbar-nav{
    gap:.25rem !important;
    align-items:stretch !important;
  }
  .navbar-nav .nav-link{
    padding:.75rem 1rem;
  }
  .navbar-nav .btn-whatsapp{
    width:100%;
    justify-content:center;
  }
}
@media (min-width: 992px){
  .navbar-collapse{
    background:transparent;
    border:0;
    padding:0;
    margin-top:0;
    box-shadow:none;
  }
}
/* ===== END FIX ===== */

/* ===== INLINE <style> BLOCK #2 ===== */
.gal-gallery .carousel{max-width:980px;margin-inline:auto;position:relative}
  .gal-frame{
    height: clamp(220px, 48vh, 440px);
    background:#fff;border-radius:16px;overflow:hidden;
    box-shadow:0 12px 28px rgba(0,0,0,.12);
    display:flex;align-items:center;justify-content:center;padding:8px
  }
  .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
  }
  /* Controles circulares con más contraste */
  .gal-gallery .carousel-control-prev,
  .gal-gallery .carousel-control-next{
    z-index:20;width:50px;height:50px;top:50%;transform:translateY(-50%);
    opacity:1;background:rgba(0,0,0,.55);border-radius:50%;margin:0 12px
  }
  .gal-gallery .carousel-control-prev{left:0}
  .gal-gallery .carousel-control-next{right:0}
  .gal-gallery .gal-ctrl-icon{width:2.6rem;height:2.6rem;background-size:60% 60%}
  /* Indicadores: se sitúan fuera; agregamos espacio inferior para que no se corten */
  .gal-gallery .carousel-indicators{z-index:10;bottom:-50px}
  .gal-gallery .carousel-indicators button{
    width:10px;height:10px;border-radius:50%;
    background:rgba(0,0,0,.5);border:none
  }
  .gal-gallery .carousel-indicators button.active{background:#000}
  .gal-gallery{padding-bottom:56px} /* espacio para indicadores */
  
  /* Modal */
  #galLightbox .modal-content{background:#000}
  #galLightboxImg{max-height:86vh;width:100%;height:auto;object-fit:contain;background:#000}
  .gal-lightbox-nav{
    position:absolute;top:50%;transform:translateY(-50%);
    border:0;width:44px;height:44px;border-radius:999px;
    background:rgba(255,255,255,.18);color:#fff;font-size:30px;line-height:44px;text-align:center;z-index:5;cursor:pointer
  }
  .gal-lightbox-nav:hover{background:rgba(255,255,255,.28)}
  .gal-lightbox-nav.gal-prev{left:10px}
  .gal-lightbox-nav.gal-next{right:10px}
  
  /* Pequeños ajustes móviles */
  @media (max-width: 575.98px){
    .gal-frame{height: clamp(200px, 40vh, 360px)}
  }

/* ===== INLINE <style> BLOCK #3 ===== */
/* WhatsApp flotante – Piscinas JM */
:root{
  --wa-green:#25D366;
  --wa-green-dark:#128C7E;

  /* Acompaña tu paleta Piscinas JM */
  --wa-accent:#0ea5e9;
  --wa-accent-dark:#0284c7;

  --wa-bg:#ffffff;
  --wa-border:rgba(15,23,42,.10);
  --wa-soft:#f7fafc;
  --wa-text:#0f172a;
  --wa-muted:rgba(15,23,42,.65);
}

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

.wa-btn{
  width:60px;
  height:60px;
  border-radius:999px;
  border:none;
  background:linear-gradient(135deg,var(--wa-green),var(--wa-green-dark));
  color:#fff;
  display:grid;
  place-items:center;
  cursor:pointer;
  box-shadow:0 10px 30px rgba(37,211,102,.45);
  transition:transform .25s ease, box-shadow .25s ease;
}
.wa-btn:hover{
  transform:translateY(-3px) scale(1.05);
  box-shadow:0 14px 36px rgba(37,211,102,.55);
}

.wa-card{
  position:absolute;
  right:0;
  bottom:74px;
  width:min(360px,92vw);
  background:var(--wa-bg);
  border-radius:18px;
  border:1px solid var(--wa-border);
  box-shadow:0 18px 60px rgba(0,0,0,.22);
  overflow:hidden;
  transform:translateY(10px);
  opacity:0;
  pointer-events:none;
  transition:transform .25s ease, opacity .25s ease;
}
.wa-card[aria-modal="true"]{
  transform:translateY(0);
  opacity:1;
  pointer-events:auto;
}

.wa-head{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px;
  background:linear-gradient(135deg,var(--wa-accent),var(--wa-accent-dark));
  color:#fff;
}

.wa-avatar{
  width:42px;
  height:42px;
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.25);
  border-radius:12px;
  display:grid;
  place-items:center;
  overflow:hidden;
  position:relative;
}
.wa-avatar img{display:block; width:100%; height:100%; object-fit:cover;}
.wa-avatar-icon{font-size:18px; position:absolute;}
.wa-avatar:not(.wa-avatar-fallback) .wa-avatar-icon{display:none;}
.wa-avatar.wa-avatar-fallback{background:rgba(255,255,255,.16);}

.wa-title{font-weight:800; line-height:1;}
.wa-status{font-size:.85rem; opacity:.9;}

.wa-close{
  margin-left:auto;
  border:none;
  background:transparent;
  color:#fff;
  font-size:26px;
  line-height:1;
  cursor:pointer;
  padding:0 6px;
}

.wa-body{
  padding:14px;
  max-height:40vh;
  overflow:auto;
  background:var(--wa-soft);
  display:flex;
  flex-direction:column;
  gap:8px;
}

.wa-bubble{
  max-width:88%;
  padding:10px 12px;
  border-radius:14px;
  font-size:.95rem;
  box-shadow:0 4px 10px rgba(0,0,0,.07);
}
.wa-bot{
  background:#ffffff;
  border:1px solid var(--wa-border);
  align-self:flex-start;
  color:var(--wa-text);
}
.wa-user{
  background:rgba(14,165,233,.12);
  border:1px solid rgba(14,165,233,.25);
  align-self:flex-end;
  color:var(--wa-text);
}

.wa-compose{
  display:grid;
  grid-template-columns:1fr auto;
  gap:8px;
  padding:10px;
  border-top:1px solid var(--wa-border);
  background:#ffffff;
}
.wa-compose textarea{
  resize:none;
  border-radius:12px;
  padding:10px;
  border:1px solid var(--wa-border);
  font-family:inherit;
  color:var(--wa-text);
}
.wa-compose textarea:focus{
  outline:none;
  border-color:rgba(14,165,233,.65);
  box-shadow:0 0 0 3px rgba(14,165,233,.18);
}

.wa-send{
  background:linear-gradient(135deg,var(--wa-green),var(--wa-green-dark));
  color:#fff;
  border:none;
  border-radius:12px;
  padding:0 16px;
  cursor:pointer;
  transition:filter .2s ease;
}
.wa-send:hover{filter:brightness(1.05);}

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