/* =====================================================================
   Grupo Rojas Seguridad — design system
   ===================================================================== */
:root{
  --red:#9E201A;
  --red-2:#b9261e;
  --red-deep:#7a1813;
  --red-soft:#fbeae8;
  --cream:#faf6f0;
  --paper:#fdfaf5;
  --ink:#1a1414;
  --ink-2:#3a2f2e;
  --muted:#6b5f5d;
  --line:#ead9d4;
  --gold:#c9a24a;
}
*{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
html, body{ color:var(--ink); background:var(--paper); font-family:'Inter', system-ui, sans-serif; }
.display{ font-family:'Fraunces', Georgia, serif; letter-spacing:-0.02em; font-weight:600; }
.display-italic{ font-family:'Fraunces', Georgia, serif; font-style:italic; font-weight:500; }
h1,h2,h3,h4,h5,h6{ font-family:'Fraunces', Georgia, serif; letter-spacing:-0.015em; }

/* Container */
.container-x{ max-width:1240px; margin-inline:auto; padding-inline:1.25rem; }
@media (min-width: 768px){ .container-x{ padding-inline:2rem; } }
@media (min-width: 1280px){ .container-x{ padding-inline:3rem; } }

/* Header */
.site-header{ background:var(--paper); border-bottom:1px solid var(--line); }
.site-header.scrolled{ background:rgba(253,250,245,.92); backdrop-filter: blur(10px); }
.nav-link{ color:var(--ink-2); font-weight:500; font-size:.92rem; transition:color .15s; position:relative; text-decoration:none; }
.nav-link:hover{ color:var(--red); }
.nav-link::after{ content:""; position:absolute; left:0; right:0; bottom:-22px; height:2px; background:var(--red); transform:scaleX(0); transform-origin:left; transition:transform .2s; }
.nav-link:hover::after, .nav-link.active::after{ transform:scaleX(1); }
.nav-link.active{ color:var(--red); }

/* Page hero */
.page-hero{
  position:relative;
  background:var(--red);
  color:#fff;
  overflow:hidden;
  padding-block:4.5rem;
}
@media (min-width: 1024px){ .page-hero{ padding-block:6rem; } }
.page-hero h1{
  color:#fff; font-weight:600;
  font-size: clamp(2.2rem, 4.5vw, 3.8rem);
  line-height:1.05; letter-spacing:-0.025em;
}
.page-hero h1 em{ font-style:italic; font-weight:500; color:#ffd9d4; }
.page-hero .lead{
  margin-top:1.25rem; max-width:42rem; color:rgba(255,255,255,.88);
  font-size:1.1rem; line-height:1.6;
}
.page-hero-shield{
  position:absolute;
  right:-200px; top:50%; transform:translateY(-50%);
  width:680px; height:680px;
  opacity:.07; pointer-events:none;
}
.page-hero-paper{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(1200px 600px at 100% 0%, rgba(255,255,255,.08), transparent 60%),
    radial-gradient(800px 400px at 0% 100%, rgba(0,0,0,.18), transparent 70%);
}

/* Eyebrows */
.eyebrow-light{
  display:inline-flex; align-items:center; gap:.6rem;
  font-size:.78rem; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(255,255,255,.85); font-weight:600;
}
.eyebrow-light::before{ content:""; width:32px; height:1px; background:currentColor; }
.eyebrow-dark{
  display:inline-flex; align-items:center; gap:.6rem;
  font-size:.75rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--red); font-weight:700;
}
.eyebrow-dark::before{ content:""; width:32px; height:1px; background:currentColor; }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  cursor:pointer; text-decoration:none; user-select:none;
  -webkit-tap-highlight-color:transparent;
  padding:.85rem 1.3rem; font-weight:600; line-height:1.1;
  border-radius:999px;
  transition: background-color .15s, color .15s, border-color .15s, transform .06s, box-shadow .15s;
  font-size:.95rem; font-family:'Inter', sans-serif;
  border:1px solid transparent;
}
.btn:hover{ text-decoration:none; }
.btn:active{ transform: translateY(1px); }
.btn-sm{ padding:.55rem 1rem; font-size:.85rem; }
.btn-lg{ padding:1rem 1.6rem; font-size:1rem; }
.btn-block{ width:100%; }

