/* TAXINOR Comercializadora S.A. de C.V. — estilos base */
:root {
  --verde: #3C5443;
  --verde-oscuro: #20302A;
  --verde-medio: #2A3B30;
  --azul-acero: #7C93B4;
  --azul-claro: #B9C6D6;
  --lavanda: #8B85A6;
  --hueso: #F5F7F8;
  --bruma: #E8EDF0;
  --texto: #23302A;
  --whatsapp: #25D366;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--hueso);
  color: var(--texto);
  font-family: 'Figtree', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--verde); text-decoration: none; }
a:hover { color: var(--azul-acero); }

/* Animaciones */
@keyframes tx-up { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes tx-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes tx-pulse {
  0% { box-shadow: 0 0 0 0 rgba(37,211,102,.55); }
  70% { box-shadow: 0 0 0 22px rgba(37,211,102,0); }
  100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); }
}
@keyframes tx-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Revelado al hacer scroll (js/main.js) */
.tx-reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.tx-reveal.is-visible { opacity: 1; transform: none; }

/* Preguntas frecuentes */
.faq-item { border-bottom: 1px solid rgba(60,84,67,.16); }
.faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 26px 4px; background: none; border: 0; cursor: pointer; text-align: left;
  font-family: 'Figtree', sans-serif; font-size: 18px; font-weight: 400; color: var(--verde-oscuro);
  transition: background .25s ease;
}
.faq-q:hover { background: rgba(124,147,180,.06); }
.faq-q i { color: var(--azul-acero); font-size: 14px; }
.faq-a { display: none; }
.faq-item.is-open .faq-a { display: block; }
.faq-a p {
  font-size: 16px; line-height: 1.7; color: #5C6A62; font-weight: 300;
  margin: 0; padding: 0 60px 30px 4px; max-width: 760px;
}

/* Estados hover del maquetado */
.hv1:hover {
  color:#7C93B4 !important;
}
.hv2:hover {
  color:#7C93B4 !important;
}
.hv3:hover {
  color:#7C93B4 !important;
}
.hv4:hover {
  color:#7C93B4 !important;
}
.hv5:hover {
  color:#7C93B4 !important;
}
.hv6:hover {
  background:#2A3B30 !important;
  color:#F5F7F8 !important;
  transform:translateY(-2px) !important;
}
.hv7:hover {
  color:#0E2B18 !important;
  transform:translateY(-3px) !important;
  box-shadow:0 22px 50px rgba(37,211,102,.42) !important;
}
.hv8:hover {
  background:rgba(245,247,248,.1) !important;
  color:#F5F7F8 !important;
}
.hv9:hover {
  background:#B9C6D6 !important;
  color:#20302A !important;
}
.hv10:hover {
  color:#7C93B4 !important;
}
.hv11:hover {
  background:#FFFFFF !important;
  transform:translateY(-4px) !important;
}
.hv12:hover {
  background:#FFFFFF !important;
  transform:translateY(-4px) !important;
}
.hv13:hover {
  background:#FFFFFF !important;
  transform:translateY(-4px) !important;
}
.hv14:hover {
  background:#FFFFFF !important;
  transform:translateY(-4px) !important;
}
.hv15:hover {
  background:#FFFFFF !important;
  transform:translateY(-4px) !important;
}
.hv16:hover {
  background:#FFFFFF !important;
  transform:translateY(-4px) !important;
}
.hv17:hover {
  color:#0E2B18 !important;
  transform:translateY(-3px) !important;
  box-shadow:0 24px 56px rgba(37,211,102,.44) !important;
}
.hv18:hover {
  color:#F5F7F8 !important;
}
.hv19:hover {
  color:#F5F7F8 !important;
}
.hv20:hover {
  color:#F5F7F8 !important;
}
.hv21:hover {
  color:#F5F7F8 !important;
}
.hv22:hover {
  color:#25D366 !important;
}
.hv23:hover {
  color:#F5F7F8 !important;
}
.hv24:hover {
  color:#0E2B18 !important;
  transform:scale(1.04) !important;
}

/* Responsivo */
@media (max-width: 900px) {
  header nav { order: 3; width: 100%; overflow-x: auto; gap: 22px !important; padding-bottom: 4px; }
  section { padding-left: 20px !important; padding-right: 20px !important; }
  .faq-a p { padding-right: 12px; }
}
@media (max-width: 560px) {
  footer { padding-left: 20px !important; padding-right: 20px !important; }
}