/* ════════ SERVICIOS — estilos de sección ════════ */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }

:root {
  --gold:#8b6814;
  --gold-lt:#a8862a;
  --dark:#0A0A0A;
  --text:#D4D0C8;
  --white:#F5F3EE;
  --line:rgba(255,255,255,0.08);
}

body {
  background:var(--dark);
  color:var(--text);
  font-family:'Barlow',sans-serif;
  font-weight:300;
  overflow-x:hidden;
}

nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.2rem 3rem;
  background:linear-gradient(180deg, rgba(0,0,0,0.9) 0%, transparent 100%);
  transition:background 0.4s;
}
nav.scrolled { background:rgba(10,10,10,0.97); border-bottom:1px solid rgba(139, 104, 20,0.15); }

.nav-links { display:flex; gap:2.5rem; list-style:none; }
.nav-links a {
  color:var(--text); text-decoration:none;
  font-family:'Barlow Condensed',sans-serif;
  font-size:0.78rem; letter-spacing:0.25em; text-transform:uppercase;
  transition:color 0.3s;
}
.nav-links a:hover, .nav-links a.active { color:var(--gold); }

.nav-cta {
  color:var(--gold); border:1px solid var(--gold);
  padding:0.55rem 1.2rem; text-decoration:none;
  font-family:'Barlow Condensed',sans-serif;
  font-size:0.72rem; letter-spacing:0.2em; text-transform:uppercase;
  transition:background 0.3s, color 0.3s;
}
.nav-cta:hover { background:var(--gold); color:var(--dark); }

#page-hero {
  position:relative; min-height:52vh;
  display:flex; align-items:flex-end;
  padding:8rem 3rem 3rem;
}
.page-hero-bg {
  position:absolute; inset:0;
  background:var(--r2-servicios-hero) center/cover no-repeat;
}
.page-hero-bg::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(10,10,10,0.95) 100%);
}
.page-hero-content { position:relative; z-index:1; max-width:900px; }
.breadcrumb { font-size:0.75rem; letter-spacing:0.15em; text-transform:uppercase; margin-bottom:1rem; opacity:0.7; }
.breadcrumb a { color:var(--gold-lt); text-decoration:none; }
.breadcrumb .sep { margin:0 0.5rem; color:var(--gold); }
.hero-eyebrow { display:flex; align-items:center; gap:1rem; margin-bottom:0.8rem; }
.eyebrow-line { width:40px; height:1px; background:var(--gold); }
.hero-eyebrow span { font-size:0.72rem; letter-spacing:0.25em; text-transform:uppercase; color:var(--gold-lt); }
.hero-title {
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(3rem, 8vw, 5.5rem);
  line-height:0.95; color:var(--white);
}
.hero-title .outline {
  -webkit-text-stroke:1px var(--gold);
  color:transparent;
}

#servicios-section { padding:3rem; max-width:1200px; margin:0 auto; }
.servicios-grid { display:grid; gap:2rem; }
.servicio-card {
  display:grid;
  grid-template-columns:minmax(240px, 360px) 1fr;
  gap:2rem;
  background:rgba(255,255,255,0.03);
  border:1px solid var(--line);
  border-radius:4px;
  overflow:hidden;
}
.servicio-img-wrap { min-height:240px; background:#111; }
.servicio-img { width:100%; height:100%; object-fit:cover; display:block; min-height:240px; }
.servicio-img-placeholder {
  min-height:240px; display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,0.25); font-size:0.75rem; letter-spacing:0.15em; text-transform:uppercase;
}
.servicio-body { padding:2rem 2rem 2rem 0; display:flex; flex-direction:column; justify-content:center; gap:1rem; }
.servicio-nombre {
  font-family:'Bebas Neue',sans-serif;
  font-size:2.2rem; color:var(--white); letter-spacing:0.04em;
}
.servicio-desc { line-height:1.7; max-width:56ch; }
.servicio-whatsapp {
  align-self:flex-start;
  display:inline-flex; align-items:center; gap:0.5rem;
  background:#25D366; color:#fff; text-decoration:none;
  padding:0.75rem 1.2rem; border-radius:999px;
  font-family:'Barlow Condensed',sans-serif;
  font-size:0.78rem; letter-spacing:0.12em; text-transform:uppercase;
  transition:transform 0.25s, background 0.25s;
}
.servicio-whatsapp:hover { background:#1ebe57; transform:translateY(-2px); }

.loading-state {
  display:flex; flex-direction:column; align-items:center; gap:1rem;
  padding:4rem; color:rgba(255,255,255,0.5);
}
.loading-spinner {
  width:36px; height:36px; border:2px solid rgba(139, 104, 20,0.2);
  border-top-color:var(--gold); border-radius:50%;
  animation:spin 0.8s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }

.reveal { opacity:0; transform:translateY(24px); transition:opacity 0.6s, transform 0.6s; }
.reveal.visible { opacity:1; transform:none; }

footer { padding:2rem 3rem; border-top:1px solid var(--line); text-align:center; }
.footer-copy { font-size:0.75rem; letter-spacing:0.12em; text-transform:uppercase; opacity:0.5; }

@media (max-width:860px) {
  nav { padding:1rem 1.2rem; }
  #page-hero { padding:7rem 1.2rem 2rem; }
  #servicios-section { padding:2rem 1.2rem; }
  .servicio-card { grid-template-columns:1fr; }
  .servicio-body { padding:1.5rem; }
}