/* TODO: substituir pelas cores/fontes do site oficial (https://alemautocenter.com.br/) */
:root{
  /* Paleta clara inspirada no site oficial (ajustar HEXs finais quando receber a paleta) */
  --brand-primary: #1E2530;    /* Cor base definida (rgb(30,37,48)) */
  --brand-secondary: #F2B705;  /* Acento/destaque */
  --brand-bg: #FFFFFF;         /* Fundo geral claro */
  --brand-surface: #F8FAFC;    /* Superfícies suaves */
  --text: #0F172A;             /* Texto principal escuro */
  --muted: #475569;            /* Texto secundário */
  --border: #E2E8F0;           /* Cor de bordas sutis */
  --success: #16A34A;
  --danger: #DC2626;
  --whatsapp: #25D366;         /* Cor oficial do WhatsApp */

  --radius: 12px;
  --container: 1160px;
  --shadow: 0 10px 30px rgba(2,6,23,.08);
}

:root {
  --font-primary: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; /* TODO: fonte oficial */
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--text); background:var(--brand-bg);
  font-family:var(--font-primary); line-height:1.55;
}
img{max-width:100%; height:auto; display:block}
.container{max-width:var(--container); margin:0 auto; padding:0 20px}
.small{font-size:.95rem; color:var(--muted)}
.link{color:var(--brand-primary); text-decoration:underline dotted rgba(2,6,23,.25)}
.cta-note{font-size:.9rem; color:var(--muted); margin-top:8px}

/* Header */
header{
  position:sticky; top:0; z-index:50; backdrop-filter:saturate(180%) blur(8px);
  background:rgba(255,255,255,.75); border-bottom:1px solid var(--border)
}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:12px 0; gap:12px}
.logo{display:flex; align-items:center; gap:12px; color:var(--text); text-decoration:none}
.logo-text{font-weight:700}
.nav{display:flex; align-items:center; gap:10px}

