:root{
  --surface-0:#100E0B; --surface-1:#171310; --panel:#1E1A14; --panel-2:#262019;
  --border:#362E22; --border-soft:#2A241C;
  --text-primary:#F3ECDD; --text-secondary:#BCA98A; --text-muted:#8A7A61;
  --accent:#C9A15E; --accent-soft:#332A1A; --accent-text:#E8CE94; --accent-ink:#1C1712;
  --sans: 'Manrope', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mark-opacity:.12;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --surface-0:#F7F2E7; --surface-1:#FFFDF7; --panel:#FFFFFF; --panel-2:#F1E9D8;
    --border:#E3D6B8; --border-soft:#EDE3CC;
    --text-primary:#1C1712; --text-secondary:#5C5344; --text-muted:#8C8270;
    --accent:#7C5A22; --accent-soft:#F3E6C4; --accent-text:#5E4419; --accent-ink:#FDF8EC;
    --mark-opacity:.09;
  }
}
:root[data-theme="light"]{
  --surface-0:#F7F2E7; --surface-1:#FFFDF7; --panel:#FFFFFF; --panel-2:#F1E9D8;
  --border:#E3D6B8; --border-soft:#EDE3CC;
  --text-primary:#1C1712; --text-secondary:#5C5344; --text-muted:#8C8270;
  --accent:#7C5A22; --accent-soft:#F3E6C4; --accent-text:#5E4419; --accent-ink:#FDF8EC;
  --mark-opacity:.09;
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--surface-0); color:var(--text-primary);
  font-family:var(--sans); -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit}
::selection{background:var(--accent); color:var(--accent-ink)}

.wrap{max-width:1040px; margin:0 auto; padding:0 28px}

h1,h2,h3{font-family:var(--sans); font-weight:800; margin:0; text-wrap:balance; letter-spacing:-0.01em}
.eyebrow{
  font-family:var(--sans); font-size:11.5px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--accent); margin:0 0 14px;
}

.rubrosactuales{
  font-family:var(--sans); font-size:15.5px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--accent); margin:0 0 14px; background:var(--panel-2); padding:6px 12px; border-radius:8px; display:inline-block;
}

/* ---------- header ---------- */
header.site{
  padding:22px 0; border-bottom:1px solid var(--border-soft); background-color:var(--surface-1); 
}
header.site .wrap{display:flex; align-items:center; justify-content:space-between; gap:20px}
.brand-lockup{display:flex; align-items:center; gap:11px; text-decoration:none}
.brand-lockup img{width:30px; height:30px; border-radius:7px}
.brand-lockup span{font-family:var(--sans); font-weight:800; font-size:19px; letter-spacing:.02em}
nav.site-nav{display:flex; gap:28px; font-size:14px; color:var(--text-secondary)}
nav.site-nav a{text-decoration:none; border-bottom:1px solid transparent; padding-bottom:2px; transition:color .15s ease, border-color .15s ease}
nav.site-nav a:hover, nav.site-nav a:focus-visible{color:var(--text-primary); border-color:var(--accent)}

/* ---------- hero ---------- */
.hero{padding:96px 0 84px; position:relative; overflow:hidden}
.hero > .wrap{position:relative; z-index:1}
.hero-watermark{
  position:absolute; z-index:0; top:50%; right:-6%; width:min(640px,58vw); height:auto;
  transform:translateY(-50%); opacity:var(--mark-opacity); pointer-events:none; user-select:none;
}
.hero-mark{width:64px; height:64px; margin-bottom:36px; border-radius:14px}
.hero h1{font-size:clamp(34px,5vw,54px); line-height:1.08; max-width:16ch}
.hero p.lede{
  font-size:18px; line-height:1.6; color:var(--text-secondary); max-width:46ch;
  margin:22px 0 34px;
}
.hero-scroll{
  display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--text-muted);
  text-decoration:none; border-bottom:1px solid var(--border); padding-bottom:3px;
  transition:color .15s ease, border-color .15s ease;
}
.hero-scroll:hover, .hero-scroll:focus-visible{color:var(--accent-text); border-color:var(--accent)}

.fade-up{animation:fadeUp .7s ease both}
.fade-up.d2{animation-delay:.1s}
.fade-up.d3{animation-delay:.2s}
@keyframes fadeUp{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:translateY(0)}}
@media (prefers-reduced-motion: reduce){ .fade-up{animation:none} }

/* ---------- familia (editorial paragraph) ---------- */
.familia{padding:20px 0 88px; border-bottom:1px solid var(--border-soft)}
.familia p{
  font-family:var(--sans); font-weight:500; font-style:italic;
  font-size:clamp(20px,2.3vw,26px); line-height:1.55; color:var(--text-secondary);
  max-width:36ch; letter-spacing:-0.005em;
}
.familia p em{color:var(--accent-text); font-style:italic; font-weight:600}

