Álbum de páginas – nodo25

:root {
      /* ====== Colores ====== */
      --primary: #710002;
      --primary-dark: #000a45;
      --primary-light: #4a9dd4;
      --accent: #000a45;
      --accent-dark: #008787;
      --dark: #0f2230;
      --dark-light: #1a3447;
      --light: #f6f9fc;
      --light-dark: #e8f0f8;
      --white: #ffffff;
      --gray: #5b6b7a;
      --gray-light: #a0aebc;
      
      /* ====== Tamaños ====== */
      --tile-size: 500px;
      --radius: 16px;
      --radius-lg: 24px;
      --maxw: 1280px;
      --shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
      --shadow-lg: 0 15px 40px rgba(0, 0, 0, 0.15);
      --transition: all 0.3s ease;
    }
    
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    
    html, body {
      scroll-behavior: smooth;
      font-family: 'Open Sans', sans-serif;
      color: var(--dark);
      background: var(--white);
      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;
      margin-bottom: 0.5em;
    }
    
    a {
      color: var(--primary);
      text-decoration: none;
      transition: var(--transition);
    }
    
    a:hover {
      color: var(--primary-dark);
    }
    
    img {
      max-width: 100%;
      height: auto;
    }
    
    /* Layout util */
    .container {
      max-width: var(--maxw);
      margin: 0 auto;
      padding: 0 20px;
    }
    
    .section {
      padding: 100px 0;
      position: relative;
    }
    
    .section-title {
      font-size: clamp(28px, 4vw, 42px);
      text-align: center;
      margin-bottom: 50px;
      position: relative;
    }
    
    .section-title:after {
      content: '';
      display: block;
      width: 80px;
      height: 4px;
      background: linear-gradient(to right, var(--primary), var(--accent));
      margin: 15px auto 0;
      border-radius: 2px;
    }
    
    .lead {
      font-size: clamp(16px, 2.2vw, 20px);
      color: var(--gray);
      margin-bottom: 1.5rem;
    }
    
    .grid {
      display: grid;
      gap: 30px;
    }
    
    @media (min-width: 992px) {
      .grid-2 {
        grid-template-columns: 1fr 1fr;
      }
      
      .grid-3 {
        grid-template-columns: 1fr 1fr 1fr;
      }
      
      .grid-4 {
        grid-template-columns: 1fr 1fr 1fr 1fr;
      }
    }
    
    .text-center {
      text-align: center;
    }
    
    /* Botones */
    .btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 14px 28px;
      border-radius: var(--radius);
      border: none;
      font-weight: 600;
      cursor: pointer;
      transition: var(--transition);
      font-family: 'Montserrat', sans-serif;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      font-size: 15px;
      box-shadow: var(--shadow);
      position: relative;
      overflow: hidden;
    }
    
    .btn:before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
      transition: 0.5s;
    }
    
    .btn:hover:before {
      left: 100%;
    }
    
    .btn-primary {
      background: var(--primary);
      color: var(--white);
    }
    
    .btn-primary:hover {
      background: var(--primary-dark);
      color: var(--white);
      transform: translateY(-3px);
      box-shadow: var(--shadow-lg);
    }
    
    .btn-accent {
      background: var(--accent);
      color: var(--white);
    }
    
    .btn-accent:hover {
      background: var(--accent-dark);
      color: var(--white);
      transform: translateY(-3px);
      box-shadow: var(--shadow-lg);
    }
    
    .btn-ghost {
      background: transparent;
      border: 2px solid var(--primary);
      color: var(--primary);
    }
    
    .btn-ghost:hover {
      background: var(--primary);
      color: var(--white);
      transform: translateY(-3px);
      box-shadow: var(--shadow-lg);
    }
    
    /* Navbar */
    .nav {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 1000;
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(10px);
      box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
      transition: var(--transition);
    }
    
    .nav.scrolled {
      padding: 5px 0;
    }
    
    .nav-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 80px;
      transition: var(--transition);
    }
    
    .brand {
      display: flex;
      gap: 10px;
      align-items: center;
      font-weight: 800;
      color: var(--dark);
      font-size: 22px;
      font-family: 'Montserrat', sans-serif;
    }
    
    .brand i {
      color: var(--primary);
      font-size: 28px;
    }
    
    .menu {
      display: flex;
      gap: 30px;
      align-items: center;
    }
    
    .menu a {
      color: var(--dark);
      font-weight: 600;
      font-size: 15px;
      position: relative;
    }
    
    .menu a:after {
      content: '';
      position: absolute;
      bottom: -5px;
      left: 0;
      width: 0;
      height: 2px;
      background: var(--primary);
      transition: var(--transition);
    }
    
    .menu a:hover:after {
      width: 100%;
    }
    
    .burger {
      display: none;
      font-size: 26px;
      background: none;
      border: 0;
      color: var(--dark);
      cursor: pointer;
    }
    
    @media (max-width: 992px) {
      .burger {
        display: block;
      }
      
      .menu {
        position: fixed;
        top: 80px;
        left: 0;
        width: 100%;
        height: calc(100vh - 80px);
        background: var(--white);
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        padding: 40px 20px;
        gap: 25px;
        transform: translateX(100%);
        transition: transform 0.4s ease-in-out;
        box-shadow: -5px 0 20px rgba(0, 0, 0, 0.1);
      }
      
      .menu.open {
        transform: translateX(0);
      }
      
      .menu a {
        font-size: 18px;
      }
    }
    
    /* Hero */
    .hero {
      padding: 160px 0 100px;
      background: linear-gradient(135deg, rgba(10, 108, 173, 0.1) 0%, rgba(0, 163, 163, 0.1) 100%), url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="%23f6f9fc"/><path d="M0 50 L100 50 M50 0 L50 100" stroke="%23e8f0f8" stroke-width="1"/></svg>');
      position: relative;
      overflow: hidden;
    }
    
    .hero:before {
      content: '';
      position: absolute;
      top: -50%;
      right: -50%;
      width: 100%;
      height: 200%;
      background: radial-gradient(circle, rgba(10, 108, 173, 0.05) 0%, transparent 70%);
    }
    
    .hero-content {
      position: relative;
      z-index: 2;
    }
    
    .badge-soft {
      display: inline-flex;
      gap: 8px;
      align-items: center;
      background: rgba(232, 242, 251, 0.8);
      border: 1px solid rgba(213, 230, 247, 0.8);
      color: var(--primary-dark);
      padding: 8px 16px;
      border-radius: 30px;
      font-weight: 600;
      font-size: 14px;
      backdrop-filter: blur(5px);
      margin-bottom: 20px;
    }
    
    .hero h1 {
      font-size: clamp(32px, 5vw, 56px);
      line-height: 1.1;
      margin: 0 0 20px;
      color: var(--dark);
    }
    
    .hero p.lead {
      font-size: clamp(16px, 2.5vw, 20px);
      margin-bottom: 30px;
      max-width: 600px;
    }
    
    .cta {
      
/* ...cortado... */

/* Fuerzo 1 columna la grilla en phone */
          @media (max-width: 768px){
            #quienes .grid.grid-2{
              display:grid;
              grid-template-columns: 1fr !important;
              gap: 18px;
            }
          }
        
          /* Tarjeta */
          #quienes .enfoque-card{ padding-top:.5rem; }
        
          /* Lista como grid: 1 col en phone, 2 cols en ≥992px */
          #quienes .enfoque-list{
            display:grid;
            grid-template-columns: 1fr;
            gap: 10px 12px;
            margin: .25rem 0 0;
          }
          @media (min-width: 992px){
            #quienes .enfoque-list{ grid-template-columns: repeat(2, minmax(0,1fr)); }
          }
        
          /* Ítem */
          #quienes .enfoque-item{
            display:grid;
            grid-template-columns: 38px 1fr;
            gap: 10px;
            align-items:start;
            padding: 10px 12px;
            border-radius: 12px;
            background: #f7fbff; /* fondo suave */
            border: 1px solid rgba(13,110,253,.08);
          }
        
          /* Icono */
          #quienes .enfoque-ico{
            width: 38px; height: 38px; border-radius: 10px;
            display:grid; place-items:center;
            background: #e6f2ff; color: var(--accent, #0d6efd);
            box-shadow: 0 2px 8px rgba(13,110,253,.08);
            flex: 0 0 38px;
          }
          #quienes .enfoque-ico i{ font-size: 18px; line-height: 1; }
        
          /* Texto */
          #quienes .enfoque-tit{
            display:block; font-weight: 700; margin-top: 2px; margin-bottom: 2px;
          }
          #quienes .enfoque-txt{
            display:block; color:#4b5563; line-height:1.35;
          }
        
          /* Micro-ajustes móviles */
          @media (max-width:420px){
            #quienes .enfoque-item{ padding: 9px 10px; }
            #quienes .enfoque-tit{ font-size: .98rem; }
          }

