/* Relevo — /vender (design system v4.0). Hoja propia de esta página.
   Reutiliza ds.css: .hero, .btn, .botones, .seccion/--tinte/--rojo, .cabecera/--izq, .h2, .eyebrow,
   .lead, .frase, .lista, .nnum, .ncard, .campo, .mk, .check, .chip/-red, .mock/-head/-cuerpo, .etq,
   .avisos/.aviso/-ficha/-txt/-cab, .fig, .fila, .la-e, .icono, .iso.
   Maqueta: marketing/web/traspaso-web-v4/vender/ */

/* ===== Check invertido (círculo blanco, marca de color) y tamaño 22 px ===== */
.check--22{width:22px;height:22px}
.v-check-inv{background:var(--surface)}
.v-check-inv svg{stroke:var(--brand-deep)}

/* ===== 1. Portada: componente .hero-landing de ds.css; aquí solo el formulario ===== */
.v-hero-form{display:flex;flex-direction:column;gap:20px;padding:40px;border-radius:28px;background:var(--surface);color:var(--ink);box-shadow:0 24px 60px rgba(120,10,16,.35)}
.v-hero-form-h{font-size:32px;line-height:1.1;letter-spacing:-.03em;color:var(--ink);margin:0}
.v-hero-form-sub{font:500 16px/24px var(--font-sans);color:var(--ink-muted);margin:-8px 0 4px}
.v-hero-form .captacion{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.v-hero-form .captacion button{grid-column:1 / -1}

/* ===== 3. El modelo ===== */
#argumento .cabecera--izq{max-width:860px}
.v-modelo-split{display:flex;align-items:stretch;gap:24px;max-width:1000px;margin:0 auto;width:100%}
.v-modelo-col{flex:1;display:flex;flex-direction:column;gap:18px;padding:36px;border-radius:16px}
.v-modelo-tit{font:700 12px/18px var(--font-sans);letter-spacing:.16em;text-transform:uppercase;margin:0}
.v-modelo-tu{background:var(--surface);border:1px solid var(--line)}
.v-modelo-tu .v-modelo-tit{color:var(--ink-muted)}
.v-modelo-venta{background:var(--grad-rojo-texto);box-shadow:0 18px 40px rgba(200,20,30,.28);color:var(--on-color)}
.v-modelo-venta .v-modelo-tit{color:var(--on-color)}
.v-modelo-venta .lista li{color:var(--on-color)}
.v-modelo-flecha{flex:none;align-self:center;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--brand-soft);color:var(--action)}
.v-modelo-flecha .icono{width:22px;height:22px}
.v-modelo-flecha .icono.abajo{display:none}
.v-modelo-frase{font-size:40px;line-height:1.12;text-align:center;max-width:900px;margin:0 auto}

