/* ============================================================
   TipsCars Marketplace — estilos compartidos (mkt.css)
   Mismo sistema visual del sitio principal.
   ============================================================ */
:root{
  --blanco:#FFFFFF; --suave:#F7F8FA; --suave2:#EEF0F3; --borde:#E6E8EC;
  --carbon:#14171C; --texto:#14171C; --gris:#6B7280;
  --naranja:#E8621A; --naranja-cta:#CF5510;
  --verde:#158a46; --verde-suave:#e7f6ee;
  --rojo:#c0392b; --rojo-suave:#fdecea;
  --amarillo:#a9760a; --amarillo-suave:#fdf4e3;
  --display:'Montserrat',system-ui,sans-serif;
  --texto-f:'Inter',system-ui,sans-serif;
  --radio:18px; --radio-sm:12px;
  --sombra:0 16px 40px rgba(20,23,28,.08);
  --max:1140px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{font-family:var(--texto-f);color:var(--texto);background:var(--suave);line-height:1.6;font-size:17px;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
img{max-width:100%;height:auto;display:block;}
a{color:var(--naranja-cta);text-decoration:none;}
h1,h2,h3{font-family:var(--display);color:var(--carbon);line-height:1.15;font-weight:800;letter-spacing:-.02em;}
.contenedor{width:100%;max-width:var(--max);margin:0 auto;padding:0 20px;}
.estrecho{max-width:560px;}

/* ---------- Cabecera ---------- */
.cab{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--borde);}
.cab__in{display:flex;align-items:center;justify-content:space-between;height:64px;}
.marca{font-family:var(--display);font-weight:800;font-style:italic;font-size:1.5rem;letter-spacing:-.02em;color:var(--carbon);}
.marca span{color:var(--naranja);}
.nav{display:flex;align-items:center;gap:6px;}
.nav a:not(.btn){font-family:var(--display);font-weight:700;font-size:.95rem;color:var(--carbon);padding:8px 13px;border-radius:8px;}
.nav a:not(.btn):hover{background:var(--suave);}

/* ---------- Botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--display);font-weight:700;font-size:.92rem;padding:11px 20px;border-radius:100px;border:2px solid transparent;cursor:pointer;transition:transform .15s,background .15s,border-color .15s;text-decoration:none;line-height:1;}
.btn:hover{transform:translateY(-2px);}
.btn--primario{background:var(--carbon);color:#fff;}
.btn--primario:hover{background:#000;}
.btn--naranja{background:var(--naranja);color:#fff;}
.btn--naranja:hover{background:var(--naranja-cta);}
.btn--linea{background:transparent;color:var(--carbon);border-color:var(--borde);}
.btn--linea:hover{border-color:var(--carbon);}
.btn--wa{background:#25D366;color:#0b3d1f;}
.btn--wa:hover{background:#1ebe5b;}
.btn--bloque{width:100%;}
.btn[disabled]{opacity:.55;cursor:not-allowed;transform:none;}

/* ---------- Tarjeta / panel ---------- */
.panel{background:var(--blanco);border:1px solid var(--borde);border-radius:var(--radio);box-shadow:var(--sombra);padding:28px;}
.panel + .panel{margin-top:20px;}

/* ---------- Encabezado de página ---------- */
.pg{padding:38px 0 8px;}
.pg .eyebrow{font-family:var(--display);font-weight:700;font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--naranja-cta);margin-bottom:10px;}
.pg h1{font-size:clamp(1.8rem,5vw,2.5rem);line-height:1.08;margin-bottom:8px;}
.pg p{color:var(--gris);}

