:root{
  --negro:#171717;
  --gris:#252525;
  --blanco:#ffffff;
  --rojo:#E8272A;
  --crema:#F9DFC1;
}
/* ── HAMBURGER (decorativo, sin interacción) ── */
.hamburger{
  background:none; border:none;
  width:40px; padding:0; z-index:9998;
  display:flex; flex-direction:column; gap:8px;
  position:fixed; top:31px; right:56px;
  mix-blend-mode:difference;
  cursor:default;
}
.hamburger .bar{ display:block; }

/* ── PAGE TOPBAR ── */
.page-topbar{
  width:100%;
  height:100px;
  position:relative;
  pointer-events:none;
}
.page-topbar-title{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  top:38px;
  font-family:'Unbounded',sans-serif;
  font-weight:700;
  font-size:24px;
  color:var(--blanco);
  text-transform:lowercase;
  white-space:nowrap;
}
/* ── FILTROS (mismo componente que blog.html) ── */
.servicios-filters-wrap{
  display:flex;
  justify-content:center;
  padding:24px 56px 48px;
}
.servicios-filters{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:4px;
  border:1px solid #333;
  border-radius:100px;
  max-width:100%;
}
.filter-btn{
  font-family:'Unbounded',sans-serif;
  font-weight:500;
  font-size:13px;
  color:#888;
  background:none;
  border:none;
  padding:9px 20px;
  border-radius:100px;
  cursor:pointer;
  transition:background .25s ease, color .25s ease;
  white-space:nowrap;
  flex-shrink:0;
}
.filter-btn:hover{ color:var(--blanco); }
.filter-btn.active{
  background:var(--rojo);
  color:var(--blanco);
}

.mobile-filter-wrap{ display:none; position:relative; }
.mobile-filter-toggle{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  background-color:var(--gris);
  border:1px solid #333;
  border-radius:100px;
  color:var(--blanco);
  font-family:'Unbounded',sans-serif;
  font-weight:500;
  font-size:14px;
  padding:14px 20px;
  cursor:pointer;
  text-align:left;
}
.mobile-filter-toggle .chev{
  flex-shrink:0;
  transition:transform .25s ease;
}
.mobile-filter-toggle.open .chev{ transform:rotate(180deg); }
.mobile-filter-toggle:focus{ outline:none; border-color:var(--rojo); }

.mobile-filter-options{
  list-style:none;
  position:absolute;
  top:calc(100% + 10px);
  left:24px;
  right:24px;
  background:var(--gris);
  border:1px solid #333;
  border-radius:20px;
  padding:10px;
  z-index:30;
  box-shadow:0 16px 32px rgba(0,0,0,.5);
}
.mobile-filter-options[hidden]{ display:none; }
.mobile-filter-options li{
  font-family:'Unbounded',sans-serif;
  font-weight:500;
  font-size:14px;
  color:var(--blanco);
  padding:16px 18px;
  border-radius:14px;
  cursor:pointer;
}
.mobile-filter-options li + li{ margin-top:8px; }
.mobile-filter-options li.active{
  background:var(--rojo);
  font-weight:700;
}

/* ── GRID DE SERVICIOS ── */
.servicios-list-wrap{
  padding:0 56px 100px;
}
.servicios-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:24px;
  max-width:1100px;
  margin:0 auto;
}
.service-card{
  display:flex;
  flex-direction:row;
  text-decoration:none;
  border:1px solid #404040;
  border-radius:4px;
  overflow:hidden;
  gap:0;
  height:264px;
}
.service-card.reveal-hidden{ opacity:0; transform:translateY(16px); }
.service-card.is-filtered-out{ display:none !important; }

/* imagen */
.sv-visual{
  position:relative;
  width:180px;
  height:100%;
  flex-shrink:0;
  overflow:hidden;
}
.sv-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.sv-img-mobile{ display:none; }
.sv-visual-empty{ background:var(--gris); }

