/* home.css — estilos específicos de index.html */

/* ── Hero ── */
.hero {
  min-height: 100vh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding: 8rem clamp(1.5rem,6vw,5rem) 5rem;
  position: relative; overflow: hidden;
}
/* subtle dot grid */
.hero::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image: radial-gradient(circle, var(--border) 1px, transparent 1px);
  background-size: 32px 32px;
  opacity: .5;
}
/* soft vignette so dots fade at edges */
.hero::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(ellipse 80% 70% at 50% 40%, transparent 30%, var(--bg) 100%);
}
.hero > * { position: relative; z-index:1; }

.hero-kicker {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--white); border: 1px solid var(--border);
  border-radius: 99px; padding: .3rem 1rem;
  font-size: .75rem; font-weight: 600; letter-spacing: .08em;
  color: var(--ink-muted); margin-bottom: 1.75rem;
  animation: fadeUp .5s ease both;
}
.hero h1 {
  font-family: var(--font-head);
  font-size: clamp(2.8rem, 6.5vw, 5.2rem);
  font-weight: 700; letter-spacing: -.03em; line-height: 1.02;
  color: #2c2c1e; max-width: 780px;
  margin-bottom: 1.25rem;
  /* sin fadeUp — el typewriter reemplaza la animación de entrada */
}
.hero h1 em { font-style: italic; color: #a07850; }

/* cursor parpadeante durante la escritura */
.hero h1.tw-active::after {
  content: '|';
  color: #a07850;
  font-weight: 300;
  animation: twBlink .65s step-end infinite;
}
@keyframes twBlink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}
.hero-sub {
  font-size: 1.05rem; color: var(--ink-muted); font-weight: 300;
  max-width: 520px; line-height: 1.75; margin-bottom: 1rem;
  animation: fadeUp .5s .15s ease both;
}
.hero-value {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--bg-2); border: 1px solid var(--border-dk);
  border-radius: var(--r); padding: .6rem 1.2rem;
  font-size: .9rem; color: var(--ink-mid); font-weight: 500;
  margin-bottom: 2.5rem;
  animation: fadeUp .5s .2s ease both;
}
.hero-value strong { color: var(--ink); }
.hero-actions {
  display: flex; gap: .75rem; flex-wrap: wrap; justify-content: center;
  animation: fadeUp .5s .26s ease both;
}

/* ── Products grid ── */
.products-section { background: var(--white); }
.products-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;
}
@media(max-width:680px) { .products-grid { grid-template-columns: 1fr; } }

.product-card {
  border-radius: var(--r-xl); border: 1px solid var(--border);
  overflow: hidden; transition: transform .25s, box-shadow .25s;
  display: flex; flex-direction: column;
  text-decoration: none;
}
.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.10);
}
.product-card-top {
  padding: 2.5rem 2.5rem 2rem;
  display: flex; flex-direction: column; gap: 1rem;
  flex: 1;
}
.product-tag {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .7rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; padding: .25rem .75rem;
  border-radius: 99px; width: fit-content;
}
.product-card h3 {
  font-family: var(--font-head); font-size: 1.6rem; font-weight: 700;
  letter-spacing: -.02em; color: var(--ink); line-height: 1.1;
}
.product-card h3 em { font-style: italic; }
.product-card p {
  font-size: .9rem; color: var(--ink-muted); line-height: 1.65; font-weight: 300;
}
.product-card-cta {
  padding: 1.25rem 2.5rem;
  display: flex; align-items: center; justify-content: space-between;
  border-top: 1px solid var(--border);
  font-size: .85rem; font-weight: 600;
  transition: padding-left .2s;
}
.product-card:hover .product-card-cta { padding-left: 2.75rem; }
.arrow { font-size: 1.1rem; }

.card-agro { background: var(--bg); }
.card-agro .product-tag  { background: var(--agro-xlt); color: var(--agro); }
.card-agro .product-card-cta { color: var(--agro); background: var(--agro-xlt); border-color: var(--agro-lt); }

.card-wheels { background: var(--bg); }
.card-wheels .product-tag  { background: var(--wheels-xlt); color: var(--wheels); }
.card-wheels .product-card-cta { color: var(--wheels); background: var(--wheels-xlt); border-color: var(--wheels-lt); }

/* ── How it works ── */
.how-section { background: var(--bg-2); }
.how-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 1.5rem; }
.how-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 2rem;
  transition: transform .2s, border-color .2s;
}
.how-card:hover { transform: translateY(-3px); border-color: var(--border-dk); }
.how-num {
  font-family: var(--font-head); font-size: 2.5rem; font-weight: 700;
  color: var(--border-dk); line-height: 1; margin-bottom: .75rem;
}
.how-card h3 { font-family: var(--font-head); font-size: 1rem; font-weight: 600; color: var(--ink); margin-bottom: .4rem; }
.how-card p  { font-size: .875rem; color: var(--ink-muted); line-height: 1.65; }

.how-video { max-width: 780px; margin: 2.5rem auto 0; }
.how-video-player {
  width: 100%; display: block;
  border-radius: var(--r-lg); border: 1px solid var(--border);
  background: #000;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
@media(max-width:680px) {
  .how-video { max-width: 340px; }
  .how-video-player { aspect-ratio: 9 / 16; }
}

/* ── Contact ── */
.contact-section { background: var(--white); }
.contact-wrap { max-width: 540px; margin: 0 auto; }
.contact-form {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 2.5rem;
  display: flex; flex-direction: column; gap: 1.1rem;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media(max-width:480px) { .form-row { grid-template-columns: 1fr; } }
.form-field { display: flex; flex-direction: column; gap: .4rem; }
.form-field label { font-size: .75rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-muted); }
.form-field input, .form-field textarea, .form-field select {
  background: var(--white); border: 1.5px solid var(--border);
  border-radius: var(--r); padding: .75rem 1rem;
  color: var(--ink); font-family: var(--font-body); font-size: .9rem;
  outline: none; transition: border-color .2s; -webkit-appearance: none;
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus { border-color: var(--ink); }
.form-field textarea { resize: vertical; min-height: 100px; }
.btn-submit {
  background: var(--ink); color: var(--white);
  font-family: var(--font-body); font-weight: 600; font-size: .95rem;
  padding: .9rem; border-radius: var(--r); border: none; cursor: pointer;
  transition: background .2s;
}
.btn-submit:hover { background: var(--ink-mid); }
.contact-alt { text-align: center; margin-top: 1rem; font-size: .85rem; color: var(--ink-muted); }
.contact-alt a { color: var(--ink); font-weight: 600; }
.form-success { display:none; text-align:center; padding:1.5rem; font-family:var(--font-head); font-size:1.1rem; color:var(--ink); font-weight:600; }

/* ── Testimonials ── */
.testi-grid{ display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem; }
.testi-card{ background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);padding:2rem;display:flex;flex-direction:column;gap:1.25rem; }
.testi-quote{ font-size:.95rem;color:var(--ink);line-height:1.7;flex:1;font-style:italic; }
.testi-quote::before{ content:'\201C';font-family:var(--font-head);font-size:2rem;color:var(--border);line-height:0;vertical-align:-.4rem;margin-right:.2rem; }
.testi-divider{ height:1px;background:var(--border); }
.testi-author{ display:flex;align-items:center;gap:.75rem; }
.testi-avatar{ width:40px;height:40px;border-radius:50%;flex-shrink:0;background:var(--bg-2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:700;color:var(--ink-mid);letter-spacing:.02em; }
.testi-name{ font-size:.875rem;font-weight:600;color:var(--ink); }
.testi-role{ font-size:.78rem;color:var(--ink-muted); }