/* =======================================================================
   RoofService CSS
   B&ONET Solutions
   ======================================================================= */

:root {
  --bg: #f8fafc;          /* slate-50 */
  --paper: #ffffff;
  --ink: #0f172a;         /* slate-900 */
  --muted: #475569;       /* slate-600 */
  --line: #e2e8f0;        /* slate-200 */
  --brand: #1d4ed8;       /* blue-700 */
  --brand-2: #0ea5e9;     /* sky-500 */
  --accent: #10b981;      /* emerald-500 */
  --shadow: 0 10px 30px rgba(2,6,23,.08);
}

* { box-sizing: border-box; }
html, body { margin:0; padding:0; }
html { scroll-behavior: smooth; }
body {
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  color: var(--ink);
  background: linear-gradient(180deg, var(--bg), #fff 40%, var(--bg));
}

/* Utilidades */
.container { width: min(1200px, 92%); margin: 0 auto; }
.section { padding: 64px 0; }
.center { text-align: center; }
.lead { color: var(--muted); line-height: 1.7; }
.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(1, 1fr); }
.grid-3 { grid-template-columns: repeat(1, 1fr); }
@media (min-width: 860px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px){ .grid-3 { grid-template-columns: repeat(3, 1fr); } }

h1, h2, h3 { line-height: 1.15; margin: 0 0 14px; }
h1 { font-size: clamp(32px, 4vw, 44px); }
h2 { font-size: clamp(26px, 3vw, 34px); }
h3 { font-size: 20px; }
p { margin: 0 0 12px; }

/* Botones */
.btn { display:inline-flex; align-items:center; gap:10px; padding:12px 18px; 
  font-weight: 600; border-radius: 14px; text-decoration:none; }
.btn-primary { background: var(--brand); color:#fff; box-shadow: var(--shadow); }
.btn-primary:hover { filter: brightness(1.05); transform: translateY(-1px); }
.btn-outline { border:1px solid var(--line); background:#fff; color:var(--ink); }
.btn-outline:hover { background:#f1f5f9; }

/* Navbar */
.navbar {
  position: sticky; top:0; z-index:100; backdrop-filter: blur(8px);
  background: rgba(255, 255, 255, 0.85); border-bottom:1px solid var(--line);
}
.nav-row { height:80px; display:flex; align-items:center; justify-content:space-between; }

/* Logo */
.logo { display:flex; align-items:center; }
.logo img { height:40px; width:auto; display:block; }

.nav a { text-decoration:none; color: var(--ink); font-weight:600; font-size:20px; }
.nav a:hover { color: var(--brand); }
.nav .active { color: var(--brand); }

/* Navbar – base móvil */
#nav-toggle { display:none; }
.nav { display:none; gap:20px; }
.cta { display:none; }

#hamb {
  width:42px; height:42px; display:grid; place-content:center;
  border:1px solid var(--line); border-radius:12px;
  background:#fff; cursor:pointer;
}

/* Panel móvil oculto */
.nav-panel {
  display:none;
  position: absolute; left:0; right:0; top:80px;
  background:#fff; border-top:1px solid var(--line);
  padding:12px 4%; flex-direction:column; gap:12px;
}


#nav-toggle:checked ~ .nav-panel { display:flex; }

/* Desktop: menú normal */
@media (min-width: 900px) {
  .nav { display:flex !important; }
  .cta { display:flex !important; }
  #hamb, .nav-panel { display:none !important; }
}

/* Hero */
.hero { padding: 80px 0; position: relative; overflow: hidden; }
.hero::before {
  content:''; position:absolute; inset:-20% -30% auto auto; height:420px; width:420px;
  background: radial-gradient(circle at 30% 30%, rgba(29,78,216,.18), transparent 60%);
  filter: blur(10px); z-index:-1;
}
.hero-wrap { display:grid; gap:36px; }
@media (min-width: 980px){ .hero-wrap { grid-template-columns: 1.1fr 1fr; align-items:center; } }
.hero-card {
  background: var(--paper); border:1px solid var(--line); border-radius: 24px; padding: 10px;
  box-shadow: var(--shadow); min-height: 320px; background-size: cover; background-position: center;
}
.badge { display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; 
  background: #ecfdf5; color:#065f46; font-weight:700; font-size:12px; border:1px solid #a7f3d0; }

.stats { display:grid; grid-template-columns: repeat(3, 1fr); gap:18px; margin-top:20px; }
.stat { display:flex; align-items:center; gap:12px; }
.ic { height:44px; width:44px; border-radius:14px; display:grid; place-content:center; background: #dbeafe; color:#1e40af; }

/* Secciones cards */
.card { background: var(--paper); border:1px solid var(--line); border-radius: 18px; padding:18px; box-shadow: var(--shadow); }
.card figure { aspect-ratio: 4 / 3; border-radius:12px; overflow:hidden; background:#eef2f7; display:grid; place-content:center; color:#64748b; }
.card h3 { margin-top: 8px; }
.card p { color: var(--muted); }

/* Linea Negra */
.band { background:#15274b; color:#e5e7eb; }
.band .card { background:rgb(12, 26, 53); border-color:#1f2937; }
.band .card p { color:#cbd5e1; }

/* Footer */
footer { border-top:1px solid var(--line); padding: 34px 0; }
small { color: var(--muted); }

/* Lista de Contacto */
.list { display:grid; gap:12px; }
.list .row { display:flex; align-items:center; gap:12px; }
.k { min-width:80px; font-weight:700; color: var(--muted); }
.v a { color: var(--brand); text-decoration: none; }
.v a:hover { text-decoration: underline; }

/* Overline */
.over { display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; 
  background: #eff6ff; border:1px solid #bfdbfe; color:#1d4ed8; font-weight:700; font-size:12px; }

/* Ayuda Para las Imágenes responsive */
.img-fit { width:100%; height:100%; object-fit: cover; }

/* ===== Carrusel ===== */
.carousel { position: relative; }

.car-track{
  display:flex; gap:0; overflow-x:auto;         
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling: touch;
  border-radius:20px;
  box-shadow: var(--shadow);
  border:1px solid var(--line);
  scrollbar-width: none; -ms-overflow-style: none;    
}
.car-track::-webkit-scrollbar{ display:none; } 

.car-slide{
  min-width:100%; scroll-snap-align:center;
  background:var(--paper); aspect-ratio:16 / 9;
  display:block;
}
.car-slide img{ width:100%; height:100%; object-fit:cover; display:block; }

.car-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:50%; border:1px solid var(--line);
  background:#fff; font-size:24px; line-height:1; cursor:pointer;
  display:grid; place-content:center; box-shadow:var(--shadow);
}
.car-btn.prev{ left:8px; } .car-btn.next{ right:8px; }
.car-btn:hover{ filter:brightness(1.03); }

.car-dots{ display:flex; justify-content:center; gap:8px; margin-top:12px; }
.car-dot{ width:10px; height:10px; border-radius:999px; border:1px solid var(--line); background:#e5e7eb; }
.car-dot.active{ background:var(--brand); border-color:var(--brand); }

/* Pills estado Abierto/Cerrado */
.pill { padding: 4px 10px; border-radius: 999px; font-weight: 700; }
.pill.open  { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.pill.closed{ background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }