:root{
        --bg:#ffffff;
        --bg-soft:#f3f9fe;
        --bg-tint:#e9f4fd;
        --card:#ffffff;
        --ink:#1d3448;
        --ink-soft:#4a6379;
        --line:#e1eef8;
        --sky:#a9d4f5;
        --sky-soft:#d8ecfc;
        --accent:#0a6cff;
        --accent-dark:#0057d9;
        --accent-soft:#e3efff;
        --shadow:0 12px 34px rgba(38,110,180,.09);
        --shadow-lg:0 22px 48px rgba(38,110,180,.14);
        --radius:24px;
      }
      @media (prefers-color-scheme: dark){
        :root{
          --bg:#0d1824;
          --bg-soft:#101f30;
          --bg-tint:#132739;
          --card:#122334;
          --ink:#e8f2fa;
          --ink-soft:#a9c2d6;
          --line:#1e364c;
          --sky:#5b93c4;
          --sky-soft:#1d3a55;
          --accent:#4d9bff;
          --accent-dark:#7ab5ff;
          --accent-soft:#17345a;
          --shadow:0 12px 34px rgba(0,0,0,.35);
          --shadow-lg:0 22px 48px rgba(0,0,0,.45);
        }
      }
      *{ box-sizing:border-box; }
      html{ scroll-behavior:smooth; }
      body{
        margin:0; background:var(--bg); color:var(--ink);
        font-family:"Nunito Sans", system-ui, sans-serif;
        font-weight:400; line-height:1.65; font-size:16.5px;
        -webkit-font-smoothing:antialiased;
      }
      h1,h2,h3,h4{ font-family:"Jost", sans-serif; font-weight:400; line-height:1.18; margin:0; letter-spacing:.01em; }
      p{ margin:0; }
      img{ display:block; max-width:100%; }
      button{ font-family:inherit; cursor:pointer; }
      a{ color:var(--accent); }
      .wrap{ max-width:1180px; margin:0 auto; padding:0 24px; }

      /* ---------- Header ---------- */
      header{
        position:sticky; top:0; z-index:60; background:var(--bg);
        border-bottom:1px solid var(--line);
      }
      .bar{ display:flex; align-items:center; gap:18px; padding:12px 0; }
      .brand{ display:flex; align-items:center; gap:13px; text-decoration:none; color:var(--ink); min-width:0; }
      .brand img{ width:52px; height:52px; border-radius:50%; object-fit:cover; border:2px solid var(--sky-soft); flex:none; }
      .brand .bname{ font-family:"Jost",sans-serif; font-size:19px; font-weight:500; line-height:1.15; white-space:nowrap; }
      .brand .bsub{ font-size:12px; color:var(--ink-soft); letter-spacing:.04em; white-space:nowrap; }
      nav.main{ display:flex; gap:28px; margin-left:auto; }
      nav.main a{ color:var(--ink-soft); text-decoration:none; font-size:15px; font-weight:600; }
      nav.main a:hover{ color:var(--accent); }
      .bar-actions{ display:flex; align-items:center; gap:10px; margin-left:auto; }
      nav.main + .bar-actions{ margin-left:0; }
      .lang-toggle{
        display:flex; border:1px solid var(--line); border-radius:999px; overflow:hidden; background:var(--bg-soft);
      }
      .lang-toggle button{
        border:0; background:transparent; color:var(--ink-soft);
        font-size:13px; font-weight:700; letter-spacing:.06em; padding:8px 14px;
      }
      .lang-toggle button.active{ background:var(--accent); color:#fff; }
      .quote-btn{
        position:relative; border:0; background:var(--accent); color:#fff;
        border-radius:999px; padding:11px 20px; font-size:15px; font-weight:700;
        display:inline-flex; align-items:center; gap:8px; box-shadow:0 8px 20px rgba(10,108,255,.25);
      }
      .quote-btn:hover{ background:var(--accent-dark); }
      .quote-count{
        background:#fff; color:var(--accent); border-radius:999px; min-width:22px; height:22px;
        display:inline-flex; align-items:center; justify-content:center; font-size:13px; font-weight:800; padding:0 6px;
      }

      /* ---------- Hero ---------- */
      .hero{ background:var(--bg-soft); border-bottom:1px solid var(--line); }
      .hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; padding:72px 0 80px; }
      .pill{
        display:inline-block; background:var(--accent-soft); color:var(--accent);
        font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
        padding:7px 16px; border-radius:999px; margin-bottom:22px;
      }
      .hero h1{ font-size:52px; font-weight:300; }
      .hero h1 .accent{ color:var(--accent); font-weight:500; }
      .hero .lead{ color:var(--ink-soft); font-size:18.5px; margin:22px 0 32px; max-width:52ch; font-weight:300; }
      .cta-row{ display:flex; gap:14px; flex-wrap:wrap; }
      .btn{
        display:inline-flex; align-items:center; gap:9px; text-decoration:none;
        border-radius:999px; padding:14px 28px; font-size:16px; font-weight:700; border:1px solid transparent;
      }
      .btn-primary{ background:var(--accent); color:#fff; box-shadow:0 10px 24px rgba(10,108,255,.24); }
      .btn-primary:hover{ background:var(--accent-dark); }
      .btn-ghost{ background:var(--card); color:var(--accent); border-color:var(--sky); }
      .btn-ghost:hover{ border-color:var(--accent); }
      .stats{ display:flex; gap:44px; margin-top:46px; flex-wrap:wrap; }
      .stat b{ display:block; font-family:"Jost",sans-serif; font-size:30px; font-weight:500; color:var(--accent); line-height:1; }
      .stat span{ font-size:13.5px; color:var(--ink-soft); }
      .hero-media{ position:relative; }
      .hero-media .frame{
        border-radius:32px; overflow:hidden; box-shadow:var(--shadow-lg); border:8px solid var(--card);
      }
      .hero-media .frame img{ width:100%; height:480px; object-fit:cover; }
      .hero-chip{
        position:absolute; left:-18px; bottom:28px; background:var(--card); border:1px solid var(--line);
        border-radius:18px; box-shadow:var(--shadow); padding:14px 20px;
      }
      .hero-chip b{ display:block; font-family:"Jost",sans-serif; font-weight:500; font-size:16.5px; }
      .hero-chip span{ font-size:13px; color:var(--ink-soft); }

      /* ---------- Sections ---------- */
      section{ padding:88px 0; }
      section.tint{ background:var(--bg-soft); }
      .sec-head{ max-width:640px; margin-bottom:44px; }
      .sec-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
      .sec-head h2{ font-size:38px; font-weight:300; }
      .sec-head h2 .accent{ color:var(--accent); font-weight:500; }
      .sec-head p{ color:var(--ink-soft); margin-top:12px; font-size:17px; font-weight:300; }

      /* ---------- Category cards ---------- */
      .cat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
      .cat-card{
        text-align:left; background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
        padding:0; overflow:hidden; box-shadow:var(--shadow); transition:box-shadow .25s ease, transform .25s ease;
        display:flex; flex-direction:column; width:100%;
      }
      .cat-card:hover{ box-shadow:var(--shadow-lg); transform:translateY(-4px); }
      .cat-card .img-wrap{ overflow:hidden; }
      .cat-card img{ width:100%; height:230px; object-fit:cover; }
      .cat-card .body{ padding:24px 26px 26px; display:flex; flex-direction:column; gap:8px; flex:1; }
      .cat-card h3{ font-size:22px; font-weight:500; }
      .cat-card p{ color:var(--ink-soft); font-size:15px; font-weight:300; flex:1; }
      .cat-card .go{ color:var(--accent); font-weight:700; font-size:15px; margin-top:6px; }

      /* ---------- Filters & products ---------- */
      .filters{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:36px; }
      .filter-btn{
        border:1px solid var(--line); background:var(--card); color:var(--ink-soft);
        border-radius:999px; padding:10px 20px; font-size:14.5px; font-weight:600;
      }
      .filter-btn:hover{ border-color:var(--sky); color:var(--accent); }
      .filter-btn.active{ background:var(--accent); border-color:var(--accent); color:#fff; }
      .prod-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
      .prod-card{
        background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
        box-shadow:var(--shadow); display:flex; flex-direction:column; transition:box-shadow .25s ease, transform .25s ease;
      }
      .prod-card:hover{ box-shadow:var(--shadow-lg); transform:translateY(-4px); }
      .prod-card img{ width:100%; height:215px; object-fit:cover; }
      .prod-card .body{ padding:22px 24px 24px; display:flex; flex-direction:column; gap:7px; flex:1; }
      .prod-card .tag{
        align-self:flex-start; background:var(--bg-tint); color:var(--accent);
        font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
        padding:4px 11px; border-radius:999px;
      }
      .prod-card h3{ font-size:20px; font-weight:500; }
      .prod-card p{ color:var(--ink-soft); font-size:14.5px; font-weight:300; flex:1; }
      .add-btn{
        margin-top:12px; border:0; border-radius:999px; padding:12px 18px; width:100%;
        background:var(--accent); color:#fff; font-size:15px; font-weight:700;
      }
      .add-btn:hover{ background:var(--accent-dark); }
      .add-btn.added{ background:var(--sky-soft); color:var(--accent); }

      /* ---------- Design service ---------- */
      .design-tabs{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:36px; }
      .design-tab{
        border:1px solid var(--line); background:var(--card); color:var(--ink-soft);
        border-radius:999px; padding:11px 24px; font-size:15.5px; font-weight:600;
      }
      .design-tab.active{ background:var(--accent); border-color:var(--accent); color:#fff; }
      .steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
      .step-card{
        background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow);
      }
      .step-card img{ width:100%; height:230px; object-fit:cover; }
      .step-card .body{ padding:22px 24px 24px; }
      .step-num{
        display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px;
        border-radius:50%; background:var(--accent-soft); color:var(--accent); font-weight:800; font-size:14px; margin-bottom:10px;
      }
      .step-card h3{ font-size:20px; font-weight:500; margin-bottom:6px; }
      .step-card p{ color:var(--ink-soft); font-size:15px; font-weight:300; }
      .design-cta{
        margin-top:36px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
        box-shadow:var(--shadow); padding:26px 30px; display:flex; align-items:center; gap:22px; flex-wrap:wrap;
      }
      .design-cta p{ flex:1; min-width:240px; color:var(--ink-soft); font-weight:300; font-size:16.5px; }

      /* ---------- About ---------- */
      .about-grid{ display:grid; grid-template-columns:340px 1fr; gap:52px; align-items:start; }
      .about-side{
        background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow);
        padding:34px 30px; text-align:center; position:sticky; top:100px;
      }
      .about-side img{ width:120px; height:120px; border-radius:50%; object-fit:cover; margin:0 auto 18px; border:3px solid var(--sky-soft); }
      .about-side .since{ font-family:"Jost",sans-serif; font-size:24px; font-weight:500; color:var(--accent); }
      .about-side p{ color:var(--ink-soft); font-size:15px; font-weight:300; margin-top:10px; }
      .about-text h2{ font-size:38px; font-weight:300; margin-bottom:26px; }
      .about-text p{ color:var(--ink-soft); font-weight:300; font-size:17px; margin-bottom:20px; }
      .about-text p strong{ color:var(--ink); font-weight:600; }

      /* ---------- Contact ---------- */
      .contact-card{
        background:var(--bg-tint); border:1px solid var(--line); border-radius:32px;
        padding:56px 40px; text-align:center;
      }
      .contact-card h2{ font-size:36px; font-weight:300; }
      .contact-card p{ color:var(--ink-soft); margin:14px auto 6px; max-width:52ch; font-weight:300; font-size:17px; }
      .contact-phone{
        display:block; font-family:"Jost",sans-serif; font-size:34px; font-weight:500; color:var(--accent);
        text-decoration:none; margin:14px 0 28px; letter-spacing:.02em;
      }

      footer{ border-top:1px solid var(--line); padding:34px 0 44px; }
      .foot{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; color:var(--ink-soft); font-size:14.5px; }
      .foot img{ width:38px; height:38px; border-radius:50%; object-fit:cover; }
      .foot .spacer{ flex:1; }

      /* ---------- Drawer ---------- */
      .overlay{
        position:fixed; inset:0; background:rgba(16,42,68,.38); opacity:0; pointer-events:none;
        visibility:hidden; transition:opacity .25s ease, visibility 0s linear .25s; z-index:80;
      }
      .overlay.open{ opacity:1; pointer-events:auto; visibility:visible; transition:opacity .25s ease; }
      .drawer{
        position:fixed; top:0; right:0; height:100dvh; width:min(420px, 94vw); background:var(--bg); z-index:90;
        transform:translateX(105%); visibility:hidden;
        transition:transform .3s ease, visibility 0s linear .3s; display:flex; flex-direction:column;
        box-shadow:-18px 0 44px rgba(16,42,68,.16);
      }
      .drawer.open{ transform:translateX(0); visibility:visible; transition:transform .3s ease; }
      .drawer-head{ display:flex; align-items:center; gap:12px; padding:22px 24px; border-bottom:1px solid var(--line); }
      .drawer-head h3{ font-size:22px; font-weight:500; flex:1; }
      .drawer-close{ border:1px solid var(--line); background:var(--card); border-radius:50%; width:38px; height:38px; font-size:17px; color:var(--ink-soft); }
      .drawer-body{ flex:1; overflow-y:auto; padding:20px 24px; }
      .drawer-empty{ color:var(--ink-soft); font-weight:300; text-align:center; padding:36px 10px; }
      .q-item{ display:flex; gap:14px; padding:14px 0; border-bottom:1px solid var(--line); }
      .q-item img{ width:64px; height:64px; border-radius:14px; object-fit:cover; flex:none; }
      .q-item .info{ flex:1; min-width:0; }
      .q-item .info b{ display:block; font-family:"Jost",sans-serif; font-weight:500; font-size:16.5px; line-height:1.3; }
      .q-item .info span{ font-size:13px; color:var(--ink-soft); }
      .q-controls{ display:flex; align-items:center; gap:10px; margin-top:8px; }
      .q-btn{
        width:28px; height:28px; border-radius:50%; border:1px solid var(--sky); background:var(--card);
        color:var(--accent); font-size:16px; font-weight:700; line-height:1;
        display:inline-flex; align-items:center; justify-content:center;
      }
      .q-qty{ font-weight:700; min-width:18px; text-align:center; }
      .q-remove{ margin-left:auto; border:0; background:transparent; color:var(--accent); font-size:13.5px; font-weight:700; }
      .drawer-foot{ padding:20px 24px 26px; border-top:1px solid var(--line); }
      .drawer-foot p{ color:var(--ink-soft); font-size:14px; font-weight:300; margin-bottom:16px; }
      .drawer-foot .btn{ width:100%; justify-content:center; }
      .clear-btn{
        width:100%; margin-top:10px; border:0; background:transparent; color:var(--ink-soft);
        font-size:14.5px; font-weight:600; padding:8px;
      }
      .clear-btn:hover{ color:var(--accent); }

      .toast{
        position:fixed; left:50%; bottom:28px; transform:translate(-50%, 90px); z-index:120;
        background:var(--ink); color:var(--bg); padding:13px 24px; border-radius:999px; font-size:15px; font-weight:600;
        box-shadow:var(--shadow-lg); transition:transform .3s ease; max-width:92vw; text-align:center;
      }
      .toast.show{ transform:translate(-50%, 0); }

      /* ---------- Responsive ---------- */
      @media (max-width: 980px){
        nav.main{ display:none; }
        .hero-grid{ grid-template-columns:1fr; gap:40px; padding:52px 0 60px; }
        .hero-media .frame img{ height:340px; }
        .hero-chip{ left:12px; }
        .cat-grid, .prod-grid, .steps{ grid-template-columns:repeat(2,1fr); }
        .about-grid{ grid-template-columns:1fr; gap:36px; }
        .about-side{ position:static; }
        section{ padding:64px 0; }
      }
      @media (max-width: 620px){
        .bar{ flex-wrap:wrap; row-gap:8px; padding:10px 0 12px; }
        .brand{ flex:1 1 auto; }
        .brand img{ width:44px; height:44px; }
        .bar-actions{ width:100%; justify-content:space-between; }
        .hero h1{ font-size:38px; }
        .sec-head h2, .about-text h2{ font-size:30px; }
        .cat-grid, .prod-grid, .steps{ grid-template-columns:1fr; }
        .brand .bsub{ display:none; }
        .brand .bname{ font-size:16.5px; white-space:normal; }
        .quote-btn{ padding:10px 15px; font-size:14px; }
        .stats{ gap:28px; }
        .contact-phone{ font-size:27px; }
        .contact-card{ padding:42px 24px; }
        body{ font-size:16px; }
      }
      @media (prefers-reduced-motion: reduce){
        html{ scroll-behavior:auto; }
        *{ transition:none !important; }
      }
    
      /* ---------- Redes y contacto ---------- */
      .socials{ display:flex; gap:8px; align-items:center; }
      .soc{ width:38px; height:38px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
        background:var(--bg-soft); border:1px solid var(--line); color:var(--accent); text-decoration:none; transition:background .2s, color .2s; }
      .soc svg{ width:18px; height:18px; fill:currentColor; }
      .soc:hover{ background:var(--accent); color:#fff; border-color:var(--accent); }
      .contact-card .socials{ justify-content:center; margin-top:26px; }
      .contact-btns{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
      .btn-wa{ background:#25d366; color:#fff; box-shadow:0 10px 24px rgba(37,211,102,.25); }
      .btn-wa:hover{ background:#1ebe5a; }
      .btn-tg{ background:#229ed9; color:#fff; box-shadow:0 10px 24px rgba(34,158,217,.25); }
      .btn-tg:hover{ background:#1b8cc2; }
      .btn svg{ width:20px; height:20px; fill:currentColor; flex:none; }
      .drawer-foot .btn + .btn{ margin-top:10px; }
      .foot .socials .soc{ width:34px; height:34px; }
      @media (max-width: 1180px){ .bar-actions .socials{ display:none; } }
      /* Márgenes laterales siempre presentes (antes .bar y .hero-grid los anulaban) */
      .wrap{ padding-left:24px !important; padding-right:24px !important; }
      @media (max-width: 620px){ .wrap{ padding-left:16px !important; padding-right:16px !important; } }

      /* ---------- Fotos completas (sin recortar) ---------- */
      .cat-card .img-wrap{ display:block; background:#fff; padding:14px; border-bottom:1px solid var(--line); }
      .cat-card img{ height:230px; object-fit:contain; }
      .prod-card img, .step-card img{ object-fit:contain; background:#fff; padding:12px; }
      .q-item img{ object-fit:contain; background:#fff; padding:3px; border:1px solid var(--line); }
      .hero-media .frame{ background:#fff; }
      .hero-media .frame img{ object-fit:contain; }
      .about-side img, .brand img, .foot img{ object-fit:contain; background:#fff; }

      /* ---------- Ventana de galería por categoría ---------- */
      .gal-overlay{ position:fixed; inset:0; z-index:85; background:rgba(16,42,68,.5); display:flex; align-items:center; justify-content:center;
        padding:24px; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .25s ease, visibility 0s linear .25s; }
      .gal-overlay.open{ opacity:1; visibility:visible; pointer-events:auto; transition:opacity .25s ease; }
      .gal-box{ background:var(--bg); width:min(1180px,100%); max-height:100%; border-radius:28px; display:flex; flex-direction:column; overflow:hidden;
        box-shadow:var(--shadow-lg); transform:translateY(16px); transition:transform .25s ease; }
      .gal-overlay.open .gal-box{ transform:none; }
      .gal-head{ display:flex; align-items:flex-start; gap:16px; padding:22px 26px; border-bottom:1px solid var(--line); }
      .gal-head > div{ flex:1; min-width:0; }
      .gal-head h3{ font-size:26px; font-weight:500; }
      .gal-head p{ color:var(--ink-soft); font-size:15px; font-weight:300; margin-top:4px; }
      .gal-body{ overflow-y:auto; padding:24px 26px 30px; background:var(--bg-soft); }
      .gal-body .prod-grid{ grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:20px; }
      .gal-body .prod-card img{ height:260px; }
      .prod-card .ph{ border:0; padding:0; margin:0; background:#fff; cursor:zoom-in; display:block; width:100%; border-bottom:1px solid var(--line); }
      .gal-empty{ color:var(--ink-soft); text-align:center; padding:40px 0; }
      .zoom{ position:fixed; inset:0; z-index:110; background:rgba(8,20,32,.9); display:none; align-items:center; justify-content:center; padding:20px; cursor:zoom-out; }
      .zoom.open{ display:flex; }
      .zoom img{ max-width:100%; max-height:100%; object-fit:contain; background:#fff; border-radius:14px; }
      .zoom-x{ position:absolute; top:16px; right:16px; width:42px; height:42px; border-radius:50%; border:0; background:#fff; color:#1d3448; font-size:18px; }
      @media (max-width:620px){
        .gal-overlay{ padding:0; }
        .gal-box{ border-radius:0; height:100%; }
        .gal-head{ padding:16px; } .gal-head h3{ font-size:21px; }
        .gal-body{ padding:16px; }
        .gal-body .prod-grid{ grid-template-columns:1fr 1fr; gap:12px; }
        .gal-body .prod-card img{ height:150px; padding:8px; }
        .gal-body .prod-card .body{ padding:12px; } .gal-body .prod-card h3{ font-size:15px; }
        .gal-body .prod-card p{ display:none; }
        .gal-body .add-btn{ padding:9px 10px; font-size:13px; }
      }
      .overlay{ z-index:87; }
      .gal-body{ flex:1; }