/* =====================================================================
   CERRAJERÍA EL DIEZ — hoja de estilos (optimizada)
   Las fuentes ahora se cargan desde el HTML (sin @import bloqueante).
   ===================================================================== */

/* ---------- Tokens ---------- */
:root{
  --graphite:       #1C1B19;
  --graphite-soft:  #2C2A26;
  --graphite-line:  rgba(28,27,25,0.14);

  --paper:          #F3EEE4;
  --paper-dim:      #E9E1CF;
  --paper-line:     rgba(28,27,25,0.10);

  --brass:          #EAAE2A;
  --brass-deep:     #BA8612;
  --brass-light:    #EBC87B;

  --steel:          #45585A;
  --steel-light:    #7C979A;

  --ember:          #9B3A2E;
  --ember-light:    #C4574A;

  --white:          #FFFDF8;

  --font-display: 'Anton', 'Arial Narrow', Impact, sans-serif;
  --font-body:    'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --gap: clamp(1.25rem, 2vw, 2rem);
  --section-pad: clamp(4rem, 8vw, 7rem);
  --radius: 4px;
  --shadow-soft: 0 12px 32px rgba(28,27,25,0.14);
  --shadow-lift: 0 18px 44px rgba(28,27,25,0.20);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top: 84px; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--graphite);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
main{ display:block; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ font-family:var(--font-display); margin:0; font-weight:400; line-height:1.16; letter-spacing:.01em; color:var(--graphite); }
h3{ text-transform:uppercase; letter-spacing:.03em; }
p{ margin:0; }
button{ font-family:inherit; }

.container-xl{ max-width:1240px; margin-inline:auto; padding-inline: clamp(1.25rem, 4vw, 2.5rem); }

.services-grid > *, .brand-panels > *, .mode-grid > *, .about-grid > *,
.feature-split > *, .contact-grid > *, .footer-grid > *, .form-row > *,
.bp-modes > *, .hero-badges > *, .about-stats > *{ min-width:0; }

:focus-visible{ outline:3px solid var(--brass); outline-offset:3px; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

/* ---------- Utilidades tipográficas ---------- */
.eyebrow-line{
  display:flex; align-items:center; gap:.75rem;
  font-size:.95rem; color:var(--brass-deep); font-weight:600;
  margin-bottom:.9rem;
}
.eyebrow-line::before{ content:''; width:28px; height:2px; background:var(--brass); flex-shrink:0; }
.section-heading{ font-size:clamp(1.9rem, 3.4vw, 2.75rem); max-width:20ch; }
.section-sub{ font-size:1.08rem; color:var(--graphite-soft); max-width:56ch; margin-top:1rem; line-height:1.6; }
.section-head{ margin-bottom: clamp(2.25rem, 4vw, 3.5rem); }
.section-head.center{ text-align:center; margin-inline:auto; }
.section-head.center .section-heading{ margin-inline:auto; }
.section-head.center .section-sub{ margin-inline:auto; }
.section-head.center .eyebrow-line{ justify-content:center; }

/* ---------- Botones ---------- */
.btn-brass, .btn-outline, .btn-ghost{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding: .85rem 1.6rem;
  font-weight:600; font-size:1rem;
  border-radius: var(--radius);
  border:1.5px solid transparent;
  cursor:pointer;
  transition: transform .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease;
  white-space:nowrap;
}
.btn-brass{ background:var(--brass); color:var(--white); }
.btn-brass:hover{ background:var(--brass-deep); transform:translateY(-2px); color:var(--white); }
.btn-outline{ border-color:var(--paper); color:var(--white); }
.btn-outline:hover{ background:var(--paper); color:var(--graphite); transform:translateY(-2px); }
.btn-ghost{ border-color:var(--graphite-line); color:var(--graphite); background:transparent; }
.btn-ghost:hover{ border-color:var(--brass); color:var(--brass-deep); }
.btn-sm{ padding:.6rem 1.15rem; font-size:.92rem; }

/* ---------- Navbar ---------- */
.site-nav{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  padding: 1.05rem 0;
  transition: background-color .3s ease, box-shadow .3s ease, padding .3s ease;
}
.site-nav.is-scrolled{
  background:rgba(243,238,228,0.96);
  backdrop-filter: blur(8px);
  box-shadow:0 4px 24px rgba(28,27,25,0.10);
  padding: .7rem 0;
}
.site-nav .nav-inner{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; }
.brand-mark{
  display:flex; align-items:center; gap:.65rem;
  font-family:var(--font-display); font-weight:700; font-size:1.28rem;
  color:var(--white); letter-spacing:.01em;
}
.brand-logo{ height:52px; width:auto; max-width:170px; object-fit:contain; display:block; }
.footer-brand .brand-logo{ height:66px; }
.site-nav.is-scrolled .brand-mark{ color:var(--graphite); }

.nav-links{ display:flex; align-items:center; gap:2rem; }
.nav-links a{ font-weight:500; font-size:.98rem; color:var(--white); position:relative; padding:.25rem 0; }
.site-nav.is-scrolled .nav-links a{ color:var(--graphite); }
.nav-links a::after{
  content:''; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--brass);
  transform:scaleX(0); transform-origin:left; transition:transform .22s ease;
}
.nav-links a:hover::after{ transform:scaleX(1); }