/* ---------- rubros ---------- */
.rubros{padding:84px 0}
.rubros > .wrap > .section-head{margin-bottom:8px}
.rubro-item{
  display:grid; grid-template-columns:minmax(0,1fr); gap:14px;
  padding:44px 0; border-bottom:1px solid var(--border-soft);
}
.rubro-item:first-of-type{border-top:1px solid var(--border-soft)}
@media (min-width:760px){
  .rubro-item{grid-template-columns:280px minmax(0,1fr); gap:40px; align-items:start}
}
.rubro-name{font-size:26px; margin:6px 0 0}
.rubro-body p{font-size:15.5px; line-height:1.65; color:var(--text-secondary); margin:0 0 18px; max-width:56ch}
.rubro-cta{
  display:inline-flex; align-items:center; gap:7px; font-size:13.5px; font-weight:600;
  color:var(--accent-text); text-decoration:none; cursor:pointer; background:none; border:0; padding:0;
  font-family:var(--sans);
}
.rubro-cta:hover, .rubro-cta:focus-visible{color:var(--accent)}
.rubro-cta svg{width:13px; height:13px; transition:transform .15s ease}
.rubro-cta:hover svg{transform:translateX(3px)}
.rubro-demo{
  display:inline-flex; align-items:center; gap:7px; font-size:13.5px; font-weight:600;
  color:var(--accent-text); text-decoration:none; cursor:pointer; background:none; border:0; padding:0;
  font-family:var(--sans);
  margin-left:12px;
}
.rubro-demo:hover, .rubro-demo:focus-visible{color:var(--accent)}
.rubro-demo svg{width:13px; height:13px; transition:transform .15s ease}
.rubro-demo:hover svg{transform:translateX(3px)}
.rubro-web{
  display:inline-flex; align-items:center; gap:7px; font-size:13.5px; font-weight:600;
  color:var(--accent-text); text-decoration:none; cursor:pointer; background:none; border:0; padding:0;
  font-family:var(--sans);
  margin-left:12px;
}
.rubro-web:hover, .rubro-web:focus-visible{color:var(--accent)}
.rubro-web svg{width:13px; height:13px; transition:transform .15s ease}
.rubro-web:hover svg{transform:translateX(3px)}

/* ---------- band: rubro nuevo ---------- */
.band{background:var(--panel-2); border-top:1px solid var(--border-soft); border-bottom:1px solid var(--border-soft)}
.band .wrap{padding:72px 28px; display:flex; flex-direction:column; align-items:flex-start; gap:20px}
.band h2{font-size:clamp(24px,3vw,32px); max-width:18ch}
.band p{font-size:15.5px; line-height:1.65; color:var(--text-secondary); max-width:52ch; margin:0}

.btn{
  display:inline-flex; align-items:center; gap:8px; font-family:var(--sans);
  background:var(--accent); color:var(--accent-ink); border:0; border-radius:8px;
  padding:13px 22px; font-size:14px; font-weight:700; cursor:pointer; text-decoration:none;
  transition:filter .15s ease, transform .15s ease;
}
.btn:hover, .btn:focus-visible{filter:brightness(1.08)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid var(--accent-text); outline-offset:3px}

/* ---------- contacto ---------- */
.contacto{padding:88px 0 100px}
.contacto .section-head{margin-bottom:40px; max-width:44ch}
.contacto .section-head p{color:var(--text-secondary); font-size:15.5px; margin:12px 0 0; line-height:1.6}
.contacto h2{font-size:clamp(26px,3vw,34px)}

form#leadForm{
  display:grid; grid-template-columns:1fr; gap:20px; max-width:600px;
  background:var(--panel); border:1px solid var(--border-soft); border-radius:14px; padding:32px;
}
@media (min-width:640px){ .field-row{display:grid; grid-template-columns:1fr 1fr; gap:20px} }
label{display:block; font-size:12px; font-weight:700; letter-spacing:.03em; color:var(--text-secondary); margin-bottom:8px}
input, select, textarea{
  width:100%; background:var(--panel-2); border:1px solid var(--border); color:var(--text-primary);
  padding:12px 13px; border-radius:8px; font-size:14px; font-family:var(--sans);
}
input:focus-visible, select:focus-visible, textarea:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
textarea{min-height:96px; resize:vertical}
#otroWrap{display:none; margin-top:14px}
#otroWrap.show{display:block}
.form-foot{display:flex; align-items:center; gap:16px; margin-top:4px}
.form-note{font-size:12px; color:var(--text-muted)}
.form-msg{font-size:13.5px; padding:12px 14px; border-radius:8px; display:none}
.form-msg.show{display:block}
.form-msg.ok{background:var(--accent-soft); color:var(--accent-text)}
.form-msg.err{background:var(--panel-2); color:var(--text-secondary); border:1px solid var(--border)}
.thanks{max-width:600px; background:var(--panel); border:1px solid var(--border-soft); border-radius:14px; padding:40px 32px}
.thanks h3{font-size:20px; margin-bottom:8px}
.thanks p{color:var(--text-secondary); font-size:14.5px; margin:0; line-height:1.6}

/* ---------- footer ---------- */
footer.site{border-top:1px solid var(--border-soft); padding:20px 0; background-color:var(--surface-1);}
footer.site .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap}
.foot-brand{display:flex; align-items:center; gap:9px; font-size:13px; color:var(--text-muted)}
.foot-brand img{width:18px; height:18px; border-radius:4px}
footer.site .foot-line{font-size:12px; color:var(--text-muted)}