/* ============================================
   ISOCLEAN BRASIL - CSS Principal
   Piso Epoxi Industrial, Isopainel e Salas Limpas
   Sistema visual: blueprint industrial + camadas
   ============================================ */

/* CSS Reset Moderno */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;line-height:1.6;color:#333;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body.menu-open{overflow:hidden}
img{max-width:100%;height:auto;display:block}
a{text-decoration:none;color:inherit}
ul,ol{list-style:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
input,textarea,select{font-family:inherit}

/* ============================================
   VARIAVEIS CSS - Design System
   ============================================ */
:root{
  /* Cores Principais - Identidade IsoClean Brasil
     "Blueprint": azul de engenharia + navy profundo (confianca tecnica)
     "Signal": ambar de sinalizacao industrial (acao/CTA), o mesmo tom
     das faixas de seguranca visiveis nas obras da empresa */
  --color-primary:#176f7a;
  --color-primary-dark:#0e4f5a;
  --color-primary-light:#69b8ad;
  --color-secondary:#102d3a;
  --color-secondary-soft:#173d4a;
  --color-accent:#69b8ad;
  --color-accent-dark:#3f958c;
  --color-concrete:#aab5b8;

  /* Cores Neutras */
  --color-white:#ffffff;
  --color-gray-50:#f7f7f5;
  --color-gray-100:#eef0f1;
  --color-gray-200:#dde1e4;
  --color-gray-300:#c1c9cf;
  --color-gray-400:#8f9aa3;
  --color-gray-500:#647079;
  --color-gray-600:#48545d;
  --color-gray-700:#333e46;
  --color-gray-800:#212930;
  --color-gray-900:#12171b;

  /* Cores de Feedback */
  --color-success:#1f8a5f;
  --color-warning:#a86f16;
  --color-error:#c23b3b;
  --color-info:#176f7a;

  /* Tipografia
     Display: Big Shoulders Display - condensada, industrial (sinalizacao/aco)
     Mono: IBM Plex Mono - dados tecnicos, rotulos, especificacoes
     Corpo: Inter - leitura corrida */
  --font-display:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-mono:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;

  --font-size-xs:0.75rem;
  --font-size-sm:0.875rem;
  --font-size-base:1rem;
  --font-size-lg:1.125rem;
  --font-size-xl:1.25rem;
  --font-size-2xl:1.5rem;
  --font-size-3xl:1.875rem;
  --font-size-4xl:2.5rem;
  --font-size-5xl:3.5rem;
  --font-size-6xl:4.5rem;

  /* Espacamento */
  --space-1:0.25rem;
  --space-2:0.5rem;
  --space-3:0.75rem;
  --space-4:1rem;
  --space-5:1.25rem;
  --space-6:1.5rem;
  --space-8:2rem;
  --space-10:2.5rem;
  --space-12:3rem;
  --space-16:4rem;
  --space-20:5rem;
  --space-24:6rem;

  /* Bordas - mais retas, precisas (identidade tecnica) */
  --radius-sm:0.1875rem;
  --radius-md:0.25rem;
  --radius-lg:0.375rem;
  --radius-xl:0.5rem;
  --radius-2xl:0.75rem;
  --radius-full:9999px;

  /* Sombras - discretas */
  --shadow-sm:0 1px 2px 0 rgb(10 35 56 / 0.06);
  --shadow-md:0 4px 10px -2px rgb(10 35 56 / 0.10);
  --shadow-lg:0 12px 24px -8px rgb(10 35 56 / 0.16);
  --shadow-xl:0 20px 40px -12px rgb(10 35 56 / 0.22);
  --shadow-2xl:0 25px 50px -12px rgb(10 35 56 / 0.3);

  /* Transicoes */
  --transition-fast:150ms ease;
  --transition-base:220ms cubic-bezier(.4,0,.2,1);
  --transition-slow:350ms cubic-bezier(.4,0,.2,1);

  /* Z-index */
  --z-dropdown:100;
  --z-sticky:200;
  --z-fixed:300;
  --z-modal:400;
  --z-popover:500;
  --z-tooltip:600;
}

/* ============================================
   UTILITARIOS
   ============================================ */
.container{width:100%;max-width:1280px;margin:0 auto;padding:0 var(--space-4)}
.container-sm{max-width:640px}
.container-md{max-width:768px}
.container-lg{max-width:1024px}
.container-xl{max-width:1280px}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Flexbox */
.flex{display:flex}
.flex-col{flex-direction:column}
.flex-wrap{flex-wrap:wrap}
.items-center{align-items:center}
.items-start{align-items:flex-start}
.items-end{align-items:flex-end}
.justify-center{justify-content:center}
.justify-between{justify-content:space-between}
.justify-around{justify-content:space-around}
.gap-1{gap:var(--space-1)}
.gap-2{gap:var(--space-2)}
.gap-4{gap:var(--space-4)}
.gap-6{gap:var(--space-6)}
.gap-8{gap:var(--space-8)}

/* Grid */
.grid{display:grid}
.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}
.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}

/* Espacamento */
.p-4{padding:var(--space-4)}
.p-6{padding:var(--space-6)}
.p-8{padding:var(--space-8)}
.py-4{padding-top:var(--space-4);padding-bottom:var(--space-4)}
.py-8{padding-top:var(--space-8);padding-bottom:var(--space-8)}
.py-12{padding-top:var(--space-12);padding-bottom:var(--space-12)}
.py-16{padding-top:var(--space-16);padding-bottom:var(--space-16)}
.py-20{padding-top:var(--space-20);padding-bottom:var(--space-20)}
.px-4{padding-left:var(--space-4);padding-right:var(--space-4)}
.px-6{padding-left:var(--space-6);padding-right:var(--space-6)}

.mt-2{margin-top:var(--space-2)}
.mt-4{margin-top:var(--space-4)}
.mt-6{margin-top:var(--space-6)}
.mt-8{margin-top:var(--space-8)}
.mb-2{margin-bottom:var(--space-2)}
.mb-4{margin-bottom:var(--space-4)}
.mb-6{margin-bottom:var(--space-6)}
.mb-8{margin-bottom:var(--space-8)}

/* Texto */
.text-center{text-align:center}
.text-left{text-align:left}
.text-right{text-align:right}

.text-xs{font-size:var(--font-size-xs)}
.text-sm{font-size:var(--font-size-sm)}
.text-base{font-size:var(--font-size-base)}
.text-lg{font-size:var(--font-size-lg)}
.text-xl{font-size:var(--font-size-xl)}
.text-2xl{font-size:var(--font-size-2xl)}
.text-3xl{font-size:var(--font-size-3xl)}
.text-4xl{font-size:var(--font-size-4xl)}
.text-5xl{font-size:var(--font-size-5xl)}