/* Icono de encabezado de servicio */
  #servicios .card h3{
    display:flex; align-items:center; gap:.6rem; margin-bottom:.75rem;
  }
  .service-icon{
    width:40px; height:40px; border-radius:10px;
    display:grid; place-items:center; flex:0 0 40px;
    background:#e9f6ff;        /* fondo suave */
    box-shadow:0 2px 10px rgba(0,0,0,.05);
  }
  .service-icon i{ font-size:20px; line-height:1; }

  /* Variantes por servicio (colores alusivos) */
  .card--piscinas   .service-icon{ background:#e6f7ff; }
  .card--quinchos   .service-icon{ background:#fff3e6; }
  .card--repara     .service-icon{ background:#f1f5ff; }
  .card--mantenimiento .service-icon{ background:#eefbea; }

.flotantes-rrss{
    position:fixed; bottom:22px; right:18px; z-index:9999;
    display:flex; flex-direction:column; align-items:flex-end; gap:12px;
    font-family:inherit;
  }
  .flotantes-rrss .fab-item{
    position:relative; width:56px; height:56px; border-radius:50%;
    display:grid; place-items:center; text-decoration:none; color:#fff;
    box-shadow:0 10px 20px rgba(0,0,0,.16);
    transition:transform .2s ease;
  }
  .flotantes-rrss .fab-item:hover{ transform:translateY(-2px); }

  /* Etiqueta */
  .flotantes-rrss .fab-label{
    position:absolute; right:68px; top:50%; transform:translateY(-50%) translateX(6px);
    background:#111827; color:#fff; padding:.45rem .7rem; border-radius:999px;
    font-size:.85rem; box-shadow:0 6px 20px rgba(0,0,0,.2); white-space:nowrap;
    opacity:0; transition:opacity .18s ease, transform .18s ease;
  }
  .flotantes-rrss .fab-item:hover .fab-label{ opacity:1; transform:translateY(-50%) translateX(0); }

  /* Colores de cada red */
  .fab-wa{ background:#25D366; }
  .fab-ig{ background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); }
  .fab-fb{ background:#1877F2; }

  /* Mostrar SIEMPRE las etiquetas (opcional):
     agregá la clase 'show-labels' al contenedor .flotantes-rrss */
  .flotantes-rrss.show-labels .fab-label{
    opacity:1; transform:translateY(-50%) translateX(0);
  }

  /* Ajustes móviles */
  @media (max-width:420px){
    .flotantes-rrss{ bottom:18px; right:14px; gap:10px; }
    .flotantes-rrss .fab-item{ width:52px; height:52px; }
    .flotantes-rrss .fab-label{ font-size:.8rem; }
  }

:root {
      --bg: #FFFFFF;
      --card: #F8F9FB;
      --text: #0A1628;
      --muted: #4A5568;
      --line: rgba(26, 81, 146, .15);
      --brand: #1A5192;
      --brand-dark: #0D3857;
      --purple: #711E4C;
      --green: #759E25;
      --orange: #C43C1B;
      --red: #A33030;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box
    }

    /* ✅ Fix principal: evita scroll horizontal en mobile (html + body) */
    html,
    body {
      width: 100%;
      overflow-x: hidden;
    }

    /* ✅ Evita que textos largos rompan el layout */
    a,
    .link-item,
    .chip {
      overflow-wrap: anywhere;
      word-break: break-word;
    }

    /* ✅ Medios nunca más anchos que el viewport */
    img,
    svg,
    video,
    canvas {
      max-width: 100%;
      height: auto;
    }

    body {
      font-family: 'Inter', system-ui, -apple-system, sans-serif;
      background:
        radial-gradient(ellipse 1200px 600px at 20% -5%, rgba(26, 81, 146, .08), transparent 60%),
        radial-gradient(ellipse 1000px 500px at 85% 8%, rgba(113, 30, 76, .05), transparent 55%),
        radial-gradient(ellipse 800px 400px at 50% 100%, rgba(117, 158, 37, .04), transparent 50%),
        #FFFFFF;
      color: var(--text);
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    a {
      color: inherit;
      text-decoration: none;
      transition: all .3s ease
    }

    /* Navbar Premium */
    .navbar {
      background: rgba(255, 255, 255, .98);
      backdrop-filter: blur(20px) saturate(180%);
      border-bottom: 1px solid var(--line);
      box-shadow: 0 4px 24px rgba(0, 0, 0, .06);
      transition: all .4s cubic-bezier(.4, 0, .2, 1);
    }

    .navbar.scrolled {
      background: rgba(255, 255, 255, 1);
      box-shadow: 0 8px 32px rgba(0, 0, 0, .12);
    }

    .navbar-brand {
      color: var(--text) !important;
      font-weight: 800;
      letter-spacing: -.02em;
      transition: transform .3s ease;
    }

    .navbar-brand:hover {
      transform: translateY(-2px)
    }

    .nav-link {
      color: var(--muted) !important;
      font-weight: 600;
      position: relative;
      padding: .5rem 1rem !important;
      transition: all .3s ease;
    }

    .nav-link::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      width: 0;
      height: 2px;
      background: linear-gradient(90deg, var(--brand), var(--purple));
      transform: translateX(-50%);
      transition: width .3s ease;
    }

    .nav-link:hover {
      color: var(--text) !important
    }

    .nav-link:hover::after {
      width: 70%
    }

    .brand-logo {
      width: 33px;
      height: 33px;
      border-radius: 14px;
      overflow: hidden;
      border: 1px solid var(--line);
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
      box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
      transition: all .3s ease;
    }

    .brand-logo:hover {
      transform: scale(1.05);
      box-shadow: 0 6px 20px rgba(26, 81, 146, .2);
    }

    .brand-logo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    /* Botones Premium */
    .btn-brand {
      background: linear-gradient(135deg, var(--brand), var(--purple));
      border: 0;
      color: #fff;
      font-weight: 700;
      box-shadow: 0 8px 24px rgba(26, 81, 146, .3);
      position: relative;
      overflow: hidden;
      transition: all .4s cubic-bezier(.4, 0, .2, 1);
    }

    .btn-brand::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .3), transparent);
      transition: left .6s ease;
    }

    .btn-brand:hover {
      transform: translateY(-3px);
      box-shadow: 0 12px 32px rgba(26, 81, 146, .4);
    }

    .btn-brand:hover::before {
      left: 100%
    }

    .btn-outline-soft {
      border: 2px solid var(--line);
      color: var(--text);
      background: #fff;
      font-weight: 700;
      transition: all .3s ease;
    }

    .btn-outline-soft:hover {
      background: var(--card);
      border-color: var(--brand);
      color: var(--brand);
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(0, 0, 0, .08);
    }

    .section {
      padding: 100px 0
    }

    .eyebrow {
      display: inline-block;
      font-size: .8rem;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--brand);
      border: 1px solid var(--line);
      padding: .4rem .9rem;
      border-radius: 999px;
      background: rgba(26, 81, 146, .05);
      font-weight: 800;
      transition: all .3s ease;
    }

    .eyebrow:hover {
      background: rgba(26, 81, 146, .1);
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(26, 81, 146, .1);
    }

    .section-title {
      font-weight: 900;
      letter-spacing: -.03em;
      margin-top: 1rem;
      margin-bottom: .7rem;
      font-size: clamp(2rem, 5vw, 3.5rem);
      color: var(--text);
      background: linear-gradient(135deg, var(--text) 0%, var(--brand) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .section-subtitle {
      color: var(--muted);
      max-width: 760px;
      margin: 0 auto;
      font-size: 1.1rem;
      line-height: 1.8;
    }

    /* Cards Premium */
    .card-soft {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 24px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, .08);
      transition: all .4s cubic-bezier(.4, 0, .2, 1);
      position: relative;
      overflow: hidden;
    }

    .card-soft::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 2px;
      background: linear-gradient(90deg, transparent, var(--brand), transparent);
      opacity: 0;
      transition: opacity .3s ease;
    }

    .card-soft:hover {
      transform: translateY(-8px);
      box-shadow: 0 16px 48px rgba(0, 0, 0, .15);
      border-color: rgba(26, 81, 146, .3);
    }

    .card-soft:hover::before {
      opacity: 1
    }

    /* Hero Espectacular */
    .hero {
      padding-top: 140px;
      padding-bottom: 90px;
      position: relative;
      /* ✅ Fix: el pseudo-elemento con blur no genera overflow en mobile */
      overflow: hidden;
    }

    .hero::before {
      content: '';
      position: absolute;
      top: 15%;
      left: 50%;
      transform: translateX(-50%);
      width: 700px;
      height: 700px;
      background: radial-gradient(circle, rgba(26, 81, 146, .12), transparent 70%);
      border-radius: 50%;
      filter: blur(60px);
      pointer-events: none;
      animation: pulse 8s ease-in-out infinite;
    }

    @keyframes pulse {

      0%,
      100% {
        transform: translateX(-50%) scale(1);
        opacity: .7
      }

      50% {
        transform: translateX(-50%) scale(1.15);
        opacity: 1
      }
    }

    .hero h1 {
      font-weight: 950;
      letter-spacing: -.04em;
      line-height: 1.05;
      font-size: clamp(2.2rem, 6vw, 4.5rem);
      margin-bottom: 1.5rem;
      color: var(--text);
      animation: fadeInUp 1s ease-out;
    }

    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(30px)
      }

      to {
        opacity: 1;
        transform: translateY(0)
      }
    }

    .hero .lead {
      color: var(--muted);
      font-size: 1.15rem;
      li
/* ...cortado... */

:root{
      /* Colores del logo */
      --c-blue:#2f6bff;
      --c-mag:#b0126b;
      --c-orange:#ff6a00;
      --c-green:#54c233;

      --text:#0b0f14;                 /* negro */
      --muted:rgba(11,15,20,.68);
      --line:rgba(11,15,20,.12);
      --card:rgba(255,255,255,.55);
    }

    /* FOOTER REAL: compacto + pro */
    .footer-pro2{
      position:relative;
      padding: 26px 0 16px;
      color: var(--text);
      border-top: 1px solid var(--line);
      overflow:hidden;

      /* Fondo suave (no gigante, no empasta) */
      background:
        radial-gradient(900px 260px at 10% -10%, rgba(47,107,255,.22), transparent 60%),
        radial-gradient(900px 260px at 90% -10%, rgba(176,18,107,.18), transparent 60%),
        radial-gradient(900px 260px at 85% 120%, rgba(84,194,51,.18), transparent 60%),
        radial-gradient(900px 260px at 15% 120%, rgba(255,106,0,.18), transparent 60%),
        linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.35));
    }

    /* Barra fina con degradé (marca) */
    .footer-pro2::before{
      content:"";
      position:absolute;
      top:0; left:0; right:0;
      height:4px;
      background: linear-gradient(90deg, var(--c-blue), var(--c-mag), var(--c-orange), var(--c-green));
    }

    .footer-pro2 .wrap{
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 16px 18px;
      box-shadow: 0 10px 26px rgba(0,0,0,.08);
      backdrop-filter: blur(10px);
    }

    .footer-pro2 .brand{
      display:flex;
      align-items:center;
      gap:10px;
      margin-bottom: 6px;
    }

    .footer-pro2 .logo-dot{
      width: 34px;
      height: 34px;
      border-radius: 12px;
      background: linear-gradient(135deg, var(--c-blue), var(--c-mag), var(--c-orange), var(--c-green));
      box-shadow: 0 10px 18px rgba(0,0,0,.10);
      display:grid;
      place-items:center;
      flex: 0 0 auto;
    }
    .footer-pro2 .logo-dot svg{ width:18px; height:18px; display:block; }

    .footer-pro2 .brand h6{
      margin:0;
      font-weight:800;
      letter-spacing:.2px;
      font-size: 1rem;
      line-height: 1.1;
    }
    .footer-pro2 .tagline{
      margin:0;
      color: var(--muted);
      font-weight:600;
      font-size:.92rem;
    }

    .footer-pro2 .coltitle{
      font-weight:800;
      margin: 2px 0 10px;
      font-size:.95rem;
    }

    .footer-pro2 .links{
      display:flex;
      flex-direction:column;
      gap:8px;
    }

    .footer-pro2 a{
      color: var(--text);
      text-decoration:none;
      font-weight:650;
    }

    /* Link tipo “fila” compacta */
    .footer-pro2 .link-item{
      display:flex;
      align-items:center;
      gap:10px;
      padding:8px 10px;
      border-radius: 12px;
      border: 1px solid rgba(11,15,20,.10);
      background: rgba(255,255,255,.45);
      transition: transform .12s ease, background .12s ease, border-color .12s ease;
      width: fit-content;
      max-width: 100%;
      overflow-wrap:anywhere;
      word-break:break-word;
    }
    .footer-pro2 .link-item:hover{
      transform: translateY(-1px);
      background: rgba(255,255,255,.70);
      border-color: rgba(11,15,20,.18);
    }

    .footer-pro2 .ico{
      width: 16px;
      height: 16px;
      opacity: .9;
      flex: 0 0 auto;
    }

    /* Chips de secciones compactos */
    .footer-pro2 .chips{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
    }
    .footer-pro2 .chip{
      padding:7px 10px;
      border-radius: 999px;
      border: 1px solid rgba(11,15,20,.10);
      background: rgba(255,255,255,.45);
      font-weight:750;
      font-size: .9rem;
      transition: background .12s ease, transform .12s ease;
    }
    .footer-pro2 .chip:hover{
      background: rgba(255,255,255,.70);
      transform: translateY(-1px);
    }

    .footer-pro2 .divider{
      height:1px;
      background: var(--line);
      margin: 14px 0 10px;
    }

    .footer-pro2 .bottom{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      flex-wrap:wrap;
      color: var(--muted);
      font-weight:600;
      font-size: .9rem;
    }

    /* Responsive: en mobile apila prolijo */
    @media (max-width: 991px){
      .footer-pro2{ padding: 22px 0 14px; }
      .footer-pro2 .wrap{ padding: 14px 14px; }
      .footer-pro2 .link-item{ width: 100%; }
    }