.btn-red{ background:var(--red); color:#fff; border-color:var(--red-deep); }
.btn-red:hover{ background:var(--red-deep); color:#fff; }
.btn-cream{ background:#fff; color:var(--red); border-color:#fff; }
.btn-cream:hover{ background:#f3e9e0; color:var(--red); }
.btn-outline-w{ background:transparent; color:#fff; border-color:rgba(255,255,255,.55); }
.btn-outline-w:hover{ background:rgba(255,255,255,.12); color:#fff; }
.btn-outline-r{ background:transparent; color:var(--red); border-color:var(--red); }
.btn-outline-r:hover{ background:var(--red); color:#fff; }
.btn-ink{ background:var(--ink); color:#fff; border-color:var(--ink); }
.btn-ink:hover{ background:#000; color:#fff; }
.btn-wa{ background:#1faa57; color:#fff; border-color:#168a45; }
.btn-wa:hover{ background:#168a45; color:#fff; }
.btn-ghost{ background:transparent; color:var(--ink); border-color:transparent; }
.btn-ghost:hover{ background:var(--cream); }
.btn:focus-visible{ outline:3px solid rgba(158,32,26,.35); outline-offset:2px; }

/* Cards */
.card{
  background:#fff; border:1px solid var(--line); border-radius:1rem;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card:hover{ border-color:#d9c0b8; }
.card-hover:hover{ transform:translateY(-3px); box-shadow:0 22px 40px -28px rgba(122,24,19,.35); }
.card-cream{ background:var(--cream); border:1px solid var(--line); border-radius:1rem; }
.card-red{ background:var(--red); color:#fff; border:1px solid var(--red-deep); border-radius:1rem; }
.card-ink{ background:var(--ink); color:#fff; border:1px solid #2a2222; border-radius:1rem; }

/* Compliance strip */
.compliance{ background:#fff7ed; border-bottom:1px solid #fed7aa; color:#7c2d12; }

/* Inputs */
.input{
  width:100%; border:1px solid var(--line); border-radius:.75rem;
  padding:.85rem 1rem; background:#fff; color:var(--ink);
  transition: border-color .15s, box-shadow .15s;
  font-size:.95rem; font-family:'Inter', sans-serif;
}
.input:focus{ outline:none; border-color:var(--red); box-shadow:0 0 0 4px rgba(158,32,26,.12); }
.label{ font-size:.85rem; font-weight:600; color:var(--ink-2); }

/* Section */
.section{ padding-block:4.5rem; }
@media (min-width: 1024px){ .section{ padding-block:6.5rem; } }

/* Floating actions */
.floating-wa{ position:fixed; right:16px; bottom:16px; z-index:50; box-shadow: 0 12px 32px -10px rgba(31,170,87,.55); }
.floating-call{ position:fixed; left:16px; bottom:16px; z-index:50; box-shadow: 0 12px 32px -10px rgba(158,32,26,.55); }
@media (min-width: 768px){ .floating-call{ display:none; } }

/* Image utilities */
.img-frame{ position:relative; overflow:hidden; border-radius:1rem; border:1px solid var(--line); background:#fff; }
.img-frame img{ display:block; width:100%; height:100%; object-fit:cover; }

/* Big number */
.bignum{
  font-family:'Fraunces', serif; font-weight:700;
  font-size: clamp(3rem, 6vw, 5rem); line-height:.9; letter-spacing:-0.04em;
  color:var(--red);
}

/* Quote */
.quote-mark{
  font-family:'Fraunces', serif; font-style:italic; font-weight:600;
  color:var(--red); font-size:5rem; line-height:.6; opacity:.3;
}

/* Underline highlight */
.ulink{ position:relative; white-space:nowrap; }
.ulink::after{
  content:""; position:absolute; left:-2px; right:-2px; bottom:.05em; height:.35em;
  background: rgba(255,217,212,.45); z-index:-1; border-radius:2px;
}

/* Accent rule */
.rule{ height:1px; background:linear-gradient(90deg, var(--red), transparent); width:80px; }

/* Subtle reveal */
@media (prefers-reduced-motion: no-preference){
  .reveal{ opacity:0; transform: translateY(8px); animation: gr-rise .55s .05s ease-out forwards; }
}
@keyframes gr-rise{ to{ opacity:1; transform:none; } }

/* Marquee */
.marquee{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--cream); }
.marquee-row{
  display:flex; gap:3rem; padding:1.1rem 0;
  overflow:hidden; white-space:nowrap;
  font-family:'Fraunces', serif; font-style:italic; font-weight:500;
  color:var(--red); font-size:1.15rem;
}
.marquee-track{ display:inline-flex; gap:3rem; animation: gr-marquee 30s linear infinite; padding-right:3rem; }
.marquee-row:hover .marquee-track{ animation-play-state:paused; }
@keyframes gr-marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.marquee-dot{ display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--red); transform:translateY(-3px); margin-left:3rem; }

/* Service editorial row */
.svc-row{ display:grid; grid-template-columns: 60px 1fr auto; gap:1.5rem; align-items:start; padding:1.75rem 0; border-bottom:1px solid var(--line); text-decoration:none; color:inherit; }
.svc-row:last-child{ border-bottom:none; }
.svc-num{ font-family:'Fraunces', serif; font-weight:600; font-style:italic; color:var(--red); font-size:1.6rem; }
.svc-arrow{ color:var(--red); transition:transform .25s; }
.svc-row:hover .svc-arrow{ transform:translateX(4px); }

/* Process step */
.step-card{ position:relative; padding:1.75rem; }
.step-card .step-n{
  font-family:'Fraunces', serif; font-style:italic; font-weight:500;
  color:var(--red); opacity:.4; font-size:3.5rem; line-height:1;
  position:absolute; top:1rem; right:1.25rem;
}

/* Map (Leaflet) */
#map{ height:520px; width:100%; border-radius:1.25rem; border:1px solid var(--line); background:#eef2f4; }
.leaflet-container{ font-family:'Inter', sans-serif !important; border-radius:1.25rem; }
.leaflet-popup-content-wrapper{ border-radius:.75rem; }
.leaflet-popup-content{ margin:.85rem 1rem; font-size:.85rem; }
.leaflet-popup-content strong{ font-family:'Fraunces', serif; font-size:.95rem; color:var(--red); }

/* Catalog accordion (servicios) */
.catalog{ display:grid; gap:.75rem; }
.catalog-cat{ border:1px solid var(--line); border-radius:1rem; background:#fff; overflow:hidden; }
.catalog-summary{
  cursor:pointer; padding:1.1rem 1.25rem;
  font-family:'Fraunces', serif; font-weight:600; font-size:1.15rem;
  list-style:none; display:flex; align-items:center; justify-content:space-between;
  color:var(--ink);
}
.catalog-summary::-webkit-details-marker{ display:none; }
.catalog-summary::after{
  content:""; width:14px; height:14px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239E201A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat; background-size:contain; background-position:center;
  transition: transform .2s;
}
.catalog-cat[open] .catalog-summary::after{ transform: rotate(180deg); }
.catalog-items{ padding:0 1.25rem 1.25rem; display:grid; gap:.5rem; }
.catalog-item{
  display:flex; gap:1rem; align-items:flex-start; justify-content:space-between;
  padding:1rem; border-radius:.75rem; background:var(--cream); border:1px solid var(--line);
}
.catalog-name{ font-weight:600; color:var(--ink); }
.catalog-benefit{ margin-top:2px; font-size:.85rem; color:var(--muted); }
@media (max-width:640px){
  .catalog-item{ flex-direction:column; align-items:stretch; }
  .catalog-item .btn{ width:100%; }
}

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