.font-light{font-weight:300}
.font-normal{font-weight:400}
.font-medium{font-weight:500}
.font-semibold{font-weight:600}
.font-bold{font-weight:700}
.font-extrabold{font-weight:800}

.leading-tight{line-height:1.25}
.leading-snug{line-height:1.375}
.leading-normal{line-height:1.5}
.leading-relaxed{line-height:1.625}
.leading-loose{line-height:2}

/* Cores de Texto */
.text-white{color:var(--color-white)}
.text-primary{color:var(--color-primary)}
.text-secondary{color:var(--color-secondary)}
.text-gray-500{color:var(--color-gray-500)}
.text-gray-600{color:var(--color-gray-600)}
.text-gray-700{color:var(--color-gray-700)}
.text-gray-800{color:var(--color-gray-800)}
.text-gray-900{color:var(--color-gray-900)}

/* Cores de Fundo */
.bg-white{background-color:var(--color-white)}
.bg-primary{background-color:var(--color-primary)}
.bg-secondary{background-color:var(--color-secondary)}
.bg-gray-50{background-color:var(--color-gray-50)}
.bg-gray-100{background-color:var(--color-gray-100)}
.bg-gray-900{background-color:var(--color-gray-900)}

/* Bordas */
.rounded-sm{border-radius:var(--radius-sm)}
.rounded-md{border-radius:var(--radius-md)}
.rounded-lg{border-radius:var(--radius-lg)}
.rounded-xl{border-radius:var(--radius-xl)}
.rounded-2xl{border-radius:var(--radius-2xl)}
.rounded-full{border-radius:var(--radius-full)}

/* Sombras */
.shadow-sm{box-shadow:var(--shadow-sm)}
.shadow-md{box-shadow:var(--shadow-md)}
.shadow-lg{box-shadow:var(--shadow-lg)}
.shadow-xl{box-shadow:var(--shadow-xl)}

/* Display */
.block{display:block}
.inline-block{display:inline-block}
.inline{display:inline}
.hidden{display:none}

/* Largura/Altura */
.w-full{width:100%}
.h-full{height:100%}
.hero{min-height:calc(100vh - 80px)}

/* Titulos - fonte display em toda a hierarquia de headings */
h1,h2,h3,.hero-title,.section-title,.page-header-title,.cta-title,.about-content h2,.stat-number,.hero-stat-number{
  font-family:var(--font-display);
  font-weight:700;
  letter-spacing:-0.01em;
}

/* Rotulo tecnico - usado como "eyebrow" acima de titulos */
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:var(--space-2);
  font-family:var(--font-mono);
  font-size:var(--font-size-xs);
  font-weight:600;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--color-accent);
}
.eyebrow::before{content:'';width:20px;height:2px;background:var(--color-accent);display:inline-block}
.eyebrow.on-light{color:var(--color-primary-dark)}
.eyebrow.on-light::before{background:var(--color-accent)}

/* ============================================
   COMPONENTES
   ============================================ */

/* Botoes - a marca amarela sinaliza acao (ecoa as faixas de seguranca reais das obras) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-3) var(--space-6);font-size:var(--font-size-base);font-weight:650;border-radius:var(--radius-md);transition:all var(--transition-base);cursor:pointer;border:none;font-family:var(--font-body);letter-spacing:-0.005em}
.btn:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}
.btn-primary{background-color:var(--color-primary);color:var(--color-white)}
.btn-primary:hover{background-color:var(--color-accent-dark);box-shadow:var(--shadow-md)}
.btn-secondary{background-color:var(--color-secondary);color:var(--color-white)}
.btn-secondary:hover{background-color:var(--color-primary-dark)}
.btn-outline{border:1.5px solid rgba(255,255,255,0.4);color:var(--color-primary);background:transparent;border-color:var(--color-primary)}
.btn-outline:hover{background-color:var(--color-primary);color:var(--color-white)}
.btn-outline-light{border-color:rgba(255,255,255,.7);color:var(--color-white)}
.btn-outline-light:hover{background:var(--color-white);border-color:var(--color-white);color:var(--color-secondary)}
.btn-white{background-color:var(--color-white);color:var(--color-secondary)}
.btn-white:hover{background-color:var(--color-accent-dark)}
.btn-lg{padding:var(--space-4) var(--space-8);font-size:var(--font-size-lg)}
.btn-sm{padding:var(--space-2) var(--space-4);font-size:var(--font-size-sm)}

/* Cards */
.card{background:var(--color-white);border-radius:var(--radius-xl);overflow:hidden;transition:all var(--transition-base);border:1px solid var(--color-gray-200)}
.card:hover{border-color:var(--color-accent);box-shadow:var(--shadow-lg)}
.card-image{aspect-ratio:16/9;overflow:hidden}
.card-image img{width:100%;height:100%;object-fit:cover;transition:transform var(--transition-slow)}
.card:hover .card-image img{transform:scale(1.04)}
.card-content{padding:var(--space-6)}

/* Secoes */
.section{padding:var(--space-20) 0}
.section-sm{padding:var(--space-12) 0}
.section-lg{padding:var(--space-24) 0}

.section-header{text-align:center;max-width:768px;margin:0 auto var(--space-12)}
.section-title{font-size:var(--font-size-4xl);font-weight:700;color:var(--color-gray-900);margin-bottom:var(--space-4);line-height:1.05}
.section-subtitle{font-size:var(--font-size-lg);color:var(--color-gray-600);font-family:var(--font-body)}

/* Divisor "camada" - motivo assinatura: tira estratificada
   representando a secao transversal real de um sistema epoxi */
.layer-strip{display:flex;width:100%;height:6px}
.layer-strip span{flex:1}
.layer-strip .l1{background:var(--color-concrete)}
.layer-strip .l2{background:var(--color-primary-dark)}
.layer-strip .l3{background:var(--color-primary)}
.layer-strip .l4{background:var(--color-accent)}

/* ============================================
   LOGO (SVG - marca em camadas)
   ============================================ */
