/* MIXED CSS PACK */
/* Template: subli-market.com.ar/index.html */
/* Template mtime: 2025-08-22 17:15:47 */

/* 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.css */
/* external link (no embedded): https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&family=Montserrat:wght@400;600;700&display=swap */
/* external link (no embedded): https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css */

/* ===== INLINE <style> BLOCK #1 ===== */
/* ========= VARIABLES Y RESET ========= */
    :root{
      --primary:#7B6DCC;
      --primary-dark:#5E50B0;
      --secondary:#6A88D8;
      --accent:#E8B3C9;
      --gold:#D6A85A;
      --text:#2D2A3F;
      --text-light:#6C6A7C;
      --bg:#F7F3FA;
      --bg-light:#FFFFFF;
      --gradient-primary:linear-gradient(135deg,var(--primary),var(--secondary));
      --gradient-gold:linear-gradient(135deg,var(--gold),#F4C87B);
      /* extras para tienda */
      --primary-light:#9C91E6;
      --radius-sm:12px;
      --radius-md:16px;
      --radius-lg:24px;
      --shadow-sm:0 4px 12px rgba(0,0,0,.05);
      --shadow-md:0 8px 24px rgba(0,0,0,.08);
      --shadow-lg:0 12px 36px rgba(0,0,0,.12);
      --transition:all .3s cubic-bezier(.25,.8,.25,1);
    }

    #servicios .card-soft ul{margin:0}
    #servicios .card-soft li{margin:.15rem 0}
    #servicios .icon-pill i{line-height:1}
    #servicios .btn-outline-dark:hover{transform:translateY(-1px)}
    /* Proceso */
    #proceso .process-step{
      background: rgba(255,255,255,.6);
      border: 1px solid #eef0f6;
      border-radius: var(--radius-sm);
      transition: var(--transition);
    }
    #proceso .process-step:hover{
      transform: translateY(-4px);
      box-shadow: var(--shadow-md);
      background: #fff;
    }
    #proceso .step-num{
      width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
      border-radius: 50%;
      background: var(--gradient-primary);
      color: #fff; font-weight: 700; line-height: 1;
      box-shadow: var(--shadow-sm);
    }
    #proceso .step-head .fw-semibold{ color: var(--text); }
    
    /* título dentro de la card para armonizar */
    #proceso h3{
      background: var(--gradient-primary);
      -webkit-background-clip: text; background-clip: text; color: transparent;
      font-weight: 800;
    }


    *{margin:0;padding:0;box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      font-family:'Poppins',sans-serif;
      background:var(--bg);
      color:var(--text);
      line-height:1.6;
      overflow-x:hidden;
    }
    h1,h2,h3,h4,h5,h6{
      font-family:'Montserrat',sans-serif;
      font-weight:700;line-height:1.2;
    }

    /* ========= NAVBAR ========= */
    .navbar{
      background:rgba(255,255,255,.95);
      backdrop-filter:blur(10px);
      box-shadow:var(--shadow-sm);
      padding:.8rem 0;
      transition:var(--transition);
    }
    .navbar-scrolled{padding:.5rem 0;box-shadow:var(--shadow-md)}
    .navbar-brand{
      font-weight:800;font-size:1.6rem;
      background:var(--gradient-primary);
      -webkit-background-clip:text;background-clip:text;color:transparent;
      display:flex;align-items:center;gap:.5rem;
    }
    .navbar-brand i{font-size:1.8rem}
    .nav-link{
      font-weight:500;color:var(--text)!important;
      position:relative;padding:.5rem 1rem!important;transition:var(--transition);
    }
    .nav-link::after{
      content:'';position:absolute;bottom:0;left:50%;
      width:0;height:2px;background:var(--gradient-primary);
      transition:var(--transition);transform:translateX(-50%);
    }
    .nav-link:hover::after,.nav-link.active::after{width:70%}

    /* toggler visible sin navbar-light/dark */
    .navbar-toggler{border:none}
    .navbar-toggler:focus{box-shadow:none}
    .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='%232D2A3F' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    }
    /* Hace que el footer “sangre” a todo el ancho del viewport */
    .full-bleed{
      background: var(--gradient-primary);
      color: #fff;
      width: 100vw;
      position: relative;
      left: 50%;
      right: 50%;
      margin-left: -50vw;
      margin-right: -50vw;
      padding: 3rem 0 2rem; /* lo que ya usabas */
    }
    
    /* Ajustes visuales del footer (si no los tenías ya) */
    .footer-logo{font-size:1.8rem;font-weight:800;display:flex;align-items:center;gap:.5rem;justify-content:center}
    .footer-text{opacity:.9;max-width:700px;margin:0 auto}
    .footer a{text-decoration:none}
    .footer a:hover{text-decoration:underline}

    .btn-brand{
      background:var(--gradient-gold);color:#1d1a10;font-weight:600;border:none;
      border-radius:50px;padding:.6rem 1.2rem;box-shadow:var(--shadow-md);
      transition:var(--transition);display:inline-flex;align-items:center;gap:.5rem;
    }
    .btn-brand:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);color:#1d1a10}

    /* ========= HERO ========= */
    .hero{
      position:relative;padding:140px 0 100px;
      background:
        radial-gradient(1200px 600px at 10% -10%,rgba(232,179,201,.25),transparent 60%),
        radial-gradient(1000px 600px at 100% 0%,rgba(106,136,216,.2),transparent 60%),
        linear-gradient(180deg,#fff 0%,#fbf9ff 100%);
      overflow:hidden;
    }
    .hero::before{
      content:'';position:absolute;top:-100px;right:-100px;width:400px;height:400px;
      background:rgba(123,109,204,.08);border-radius:50%;z-index:0;
    }
    .hero::after{
      content:'';position:absolute;bottom:-150px;left:-150px;width:500px;height:500px;
      background:rgba(232,179,201,.08);border-radius:50%;z-index:0;
    }
    .hero-content{position:relative;z-index:2}
    .chip{
      display:inline-flex;align-items:center;gap:.5rem;background:#fff;border:1px solid #eee;
      border-radius:50px;padding:.5rem 1rem;box-shadow:var(--shadow-sm);font-weight:600;color:var(--primary);
      margin-bottom:1.5rem;animation:fadeInUp .6s ease-out;
    }
    .hero h1{
      font-weight:800;font-size:3.2rem;letter-spacing:-.5px;margin-bottom:1.5rem;
      background:var(--gradient-primary);-webkit-background-clip:text;background-clip:text;color:transparent;
      animation:fadeInUp .8s ease-out;
    }
    .hero p{font-size:1.1rem;color:var(--text-light);margin-bottom:2rem;animation:fadeInUp 1s ease-out}
    .hero-buttons{display:flex;gap:1rem;margin-bottom:1rem;animation:fadeInUp 1.2s ease-out}
    .hero-illustration{position:relative;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);transform:perspective(1000px) rotateY(-5deg) rotateX(5deg);transition:var(--transition);animation:fadeInRight 1s ease-out}
    .hero-illustration:hover{transform:perspective(1000px) rotateY(0) rotateX(0)}
    .hero-illustration img{width:100%;height:auto;display:block}

    /* ========= SECTIONS ========= */
    section{padding:5rem 0;position:relative}
    .section-title{
      font-size:2.5rem;font-weight:800;margin-bottom:1rem;
      background:var(--gradient-primary);-webkit-background-clip:text;background-clip:text;color:transparent;
      text-align:center;
    }
    .section-subtitle{color:var(--text-light);text-align:center;margin-bottom:3rem;max-width:700px;margin-left:auto;margin-right:auto}

    /* ========= CARDS ========= */
    .card-soft{
      background:var(--bg-light);border:none;border-radius:var(--radius-md);
      box-shadow:var(--shadow-sm);transition:var(--transition);height:100%;overflow:hidden;
    }
    .card-soft:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}
    .icon-pill{
      width:54px;height:54px;display:flex;align-items:center;justify-content:center;border-radius:14px;
      background:rgba(123,109,204,.1);color:var(--primary);font-size:1.4rem;flex-shrink:0;
    }

    /* ========= TICKER/CAROUSEL ========= */
    .ticker-section{position:relative;overflow:hidden}
    .ticker-wrap{position:relative;padding:1rem 0 3rem}
    .ticker{overflow:hidden;position:relative;border-radius:var(--radius-lg);box-shadow:var(--shadow-md);background:var(--bg-light);padding:1.5rem}
    .ticker-track{display:flex;gap:1.5rem;transition:transform .5s cubic-bezier(.25,.8,.25,1);will-change:transform;touch-action:pan-y}
    .slide{flex:0 0 320px;height:320px;border-radius:var(--radius-md);overflow:hidden;position:relative;background:#f1ecff;box-shadow:var(--shadow-sm);transition:var(--transition)}
    .slide:hover{transform:scale(1.03)}
    .slide img{width:100%;height:100%;object-fit:cover;display:block}
    .slide .caption{position:absolute;left:1rem;bottom:1rem;background:rgba(0,0,0,.7);color:#fff;padding:.5rem 1rem;border-radius:var(--radius-sm);font-size:.9rem;backdrop-filter:blur(4px)}
    .ticker-btn{
      position:absolute;top:50%;transform:translateY(-50%);width:50px;height:50px;border-radius:50%;border:none;
      background:var(--bg-light);box-shadow:var(--shadow-md);display:flex;align-items:center;justify-content:center;color:var(--primary);z-index:10;transition:var(--transition)
    }
    .ticker-btn:hover{background:var(--primary);color:#fff}
    .ticker-prev{left:-25px}
    .ticker-next{right:-25px}
    .ticker-dots{display:flex;gap:.5rem;justify-content:center;margin-top:1.5rem}
    .ticker-dot{width:10px;height:10px;border-radius:50%;background:#ddd;border:none;transition:var(--transition)}
    .ticker-dot.active{background:var(--primary);transform:scale(1.2)}

    /* ========= TIENDA (iframe) ========= */
    .tienda-section{padding:4rem 0;background:var(--bg-light)}
    .tienda-container{max-width:1200px;margin:0 auto;padding:0 15px}
    .tienda-header{text-align:center;margin-bottom:2rem}
    .tienda-header h2{font-size:2.2rem;color:var(--text);margin-bottom:1rem}
    .tienda-btn{
      display:inline-block;padding:12px 30px;background:linear-gradient(135deg,var(--primary),var(--primary-light));
      color:#fff;border-radius:50px;text-decoration:none;font-weight:600;box-shadow:0 4px 15px rgba(106,90,205,.3);transition:var(--transition)
    }
    .tienda-btn:hover{transform:translateY(-3px);box-shadow:0 8px 25px rgba(106,90,205,.4);color:#fff}
    .iframe-container{width:100%;border:1px solid rgba(0,0,0,.08);border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-sm)}
    #iframe-container{height:auto}
    #tienda-iframe{width:1px;min-width:100%;border:none;display:block}

    /* ========= FORM ========= */
    .contact::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='%237b6dcc' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E");
      opacity:.5;z-index:-1;
    }
    .form-control,.form-select,textarea{border-radius:var(--radius-sm);border:1px solid #e2e8f0;padding:.75rem 1rem;transition:var(--transition)}
    .form-control:focus,.form-select:focus,textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(123,109,204,.15)}

    /* ========= FOOTER ========= */
    footer{background:var(--gradient-primary);color:#fff;padding:3rem 0 2rem}
    .footer-content{display:flex;flex-direction:column;gap:1rem;text-align:center}
    .footer-logo{font-size:1.8rem;font-weight:800;display:flex;align-items:center;gap:.5rem;justify-content:center}
    .footer-text{opacity:.9;max-width:700px;margin:0 auto}
    .footer-bottom{margin-top:1rem}

    /* ========= ANIMATIONS ========= */
    @keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
    @keyframes fadeInRight{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}

    /* ========= RESPONSIVE ========= */
    @media (max-width:992px){
      .hero{padding:120px 0 80px}
      .hero h1{font-size:2.8rem}
      .ticker-btn{width:40px;height:40px}
      .ticker-prev{left:-20px}
      .ticker-next{right:-20px}
    }
    @media (max-width:768px){
      .hero{padding:100px 0 60px;text-align:center}
      .hero h1{font-size:2.3rem}
      .hero-buttons{flex-direction:column;align-items:center}
      .hero-illustration{transform:none;margin-top:2rem}
      .section-title{font-size:2rem}
      .slide{flex:0 0 280px;height:280px}
      .ticker-prev,.ticker-next{display:none}
    }
    @media (max-width:576px){
      .hero h1{font-size:2rem}
      .chip{font-size:.9rem}
      .section-title{font-size:1.8rem}
    }

/* ===== INLINE <style> BLOCK #2 ===== */
/* Contenedor de botones flotantes */
  .social-float-container {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 9999;
  display: flex;
  flex-direction: column-reverse;
  gap: 15px;
  align-items: flex-end;
  }
  
  /* Estilos base para todos los botones sociales */
  .social-float {
  position: relative;
  transition: all 0.3s ease;
  transform-style: preserve-3d;
  }
  
  .social-float:hover {
  transform: translateY(-5px) rotate(5deg) scale(1.1);
  }
  
  .social-button {
  display: block;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  position: relative;
  transition: all 0.3s ease;
  animation: float 3s ease-in-out infinite;
  color: white;
  text-decoration: none;
  }
  
  .social-button:hover {
  transform: scale(1.1);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
  }
  
  .social-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 30px;
  }
  
  .social-pulse {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  opacity: 0;
  animation: pulse 2s infinite;
  }
  
  .social-pulse-delayed {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  opacity: 0;
  animation: pulse 2s infinite 0.5s;
  }
  
  .social-tooltip {
  position: absolute;
  right: 90px;
  top: 50%;
  transform: translateY(-50%);
  background: white;
  color: #333;
  padding: 12px 15px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  width: 200px;
  text-align: center;
  }
  
  .social-tooltip small {
  display: block;
  font-size: 12px;
  color: #666;
  font-weight: normal;
  margin-top: 3px;
  }
  
  .tooltip-arrow {
  position: absolute;
  right: -10px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid white;
  }
  
  .social-float:hover .social-tooltip {
  opacity: 1;
  visibility: visible;
  right: 80px;
  }
  
  /* Estilos específicos para cada botón */
  .whatsapp-button {
  background: #25D366;
  box-shadow: 0 10px 25px rgba(37, 211, 102, 0.3);
  }
  
  .whatsapp-button:hover {
  background: #128C7E;
  box-shadow: 0 15px 30px rgba(37, 211, 102, 0.4);
  }
  
  .whatsapp-pulse {
  background: rgba(37, 211, 102, 0.6);
  }
  
  .whatsapp-pulse-delayed {
  background: rgba(37, 211, 102, 0.4);
  }
  
  .instagram-button {
  background: #E1306C;
  box-shadow: 0 10px 25px rgba(225, 48, 108, 0.3);
  }
  
  .instagram-button:hover {
  background: #C13584;
  box-shadow: 0 15px 30px rgba(193, 53, 132, 0.4);
  }
  
  .instagram-pulse {
  background: rgba(225, 48, 108, 0.6);
  }
  
  .instagram-pulse-delayed {
  background: rgba(193, 53, 132, 0.4);
  }
  
  .facebook-button {
  background: #1877F2;
  box-shadow: 0 10px 25px rgba(24, 119, 242, 0.3);
  }
  
  .facebook-button:hover {
  background: #166FE5;
  box-shadow: 0 15px 30px rgba(22, 111, 229, 0.4);
  }
  
  .facebook-pulse {
  background: rgba(24, 119, 242, 0.6);
  }
  
  .facebook-pulse-delayed {
  background: rgba(22, 111, 229, 0.4);
  }
  
  /* Animaciones */
  @keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0px); }
  }
  
  @keyframes pulse {
  0% { transform: scale(0.8); opacity: 0; }
  70% { transform: scale(1.3); opacity: 0.4; }
  100% { transform: scale(1.4); opacity: 0; }
  }
  
  /* Efecto de latido al cargar */
  @keyframes heartbeat {
  0% { transform: scale(1); }
  25% { transform: scale(1.1); }
  50% { transform: scale(1); }
  75% { transform: scale(1.1); }
  100% { transform: scale(1); }
  }
  
  /* Animación inicial para los botones */
  .social-button {
  animation: heartbeat 1.5s ease 2s 2, float 3s ease-in-out infinite 3s;
  }
  
  /* Mostrar botones con un pequeño retraso entre ellos */
  .instagram-float { animation: fadeInUp 0.5s ease 0.2s both; }
  .facebook-float { animation: fadeInUp 0.5s ease 0.4s both; }
  .whatsapp-float { animation: fadeInUp 0.5s ease 0.6s both; }
  
  @keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
  }
  
  /* Responsive */
  @media (max-width: 768px) {
  .social-float-container {
  bottom: 20px;
  right: 20px;
  }
  
  .social-button {
  width: 60px;
  height: 60px;
  }
  
  .social-icon {
  font-size: 25px;
  }
  
  .social-tooltip {
  display: none;
  }
  }