@charset "utf-8";
/* CSS Document */

    :root{
      --bg:#F6F3ED;
      --paper:#FFFFFF;
      --ink:#101418;
      --muted:#4E5966;
      --line:rgba(16,20,24,.10);
      --shadow: 0 20px 70px rgba(16,20,24,.12);

      --accent:#B58E4A;
      --accent2:#0E2A2A;
      --ok:#1E7A5B;

      --r:16px;
      --r2:26px;
      --max: 1160px;
      --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
      --serif: ui-serif, Georgia, "Times New Roman", Times, serif;
      --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family: var(--sans);
      color:var(--ink);
      overflow-x:hidden;
      background:
        radial-gradient(900px 560px at 12% 0%, rgba(181,142,74,.18), transparent 62%),
        radial-gradient(900px 560px at 92% 6%, rgba(14,42,42,.12), transparent 60%),
        radial-gradient(1200px 700px at 50% 18%, rgba(255,255,255,.55), transparent 70%),
        repeating-linear-gradient(135deg,
          rgba(16,20,24,.018) 0px,
          rgba(16,20,24,.018) 2px,
          rgba(255,255,255,.0) 2px,
          rgba(255,255,255,.0) 7px),
        linear-gradient(180deg, #F7F3ED 0%, #F3EFE7 55%, #EFE9DD 100%);
      background-attachment: fixed;
      background-repeat: no-repeat;
      background-size: cover;
    }

    a{color:inherit;text-decoration:none}
    .container{width: min(var(--max), calc(100% - 24px)); margin:0 auto;}
    .muted{color:var(--muted)}
    .mono{font-family: var(--mono);}

    img, video, iframe{max-width:100%;height:auto;display:block}

    .chip{
      display:inline-flex; align-items:center; gap:10px;
      padding:8px 12px; border:1px solid var(--line);
      border-radius:999px; background: rgba(255,255,255,.65);
      backdrop-filter: blur(10px);
      font-size:13px; color:var(--muted);
    }
    .dot{width:8px;height:8px;border-radius:999px;background: var(--accent);}

    /* ===== HEADER (RESPONSIVE) ===== */
    header{
      position: sticky;
      top: 0;
      z-index: 300;
      background: rgba(246,243,237,.72);
      backdrop-filter: blur(14px);
      border-bottom: 1px solid var(--line);
    }
    .topbar{
      display:flex; align-items:center; justify-content:space-between;
      padding:12px 0; gap:12px;
      flex-wrap: wrap;
    }

    .brand{
      display:flex;
      align-items:center;
      gap: clamp(10px, 2vw, 14px);
      min-width:0;
    }
    .brand-logo{
      height: clamp(40px, 6vw, 62px);
      width:auto;
      object-fit: contain;
      flex: 0 0 auto;
    }
    .brand > div{min-width:0; line-height:1.1}
    #brandName{
      display:block;
      font-size: clamp(1rem, 2.2vw, 1.2rem);
      font-weight: 900;
      letter-spacing:.2px;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    #brandTag{
      display:block;
      font-size: clamp(.72rem, 1.7vw, .82rem);
      opacity:.75;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }

    nav{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
    nav a{
      padding:10px 12px; border-radius:12px; font-size:14px;
      color: rgba(16,20,24,.78);
      border: 1px solid transparent;
    }
    nav a:hover{background: rgba(255,255,255,.65); border-color:var(--line);}

    .actions{
      display:flex; gap:10px; align-items:center;
      flex-wrap: wrap;
      justify-content:flex-end;
    }
    .btn{
      display:inline-flex; align-items:center; justify-content:center; gap:10px;
      padding:11px 14px; border-radius:14px;
      border:1px solid var(--line);
      background: rgba(255,255,255,.72);
      box-shadow: 0 10px 30px rgba(16,20,24,.06);
      cursor:pointer;
      font-weight:900; font-size:14px;
      transition: transform .16s ease, background .16s ease, box-shadow .16s ease;
      white-space:nowrap;
    }
    .btn:hover{transform: translateY(-1px); background: rgba(255,255,255,.92); box-shadow: 0 16px 36px rgba(16,20,24,.10)}
    .btn.primary{
      border-color: rgba(181,142,74,.50);
      background: rgba(181,142,74,.14);
    }
    .btn.primary:hover{background: rgba(181,142,74,.18)}

    .lang{
      display:flex; gap:6px; align-items:center;
      border:1px solid var(--line);
      background: rgba(255,255,255,.60);
      padding:6px; border-radius:14px;
    }
    .lang button{
      padding:8px 10px; border-radius:12px; border:1px solid transparent;
      background: transparent; color: rgba(16,20,24,.68);
      cursor:pointer; font-weight:900; font-family: var(--mono);
    }
    .lang button.active{
      background: rgba(255,255,255,.90);
      border-color: var(--line);
      color: var(--ink);
    }
    .lang button{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
}

.flagSvg{
  width:22px;
  height:15px;
  border-radius:4px;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.15) inset,
    0 2px 4px rgba(0,0,0,.15);
  flex:0 0 auto;
}