.nav-cta{ display:flex; align-items:center; gap:.9rem; }
.nav-toggle{
  display:none; background:transparent; border:1.5px solid rgba(255,253,248,.5); border-radius:6px;
  width:44px; height:40px; align-items:center; justify-content:center; color:var(--white);
}
.site-nav.is-scrolled .nav-toggle{ color:var(--graphite); border-color:var(--graphite-line); }

.mobile-panel{
  position:fixed; inset:0; z-index:1100;
  background:var(--graphite);
  display:flex; flex-direction:column;
  padding: 1.4rem 1.5rem 2rem;
  transform:translateX(100%);
  transition:transform .32s ease;
  overflow-y:auto;
  visibility:hidden;
}
.mobile-panel.is-open{ transform:translateX(0); visibility:visible; }
.mobile-panel .mp-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:2.2rem; }
.mobile-panel .mp-close{ background:transparent; border:1.5px solid rgba(255,253,248,.35); border-radius:6px; width:42px; height:40px; color:var(--white); }
.mobile-panel a{ color:var(--white); }
.mobile-panel ul{ display:flex; flex-direction:column; gap:0; }
.mobile-panel li{ border-bottom:1px solid rgba(255,253,248,.12); }
.mobile-panel li a{ display:block; padding:1.05rem 0; font-family:var(--font-display); font-size:1.35rem; font-weight:600; }
.mobile-panel .mp-foot{ margin-top:auto; padding-top:2rem; display:flex; flex-direction:column; gap:.9rem; }
body.no-scroll{ overflow:hidden; height:100%; }