.logo{display:flex;align-items:center;gap:var(--space-3)}
.logo-mark{width:44px;height:44px;flex-shrink:0;filter:drop-shadow(0 5px 10px rgba(16,45,58,.12))}
.logo-mark rect:nth-of-type(1){fill:var(--color-secondary)}
.logo-mark rect:nth-of-type(2){fill:#f7faf9}
.logo-mark rect:nth-of-type(3){fill:var(--color-primary-dark)}
.logo-mark rect:nth-of-type(4){fill:var(--color-primary)}
.logo-mark rect:nth-of-type(5){fill:var(--color-primary-light)}
.logo-text{display:flex;flex-direction:column;line-height:1}
.logo-text strong{font-family:var(--font-display);font-size:1.25rem;font-weight:800;color:var(--color-gray-900);letter-spacing:-0.035em;line-height:1}
.logo-text strong span{color:var(--color-primary)}
.logo-text small{font-family:var(--font-mono);font-size:0.56rem;font-weight:600;color:var(--color-gray-500);text-transform:uppercase;letter-spacing:0.13em;margin-top:5px}
.footer .logo-text strong{color:var(--color-white)}
.footer .logo-text small{color:var(--color-gray-400)}

/* ============================================
   HEADER E NAVEGACAO
   ============================================ */
.header{position:fixed;top:0;left:0;right:0;z-index:var(--z-fixed);background:rgba(255,255,255,0.98);backdrop-filter:blur(10px);border-bottom:1px solid var(--color-gray-200);transition:all var(--transition-base)}
.header-scrolled{box-shadow:var(--shadow-md)}

.header-inner{display:flex;align-items:center;justify-content:space-between;height:80px}

.nav-desktop{display:none}
.nav-list{display:flex;align-items:center;gap:var(--space-6)}
.nav-link{font-size:var(--font-size-sm);font-weight:500;color:var(--color-gray-700);transition:color var(--transition-fast);position:relative;padding:0.5rem 0}
.nav-link:hover{color:var(--color-primary)}
.nav-link::after{content:'';position:absolute;bottom:0;left:0;width:0;height:2px;background:var(--color-accent);transition:width var(--transition-base)}
.nav-link:hover::after{width:100%}

.nav-cta{display:flex;align-items:center;gap:var(--space-4)}

/* Menu Mobile */
.menu-toggle{display:flex;flex-direction:column;gap:5px;padding:var(--space-2);cursor:pointer;background:none;border:none}
.menu-toggle span{display:block;width:25px;height:3px;background:var(--color-gray-800);transition:all var(--transition-base);border-radius:1px}
.menu-toggle.active span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.menu-toggle.active span:nth-child(2){opacity:0}
.menu-toggle.active span:nth-child(3){transform:rotate(-45deg) translate(7px,-6px)}

.nav-mobile{position:fixed;top:80px;left:0;width:100%;height:calc(100vh - 80px);background:#ffffff;padding:30px;transform:translateX(100%);transition:transform 0.3s ease;z-index:1000;overflow-y:auto}
.nav-mobile.active{transform:translateX(0)}
.nav-mobile .nav-list{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.nav-mobile .nav-link{font-family:var(--font-display);font-size:22px;color:#1a1a1a;font-weight:700;display:block;padding:8px 0}

/* ============================================
   HERO SECTION
   ============================================ */
.hero{
position:relative;
min-height:calc(100vh - 80px);
display:flex;
align-items:center;
background:
  repeating-linear-gradient(0deg, rgba(109,169,221,0.06) 0px, rgba(109,169,221,0.06) 1px, transparent 1px, transparent 40px),
  repeating-linear-gradient(90deg, rgba(109,169,221,0.06) 0px, rgba(109,169,221,0.06) 1px, transparent 1px, transparent 40px),
  linear-gradient(155deg,var(--color-secondary) 0%,#0d2d47 55%,var(--color-secondary) 100%);
overflow:hidden;
}
.hero>.container{width:100%;position:relative;z-index:2}
.hero>.layer-strip{position:absolute;left:0;right:0;bottom:0;z-index:3}

.hero::before{
content:'';
position:absolute;
inset:0;
background:url('../assets/images/piso-epoxi-industria-farmaceutica-06.jpg') center/cover no-repeat;
opacity:0.28;
mix-blend-mode:luminosity;
z-index:0;
}

.hero::after{
content:'';
position:absolute;
inset:0;
background:linear-gradient(
to right,
rgba(16,45,58,0.96),
rgba(16,45,58,0.84),
rgba(16,45,58,0.6)
);
z-index:0;
}

.hero-content{
position:relative;
z-index:2;
padding:140px 0 70px;
}

.hero-badge{display:none}

.hero-title{font-family:var(--font-display);font-size:var(--font-size-4xl);font-weight:750;color:var(--color-white);line-height:1.02;margin:var(--space-4) 0 var(--space-6);max-width:820px;letter-spacing:-0.045em}
.hero-title span{color:var(--color-accent)}
.hero-description{font-size:var(--font-size-lg);color:var(--color-gray-300);max-width:600px;margin-bottom:var(--space-8);line-height:1.7;font-family:var(--font-body)}

.hero-stats{display:flex;gap:0;margin-top:var(--space-12);flex-wrap:wrap;border-top:1px solid rgba(255,255,255,0.15)}
.hero-stat{text-align:left;padding:var(--space-5) var(--space-6) 0 0;border-right:1px solid rgba(255,255,255,0.15);flex:1;min-width:140px}
.hero-stat:last-child{border-right:none}
.hero-stat-number{font-family:var(--font-display);font-size:var(--font-size-3xl);font-weight:700;color:var(--color-accent);line-height:1}
.hero-stat-label{font-family:var(--font-mono);font-size:0.7rem;color:var(--color-gray-400);text-transform:uppercase;letter-spacing:0.06em;margin-top:var(--space-1)}

.hero-cta{display:flex;gap:var(--space-4);flex-wrap:wrap}
.hero-cta-center{justify-content:center}

@media(max-width:768px){
.hero{min-height:auto}
.hero-content{padding:120px 0 60px}
}

/* ============================================
   SERVICOS SECTION - "spec cards"
   ============================================ */
.services-grid{display:grid;grid-template-columns:repeat(1,1fr);gap:var(--space-6)}

.service-card{background:var(--color-white);border-radius:var(--radius-lg);padding:var(--space-8);border:1px solid var(--color-gray-200);transition:all var(--transition-base);position:relative;overflow:hidden}
.service-card::before{content:'';position:absolute;top:0;left:0;width:100%;height:3px;background:var(--color-accent);transform:scaleX(0);transform-origin:left;transition:transform var(--transition-base)}
.service-card:hover{border-color:var(--color-gray-300);box-shadow:var(--shadow-lg)}
.service-card:hover::before{transform:scaleX(1)}

.service-icon{width:56px;height:56px;display:flex;align-items:center;justify-content:center;background:var(--color-gray-100);border-radius:var(--radius-md);margin-bottom:var(--space-6);transition:all var(--transition-base);color:var(--color-primary)}
.service-card:hover .service-icon{background:var(--color-secondary);color:var(--color-accent)}

.service-title{font-family:var(--font-display);font-size:var(--font-size-xl);font-weight:700;color:var(--color-gray-900);margin-bottom:var(--space-3);letter-spacing:-0.005em}
.service-description{color:var(--color-gray-600);margin-bottom:var(--space-4);line-height:1.6;font-family:var(--font-body)}
.service-link{display:inline-flex;align-items:center;gap:var(--space-2);color:var(--color-primary-dark);font-weight:700;font-size:var(--font-size-sm);transition:gap var(--transition-fast);font-family:var(--font-mono);text-transform:uppercase;letter-spacing:0.04em;font-size:0.75rem}
.service-link:hover{gap:var(--space-3);color:var(--color-accent-dark)}

/* Galeria editorial de obras reais */
.work-showcase{background:var(--color-white)}
.showcase-heading{display:grid;gap:var(--space-5);align-items:end;margin-bottom:var(--space-10)}
.showcase-heading .section-title{margin:var(--space-3) 0 0;max-width:700px}
.showcase-heading>p{color:var(--color-gray-600);line-height:1.7;max-width:520px}
.work-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:180px;gap:var(--space-3)}
.work-photo{position:relative;overflow:hidden;border-radius:var(--radius-lg);background:var(--color-gray-100);margin:0}
.work-photo-featured{grid-column:span 2}
.work-photo-wide{grid-column:1/-1}
.work-photo-featured{grid-row:span 2}
.work-photo img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.work-photo::after{content:'';position:absolute;inset:35% 0 0;background:linear-gradient(to bottom,transparent,rgba(16,45,58,.86));pointer-events:none}
.work-photo figcaption{position:absolute;left:var(--space-4);right:var(--space-4);bottom:var(--space-4);z-index:1;color:var(--color-white);font-weight:650;font-size:.84rem;letter-spacing:.01em}
.work-photo:hover img{transform:scale(1.035)}
.showcase-action{display:flex;justify-content:flex-end;margin-top:var(--space-6)}

/* ============================================
   SOBRE SECTION
   ============================================ */
.about-grid{display:grid;grid-template-columns:1fr;gap:var(--space-12);align-items:center}

.about-image{position:relative}
.about-image-main{border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-2xl)}
.about-image-badge{position:absolute;bottom:-20px;right:-10px;background:var(--color-secondary);color:var(--color-white);padding:var(--space-6);border-radius:var(--radius-lg);text-align:center;box-shadow:var(--shadow-xl);border-bottom:4px solid var(--color-accent)}
.about-image-badge-number{font-family:var(--font-display);font-size:var(--font-size-4xl);font-weight:700;line-height:1;color:var(--color-accent)}
.about-image-badge-text{font-family:var(--font-mono);font-size:0.65rem;text-transform:uppercase;letter-spacing:0.06em;opacity:0.9;margin-top:var(--space-1)}

.about-content h2{font-size:var(--font-size-3xl);font-weight:700;color:var(--color-gray-900);margin-bottom:var(--space-6);line-height:1.05}
.about-content>p{color:var(--color-gray-600);margin-bottom:var(--space-4);line-height:1.8;font-family:var(--font-body)}
.about-content-centered{max-width:800px;margin:0 auto;text-align:center}

.about-features{display:grid;gap:var(--space-4);margin-top:var(--space-8)}
.about-feature{display:flex;align-items:flex-start;gap:var(--space-4)}
.about-feature-icon{width:44px;height:44px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--color-secondary);color:var(--color-accent);border-radius:var(--radius-md)}
.about-feature-content h4{font-family:var(--font-display);font-size:var(--font-size-lg);font-weight:700;color:var(--color-gray-900);margin-bottom:var(--space-1)}
.about-feature-content p{font-size:var(--font-size-sm);color:var(--color-gray-600);font-family:var(--font-body)}

/* ============================================
   PROJETOS / CLIENTES SECTION
   ============================================ */
.projects-grid{display:grid;grid-template-columns:repeat(1,1fr);gap:var(--space-6)}

.project-card{position:relative;border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:4/3}
.project-card img{width:100%;height:100%;object-fit:cover;transition:transform var(--transition-slow)}
.project-card:hover img{transform:scale(1.08)}

.project-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(16,45,58,0.94) 0%,rgba(16,45,58,.08) 68%);display:flex;flex-direction:column;justify-content:flex-end;padding:var(--space-6);opacity:1;transition:background var(--transition-base)}
.project-card:hover .project-overlay{background:linear-gradient(to top,rgba(16,45,58,.98) 0%,rgba(16,45,58,.16) 72%)}

