/* 3DhomeRD — Colores de marca: Rojo + Azul Marino */
:root {
  --radius: 0.5rem;
  --brand-red: #B23A2B;
  --brand-red-hover: #8F2E22;
  --brand-navy: #1A2A4A;
  --brand-navy-light: #2A3F6A;
  --brand-cream: #F5F0EB;
  --background: #FAF8F6;
  --foreground: #1A1A2E;
  --card: #FFFFFF;
  --card-foreground: #1A1A2E;
  --primary: #B23A2B;
  --primary-foreground: #FFFFFF;
  --secondary: #1A2A4A;
  --secondary-foreground: #FFFFFF;
  --muted: #EFEDEA;
  --muted-foreground: #5A5A6E;
  --border: #E0DDD8;
  --ring: #B23A2B;
  --font-display: "Bebas Neue", "Barlow Condensed", system-ui, sans-serif;
  --font-body: "Barlow", "Inter", system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; border-color: var(--border); }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  min-height: 100dvh;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
h1, h2, h3, .font-display { font-family: var(--font-display); letter-spacing: 0.02em; font-weight: 400; }

.container-x { max-width: 80rem; margin-inline: auto; padding-inline: 1.25rem; }
.grid { display: grid; }
.flex { display: flex; }
.hidden { display: none; }
.section { padding: 5rem 0; }
.section-alt { background: var(--card); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }

.header {
  position: sticky; top: 0; z-index: 40;
  border-bottom: 1px solid rgba(26, 42, 74, 0.08);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
}
.header-inner { display:flex; align-items:center; justify-content:space-between; height:4rem; }
.brand { display:flex; align-items:center; gap:.625rem; }
.brand img { height:2.5rem; width:2.5rem; border-radius:.375rem; object-fit:cover; }
.brand-text { font-family: var(--font-display); font-size:1.5rem; letter-spacing:.06em; }
.brand-text .red { color: var(--brand-red); }
.brand-text .navy { color: var(--brand-navy); }

.nav-desktop { display:none; gap:1.75rem; align-items:center; }
.nav-desktop a { font-size:.85rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color: var(--brand-navy); opacity:0.7; transition: opacity .2s, color .2s; }
.nav-desktop a:hover { opacity:1; color: var(--brand-red); }

.btn { display:inline-flex; align-items:center; gap:.5rem; border-radius:.5rem; padding:.75rem 1.5rem; font-weight:700; transition: filter .2s, transform .2s, background .2s, color .2s; }
.btn-primary { background: var(--brand-red); color: var(--primary-foreground); box-shadow: 0 4px 12px rgba(178, 58, 43, 0.25); }
.btn-primary:hover { background: var(--brand-red-hover); transform: translateY(-2px); }
.btn-outline { border:2px solid var(--brand-navy); color: var(--brand-navy); background: transparent; }
.btn-outline:hover { background: var(--brand-navy); color: var(--secondary-foreground); }
.btn-sm { padding:.5rem 1rem; font-size:.85rem; }

.menu-btn { display:inline-flex; border:1px solid var(--border); border-radius:.5rem; padding:.5rem; }
.mobile-nav { display:none; border-top:1px solid var(--border); }
.mobile-nav.open { display:block; }
.mobile-nav nav { display:flex; flex-direction:column; padding:.75rem 0; }
.mobile-nav a { padding:.5rem 0; font-weight:700; text-transform:uppercase; letter-spacing:.05em; font-size:.85rem; color: var(--brand-navy); }
.mobile-nav .btn { margin-top:.5rem; justify-content:center; }

.header-cta { display:none; }

