/* Theme tokens */
:root{
  --primary:#5A1F2E; /* Bordó profundo */
  --ink:#1A1A1A;     /* Negro grafito */
  --accent:#C9A76A;  /* Dorado suave */
  --paper:#F5F2EC;   /* Marfil */
  --text:#4a4a4a;    
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;scroll-behavior:smooth}
html,body{overflow-x:hidden}
img{max-width:100%;height:auto}
body{
  font-family:'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:#111;
  line-height:1.65;
  font-size:16.5px;
}
.container{width:min(1100px,92%);margin:0 auto}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(26,26,26,.88);backdrop-filter:saturate(1.2) blur(8px);border-bottom:1px solid rgba(201,167,106,.25);box-shadow:0 6px 24px rgba(0,0,0,.18)}
.site-header .nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{font-family:'Playfair Display',serif;color:#fff;text-decoration:none;font-weight:600;letter-spacing:.5px}
/* Mobile nav toggle */
.nav-toggle{display:none;background:rgba(0,0,0,.25);border:1px solid rgba(201,167,106,.9);color:#fff;border-radius:10px;padding:10px 12px;cursor:pointer;line-height:1}
.nav-toggle:hover{background:rgba(201,167,106,.12)}
.primary-nav{display:flex;align-items:center}
.primary-nav{
  background:rgba(0,0,0,.35);
  border:1px solid rgba(201,167,106,.32);
  border-radius:14px;
  padding:6px 10px;
  box-shadow:0 10px 30px rgba(0,0,0,.22);
}
/* Topbar */
.topbar{background:#0f0f0f;color:#d9d9d9;border-bottom:1px solid rgba(201,167,106,.25)}
.topbar-inner{display:flex;align-items:center;gap:14px;padding:6px 0;font-size:.92rem}
.tb-item{opacity:.9}
.tb-dot{width:4px;height:4px;background:var(--accent);border-radius:50%;display:inline-block;margin:0 6px}
.tb-spacer{flex:1}
.topbar a{color:#e8e6e1;text-decoration:none}
.topbar a:hover{color:#fff}

/* Header shrink on scroll */
#siteHeader.scrolled{background:rgba(26,26,26,.93);box-shadow:0 10px 30px rgba(0,0,0,.2)}
#siteHeader.scrolled .nav{padding:10px 0}
nav a{color:#ddd;text-decoration:none;margin-left:18px;font-size:.95rem;position:relative}
.primary-nav a{
  margin-left:10px;
  padding:10px 10px;
  border-radius:12px;
  border:1px solid transparent;
  font-weight:600;
  letter-spacing:.15px;
  transition:background .2s ease, border-color .2s ease, color .2s ease;
}
.primary-nav a:hover{background:rgba(255,255,255,.06);border-color:rgba(201,167,106,.22)}
.primary-nav a:focus-visible{background:rgba(201,167,106,.14);border-color:rgba(201,167,106,.55)}
.primary-nav a.is-active{background:rgba(201,167,106,.18);border-color:rgba(201,167,106,.58);color:#fff}
.primary-nav a.btn{padding:8px 12px}
nav a:after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:linear-gradient(90deg,transparent,rgba(201,167,106,.8),transparent);transform:scaleX(0);transform-origin:center;transition:transform .35s ease}
nav a:hover:after{transform:scaleX(1)}
nav a:hover{color:#fff}
.btn{display:inline-block;padding:12px 20px;border-radius:12px;text-decoration:none;font-weight:600;position:relative;overflow:hidden}
.btn .icon{margin-right:8px;vertical-align:-3px}
.btn-primary{background:linear-gradient(90deg, rgba(201,167,106,1) 0%, rgba(245,242,236,1) 50%, rgba(201,167,106,1) 100%);background-size:200% 100%;background-position:0% 50%;color:#1a1a1a;box-shadow:0 10px 26px rgba(201,167,106,.28);transition:transform .15s ease,filter .2s ease,box-shadow .2s ease, background-position .35s ease}
.btn-primary:hover{filter:brightness(.98);background-position:100% 50%}
.btn-primary::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(120deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.35) 50%, rgba(255,255,255,0) 70%);transform:translateX(-120%);transition:transform .5s ease}
.btn-primary:hover::after{transform:translateX(120%)}
.btn-secondary{background:transparent;border:1.5px solid var(--accent);color:#e9e6df;transition:background .2s ease,color .2s ease, box-shadow .2s ease, border-color .2s ease}
.btn-secondary:hover{background:rgba(201,167,106,.12);color:#fff;box-shadow:0 8px 20px rgba(201,167,106,.22);border-color:#e7c98a}
.btn-contrast{background:rgba(255,255,255,.06);border:1.5px solid rgba(201,167,106,.5);color:#fff;backdrop-filter:saturate(1.1) blur(1px)}
.btn-contrast:hover{background:rgba(201,167,106,.16);color:#fff;box-shadow:0 10px 24px rgba(201,167,106,.24)}
.btn-accent-outline{background:transparent;border:2px solid var(--accent);color:var(--accent);transition:background .25s ease, color .25s ease, box-shadow .25s ease}
.btn-accent-outline:hover{background:var(--accent);color:#1a1a1a;box-shadow:0 12px 28px rgba(201,167,106,.3)}
.btn-accent-outline::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(120deg, rgba(255,255,255,0) 40%, rgba(255,255,255,.28) 50%, rgba(255,255,255,0) 60%);transform:translateX(-120%);transition:transform .5s ease}
.btn-accent-outline:hover::after{transform:translateX(120%)}
.btn-outline{border:1px solid var(--accent);color:#ddd;padding:8px 12px;border-radius:6px}

/* Hero */
.hero{position:relative;color:#fff;min-height:72vh;display:grid;place-items:center;background:#000;overflow:hidden}
.hero picture img{position:absolute;inset:0;width:100%;height:112%;object-fit:cover;opacity:.5;transform:translateY(0);will-change:transform;filter:contrast(1.05) saturate(1.02);z-index:0;pointer-events:none}
.hero .overlay{position:absolute;inset:0;background:
  radial-gradient(60% 40% at 50% 0%, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 60%),
  linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(90,31,46,.65) 100%);
  z-index:1; pointer-events:none}
.hero-inner{position:relative;text-align:center;z-index:2}
.hero h1{font-family:'Playfair Display',serif;font-size:clamp(2.4rem,5.4vw,3.9rem);margin:0 0 6px;letter-spacing:.2px;text-shadow:0 2px 14px rgba(0,0,0,.35)}
.hero .location{opacity:.9}
.hero .tagline{max-width:760px;margin:12px auto 22px;color:#ececec}
.hero .cta .btn{margin:6px}
.hero .cta .btn{transform:translateZ(0);transition:transform .15s ease, box-shadow .2s ease}
.hero .cta .btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(201,167,106,.28)}

/* Hero entrance animations */
.hero-animate .h1-appear{animation:fadeUp .7s ease both .05s}
.hero-animate .tagline-appear{animation:fadeUp .75s ease both .15s}
.hero-animate .cta-appear{animation:fadeUp .8s ease both .25s}
@keyframes fadeUp{from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none}}

/* Sections */
.section{padding:84px 0;background:#131313;color:#e9e9e9}
.section.paper{background:var(--paper);color:var(--ink)}
.section h2{font-family:'Playfair Display',serif;color:var(--ink);margin:0 0 10px}
.section:not(.paper) h2{color:#fff}
.separator{height:2px;background:linear-gradient(90deg, rgba(201,167,106,0) 0%, rgba(201,167,106,.95) 35%, rgba(201,167,106,0) 100%);width:120px;margin:14px 0 26px;border-radius:2px}
.grid-2{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:center}
.identity-image{width:100%;height:auto;border-radius:14px;box-shadow:0 16px 44px rgba(0,0,0,.22);aspect-ratio:4/3;object-fit:contain;background:linear-gradient(180deg,#fff,#f7f4ee);border:1px solid rgba(201,167,106,.28);padding:12px;transition:transform .35s ease, box-shadow .35s ease}
.identity-image-wrap{position:relative}
.identity-image-wrap::after{content:"";position:absolute;right:14px;top:14px;width:46px;height:6px;background:var(--accent);border-radius:4px;opacity:.85}
.identity-image:hover{transform:translateY(-4px) rotate(-.4deg) scale(1.01);box-shadow:0 22px 54px rgba(0,0,0,.28)}

@media (hover: none){
  .card:hover{transform:none;box-shadow:0 8px 22px rgba(0,0,0,.08)}
  .identity-image:hover{transform:none;box-shadow:0 16px 44px rgba(0,0,0,.22)}
  .photo-frame:hover{transform:none;box-shadow:0 10px 26px rgba(0,0,0,.12)}
}

/* Mini galería de identidad */
.image-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:12px}
.photo-frame{width:100%;height:100%;object-fit:cover;border-radius:12px;border:1px solid rgba(201,167,106,.28);background:linear-gradient(180deg,#fff,#f7f4ee);box-shadow:0 10px 26px rgba(0,0,0,.12);transition:transform .25s ease, box-shadow .25s ease}
.photo-frame:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(0,0,0,.18)}
.photo-frame.tall{aspect-ratio:4/3}
.photo-frame.wide{aspect-ratio:16/9}

/* Services */
.services-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:8px}
.card{background:var(--paper);color:var(--ink);padding:22px;border-radius:14px;border:1px solid rgba(201,167,106,.35);box-shadow:0 8px 22px rgba(0,0,0,.08);transition:transform .18s ease, box-shadow .2s ease}
.card:hover{transform:translateY(-6px);box-shadow:0 16px 38px rgba(0,0,0,.14)}
.card h3{margin:0 0 8px;font-family:'Playfair Display',serif}

/* 3-column grid used in inline content blocks (overridable on mobile) */
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem}

/* Contact */
.contact-list{list-style:none;padding:0;margin:0 0 18px}
.contact-list li{margin:8px 0}
.contact-form{background:var(--paper);padding:22px;border:1px solid rgba(201,167,106,.28);border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.06)}
.contact-form{scroll-margin-top:90px}
.contact-form.is-highlight{animation:highlightPulse 1.6s ease 1}
@keyframes highlightPulse{0%{box-shadow:0 0 0 rgba(201,167,106,0)}30%{box-shadow:0 0 0 6px rgba(201,167,106,.25)}60%{box-shadow:0 0 0 0 rgba(201,167,106,0)}100%{box-shadow:0 10px 30px rgba(0,0,0,.06)}}
.form-row{display:flex;flex-direction:column;margin-bottom:12px}
.form-row label{font-size:.95rem;margin-bottom:6px;color:#2a2a2a;font-weight:600}
.section.paper .form-row label{color:#1f1f1f}
#contact-form label[for="captcha"]{color:var(--primary);font-weight:700}
.form-row input,.form-row textarea{padding:10px 12px;border-radius:8px;border:1px solid #d9d6cf;background:#fff;font:inherit;transition:border-color .2s ease, box-shadow .2s ease}
.form-row input:focus,.form-row textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(201,167,106,.2);outline:0}
.form-row input[aria-invalid="true"],.form-row textarea[aria-invalid="true"]{border-color:#b42318;box-shadow:0 0 0 3px rgba(180,35,24,.12)}
.form-row label[for]{transition:color .2s ease}
.form-row input[aria-invalid="true"] ~ .form-hint,
.form-status.is-error{color:#b42318}
.form-status{margin:10px 0 0;font-size:.95rem}
.form-status.is-success{color:#0b6b2b}
.form-status.is-error{color:#b42318}
.form-hint{margin:10px 0 0;font-size:.9rem;opacity:.85}
.map-wrap iframe{width:100%;height:340px;border:0;margin-top:22px;border-top:1px solid rgba(201,167,106,.35)}

/* Footer */
.site-footer{background:var(--primary);color:var(--paper);padding:30px 0;text-align:center;position:relative}
.site-footer::before{
  content:"";
  position:absolute; left:0; right:0; top:-72px; height:72px; pointer-events:none;
  /* Suaviza el paso desde fondo oscuro a footer primario */
  background:linear-gradient(180deg, rgba(19,19,19,0) 0%, var(--primary) 100%);
}
.footer-line{height:1px;background:var(--accent);width:100%;opacity:.7;margin-bottom:16px}
.sm{opacity:.85;font-size:.9rem}

/* Reveal on scroll (accesible: visible por defecto si falla JS) */
.reveal{opacity:1;transform:none;transition:opacity .65s ease, transform .65s ease}
.js .reveal{opacity:0;transform:translateY(14px)}
.js .reveal.is-visible{opacity:1;transform:none}

/* To top button */
.to-top{position:fixed;right:18px;bottom:18px;background:rgba(26,26,26,.8);color:#fff;border:1px solid rgba(201,167,106,.6);border-radius:999px;width:44px;height:44px;display:grid;place-items:center;cursor:pointer;backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .25s ease, transform .25s ease}
.to-top.show{opacity:1;pointer-events:auto}
.to-top:hover{transform:translateY(-2px)}

/* Motion preferences */
@media (prefers-reduced-motion: reduce){
  html,body{scroll-behavior:auto}
  *, *::before, *::after{transition:none !important;animation:none !important}
}

/* Slider */
.slider{position:relative}
.slides{display:grid;grid-auto-flow:column;grid-auto-columns:100%;overflow:hidden;scroll-behavior:smooth}
.slide{display:grid;place-items:center;text-align:center;padding:18px 24px;opacity:.62;transition:opacity .35s ease}
.slide blockquote{font-size:clamp(1rem,2vw,1.25rem);font-style:italic;line-height:1.6;color:var(--ink)}
.slide figcaption{margin-top:8px;opacity:.8}
.slide.is-active{opacity:1}
.slide-btn{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:999px;border:1px solid rgba(201,167,106,.6);background:#fff;color:#1a1a1a;cursor:pointer}
.slide-btn:hover{background:#f7f4ee}
.slide-btn.prev{left:-10px}
.slide-btn.next{right:-10px}

/* Transiciones suaves entre secciones (degradados) */
.section.gradient-top::before,
.section.gradient-bottom::after{
  content:"";
  position:absolute;
  left:0; right:0;
  height:72px;
  pointer-events:none;
}
.section.gradient-top{ position:relative }
.section.gradient-top::before{
  top:-72px;
  /* de fondo oscuro a papel */
  background:linear-gradient(180deg, rgba(19,19,19,0.9) 0%, rgba(19,19,19,0) 100%);
}
.section.gradient-bottom{ position:relative }
.section.gradient-bottom::after{
  bottom:-72px;
  /* de papel a oscuro */
  background:linear-gradient(180deg, rgba(245,242,236,0) 0%, rgba(245,242,236,0.95) 100%);
}
.section.dark-fade{ position:relative }
.section.dark-fade::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-72px; height:72px;
  background:linear-gradient(180deg, rgba(19,19,19,0) 0%, rgba(19,19,19,0.92) 100%);
  pointer-events:none;
}

/* Opción: intensificar el degradado cuando se agrega esta clase adicional al section */
.section.gradient-strong.gradient-top::before{
  background:linear-gradient(180deg, rgba(19,19,19,0.98) 0%, rgba(19,19,19,0) 100%);
}
.section.gradient-strong.gradient-bottom::after{
  background:linear-gradient(180deg, rgba(245,242,236,0) 0%, rgba(245,242,236,1) 100%);
}
.section.gradient-strong.dark-fade::after{
  background:linear-gradient(180deg, rgba(19,19,19,0) 0%, rgba(19,19,19,1) 100%);
}

/* Floating WhatsApp */
.wa-float{position:fixed;right:20px;bottom:78px;background:#25D366;border:0;color:#fff;width:54px;height:54px;border-radius:999px;display:grid;place-items:center;box-shadow:0 10px 24px rgba(0,0,0,.25);text-decoration:none;opacity:0;transform:translateY(8px);transition:opacity .25s ease, transform .25s ease}
.wa-float.show{opacity:1;transform:none}

/* Floating Call */
.call-float{position:fixed;right:20px;bottom:138px;background:#0EA5E9;border:0;color:#fff;width:54px;height:54px;border-radius:999px;display:grid;place-items:center;box-shadow:0 10px 24px rgba(0,0,0,.25);text-decoration:none;opacity:0;transform:translateY(8px);transition:opacity .25s ease, transform .25s ease}
.call-float.show{opacity:1;transform:none}

/* Accesibilidad: foco visible */
.btn:focus-visible,
nav a:focus-visible,
.topbar a:focus-visible,
.wa-float:focus-visible,
.to-top:focus-visible,
input:focus-visible,
textarea:focus-visible{
  outline:3px solid rgba(201,167,106,.85);
  outline-offset:3px;
}

/* Responsive */
@media (max-width:900px){
  .grid-2{grid-template-columns:1fr;gap:22px}
  .services-grid{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
  .nav-toggle{display:inline-block}
  .primary-nav{position:fixed;top:0;right:0;bottom:0;width:min(82vw,340px);background:linear-gradient(180deg, rgba(12,12,12,0.995) 0%, rgba(6,6,6,0.995) 100%);border-left:1px solid rgba(201,167,106,.38);padding:92px 16px 18px;display:flex;flex-direction:column;gap:10px;transform:translateX(100%);transition:transform .28s ease;box-shadow:-18px 0 54px rgba(0,0,0,.55);border-radius:0}
  .primary-nav a{margin:0;font-size:1rem;width:100%;padding:12px 12px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06)}
  .primary-nav a + a{margin-top:2px}
  .primary-nav a:hover{background:rgba(201,167,106,.10);border-color:rgba(201,167,106,.22)}
  .primary-nav a.is-active{background:rgba(201,167,106,.18);border-color:rgba(201,167,106,.58)}
  .primary-nav .btn-outline{align-self:stretch;text-align:center}
  .primary-nav.is-open{transform:none}
  body.noscroll{overflow:hidden}
  body.noscroll::before{content:"";position:fixed;inset:0;background:
    radial-gradient(90% 70% at 50% 20%, rgba(90,31,46,.35) 0%, rgba(0,0,0,0) 55%),
    linear-gradient(180deg, rgba(0,0,0,.90) 0%, rgba(0,0,0,.82) 100%);
    backdrop-filter:blur(3px);
    z-index:40}
  body.noscroll .nav-toggle{background:rgba(0,0,0,.55);box-shadow:0 10px 28px rgba(0,0,0,.35)}
  .site-header{z-index:50}
  .primary-nav{z-index:60}
  .nav-toggle{z-index:61}
}

@media (max-width:600px){
  .topbar-inner{flex-wrap:wrap;gap:10px}
  .tb-dot{display:none}
  .tb-spacer{display:none}
  .site-header .nav{padding:12px 0}
  .brand{font-size:.98rem;line-height:1.2;max-width:70vw}
  .hero{min-height:72svh}
  .hero .tagline{margin:10px auto 16px}
  .hero .cta{display:flex;flex-direction:column;align-items:stretch}
  .hero .cta .btn{width:100%;margin:6px 0}
  .section{padding:64px 0}
  .slide-btn.prev{left:6px}
  .slide-btn.next{right:6px}
  .wa-float{right:16px;bottom:76px}
  .call-float{right:16px;bottom:136px}
  .to-top{right:16px;bottom:16px}
}

@media (max-width:420px){
  .container{width:min(1100px,90%)}
  .hero h1{letter-spacing:0}
  .btn{padding:12px 16px}
}