.project-category{font-family:var(--font-mono);font-size:var(--font-size-xs);font-weight:600;color:var(--color-accent);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:var(--space-2)}
.project-title{font-family:var(--font-display);font-size:var(--font-size-xl);font-weight:700;color:var(--color-white);margin-bottom:var(--space-2)}
.project-location{font-size:var(--font-size-sm);color:var(--color-gray-300);display:flex;align-items:center;gap:var(--space-2);font-family:var(--font-body)}

.portfolio-archive{margin-top:var(--space-20);padding-top:var(--space-16);border-top:1px solid var(--color-gray-200)}
.portfolio-archive-header{max-width:720px;margin-bottom:var(--space-12)}
.portfolio-archive-header h2{font-size:var(--font-size-3xl);line-height:1.1;margin:var(--space-3) 0 var(--space-4);color:var(--color-gray-900)}
.portfolio-archive-header p{color:var(--color-gray-600);font-size:var(--font-size-lg)}
.portfolio-group{margin-top:var(--space-12)}
.portfolio-group h3{font-size:var(--font-size-xl);margin-bottom:var(--space-5);color:var(--color-secondary)}
.portfolio-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3)}
.portfolio-photo{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:var(--radius-md);background:var(--color-gray-100);margin:0}
.portfolio-photo img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
.portfolio-photo::after{content:'';position:absolute;inset:45% 0 0;background:linear-gradient(transparent,rgba(16,45,58,.82));pointer-events:none}
.portfolio-photo figcaption{position:absolute;z-index:1;left:var(--space-3);right:var(--space-3);bottom:var(--space-3);color:#fff;font-size:.75rem;font-weight:650}
.portfolio-photo:hover img{transform:scale(1.04)}

/* Faixa de clientes: marcas reais, discretas e uniformizadas */
.clients-strip{background:var(--color-white);padding:var(--space-12) 0;border-bottom:1px solid var(--color-gray-200);position:relative}
.clients-strip-title{text-align:center;font-family:var(--font-mono);font-size:0.7rem;font-weight:650;color:var(--color-gray-500);text-transform:uppercase;letter-spacing:0.13em;margin-bottom:var(--space-8)}
.clients-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;gap:var(--space-3)}
.client-logo{min-height:84px;display:flex;align-items:center;justify-content:center;padding:var(--space-4);border:1px solid var(--color-gray-200);background:#fff;border-radius:var(--radius-md);transition:border-color var(--transition-base),box-shadow var(--transition-base)}
.client-logo:hover{border-color:var(--color-gray-300);box-shadow:var(--shadow-sm)}
.client-logo img{display:block;width:auto;height:auto;max-width:138px;max-height:46px;object-fit:contain;filter:grayscale(1);opacity:.66;transition:filter var(--transition-base),opacity var(--transition-base)}
.client-logo img[alt="Hypofarma"]{transform:scale(1.65)}
.client-logo img[alt="Myralis"]{transform:scale(1.35)}
.client-logo:hover img{filter:grayscale(0);opacity:1}

/* ============================================
   DEPOIMENTOS / CLIENTES (pagina)
   ============================================ */
.testimonials{background:var(--color-gray-50)}

.testimonials-grid{display:grid;grid-template-columns:repeat(1,1fr);gap:var(--space-6)}

.testimonial-card{background:var(--color-white);padding:var(--space-8);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);border:1px solid var(--color-gray-200)}
.testimonial-rating{display:flex;gap:var(--space-1);margin-bottom:var(--space-4);color:var(--color-accent)}
.testimonial-text{font-size:var(--font-size-lg);color:var(--color-gray-700);line-height:1.7;margin-bottom:var(--space-6)}
.testimonial-author{display:flex;align-items:center;gap:var(--space-4)}
.testimonial-author-avatar{width:52px;height:52px;border-radius:var(--radius-md);object-fit:cover;background:var(--color-secondary);color:var(--color-accent);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:var(--font-size-lg);font-family:var(--font-display)}
.testimonial-author-info h4{font-family:var(--font-display);font-size:var(--font-size-base);font-weight:700;color:var(--color-gray-900)}
.testimonial-author-info p{font-size:var(--font-size-sm);color:var(--color-gray-500);font-family:var(--font-mono)}

