:root{
      --brand:   #f97316;
      --brand-2: #1e40af;
      --brand-2-light: #3b82f6;

      --brand-rgb: 249,115,22;
      --brand2-rgb: 30,64,175;

      --brand-gradient: linear-gradient(135deg, var(--brand), var(--brand-2));
      --brand-gradient-light: linear-gradient(135deg, rgba(249,115,22,0.10), rgba(30,64,175,0.10));

      --bg:   #ffffff;
      --bg-alt: #f8fafc;
      --ink:  #0f172a;
      --muted:#475569;
      --line: #e2e8f0;
      --line-light: #f1f5f9;

      --shadow-lg: 0 20px 50px rgba(2,6,23,.12);
      --radius-xl: 24px;
      --radius-lg: 16px;
      --radius-md: 12px;

      --stage-max: 1160px;
      --left-max:  560px;
      --right-max: 420px;

      /* Escala de la vitrina (vista previa) */
      --preview-scale: 0.78;
    }

    *,*::before,*::after{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      color:var(--ink);
      font:16px/1.5 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans";
      -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
      background:
        radial-gradient(circle at 0% 0%, rgba(var(--brand-rgb),.03) 0%, transparent 50%),
        radial-gradient(circle at 100% 0%, rgba(30,64,175,.03) 0%, transparent 50%),
        radial-gradient(circle at 100% 100%, rgba(var(--brand-rgb),.02) 0%, transparent 50%),
        radial-gradient(circle at 0% 100%, rgba(30,64,175,.02) 0%, transparent 50%),
        var(--bg);
    }
    img{max-width:100%; display:block}
    html.no-aos [data-aos]{ opacity:1 !important; transform:none !important; }

    .topbar{
      background: linear-gradient(90deg, var(--brand), var(--brand-2));
      height: 6px; width: 100%; position: relative; overflow: hidden;
    }
    .topbar::after{
      content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
      animation: shimmer 3s infinite linear;
    }
    @keyframes shimmer { 0% { left: -100%; } 100% { left: 100%; } }

    .stage{ max-width: var(--stage-max); margin-inline:auto; padding: clamp(14px, 2.6vw, 24px); }

    .header{ padding: 20px 0 16px; text-align:center; position: relative; margin-bottom: 10px; }
    .header::before{
      content:""; position:absolute; top: 0; left: 50%; transform: translateX(-50%);
      width: 140px; height: 8px; border-radius: 0 0 8px 8px;
      background: var(--brand-gradient); box-shadow: 0 6px 12px rgba(var(--brand-rgb), 0.2);
    }
    .brand{ width:min(420px, 92vw); margin: 0 auto; border-radius: 12px; filter: drop-shadow(0 8px 16px rgba(0,0,0,0.1)); }

    .hero{
      border: 1px solid var(--line); border-radius: var(--radius-xl);
      background: #fff; box-shadow: var(--shadow-lg);
      padding: clamp(20px,3vw,32px); position: relative; overflow: hidden; margin-bottom: 30px;
    }
    .hero::before{
      content:""; position:absolute; inset: -20% -20% auto auto; width: 70%; height: 80%;
      transform: rotate(-12deg);
      background:
        radial-gradient(closest-side, rgba(var(--brand-rgb),.05) 0%, transparent 70%),
        radial-gradient(closest-side, rgba(var(--brand2-rgb),.04) 0%, transparent 70%);
      pointer-events:none;
    }

    .hero-grid{
      display:grid;
      gap: clamp(20px, 3vw, 32px);
      grid-template-columns: minmax(280px, var(--left-max)) minmax(280px, var(--right-max));
      justify-content:center;
      align-items:center;
    }
    @media (max-width:980px){
      .hero-grid{ grid-template-columns: 1fr; gap: 24px; }
    }

    .panel{
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      padding: clamp(18px,2.5vw,24px);
      background: #fff;
      box-shadow: 0 4px 12px rgba(0,0,0,0.03);
    }

    .title{
      font-size:clamp(1.7rem, 3.5vw, 2.3rem);
      font-weight:900;
      line-height:1.15;
      margin:0 0 12px;
      letter-spacing:.2px;
      background: var(--brand-gradient);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }
    .title-underline{
      height:6px; width:120px; border-radius:999px; margin:8px 0 14px;
      background: var(--brand-gradient); box-shadow: 0 6px 14px rgba(var(--brand-rgb),.25); position: relative;
    }
    .title-underline::after{
      content: ""; position: absolute; top: 0; left: 0; width: 40px; height: 100%;
      background: rgba(255,255,255,0.5); border-radius: 999px; animation: pulse 2s infinite ease-in-out;
    }
    @keyframes pulse { 0% { left: 0; } 50% { left: calc(100% - 40px); } 100% { left: 0; } }

    .version-badge{
      display:inline-flex; align-items:center; gap:.5ch; vertical-align:middle;
      background: var(--brand-gradient); color:#fff; padding:.5rem .9rem; border-radius:999px;
      font-weight:800; font-size:.9rem; box-shadow:0 8px 18px rgba(var(--brand-rgb), .28);
      transform: translateY(-2px);
    }

    .lead{ margin:14px 0 20px; color:var(--muted); font-size:clamp(1.05rem, 2.2vw, 1.15rem); line-height: 1.6; }

    .cta{ display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin: 18px 0 16px; }

    .btn{
      display:inline-flex; align-items:center; gap:.7rem; padding: 1rem 1.5rem;
      border-radius: var(--radius-md); text-decoration:none; font-weight:900; white-space:nowrap; border: none;
      background: var(--brand-gradient); color:#fff; box-shadow:0 14px 30px rgba(var(--brand-rgb), .30);
      transition: transform .2s ease, box-shadow .2s ease; cursor:pointer; position: relative; overflow: hidden;
    }
    .btn::after{
      content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
      transition: left 0.5s;
    }
    .btn:hover{ transform: translateY(-3px); box-shadow:0 20px 40px rgba(var(--brand-rgb), .38); }
    .btn:hover::after{ left: 100%; }
    .btn:active{ transform: translateY(0) }
    .btn:focus-visible{ outline:3px solid rgba(var(--brand2-rgb), .35); outline-offset:3px }

    .btn-outline{
      background:#fff; border:2px solid var(--brand-2); color: var(--brand-2);
      box-shadow: 0 10px 22px rgba(var(--brand2-rgb), .10);
    }
    .btn-outline:hover{ background: rgba(var(--brand2-rgb), 0.05); box-shadow: 0 14px 28px rgba(var(--brand2-rgb), .16); }

    .meta{ color:var(--muted); font-size:.95rem; margin-top:6px; display:flex; align-items:center; gap: 8px; }
    .meta::before{ content:"ℹ️"; font-size: .8rem; }
    .meta-strong{ font-weight:800; }

    /* ===== BENEFICIOS ===== */
    .benefits-wrap{ margin-top: 18px; }
    .benefits{
      display:grid;
      gap:18px;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      align-items: stretch;
    }
    @media (min-width: 1200px){
      .benefits{ grid-template-columns: repeat(3, 1fr); }
    }

    .info{
      border: 1px solid var(--line); border-radius: var(--radius-md);
      padding: clamp(14px,2vw,18px); background: #fff; transition: all 0.2s ease; position: relative; overflow: hidden;
      min-height: 120px; display:flex; flex-direction:column; justify-content:flex-start;
    }
    .info::before{
      content:""; position:absolute; top:0; left:0; width:4px; height:100%;
      background: var(--brand-gradient); transform: scaleY(0); transition: transform 0.3s ease;
    }
    .info:hover{ transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,0.08); }
    .info:hover::before{ transform: scaleY(1); }

    .info h3{
      margin:0 0 8px;
      font-size:1.08rem;
      font-weight:800;
      display:flex; align-items:center; gap:8px;
      white-space: nowrap; word-break: keep-all; overflow-wrap: normal; hyphens: none;
    }
    @media (max-width:420px){ .info h3{ white-space: normal; } }
    .info h3 i{ color: var(--brand-2); }
    .info p{ margin:0; color:var(--muted); font-size:.98rem; line-height: 1.5; }

    /* ===== VITRINA (Vista previa) ===== */
    .showcase{
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-lg);
      background: var(--brand-gradient-light);
      padding: 16px;
      position: relative;
      overflow: hidden;
      height: auto;
      display:flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .showcase::before{
      content:""; position:absolute; top:0; left:0; width:100%; height:100%;
      background:
        radial-gradient(circle at 30% 70%, rgba(var(--brand-rgb), 0.05) 0%, transparent 50%),
        radial-gradient(circle at 70% 30%, rgba(var(--brand2-rgb), 0.05) 0%, transparent 50%);
      pointer-events:none;
    }
    .showcase-ratio{
      position:relative;
      width:  calc(264px * var(--preview-scale));
      height: calc(584px * var(--preview-scale));
      overflow: visible;
      border-radius: 24px;
      background:#fff;
      display:flex;
      align-items:center;
      justify-content:center;
      box-shadow: 0 12px 30px rgba(0,0,0,0.15);
      border: 1px solid var(--line-light);
      margin: 0 auto;
    }
    .showcase-ratio img{
      width: 100%;
      height: 100%;
      object-fit: contain;
      object-position: center;
      border-radius: 22px;
    }

    /* Secciones */
    .section{ margin:clamp(24px,4vw,36px) auto 0; padding-top:clamp(16px,3vw,24px); border-top:1px solid var(--line); max-width:var(--stage-max); }
    .section h2{
      margin:0 0 16px; font-size:clamp(1.3rem,2.8vw,1.8rem); font-weight:900; color: var(--brand-2);
      display:flex; align-items:center; gap: 10px;
    }
    .section h2::before{ content:""; width: 6px; height: 24px; background: var(--brand-gradient); border-radius: 999px; }
    .cols{ display:grid; gap:clamp(16px,2.5vw,24px); grid-template-columns:minmax(280px,1fr) minmax(260px,.8fr); }
    @media (max-width:980px){ .cols{ grid-template-columns:1fr; gap: 20px; } }

    .card{
      border:1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(16px,2.5vw,22px); background:#fff;
      box-shadow: 0 8px 20px rgba(2,6,23,.05); transition: all 0.2s ease;
    }
    .card:hover{ box-shadow: 0 12px 28px rgba(2,6,23,.08); transform: translateY(-2px); }

    table{ width:100%; border-collapse:collapse; font-size:.98rem; border-radius: 10px; overflow: hidden; }
    th,td{ text-align:left; padding:.75rem .8rem; border-bottom:1px solid var(--line-light) }
    th{ font-weight:800; background: var(--brand-gradient-light); color: var(--brand-2); }
    tr:last-child td{ border-bottom: none; }

    /* details colapsados por defecto */
    details{ border:1px solid var(--line); border-radius: var(--radius-md); padding:.9rem 1rem; background:#fff; transition: all 0.2s ease; }
    details + details{ margin-top:12px }
    details[open]{ box-shadow: 0 6px 16px rgba(0,0,0,0.05); border-color: var(--brand-2-light); }
    summary{ cursor:pointer; font-weight:800; list-style:none; display:flex; align-items:center; gap:.6rem; color: var(--brand-2); transition: color 0.2s ease; }
    summary::-webkit-details-marker{ display:none }
    summary i{ color: var(--brand-2); transition: transform 0.3s ease; }
    details[open] summary i{ transform: rotate(90deg); }

    .footer{
      max-width:var(--stage-max);
      margin:clamp(24px,4vw,36px) auto 0; padding:clamp(16px,3vw,24px) 0; border-top:1px solid var(--line);
      color:var(--muted); font-size:.92rem; display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; align-items:center;
      background: var(--bg-alt); border-radius: 16px; padding-left: clamp(16px,2.5vw,22px); padding-right: clamp(16px,2.5vw,22px);
    }
    .links{ display:flex; gap:16px; flex-wrap:wrap }
    .link{ color:var(--muted); text-decoration:none; border-bottom:1px dashed transparent; transition: all 0.2s ease; }
    .link:hover{ border-color:var(--muted); color: var(--brand-2); }

    .decorative-dots{ position:absolute; width:120px; height:120px;
      background-image: radial-gradient(rgba(var(--brand-rgb), 0.15) 2px, transparent 2px); background-size: 12px 12px; opacity:.6; pointer-events:none; }
    .dots-1{ top: 10%; left: 5%; } .dots-2{ bottom: 15%; right: 8%; }

    .code-wrap{ position: relative; }
    .copy-btn{
      position:absolute; top:10px; right:10px; padding:.35rem .6rem; font-size:.85rem; border-radius:8px; cursor:pointer;
      background:#fff; border:1px solid var(--line); color:var(--brand-2); font-weight:700;
    }
    .copy-btn:hover{ background: var(--brand-gradient-light); }
    pre{
      background: var(--bg-alt); border: 1px solid var(--line); border-left: 4px solid var(--brand-2);
      padding: 1rem; border-radius: 10px; overflow: auto; font-size: 0.9rem; margin: 12px 0; color: var(--ink);
    }

    /* ===== Modal Zammad (VERSIÓN 2, sin Cancelar y sin “cuadro blanco” detrás) ===== */
    /* Backdrops globales en transparente */
    body > .modal-backdrop,
    body > [class*="zammad"][class*="backdrop"],
    body > [id*="zammad"][class*="backdrop"],
    .zammad-form-backdrop,
    .zammad-backdrop,
    [class*="backdrop"]{
      background: transparent !important;
    }

    /* Overlay principal */
    .ip2-theme{
      position: fixed !important; inset: 0 !important;
      display:flex !important; align-items:center !important; justify-content:center !important;
      background:
        radial-gradient(1200px 800px at 20% 10%, rgba(249,115,22,.08), transparent 60%),
        radial-gradient(1200px 800px at 80% 90%, rgba(30,64,175,.08), transparent 60%),
        rgba(2,6,23,.55) !important;
      backdrop-filter: blur(6px);
      z-index: 99999 !important;
      padding: 14px;
    }

    /* Cualquier wrapper intermedio del modal forzado a transparente (sin “cuadro blanco” detrás) */
    .ip2-theme .modal,
    .ip2-theme .modal-dialog,
    .ip2-theme .modal-content,
    .ip2-theme .dialog,
    .ip2-theme .dialog-content,
    .ip2-theme .overlay-content,
    .ip2-theme .container,
    .ip2-theme .wrapper,
    .ip2-theme .backdrop,
    .ip2-theme [class*="backdrop"],
    .ip2-theme > div:not(form){
      background: transparent !important;
      border: 0 !important;
      box-shadow: none !important;
      padding: 0 !important;
    }

    /* El formulario en sí mantiene su fondo blanco (para legibilidad) */
    .ip2-theme form{
      width: min(92vw, 600px) !important;
      max-width: 600px !important;
      background:#fff !important;
      border:1px solid var(--line) !important;
      border-radius: 18px !important;
      box-shadow: 0 30px 60px rgba(2,6,23,.25) !important;
      padding: 0 !important; /* header + body + actions */
      overflow:hidden !important;
    }

    .ip2-theme form .ip2-header{
      display:flex; align-items:center; gap:.75rem;
      padding: 14px 18px;
      background: linear-gradient(135deg, rgba(249,115,22,.95), rgba(30,64,175,.95));
      color:#fff; font-weight:900; letter-spacing:.2px;
    }
    .ip2-theme form .ip2-header i{ font-size: 1rem; }

    .ip2-theme form .ip2-body{
      padding: clamp(16px, 2.4vw, 22px);
      max-height: 80vh; overflow:auto;
    }
    .ip2-theme form label{ display:block; font-weight:800; color:var(--muted); margin:.6rem 0 .3rem; }
    .ip2-theme form input[type="text"],
    .ip2-theme form input[type="email"],
    .ip2-theme form input[type="tel"],
    .ip2-theme form select,
    .ip2-theme form textarea{
      width:100%; border:1.5px solid var(--line); border-radius:12px;
      padding:12px 14px; outline:none; font:inherit; color:var(--ink);
      transition:border-color .2s, box-shadow .2s;
      background:#fff;
    }
    .ip2-theme form textarea{ min-height:120px; resize:vertical; }
    .ip2-theme form input:focus,
    .ip2-theme form select:focus,
    .ip2-theme form textarea:focus{
      border-color: var(--brand-2-light);
      box-shadow: 0 0 0 4px rgba(var(--brand2-rgb), .12);
    }

    .ip2-theme form .ip2-grid{
      display:grid; grid-template-columns: 1fr 1fr; gap:12px; margin-bottom: 8px;
    }
    @media (max-width:560px){ .ip2-theme form .ip2-grid{ grid-template-columns: 1fr; } }

    .ip2-theme form .ip2-actions{
      display:flex; gap:10px; justify-content:flex-end; padding: 0 18px 16px;
    }
    .ip2-theme form .btn-submit{
      display:inline-flex; align-items:center; gap:.6rem; padding:.85rem 1.15rem;
      border-radius:12px; border:none; cursor:pointer; font-weight:900; color:#fff;
      background: var(--brand-gradient); box-shadow:0 12px 24px rgba(var(--brand-rgb), .24);
    }

    @media (prefers-reduced-motion: reduce){
      *{ animation:none !important; transition:none !important }
    }