/* styles.css simplificado inspirado en referencia */
:root,
[data-theme="light"] {
  --color-bg: #f6f4f0;
  --color-surface: #fbfaf7;
  --color-surface-2: #f0ece6;
  --color-surface-alt: #e7e0d7;
  --color-divider: rgba(28, 28, 28, 0.1);
  --color-border: rgba(28, 28, 28, 0.12);
  --color-text: #171614;
  --color-text-muted: #5f5b55;
  --color-text-faint: #8a847c;
  --color-text-inverse: #f7f5f1;
  --color-primary: #151515;
  --color-primary-hover: #2a2a2a;
  --color-accent: #8a6a4b;
  --color-accent-soft: rgba(138, 106, 75, 0.16);
  --shadow-sm: 0 4px 14px rgba(0,0,0,0.06);
  --shadow-md: 0 18px 42px rgba(0,0,0,0.08);
  --radius-sm: 0.4rem;
  --radius-md: 0.75rem;
  --radius-lg: 1.1rem;
  --radius-xl: 1.6rem;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --text-xs: clamp(0.75rem, 0.72rem + 0.2vw, 0.85rem);
  --text-sm: clamp(0.875rem, 0.82rem + 0.3vw, 1rem);
  --text-base: clamp(1rem, 0.96rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.6vw, 1.45rem);
  --text-xl: clamp(1.6rem, 1.25rem + 1.2vw, 2.4rem);
  --text-2xl: clamp(2.4rem, 1.6rem + 3vw, 4.6rem);
  --content-default: 1180px;
  --font-display: 'Cabinet Grotesk', Inter, sans-serif;
  --font-body: 'General Sans', Inter, sans-serif;
  --transition-interactive: 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
[data-theme="dark"] {
  --color-bg: #121110;
  --color-surface: #191715;
  --color-surface-2: #22201d;
  --color-surface-alt: #272521;
  --color-divider: rgba(240, 240, 240, 0.12);
  --color-border: rgba(240, 240, 240, 0.14);
  --color-text: #f2eee9;
  --color-text-muted: #c7beb4;
  --color-text-faint: #9f968c;
  --color-text-inverse: #171614;
  --color-primary: #efe8df;
  --color-primary-hover: #ffffff;
  --color-accent: #d2b090;
  --color-accent-soft: rgba(210,176,144,0.18);
  --shadow-sm: 0 4px 18px rgba(0,0,0,0.28);
  --shadow-md: 0 22px 52px rgba(0,0,0,0.38);
}
*, *::before, *::after { box-sizing: border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  min-height:100vh;
  font-family:var(--font-body);
  font-size:var(--text-base);
  line-height:1.65;
  color:var(--color-text);
  background:var(--color-bg);
  overflow-x:hidden;
}
img, svg { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
button, input, textarea, select { font:inherit; color:inherit; }
h1,h2,h3,h4 { font-family:var(--font-display); line-height:1.05; letter-spacing:-0.03em; }
p { color:var(--color-text-muted); max-width:72ch; }
.container { width:min(calc(100% - 2rem), var(--content-default)); margin-inline:auto; }
.section { padding-block:clamp(var(--space-16), 10vw, var(--space-24)); }
.section-alt { background:var(--color-surface-2); }
.skip-link { position:absolute; left:var(--space-4); top:-4rem; z-index:200; background:var(--color-primary); color:var(--color-text-inverse); padding:var(--space-3) var(--space-4); border-radius:var(--radius-sm); }
.skip-link:focus { top:var(--space-4); }
.site-header { position:sticky; top:0; z-index:100; backdrop-filter:blur(16px); background:color-mix(in srgb, var(--color-bg) 86%, transparent); border-bottom:1px solid var(--color-divider); }
.header-inner { min-height:5.25rem; display:grid; grid-template-columns:auto 1fr auto; gap:var(--space-4); align-items:center; }
.brand { display:inline-flex; align-items:center; gap:var(--space-3); min-height:44px; font-size:var(--text-sm); letter-spacing:0.12em; text-transform:uppercase; }
.brand-mark { width:2.4rem; height:2.4rem; border-radius:999px; border:1px solid var(--color-border); display:grid; place-items:center; background:var(--color-surface); box-shadow:var(--shadow-sm); }
.nav-toggle { width:44px; height:44px; border-radius:999px; border:1px solid var(--color-border); background:var(--color-surface); display:inline-grid; place-items:center; color:var(--color-text); }
.main-nav { position:fixed; top:5.25rem; right:0; width:min(86vw, 360px); height:calc(100vh - 5.25rem); padding:var(--space-6); background:var(--color-surface-alt); border-left:1px solid var(--color-border); box-shadow:-18px 0 40px rgba(0,0,0,0.35); display:flex; flex-direction:column; gap:var(--space-2); transform:translateX(105%); opacity:0; pointer-events:none; transition:transform var(--transition-interactive), opacity var(--transition-interactive); }
.main-nav.is-open { transform:translateX(0); opacity:1; pointer-events:auto; }
.main-nav a { position:relative; min-height:44px; display:inline-flex; align-items:center; font-size:var(--text-sm); color:var(--color-text-muted); }
.main-nav a.is-active { color:var(--color-text); font-weight:600; }
.header-actions { display:flex; align-items:center; justify-content:flex-end; gap:var(--space-3); }
.theme-toggle { width:44px; height:44px; border-radius:999px; border:1px solid var(--color-border); background:var(--color-surface); display:inline-grid; place-items:center; }
.btn { min-height:48px; padding:0.85rem 1.25rem; border-radius:var(--radius-sm); display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2); font-size:var(--text-sm); font-weight:600; border:1px solid transparent; transition:transform var(--transition-interactive), background var(--transition-interactive), border-color var(--transition-interactive), color var(--transition-interactive), box-shadow var(--transition-interactive); }
.btn:hover { transform:translateY(-1px); }
.btn-primary { background:var(--color-primary); color:var(--color-text-inverse); box-shadow:var(--shadow-sm); }
.btn-primary:hover { background:var(--color-primary-hover); }
.btn-secondary { border-color:var(--color-border); background:transparent; color:var(--color-text); }
.btn-small { min-height:40px; padding:0.65rem 1rem; }
.eyebrow { margin-bottom:var(--space-3); font-size:var(--text-xs); font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color:var(--color-text-faint); display:inline-flex; align-items:center; gap:var(--space-2); }
.eyebrow::before { content:""; width:2.75rem; height:1px; background:var(--color-accent); }
.section-head { display:grid; gap:var(--space-3); margin-bottom:var(--space-8); }
.section-head h2 { max-width:14ch; font-size:var(--text-xl); }
.section-hero { padding-top:clamp(var(--space-12), 12vw, var(--space-24)); }
.hero-grid { display:grid; gap:var(--space-8); }
.hero-copy h1 { max-width:11ch; font-size:var(--text-2xl); margin-bottom:var(--space-5); }
.hero-text { font-size:var(--text-lg); max-width:58ch; }
.hero-actions { display:flex; flex-wrap:wrap; gap:var(--space-3); margin-top:var(--space-6); }
.hero-panel { background:linear-gradient(180deg, var(--color-surface), var(--color-surface-2)); border:1px solid var(--color-border); padding:var(--space-6); border-radius:var(--radius-lg); box-shadow:var(--shadow-md); display:grid; gap:var(--space-5); }
.hero-visual { display:grid; gap:var(--space-3); }
.hero-stat { padding-top:0; margin-top:0; }
.hero-stat + .hero-stat { padding-top:var(--space-5); margin-top:var(--space-5); border-top:1px solid var(--color-divider); }
.stat-label, .card-index { display:inline-block; margin-bottom:var(--space-2); font-size:var(--text-xs); font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:var(--color-text-faint); }
.hero-stat strong, .service-card h3 { display:block; margin-bottom:var(--space-2); font-size:var(--text-lg); color:var(--color-text); }
.text-link { display:inline-flex; align-items:center; gap:var(--space-2); font-size:var(--text-sm); font-weight:600; color:var(--color-text); }
.text-link::after { content:"→"; color:var(--color-accent); }
.eyebrow-list { list-style:none; display:flex; flex-wrap:wrap; gap:var(--space-2); margin-top:var(--space-4); }
.eyebrow-list li { min-height:32px; padding:0.4rem 0.75rem; border-radius:999px; border:1px solid var(--color-border); background:var(--color-surface); color:var(--color-text-muted); font-size:var(--text-sm); }
.media-placeholder { position:relative; min-height:190px; border-radius:var(--radius-md); border:1px dashed color-mix(in srgb, var(--color-accent) 50%, var(--color-border)); background:linear-gradient(135deg, color-mix(in srgb, var(--color-surface) 88%, var(--color-accent-soft)), var(--color-surface-2)); overflow:hidden; display:grid; place-items:center; text-align:center; padding:var(--space-4); }
.media-placeholder::before { content:""; position:absolute; inset:0; background:linear-gradient(135deg, transparent 20%, color-mix(in srgb, var(--color-accent-soft) 65%, transparent) 50%, transparent 80%); opacity:0.85; }
.media-placeholder::after { content:""; position:absolute; inset:12px; border-radius:calc(var(--radius-md) - 0.35rem); border:1px solid color-mix(in srgb, var(--color-border) 70%, transparent); }
.media-placeholder span { position:relative; z-index:1; max-width:18ch; font-size:var(--text-sm); font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--color-text-muted); }
.media-placeholder-hero { min-height:260px; }
.media-placeholder-card { min-height:152px; }
.media-caption { font-size:var(--text-sm); color:var(--color-text-faint); }
.services-grid { display:grid; gap:1px; background:var(--color-divider); border:1px solid var(--color-divider); border-radius:var(--radius-lg); overflow:hidden; }
.service-card { background:var(--color-bg); padding:var(--space-6); display:grid; gap:var(--space-3); }
.service-card .media-placeholder { margin-bottom:var(--space-3); }
.feature-grid { display:grid; gap:var(--space-4); }
.feature-card { padding:var(--space-6); border-radius:var(--radius-lg); border:1px solid var(--color-border); background:var(--color-surface); box-shadow:var(--shadow-sm); display:grid; gap:var(--space-3); }
.feature-card p { max-width:none; }
.feature-card .media-placeholder { min-height:140px; }
.image-grid { display:grid; gap:var(--space-4); grid-template-columns:repeat(1, minmax(0,1fr)); }
.image-tile { padding:var(--space-4); border-radius:var(--radius-lg); border:1px solid var(--color-border); background:var(--color-surface); box-shadow:var(--shadow-sm); display:grid; gap:var(--space-3); }
.image-tile strong { font-size:var(--text-base); color:var(--color-text); }
.image-tile p { max-width:none; font-size:var(--text-sm); }
.check-list { list-style:none; display:grid; gap:var(--space-2); margin-top:var(--space-3); }
.check-list li { position:relative; padding-left:1.1rem; color:var(--color-text-muted); }
.check-list li::before { content:"•"; position:absolute; left:0; color:var(--color-accent); }
.inline-cta { margin-top:var(--space-8); padding:var(--space-6); border-radius:var(--radius-lg); background:linear-gradient(135deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 72%, var(--color-accent))); color:var(--color-text-inverse); display:flex; flex-wrap:wrap; gap:var(--space-4); align-items:center; box-shadow:var(--shadow-md); }
.inline-cta h3, .inline-cta p { color:var(--color-text-inverse); }
.inline-cta .btn-primary { background:var(--color-accent); }
.quote-form { background:var(--color-surface); border-radius:var(--radius-lg); padding:var(--space-6); border:1px solid var(--color-border); box-shadow:var(--shadow-sm); }
.form-grid { display:grid; gap:var(--space-4); margin-bottom:var(--space-4); }
.form-field { display:grid; gap:var(--space-2); }
label { font-size:var(--text-sm); font-weight:500; color:var(--color-text); }
input[type="text"], select, textarea, input[type="file"] {
  min-height:44px; padding:0.6rem 0.75rem; border-radius:var(--radius-sm); border:1px solid var(--color-border); background:var(--color-bg); color:var(--color-text); }