/* Variables propias del widget (no te pisa el :root del sitio) */
    :root{
      --sa-brand:#1A5192;      /* azul logo */
      --sa-purple:#711E4C;     /* violeta logo */
      --sa-border:#e3e6ea;
      --sa-bg:#ffffff;
      --sa-muted:#6c757d;
    }

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

    .wa-btn{
      width:60px;
      height:60px;
      border-radius:50%;
      border:none;

      /* Verde oficial WhatsApp, queda bien siempre */
      background:linear-gradient(135deg,#25D366,#128C7E);

      color:#fff;
      display:grid;
      place-items:center;
      cursor:pointer;
      box-shadow:0 10px 30px rgba(37,211,102,.45);
      transition:transform .3s, box-shadow .3s;
    }
    .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);
      max-width:calc(100vw - 24px);
      background:var(--sa-bg);
      border-radius:18px;
      border:1px solid var(--sa-border);
      box-shadow:0 18px 60px rgba(0,0,0,.25);
      overflow:hidden;
      transform:translateY(10px);
      opacity:0;
      transition:.3s;
    }
    .wa-card[aria-modal="true"]{ transform:none; opacity:1; }

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

    .wa-avatar{
      width:40px;
      height:40px;
      background:#fff;
      border-radius:10px;
      display:grid;
      place-items:center;
      overflow:hidden;
    }
    .wa-avatar img{width:100%;height:100%;object-fit:cover;display:block}

    .wa-title{ font-weight:800; letter-spacing:-.2px; }
    .wa-status{ font-size:.85rem; opacity:.92; }

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

    .wa-body{
      padding:14px;
      max-height:40vh;
      overflow:auto;
      background:#f8f9fa;
      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,.08);
    }
    .wa-bot{
      background:#ffffff;
      border:1px solid var(--sa-border);
      align-self:flex-start;
    }
    .wa-user{
      background:#eaf2ff;
      border:1px solid rgba(26,81,146,.18);
      align-self:flex-end;
    }

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

    .wa-send{
      background:var(--sa-brand);
      color:#fff;
      border:none;
      border-radius:12px;
      padding:0 16px;
      cursor:pointer;
    }
    .wa-send:hover{ filter:brightness(1.05); }

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