/* ============================================
   ESTATISTICAS SECTION - "datasheet"
   ============================================ */
.stats{background:var(--color-secondary);color:var(--color-white);padding:var(--space-16) 0;position:relative}
.stats::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(to right, transparent, rgba(105,184,173,0.55), transparent)}

.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-8);text-align:left}
.stat{border-left:2px solid var(--color-accent);padding-left:var(--space-4)}

.stat-number{font-family:var(--font-display);font-size:var(--font-size-4xl);font-weight:700;line-height:1;margin-bottom:var(--space-2);color:var(--color-accent)}
.stat-label{font-family:var(--font-mono);font-size:0.7rem;text-transform:uppercase;letter-spacing:0.06em;opacity:0.85}

/* ============================================
   CTA SECTION
   ============================================ */
.cta-section{background:linear-gradient(135deg,var(--color-secondary) 0%,#0d2d47 100%);padding:var(--space-20) 0;text-align:center;color:var(--color-white);position:relative;overflow:hidden}
.cta-section::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(45deg, rgba(255,255,255,0.02) 0px, rgba(255,255,255,0.02) 1px, transparent 1px, transparent 26px)}

.cta-title{font-family:var(--font-display);font-size:var(--font-size-4xl);font-weight:700;margin-bottom:var(--space-4);position:relative}
.cta-description{font-size:var(--font-size-xl);opacity:0.9;max-width:600px;margin:0 auto var(--space-8);position:relative;font-family:var(--font-body)}
.cta-section .hero-cta{position:relative}

/* ============================================
   FAQ SECTION
   ============================================ */
.faq-container{max-width:800px;margin:0 auto}
.faq-item{border:1px solid var(--color-gray-200);border-radius:var(--radius-md);margin-bottom:var(--space-4);overflow:hidden}
.faq-question{width:100%;display:flex;align-items:center;justify-content:space-between;padding:var(--space-5) var(--space-6);background:var(--color-white);text-align:left;font-size:var(--font-size-base);font-weight:600;color:var(--color-gray-900);cursor:pointer;transition:background var(--transition-fast);border:none}
.faq-question:hover{background:var(--color-gray-50)}
.faq-question-icon{width:24px;height:24px;transition:transform var(--transition-base);flex-shrink:0;color:var(--color-accent)}
.faq-item.active .faq-question-icon{transform:rotate(180deg)}

.faq-answer{max-height:0;overflow:hidden;transition:max-height var(--transition-base)}
.faq-item.active .faq-answer{max-height:500px}
.faq-answer-content{padding:0 var(--space-6) var(--space-6);color:var(--color-gray-600);line-height:1.7}

/* ============================================
   SEGMENTOS ATENDIDOS (grid de industrias)
   ============================================ */
.segments-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-4)}
.segment-card{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-5);background:var(--color-white);border:1px solid var(--color-gray-200);border-radius:var(--radius-md);transition:all var(--transition-base)}
.segment-card:hover{border-color:var(--color-accent);box-shadow:var(--shadow-md)}
.segment-icon{width:38px;height:38px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--color-gray-100);border-radius:var(--radius-sm);color:var(--color-primary)}
.segment-card span{font-weight:600;color:var(--color-gray-800);font-size:var(--font-size-sm);font-family:var(--font-body)}

/* ============================================
   BLOG SECTION
   ============================================ */
.blog-grid{display:grid;grid-template-columns:repeat(1,1fr);gap:var(--space-8)}

.blog-card{background:var(--color-white);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);transition:all var(--transition-base);border:1px solid var(--color-gray-200)}
.blog-card:hover{box-shadow:var(--shadow-lg);border-color:var(--color-accent)}

.blog-image{aspect-ratio:16/9;overflow:hidden}
.blog-image img{width:100%;height:100%;object-fit:cover;transition:transform var(--transition-slow)}
.blog-card:hover .blog-image img{transform:scale(1.04)}