textarea { min-height:120px; resize:vertical; }
.form-note { margin-top:var(--space-3); font-size:var(--text-sm); color:var(--color-text-muted); }
.form-actions { margin-top:var(--space-4); display:flex; flex-wrap:wrap; gap:var(--space-3); }
.site-footer { padding-top:var(--space-16); padding-bottom:var(--space-8); background:var(--color-primary); color:var(--color-text-inverse); }
.site-footer p, .site-footer h3, .site-footer .footer-links a { color:var(--color-text-inverse); }
.footer-grid { display:grid; gap:var(--space-8); padding-bottom:var(--space-8); border-bottom:1px solid rgba(255,255,255,0.14); }
.footer-links { list-style:none; display:grid; gap:var(--space-2); font-size:var(--text-sm); }
.footer-bottom { padding-top:var(--space-5); }
.footer-bottom p { font-size:var(--text-sm); color:rgba(255,255,255,0.75); }
.whatsapp-float { position:fixed; right:1rem; bottom:1rem; z-index:90; width:58px; height:58px; border-radius:999px; display:inline-grid; place-items:center; background:#ffffff; box-shadow:var(--shadow-md); }
.whatsapp-float svg { width:34px; height:34px; }
.reveal { opacity:0; transform:translateY(24px); transition:opacity 700ms cubic-bezier(0.16,1,0.3,1), transform 700ms cubic-bezier(0.16,1,0.3,1); }
.reveal.is-visible { opacity:1; transform:translateY(0); }
@media (min-width:720px) {
  .main-nav { position:static; top:auto; right:auto; width:auto; height:auto; padding:0; border-left:0; box-shadow:none; background:transparent; flex-direction:row; justify-content:center; gap:var(--space-4); transform:none; opacity:1; pointer-events:auto; }
  .nav-toggle { display:none; }
  .hero-grid { grid-template-columns:minmax(0,1.25fr) minmax(320px,0.8fr); align-items:end; }
  .feature-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .image-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .services-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .form-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .footer-grid { grid-template-columns:1.2fr 0.8fr 0.8fr; }
}
@media (min-width:1040px) {
  .feature-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .image-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .services-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}