:root {
    --brand: #e30709;
    --brand-light: rgba(227, 7, 9, 0.1);
    --brand-dark: #c20608;
    --ink: #0b1220;
    --ink-light: rgba(11, 18, 32, 0.7);
    --light-bg: #f8fafc;
    --card-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    --card-hover-shadow: 0 30px 60px rgba(227, 7, 9, 0.15);
    --transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.1);
  }

  /* ✅ FIX: evitar scroll horizontal en mobile (hamburguesa fuera de pantalla) */
  html, body { width: 100%; overflow-x: hidden; }
  *, *::before, *::after { box-sizing: border-box; }
  img, svg { max-width: 100%; height: auto; }

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

  /* Smooth Scrolling */
  html {
    scroll-behavior: smooth;
    scroll-padding-top: 90px;
  }

  /* Navbar Premium */
  .navbar {
    backdrop-filter: blur(20px) saturate(180%);
    background: rgba(255, 255, 255, 0.92) !important;
    border-bottom: 1px solid rgba(227, 7, 9, 0.08);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);
    transition: var(--transition);
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
  }

  /* ✅ FIX: que el brand NO empuje la hamburguesa fuera */
  .navbar > .container { flex-wrap: nowrap; }
  .navbar-brand {
    min-width: 0;
    flex: 1 1 auto;
    font-weight: 800;
    font-size: 1.6rem;
    background: linear-gradient(135deg, var(--brand) 0%, #ff2e2e 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -0.5px;
  }
  .navbar-brand .brand-text{
    display:block;
    min-width:0;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    font-size: 0.95rem;
    font-weight: 700;
  }
  .navbar-brand .brand-logo {
    height: 32px;
    width: auto;
    flex: 0 0 auto;
  }
  @media (max-width: 576px){
    .navbar-brand .brand-text{ max-width: 190px; }
  }
  @media (max-width: 380px){
    .navbar-brand .brand-text{ max-width: 150px; }
  }

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

  .nav-link:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 1rem;
    right: 1rem;
    height: 2px;
    background: var(--brand);
    transform: scaleX(0);
    transition: transform 0.3s ease;
    border-radius: 2px;
  }

  .nav-link:hover:after,
  .nav-link.active:after {
    transform: scaleX(1);
  }

  .navbar-toggler {
    flex: 0 0 auto;
    border: 1px solid rgba(227, 7, 9, 0.2);
    padding: 0.4rem 0.7rem;
  }

  .navbar-toggler:focus {
    box-shadow: 0 0 0 3px rgba(227, 7, 9, 0.1);
  }

  /* Hero Section Premium */
  .hero {
    padding: 100px 0 80px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #fef7f7 0%, #ffffff 50%, #f8fafc 100%);
  }

  .hero:before {
    content: '';
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(227, 7, 9, 0.08) 0%, rgba(227, 7, 9, 0) 70%);
    top: -300px;
    right: -200px;
    z-index: 0;
    pointer-events:none;
  }

  .hero:after {
    content: '';
    position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(227, 7, 9, 0.05) 0%, rgba(227, 7, 9, 0) 70%);
    bottom: -200px;
    left: -100px;
    z-index: 0;
    pointer-events:none;
  }

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

  .eyebrow {
    display: inline-block;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: 0.8rem;
    color: var(--brand);
    background: var(--brand-light);
    padding: 0.5rem 1.2rem;
    border-radius: 50px;
    margin-bottom: 1.5rem;
    border: 1px solid rgba(227, 7, 9, 0.15);
  }

  .hero-title {
    font-size: clamp(2.5rem, 5vw, 3.8rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: 1.5rem;
    background: linear-gradient(135deg, #0b1220 0%, #1a1f36 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .hero-subtitle {
    font-size: 1.2rem;
    color: var(--ink-light);
    line-height: 1.6;
    margin-bottom: 2.5rem;
    max-width: 600px;
  }
  .hero-img-container {
    position: relative;
    border-radius: 24px;
    overflow: visible;
    transform: perspective(1000px) rotateY(-5deg) rotateX(2deg);
    box-shadow:
      0 25px 50px rgba(0, 0, 0, 0.15),
      0 0 0 1px rgba(255, 255, 255, 0.1);
    transition: var(--transition);

    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
  }

  .hero-img-container:hover {
    transform: perspective(1000px) rotateY(0deg) rotateX(0deg);
    box-shadow:
      0 35px 70px rgba(227, 7, 9, 0.2),
      0 0 0 1px rgba(255, 255, 255, 0.1);
  }

  .hero-img {
    width: 100%;
    height: auto;
    max-height: 480px;
    object-fit: contain;
    display: block;
  }

  .floating-badge{
    position: absolute;
    bottom: 16px;
    left: 16px;

    padding: 10px 12px;
    border-radius: 14px;
    transform: scale(.9);
    transform-origin: bottom left;
  }

  .floating-badge .icon-pill{
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
  }

  .floating-badge .icon-pill i{ font-size: 16px; }

  .floating-badge .fw-bold{
    font-size: 13px;
    line-height: 1.1;
    margin: 0;
  }

  .floating-badge .small{
    font-size: 11px;
    line-height: 1.1;
  }

  @media (max-width: 991.98px){
    /* ✅ FIX: el transform del hero puede generar overflow lateral en algunos phones */
    .hero-img-container{ transform:none; }
    .hero-img-container{ padding-bottom: 64px; }

    .floating-badge{
      left: 50%;
      right: auto;
      bottom: -18px;
      transform: translateX(-50%);
      padding: 12px 14px;
      border-radius: 16px;
    }

    .floating-badge .icon-pill{ width: 34px; height: 34px; }
    .floating-badge .icon-pill i{ font-size: 18px; }

    .floating-badge .fw-bold{ font-size: 14px; line-height: 1.15; }
    .floating-badge .small{ font-size: 12px; line-height: 1.15; }
  }

  @media (min-width: 992px){
    .floating-badge{
      left: 16px;
      bottom: 16px;
      transform: none;
    }
  }

  /* Botones Premium */
  .btn {
    border-radius: 12px;
    font-weight: 600;
    padding: 0.875rem 2rem;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    border: none;
  }

  .btn:before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.7s;
  }

  .btn:hover:before { left: 100%; }

  .btn-primary {
    background: linear-gradient(135deg, var(--brand) 0%, #ff2e2e 100%);
    border: none;
    color: white;
    box-shadow: 0 10px 25px rgba(227, 7, 9, 0.3);
  }

  .btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(227, 7, 9, 0.4);
  }

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

  .btn-outline-primary:hover {
    background: var(--brand);
    color: white;
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(227, 7, 9, 0.2);
  }

  .btn-whatsapp {
    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
    border: none;
    color: white;
    font-weight: 600;
    box-shadow: 0 10px 25px rgba(37, 211, 102, 0.3);
/* ...cortado... */

/* Scope wa-*: no rompe tu CSS */
.wa-float{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:9999;
  font-family:inherit;
  max-width: 100vw; /* ✅ evita overflow por rounding */
}

/* Botón WhatsApp verde oficial */
.wa-btn{
  width:60px;
  height:60px;
  border-radius:50%;
  border:none;
  background:linear-gradient(135deg,#25D366,#128C7E);
  color:#fff;
  display:grid;
  place-items:center;
  cursor:pointer;
  box-shadow:0 10px 30px rgba(37,211,102,.45);
  transition:transform .3s, box-shadow .3s;
}
.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:#fff;
  border-radius:18px;
  border:1px solid rgba(0,0,0,.12);
  box-shadow:0 18px 60px rgba(0,0,0,.25);
  overflow:hidden;
  transform:translateY(10px);
  opacity:0;
  transition:.25s ease;
}
.wa-card[aria-modal="true"]{ transform:none; opacity:1; }

/* Header con accent rojo del sitio */
.wa-head{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px;
  background:linear-gradient(135deg,#e30709,#b70608);
  color:#fff;
}

.wa-avatar{
  width:40px;
  height:40px;
  background:#fff;
  border-radius:10px;
  display:grid;
  place-items:center;
  overflow:hidden;
}
.wa-title{ font-weight:800; letter-spacing:-.01em; }
.wa-status{ font-size:.85rem; opacity:.92; }

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

.wa-body{
  padding:14px;
  max-height:40vh;
  overflow:auto;
  background:#f8f9fa;
  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,.08);
}
.wa-bot{
  background:#fff;
  border:1px solid rgba(0,0,0,.10);
  align-self:flex-start;
}
.wa-user{
  background:rgba(227,7,9,.08);
  border:1px solid rgba(227,7,9,.18);
  align-self:flex-end;
}

.wa-compose{
  display:grid;
  grid-template-columns:1fr auto;
  gap:8px;
  padding:10px;
  border-top:1px solid rgba(0,0,0,.10);
  background:#fff;
}
.wa-compose textarea{
  resize:none;
  border-radius:12px;
  padding:10px;
  border:1px solid rgba(0,0,0,.12);
  font-family:inherit;
}
.wa-send{
  background:#e30709;
  color:#fff;
  border:none;
  border-radius:12px;
  padding:0 16px;
  cursor:pointer;
}
.wa-send:hover{ background:#b70608; }

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

:root{
            --bg-void:#05060a;
            --bg-glass: rgba(18,22,30,.88);
            --bg-glass-hover: rgba(28,34,46,.72);
            --accent-primary:#60a5fa;
            --accent-secondary:#818cf8;
            --accent-tertiary:#a78bfa;
            --accent-gradient: linear-gradient(135deg,#60a5fa 0%,#a78bfa 100%);
            --success:#22c55e;
            --danger:#ef4444;
            --warning:#f59e0b;

            --text-main:#f8fafc;
            --text-muted:#94a3b8;
            --text-dim:#64748b;

            --border-glass:1px solid rgba(255,255,255,.08);
            --border-glass-hover:1px solid rgba(255,255,255,.15);
            --glass-filter: blur(16px);

            --radius-xl:24px;
            --radius-lg:16px;
            --radius-md:12px;
            --radius-sm:8px;

            /* ✅ MAS ANCHA (como pediste) */
            --sidebar-width:380px;
            --sidebar-compact:80px;

            --transition-smooth: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
            --transition-bounce: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        }

        html,body{height:100%}
        body{
            background:var(--bg-void);
            color:var(--text-main);
            font-family:'Inter',sans-serif;
            margin:0;
            overflow-x:hidden;
            font-size:15px;
            line-height:1.35;
            background-image:
                radial-gradient(circle at 15% 50%, rgba(56,189,248,.04) 0%, transparent 28%),
                radial-gradient(circle at 85% 30%, rgba(139,92,246,.06) 0%, transparent 30%);
        }

        .text-muted,.text-body-secondary{ color:var(--text-muted)!important; }
        h1,h2,h3,h4,h5,h6{
            font-family:'Outfit',sans-serif;
            letter-spacing:-.02em;
            color:#fff;
        }
        .text-gradient{
            background:var(--accent-gradient);
            -webkit-background-clip:text;
            -webkit-text-fill-color:transparent;
            background-clip:text;
        }

        /* SCROLLBAR */
        ::-webkit-scrollbar{width:6px}
        ::-webkit-scrollbar-track{background:rgba(255,255,255,.03); border-radius:10px}
        ::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12); border-radius:10px}
        ::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.22)}

        /* SIDEBAR */
        .sidebar{
            width:var(--sidebar-width);
            height:calc(100vh - 24px);
            position:fixed;
            top:12px; left:12px;
            border-radius:var(--radius-xl);
            background:var(--bg-glass);
            backdrop-filter:var(--glass-filter);
            -webkit-backdrop-filter:var(--glass-filter);
            border:var(--border-glass);
            z-index:1000;
            display:flex;
            flex-direction:column;
            box-shadow:
                0 20px 60px rgba(0,0,0,.4),
                0 0 0 1px rgba(255,255,255,.03),
                inset 0 1px 0 rgba(255,255,255,.05);
            overflow:hidden;
            transition:transform .3s cubic-bezier(.34,1.56,.64,1);
        }

        .sidebar.compact{ width:var(--sidebar-compact); transition:var(--transition-smooth); }

        .sidebar.compact .sidebar-header .logo-text,
        .sidebar.compact .sidebar-section-title,
        .sidebar.compact .nav-item .nav-text,
        .sidebar.compact .widget-sub,
        .sidebar.compact details.sidebar-widget .widget-body,
        .sidebar.compact .sidebar-footer .user-info,
        .sidebar.compact .sidebar-footer .btn{
            display:none!important;
        }
        .sidebar.compact .nav-item a{ justify-content:center; padding:12px; }
        .sidebar.compact .nav-item a i{ margin-right:0; font-size:1.3rem; }
        .sidebar.compact .logo-rebote{ margin:0 auto; }

        .sidebar-header{
            padding:16px 18px;
            border-bottom:var(--border-glass);
            flex:0 0 auto;
            background:rgba(0,0,0,.2);
        }

        .logo-rebote{
            width:46px; height:46px;
            border-radius:50%;
            background:#fff;
            border:3px solid rgba(255,255,255,.15);
            box-shadow:
                0 0 20px rgba(255,255,255,.25),
                0 0 40px rgba(96,165,250,.2);
            animation:rebote 3s ease-in-out infinite;
            cursor:pointer;
            transition:var(--transition-smooth);
        }
        @keyframes rebote{
            0%,100%{transform:translate(0,0) rotate(0deg)}
            25%{transform:translate(3px,2px) rotate(2deg)}
            50%{transform:translate(-2px,3px) rotate(-2deg)}
            75%{transform:translate(2px,-1px) rotate(1deg)}
        }

        /* CONTENIDO SIDEBAR */
        .sidebar-content{
            flex:1 1 auto;
            min-height:0;
            display:flex;
            flex-direction:column;
            overflow:hidden;
        }

        /* ✅ cajas ARRIBA pero COMPACTAS */
        .sidebar-top{
            flex:0 0 auto;
            padding:10px 12px 8px;
            border-bottom:var(--border-glass);
            background:rgba(0,0,0,.13);
        }

        details.sidebar-widget{
            border:var(--border-glass);
            border-radius:var(--radius-lg);
            overflow:hidden;
            background:linear-gradient(135deg, rgba(30,41,59,.25) 0%, rgba(15,23,42,.25) 100%);
            margin-bottom:10px;
            transition:var(--transition-smooth);
        }
        details.sidebar-widget>summary{
            list-style:none;
            cursor:pointer;
            padding:11px 12px;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:10px;
            user-select:none;
            font-weight:800;
            color:#fff;
        }
        details.sidebar-widget>summary::-webkit-details-marker{display:none}

        details.sidebar-widget>summary::after{
            content:'';
            width:6px;height:6px;
            border-right:2px solid var(--text-muted);
            border-bottom:2px solid var(--text-muted);
            transform:rotate(45deg);
            transition:var(--transition-smooth);
            margin-right:4px;
        }
        details.sidebar-widget[open]>summary::after{
            transform:rotate(-135deg);
            border-color:var(--accent-primary);
        }

        .widget-sub{
            font-size:.76rem;
            color:var(--text-muted);
            font-weight:700;
            background:rgba(255,255,255,.05);
            padding:3px 8px;
            border-radius:999px;
            white-space:nowrap;
        }

        .widget-body{
            padding:10px 12px 12px;
            animation:fadeIn 0.2s ease-out;
        }
        @keyframes fadeIn{ from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:translateY(0)} }

        .card-elite{
            background:linear-gradient(180deg, rgba(30,41,59,.4) 0%, rgba(15,23,42,.4) 100%);
            backdrop-filter:blur(12px);
            border:var(--border-glass);
            border-radius:var(--radius-lg);
            box-shadow:0 12px 32px rgba(0,0,0,.3);
            overflow:hidden;
        }

        .card-header-elite{
            padding:11px 12px;
            border-bottom:1px solid rgba(255,255,255,.08);
            background:linear-gradient(90deg, rgba(255,255,255,.04) 0%, transparent 100%);
        }

        .stat-row{
            padding:6px 0;
            border-bottom:1px solid rgba(255,255,255,.07);
        }
        .stat-row:last-child{border-bottom:none}

        .stat-val{
            font-family:'Outfit',sans-serif;
            font-weight:800;
            color:#fff;
            font-size:.98rem;
        }

        .sidebar-secti