/* Hero */
.hero{
  padding:56px 0 28px; background:
    radial-gradient(1200px 400px at 70% -10%, rgba(10,74,130,.06), transparent),
    linear-gradient(180deg, rgba(148,163,184,.12), transparent 30%);
}
.hero h1{font-size:clamp(28px, 4vw, 44px); margin:12px 0}
.hero p{font-size:clamp(16px, 2.2vw, 18px); color:var(--muted); max-width:720px}
.hero-ctas{display:flex; gap:12px; flex-wrap:wrap; margin-top:18px}
.hero-trust{display:flex; flex-wrap:wrap; gap:14px; margin:18px 0 0; padding:0; list-style:none; color:#475569}
.list-inline{list-style:none; padding:0; margin:0}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; gap:10px; font-weight:600;
  padding:14px 18px; border-radius:10px; text-decoration:none;
  transition:.2s ease; white-space:nowrap; border:1px solid transparent;
}
.btn-primary{background:var(--brand-primary); color:#fff}
.btn-primary:hover{transform:translateY(-1px); box-shadow:var(--shadow)}
.btn-outline{border-color:var(--border); color:var(--text); background:transparent}
.btn-outline:hover{border-color:#94A3B8}
.badge{display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; background:#EEF2FF; color:var(--brand-primary); font-size:.85rem; border:1px solid var(--border)}

/* Sections */
.section{padding:48px 0}
.section h2{font-size:clamp(22px, 3vw, 32px); margin:0 0 18px}

/* Grid & Cards */
.grid{display:grid; gap:18px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.card{background:var(--brand-surface); border:1px solid var(--border); border-radius:var(--radius); padding:18px}
.card h3{margin:.2rem 0 .3rem}
.card p{color:var(--muted); margin:.2rem 0 8px}

/* List */
.list{display:grid; gap:10px; padding-left:0; list-style:none}
.list li{display:flex; align-items:flex-start; gap:10px}
.icon{width:20px; height:20px; color:var(--brand-secondary); flex:0 0 20px}

/* Address/Map */
.address{color:var(--text)}

/* Footer */
.footer{padding:28px 0; border-top:1px solid var(--border); color:var(--muted); font-size:.95rem}
.footer-inner{display:grid; gap:18px; grid-template-columns:1fr; align-items:center}
.footer-col{display:grid; gap:8px}

/* Responsive */
@media (min-width: 900px){
  .footer-inner{grid-template-columns:1fr 1fr}
}
@media (max-width: 900px){
  .grid-3{grid-template-columns:1fr}
}

/* FAB WhatsApp (prioridade de conversão) */
.fab{
  position:fixed; right:18px; bottom:18px; z-index:60;
  width:60px; height:60px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--whatsapp); color:#fff; text-decoration:none;
  box-shadow:0 10px 24px rgba(37,211,102,.35);
  transition:transform .18s ease, box-shadow .18s ease, opacity .18s ease;
  padding:0; border:none;
}
.fab i{font-size:28px; line-height:1}
.fab:hover{transform:translateY(-2px); box-shadow:0 14px 28px rgba(37,211,102,.45)}
.fab:active{transform:translateY(0)}
.fab:focus{outline:none}
.fab:focus-visible{box-shadow:0 0 0 4px rgba(10,74,130,.25), 0 10px 24px rgba(37,211,102,.35)}

/* Evitar conflito com áreas seguras (iOS notch) */
@supports (bottom: env(safe-area-inset-bottom)){
  .fab{bottom:calc(18px + env(safe-area-inset-bottom))}
}

/* Ajustes responsivos: ocultar FAB em telas muito grandes se preferir somente hero/header */
@media (min-width: 992px){
  .fab{bottom:24px; right:24px}
}

/* Respeitar usuários que preferem menos movimento */
@media (prefers-reduced-motion: reduce){
  .fab{transition:none}
  .fab:hover{transform:none}
}


/* === Ajustes aplicando a cor base #1E2530 (rgb(30,37,48)) === */
/* Overrides mantidos no final para fácil manutenção */
.hero{
  background:
    radial-gradient(1200px 400px at 70% -10%, rgba(30,37,48,.06), transparent),
    linear-gradient(180deg, rgba(30,37,48,.06), transparent 30%);
}
.badge{ background:#EEF2F6; }
.link{ color:var(--brand-primary); text-decoration:underline dotted rgba(30,37,48,.35); }
.btn-outline:hover{ border-color:#94A3B8; color:var(--brand-primary); }
.fab:focus-visible{ box-shadow:0 0 0 4px rgba(30,37,48,.25), 0 10px 24px rgba(37,211,102,.35); }

/* TODO: substituir pelas cores/fontes do site oficial (https://alemautocenter.com.br/) */
:root{
  /* Paleta clara inspirada no site oficial (ajustar HEXs finais quando receber a paleta) */
  --brand-primary: #1E2530;    /* Cor base definida (rgb(30,37,48)) */
  --brand-secondary: #F2B705;  /* Acento/destaque */
  --brand-bg: #FFFFFF;         /* Fundo geral claro */
  --brand-surface: #F8FAFC;    /* Superfícies suaves */
  --text: #0F172A;             /* Texto principal escuro */
  --muted: #475569;            /* Texto secundário */
  --border: #E2E8F0;           /* Cor de bordas sutis */
  --success: #16A34A;
  --danger: #DC2626;
  --whatsapp: #25D366;         /* Cor oficial do WhatsApp */

  --radius: 12px;
  --container: 1160px;
  --shadow: 0 10px 30px rgba(2,6,23,.08);
}

:root {
  --font-primary: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; /* TODO: fonte oficial */
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--text); background:var(--brand-bg);
  font-family:var(--font-primary); line-height:1.55;
}
img{max-width:100%; height:auto; display:block}
.container{max-width:var(--container); margin:0 auto; padding:0 20px}
.small{font-size:.95rem; color:var(--muted)}
.link{color:var(--brand-primary); text-decoration:underline dotted rgba(2,6,23,.25)}
.cta-note{font-size:.9rem; color:var(--muted); margin-top:8px}

/* Header */
header{
  position:sticky; top:0; z-index:50; backdrop-filter:saturate(180%) blur(8px);
  background:rgba(255,255,255,.75); border-bottom:1px solid var(--border)
}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:12px 0; gap:12px}
.logo{display:flex; align-items:center; gap:12px; color:var(--text); text-decoration:none}
.logo-text{font-weight:700}
.nav{display:flex; align-items:center; gap:10px}

/* Hero */
.hero{
  padding:56px 0 28px; background:
    radial-gradient(1200px 400px at 70% -10%, rgba(10,74,130,.06), transparent),
    linear-gradient(180deg, rgba(148,163,184,.12), transparent 30%);
}
.hero h1{font-size:clamp(28px, 4vw, 44px); margin:12px 0}
.hero p{font-size:clamp(16px, 2.2vw, 18px); color:var(--muted); max-width:720px}
.hero-ctas{display:flex; gap:12px; flex-wrap:wrap; margin-top:18px}
.hero-trust{display:flex; flex-wrap:wrap; gap:14px; margin:18px 0 0; padding:0; list-style:none; color:#475569}
.list-inline{list-style:none; padding:0; margin:0}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; gap:10px; font-weight:600;
  padding:14px 18px; border-radius:10px; text-decoration:none;
  transition:.2s ease; white-space:nowrap; border:1px solid transparent;
}
.btn-primary{background:var(--brand-primary); color:#fff}
.btn-primary:hover{transform:translateY(-1px); box-shadow:var(--shadow)}
.btn-outline{border-color:var(--border); color:var(--text); background:transparent}
.btn-outline:hover{border-color:#94A3B8}
.badge{display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; background:#EEF2FF; color:var(--brand-primary); font-size:.85rem; border:1px solid var(--border)}

/* Sections */
.section{padding:48px 0}
.section h2{font-size:clamp(22px, 3vw, 32px); margin:0 0 18px}

/* Grid & Cards */
.grid{display:grid; gap:18px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.card{background:var(--brand-surface); border:1px solid var(--border); border-radius:var(--radius); padding:18px}
.card h3{margin:.2rem 0 .3rem}
.card p{color:var(--muted); margin:.2rem 0 8px}

/* List */
.list{display:grid; gap:10px; padding-left:0; list-style:none}
.list li{display:flex; align-items:flex-start; gap:10px}
.icon{width:20px; height:20px; color:var(--brand-secondary); flex:0 0 20px}

/* Address/Map */
.address{color:var(--text)}

/* Footer */
.footer{padding:28px 0; border-top:1px solid var(--border); color:var(--muted); font-size:.95rem}
.footer-inner{display:grid; gap:18px; grid-template-columns:1fr; align-items:center}
.footer-col{display:grid; gap:8px}

/* Responsive */
@media (min-width: 900px){
  .footer-inner{grid-template-columns:1fr 1fr}
}
@media (max-width: 900px){
  .grid-3{grid-template-columns:1fr}
}

/* FAB WhatsApp (prioridade de conversão) */
.fab{
  position:fixed; right:18px; bottom:18px; z-index:60;
  width:60px; height:60px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--whatsapp); color:#fff; text-decoration:none;
  box-shadow:0 10px 24px rgba(37,211,102,.35);
  transition:transform .18s ease, box-shadow .18s ease, opacity .18s ease;
  padding:0; border:none;
}
.fab i{font-size:28px; line-height:1}
.fab:hover{transform:translateY(-2px); box-shadow:0 14px 28px rgba(37,211,102,.45)}
.fab:active{transform:translateY(0)}
.fab:focus{outline:none}
.fab:focus-visible{box-shadow:0 0 0 4px rgba(10,74,130,.25), 0 10px 24px rgba(37,211,102,.35)}

/* Evitar conflito com áreas seguras (iOS notch) */
@supports (bottom: env(safe-area-inset-bottom)){
  .fab{bottom:calc(18px + env(safe-area-inset-bottom))}
}

/* Ajustes responsivos: ocultar FAB em telas muito grandes se preferir somente hero/header */
@media (min-width: 992px){
  .fab{bottom:24px; right:24px}
}

/* Respeitar usuários que preferem menos movimento */
@media (prefers-reduced-motion: reduce){
  .fab{transition:none}
  .fab:hover{transform:none}
}


/* === Ajustes aplicando a cor base #1E2530 (rgb(30,37,48)) === */
/* Overrides mantidos no final para fácil manutenção */
.hero{
  background:
    radial-gradient(1200px 400px at 70% -10%, rgba(30,37,48,.06), transparent),
    linear-gradient(180deg, rgba(30,37,48,.06), transparent 30%);
}
.badge{ background:#EEF2F6; }
.link{ color:var(--brand-primary); text-decoration:underline dotted rgba(30,37,48,.35); }
.btn-outline:hover{ border-color:#94A3B8; color:var(--brand-primary); }
.fab:focus-visible{ box-shadow:0 0 0 4px rgba(30,37,48,.25), 0 10px 24px rgba(37,211,102,.35); }

/* === Correções mobile-first: header, logo e CTAs quebrando no mobile === */
@media (max-width: 576px){
  /* Header se adapta em 2 linhas e evita overflow */
  .header-inner{flex-wrap:wrap}
  .logo img{max-height:32px; height:auto; width:auto}
  .logo-text{display:none}
  .nav{width:100%; display:grid; grid-template-columns:1fr; gap:8px; margin-top:8px}
  .nav .btn{width:100%; justify-content:center; padding:12px 14px}

  /* CTAs de serviços viram botões grandes e fáceis de tocar */
  .card .cta-card{display:flex; width:100%; justify-content:center; padding:12px; border:1px solid var(--border); border-radius:8px; background:#fff; text-decoration:none; font-weight:600}
  .card p{margin-bottom:12px}
}


/* === Header redesign: centered logo + hide-on-scroll (mobile-first) === */
/* Overrides appended to ensure they take precedence over earlier rules */
header{
  transition: transform .28s ease, background-color .2s ease, box-shadow .2s ease;
  will-change: transform;
}
header.header--hidden{ transform: translateY(-100%); }
header.header--scrolled{ background:rgba(255,255,255,.9); border-bottom-color:transparent; box-shadow:0 8px 20px rgba(2,6,23,.08); }
header:focus-within{ transform:none; }

.header-inner{ display:flex; flex-direction:column; align-items:center; justify-content:center; padding:10px 0; gap:10px }
.logo{ display:inline-flex; align-items:center; gap:12px; color:var(--text); text-decoration:none; margin:0 auto }
.nav{ display:flex; align-items:center; gap:10px; justify-content:center; flex-wrap:wrap }

/* Larger screens keep the centered style while tightening spacing */
@media (min-width: 900px){
  .header-inner{ padding:12px 0; gap:12px }
}

/* Reduced motion: disable the slide animation while keeping state changes */
@media (prefers-reduced-motion: reduce){
  header{ transition: none }
}


/* === Card images (placeholders 16:9 acima do conteúdo) === */
/* Nota: cobrimos também a borda de 1px do card para não sobrar filete à direita (subpixel rounding). */
.card{
  --card-pad: 18px; /* padding interno atual do card */
}
.card .card-img{
  display:block;
  /* Largura cobre o conteúdo + padding (2x) + bordas (2x 1px) */
  width:calc(100% + (2 * var(--card-pad)) + 2px) !important;
  max-width:none;        /* Evita restrições por regras genéricas de img */
  height:auto;
  aspect-ratio:16/9; /* Mantém 16:9 mesmo quando a imagem real tiver outras dimensões */
  object-fit:cover;  /* Cobre a área com corte suave nas bordas */
  object-position:center; /* Centraliza o assunto da foto */
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
  /* Translada horizontalmente para iniciar antes do padding e abaixo da borda */
  margin:calc(var(--card-pad) * -1) calc((var(--card-pad) + 1px) * -1) 12px;
}

@media (max-width: 900px){
  .card .card-img{
    margin:calc(var(--card-pad) * -1) calc((var(--card-pad) + 1px) * -1) 12px;
  }
}

/* === Correções de centralização e largura no mobile (UX) === */
/* Hero: centralizar CTAs e notas em telas pequenas */
@media (max-width: 576px){
  .hero-ctas{ justify-content:center; }
  .hero-ctas .btn{ width:100%; justify-content:center; }
  .hero .cta-note, .hero .small{ text-align:center; }
}

/* Navbar colapsada: itens e CTA 100% de largura e centralizados */
@media (max-width: 991.98px){
  .navbar .navbar-collapse .navbar-nav{ width:100%; align-items:stretch; text-align:center; }
  .navbar .navbar-collapse .nav-item{ width:100%; }
  .navbar .navbar-collapse .nav-link{ padding-left:1rem; padding-right:1rem; }
  .navbar .navbar-collapse .btn{ width:100%; justify-content:center; }
}

/* Cards: garantir que a imagem realmente ocupe toda a largura visível e respeite o raio */
.card{ overflow:hidden; }


/* === Uniformização dos cards e grid responsiva (mobile-first) === */
/* Grid: 1 col (base), 2 cols ≥576px, 3 cols ≥992px */
.grid-3{ grid-template-columns:1fr; }
@media (min-width: 576px){
  .grid-3{ grid-template-columns:repeat(2, 1fr); }
}
@media (min-width: 992px){
  .grid-3{ grid-template-columns:repeat(3, 1fr); }
}

/* Cards com altura uniforme: conteúdo em coluna e CTA preso na base */
.grid .card{ height:100%; display:flex; flex-direction:column; }
.card .cta-card{ margin-top:auto; }


/* === Hero media (imagem de chamada com texto sobreposto) === */
.hero-media{ position:relative; isolation:isolate; }
.hero-media__img{
  display:block; width:100%;
  height:42vh; min-height:280px; max-height:60vh; object-fit:cover;
}
@media (min-width: 576px){
  .hero-media__img{ height:44vh; min-height:320px; }
}
@media (min-width: 992px){
  .hero-media__img{ height:48vh; min-height:360px; }
}
/* Overlay para legibilidade do texto */
.hero-media::after{
  content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.35) 55%, rgba(0,0,0,.50) 100%);
}
.hero-media__content{
  position:absolute; inset:0; z-index:1; display:flex; align-items:flex-end; justify-content:center;
  padding:28px 0; text-align:center; color:#fff;
}
.hero-media .container{ width:100%; }
.hero-media__title{ margin:.4rem 0; font-weight:800; letter-spacing:-.01em; font-size:clamp(24px, 4.4vw, 48px); }
.hero-media__subtitle{ margin:0; font-size:clamp(15px, 2.2vw, 18px); opacity:.95 }
.hero-media .badge{ background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.3); color:#fff }

@media (min-width: 992px){
  .hero-media__content{ justify-content:flex-start; text-align:left; }
  .hero-media .container{ max-width:var(--container); margin:0 auto; padding:0 20px; }
}

@media (prefers-reduced-motion: reduce){
  .hero-media, .hero-media__content{ scroll-behavior:auto; }
}

/* === Fallbacks e correções para o HEADER quando o Bootstrap não carrega === */
/* Utilitários mínimos inspirados no Bootstrap (apenas o que usamos no header) */
.d-none{display:none!important}
.d-block{display:block!important}
.d-flex{display:flex!important}
.w-100{width:100%!important}
.text-center{text-align:center!important}
.mt-2{margin-top:.5rem!important}
.me-3{margin-right:1rem!important}
.ms-auto{margin-left:auto!important}
.gap-2{gap:.5rem!important}
.align-items-center{align-items:center!important}

/* Breakpoint lg (≥992px) */
@media (min-width: 992px){
  .d-lg-none{display:none!important}
  .d-lg-flex{display:flex!important}
  .w-lg-auto{width:auto!important}
  .text-lg-start{text-align:left!important}
  .ms-lg-2{margin-left:.5rem!important}
  .mt-lg-0{margin-top:0!important}
  .gap-lg-2{gap:.5rem!important}
  .align-items-lg-center{align-items:center!important}
}

/* Navbar base (independente do Bootstrap) */
.navbar{background:#fff; border-bottom:1px solid var(--border)}
.navbar .container{display:flex; align-items:center; justify-content:space-between; gap:12px}
.navbar-brand{display:inline-flex; align-items:center; gap:10px; color:inherit; text-decoration:none}

/* Colapso: escondido por padrão no mobile; visível quando .show ou em telas largas */
.navbar-collapse{display:none}
.navbar-collapse.show{display:block}
@media (min-width: 992px){
  .navbar-collapse{display:flex!important; align-items:center; justify-content:flex-end}
}

/* Lista de navegação */
.navbar-nav{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.25rem}
.navbar-nav .nav-item{display:block}
.navbar-nav .nav-link{display:block; padding:.5rem .75rem; color:var(--text); text-decoration:none}
.navbar-nav .nav-link:hover{color:var(--brand-primary); text-decoration:underline}
@media (min-width: 992px){
  .navbar-nav{flex-direction:row; gap:.25rem}
}

/* Botão do sanduíche */
.navbar-toggler{appearance:none; -webkit-appearance:none; border:1px solid var(--border); background:#fff; border-radius:8px; padding:.4rem .6rem; line-height:1; cursor:pointer}
.navbar-toggler:focus{outline:none}
.navbar-toggler:focus-visible{box-shadow:0 0 0 3px rgba(30,37,48,.2)}
.navbar-toggler-icon{display:inline-block; width:1.5em; height:1.5em; background-repeat:no-repeat; background-position:center; background-size:100% 100%;
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(30,37,48, 0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");}

/* Botões dentro da navbar */
.navbar .btn{padding:.55rem .9rem; border-radius:10px}
.btn.btn-primary{background:var(--brand-primary); color:#fff}
.btn.btn-outline{border:1px solid var(--border); background:transparent}

/* Garantir alinhamento do header quando Bootstrap faltar */
header .navbar-brand img{display:block; height:40px; width:auto}


/* === Prints Section === */
.section-prints {
  background: linear-gradient(180deg, var(--brand-surface) 0%, rgba(248, 250, 252, 0.5) 100%);
  padding: 50px 0;
  position: relative;
  overflow: hidden;
}

.section-prints::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
}

.prints-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.print-frame {
  width: 100%;
  height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--brand-surface);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  margin-bottom: 20px;
  overflow: hidden;
  position: relative;
  padding: 20px;
  box-sizing: border-box;
  animation: borderGlow 4s infinite ease-in-out; /* Apply the border glow animation */
  transition: all 0.3s ease; /* Smooth transition for hover effects */
}

/* Pause the animation when hovering over the carousel */
.print-frame:hover {
  animation-play-state: paused;
}

/* Slide containers for horizontal animation */
.print-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.6s ease;
  will-change: transform;
  backface-visibility: hidden;
  transform: translateZ(0);
  pointer-events: none;
}
.print-slide.current { pointer-events: auto; }

/* Inner image keeps the contain fit and centering */
.print-slide .print-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

/* Add hover effect to the current slide image only (slight scale) */
.print-frame:hover .print-slide.current .print-img {
  transform: scale(1.02);
}

.print-nav-btn {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.8);
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  color: var(--brand-primary);
  font-size: 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  opacity: 0.7; /* Start with slightly transparent buttons */
}

.print-nav-btn-prev {
  left: 15px;
}

.print-nav-btn-next {
  right: 15px;
}

/* Show buttons more prominently on hover */
.print-frame:hover .print-nav-btn {
  opacity: 1;
}

.print-nav-btn:hover,
.print-nav-btn:active {
  background: var(--brand-primary);
  color: white;
  border-color: var(--brand-primary);
  transform: translateY(-50%) scale(1.1); /* Slightly larger scale for more emphasis */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25); /* Stronger shadow for depth */
}


/* Responsive adjustments */
@media (max-width: 767.98px) {
  .print-frame {
    height: 400px;
    padding: 15px;
  }

  .prints-container {
    padding: 15px;
  }

  .print-nav-btn {
    width: 45px;
    height: 45px;
    font-size: 22px;
  }

  .print-nav-btn-prev {
    left: 10px;
  }

  .print-nav-btn-next {
    right: 10px;
  }
}

@media (max-width: 575.98px) {
  .print-frame {
    height: 350px;
    padding: 10px;
    border-width: 1px;
  }

  .prints-container {
    padding: 10px;
  }

  .print-nav-btn {
    width: 40px;
    height: 40px;
    font-size: 20px;
    background: rgba(255, 255, 255, 0.9);
  }

  .print-nav-btn-prev {
    left: 8px;
  }

  .print-nav-btn-next {
    right: 8px;
  }

  .section-prints {
    padding: 30px 0;
  }
}

/* Define keyframes for the pulse animation */
@keyframes pulse {
  0% {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transform: translateY(-50%) scale(1);
  }
  50% {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
    transform: translateY(-50%) scale(1.05);
  }
  100% {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transform: translateY(-50%) scale(1);
  }
}

/* Define keyframes for the initial load animation */
@keyframes fadeInScale {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.9);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

/* Define keyframes for the border glow animation */
@keyframes borderGlow {
  0% {
    box-shadow: 0 0 0 rgba(242, 183, 5, 0);
    border-color: rgba(226, 232, 240, 0.8);
  }
  50% {
    box-shadow: 0 0 15px rgba(242, 183, 5, 0.3);
    border-color: rgba(242, 183, 5, 0.8);
  }
  100% {
    box-shadow: 0 0 0 rgba(242, 183, 5, 0);
    border-color: rgba(226, 232, 240, 0.8);
  }
}

/* Apply the animation to the next button to indicate automatic rotation */
.print-nav-btn-next {
  animation: pulse 2s infinite ease-in-out;
}

/* Pause the animation when hovering over the carousel */
.print-frame:hover .print-nav-btn-next {
  animation-play-state: paused;
}

/* Utility class for screen reader only content */
.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;
}

/* === Prominent WhatsApp CTA and typography boosts (conversion-focused) === */
/* Bigger, greener WhatsApp button */
.btn-whatsapp{
  background:var(--whatsapp);
  color:#fff;
  border-color:transparent;
  padding:16px 24px;
  font-size:1.125rem; /* ~18px */
  font-weight:800;
  letter-spacing:.01em;
  box-shadow:0 12px 28px rgba(37,211,102,.30);
}
.btn-whatsapp:hover{ transform:translateY(-2px); box-shadow:0 16px 32px rgba(37,211,102,.40); }
.btn-whatsapp:active{ transform:translateY(-1px); }
.btn-whatsapp:focus-visible{ outline:none; box-shadow:0 0 0 4px rgba(30,37,48,.18), 0 12px 28px rgba(37,211,102,.34); }
.btn-whatsapp .bi-whatsapp{ font-size:1.25em; }

/* Make hero headline and key texts larger */
.hero-media__title{ font-size:clamp(28px, 5.2vw, 60px); line-height:1.15; }
.hero-media__subtitle{ font-size:clamp(16px, 2.4vw, 20px); }
.section h2{ font-size:clamp(24px, 3.6vw, 36px); }
.card h3{ font-size:1.2rem; }
.card p{ font-size:1.02rem; }
.lead{ font-size:clamp(18px, 2.6vw, 20px); }

/* Ensure CTA group can wrap nicely with larger buttons */
.hero-ctas{ gap:14px; }
@media (max-width: 576px){
  .hero-ctas .btn{ width:100%; justify-content:center; }
}

/* Accessibility: Respect user preferences for reduced motion */
@media (prefers-reduced-motion: reduce){
  /* Disable animations for the carousel for users who prefer reduced motion */
  .print-img {
    transition: none !important;
    animation: none !important;
  }
  .print-frame {
    animation: none !important;
    transition: none !important;
  }
  .print-frame:hover .print-img {
    transform: translate(-50%, -50%) !important;
    box-shadow: none !important;
  }
  .print-nav-btn {
    transition: none !important;
    animation: none !important;
  }
  .print-nav-btn:hover,
  .print-nav-btn:active {
    transform: translateY(-50%) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  }
}


/* Utility: disable transition for snap-resets in carousel */
.print-slide.no-anim { transition: none !important; }