/* ─ SERVIÇOS PAGE CSS ─ */

.page-hero-content { display:flex; flex-direction:column; gap:var(--sp-5); }
.page-hero-content h1 { font-size:clamp(2.5rem,5.5vw,4.5rem); }

/* Serviço blocks */
.serv-section { position:relative; overflow:hidden; }
.serv-block { position:relative; }

.serv-block-badge { margin-bottom:var(--sp-6); }

.serv-block-grid {
  display:grid;
  grid-template-columns:1fr;
  gap:var(--sp-12);
  align-items:center;
}
@media (min-width:1024px) {
  .serv-block-grid { grid-template-columns:1fr 1fr; gap:var(--sp-16); }
  .serv-block-reverse .serv-visual { order:-1; }
}

.serv-content { display:flex; flex-direction:column; gap:var(--sp-4); }
.serv-icon { font-size:48px; transition:transform var(--t-spring); }
.serv-content:hover .serv-icon { transform:scale(1.1) rotate(5deg); }
.serv-content h2 { font-size:clamp(1.875rem,3.5vw,2.75rem); }
.serv-content p { font-size:var(--text-base); color:var(--text-secondary); line-height:1.8; }

/* Serviço types */
.serv-types { display:flex; flex-wrap:wrap; gap:var(--sp-3); margin-top:var(--sp-2); }
.serv-type-card {
  flex:1; min-width:120px;
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-md);
  padding:var(--sp-4);
  display:flex; flex-direction:column; gap:4px;
  transition:border-color var(--t-base), background var(--t-base);
}
.serv-type-card:hover { border-color:var(--cyan); background:var(--cyan-dim); }
.serv-type-icon { font-size:24px; margin-bottom:4px; }
.serv-type-card strong { font-size:var(--text-sm); font-weight:700; color:var(--text-primary); }
.serv-type-card span { font-size:var(--text-xs); color:var(--text-muted); }

/* Sites visual */
.serv-visual { display:flex; justify-content:center; }
.serv-visual-card {
  width:100%; max-width:380px;
  background:rgba(255,255,255,0.04);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-xl);
  padding:var(--sp-6);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  box-shadow:var(--glass-shadow), var(--shadow-cyan);
}
.sv-header { display:flex; align-items:center; gap:6px; margin-bottom:var(--sp-5); }
.sv-dots { display:flex; gap:5px; }
.sv-dots span { width:9px; height:9px; border-radius:50%; }
.sv-dots span:nth-child(1){background:#ff5f57;}
.sv-dots span:nth-child(2){background:#ffbd2e;}
.sv-dots span:nth-child(3){background:#27c840;}
.sv-url { flex:1; height:20px; background:rgba(255,255,255,.06); border-radius:var(--radius-full); padding:0 10px; display:flex; align-items:center; font-size:10px; color:var(--text-muted); margin-left:8px; }
.sv-metrics { display:flex; gap:var(--sp-3); margin-bottom:var(--sp-5); }
.sv-metric { flex:1; text-align:center; background:rgba(255,255,255,.03); border:1px solid var(--glass-border); border-radius:var(--radius-md); padding:var(--sp-4) var(--sp-2); }
.sv-score { display:block; font-family:var(--font-heading); font-size:var(--text-2xl); font-weight:900; }
.sv-metric span:last-child { font-size:9px; color:var(--text-muted); }
.sv-features { display:flex; flex-wrap:wrap; gap:var(--sp-2); }
.sv-feat { font-size:10px; background:rgba(0,212,255,.07); border:1px solid rgba(0,212,255,.2); border-radius:var(--radius-full); padding:4px 10px; color:var(--cyan); font-weight:600; }

/* Marketing visual */
.mkt-visual { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4); max-width:380px; width:100%; margin-inline:auto; }
.mkt-card {
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);
  padding:var(--sp-5);
  display:flex; flex-direction:column; gap:var(--sp-2);
  transition:border-color var(--t-base), transform var(--t-spring), box-shadow var(--t-base);
  border-top:2px solid var(--card-color);
}
.mkt-card:hover { transform:translateY(-4px); border-color:var(--card-color); box-shadow:0 0 30px rgba(0,0,0,.3); }
.mkt-card-icon { font-size:24px; }
.mkt-card strong { font-size:var(--text-sm); font-weight:700; color:var(--text-primary); }
.mkt-stat { font-size:var(--text-xs); color:var(--card-color); font-weight:700; }

/* Design palette */
.design-palette {
  background:rgba(255,255,255,.04);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-xl);
  padding:var(--sp-8);
  max-width:380px; width:100%; margin-inline:auto;
  display:flex; flex-direction:column; gap:var(--sp-6);
}
.palette-title { font-family:var(--font-heading); font-weight:700; font-size:var(--text-sm); color:var(--text-muted); letter-spacing:.05em; text-transform:uppercase; }
.palette-colors { display:flex; gap:var(--sp-2); }
.pal-col { flex:1; height:48px; border-radius:var(--radius-md); transition:transform var(--t-spring); cursor:pointer; }
.pal-col:hover { transform:scaleY(1.15); }
.palette-type { display:flex; flex-direction:column; gap:4px; }
.palette-components { display:flex; align-items:center; gap:var(--sp-4); }
.pal-btn { background:linear-gradient(135deg,var(--cyan),var(--purple)); color:#fff; font-weight:700; font-size:var(--text-xs); padding:8px 16px; border-radius:var(--radius-full); }
.pal-badge { background:var(--cyan-dim); border:1px solid rgba(0,212,255,.3); color:var(--cyan); font-size:var(--text-xs); font-weight:700; padding:4px 12px; border-radius:var(--radius-full); }

/* GEO service */
.geo-serv-block { max-width:980px; margin-inline:auto; display:flex; flex-direction:column; gap:var(--sp-8); }

.geo-comparison {
  display:flex; align-items:stretch; gap:0; flex-wrap:wrap;
  background:rgba(255,255,255,.03);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-xl);
  overflow:hidden;
}
.geo-col { flex:1; min-width:240px; padding:var(--sp-8); }
.geo-col-old { opacity:.75; }
.geo-col-new { background:linear-gradient(135deg,rgba(0,212,255,.04),rgba(168,85,247,.04)); border-left:1px solid var(--glass-border); }
.geo-col-label { font-family:var(--font-heading); font-weight:700; font-size:var(--text-sm); letter-spacing:.05em; text-transform:uppercase; color:var(--text-muted); margin-bottom:var(--sp-5); }
.geo-col-new .geo-col-label { color:var(--cyan); }
.geo-vs {
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-heading); font-size:var(--text-lg); font-weight:900; color:var(--text-muted);
  padding:var(--sp-4);
  background:rgba(255,255,255,.03);
  border-inline:1px solid var(--glass-border);
  min-width:60px;
}

