:root{
    --bg:#060d16;
    --bg-soft:#0b1726;
    --surface:rgba(255,255,255,.055);
    --surface-2:rgba(255,255,255,.03);
    --surface-hover:rgba(255,255,255,.09);
    --border:rgba(255,255,255,.12);
    --border-strong:rgba(255,255,255,.22);
    --text:#f5f9fc;
    --muted:#c2d1de;
    --primary:#22d3ee;
    --primary-2:#0ea5e9;
    --primary-ink:#03141c;
    --success:#34d399;
    --success-bg:rgba(52,211,153,.12);
    --success-border:rgba(52,211,153,.35);
    --danger:#f87171;
    --danger-bg:rgba(248,113,113,.12);
    --danger-border:rgba(248,113,113,.35);
    --whatsapp:#25d366;
    --shadow:0 20px 55px rgba(0,0,0,.38);
    --radius-lg:26px;
    --radius-md:18px;
    --radius-sm:12px;
    --font-display:'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-body:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --focus-ring:0 0 0 3px rgba(34,211,238,.35), 0 0 0 1.5px var(--primary);
  }

  *,*::before,*::after{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  }

  body{
    margin:0;
    font-family:var(--font-body);
    background:
      radial-gradient(circle at top right, rgba(34,211,238,.10), transparent 26%),
      radial-gradient(circle at left center, rgba(14,165,233,.10), transparent 22%),
      linear-gradient(180deg,#060d16 0%,#08121f 100%);
    color:var(--text);
    line-height:1.65;
    font-size:16px;
    -webkit-font-smoothing:antialiased;
  }

  h1,h2,h3{ font-family:var(--font-display); line-height:1.18; margin:0 0 .5em; color:#fbfdff; }
  h1{ font-weight:800; } h2{ font-weight:800; } h3{ font-weight:700; }
  p{ margin:0 0 1em; }
  a{ color:inherit; text-decoration:none; }
  img{ max-width:100%; display:block; }
  ul{ margin:0; padding:0; list-style:none; }
  button{ font-family:inherit; }

  a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{
    outline:none; box-shadow:var(--focus-ring); border-radius:10px;
  }

  .skip-link{
    position:absolute; left:12px; top:-60px; z-index:2000;
    background:var(--primary); color:var(--primary-ink); font-weight:700;
    padding:12px 18px; border-radius:12px; transition:top .2s ease;
  }
  .skip-link:focus{ top:12px; }

  .container{ width:min(1240px,92%); margin:0 auto; }
  .section{ padding:88px 0; }
  .section--tight{ padding-top:0; }

  .eyebrow{
    display:inline-flex; align-items:center; gap:8px; color:var(--primary);
    text-transform:uppercase; letter-spacing:1.6px; font-size:.82rem; font-weight:700; margin-bottom:12px;
  }
  .section-title{ text-align:center; margin:0 auto 46px; max-width:760px; }
  .section-title h2{ font-size:clamp(1.9rem,1.3rem + 2.4vw,2.7rem); margin-bottom:14px; }
  .section-title p{ color:var(--muted); margin:0; font-size:1.03rem; }

  .icon{ width:24px; height:24px; flex-shrink:0; }
  .icon-sm{ width:18px; height:18px; }

  /* ---------- Header ---------- */
  header.site-header{
    position:sticky; top:0; z-index:1000;
    background:rgba(6,13,22,.86); backdrop-filter:blur(14px);
    border-bottom:1px solid var(--border);
  }
  .nav{ min-height:80px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
  .brand{ display:flex; align-items:center; gap:13px; min-width:0; }
  .brand img{ width:52px; height:52px; object-fit:contain; border-radius:14px; background:var(--surface); padding:5px; }
  .brand-text{ display:flex; flex-direction:column; line-height:1.2; }
  .brand-text .brand-name{ font-family:var(--font-display); font-weight:800; color:var(--primary); font-size:1.05rem; }
  .brand-text .brand-sub{ color:#d6e0ea; font-size:.82rem; }

  .primary-nav{ display:flex; align-items:center; gap:24px; }
  .primary-nav a{ color:#dbe7f1; font-size:.95rem; font-weight:500; padding:8px 2px; position:relative; }
  .primary-nav a:hover{ color:var(--primary); }

  .nav-actions{ display:flex; align-items:center; gap:12px; }
  .top-cta{
    display:inline-flex; align-items:center; justify-content:center; height:46px; padding:0 20px;
    border-radius:14px; background:linear-gradient(90deg,var(--primary),var(--primary-2));
    color:var(--primary-ink); font-weight:700; box-shadow:0 12px 28px rgba(14,165,233,.25);
    transition:transform .2s ease;
  }
  .top-cta:hover{ transform:translateY(-2px); }

  .menu-summary{
    display:none; width:46px; height:46px; align-items:center; justify-content:center;
    border:1px solid var(--border); background:var(--surface); border-radius:14px; cursor:pointer;
    list-style:none; color:#fff;
  }
  .menu-summary::-webkit-details-marker{ display:none; }
  .menu-summary .icon-close{ display:none; }
  .mobile-menu-toggle[open] .menu-summary .icon-menu{ display:none; }
  .mobile-menu-toggle[open] .menu-summary .icon-close{ display:block; }

  .mobile-panel{
    position:absolute; left:0; right:0; top:100%; z-index:999;
    padding:6px 0 18px; background:#0a1420; backdrop-filter:blur(14px);
    border-bottom:1px solid var(--border); box-shadow:0 24px 40px rgba(0,0,0,.35);
  }
  .mobile-panel-inner{ display:grid; gap:10px; padding-top:10px; }
  .mobile-panel a{
    display:flex; align-items:center; min-height:48px; padding:0 16px; border-radius:14px;
    background:var(--surface); border:1px solid var(--border); color:#e7f2fb; font-weight:500;
  }

  @media (max-width:860px){
    .primary-nav,.top-cta{ display:none; }
    .menu-summary{ display:inline-flex; }
  }

  /* ---------- Buttons ---------- */
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    min-width:170px; min-height:50px; padding:13px 24px; border-radius:16px; border:none;
    font-weight:700; font-size:.98rem; cursor:pointer; transition:transform .22s ease, box-shadow .22s ease;
  }
  .btn-primary{ background:linear-gradient(90deg,var(--primary),var(--primary-2)); color:var(--primary-ink); box-shadow:0 14px 32px rgba(14,165,233,.28); }
  .btn-primary:hover{ transform:translateY(-2px); }
  .btn-secondary{ background:var(--surface); border:1px solid var(--border-strong); color:var(--text); }
  .btn-secondary:hover{ transform:translateY(-2px); background:var(--surface-hover); }
  .btn-whatsapp{ background:var(--whatsapp); color:#04160c; }
  .btn-whatsapp:hover{ transform:translateY(-2px); }

  /* ---------- Hero ---------- */
  .hero{ position:relative; padding-top:56px; overflow:hidden; }
  .hero::before{
    content:""; position:absolute; inset:0;
    background:radial-gradient(circle at top right, rgba(34,211,238,.16), transparent 30%);
    pointer-events:none;
  }
  .hero-grid{ position:relative; z-index:1; display:grid; grid-template-columns:1.08fr .92fr; gap:40px; align-items:center; padding-bottom:70px; }
  .hero-badge{
    display:inline-flex; align-items:center; gap:9px; padding:9px 16px; border-radius:999px;
    border:1px solid rgba(34,211,238,.32); background:rgba(34,211,238,.09); color:#9ff1ff;
    font-size:.9rem; font-weight:600; margin-bottom:18px;
  }
  .hero h1{ font-size:clamp(2.1rem,1.3rem + 3.4vw,3.6rem); letter-spacing:-.5px; margin-bottom:16px; }
  .hero h1 .hl{ color:var(--primary); text-shadow:0 0 22px rgba(34,211,238,.25); }
  .hero-lead{ color:var(--muted); font-size:1.06rem; max-width:640px; }
  .hero-buttons{ display:flex; flex-wrap:wrap; gap:14px; margin:26px 0 30px; }
  .hero-points{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; max-width:760px; }
  .hero-point{ padding:16px 18px; border-radius:18px; background:var(--surface); border:1px solid var(--border); }
  .hero-point strong{ display:block; color:var(--primary); font-size:1rem; margin-bottom:4px; font-family:var(--font-display); }
  .hero-point span{ color:#d9e5ef; font-size:.9rem; }

  .hero-visual{ display:flex; justify-content:center; }
  .carousel{
    width:min(560px,100%); padding:16px; border-radius:32px;
    background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));
    border:1px solid var(--border); box-shadow:var(--shadow);
  }
  .carousel-viewport{
    position:relative; width:100%; aspect-ratio:1/1; border-radius:24px; overflow:hidden;
    background:var(--surface); border:1px solid var(--border);
  }
  .carousel-slide{
    position:absolute; inset:0; opacity:0; visibility:hidden; transform:scale(1.02);
    transition:opacity .6s ease, visibility .6s ease, transform .6s ease;
  }
  .carousel-slide.is-active{ opacity:1; visibility:visible; transform:scale(1); z-index:2; }
  .carousel-slide img{ width:100%; height:100%; object-fit:cover; background:#0b1726; }

  .carousel-controls{
    position:absolute; inset:auto 0 16px 0; z-index:5; display:flex; align-items:center; justify-content:center; gap:10px;
  }
  .carousel-btn{
    width:44px; height:44px; border-radius:50%; border:1px solid var(--border-strong);
    background:rgba(6,13,22,.55); backdrop-filter:blur(8px); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer;
  }
  .carousel-btn:hover{ background:rgba(34,211,238,.22); border-color:rgba(34,211,238,.4); }
  .carousel-status{
    min-width:64px; height:44px; padding:0 14px; border-radius:999px; background:rgba(6,13,22,.55);
    border:1px solid var(--border-strong); backdrop-filter:blur(8px); color:#eaf6fb; font-size:.85rem; font-weight:600;
    display:flex; align-items:center; justify-content:center; font-variant-numeric:tabular-nums;
  }

  /* ---------- Cards / grid ---------- */
  .grid{ display:grid; gap:20px; }
  .grid-2{ grid-template-columns:repeat(2,1fr); }
  .grid-3{ grid-template-columns:repeat(3,1fr); }
  .grid-4{ grid-template-columns:repeat(4,1fr); }

  .card{
    height:100%; padding:26px; border-radius:var(--radius-lg);
    background:linear-gradient(180deg,var(--surface),var(--surface-2));
    border:1px solid var(--border); box-shadow:0 16px 36px rgba(0,0,0,.16); transition:transform .25s ease, border-color .25s ease;
  }
  .card:hover{ transform:translateY(-5px); border-color:rgba(34,211,238,.28); }
  .card-icon{
    width:52px; height:52px; border-radius:16px; display:flex; align-items:center; justify-content:center;
    background:rgba(34,211,238,.1); border:1px solid rgba(34,211,238,.18); color:var(--primary); margin-bottom:16px;
  }
  .card h3{ font-size:1.06rem; margin-bottom:8px; }
  .card p{ color:var(--muted); font-size:.95rem; margin:0; }

  /* ---------- About ---------- */
  .about-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:stretch; }
  .about-highlight{
    padding:32px; border-radius:var(--radius-lg);
    background:linear-gradient(135deg,rgba(14,165,233,.2),rgba(34,211,238,.1)),rgba(255,255,255,.03);
    border:1px solid var(--border); box-shadow:var(--shadow);
  }
  .about-highlight h3{ font-size:1.6rem; }
  .about-highlight p{ color:#d7e4ef; }
  .bullet-list{ display:grid; gap:12px; margin-top:8px; }
  .bullet-item{
    display:flex; align-items:flex-start; gap:10px; padding:13px 16px; border-radius:16px;
    background:var(--surface); border:1px solid var(--border); color:#ebf5fd; font-weight:600; font-size:.96rem;
  }
  .bullet-item .icon{ color:var(--primary); margin-top:1px; }

  /* ---------- References ---------- */
  .references-wrap{ padding:32px; border-radius:30px; background:var(--surface-2); border:1px solid var(--border); }
  .ref-card{
    min-height:130px; padding:20px; border-radius:20px; background:var(--surface); border:1px solid var(--border);
    display:flex; align-items:center; justify-content:center; transition:transform .22s ease, border-color .22s ease;
  }
  .ref-card:hover{ transform:translateY(-4px); border-color:rgba(34,211,238,.26); }
  .ref-card img{ max-width:150px; max-height:56px; width:auto; height:auto; object-fit:contain; filter:grayscale(100%) brightness(1.25); opacity:.9; transition:.22s ease; }
  .ref-card:hover img{ filter:grayscale(0) brightness(1.02); opacity:1; }

  /* ---------- FAQ ---------- */
  .faq-list{ display:grid; gap:14px; max-width:880px; margin:0 auto; }
  .faq-item{ border-radius:18px; background:var(--surface); border:1px solid var(--border); overflow:hidden; }
  .faq-item summary{
    cursor:pointer; list-style:none; padding:19px 22px; display:flex; align-items:center; justify-content:space-between; gap:16px;
  }
  .faq-item summary::-webkit-details-marker{ display:none; }
  .faq-item summary .faq-q{ margin:0; font-size:1.02rem; font-weight:700; color:#f4f9fc; font-family:var(--font-display); }
  .faq-chevron{ color:var(--primary); transition:transform .25s ease; flex-shrink:0; }
  .faq-item[open] .faq-chevron{ transform:rotate(180deg); }
  .faq-body{ padding:0 22px 20px; color:var(--muted); }

  /* ---------- Contact ---------- */
  .contact-single{ max-width:620px; margin:0 auto; }
  .panel{
    padding:30px; border-radius:var(--radius-lg);
    background:linear-gradient(180deg,var(--surface),var(--surface-2)); border:1px solid var(--border); box-shadow:0 16px 36px rgba(0,0,0,.16);
  }
  .panel h3{ font-size:1.4rem; margin-bottom:8px; }
  .panel > p{ color:var(--muted); margin-bottom:18px; }

  .info-list{ display:grid; gap:13px; margin-top:16px; }
  .info-item{ display:flex; gap:14px; padding:15px 16px; border-radius:16px; background:var(--surface); border:1px solid var(--border); }
  .info-item .icon{ color:var(--primary); margin-top:2px; }
  .info-item strong{ display:block; color:var(--primary); font-size:.88rem; margin-bottom:2px; font-family:var(--font-display); }
  .info-item a,.info-item span{ color:#eef7ff; }

  .contact-buttons{ display:flex; gap:12px; flex-wrap:wrap; margin-top:22px; }
  .contact-buttons .btn{ flex:1; }

  .map-frame{ width:100%; height:360px; border:0; border-radius:18px; margin-top:16px; background:var(--surface); }

  /* ---------- Footer ---------- */
  footer.site-footer{ margin-top:20px; padding-top:56px; background:rgba(4,9,16,.85); border-top:1px solid var(--border); }
  .footer-grid{ display:grid; grid-template-columns:1.1fr 1fr 1fr; gap:24px; padding-bottom:24px; }
  .footer-col h4{ color:var(--primary); font-size:1.05rem; margin-bottom:12px; font-family:var(--font-display); }
  .footer-col p{ color:#c9d6e1; margin-bottom:10px; font-size:.95rem; }
  .footer-col a{ display:flex; align-items:center; gap:8px; color:#c9d6e1; margin-bottom:10px; font-size:.95rem; }
  .footer-col a:hover{ color:var(--primary); }

  .made-by{ border-top:1px solid var(--border); padding:18px 0; }
  .made-by a{ display:inline-flex; align-items:center; gap:12px; color:#d6e4ef; }
  .made-by a:hover{ color:var(--primary); }
  .made-by img{ width:34px; height:34px; object-fit:contain; background:var(--surface); border-radius:10px; padding:4px; }

  .copyright{ text-align:center; color:#8ea0b3; padding:0 0 26px; font-size:.88rem; }

  .whatsapp-fixed{
    position:fixed; right:20px; bottom:20px; z-index:900; display:inline-flex; align-items:center; gap:10px;
    background:var(--whatsapp); color:#04160c; padding:14px 18px; border-radius:999px; font-weight:700; box-shadow:0 12px 28px rgba(0,0,0,.3);
  }

  @media (max-width:1100px){
    .hero-grid,.about-grid,.contact-grid,.grid-4{ grid-template-columns:1fr 1fr; }
    .grid-3{ grid-template-columns:1fr 1fr; }
    .footer-grid{ grid-template-columns:1fr 1fr; }
  }
  @media (max-width:820px){
    .hero-grid,.about-grid,.contact-grid,.grid-2,.grid-3,.grid-4,.footer-grid{ grid-template-columns:1fr; }
    .hero-points{ grid-template-columns:1fr; }
  }
  @media (max-width:640px){
    .section{ padding:64px 0; }
    .hero{ padding-top:36px; }
    .hero-buttons .btn{ width:100%; }
    .contact-buttons .btn{ width:100%; }
    .whatsapp-fixed{ left:14px; right:14px; justify-content:center; bottom:14px; }
  }

  /* ================= BLOG ================= */
  .blog-card{
    display:flex; flex-direction:column; border-radius:var(--radius-lg); overflow:hidden;
    background:linear-gradient(180deg,var(--surface),var(--surface-2)); border:1px solid var(--border);
    box-shadow:0 16px 36px rgba(0,0,0,.16); transition:transform .25s ease, border-color .25s ease;
  }
  .blog-card:hover{ transform:translateY(-5px); border-color:rgba(34,211,238,.28); }
  .blog-card img{ width:100%; aspect-ratio:4/3; object-fit:contain; background:#fff; padding:14px; }
  .blog-card-body{ display:flex; flex-direction:column; gap:8px; padding:18px 20px 22px; }
  .blog-card-tag{
    display:inline-flex; align-self:flex-start; padding:5px 12px; border-radius:999px; font-size:.76rem;
    font-weight:700; text-transform:uppercase; letter-spacing:.6px; color:var(--primary-ink);
    background:linear-gradient(90deg,var(--primary),var(--primary-2));
  }
  .blog-card-title{ font-family:var(--font-display); font-weight:700; font-size:1.02rem; color:#f7fbff; line-height:1.35; }
  .blog-card-excerpt{ color:var(--muted); font-size:.92rem; margin:0; }
  .blog-card-meta{ display:flex; gap:12px; color:#93a7b9; font-size:.82rem; margin-top:auto; padding-top:6px; }

  /* Blog index hero */
  .blog-hero{ padding:56px 0 20px; }
  .blog-hero h1{ font-size:clamp(2rem,1.3rem + 2.6vw,3rem); max-width:820px; }
  .blog-hero p{ color:var(--muted); max-width:680px; font-size:1.05rem; }
  .blog-grid-wrap{ padding-bottom:40px; }

  /* Breadcrumb */
  .breadcrumb{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-size:.86rem; color:#9db0c2; margin-bottom:18px; }
  .breadcrumb a{ color:#9db0c2; }
  .breadcrumb a:hover{ color:var(--primary); }
  .breadcrumb .sep{ color:#54687c; }
  .breadcrumb [aria-current="page"]{ color:var(--muted); }

  /* Article layout */
  .article-header{ padding:44px 0 8px; }
  .article-header .blog-card-tag{ margin-bottom:16px; }
  .article-header h1{ font-size:clamp(1.9rem,1.2rem + 2.6vw,2.9rem); max-width:880px; }
  .article-lead{ color:var(--muted); font-size:1.08rem; max-width:760px; }
  .article-meta{ display:flex; flex-wrap:wrap; gap:18px; color:#93a7b9; font-size:.88rem; margin:18px 0 6px; }
  .article-meta span{ display:inline-flex; align-items:center; gap:7px; }

  .article-hero-figure{ margin:30px 0 10px; }
  .article-hero-figure img{
    width:100%; max-height:420px; object-fit:contain; background:#fff; border-radius:var(--radius-lg);
    border:1px solid var(--border); padding:18px;
  }
  .article-hero-figure figcaption{ color:#8ea0b3; font-size:.85rem; margin-top:10px; text-align:center; }

  .article-body{ max-width:760px; margin:0 auto; padding:10px 0 10px; }
  .article-body h2{ font-size:1.55rem; margin-top:2.1em; scroll-margin-top:100px; }
  .article-body h3{ font-size:1.2rem; margin-top:1.7em; scroll-margin-top:100px; }
  .article-body p{ color:#dbe6ef; font-size:1.03rem; }
  .article-body ul,.article-body ol{ margin:0 0 1.2em; padding-left:1.3em; color:#dbe6ef; display:grid; gap:8px; }
  .article-body li{ padding-left:.2em; }
  .article-body strong{ color:#fff; }
  .article-body a:not(.btn){ color:var(--primary); text-decoration:underline; text-underline-offset:3px; }
  .article-body figure{ margin:28px 0; }
  .article-body figure img{
    width:100%; max-height:380px; object-fit:contain; background:#fff; border-radius:var(--radius-md);
    border:1px solid var(--border); padding:16px;
  }
  .article-body figcaption{ color:#8ea0b3; font-size:.85rem; margin-top:10px; text-align:center; }

  .toc{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:20px 22px; margin:26px 0; max-width:760px; margin-left:auto; margin-right:auto; }
  .toc p{ margin:0 0 10px; font-weight:700; color:#f0f6fa; font-family:var(--font-display); font-size:.95rem; }
  .toc ol{ margin:0; padding-left:1.2em; display:grid; gap:6px; color:var(--muted); font-size:.95rem; }
  .toc a{ color:var(--muted); }
  .toc a:hover{ color:var(--primary); }

  .callout{
    max-width:760px; margin:34px auto; padding:26px 28px; border-radius:var(--radius-lg);
    background:linear-gradient(135deg,rgba(14,165,233,.2),rgba(34,211,238,.1)),rgba(255,255,255,.03);
    border:1px solid var(--border); text-align:center;
  }
  .callout h3{ margin-bottom:8px; }
  .callout p{ color:#d7e4ef; margin-bottom:18px; }
  .callout .btn-row{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

  .article-footer{ max-width:760px; margin:40px auto 0; padding-top:24px; border-top:1px solid var(--border); }
  .tag-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }
  .tag-chip{ padding:7px 14px; border-radius:999px; background:var(--surface); border:1px solid var(--border); color:var(--muted); font-size:.85rem; }

  .related-posts h2{ font-size:1.5rem; }

  @media (max-width:640px){
    .article-hero-figure img, .article-body figure img{ max-height:280px; padding:12px; }
    .blog-hero{ padding:40px 0 10px; }
  }