/* ---------- Hero ---------- */
.hero{
  position:relative;
  isolation:isolate;
  min-height:92vh;
  display:flex; align-items:flex-end;
  color:var(--white);
  background:var(--graphite);
  overflow:hidden;
}
.hero .hero-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; }
.hero::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(28,27,25,.55) 0%, rgba(28,27,25,.35) 38%, rgba(28,27,25,.88) 100%);
}
.hero-content{ padding-block: 7.5rem 3.5rem; width:100%; }
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:.6rem;
  background:rgba(243,238,228,.12); border:1px solid rgba(243,238,228,.28);
  padding:.5rem 1rem; border-radius:999px; font-size:.88rem; font-weight:500;
  margin-bottom:1.6rem; backdrop-filter:blur(4px);
}
.hero-eyebrow .dot{ width:7px; height:7px; border-radius:50%; background:var(--brass-light); }
.hero h1{ font-size:clamp(2.4rem, 5.4vw, 4.4rem); max-width:15ch; color:var(--white); }
.hero h1 em{ font-style:normal; color:var(--brass-light); }
.hero-lede{ margin-top:1.4rem; font-size:1.18rem; max-width:46ch; color:rgba(255,253,248,.86); line-height:1.6; }
.hero-actions{ margin-top:2.2rem; display:flex; flex-wrap:wrap; gap:1rem; }
.hero-badges{
  margin-top:3.2rem; display:flex; flex-wrap:wrap; gap: 1rem 2.4rem;
  padding-top:2rem; border-top:1px solid rgba(255,253,248,.2);
  max-width:640px;
}
.hero-badge{ display:flex; align-items:center; gap:.65rem; font-size:.95rem; color:rgba(255,253,248,.92); }
.hero-badge .num{ font-family:var(--font-display); font-size:1.5rem; font-weight:700; color:var(--brass-light); }

/* ---------- Franja de marcas ---------- */
.brand-strip{ background:var(--graphite); color:var(--white); padding: 1.6rem 0; }
.brand-strip .container-xl{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap: 2.5rem 3.5rem; }
.brand-strip .bs-line{ font-size:.98rem; color:rgba(255,253,248,.7); }
.brand-chip{ display:flex; align-items:center; gap:.6rem; font-family:var(--font-display); font-weight:600; font-size:1.2rem; }
.brand-chip .chip-dot{ width:8px; height:8px; border-radius:50%; background:var(--brass-light); }

/* ---------- Secciones genéricas ---------- */
.section{ padding-block: var(--section-pad); }
.section.on-paper-dim{ background:var(--paper-dim); }
.section.on-dark{ background:var(--graphite); color:var(--white); }
.section.on-dark .section-heading{ color:var(--white); }
.section.on-dark .section-sub{ color:rgba(255,253,248,.75); }

/* Rendering diferido: el navegador no pinta lo que está lejos del viewport */
#controles-candados{ content-visibility:auto; contain-intrinsic-size:auto 900px; }
#galeria{ content-visibility:auto; contain-intrinsic-size:auto 900px; }
.site-footer{ content-visibility:auto; contain-intrinsic-size:auto 420px; }

/* ---------- Nosotros ---------- */
.about-grid{ display:grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 5rem); align-items:start; }
.about-stats{ display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; margin-top:2rem; }
.stat-tag{
  position:relative; background:var(--white); border:1px solid var(--paper-line);
  padding:1.5rem 1.4rem 1.4rem; border-radius: var(--radius); box-shadow:var(--shadow-soft);
}
.stat-tag::before{
  content:''; position:absolute; top:14px; right:14px; width:8px; height:8px; border-radius:50%;
  background:var(--paper); border:1.5px solid var(--brass);
}
.stat-tag .stat-num{ font-family:var(--font-display); font-size:2.1rem; font-weight:700; color:var(--brass-deep); }
.stat-tag .stat-label{ font-size:.92rem; color:var(--graphite-soft); margin-top:.3rem; }
.about-list{ margin-top:2.2rem; display:flex; flex-direction:column; gap:1.1rem; }
.about-list li{ display:flex; gap:.9rem; align-items:flex-start; font-size:1.02rem; color:var(--graphite-soft); }
.about-list li i{ color:var(--brass); font-size:1.15rem; margin-top:.15rem; flex-shrink:0; }

.about-media{ position:relative; }
.about-media .media-frame{
  border-radius: var(--radius); overflow:hidden; box-shadow:var(--shadow-lift);
  aspect-ratio: 4/5; background:var(--graphite-soft);
}
.about-media .media-frame img{ width:100%; height:100%; object-fit:cover; }
.about-media .floating-tag{
  position:absolute; left:-1.4rem; bottom:-1.4rem;
  background:var(--brass); color:var(--white);
  padding:1.2rem 1.5rem; border-radius:var(--radius); box-shadow:var(--shadow-lift);
  max-width:230px;
}
.about-media .floating-tag strong{ display:block; font-family:var(--font-display); font-size:1.3rem; margin-bottom:.2rem; }
.about-media .floating-tag span{ font-size:.9rem; color:rgba(255,253,248,.9); }

