/* Landing de consignación · añade lo mínimo sobre site.css (mismos colores, tipografías y botones). Móvil primero. */

body { background: var(--blanco); }
.small { font-size: 14px; }

/* cabecera */
.lp-top { position: sticky; top: 0; z-index: 50; background: var(--blanco); border-bottom: 1px solid var(--niebla); }
.lp-top__in { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.lp-top__brand img { height: 26px; width: auto; }

/* hero: titular grande y la franja roja inclinada de la marca */
.lp-hero { position: relative; overflow: hidden; padding-block: clamp(40px, 8vw, 120px) clamp(48px, 8vw, 120px); }
.lp-hero__in { position: relative; z-index: 1; display: grid; gap: 24px; justify-items: start; }
.lp-hero__in > * { max-width: 880px; }
.lp-hero__title { font-size: clamp(34px, 7vw, 84px); }
.lp-hero__act .btn { flex: 1 1 100%; }
.lp-hero__slash { display: none; position: absolute; z-index: 0; right: -2%; top: -10%; width: 10px; height: 130%; background: var(--rojo); transform: skewX(-14deg); pointer-events: none; }
@media (min-width: 600px) { .lp-hero__act .btn { flex: 0 0 auto; } }
@media (min-width: 1100px) { .lp-hero__slash { display: block; right: 6%; width: 26px; } .lp-hero__in > * { max-width: min(760px, 60%); } }

/* beneficios */
.lp-grid3 { display: grid; gap: 0; margin-top: 28px; border-top: 1px solid var(--carbono); }
.lp-grid3 li { padding: 22px 0; border-bottom: 1px solid var(--niebla); display: grid; gap: 8px; }
.lp-grid3 p { color: #333; }
@media (min-width: 800px) {
  .lp-grid3 { grid-template-columns: repeat(3, 1fr); gap: 32px; border-top: 0; }
  .lp-grid3 li { border-top: 1px solid var(--carbono); border-bottom: 0; padding-top: 20px; align-content: start; }
}

/* cómo funciona */
.lp-how { display: grid; gap: 8px; }
.lp-steps { margin-top: 12px; }
.lp-steps li { grid-template-columns: 44px 1fr; }
@media (min-width: 900px) { .lp-how { grid-template-columns: 4fr 7fr; gap: 6vw; align-items: start; } .lp-steps { margin-top: 0; } }

/* condiciones */
.lp-conds { display: grid; gap: 24px; }
.lp-conds > * { max-width: 820px; }

/* formulario */
.lp-formwrap { display: grid; gap: 24px; }
.lp-form { background: #fff; }
@media (min-width: 640px) { .form__row--2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .lp-formwrap { grid-template-columns: 4fr 7fr; gap: 6vw; align-items: start; } }
.lp-trap { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.field input:invalid:not(:placeholder-shown):not(:focus), .field select:invalid[data-tocado]:not(:focus) { border-color: var(--carbono); box-shadow: inset 0 -3px 0 var(--rojo); }
.lp-status { padding: 12px 14px; background: var(--humo); border-left: 4px solid var(--rojo); }
.lp-status[hidden] { display: none; }
.lp-form .btn[disabled] { opacity: .6; cursor: progress; }

/* ubicación */
.lp-loc { display: grid; gap: 28px; }
.lp-loc__img { width: 100%; height: auto; background: var(--humo); }
.lp-loc .actions .btn { flex: 1 1 100%; }
@media (min-width: 600px) { .lp-loc .actions .btn { flex: 0 0 auto; } }
@media (min-width: 900px) { .lp-loc { grid-template-columns: 5fr 6fr; gap: 6vw; align-items: center; } }

/* pie */
.lp-foot { border-top: 1px solid var(--carbono); padding-block: clamp(40px, 6vw, 72px) 28px; }
.lp-foot__in { display: grid; gap: 28px; }
.lp-foot__logo { height: 40px; width: auto; margin-bottom: 14px; }
.lp-foot__list { display: grid; gap: 14px; }
.lp-foot__list b { display: block; font-weight: 600; }
.lp-foot__list a { text-decoration: underline; text-underline-offset: 3px; }
.lp-foot__legal { margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--niebla); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; }
@media (min-width: 800px) { .lp-foot__in { grid-template-columns: 1fr 2fr; } .lp-foot__list { grid-template-columns: repeat(2, 1fr); } }

/* gracias */
.lp-hero--gracias { min-height: 50svh; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