.blog-content{padding:var(--space-6)}
.blog-meta{display:flex;align-items:center;gap:var(--space-4);margin-bottom:var(--space-3);font-size:0.7rem;color:var(--color-gray-500);font-family:var(--font-mono);text-transform:uppercase;letter-spacing:0.04em}
.blog-category{color:var(--color-accent-dark);font-weight:600}
.blog-title{font-family:var(--font-display);font-size:var(--font-size-xl);font-weight:700;color:var(--color-gray-900);margin-bottom:var(--space-3);line-height:1.15}
.blog-title a:hover{color:var(--color-primary)}
.blog-excerpt{color:var(--color-gray-600);line-height:1.6;margin-bottom:var(--space-4);font-family:var(--font-body)}

/* ============================================
   FOOTER
   ============================================ */
.footer{background:var(--color-secondary);color:var(--color-white);padding:var(--space-16) 0 0}

.footer-grid{display:grid;grid-template-columns:repeat(1,1fr);gap:var(--space-12)}

.footer-brand .logo{margin-bottom:var(--space-4)}
.footer-brand p{color:var(--color-gray-400);line-height:1.7;margin-bottom:var(--space-6);font-family:var(--font-body)}

.footer-social{display:flex;gap:var(--space-4)}
.footer-social a{width:42px;height:42px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.08);border-radius:var(--radius-md);transition:all var(--transition-fast)}
.footer-social a:hover{background:var(--color-accent);color:var(--color-secondary)}

.footer-title{font-family:var(--font-mono);font-size:0.72rem;font-weight:600;margin-bottom:var(--space-6);color:var(--color-white);text-transform:uppercase;letter-spacing:0.1em}

.footer-links li{margin-bottom:var(--space-3)}
.footer-links a{color:var(--color-gray-400);transition:color var(--transition-fast);display:flex;align-items:center;gap:var(--space-2);font-family:var(--font-body);font-size:0.925rem}
.footer-links a:hover{color:var(--color-accent)}
.footer-links a::before{content:'';width:10px;height:1px;background:var(--color-accent);display:inline-block;flex-shrink:0}

.footer-contact li{display:flex;align-items:flex-start;gap:var(--space-3);margin-bottom:var(--space-4);color:var(--color-gray-400);font-family:var(--font-body);font-size:0.925rem}
.footer-contact svg{width:18px;height:18px;flex-shrink:0;color:var(--color-accent);margin-top:2px}

.footer-bottom{border-top:1px solid rgba(255,255,255,0.1);margin-top:var(--space-12);padding:var(--space-6) 0;text-align:center;color:var(--color-gray-500);font-size:var(--font-size-sm);font-family:var(--font-body)}.footer-legal{display:flex;justify-content:center;gap:1.5rem;list-style:none;margin:var(--space-3) 0 0;padding:0}.footer-legal a{color:var(--color-gray-500);text-decoration:none;font-size:var(--font-size-sm);transition:color 0.2s}.footer-legal a:hover{color:#fff}

/* ============================================
   WHATSAPP FLOAT
   ============================================ */
.whatsapp-float{position:fixed;bottom:24px;right:24px;z-index:var(--z-fixed)}
.whatsapp-float a{display:flex;align-items:center;gap:var(--space-3);background:#25d366;color:var(--color-white);padding:var(--space-3) var(--space-5);border-radius:var(--radius-full);font-weight:700;box-shadow:var(--shadow-lg);transition:all var(--transition-base)}
.whatsapp-float a:hover{transform:scale(1.05);box-shadow:var(--shadow-xl)}

/* ============================================
   FORMULARIOS
   ============================================ */
.form-group{margin-bottom:var(--space-5)}
.form-label{display:block;font-family:var(--font-mono);font-size:0.7rem;text-transform:uppercase;letter-spacing:0.05em;font-weight:600;color:var(--color-gray-600);margin-bottom:var(--space-2)}
.form-input,.form-textarea,.form-select{width:100%;padding:var(--space-3) var(--space-4);border:1px solid var(--color-gray-300);border-radius:var(--radius-md);font-size:var(--font-size-base);transition:all var(--transition-fast);background:var(--color-white);font-family:var(--font-body)}
.form-input:focus,.form-textarea:focus,.form-select:focus{outline:none;border-color:var(--color-accent);box-shadow:0 0 0 3px rgba(105,184,173,0.16)}
.form-textarea{min-height:120px;resize:vertical}
.form-select{cursor:pointer}

.form-row{display:grid;grid-template-columns:1fr;gap:var(--space-4)}

/* ============================================
   BREADCRUMB
   ============================================ */
.breadcrumb{background:var(--color-gray-100);padding:var(--space-4) 0}
.breadcrumb-list{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;font-size:var(--font-size-sm);font-family:var(--font-mono)}
.breadcrumb-list a{color:var(--color-gray-600);transition:color var(--transition-fast)}
.breadcrumb-list a:hover{color:var(--color-primary)}
.breadcrumb-list span{color:var(--color-gray-400)}
.breadcrumb-current{color:var(--color-gray-900);font-weight:500}

/* ============================================
   PAGINA DE SERVICO / ESTADO
   ============================================ */
.page-header{
  background:
    repeating-linear-gradient(0deg, rgba(109,169,221,0.07) 0px, rgba(109,169,221,0.07) 1px, transparent 1px, transparent 34px),
    repeating-linear-gradient(90deg, rgba(109,169,221,0.07) 0px, rgba(109,169,221,0.07) 1px, transparent 1px, transparent 34px),
    linear-gradient(135deg,var(--color-secondary) 0%,#0d2d47 100%);
  padding:var(--space-24) 0 var(--space-12);
  color:var(--color-white);
  position:relative;
}
.page-header-title{font-family:var(--font-display);font-size:var(--font-size-4xl);font-weight:700;margin-bottom:var(--space-4);line-height:1.02}
.page-header-description{font-size:var(--font-size-lg);color:var(--color-gray-300);max-width:700px;line-height:1.7;font-family:var(--font-body)}

.service-content{padding:var(--space-16) 0}
.service-content-grid{display:grid;grid-template-columns:1fr;gap:var(--space-12)}

.service-main h2{font-family:var(--font-display);font-size:var(--font-size-3xl);font-weight:700;color:var(--color-gray-900);margin:var(--space-8) 0 var(--space-4);line-height:1.1}
.service-main h3{font-family:var(--font-display);font-size:var(--font-size-xl);font-weight:700;color:var(--color-gray-800);margin:var(--space-6) 0 var(--space-3)}
.service-main p{color:var(--color-gray-600);line-height:1.8;margin-bottom:var(--space-4);font-family:var(--font-body)}
.service-main ul{margin:var(--space-4) 0 var(--space-4) var(--space-6);list-style:disc}
.service-main li{color:var(--color-gray-600);margin-bottom:var(--space-2);line-height:1.7;font-family:var(--font-body)}
.service-main img{border-radius:var(--radius-lg);margin:var(--space-6) 0;box-shadow:var(--shadow-md)}

.service-sidebar{position:static;height:auto}
.sidebar-card{background:var(--color-white);border-radius:var(--radius-lg);padding:var(--space-6);box-shadow:var(--shadow-md);border:1px solid var(--color-gray-200);margin-bottom:var(--space-6)}
.sidebar-title{font-family:var(--font-display);font-size:var(--font-size-lg);font-weight:700;color:var(--color-gray-900);margin-bottom:var(--space-4);padding-bottom:var(--space-3);border-bottom:2px solid var(--color-accent)}


/* ============================================
   RESPONSIVIDADE
   ============================================ */
@media(min-width:640px){
  .container{padding:0 var(--space-6)}
  .grid-cols-2-sm{grid-template-columns:repeat(2,1fr)}
  .stats-grid{grid-template-columns:repeat(4,1fr)}
}

@media(min-width:768px){
  .section-title{font-size:var(--font-size-5xl)}
  .hero-title{font-size:var(--font-size-5xl)}
  .services-grid{grid-template-columns:repeat(2,1fr)}
  .projects-grid{grid-template-columns:repeat(2,1fr)}
  .testimonials-grid{grid-template-columns:repeat(2,1fr)}
  .blog-grid{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:repeat(2,1fr)}
  .form-row{grid-template-columns:repeat(2,1fr)}
  .service-content-grid{grid-template-columns:2fr 1fr}
  .about-grid{grid-template-columns:1fr 1fr}
  .page-header-title{font-size:var(--font-size-5xl)}
  .showcase-heading{grid-template-columns:1.25fr .75fr}
  .work-gallery{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:220px;gap:var(--space-4)}
  .work-photo-wide{grid-column:1/-1}
  .portfolio-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4)}
}

@media(min-width:1024px){
  .nav-desktop{display:block}
  .menu-toggle{display:none}
  .services-grid{grid-template-columns:repeat(3,1fr)}
  .projects-grid{grid-template-columns:repeat(3,1fr)}
  .testimonials-grid{grid-template-columns:repeat(3,1fr)}
  .blog-grid{grid-template-columns:repeat(3,1fr)}
  .footer-grid{grid-template-columns:2fr 1fr 1fr 1.5fr}
  .grid-cols-4-lg{grid-template-columns:repeat(4,1fr)}
  .service-sidebar{position:sticky;top:100px;height:fit-content}
  .segments-grid{grid-template-columns:repeat(3,1fr)}
  .hero-title{font-size:var(--font-size-6xl)}
  .portfolio-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* ============================================
   ANIMACOES
   ============================================ */
@keyframes fadeIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideInLeft{from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:translateX(0)}}
@keyframes slideInRight{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:translateX(0)}}