.hero { position:relative; overflow:hidden; padding: 5rem 0 5rem; }
.hero-bg {
  position:absolute; inset:0; pointer-events:none;
  background-image:
    radial-gradient(circle at 20% 10%, rgba(178, 58, 43, 0.08) 0%, transparent 40%),
    radial-gradient(circle at 80% 90%, rgba(26, 42, 74, 0.10) 0%, transparent 45%);
}
.hero-grid { display:grid; gap:3rem; align-items:center; position:relative; }
.pill { display:inline-flex; align-items:center; gap:.5rem; border:1px solid rgba(178, 58, 43, 0.25); background: rgba(178, 58, 43, 0.08); padding:.25rem .75rem; border-radius:9999px; font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color: var(--brand-red); }
.pill .dot { width:.375rem; height:.375rem; border-radius:9999px; background: var(--brand-red); }
.hero h1 { margin-top:1.25rem; font-size:3rem; line-height:.95; }
.hero h1 .red { color: var(--brand-red); }
.hero h1 .navy { color: var(--brand-navy); }
.hero p.lead { margin-top:1.5rem; max-width:36rem; color: var(--muted-foreground); font-size:1.125rem; }
.hero-ctas { margin-top:2rem; display:flex; flex-wrap:wrap; gap:.75rem; }
.stats { margin-top:2.5rem; display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; max-width:28rem; }
.stat-n { font-family: var(--font-display); font-size:1.875rem; color: var(--brand-red); }
.stat-l { font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; color: var(--muted-foreground); }

.hero-visual { position:relative; }
.hero-glow { position:absolute; inset:-1.5rem; border-radius:1.5rem; background: linear-gradient(135deg, rgba(178, 58, 43, 0.15), transparent, rgba(26, 42, 74, 0.20)); filter: blur(32px); }
.hero-img { position:relative; aspect-ratio:1/1; overflow:hidden; border-radius:1rem; border:2px solid rgba(26, 42, 74, 0.15); background: var(--card); box-shadow: 0 20px 40px rgba(0,0,0,.10); }
.hero-img img { width:100%; height:100%; object-fit:cover; }
.hero-badge { position:absolute; bottom:-1.5rem; left:-1.5rem; background: var(--card); border:1px solid var(--border); border-radius:.75rem; padding:1rem; box-shadow: 0 10px 30px rgba(0,0,0,.10); display:none; }
.hero-badge p:first-child { font-family: var(--font-display); font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; color: var(--muted-foreground); }
.hero-badge p:last-child { font-family: var(--font-display); font-size:1.5rem; color: var(--brand-navy); }

.pos-banner { background: var(--brand-navy); color: var(--secondary-foreground); padding: 2.5rem 0; }
.pos-banner-inner { display:flex; flex-direction:column; align-items:center; gap:1.25rem; text-align:center; }
.pos-banner-icon { font-size:3rem; }
.pos-banner h2 { font-size:2rem; font-family: var(--font-display); letter-spacing:.02em; }
.pos-banner p { max-width:36rem; opacity:0.85; }
.pos-banner .btn-primary { background: var(--brand-red); }
.pos-banner .btn-primary:hover { background: var(--brand-red-hover); }

.sh { max-width: 42rem; margin-inline:auto; text-align:center; }
.sh.left { margin-inline:0; text-align:left; }
.sh .kicker { font-family: var(--font-display); font-size:.85rem; text-transform:uppercase; letter-spacing:.3em; color: var(--brand-red); }
.sh h2 { margin-top:.5rem; font-size:2.25rem; }
.sh p { margin-top:1rem; color: var(--muted-foreground); }
.sh.invert p { color: rgba(255,255,255,.7); }

.services-grid { margin-top:3rem; display:grid; gap:1.25rem; grid-template-columns: 1fr; }
.service-card { position:relative; overflow:hidden; border:1px solid var(--border); background: var(--background); border-radius:.75rem; padding:1.5rem; transition: transform .2s, border-color .2s, box-shadow .2s; }
.service-card:hover { transform: translateY(-4px); border-color: var(--brand-red); box-shadow: 0 10px 25px rgba(0,0,0,.06); }
.service-icon { display:inline-flex; align-items:center; justify-content:center; height:3rem; width:3rem; border-radius:.5rem; background: rgba(178, 58, 43, 0.10); font-size:1.5rem; margin-bottom:1rem; }
.service-card h3 { font-size:1.25rem; color: var(--brand-navy); }
.service-card p { margin-top:.5rem; font-size:.875rem; color: var(--muted-foreground); }
.service-card::after { content:""; position:absolute; inset-inline:0; bottom:0; height:3px; background: var(--brand-red); transform: scaleX(0); transform-origin:left; transition: transform .3s; }
.service-card:hover::after { transform: scaleX(1); }

