/* Capa visual de lujo: mantiene la estructura funcional y refina sus superficies. */
:root {
  --gold-border: rgba(230, 199, 106, .42);
  --glass: rgba(245, 241, 230, .07);
  --ref-deep: #17221B;
  --ref-green: #26382C;
  --ref-gold: #F0C177;
  --ref-paper: #FFFDF8;
  --ref-muted: #66726A;
}
body { background-color: var(--ref-paper); background-image: radial-gradient(rgba(23, 34, 27, .035) 1px, transparent 1px); background-size: 18px 18px; }
.site-header { transition: min-height .3s ease, background .3s ease, box-shadow .3s ease; }
body.scrolled .site-header { background: rgba(23, 34, 27, .99); box-shadow: 0 10px 30px rgba(0, 0, 0, .16); }
.brand-altivo-logo { width: 42px; height: 42px; border-radius: 9px; object-fit: contain; background: var(--ref-paper); }
.brand strong { color: var(--ref-gold); }
.button-ghost { color: var(--ivory); border-color: rgba(240,193,119,.4); background: transparent; }
.button-ghost:hover { color: var(--ref-deep); background: var(--ref-gold); }
.hero { isolation: isolate; min-height: 620px; background: var(--ref-deep); }
.hero-photo-layer, .hero-photo-overlay { position: absolute; inset: 0; }
.hero-photo-layer { z-index: -2; overflow: hidden; }
.hero-photo-layer img { width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: .72; }
.hero-photo-overlay { z-index: -1; background: linear-gradient(90deg, rgba(23,34,27,.98) 0%, rgba(23,34,27,.86) 38%, rgba(23,34,27,.38) 75%, rgba(23,34,27,.74) 100%), linear-gradient(180deg, rgba(6,42,32,.24), rgba(6,42,32,.82)); }
.hero::before { position: absolute; z-index: -1; inset: 0; opacity: .28; background: linear-gradient(175deg, transparent 54%, rgba(230, 199, 106, .18) 54.2%, transparent 54.7%), linear-gradient(165deg, transparent 72%, rgba(230, 199, 106, .09) 72.2%, transparent 72.6%); content: ""; }
.hero h1 em { color: transparent; background: linear-gradient(105deg, #C9A24B, #FFF1AF 52%, #E6C76A); -webkit-background-clip: text; background-clip: text; }
.hero-copy { position: relative; }
.hero-copy::before { position: absolute; top: -30px; left: -30px; width: 1px; height: 120px; background: linear-gradient(var(--gold-light), transparent); content: ""; }
.hero-art { overflow: visible; }
.hero-visual { position: relative; min-height: 380px; display: grid; place-items: center; }
.hero-visual-frame { position: relative; width: min(100%, 520px); aspect-ratio: 1.18; overflow: hidden; border: 1px solid rgba(240,193,119,.62); background: rgba(6,42,32,.32); box-shadow: 0 28px 70px rgba(0,0,0,.28); backdrop-filter: blur(5px); }
.hero-visual-frame::after { position: absolute; inset: 16px; border: 1px solid rgba(240,193,119,.3); content: ""; pointer-events: none; }
.hero-route-label { position: absolute; z-index: 2; top: 22px; left: 24px; color: var(--ref-gold); font-size: .65rem; font-weight: 700; letter-spacing: .16em; }
.hero-route-label span { color: #b5d27b; }
.hero-route-svg { position: absolute; inset: 20% 4% 10%; width: 92%; height: 72%; overflow: visible; }
.hero-route-svg path { fill: none; stroke: var(--ref-gold); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 3 12; animation: route-draw 3.2s ease-out both; }
.hero-route-svg circle { fill: var(--ref-gold); filter: drop-shadow(0 0 10px rgba(240,193,119,.8)); }
.hero-visual-note { position: absolute; right: 24px; bottom: 22px; z-index: 2; color: rgba(245,241,230,.82); font-size: .72rem; }
.hero-visual-note span { margin: 0 8px; color: var(--ref-gold); }
.category-section { padding: 96px 0 88px; }
.category-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.category-card { position: relative; min-height: 220px; overflow: hidden; border-radius: 9px; color: var(--ivory); background: var(--ref-deep); box-shadow: 0 8px 24px rgba(23,34,27,.1); cursor: pointer; }
.category-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.category-card:hover img { transform: scale(1.06); }
.category-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(23,34,27,.08), rgba(23,34,27,.88)); }
.category-copy { position: absolute; right: 18px; bottom: 17px; left: 18px; display: grid; gap: 3px; }
.category-copy .icon { width: 25px; height: 25px; margin-bottom: 8px; color: var(--ref-gold); }
.category-copy strong { font-family: var(--serif); font-size: 1.08rem; }
.category-copy span { color: rgba(245,241,230,.7); font-size: .69rem; }
.category-card > a { position: absolute; inset: 0; }
.filter-bar { padding: 15px; border: 1px solid rgba(23,34,27,.12); border-radius: 9px; background: rgba(255,255,255,.5); }
.filter-bar .filter-row { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); align-items: end; gap: 10px; margin: 0; }
.filter-bar .filter-row label, .filter-actions label { min-width: 0; }
.filter-bar .filter-row select, .filter-actions select { min-width: 0; width: 100%; }
.filter-actions { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 14px; padding-top: 13px; border-top: 1px solid rgba(23,34,27,.1); }
.filter-actions > label:last-of-type { display: grid; grid-template-columns: auto 160px; align-items: center; gap: 8px; color: var(--muted); font-size: .72rem; font-weight: 700; }
.check-filter { display: flex; align-items: center; gap: 8px; color: var(--ref-green); font-size: .75rem; font-weight: 600; }
.check-filter input { width: 18px; min-height: 18px; accent-color: var(--ref-green); }
.catalog-notice { margin: 14px 0 25px; padding: 14px 16px; border-left: 3px solid var(--ref-gold); color: var(--ref-muted); background: rgba(240,193,119,.12); font-size: .78rem; }
.catalog-notice strong { margin-right: 4px; color: var(--ref-green); }
.load-card { padding: 0; border: 1px solid rgba(23,34,27,.13); border-left: 0; border-radius: 9px; background: #fff; }
.load-photo { position: relative; height: 150px; overflow: hidden; }
.load-photo img, .fleet-photo img { width: 100%; height: 100%; object-fit: cover; }
.load-photo-overlay { position: absolute; right: 11px; bottom: 10px; padding: 6px 9px; border-radius: 4px; color: var(--ref-deep); background: var(--ref-gold); font-size: .63rem; font-weight: 700; }
.load-card-content { display: flex; min-height: 295px; flex-direction: column; padding: 20px; }
.load-card-top { margin-bottom: 10px; }
.load-card h3 { color: var(--ref-deep); }
.load-card .load-footer { margin-top: auto; }
.payment-section { background: var(--ref-deep); }
.payment-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.payment-card { min-height: 230px; padding: 23px; border: 1px solid rgba(240,193,119,.25); border-radius: 9px; background: rgba(255,255,255,.045); }
.payment-card .icon { width: 27px; height: 27px; margin-bottom: 24px; color: var(--ref-gold); }
.payment-card h3 { margin-bottom: 8px; color: var(--ivory); font-size: 1.2rem; }
.payment-card p { min-height: 68px; margin-bottom: 18px; color: rgba(245,241,230,.62); font-size: .79rem; }
.payment-card span { color: var(--ref-gold); font-size: .63rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.trust-card { padding: 25px; border: 1px solid rgba(23,34,27,.14); border-radius: 9px; background: #fff; box-shadow: 0 8px 24px rgba(23,34,27,.06); }
.trust-card .icon { width: 29px; height: 29px; margin-bottom: 20px; color: var(--ref-gold); }
.trust-card h3 { margin-bottom: 7px; color: var(--ref-deep); font-size: 1.18rem; }
.trust-card p { margin: 0; color: var(--ref-muted); font-size: .8rem; }
.cta-band { display: flex; align-items: center; justify-content: space-between; gap: 34px; padding: 48px 54px; border: 1px solid rgba(23,34,27,.13); border-radius: 9px; background: #fff; box-shadow: 0 8px 24px rgba(23,34,27,.06); }
.cta-band h2 { margin-bottom: 12px; color: var(--ref-deep); }
.cta-band p:not(.eyebrow) { margin: 0; color: var(--ref-muted); }
.cta-band-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.button-outline-dark { color: var(--ref-deep); border-color: var(--ref-deep); background: transparent; }
.button-outline-dark:hover { color: var(--ivory); background: var(--ref-deep); }
.driver-cta { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.driver-cta h2 { margin-bottom: 12px; }
.driver-cta p:not(.eyebrow) { max-width: 500px; color: rgba(245,241,230,.68); }
.driver-cta > div:last-child { display: grid; gap: 18px; justify-items: start; }
.modal-dialog { width: min(650px, calc(100% - 28px)); padding: 0; border: 0; border-radius: 10px; color: var(--ref-deep); background: var(--ref-paper); box-shadow: 0 25px 80px rgba(0,0,0,.35); }
.modal-dialog::backdrop { background: rgba(6,42,32,.72); backdrop-filter: blur(7px); }
.modal-dialog.is-open { position: fixed; z-index: 30; top: 50%; left: 50%; display: block; margin: 0; transform: translate(-50%, -50%); }
body.modal-open::before { position: fixed; z-index: 29; inset: 0; background: rgba(6,42,32,.72); backdrop-filter: blur(7px); content: ""; }
.modal-inner { position: relative; max-height: min(780px, 90vh); overflow-y: auto; padding: 34px; }
.modal-inner h2 { color: var(--ref-deep); }
.modal-close { position: absolute; top: 15px; right: 15px; color: var(--ref-deep); font-size: 1.4rem; }
.modal-form { padding: 0; border: 0; box-shadow: none; background: transparent; }
.login-modal { min-height: 260px; }
.image-disclaimer { margin: 0 auto 24px; color: rgba(245,241,230,.58); font-size: .7rem; text-align: center; }
.image-fallback { background: linear-gradient(135deg, var(--ref-deep), var(--ref-green)); }
.image-fallback::after { display: grid; place-items: center; height: 100%; color: var(--ref-gold); content: "✦"; font-size: 2rem; }
.hero-art::before { position: absolute; inset: 11% 4% 8%; border: 1px solid rgba(230, 199, 106, .2); border-radius: 50% 46% 54% 42%; content: ""; transform: rotate(-9deg); }
.truck-art { filter: drop-shadow(0 20px 26px rgba(0, 0, 0, .16)); }
.land-line { fill: none; stroke: rgba(230, 199, 106, .56); stroke-width: 2; }
.land-line.far { stroke: rgba(230, 199, 106, .3); stroke-dasharray: 2 8; }
.field-line { fill: none; stroke: rgba(230, 199, 106, .25); stroke-width: 2; }
.field-line.fine { stroke-width: 1; stroke-dasharray: 1 7; }
.route-line { fill: none; stroke: var(--gold-light); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 2 11; animation: route-draw 3.2s ease-out both, route-glow 2.8s ease-in-out infinite alternate; }
.cattle-line { fill: none; stroke: rgba(245, 241, 230, .55); stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.truck-wheel-inner { fill: var(--deep); stroke: var(--gold-light); stroke-width: 2; }
.sun { fill: url(#sunset); opacity: .86; filter: drop-shadow(0 0 16px rgba(230, 199, 106, .4)); }
.spark { position: absolute; z-index: 2; width: 3px; height: 3px; border-radius: 50%; background: #fff1af; box-shadow: 0 0 12px 2px rgba(230, 199, 106, .75); animation: sparkle 3s ease-in-out infinite; }
.spark-one { top: 20%; right: 18%; }
.spark-two { top: 42%; left: 16%; animation-delay: 1s; }
.spark-three { right: 36%; bottom: 20%; animation-delay: 1.8s; }
.art-caption { letter-spacing: .04em; }
.service-card { position: relative; overflow: hidden; border-color: var(--gold-border); background: linear-gradient(145deg, rgba(255,255,255,.76), rgba(255,255,255,.32)); box-shadow: 0 14px 40px rgba(3, 25, 18, .06); backdrop-filter: blur(12px); }
.service-card::after { position: absolute; right: -32px; bottom: -45px; width: 125px; height: 125px; border: 1px solid rgba(201, 162, 75, .2); border-radius: 50%; content: ""; }
.service-card:hover { border-color: var(--gold); box-shadow: 0 18px 42px rgba(3, 25, 18, .15), 0 0 26px rgba(201, 162, 75, .12); }
.service-card .service-icon { position: relative; z-index: 1; border-color: var(--gold); background: rgba(201, 162, 75, .08); }
.bridge { position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(110deg, #062A20, #0B3D2E 60%, #0d4935); }
.bridge::before, .bridge::after { position: absolute; z-index: -1; right: -7%; left: -7%; height: 95px; border-top: 1px solid rgba(230, 199, 106, .22); border-radius: 50%; content: ""; transform: rotate(-4deg); }
.bridge::before { top: 25%; }
.bridge::after { top: 32%; opacity: .55; transform: rotate(5deg); }
.bridge-mark { box-shadow: 0 0 0 13px rgba(230, 199, 106, .035), inset 0 0 45px rgba(230, 199, 106, .04); }
.conductor-section { position: relative; background: linear-gradient(180deg, #f5f1e6 0%, #e9e4d8 100%); }
.tabs { position: relative; gap: 4px; padding: 8px; border: 1px solid rgba(11, 61, 46, .12); background: rgba(255, 255, 255, .45); }
.tab { min-height: 44px; border-bottom: 0; border-radius: 2px; }
.tab.active { color: var(--deep); background: linear-gradient(135deg, var(--gold), var(--gold-light)); box-shadow: 0 6px 18px rgba(201, 162, 75, .18); }
.load-card { position: relative; overflow: hidden; border: 1px solid rgba(11, 61, 46, .2); border-left: 3px solid var(--gold); background: #fffdf8; }
.load-card::after { position: absolute; right: -28px; bottom: -35px; width: 120px; height: 120px; border: 1px dashed rgba(201, 162, 75, .3); border-radius: 50%; content: ""; }
.load-card-top, .load-card h3, .load-route, .load-details, .load-footer { position: relative; z-index: 1; }
.load-card .load-card-top > .icon { color: var(--gold); }
.load-card h3 { font-size: 1.42rem; }
.load-footer { border-top: 1px dashed rgba(11, 61, 46, .16); padding-top: 16px; }
.load-price { color: var(--forest); letter-spacing: .02em; }
.requirements-grid .requirement-card, .guide-grid .guide-card { border-color: var(--gold-border); background: rgba(255, 255, 255, .72); box-shadow: 0 12px 28px rgba(3, 25, 18, .04); }
.checklist-head { padding: 26px 28px; border: 1px solid var(--gold-border); background: rgba(255, 255, 255, .58); }
.fleet-card { position: relative; overflow: hidden; border-color: var(--gold-border); background: linear-gradient(145deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .025)); }
.fleet-card::after { position: absolute; right: -35px; bottom: -55px; width: 140px; height: 140px; border: 1px solid rgba(230, 199, 106, .18); border-radius: 50%; content: ""; }
.fleet-card:hover { border-color: var(--gold-light); background: rgba(255,255,255,.09); }
.steps-grid { position: relative; }
.steps-grid::before { position: absolute; top: 43px; right: 11%; left: 11%; z-index: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); content: ""; transform-origin: left; animation: line-grow 1.6s .25s ease both; }
.step-card { position: relative; z-index: 1; padding-right: 15px; background: var(--ivory); }
.step-card::before { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 24px; border: 1px solid var(--gold); border-radius: 50%; background: var(--ivory); }
.stats-grid { padding: 23px; background-color: var(--deep); background-image: repeating-linear-gradient(115deg, rgba(230, 199, 106, .08) 0 1px, transparent 1px 16px), repeating-linear-gradient(25deg, rgba(230, 199, 106, .05) 0 1px, transparent 1px 24px); }
.stat-card { border-top-color: var(--gold); }
.stat-value { color: var(--gold-light); }
.stat-label { color: rgba(245, 241, 230, .72); }
.confidence-section .section-heading h2 { color: var(--forest); }
.testimonials .testimonial { border-color: var(--gold-border); background: rgba(255, 255, 255, .55); }
.form-card { position: relative; overflow: hidden; border-color: var(--gold-border); }
.form-card::before { position: absolute; top: 0; right: 0; width: 120px; height: 120px; border-left: 1px solid rgba(201, 162, 75, .18); border-bottom: 1px solid rgba(201, 162, 75, .18); border-radius: 0 0 0 100%; content: ""; }
.form-card input:focus, .form-card select:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201, 162, 75, .16); outline: 0; }
.form-card-dark input:focus, .form-card-dark select:focus { background: rgba(255,255,255,.1); }
.site-footer { position: relative; border-top: 1px solid var(--gold); }
.ganaderia-logo { width: 58px; height: 58px; object-fit: contain; object-position: center; border-radius: 50%; background: var(--ivory); }
.footer-brand { align-items: center; }
.footer-brand strong { font-size: .5rem; }
.footer-brand b { font-size: 1rem; }
.floating-whatsapp { animation: whatsapp-pulse 2.8s ease-in-out infinite; }

@keyframes route-draw { from { stroke-dashoffset: 650; } to { stroke-dashoffset: 0; } }
@keyframes route-glow { from { opacity: .55; } to { opacity: 1; } }
@keyframes sparkle { 0%, 100% { opacity: .2; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.7); } }
@keyframes line-grow { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }
@keyframes whatsapp-pulse { 0%, 100% { box-shadow: 0 8px 25px rgba(0,0,0,.2), 0 0 0 0 rgba(24,136,90,.28); } 50% { box-shadow: 0 8px 25px rgba(0,0,0,.2), 0 0 0 10px rgba(24,136,90,0); } }

@media (max-width: 650px) {
  .hero-copy::before { top: -20px; left: -12px; height: 74px; }
  .hero-photo-layer img { object-position: 58% center; }
  .hero-visual { min-height: 250px; margin-top: -14px; }
  .hero-visual-frame { width: 100%; }
  .hero-art::before { inset: 9% 0; }
  .truck-art { width: 116%; max-width: none; margin-left: -8%; }
  .tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; }
  .tab { min-width: 0; padding: 10px 8px; white-space: normal; }
  .steps-grid::before { top: 43px; right: 6%; left: 6%; display: none; }
  .stats-grid { margin-right: -8px; margin-left: -8px; padding: 12px; }
  .stat-card { padding: 16px 4px; }
  .stat-value { font-size: 2.25rem; }
  .ganaderia-logo { width: 52px; height: 52px; }
  .category-grid { grid-template-columns: repeat(2, 1fr); }
  .category-card { min-height: 180px; }
  .category-card:last-child { grid-column: 1 / -1; min-height: 150px; }
  .filter-bar .filter-row { grid-template-columns: repeat(2, 1fr); }
  .filter-actions { display: grid; align-items: stretch; }
  .filter-actions > label:last-of-type { grid-template-columns: auto 1fr; }
  .payment-grid, .trust-grid { grid-template-columns: 1fr; }
  .cta-band, .driver-cta { display: grid; padding: 30px 22px; }
  .cta-band-actions { display: grid; }
  .cta-band-actions .button { width: 100%; }
  .modal-inner { padding: 28px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .route-line, .spark, .floating-whatsapp, .steps-grid::before { animation: none; }
}