/* ═══════════════════════════════════════════════════════════════
   LOTES DE CONCURSO — lotesysubastas.com
   Identidad: verde #26A45C + tinta #101312 sobre papel #F6F4EE
   Display: Archivo Black · UI: Archivo · Párrafos: Source Serif 4
   ═══════════════════════════════════════════════════════════════ */

:root{
  --verde:      #02A44E;   /* verde exacto del logo */
  --verde-osc:  #016A33;
  --verde-lum:  #0DC963;
  --tinta:      #101312;
  --tinta-suave:#2A2F2C;
  --papel:      #F6F4EE;
  --papel-osc:  #ECE8DE;
  --piedra:     #6D736E;
  --linea:      #10131226;
  --sombra:     6px 6px 0 var(--tinta);
  --f-display:  "Archivo Black", "Archivo", sans-serif;
  --f-ui:       "Archivo", sans-serif;
  --f-serif:    "Source Serif 4", Georgia, serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--f-ui);
  background:var(--papel);
  color:var(--tinta);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
::selection{background:var(--verde);color:#fff}

/* ── Marca ─────────────────────────────────────── */
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none}
.brand-mark{width:44px;height:44px;flex:none}
.brand-mark path{fill:var(--verde)}
.brand-text{display:flex;flex-direction:column;line-height:1}
.brand-l1{font-family:var(--f-display);font-size:1.45rem;letter-spacing:.02em}
.brand-l2{font-family:var(--f-display);font-size:.62rem;letter-spacing:.34em;margin-top:.18rem}

/* ── Cabecera ──────────────────────────────────── */
.topbar{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;
  padding:.8rem clamp(1rem,4vw,2.5rem);
  background:var(--papel);
  border-bottom:2px solid var(--tinta);
}
.nav{display:flex;align-items:center;gap:clamp(.9rem,2vw,1.8rem)}
.nav a{
  text-decoration:none;font-weight:600;font-size:.92rem;letter-spacing:.02em;
  padding:.3rem 0;border-bottom:2px solid transparent;transition:border-color .15s;
}
.nav a:hover{border-color:var(--verde)}
.nav-cta{
  background:var(--tinta);color:#fff !important;
  padding:.55rem 1.2rem !important;border:none !important;
  transition:background .15s !important;
}
.nav-cta:hover{background:var(--verde)}
.nav-burger{display:none;background:none;border:none;cursor:pointer;padding:.4rem}
.nav-burger span{display:block;width:26px;height:3px;background:var(--tinta);margin:5px 0;transition:.2s}