/* ---------- Grilla de servicios ---------- */
.services-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap: var(--gap); }
.tag-card{
  position:relative; background:var(--white); border:1px solid var(--paper-line);
  padding: 2.1rem 1.6rem 1.8rem; border-radius: var(--radius);
  transition: transform .22s ease, box-shadow .22s ease;
  display:flex; flex-direction:column; height:100%;
}
.tag-card::before{
  content:''; position:absolute; top:-9px; left:28px; width:18px; height:18px; border-radius:50%;
  background:var(--paper); border:2px solid var(--graphite-line);
}
.tag-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-soft); }
.tag-card .tc-icon{
  width:52px; height:52px; border-radius:50%;
  background:var(--paper-dim); color:var(--brass-deep);
  display:flex; align-items:center; justify-content:center; font-size:1.4rem; margin-bottom:1.3rem;
}
.tag-card h3{ font-size:1.28rem; margin-bottom:.6rem; }
.tag-card p{ color:var(--graphite-soft); font-size:.98rem; line-height:1.55; flex-grow:1; }
.tag-card .tc-link{ margin-top:1.1rem; font-size:.92rem; font-weight:600; color:var(--brass-deep); display:inline-flex; align-items:center; gap:.4rem; }
.tag-card .tc-link i{ transition:transform .18s ease; }
.tag-card:hover .tc-link i{ transform:translateX(4px); }

/* ---------- Sección con imagen lateral ---------- */
.feature-split{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items:center; }
.feature-split.reverse .fs-media{ order:2; }
.feature-split.reverse .fs-text{ order:1; }
.fs-media{ position:relative; }
.fs-media .media-main{
  border-radius:var(--radius); overflow:hidden; aspect-ratio:6/5; box-shadow:var(--shadow-soft);
  background:var(--graphite-soft);
}
.fs-media .media-main img{ width:100%; height:100%; object-fit:cover; }

.check-list{ margin-top:1.6rem; display:flex; flex-direction:column; gap:1rem; }
.check-list li{ display:flex; gap:.85rem; align-items:flex-start; }
.check-list .ci{
  width:26px; height:26px; border-radius:50%; background:var(--brass); color:var(--white);
  display:flex; align-items:center; justify-content:center; font-size:.78rem; flex-shrink:0; margin-top:.1rem;
}
.check-list .ct strong{ display:block; font-size:1.02rem; margin-bottom:.15rem; }
.check-list .ct span{ font-size:.94rem; color:var(--graphite-soft); }

/* ---------- Panel de marca ---------- */
.brand-panels{ display:grid; grid-template-columns:1fr 1fr; gap: var(--gap); }
.brand-panel{
  background:var(--white); border:1px solid var(--paper-line); border-radius:var(--radius);
  box-shadow:var(--shadow-soft);
  display:flex; flex-direction:column; height:100%;
  overflow:hidden;
}
.bp-media{
  aspect-ratio: 3 / 2;
  background:var(--paper-dim);
  border-bottom:1px solid var(--paper-line);
  overflow:hidden;
}
.bp-media img{
  display:block; width:100%; height:100%;
  object-fit:cover; object-position:center;
  transition:transform .5s ease;
}
.brand-panel:hover .bp-media img{ transform:scale(1.03); }

