/* ==================================================================
   Estilos exclusivos de las páginas de categoría de servicios
   (prevención, arquitectura, gestión empresarial, seguridad humana)
   y de la página de clientes. Reutilizan las variables de color,
   tipografía y sombras definidas en css/styles.css — no las repitas
   acá, solo el layout específico de esta plantilla.
   ================================================================== */

/* ---------- HERO DE CATEGORÍA (más bajo que el hero principal) ---------- */
.cat-hero{
  position: relative;
  overflow: hidden;
  color: #fff;
  padding-top: 8rem;
  padding-bottom: 4.5rem;
  background: radial-gradient(120% 140% at 85% 0%, var(--color-brand) 0%, var(--color-brand-dark) 45%, var(--color-ink) 100%);
}
.cat-hero__bg{ position:absolute; inset:0; z-index:0; }
.cat-hero__layer{
  position:absolute; width:520px; height:520px; border-radius:50%;
  right:-160px; top:-180px; background: var(--color-accent);
  filter: blur(80px); opacity:0.26; will-change: transform;
}
.cat-hero__inner{ position:relative; z-index:1; }

.breadcrumb{
  display:flex; gap:0.55rem; align-items:center; flex-wrap:wrap;
  font-size:0.86rem; font-weight:500; color: rgba(255,255,255,0.62);
  margin-bottom: 1.8rem;
}
.breadcrumb a{ color: rgba(255,255,255,0.8); transition: color 0.2s var(--ease); }
.breadcrumb a:hover{ color: var(--color-accent); }
.breadcrumb [aria-hidden="true"]{ opacity:0.5; }
.breadcrumb span[aria-current]{ color: var(--color-accent); font-weight:600; }

.cat-hero__head{ display:flex; align-items:flex-start; gap:1.1rem; margin-bottom: 1.2rem; }
/* Si el icono o el rótulo están vacíos no ocupan lugar (antes empujaban el título hacia la derecha) */
.cat-hero__icon:empty, .eyebrow:empty, .eyebrow__code:empty{ display:none; }

.cat-hero__title{
  font-family: var(--font-display); font-weight:800; letter-spacing:-0.03em;
  font-size: clamp(2.2rem, 4.9vw, 3.5rem); line-height:1.04;
  text-shadow: 0 2px 24px rgba(43,20,5,0.3);
}
.cat-hero__lead{
  font-size: clamp(1.02rem, 1.5vw, 1.15rem); line-height:1.7; color: rgba(255,255,255,0.84);
  max-width: 62ch; margin-bottom: 2.3rem;
}
.cat-hero__actions{ display:flex; gap:0.9rem; flex-wrap:wrap; }

/* ---------- LISTA DE SUB-SERVICIOS (fichas expandibles) ---------- */
.cat-services{ display:flex; flex-direction:column; gap:1rem; }

.cat-service{
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); overflow:hidden; box-shadow: var(--shadow-xs);
  transition: border-color 0.25s var(--ease), box-shadow 0.3s var(--ease);
}
.cat-service:hover{ border-color: #D3C3A9; box-shadow: var(--shadow-sm); }
.cat-service.is-open{ border-color: var(--color-brand-light); box-shadow: var(--shadow-md); }

.cat-service__head{
  width:100%; display:flex; align-items:center; gap:1.3rem;
  padding: 1.5rem 1.7rem; background:none; border:none; text-align:left; color: inherit;
}
.cat-service__head:focus-visible{ outline-offset:-3px; border-radius: var(--radius-md); }
.cat-service__icon{
  width: 68px; height: 68px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.cat-service__icon img{ width: 100%; height: 100%; object-fit: contain; }
.cat-service__titles{ flex:1; min-width:0; }
.cat-service__titles h3{
  font-family: var(--font-display); font-weight:700; font-size:1.14rem; line-height:1.25;
  letter-spacing:-0.01em; margin-bottom:0.3rem; color: var(--color-brand);
}
.cat-service__titles p{ color: var(--color-text-muted); font-size:0.94rem; line-height:1.6; }
.cat-service__chevron{
  flex-shrink:0; width:36px; height:36px; border-radius:50%;
  border: 1px solid var(--color-border); background: var(--color-bg);
  display:flex; align-items:center; justify-content:center;
  transition: transform 0.3s var(--ease), background 0.25s var(--ease), border-color 0.25s var(--ease);
  font-size:1.05rem; line-height:1; color: var(--color-brand-dark);
}
.cat-service:hover .cat-service__chevron{ border-color: var(--color-accent); }
.cat-service.is-open .cat-service__chevron{ transform: rotate(45deg); background: var(--color-accent); color: var(--color-ink); border-color: var(--color-accent); }

.cat-service__panel{
  max-height:0; overflow:hidden; transition: max-height 0.4s var(--ease);
}
.cat-service__panel-inner{
  /* el detalle queda alineado con el título (deja el ancho del icono a la izquierda) */
  padding: 0.2rem 1.7rem 1.9rem calc(1.7rem + 68px + 1.3rem);
  display:grid; grid-template-columns: 1fr auto; gap:1.8rem; align-items:start;
}
.cat-service__bullets{ display:flex; flex-direction:column; gap:0.6rem; }
.cat-service__bullets li{
  display:flex; gap:0.65rem; align-items:flex-start; font-size:0.95rem; line-height:1.6; color: var(--color-text-muted);
}
.cat-service__bullets li::before{
  content:'✓'; color: var(--color-green); font-weight:700; flex-shrink:0;
}
.cat-service__link{
  align-self:start; white-space:nowrap; font-weight:700; font-size:0.93rem;
  color: var(--color-brand); border-bottom: 2px solid var(--color-accent); padding-bottom:3px;
  transition: color 0.2s var(--ease);
}
.cat-service__link:hover{ color: var(--color-brand-light); }

/* ---------- CTA FINAL ---------- */
.section--cat-cta{ background: var(--color-bg); padding-top: 0; }
.cat-cta{
  position:relative; overflow:hidden;
  display:flex; flex-wrap:wrap; gap:1.6rem; align-items:center; justify-content:space-between;
  background: linear-gradient(135deg, var(--color-brand) 0%, var(--color-brand-dark) 60%, var(--color-ink) 100%);
  color:#fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: clamp(2rem, 4.5vw, 3.1rem) clamp(1.8rem, 5vw, 3.6rem);
}
.cat-cta::after{
  content:''; position:absolute; right:-90px; top:-110px; width:300px; height:300px; border-radius:50%;
  background: radial-gradient(circle, rgba(201,152,63,0.28) 0%, transparent 68%); pointer-events:none;
}
.cat-cta__text, .cat-cta .btn{ position:relative; z-index:1; }
.cat-cta__text h2{ font-family: var(--font-display); font-weight:800; letter-spacing:-0.02em; font-size: clamp(1.35rem, 2.5vw, 1.8rem); line-height:1.2; margin-bottom:0.55rem; }
.cat-cta__text p{ color: rgba(255,255,255,0.78); max-width:48ch; font-size:1rem; line-height:1.65; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 760px){
  .cat-hero{ padding-top: 7.2rem; }
  .cat-service__head{ padding: 1.25rem 1.2rem; gap:1rem; align-items:flex-start; }
  .cat-service__icon{ width:52px; height:52px; }
  .cat-service__chevron{ width:32px; height:32px; }
  .cat-service__panel-inner{ grid-template-columns: 1fr; padding: 0.2rem 1.2rem 1.5rem 1.2rem; }
  .cat-service__link{ align-self:start; }
}