/* ===== 4. El problema ===== */
#problema .cabecera--izq{max-width:900px}
.v-problema{display:grid;grid-template-columns:7fr 5fr;gap:32px;align-items:center}
.v-problema-col2{display:flex;flex-direction:column;gap:18px}
.v-problema .avisos-hora{font-size:26px;line-height:30px}
.v-problema .avisos{max-height:378px;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 78%,transparent 100%);mask-image:linear-gradient(180deg,#000 0%,#000 78%,transparent 100%)}
.v-problema .aviso-ficha svg{width:16px;height:16px}
.v-problema-pie{max-width:900px}
/* Hover dinámico: cada aviso se resalta al pasar el ratón o el foco, para que la lista se sienta interactiva, no solo decorativa */
.v-problema .aviso{border-radius:10px;transition:background-color .18s ease,transform .18s ease}
.v-problema .aviso:hover,.v-problema .aviso:focus-within{background:var(--surface-tint);transform:translateX(4px)}

/* En directo */
.v-directo .mock-head{justify-content:space-between}
.v-directo-marca{display:flex;align-items:center;gap:0}
.v-directo-marca .iso{height:13px;width:auto;color:var(--brand)}
.v-directo-en{display:inline-flex;align-items:center;gap:7px;font:700 12px/16px var(--font-sans);color:var(--brand-text)}
.v-directo-punto{width:8px;height:8px;border-radius:50%;background:var(--action);box-shadow:0 0 0 4px var(--brand-soft)}
.v-directo-cuerpo{padding:4px 18px 8px}
.v-directo-fila{padding:14px 0;font:600 14px/20px var(--font-sans);color:var(--ink)}
.v-directo-est{flex:none;display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:999px;font-size:12px;line-height:16px;white-space:nowrap}
.v-directo-est svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.v-directo-est--ok{background:var(--brand-soft);color:var(--brand-text);font-weight:800}
.v-directo-est--no{background:var(--surface-alt);color:var(--ink-muted);font-weight:700}

/* ===== 5. La diferencia ===== */
#comparativa .cabecera--izq{max-width:860px}
.v-comp-tablawrap{padding-top:14px}
.v-tabla{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}
.v-tabla col.v-c-etq{width:22%}
.v-tabla col.v-c-yo{width:30%}
.v-tabla col.v-c-otro{width:24%}
.v-tabla th,.v-tabla td{text-align:left;vertical-align:top;padding:18px 20px;border-bottom:1px solid var(--line);font-size:15px;line-height:22px}
.v-tabla thead th{padding-top:0;padding-bottom:18px;border-bottom:0;font:700 13px/18px var(--font-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted);height:68px}
.v-tabla tbody th{font-weight:700;color:var(--ink)}
.v-tabla tbody td{font-weight:500;color:var(--ink-muted)}
.v-tabla .v-yo{position:relative;background:var(--surface-tint)}
.v-tabla th.v-yo{border:2px solid var(--action);border-bottom:0;border-radius:12px 12px 0 0;padding-top:22px}
.v-tabla td.v-yo{border-left:2px solid var(--action);border-right:2px solid var(--action);font-weight:700;color:var(--ink)}
.v-tabla tbody tr:last-child td.v-yo{border-bottom:2px solid var(--action);border-radius:0 0 12px 12px}
.v-tabla .v-yo-logo{display:block;height:22px;width:auto;fill:currentColor;color:var(--ink)}
.v-tabla .chip-red{position:absolute;top:-13px;left:20px;text-transform:uppercase;letter-spacing:.08em}
.cel{display:flex;gap:10px;align-items:flex-start}
.cel .check{margin-top:1px}
.v-tabla .cel .check{width:20px;height:20px}

.v-tarjetas{display:none;flex-direction:column;gap:12px}
.v-tarjeta{display:flex;flex-direction:column;gap:12px;padding:20px 18px;border-radius:12px;background:var(--surface);border:1px solid var(--line)}
.v-tarjeta-tit{font-size:18px;line-height:24px;letter-spacing:-.03em;margin:0}
.v-tarjeta-yo{display:flex;flex-direction:column;gap:6px;padding:10px 12px;border-radius:8px;background:var(--surface-tint)}
.v-tarjeta-yo-etq{font:800 12px/16px var(--font-sans);letter-spacing:.1em;text-transform:uppercase;color:var(--brand-text)}
.v-tarjeta-yo .cel{font:700 15px/22px var(--font-sans);color:var(--ink)}
.v-tarjeta .cel{font:500 14px/21px var(--font-sans);color:var(--ink-muted)}
.v-tarjeta .cel b{color:var(--ink)}

.v-comp-frase{font-size:36px;line-height:1.12;text-align:center;max-width:900px;margin:0 auto}

/* ===== 6. Valoración ===== */
#valoracion .cabecera--izq{max-width:860px}
.v-ficha{display:grid;grid-template-columns:5fr 7fr;border-radius:20px;overflow:hidden;background:var(--surface);box-shadow:var(--shadow-mock);min-height:460px}
.v-ficha-foto{position:relative;min-height:100%;background:var(--brand-deep)}
.v-ficha-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:30% 50%}
.v-ficha-foto::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(200,20,30,0) 32%,rgba(200,20,30,.78) 64%,rgba(120,10,16,.96) 100%)}
.v-ficha-txt{position:absolute;left:36px;right:36px;bottom:36px;z-index:1;font-size:32px;line-height:1.15;letter-spacing:-.03em;color:var(--on-color);margin:0}
.v-ficha--banner{grid-template-columns:1fr;min-height:380px}
.v-valoracion-cta{margin:-8px 0 40px}
.v-enviado{grid-column:1 / -1;display:flex;flex-direction:column;gap:14px;padding:20px;border-radius:12px;background:var(--surface-tint)}
.v-enviado .body{margin:0}
.v-enviado .btn{align-self:flex-start}
.v-enviado:focus{outline:none}
.campo-trampa{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}