.bp-body{ padding: clamp(1.6rem, 3vw, 2.4rem); display:flex; flex-direction:column; flex:1; }
.brand-panel .bp-head{ display:flex; align-items:baseline; flex-wrap:wrap; gap:.5rem 1rem; }
.brand-panel h3{ font-size:1.55rem; }
.brand-panel .bp-official{ font-size:.85rem; color:var(--brass-deep); font-weight:600; }
.brand-panel p.bp-desc{ color:var(--graphite-soft); margin-top:.9rem; line-height:1.6; }
.bp-tags{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.4rem; }
.bp-tags span{
  background:var(--paper-dim); border:1px solid var(--paper-line); border-radius:999px;
  padding:.45rem .95rem; font-size:.86rem; color:var(--graphite-soft); font-weight:500;
}
.brand-panel .bp-modes{ margin-top:1.5rem; display:flex; flex-wrap:wrap; gap:.8rem; }
.bp-mode{ flex:1; border:1px dashed var(--paper-line); border-radius:var(--radius); padding:.9rem 1rem; text-align:center; }
.bp-mode i{ color:var(--brass-deep); font-size:1.15rem; margin-bottom:.4rem; display:block; }
.bp-mode span{ font-size:.86rem; font-weight:600; }
.brand-panel .bp-cta{ margin-top:auto; padding-top:1.6rem; }

@media (max-width: 860px){
  .brand-panels{ grid-template-columns:1fr; }
  .bp-media{ aspect-ratio: 16 / 10; }
}

/* ---------- Local vs Domicilio ---------- */
.mode-grid{ display:grid; grid-template-columns:1fr 1fr; gap: var(--gap); }
.mode-card{ border-radius:var(--radius); padding: clamp(1.8rem,3vw,2.6rem); position:relative; overflow:hidden; min-height: 100%; }
.mode-card.local{ background:var(--white); border:1px solid var(--paper-line); }
.mode-card.domicilio{ background:var(--graphite); color:var(--white); }
.mode-card .mc-icon{ width:54px; height:54px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.4rem; margin-bottom:1.3rem; }
.mode-card.local .mc-icon{ background:var(--paper-dim); color:var(--brass-deep); }
.mode-card.domicilio .mc-icon{ background:rgba(216,178,118,.15); color:var(--brass-light); }
.mode-card h3{ font-size:1.5rem; margin-bottom:.5rem; }
.mode-card.domicilio h3{ color:var(--white); }
.mode-card .mc-desc{ color:var(--graphite-soft); margin-bottom:1.4rem; }
.mode-card.domicilio .mc-desc{ color:rgba(255,253,248,.78); }
.mode-facts{ display:flex; flex-direction:column; gap:.8rem; margin-bottom:1.6rem; }
.mode-facts .mf{ display:flex; justify-content:space-between; gap:1rem; padding-bottom:.8rem; border-bottom:1px solid var(--paper-line); font-size:.96rem; }
.mode-card.domicilio .mode-facts .mf{ border-color:rgba(255,253,248,.14); }
.mode-facts .mf .k{ color:var(--graphite-soft); }
.mode-card.domicilio .mode-facts .mf .k{ color:rgba(255,253,248,.65); }
.mode-facts .mf .v{ font-weight:600; text-align:right; }
.urgent-pill{
  display:inline-flex; align-items:center; gap:.5rem; background:var(--ember); color:var(--white);
  padding:.4rem .9rem; border-radius:999px; font-size:.85rem; font-weight:600; margin-bottom:1.2rem;
}
.urgent-pill i{ font-size:.9rem; }
.map-embed{ margin-top:1.6rem; border-radius:var(--radius); overflow:hidden; border:1px solid var(--paper-line); background:var(--paper-dim); }
.map-embed iframe{ width:100%; height:230px; border:0; display:block; }

/* ---------- Fotos de llaves / controles / candados ---------- */
.keys-gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); margin-bottom: clamp(2rem, 4vw, 3rem); }
.keys-gallery figure{
  margin:0; border-radius:var(--radius); overflow:hidden;
  aspect-ratio:4 / 3; background:var(--graphite-soft); box-shadow:var(--shadow-soft);
}
.keys-gallery img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; }
.keys-gallery figure:hover img{ transform:scale(1.04); }