.animate-fade-in{animation:fadeIn 0.6s ease forwards}
.animate-slide-left{animation:slideInLeft 0.6s ease forwards}
.animate-slide-right{animation:slideInRight 0.6s ease forwards}

.delay-100{animation-delay:0.1s}
.delay-200{animation-delay:0.2s}
.delay-300{animation-delay:0.3s}

/* ============================================
   ACESSIBILIDADE
   ============================================ */
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important;scroll-behavior:auto!important}}
:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print{.header,.whatsapp-float,.nav-mobile{display:none!important}body{font-size:12pt;line-height:1.5;color:#000}.section{padding:20pt 0}.hero{min-height:auto;padding:40pt 0;background:none!important;color:#000}.hero-title{color:#000;font-size:24pt}.hero-description{color:#333}a[href]::after{content:" (" attr(href) ")";font-size:10pt;color:#666}}

/* ============================================
   MELHORIAS DE RESPONSIVIDADE
   ============================================ */
@media(max-width:480px){
  .hero-title{font-size:var(--font-size-3xl)}
  .hero-stats{gap:0}
  .hero-stat{min-width:100px;padding-right:var(--space-3)}
  .hero-stat-number{font-size:var(--font-size-2xl)}
  .section-title{font-size:var(--font-size-3xl)}
  .page-header-title{font-size:var(--font-size-3xl)}
  .cta-title{font-size:var(--font-size-3xl)}
  .stats-grid{grid-template-columns:1fr;gap:var(--space-6)}
  .stat-number{font-size:var(--font-size-3xl)}
  .about-image-badge{right:0;bottom:-10px;padding:var(--space-4)}
  .about-image-badge-number{font-size:var(--font-size-3xl)}
  .whatsapp-float{bottom:16px;right:16px}
  .whatsapp-float a{padding:var(--space-2) var(--space-3);font-size:var(--font-size-sm)}
  .segments-grid{grid-template-columns:1fr}
  .gallery-grid{grid-template-columns:1fr}
  .client-name{font-size:1.05rem;padding:var(--space-2) var(--space-4)}
}

@media(min-width:481px) and (max-width:639px){
  .hero-title{font-size:var(--font-size-4xl)}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
}

@media(hover:none) and (pointer:coarse){
  .btn:hover{transform:none}
  .service-card:hover{transform:none}
  .project-card:hover img{transform:none}
  .nav-link:hover::after{width:0}
}

::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:var(--color-gray-100)}
::-webkit-scrollbar-thumb{background:var(--color-gray-400);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:var(--color-gray-500)}

::selection{background:var(--color-primary-light);color:var(--color-secondary)}

.skip-link{position:absolute;top:-40px;left:0;background:var(--color-accent);color:var(--color-secondary);padding:8px 16px;z-index:1000;transition:top 0.3s;font-weight:700}
.skip-link:focus{top:0}

.table-responsive{overflow-x:auto;-webkit-overflow-scrolling:touch}
.table-responsive table{min-width:600px}

.video-responsive{position:relative;padding-bottom:56.25%;height:0;overflow:hidden}
.video-responsive iframe,.video-responsive video{position:absolute;top:0;left:0;width:100%;height:100%}

img[loading="lazy"]{opacity:1;transition:opacity 0.3s}
img[loading="lazy"].loaded{opacity:1}

.content-container{max-width:75ch;margin:0 auto}
.content-container p{margin-bottom:1.5rem;line-height:1.8;font-family:var(--font-body)}
.content-container h2{margin-top:3rem;margin-bottom:1rem;font-family:var(--font-display)}
.content-container h3{margin-top:2rem;margin-bottom:0.75rem;font-family:var(--font-display)}
.content-container ul,.content-container ol{margin-bottom:1.5rem;padding-left:1.5rem}
.content-container li{margin-bottom:0.5rem}
.content-container table{width:100%;margin:2rem 0;border-collapse:collapse}
.content-container th,.content-container td{padding:1rem;border:1px solid var(--color-gray-200)}
.content-container th{background:var(--color-gray-100);font-weight:600;text-align:left}

.breadcrumb-nav{margin-bottom:1.5rem}

/* Grid de fotos (galeria de projetos) */
.gallery-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-4)}
.gallery-grid img{border-radius:var(--radius-md);aspect-ratio:4/3;object-fit:cover;width:100%;height:100%;transition:transform var(--transition-base)}
.gallery-grid a{overflow:hidden;border-radius:var(--radius-md);display:block}
.gallery-grid a:hover img{transform:scale(1.06)}