/* ===== 7. Cómo funciona ===== */
.v-pasos{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.v-paso{display:flex;flex-direction:column;gap:12px;padding-top:20px;border-top:2px solid var(--line);transition:border-top-color .2s ease,transform .2s ease;transform-origin:center top}
/* Hover dinámico: el borde rojo ya no queda fijo en el primer paso, se mueve al paso sobre el que estás (ratón o teclado) */
.v-paso:first-child,.v-paso:hover,.v-paso:focus-within{border-top-color:var(--action)}
/* Auditoría 2026-09/10 (feedback Óscar): efecto de "crecer" al pasar el ratón, igual que en /modelo */
.v-paso:hover,.v-paso:focus-within{position:relative;z-index:1;transform:scale(1.06)}
.v-paso h3{font-size:22px;line-height:28px;letter-spacing:-.03em;margin:0}

/* ===== 8. El mandato ===== */
#dias .cabecera--izq{max-width:860px}
.v-dias-lista{position:relative;display:grid;grid-template-columns:repeat(3,1fr);list-style:none;margin:0;padding:0}
.v-dias-lista::before{content:"";position:absolute;left:0;right:0;top:10px;height:2px;background:rgba(255,255,255,.45)}
.v-dias-item{position:relative;display:flex;flex-direction:column;gap:10px;padding-right:24px;transition:transform .2s ease;transform-origin:center top}
/* Auditoría 2026-09/10 (feedback Óscar): mismo efecto de "crecer" al pasar el ratón o el foco que en los pasos de arriba */
.v-dias-item:hover,.v-dias-item:focus-within{z-index:2;transform:scale(1.06)}
.v-dias-punto-caja{position:relative;z-index:1;display:flex;align-items:center;height:22px}
.v-dias-punto{width:14px;height:14px;border-radius:50%;background:var(--on-color)}
.v-dias-item--central .v-dias-punto{width:22px;height:22px;box-shadow:0 0 0 6px rgba(255,255,255,.25)}
.v-dias-txt{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.v-dias-dia{font:700 12px/18px var(--font-sans);letter-spacing:.16em;text-transform:uppercase;color:var(--brand-soft);margin:0}
.v-dias-txt h3{font-size:22px;line-height:30px;letter-spacing:-.03em;color:var(--on-color);margin:0}
.v-dias-item--central .v-dias-txt h3{font-size:24px}
.v-dias-txt p{font:500 16px/25px var(--font-sans);color:var(--brand-soft);margin:0}

/* ===== 9. Precio y transparencia ===== */
.v-tarifas{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px}
.v-tarifa{display:flex;flex-direction:column;gap:8px;padding:26px 22px;border-radius:12px;background:var(--surface);border:1px solid var(--line)}
.v-tarifa-rango{font:700 14px/20px var(--font-sans);color:var(--ink-muted)}
.v-tarifa-cifra{font-size:clamp(34px,3.2vw,46px);line-height:1.1;white-space:nowrap;color:var(--ink)}
.v-tarifa-igic{font:500 14px/20px var(--font-sans);color:var(--ink-muted)}
.v-precio-final{display:flex;flex-direction:column;gap:10px;width:100%;padding:32px 36px;border-radius:16px;background:var(--surface-tint)}
.v-precio-final .frase{font-size:34px;line-height:1.15;text-align:left}
.v-precio-final p{font:500 16px/24px var(--font-sans);color:var(--ink-muted);margin:0}
.v-precio-final .btn{margin-top:10px;align-self:flex-start}

/* ===== 10. Lo incómodo, por delante ===== */
.v-incomodo{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;align-items:stretch}

/* ===== 11. Cierre ===== */
.v-cierre{position:relative;overflow:hidden;background:var(--brand-deep);color:var(--on-color)}
.v-cierre-foto{position:absolute;top:0;right:0;width:1100px;max-width:none;height:100%;object-fit:cover;object-position:70% 50%}
.v-cierre-capa{position:absolute;inset:0;background:linear-gradient(90deg,var(--brand-deep) 0%,var(--brand-deep) 36%,rgba(200,20,30,.8) 50%,rgba(200,20,30,.25) 70%,rgba(200,20,30,.1) 100%)}
/* Auditoría 2026-10 (feedback Óscar, bug confirmado en vivo a 1440px): el atajo de dos valores dejaba el padding
   horizontal en 0 salvo en los rangos donde los media queries de abajo lo restauraban explícitamente; con el gutter
   general el bloque de texto deja de quedar pegado a los bordes en cualquier ancho de pantalla. */
.v-cierre .contenedor{position:relative;z-index:1;padding:130px var(--gutter)}
.v-cierre-texto{display:flex;flex-direction:column;gap:22px;max-width:640px}
.v-cierre-h2{font-size:64px;line-height:1.04;color:var(--on-color)}
.v-cierre-texto p{font:500 19px/29px var(--font-sans);max-width:620px;margin:0}
.v-cierre-texto .botones{margin-top:6px}

/* ================= 1024 / 768 — rejillas de tres columnas apiladas ================= */
@media (max-width:1023px){
  .v-problema{grid-template-columns:1fr}
  .v-ficha{grid-template-columns:1fr}
  .v-pasos{grid-template-columns:repeat(2,1fr)}
  .v-tarifas{grid-template-columns:repeat(2,1fr)}
  .v-tarifa:last-child{grid-column:1/-1}
  /* Auditoría 2026-09 (P1.6): en escritorio estrecho la foto de 1100px de ancho fijo puede acercarse demasiado al texto;
     se reduce y se adelanta el degradado para que el cierre nunca quede cortado. Confirmado en producción: seguía pegado
     al borde (feedback Óscar), se añade también un suelo de separación lateral. */
  .v-cierre-foto{width:820px}
  .v-cierre-capa{background:linear-gradient(90deg,var(--brand-deep) 0%,var(--brand-deep) 30%,rgba(200,20,30,.8) 46%,rgba(200,20,30,.25) 68%,rgba(200,20,30,.1) 100%)}
  .v-cierre .contenedor{padding-left:max(var(--gutter),40px);padding-right:max(var(--gutter),40px)}
}

/* Auditoría 2026-09 (feedback Óscar tras despliegue): entre 1024 y 1199 px la foto seguía a 1100 px de ancho fijo
   (el ajuste de arriba solo entraba por debajo de 1024 px) y, con el gutter general en su mínimo de 16 px en todo ese
   rango, el texto del cierre quedaba prácticamente pegado al borde izquierdo de la ventana. Habitual en portátiles
   con la ventana no maximizada. */
@media (min-width:1024px) and (max-width:1199px){
  .v-cierre-foto{width:920px}
  .v-cierre-capa{background:linear-gradient(90deg,var(--brand-deep) 0%,var(--brand-deep) 32%,rgba(200,20,30,.8) 47%,rgba(200,20,30,.25) 69%,rgba(200,20,30,.1) 100%)}
  .v-cierre .contenedor{padding-left:max(var(--gutter),40px);padding-right:max(var(--gutter),40px)}
}

/* ================= 767 — móvil ================= */
@media (max-width:767px){
  .v-hero-form{padding:28px 20px;border-radius:22px;gap:16px}
  .v-hero-form-h{font-size:26px}
  /* Marca/modelo y año/isla caben en dos columnas; los datos de contacto van a ancho completo */
  .v-hero-form .captacion{gap:14px 12px}
  .v-hero-form .captacion .campo:nth-child(n+6){grid-column:1 / -1}

  .v-modelo-split{flex-direction:column;gap:12px}
  .v-modelo-col{padding:28px 24px}
  .v-modelo-flecha{align-self:center;transform:rotate(90deg)}
  .v-modelo-flecha .icono.derecha{display:none}
  .v-modelo-flecha .icono.abajo{display:block}
  .v-modelo-frase{font-size:28px}

  .v-problema{gap:20px}
  .v-problema .avisos{max-height:420px}

  .v-directo-fila:nth-child(-n+3){padding:16px 0}

  .v-comp-tablawrap{display:none}
  .v-tarjetas{display:flex}
  .v-comp-frase{font-size:26px}

  .v-ficha-foto{min-height:300px}
  .v-ficha-foto img,.v-ficha-foto::after{position:absolute}
  .v-ficha-foto{height:300px}
  .v-ficha-txt{left:20px;right:20px;bottom:20px;font-size:24px}

  .v-pasos{grid-template-columns:1fr;gap:28px}
  .v-incomodo{grid-template-columns:1fr;gap:24px}

  .v-dias-lista{grid-template-columns:none;display:flex;flex-direction:column}
  .v-dias-lista::before{left:10px;top:12px;bottom:40px;right:auto;width:2px;height:auto}
  .v-dias-item{display:grid;grid-template-columns:22px 1fr;gap:18px;padding:0 0 32px;align-items:start}
  .v-dias-item:last-child{padding-bottom:0}
  .v-dias-punto-caja{padding-top:2px;height:auto}
  .v-dias-txt{margin-top:0}

  /* minmax(0,1fr): sin esto el ancho mínimo por contenido (nowrap de v-tarifa-cifra) desborda la pista a 300/320 */
  .v-tarifas{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .v-tarifa{padding:20px 16px}
  .v-tarifa-cifra{font-size:30px;white-space:normal}
  .v-precio-final{padding:24px 20px}
  .v-precio-final .frase{font-size:26px}
  /* fuera de .botones: ds.css no le aplica el white-space:normal/min-height 56 de .botones .btn en móvil */
  .v-precio-final .btn{width:100%;height:auto;min-height:56px;padding:14px 20px;white-space:normal;text-align:center}

  /* Auditoría 2026-09 (feedback Óscar tras despliegue): el atajo de tres valores dejaba left/right en 0,
     así que el bloque de texto quedaba pegado a los dos bordes del móvil; se restaura el gutter general. */
  .v-cierre .contenedor{padding:56px var(--gutter) 300px}
  .v-cierre-foto{top:auto;bottom:0;left:0;right:auto;width:100%;height:330px;object-position:60% 50%}
  .v-cierre-capa{background:linear-gradient(180deg,var(--brand-deep) 0%,var(--brand-deep) 58%,rgba(200,20,30,.45) 76%,rgba(200,20,30,.1) 100%)}
  .v-cierre-texto{max-width:none}
  .v-cierre-h2{font-size:36px;line-height:1.08}
  /* En móvil el efecto de "crecer" al pasar el ratón no aplica, el acceso es táctil y por foco */
  .v-paso:hover,.v-paso:focus-within,.v-dias-item:hover,.v-dias-item:focus-within{transform:none}
}

/* Barra fija móvil: el pie necesita hueco para que la barra no la tape (auditoría 28/09) */
@media (max-width:767px){
  .site-footer{padding-bottom:140px}
}

@media (prefers-reduced-motion:reduce){
  .v-problema .aviso{transition:none}
  .v-paso{transition:none}
  .v-paso:hover,.v-paso:focus-within,.v-dias-item:hover,.v-dias-item:focus-within{transform:none}
}