/* ---------- Galería ---------- */
.gallery-wrap{ max-width:1000px; margin-inline:auto; }
.carousel-pro{
  position:relative; border-radius:var(--radius); overflow:hidden;
  background:var(--graphite); box-shadow:var(--shadow-soft);
}
.carousel-pro .carousel-item{ aspect-ratio:16 / 10; background:var(--graphite); }
.carousel-pro .carousel-item img{ width:100%; height:100%; object-fit:contain; display:block; }
.carousel-pro .carousel-control-prev,
.carousel-pro .carousel-control-next{ width:8%; }

.gallery-counter{
  position:absolute; top:1rem; right:1rem; z-index:5;
  background:rgba(28,27,25,.65); color:var(--white);
  padding:.3rem .8rem; border-radius:999px;
  font-size:.85rem; font-weight:600; backdrop-filter:blur(4px);
}

.gallery-thumbs{
  display:flex; gap:.6rem; margin-top:1rem; padding-bottom:.6rem;
  overflow-x:auto; scroll-snap-type:x proximity; scrollbar-width:thin;
}
.gallery-thumbs button{
  flex:0 0 auto; width:88px; aspect-ratio:4 / 3;
  padding:0; border:2px solid transparent; border-radius:8px;
  overflow:hidden; cursor:pointer; background:var(--graphite);
  opacity:.6; transition:opacity .2s, border-color .2s;
  scroll-snap-align:center;
}
.gallery-thumbs button:hover{ opacity:.9; }
.gallery-thumbs button.active{ opacity:1; border-color:var(--brass); }
.gallery-thumbs img{ width:100%; height:100%; object-fit:cover; display:block; }

@media (max-width:600px){
  .carousel-pro .carousel-item{ aspect-ratio:4 / 3; }
  .gallery-thumbs button{ width:72px; }
}

/* ---------- CTA urgencia ---------- */
.urgency-band{
  background: linear-gradient(120deg, var(--graphite) 0%, #2A2825 100%);
  color:var(--white); border-radius:var(--radius);
  padding: clamp(2rem, 4vw, 3.2rem);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:2rem;
}
.urgency-band .ub-text h3{ color:var(--white); font-size:1.7rem; margin-bottom:.5rem; }
.urgency-band .ub-text p{ color:rgba(255,253,248,.75); max-width:46ch; }
.urgency-band .ub-actions{ display:flex; gap:1rem; flex-wrap:wrap; }

/* ---------- Contacto ---------- */
.contact-grid{ display:grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2rem,5vw,4rem); align-items:start; }
.contact-info-card{ background:var(--graphite); color:var(--white); border-radius:var(--radius); padding: clamp(1.8rem,3vw,2.6rem); }
.contact-info-card h3{ color:var(--white); font-size:1.5rem; margin-bottom:1.6rem; }
.ci-row{ display:flex; gap:1rem; padding-block:1rem; border-bottom:1px solid rgba(255,253,248,.12); }
.ci-row:last-of-type{ border-bottom:none; }
.ci-row i{ color:var(--brass-light); font-size:1.25rem; margin-top:.15rem; }
.ci-row strong{ display:block; font-size:.98rem; margin-bottom:.15rem; }
.ci-row span, .ci-row a{ font-size:.92rem; color:rgba(255,253,248,.75); }
.ci-row a:hover{ color:var(--brass-light); }
.social-row{ display:flex; gap:.8rem; margin-top:1.6rem; }
.social-row a{
  width:42px; height:42px; border-radius:50%; border:1.5px solid rgba(255,253,248,.28);
  display:flex; align-items:center; justify-content:center; color:var(--white); font-size:1.05rem;
  transition: all .18s ease;
}
.social-row a:hover{ background:var(--brass); border-color:var(--brass); }