/* Cards de estado */
.states-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-3)}
.state-card{display:block;padding:var(--space-4);background:var(--color-white);border:1px solid var(--color-gray-200);border-radius:var(--radius-md);text-align:center;font-weight:600;color:var(--color-gray-700);transition:all var(--transition-fast);font-family:var(--font-body)}
.state-card:hover{border-color:var(--color-accent);color:var(--color-primary);box-shadow:var(--shadow-md)}

@media(min-width:640px){
  .clients-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .states-grid{grid-template-columns:repeat(3,1fr)}
}
@media(min-width:768px){
  .states-grid{grid-template-columns:repeat(4,1fr)}
}
@media(min-width:1024px){
  .clients-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
  .states-grid{grid-template-columns:repeat(5,1fr)}
}

@media(max-width:768px){

.header-inner{
height:76px;
}

.logo-mark{
height:36px;
width:36px;
}
.logo-text strong{font-size:1.2rem}

.hero-title{
font-size:2.4rem;
}

.hero-description{
font-size:16px;
}

}

/* ============================================
   LOGO PNG
   ============================================ */
.logo-img{height:48px;width:auto;display:block;object-fit:contain}
.logo-img-footer{height:42px;filter:brightness(0) invert(1)}

/* ============================================
   HERO SERVICE TYPES
   ============================================ */
.hero-service-types{display:flex;flex-wrap:wrap;gap:var(--space-3);margin:var(--space-5) 0 var(--space-6)}
.hero-service-type{display:inline-flex;align-items:center;gap:var(--space-2);background:rgba(105,184,173,0.15);border:1px solid rgba(105,184,173,0.35);border-radius:var(--radius-full);padding:var(--space-2) var(--space-4);color:var(--color-accent);font-size:var(--font-size-sm);font-weight:600;font-family:var(--font-mono);letter-spacing:0.03em;transition:all var(--transition-base)}
.hero-service-type:hover{background:rgba(105,184,173,0.28);border-color:var(--color-accent)}
.hero-service-type svg{flex-shrink:0;opacity:0.85}

/* ============================================
   SERVICE CARD FEATURED + BADGE
   ============================================ */
.service-card-featured{border-color:var(--color-primary);background:linear-gradient(135deg,rgba(23,111,122,0.04) 0%,rgba(255,255,255,1) 60%)}
.service-card-featured::before{background:linear-gradient(90deg,var(--color-primary),var(--color-accent)) !important;transform:scaleX(1) !important}
.service-badge{display:inline-block;background:var(--color-primary);color:var(--color-white);font-family:var(--font-mono);font-size:0.65rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;padding:3px 10px;border-radius:var(--radius-full);margin-bottom:var(--space-3)}

/* ============================================
   DIFERENCIAL SECTION
   ============================================ */
.diferencial-section{background:var(--color-gray-50)}
.diferencial-grid{display:grid;grid-template-columns:repeat(1,1fr);gap:var(--space-5);margin-bottom:var(--space-12)}
.diferencial-card{background:var(--color-white);border-radius:var(--radius-lg);padding:var(--space-8);border:1px solid var(--color-gray-200);transition:all var(--transition-base);position:relative;overflow:hidden}
.diferencial-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--color-accent);transform:scaleX(0);transform-origin:left;transition:transform var(--transition-base)}
.diferencial-card:hover{border-color:var(--color-primary-light);box-shadow:var(--shadow-lg);transform:translateY(-2px)}
.diferencial-card:hover::before{transform:scaleX(1)}
.diferencial-card-highlight{background:var(--color-secondary);border-color:var(--color-secondary)}
.diferencial-card-highlight::before{background:var(--color-accent);transform:scaleX(1) !important}
.diferencial-card-highlight h3{color:var(--color-accent) !important}
.diferencial-card-highlight p{color:rgba(255,255,255,0.82) !important}
.diferencial-card-highlight .diferencial-icon{background:rgba(105,184,173,0.18);color:var(--color-accent)}
.diferencial-card-highlight:hover{box-shadow:var(--shadow-xl)}
.diferencial-icon{width:52px;height:52px;display:flex;align-items:center;justify-content:center;background:var(--color-gray-100);border-radius:var(--radius-md);margin-bottom:var(--space-5);color:var(--color-primary);transition:all var(--transition-base)}
.diferencial-icon svg{width:24px;height:24px}
.diferencial-card:not(.diferencial-card-highlight):hover .diferencial-icon{background:var(--color-secondary);color:var(--color-accent)}
.diferencial-card h3{font-family:var(--font-display);font-size:var(--font-size-lg);font-weight:700;color:var(--color-gray-900);margin-bottom:var(--space-2)}
.diferencial-card p{color:var(--color-gray-600);font-size:var(--font-size-base);line-height:1.65}
.diferencial-cta{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--space-4);background:var(--color-secondary);border-radius:var(--radius-xl);padding:var(--space-8) var(--space-10)}
.diferencial-cta-text{color:var(--color-white);font-size:var(--font-size-lg)}
.diferencial-cta-text strong{color:var(--color-accent)}

@media(min-width:640px){.diferencial-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.diferencial-grid{grid-template-columns:repeat(3,1fr)}.logo-img{height:54px}}
@media(max-width:640px){.diferencial-cta{flex-direction:column;align-items:flex-start;padding:var(--space-6)}.logo-img{height:40px}}