.service-body{
  padding:24px 28px;
  display:flex;
  flex-direction:column;
  gap:14px;
  flex:1;
  min-width:0;
  overflow:hidden;
}
.service-tag{
  font-family:'DM Sans',sans-serif;
  font-weight:700;
  font-size:11px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--rojo);
  flex-shrink:0;
}
.service-title{
  font-family:'Unbounded',sans-serif;
  font-weight:700;
  font-size:20px;
  line-height:1.25;
  color:var(--blanco);
  flex-shrink:0;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.service-desc{
  font-family:'DM Sans',sans-serif;
  font-size:14px;
  line-height:1.65;
  color:#737373;
  flex:1;
  display:-webkit-box;
  -webkit-line-clamp:4;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.servicios-empty{ grid-column:1 / -1; color:#888; font-family:'DM Sans',sans-serif; font-size:16px; text-align:center; padding:48px 20px; }
.servicios-filter-empty{ max-width:1100px; margin:0 auto; }

/* ── MOBILE ── */
@media (max-width:768px){
  .hamburger{ top:26px; right:24px; width:32px; }

  .page-topbar{ height:96px; }
  .page-topbar-title{ font-size:18px; top:32px; }

  .servicios-filters-wrap{
    display:block;
    padding:16px 0 24px;
  }
  .servicios-filters{ display:none; }
  .mobile-filter-wrap{ display:block; width:100%; padding:0 24px; box-sizing:border-box; }

  .servicios-list-wrap{ padding:0 24px 64px; }
  .servicios-grid{ grid-template-columns:1fr; gap:14px; }
  .service-card{ flex-direction:column; height:auto; }
  .sv-visual{ width:100%; height:100px; }
  .sv-img-desktop{ display:none; }
  .sv-img-mobile{ display:block; }
  .service-body{ padding:20px 20px; gap:10px; overflow:visible; }
  .service-title{ font-size:18px; -webkit-line-clamp:unset; overflow:visible; }
  .service-desc{ font-size:13px; line-height:1.55; -webkit-line-clamp:unset; overflow:visible; }
}

/* ── FAQ ACORDEÓN ── */
.faq-section{
  width:100%;
  background:var(--negro);
  padding:120px 56px;
  box-sizing:border-box;
  border-top:1px solid #252525;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.faq-header{
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:80px;
  width:100%;
  max-width:900px;
}
.faq-label{
  font-family:'DM Sans',sans-serif;
  font-size:12px;
  font-weight:700;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--rojo);
  text-align:center;
}
.faq-list{
  list-style:none;
  margin:0;
  padding:0;
  width:100%;
  max-width:900px;
}
.faq-item{
  border-top:1px solid #2e2e2e;
}
.faq-item:last-child{
  border-bottom:1px solid #2e2e2e;
}
.faq-question{
  width:100%;
  background:none;
  border:none;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:32px 0;
  cursor:pointer;
  text-align:left;
  gap:24px;
}
.faq-q-text{
  font-family:'Unbounded',sans-serif;
  font-weight:700;
  font-size:clamp(16px,2vw,22px);
  color:var(--blanco);
  line-height:1.2;
  transition:color .2s;
}
.faq-item:hover .faq-q-text{ color:var(--rojo); }
.faq-icon{
  width:32px;
  height:32px;
  flex-shrink:0;
  border:1px solid #404040;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:border-color .2s, background .2s, transform .4s cubic-bezier(.76,0,.24,1);
}
.faq-icon svg{
  width:12px; height:12px;
  stroke:var(--blanco);
  transition:stroke .2s;
}
.faq-item.open .faq-icon{
  background:var(--rojo);
  border-color:var(--rojo);
  transform:rotate(45deg);
}
.faq-item.open .faq-icon svg{ stroke:var(--blanco); }
.faq-answer{
  max-height:0;
  overflow:hidden;
  transition:max-height .45s cubic-bezier(.76,0,.24,1);
}
.faq-answer-inner{
  padding-bottom:32px;
}
.faq-answer-inner p{
  font-family:'DM Sans',sans-serif;
  font-size:16px;
  line-height:1.7;
  color:#a3a3a3;
  margin:0;
}
@media (max-width:768px){
  .faq-section{ padding:80px 24px; }
  .faq-header{ margin-bottom:48px; }
  .faq-q-text{ font-size:16px; }
}

/* ── Logo móvil — tamaño propio de esta página ── */
@media (max-width:768px){
  #logo-sticky{ width:56px; top:20px; left:24px; }
}