.como-ofertar-page { background: #fff; }
.como-ofertar-hero { position: relative; min-height: 440px; display: flex; align-items: center; justify-content: center; text-align: center; background: url('/img/fotomobilehome.jpg') center/cover no-repeat; }
.como-ofertar-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20,20,20,.82), rgba(20,20,20,.55) 55%, rgba(20,20,20,.3)); }
.como-ofertar-hero .container { position: relative; z-index: 1; }
.como-ofertar-kicker { display: inline-block; padding: 6px 14px; margin-bottom: 18px; border-radius: .2rem; background: #e0040b; color: #fff; font-family: "Roboto-Medium"; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; animation: comoOfertarFade .6s ease .1s both; }
.como-ofertar-hero h1 { margin-bottom: 18px; color: #fff; font-family: "Lora-Bold"; font-size: 48px; text-transform: uppercase; animation: comoOfertarFade .7s ease .28s both; }
.como-ofertar-hero p { max-width: 600px; margin: 0 auto; color: #f0f0f0; font-family: "Roboto-Regular"; font-size: 16px; line-height: 1.6; animation: comoOfertarFade .7s ease .48s both; }
@keyframes comoOfertarFade { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

.como-ofertar-modalidades { padding: 60px 0 20px; }
.como-ofertar-modalidad { height: 100%; padding: 34px 26px; border: 1px solid #dedede; border-radius: .25rem; text-align: center; transition: box-shadow .2s ease, transform .2s ease; }
.como-ofertar-modalidad:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,.08); }
.como-ofertar-modalidad-icon { display: block; width: 60px; height: 60px; margin: 0 auto 20px; object-fit: contain; transition: transform .3s ease; }
.como-ofertar-modalidad:hover .como-ofertar-modalidad-icon { transform: scale(1.12); }
.como-ofertar-modalidad h3 { margin-bottom: 8px; color: #454545; font-family: "Lora-Bold"; font-size: 19px; text-transform: uppercase; }
.como-ofertar-modalidad p { margin: 0; color: #626262; font-family: "Roboto-Regular"; font-size: 14px; }
.como-ofertar-modalidad a { color: #e0040b; }

.como-ofertar-pasos { padding: 30px 0 50px; background: #f6f6f6; }
.como-ofertar-title { margin: 0 0 25px; padding-bottom: 20px; color: #454545; background: url('/img/separador1.png') center bottom/90px auto no-repeat; font-family: "Lora-Regular"; font-size: 36px; line-height: 1.2; text-align: center; text-transform: uppercase; }
.como-ofertar-subtitle { margin-bottom: 20px; color: #626262; font-family: "Roboto-Regular"; font-size: 14px; text-align: center; }
.como-ofertar-tabs { display: flex; gap: 16px; justify-content: center; margin-bottom: 44px; }
.como-ofertar-tabs button { padding: 12px 28px; border: 2px solid #e0040b; border-radius: .25rem; background: #fff; color: #e0040b; font-family: "Lora-Bold"; font-size: 14px; text-transform: uppercase; cursor: pointer; transition: background .2s ease, color .2s ease, transform .2s ease; }
.como-ofertar-tabs button:hover, .como-ofertar-tabs button:focus { transform: translateY(-2px); outline: none; }
.como-ofertar-tabs button.active { background: #e0040b; color: #fff; }
.como-ofertar-panel { display: none; }
.como-ofertar-panel.active { display: block; }
.como-ofertar-paso { display: flex; align-items: center; gap: 48px; margin-bottom: 56px; }
.como-ofertar-paso:nth-child(even) { flex-direction: row-reverse; }
.como-ofertar-paso-img { flex: 0 0 48%; max-width: 48%; overflow: hidden; border: 1px solid #dedede; border-radius: .25rem; background: #fff; box-shadow: 0 8px 20px rgba(0,0,0,.08); }
.como-ofertar-paso-img img { display: block; width: 100%; height: auto; transition: transform .5s ease; }
.como-ofertar-paso-img:hover img { transform: scale(1.04); }
.como-ofertar-paso-texto { flex: 1; }
.como-ofertar-numero { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-bottom: 16px; border-radius: .25rem; background: #e0040b; color: #fff; font-family: "Lora-Bold"; font-size: 18px; }
.como-ofertar-paso-texto h3 { margin-bottom: 10px; color: #454545; font-family: "Lora-Bold"; font-size: 21px; text-transform: uppercase; }
.como-ofertar-paso-texto p { margin: 0; color: #626262; font-family: "Roboto-Regular"; font-size: 15px; line-height: 1.6; }
.como-ofertar-paso-texto b { color: #454545; }
.como-ofertar-paso-texto .como-ofertar-nota { margin-top: 16px; padding: 14px 16px; border-left: 3px solid #e0040b; background: #fff; font-size: 14px; }
.como-ofertar-nota b { color: #e0040b; }

.como-ofertar-estados { padding-top: 20px; }
.como-ofertar-estados-intro { max-width: 820px; margin: 0 auto 38px; color: #626262; font-family: "Roboto-Regular"; font-size: 15px; line-height: 1.65; text-align: center; }
.como-ofertar-estado-card { height: 100%; overflow: hidden; border: 1px solid #dedede; border-radius: .25rem; background: #fff; box-shadow: 0 8px 20px rgba(0,0,0,.06); }
.como-ofertar-estado-imagen { border-bottom: 1px solid #dedede; }
.como-ofertar-estado-imagen img { display: block; width: 100%; height: auto; }
.como-ofertar-estado-imagen-svg { display: flex; align-items: center; justify-content: center; aspect-ratio: 580 / 370; padding: 24px; background: linear-gradient(to bottom, #bebebe, #eeeeee); }
.como-ofertar-estado-imagen-svg img { width: 100%; max-width: 350px; }
.como-ofertar-estado-texto { padding: 24px; }
.como-ofertar-estado-texto h4 { margin-bottom: 10px; color: #454545; font-family: "Lora-Bold"; font-size: 18px; line-height: 1.35; text-transform: uppercase; }
.como-ofertar-estado-texto p { margin: 0; color: #626262; font-family: "Roboto-Regular"; font-size: 14px; line-height: 1.6; }
.como-ofertar-estado-texto .como-ofertar-nota { margin-top: 14px; padding-top: 14px; border-top: 1px solid #dedede; }

.como-ofertar-cta { padding: 80px 0; background: linear-gradient(135deg, #fff, #f9f9f9); text-align: center; }
.como-ofertar-cta h2 { margin-bottom: 18px; color: #454545; font-family: "Lora-Regular"; font-size: 36px; text-transform: uppercase; }
.como-ofertar-cta p { margin-bottom: 32px; color: #626262; font-family: "Roboto-Regular"; font-size: 16px; }
.como-ofertar-cta-buttons { display: flex; gap: 16px; justify-content: center; }
.como-ofertar-cta-buttons a { display: inline-block; padding: 12px 32px; border-radius: .25rem; color: #fff; font-family: "Lora-Regular"; font-size: 16px; text-transform: uppercase; transition: transform .2s ease, box-shadow .2s ease; }
.como-ofertar-cta-buttons a:hover { transform: translateY(-2px); color: #fff; text-decoration: none; }
.como-ofertar-cta-buttons .btn-registrarme { background: #e0040b; }
.como-ofertar-cta-buttons .btn-registrarme:hover { box-shadow: 0 10px 20px rgba(224,4,11,.3); }
.como-ofertar-cta-buttons .btn-remates { background: #454545; }
.como-ofertar-cta-buttons .btn-remates:hover { box-shadow: 0 10px 20px rgba(0,0,0,.15); }

.como-ofertar-reveal, .reveal-left, .reveal-right { opacity: 0; transition: opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1); }
.como-ofertar-reveal { transform: translateY(26px); }
.reveal-left { transform: translateX(-46px); }
.reveal-right { transform: translateX(46px); }
.como-ofertar-reveal.is-visible, .reveal-left.is-visible, .reveal-right.is-visible { opacity: 1; transform: none; }

@media (max-width: 768px) {
    .como-ofertar-hero { min-height: 360px; }
    .como-ofertar-hero h1 { font-size: 32px; }
    .como-ofertar-title, .como-ofertar-cta h2 { font-size: 30px; }
    .como-ofertar-tabs { gap: 10px; }
    .como-ofertar-tabs button { flex: 1; padding: 11px 8px; font-size: 12px; }
    .como-ofertar-paso, .como-ofertar-paso:nth-child(even) { flex-direction: column; gap: 0; }
    .como-ofertar-paso-img { flex-basis: auto; max-width: 100%; margin-bottom: 24px; }
    .como-ofertar-paso-texto { width: 100%; text-align: center; }
    .como-ofertar-cta-buttons { flex-direction: column; align-items: center; }
    .como-ofertar-cta-buttons a { min-width: 220px; }
}

@media (prefers-reduced-motion: reduce) {
    .como-ofertar-page *, .como-ofertar-page *::before, .como-ofertar-page *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
    .como-ofertar-reveal, .reveal-left, .reveal-right { opacity: 1 !important; transform: none !important; }
}