.geo-how { margin-top:var(--sp-6); }
.geo-steps { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-5); }
@media (min-width:768px) { .geo-steps { grid-template-columns:repeat(4,1fr); } }
.geo-step { position:relative; padding:var(--sp-6); }
.geo-step-num {
  font-family:var(--font-heading); font-size:var(--text-4xl); font-weight:900;
  background:var(--grad-text); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  text-shadow:none; opacity:.6; margin-bottom:var(--sp-3); line-height:1;
}
.geo-step h4 { font-size:var(--text-base); margin-bottom:var(--sp-2); }
.geo-step p { font-size:var(--text-sm); color:var(--text-secondary); line-height:1.7; }
.btn-mobile {
  display: none !important;
}

@media (max-width: 991px) {
  /* Limit width and center the GEO button */
  #geo .btn-xl {
    max-width: 290px !important;
    width: 100% !important;
    padding-inline: var(--sp-3) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    white-space: normal !important;
    display: inline-flex !important;
    justify-content: center !important;
    float: none !important;
  }

  /* Hide desktop button and show/style mobile button at bottom */
  .btn-desktop {
    display: none !important;
  }

  .btn-mobile {
    display: inline-flex !important;
    max-width: 290px !important;
    width: 100% !important;
    padding-inline: var(--sp-3) !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    white-space: normal !important;
    justify-content: center !important;
    float: none !important;
    margin-top: var(--sp-6) !important;
    order: 999 !important;
  }

  .serv-block-grid {
    display: flex !important;
    flex-direction: column !important;
  }

  /* Reorder Service 2 content to top and visual/cards to bottom */
  #marketing .serv-block-grid .serv-content {
    order: 1 !important;
  }
  #marketing .serv-block-grid .serv-visual {
    order: 2 !important;
  }

  /* Symmetrically align Service 3 (#design) container */
  #design {
    padding-left: 0 !important;
    margin-left: 0 !important;
  }
  #design .container {
    margin-inline: auto !important;
    padding-inline: var(--sp-4) !important;
  }
}