.lang button.active .flagSvg{
  box-shadow:
    0 0 0 2px rgba(181,142,74,.55),
    0 4px 10px rgba(181,142,74,.35);
}

    section{padding:34px 0}
    .sectionHead{
      display:flex; align-items:flex-end; justify-content:space-between;
      gap:14px; margin-bottom:14px;
    }
    .sectionHead h2{
      margin:0;
      font-family: var(--serif);
      font-weight:900;
      font-size:26px;
      letter-spacing:-.2px;
    }
    .sectionHead p{margin:0;color:var(--muted);max-width:78ch;line-height:1.6}

    .card{
      background: rgba(255,255,255,.86);
      border:1px solid var(--line);
      border-radius: var(--r);
      box-shadow: var(--shadow);
    }

    /* ===== HERO SLIDER ===== */
    .hero{padding:22px 0 10px}
    .slider{
      position:relative;
      border-radius: var(--r2);
      overflow:hidden;
      border:1px solid var(--line);
      box-shadow: 0 26px 90px rgba(16,20,24,.14);
      background: #fff;
    }
    .slides{
      display:flex;
      transition: transform .6s ease;
      will-change: transform;
    }
    .slide{
      min-width:100%;
      position:relative;
      height: clamp(520px, 72vh, 720px);
      background:#111;
    }
    .slide img{
      width:100%; height:100%;
      object-fit: cover;
      filter: saturate(1.05) contrast(1.02);
      transform: scale(1.02);
    }
    .overlay{
      position:absolute; inset:0;
      background: linear-gradient(90deg,
        rgba(16,20,24,.72) 0%,
        rgba(16,20,24,.50) 38%,
        rgba(16,20,24,.18) 70%,
        rgba(16,20,24,.08) 100%);
    }
    .heroContent{
      position:absolute; inset:0;
      display:grid;
      grid-template-columns: 1.1fr .9fr;
      align-items:center;
      padding: 28px;
      gap:16px;
    }
    .heroText{max-width: 62ch; color:#fff}
    .heroText h1{
      margin:12px 0 10px;
      font-family: var(--serif);
      font-size: clamp(28px, 4vw, 54px);
      line-height:1.05;
      letter-spacing:-.6px;
    }
    .heroText p{margin:0;color:rgba(255,255,255,.86); line-height:1.7; font-size:16px}
    .heroCtas{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px}
    .btnOnDark{
      border:1px solid rgba(255,255,255,.20);
      background: rgba(255,255,255,.10);
      color:#fff;
      box-shadow:none;
    }
    .btnOnDark:hover{background: rgba(255,255,255,.16)}
    .btnGold{
      border:1px solid rgba(181,142,74,.55);
      background: rgba(181,142,74,.22);
      color:#fff;
    }
    .btnGold:hover{background: rgba(181,142,74,.28)}

    .heroPanel{
      justify-self:end;
      width:min(420px, 100%);
      background: rgba(255,255,255,.92);
      border:1px solid rgba(255,255,255,.38);
      border-radius: 18px;
      padding:16px;
      box-shadow: 0 24px 90px rgba(0,0,0,.25);
      color: var(--ink);
    }
    .heroPanel b{display:block; font-size:14px}
    .heroPanel .muted{font-size:13px; line-height:1.6}
    .panelList{margin:12px 0 0; padding:0; list-style:none; display:grid; gap:8px}
    .panelList li{display:flex; gap:10px; font-size:13px; color: rgba(16,20,24,.75)}
    .tick{
      width:18px;height:18px;border-radius:8px;
      border:1px solid var(--line);
      background: rgba(255,255,255,.85);
      display:grid; place-items:center;
      font-family: var(--mono);
      color: rgba(16,20,24,.85);

      flex:0 0 auto;
      margin-top:1px;
    }

    .sliderControls{
      position:absolute; inset:auto 16px 16px 16px;
      display:flex; justify-content:space-between; align-items:center;
      gap:10px;
      pointer-events:none;
    }
    .arrows{display:flex; gap:8px; pointer-events:auto}
    .arrow{
      width:44px;height:44px;border-radius:14px;
      border:1px solid rgba(255,255,255,.22);
      background: rgba(255,255,255,.12);
      backdrop-filter: blur(10px);
      color:#fff; cursor:pointer;
      display:grid; place-items:center;
      font-weight:900;
      transition: transform .16s ease, background .16s ease;
    }
    .arrow:hover{transform: translateY(-1px); background: rgba(255,255,255,.18)}
    .dots{display:flex; gap:8px; align-items:center; pointer-events:auto}
    .dotBtn{
      width:10px;height:10px;border-radius:999px;
      border:1px solid rgba(255,255,255,.35);
      background: rgba(255,255,255,.22);
      cursor:pointer;
    }
    .dotBtn.active{background: rgba(181,142,74,.85); border-color: rgba(181,142,74,.95)}

    /* Services grid */
    .services{display:grid; grid-template-columns: repeat(3, 1fr); gap:14px}
    .svc{padding:16px}
    .svcTop{display:flex; gap:12px; align-items:flex-start}
    .ico{
      width:44px;height:44px;border-radius:14px;
      border:1px solid var(--line);
      background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.72));
      display:grid; place-items:center;
      color: var(--accent2);
      font-weight:950;
      font-family: var(--mono);
      flex: 0 0 auto;
    }
    .svc h3{margin:0 0 6px; font-size:16px}
    .svc p{margin:0;color:var(--muted); line-height:1.7; font-size:13px}
    .svc a.more{
      display:inline-flex; align-items:center; gap:8px;
      margin-top:12px; font-weight:900; font-size:13px;
      color: rgba(14,42,42,.92);
    }
    .svc a.more span{color: var(--accent)}
    .svc a.more:hover{text-decoration:underline}

    /* Two columns band */
    .band{
      display:grid; grid-template-columns: 1.1fr .9fr;
      gap:14px;
    }
    .band > div{padding:18px}
    .quote{
      font-family: var(--serif);
      font-size:20px;
      line-height:1.25;
      margin:0;
      letter-spacing:-.2px;
    }
    .kpiGrid{display:grid; grid-template-columns: repeat(3, 1fr); gap:10px; margin-top:12px}
    .kpi{
      border:1px solid var(--line);
      background: rgba(255,255,255,.78);
      border-radius: 14px;
      padding:12px;
    }
    .kpi b{display:block; font-size:18px; font-family: var(--serif)}
    .kpi span{display:block; color:var(--muted); font-size:12px; margin-top:3px}

    /* Contact */
    .contactGrid{display:grid; grid-template-columns: 1.05fr .95fr; gap:14px}
    .form{padding:18px}
    label{display:block; font:12px var(--mono); color:rgba(16,20,24,.62); margin:10px 0 6px}
    input, textarea, select{
      width:100%;
      border-radius:14px;
      border:1px solid var(--line);
      background: rgba(255,255,255,.90);
      color: var(--ink);
      padding:12px 12px;
      outline:none;
      font-size:14px;
    }
    textarea{min-height:120px; resize:vertical}
    .row{display:grid; grid-template-columns: 1fr 1fr; gap:10px}
    .note{color:rgba(16,20,24,.62); font-size:12px; margin-top:10px; line-height:1.55}
    .side{padding:18px}
    .info{
      padding:14px;
      border-radius: 14px;
      border:1px solid var(--line);
      background: rgba(255,255,255,.78);
      margin-bottom:12px;
    }
    .info b{display:block}
    .info span{display:block; color:rgba(16,20,24,.68); font-size:13px; margin-top:3px; line-height:1.55}

    footer{padding:26px 0 44px; color:rgba(16,20,24,.70); font-size:13px}
    .foot{
      border-top:1px solid var(--line);
      padding-top:18px;
      display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap
    }

    /* WhatsApp floating */
    .wa{
      position:fixed; right:18px; bottom:18px; z-index:120;
      display:flex; align-items:center; gap:10px;
      padding:12px 14px;
      border-radius:999px;
      background: rgba(30,122,91,.12);
      border:1px solid rgba(30,122,91,.22);
      backdrop-filter: blur(10px);
      box-shadow: 0 18px 60px rgba(16,20,24,.18);
      transition: transform .15s ease;
    }
    .wa:hover{transform: translateY(-2px)}
    .wa .b{
      width:40px;height:40px;border-radius:999px;
      background: rgba(30,122,91,.14);
      border:1px solid rgba(30,122,91,.24);
      display:grid; place-items:center;
      font-weight:950; font-family: var(--mono);
      color: rgba(16,20,24,.85);
    }
    .wa strong{display:block; font-size:13px; color: var(--ink)}
    .wa small{display:block; color:rgba(16,20,24,.62); margin-top:2px}

    /* ===== RESPONSIVE BREAKPOINTS ===== */
    @media (max-width: 980px){
      nav{display:none}
      .heroContent{grid-template-columns: 1fr; padding: 22px}
      .heroPanel{justify-self:stretch}
      .services{grid-template-columns: 1fr}
      .band{grid-template-columns: 1fr}
      .kpiGrid{grid-template-columns: 1fr}
      .contactGrid{grid-template-columns: 1fr}
      .row{grid-template-columns: 1fr}
    }

    @media (max-width: 560px){
      .topbar{padding: 10px 0}
      .btn{padding: 10px 12px; border-radius: 12px; font-size: 13px}
      .lang{padding: 5px; border-radius: 12px}
      .lang button{padding: 7px 9px; border-radius: 10px; font-size: 12px}

      .heroContent{padding: 16px; gap: 12px}
      .heroText p{font-size: 14px}
      .heroPanel{padding: 14px; border-radius: 16px}

      .sliderControls{inset:auto 12px 12px 12px}
      .arrow{width:40px;height:40px;border-radius:12px}

      .wa{right:12px; bottom:12px; padding:10px 12px}
      .wa .b{width:38px;height:38px}
    }