.form-card{ background:var(--white); border:1px solid var(--paper-line); border-radius:var(--radius); padding: clamp(1.8rem,3vw,2.6rem); box-shadow:var(--shadow-soft); }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
.form-group{ margin-bottom:1.2rem; }
.form-group label{ display:block; font-size:.9rem; font-weight:600; margin-bottom:.5rem; }
.form-group input, .form-group select, .form-group textarea{
  width:100%; padding:.8rem .95rem; border:1.5px solid var(--paper-line); border-radius:var(--radius);
  font-family:inherit; font-size:.98rem; background:var(--paper); color:var(--graphite);
  transition: border-color .18s ease;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus{ border-color:var(--brass); outline:none; }
.form-note{ font-size:.85rem; color:var(--graphite-soft); margin-top:1rem; display:flex; gap:.5rem; align-items:flex-start; }
.form-note i{ margin-top:.15rem; color:var(--brass-deep); }

/* ---------- WhatsApp flotante ---------- */
.wa-float{
  position:fixed; right:1.4rem; bottom:1.4rem; z-index:900;
  width:60px; height:60px; border-radius:50%;
  background:var(--brass); color:var(--white);
  display:flex; align-items:center; justify-content:center; font-size:1.6rem;
  box-shadow:var(--shadow-lift);
  transition: transform .2s ease;
}
.wa-float:hover{ transform:scale(1.07); color:var(--white); }

/* ---------- Footer ---------- */
.site-footer{ background:var(--graphite); color:rgba(255,253,248,.75); padding-top: 4.5rem; }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 2.5rem; padding-bottom:3rem; border-bottom:1px solid rgba(255,253,248,.12); }
.footer-brand .brand-mark{ color:var(--white); margin-bottom:1rem; }
.footer-brand p{ font-size:.94rem; line-height:1.65; max-width:34ch; }
.footer-col h4{ color:var(--white); font-size:1.02rem; margin-bottom:1.2rem; font-family:var(--font-body); font-weight:600; }
.footer-col ul{ display:flex; flex-direction:column; gap:.75rem; }
.footer-col a{ font-size:.94rem; }
.footer-col a:hover{ color:var(--brass-light); }
.footer-bottom{ padding-block:1.6rem; display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem; font-size:.86rem; }
.footer-bottom a{ color:var(--brass-light); }

/* ---------- Reveal on scroll ---------- */
.reveal{ opacity:0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in-view{ opacity:1; transform:translateY(0); }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 1080px){
  .services-grid{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr; }
}

@media (max-width: 900px){
  .nav-links, .nav-cta .btn-brass{ display:none; }
  .nav-toggle{ display:flex; }
  .about-grid, .feature-split, .feature-split.reverse, .brand-panels, .mode-grid, .contact-grid{
    grid-template-columns:1fr; gap:2.5rem;
  }
  .feature-split.reverse .fs-media, .feature-split.reverse .fs-text{ order:initial; }
  .about-media .floating-tag{ position:static; margin-top:1rem; max-width:none; }
  .hero{ min-height:100vh; }
  .hero-badges{ gap:1.2rem 2rem; }
}

@media (max-width: 620px){
  .services-grid{ grid-template-columns:1fr; }
  .keys-gallery{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; gap:2.2rem; }
  .form-row{ grid-template-columns:1fr; }
  .hero-actions{ flex-direction:column; align-items:stretch; }
  .hero-actions .btn-brass, .hero-actions .btn-outline{ width:100%; }
  .urgency-band{ flex-direction:column; align-items:flex-start; }
  .brand-strip .container-xl{ gap:1.4rem 2rem; }
  .wa-float{ width:54px; height:54px; font-size:1.4rem; right:1rem; bottom:1rem; }
}

@media (max-width: 400px){
  .hero-content{ padding-block:6.5rem 2.5rem; }
}