.about-grid { display:grid; gap:3rem; align-items:center; }
.about-img { position:relative; aspect-ratio: 4/5; overflow:hidden; border-radius:1rem; border:1px solid var(--border); }
.about-img img { width:100%; height:100%; object-fit:cover; }
.mvv { margin-top:2rem; display:grid; gap:1.5rem; }
.mvv-item { border-left:4px solid var(--brand-red); background: rgba(178, 58, 43, 0.04); border-radius:.5rem; padding:1rem; }
.mvv-item h3 { font-size:1.125rem; color: var(--brand-navy); }
.mvv-item p { margin-top:.25rem; font-size:.875rem; color: var(--muted-foreground); }

.gallery-section { background: var(--brand-navy); color: var(--secondary-foreground); }
.gallery-grid { margin-top:3rem; display:grid; gap:1rem; grid-template-columns: 1fr; }
.gal-fig { position:relative; overflow:hidden; border-radius:.75rem; border:1px solid rgba(255,255,255,.1); }
.gal-fig img { height:24rem; width:100%; object-fit:cover; transition: transform .5s; }
.gal-fig:hover img { transform: scale(1.05); }
.gal-fig figcaption { position:absolute; inset-inline:0; bottom:0; padding:1rem; font-size:.875rem; background: linear-gradient(to top, rgba(26, 42, 74, 0.90), transparent); }

.process-list { list-style:none; margin-top:3rem; display:grid; gap:1.5rem; grid-template-columns: 1fr; }
.process-item { position:relative; border:1px solid var(--border); background: var(--background); border-radius:.75rem; padding:1.5rem; }
.process-item .n { font-family: var(--font-display); font-size:3rem; color: rgba(178, 58, 43, 0.25); }
.process-item h3 { margin-top:.5rem; font-size:1.125rem; color: var(--brand-navy); }
.process-item p { margin-top:.25rem; font-size:.875rem; color: var(--muted-foreground); }

.tst-grid { margin-top:3rem; display:grid; gap:1.25rem; grid-template-columns: 1fr; }
.tst { display:flex; flex-direction:column; border:1px solid var(--border); background: var(--card); border-radius:.75rem; padding:1.5rem; height:100%; }
.tst .stars { color: var(--brand-red); margin-bottom:.75rem; }
.tst p { flex:1; font-size:.875rem; }
.tst footer { margin-top:1rem; font-family: var(--font-display); font-size:.875rem; text-transform:uppercase; letter-spacing:.08em; color: var(--brand-navy); }

.faq-wrap { display:grid; gap:2.5rem; }
.faq-list { border:1px solid var(--border); background: var(--background); border-radius:.75rem; overflow:hidden; }
.faq-list details { padding:1.25rem; border-bottom:1px solid var(--border); }
.faq-list details:last-child { border-bottom:none; }
.faq-list summary { display:flex; align-items:center; justify-content:space-between; gap:1rem; cursor:pointer; list-style:none; font-weight:600; }
.faq-list summary::-webkit-details-marker { display:none; }
.faq-list summary .plus { color: var(--brand-red); font-size:1.5rem; line-height:1; transition: transform .2s; }
.faq-list details[open] summary .plus { transform: rotate(45deg); }
.faq-list details p { margin-top:.75rem; font-size:.875rem; color: var(--muted-foreground); }

.contact-section { background: var(--brand-navy); color: var(--secondary-foreground); }
.contact-grid { display:grid; gap:2.5rem; }
.contact-info { margin-top:2rem; display:grid; gap:1rem; font-size:.875rem; list-style:none; }
.contact-info strong { font-family: var(--font-display); text-transform:uppercase; letter-spacing:.08em; color: var(--brand-red); margin-right:.25rem; }
.contact-form { border:1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.05); backdrop-filter: blur(10px); border-radius:1rem; padding:1.5rem; }
.field { display:grid; gap:.25rem; }
.field label { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; }
.field input, .field textarea {
  width:100%; border:1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.08);
  padding:.5rem .75rem; border-radius:.5rem; font-size:.875rem; color:inherit; font-family:inherit; outline:none;
}
.field input::placeholder, .field textarea::placeholder { color: rgba(255,255,255,.4); }
.field input:focus, .field textarea:focus { border-color: var(--brand-red); box-shadow: 0 0 0 3px rgba(178, 58, 43, 0.30); }
.contact-form .fields { display:grid; gap:1rem; }
.contact-form button[type=submit] { background: var(--brand-red); color: var(--primary-foreground); padding:.75rem 1.25rem; border-radius:.5rem; font-weight:700; }
.contact-form button[type=submit]:hover { background: var(--brand-red-hover); }
.legal-note { font-size:.7rem; color: rgba(255,255,255,.5); }
.legal-note a { color: var(--brand-red); text-decoration: underline; }

