/*
Theme Name: Vlac Systems
Theme URI: https://vlacsystems.com/
Author: Vlac Systems
Author URI: https://vlacsystems.com/
Description: Tema de WordPress para la landing page de Vlac Systems — ERP con Facturador FEL para Guatemala. Réplica fiel del diseño original, con menús editables y contenido personalizable desde el Personalizador.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: vlac-systems
Tags: business, landing-page, custom-menu, custom-logo, translation-ready
*/


  :root{
    --red:#C1272D;
    --red-dark:#8E1B20;
    --red-soft:#F9E9E9;
    --ink:#333333;
    --ink-strong:#1F2124;
    --muted:#6B6F76;
    --line:#E9E9EC;
    --line-soft:#F1F1F3;
    --bg:#FFFFFF;
    --bg-alt:#FAFAFB;
    --chip:#111417;
    --shadow-sm:0 1px 2px rgba(20,20,25,.06);
    --shadow-md:0 12px 30px rgba(20,20,25,.10);
    --shadow-lg:0 30px 70px rgba(20,20,25,.18);
    --radius:14px;
    --maxw:1180px;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;font-family:'Inter',system-ui,-apple-system,sans-serif;
    color:var(--ink);background:var(--bg);line-height:1.55;
    -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  }
  h1,h2,h3,h4{font-family:'Manrope',sans-serif;color:var(--ink-strong);margin:0;line-height:1.12;letter-spacing:-.02em;}
  p{margin:0;}
  a{text-decoration:none;color:inherit;}
  img{max-width:100%;display:block;}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
  .accent{color:var(--red);}

  .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:'Manrope',sans-serif;font-weight:700;font-size:15px;border-radius:10px;border:1px solid transparent;cursor:pointer;transition:transform .16s ease, background .16s ease, box-shadow .16s ease;}
  .btn-red{background:var(--red);color:#fff;padding:11px 20px;box-shadow:0 6px 16px rgba(193,39,45,.28);}
  .btn-red:hover{background:var(--red-dark);transform:translateY(-1px);box-shadow:0 10px 22px rgba(193,39,45,.34);}
  .btn-lg{padding:16px 30px;font-size:17px;border-radius:12px;}
  .btn-ghost{background:#fff;color:var(--ink-strong);padding:15px 26px;border:1px solid var(--line);font-size:16px;}
  .btn-ghost:hover{border-color:#cfcfd4;transform:translateY(-1px);}
  a:focus-visible,.btn:focus-visible,button:focus-visible{outline:3px solid rgba(193,39,45,.45);outline-offset:2px;border-radius:8px;}

  /* HEADER */
  header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.9);backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--line);}
  .nav{display:flex;align-items:center;gap:28px;height:74px;}
  .logo{display:flex;align-items:center;gap:12px;flex-shrink:0;}
  .logo-chip{width:46px;height:46px;border-radius:12px;background:#fff;border:1px solid var(--line);display:grid;place-items:center;flex-shrink:0;box-shadow:0 4px 10px rgba(0,0,0,.08);overflow:hidden;}
  .logo-chip img{width:38px;height:38px;object-fit:contain;}
  .logo-text{display:flex;flex-direction:column;line-height:1;}
  .logo-text .l1{font-family:'Manrope',sans-serif;font-weight:800;font-size:18px;color:var(--ink-strong);letter-spacing:-.01em;}
  .logo-text .l1 b{color:var(--red);font-weight:800;}
  .logo-text .l2{font-size:10px;letter-spacing:.14em;color:var(--muted);font-weight:600;text-transform:uppercase;margin-top:4px;}

  .menu{display:flex;align-items:center;gap:4px;margin-left:14px;}
  .menu-item{position:relative;}
  .menu-link{display:inline-flex;align-items:center;gap:6px;padding:10px 14px;border-radius:9px;font-family:'Manrope',sans-serif;font-weight:600;font-size:15px;color:var(--ink);cursor:pointer;background:none;border:none;transition:background .15s,color .15s;}
  .menu-link:hover{background:var(--line-soft);color:var(--ink-strong);}
  .menu-link .chev{transition:transform .2s ease;}
  .nav-right{margin-left:auto;display:flex;align-items:center;gap:14px;}
  .link-plain{font-family:'Manrope',sans-serif;font-weight:600;font-size:15px;color:var(--ink);padding:8px 6px;}
  .link-plain:hover{color:var(--red);}

  .mega{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(8px);width:min(920px,92vw);background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-lg);padding:26px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease,transform .2s ease;z-index:80;}
  .mega::before{content:"";position:absolute;top:-14px;left:0;right:0;height:14px;}
  .menu-item:hover .mega,.menu-item:focus-within .mega{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0);}
  .menu-item:hover .chev{transform:rotate(180deg);}
  .mega-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px 28px;}
  .mega-col h5{font-family:'Manrope',sans-serif;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--red);font-weight:700;margin:0 0 12px;padding-bottom:9px;border-bottom:1px solid var(--line-soft);}
  .mega-col a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:9px;font-size:14.5px;color:var(--ink);font-weight:500;transition:background .14s,color .14s;}
  .mega-col a:hover{background:var(--red-soft);color:var(--red-dark);}
  .mega-col a .ic{width:17px;height:17px;color:var(--muted);flex-shrink:0;}
  .mega-col a:hover .ic{color:var(--red);}
  .mega-foot{margin-top:22px;padding-top:18px;border-top:1px solid var(--line-soft);display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;}
  .mega-foot p{font-size:14px;color:var(--muted);}
  .mega-foot strong{color:var(--ink-strong);font-family:'Manrope';}

  /* Desplegable «Agente» (panel compacto anclado a la derecha) */
  .mega-sm{width:min(400px,92vw);padding:22px;left:auto;right:0;transform:translateY(8px);}
  .menu-item:hover .mega-sm,.menu-item:focus-within .mega-sm{transform:translateY(0);}
  .agent-drop{display:flex;align-items:flex-start;gap:14px;}
  .agent-ic{width:42px;height:42px;border-radius:12px;background:var(--red-soft);color:var(--red);display:grid;place-items:center;flex-shrink:0;}
  .agent-ic svg{width:22px;height:22px;}
  .agent-body h5{font-family:'Manrope',sans-serif;font-size:15.5px;font-weight:800;color:var(--ink-strong);margin:1px 0 7px;}
  .agent-body p{font-size:14px;line-height:1.55;color:var(--muted);margin:0 0 16px;}
  .agent-note{display:block;margin-top:10px;font-size:12.5px;color:var(--muted);}

  .burger{display:none;margin-left:auto;background:none;border:1px solid var(--line);border-radius:10px;width:44px;height:42px;cursor:pointer;}
  .burger span{display:block;width:20px;height:2px;background:var(--ink-strong);margin:4px auto;border-radius:2px;transition:.2s;}

  /* HERO */
  .hero{position:relative;overflow:hidden;}
  .hero::before{content:"";position:absolute;inset:0;z-index:0;background:radial-gradient(700px 380px at 82% 8%,rgba(193,39,45,.07),transparent 60%),linear-gradient(180deg,#fff, var(--bg-alt));}
  .hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.02fr 1.15fr;gap:50px;align-items:center;padding:74px 0 96px;}
  .eyebrow{display:inline-flex;align-items:center;gap:9px;background:var(--red-soft);color:var(--red-dark);font-family:'Manrope';font-weight:700;font-size:12.5px;letter-spacing:.03em;padding:7px 14px;border-radius:999px;margin-bottom:22px;}
  .eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--red);}
  .hero h1{font-size:clamp(34px,4.6vw,54px);font-weight:800;}
  .hero h1 .accent{white-space:nowrap;}
  .hero-sub{font-size:18px;color:var(--muted);margin:22px 0 8px;max-width:520px;}
  .hero-cta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:30px;}
  .hero-note{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--muted);margin-top:22px;}
  .hero-note svg{width:16px;height:16px;color:#2e9e5b;}

  /* DEVICE MONTAGE with real screenshots */
  .montage{position:relative;min-height:470px;padding-bottom:20px;}
  .shot{width:100%;height:auto;display:block;}
  .monitor{position:relative;width:100%;max-width:580px;margin-left:auto;filter:drop-shadow(var(--shadow-lg));}
  .screen{background:#fff;border:1px solid #d9d9de;border-radius:14px 14px 0 0;overflow:hidden;border-bottom:none;}
  .browserbar{display:flex;align-items:center;gap:6px;padding:9px 12px;background:#f3f3f5;border-bottom:1px solid #e6e6ea;}
  .browserbar i{width:10px;height:10px;border-radius:50%;background:#d6d6dc;display:block;}
  .browserbar .url{margin-left:10px;background:#fff;border:1px solid #e6e6ea;border-radius:6px;font-size:11px;color:var(--muted);padding:4px 12px;flex:1;font-family:'Inter';}
  .stand-neck{width:26px;height:22px;background:linear-gradient(#dcdce1,#cecec4);margin:0 auto;}
  .stand{width:120px;height:14px;background:linear-gradient(#e4e4e9,#d4d4da);margin:0 auto;border-radius:0 0 4px 4px;}

  .tablet{position:absolute;left:-5%;bottom:2%;width:252px;background:#15171a;border-radius:16px;padding:9px;box-shadow:var(--shadow-lg);}
  .tablet .tscreen{background:#fff;border-radius:9px;overflow:hidden;line-height:0;}
  .tablet .tscreen img{border-radius:9px;}
  .tablet .badge{position:absolute;top:-12px;left:14px;background:var(--red);color:#fff;font-family:'Manrope';font-weight:700;font-size:10.5px;letter-spacing:.03em;padding:5px 11px;border-radius:999px;box-shadow:0 6px 14px rgba(193,39,45,.35);}

  .phone{position:absolute;right:-3%;bottom:-6%;width:132px;background:#15171a;border-radius:22px;padding:7px;box-shadow:var(--shadow-lg);}
  .phone .pscreen{background:#fff;border-radius:16px;overflow:hidden;line-height:0;}
  .phone .pscreen img{border-radius:16px;}

  .trust{display:flex;align-items:center;gap:14px;flex-wrap:wrap;color:var(--muted);font-size:13px;padding:0 0 46px;position:relative;z-index:1;}
  .trust b{color:var(--ink-strong);font-family:'Manrope';}
  .trust .sep{width:4px;height:4px;border-radius:50%;background:#d0d0d6;}

  /* FEATURES */
  .section{padding:86px 0;}
  .section-alt{background:var(--bg-alt);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
  .sec-head{max-width:640px;margin:0 auto 52px;text-align:center;}
  .sec-kicker{font-family:'Manrope';font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin-bottom:14px;}
  .sec-head h2{font-size:clamp(28px,3.4vw,40px);font-weight:800;}
  .sec-head p{color:var(--muted);font-size:17px;margin-top:14px;}
  .feat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
  .feat{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px 24px;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;}
  .feat:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:#e0d0d0;}
  .feat-ic{width:52px;height:52px;border-radius:13px;background:var(--red-soft);display:grid;place-items:center;margin-bottom:20px;}
  .feat-ic svg{width:26px;height:26px;color:var(--red);}
  .feat h3{font-size:18px;font-weight:700;margin-bottom:8px;}
  .feat p{color:var(--muted);font-size:14.5px;}

  /* NEGOCIOS — CARRUSEL / MARQUEE */
  .marquee-sec{padding-bottom:78px;}
  .marquee{
    position:relative;
    width:100%;
    overflow:hidden;
    padding:14px 0;
    /* Desvanecido en los bordes para un scroll infinito elegante. */
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
            mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  }
  .marquee-track{
    display:flex;
    width:max-content;
    align-items:center;
    gap:20px;
    animation:vlac-marquee 140s linear infinite;
    will-change:transform;
  }
  .marquee:hover .marquee-track{animation-play-state:paused;}
  .marquee-item{
    flex:0 0 auto;
    width:150px;height:96px;
    display:flex;align-items:center;justify-content:center;
    background:#fff;
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:16px;
    box-shadow:var(--shadow-sm);
    overflow:hidden;
    transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
  }
  .marquee-item img{
    max-width:100%;
    max-height:64px;
    width:auto;height:auto;
    object-fit:contain;
    filter:grayscale(1);
    opacity:.72;
    transition:filter .2s ease,opacity .2s ease;
  }
  .marquee-item:hover{
    transform:translateY(-4px);
    box-shadow:var(--shadow-md);
    border-color:#e0d0d0;
  }
  .marquee-item:hover img{filter:grayscale(0);opacity:1;}

  @keyframes vlac-marquee{
    from{transform:translateX(0);}
    to{transform:translateX(calc(-50% - 10px));} /* 10px = mitad del gap entre las dos mitades */
  }
  @media (prefers-reduced-motion:reduce){
    .marquee-track{animation:none;}
    .marquee{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  }

  /* INDUSTRIES */
  .ind-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;}
  .ind-left h2{font-size:clamp(26px,3vw,36px);font-weight:800;}
  .ind-left p{color:var(--muted);font-size:16.5px;margin-top:16px;max-width:440px;}
  .ind-cards{display:flex;flex-direction:column;gap:16px;margin-top:30px;}
  .ind-card{display:flex;align-items:center;gap:18px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 20px;transition:border-color .16s,box-shadow .16s;}
  .ind-card:hover{border-color:#e0d0d0;box-shadow:var(--shadow-sm);}
  .ind-ic{width:54px;height:54px;border-radius:14px;border:1.5px solid var(--red);display:grid;place-items:center;flex-shrink:0;}
  .ind-ic svg{width:28px;height:28px;color:var(--red);}
  .ind-card h4{font-size:16.5px;font-weight:700;}
  .ind-card p{font-size:14px;color:var(--muted);margin-top:3px;}
  .floor{background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-md);padding:22px;position:relative;overflow:hidden;}
  .floor-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;}
  .floor-top .ft{font-family:'Manrope';font-weight:800;font-size:15px;color:var(--ink-strong);}
  .floor-top .fs{font-size:12px;color:var(--muted);}
  .floor-plan{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;background:var(--bg-alt);border:1px dashed var(--line);border-radius:14px;padding:18px;}
  .table{aspect-ratio:1;border-radius:10px;display:grid;place-items:center;font-family:'Manrope';font-weight:700;font-size:13px;position:relative;}
  .table.free{background:#fff;border:1.5px solid var(--line);color:var(--muted);}
  .table.busy{background:var(--red);border:1.5px solid var(--red);color:#fff;}
  .table.hold{background:var(--red-soft);border:1.5px solid #e2b5b5;color:var(--red-dark);}
  .table::after{content:"";position:absolute;width:8px;height:8px;border-radius:50%;bottom:6px;}
  .table.free::after{background:#cfcfd4;}
  .table.busy::after{background:#ffd6d6;}
  .table.hold::after{background:var(--red);}
  .floor-legend{display:flex;gap:18px;margin-top:16px;flex-wrap:wrap;}
  .floor-legend span{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--muted);}
  .floor-legend i{width:11px;height:11px;border-radius:4px;display:block;}
  .floor-bar{display:flex;gap:6px;padding:0 0 12px;}
  .floor-bar i{width:10px;height:10px;border-radius:50%;background:#e2e2e7;display:block;}
  .floor-shot{border:1px solid var(--line);border-radius:12px;overflow:hidden;line-height:0;background:#fff;}
  .floor-shot img{width:100%;height:auto;display:block;}
  .live-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#2e9e5b;margin-right:7px;vertical-align:middle;box-shadow:0 0 0 3px rgba(46,158,91,.15);}

  /* CTA */
  .cta-strip{background:linear-gradient(135deg,#2a2c30,#15171a);color:#fff;border-radius:24px;padding:56px 48px;text-align:center;position:relative;overflow:hidden;}
  .cta-strip::before{content:"";position:absolute;inset:0;background:radial-gradient(600px 300px at 20% 0%,rgba(193,39,45,.4),transparent 60%);}
  .cta-strip > *{position:relative;z-index:1;}
  .cta-strip h2{color:#fff;font-size:clamp(26px,3.2vw,38px);font-weight:800;}
  .cta-strip p{color:rgba(255,255,255,.72);font-size:17px;margin:16px auto 30px;max-width:520px;}

  /* FOOTER */
  footer{background:#fff;border-top:1px solid var(--line);padding:56px 0 30px;}
  .foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:36px;}
  .foot-brand p{color:var(--muted);font-size:14px;margin-top:16px;max-width:300px;}
  .foot-col h5{font-family:'Manrope';font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-strong);margin-bottom:16px;}
  .foot-col a{display:block;color:var(--muted);font-size:14px;padding:5px 0;}
  .foot-col a:hover{color:var(--red);}
  .foot-bottom{margin-top:44px;padding-top:22px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;color:var(--muted);font-size:13px;}

  .mobile-panel{display:none;}

  @media (max-width:1000px){
    .menu,.nav-right .link-plain{display:none;}
    .nav-right .btn-red{display:none;}
    .burger{display:block;}
    .hero-grid{grid-template-columns:1fr;gap:64px;padding:52px 0 80px;}
    .montage{max-width:580px;margin:0 auto;}
    .feat-grid{grid-template-columns:repeat(2,1fr);}
    .ind-grid{grid-template-columns:1fr;gap:36px;}
    .foot-grid{grid-template-columns:1fr 1fr;gap:30px;}
    .mobile-panel{display:block;position:fixed;inset:74px 0 0;background:#fff;z-index:55;transform:translateX(100%);transition:transform .28s ease;overflow-y:auto;padding:22px 24px 40px;}
    .mobile-panel.open{transform:translateX(0);}
    body.lock{overflow:hidden;}
    .m-link{display:block;font-family:'Manrope';font-weight:700;font-size:18px;color:var(--ink-strong);padding:15px 4px;border-bottom:1px solid var(--line-soft);}
    .m-acc-head{display:flex;align-items:center;justify-content:space-between;width:100%;background:none;border:none;font:inherit;font-family:'Manrope';font-weight:700;font-size:18px;color:var(--ink-strong);padding:15px 4px;border-bottom:1px solid var(--line-soft);cursor:pointer;}
    .m-acc-body{display:none;padding:6px 4px 12px;}
    .m-acc-body.open{display:block;}
    .m-acc-body h6{font-family:'Manrope';font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--red);margin:14px 0 6px;font-weight:700;}
    .m-acc-body a{display:block;color:var(--ink);font-size:15px;padding:8px 4px;}
    .m-agent p{font-size:15px;line-height:1.55;color:var(--muted);padding:6px 4px 0;margin-bottom:14px;}
    .m-agent .btn{display:inline-flex;width:100%;color:#fff;font-size:16px;padding:14px 20px;}
    .m-agent .agent-note{padding:0 4px;}
    .mobile-cta{margin-top:26px;display:flex;flex-direction:column;gap:12px;}
    .mobile-cta .btn{width:100%;}
  }
  @media (max-width:560px){
    .wrap{padding:0 18px;}
    .feat-grid{grid-template-columns:1fr;}
    .foot-grid{grid-template-columns:1fr;}
    .cta-strip{padding:42px 24px;}
    .floor-plan{grid-template-columns:repeat(3,1fr);}
    .tablet{width:180px;left:-2%;bottom:0;}
    .phone{width:104px;right:-2%;}
    .hero-cta{flex-direction:column;align-items:stretch;}
    .hero-cta .btn{width:100%;}
    .logo-text .l2{display:none;}
  }
  @media (prefers-reduced-motion:reduce){*{transition:none !important;scroll-behavior:auto !important;}}

  /* ---- Ajustes para menús generados por WordPress ---- */
  .foot-col ul{list-style:none;margin:0;padding:0;}
  .foot-col li{margin:0;padding:0;}
  .foot-col li a{display:block;color:var(--muted);font-size:14px;padding:5px 0;}
  .foot-col li a:hover{color:var(--red);}
  /* Contenido de páginas/entradas estándar */
  .page-content{max-width:var(--maxw);margin:0 auto;padding:60px 24px;}
  .page-content h1,.page-content h2,.page-content h3{margin:1.2em 0 .5em;}
  .page-content p{margin:0 0 1em;color:var(--ink);}
  .page-content a{color:var(--red);text-decoration:underline;}