/* ── Hero ──────────────────────────────────────── */
.hero{
  position:relative;overflow:hidden;
  background:var(--tinta);color:var(--papel);
  padding:clamp(4.5rem,10vw,8.5rem) clamp(1rem,6vw,4rem) clamp(4rem,8vw,7rem);
  background-image:
    linear-gradient(#ffffff08 1px,transparent 1px),
    linear-gradient(90deg,#ffffff08 1px,transparent 1px);
  background-size:56px 56px;
}
.hero-bg{position:absolute;inset:0;pointer-events:none}
.hero-mark{
  position:absolute;right:-4%;top:50%;transform:translateY(-50%);
  width:min(48vw,520px);color:var(--verde);opacity:.13;
}
.hero-inner{position:relative;max-width:1100px;margin:0 auto}
.hero-kicker{
  display:inline-block;font-weight:600;font-size:.85rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--verde-lum);
  border:1px solid #ffffff2e;padding:.45rem 1rem;margin-bottom:2rem;
}
.hero-title{
  font-family:var(--f-display);text-transform:uppercase;
  font-size:clamp(2.1rem,6.4vw,4.6rem);line-height:1.02;letter-spacing:.005em;
}
.hero-title span{display:block}
.hero-title .verde{color:var(--verde);}
.hero-sub{
  font-family:var(--f-serif);font-size:clamp(1.02rem,1.6vw,1.25rem);
  max-width:56ch;margin:1.8rem 0 2.4rem;color:#fffFFFcc;
}
.hero-actions{display:flex;gap:1rem;flex-wrap:wrap}

/* ── Botones ───────────────────────────────────── */
.btn{
  display:inline-block;text-decoration:none;cursor:pointer;
  font-family:var(--f-ui);font-weight:700;font-size:1rem;letter-spacing:.03em;
  padding:.85rem 1.9rem;border:2px solid var(--verde);
  transition:transform .12s, box-shadow .12s, background .15s, color .15s;
}
.btn-verde{background:var(--verde);color:#fff}
.btn-verde:hover{background:var(--verde-lum);border-color:var(--verde-lum);transform:translate(-2px,-2px);box-shadow:4px 4px 0 #00000055}
.btn-ghost{background:transparent;color:var(--papel);border-color:#ffffff55}
.btn-ghost:hover{border-color:var(--verde-lum);color:var(--verde-lum)}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
}

/* ── Secciones ─────────────────────────────────── */
.seccion{padding:clamp(3.5rem,8vw,6.5rem) clamp(1rem,6vw,4rem)}
.seccion > *{max-width:1100px;margin-left:auto;margin-right:auto}
.seccion-alt{background:var(--papel-osc);border-top:2px solid var(--tinta);border-bottom:2px solid var(--tinta)}
.seccion-oscura{background:var(--tinta);color:var(--papel)}
.sec-head{display:flex;align-items:baseline;gap:1.2rem;margin-bottom:1.6rem}
.sec-num{
  font-family:var(--f-display);font-size:.95rem;color:var(--verde);
  border:2px solid var(--verde);padding:.15rem .55rem;
}
.sec-head h2{
  font-family:var(--f-display);text-transform:uppercase;
  font-size:clamp(1.6rem,3.6vw,2.5rem);letter-spacing:.01em;
}
.sec-intro{font-family:var(--f-serif);font-size:1.12rem;max-width:64ch;margin-bottom:2.6rem}
.destacado{
  font-family:var(--f-serif);font-weight:600;
  font-size:clamp(1.15rem,2vw,1.4rem);line-height:1.45;margin-bottom:1.2rem;
}
.seccion p + p{margin-top:1rem}

/* ── Quiénes somos ─────────────────────────────── */
.qs-grid{display:grid;grid-template-columns:5fr 6fr;gap:clamp(1.6rem,4vw,3.5rem);align-items:start}
.qs-foto{position:relative}
.qs-foto img{border:2px solid var(--tinta);box-shadow:var(--sombra)}
.qs-foto figcaption{
  margin-top:1rem;font-size:.85rem;color:var(--piedra);
  padding-left:1rem;border-left:3px solid var(--verde);
}
.qs-texto p{font-family:var(--f-serif);font-size:1.05rem}
.qs-texto .destacado{font-family:var(--f-serif)}
.qs-stats{
  list-style:none;display:grid;grid-template-columns:repeat(3,1fr);
  gap:1px;background:var(--tinta);border:2px solid var(--tinta);
  margin-top:2.2rem;box-shadow:var(--sombra);
}
.qs-stats li{background:var(--papel);padding:1.1rem 1rem;display:flex;flex-direction:column;gap:.2rem}
.qs-stats strong{font-family:var(--f-display);font-size:1.25rem;color:var(--verde-osc)}
.qs-stats span{font-size:.8rem;color:var(--piedra);line-height:1.3}

/* ── Servicios ─────────────────────────────────── */
.cards-serv{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1.2rem,2.5vw,2rem)}
.card-serv{
  background:var(--papel);border:2px solid var(--tinta);
  padding:1.8rem 1.7rem 1.9rem;position:relative;
  transition:transform .15s, box-shadow .15s;
}
.card-serv:hover{transform:translate(-3px,-3px);box-shadow:var(--sombra)}
.cs-num{
  position:absolute;top:0;right:0;
  font-family:var(--f-display);font-size:.8rem;color:#fff;
  background:var(--verde);padding:.3rem .6rem;
}
.card-serv h3{
  font-family:var(--f-display);font-size:1.12rem;text-transform:uppercase;
  letter-spacing:.01em;margin-bottom:.8rem;max-width:88%;
}
.card-serv p{font-family:var(--f-serif);font-size:.98rem;color:var(--tinta-suave)}

/* ── Método ────────────────────────────────────── */
.pasos{
  list-style:none;display:grid;grid-template-columns:repeat(4,1fr);
  gap:1px;background:var(--tinta);border:2px solid var(--tinta);box-shadow:var(--sombra);
  counter-reset:paso;
}
.pasos li{background:var(--papel);padding:1.6rem 1.3rem}
.pasos li > span{
  display:inline-flex;align-items:center;justify-content:center;
  width:2.2rem;height:2.2rem;margin-bottom:.9rem;
  font-family:var(--f-display);color:#fff;background:var(--tinta);
}
.pasos h3{font-family:var(--f-display);font-size:1rem;text-transform:uppercase;margin-bottom:.5rem}
.pasos p{font-family:var(--f-serif);font-size:.92rem;color:var(--tinta-suave)}
.pasos li:hover > span{background:var(--verde)}

/* ── Sectores ──────────────────────────────────── */
.grid-sectores{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.2rem,2.5vw,1.8rem)}
.sector{border:2px solid var(--tinta);background:var(--papel);transition:transform .15s, box-shadow .15s}
.sector:hover{transform:translate(-3px,-3px);box-shadow:var(--sombra)}
.sector img{aspect-ratio:4/3;object-fit:cover;width:100%}
.sector figcaption{
  font-family:var(--f-display);font-size:.88rem;text-transform:uppercase;letter-spacing:.06em;
  background:var(--tinta);color:var(--papel);padding:.7rem 1rem;
  border-top:2px solid var(--tinta);
}
.sector:hover figcaption{background:var(--verde-osc)}
.sector-ancho{grid-column:1/-1}
.sector-ancho img{aspect-ratio:21/9}

/* ── Alcance ───────────────────────────────────── */
.seccion-oscura .sec-num{color:var(--verde-lum);border-color:var(--verde-lum)}
.alcance-grid{display:grid;grid-template-columns:6fr 5fr;gap:clamp(1.8rem,4vw,3.5rem);align-items:start}
.alcance-texto p{font-family:var(--f-serif);color:#ffffffd4;font-size:1.05rem}
.alcance-texto .destacado{color:var(--papel)}
.alcance-lista{list-style:none;display:flex;flex-direction:column;gap:1px;background:#ffffff2a;border:1px solid #ffffff2a}
.alcance-lista li{background:var(--tinta);padding:1.05rem 1.3rem;display:flex;flex-direction:column;gap:.15rem}
.alcance-lista strong{font-family:var(--f-display);font-size:1.02rem;text-transform:uppercase;letter-spacing:.04em;color:var(--verde-lum)}
.alcance-lista span{font-size:.88rem;color:#ffffffb0}
.alcance-prox strong{color:var(--papel)}
.alcance-prox{border-left:4px solid var(--verde)}

/* ── Contacto ──────────────────────────────────── */
.contacto-grid{display:grid;grid-template-columns:5fr 6fr;gap:clamp(1.8rem,4vw,3.5rem);align-items:start}
.contacto-info p{font-family:var(--f-serif);font-size:1.02rem}
.contacto-datos{list-style:none;margin-top:1.8rem;display:flex;flex-direction:column;gap:.9rem}
.contacto-datos li{display:flex;flex-direction:column;gap:.1rem;padding-left:1rem;border-left:3px solid var(--verde)}
.contacto-datos span{font-size:.78rem;text-transform:uppercase;letter-spacing:.14em;color:var(--piedra)}
.contacto-datos strong{font-size:1.02rem}
.contacto-datos a{text-decoration:none;border-bottom:2px solid var(--verde)}

.form{background:#fff;border:2px solid var(--tinta);box-shadow:var(--sombra);padding:clamp(1.4rem,3vw,2.2rem)}
.form-fila{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.form label{display:flex;flex-direction:column;gap:.35rem;font-weight:600;font-size:.88rem;margin-bottom:1.1rem}
.form input,.form textarea{
  font-family:var(--f-ui);font-size:1rem;color:var(--tinta);
  background:var(--papel);border:2px solid var(--tinta);padding:.65rem .8rem;
  transition:border-color .15s, background .15s;resize:vertical;
}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--verde);background:#fff}
.hp{position:absolute !important;left:-9999px !important;height:1px;width:1px;overflow:hidden}
.form-legal{font-size:.78rem;color:var(--piedra);margin-bottom:1.2rem}
.form .btn{width:100%}
.form-estado{margin-top:1rem;font-weight:600;min-height:1.4em}
.form-estado.ok{color:var(--verde-osc)}
.form-estado.error{color:#b3261e}

/* ── Pie ───────────────────────────────────────── */
.pie{
  background:var(--tinta);color:var(--papel);
  padding:3.2rem clamp(1rem,6vw,4rem) 2.4rem;text-align:center;
  border-top:6px solid var(--verde);
}
.pie-brand{display:inline-flex;align-items:center;gap:.7rem;margin-bottom:1.4rem}
.pie p{font-size:.92rem;color:#ffffffb8}
.pie-mail a{color:var(--verde-lum);text-decoration:none;font-weight:600}
.pie-copy{margin-top:1.6rem;font-size:.78rem;color:#ffffff69}

/* ── Reveal on scroll ──────────────────────────── */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease, transform .6s ease}
.reveal.visto{opacity:1;transform:none}
.d1{transition-delay:.05s}.d2{transition-delay:.15s}.d3{transition-delay:.25s}
.d4{transition-delay:.4s}.d5{transition-delay:.55s}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none}
}

/* ── Responsive ────────────────────────────────── */
@media (max-width: 900px){
  .qs-grid,.alcance-grid,.contacto-grid{grid-template-columns:1fr}
  .cards-serv{grid-template-columns:1fr}
  .pasos{grid-template-columns:repeat(2,1fr)}
  .grid-sectores{grid-template-columns:repeat(2,1fr)}
  .hero-mark{right:-30%;opacity:.09}
}
@media (max-width: 640px){
  .nav{
    display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--papel);border-bottom:2px solid var(--tinta);
  }
  .nav.abierto{display:flex}
  .nav a{padding:1rem clamp(1rem,4vw,2.5rem);border-bottom:1px solid var(--linea)}
  .nav-cta{margin:.8rem clamp(1rem,4vw,2.5rem) 1.2rem;text-align:center}
  .nav-burger{display:block}
  .grid-sectores{grid-template-columns:1fr}
  .pasos{grid-template-columns:1fr}
  .form-fila{grid-template-columns:1fr}
  .qs-stats{grid-template-columns:1fr}
}