/* Relevo — design system v4.0 (branding/design-system/tokens.json).
   Hoja común de todas las páginas. Cada página añade la suya (p-<página>.css).
   Maquetas: marketing/web/traspaso-home-v4/ y marketing/web/traspaso-web-v4/. */

@font-face{font-family:"Sora";src:url("/fuentes/Sora-latin-wght.woff2") format("woff2");font-weight:100 800;font-display:swap}
@font-face{font-family:"Manrope";src:url("/fuentes/Manrope-latin-wght.woff2") format("woff2");font-weight:200 800;font-display:swap}

/* tokens:inicio · generado desde branding/design-system/tokens.json con scripts/tokens.py, no editar a mano */
:root{
  --brand:#FF3333;
  --action:#E0242B;
  --action-hover:#B81D1D;
  --action-pressed:#8F1616;
  --brand-text:#C41F1F;
  --brand-deep:#C8141E;
  --brand-darker:#A8101A;
  --on-deep-muted:#FFE3E3;
  --brand-soft:#FFE3E3;
  --surface-tint:#FFF3F3;
  --surface:#FFFFFF;
  --surface-alt:#F5F5F6;
  --ink:#15171C;
  --ink-muted:#5A6069;
  --ink-subtle:#767C85;
  --line:#DADDE2;
  --line-strong:#767C85;
  --on-color:#FFFFFF;
  --overlay:rgba(21, 23, 28, 0.72);
  --focus:#15171C;
  --focus-on-color:#FFFFFF;
  --ok:#146C43;
  --ok-soft:#E3F4EA;
  --warn:#8A5300;
  --warn-soft:#FFF1D6;

  --font-sans:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-display:"Sora",system-ui,-apple-system,"Segoe UI",sans-serif;

  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;
  --space-7:48px;
  --space-8:64px;
  --space-9:96px;
  --container:1200px;
  --container-text:680px;
  --header-h:80px;
  --touch:44px;
  --gutter:max(16px,calc((100% - var(--container)) / 2));

  --radius-sm:4px;
  --radius-md:8px;
  --radius-lg:12px;
  --radius-xl:20px;
  --radius-pill:999px;

  --shadow-header:0 0 16px rgba(21,23,28,.12);
  --shadow-card:0 2px 8px rgba(21,23,28,.10);
  --shadow-float:0 12px 40px rgba(21, 23, 28, 0.18);
  --shadow-mock:0 1px 2px rgba(21,23,28,.05),0 8px 24px rgba(21,23,28,.06);
  --shadow-msg:0 14px 34px rgba(21,23,28,.16);

  --grad-key-word:linear-gradient(90deg,#FF3333 0%,#C8141E 100%);
  --grad-key-word-on:linear-gradient(90deg,#FFFFFF 0%,rgba(255,255,255,.72) 100%);
  --grad-figure-deep:linear-gradient(180deg, #FF3333 0%, #C8141E 100%);
  --grad-photo-to-deep:linear-gradient(180deg, rgba(200,20,30,0) 32%, rgba(200,20,30,0.78) 64%, rgba(120,10,16,0.96) 100%);
  --grad-photo-to-white:linear-gradient(180deg, rgba(255,255,255,0) 38%, rgba(255,255,255,0.88) 66%, #FFFFFF 100%);
  /* brand-panel: solo detrás de texto grande */
  --brand-panel:linear-gradient(160deg,#FF3333 0%,#C8141E 70%);
  --action-panel:var(--grad-rojo-texto);
  --grad-rojo:linear-gradient(160deg,#FF3333 0%,#C8141E 80%);
  /* Detrás de texto blanco de menos de 24 px el rojo empieza en action, nunca en brand (#FF3333 da 3,6:1) */
  --grad-rojo-texto:linear-gradient(160deg,#E0242B 0%,#C8141E 80%);
  /* El radial arranca en action: el texto blanco pequeño del hero siempre ≥4,5:1 */
  --grad-hero:radial-gradient(120% 90% at 80% 20%,#E0242B 0%,#C8141E 55%,#A8101A 100%);

  --ease-marca:cubic-bezier(.2,.8,.2,1);
  --dur-rapida:.25s;
  --dur-entrada:.7s;
  --dur-salida:1s;
  --dur-ciclo-hero:8s;
  --entrada-y:14px;
  --entrada-escala:.96;
  --salida-y:-6px;
}
/* tokens:fin */

/* ===== Base ===== */
*,*::before,*::after{box-sizing:border-box}
/* hidden gana siempre a las clases que ponen display (FAQ, avisos que muestra el JS) */
[hidden]{display:none!important}
/* Las anclas no quedan bajo la cabecera fija */
[id]{scroll-margin-top:calc(var(--header-h) + 16px)}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--surface);color:var(--ink);font-family:var(--font-sans);font-size:16px;line-height:24px;
  font-weight:500;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg,picture{display:block;max-width:100%}
h1,h2,h3,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:var(--brand-text)}
a:hover{color:var(--action-pressed)}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.sobre-color :focus-visible{outline-color:var(--on-color)}
/* Cabecera transparente sobre el hero de color: anillo blanco hasta que pasa a sólida */
.site-header :focus-visible{outline-color:var(--on-color)}
.solo-lector{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.saltar{position:absolute;left:16px;top:-100px;z-index:100;display:flex;align-items:center;min-height:var(--touch);padding:0 16px;
  background:var(--surface);color:var(--ink);border-radius:8px;font-weight:700;box-shadow:var(--shadow-msg)}
.saltar:focus{top:8px}
.contenedor{width:100%;padding:0 var(--gutter)}

/* ===== Tipografía ===== */
.hd{font-family:var(--font-display);font-weight:700;letter-spacing:-.04em;color:var(--ink);text-wrap:balance}
/* Titulares de 24 px o menos: tracking suave, el −0,04 em apelmaza las letras en tamaños pequeños */
.hd-s{letter-spacing:-.02em}
.lt{font-weight:300;opacity:.9}
.kw,.kw-on{display:inline-block;padding-right:.08em;margin-right:-.08em;font-weight:800;
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.kw{background-image:var(--grad-key-word)}
.kw-on{background-image:var(--grad-key-word-on)}
.fig{font-family:var(--font-display);font-weight:200;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.eyebrow{font-size:12px;line-height:18px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--brand-text)}
.eyebrow-on{color:var(--on-deep-muted)}
.lead{font-size:18px;line-height:28px;font-weight:500;color:var(--ink-muted)}
.body{font-size:16px;line-height:24px;font-weight:500;color:var(--ink-muted)}
.lnk{display:inline-flex;align-items:center;gap:8px;min-height:var(--touch);font-size:16px;line-height:24px;font-weight:700;text-decoration:none}
.lnk:hover{text-decoration:underline;text-underline-offset:4px}
.h2{font-size:clamp(32px,2.2vw + 21px,52px);line-height:1.04}
.linea{display:block}

/* ===== Botones ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 24px;border-radius:8px;
  border:1px solid transparent;font:700 16px/24px var(--font-sans);text-decoration:none;white-space:nowrap;cursor:pointer}
.btn-lg{height:56px;padding:0 28px}
.btn-red{background:var(--action);color:var(--on-color)}
.btn-red:hover{background:var(--action-hover);color:var(--on-color)}
.btn-red:active{background:var(--action-pressed)}
.btn-white{background:var(--surface);color:var(--ink)}
.btn-white:hover{background:var(--brand-soft);color:var(--ink)}
.btn-ghost-on{background:transparent;color:var(--on-color);border:1.5px solid var(--on-color)}
.btn-ghost-on:hover{background:rgba(255,255,255,.12);color:var(--on-color)}
.btn-line{background:var(--surface);color:var(--ink);border-color:var(--line-strong)}
.btn-line:hover{color:var(--action-pressed)}

/* ===== Piezas compartidas ===== */
.check{flex:none;display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--brand)}
.check svg{width:50%;height:50%;fill:none;stroke:#fff;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.check--20{width:20px;height:20px}
.chip{display:inline-flex;align-items:center;gap:4px;height:26px;padding:0 10px;border-radius:999px;font-size:12px;line-height:16px;font-weight:700;white-space:nowrap}
.chip-red{background:linear-gradient(162deg,#C8141E 0%,#E0242B 100%);color:var(--on-color)}
.chip-ink{background:var(--ink);color:var(--on-color)}
.icono{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.la-e{position:absolute;pointer-events:none;overflow:visible;fill:none;stroke-linejoin:round;aspect-ratio:1962 / 1553;height:auto}
.iso{fill:currentColor}

/* ===== Cabecera ===== */
.site-header{position:fixed;top:0;left:0;right:0;z-index:50;color:var(--on-color);transition:background-color .2s,box-shadow .2s,color .2s}
.site-header .barra{display:flex;align-items:center;justify-content:space-between;gap:24px;height:var(--header-h)}
.site-header .logo{display:flex;align-items:center;min-height:var(--touch);color:inherit}
.site-header .logo svg{height:25px;width:auto;fill:currentColor}
.site-header nav{display:flex;align-items:center;gap:30px}
.navl{display:inline-flex;align-items:center;min-height:var(--touch);font-size:15px;line-height:22px;font-weight:600;color:inherit;text-decoration:none;white-space:nowrap}
.navl:hover{color:inherit;text-decoration:underline;text-underline-offset:6px}
.navl[aria-current="page"]{text-decoration:underline;text-underline-offset:6px}
.site-header .btn-cab{height:44px;padding:0 20px;font-size:15px}
.menu-boton{display:none;align-items:center;justify-content:center;width:var(--touch);height:var(--touch);padding:0;border:0;background:transparent;color:inherit;cursor:pointer}
.menu-boton .icono{width:26px;height:26px}
.menu-boton .cerrar,.menu-boton[aria-expanded="true"] .abrir{display:none}
.menu-boton[aria-expanded="true"] .cerrar{display:block}
/* Cabecera sólida (al bajar, con el menú abierto o en páginas sin hero): roja, con logo, enlaces y foco en blanco.
   --action y no --brand: el blanco de 15 px necesita 4,5:1 (4,7 sobre #E0242B) */
.site-header.solido,.site-header.menu-abierto,.site-header.clara{background:var(--action);color:var(--on-color);box-shadow:var(--shadow-header)}
.site-header.solido .btn-cab,.site-header.menu-abierto .btn-cab,.site-header.clara .btn-cab{background:var(--surface);color:var(--ink)}
.site-header.solido .btn-cab:hover,.site-header.menu-abierto .btn-cab:hover,.site-header.clara .btn-cab:hover{background:var(--brand-soft);color:var(--ink)}
.site-header.solido .btn-cab:active,.site-header.menu-abierto .btn-cab:active,.site-header.clara .btn-cab:active{background:var(--on-deep-muted)}
.cab-acciones{display:flex;align-items:center;gap:6px}
/* Página activa: subrayado blanco de 2 px (la cabecera siempre va sobre rojo) */
.navl[aria-current="page"]{text-decoration-thickness:2px;text-underline-offset:8px}
/* Enlaces de dos líneas (p.ej. "Nuestro proceso / de venta"): se centran igual que el resto gracias a align-items:center en .site-header nav */
.navl--doble{flex-direction:column;align-items:center;justify-content:center;gap:1px;text-align:center}
.navl--doble .navl-l1{font-size:15px;line-height:1.15}
.navl--doble .navl-l2{font-size:12px;line-height:1.15;font-weight:500;opacity:.75}
.navl--doble:hover .navl-l1{text-decoration:underline;text-underline-offset:4px}
.navl--doble[aria-current="page"] .navl-l1{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
/* Sin hero de color el contenido empieza debajo de la cabecera fija */
.con-cabecera-clara main{padding-top:var(--header-h)}

/* ===== Hero ===== */
.hero{position:relative;overflow:hidden;color:var(--on-color);
  background:var(--grad-hero)}

/* Hero de landing (Cómo funciona, Modelo, Vender): texto a la izquierda y a la derecha la «e»
   con foto o, con .hero-landing-lado, un bloque propio como el formulario de Vender */
.hero-landing .contenedor{position:relative;display:flex;flex-direction:column;padding-top:200px;padding-bottom:112px;min-height:800px}
.hero-landing-texto{position:relative;z-index:2;display:flex;flex-direction:column;gap:20px;width:600px;max-width:100%}
.eyebrow-punto{display:flex;align-items:center;gap:12px;margin:0;font-size:13px;line-height:18px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--on-color)}
.eyebrow-punto::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--on-color);box-shadow:0 0 0 5px rgba(255,255,255,.22)}
.hero-landing-h1{margin:0;font-size:70px;line-height:1;color:var(--on-color)}
.hero-landing-lead{margin:0;font-size:19px;line-height:29px;font-weight:500;color:var(--on-color);max-width:600px}
.hero-landing .botones{margin-top:10px}
.hero-landing-fig{position:static}
/* La «e» encoge con la ventana para dejar 32 px libres a la derecha del texto (gutter + 600 + 32 - 40 de sangrado) */
.hero-landing-ew{position:absolute;right:-40px;top:150px;width:min(720px,calc(100% - var(--gutter) - 592px));aspect-ratio:1962/1553;height:auto;overflow:visible}
.hero-landing-lado .contenedor{display:grid;grid-template-columns:minmax(0,600px) minmax(0,1fr);gap:64px;align-items:start}
.hero-landing-lado .hero-landing-bloque{position:relative;z-index:2;justify-self:end;width:100%;max-width:600px}
/* Por debajo de 1180 la «e» taparía el texto: se omite y el bloque lateral baja bajo el texto */
@media (max-width:1179px){
  .hero-landing-fig{display:none}
  .hero-landing .contenedor{min-height:0;padding-bottom:64px}
  .hero-landing-lado .contenedor{grid-template-columns:minmax(0,1fr);gap:40px}
  .hero-landing-lado .hero-landing-bloque{justify-self:start;max-width:640px}
}
@media (max-width:767px){
  /* El radial de .hero empieza en #FF3333 y deja el texto blanco de 17 px en ~4,1:1 (auditoría 28/09) */
  .hero-landing{background:var(--grad-rojo-texto)}
  .hero-landing .contenedor{padding:112px var(--gutter) 48px}
  .hero-landing-h1{font-size:clamp(32px,8.8vw,38px);line-height:1.06}
  .hero-landing-lead{font-size:17px;line-height:26px}
  .hero-landing .botones{flex-direction:column;align-items:stretch}
  .hero-landing .botones .btn{width:100%}
}

.msg{display:flex;gap:12px;padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.97);color:var(--ink);box-shadow:var(--shadow-msg)}
.msg-ico{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--grad-rojo);color:#fff}
.msg-ico svg{height:13px;width:24px}
.msg-txt{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.msg-cab{display:flex;justify-content:space-between;gap:10px;font-size:12px;line-height:16px;font-weight:800;color:var(--ink-muted)}
.msg-cab time{font-weight:600}
.msg p{font-size:14.5px;line-height:20px;font-weight:600}
/* Último mensaje de la animación: cristal esmerilado rojo (el tinte al 72 % mantiene el blanco ≥4,5:1 aunque pase sobre la foto) */
.msg--vendido{background:var(--brand-deep);color:var(--on-color);border:1px solid rgba(255,255,255,.35);
  box-shadow:0 14px 34px rgba(120,10,16,.28),inset 0 1px 0 rgba(255,255,255,.28)}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .msg--vendido{background:rgba(168,16,26,.72);-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%)}
}
.msg--vendido .msg-cab{color:var(--on-color)}
.msg--vendido .msg-ico{background:rgba(255,255,255,.2)}
.msg--vendido b{font-weight:800}
.pop{animation-duration:8s;animation-iteration-count:infinite;animation-timing-function:cubic-bezier(.2,.8,.2,1);animation-fill-mode:both}
.pop1{animation-name:pop1}.pop2{animation-name:pop2}.pop3{animation-name:pop3}
.hero.pausado .pop{animation-play-state:paused}
/* Ciclo de 8 s: los mensajes entran seguidos y el último se queda a la vista unos 4 s */
@keyframes pop1{0%,4%{opacity:0;transform:translateY(14px) scale(.96)}9%,88%{opacity:1;transform:none}94%,100%{opacity:0;transform:translateY(-6px)}}
@keyframes pop2{0%,18%{opacity:0;transform:translateY(14px) scale(.96)}23%,88%{opacity:1;transform:none}94%,100%{opacity:0;transform:translateY(-6px)}}
@keyframes pop3{0%,32%{opacity:0;transform:translateY(14px) scale(.96)}37%,88%{opacity:1;transform:none}94%,100%{opacity:0;transform:translateY(-6px)}}

/* ===== Secciones ===== */
.seccion{position:relative;padding:120px 0}
.seccion--tinte{background:var(--surface-tint);padding:112px 0}
.seccion--rojo{background:var(--brand-deep);color:var(--on-color);overflow:hidden;padding:112px 0}
.seccion .contenedor{display:flex;flex-direction:column}
.cabecera{display:flex;flex-direction:column;gap:16px;align-items:center;text-align:center;max-width:820px;margin:0 auto}
.cabecera .lead{max-width:680px}

.centro{display:flex;justify-content:center}

/* ===== Páginas interiores (marketing/web/traspaso-web-v4/00-comun/base-comun.md) ===== */
.seccion .contenedor{gap:48px}
.seccion--rojo .hd{color:var(--on-color)}
.seccion--rojo .eyebrow,.seccion--rojo .lead{color:var(--on-deep-muted)}
.cabecera--izq{align-items:flex-start;text-align:left;margin:0}
.botones{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.botones--centro{justify-content:center}
.btn-white:active{background:var(--on-deep-muted)}
.btn-line:active,.btn-ghost-on:active{background:rgba(21,23,28,.08)}

.frase{font-family:var(--font-display);font-weight:700;letter-spacing:-.035em;color:var(--ink);text-wrap:balance}
.lista{display:flex;flex-direction:column;gap:12px}
.lista li{display:flex;align-items:flex-start;gap:12px;font-size:16px;line-height:24px;font-weight:600;color:var(--ink)}
.lista li > .check,.lista li > .mk{margin-top:2px}
.nnum{font-family:var(--font-display);font-weight:800;font-size:13px;line-height:18px;letter-spacing:.08em;color:var(--brand-text)}
.ncard{display:flex;flex-direction:column;gap:10px;padding:32px 28px;border-radius:12px;background:var(--surface);color:var(--ink)}
.cardb{display:flex;flex-direction:column;gap:12px;border-radius:12px;background:var(--surface);border:1px solid var(--line)}
.frame{border-radius:16px;background:var(--surface);box-shadow:var(--shadow-mock)}
.tile{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:8px;background:var(--brand-deep);color:var(--on-color)}
.tile--suave{width:44px;height:44px;background:var(--brand-soft);color:var(--action)}
.tile--suave .icono{width:22px;height:22px}

/* Marcadores de comparativa: nunca verde */
.mk{flex:none;display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%}
.mk svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.mk--ok{border:1.5px solid var(--line-strong);color:var(--ink-muted)}
.mk--neutro{background:var(--surface-alt);color:var(--ink-muted)}
.mk--mal{background:var(--brand-soft);color:var(--brand-text)}

/* Campos */
.campo,.fld{display:flex;flex-direction:column;gap:6px;min-width:0}
.campo label,.campo > span{font-size:14px;line-height:20px;font-weight:600;color:var(--ink)}
.fld > span,.fld label{font-size:13px;line-height:18px;font-weight:700;color:var(--ink)}
.campo input,.campo select,.fld input,.fld select{width:100%;height:48px;padding:0 14px;border:1px solid var(--line-strong);border-radius:8px;
  background:var(--surface);color:var(--ink);font:500 16px/24px var(--font-sans)}
.fld input,.fld select{height:var(--touch);padding:0 12px;font-size:15px}
.campo input::placeholder,.fld input::placeholder{color:var(--ink-subtle)}
.campo input:hover,.campo select:hover,.fld input:hover,.fld select:hover{border-color:var(--ink)}
.campo input:focus-visible,.campo select:focus-visible,.fld input:focus-visible,.fld select:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-color:var(--ink)}

/* Tabla de datos en dos columnas */
.tabla2{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr)}
.tabla2 > *{padding:11px 0;border-bottom:1px solid var(--line);font-size:15px;line-height:22px}
.tabla2 > :nth-child(odd){padding-right:16px;font-weight:500;color:var(--ink-muted)}
.tabla2 > :nth-child(even){font-weight:700;color:var(--ink)}

/* Pregunta con respuesta */
.qa{display:flex;flex-direction:column;gap:10px;padding:24px 0;border-top:1px solid var(--line)}
.qa a{color:var(--brand-text);font-weight:700;text-decoration:none}
.qa a:hover{text-decoration:underline;text-underline-offset:4px}

/* Chip de categoría */
.rail{display:inline-flex;align-items:center;justify-content:center;min-height:var(--touch);padding:0 16px;border-radius:999px;border:1px solid var(--line-strong);
  background:var(--surface);color:var(--ink);font:700 14px/20px var(--font-sans);cursor:pointer;white-space:nowrap}
.rail:hover{border-color:var(--ink)}
.rail.on{background:var(--ink);border-color:var(--ink);color:var(--on-color)}

/* Banda roja de cierre */
.banda{position:relative;overflow:hidden;padding:104px 0;color:var(--on-color);background:var(--brand-panel)}
.banda .contenedor{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:28px;text-align:center}
.banda .hd{color:var(--on-color);font-size:clamp(36px,2.2vw + 21px,52px);line-height:1.04;max-width:900px}
.banda .lead,.banda p{color:var(--on-color)}
.banda .la-e{width:720px;right:-180px;top:-180px;transform:rotate(10deg);stroke:rgba(255,255,255,.16);stroke-width:28}
/* Con texto pequeño debajo del titular, el rojo arranca en action para llegar a AA */
.banda:has(p:not(.hd)),.banda:has(.btn-ghost-on){background:var(--action-panel)}


.mock{display:flex;flex-direction:column;border-radius:14px;background:var(--surface);box-shadow:var(--shadow-mock);overflow:hidden}
.mock-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line);
  font-size:13px;line-height:18px;font-weight:700;color:var(--ink)}
.etq{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px;background:var(--brand-soft);color:var(--brand-text);
  font-size:12px;line-height:16px;font-weight:700;letter-spacing:.04em;white-space:nowrap}
.mock-cuerpo{padding:16px 18px 8px}
.fila{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid var(--line);font-size:14px;line-height:20px;color:var(--ink-muted)}
.fila b{color:var(--ink);font-weight:700}
.fila .con-check{display:inline-flex;align-items:center;gap:6px;align-self:center}
.mini-etq{font-size:12px;line-height:16px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted);margin-bottom:4px}
.importe{font-size:40px;line-height:46px}
.horquilla{position:relative;height:8px;border-radius:999px;background:linear-gradient(90deg,#FFE3E3,#FFB3B3,#FF3333);margin:14px 0 6px}
.horquilla::after{content:"";position:absolute;left:38%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;
  background:#fff;border:3px solid var(--action);box-shadow:0 2px 6px rgba(21,23,28,.2)}
.horquilla-pies{display:flex;justify-content:space-between;gap:8px;font-size:12px;line-height:16px;font-weight:600;color:var(--ink-muted);margin-bottom:14px}
.avisos-cab{display:flex;align-items:center;gap:10px;padding:14px 16px 6px}
.avisos-hora{font-family:var(--font-display);font-weight:300;font-size:26px;line-height:30px}
.avisos-dia{flex:1;font-size:12px;line-height:16px;font-weight:700;color:var(--ink-muted)}
.avisos-cab .etq{background:var(--surface)}
.avisos{display:flex;flex-direction:column;gap:8px;padding:8px 12px}
.aviso{display:flex;align-items:center;gap:12px;padding:8px 12px;border-radius:12px;background:var(--surface);border:1px solid var(--line)}
.aviso-ficha{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:var(--surface-alt);
  font:800 13px/1 var(--font-display);letter-spacing:-.02em;color:var(--ink)}
.aviso-ficha--app{overflow:hidden;background:none}
.aviso-ficha--app img{display:block;width:100%;height:100%}
.aviso-txt{display:flex;flex-direction:column;flex:1;min-width:0}
.aviso-cab{display:flex;justify-content:space-between;gap:8px;font-size:13px;line-height:18px;font-weight:800;color:var(--ink)}
.aviso-cab time{font-size:12px;font-weight:600;color:var(--ink-muted)}
.aviso-txt span{font-size:13px;line-height:18px;color:var(--ink-muted)}
.aviso--relevo{background:var(--grad-rojo-texto);border-color:transparent}
.aviso--relevo .aviso-ficha{background:rgba(255,255,255,.18);color:#fff}
.aviso--relevo .aviso-ficha svg{height:11px;width:20px}
.aviso--relevo .aviso-cab{color:#fff}
.aviso--relevo .aviso-cab time,.aviso--relevo .aviso-txt span{color:var(--on-color)}
.avisos-pie{padding:6px 16px 16px;font-size:13px;line-height:19px;font-weight:500;color:var(--ink-muted)}
.avisos-pie b{color:var(--ink)}
.cerrada{display:flex;align-items:center;justify-content:space-between;gap:12px}
.sello{display:inline-flex;align-items:center;height:30px;padding:0 12px;border-radius:999px;background:var(--grad-rojo-texto);color:#fff;
  font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;transform:rotate(-4deg)}
.reparto{display:flex;gap:3px;height:10px;margin:14px 0 10px}
.reparto .neto{flex:14205;background:var(--ink);border-radius:999px 0 0 999px}
.reparto .tarifa{flex:1795;background:var(--brand);border-radius:0 999px 999px 0}


/* Catálogo */
.coches-v4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;width:100%}
.car{display:flex;flex-direction:column;border-radius:8px;background:var(--surface);box-shadow:var(--shadow-card);overflow:hidden;text-decoration:none;color:var(--ink)}
.car:hover{color:var(--ink);box-shadow:0 8px 24px rgba(21,23,28,.14)}
.car:hover .car-cta{text-decoration:underline;text-underline-offset:4px}
.car-foto{position:relative;aspect-ratio:4 / 3;background:#EDEDED;overflow:hidden}
.car-foto picture,.car-foto img{width:100%;height:100%}
.car-foto img{object-fit:cover}
.car-foto .chip{position:absolute;top:12px;left:12px}
.car-cuerpo{display:flex;flex-direction:column;gap:8px;flex:1;padding:16px 16px 18px}
.car-titulo{font-size:17px;line-height:23px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.specs{display:flex;flex-wrap:wrap;gap:0 6px;font-size:13px;line-height:20px;font-weight:600;color:var(--ink-muted)}
.spec:not(:last-child)::after{content:"·";margin-left:6px;color:var(--ink-subtle)}
.car-precio-fila{display:flex;align-items:flex-end;justify-content:space-between;gap:8px;padding-top:12px;margin-top:auto;border-top:1px solid var(--line)}
.car-precio{font-size:22px;line-height:28px}
.car-precio--vendido{font-size:18px;line-height:28px}
.car-precio-sub{display:block;font-size:12px;line-height:16px;font-weight:500;color:var(--ink-muted)}
.peritado{display:inline-flex;align-items:center;gap:5px;font-size:12px;line-height:16px;font-weight:700;color:var(--ink);white-space:nowrap}
.peritado .check--20{width:18px;height:18px}
.car-cta{display:inline-flex;align-items:center;gap:6px;min-height:24px;font-size:14px;font-weight:700;color:var(--brand-text)}
/* Ficha de relleno: la rejilla de destacados siempre se completa hasta un múltiplo de 4 */
.car--proximo .car-foto{background:var(--action-panel);display:grid;place-items:center}
.car--proximo .car-foto .la-e{width:92%;left:22%;top:18%;stroke:rgba(255,255,255,.28);stroke-width:34;transform:rotate(-8deg)}
.car--proximo .car-foto .chip{background:var(--surface);color:var(--brand-text)}
.car--proximo .car-titulo{color:var(--ink)}
.car--proximo p.body{font-size:14px;line-height:20px}
.aviso-catalogo{grid-column:1 / -1;text-align:center}
.aviso-catalogo a{font-weight:700}


/* Pie */
.site-footer{background:var(--surface-alt);padding:80px 0 56px}
.site-footer .contenedor{display:flex;flex-direction:column;gap:48px}
.pie-cols{display:grid;grid-template-columns:4fr 2fr 2fr 2fr 3fr;gap:40px}
.pie-marca .iso{height:40px;width:74px;color:var(--brand)}
.pie-marca p{max-width:26em;margin-top:18px;font-size:15px;line-height:23px;color:var(--ink-muted)}
.pie-marca p b{font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.pie-col{display:flex;flex-direction:column;gap:12px}
.pie-col h2{font-size:18px;line-height:26px;letter-spacing:-.03em;margin-bottom:6px}
.flink{display:inline-flex;align-items:center;min-height:28px;font-size:14px;line-height:20px;font-weight:500;color:var(--ink-muted);text-decoration:none}
.flink--fuerte{font-weight:700;color:var(--ink)}
.redes{display:flex;gap:10px;margin-top:4px}
.redes a{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--surface);color:var(--ink)}
.redes a:hover{color:var(--brand-text)}
.redes svg{width:20px;height:20px}
.pie-legal{padding-top:24px;border-top:1px solid var(--line)}
@media (pointer:coarse),(max-width:767px){.pie-col{gap:0}.pie-col h2{margin-bottom:0}.flink{min-height:var(--touch)}.pie-legal .flink{min-height:0}}
.pie-legal .flink{font-size:13px}

/* WhatsApp y barra fija */
.wa-flotante{position:fixed;right:22px;bottom:22px;z-index:40;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;
  background:var(--action);box-shadow:0 10px 26px rgba(200,20,30,.35)}
.wa-flotante:hover{background:var(--action-hover)}
.wa-flotante svg{width:28px;height:28px;fill:#fff}
.barra-fija{display:none}

@media (prefers-reduced-motion:reduce){
  .pop{animation:none!important;opacity:1!important;transform:none!important}
  .site-header{transition:none}
}

/* ===== Escritorio estrecho ===== */
@media (max-width:1199px){
  .site-header nav{gap:20px}
}
@media (max-width:1099px){
  .navl{display:none}
  .menu-boton{display:inline-flex}
  .site-header nav{gap:6px}
  .site-header .menu-panel{position:absolute;top:var(--header-h);left:0;right:0;display:none;flex-direction:column;padding:8px var(--gutter) 24px;
    background:var(--surface);box-shadow:var(--shadow-header)}
  .site-header.menu-abierto .menu-panel{display:flex}
  .menu-panel .navl{display:flex;min-height:52px;border-bottom:1px solid var(--line);color:var(--ink);font-size:16px}
  .menu-panel .navl[aria-current="page"]{text-decoration:none}
  .menu-panel .navl--doble{align-items:flex-start;text-align:left;gap:2px}
  .menu-panel .navl--doble .navl-l2{color:var(--ink-muted)}
  .menu-panel :focus-visible{outline-color:var(--ink)}
}
@media (min-width:1100px){
  .menu-panel{display:contents}
}


/* ===== Pasos apilados ===== */
@media (max-width:1023px){
  .coches-v4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pie-cols{grid-template-columns:repeat(3,1fr)}
  .pie-marca{grid-column:1 / -1}
}

/* ===== Móvil ===== */
@media (max-width:767px){
  :root{--header-h:64px}
  .site-header .logo svg{height:21px}
  .site-header .btn-cab{height:44px;padding:0 14px;font-size:14px}
  .h2{font-size:28px;line-height:1.12;letter-spacing:-.03em}
  .lead{font-size:17px;line-height:26px}
  .cabecera{gap:12px}

  .seccion,.seccion--tinte,.seccion--rojo,.banda{padding:64px 0}
  .seccion .contenedor{gap:32px}
  .botones{flex-direction:column;align-items:stretch}
  .botones .btn{width:100%;height:auto;min-height:56px;padding:14px 20px;white-space:normal;text-align:center}
  .ncard{padding:24px 20px}
  .banda .hd{font-size:36px;line-height:1.08}
  .banda .btn{width:100%;height:auto;min-height:56px;white-space:normal}
  .banda .la-e{width:420px;right:-230px;top:-60px}
  .coches-v4{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .car-cuerpo{padding:12px 12px 14px;gap:6px}
  .car-titulo{font-size:15px;line-height:20px}
  .specs{font-size:12px;line-height:18px}
  .specs .spec:nth-child(n+3){display:none}
  .spec:nth-child(2)::after{content:none}
  .car-precio-fila{flex-direction:column;align-items:flex-start;gap:6px;padding-top:10px}
  .car-precio{font-size:19px;line-height:24px}
  .car-precio--vendido{font-size:16px;line-height:24px}
  .car-foto .chip{top:8px;left:8px;height:24px;padding:0 8px;font-size:12px}
  .car-cta{font-size:13px}
  .car--proximo p.body{font-size:13px;line-height:18px}
  .site-footer{padding:48px 0 56px}
  .pie-cols{grid-template-columns:1fr 1fr;gap:32px 24px}
  .pie-marca,.pie-col:last-child{grid-column:1 / -1}
  .wa-flotante{right:16px;bottom:calc(16px + env(safe-area-inset-bottom));transition:bottom .25s}
  body.barra-visible .wa-flotante{bottom:calc(92px + env(safe-area-inset-bottom))}
  .barra-fija{display:flex;align-items:center;justify-content:space-between;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:45;
    padding:12px 16px calc(16px + env(safe-area-inset-bottom));background:var(--surface);box-shadow:0 -8px 24px rgba(21,23,28,.12);
    transform:translateY(110%);visibility:hidden;transition:transform .25s,visibility .25s}
  body.barra-visible .barra-fija{transform:none;visibility:visible}
  .barra-fija span{font-size:13px;line-height:17px;font-weight:700;color:var(--ink)}
  .barra-fija .btn{padding:0 20px;font-size:15px}
}

/* Sin JavaScript la cabecera no se pinta: navegación mínima para no dejar la página sin salida */
.nav-sin-js{display:flex;flex-wrap:wrap;gap:4px 20px;padding:16px var(--gutter);background:var(--surface);border-bottom:1px solid var(--line)}
.nav-sin-js a{display:inline-flex;align-items:center;min-height:var(--touch);font-weight:700;color:var(--ink);text-decoration:none}