/* ---------- Formularios ---------- */
.campo{margin-bottom:16px;}
.campo label{display:block;font-family:var(--display);font-weight:700;font-size:.86rem;color:var(--carbon);margin-bottom:6px;}
.campo .ayuda{font-weight:400;color:var(--gris);font-size:.8rem;font-family:var(--texto-f);}
.input,select.input,textarea.input{width:100%;font-family:var(--texto-f);font-size:1rem;color:var(--texto);background:var(--blanco);border:1.5px solid var(--borde);border-radius:var(--radio-sm);padding:12px 14px;transition:border-color .15s,box-shadow .15s;-webkit-appearance:none;appearance:none;}
.input:focus,select.input:focus,textarea.input:focus{outline:none;border-color:var(--naranja);box-shadow:0 0 0 3px rgba(232,98,26,.15);}
textarea.input{min-height:110px;resize:vertical;}
select.input{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:40px;}
.fila{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.prefijo{position:relative;}
.prefijo .simbolo{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--gris);font-size:1rem;pointer-events:none;}
.prefijo .input{padding-left:30px;}

/* ---------- Pestañas ---------- */
.tabs{display:flex;gap:6px;background:var(--suave2);padding:5px;border-radius:100px;margin-bottom:22px;}
.tabs button{flex:1;font-family:var(--display);font-weight:700;font-size:.92rem;padding:10px;border:0;border-radius:100px;background:transparent;color:var(--gris);cursor:pointer;transition:.15s;}
.tabs button.activa{background:var(--blanco);color:var(--carbon);box-shadow:0 2px 8px rgba(20,23,28,.1);}

/* ---------- Avisos / alertas ---------- */
.alerta{border-radius:var(--radio-sm);padding:13px 16px;font-size:.92rem;margin-bottom:16px;line-height:1.5;}
.alerta--ok{background:var(--verde-suave);color:var(--verde);border:1px solid #bfe6cf;}
.alerta--error{background:var(--rojo-suave);color:var(--rojo);border:1px solid #f5c6c0;}
.alerta--info{background:var(--amarillo-suave);color:var(--amarillo);border:1px solid #f0dcae;}
.oculto{display:none!important;}

/* ---------- Fotos (subida) ---------- */
.fotos-drop{border:2px dashed var(--borde);border-radius:var(--radio-sm);padding:24px;text-align:center;color:var(--gris);cursor:pointer;transition:border-color .15s,background .15s;}
.fotos-drop:hover{border-color:var(--naranja);background:var(--suave);}
.fotos-prev{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px;}
.fotos-prev figure{position:relative;aspect-ratio:1;border-radius:10px;overflow:hidden;border:1px solid var(--borde);}
.fotos-prev img{width:100%;height:100%;object-fit:cover;}
.fotos-prev button{position:absolute;top:4px;right:4px;width:24px;height:24px;border-radius:50%;border:0;background:rgba(20,23,28,.75);color:#fff;font-size:14px;line-height:1;cursor:pointer;display:grid;place-items:center;}

/* ---------- Pie ---------- */
.pie{background:var(--carbon);color:#AEB6C2;padding:38px 0 22px;margin-top:56px;}
.pie a{color:#AEB6C2;}
.pie a:hover{color:#fff;}
.pie__marca{font-family:var(--display);font-weight:800;font-style:italic;font-size:1.3rem;color:#fff;margin-bottom:8px;}
.pie__marca span{color:var(--naranja);}
.pie__row{display:flex;flex-wrap:wrap;gap:18px;justify-content:center;font-family:var(--display);font-weight:700;font-size:.9rem;margin:14px 0;}
.pie__base{border-top:1px solid rgba(255,255,255,.1);margin-top:18px;padding-top:16px;font-size:.82rem;text-align:center;}

/* ---------- Spinner ---------- */
.spin{display:inline-block;width:16px;height:16px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:giro .7s linear infinite;vertical-align:-2px;}
@keyframes giro{to{transform:rotate(360deg);}}

/* ---------- Responsive ---------- */
@media(max-width:600px){
  body{font-size:16px;}
  .panel{padding:22px 18px;}
  .fila{grid-template-columns:1fr;}
  .fotos-prev{grid-template-columns:repeat(3,1fr);}
}
:focus-visible{outline:3px solid var(--naranja);outline-offset:2px;border-radius:4px;}