.footer { border-top:1px solid var(--border); background: var(--background); }
.footer-grid { display:grid; gap:2.5rem; padding: 3.5rem 0; grid-template-columns: 1fr; }
.footer h3 { font-family: var(--font-display); font-size:.85rem; text-transform:uppercase; letter-spacing:.08em; color: var(--brand-navy); }
.footer ul { list-style:none; margin-top:.75rem; display:grid; gap:.5rem; font-size:.875rem; color: var(--muted-foreground); }
.footer a:hover { color: var(--brand-red); }
.footer-copy { border-top:1px solid var(--border); padding: 1rem 0; text-align:center; font-size:.75rem; color: var(--muted-foreground); }

.fab-wa {
  position:fixed; bottom:1.25rem; right:1.25rem; z-index:40;
  display:inline-flex; align-items:center; justify-content:center;
  height:3.5rem; width:3.5rem; border-radius:9999px;
  background: var(--brand-red); color: var(--primary-foreground);
  box-shadow: 0 15px 35px rgba(178, 58, 43, 0.35);
  transition: transform .2s;
}
.fab-wa:hover { transform: scale(1.1); }

.legal-header { border-bottom:1px solid var(--border); }
.legal-header .header-inner { justify-content:space-between; }
.legal-main { display:grid; gap:2.5rem; padding: 4rem 0; grid-template-columns: 1fr; }
.legal-aside { border:1px solid var(--border); background: var(--card); border-radius:.75rem; padding:1rem; height:max-content; }
.legal-aside p.title { font-family: var(--font-display); font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; color: var(--brand-red); margin-bottom:.75rem; }
.legal-aside ul { list-style:none; display:grid; gap:.4rem; font-size:.875rem; }
.legal-aside a { color: var(--muted-foreground); }
.legal-aside a:hover { color: var(--brand-red); }
.legal-content { display:grid; gap:3rem; }
.legal-content h1 { font-size:2.5rem; }
.legal-content section { scroll-margin-top: 6rem; }
.legal-content h2 { font-size:1.5rem; color: var(--brand-navy); }
.legal-content p, .legal-content li { margin-top:.75rem; color: var(--muted-foreground); line-height:1.7; }
.legal-content ul { padding-left:1.25rem; }

.skip { position:absolute; left:-9999px; top:0; background: var(--brand-red); color: var(--primary-foreground); padding:.5rem 1rem; z-index:100; }
.skip:focus { left:0; }

@media (min-width: 640px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .tst-grid { grid-template-columns: repeat(2, 1fr); }
  .mvv { grid-template-columns: repeat(3, 1fr); }
  .hero-badge { display:block; }
  .pos-banner-inner { flex-direction:row; text-align:left; justify-content:space-between; }
}
@media (min-width: 768px) {
  .nav-desktop { display:flex; }
  .header-cta { display:inline-flex; }
  .menu-btn { display:none; }
  .hero { padding: 7rem 0; }
  .hero-grid { grid-template-columns: 1fr 1fr; }
  .hero h1 { font-size: 4rem; }
  .sh h2 { font-size: 3rem; }
  .about-grid { grid-template-columns: 2fr 3fr; }
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
  .process-list { grid-template-columns: repeat(4, 1fr); }
  .faq-wrap { grid-template-columns: 1fr 2fr; }
  .contact-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: repeat(4, 1fr); }
  .legal-main { grid-template-columns: 240px 1fr; }
  .legal-aside { position:sticky; top:5rem; }
}
@media (min-width: 1024px) {
  .services-grid { grid-template-columns: repeat(3, 1fr); }
  .tst-grid { grid-template-columns: repeat(4, 1fr); }
  .hero h1 { font-size: 4.5rem; }
}