/*
  Construcciones Intxaurrondo-Salinas
  Paleta orientativa desde el logo:
  - Rojo marca: #E3062C, aprox. Pantone 186 C
  - Azul marino: #001D4A, aprox. Pantone 2965 C
  - Fondo cálido: #F7F3EC
*/
:root {
  --red: #e3062c;
  --red-dark: #b90022;
  --navy: #001d4a;
  --navy-soft: #0b326c;
  --sand: #f7f3ec;
  --paper: #ffffff;
  --ink: #152033;
  --muted: #667085;
  --line: #e6e9ef;
  --shadow: 0 18px 45px rgba(0, 29, 74, .13);
  --radius: 22px;
  --max: 1180px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--sand);
  line-height: 1.6;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
.container { width: min(var(--max), calc(100% - 36px)); margin: 0 auto; }
.topbar { background: var(--navy); color: #fff; font-size: 14px; }
.topbar-inner { display:flex; justify-content:space-between; gap:16px; padding:8px 0; }
.topbar a { font-weight: 800; }
.site-header { position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,.96); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.header-inner { display:flex; align-items:center; justify-content:space-between; padding:12px 0; gap:22px; }
.logo-link { display:flex; align-items:center; gap:14px; min-width:0; }
.logo-link img { width: 150px; height:auto; }
.brand-text { font-weight:900; color:var(--navy); letter-spacing:-.02em; }
.main-nav { display:flex; align-items:center; gap:6px; }
.main-nav a { padding:10px 14px; border-radius:999px; color:var(--navy); font-weight:800; font-size:15px; }
.main-nav a:hover, .main-nav a.active { background:rgba(227,6,44,.09); color:var(--red); }
.mobile-toggle { display:none; border:1px solid var(--line); background:#fff; color:var(--navy); border-radius:999px; padding:10px 14px; font-weight:800; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; border:0; border-radius:999px; padding:14px 22px; font-weight:900; cursor:pointer; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.btn:hover { transform: translateY(-2px); }
.btn-primary { color:#fff; background:var(--red); box-shadow:0 14px 28px rgba(227,6,44,.24); }
.btn-primary:hover { background:var(--red-dark); }
.btn-secondary { color:var(--navy); background:#fff; border:1px solid var(--line); }
.btn-whatsapp { color:#fff; background:#128c7e; }
.hero { position:relative; overflow:hidden; background:linear-gradient(115deg, rgba(0,29,74,.92), rgba(0,29,74,.72)), url('../../images/fachada-exterior-acabada-vivienda-donostia.webp') center/cover no-repeat; color:#fff; }
.hero::after { content:""; position:absolute; right:-180px; top:-120px; width:520px; height:520px; background:rgba(227,6,44,.55); border-radius:50%; filter:blur(20px); }
.hero-grid { position:relative; z-index:1; display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; min-height:660px; padding:74px 0; }
.hero-copy p { font-size: clamp(18px, 2vw, 22px); max-width: 720px; color: rgba(255,255,255,.92); }
.eyebrow { display:inline-flex; gap:8px; align-items:center; padding:8px 12px; border-radius:999px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22); font-weight:900; font-size:14px; letter-spacing:.02em; text-transform:uppercase; }
.eyebrow::before { content:""; width:9px; height:9px; border-radius:50%; background:var(--red); }
h1,h2,h3,p { margin-top:0; }
h1 { margin:24px 0 18px; font-size:clamp(38px, 5.8vw, 72px); line-height:.98; letter-spacing:-.06em; }
h2 { font-size:clamp(30px, 4vw, 48px); line-height:1.05; letter-spacing:-.045em; margin-bottom:18px; color:var(--navy); }
h3 { font-size:22px; line-height:1.2; margin-bottom:10px; color:var(--navy); }
.hero-actions { display:flex; flex-wrap:wrap; gap:14px; margin-top:30px; }
.hero-card { background:rgba(255,255,255,.96); color:var(--ink); border-radius:28px; padding:16px; box-shadow:var(--shadow); transform:rotate(1deg); }
.hero-card img { width:100%; height:420px; object-fit:cover; border-radius:20px; }
.hero-card-text { padding:18px 8px 6px; display:grid; gap:4px; }
.hero-card-text strong { color:var(--navy); font-size:20px; }
.hero-card-text span { color:var(--muted); }
.section { padding:86px 0; }
.section-white { background:#fff; }
.section-title { max-width:860px; margin-bottom:36px; }
.section-title.compact { margin-left:auto; margin-right:auto; text-align:center; }
.kicker { display:inline-block; color:var(--red); font-weight:900; text-transform:uppercase; letter-spacing:.08em; font-size:13px; margin-bottom:10px; }
.lead { font-size:18px; color:var(--muted); }
.cards { display:grid; grid-template-columns:repeat(3, 1fr); gap:22px; }
.card { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:28px; box-shadow:0 10px 28px rgba(0,29,74,.06); }
.section-white .card { background:var(--sand); }
.card-icon, .service-number { display:grid; place-items:center; width:44px; height:44px; border-radius:999px; color:#fff; background:var(--red); font-weight:900; margin-bottom:18px; }
.split { display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:center; }
.checklist { list-style:none; padding:0; margin:26px 0 0; display:grid; gap:12px; }
.checklist li { position:relative; padding-left:32px; color:var(--ink); font-weight:650; }
.checklist li::before { content:"✓"; position:absolute; left:0; top:0; width:22px; height:22px; border-radius:50%; display:grid; place-items:center; background:rgba(227,6,44,.1); color:var(--red); font-weight:900; }
.photo-stack { display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:end; }
.photo-stack img { height:520px; width:100%; object-fit:cover; border-radius:26px; box-shadow:var(--shadow); }
.photo-stack img:nth-child(2) { height:430px; transform:translateY(34px); }
.work-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; }
.work-grid.large { grid-template-columns:repeat(4, 1fr); }
.work-card { margin:0; overflow:hidden; border-radius:20px; background:#fff; box-shadow:0 10px 28px rgba(0,29,74,.08); }
.work-card img { width:100%; height:260px; object-fit:cover; transition: transform .35s ease; }
.work-card:hover img { transform:scale(1.04); }
.seo-block { background:linear-gradient(135deg, var(--navy), var(--navy-soft)); color:#fff; }
.seo-panel { max-width:920px; }
.seo-panel h2 { color:#fff; }
.seo-panel p { color:rgba(255,255,255,.86); font-size:18px; max-width:860px; }
.page-hero { background:linear-gradient(135deg, var(--navy), var(--navy-soft)); color:#fff; padding:78px 0; }
.page-hero h1 { max-width:980px; }
.page-hero p { max-width:820px; color:rgba(255,255,255,.88); font-size:20px; }
.page-hero-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:44px; align-items:center; }
.page-hero-grid img { height:360px; width:100%; object-fit:cover; border-radius:28px; box-shadow:var(--shadow); }
.service-list { display:grid; gap:18px; }
.service-row { display:grid; grid-template-columns:70px 1fr; gap:24px; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:30px; box-shadow:0 10px 30px rgba(0,29,74,.07); }
.service-row h2 { font-size:28px; margin-bottom:10px; }
.tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.tags span { background:rgba(0,29,74,.07); color:var(--navy); border-radius:999px; padding:7px 11px; font-weight:800; font-size:14px; }
.cta { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:38px; background:#fff; border-radius:28px; box-shadow:var(--shadow); }
.section-white .cta { background:var(--sand); }
.contact-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:34px; align-items:start; }
.contact-card, .contact-visual, .map-card { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:32px; box-shadow:var(--shadow); }
.contact-list { padding:0; margin:22px 0 0; list-style:none; display:grid; gap:12px; }
.contact-list a { color:var(--red); font-weight:900; }
.contact-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }
.contact-visual img { border-radius:18px; width:100%; height:auto; }
.map-card { min-height:280px; display:flex; flex-direction:column; justify-content:center; background:linear-gradient(135deg, rgba(0,29,74,.96), rgba(0,29,74,.78)); color:#fff; }
.map-card h3 { color:#fff; }
.small-note { color:rgba(255,255,255,.74); font-size:14px; }
.site-footer { background:var(--navy); color:#fff; padding:46px 0; }
.footer-grid { display:grid; gap:24px; align-items:center; }
.footer-logo { display:flex; align-items:center; gap:16px; font-weight:900; }
.footer-logo img { width:130px; border-radius:12px; background:#fff; }
.footer-logo small { color:rgba(255,255,255,.76); font-weight:600; }
.footer-contact, .footer-links { display:flex; flex-wrap:wrap; gap:14px 22px; }
.footer-contact a, .footer-links a { color:rgba(255,255,255,.88); font-weight:750; }
.footer-contact a:hover, .footer-links a:hover { color:#fff; text-decoration:underline; }
.site-footer small { color:rgba(255,255,255,.7); }
@media (max-width: 980px) {
  .brand-text { display:none; }
  .hero-grid, .split, .page-hero-grid, .contact-grid { grid-template-columns:1fr; }
  .hero-grid { min-height:auto; }
  .cards { grid-template-columns:1fr; }
  .work-grid, .work-grid.large { grid-template-columns:repeat(2, 1fr); }
  .photo-stack img, .photo-stack img:nth-child(2) { height:360px; transform:none; }
  .cta { align-items:flex-start; flex-direction:column; }
}
@media (max-width: 720px) {
  .topbar-inner { flex-direction:column; gap:2px; }
  .logo-link img { width:120px; }
  .mobile-toggle { display:block; }
  .main-nav { display:none; position:absolute; left:18px; right:18px; top:100%; background:#fff; border:1px solid var(--line); border-radius:18px; padding:10px; box-shadow:var(--shadow); flex-direction:column; align-items:stretch; }
  .main-nav.open { display:flex; }
  .main-nav a { text-align:center; }
  h1 { font-size:42px; }
  .section { padding:64px 0; }
  .hero-card img { height:310px; }
  .photo-stack { grid-template-columns:1fr; }
  .work-grid, .work-grid.large { grid-template-columns:1fr; }
  .service-row { grid-template-columns:1fr; padding:24px; }
  .contact-card, .contact-visual, .map-card { padding:24px; }
}