/* ...cortado... */

#fxProgress { position:absolute; bottom:0; left:0; width:100%; height:2px; background:rgba(255,255,255,0.1); }
        #fxProgress span { display:block; height:100%; background:var(--accent-primary); width:0; animation:loading 1s infinite; }
        @keyframes loading { 0%{width:0;left:0} 50%{width:50%} 100%{width:0;left:100%} }

: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(--shad
/* ...cortado... */

: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; }
  }

:root {
      --accent: <?= h($ACCENT) ?>;
      --accent-light: rgba(203, 159, 68, 0.12);
      --accent-dark: #a87c2a;
      --text: #111111;
      --text-muted: #5b5b5b;
      --light-bg: #faf9f7;
      --border: rgba(0,0,0,0.08);
      --shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
      --shadow-hover: 0 30px 80px rgba(0, 0, 0, 0.12);
      --transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
      --radius: 20px;
      --radius-large: 30px;
    }

    * {
      box-sizing: border-box;
    }

    body {
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      background-color: var(--light-bg);
      color: var(--text);
      line-height: 1.6;
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    h1, h2, h3, h4, h5, h6 {
      font-weight: 800;
      line-height: 1.2;
      letter-spacing: -0.02em;
    }

    h1, .display-1, .display-2, .display-3 {
      font-family: 'Playfair Display', serif;
    }

    .section-padding {
      padding: 120px 0;
    }

    @media (max-width: 991.98px) {
      .section-padding {
        padding: 80px 0;
      }
    }

    @media (max-width: 767.98px) {
      .section-padding {
        padding: 60px 0;
      }
    }

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

    .navbar-main.scrolled {
      padding: 12px 0;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    }

    .navbar-brand {
      font-family: 'Playfair Display', serif;
      font-size: 28px;
      font-weight: 700;
      color: var(--text);
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .navbar-brand span {
      background: var(--accent);
      color: #111;
      padding: 4px 10px;
      border-radius: 6px;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.5px;
    }

    .nav-link {
      font-weight: 600;
      color: var(--text) !important;
      padding: 10px 16px !important;
      border-radius: 10px;
      transition: var(--transition);
      position: relative;
    }

    .nav-link:hover, .nav-link.active {
      color: var(--accent) !important;
      background-color: var(--accent-light);
    }

    .nav-link::after {
      content: '';
      position: absolute;
      width: 0;
      height: 2px;
      background: var(--accent);
      bottom: 0;
      left: 16px;
      border-radius: 2px;
      transition: var(--transition);
    }

    .nav-link:hover::after, .nav-link.active::after {
      width: calc(100% - 32px);
    }

    /* Buttons */
    .btn-accent {
      background: var(--accent);
      border: 2px solid var(--accent);
      color: #111;
      font-weight: 700;
      padding: 14px 28px;
      border-radius: 12px;
      transition: var(--transition);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      letter-spacing: 0.3px;
    }

    .btn-accent:hover {
      background: var(--accent-dark);
      border-color: var(--accent-dark);
      transform: translateY(-3px);
      box-shadow: var(--shadow-hover);
      color: #111;
    }

    .btn-outline-accent {
      background: transparent;
      border: 2px solid var(--accent);
      color: var(--accent);
      font-weight: 700;
      padding: 14px 28px;
      border-radius: 12px;
      transition: var(--transition);
    }

    .btn-outline-accent:hover {
      background: var(--accent);
      border-color: var(--accent);
      color: #111;
      transform: translateY(-3px);
      box-shadow: var(--shadow-hover);
    }

    /* Hero Section */
    .hero-section {
      padding-top: 160px;
      padding-bottom: 120px;
      position: relative;
      overflow: hidden;
    }

    .hero-section::before {
      content: '';
      position: absolute;
      width: 600px;
      height: 600px;
      background: radial-gradient(circle, rgba(203, 159, 68, 0.08) 0%, rgba(203, 159, 68, 0) 70%);
      top: -200px;
      right: -200px;
      z-index: 0;
      border-radius: 50%;
    }

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

    .eyebrow {
      display: inline-block;
      padding: 10px 20px;
      border-radius: 100px;
      background: rgba(255, 255, 255, 0.9);
      border: 1px solid var(--border);
      color: var(--text);
      font-weight: 700;
      font-size: 15px;
      letter-spacing: 0.5px;
      backdrop-filter: blur(10px);
      margin-bottom: 30px;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03);
    }

    .hero-title {
      font-size: 4rem;
      font-weight: 700;
      line-height: 1.1;
      margin-bottom: 30px;
      background: linear-gradient(135deg, #111 0%, #333 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    @media (max-width: 991.98px) {
      .hero-title {
        font-size: 3rem;
      }
    }

    @media (max-width: 767.98px) {
      .hero-title {
        font-size: 2.5rem;
      }
    }

    .hero-card {
      background: rgba(255, 255, 255, 0.95);
      border: 1px solid rgba(255, 255, 255, 0.3);
      border-radius: var(--radius-large);
      padding: 40px;
      backdrop-filter: blur(20px);
      box-shadow: var(--shadow);
      transition: var(--transition);
    }

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

    .feature-list li {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 15px;
      font-weight: 500;
    }

    .feature-list li i {
      color: var(--accent);
      font-size: 18px;
    }

    .hero-image-container {
      position: relative;
      border-radius: var(--radius-large);
      overflow: hidden;
      box-shadow: var(--shadow);
      transform: perspective(1000px) rotateY(-5deg) rotateX(2deg);
      transition: var(--transition);
    }

    .hero-image-container:hover {
      transform: perspective(1000px) rotateY(0deg) rotateX(0deg);
    }

    .hero-image {
      width: 100%;
      height: 600px;
      object-fit: cover;
      object-position: center;
    }

    /* Cards */
    .card-elegant {
      background: #fff;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      overflow: hidden;
      transition: var(--transition);
      height: 100%;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
    }

    .card-elegant:hover {
      transform: translateY(-15px);
      box-shadow: var(--shadow-hover);
      border-color: rgba(203, 159, 68, 0.3);
    }

    .product-image-wrapper {
      aspect-ratio: 1 / 1;
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 30px;
      overflow: hidden;
      position: relative;
    }

    .product-image {
      width: 100%;
      height: 100%;
      object-fit: contain;
      transition: var(--transition);
    }

    .card-elegant:hover .product-image {
      transform: scale(1.05);
    }

    .product-price {
      font-size: 1.5rem;
      font-weight: 800;
      color: var(--text);
    }

    .product-category {
      display: inline-block;
      background: var(--accent-light);
      color: var(--accent-dark);
      padding: 6px 14px;
      border-radius: 100px;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.3px;
      border: 1px solid rgba(203, 159, 68, 0.2);
    }

    /* Section Headers */
    .section-header {
      text-align: center;
      margin-bottom: 70p
/* ...cortado... */